/* =============================================================================
   style.css : the look of The Knight of 112 (Direction I, chosen Oct 18).

   Two themes: "night" (default, dark slate and gold) and "day" (parchment).
   Every colour is a variable on :root, so the day theme only redefines the
   variables. Text size: prefs set the root font size; everything below is in
   rem, so it all follows.

   Contrast: body text on the panels is above 7:1 in both themes; the gold
   accent is never used for small text on a light background.
   ============================================================================= */
:root {
  --bg: #1b2030; --pan: #252b3c; --pan2: #1f2433; --ink: #f1ead8; --dim: #b9b19e; --line: #3b4357;
  --acc: #e0b43a; --acc-ink: #1b1b1b; --bad: #e07a6a; --good: #7cc98a; --code: #151923;
  --l-1: #5a6070; --l0: #fafafa; --l1: #d9ccb4; --l2: #c98a3a; --l3: #5f7f9a; --l4: #f2c94c;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans: 'Alegreya Sans', system-ui, sans-serif;
  --serif: 'Alegreya SC', 'Alegreya', Georgia, serif;
}
:root[data-theme="day"] {
  --bg: #ece5d4; --pan: #faf6ec; --pan2: #f2ecdd; --ink: #2b2620; --dim: #625a4c; --line: #d6cbb4;
  --acc: #8a5a00; --acc-ink: #ffffff; --bad: #a83226; --good: #2f6b3a; --code: #ffffff;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.05rem; line-height: 1.45; }
a { color: var(--acc); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: .02em; margin: 0 0 .4rem; }
code, pre, .mono { font-family: var(--mono); }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
main:focus, main:focus-visible { outline: none; }   /* main is focused by script after a view change; no frame */
.dim { color: var(--dim); }
.sr { position: absolute; left: -9999px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--pan2);
       border-bottom: 2px solid var(--acc); flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
.brand { font-family: var(--serif); font-size: 1.3rem; color: var(--acc); font-weight: 700; white-space: nowrap; }
.bar nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.bar nav button { background: none; border: 0; color: var(--dim); font: inherit; padding: .3rem .55rem; cursor: pointer; border-radius: 4px; }
.bar nav button[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--acc); }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--dim); }
.nograde { font-size: .82rem; color: var(--dim); }

main { max-width: 1240px; margin: 0 auto; padding: 1rem; }
.panel { background: var(--pan); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; }
.grid2 { display: grid; grid-template-columns: 1fr 330px; gap: 1rem; }
.grid2 > *, .chal > *, .parsons > * { min-width: 0; }          /* let code blocks scroll inside, not the page */
.grid2.even { grid-template-columns: 1fr 1fr; }
.side { max-height: calc(100vh - 7rem); overflow-y: auto; position: sticky; top: 4rem; }
.scrollx { overflow-x: auto; max-width: 100%; }
@media (max-width: 820px) { .grid2, .grid2.even { grid-template-columns: 1fr; } .side { max-height: none; position: static; } }

/* ── Buttons, chips ──────────────────────────────────────────────────────── */
button, .btn { font: inherit; border-radius: 6px; padding: .45rem .9rem; cursor: pointer; border: 1px solid var(--dim);
               background: transparent; color: var(--ink); }
button.primary, .btn.primary { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); font-weight: 700; }
button:disabled { opacity: .45; cursor: default; }
.chip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
        border: 1px solid #10131b; white-space: nowrap; color: #222; }
.chip.l-1 { background: var(--l-1); color: #e4e6ec; } .chip.l0 { background: var(--l0); } .chip.l1 { background: var(--l1); }
.chip.l2 { background: var(--l2); color: #fff; } .chip.l3 { background: var(--l3); color: #fff; } .chip.l4 { background: var(--l4); }

/* ── Map ─────────────────────────────────────────────────────────────────── */
/* The map canvas fills the width; game.js sets its height to fill the window
   below it. The tooltip (#tip) floats over the canvas next to the pointer. */
.mapbox { position: relative; }
#map { width: 100%; display: block; image-rendering: pixelated; border: 3px solid #10131b; border-radius: 6px;
       cursor: grab; touch-action: none; background: #10131b; }
.maptip { position: absolute; z-index: 5; pointer-events: none; max-width: 300px; background: var(--pan); color: var(--ink);
          border: 2px solid var(--acc); border-radius: 8px; padding: .45rem .65rem; font-size: .9rem; line-height: 1.35;
          box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.mapctl { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
.mapctl button { padding: .3rem .65rem; font-size: .9rem; }
.mapctl button[aria-pressed="true"] { border-color: var(--acc); color: var(--acc); }
.legendline { font-size: .85rem; margin: .4rem 0 0; }
.stoplist { width: 100%; border-collapse: collapse; font-size: .92rem; }
.stoplist td { padding: .3rem .2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.stoplist td.sid { font-family: var(--mono); font-weight: 700; white-space: nowrap; width: 3.2rem; }
button.link { border: 0; padding: 0; background: none; color: var(--acc); text-align: left; cursor: pointer; font: inherit; text-decoration: underline; }
@media (max-width: 700px) { .maphelp { display: none; } .mapctl { margin-left: 0; } }
.side table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.side td { padding: .28rem .2rem; border-bottom: 1px solid var(--line); }
.side td.sid { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.side button.link { border: 0; padding: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.side button.link:hover { text-decoration: underline; }
.statline { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.knightmini { image-rendering: pixelated; vertical-align: middle; }

/* ── Skill drawer (knowledge scroll + battles) ──────────────────────────── */
dialog { background: var(--pan); color: var(--ink); border: 2px solid var(--acc); border-radius: 10px; max-width: 760px; width: calc(100% - 2rem); padding: 1.2rem 1.4rem; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.scroll { background: #f3e9cf; color: #2b2620; border-radius: 6px; padding: .8rem 1rem; margin: .6rem 0; border: 1px solid #c9b48a; }
.scroll table { border-collapse: collapse; } .scroll td, .scroll th { border-bottom: 1px solid #c9b48a; padding: .15rem .5rem; }
.scroll code { background: rgba(0,0,0,.07); padding: 0 .25em; border-radius: 3px; }
.battles { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .4rem; }
.battles li button { width: 100%; text-align: left; display: flex; gap: .6rem; align-items: center; background: var(--pan2); border-color: var(--line); }
.battles img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.done { color: var(--good); font-weight: 700; margin-left: auto; font-size: .85rem; }

/* ── Battle ──────────────────────────────────────────────────────────────── */
.arena { position: relative; border: 3px solid #10131b; border-radius: 6px; overflow: hidden; }
#arena { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.plate { position: absolute; top: 10px; background: rgba(20,22,32,.88); border: 2px solid var(--acc); border-radius: 6px;
         padding: .3rem .6rem; color: #f1ead8; font-size: .85rem; max-width: 46%; }
.plate b { font-family: var(--serif); font-size: 1rem; }
.plate.left { left: 10px; } .plate.right { right: 10px; text-align: right; }
.chal { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 860px) { .chal { grid-template-columns: 1fr; } }
.prompt p:first-child { margin-top: 0; }
pre.code { background: var(--code); border: 1px solid var(--line); border-radius: 6px; padding: .5rem 0; margin: .5rem 0; overflow-x: auto; font-size: .9rem; line-height: 1.5; }
.cl { display: flex; } .cl .ln { width: 3em; text-align: right; padding-right: .8em; color: var(--dim); flex: none; user-select: none; }
.cl .tx { white-space: pre; padding-right: 1em; }
.cl.pickable { cursor: pointer; } .cl.pickable:hover { background: rgba(224,180,58,.10); }
.cl.sel { background: rgba(224,180,58,.22); box-shadow: inset 4px 0 0 var(--acc); }
.opt { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .7rem; margin-bottom: .4rem; border: 1px solid var(--line);
       border-radius: 6px; background: var(--pan2); cursor: pointer; }
.opt input { margin-top: .3rem; }
.field { display: grid; grid-template-columns: 1fr 160px; gap: .6rem; align-items: center; margin-bottom: .4rem; }
.field input, .field select, textarea, input[type=text], input[type=date], select { font: inherit; padding: .35rem .5rem; border-radius: 5px; border: 1px solid var(--line); background: var(--code); color: var(--ink); }
.field.wrong input, .field.wrong select { border-color: var(--bad); }
textarea.out { width: 100%; min-height: 6rem; font-family: var(--mono); }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; }
.fb { border-left: 4px solid var(--acc); background: rgba(224,180,58,.10); padding: .6rem .8rem; border-radius: 4px; margin: .6rem 0; }
.fb.ok { border-color: var(--good); background: rgba(124,201,138,.12); }
.fb.bad { border-color: var(--bad); background: rgba(224,122,106,.10); }
.fb pre { white-space: pre-wrap; font-size: .82rem; max-height: 14rem; overflow: auto; }
.tests { list-style: none; padding: 0; margin: .3rem 0; } .tests li { padding: .15rem 0; }
.pass { color: var(--good); font-weight: 700; } .fail { color: var(--bad); font-weight: 700; }
.hint { border: 1px dashed var(--acc); border-radius: 6px; padding: .5rem .7rem; margin: .4rem 0; background: var(--pan2); }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Parsons */
.parsons { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 860px) { .parsons { grid-template-columns: 1fr; } }
.pcol { min-height: 8rem; border: 1px dashed var(--line); border-radius: 6px; padding: .4rem; }
.pline { display: flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .88rem; background: var(--code);
         border: 1px solid var(--line); border-radius: 4px; padding: .25rem .35rem; margin-bottom: .3rem; }
.pline .t { white-space: pre; flex: 1; overflow-x: auto; min-width: 0; }
.pline { flex-wrap: wrap; }
.pline button { padding: .05rem .4rem; font-size: .8rem; }

/* Code editor */
.editor { display: flex; border: 1px solid var(--line); border-radius: 6px; background: var(--code); overflow: hidden; }
.editor .gut { padding: .5rem .4rem; text-align: right; color: var(--dim); font-family: var(--mono); font-size: .9rem; line-height: 1.5; user-select: none; white-space: pre; }
.editor textarea { flex: 1; border: 0; border-radius: 0; resize: vertical; min-height: 18rem; font-family: var(--mono); font-size: .9rem; line-height: 1.5; padding: .5rem; white-space: pre; overflow-x: auto; tab-size: 4; }
.filetabs { display: flex; gap: .3rem; flex-wrap: wrap; margin: .3rem 0; } .filetabs button[aria-pressed="true"] { border-color: var(--acc); }

/* Joke */
.joke { background: #f6efd9; color: #2b2620; border: 3px solid #2b2620; }
.joke .k { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #7a2b3a; font-weight: 700; }
.joke .q { font-size: 1.2rem; font-weight: 700; margin: .5rem 0 .2rem; }
.joke button.primary { background: #8a5a00; border-color: #8a5a00; color: #fff; }

/* Knight creator */
.creator { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .creator { grid-template-columns: 1fr; } }
.preview { background: linear-gradient(#5b8bb5 0 58%, #4f7d3e 58% 100%); border-radius: 8px; display: flex; justify-content: center; align-items: flex-end; min-height: 260px; }
.preview canvas { image-rendering: pixelated; }
.choices { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .8rem; }
.choices button[aria-pressed="true"] { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc); }
.swatch { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; }

table.list { width: 100%; border-collapse: collapse; } table.list th, table.list td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
table.list th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.me { background: rgba(224,180,58,.12); }

/* Phones: smaller name plates over the arena, Parsons buttons under their line. */
@media (max-width: 600px) {
  .plate { font-size: .7rem; padding: .15rem .4rem; top: 4px; } .plate b { font-size: .8rem; }
  .plate .sub { display: none; }
  .pline .t { flex: 1 1 100%; }
}

/* ── Distraction-free mode (the "Full screen" button) ─────────────────────
   The browser goes full screen where it can (not on iPhone Safari, which has
   no full-screen API for pages); either way the bar shrinks to the menu
   only, the reminder text and the brand go, and the page uses the whole
   width. Pressing Esc leaves full screen and this mode together. */
.focusbtn, .asstudent { font-size: .85rem; }
.asstudent { display: inline-flex; gap: .3rem; align-items: center; color: var(--dim); white-space: nowrap; }
body.focus .bar { padding: .25rem .6rem; }
body.focus .bar .brand, body.focus .bar .nograde, body.focus .bar .asstudent { display: none; }
body.focus main { max-width: none; padding: .5rem .8rem; }
[hidden] { display: none !important; }            /* the hidden attribute always wins over display rules */
@media (max-width: 700px) { .bar .nograde { display: none; } .bar .brand { font-size: 1.1rem; } }