/* ORPHEUS-9 — game stylesheet, extracted unchanged from the original Claude Artifact (2026-11-09).
   Only additions: local @font-face rules (fonts were loaded from Google Fonts) and two helper classes. */
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/vt323-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/share-tech-mono-latin-400-normal.woff2') format('woff2'); }
.lab-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lab-back { position: fixed; z-index: 100; left: 8px; top: 8px; padding: 8px 12px; background: #0b1424; color: #5eead4; font: 600 14px system-ui, sans-serif; border-radius: 6px; transform: translateY(-200%); }
.lab-back:focus { transform: none; outline: 2px solid #5eead4; outline-offset: 2px; }
/* Layout: a putty-plastic terminal monitor fills the viewport; the CRT tube is the stage,
   the bezel chin carries the physical controls. Deliberately one dark look (no light theme). */
:root{
  color-scheme: dark;
  --room:#121110; --room2:#201d19;
  --putty:#cbc2ab; --putty-hi:#e4ddc9; --putty-lo:#9e957e; --putty-ink:#4b453a; --recess:#0b0a09;
  --ui:'IBM Plex Mono','Noto Sans TC',ui-monospace,monospace;
}
html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
[hidden]{display:none !important}
body{
  margin:0; overflow:hidden; box-sizing:border-box; display:flex;
  background:radial-gradient(120% 90% at 50% 0%, var(--room2), var(--room) 70%); color:var(--putty);
  padding-block:14px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.monitor{
  /* phosphor tokens (P1 green default) */
  --bg:#03140a; --fg:#3dff7a; --dim:#1f8f48; --bright:#c9ffd9; --glow:rgba(61,255,122,.42);
  --scan:rgba(0,0,0,.30); --black:var(--dim); --white:var(--fg);
  --red:var(--bright); --green:var(--fg); --yellow:var(--bright); --blue:var(--bright); --magenta:var(--bright); --cyan:var(--fg);
  --font:'VT323',ui-monospace,'Noto Sans TC',monospace; --fs:22px; --fsk:1;
  flex:1; min-width:0; min-height:0; max-width:1180px; margin:0 auto; display:flex; flex-direction:column;
  background:linear-gradient(160deg,var(--putty-hi),var(--putty) 35%,var(--putty-lo));
  border-radius:26px; padding:24px 24px 0;
  box-shadow:0 30px 70px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.22);
}
.monitor[data-crt-theme="amber"]{ --bg:#140c02; --fg:#ffb22e; --dim:#9a6512; --bright:#ffe5ad; --glow:rgba(255,170,40,.42); }
.monitor[data-crt-theme="white"]{ --bg:#0c0e11; --fg:#dfe8f2; --dim:#7c8794; --bright:#ffffff; --glow:rgba(200,220,255,.30); }
.monitor[data-crt-theme="cyan"]{ --bg:#011316; --fg:#4cebff; --dim:#1d8796; --bright:#c8faff; --glow:rgba(76,235,255,.40); }
.monitor[data-crt-theme="lcd"]{ --bg:#a3b087; --fg:#1d2914; --dim:#4e5c39; --bright:#070d03; --glow:transparent; --scan:rgba(0,0,0,.07); }
.monitor[data-crt-theme="dos"]{ --bg:#050505; --fg:#c4c4c4; --dim:#7a7a7a; --bright:#ffffff; --glow:rgba(220,220,220,.18);
  --red:#ff5f5f; --green:#5fff5f; --yellow:#ffff5f; --blue:#7f7fff; --magenta:#ff5fff; --cyan:#5fffff; --black:#7a7a7a; --white:#e0e0e0; }
.monitor[data-crt-theme="blue8"]{ --bg:#3a2f96; --fg:#b8adff; --dim:#8378d6; --bright:#ffffff; --glow:rgba(184,173,255,.35); --scan:rgba(0,0,0,.22);
  --red:#ff8a8a; --green:#a8ff96; --yellow:#fff39a; --blue:#d9d3ff; --magenta:#ffa6f4; --cyan:#a6f4ff; --black:#8378d6; --white:#ffffff; }
.monitor[data-crt-theme="synth"]{ --bg:#14061f; --fg:#ff7ad1; --dim:#9a4c86; --bright:#fffb9e; --glow:rgba(255,90,200,.45);
  --red:#ff4d6d; --green:#05ffa1; --yellow:#fffb9e; --blue:#2fd6ff; --magenta:#c084ff; --cyan:#2fd6ff; --black:#9a4c86; --white:#ffe9f7; }
.monitor[data-crt-theme="rainbow"]{ --bg:#08060f; --fg:#ff6b6b; --dim:#a04848; --bright:#fff1a8; --glow:rgba(255,107,107,.45);
  --red:#ff6b6b; --green:#6bff9e; --yellow:#fff16b; --blue:#6bb5ff; --magenta:#d36bff; --cyan:#6bfff3; --black:#a04848; --white:#ffffff; }

.recess{flex:1; min-height:0; display:flex; padding:14px; border-radius:20px; background:var(--recess);
  box-shadow:inset 0 4px 14px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.45);}
.crt{position:relative; flex:1; min-width:0; border-radius:22px/30px; overflow:hidden; background:var(--bg); cursor:text;}
.tube{position:absolute; inset:0}
.screen{position:absolute; inset:0; display:flex; flex-direction:column; padding:20px 26px 12px;
  color:var(--fg); font-family:var(--font); font-size:calc(var(--fs) * var(--fsk)); line-height:1.2;
  text-shadow:0 0 1px var(--fg), 0 0 7px var(--glow); animation:flicker 5s infinite;}
.monitor[data-crt-theme="lcd"] .screen{text-shadow:none}
.monitor[data-crt-theme="rainbow"] .tube{animation:hue 7s linear infinite}
.scroll{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
#out>div, #line{white-space:pre-wrap; overflow-wrap:anywhere; min-height:1.2em}
#alt{position:absolute; inset:0; margin:0; padding:20px 26px 12px; background:var(--bg); white-space:pre; overflow:hidden;
  font:inherit; line-height:1.2; z-index:2}
#status{flex:none; display:flex; gap:2ch; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:6px;
  border-top:1px dashed var(--dim); color:var(--dim); font-size:.8em; white-space:nowrap}
#status .st-l{overflow:hidden; text-overflow:ellipsis; min-width:0}
#status .st-r{flex:none}
.b{color:var(--bright)} .d{opacity:.6} .u{text-decoration:underline}
.c0{color:var(--black)} .c1{color:var(--red)} .c2{color:var(--green)} .c3{color:var(--yellow)}
.c4{color:var(--blue)} .c5{color:var(--magenta)} .c6{color:var(--cyan)} .c7{color:var(--white)}
.inv{background:var(--fg); color:var(--bg) !important; text-shadow:none}
#cur{background:var(--fg); color:var(--bg); text-shadow:none; animation:blink 1.06s steps(1) infinite}
.crt:not(.focused) #cur{background:transparent; color:inherit; outline:1px solid var(--fg); outline-offset:-1px; animation:none}
::selection{background:var(--fg); color:var(--bg)}

.fx{position:absolute; inset:0; pointer-events:none}
.scan{z-index:4; background:repeating-linear-gradient(to bottom, var(--scan) 0 1px, transparent 1px 3px)}
.roll{z-index:4; inset:auto 0 auto 0; top:-25%; height:25%;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.035) 50%, transparent); animation:roll 8s linear infinite}
.vig{z-index:5; background:radial-gradient(ellipse 92% 88% at 50% 50%, transparent 60%, rgba(0,0,0,.5) 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.7)}
.glass{z-index:6; background:linear-gradient(155deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 26%)}
.monitor[data-crt-theme="lcd"] .vig{background:radial-gradient(ellipse at 50% 50%, transparent 70%, rgba(0,0,0,.18) 100%); box-shadow:inset 0 0 30px rgba(0,0,0,.35)}
.crt.nocrt .scan, .crt.nocrt .roll, .crt.nocrt .glass{display:none}
.crt.nocrt .screen{text-shadow:none; animation:none}
.crt.nocrt .vig{background:none; box-shadow:inset 0 0 20px rgba(0,0,0,.6)}

.crt.powering .tube{animation:turnon .85s ease-out}
.crt.shutting .tube{animation:turnoff .6s ease-in forwards}
.crt.glitch .tube{animation:glitch 1s steps(2) 1}
.monitor.off .tube{opacity:0}

#power{position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(ellipse at 50% 45%, #1a1a18 0%, #0b0b0a 70%); color:#8a8578; font-family:var(--ui); text-align:center; padding:16px}
#power b{font-size:13px; letter-spacing:.4em; color:#b9b2a2; font-weight:600}
#power span{font-size:12px; letter-spacing:.08em; animation:blink 1.6s steps(1) infinite}

#toast{position:absolute; top:16px; right:20px; z-index:7; max-width:min(70%, 420px); border:1px solid var(--fg); background:var(--bg);
  color:var(--fg); padding:6px 12px; font-family:var(--font); font-size:calc(var(--fs) * var(--fsk) * .82);
  box-shadow:0 0 14px var(--glow); transform:translateY(-160%); transition:transform .35s ease; pointer-events:none}
#toast.show{transform:translateY(0)}

.chin{display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; padding:12px 6px 16px; font-family:var(--ui); color:var(--putty-ink)}
.brand{display:flex; flex-direction:column; gap:3px; margin-right:auto; min-width:0}
.brand b{font-size:15px; letter-spacing:.38em; font-weight:600}
.brand small{font-size:10px; letter-spacing:.16em; text-transform:uppercase}
.knobs{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.knob{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase}
.knob button, .mkeys button{appearance:none; border:0; min-width:46px; height:24px; padding:0 8px; border-radius:4px; cursor:pointer;
  background:linear-gradient(#ece6d6,#b8af99); color:var(--putty-ink); font:600 10px var(--ui); letter-spacing:.06em;
  box-shadow:0 2px 0 #7a7260, 0 3px 5px rgba(0,0,0,.35), inset 0 1px 0 #fff}
.knob button:active, .mkeys button:active{transform:translateY(2px); box-shadow:0 0 0 #7a7260, inset 0 1px 3px rgba(0,0,0,.35)}
.knob button:focus-visible, .mkeys button:focus-visible{outline:2px solid #2b62c9; outline-offset:2px}
.pwr button{width:30px; min-width:30px; height:30px; padding:0; border-radius:50%; font-size:13px}
.led{width:9px; height:9px; border-radius:50%; background:var(--fg); box-shadow:0 0 6px var(--fg), 0 0 14px var(--glow); margin-bottom:10px}
.monitor.off .led{background:#3b2b22; box-shadow:none}
.mkeys{display:none; gap:6px; flex-wrap:wrap; width:100%}
.mkeys button{flex:1 0 auto; height:34px; font-size:12px}
#kbd{position:fixed; left:0; bottom:0; width:1px; height:1px; opacity:0; border:0; padding:0; margin:0; resize:none; font-size:16px; pointer-events:none}

@keyframes blink{50%{background:transparent; color:inherit; opacity:.999}}
@keyframes flicker{0%,100%{opacity:1} 47%{opacity:1} 48%{opacity:.955} 49%{opacity:1}}
@keyframes roll{to{transform:translateY(520%)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes turnon{0%{transform:scale(1,.004); filter:brightness(5)} 35%{transform:scale(1,.004); filter:brightness(5)} 62%{transform:scale(1,1.04); filter:brightness(1.8)} 100%{transform:none; filter:none}}
@keyframes turnoff{0%{transform:none} 45%{transform:scale(1,.004); filter:brightness(4)} 80%{transform:scale(.003,.004); filter:brightness(6)} 100%{transform:scale(0,0); filter:brightness(6)}}
@keyframes glitch{0%{transform:none} 10%{transform:translate(-7px,2px) skewX(9deg); filter:contrast(2.2) hue-rotate(80deg)} 22%{transform:translate(6px,-3px)}
  34%{transform:scaleY(.95) translate(-3px,0); filter:invert(1)} 48%{transform:skewX(-11deg)} 62%{transform:translate(2px,1px); filter:none} 100%{transform:none}}

@media (max-width:640px){
  body{padding-block:8px}
  .monitor{padding:12px 12px 0; border-radius:16px; --fsk:.8}
  .recess{padding:6px; border-radius:12px}
  .crt{border-radius:12px/16px}
  .screen, #alt{padding:12px 12px 8px}
  .chin{gap:10px; padding:10px 2px 12px}
  .brand small{display:none}
  .knobs{gap:8px}
  .knob button{min-width:40px}
  #status{white-space:normal; flex-direction:column; gap:2px}
}
@media (pointer:coarse){ .mkeys{display:flex} }
@media (prefers-reduced-motion:reduce){
  .screen, .roll, .monitor[data-crt-theme="rainbow"] .tube{animation:none}
  .crt.glitch .tube{animation:none}
}