:root { --u: 2px; --ink: #1d1626; --paper: #fff8e7; --pink: #ff5d8f; --gold: #ffd25e; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #16121f; overflow: hidden; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; font-family: "Pixelify Sans", "Courier New", monospace; color: var(--ink); -webkit-user-select: none; user-select: none; }
#stage { position: relative; overflow: hidden; touch-action: none; background: #000; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; display: block; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: calc(var(--u) * 8); line-height: 1.18; }
#ui button, #ui .hit { pointer-events: auto; }
button { font-family: inherit; color: inherit; cursor: pointer; }
#mute { position: absolute; top: calc(var(--u) * 3); right: calc(var(--u) * 3); width: calc(var(--u) * 15); height: calc(var(--u) * 15); font-size: calc(var(--u) * 9); line-height: 1; padding: 0; background: rgba(29,22,38,.65); color: #fff; border: calc(var(--u) * 1) solid rgba(255,255,255,.35); z-index: 40; }
#mute.off { opacity: .45; text-decoration: line-through; }

/* speech balloon */
.balloon { position: absolute; width: calc(var(--u) * 150); background: var(--paper); border: calc(var(--u) * 1.2) solid var(--ink); padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 4); box-shadow: calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0 rgba(0,0,0,.35); z-index: 20; }
.balloon .who { display: block; font-weight: 700; font-size: calc(var(--u) * 6.5); color: #b02a63; margin-bottom: calc(var(--u) * 1); }
.balloon .tail { position: absolute; bottom: calc(var(--u) * -4.5); width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: var(--paper); border-right: calc(var(--u) * 1.2) solid var(--ink); border-bottom: calc(var(--u) * 1.2) solid var(--ink); }
.balloon .more { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 1); font-size: calc(var(--u) * 6); color: #b02a63; animation: blink .7s steps(2) infinite; }
.caption { left: calc(var(--u) * 5); bottom: calc(var(--u) * 5); width: calc(var(--u) * 170); background: var(--ink); color: var(--paper); border-color: var(--gold); }
.caption .who { color: var(--gold); }
.caption .more { color: var(--gold); }
.caption.named { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.caption.named .who, .caption.named .more { color: #b02a63; }
@keyframes blink { 50% { opacity: 0; } }

/* bark - auto-fading small balloon */
.bark { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--u) * 58); width: calc(var(--u) * 130); text-align: center; background: var(--paper); border: calc(var(--u) * 1) solid var(--ink); padding: calc(var(--u) * 2) calc(var(--u) * 3); z-index: 15; font-size: calc(var(--u) * 7.2); }

/* choices */
.choices { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 7); display: flex; flex-direction: column; gap: calc(var(--u) * 3); z-index: 25; }
.btn { display: block; width: 100%; font-size: calc(var(--u) * 8); font-weight: 600; line-height: 1.1; padding: calc(var(--u) * 4) calc(var(--u) * 4); background: var(--gold); border: calc(var(--u) * 1.2) solid var(--ink); box-shadow: 0 calc(var(--u) * 2) 0 var(--ink); }
.btn:active { transform: translateY(calc(var(--u) * 1.6)); box-shadow: 0 calc(var(--u) * .4) 0 var(--ink); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.ghost { background: var(--paper); }

/* objective pill and hud */
.objective { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 22); top: calc(var(--u) * 3); background: rgba(29,22,38,.88); color: var(--gold); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); font-size: calc(var(--u) * 7); z-index: 12; border: calc(var(--u) * .8) solid rgba(255,210,94,.5); }
.hud { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 22); top: calc(var(--u) * 3); background: rgba(29,22,38,.88); color: #fff; padding: calc(var(--u) * 2.4) calc(var(--u) * 3); font-size: calc(var(--u) * 6.6); z-index: 12; }
.meter { height: calc(var(--u) * 4); background: #4b4257; margin-top: calc(var(--u) * 1.2); }
.meter i { display: block; height: 100%; background: var(--gold); width: 0; }

/* chapter card */
.card { position: absolute; inset: 0; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--u) * 12); z-index: 30; }
.card .time { color: var(--gold); font-size: calc(var(--u) * 9); margin-bottom: calc(var(--u) * 4); }
.card .ttl { font-size: calc(var(--u) * 16); font-weight: 700; line-height: 1.05; }

/* title */
.title { position: absolute; left: 0; right: 0; top: calc(var(--u) * 28); text-align: center; color: #fff; z-index: 10; padding: 0 calc(var(--u) * 8); text-shadow: 0 calc(var(--u) * 1) 0 #000; }
.title .small { font-size: calc(var(--u) * 9); color: var(--gold); }
.title .big { font-size: calc(var(--u) * 22); font-weight: 700; line-height: 1; margin: calc(var(--u) * 3) 0; overflow-wrap: anywhere; }
.title .ed { font-size: calc(var(--u) * 8); color: #ffb3cf; }

/* laptop */
.screen { position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7); top: calc(var(--u) * 26); height: calc(var(--u) * 182); background: #eef1f6; overflow: hidden; display: flex; flex-direction: column; font-size: calc(var(--u) * 7); z-index: 8; pointer-events: auto; }
.mb-head { background: #2a5bd7; color: #fff; padding: calc(var(--u) * 2.4) calc(var(--u) * 3); font-weight: 700; font-size: calc(var(--u) * 8); }
.mb-sub { padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: calc(var(--u) * 6); color: #4a5266; background: #dfe5f1; overflow-wrap: anywhere; }
.kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3); }
.kpi { background: #fff; border: calc(var(--u) * .7) solid #c4cce0; padding: calc(var(--u) * 2); font-size: calc(var(--u) * 5.6); color: #4a5266; }
.kpi b { display: block; font-size: calc(var(--u) * 8); color: #17233f; }
.chart { display: flex; align-items: flex-end; gap: calc(var(--u) * 2); height: calc(var(--u) * 44); margin: 0 calc(var(--u) * 3); padding: calc(var(--u) * 2); background: #fff; border: calc(var(--u) * .7) solid #c4cce0; }
.chart i { flex: 1; background: #2a5bd7; transition: height .3s steps(4); }
.statusline { padding: calc(var(--u) * 3); font-size: calc(var(--u) * 6.8); color: #a33; min-height: calc(var(--u) * 26); }
.screen .btn { width: auto; margin: 0 calc(var(--u) * 3); font-size: calc(var(--u) * 8); padding: calc(var(--u) * 3); background: #2a5bd7; color: #fff; }
.popup { position: absolute; width: calc(var(--u) * 112); background: #fff; border: calc(var(--u) * 1) solid #1d1626; box-shadow: calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0 rgba(0,0,0,.4); z-index: 9; font-size: calc(var(--u) * 6.8); padding: 0; pointer-events: auto; text-align: left; display: block; }
.popup .bar { display: flex; justify-content: space-between; background: #d0342c; color: #fff; padding: calc(var(--u) * 1.2) calc(var(--u) * 2.5); font-weight: 700; }
.popup .msg { display: block; padding: calc(var(--u) * 2.5); color: #1d1626; }
.chat-head { background: #0f7d62; color: #fff; padding: calc(var(--u) * 2.4) calc(var(--u) * 3); font-weight: 700; font-size: calc(var(--u) * 8); }
.chat { flex: 1; background: #e6ddcf; padding: calc(var(--u) * 3); overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); justify-content: flex-end; }
.msg-in, .msg-out { max-width: 86%; padding: calc(var(--u) * 2.4) calc(var(--u) * 3); font-size: calc(var(--u) * 7); overflow-wrap: anywhere; }
.msg-in { background: #fff; align-self: flex-start; }
.msg-out { background: #c6f1b8; align-self: flex-end; }
.composer { background: #fff; border-top: calc(var(--u) * .8) solid #b8b0a2; padding: calc(var(--u) * 3); min-height: calc(var(--u) * 26); font-size: calc(var(--u) * 7); color: #1d1626; overflow-wrap: anywhere; }
.err { color: #d0342c; font-weight: 700; }

/* final */
.final { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); top: calc(var(--u) * 24); bottom: calc(var(--u) * 6); display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; z-index: 14; }
.final .hb { font-size: calc(var(--u) * 16); font-weight: 700; line-height: 1.02; color: var(--gold); text-shadow: 0 calc(var(--u) * 1.2) 0 #000; overflow-wrap: anywhere; }
.final .stats { margin-top: calc(var(--u) * 6); background: rgba(29,22,38,.82); padding: calc(var(--u) * 4); font-size: calc(var(--u) * 6.8); text-align: left; width: 100%; line-height: 1.3; }
.final .note { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 8); }
.final .spacer { flex: 1; }
.final .btn { pointer-events: auto; color: var(--ink); }
.photo { display: block; width: calc(var(--u) * 92); margin: calc(var(--u) * 5) auto 0; border: calc(var(--u) * 3) solid var(--paper); border-bottom-width: calc(var(--u) * 9); image-rendering: pixelated; background: #000; }

.balloon .txt, .card .ttl { white-space: pre-line; }

.card .track { margin-top: calc(var(--u) * 7); color: #ffb3cf; font-size: calc(var(--u) * 7.5); }
.title { top: calc(var(--u) * 14); }
.final .age { font-size: calc(var(--u) * 11); color: #ffb3cf; margin-top: calc(var(--u) * 2); }
.final .plan { margin-top: calc(var(--u) * 5); background: var(--paper); color: var(--ink); padding: calc(var(--u) * 4); font-size: calc(var(--u) * 8); font-weight: 600; width: 100%; }
.final .plan b { color: #b02a63; display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 11); }
.final .stats { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 6.2); padding: calc(var(--u) * 3); }

.final .credit { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 6.2); color: #ffb3cf; }