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

:root {
  --soot:   #0a0705;
  --char:   #14100b;
  --iron:   #221b14;
  --iron-hi:#2f2619;
  --ash:    #6d6152;
  --bone:   #d8caae;
  --bone-dim:#93876f;
  --ember:  #e2662a;
  --ember-hi:#ff8b45;
  --gold:   #d9a03c;
  --blood:  #a8332a;
  --cold:   #7f939b;
  --venom:  #7f9354;

  --rule:    rgba(216, 202, 174, 0.16);
  --rule-hi: rgba(216, 202, 174, 0.34);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* serif reads carved and printed */
  --face: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino,
          'Book Antiqua', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* soot grain, laid over every surface so nothing reads as flat fill */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;
  background: var(--soot);
  color: var(--bone);
  font-family: var(--face);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}
body { position: relative; }

#stage {
  position: fixed; inset: 0; display: block;
  background: var(--soot);
  cursor: none;
}

#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(6,4,3,0.55) 78%, rgba(6,4,3,0.92) 100%);
  transition: background 500ms var(--ease);
}
#flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0; background: var(--blood); mix-blend-mode: screen;
  transition: opacity 260ms var(--ease);
}

/* surfaces */

/* .glass name kept so the markup and js stay put. nothing glassy left in it. */
.glass, .panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(38,30,21,0.97), rgba(14,11,8,0.98)),
    var(--soot);
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.7),
    0 30px 70px rgba(0,0,0,0.75),
    inset 0 0 90px rgba(0,0,0,0.55);
}
.glass::before, .panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}
/* inner rule, a printed double frame */
.panel::after {
  content: '';
  position: absolute; inset: 9px;
  border: 1px solid var(--rule);
  pointer-events: none;
}

.eyebrow {
  font-family: var(--face);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 10px;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* in-game chrome */

#hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; padding: 22px; display: none; }
#hud.on { display: block; }

/* fixed readout, bottom left. the arcs on the character stay the primary
   tell, this is just the one that survives when the screen is chaos */
/* the tutorial. one card, sat slightly crooked, waits for you to do the thing */
#tutor {
  position: absolute; left: 24px; bottom: 96px;
  width: 236px;
  padding: 12px 13px 13px;
  background: linear-gradient(176deg, rgba(37,29,21,0.94), rgba(14,11,8,0.96));
  border-top: 1px solid rgba(216,202,174,0.15);
  border-left: 1px solid rgba(216,202,174,0.09);
  border-right: 1px solid rgba(0,0,0,0.75);
  border-bottom: 2px solid rgba(0,0,0,0.8);
  box-shadow: 0 10px 26px rgba(0,0,0,0.6);
  transform: rotate(-0.8deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}
#tutor.on { opacity: 1; }
#tutor::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.07;
  mix-blend-mode: overlay;
}
.tutor-keys { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tutor-keys:empty { display: none; }
.tutor-keys kbd { font-size: 9px; padding: 3px 6px; }
.tutor-keys kbd:nth-child(2) { transform: rotate(0.9deg); }
.tutor-keys kbd:nth-child(3) { transform: rotate(-0.7deg); }
.tutor-text {
  display: block;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: rgba(216,202,174,0.82);
}
#tutor.done .tutor-text { color: var(--ash); text-decoration: line-through; text-decoration-color: var(--ember); }
#tutor.done .tutor-keys { opacity: 0.35; }
#tutor.done::after {
  content: '';
  position: absolute; right: 11px; top: 11px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--ember);
  border-bottom: 2px solid var(--ember);
  transform: rotate(-45deg);
}

.vitals-corner {
  position: absolute; bottom: 26px; left: 26px;
  display: flex; flex-direction: column; gap: 8px;
  width: 172px;
}
.vital-row { display: flex; align-items: center; gap: 8px; }
.vital-glyph {
  flex: 0 0 auto; display: flex;
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
}
.vital-track {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,0,0,0.85);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.7), 0 1px 0 rgba(216,202,174,0.05);
}
.vital-fill {
  position: absolute; inset: 0;
  transform: scaleX(1);
  transform-origin: left;
  background: var(--blood);
}
#vital-torch .vital-fill { background: var(--ember); }
.vital-fill.low { animation: vitalPulse 900ms ease-in-out infinite; }
@keyframes vitalPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }
.vital-num {
  flex: 0 0 auto;
  width: 38px; text-align: right;
  font-family: var(--mono); font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--bone-dim);
  text-shadow: 0 2px 6px rgba(0,0,0,0.95);
}

.objective {
  position: absolute; top: 26px; left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: rgba(216, 202, 174, 0.8);
  text-shadow: 0 2px 8px rgba(0,0,0,0.98);
  white-space: nowrap;
}
.objective::before, .objective::after {
  content: '';
  display: inline-block;
  height: 1px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--rule-hi));
}
.objective::before { width: 18px; margin-right: 13px; }
.objective::after  { width: 31px; margin-left: 15px;
  background: linear-gradient(270deg, transparent, var(--rule-hi)); }
.objective.warn   { color: var(--gold); }
.objective.danger { color: var(--ember); }
.objective.good   { color: var(--bone); }
.objective.bump   { animation: bump 460ms var(--ease); }
@keyframes bump { 0% { opacity: 0; letter-spacing: 0.16em; } 100% { opacity: 1; } }

.prompt {
  position: absolute; bottom: 118px; left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ember);
  text-shadow: 0 2px 8px rgba(0,0,0,0.98);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.prompt.on { opacity: 1; }

/* ability keys as struck iron tags */
.rack {
  position: absolute; bottom: 26px; left: 50%;
  transform: translateX(-50%) rotate(-0.35deg);
  display: flex; gap: 2px;
  align-items: flex-end;
}
/* nailed up one at a time, not laid out by a machine */
.slot:nth-child(1) { transform: translateY(1px)  rotate(-0.8deg); }
.slot:nth-child(2) { transform: translateY(-1px) rotate(0.5deg); }
.slot:nth-child(3) { transform: translateY(1.5px) rotate(0.9deg); }
.slot:nth-child(4) { transform: translateY(-0.5px) rotate(-0.6deg); }
.slot:nth-child(5) { transform: translateY(1px)  rotate(0.4deg); }
.slot:nth-child(6) { transform: translateY(-1.5px) rotate(-0.9deg); }
.slot:nth-child(7) { transform: translateY(0.5px) rotate(0.7deg); }
.slot:nth-child(8) { transform: translateY(-1px) rotate(-0.4deg); }
.slot.fired { transform: translateY(-5px) rotate(0deg); }
.slot {
  position: relative;
  width: 42px; height: 40px;
  background: linear-gradient(180deg, var(--iron-hi), var(--char));
  border: 1px solid rgba(0,0,0,0.8);
  border-top-color: rgba(216,202,174,0.12);
  box-shadow: inset 0 1px 0 rgba(216,202,174,0.07);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  opacity: 0.5;
  color: var(--bone-dim);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), color 200ms var(--ease);
}
.slot.ready { opacity: 1; color: var(--ember); }
.slot .glyph { display: flex; }
.slot .key {
  position: absolute; bottom: 1px; right: 3px;
  font-family: var(--mono); font-size: 8px; color: var(--ash);
}
.slot .cd {
  position: absolute; inset: 0;
  background: rgba(5,3,2,0.84);
  transform-origin: bottom; transform: scaleY(0);
  transition: transform 90ms linear;
}
.slot .cdtext {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; color: var(--bone);
  opacity: 0;
}
.slot.cooling .cdtext { opacity: 1; }

#log {
  position: absolute; bottom: 76px; left: 50%;
  transform: translateX(-50%);
  width: 460px; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.log-line:nth-child(odd)  { margin-left: -7px; }
.log-line:nth-child(3n)   { margin-left: 6px; }
.log-line {
  font-size: 13px; font-style: italic;
  color: rgba(216, 202, 174, 0.62);
  text-shadow: 0 2px 6px rgba(0,0,0,0.98);
  opacity: 0;
  animation: logIn 320ms var(--ease) forwards;
}
.log-line.fade { animation: logOut 500ms var(--ease) forwards; }
.log-line b { color: var(--bone); font-weight: 600; font-style: normal; }
.log-line i { color: var(--ember); font-style: normal; }
@keyframes logIn  { to { opacity: 1; } }
@keyframes logOut { to { opacity: 0; } }

#pickup-toast {
  position: absolute; top: 60px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.toast {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.98);
  opacity: 0;
  animation: toastIn 300ms var(--ease) forwards;
}
.toast.fade { animation: toastOut 420ms var(--ease) forwards; }
@keyframes toastIn  { from { transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-5px); } }

#mapview {
  position: fixed; inset: 0; z-index: 7; display: none;
  align-items: center; justify-content: center;
  background: rgba(6,4,3,0.93);
}
#mapview.on { display: flex; animation: fadeIn 140ms var(--ease); }
#mapview canvas { border: 1px solid var(--rule-hi); box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,0.8); }

/* overlays */

.overlay {
  position: fixed; inset: 0; z-index: 10; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,4,3,0.86);
  animation: fadeIn 260ms var(--ease);
}

/* the title screen is a window onto a real floor, not a black sheet */
#menu {
  align-items: center;
  padding: 0;
  background:
    radial-gradient(ellipse 86% 66% at 50% 44%, rgba(6,4,3,0.02), rgba(6,4,3,0.42) 60%, rgba(6,4,3,0.88) 100%),
    linear-gradient(180deg, rgba(6,4,3,0.72) 0%, rgba(6,4,3,0.06) 30%, rgba(6,4,3,0.5) 66%, rgba(4,3,2,0.95) 100%);
  animation: fadeIn 900ms var(--ease);
}
#menu .panel {
  width: min(920px, 92%);
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 0 30px 56px;
  animation: none;
  max-height: 100vh;
}
#menu .panel::before, #menu .panel::after { display: none; }

/* everything on the card arrives on its own beat */
#menu .title     { animation: titleIn 1500ms var(--ease) both; }
#menu .tagline   { animation: cardIn 1100ms var(--ease) 520ms both; margin-top: 22px; font-size: 15px; }
#menu .divider   { animation: cardIn 900ms var(--ease) 980ms both; }
#menu .picks     { animation: cardIn 900ms var(--ease) 1120ms both; }

/* the emblem, drawn rather than typed */
.emblem {
  display: block;
  width: min(460px, 62%);
  margin: 0 auto;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--bone-dim);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.6;
}
.emblem.top { margin-bottom: 26px; }
.emblem:not(.top) { margin-top: 30px; }
.emblem .bead { fill: var(--ember); stroke: none; filter: drop-shadow(0 0 7px rgba(226,102,42,0.85)); }
.emblem circle:not(.bead) { fill: var(--bone-dim); stroke: none; }

/* depth: three layers of air between the floor and the type */
.menu-depth { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.menu-depth i { position: absolute; inset: 0; display: block; }
.menu-depth i:nth-child(1) {
  background: radial-gradient(ellipse 54% 40% at 50% 32%, rgba(226,102,42,0.15), transparent 70%);
}
.menu-depth i:nth-child(2) {
  background: radial-gradient(ellipse 120% 46% at 50% 108%, rgba(226,102,42,0.2), transparent 66%);
}
/* dust, lit from below */
.menu-depth i:nth-child(3) {
  background-image:
    radial-gradient(1.6px 1.6px at 18% 30%, rgba(226,150,90,0.5), transparent),
    radial-gradient(1.4px 1.4px at 72% 22%, rgba(216,202,174,0.34), transparent),
    radial-gradient(1.8px 1.8px at 41% 68%, rgba(226,130,70,0.44), transparent),
    radial-gradient(1.3px 1.3px at 86% 58%, rgba(216,202,174,0.28), transparent),
    radial-gradient(1.5px 1.5px at 30% 88%, rgba(226,150,90,0.4), transparent),
    radial-gradient(1.2px 1.2px at 62% 44%, rgba(216,202,174,0.24), transparent);
  animation: motes 26s linear infinite;
}
@keyframes motes {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-3%, -13%, 0); }
}

/* the menu itself: a list, the way a game does it */
.menu-list {
  margin: 40px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.mitem {
  pointer-events: auto;
  position: relative;
  background: none;
  border: none;
  padding: 9px 44px;
  font-family: var(--face);
  font-size: 21px;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--bone-dim);
  cursor: pointer;
  transition: color 200ms var(--ease), letter-spacing 260ms var(--ease), text-shadow 200ms var(--ease);
}
.mitem:hover, .mitem:focus-visible {
  color: var(--bone);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-shadow: 0 0 26px rgba(226,102,42,0.6);
  outline: none;
}
/* the flanking marks only exist for the item you are on */
.mitem::before, .mitem::after {
  content: '';
  position: absolute; top: 50%;
  width: 16px; height: 1px;
  background: var(--ember);
  opacity: 0;
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
}
.mitem::before { left: 8px;  transform: translateX(-8px); }
.mitem::after  { right: 8px; transform: translateX(8px); }
.mitem:hover::before, .mitem:focus-visible::before,
.mitem:hover::after,  .mitem:focus-visible::after { opacity: 0.9; transform: none; }

.mitem.sug::after { content: ''; }
.menu-list .sug { color: var(--bone); }

/* one description line, swapped by hover, no script */
.menu-desc {
  display: block;
  margin-top: 16px;
  min-height: 2.5em;
  max-width: 40ch;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ash);
}
.menu-desc::after { content: attr(data-w); }
#btn-kindling:hover ~ .menu-desc::after, #btn-kindling:focus-visible ~ .menu-desc::after { content: attr(data-k); }
#btn-warden:hover   ~ .menu-desc::after, #btn-warden:focus-visible   ~ .menu-desc::after { content: attr(data-w); }
#btn-ashen:hover    ~ .menu-desc::after, #btn-ashen:focus-visible    ~ .menu-desc::after { content: attr(data-a); }

#menu .menu-list { animation: cardIn 900ms var(--ease) 1120ms both; }
#menu .emblem    { animation: cardIn 1200ms var(--ease) 300ms both; }

.menu-foot { animation: cardIn 900ms var(--ease) 1300ms both; }

@keyframes titleIn {
  from { opacity: 0; letter-spacing: 0.3em; filter: blur(7px); }
  to   { opacity: 1; letter-spacing: 0.06em; filter: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.menu-foot { margin-top: 4px; display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
#menu .menu-foot .btn {
  background: none;
  border: none;
  box-shadow: none;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.24em;
  color: var(--ash);
  transition: color 200ms var(--ease);
}
#menu .menu-foot .btn:hover { color: var(--bone); background: none; }
#menu .menu-foot .btn:focus-visible { outline: none; color: var(--bone); }

.overlay.on { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.panel {
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 30px 38px;
  animation: riseIn 380ms var(--ease);
  scrollbar-width: thin;
}
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb { background: var(--rule-hi); }


/* chiselled */
.title {
  font-size: clamp(54px, 10.5vw, 124px);
  font-weight: 300;
  letter-spacing: 0.14em;
  /* trailing letter-spacing throws centred text off by half a space */
  text-indent: 0.14em;
  line-height: 0.88;
  margin: 0;
  color: #c9b997;
  text-shadow:
    0 1px 0 rgba(74,58,38,0.5),
    0 2px 14px rgba(0,0,0,0.9),
    0 0 60px rgba(226, 102, 42, 0.3),
    0 18px 90px rgba(226, 102, 42, 0.16);
}
.tagline {
  margin: 16px auto 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 46ch;
}

/* rule with an ember bead in the middle */
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 14px;
  color: var(--ash);
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-hi), transparent);
}
.divider span {
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
}

.btn {
  pointer-events: auto;
  display: inline-block;
  padding: 11px 26px 10px;
  border: 1px solid var(--rule-hi);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(58,45,30,0.9), rgba(20,16,11,0.9));
  color: var(--bone);
  font-family: var(--face);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(216,202,174,0.08);
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.btn:hover {
  color: var(--ember-hi);
  border-color: rgba(226, 102, 42, 0.55);
  background: linear-gradient(180deg, rgba(74,50,28,0.95), rgba(26,18,11,0.95));
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 1px solid var(--ember); outline-offset: 3px; }
.btn.ghost {
  background: none;
  border-color: var(--rule);
  color: var(--bone-dim);
}
.btn.ghost:hover { color: var(--bone); border-color: var(--rule-hi); background: rgba(216,202,174,0.04); }

/* difficulty: three carved tablets */
.pick-label {
  margin: 18px 0 10px;
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ash);
}
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; }
.pick {
  pointer-events: auto;
  position: relative;
  padding: 16px 15px 18px;
  border: 1px solid rgba(0,0,0,0.75);
  background: linear-gradient(180deg, rgba(34,27,20,0.72), rgba(12,9,6,0.82));
  box-shadow: inset 0 1px 0 rgba(216,202,174,0.06);
  cursor: pointer; text-align: left;
  font-family: var(--face); color: var(--bone);
  transition: background 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease);
}
/* the chosen footing catches the firelight */
.pick:hover {
  background: linear-gradient(180deg, rgba(74,50,28,0.92), rgba(22,16,10,0.94));
  box-shadow: inset 0 1px 0 rgba(216,202,174,0.12), 0 0 30px rgba(226,102,42,0.16);
}
.pick:hover .pick-n { color: var(--ember-hi); }
.pick:focus-visible { outline: 1px solid var(--ember); outline-offset: 2px; }
.pick-n {
  display: block; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 240ms var(--ease);
}
.pick-d { display: block; margin-top: 8px; font-size: 12.5px; font-style: italic; line-height: 1.55; color: var(--bone-dim); }
.pick.recommended::after {
  content: 'suggested';
  display: block; margin-top: 10px;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ember);
}

.brief {
  margin-top: 4px; padding-top: 0;
  display: flex; flex-direction: column; gap: 11px;
  text-align: left;
}
.brief-row { display: flex; gap: 13px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--bone-dim); }
.brief-row b { color: var(--bone); font-weight: 600; }
.brief-n {
  flex: 0 0 auto; width: 24px; height: 24px;
  border: 1px solid var(--rule-hi);
  color: var(--ember);
  font-family: var(--mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}

.keycaps {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px 22px; text-align: left;
}
.keycap-row { display: flex; align-items: baseline; gap: 10px; }
kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 3px 7px;
  background: linear-gradient(180deg, var(--iron-hi), var(--char));
  border: 1px solid rgba(0,0,0,0.8);
  box-shadow: inset 0 1px 0 rgba(216,202,174,0.08);
  color: var(--bone); white-space: nowrap;
}
.keycap-row span { font-size: 13px; font-style: italic; color: var(--bone-dim); }

/* bestiary: a record you fill in yourself */
#bestiary-list { max-height: 56vh; overflow-y: auto; padding-right: 6px; }
.bes-tier {
  margin: 20px 0 8px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ash);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.bes-tier span { color: rgba(216,202,174,0.28); letter-spacing: 0.12em; }
.bes-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(216,202,174,0.06);
}
.bes-row:nth-child(odd) { padding-left: 5px; }
.bes-art {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,0,0,0.7);
  box-shadow: inset 0 1px 0 rgba(216,202,174,0.06);
}
.bes-row.unknown .bes-art {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 19px; color: rgba(216,202,174,0.16);
}
.bes-row.unknown b, .bes-row.unknown i { color: rgba(216,202,174,0.22); }
.bes-row b { display: block; font-size: 14px; font-weight: 600; color: var(--bone); }
.bes-row i {
  display: block; margin-top: 4px;
  font-size: 12.5px; line-height: 1.55; color: var(--bone-dim);
  max-width: 60ch;
}
.bes-n {
  display: inline-block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px;
  color: var(--ash);
}

/* touch has no hover, so the footing descriptions were invisible on a phone */
@media (hover: none) {
  .menu-desc::after { content: attr(data-w); }
  .mitem::before, .mitem::after { opacity: 0.5; transform: none; }
}

/* inventory */

.inv-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.inv-head h2 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.inv-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; }
@media (max-width: 720px) { .inv-grid { grid-template-columns: 1fr; } }

.equip-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-hi);
  background: rgba(216,202,174,0.025);
  margin-bottom: 6px;
}
.equip-icon {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--soot);
  border: 1px solid var(--rule);
  color: var(--bone-dim);
}
.equip-meta { flex: 1; min-width: 0; }
.equip-meta .n { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equip-meta .s { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); margin-top: 3px; }
.equip-meta .aff { font-size: 12.5px; font-style: italic; color: var(--bone-dim); margin-top: 4px; }
.slot-empty { opacity: 0.35; }

.pack-list { display: flex; flex-direction: column; gap: 4px; }
.pack-item {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-left: 2px solid var(--rule);
  background: rgba(216,202,174,0.02);
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.pack-item:hover { background: rgba(226,102,42,0.09); border-left-color: var(--ember); }
.pack-item .use {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ember); opacity: 0; transition: opacity 180ms var(--ease);
}
.pack-item:hover .use { opacity: 1; }

.rar-common    { color: var(--bone-dim); }
.rar-uncommon  { color: var(--venom); }
.rar-rare      { color: var(--cold); }
.rar-epic      { color: var(--gold); }
.rar-legendary { color: var(--ember); }
.bd-common     { border-left-color: rgba(147,135,111,0.5); }
.bd-uncommon   { border-left-color: rgba(127,147,84,0.7); }
.bd-rare       { border-left-color: rgba(127,147,155,0.8); }
.bd-epic       { border-left-color: rgba(217,160,60,0.85); }
.bd-legendary  { border-left-color: var(--ember); }

.empty-note {
  padding: 28px; text-align: center;
  font-size: 13px; font-style: italic; color: var(--ash);
  border: 1px solid var(--rule);
}

/* gifts and shrine */

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1px; margin-top: 26px; }
.choice {
  pointer-events: auto;
  padding: 24px 20px;
  border: 1px solid rgba(0,0,0,0.75);
  background: linear-gradient(180deg, var(--iron), var(--char));
  box-shadow: inset 0 1px 0 rgba(216,202,174,0.06);
  cursor: pointer; text-align: left;
  font-family: var(--face); color: var(--bone);
  transition: background 240ms var(--ease);
}
.choice:hover { background: linear-gradient(180deg, #3d2c1a, #1b1409); }
.choice:hover .cn { color: var(--ember-hi); }
.choice:focus-visible { outline: 1px solid var(--ember); outline-offset: 2px; }
.choice .cg { display: flex; align-items: center; height: 26px; margin-bottom: 14px; color: var(--ember); }
.choice .cn { font-size: 17px; letter-spacing: 0.06em; transition: color 240ms var(--ease); }
.choice .cd { font-size: 13px; font-style: italic; line-height: 1.6; color: var(--bone-dim); margin-top: 8px; }
.choice .cost { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--gold); }
.choice.locked { opacity: 0.32; cursor: not-allowed; }
.choice.locked:hover { background: linear-gradient(180deg, var(--iron), var(--char)); }

/* run summary */

.summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 18px; margin: 30px 0;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.summary-cell .k { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash); }
.summary-cell .v { font-family: var(--mono); font-size: 27px; margin-top: 6px; color: var(--bone); }

.death-title, .victory-title {
  font-size: clamp(38px, 7vw, 62px);
  font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0;
}
.death-title   { color: var(--blood); text-shadow: 0 2px 0 #2a0d0a, 0 6px 24px rgba(168,51,42,0.3); }
.victory-title { color: var(--gold);  text-shadow: 0 2px 0 #3a2a10, 0 6px 24px rgba(217,160,60,0.3); }

/* floor card */

#transition {
  position: fixed; inset: 0; z-index: 9; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  background: var(--soot);
}
#transition.on { display: flex; animation: fadeIn 200ms var(--ease); }
#transition .tnum {
  font-family: var(--face);
  font-size: clamp(70px, 17vw, 160px);
  letter-spacing: 0.04em; line-height: 1;
  color: #c9b997;
  text-shadow: 0 2px 0 #3d3020, 0 4px 2px #1b140d;
  opacity: 0; animation: riseIn 620ms var(--ease) forwards;
}
#transition .tname {
  font-size: 15px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ash);
  opacity: 0; animation: riseIn 620ms var(--ease) 140ms forwards;
}

#reticule { position: fixed; z-index: 5; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; display: none; }
#reticule.on { display: block; }

#touch { display: none; }
@media (pointer: coarse) {
  #touch { display: block; position: fixed; inset: 0; z-index: 6; pointer-events: none; }
  .stick {
    position: absolute; bottom: 92px; left: 30px;
    width: 128px; height: 128px; border-radius: 999px;
    border: 1px solid var(--rule); background: rgba(20,16,11,0.5);
    pointer-events: auto;
  }
  .stick .nub {
    position: absolute; top: 50%; left: 50%;
    width: 52px; height: 52px; margin: -26px 0 0 -26px;
    border-radius: 999px;
    background: rgba(226,102,42,0.25); border: 1px solid var(--ember);
  }
  .rack { bottom: 210px; }
  #log { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* cold open. black resolving into a lit room, then the title */
#intro {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: #030202;
  transition: background 2200ms var(--ease), opacity 700ms linear;
}
#intro.lift {
  background: radial-gradient(ellipse 70% 55% at 50% 46%, rgba(3,2,2,0.05), rgba(3,2,2,0.72) 66%, rgba(3,2,2,0.97) 100%);
}
#intro.gone { opacity: 0; pointer-events: none; }
#intro::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.055;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* one ember, rising the whole time you are reading */
.intro-ember {
  position: absolute; left: 50%; bottom: -10px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ember-hi);
  box-shadow: 0 0 10px 3px rgba(226,102,42,0.55), 0 0 34px 10px rgba(226,102,42,0.2);
  animation: introRise 13s linear infinite;
}
@keyframes introRise {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 0.9; }
  100% { transform: translate(calc(-50% + 26px), -84vh) scale(1.15); opacity: 0; }
}
#intro.lift .intro-ember { animation-duration: 4.5s; }

.intro-card {
  position: relative;
  margin: 0; padding: 0 28px;
  max-width: 30ch;
  text-align: center;
  font-size: clamp(19px, 2.5vw, 27px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.015em;
  color: var(--bone);
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
  text-shadow: 0 2px 26px rgba(0,0,0,0.9);
}
.intro-card.show { opacity: 0.94; transform: translateY(0); }

.intro-skip {
  position: absolute; bottom: 34px; left: 0; right: 0;
  margin: 0; text-align: center;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ash);
  opacity: 0;
  transition: opacity 900ms linear;
}
.intro-skip.show { opacity: 0.5; }

/* title holds still until the cold open hands over */
body.intro-running #menu .panel { opacity: 0; }
#menu .panel > * { opacity: 1; }
#menu.lit .panel > * {
  opacity: 0;
  animation: titleRise 1200ms var(--ease) forwards;
}
#menu.lit .panel > *:nth-child(1) { animation-delay: 60ms; }
#menu.lit .panel > *:nth-child(2) { animation-delay: 0ms; }
#menu.lit .panel > *:nth-child(3) { animation-delay: 120ms; }
#menu.lit .panel > *:nth-child(4) { animation-delay: 420ms; }
#menu.lit .panel > *:nth-child(5) { animation-delay: 620ms; }
#menu.lit .panel > *:nth-child(6) { animation-delay: 800ms; }
@keyframes titleRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-ember { animation: none; opacity: 0.6; }
  #menu.lit .panel > * { animation-duration: 1ms; }
  #intro { transition-duration: 400ms; }
}