/* ---------- reset + stage ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--desk);font-family:var(--mono);color:var(--g900);overflow:hidden}

/* Every control is a real <button>, so strip the UA chrome once here rather than
   per component. Anything that looks like paper keeps its own background. */
button{font:inherit;color:inherit;background:none;border:none;text-align:inherit;cursor:pointer}
button[disabled]{cursor:not-allowed}

/* ---------- focus ---------- */
/* Keyboard focus has to survive on warm paper AND on the Charcoal Void's black
   page, so it's a double ring: dark core, light halo. */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
  box-shadow:0 0 0 6px rgba(248,244,231,.85);
}
.page.dark :focus-visible{
  outline-color:#9FC6E8;
  box-shadow:0 0 0 6px rgba(27,27,24,.85);
}
/* editable fields read better with a filled focus than a ring */
[contenteditable]:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
  box-shadow:none;
  background:var(--tint-blue);
}

/* Touch/pointer targets reach 44px without changing how anything looks
   (the design's own icon buttons and chips are drawn smaller than that). */
.hit44{position:relative}
.hit44::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px)}

/* screen-reader-only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 1600x900 design surface, scaled to fit the window (keyboard-first desktop) */
#stage{position:fixed;left:50%;top:50%;width:1600px;height:900px;transform:translate(-50%,-50%);transform-origin:center center}
#screen{width:1600px;height:900px;padding:36px 44px;background:var(--desk)}

/* ---------- paper page shell ---------- */
.page{position:relative;height:828px;background:linear-gradient(180deg,#FAF6EA,#F4EFDF);border:2px solid var(--g900);border-radius:6px;box-shadow:8px 9px 0 rgba(27,27,24,.18);overflow:hidden;
  /* world vars — per-chapter themes override these inline; defaults = Margin Run */
  --w-active:var(--ink);--w-ink:var(--g900);--w-upcoming:var(--upcoming);--w-rules:var(--ruled)}
.page[data-world]{background:linear-gradient(180deg,var(--w-pg1),var(--w-pg2))}
.ruled{position:absolute;top:88px;bottom:44px;left:0;right:0;background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--w-rules) 31px 33px);pointer-events:none}
.ruled.wide{background:repeating-linear-gradient(to bottom,transparent 0 35px,var(--w-rules) 35px 37px)}
.redline{position:absolute;top:88px;bottom:44px;left:118px;width:2px;background:var(--marginline);pointer-events:none}

/* dark world (Charcoal Void): flip the on-paper chrome to world ink; cards stay paper */
.page.dark .logo,.page.dark .hdr-title,.page.dark .hdr-kicker{color:var(--w-ink)}
.page.dark .logo .x{color:var(--w-active)}
.page.dark .hdr{border-bottom-color:rgba(244,239,224,.5)}
.page.dark .hdr-div{background:rgba(244,239,224,.35)}
.page.dark .ftr{color:rgba(244,239,224,.55)}
.page.dark .redline{opacity:.35}
.page.dark .on-paper{color:rgba(244,239,224,.66)!important}
.page.dark .on-paper-strong{color:var(--w-ink)!important;border-color:var(--w-active)!important}
.page.dark .hand{color:#E08B7E}
.page.dark .meter .bar,.page.dark .pillbar{background:rgba(244,239,224,.14);border-color:rgba(244,239,224,.6)}
.page.dark .meter .nib{border-left-color:rgba(244,239,224,.8)}
.page.dark .iconbtn{background:rgba(244,239,224,.12);color:var(--w-ink);border-color:rgba(244,239,224,.6)}
.page.dark .iconbtn div{background:var(--w-ink)!important}

/* header */
.hdr{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 40px 16px;border-bottom:2px solid var(--g900)}
.hdr-left{display:flex;align-items:center;gap:20px}
.hdr-div{width:2px;height:30px;background:var(--g300)}
.logo{font:800 24px var(--mono);color:var(--g900);cursor:pointer;user-select:none}
.logo .x{color:var(--ink)}
.logo-bar{height:5px;width:66px;background:var(--hl);border-radius:3px;margin-top:2px;transform:skewX(-12deg)}
.logo.lg{font-size:28px}
.logo.lg + .logo-bar{height:6px;width:78px}
.hdr-kicker{font:800 10px var(--mono);letter-spacing:.16em;color:var(--ink)}
.hdr-title{font:800 15px var(--mono);color:var(--g900)}
.hdr-title.lg{font-size:17px}
.hdr-right{display:flex;align-items:center;gap:14px}

/* footer */
.ftr{position:absolute;left:40px;right:40px;bottom:12px;display:flex;justify-content:space-between;font:700 11px var(--mono);letter-spacing:.12em;color:var(--footer);pointer-events:none}
.ftr.ondark{color:rgba(248,244,231,.75)}

/* ---------- shared components ---------- */
.kicker{font:800 11px var(--mono);letter-spacing:.16em;color:var(--ink)}
.kicker.dim{color:var(--g500)}
.kicker.sm{font-size:10px;letter-spacing:.14em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;background:var(--ink);color:var(--paper);font:800 15px var(--mono);letter-spacing:.06em;border:2px solid var(--g900);border-radius:4px;box-shadow:4px 4px 0 var(--g900);cursor:pointer;user-select:none;white-space:nowrap}
.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--g900)}
.btn.sec{background:var(--raised);color:var(--g900);box-shadow:4px 4px 0 rgba(27,27,24,.85)}
.btn.sec:hover{box-shadow:1px 1px 0 rgba(27,27,24,.85)}
.btn.sm{padding:10px 20px;font-size:13px;box-shadow:3px 3px 0 var(--g900)}
.btn.sm:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--g900)}
.btn.sm.sec{box-shadow:3px 3px 0 rgba(27,27,24,.85)}
.btn.sm.sec:hover{box-shadow:1px 1px 0 rgba(27,27,24,.85)}
.btn.lg{padding:16px 34px;font-size:16px;box-shadow:4px 5px 0 var(--g900)}
.btn.lg:hover{box-shadow:1px 2px 0 var(--g900)}
.btn.quiet{background:var(--paper);color:var(--g700);border-color:var(--g500);box-shadow:none}
.btn.quiet:hover{transform:none;border-color:var(--g900);color:var(--g900)}

.linkline{display:inline-block;font:800 12px var(--mono);letter-spacing:.06em;color:var(--g500);border:none;border-bottom:2px solid var(--g300);padding-bottom:2px;cursor:pointer;background:none;text-decoration:none}
.linkline:hover{color:var(--ink);border-color:var(--ink)}
.linkline.blue{color:var(--ink);border-color:var(--ink)}
.linkline.blue:hover{color:var(--g900);border-color:var(--g900)}
.linkline.red{color:var(--red);border-color:var(--red)}
.linkline.red:hover{color:var(--g900);border-color:var(--g900)}

.card{background:var(--card);border:2px solid var(--g900);border-radius:6px;box-shadow:4px 5px 0 rgba(27,27,24,.12);padding:20px 24px}
.card.hero{box-shadow:6px 7px 0 rgba(27,27,24,.14)}
.card.selected{position:relative;border-color:var(--ink);box-shadow:6px 7px 0 rgba(27,27,24,.16)}
.corner{position:absolute;top:-2px;left:-2px;width:14px;height:14px;background:var(--ink);border-radius:4px 0 6px 0}

.stamp{border:3px solid var(--red);border-radius:8px;color:var(--red);text-align:center;font-family:var(--mono);opacity:.92}
.stamp .cap{font:800 9px var(--mono);letter-spacing:.2em}
.stamp.green{border-color:var(--green);color:var(--green)}
.stamp.gray{border-color:var(--g500);color:var(--g500)}

/* toggle */
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;background:none;border:none;padding:0;font:inherit}
.toggle .track{width:48px;height:26px;border-radius:999px;background:var(--g300);border:2px solid var(--g900);position:relative;display:inline-block;transition:background .15s}
.toggle .knob{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--g900);transition:left .15s}
.toggle.on .track{background:var(--ink)}
.toggle.on .knob{left:24px}
.toggle .tlab{font:800 10px var(--mono);color:var(--g500);min-width:26px;text-align:left}
.toggle.on .tlab{color:var(--ink)}

/* chips */
.chip{position:relative;display:inline-block;font:800 12px var(--mono);background:var(--paper);color:var(--g700);border:2px solid var(--g900);border-radius:999px;padding:6px 14px;cursor:pointer;user-select:none;white-space:nowrap}
button.chip:not(.static)::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:44px}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--g900);cursor:default}
.chip.on:hover{color:var(--paper)}
.chip.sm{font-size:11px;padding:5px 12px}
.chip.static{cursor:default}
.chip.static:hover{border-color:var(--g900);color:var(--g700)}

/* pencil meter: bordered bar + graphite nib */
.meter{display:flex;align-items:center}
.meter .bar{flex:1;height:18px;border:2px solid var(--g900);border-radius:3px;background:var(--paper);overflow:hidden}
.meter .fill{height:100%;background:var(--hl);transition:width .15s}
.meter .fill.blue{background:var(--ink)}
.meter .fill.red{background:var(--red)}
.meter .nib{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:16px solid var(--g900)}
.meter.sm .bar{height:14px}
.meter.sm .nib{border-top-width:9px;border-bottom-width:9px;border-left-width:13px}

/* progress pill bar */
.pillbar{height:12px;border:2px solid var(--g900);border-radius:999px;background:var(--paper);overflow:hidden}
.pillbar .fill{height:100%;background:var(--ink);transition:width .3s}
.pillbar .fill.green{background:var(--green)}
.pillbar .fill.yellow{background:var(--hl)}
.pillbar .fill.red{background:var(--red)}

/* keycaps */
.keycap{width:62px;height:62px;background:var(--paper);border:2px solid var(--g900);border-radius:6px;box-shadow:0 4px 0 var(--g900);display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 24px var(--mono);color:var(--g900);user-select:none}
.keycap.glow{background:var(--tint-blue);border-color:var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--ink)}
.keycap.blank{background:var(--locked-bg);border:2px dashed var(--g300);box-shadow:none}
.keycap.pressed{transform:translateY(3px);box-shadow:0 1px 0 var(--g900)}
.keycap.glow.pressed{box-shadow:0 1px 0 var(--ink)}
.keycap .bump{width:16px;height:3px;background:var(--ink);border-radius:2px;margin-top:3px}

/* mini keyboard guide (run screen NEXT KEY card) */
.kb-key{width:32px;height:32px;border:2px solid var(--g900);border-radius:4px;background:var(--paper);font:800 12px var(--mono);color:var(--g700);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(27,27,24,.5)}
.kb-key.hot{background:var(--tint-blue);border-color:var(--ink);color:var(--ink);box-shadow:0 2px 0 var(--ink);transform:translateY(-1px)}

/* sticker celebration */
@keyframes stampIn{0%{opacity:0;transform:scale(1.8) rotate(-14deg)}60%{opacity:1;transform:scale(.94) rotate(2deg)}100%{transform:scale(1) rotate(-3deg)}}
.stamp-in{animation:stampIn .5s cubic-bezier(.2,1.4,.4,1) both}
body.reduce-motion .stamp-in{animation:none}

/* small square icon buttons */
.iconbtn{position:relative;width:36px;height:36px;border:2px solid var(--g900);border-radius:4px;background:var(--paper);display:flex;align-items:center;justify-content:center;font:800 15px var(--mono);color:var(--g900);cursor:pointer;user-select:none;flex:none}
.iconbtn:hover{background:var(--tint-blue);border-color:var(--ink)}
.iconbtn::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}

/* avatar coin */
.coin{width:36px;height:36px;border-radius:50%;background:var(--ink);border:2px solid var(--g900);display:flex;align-items:center;justify-content:center;font:800 14px var(--mono);color:var(--paper)}

/* handwritten notes */
.hand{font:700 15px var(--hand);color:var(--red);transform:rotate(-1deg)}
.hand.gray{color:var(--g500)}
.hand.dark{color:var(--g700)}

/* imagery placeholder */
.ph{border:2px dashed var(--g300);background:repeating-linear-gradient(45deg,#F1EBDA 0 8px,#E9E2CE 8px 16px);display:flex;align-items:center;justify-content:center;font:700 9px var(--mono);color:var(--g500);text-align:center;border-radius:6px}

/* highlighter wash on the current word */
.hlwash{background:linear-gradient(transparent 12%,rgba(230,200,63,.65) 12% 88%,transparent 88%);border-radius:3px}
.hlwash.strong{background:linear-gradient(transparent 6%,rgba(230,200,63,.85) 6% 94%,transparent 94%)}
.hltitle{background:linear-gradient(transparent 55%,#E6C83F 55% 92%,transparent 92%)}

/* caret */
@keyframes caretB{0%,55%{opacity:1}56%,100%{opacity:0}}
.caret{display:inline-block;width:4px;background:var(--ink);vertical-align:-6px;border-radius:2px;animation:caretB 1.1s steps(1) infinite}

/* ---------- transitions ---------- */
.page-enter{animation:pageIn .26s ease-out}
@keyframes pageIn{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
.page-push{animation:pagePush .32s ease-out}
@keyframes pagePush{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.overlay-enter{animation:overIn .22s ease-out}
@keyframes overIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes shake{0%,100%{translate:0 0}25%{translate:-6px 0}75%{translate:6px 0}}
.shake{animation:shake .18s linear}
body.reduce-motion .page-enter,body.reduce-motion .page-push,body.reduce-motion .overlay-enter,body.reduce-motion .shake{animation:none}
body.reduce-motion *{transition:none!important}
@media (prefers-reduced-motion:reduce){.page-enter,.page-push,.overlay-enter,.shake{animation:none}}

/* generic helpers */
.row{display:flex;align-items:center}
.grow{flex:1}
.tr{text-align:right}
.tc{text-align:center}