:root { color-scheme: dark; font-family: 'MS Gothic', 'Yu Gothic', monospace; background: #0b0d0d; color: #c7cec2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 28px 20px; background: radial-gradient(circle at 50% 0%, #171c1b 0, #0b0d0d 58%); }
main { width: min(100%, 1120px); }
header, footer, .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
header { font: 12px/1.5 monospace; letter-spacing: 1.4px; margin-bottom: 14px; color: #b8c0b3; }
#disk { color: #c7d26d; letter-spacing: 1px; }
.screen-wrap { position: relative; background: #000; border: 1px solid #596054; padding: 12px; box-shadow: 0 0 0 1px #171b17 inset, 0 18px 70px #0009; }
.screen-wrap::after { content: ''; pointer-events: none; position: absolute; inset: 12px; background: repeating-linear-gradient(to bottom, #ffffff08 0, #ffffff08 1px, transparent 1px, transparent 4px); mix-blend-mode: screen; opacity: .15; }
canvas { display: block; width: 100%; aspect-ratio: 8 / 5; background: #000; image-rendering: pixelated; outline: none; }
form { display: flex; align-items: center; border: 1px solid #596054; background: #141815; margin-top: 16px; padding: 12px 14px; gap: 14px; box-shadow: 0 0 0 1px #242a23 inset; }
label { font-size: 13px; white-space: nowrap; color: #d0d7ca; }
label span { margin-left: 8px; color: #72c2a0; }
input { flex: 1; width: 0; background: transparent; border: none; outline: none; font: 17px/1.55 'MS Gothic', 'Yu Gothic', monospace; color: #eff8f0; caret-color: #7df0bc; }
input::placeholder { color: #7f8b7d; font-size: 14px; }
#remaining-time { flex:none; color:#879184; font:14px/1.4 monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
button { border: 1px solid #586052; background: #101310; color: #d4dccd; font: 12px/1.4 inherit; padding: 8px 12px; cursor: pointer; }
button:hover, button:focus-visible { background: #2b3428; color: #fff; border-color: #8da57f; }
button:disabled { opacity: .4; cursor: wait; }
.toolbar { font-size: 12px; margin-top: 10px; color: #aeb8aa; }
.toolbar button { padding: 7px 9px; font-size: 11px; }
footer { border-top: 1px solid #3c4339; margin-top: 24px; padding-top: 12px; font: 10px monospace; letter-spacing: 2px; color: #7d8878; }
section { margin-top: 20px; padding: 22px; border: 1px solid #525b4e; background: #111410; font-size: 14px; line-height: 1.9; }
h1 { font-size: 19px; color: #edf4e8; font-weight: normal; margin-top: 0; }
.small { color: #8d9787; font-size: 11px; }
.readable-log { margin-top: 12px; font-size: 15px; line-height: 1.7; }
.readable-log p { white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.screen-wrap:fullscreen { display: grid; place-items: center; padding: 0; background: #000; }
.screen-wrap:fullscreen::after { inset: 0; }
.screen-wrap:fullscreen canvas { width: min(100vw, 160vh); }
@media (max-width: 680px) { body { padding: 12px 6px; } .screen-wrap { padding: 3px; } .screen-wrap::after { inset: 3px; } .brand { font-size: 8px; } header { letter-spacing: 0; } label { display: none; } form { padding: 10px; gap: 8px; } input { font-size: 16px; } .toolbar { align-items: flex-start; flex-direction: column; gap: 6px; } footer { letter-spacing: 1px; } section { padding: 16px; font-size: 13px; } }
/* Readable terminal: crisp full-width kana, original pixel portrait. */
.screen-wrap { display:grid; grid-template-columns: 36% minmax(0,1fr); gap:24px; padding:24px; }
.screen-wrap::after { display:none; }
canvas { width:100%; aspect-ratio:248/336; }
.portrait-panel { align-self:start; }
.portrait-panel { position:relative; }
.emotion-effects { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; contain:paint; }
.emotion-effects span { position:absolute; left:50%; top:40%; color:var(--color); font:var(--size)/1 Arial,sans-serif; opacity:0; animation:emotion-float 1.35s var(--delay) ease-out both; text-shadow:0 0 12px currentColor; }
.emotion-effects.fun span { animation-name:emotion-spark; }
.emotion-effects.surprise { color:#fff2aa; font:32px/1 monospace; padding:12% 14% 0; text-align:right; animation:emotion-flash .45s ease-out both; }
@keyframes emotion-float { 0% { opacity:0;transform:translate(var(--start-x),var(--start-y)) scale(.55); } 12% { opacity:.3; } 70% { opacity:.22; } 100% { opacity:0;transform:translate(var(--x),var(--y)) scale(1.15); } }
@keyframes emotion-spark { 0% { opacity:0;transform:translate(var(--start-x),var(--start-y)) scale(.5); } 12% { opacity:.36; } 75% { opacity:.2; } 100% { opacity:0;transform:translate(var(--x),var(--y)) scale(.85); } }
@keyframes emotion-flash { 0%,100% { opacity:0; } 20%,60% { opacity:.85; } }
.emotion-effects.reduced-motion span { animation:emotion-flash .9s ease-out both; transform:translate(calc(var(--x) * .3),calc(var(--y) * .3)); }
.game-logo { color:#ff4848; font:bold clamp(24px,4vw,48px)/1.3 monospace; letter-spacing:4px; margin-top:18px; }
.game-tagline { color:#8fff8f; font:12px/1.8 monospace; }
.conversation-panel { min-width:0; display:flex; flex-direction:column; height:560px; }
.terminal-heading { color:#a0ada0; font:12px/1.6 monospace; border-bottom:1px solid #334133; padding-bottom:12px; margin-bottom:12px; letter-spacing:1px; }
#conversation { flex:1; min-height:0; overflow-y:auto; scrollbar-color:#546b54 #080b08; padding-right:10px; }
.message { margin:0 0 22px; color:#fff59c; font:500 24px/1.8 'BIZ UDGothic','MS Gothic','Noto Sans Mono CJK JP',monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.message.user { color:#83ffff; }
.message.system { color:#b5c5b5; font-size:18px; }
.speaker { display:block; color:#a1aca1; font:12px/1.8 monospace; letter-spacing:1px; margin-bottom:3px; }
#live-reply[hidden] { display:none; }
#conversation { padding-bottom:6px; }
#terminal-note { color:#a0dda0; font:14px/1.8 'MS Gothic',monospace; border-top:1px solid #334133; padding-top:10px; margin-top:12px; }
#terminal-note[aria-hidden="true"] { visibility:hidden; }
.screen-wrap:fullscreen { grid-template-columns:36% minmax(0,1fr); gap:32px; padding:4vw; align-content:center; }
.screen-wrap:fullscreen canvas { width:100%; }
.screen-wrap:fullscreen .conversation-panel { height:80vh; }
@media(max-width:680px){
 .screen-wrap { padding:14px; grid-template-columns:1fr; gap:16px; }
 .portrait-panel { display:grid; grid-template-columns:130px 1fr; gap:0 16px; align-items:center; }
 .portrait-panel canvas { grid-row:1/3; }
 .game-logo { font-size:26px; margin:0; letter-spacing:2px; }
 .game-tagline { font-size:9px; }
 .conversation-panel { height:440px; }
 .message,#live-reply { font-size:21px; line-height:1.85; }
 .message.system { font-size:16px; }
 #terminal-note { font-size:12px; }
 .screen-wrap:fullscreen { grid-template-columns:1fr; padding:14px; }
 .screen-wrap:fullscreen .conversation-panel { height:65vh; }
}
@font-face { font-family:'Emmichy Dot'; src:url('assets/fonts/DotGothic16-Regular.ttf') format('truetype'); font-display:swap; }
.message,#live-reply { font-family:'Emmichy Dot','MS Gothic',monospace; font-weight:400; }
#terminal-note { font-family:'Emmichy Dot','MS Gothic',monospace; font-size:16px; }
#start-choice { margin:0; padding:12px 16px; border-color:#85a779; }
#talk[hidden] { display:none; }
.input-slot { margin-top:16px; }
.input-slot form { margin-top:0; }
#start-choice[hidden] { display:none; }
#start-choice p { margin:0 0 10px; }
#start-choice .small { margin:10px 0 0; }
#start-choice button { font-size:16px; margin-right:10px; padding:10px 18px; }
#start-choice button:disabled { color:#777; background:#202020; border-color:#444; opacity:.55; cursor:not-allowed; }
@media(max-width:680px){ .message,#live-reply { font-size:24px; line-height:1.7; } .toolbar>div { display:flex; flex-wrap:wrap; } }
.mobile-hint { display:none; }
.mobile-menu-toggle,.mobile-settings-heading,.mobile-browser-shortcut { display:none; }
/* One phone screen: portrait scale stays stable; only the chat log scrolls. */
@media(max-width:680px){
 html,body { height:100%; overflow:hidden; overscroll-behavior:none; overflow-anchor:none; }
 body { position:fixed; inset:0; width:100%; padding:0; min-height:0; display:block; }
 main { position:fixed; top:0; left:0; width:var(--visual-width,100%); height:var(--layout-height,100svh); max-width:none; min-height:0; padding:max(4px,env(safe-area-inset-top,0px)) max(4px,env(safe-area-inset-right,0px)) 4px max(4px,env(safe-area-inset-left,0px)); display:flex; flex-direction:column; overflow:hidden; }
 header, footer, .game-tagline, .terminal-heading, #terminal-note,
 .toolbar #status, .session-hint, #start-choice .small, .desktop-hint { display:none; }
 .mobile-hint { display:inline; }
 .screen-wrap { flex:1; min-height:0; display:block; position:relative; padding:4px; overflow:hidden; }
 .screen-wrap::before { content:''; position:absolute; z-index:1; pointer-events:none; left:0; right:0; top:calc(var(--portrait-visible-height,300px) + 8px); bottom:0; background:#000; }
 .portrait-panel { --portrait-width:var(--portrait-base-width,min(320px,calc(100vw * .68))); position:absolute; z-index:0; top:4px; left:4px; display:block; width:calc(100% - 8px); height:calc(var(--portrait-width) * 336 / 248); overflow:hidden; transform:none; }
 .screen-wrap .portrait-panel canvas { width:var(--portrait-width); min-width:var(--portrait-width); max-width:var(--portrait-width); height:calc(var(--portrait-width) * 336 / 248); margin-inline:auto; }
 .game-logo { display:block; position:absolute; right:calc((100% - var(--portrait-width)) / 2 + 6px); bottom:6px; margin:0; font-size:24px; letter-spacing:1px; line-height:1; text-shadow:2px 2px #000,-1px -1px #000,0 0 8px #000; }
 :root[data-keyboard="true"] .game-logo { display:none; }
 .conversation-panel { position:absolute; z-index:2; left:0; right:0; bottom:0; top:calc(var(--portrait-visible-height,min(calc(var(--portrait-base-width,274px) * 336 / 248),calc(100svh - 160px))) + 8px); height:auto; min-height:0; background:#000; overflow:hidden; }
 #conversation { padding-right:4px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
 .message,#live-reply { font-size:22px; line-height:1.55; margin-bottom:16px; }
 .speaker { font-size:10px; }
 .message.enny + .message.enny .speaker { display:none; }
 #conversation[data-debug="true"] .message .speaker { display:block; }
 .input-slot { position:relative; z-index:3; flex:none; margin-top:4px; margin-bottom:var(--keyboard-inset,0px); padding-bottom:env(safe-area-inset-bottom,0px); background:#0b0d0d; }
 #talk { min-height:50px; padding:8px; gap:6px; }
 #send { padding:8px; }
 #input-hint { margin:5px 2px; }
 .toolbar { margin-top:6px; }
 .toolbar>div { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
 .toolbar button { min-height:44px; font-size:13px; }
 .readable-log { margin-top:8px; font-size:13px; }
 .privacy-hint { margin:6px 2px; font-size:10px; line-height:1.5; }
 .mobile-menu-toggle { display:block; position:absolute; top:8px; right:8px; z-index:4; width:44px; height:44px; padding:0; font-size:25px; line-height:1; }
 .mobile-browser-shortcut { display:block; position:absolute; left:8px; top:8px; z-index:4; min-height:36px; padding:6px 8px; font-size:11px; background:#101310d9; }
 #settings-panel { display:none; position:absolute; top:58px; right:8px; left:8px; z-index:5; max-height:calc(var(--visual-height,100dvh) - 72px); overflow-y:auto; padding:14px; border:1px solid #78916d; background:#111610; box-shadow:0 12px 40px #000c; }
 #settings-panel[data-open="true"] { display:block; }
 .mobile-settings-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
 .mobile-settings-heading button { min-height:44px; }
 /* Crop the lower body only. The face keeps the same width and top position,
    including when focus/keyboard classification differs in an SNS webview. */
 .portrait-panel canvas { transform:none; }
 :root[data-keyboard="true"] .input-slot { padding-bottom:0; }
 .screen-wrap:fullscreen { padding:6px; gap:8px; align-content:start; height:100%; }
 .screen-wrap:fullscreen .conversation-panel { height:auto; }
}
.mobile-browser-shortcut[hidden] { display:none; }
.browser-guide[hidden],.browser-launch[hidden],#browser-open-help[hidden] { display:none; }
.browser-guide { position:fixed; inset:0; z-index:20; margin:0; padding:18px; display:grid; place-items:center; background:#000b; }
.browser-guide-card { width:min(100%,440px); max-height:calc(100dvh - 36px); overflow-y:auto; overflow-x:hidden; padding:22px; border:1px solid #78916d; background:#111610; box-shadow:0 12px 40px #000c; }
.browser-guide h2 { margin:0 0 12px; font-size:19px; color:#edf4e8; }
.browser-guide p { line-height:1.7; }
.browser-guide button { min-height:44px; font-size:15px; margin:4px 4px 4px 0; }
#browser-open { display:block; margin-inline:0; width:100%; min-height:56px; background:#294332; border-color:#8da57f; font-weight:bold; font-size:17px; }
#browser-stay { display:block; margin-inline:0; width:100%; min-height:44px; margin-top:10px; }
#browser-open-help { border-top:1px solid #525b4e; margin-top:12px; padding-top:12px; }
#browser-url { display:block; width:100%; margin:8px 0; padding:8px; font:16px/1.4 monospace; background:#080b08; }
#browser-copy-status { display:block; font-size:13px; line-height:1.6; }

#model-mode { margin:0 0 4px; font-size:12px; color:#c6d082; }
#model-mode[hidden] { display:none; }

/* Short gestures remain in the main log, with less visual weight. */
.message.filler { font-size:17px; line-height:1.4; margin-bottom:9px; opacity:.8; }
canvas[data-away="true"] { filter:brightness(.52) saturate(.8); }
#transcript .filler { font-size:.85em; opacity:.8; }

/* Personal interpretation warms up the text, without moving the portrait. */
.deep-reading { display:block; font-size:1.07em; transform-origin:left top; animation:deep-reading-in .24s ease-out both; }
@keyframes deep-reading-in { from { opacity:.65; transform:translateY(1px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { .deep-reading { animation:none; } }
/* Tension stages (src/tension.js): warm is a touch bigger, full is the rare peak. */
.tension-warm { display:block; font-size:1.04em; }
.tension-full { display:block; font-size:1.14em; font-weight:bold; transform-origin:left top; animation:tension-full-in .18s ease-out both; }
@keyframes tension-full-in { from { transform:scale(.96); } to { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .tension-full { animation:none; } }

/* PC-8801 mode (Mukkii 10-23): one 640x200-dot screen, line-doubled, 8 colours, 美咲 dot font.
   Everything that is not the conversation lives behind the ⚙ button. */
@font-face { font-family:'Misaki'; src:url('assets/font/misaki_gothic_2nd.woff2') format('woff2'); font-display:swap; }
#pc88[hidden] { display:none; }
body.pc88 { background:#000; padding:0; }
body.pc88 main { width:100%; max-width:none; display:flex; flex-direction:column; align-items:center; min-height:100dvh; justify-content:center; }
body.pc88 header, body.pc88 .screen-wrap, body.pc88 footer { display:none; }
body.pc88 #pc88 { display:block; width:100%; }
body.pc88 #pc88-screen { width:min(100vw, calc((100dvh - 64px) * 640 / 400)); height:auto; aspect-ratio:640 / 400; margin:0 auto; image-rendering:pixelated; background:#000; }
body.pc88 .input-slot { width:min(100vw, calc((100dvh - 64px) * 640 / 400)); margin:0 auto; background:#000; }
body.pc88 #talk { margin:0; border:none; background:#000; box-shadow:none; padding:6px 1.25%; gap:12px; }
body.pc88 #talk label, body.pc88 #talk input, body.pc88 #remaining-time, body.pc88 #send, body.pc88 #start-choice, body.pc88 #start-choice button { font-family:'Misaki',monospace; -webkit-font-smoothing:none; font-smooth:never; }
body.pc88 #talk label { font-size:16px; color:#ffff00; }
body.pc88 #talk label span { color:#00ffff; }
body.pc88 #talk input { font-size:16px; line-height:2; color:#ffffff; caret-color:#00ff00; }
body.pc88 #talk input::placeholder { color:#00ffff; opacity:.7; font-size:16px; }
body.pc88 #remaining-time { display:none; }
body.pc88 #send { font-size:16px; border:1px solid #0000ff; background:#000; color:#00ffff; }
body.pc88 #start-choice { background:#000; border:1px solid #0000ff; color:#fff; margin:6px 0; padding:10px; }
body.pc88 #start-choice button { font-size:16px; background:#000; color:#ffff00; border:1px solid #0000ff; margin:4px; }
body.pc88 .mobile-menu-toggle { display:block; position:fixed; top:6px; right:6px; z-index:6; width:40px; height:40px; padding:0; font-size:22px; line-height:1; background:#000; color:#00ffff; border:1px solid #0000ff; }
body.pc88 #settings-panel { display:none; position:fixed; top:52px; right:8px; left:auto; width:min(520px, calc(100vw - 16px)); z-index:5; max-height:calc(100dvh - 64px); overflow-y:auto; padding:14px; border:1px solid #0000ff; background:#000; color:#fff; }
body.pc88 #settings-panel[data-open="true"] { display:block; }
body.pc88 .mobile-settings-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
@media(max-width:680px){
 body.pc88 main { justify-content:flex-start; }
 body.pc88 #pc88 { flex:1; min-height:0; display:flex; align-items:flex-start; justify-content:center; }
 body.pc88 #pc88-screen { width:100vw; height:auto; }
 body.pc88 main { min-height:0; }
 /* Only the input rides up on the keyboard; the screen above stays where it is (Mukkii 10-24). */
 body.pc88 .input-slot { position:fixed; left:0; right:0; bottom:var(--keyboard-inset,0px); z-index:5; width:100%; margin:0; padding-bottom:env(safe-area-inset-bottom,0px); border-top:1px solid #0000ff; }
 :root[data-keyboard="true"] body.pc88 .input-slot { padding-bottom:0; }
 body.pc88 #pc88 { padding-bottom:58px; }
 body.pc88 #talk label { display:none; }
}
#mic[hidden] { display:none; }
#mic { flex:none; min-width:44px; min-height:40px; font-size:20px; padding:4px 8px; }
#mic[aria-pressed="true"] { background:#ff0000; color:#fff; border-color:#ffff00; }
body.pc88 #mic { background:#000; border:1px solid #0000ff; color:#fff; }
body.pc88 #mic[aria-pressed="true"] { background:#ff0000; border-color:#ffff00; }
/* Judge 10-24: dot font for the remaining modern bits, safe margins on a phone, bigger buttons. */
body.pc88 .mobile-menu-toggle, body.pc88 #model-mode, body.pc88 #settings-panel { font-family:'Misaki',monospace; }
body.pc88 #model-mode { padding:4px 16px; font-size:14px; }
body.pc88 #start-choice p { font-size:18px; }
body.pc88 #start-choice button { font-size:18px; min-height:44px; padding:6px 16px; }
body.pc88 #start-choice button:disabled { border-style:dashed; opacity:.6; }
@media(max-width:680px){
 body.pc88 #talk { padding:6px 16px; }
 body.pc88 #start-choice { margin:6px 16px; }
 body.pc88 .input-slot { padding-bottom:max(8px, env(safe-area-inset-bottom,0px)); }
}