/* Terraria-style UI theme, layered over style.css and rails.css: translucent blue rounded panels with black
   borders, inventory-slot chips, and white text with a hard black outline (yellow when highlighted). */
:root {
  --bg: #0b0e1e;
  --ink: #ffffff;
  --ink-dim: #e4e8ff;
  --ink-faint: #aab4e6;
  --gold: #ffe14a;
  --gold-deep: #d7a514;
  --miss: #ff6b6b;
  --panel: rgba(46, 60, 128, 0.86);
  --panel-edge: #070a1c;
  --slot: rgba(29, 39, 92, 0.82);
  --slot-hi: rgba(73, 94, 171, 0.95);
  --line: rgba(190, 205, 255, 0.22);
  --f-pixel: "Mali", "Trebuchet MS", system-ui, sans-serif;
  --f-label: "Mali", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Mali", "Trebuchet MS", system-ui, sans-serif;
  --ol: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000;
  --ol1: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
  --radius: 12px;
}
body { font-weight: 600; }

/* world overlays: the world now carries its own lighting, so only a light vignette remains */
.depth-shade { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0, 0, 0, calc(0.12 + var(--heat) * 0.25)) 100%); }
.lamplight { opacity: calc(var(--under, 0) * 0.7); }

/* ---------- panels ---------- */
.screen, #s-surface .panel, .rail-panel, .toast {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 2px rgba(150, 170, 255, 0.16), 0 4px 0 rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1.5px);
}
#s-surface { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.me, .today-card, .rules li, .share pre, .profile, .chip, .opt, .tab, .ores span, .acct-body > *:not(.row):not(p) {
  border-radius: 8px;
}
.me, .today-card, .share pre, .profile, .chip, .opt, .tab, .ores span {
  background: var(--slot);
  border: 2px solid var(--panel-edge);
  box-shadow: inset 0 0 0 2px rgba(150, 170, 255, 0.1);
}

/* ---------- type: white with a hard outline, mixed case like the game ---------- */
.eyebrow, .tagline, .rail-title, .rail-sub, .rl-name, .prompt-q, .zone-name, .final-depth, .fx-answer, .fx-pts, .fx-tier, .fx-land span, .fx-land small,
.hud-chip, .btn, .tab, .opt, .ores span, .stat b, .stat span, .rules b, .bank-count, .lamp-meta, .gain, .toast b, .toast small, .rl-stat b, .rl-total b, .rl-now b,
.rl-p, .rl-tier-pts b, .gauge .tick span, .facts .fact, .fx-line .lbl, .fx-line .fact, .fx-rule, .fx-skip, .legal-links a, .me-info b, .rank, .log .p, .spread h3, .cuts h3 {
  text-transform: none; letter-spacing: 0.01em; text-shadow: var(--ol);
}
.eyebrow, .tagline { font: 700 0.95rem/1.2 var(--f-label); color: var(--gold); }
.tagline { color: var(--ink); }
.lede, .flavor, .rules li, .rl-zone-fact, .rl-note { text-shadow: var(--ol1); color: var(--ink-dim); }
.rules b { font: 700 0.9rem/1.2 var(--f-label); color: var(--gold); }
.prompt-q { font: 700 clamp(1.7rem, 5.4vw, 2.7rem)/1.1 var(--f-pixel); }
.zone-name { font: 700 clamp(2.2rem, 8vw, 3.8rem)/0.95 var(--f-pixel); text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 3px 0 #000, 3px 0 0 #000, -3px 0 0 #000, 0 -3px 0 #000; }
.final-depth { font: 700 clamp(3rem, 12vw, 5.4rem)/0.9 var(--f-pixel); text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 4px 0 #000; }
.stat b, .today-card b, .rl-stat b, .rl-total b, .rl-now b, .log .p, .rl-p, .rl-tier-pts b { font-family: var(--f-pixel); font-weight: 700; }
.stat span, .rl-stat span, .rl-total > span, .rl-now small, .rl-tier-pts small, .rl-status, .bank-count, .lamp-meta, .me-info > span, .gain { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink-faint); text-shadow: var(--ol1); }
.rail-title { font: 700 1.45rem/1 var(--f-pixel); }
.rail-sub { color: var(--gold); }
.rl-q, .log .q, .rl-tier-odds, .rl-zone-depth { color: var(--ink-faint); text-shadow: var(--ol1); }
.rl-a, .log .a, .your-answer, .rl-zone-name, .rl-tier-name { text-shadow: var(--ol1); }

/* ---------- the logo ---------- */
.wordmark.logo { display: block; margin: 0; line-height: 0; text-shadow: none; -webkit-text-stroke: 0; }
.wordmark.logo img { display: block; width: min(560px, 86vw); height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }

/* ---------- buttons: blue slots that light up yellow ---------- */
.btn {
  border: 2px solid var(--panel-edge); border-radius: 10px;
  background: linear-gradient(#5d78d6, #3c54ac);
  color: #fff; font: 700 1.15rem/1 var(--f-pixel); padding: 11px 18px 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 3px 0 rgba(0, 0, 0, 0.5);
  transition: transform .08s, color .08s;
}
.btn:hover { filter: none; color: var(--gold); transform: scale(1.04); }
.btn:active { transform: translateY(2px) scale(1.02); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5); }
.btn.primary { background: linear-gradient(#6fbf48, #3f8a2a); color: #fff; }
.btn.primary:hover { color: var(--gold); }
.btn.small { font-size: 0.98rem; padding: 7px 12px 8px; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-dim); font: 700 1rem/1 var(--f-body); text-shadow: var(--ol); }
.btn.ghost:hover { color: var(--gold); transform: none; }
.hud-chip { background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(150, 170, 255, 0.14); font: 700 0.85rem/1 var(--f-label); color: #fff; }
.hud .depth { font: 700 1.35rem/1 var(--f-pixel); }
.hud .depth small { font: 700 0.8rem var(--f-label); color: var(--ink-faint); }
.hud .ticks i { border-radius: 3px; background: rgba(160, 180, 255, 0.25); border: 1px solid #000; }
.hud .ticks i.now { background: var(--gold); }

/* ---------- inventory-slot ore chips ---------- */
.ores { gap: 5px; }
.ores span { padding: 3px 9px 3px 4px; font: 700 0.8rem/1 var(--f-label); color: #fff; }
.ores img { width: 24px; height: 24px; image-rendering: pixelated; }
.ores span.mythic { border-color: #1a0a33; background: rgba(70, 40, 120, 0.85); box-shadow: inset 0 0 0 2px rgba(200, 150, 255, 0.25), 0 0 8px rgba(179, 107, 255, 0.35); }
.rules li { padding: 6px 10px; background: rgba(20, 28, 70, 0.45); }

/* ---------- inputs, bars ---------- */
.answer-form input { border: 2px solid var(--panel-edge); border-radius: 10px; background: rgba(14, 20, 52, 0.92); color: #fff; font: 700 1.1rem/1.2 var(--f-body); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35); }
.answer-form input:focus { border-color: var(--gold); }
.lamp-bar, .bar-row .track { border: 2px solid var(--panel-edge); border-radius: 6px; background: rgba(14, 20, 52, 0.92); }
.lamp-bar i { background: linear-gradient(#ffe98a, #f2b51e 60%, #c98a12); border-radius: 3px; }
.lamp.low .lamp-bar i { background: linear-gradient(#ff9a9a, #e23b3b); }
.tab.on, .rl-slot.on, .rl-here { background: var(--gold); color: #2a1a00; text-shadow: none; }
.opt.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), inset 0 0 12px rgba(255, 225, 74, 0.3); }
.opt img { image-rendering: pixelated; }

/* ---------- gauge and facts ---------- */
.gauge { background: linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent); font: 700 0.78rem/1 var(--f-label); color: #fff; }
.gauge .marker { image-rendering: pixelated; }
.facts .fact { font: 700 0.8rem/1.25 var(--f-label); }
.facts .fact b { color: var(--gold); }

/* ---------- the dig overlay ---------- */
.fx-answer { font: 700 clamp(1.4rem, 5vw, 2.3rem)/1.05 var(--f-pixel); background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 10px; padding: 6px 14px; }
.fx-pts { font: 700 clamp(3rem, 11vw, 5.2rem)/0.9 var(--f-pixel); text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 4px 0 #000, 0 0 30px color-mix(in srgb, var(--tc) 50%, transparent); }
.fx-land span { font: 700 clamp(2.6rem, 12vw, 6.4rem)/0.9 var(--f-pixel); text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, 0 5px 0 #000, 0 0 44px color-mix(in srgb, var(--tc) 55%, transparent); }
.fx-land img, .strike img { image-rendering: pixelated; }
.fx-line .lbl, .fx-line .fact, .fx-rule { font-family: var(--f-label); font-weight: 700; }
.toast { box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 rgba(0, 0, 0, 0.45); }
.toast b { font: 700 1.6rem/1.05 var(--f-pixel); }

/* ---------- rails ---------- */
.rail-panel { gap: 10px; }
.rl-slot { border-radius: 6px; }
.rl-tier.on { background: rgba(255, 225, 74, 0.16); box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(255, 225, 74, 0.25); border-radius: 6px; }
.rl-row, .rl-stats { border-color: var(--line); }

/* legal pages */
body.doc-page { background: linear-gradient(#2c4aa0, var(--bg) 420px); }
.doc h1, .doc h2 { font-family: var(--f-pixel); font-weight: 700; text-shadow: var(--ol); }