:root {
  --gold: #c9a45c;
  --gold-dim: #7a6238;
  --red: #c42a1a;
  --ink: #e8dcc0;
  --muted: #a8977a;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'Cinzel', Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--ink); font-family: var(--serif); }
canvas { display: block; }

#overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,.85));
}
#overlay.hidden { display: none; }
#panel {
  width: min(740px, 100%); max-height: 100%; overflow: auto; padding: 26px 32px;
  background: linear-gradient(#1b140f, #0a0705);
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 0 4px #000, 0 0 0 5px #3a2c1a, 0 0 70px rgba(160,20,10,.25), inset 0 0 50px rgba(0,0,0,.85);
}
.title {
  margin: 0; text-align: center; font-weight: 900; line-height: 1.05; letter-spacing: .06em;
  font-size: clamp(34px, 7vw, 62px); color: #d23a1f;
  text-shadow: 0 0 22px rgba(255,60,20,.45), 0 2px 0 #000;
}
h2 { margin: 0 0 4px; text-align: center; color: var(--gold); font-size: 28px; letter-spacing: .08em; }
.subtitle { text-align: center; color: var(--gold); letter-spacing: .22em; text-transform: uppercase; font-size: 12px; margin: 8px 0 18px; }
.body { font-family: Georgia, serif; font-size: 15px; line-height: 1.55; color: #cdbf9f; margin-bottom: 18px; }
.body p { margin: 0 0 10px; }
.body kbd { font-family: var(--mono); font-size: 13px; padding: 1px 6px; border: 1px solid var(--gold-dim); background: #000; color: var(--gold); border-radius: 3px; }
.body q, .quote { font-style: italic; color: #e2c98f; }

.options { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.options li {
  display: flex; gap: 16px; align-items: baseline; padding: 8px 12px;
  border: 1px solid #2e2318; background: rgba(0,0,0,.4); transition: border-color .1s, opacity .1s;
}
.options .w { font-family: var(--mono); font-weight: 700; font-size: 20px; color: #f2e8d0; min-width: 10ch; }
.options .w .t { color: var(--gold); }
.options .d { font-size: 14px; color: var(--muted); font-family: Georgia, serif; }
.options li.match { border-color: var(--gold); background: rgba(60,30,10,.35); }
.options li.dim { opacity: .35; }
.options li.def .w::after { content: ' ↵'; color: var(--gold-dim); font-weight: 400; }
/* a Novice may click: the options light up under the mouse */
.clicky .options li:not(.locked) { cursor: pointer; }
.clicky .options li:not(.locked):hover { border-color: var(--gold-dim); background: rgba(60,30,10,.25); }

.prompt { margin-top: 14px; font-family: var(--mono); font-size: 20px; color: var(--gold); text-align: center; min-height: 1.5em; }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.msg { text-align: center; color: #e6b25a; min-height: 1.4em; font-family: Georgia, serif; margin-top: 10px; }
.shake { animation: shake .25s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 6px 0 16px; }
.stat { border: 1px solid #2e2318; padding: 8px 6px; text-align: center; background: rgba(0,0,0,.4); }
.stat b { display: block; font-family: var(--mono); font-size: 22px; color: #f2e8d0; }
.stat span { font-size: 10px; letter-spacing: .15em; color: var(--gold-dim); text-transform: uppercase; }
.bonus { color: #e8c35a; text-align: center; margin: 0 0 6px; }

.kbd { display: flex; flex-direction: column; gap: 5px; align-items: center; margin: 8px 0 14px; }
.kbd .row { display: flex; gap: 5px; }
.kbd .k {
  position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: #fff; border: 1px solid #000; border-radius: 3px;
}
.kbd .k small { position: absolute; bottom: 1px; right: 3px; font-size: 9px; opacity: .85; }
.legend { text-align: center; font-size: 12px; color: var(--muted); font-family: Georgia, serif; }

.gear { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; margin: 4px 0 12px; }
.gear div { border: 1px solid #2e2318; background: rgba(0,0,0,.4); padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.gear span { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-dim); font-family: var(--serif); }
.gear b { color: #f2e8d0; font-weight: 700; }
.gear em { font-style: normal; font-size: 13px; color: var(--muted); }
.up { color: #8ed07e; }
.down { color: #e06a50; }
.lost { text-decoration: line-through; }

canvas.fig { width: 110px; height: 140px; }
canvas.fig.big { width: 170px; height: 215px; flex: none; }
.lshero { display: flex; align-items: center; gap: 14px; }
.lshero canvas.fig { width: 50px; height: 64px; flex: none; }
/* on a result the hero stands beside the stars without making the screen any taller */
.lshero.res { justify-content: center; position: relative; }
.lshero.res canvas.fig { position: absolute; left: calc(50% - 160px); top: 50%; width: 62px; height: 80px; transform: translateY(-62%); }
.creator { display: flex; gap: 20px; align-items: center; margin-bottom: 4px; }
.creator.solo { justify-content: center; }
.creator .fig { border: 1px solid #2e2318; background: radial-gradient(ellipse at 50% 70%, #241a12, #050302); }
.sheet { flex: 1; min-width: 0; }
.sheet p { margin: 6px 0; }
.hero-name { font-family: var(--serif); font-weight: 700; font-size: 26px; color: #f2e8d0; letter-spacing: .04em; }
.hero-cls { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.look { display: grid; grid-template-columns: 9ch 1fr auto; gap: 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid #2a1f15; }
.look span { font-family: var(--mono); color: var(--gold-dim); font-size: 13px; }
.look b { color: #f2e8d0; font-weight: 400; }
.look i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.roster { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 12px; }
.roster figure { margin: 0; display: flex; flex-direction: column; align-items: center; border: 1px solid #2e2318; background: radial-gradient(ellipse at 50% 70%, #241a12, #050302); padding: 4px 4px 6px; }
.roster figure.cur { border-color: var(--gold); }
.roster figcaption { font-family: var(--serif); font-weight: 700; color: #f2e8d0; font-size: 14px; text-align: center; display: flex; flex-direction: column; }
.roster figcaption small { font-family: Georgia, serif; font-weight: 400; color: var(--muted); font-size: 11px; }
.options .d .legend { display: block; text-align: left; margin-top: 2px; }

.death .title { color: #b8140c; font-size: clamp(32px, 6vw, 54px); }
.victory .title { color: #e2b04a; text-shadow: 0 0 22px rgba(255,200,80,.4), 0 2px 0 #000; }

@media (max-width: 560px) {
  #panel { padding: 18px 16px; }
  .kbd .k { width: 27px; height: 32px; font-size: 12px; }
  .options .w { font-size: 17px; min-width: 8ch; }
  .creator { flex-direction: column; gap: 10px; }
  canvas.fig.big { width: 130px; height: 165px; }
  canvas.fig { width: 84px; height: 108px; }
}
.sheet .legend { text-align: left; }

/* lesson book: one tile per lesson, typed by its keys */
.options.tiles { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); margin-bottom: 10px; }
.options.tiles li { flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; text-align: center; }
.options.tiles .w { min-width: 0; font-size: 22px; }
.options.tiles .d { font-size: 12px; line-height: 1.3; }
.options li.locked { opacity: .3; }
.options li.locked .w { color: var(--muted); }
.stars { display: block; color: #e8c35a; letter-spacing: .12em; font-size: 14px; }
.stars i { font-style: normal; color: #3a2e20; }
.stars.big { text-align: center; font-size: 40px; margin: 0 0 8px; text-shadow: 0 0 18px rgba(255,200,80,.35); }
.options.tiles li.cur { border-color: var(--gold-dim); box-shadow: inset 0 0 12px rgba(255,200,80,.15); }

/* course map: where a lesson sits, row by row */
.course { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.course small { display: block; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-dim); font-family: var(--serif); }
.course p { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.course p.legend { display: block; margin-top: 2px; }
.course span { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; padding: 3px 5px; border: 1px solid #2e2318; background: rgba(0,0,0,.4); font-family: var(--mono); }
.course b { font-size: 12px; color: #f2e8d0; font-weight: 700; }
.course i { font-style: normal; font-size: 9px; line-height: 1.2; color: #e8c35a; }
.course .rev { border-style: dashed; }
.course .locked { opacity: .35; }
.course .cur { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,200,80,.4); }

/* wide panels (the scriptorium and its lessons): everything on one screen, no scrolling */
#panel.wide { width: min(1180px, 100%); padding: 20px 28px; }
.wide .subtitle { margin: 6px 0 12px; }
.wide .body { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.wide .body p { margin: 0 0 6px; }
.wide .options:not(.tiles) { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 6px; }
.wide .options li { padding: 6px 12px; }
.wide .options.tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.wide .options.tiles li { padding: 5px 4px; gap: 0; }
.wide .options.tiles .w { font-size: 19px; }
.wide .stars.big { font-size: 34px; margin: 0 0 4px; }
.wide .stats { margin: 4px 0 10px; }
.wide .course { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 2px; }
.wide .course p.legend { flex-basis: 100%; }
.prompt .reveal { margin-top: 6px; font-size: 13px; color: var(--muted); }
.wide .prompt { margin-top: 8px; }
.wide .msg { margin-top: 4px; min-height: 1.2em; }
/* the Book of Names: the scribe's records in one row, small heroes */
.book .stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.book .stat span { letter-spacing: .06em; white-space: nowrap; font-size: 9px; }
.book canvas.fig { width: 76px; height: 96px; }
.book .roster { gap: 6px; margin-bottom: 6px; }
.book .roster figcaption { font-size: 13px; }
@media (max-height: 760px) {
  .wide h2 { font-size: 23px; }
  .wide .body { font-size: 13px; }
  .wide .options.tiles .d { font-size: 11px; }
  .wide .stars.big { font-size: 28px; }
  .wide .stat { padding: 5px 6px; }
  .wide .stat b { font-size: 19px; }
}

/* title screen: the dead mouse says the game is typed, not clicked */
#panel.home { width: min(900px, 100%); }
.home .options { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 6px; }
.home .options li { padding: 6px 12px; }
.home .body { margin-bottom: 12px; }
.nomouse { display: flex; align-items: center; gap: 14px; margin: 0; padding: 4px 12px; border: 1px dashed #4a1a10; background: rgba(60,8,4,.25); }
.nomouse p { margin: 0; }
.nomouse b { color: #e2c98f; }
.nomouse.alive { border-color: #5a4a20; background: rgba(60,40,8,.2); }
.deadmouse { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 0 6px rgba(196,42,26,.45)); }
@media (max-height: 760px) {
  #panel.home { padding: 18px 28px; }
  .home .title { font-size: 50px; }
  .home .subtitle { margin: 6px 0 12px; }
  .home .body { font-size: 14px; line-height: 1.45; }
  .home .body p { margin: 0 0 7px; }
  .home .msg { margin-top: 4px; min-height: 1.2em; }
  .home .prompt { margin-top: 6px; }
}

/* the chronicle: the player's progress, charted */
.prog { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start; }
.prog p { margin: 0 0 6px; }
.prog .legend { margin: 2px 0 0; }
.chart { display: block; width: 100%; height: auto; }
.chart line { stroke: #2e2318; stroke-width: 1; }
.chart text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.chart text.cap { font-family: var(--serif); font-size: 10px; letter-spacing: .12em; fill: var(--gold-dim); text-transform: uppercase; }
.chart text.now { fill: var(--gold); font-weight: 700; }
.chart.days { margin-bottom: 8px; }
.progress .stats { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.progress .stat span { letter-spacing: .06em; white-space: nowrap; font-size: 9px; }
@media (max-width: 760px) { .prog { grid-template-columns: 1fr; } }