/* Fonts, self-hosted (the site's security policy allows nothing from other sites). */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url(/mail-run/fonts/fredoka-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(/mail-run/fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(/mail-run/fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(/mail-run/fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-400-normal.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-700-normal.woff2) format('woff2')}
/* The hidden attribute must win over the overlays' own display rules (.black, .screen, .title…). */
[hidden]{display:none !important}
/* Layout: one centered column — masthead, 16:9 game stage with HUD/dialog overlays, control strip, then a two-column field manual. */
:root{
  color-scheme: dark;
  --ink:#0f1726;          /* page ground: night-market blue-black */
  --ink-2:#18223a;        /* raised surfaces */
  --line:#2c3a5c;
  --cream:#f4ecd4;        /* envelope paper */
  --paper-ink:#2b2416;
  --mail-red:#d8383a;     /* Manoi's scarf */
  --dialog:#1d4fa8;       /* Script Fall's character dialog blue */
  --dialog-edge:#8fb8ff;
  --gold:#ffd166;
  --muted:#a9b6d0;
  --display:"Fredoka", "Atkinson Hyperlegible", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html,body{background:var(--ink);color:#e8ecf6}
body{font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:18px 48px;display:grid;gap:14px}
.masthead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 18px}
.masthead .eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold);margin:0 0 4px}
.masthead h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.4vw,44px);line-height:1;margin:0;letter-spacing:.01em;color:var(--cream);text-wrap:balance}
.masthead h1 span{color:var(--mail-red)}
.masthead p.lede{margin:0;color:var(--muted);max-width:52ch}

.stage{position:relative;width:100%;max-width:calc((100dvh - 40px) * 16 / 9);margin-inline:auto;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;container-type:inline-size;box-shadow:0 0 0 1px var(--line),0 18px 40px -18px #000}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;touch-action:none}
.stage:fullscreen{max-width:none;border-radius:0}

.hud{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;gap:8px;padding:1.6cqw 1.8cqw;pointer-events:none;font-family:var(--display);font-weight:500;font-size:clamp(10px,2cqw,18px);line-height:1.15}
.hud .grp{display:flex;gap:.5em;flex-wrap:wrap;align-items:flex-start}
.chip{background:rgba(10,16,30,.76);color:var(--cream);padding:.22em .55em;border-radius:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip b{color:var(--gold);font-weight:600}
.chip.power{color:#fff;background:var(--mail-red)}
.chip.boss{background:#4a2a6a;color:#fff}

/* Script Fall standard: every popup uses the blue character-dialog box */
.bluebox{background:var(--dialog);color:#fff;border:2px solid var(--dialog-edge);border-radius:6px;box-shadow:0 4px 0 rgba(0,0,0,.4);font-size:clamp(11px,1.9cqw,17px);line-height:1.35}
.bluebox .who{font-family:var(--display);font-weight:600;color:var(--gold);letter-spacing:.03em}
.tip{position:absolute;left:50%;top:12%;transform:translateX(-50%);max-width:min(80%,34em);padding:.5em .8em;pointer-events:none;display:flex;gap:.6em;align-items:center}
.tip img{width:3.2em;height:3.2em;flex:none}
.toast{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);padding:.35em .8em;white-space:nowrap;pointer-events:none;font-family:var(--display)}
.dialog{position:absolute;left:3%;right:3%;bottom:4%;padding:.7em .9em;display:flex;gap:.9em;align-items:flex-start;cursor:pointer;font-size:clamp(12px,2.1cqw,20px)}
.dialog img{width:4.4em;height:4.4em;flex:none;background:rgba(255,255,255,.12);border-radius:4px}
.dialog .txt{display:grid;gap:.2em;min-width:0}
.dialog .more{position:absolute;right:.8em;bottom:.4em;font-family:var(--display);color:var(--gold);font-size:.8em}

.screen{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,10,22,.45);padding:3cqw}
.card{--stripe:repeating-linear-gradient(135deg,var(--mail-red) 0 9px,var(--cream) 9px 16px,var(--dialog) 16px 25px,var(--cream) 25px 32px);
  background:var(--cream);color:var(--paper-ink);border:8px solid transparent;border-image:var(--stripe) 8;max-width:min(94%,36em);max-height:100%;overflow:auto;padding:clamp(10px,2.4cqw,26px) clamp(12px,3cqw,32px);font-size:clamp(11px,1.75cqw,16px);display:grid;gap:.7em;box-shadow:0 10px 0 -2px rgba(0,0,0,.35)}
.card h2{font-family:var(--display);font-weight:700;font-size:2.3em;line-height:1;margin:0;text-wrap:balance}
.card h3{font-family:var(--display);font-weight:600;font-size:1.6em;line-height:1.05;margin:0;text-wrap:balance}
.card p{margin:0}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.8em;color:var(--mail-red)}
.stats{display:grid;grid-template-columns:auto auto;gap:.15em 1.4em;justify-content:start;font-variant-numeric:tabular-nums}
.stats dt{color:#6d6150}
.stats dd{margin:0;font-weight:700}
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45em}
.btn{font:inherit;font-family:var(--display);font-size:1em;cursor:pointer;border:2px solid var(--paper-ink);background:#fffaf0;color:var(--paper-ink);padding:.45em .7em;border-radius:3px;text-align:left;display:grid;gap:.05em;box-shadow:0 3px 0 var(--paper-ink)}
.btn:hover{background:#fff}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--paper-ink)}
.btn:focus-visible,.btn.sel{outline:3px solid var(--dialog);outline-offset:2px}
.btn.primary.sel{outline-color:var(--mail-red)}
.btn small{font-family:var(--body);font-size:.8em;color:#6d6150}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 3px 0 var(--paper-ink)}
.btn.primary{background:var(--dialog);color:#fff;border-color:#123676;box-shadow:0 3px 0 #123676}
.btn.primary small{color:#d8e3f7}
.row{display:flex;flex-wrap:wrap;gap:.5em}
.hint{font-size:.85em;color:#6d6150}
.cast{display:flex;gap:.4em;align-items:flex-end}
.cast img{width:3em;height:3em;image-rendering:pixelated}

.strip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.strip .row{display:flex;gap:8px;flex-wrap:wrap}
.tool{font:inherit;font-family:var(--display);font-size:14px;background:var(--ink-2);color:var(--cream);border:1px solid var(--line);border-radius:4px;padding:6px 12px;cursor:pointer}
.tool:hover{border-color:var(--gold)}
.tool:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.strip p{margin:0;color:var(--muted);font-size:13px}

.pad{display:none;justify-content:space-between;align-items:center;gap:12px;user-select:none;-webkit-user-select:none;touch-action:none}
body.touch .pad{display:flex}
.pad .cluster{display:flex;gap:10px;align-items:center}
.pad button{font-family:var(--display);font-size:15px;width:64px;height:64px;border-radius:50%;border:2px solid var(--line);background:var(--ink-2);color:var(--cream);touch-action:none;-webkit-tap-highlight-color:transparent}
.pad button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.pad button.big{width:76px;height:76px;background:#22386a}
.pad button.sq{border-radius:12px}

.manual{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:6px}
.manual section{background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:16px 18px;min-width:0}
.manual h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 8px;color:var(--cream)}
.manual p,.manual li{color:#d0d8ea;max-width:65ch}
.manual ul{margin:0;padding-left:18px;display:grid;gap:4px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;align-items:center}
.keys dt{display:flex;gap:4px;flex-wrap:wrap}
.keys dd{margin:0;color:#d0d8ea}
kbd{font-family:var(--display);font-size:12px;background:#0b111e;border:1px solid var(--line);border-bottom-width:3px;border-radius:4px;padding:1px 6px;color:var(--cream)}
.who-list{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;margin:0}
.who-list dt img{width:32px;height:32px;display:block}
.who-list dd{margin:0;color:#d0d8ea}
.foot{color:var(--muted);font-size:13px;margin:0}

/* the arcade row along the top: score, letters, world, time */
.row4{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;width:100%;font-family:var(--display);font-weight:600;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);letter-spacing:.06em;line-height:1.05;font-size:clamp(10px,2.3cqw,21px)}
.row4>div{display:grid;justify-items:center;align-content:start}
.row4 b{font-weight:600}
.row4 b em{font-style:normal;color:var(--gold);margin-left:.3em}
.row4 span{font-variant-numeric:tabular-nums}
.row4 .env{grid-auto-flow:column;align-items:end;justify-content:center;gap:.35em;padding-top:1.1em}
.row4 .env i{display:inline-block;width:1.15em;height:.8em;background:#fff8e8;border-radius:2px;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.row4 .env i::after{content:"";position:absolute;left:50%;top:38%;width:.28em;height:.28em;border-radius:50%;background:var(--mail-red);transform:translate(-50%,-50%)}
.hud{flex-direction:column;align-items:stretch;gap:.4em}
.hud .chips{display:flex;gap:.5em;justify-content:center}
.dialog.isCard{justify-content:center;text-align:center;font-style:italic;background:#2a2244;border-color:#c8b8f0}
.dialog img[hidden]{display:none}

.title{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto auto auto auto;justify-items:center;padding:1.6cqw 1.8cqw 2.4cqw;background:linear-gradient(rgba(10,8,30,.35),rgba(10,8,30,.1) 40%,rgba(10,8,30,.45))}
.tBoard{align-self:center;position:relative;background:var(--cream);color:var(--paper-ink);border-radius:1.2cqw;padding:2.2cqw 5cqw 2.6cqw;text-align:center;box-shadow:0 1.2cqw 0 #8a2a2c,0 2.2cqw 2.4cqw rgba(0,0,0,.45);transform:rotate(-1.2deg)}
.tBoard::before{content:"";position:absolute;inset:.9cqw;border:.35cqw dashed rgba(216,56,58,.35);border-radius:.8cqw;pointer-events:none}
.tBoard .kick{margin:0;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--dialog);font-size:clamp(9px,1.7cqw,16px)}
.tBoard h2{margin:.1em 0 0;font-family:var(--display);font-weight:700;font-size:clamp(28px,8.2cqw,78px);line-height:.95;color:var(--paper-ink);text-wrap:balance}
.tBoard h2 span{color:var(--mail-red)}
.lanterns{position:absolute;top:-2.6cqw;left:0;right:0;display:flex;justify-content:space-between;padding:0 6cqw;pointer-events:none}
.lanterns i{width:2.4cqw;height:3.2cqw;border-radius:45%;background:radial-gradient(circle at 40% 35%,#fff1b8,#f4b740 60%,#c8762a);box-shadow:0 0 1.6cqw rgba(255,190,90,.8)}
.tCopy{margin:.3em 0 0;font-family:var(--display);color:#ffe2a0;font-size:clamp(9px,1.6cqw,15px);text-shadow:0 2px 0 rgba(0,0,0,.4)}
.tMenu,.bMenu{display:grid;gap:.25em;margin-top:.8em;justify-items:start}
.tMenu{background:rgba(10,8,30,.62);padding:.35em 1em .45em .6em;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.tItem{font:inherit;font-family:var(--display);font-weight:600;font-size:clamp(12px,2.6cqw,24px);color:#fff;background:none;border:0;padding:.08em .2em .08em 1.6em;position:relative;cursor:pointer;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.tItem.sel::before,.tItem:focus-visible::before{content:"";position:absolute;left:.15em;top:50%;width:1.05em;height:.72em;transform:translateY(-50%);background:#fff8e8;border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.tItem.sel::after,.tItem:focus-visible::after{content:"";position:absolute;left:.55em;top:50%;width:.26em;height:.26em;border-radius:50%;background:var(--mail-red);transform:translateY(-60%)}
.tItem:hover{color:var(--gold)}
.tItem:focus-visible{outline:none}
.tTop{margin:.7em 0 0;font-family:var(--display);font-weight:600;color:#fff;letter-spacing:.08em;font-size:clamp(11px,2.2cqw,20px);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.tWho{margin:.4em 0 0;color:#e8ecf6;font-size:clamp(9px,1.5cqw,14px);text-shadow:0 1px 0 rgba(0,0,0,.6);text-align:center}
.tWho a{color:var(--gold)}
.black{position:absolute;inset:0;background:#000;display:grid;grid-template-rows:auto 1fr;padding:1.6cqw 1.8cqw;color:#fff}
.bMid{display:grid;justify-items:center;align-content:center;gap:.7em;text-align:center;font-family:var(--display)}
.bWorld{margin:0;font-weight:700;letter-spacing:.12em;font-size:clamp(16px,4cqw,38px)}
.bName{margin:0;color:var(--gold);font-weight:500;font-size:clamp(11px,2.2cqw,20px)}
.bLives{display:flex;align-items:center;gap:1em;font-size:clamp(14px,3cqw,28px)}
.bLives img{width:3.4em;height:3.4em}
.bLine{margin:0;max-width:40em;color:#c8d0e8;font-family:var(--body);font-style:italic;font-size:clamp(10px,1.8cqw,16px)}
.bMenu{justify-items:center}
.card .cast img{width:3.4em;height:3.4em}
.tableWrap{overflow-x:auto}
table.board{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
table.board th,table.board td{padding:.25em .6em;text-align:left;border-bottom:1px solid #e0d6bc}
table.board th{font-family:var(--display);font-weight:600;color:#6d6150}
@media (prefers-reduced-motion: reduce){ .btn:active{transform:none} }

/* Added for manoistudios.com */
.mr-home{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.mr-home:hover,.mr-home:focus-visible{color:var(--cream)}
.foot a{color:var(--muted)}
.mr-inline-1{margin-top:10px}