/* Dear Brother — one dark stage, a 16:9 pixel canvas centred. Dialogue sits on the canvas in landscape and under it in portrait. */
:root{
  --night:#120c0a; --night-2:#1d1512; --line:#4a3a30; --paper:#efe2c6; --paper-dim:#b5a891;
  --ember:#e0893a; --voice:#e4bb52; --danger:#d8493c; --ink:#1a1410; --good:#8ad09a;
  --f-pix:"Pixelify Sans","Courier New",ui-monospace,monospace;
  --f-term:"VT323","Courier New",ui-monospace,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--night);color:var(--paper);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--f-pix);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));-webkit-tap-highlight-color:transparent}
#stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.portrait #stage{justify-content:flex-start;padding-block:10px;box-sizing:border-box}
#wrap{position:relative;container-type:inline-size;width:640px;height:360px;max-width:100%}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;border-radius:3px;outline:1px solid var(--line)}
button{font-family:var(--f-pix);cursor:pointer}
button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

.backlink{position:absolute;top:10px;left:12px;z-index:3;font-family:var(--f-pix);font-size:14px;letter-spacing:.06em;color:var(--paper);text-decoration:none;background:rgba(18,12,10,.6);border:1px solid rgba(239,226,198,.25);padding:3px 9px;border-radius:3px;display:inline-flex;align-items:center;gap:6px}
.backlink img{display:block;background:#fff;border-radius:2px;padding:1px}
.giftlink{display:inline-block;margin-top:10px;font-family:var(--f-pix);font-size:14px;letter-spacing:.04em;color:#3a2208;background:#e9b872;text-decoration:none;padding:6px 12px;border-radius:4px}
.giftlink:hover{background:#f0c88a}

/* HUD */
#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:8px;padding:1.6cqw 2cqw;pointer-events:none}
.chip{font-family:var(--f-term);font-size:clamp(13px,2.4cqw,20px);line-height:1;letter-spacing:.04em;color:var(--paper);background:rgba(18,12,10,.66);border:1px solid rgba(239,226,198,.18);padding:.28em .55em .22em;border-radius:3px;display:flex;align-items:center;gap:.45em;text-transform:uppercase}
#muteBtn{pointer-events:auto;margin-left:auto}
#clock{color:#f0c060;border-color:rgba(240,192,96,.45)}
#meters{display:grid;grid-template-columns:repeat(4,auto);gap:4px}
.m{font-family:var(--f-term);font-size:clamp(11px,1.9cqw,16px);line-height:1;color:var(--paper);background:rgba(18,12,10,.66);border:1px solid rgba(239,226,198,.16);border-radius:3px;padding:.25em .45em .3em;display:flex;flex-direction:column;gap:.22em;min-width:4.6em;text-transform:uppercase;letter-spacing:.05em;transition:border-color .3s}
.m .bar{height:.38em;background:#0d0907;border:1px solid #3a2e26}
.m .bar i{display:block;height:100%;transition:width .6s steps(8)}
.m.people i{background:#e0a060}.m.strength i{background:#c86a5a}.m.favour i{background:#7aa8d8}.m.trust i{background:#8ad09a}
.m.flash{border-color:var(--paper)}
#floats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fl{position:absolute;font-family:var(--f-term);font-size:clamp(14px,2.6cqw,22px);text-shadow:1px 1px 0 #000;animation:floatup 1.8s ease-out forwards;white-space:nowrap}
.fl.up{color:var(--good)}.fl.dn{color:#ff8a70}
@keyframes floatup{from{opacity:0;transform:translateY(6px)}15%{opacity:1}to{opacity:0;transform:translateY(-26px)}}

#hint{position:absolute;top:10.5cqw;left:50%;transform:translateX(-50%);max-width:86%;text-align:center;font-family:var(--f-term);font-size:clamp(14px,2.6cqw,22px);line-height:1.1;color:var(--paper);background:rgba(18,12,10,.72);border:1px solid rgba(224,137,58,.4);padding:.3em .7em;border-radius:3px;pointer-events:none;text-wrap:balance}
#prompt{position:absolute;transform:translate(-50%,-100%);font-family:var(--f-term);font-size:clamp(12px,2.2cqw,18px);line-height:1;background:var(--paper);color:var(--ink);padding:.18em .4em .1em;border-radius:2px;pointer-events:none;white-space:nowrap;text-transform:uppercase;animation:bob 1s steps(2) infinite}

/* Dialogue */
#dlg{position:absolute;left:3cqw;right:3cqw;bottom:2.6cqw;background:rgba(14,10,8,.92);border:2px solid var(--line);box-shadow:0 0 0 2px rgba(0,0,0,.6);padding:1.4cqw 2cqw 1.8cqw;border-radius:3px;min-height:9cqw}
#who{font-size:clamp(11px,1.9cqw,15px);font-weight:700;letter-spacing:.14em;color:var(--ember);margin-bottom:.35em;text-transform:uppercase}
#say{font-size:clamp(14px,2.5cqw,21px);line-height:1.35;color:var(--paper);max-width:70ch;min-height:1.4em}
#more{position:absolute;right:1.8cqw;bottom:1cqw;font-size:clamp(10px,1.6cqw,13px);color:var(--paper-dim);animation:bob 1s steps(2) infinite}
#dlg.narr #who{color:var(--voice)}
#dlg.narr #say{font-family:var(--f-term);font-size:clamp(17px,3cqw,26px);line-height:1.15;color:var(--voice)}
#dlg.pt #who{color:#9ab8e0}
#dlg.kg #who{color:#e0a060}
#dlg.me #who{color:#f0d080}
#dlg.thought #say{font-style:italic;color:#d8cdb6}
#choices{display:flex;flex-direction:column;gap:.5em;margin-top:.7em}
.ch{display:flex;gap:.6em;align-items:baseline;text-align:left;font-size:clamp(13px,2.3cqw,19px);line-height:1.25;color:var(--paper);background:rgba(239,226,198,.05);border:1px solid rgba(239,226,198,.25);border-radius:3px;padding:.45em .7em}
.ch b{font-family:var(--f-term);color:var(--ember);font-weight:400;font-size:1.15em}
.ch:hover,.ch.sel{background:rgba(224,137,58,.16);border-color:var(--ember)}
body.portrait #dlg{top:calc(100% + 10px);bottom:auto;left:0;right:0}
body.portrait #say{font-size:16px}
@keyframes bob{50%{transform:translate(-50%,-100%) translateY(2px)}}
#more{animation-name:bob2}@keyframes bob2{50%{transform:translateY(2px)}}

/* Overlays */
#card,#title,#end,#letter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4cqw;box-sizing:border-box}
#card{background:#000;gap:2.2cqw}
#cardText{margin:0;max-width:36ch;font-size:clamp(15px,3.1cqw,29px);font-weight:600;line-height:1.35;text-wrap:balance;animation:rise .9s ease-out;white-space:pre-line}
.tap{font-family:var(--f-term);font-size:clamp(12px,2cqw,17px);color:var(--paper-dim);letter-spacing:.1em;text-transform:uppercase;animation:pulse 1.6s ease-in-out infinite}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .6s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.45}}

#letter{background:rgba(10,7,5,.9);gap:1.6cqw;justify-content:center}
.paper{position:relative;width:min(84%,520px);background:#e9dcbf;color:#2a221a;padding:2.4cqw 3cqw 2.8cqw;box-sizing:border-box;transform:rotate(-.8deg);clip-path:polygon(0 3%,8% 0,22% 2%,40% 0,63% 2%,80% 0,100% 4%,99% 30%,100% 58%,98% 82%,100% 100%,74% 97%,52% 100%,30% 96%,9% 100%,0 94%,2% 60%,0 33%);animation:rise .5s ease-out;text-align:left}
.paper .lbl{font-family:var(--f-term);font-size:clamp(11px,1.8cqw,15px);letter-spacing:.12em;color:#7a6650;margin-bottom:.5em;text-transform:uppercase}
#letterBody{font-family:Georgia,"Times New Roman",serif;font-size:clamp(12px,2.3cqw,19px);line-height:1.4;min-height:6em}
#letterBody p{margin:0 0 .45em}
#letterBody .blank{color:#9a8a70;font-style:italic}
#letterBody .new{animation:rise .6s ease-out}
#letterOpts{display:flex;flex-direction:column;gap:.45em;width:min(84%,520px)}
#letterOpts .ch{background:rgba(239,226,198,.06)}

#title{background:linear-gradient(180deg,rgba(18,12,10,.45) 0%,rgba(18,12,10,.6) 50%,rgba(18,12,10,.92) 100%);gap:1.3cqw}
.kicker{font-family:var(--f-term);font-size:clamp(13px,2.4cqw,20px);letter-spacing:.24em;color:var(--ember);text-transform:uppercase}
#title h1{margin:0;font-size:clamp(30px,10cqw,104px);font-weight:700;line-height:.95;letter-spacing:.06em;background:linear-gradient(180deg,#f4d48a 0 45%,#d0602e 45% 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(.05em .05em 0 #2a0e06)}
.tagline{margin:0;font-size:clamp(13px,2.5cqw,21px);color:#d6cab2;max-width:36ch;text-wrap:balance}
.go{margin-top:1cqw;font-size:clamp(15px,2.8cqw,24px);font-weight:600;letter-spacing:.08em;color:var(--ink);background:var(--paper);border:0;padding:.45em 1.4em .4em;border-radius:3px;box-shadow:.12em .12em 0 var(--ember);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.go:hover{background:#fff4dc}
.go:active{transform:translate(2px,2px);box-shadow:none}
.go.ghost{background:transparent;color:var(--paper);box-shadow:none;border:2px solid rgba(239,226,198,.45)}
.go.ghost:hover{background:rgba(239,226,198,.08)}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.note{font-family:var(--f-term);font-size:clamp(12px,2cqw,17px);color:var(--paper-dim);letter-spacing:.06em}
.keys{font-family:var(--f-term);font-size:clamp(12px,1.9cqw,16px);color:var(--paper-dim);display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1.2em}
.keys b{color:var(--paper);font-weight:400;border:1px solid rgba(239,226,198,.35);padding:0 .3em;border-radius:2px}
body.touch .keys{display:none}

#end{background:linear-gradient(180deg,rgba(10,7,5,.55),rgba(10,7,5,.92));gap:1.3cqw}
#end h2{margin:0;font-size:clamp(20px,5cqw,52px);font-weight:700;letter-spacing:.05em}
#end p{margin:0;max-width:40ch;font-size:clamp(13px,2.3cqw,19px);line-height:1.4;color:#d6cab2;text-wrap:balance}
#endMeters{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

/* Touch pad */
#pad{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));pointer-events:none;z-index:5}
.cl{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.cl .arrows{display:flex;gap:10px}
#pad button{width:70px;height:70px;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--paper);background:rgba(29,21,18,.7);border:2px solid rgba(239,226,198,.32);border-radius:12px;touch-action:none;display:flex;align-items:center;justify-content:center}
#pad button.arrow{font-size:22px}
#pad button.big{width:86px;height:86px;border-color:rgba(224,137,58,.6)}
#pad button.on{background:rgba(224,137,58,.42);border-color:var(--ember)}
body:not(.portrait) #pad button{opacity:.78}

#menu,#sources{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(8,6,4,.88);padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));box-sizing:border-box}
.panel{width:min(100%,500px);max-height:100%;overflow:auto;background:var(--night-2);border:2px solid var(--line);border-radius:4px;padding:18px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;box-shadow:0 0 0 2px #000}
.panel h3{margin:0;font-size:24px;letter-spacing:.04em}
#menuList{display:flex;flex-direction:column;gap:8px}
.chap{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;gap:0 10px;text-align:left;background:rgba(239,226,198,.04);border:1px solid rgba(239,226,198,.18);color:var(--paper);padding:10px 12px;border-radius:3px}
.chap:hover{background:rgba(224,137,58,.12);border-color:var(--ember)}
.chap:disabled{opacity:.4;cursor:not-allowed}
.chap .num{grid-row:1/3;font-size:22px;font-weight:700;color:var(--ember);text-align:center}
.chap .nm{font-size:18px;font-weight:600}
.chap .sb{font-family:var(--f-term);font-size:16px;color:var(--paper-dim)}
.src p{margin:0 0 .7em;font-size:15px;line-height:1.45;color:#d6cab2}

#bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bub{position:absolute;transform:translate(-50%,-100%);max-width:36%;width:max-content;font-family:var(--f-pix);font-size:clamp(10px,2.2cqw,16px);line-height:1.15;color:#1d1a2b;background:#fbfaf4;border:2px solid #1d1a2b;border-radius:6px;padding:.25em .5em;box-shadow:2px 2px 0 rgba(29,26,43,.35);animation:pop .18s steps(3);text-align:center;transition:opacity .3s}
.bub::after{content:"";position:absolute;left:50%;bottom:-7px;width:8px;height:8px;background:#fbfaf4;border-right:2px solid #1d1a2b;border-bottom:2px solid #1d1a2b;transform:translateX(-50%) rotate(45deg)}
.bub.pt{background:#eef3fb;border-color:#3a4e78}.bub.pt::after{background:#eef3fb;border-color:#3a4e78}
.bub.fade{opacity:0}
@keyframes pop{from{transform:translate(-50%,-90%) scale(.6)}to{transform:translate(-50%,-100%) scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* portrait phones: overlays take the whole screen, meters stack 2x2 */
body.portrait #title,body.portrait #end,body.portrait #card,body.portrait #letter{position:fixed;inset:0;z-index:12;padding:24px 20px}
body.portrait #title h1{font-size:clamp(34px,13vw,64px)}
body.portrait .kicker{font-size:15px}
body.portrait .tagline,body.portrait #end p{font-size:16px}
body.portrait #cardText{font-size:20px}
body.portrait .go{font-size:18px}
body.portrait #letterBody{font-size:15px}
body.portrait .paper,body.portrait #letterOpts{width:100%}
body.portrait #meters{grid-template-columns:repeat(2,auto)}
body.portrait .m{font-size:11px;min-width:0}
body.portrait #hint{top:calc(100% + 8px);bottom:auto;font-size:14px}
.rotate{display:none;font-family:var(--f-term);font-size:15px;color:var(--voice);letter-spacing:.06em}
body.portrait.touch .rotate{display:block}