/* Diamonds of Doom — base layer: reset, page shell, shared components. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:var(--night-900);
  background-image:radial-gradient(ellipse at 50% 0%,#16203a 0%,var(--night-900) 62%);
  background-attachment:fixed;
  color:var(--frost-100);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Film grain — the cheapest thing that stops this looking like a web page. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:900;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ── The full-screen backdrop ──────────────────────────
   One fixed layer carrying the art for wherever you are. `background-attachment:
   fixed` so it stays put while a long screen scrolls over it — the room should
   feel like a place you are standing in, not a texture taped to the page. */
#backdrop{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 420ms ease-out;
}
#backdrop.on{opacity:1}
#backdrop::before{
  content:"";position:absolute;inset:0;
  background:var(--screen-art) center center/cover no-repeat;
  /* Darkened here rather than in the scrim, so brightness and the gradient can
     be tuned against each other instead of fighting.

     These numbers were once much heavier. They were set against the procedural
     placeholders, which were bright flat-vector landscapes that had to be
     suppressed hard to stop them shouting over the interface. The painted
     backgrounds that replaced them are already low-key night scenes — the same
     treatment crushed them to black, which read as "the art didn't load"
     rather than as atmosphere. Real paintings need a much lighter hand. */
  filter:brightness(.88) saturate(.96) contrast(1.02);
}
/* The scrim. Heavier at the top and bottom than through the middle: the topbar
   and the action bar are the things most likely to land on a lit lantern, and
   the middle of these paintings is where the room actually is. Tuned by eye
   against the tavern, which is the busiest one. */
#backdrop::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(5,8,15,.58) 0%,rgba(5,8,15,.14) 24%,
                    rgba(5,8,15,.16) 62%,rgba(5,8,15,.78) 100%),
    radial-gradient(ellipse at 50% 42%,rgba(5,8,15,0),rgba(5,8,15,.32) 82%);
}

#app{max-width:1280px;margin:0 auto;padding:var(--sp-5);position:relative;z-index:1}

/* ── Glass, for when there is a painting behind ────────
   Panels are solid slabs by default because normally they sit on flat dark and
   solidity costs nothing. Over a painted room a solid slab reads as a sticker,
   so in art mode they become smoked glass instead: dark enough for small text,
   transparent enough that you can still see the room you're in. */
body.art-mode .panel{
  background:rgba(13,19,33,.66);
  backdrop-filter:blur(16px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-color:rgba(90,115,145,.42);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
body.art-mode .topbar{
  background:rgba(13,19,33,.76);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:rgba(90,115,145,.42);
}
/* Text that sits directly on the backdrop rather than inside a panel needs its
   own shadow — the scrim alone can't be trusted against every painting. */
body.art-mode h1,body.art-mode h2,body.art-mode .kicker{text-shadow:0 2px 12px rgba(5,8,15,.95)}

/* ── Top bar ─────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:var(--sp-5);height:52px;padding:0 var(--sp-5);
  background:linear-gradient(180deg,#16203a,#0a0f1b);
  border:1px solid var(--night-400);border-radius:var(--r-md);
  box-shadow:var(--shadow-card);margin-bottom:var(--sp-4);
}
.topbar.hidden{display:none}
.tb-name{font-family:var(--font-display);font-weight:600;letter-spacing:.06em;font-size:15px;white-space:nowrap}
.tb-stat{display:flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--frost-200);white-space:nowrap}
.tb-stat .lbl{color:var(--frost-300);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.tb-spacer{flex:1}
.v-hp{color:var(--vital-400)}
.v-atk{color:var(--stat-atk)}
.v-def{color:var(--stat-def)}
.v-gold{color:var(--stat-gold)}
/* Mute, reachable from every screen that has a topbar. Deliberately plain —
   it is a control you want to find instantly and never think about again. */
.tb-mute,.tb-sfx{
  background:none;border:1px solid var(--night-400);border-radius:var(--r-sm);
  font-size:14px;line-height:1;padding:5px 9px;cursor:pointer;
  filter:grayscale(1);opacity:.65;
  transition:opacity var(--t-fast) ease-out,border-color var(--t-fast) ease-out;
}
.tb-sfx{font-family:var(--font-ui);font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--frost-200)}
.tb-mute:hover,.tb-sfx:hover{opacity:1;border-color:var(--ice-500)}
.tb-mute.off,.tb-sfx.off{border-color:var(--blood-500);color:var(--blood-400);opacity:.9}
.tb-mute:focus-visible,.tb-sfx:focus-visible{outline:2px solid var(--ice-400);outline-offset:2px}

/* ── Panels ───────────────────────────────────────────── */
.panel{
  background:var(--night-700);border:1px solid var(--night-400);border-radius:var(--r-md);
  box-shadow:var(--shadow-panel);position:relative;
}
.panel::before{
  content:"";position:absolute;inset:3px;border:1px solid rgba(255,255,255,.035);
  border-radius:var(--r-sm);pointer-events:none;
}
.panel-h{
  font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--frost-300);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--night-500);
}

/* ── Typography ───────────────────────────────────────── */
h1{font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ice-500)}
h2{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.04em;color:var(--frost-200)}
h3{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--frost-200)}
.prose{max-width:68ch;line-height:1.65}
.muted{color:var(--frost-300)}
.kicker{font-family:var(--font-ui);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-500)}
.stat-label{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--frost-300)}

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:11px 20px;border-radius:var(--r-sm);cursor:pointer;
  transition:transform var(--t-fast) ease-out,box-shadow var(--t-fast) ease-out,
             border-color var(--t-fast) ease-out,background var(--t-fast) ease-out,color var(--t-fast) ease-out;
  border:1px solid transparent;background:transparent;color:var(--frost-200);
}
.btn:focus-visible{outline:2px solid var(--ice-400);outline-offset:2px}
.btn-primary{
  background:linear-gradient(180deg,var(--ice-500),var(--ice-700));color:var(--night-900);
  border-color:var(--ice-400);box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
}
.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,var(--ice-400),var(--ice-500));transform:translateY(-1px);box-shadow:var(--glow-ice)}
.btn-sec{border-color:var(--night-400)}
.btn-sec:hover:not(:disabled){border-color:var(--ice-500);color:var(--frost-100);transform:translateY(-1px)}
.btn-danger{border-color:var(--blood-500);color:var(--blood-400)}
.btn-danger:hover:not(:disabled){background:rgba(184,55,47,.14);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0);transition:none}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn .key{
  display:inline-block;font-family:var(--font-ui);font-size:9px;font-weight:600;
  border:1px solid currentColor;border-radius:2px;padding:0 4px;margin-inline-start:7px;opacity:.65;
}

/* ── Health bars ──────────────────────────────────────── */
.hb-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);margin-bottom:5px}
.hb-name{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.05em}
.hb-num{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--frost-200);font-variant-numeric:tabular-nums}
.hb{height:14px;background:var(--night-900);border:1px solid var(--night-400);border-radius:2px;position:relative;overflow:hidden}
.hb .ghost{position:absolute;inset:0 auto 0 0;height:100%;background:var(--blood-400);opacity:.55;transition:width 400ms ease-out}
.hb .fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:1px}
.hb.player .fill{background:linear-gradient(180deg,var(--vital-400),var(--vital-500))}
.hb.enemy  .fill{background:linear-gradient(180deg,var(--shadow-500),var(--shadow-700))}
.hb.low{border-color:var(--blood-500);animation:pulseWarn 1.6s ease-in-out infinite}
@keyframes pulseWarn{0%,100%{box-shadow:0 0 0 rgba(184,55,47,0)}50%{box-shadow:0 0 10px rgba(184,55,47,.6)}}

/* ── Portraits ────────────────────────────────────────── */
.portrait{
  width:120px;height:120px;margin:0 auto var(--sp-3);border-radius:var(--r-md);
  border:2px solid var(--night-400);display:grid;place-items:center;font-size:52px;
  background:radial-gradient(circle at 50% 35%,#24344f,#0c1220);
  box-shadow:var(--shadow-card);transition:all var(--t-fast) ease-out;user-select:none;
}
.portrait.sm{width:66px;height:66px;font-size:28px;margin:0}
.portrait.lg{width:178px;height:178px;font-size:70px}
.portrait.tiny{width:44px;height:44px;font-size:20px}
.portrait.hurt{animation:shake 240ms ease-out}
/* Painted portraits fill the frame; the emoji fallback sits centred in it. Same
   box either way, so a half-illustrated bestiary doesn't look broken. */
.portrait{overflow:hidden;position:relative}
.portrait-art{width:100%;height:100%;object-fit:cover;display:block}
.portrait-glyph{line-height:1}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── Traits ───────────────────────────────────────────── */
.traits{display:flex;gap:5px;justify-content:center;margin-top:7px;flex-wrap:wrap}
.trait{
  font-family:var(--font-ui);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border:1px solid var(--night-400);border-radius:99px;
  color:var(--frost-300);background:var(--night-700);cursor:help;
}

/* ── Toast ────────────────────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:var(--night-700);border:1px solid var(--ice-700);border-radius:var(--r-sm);
  padding:10px 18px;font-family:var(--font-display);font-size:13px;letter-spacing:.06em;
  color:var(--frost-100);box-shadow:var(--shadow-panel);opacity:0;pointer-events:none;
  transition:opacity var(--t-base) ease-out,transform var(--t-base) ease-out;z-index:800;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Screen transitions ───────────────────────────────── */
.screen-enter{animation:screenIn var(--t-screen) var(--ease)}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Utility ──────────────────────────────────────────── */
.row{display:flex;gap:var(--sp-3)}
.center{text-align:center}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Accessibility ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}