/* =====================================================================
   DUNGEON THEME — a tabletop game played by torchlight in a stone cellar.
   Loaded after style.css; overrides its palette and surfaces.
   ===================================================================== */
:root {
  --bg: #0c0907;
  --bg2: #17110c;
  --panel: #211810;
  --panel2: #2e2216;
  --line: #4b3723;
  --text: #ecdfc6;
  --muted: #a8957a;
  --gold: #d6a24a;
  --gold2: #f1cd7c;
  --good: #8cc96f;
  --bad: #e2563f;
  --accent: #d9772f;

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

  /* Rough-hewn stone blocks */
  --tex-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23352c25'/%3E%3Cstop offset='1' stop-color='%23201a16'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232f2721'/%3E%3Cstop offset='1' stop-color='%231b1612'/%3E%3C/linearGradient%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='4' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='9' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0 0 0 -.22'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='240' height='160' fill='%230b0907'/%3E%3Cg filter='url(%23r)'%3E%3Crect x='4' y='4' width='112' height='72' rx='7' fill='url(%23a)'/%3E%3Crect x='124' y='4' width='112' height='72' rx='7' fill='url(%23b)'/%3E%3Crect x='-56' y='84' width='112' height='72' rx='7' fill='url(%23b)'/%3E%3Crect x='64' y='84' width='112' height='72' rx='7' fill='url(%23a)'/%3E%3Crect x='184' y='84' width='112' height='72' rx='7' fill='url(%23b)'/%3E%3C/g%3E%3Crect width='240' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Long wood grain */
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .16' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .035 0 0 0 0 .01 1.5 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Dark soot/stains for dark surfaces (the card grime is lighter than these and would glow) */
  --tex-soot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- base */
body {
  background: #0b0907;
  font-family: var(--font-body);
  font-size: 16px;
}
h1, h2, h3, legend, .logo-sm, .deck-name, .vs-mid, .announce-who, .back-logo { font-family: var(--font-display); }
h1, h2, h3 { letter-spacing: .04em; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
h2, h3 { color: var(--gold2); font-weight: 700; }
::selection { background: rgba(217,119,47,.45); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f0b08; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #3a2a1b, #4f3a24); border: 2px solid #0f0b08; border-radius: 6px; }

/* Shared surface: oiled leather over dark wood */
.panel, .modal, .prompt, .sidebar, .deck-list, .deck-panel, .forge-list, .forge-preview, .pp {
  background-color: var(--panel);
  background-image: var(--tex-grain), var(--tex-soot), linear-gradient(180deg, #241a11, #160f0a);
  background-size: 160px, 300px, auto;
}
.panel, .modal {
  border: 1px solid #5a4128; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 4px rgba(214,162,74,.12), inset 0 0 40px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.6);
}
.modal { border-color: #8a6631; padding: 1.8em 2.2em; }

/* ---------------------------------------------------------------- buttons & inputs */
.btn, .cf, .mini {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .05em;
  background: var(--tex-grain), linear-gradient(180deg, #3d2c1d, #241910);
  background-size: 160px, auto;
  border: 1px solid #6b4e2e; color: var(--text); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,220,160,.14), inset 0 -2px 0 rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.55);
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.btn:hover:not(:disabled), .cf:hover, .mini:hover {
  background: var(--tex-grain), linear-gradient(180deg, #4b3623, #2d2014); background-size: 160px, auto;
  border-color: #9a7340; color: #fff3da;
}
.btn.primary, .cf.on {
  background: var(--tex-grain), linear-gradient(180deg, #f0cd7e, #c48f36 50%, #8d5f1d);
  background-size: 160px, auto;
  color: #2a1704; border-color: #f6dc9c; text-shadow: 0 1px 0 rgba(255,240,200,.45);
  box-shadow: inset 0 1px 0 rgba(255,250,220,.6), inset 0 -2px 0 rgba(90,50,10,.5), 0 0 18px rgba(255,150,50,.28), 0 2px 6px rgba(0,0,0,.6);
}
.btn.primary:hover:not(:disabled) {
  background: var(--tex-grain), linear-gradient(180deg, #fbdc94, #d39d40 50%, #9b6a22); background-size: 160px, auto;
  color: #2a1704;
}
.btn.ghost { background: transparent; box-shadow: none; }
.btn.danger { background: var(--tex-grain), linear-gradient(180deg, #5e1f17, #3a110c); background-size: 160px, auto; border-color: #8f3424; }
.btn.danger:hover { background: var(--tex-grain), linear-gradient(180deg, #74281e, #4a160f) !important; background-size: 160px, auto !important; }

input, select, textarea {
  background-color: #120d09; border: 1px solid #4b3723; border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}
select { background-color: #120d09; }
option, optgroup { background: #1d150e; color: var(--text); }
option:checked { background: #5a3f22; color: #fff; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--gold); box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 0 10px rgba(217,119,47,.45); }
fieldset { border-color: #4b3723; border-radius: 4px; }

/* ---------------------------------------------------------------- nav: a heavy oak beam */
.topnav {
  background: var(--tex-wood) 0 0 / 600px auto, linear-gradient(180deg, #3b2716, #22150b);
  border-bottom: 2px solid #0a0604;
  box-shadow: inset 0 -1px 0 rgba(214,162,74,.35), inset 0 1px 0 rgba(255,210,150,.12), 0 6px 18px rgba(0,0,0,.7);
  backdrop-filter: none;
}
.logo-sm { color: var(--gold2); text-shadow: 0 1px 0 #3a2208, 0 0 12px rgba(255,170,70,.35); letter-spacing: .04em; }
.logo-sm span { color: #c2ab86; font-family: var(--font-body); }
.nav-btn { font-family: var(--font-display); letter-spacing: .06em; color: #bfa982; border-radius: 3px; }
.nav-btn:hover { background: rgba(0,0,0,.3); color: #fff0d0; }
.nav-btn.on { background: rgba(0,0,0,.4); color: var(--gold2); box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------------------------------------------------------------- home */
.logo {
  font-family: "Cinzel Decorative", var(--font-display); letter-spacing: .02em;
  background: linear-gradient(180deg, #fff1c4 0%, #f0c86e 40%, #b07a2a 70%, #6e4512 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a1606) drop-shadow(0 0 22px rgba(255,150,50,.35));
}
.logo small { font-family: var(--font-display); letter-spacing: .35em; }
.tagline { color: #c9b38e; font-style: italic; }

/* ---------------------------------------------------------------- game table */
.table {
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 18%, transparent 62%, rgba(5,3,2,.85) 100%);
}
/* A wooden table with a worn felt mat laid on it */
.board {
  --inset: 20px;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,.55) 100%) var(--inset) var(--inset) / calc(100% - 2 * var(--inset)) calc(100% - 2 * var(--inset)) no-repeat,
    var(--tex-soot) var(--inset) var(--inset) / 420px repeat,
    radial-gradient(ellipse at 50% 55%, #2c4130 0%, #1b2a1e 60%, #111a13 100%) var(--inset) var(--inset) / calc(100% - 2 * var(--inset)) calc(100% - 2 * var(--inset)) no-repeat,
    var(--tex-grain),
    repeating-linear-gradient(180deg, transparent 0 94px, rgba(0,0,0,.55) 94px 96px),
    var(--tex-wood) 0 0 / 600px auto,
    linear-gradient(180deg, #4a2f19, #2b1a0d);
  border: 3px solid #120b05; border-radius: 18px;
  box-shadow: 0 0 0 1px #3c2714, inset 0 0 0 1px rgba(255,200,140,.08), inset 0 0 50px rgba(0,0,0,.55), 0 40px 80px rgba(0,0,0,.75);
}
.board::after { inset: 28px; border: 1px dashed rgba(214,170,100,.28); border-radius: 4px; }
.midline {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.5) 15%, rgba(0,0,0,.5) 85%, transparent);
  border-top: 1px solid rgba(214,162,74,.35); border-bottom: 1px solid rgba(214,162,74,.35);
}
.turn-owner { font-family: var(--font-display); letter-spacing: .05em; }
.phase { font-family: var(--font-display); font-size: .72em; letter-spacing: .05em; border-radius: 3px; background: rgba(0,0,0,.35); border: 1px solid rgba(214,162,74,.15); }
.phase.on { background: linear-gradient(180deg, #f0cd7e, #b8822f); color: #2a1704; border-color: #f6dc9c; box-shadow: 0 0 10px rgba(255,160,60,.45); }

/* Player plaques */
.pp {
  border: 1px solid #6b4e2e; border-radius: 40px 6px 6px 40px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,160,.12), 0 6px 14px rgba(0,0,0,.6);
}
.pp-name { font-family: var(--font-display); letter-spacing: .03em; }
.pp-life { color: #ffb4a3; font-family: var(--font-display); text-shadow: 0 0 10px rgba(255,80,50,.4); }
.avatar { border-color: var(--gold); box-shadow: 0 0 0 2px #1a0f06, 0 0 12px rgba(255,160,60,.3); background-color: #2b1e13; }

/* Side table: leather ledger */
.sidebar { border-left: 2px solid #0a0604; box-shadow: inset 1px 0 0 rgba(214,162,74,.2), -8px 0 24px rgba(0,0,0,.6); }
.prompt { border: 1px solid #5a4128; border-radius: 4px; box-shadow: inset 0 0 0 3px rgba(214,162,74,.1), inset 0 0 20px rgba(0,0,0,.4); }
.log { background: rgba(0,0,0,.4); border: 1px solid rgba(214,162,74,.12); border-radius: 3px; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.log-line.turn { font-family: var(--font-display); letter-spacing: .04em; }

/* Deck builder / forge columns */
.deck-list, .forge-list { border-right: 2px solid #0a0604; box-shadow: inset -1px 0 0 rgba(214,162,74,.18); }
.deck-panel, .forge-preview { border-left: 2px solid #0a0604; box-shadow: inset 1px 0 0 rgba(214,162,74,.18); }
.deck-item, .forge-item { border-radius: 3px; }
.deck-item.on, .forge-item.on { background: rgba(214,162,74,.12); box-shadow: inset 2px 0 0 var(--gold); }
.curve { background: rgba(0,0,0,.4); border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0,0,0,.6); }
.curve .bar div { background: linear-gradient(180deg, #f0cd7e, #a8742a); }
.eff-row { background: rgba(0,0,0,.3); border: 1px solid rgba(214,162,74,.1); border-radius: 3px; }
.coll-card .count, .tag.edited { background: linear-gradient(180deg, #f0cd7e, #b8822f); }
.tag.custom { background: #8a3d17; }

/* Overlays & banners */
.overlay { background: rgba(6,4,2,.72); }
.overlay.passive { background: rgba(6,4,2,.3); }
.gameover h1 { font-size: 3.2em; }

/* Card back: tooled leather and brass */
.card-back .c-inner {
  background: var(--tex-grain), var(--tex-soot), radial-gradient(circle at 50% 45%, #6a3a1e, #2c160b 65%, #180b05);
  background-size: 160px, 300px, auto; border: .3em double #b4873a;
}

/* ===================================================================== */
/* TORCHES                                                                 */
/* ===================================================================== */
body { --torch-y: 140px; --torch-l: max(18px, calc(50% - 640px)); --torch-r: max(18px, calc(50% - 640px)); }
body[data-screen="game"] { --torch-y: 36vh; --torch-l: 1.2vw; --torch-r: calc(280px + 1.2vw); }
body[data-screen="decks"], body[data-screen="forge"] { --torch-y: 60px; }

#dungeon {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(6,4,3,.35), rgba(6,4,3,.35)),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 25%, rgba(0,0,0,.8) 100%),
    var(--tex-stone) 0 0 / 200px auto,
    #0b0907;
}
#app { position: relative; }  /* paint above the wall torches */
.torch { position: absolute; top: var(--torch-y); width: 40px; height: 140px; }
.torch.left { left: var(--torch-l); }
.torch.right { right: var(--torch-r); }
/* warm light pooling on the wall behind the torch */
.torch::before {
  content: ""; position: absolute; left: 50%; top: 20px; width: 420px; height: 420px; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255,150,60,.24), rgba(255,110,30,.08) 45%, transparent);
}
/* small flickering halo around the flame — kept small on purpose: repaint cost scales with the area that changes */
.torch .flame::before {
  content: ""; position: absolute; left: 0; bottom: 18px; width: 130px; height: 130px; translate: -50% 50%;
  background: radial-gradient(closest-side, rgba(255,170,80,.35), rgba(255,120,40,.12) 50%, transparent);
  animation: glow 3.1s infinite linear; will-change: opacity, transform;
}
.torch.right .flame::before { animation-duration: 2.7s; animation-delay: -1.3s; }
/* iron wall bracket */
.torch .bracket {
  position: absolute; left: 6px; top: 78px; width: 28px; height: 46px; border-radius: 4px 4px 10px 10px;
  background: linear-gradient(90deg, #121110, #3a3633 45%, #161514);
  box-shadow: 0 4px 8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12);
}
.torch .bracket::before, .torch .bracket::after {
  content: ""; position: absolute; left: 50%; width: 5px; height: 5px; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(circle at 35% 35%, #7a726a, #1a1817);
}
.torch .bracket::before { top: 8px; } .torch .bracket::after { bottom: 8px; }
/* wooden shaft + pitch-soaked head */
.torch .shaft {
  position: absolute; left: 14px; top: 34px; width: 12px; height: 78px;
  clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
  background: var(--tex-wood) 0 0 / 60px 600px, linear-gradient(90deg, #2a170a, #6a4423 50%, #2a170a);
}
.torch .head {
  position: absolute; left: 9px; top: 26px; width: 22px; height: 20px; border-radius: 45% 45% 30% 30%;
  background: var(--tex-grain), radial-gradient(circle at 50% 20%, #ff9a3a 0, #6b2f0e 30%, #1d0f07 75%);
  box-shadow: 0 -2px 8px rgba(255,120,30,.6), inset 0 -3px 4px rgba(0,0,0,.6);
}
/* the flame: three layered tongues, each flickering out of step */
.torch .flame { position: absolute; left: 50%; bottom: 108px; width: 0; height: 0; }
.torch .flame i {
  position: absolute; bottom: 0; left: 0; translate: -50% 0; transform-origin: 50% 100%;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; will-change: transform;
}
.torch .flame i:nth-child(1) {
  width: 34px; height: 64px; background: radial-gradient(ellipse at 50% 85%, rgba(255,140,40,.95), rgba(220,60,10,.75) 55%, rgba(160,30,0,0) 75%);
  animation: flick1 .9s infinite ease-in-out alternate;
}
.torch .flame i:nth-child(2) {
  width: 22px; height: 46px; background: radial-gradient(ellipse at 50% 85%, #fff3b0, #ffc040 45%, rgba(255,120,20,0) 75%);
  animation: flick2 .63s infinite ease-in-out alternate;
}
.torch .flame i:nth-child(3) {
  width: 11px; height: 22px; background: radial-gradient(ellipse at 50% 80%, #fff, #fff6cc 50%, rgba(255,230,150,0) 80%);
  animation: flick3 .47s infinite ease-in-out alternate;
}
.torch.right .flame i { animation-delay: -.31s; }
/* rising embers */
.torch .embers { position: absolute; left: 50%; top: 10px; width: 0; height: 0; }
.torch .embers i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 4px #ff7a1a;
  opacity: 0; animation: ember 2.6s infinite ease-out; will-change: transform, opacity;
}
.torch .embers i:nth-child(1) { --dx: -10px; animation-delay: 0s; }
.torch .embers i:nth-child(2) { --dx: 8px; animation-delay: .7s; animation-duration: 3.1s; }
.torch .embers i:nth-child(3) { --dx: -4px; animation-delay: 1.5s; animation-duration: 2.2s; }
.torch .embers i:nth-child(4) { --dx: 14px; animation-delay: 2.1s; animation-duration: 3.4s; }

@keyframes flick1 {
  0%   { transform: scale(1, 1) skewX(0deg); }
  30%  { transform: scale(.94, 1.08) skewX(3deg); }
  55%  { transform: scale(1.05, .95) skewX(-2deg); }
  80%  { transform: scale(.97, 1.12) skewX(4deg); }
  100% { transform: scale(1.02, .98) skewX(-3deg); }
}
@keyframes flick2 {
  0%   { transform: scale(1, 1) skewX(-2deg); }
  40%  { transform: scale(.9, 1.12) skewX(4deg); }
  70%  { transform: scale(1.06, .92) skewX(-3deg); }
  100% { transform: scale(.96, 1.06) skewX(2deg); }
}
@keyframes flick3 {
  0%   { transform: scale(1, 1); opacity: .95; }
  50%  { transform: scale(.85, 1.15); opacity: 1; }
  100% { transform: scale(1.1, .9); opacity: .85; }
}
@keyframes glow {
  0%, 100% { opacity: .9; scale: 1; }
  12% { opacity: .75; scale: .97; }
  20% { opacity: 1; scale: 1.02; }
  33% { opacity: .82; }
  47% { opacity: .95; scale: 1.01; }
  58% { opacity: .7; scale: .96; }
  66% { opacity: .92; }
  81% { opacity: .8; scale: .98; }
  90% { opacity: 1; scale: 1.03; }
}
@keyframes ember {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -90px); }
}

/* Room light: warm torch spill over everything, flickering, with dark corners */
#torchlight { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
#torchlight .spill {
  position: absolute; inset: 0;
  background:
    radial-gradient(45vmax 45vmax at calc(var(--torch-l) + 20px) var(--torch-y), rgba(255,140,50,.09), transparent 70%),
    radial-gradient(45vmax 45vmax at calc(100% - var(--torch-r) - 20px) var(--torch-y), rgba(255,140,50,.09), transparent 70%);
}
#torchlight .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 45%, rgba(4,2,1,.7) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .torch .flame::before, .torch .flame i, .torch .embers i { animation: none !important; }
}
@media (max-width: 1000px) {
  .torch { display: none; }
}