: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; }
.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; }
@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 { display:none; }
/* Portrait-first vertical phone layout. Keep the original canvas pixels. */
@media(max-width:680px) and (orientation:portrait){
 body { padding:6px; min-height:0; height:var(--visible-height,100dvh); display:block; overflow:hidden; }
 main { position:relative; display:flex; flex-direction:column; height:calc(var(--visible-height,100dvh) - 12px); min-height:0; }
 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; padding:6px; gap:8px; grid-template-rows:auto minmax(0,1fr); }
 .portrait-panel { position:relative; display:block; width:min(100%,calc(var(--visible-height,100svh) * .3838094)); margin-inline:auto; }
 .portrait-panel canvas { width:100%; }
 .game-logo { position:absolute; right:8px; 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; }
 .conversation-panel { height:auto; min-height:0; }
 #conversation { padding-right:4px; }
 .message,#live-reply { font-size:22px; line-height:1.55; margin-bottom:16px; }
 .speaker { font-size:10px; }
 .message.enny + .message.enny .speaker { display:none; }
 .input-slot { flex:none; margin-top:4px; 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; }
 #settings-panel { display:none; position:fixed; top:58px; right:8px; left:8px; z-index:5; max-height:calc(var(--visible-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; }
 .screen-wrap:fullscreen { padding:6px; gap:8px; align-content:start; height:100%; }
 .screen-wrap:fullscreen .conversation-panel { height:auto; }
}