@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');

:root { color-scheme:dark; font-family:'Noto Sans JP',sans-serif; font-synthesis:none; color:#f1ecdf; background:#141410; --accent:#ef7957; --cream:#f2ecd9; --mono:'IBM Plex Mono',Consolas,monospace; --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; }
* { box-sizing:border-box; } body { margin:0; } button { font:inherit; cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; } button:disabled { cursor:not-allowed; } button:focus-visible { outline:2px solid var(--cream); outline-offset:6px; } [hidden] { display:none!important; }
.game-shell { position:relative; isolation:isolate; min-height:100svh; overflow:clip; }
.room,.room-shade { position:fixed; inset:0; pointer-events:none; z-index:-2; }
.room { background:#192422 url('../assets/night-office.png') center 51%/cover no-repeat; filter:saturate(.55) brightness(.56); transform:scale(1.025); transition:filter .8s,transform 1.2s; }
.room-shade { z-index:-1; background:radial-gradient(ellipse at 50% 42%,#0e130d4d 0%,#0c110dc2 72%,#0b100fed 100%),linear-gradient(0deg,#0b0f0bb3,transparent 70%); }
.game-shell::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.045; background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,#000 3px); }
#effects { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:8; }
.screen { position:relative; min-height:100svh; }
/* Title: name, language, entry, high score. */
.title-screen { display:flex; align-items:center; flex-direction:column; justify-content:center; padding:48px 24px 60px; text-align:center; }
h1 { margin:0 0 46px; font-family:var(--display); font-weight:800; text-shadow:0 5px 25px #0008; }
.title-opening { display:block; font-size:clamp(32px,4.3vw,60px); line-height:1; letter-spacing:.18em; padding-left:.18em; color:var(--cream); }
.title-main { display:block; font-size:clamp(72px,11.3vw,162px); line-height:1.04; letter-spacing:.012em; color:var(--accent); }
.language-options { display:flex; gap:12px; margin:0 0 34px; }
.language { width:134px; height:47px; background:#11191599; border:1px solid #d4d3b92e; font:500 17px var(--mono); letter-spacing:.5px; transition:border-color .2s,background .2s; }
.language.selected { color:var(--cream); border-color:#e5e0cdaa; background:#e9e3cc0e; box-shadow:inset 0 -2px 0 var(--cream); }
.language:disabled { color:#929b8b5c; border-color:#a2ab9121; }
.entry-button { display:block; border:1px solid #f9a388; background:var(--accent); color:#271e16; min-width:300px; padding:20px 42px 23px; font-size:29px; font-weight:800; letter-spacing:.19em; text-indent:.19em; box-shadow:0 5px 0 #783e2b,0 12px 35px #0005; transition:transform .15s,background .15s,box-shadow .15s; }
.entry-button:hover { background:#ff916d; transform:translateY(-2px); box-shadow:0 7px 0 #783e2b,0 15px 40px #0006; }
.entry-button:active { transform:translateY(3px); box-shadow:0 2px 0 #783e2b; }
.high-score { display:flex; align-items:baseline; gap:15px; margin-top:34px; color:#b5b9a8; font-size:12px; letter-spacing:.12em; }
.high-score strong { font:500 25px var(--mono); color:var(--cream); letter-spacing:1px; }
.high-score .price-unit { margin-left:-10px; font-size:11px; }
/* A single physical monitor with the reference above the editor. */
.game-screen { display:grid; align-content:center; padding:28px 4.3vw 109px; }
.game-shell[data-state='playing'] .room,.game-shell[data-state='countdown'] .room,.game-shell[data-state='paused'] .room { filter:saturate(.7) brightness(.57) blur(1px); transform:scale(1.04); }
.monitor { width:min(100%,1600px); margin:0 auto; position:relative; background:linear-gradient(135deg,#424742,#242b26 35%,#141b17 72%,#343a32); border:1px solid #6f77655c; padding:0 13px; border-radius:15px 15px 10px 10px; box-shadow:0 4px 0 #11160f,0 13px 65px #000c,inset 0 0 0 3px #b6bba211; z-index:2; }
.monitor-top { position:relative; height:43px; display:flex; align-items:center; justify-content:center; }
.bezel-slot { position:absolute; left:3px; width:33px; height:4px; border-radius:3px; background:#101710; box-shadow:0 1px 0 #5b65513b; }
.timer { font:500 19px var(--mono); letter-spacing:2px; color:#d6dcca; font-variant-numeric:tabular-nums; }
.timer.urgent { color:#ff9879; text-shadow:0 0 15px #ff794865; }
.pause-button { position:absolute; right:1px; top:9px; background:transparent; border:1px solid #a9b39b38; width:27px; height:25px; padding:0; font:14px var(--mono); color:#aeb9a2; }
.monitor-display { height:min(70vh,700px); min-height:390px; position:relative; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:3px solid #080d09; border-radius:4px; background:#171c1c; box-shadow:0 0 10px #000b,0 0 45px #94b78b10; }
.screen-reflection { pointer-events:none; position:absolute; inset:0; z-index:4; background:linear-gradient(132deg,#d2ebdc06,transparent 35%,transparent 72%,#92ba8403); box-shadow:inset 0 0 24px #0002; }
.spec-window,.editor-window { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.spec-window { background:#fbfcf7; color:#293831; border-right:3px solid #070f0d; color-scheme:light; }
.excel-titlebar,.editor-titlebar { height:34px; display:flex; align-items:center; gap:9px; padding:0 11px; flex:none; font-size:10px; }
.excel-titlebar { background:#1c6847; color:#f2faf1; }
.excel-icon { font:bold 14px Arial,sans-serif; width:20px; height:21px; display:grid; place-content:center; background:#ffffff1a; border:1px solid #ffffff38; }
.window-controls { margin-left:auto; white-space:pre; font:12px Arial,sans-serif; letter-spacing:5px; opacity:.65; }
.excel-tabs { flex:none; display:flex; gap:22px; padding:0 13px; background:#eff3ec; border-bottom:1px solid #d5ddd2; font-size:9px; height:31px; align-items:center; }
.excel-tabs .active { align-self:stretch; display:grid; align-items:center; border-bottom:2px solid #287250; }
.formula-bar { flex:none; display:flex; align-items:center; gap:12px; height:30px; padding:4px 6px; background:#f4f5f0; border-bottom:1px solid #cbd6c7; font:10px var(--mono); min-width:0; }
#cell-name { width:45px; padding:2px 5px; flex:none; color:#526053; background:#fff; border:1px solid #d1d7ca; }
.formula-bar i { color:#7e8b79; font:italic 13px Georgia,serif; }
#formula-value { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#778172; }
.column-heads { height:22px; flex:none; display:grid; grid-template-columns:30px repeat(7,1fr); font:10px var(--mono); background:#e9eee5; color:#586752; border-bottom:1px solid #bfcfbb; }
.column-heads>span { display:grid; place-items:center; border-right:1px solid #cbd7c5; }
.column-heads>span:first-child { font-size:9px; color:#8fa085; }
.sheet-viewport { overflow:auto; flex:1; scrollbar-width:thin; scrollbar-color:#c8d2c1 #f3f5ee; }
.sheet { min-width:100%; min-height:100%; padding-bottom:56px; background:repeating-linear-gradient(0deg,#dbe3d600 0,#dbe3d600 27px,#dbe3d6 27px,#dbe3d6 28px); }
.sheet-row { display:flex; min-height:28px; line-height:28px; }
.row-number { position:sticky; left:0; z-index:2; flex:none; width:30px; text-align:center; font:10px/28px var(--mono); background:#edf2e9; border-right:1px solid #cbd7c5; border-bottom:1px solid #d2ddcb; color:#71836b; user-select:none; }
.sheet-cell { min-width:0; flex:1; padding-left:22px; border-bottom:1px solid #dbe3d6; white-space:pre; }
.sheet-heading .sheet-cell { background:#eef3e9; font-size:20px; letter-spacing:2px; font-weight:700; padding-top:11px; padding-bottom:9px; line-height:35px; }
.sheet-heading .row-number { line-height:56px; }
.sheet-filename .sheet-cell { font:11px/32px var(--mono); color:#62705b; }
.sheet-filename .row-number { line-height:33px; }
.sheet-code { width:max-content; min-width:100%; }
.sheet-code .sheet-cell { padding-right:28px; font:13px/28px var(--mono); min-width:calc(100% - 30px); }
.sheet-code.current-row .row-number { color:#14603a; background:#dbead3; }
.sheet-code.current-row .sheet-cell { background:#e6f0dc; box-shadow:inset 2px 0 #347c47,inset 0 1px #88aa70,inset 0 -1px #88aa70; }
.source-char { color:#334036; }.source-char.comment { color:#687c61; }.source-char.typed { color:#91a087; }.source-char.current { color:#195b31; background:#b3d591; box-shadow:inset 0 -2px #357242; }.source-char.newline { font-size:10px;color:#9bac92;margin-left:4px; }
.sheet-bottom { height:29px; flex:none; display:flex; align-items:center; gap:15px; padding:0 12px; border-top:1px solid #c6d2bf; background:#edf2e7; font-size:10px; }
.sheet-arrows { color:#8b9b80;font-size:17px; }.sheet-tab { height:29px;display:grid;align-items:center;border-bottom:2px solid #2a754b;color:#2a754b;font-weight:700;padding:0 8px;background:#fcfdf8; }.sheet-add { color:#819373; }
.editor-window { background:#172020; }.editor-titlebar { color:#9aa9a2;background:#252e2d; }.editor-icon { color:#c3d9c1;font:14px var(--mono); }
.editor-tabs { flex:none;height:37px;background:#1d2726;border-bottom:1px solid #314039; }
.editor-file { min-width:168px;height:37px;width:max-content;display:flex;align-items:center;gap:10px;padding:0 17px;background:#172020;border-top:2px solid var(--accent);color:#bec9bb;font:10px var(--mono); }
.editor-file b { color:var(--accent);font-size:12px;font-weight:400; }.file-dot { width:5px;height:5px;border-radius:50%;background:#768876;margin-left:8px; }
.editor { position:relative;flex:1;min-height:0;overflow:auto;padding:22px 14px 35px;scrollbar-width:thin;scrollbar-color:#455447 #172020;outline:none;cursor:text; }
.editor:focus-visible { box-shadow:inset 0 0 0 1px #a0b6971a; }
.typed-line { display:flex;width:max-content;min-width:100%;min-height:28px;font:13px/28px var(--mono);white-space:pre; }
.line-number { position:sticky;left:-14px;z-index:1;flex:none;width:32px;padding-left:1px;font:10px/28px var(--mono);color:#63756b;user-select:none;background:#172020; }
.typed-line.active-line { background:#d6ebc905; }.typed-code { display:flex;white-space:pre; }
.input-char { color:#d2ddc9; }.input-char.keyword { color:#e3ae8b; }.input-char.comment { color:#829b76; }.input-char.string { color:#c7d991; }.input-char.number { color:#e0c99e; }
.cursor { display:inline-block;width:8px;height:20px;margin-top:4px;margin-left:1px;background:#d8e5af;box-shadow:0 0 11px #c3e0a133;animation:blink 1.1s infinite; }
.editor-placeholder { position:absolute;left:62px;top:27px;font-size:11px;color:#81927c;pointer-events:none;letter-spacing:.5px; }
.editor-bottom { height:29px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 11px;background:#1b2923;border-top:1px solid #354437;font-size:9px;color:#97ac8c; } #cursor-position { font:9px var(--mono);white-space:nowrap; }
.monitor-chin { height:33px;display:flex;align-items:center;justify-content:center;position:relative; }.chin-brand { font:8px var(--mono);letter-spacing:3px;color:#a3ab8e65; }.power-light { position:absolute;right:6px;width:4px;height:4px;border-radius:50%;background:#aacc83;box-shadow:0 0 8px #aacc83; }
.monitor-stand { position:absolute;width:90px;height:58px;top:calc(100% + 4px);left:calc(50% - 45px);background:linear-gradient(90deg,#181e17,#46503f 40%,#313a2c 65%,#171d15);clip-path:polygon(22% 0,78% 0,93% 100%,7% 100%);z-index:-1; }
.monitor-foot { position:absolute;width:210px;height:18px;top:calc(100% + 55px);left:calc(50% - 105px);border-radius:50%;background:linear-gradient(#545d48,#252d1e);box-shadow:0 8px 18px #0007;z-index:-1; }
.desk { position:absolute;bottom:0;left:0;right:0;height:15vh;min-height:80px;background:linear-gradient(178deg,#51574c99,#34392e 30%,#1e251b);border-top:2px solid #747d655c;box-shadow:0 -25px 70px #0003;z-index:0;transform:perspective(600px) rotateX(13deg);transform-origin:bottom; }
.keyboard { position:absolute;left:50%;bottom:-30px;width:460px;height:90px;padding:9px 13px 26px;transform:translateX(-50%) perspective(300px) rotateX(30deg);border:1px solid #646951;border-radius:6px;background:#20291e;box-shadow:0 8px 12px #0008; }
.keyboard-keys { height:52px;border:1px solid #161d12;background:repeating-linear-gradient(90deg,transparent 0,transparent 18px,#11190e 18px,#11190e 22px),repeating-linear-gradient(0deg,#39452f 0,#39452f 12px,#11190e 12px,#11190e 17px); }
.spacebar { position:absolute;bottom:7px;left:31%;right:31%;height:13px;border:2px solid #121b0e;background:#48543a; }
.mouse { position:absolute;width:39px;height:65px;bottom:6px;left:calc(50% + 268px);background:linear-gradient(90deg,#1c2419,#424d36 55%,#242e1f);border:1px solid #68735c88;border-radius:48% 48% 42% 42%;transform:rotate(-12deg);box-shadow:5px 7px 12px #0005; }
.countdown { position:absolute;inset:0;z-index:6;display:grid;place-content:center;background:#0b100dd9;backdrop-filter:blur(3px);font:800 140px var(--display);color:var(--accent); }
.floating-feedback { position:absolute;z-index:9;left:50%;top:9%;pointer-events:none;white-space:nowrap;font:800 50px/.95 var(--display);letter-spacing:1.5px;text-align:center;color:#ffe4b2;text-shadow:0 3px 0 #49220e,0 0 35px #ee8a3244;transform:translateX(-50%); }
.floating-feedback small { display:block;font:10px var(--mono);letter-spacing:1px;margin-top:9px; }.floating-feedback small:empty { display:none; }.floating-feedback.pop { animation:feedback-pop 1.05s both; }
.game-shell.overdrive .monitor { box-shadow:0 4px 0 #211308,0 0 50px #ec8b2430,0 10px 75px #0009;border-color:#ae8a50; }.game-shell.overdrive .monitor-display { box-shadow:0 0 19px #d68d4770; }.game-shell.overdrive .power-light { background:#ffd58a;box-shadow:0 0 17px #ffaa4d; }.game-shell.overdrive .editor { background:#23231d; }
.game-shell.miss .editor-window { box-shadow:inset 0 0 32px #e4544d25; }.game-shell.miss .cursor { background:#ff785f;box-shadow:0 0 13px #ff785f88; }.game-shell.miss .source-char.current { background:#ffd0b6;color:#9c3425; }.game-shell.build .monitor-display { animation:build-flash .5s; }.game-shell.shake .monitor { animation:screen-shake .23s; }
.result-screen { display:grid;place-items:center;padding:36px 22px; }.game-shell[data-state='finished'] .room { filter:saturate(.35) brightness(.45) blur(4px); }
.result-paper { width:min(560px,100%);padding:48px 45px 33px;text-align:center;color:#2b3428;background:#eee9d7;box-shadow:0 16px 70px #0008,inset 0 0 90px #d5caa63d;border-top:5px solid var(--accent); }
.result-paper h2 { font-size:23px;font-weight:700;letter-spacing:.5em;margin:0 0 5px;text-indent:.5em; }
.result-price { display:flex;justify-content:center;align-items:baseline;gap:9px;white-space:nowrap;padding-bottom:24px;margin-bottom:32px;border-bottom:1px solid #31442a30; }.result-price strong { color:#a83c22;font:700 clamp(80px,11vw,137px)/1.2 var(--display);letter-spacing:-2px; }.result-price>span { font-size:32px;font-weight:800;letter-spacing:-1px;color:#a83c22; }
.result-paper .entry-button { width:100%;min-width:0;font-size:18px;padding:18px 15px 20px;letter-spacing:.06em;text-indent:.06em; }
.return-button { display:block;margin:26px auto 0;color:inherit;border:0;border-bottom:1px solid #788c6455;background:transparent;font-size:12px;padding:5px 2px;letter-spacing:.1em; }.return-button:hover { color:#a83c22; }.result-paper button:focus-visible { outline-color:#8d452d; }
.pause-overlay { position:absolute;inset:0;min-height:100svh;z-index:12;background:#0a120de3;backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px; }.pause-card { text-align:center;width:310px;max-width:100%; }.pause-card h2 { font-size:34px;letter-spacing:.2em;font-weight:700;margin:0 0 34px; }.pause-card .entry-button { width:100%;min-width:0;font-size:22px;padding:17px 20px 20px; }.pause-card .return-button { color:#c0cbb3; }.pause-settings { display:flex;justify-content:center;gap:18px;margin-top:38px; }.pause-settings button { background:transparent;border:0;font-size:10px;color:#9da68e;padding:8px 3px; }
.sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
@keyframes blink { 0%,65%,100%{opacity:1} 80%{opacity:.1} }
@keyframes feedback-pop { 0%{opacity:0;transform:translateX(-50%) scale(.75)} 12%{opacity:1;transform:translateX(-50%) scale(1.03)} 25%,70%{opacity:1;transform:translateX(-50%) scale(1)} 100%{opacity:0;transform:translateX(-50%) translateY(-10px)} }
@keyframes build-flash { 0%,100%{box-shadow:0 0 0 #eabb8000} 35%{box-shadow:0 0 35px #eabb8090} }
@keyframes screen-shake { 0%,100%{transform:translate(0)} 20%{transform:translate(-3px,2px)} 40%{transform:translate(3px,-2px)} 60%{transform:translate(-2px,1px)} 80%{transform:translate(1px,-1px)} }
@media(min-width:1450px) { .sheet-code .sheet-cell,.typed-line { font-size:15px;line-height:31px;min-height:31px; }.sheet-code .row-number,.line-number { line-height:31px; }.cursor { height:23px; }.sheet-cell { padding-left:26px; }.editor { padding-top:26px; }.editor-placeholder { top:32px; }.excel-titlebar,.editor-titlebar { height:38px;font-size:11px; } }
@media(max-height:740px) and (min-width:801px) { .title-screen { padding:25px 20px 35px; } h1 { margin-bottom:31px; }.title-opening { font-size:43px; }.title-main { font-size:min(11vw,130px); }.language-options { margin-bottom:27px; }.entry-button { padding-top:16px;padding-bottom:19px; }.high-score { margin-top:27px; }.game-screen { padding-top:15px;padding-bottom:83px; }.monitor-display { height:calc(100svh - 182px);min-height:350px; }.monitor-top { height:35px; }.monitor-chin { height:27px; }.pause-button { top:5px; }.monitor-stand { height:43px; }.monitor-foot { top:calc(100% + 39px); }.desk { min-height:70px; }.floating-feedback { top:7%;font-size:43px; }.result-paper { padding-top:32px;padding-bottom:24px; }.result-price strong { font-size:110px; } }
@media(max-width:1050px) { .game-screen { padding-left:2vw;padding-right:2vw; }.monitor { padding-left:9px;padding-right:9px; }.sheet-cell { padding-left:15px; }.sheet-code .sheet-cell,.typed-line { font-size:12px; }.editor { padding-left:10px;padding-right:10px; }.line-number { width:28px; }.editor-placeholder { left:52px;font-size:10px; }.excel-tabs { gap:16px;font-size:8px; }.editor-bottom { font-size:8px; } }
@media(max-width:700px) { .title-screen { padding:32px 15px; }.title-opening { font-size:33px; }.title-main { font-size:clamp(54px,12vw,83px);line-height:1.1; } h1 { margin-bottom:43px; }.language { width:116px;height:43px;font-size:16px; }.language-options { margin-bottom:31px; }.entry-button { min-width:270px;font-size:27px;padding:18px 26px 21px; }.high-score { margin-top:31px; }.game-screen { padding:30px 8px 78px;align-content:center; }.monitor { padding:0 5px;border-radius:9px; }.monitor-top { height:37px; }.timer { font-size:15px; }.monitor-display { height:65svh;min-height:355px;border-width:2px;grid-template-columns:1fr 1fr; }.excel-titlebar,.editor-titlebar { height:30px;padding:0 6px;gap:5px;font-size:8px; }.excel-icon { font-size:11px;width:16px;height:17px; }.window-controls { display:none; }.excel-tabs { gap:9px;padding:0 5px;font-size:7px;height:26px; }.excel-tabs span:last-child { display:none; }.formula-bar { gap:5px;height:26px;font-size:8px; } #cell-name { width:32px; }.column-heads { grid-template-columns:22px repeat(7,1fr);font-size:8px;height:19px; }.row-number { width:22px;font-size:8px; }.sheet-cell { padding-left:9px; }.sheet-heading .sheet-cell { font-size:14px;letter-spacing:1px;line-height:28px; }.sheet-heading .row-number { line-height:49px; }.sheet-filename .sheet-cell { font-size:8px; }.sheet-code .sheet-cell { font-size:10px;min-width:calc(100% - 22px);padding-right:12px; }.sheet-bottom { gap:5px;padding:0 4px;font-size:8px;height:26px; }.sheet-tab { height:26px;padding:0 4px; }.sheet-arrows { font-size:12px; }.editor-tabs { height:31px; }.editor-file { height:31px;min-width:0;padding:0 7px;font-size:8px;gap:5px; }.file-dot { margin-left:3px;width:4px;height:4px; }.editor { padding:20px 6px; }.typed-line { font-size:10px; }.line-number { width:19px;left:-6px;font-size:8px; }.cursor { width:6px;height:16px;margin-top:6px; }.editor-placeholder { left:34px;top:26px;font-size:8px;letter-spacing:0; }.editor-bottom { height:26px;padding:0 5px;font-size:7px; }.editor-bottom>span:first-child { max-width:calc(100% - 28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } #cursor-position { font-size:7px; }.monitor-chin { height:27px; }.chin-brand { font-size:6px;letter-spacing:2px; }.keyboard { width:280px;height:70px;bottom:-22px; }.keyboard-keys { height:36px; }.mouse { left:calc(50% + 157px);width:28px;height:45px;bottom:5px; }.desk { height:12vh; }.floating-feedback { font-size:35px;top:15%; }.floating-feedback small { font-size:8px; }.result-paper { padding:35px 25px 28px; }.result-price strong { font-size:110px; }.result-price>span { font-size:25px; } }
/* Current screen layout. Keep the two code columns vertically aligned. */
.game-shell[data-state='title'] .room { filter:saturate(.8) brightness(.98); }
.game-shell[data-state='title'] .room-shade { background:radial-gradient(ellipse at 50% 45%,#10180b33,#0a100936 65%,#0a100980),linear-gradient(0deg,#09100eb0,transparent 35%); }
.brand-link { position:absolute;left:30px;top:25px;display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font:700 25px/.9 var(--display);letter-spacing:1px;text-shadow:0 2px 8px #000b;animation:brand-breathe 5s ease-in-out infinite; }
.brand-link img { width:49px;height:49px;box-shadow:0 3px 16px #0005; }
.brand-link small { display:block;font-size:13px;letter-spacing:4px;margin-top:6px; }
.brand-link:hover,.brand-link:focus-visible { animation-play-state:paused; }
.copyright { position:absolute;bottom:23px;color:#dfdfd5;text-shadow:0 2px 8px #000;text-decoration:none;font-size:11px;letter-spacing:.08em; }
.copyright:hover { color:#fff;text-decoration:underline; }
a:focus-visible { outline:2px solid var(--cream);outline-offset:6px; }
.entry-button:disabled { opacity:.6;cursor:wait; }
.load-error { max-width:400px;font-size:12px;color:#ffb89d; }
.monitor { max-width:1180px; }
.game-screen { padding:14px 5vw 80px; }
.monitor-top { height:44px;justify-content:space-between;padding:0 13px; }
.shift-clock { font:500 24px var(--mono);letter-spacing:2px;color:#dce6c8;text-shadow:0 0 12px #c6e0a22b; }
.time-remaining { display:flex;align-items:baseline;gap:6px; }
.time-remaining small { font-size:10px;color:#adb69a; }
.timer { font-size:25px;letter-spacing:1px;min-width:35px;text-align:right; }
.pause-button { left:calc(50% - 14px);right:auto;top:10px; }
.monitor-display { height:calc(100svh - 176px);max-height:880px;min-height:430px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
.spec-window { border-right:0;border-bottom:4px solid #0c1610; }
.spec-file { opacity:.65;font:10px var(--mono);margin-left:12px; }
.excel-tabs { display:none; }
.excel-titlebar,.editor-titlebar { height:28px;font-size:10px; }
.formula-bar { height:25px; }
.column-heads { height:19px;grid-template-columns:40px repeat(7,1fr); }
.sheet-bottom { height:22px; }.sheet-tab { height:22px; }
.sheet { padding-bottom:26px; }
.row-number { width:40px;font-size:10px;line-height:27px; }
.sheet-cell { padding-left:22px; }
.sheet-code .sheet-cell { font-size:16px;line-height:27px;min-width:calc(100% - 40px); }
.sheet-code .row-number { line-height:27px; }
.sheet-row { min-height:27px;line-height:27px; }
.editor-titlebar { display:none; }
.editor-tabs,.editor-file { height:30px; }
.editor-file { font-size:10px; }
.editor { padding:10px 0 22px; }
.typed-line { font-size:16px;line-height:27px;min-height:27px; }
.line-number { width:62px;padding-left:12px;left:0;font-size:10px;line-height:27px; }
.cursor { height:21px;margin-top:3px;width:9px; }
.editor-placeholder { left:77px;top:15px;font-size:12px; }
.editor-bottom { height:24px;font-size:10px; }
.reading-progress { color:#f0c385;border-bottom:1px solid #f0c38577; }
.source-char.current-reading { color:#195b31;background:#b3d591;box-shadow:inset 0 -2px #357242; }
.floating-feedback { top:8%;font-size:40px; }
@keyframes brand-breathe { 0%,100%{opacity:.7;filter:drop-shadow(0 0 3px #f6b3c400)} 50%{opacity:1;filter:drop-shadow(0 0 12px #f6b3c440)} }
@media(max-width:700px) { .brand-link { top:20px;left:20px;font-size:20px;gap:8px; }.brand-link img { width:40px;height:40px; }.brand-link small { font-size:10px; }.title-screen { padding-top:105px;padding-bottom:85px; }.copyright { bottom:22px;font-size:10px; }.game-screen { padding:10px 8px 64px; }.monitor-display { height:calc(100svh - 148px);min-height:430px;grid-template-columns:minmax(0,1fr); }.monitor-top { height:42px;padding:0 8px; }.shift-clock { font-size:20px; }.timer { font-size:22px; }.sheet-code .sheet-cell,.typed-line { font-size:12px; }.spec-file { font-size:8px;margin-left:5px; }.sheet-cell { padding-left:12px; }.row-number { width:30px; }.column-heads { grid-template-columns:30px repeat(7,1fr); }.sheet-code .sheet-cell { min-width:calc(100% - 30px); }.line-number { width:42px; }.editor-placeholder { left:55px;font-size:10px; }.editor-bottom { font-size:8px; }.floating-feedback { top:8%;font-size:31px; } }
/* Shift lighting, three courses, wall clock, and the shareable appraisal. */
.game-shell { --daylight:1;--warmth:.12;--sunbeam:.36;--brightness:1.08; }
.game-shell[data-state] .room { filter:saturate(.8) brightness(var(--brightness));transform:scale(1.025); }
.game-shell[data-state] .room-day { background-image:url('../assets/day-office.png');opacity:var(--daylight); }
.room-warmth,.sunbeams { position:fixed;inset:0;z-index:-1;pointer-events:none; }
.room-warmth { background:#f48b42;mix-blend-mode:soft-light;opacity:var(--warmth); }
.sunbeams { background:linear-gradient(120deg,transparent 28%,#fff4c855 29%,transparent 40%,#ffd89744 47%,transparent 55%);clip-path:polygon(30% 10%,62% 10%,100% 100%,48% 100%);mix-blend-mode:screen;opacity:var(--sunbeam); }
.game-shell[data-state] .room-shade { background:radial-gradient(ellipse at 56% 50%,#0a110600,#09110b44 70%,#0a100b9e),linear-gradient(0deg,#07100d99,transparent 38%); }
.game-shell[data-state='finished'] .room { filter:saturate(.55) brightness(.56) blur(3px); }
.brand-link { width:250px;display:block; }
.brand-link img { display:block;width:100%;height:auto;box-shadow:0 4px 20px #0005; }
.language-options { gap:10px; }.language { width:112px; }
.game-screen { padding:32px 4vw 80px 196px; }
.monitor { max-width:1180px; }
.monitor-display { height:calc(100svh - 192px); }
.monitor-top { justify-content:center;height:46px; }
.time-remaining { justify-content:center;gap:6px; }
.timer { font-size:30px;min-width:0; }
.monitor-mode { position:absolute;left:12px;font:500 10px var(--mono);color:#aebba1;letter-spacing:1.5px; }
.pause-button { left:auto;right:9px;top:11px; }
.wall-clock { position:absolute;left:27px;top:50%;transform:translateY(-65%);width:139px;margin:0;text-align:center;filter:drop-shadow(0 9px 15px #0008); }
.wall-clock svg { display:block;width:100%;height:auto; }
.clock-rim { fill:#4a5045;stroke:#89917a;stroke-width:2; }
.clock-face { fill:#dddac8;stroke:#191f18;stroke-width:2; }
.clock-tick { stroke:#53604d;stroke-width:1; }.clock-tick.hour-tick { stroke:#30392d;stroke-width:2; }
.clock-numbers { font:500 13px var(--mono);text-anchor:middle;fill:#384532; }
.hour-hand,.minute-hand { stroke:#283126;stroke-linecap:round; }.hour-hand { stroke-width:5; }.minute-hand { stroke-width:3; }.clock-pin { fill:#b33535; }
.wall-clock figcaption { margin:12px auto 0;font:500 20px var(--mono);color:#eee6ce;letter-spacing:2px;text-shadow:0 2px 5px #000;background:#0e190c9c;display:inline-block;padding:5px 10px; }
.editor-tabs { display:flex;justify-content:space-between;align-items:center; }
.vim-mode { font:10px var(--mono);color:#c6df9b;padding:0 13px; }
.source-char.command-key { color:#8c6034;background:#e7ddc9; }.source-char.current-key { background:#b3d591;color:#195b31; }
.editor-bottom { gap:15px; } #editor-status { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.floating-feedback { left:calc(50% + 64px);top:9%; }
.result-screen { padding:24px 24px 28px; }
.result-wrap { width:min(850px,100%);text-align:center; }
#result-card { display:block;width:100%;height:auto;max-height:calc(100svh - 226px);object-fit:contain;filter:drop-shadow(0 10px 35px #0008); }
.share-actions { display:flex;justify-content:center;gap:12px;margin-top:18px; }
.share-button { background:#efe9d9;border:1px solid #ece4ce;color:#263026;font-size:13px;font-weight:700;padding:12px 20px; }
.share-button:hover { background:#fff7e4; }.share-button:disabled { opacity:.5;cursor:wait; }
.share-status { min-height:19px;font-size:11px;color:#d8dcca;margin:9px 0; }
.result-navigation { display:flex;align-items:center;justify-content:center;gap:25px; }
.result-navigation .entry-button { min-width:0;font-size:15px;letter-spacing:.07em;padding:12px 25px 15px; }
.result-navigation .return-button { margin:0;color:#d3d8c6; }
@media(max-width:1050px) { .game-screen { padding-left:140px;padding-right:18px; }.wall-clock { left:17px;width:104px; }.wall-clock figcaption { font-size:15px; }.floating-feedback { left:calc(50% + 54px); } }
@media(max-width:700px) { .brand-link { width:195px;top:17px;left:17px; }.brand-link img { width:100%;height:auto; }.language { width:94px; }.language-options { gap:8px; }.game-screen { padding:19px 8px 64px 77px; }.monitor-display { height:calc(100svh - 155px); }.wall-clock { left:4px;width:67px; }.wall-clock figcaption { margin-top:5px;font-size:11px;letter-spacing:0;padding:3px 5px; }.monitor-mode { display:none; }.monitor-top { height:42px; }.timer { font-size:26px; }.pause-button { right:4px;top:9px; }.floating-feedback { left:calc(50% + 32px); }.result-screen { padding:18px 10px; }.share-actions { gap:8px; }.share-button { font-size:11px;padding:10px 12px; }.result-navigation { gap:18px; }.result-navigation .entry-button { font-size:12px;padding:12px 16px; }.share-status { font-size:10px; }.vim-mode { font-size:8px;padding:0 5px; } }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
/* Streaks fill the room with applause; the code and touch keys stay interactive. */
.game-shell { --hype:0;--keyboard-height:240px;--sans:'Noto Sans JP',sans-serif; }
.hype-barrage { position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none; }
.barrage-word { position:absolute;left:100%;top:var(--lane);width:max-content;font:900 var(--word-size)/1.15 var(--sans);font-style:italic;letter-spacing:.02em;white-space:nowrap;text-shadow:2px 3px 0 #142019,-2px -1px 0 #142019,0 0 16px #a9ff9250;animation:barrage-fly var(--duration) var(--delay) linear both;will-change:transform; }
.barrage-word.negative { text-shadow:2px 3px 0 #420e15,-2px -1px 0 #420e15,0 0 18px #ff483860; }
.game-shell[data-state='playing'] .monitor { box-shadow:0 0 calc(15px + 55px * var(--hype)) rgb(181 255 115 / calc(.05 + .35 * var(--hype))),0 18px 70px #0009;transition:box-shadow .4s; }
.game-shell::after { content:'';position:fixed;inset:0;z-index:7;pointer-events:none;opacity:1;background:none;box-shadow:inset 0 0 0 transparent;transition:box-shadow .22s; }
.game-shell.hype-positive::after { box-shadow:inset 0 0 90px #c2ff6b44,inset 0 0 6px #f0ffb4aa; }
.game-shell.hype-negative::after { box-shadow:inset 0 0 110px #ff553c55,inset 0 0 8px #ff9c75bb; }
.floating-feedback { top:7%;max-width:90%;font-family:var(--sans);font-size:clamp(24px,3.5vw,54px);font-weight:900;line-height:1.15;font-style:italic;letter-spacing:.03em;text-shadow:2px 3px 0 #182314,-2px -1px 0 #182314,0 0 25px #ffc85b88; }
.floating-feedback small { font:700 14px/1.4 var(--sans);letter-spacing:.12em; }
@keyframes barrage-fly { from { transform:translate3d(0,0,0) rotate(-3deg);opacity:0; } 5%,88% { opacity:.95; } to { transform:translate3d(calc(-1 * var(--travel)),0,0) rotate(-3deg);opacity:0; } }
.mobile-dialog { width:min(360px,calc(100% - 32px));padding:29px 22px;border:1px solid #bdd49670;border-top:4px solid #c5e390;background:#15221c;color:#edf0de;text-align:center;box-shadow:0 16px 80px #000b; }
.mobile-dialog::backdrop { background:#060d09ba;backdrop-filter:blur(5px); }
.mobile-dialog h2 { font-size:20px;line-height:1.6;margin:0 0 12px; }
.mobile-dialog p { font-size:13px;line-height:1.9;color:#c5d0bc;margin-bottom:25px; }
.mobile-dialog .entry-button { width:100%;min-width:0;font-size:18px;padding:16px 12px;letter-spacing:.05em; }
.soft-keyboard { position:fixed;z-index:11;bottom:0;left:0;right:0;padding:8px 5px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(#283830,#132019);border-top:1px solid #92aa6f88;box-shadow:0 -8px 25px #0007;touch-action:manipulation;user-select:none;-webkit-user-select:none; }
.soft-key-row { display:flex;gap:4px;max-width:720px;margin:0 auto 5px; }
.soft-key-row:last-child { margin-bottom:0; }
.soft-key-row button { flex:1;min-width:0;height:39px;padding:0;border:1px solid #768773;border-bottom:3px solid #101d15;border-radius:5px;background:linear-gradient(#52624b,#384b37);color:#f7f2db;font:500 17px/1 var(--mono);box-shadow:0 2px 1px #0005;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
.soft-key-row button:active { background:#cce6a0;color:#17271b;transform:translateY(2px);box-shadow:0 0 14px #b5ef9670; }
.soft-key-row .soft-control { flex:1.35;font-size:11px;background:#273b2e; }
.soft-key-row .soft-space { flex:3;font-size:12px; }
.soft-key-row .soft-enter { flex:1.6;background:#73944f;color:#fffce5; }
.soft-key-row [aria-pressed='true'] { background:#c4e298;color:#18351c;border-color:#dafda4; }
.touch-mode .game-screen { height:100dvh;min-height:0;padding:8px 7px calc(var(--keyboard-height) + 12px) 61px;align-content:center; }
.touch-mode .monitor { padding:0 4px;width:100%; }
.touch-mode .monitor-top { height:37px; }
.touch-mode .monitor-display { height:calc(100dvh - var(--keyboard-height) - 80px);min-height:130px;max-height:none; }
.touch-mode .monitor-chin { height:17px; }
.touch-mode .monitor-stand,.touch-mode .monitor-foot,.touch-mode .desk { display:none; }
.touch-mode .wall-clock { width:49px;left:5px;top:calc((100dvh - var(--keyboard-height))/2);transform:translateY(-50%); }
.touch-mode .wall-clock figcaption { font-size:11px;letter-spacing:0;margin-top:5px;padding:3px 4px; }
.touch-mode .sheet-cell { padding-left:9px; }
.touch-mode .sheet-code .sheet-cell,.touch-mode .typed-line { font-size:12px;line-height:25px;min-height:25px; }
.touch-mode .row-number { width:25px;line-height:25px; }
.touch-mode .column-heads { grid-template-columns:25px repeat(7,1fr); }
.touch-mode .line-number { width:34px;padding-left:8px;line-height:25px; }
.touch-mode .sheet-code .sheet-cell { min-width:calc(100% - 25px); }
.touch-mode .editor-placeholder { left:40px;font-size:9px; }
.touch-mode .spec-file { display:none; }
.touch-mode .editor-bottom { font-size:8px;gap:4px; }
.touch-mode .floating-feedback { top:5%;left:calc(50% + 23px);font-size:clamp(18px,5.4vw,32px); }
.touch-mode .floating-feedback small { font-size:10px;letter-spacing:0; }
.touch-mode .hype-barrage { bottom:var(--keyboard-height); }
.touch-mode .timer { font-size:25px; }
.touch-mode .pause-button { top:6px; }
@media(max-height:600px) { .touch-mode .soft-key-row button { height:28px;font-size:14px; }.touch-mode .soft-key-row .soft-control { font-size:10px; }.touch-mode .soft-key-row { gap:3px;margin-bottom:3px; }.touch-mode .soft-key-row:last-child { margin-bottom:0; }.touch-mode .soft-keyboard { padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom)); }.touch-mode .monitor-top { height:29px; }.touch-mode .monitor-chin,.touch-mode .formula-bar,.touch-mode .sheet-bottom,.touch-mode .column-heads { display:none; }.touch-mode .monitor-display { height:calc(100dvh - var(--keyboard-height) - 49px);min-height:100px; }.touch-mode .editor-tabs,.touch-mode .editor-file,.touch-mode .excel-titlebar { height:22px; }.touch-mode .editor-bottom { height:17px; }.touch-mode .editor { padding-top:3px;padding-bottom:3px; }.touch-mode .editor-placeholder { top:8px; }.touch-mode .pause-button { top:1px; }.touch-mode .game-screen { padding-top:4px;padding-bottom:calc(var(--keyboard-height) + 6px); } }
.reduced-motion .barrage-word { display:none; }
.exit-button { position:absolute;left:27px;top:32px;z-index:10;min-width:139px;height:44px;padding:0 14px;border:1px solid #d1ddba80;border-radius:4px;background:#18231ce8;color:#efeedb;font-size:13px;letter-spacing:.08em;box-shadow:0 3px 12px #0005;touch-action:manipulation; }
.exit-button:hover { background:#483629;border-color:#efa987;color:#fff3dc; }
.exit-button:active { transform:translateY(1px); }
@media(max-width:1050px) { .exit-button { left:17px;min-width:104px; } }
.touch-mode .exit-button { left:5px;top:8px;min-width:0;width:49px;height:37px;padding:0;font-size:10px;letter-spacing:0; }
@media(max-height:600px) { .touch-mode .exit-button { top:4px;height:29px; } }
@media(prefers-reduced-motion:reduce) { body:not(.full-motion) *,body:not(.full-motion) *::before,body:not(.full-motion) *::after { animation:none!important;transition:none!important; } }