@font-face { font-family: "Cinzel"; src: url("./fonts/cinzel.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --night: #140805;
  --velvet: #6e1118;
  --gold: #e3b465;
  --paper: #f6c27a;
  --text: #f4e3cc;
  --dim: #c4a283;
  --ink: #120a06;
  --focus: #9fd3ff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: radial-gradient(100% 70% at 50% 20%, #3a140c, var(--night) 70%); color: var(--text); font: 17px/1.5 Georgia, "Times New Roman", serif; }
button { font: inherit; color: inherit; }
kbd { font: .72em/1 Georgia, serif; padding: .1em .35em; border: 1px solid currentColor; border-radius: 3px; opacity: .6; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.top { display: flex; justify-content: space-between; align-items: baseline; max-width: 1100px; margin: 0 auto; padding: 1rem 1.2rem .3rem; gap: 1rem; flex-wrap: wrap; }
h1, h2, .banner b, .move b, .door b { font-family: "Cinzel", Georgia, serif; font-weight: 600; letter-spacing: .06em; }
h1 { margin: 0; font-size: clamp(1.8rem, 4.5vw, 2.8rem); color: var(--gold); text-shadow: 0 2px 10px rgba(227,180,101,.25); }
.where { margin: 0; color: var(--dim); display: flex; gap: .8rem; align-items: center; }

.theater { max-width: 1100px; margin: 0 auto; padding: .4rem 1.2rem 2rem; }
.stage-wrap { position: relative; }
#stage { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 30px 60px -30px #000; }
.banner { position: absolute; top: 4.5%; display: flex; flex-direction: column; gap: .15rem; padding: .3rem .8rem .4rem; background: rgba(20,8,5,.75); border: 1px solid rgba(227,180,101,.35); border-radius: 6px; min-width: 9rem; }
.banner[hidden] { display: none; }
.banner.left { left: 11%; } .banner.right { right: 11%; text-align: right; }
.banner b { font-size: .95rem; color: var(--gold); }
.hp { display: flex; gap: 3px; flex-wrap: wrap; }
.banner.right .hp { justify-content: flex-end; }
.hp i { width: 10px; height: 14px; background: #d9443a; clip-path: polygon(50% 100%, 0 35%, 15% 0, 50% 18%, 85% 0, 100% 35%); }
.hp i.gone { background: rgba(255,255,255,.15); }

.panel { margin-top: 1rem; background: rgba(36,14,9,.75); border: 1px solid rgba(227,180,101,.25); border-radius: 10px; padding: 1rem 1.2rem 1.1rem; }
.panel h2 { margin: 0 0 .7rem; color: var(--gold); font-size: 1.3rem; }
.tell { margin: 0 0 .8rem; font-size: 1.15rem; font-style: italic; min-height: 1.6em; text-align: center; }
.tell .flicker { color: #ffcf7a; font-style: normal; }
.moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.move { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem .4rem .6rem; background: linear-gradient(#3a1810, #24100a); border: 1.5px solid rgba(227,180,101,.45); border-radius: 10px; cursor: pointer; transition: transform .12s, border-color .12s; }
.move:hover:not([disabled]) { border-color: var(--gold); transform: translateY(-2px); }
.move[disabled] { opacity: .45; cursor: default; }
.move svg { width: 40px; height: 40px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.move b { font-size: 1.15rem; }
.move small { color: var(--dim); font-style: italic; }
.move kbd { position: absolute; right: .5rem; top: .4rem; }
.outcome { margin: .8rem 0 .2rem; min-height: 1.5em; text-align: center; font-size: 1.05rem; }
.outcome .good { color: #b8e08a; } .outcome .bad { color: #ff9b8a; } .outcome .even { color: var(--dim); }
.seen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .88rem; color: var(--dim); margin-top: .4rem; }
.seen ol { display: flex; gap: .3rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.seen li { padding: .05rem .45rem; border-radius: 4px; background: rgba(227,180,101,.12); color: var(--text); font-size: .82rem; }
.seen li.sep { background: none; color: var(--gold); }

.door-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.door { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.2rem .8rem 1rem; cursor: pointer; color: var(--text);
  background: radial-gradient(80% 60% at 50% 30%, #4a2012, #1f0c07); border: 1.5px solid rgba(227,180,101,.35); border-radius: 50% 50% 10px 10px / 30% 30% 10px 10px; transition: border-color .12s, transform .12s; }
.door:hover { border-color: var(--gold); transform: translateY(-3px); }
.door.elite { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(227,180,101,.2) inset; }
.door svg { width: 64px; height: 64px; }
.door b { font-size: 1.05rem; color: var(--gold); }
.door small { color: var(--dim); font-size: .88rem; line-height: 1.3; }

.satchel { margin-top: .9rem; font-size: .9rem; color: var(--dim); }
.satchel b { font-family: "Cinzel", serif; color: var(--gold); margin-right: .4rem; }
.colophon { margin-top: 1rem; font-size: .85rem; color: var(--dim); }
.colophon a, .linkish { color: inherit; }
.linkish { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-size: inherit; }

.btn { border: 1.5px solid var(--gold); background: #3a1810; padding: .45rem 1rem; border-radius: 8px; cursor: pointer; font-family: "Cinzel", serif; letter-spacing: .05em; }
.btn:hover { background: #4a2012; }
.btn.small { padding: .15rem .6rem; font-size: .8rem; }

.howto { max-width: min(42rem, 94vw); max-height: 90vh; overflow: auto; background: #221009; color: var(--text); border: 1.5px solid var(--gold); border-radius: 12px; padding: 1.2rem 1.5rem 1.3rem; }
.howto::backdrop { background: rgba(8, 3, 2, .75); }
.howto h2 { margin: 0 0 .4rem; color: var(--gold); font-size: 1.7rem; }
.howto h2:focus { outline: none; }
.howto h3 { font-family: "Cinzel", serif; color: var(--gold); margin: 1.1rem 0 .3rem; font-size: 1.05rem; letter-spacing: .05em; }
.howto p, .howto li { margin: .3rem 0; }
.howto ul { padding-left: 1.2rem; }
.howto .lead { font-style: italic; font-size: 1.05rem; }
.triangle { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; padding: .6rem .8rem; background: rgba(227,180,101,.08); border-radius: 8px; font-family: "Cinzel", serif; }
.triangle .arrow { color: var(--dim); font-family: Georgia, serif; font-style: italic; font-size: .9rem; }
.howto form { margin-top: 1rem; text-align: right; }

@media (max-width: 640px) {
  .theater { padding: .3rem .6rem 2rem; }
  .banner { min-width: 0; padding: .2rem .45rem; top: 3%; }
  .banner.left { left: 3%; } .banner.right { right: 3%; }
  .banner b { font-size: .75rem; }
  .hp i { width: 7px; height: 10px; }
  .move small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .move, .door { transition: none; } }

/* gold and the floor map */
.where .gold { color: var(--gold); font-variant-numeric: tabular-nums; margin-left: .4rem; }
.dungeon-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.room-note { margin: 0; color: var(--text); min-height: 1.4em; }
.dungeon-body { display: grid; grid-template-columns: minmax(0, 26rem) 1fr; gap: 1rem 1.4rem; align-items: center; margin-top: .6rem; }
.dmap { position: relative; width: 100%; aspect-ratio: 1; }
.dmap-doors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dmap-doors line { stroke: rgba(227,180,101,.35); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 2 12; }
.dmap-doors line.walked { stroke: rgba(227,180,101,.7); stroke-dasharray: none; stroke-width: 6; }
.droom { position: absolute; width: calc(100% * 100 / 368); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .25rem; border-radius: 10px; border: 1.5px solid rgba(227,180,101,.25); background: #2a120b; color: var(--text); cursor: pointer; text-align: center; transition: transform .12s, border-color .12s; }
.droom svg { width: 42%; height: auto; }
.droom b { font-family: "Cinzel", Georgia, serif; font-size: .74rem; color: var(--gold); line-height: 1.1; }
.droom small { font-size: .62rem; color: var(--dim); line-height: 1.15; }
.droom.reach { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(227,180,101,.18) inset; }
.droom.reach:hover:not(:disabled) { transform: translateY(-2px); background: #3a1810; }
.droom.here { border-color: #f6c27a; background: #4a2012; box-shadow: 0 0 18px rgba(246,194,122,.35); cursor: default; }
.droom.done { opacity: .62; }
.droom.dark { background: #160805; border-style: dashed; }
.droom.dark b, .droom.dark small { color: #6b4a33; }
.droom.k-trap:not(.dark) b { color: #e07a52; }
.droom:disabled { cursor: default; }
.droom:disabled:not(.here) { filter: saturate(.75); }
.droom .you { position: absolute; top: -.7rem; padding: 0 .4rem; border-radius: 6px; background: #f6c27a; color: #1a0b07; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.room-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.btn.go { background: #6a2a12; }
@media (max-width: 720px) { .dungeon-body { grid-template-columns: 1fr; } .dmap { max-width: 24rem; margin: 0 auto; } .droom small { display: none; } }

/* score and the Hall of Shadows */
.score-line { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--dim); }
.score-line b { color: var(--text); }
.score-line .total b { color: var(--gold); font-size: 1.15rem; }
.hall-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; }
.hall-form label { width: 100%; color: var(--gold); }
.hall-form input { font: inherit; padding: .4rem .6rem; border-radius: 6px; border: 1.5px solid var(--gold); background: #1a0b07; color: var(--text); min-width: 12rem; }
.hall-h { font-family: "Cinzel", Georgia, serif; color: var(--gold); margin: 1rem 0 .3rem; font-size: 1rem; }
.hall-list { margin: 0 0 1rem; padding-left: 1.6rem; }
.hall-list li { padding: .2rem 0; border-bottom: 1px solid rgba(227,180,101,.12); }
.hall-list li > span { display: inline-block; }
.hall-list .h-name { min-width: 9rem; font-weight: 600; }
.hall-list .h-what { min-width: 10rem; color: var(--dim); }
.hall-list .h-score { font-variant-numeric: tabular-nums; color: var(--gold); }
.hall-list li.mine { background: rgba(227,180,101,.12); }
.hall-list li.empty { list-style: none; margin-left: -1.6rem; color: var(--dim); }
.hall-actions { display: flex; gap: .6rem; align-items: center; }

/* Double-tap zoom: touch-action is intersected across every ancestor, so
   manipulation on the root stops double-tap zoom page-wide (readouts, gaps
   between controls, sheet backdrops) while pinch zoom still works. */
html, body { touch-action: manipulation; }