/* ============================================================
   MODEM DELUXE - stylesheet
   90年代 / Win95風 / CRTブラウン管
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --bg:#0a0d0a;
  --crt-green:#8ad07a;
  --amber:#ffb84d;
  --win-face:#c3c7cb;
  --win-face-d:#8a8e94;
  --win-shadow:#5a5e64;
  --win-hi:#ffffff;
  --win-navy:#000082;
  --ink:#1a1a1a;
  --paper:#e9e6da;
  --ok:#3ac06a;
  --bad:#e0483a;
  --warn:#e0a53a;
}
html,body{ height:100%; }
body{
  background:#000;
  font-family:"MS PGothic","MS Gothic","Hiragino Kaku Gothic ProN",monospace,sans-serif;
  color:var(--paper);
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- CRT ---------- */
.crt{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center,#141a14 0%,#050705 80%);
  padding:min(3vmin,26px);
}
.crt-frame{
  position:relative;
  width:min(1000px,100%); height:min(720px,100%);
  border-radius:18px;
  background:#1c1f1c;
  box-shadow:0 0 0 10px #23262a, 0 0 0 18px #16181b, 0 30px 80px rgba(0,0,0,.7);
  overflow:hidden;
}
.viewport{
  position:absolute; inset:0;
  background:#07110a;
  overflow:hidden;
  animation:crtOn .9s ease-out;
}
.crt.power-on .viewport{ animation:crtOn .9s ease-out; }
@keyframes crtOn{
  0%{ transform:scaleY(.004) scaleX(1.2); filter:brightness(6); opacity:0; }
  35%{ transform:scaleY(.02) scaleX(1); filter:brightness(4); opacity:1; }
  60%{ transform:scaleY(1) scaleX(1); filter:brightness(2); }
  100%{ transform:scale(1); filter:brightness(1); }
}
.crt-scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 4px);
  mix-blend-mode:multiply;
}
.crt-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:51;
  box-shadow:inset 0 0 120px 30px rgba(0,0,0,.55);
  border-radius:14px;
}
.crt-glow{
  position:absolute; inset:0; pointer-events:none; z-index:52;
  background:radial-gradient(ellipse at 50% 40%,rgba(120,255,160,.06),transparent 60%);
}
.crt.crt-off .crt-scanlines,
.crt.crt-off .crt-vignette,
.crt.crt-off .crt-glow{ display:none; }
.crt.crt-off .viewport{ animation:none; }
.crt.crt-off .crt-frame{ box-shadow:0 20px 60px rgba(0,0,0,.6); border-radius:8px; }
.crt.col-16 .viewport{ filter:url(#posterize16) saturate(1.3); }
.crt.col-256 .viewport{ filter:url(#posterize256); }
.crt-burn{ position:absolute; inset:0; z-index:49; pointer-events:none; opacity:0; transition:opacity 1.5s;
  background:
    linear-gradient(90deg,transparent 0 4%,rgba(255,255,255,.06) 4% 96%,transparent 96%),
    linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05));
  mix-blend-mode:overlay; }

/* ---------- screens ---------- */
.screen{ position:absolute; inset:0; display:none; overflow:auto; }
.screen.active{ display:block; }
#upgradeScreen.active,#ispSelectScreen.active,#resultScreen.active,
#noCarrierScreen.active,#connectFlashScreen.active{ display:flex; align-items:center; justify-content:center; padding:16px; }

/* ---------- Win98 chrome ---------- */
.win98{
  background:var(--win-face);
  border:2px solid;
  border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  color:var(--ink);
  box-shadow:1px 1px 0 var(--win-shadow), inset 1px 1px 0 #dfe2e6;
}
.win98-title{
  background:linear-gradient(90deg,var(--win-navy),#1084d0);
  color:#fff; font-weight:bold; font-size:13px;
  padding:3px 6px; display:flex; justify-content:space-between; align-items:center;
}
.win98-x{ cursor:pointer; background:var(--win-face); color:#000; padding:0 5px; border:1px solid #5a5e64; line-height:1.2; }
.win98-body{ padding:14px; }
.win98-btn{
  font-family:inherit; font-size:13px; cursor:pointer;
  background:var(--win-face); color:#000;
  border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  padding:6px 14px;
}
.win98-btn:active{ border-color:var(--win-shadow) var(--win-hi) var(--win-hi) var(--win-shadow); }
.win98-btn:disabled{ color:#7a7e84; cursor:not-allowed; text-shadow:1px 1px 0 #dfe2e6; }
.win98-btn.primary{ font-weight:bold; box-shadow:0 0 0 1px #000; }

/* ---------- boot ---------- */
#bootScreen{ background:#000; }
.boot-crt{
  min-height:100%; padding:34px;
  font-family:"MS Gothic",monospace; color:var(--crt-green);
  font-size:14px; line-height:1.7; text-shadow:0 0 6px rgba(120,255,160,.5);
  display:flex; flex-direction:column; gap:24px;
}
.boot-lines{ white-space:pre-wrap; }
.boot-power{
  align-self:flex-start; margin-top:auto;
  font-family:inherit; font-size:15px; cursor:pointer;
  background:#0c1a0c; color:var(--crt-green);
  border:1px solid var(--crt-green); padding:10px 22px;
  text-shadow:0 0 6px rgba(120,255,160,.6);
}
.boot-power:hover{ background:#123012; }

/* ---------- desktop ---------- */
#desktopScreen{ background:#1a7d7d; }
.desk-bg{
  position:relative;
  min-height:100%;
  background:
    linear-gradient(135deg,#2a9d9d,#0d6b6b);
  padding:22px 22px 46px;
  display:flex; gap:26px; flex-wrap:wrap; align-content:flex-start;
}
.desk-icon{ touch-action:none; }
.desk-icons{ display:flex; flex-direction:column; gap:20px; }
.desk-icon{
  width:88px; background:none; border:none; cursor:pointer; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:inherit; font-size:12px; text-shadow:1px 1px 2px rgba(0,0,0,.7);
}
.desk-icon .di-glyph{ font-size:34px; filter:drop-shadow(2px 2px 2px rgba(0,0,0,.4)); }
.desk-icon:hover .di-label{ background:var(--win-navy); outline:1px dotted #fff; }
.desk-panel{ width:min(360px,100%); }
.desk-stat{ display:flex; justify-content:space-between; padding:5px 2px; font-size:13px; border-bottom:1px dotted #9a9ea4; }
.desk-stat b{ color:#000082; }
.big-connect{ width:100%; margin-top:12px; padding:12px; font-size:15px; font-weight:bold; }

.taskbar{
  position:absolute; left:0; right:0; bottom:0; height:34px;
  background:var(--win-face);
  border-top:2px solid var(--win-hi);
  display:flex; align-items:center; gap:6px; padding:0 6px;
  color:#000; font-size:12px;
}
.taskbar-start{ font-weight:bold; border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi); padding:3px 8px; }
.taskbar-spacer{ flex:1; }
.tb-toggle{ font-family:inherit; font-size:14px; cursor:pointer; background:var(--win-face); border:2px solid; border-color:var(--win-shadow) var(--win-hi) var(--win-hi) var(--win-shadow); padding:2px 6px; }
.taskbar-clock{ border:1px solid var(--win-shadow); padding:3px 8px; background:#c3c7cb; }

/* ---------- ISP select ---------- */
.isp-window{ width:min(560px,100%); max-height:90%; overflow:auto; }
.isp-lead{ font-size:13px; margin-bottom:10px; }
.isp-lead-sub{ font-size:11px; color:#555; }
.isp-locked-wrap{ margin-top:12px; border-top:2px groove #b7b3a4; padding-top:8px; }
.isp-locked-head{ font-size:11px; font-weight:bold; color:#666; margin-bottom:6px; }
.isp-locked-era{ font-size:10px; color:#888; margin:6px 0 3px; letter-spacing:1px; }
.isp-locked-row{ display:flex; align-items:center; gap:8px; font-size:11px; color:#555; padding:3px 4px; }
.isp-locked-row .isp-trait{ opacity:.85; }
.isp-locked-name{ min-width:110px; font-weight:bold; }
.isp-list{ display:flex; flex-direction:column; gap:8px; }
.isp-card{
  text-align:left; cursor:pointer; font-family:inherit;
  background:var(--paper); color:#1a1a1a;
  border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  padding:10px 12px;
}
.isp-card:hover{ background:#fffef4; }
.isp-card:active{ border-color:var(--win-shadow) var(--win-hi) var(--win-hi) var(--win-shadow); }
.isp-name{ font-weight:bold; font-size:15px; color:#000082; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.isp-trait{ font-size:10px; font-weight:bold; background:#3a2c0d; color:var(--amber); padding:2px 6px; }
.isp-trait-desc{ font-size:11px; color:#5a4a20; background:#fff8e6; border-left:3px solid var(--amber); padding:4px 6px; margin:0 0 6px; }
.isp-mods{ display:flex; flex-direction:column; gap:2px; margin:0 0 6px; }
.isp-mod{ font-size:10px; color:#5a4a20; background:#fff8e6; border-left:3px solid var(--amber); padding:3px 6px; line-height:1.4; }
.isp-mod b{ color:#3a2c0d; }
.isp-flavor{ font-size:12px; margin:3px 0 6px; color:#333; }
.isp-tags{ display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:#555; }
.isp-tags b.up{ color:#1a7d1a; }
.isp-tags b.down{ color:#b02a2a; }

/* ---------- handshake ---------- */
#handshakeScreen{ background:#04120a; color:var(--crt-green); font-family:"MS Gothic",monospace; padding:0; }
#handshakeScreen.active{ display:flex; flex-direction:column; }
.hs-topbar{ display:flex; justify-content:space-between; align-items:center; padding:8px 14px; background:#07220f; border-bottom:1px solid #1c5c30; }
.hs-brand{ font-weight:bold; letter-spacing:2px; color:var(--amber); }
.hs-header{ display:flex; gap:12px; align-items:center; font-size:12px; flex-wrap:wrap; }
.hs-header .hs-isp{ color:#fff; }
.hs-header .hs-weather{ color:var(--amber); }
.hs-abort{ font-family:inherit; font-size:11px; cursor:pointer; background:#2a0d0d; color:#ff9a9a; border:1px solid #6a2020; padding:3px 8px; }
.hs-timebar-wrap{ height:6px; background:#0a2a16; }
.hs-timebar{ height:100%; width:100%; background:var(--ok); transition:background .3s; }
.hs-stage-head{ padding:14px 16px 4px; }
.hs-stage-head h2{ font-size:18px; color:var(--amber); }
.hs-stage-head p{ font-size:12px; color:#7fbf95; margin-top:4px; }
.hs-stage{ flex:1; padding:12px 16px 24px; display:flex; align-items:flex-start; justify-content:center; }
#handshakeScreen.shake-lite{ animation:shakeLite .18s infinite; }
@keyframes shakeLite{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-1px,1px); } 75%{ transform:translate(1px,-1px); } }

/* dial */
.dial-wrap{ width:min(340px,100%); text-align:center; }
.dial-target{ font-size:13px; color:#9fdfb2; margin-bottom:8px; }
.dial-target b{ color:#fff; letter-spacing:2px; font-size:16px; }
.dial-target.flash-bad, .flash-bad{ animation:flashBad .3s 3; }
@keyframes flashBad{ 50%{ color:#ff5555; background:#3a0d0d; } }
.dial-readout{
  font-size:26px; letter-spacing:4px; color:var(--amber);
  background:#031c0e; border:1px solid #1c5c30; padding:10px; margin-bottom:6px; min-height:52px;
  text-shadow:0 0 8px rgba(255,184,77,.5);
}
.dial-status{ font-size:12px; min-height:18px; margin-bottom:12px; color:#bfe;}
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.key{
  font-family:inherit; font-size:20px; cursor:pointer;
  background:#0d2c17; color:var(--crt-green); border:1px solid #2a6c40;
  padding:14px 0;
}
.key:hover{ background:#134020; }
.key:active{ background:#1c5c30; transform:translateY(1px); }
.key.primary{ background:#3a2c0d; color:var(--amber); border-color:#7a5c20; }
.dial-actions{ display:flex; gap:8px; margin-top:8px; }
.key-wide{ flex:1; font-size:13px; padding:10px 0; }
.key-big{ font-size:15px; padding:16px; width:100%; }

/* carrier */
.carrier-wrap{ width:min(660px,100%); }
#carrierCanvas{ width:100%; height:auto; background:#020e07; border:1px solid #1c5c30; display:block; }
.carrier-scale{
  position:relative; height:40px; margin:10px 0;
  background:linear-gradient(90deg,#0a2a16,#0a2a16); border:1px solid #1c5c30;
  touch-action:none;
}
.carrier-band{
  position:absolute; top:0; bottom:0;
  background:rgba(90,220,140,.28); border-left:1px dashed #5adc8c; border-right:1px dashed #5adc8c;
}
.carrier-cursor{
  position:absolute; top:-4px; bottom:-4px; width:3px; background:var(--amber);
  box-shadow:0 0 8px var(--amber); transform:translateX(-50%);
}
.carrier-decoy{
  position:absolute; top:0; bottom:0;
  background:repeating-linear-gradient(45deg,rgba(224,72,58,.22) 0 4px,transparent 4px 8px);
  border-left:1px dashed rgba(224,72,58,.6); border-right:1px dashed rgba(224,72,58,.6);
}
.signal-row{ display:flex; align-items:center; gap:10px; font-size:12px; margin:8px 0; }
.signal-track{ flex:1; height:14px; background:#0a2a16; border:1px solid #1c5c30; }
.signal-fill{ height:100%; width:0; background:linear-gradient(90deg,#3a9ce0,#5adc8c); transition:width .1s; }
.carrier-status{ font-size:12px; color:#bfe; min-height:18px; }

/* negotiate */
.nego-wrap{ width:min(520px,100%); display:grid; grid-template-columns:120px 1fr; gap:20px; }
.nego-meter{
  position:relative; height:280px; background:#020e07; border:1px solid #1c5c30; overflow:hidden;
}
.nego-fill{ position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(#3ac06a,#3a9ce0); transition:height .05s linear; }
.nego-ceiling-hint{ position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(224,72,58,.25) 6px 12px); opacity:0; pointer-events:none; }
.nego-marker{ position:absolute; left:0; right:0; height:0; border-top:2px dashed rgba(255,180,80,.85); pointer-events:none; }
.nego-marker::after{ content:"限界"; position:absolute; right:2px; top:-14px; font-size:9px; color:var(--amber); }
.nego-scale{ position:absolute; inset:0; }
.nego-scale span{ position:absolute; right:2px; font-size:9px; color:#5a8c6c; transform:translateY(50%); }
.nego-side{ display:flex; flex-direction:column; gap:8px; }
.nego-rate{ font-size:24px; color:var(--amber); }
.nego-warn{ font-size:13px; color:var(--ok); }
.nego-warn.bad{ color:var(--bad); font-weight:bold; }
.nego-status{ grid-column:1/-1; font-size:12px; color:#bfe; text-align:center; }

/* instant */
.instant-wrap{ text-align:center; width:min(360px,100%); }
.instant-glyph{ font-size:64px; margin-bottom:14px; animation:spinSlow 8s linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.instant-msg{ font-size:13px; margin-bottom:18px; color:#bfe; }

/* ---------- connect flash ---------- */
#connectFlashScreen{ background:#000; }
.cf-inner{ position:relative; width:min(640px,100%); }
.cf-flash{ position:absolute; inset:-100px; background:#eaffea; opacity:0; }
.cf-flash.go{ animation:cfFlash 2.4s ease-out; }
@keyframes cfFlash{ 0%{ opacity:0; } 4%{ opacity:.95; } 12%{ opacity:.1; } 20%{ opacity:.6; } 40%{ opacity:0; } }
.cf-text{
  position:relative; font-family:"MS Gothic",monospace; color:var(--crt-green);
  font-size:15px; line-height:1.8; white-space:pre-wrap;
  text-shadow:0 0 8px rgba(120,255,160,.6);
}

/* ---------- download ---------- */
#downloadScreen{ background:#1a7d7d; }
#downloadScreen.active{ display:flex; padding:20px; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
#downloadScreen.shake-lite{ animation:shakeLite .2s infinite; }
.dl-dlg{ width:min(440px,100%); }
.dl-line{ font-size:12px; margin-bottom:4px; }
.dl-line.dl-sub{ color:#444; }
.dl-anim{
  position:relative; height:60px; margin:12px 0;
  display:flex; align-items:center; justify-content:space-between; padding:0 24px;
  background:#fff; border:1px inset #8a8e94;
}
.dl-page{ font-size:26px; }
.dl-dots{ display:flex; gap:6px; }
.dl-dots i{ width:6px; height:6px; background:#1084d0; border-radius:50%; animation:dlDot 1s infinite; }
.dl-dots i:nth-child(2){ animation-delay:.2s; }
.dl-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dlDot{ 0%,100%{ transform:translateX(0); opacity:.3; } 50%{ transform:translateX(6px); opacity:1; } }
.dl-progress{ height:20px; background:#fff; border:1px inset #8a8e94; padding:2px; }
.dl-progress-fill{
  height:100%; width:0;
  background:repeating-linear-gradient(90deg,#000082 0 8px,#1084d0 8px 12px);
  transition:width .12s;
}
.dl-stats{ display:flex; justify-content:space-between; font-size:11px; margin-top:5px; }
.dl-status{ font-size:11px; margin-top:6px; color:#222; min-height:15px; }
.dl-noise-layer{ position:absolute; inset:0; pointer-events:none; }
.dl-noise{
  position:absolute; pointer-events:auto; cursor:pointer;
  font-family:"MS Gothic",monospace; font-size:26px; color:#000;
  background:rgba(255,255,255,.0); border:none; text-shadow:0 0 3px #fff;
  animation:noiseFlick .12s infinite;
}
@keyframes noiseFlick{ 50%{ opacity:.55; transform:translate(1px,-1px); } }
.dl-noise.missed{ color:var(--bad); }
.dl-hint{ font-size:11px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.6); }
.dl-ad{ position:absolute; pointer-events:auto; width:130px; background:#fff; border:2px outset #d0d0d0; box-shadow:2px 2px 6px rgba(0,0,0,.4); font-size:10px; }
.dl-ad-bar{ display:flex; justify-content:space-between; align-items:center; background:linear-gradient(90deg,#7a0000,#c04040); color:#fff; padding:1px 3px; font-size:9px; }
.dl-ad-x{ background:#d0d0d0; border:1px outset #eee; font-size:9px; cursor:pointer; line-height:1; padding:0 3px; }
.dl-ad-body{ padding:8px 6px; text-align:center; color:#a00; font-weight:bold; line-height:1.4; animation:adBlink .7s steps(2) infinite; }
@keyframes adBlink{ 50%{ color:#00a; } }
.dl-cap{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); pointer-events:auto; background:#1a1a1a; color:#ffb84d; border:2px solid #ffb84d; padding:10px 14px; text-align:center; font-size:12px; display:flex; flex-direction:column; gap:8px; box-shadow:0 4px 16px rgba(0,0,0,.6); }

/* ---------- result ---------- */
.res-window{ width:min(420px,100%); }
.res-file{ display:flex; gap:12px; align-items:center; background:var(--paper); border:2px solid; padding:10px; margin-bottom:10px; }
.res-file-icon{ font-size:36px; }
.res-file-name{ font-weight:bold; font-size:14px; word-break:break-all; }
.res-file-rar{ font-size:12px; font-weight:bold; }
.res-file-size{ font-size:11px; color:#555; }
.res-warn{ font-size:12px; color:#b02a2a; background:#ffecec; border:1px solid #e0a0a0; padding:6px; margin-bottom:8px; }
.res-earn{ font-size:15px; margin:6px 0; }
.res-earn b{ color:#1a7d1a; }
.res-money{ font-size:12px; margin-bottom:8px; }
.res-hint{ font-size:12px; background:#fffbe0; border:1px solid #d8c870; padding:6px; margin-bottom:8px; }
.res-actions{ display:flex; flex-direction:column; gap:6px; }
.res-choices{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.res-ok{ font-size:12px; color:#1a6a2a; background:#e8f4e8; border:1px solid #a8c8a8; padding:6px; margin:4px 0; }
.res-chain{ font-size:12px; color:#444; background:#fffbe0; border:1px dashed #c8b860; padding:8px; margin:6px 0; line-height:1.6; }
.res-unpack-row{ font-size:11px; display:flex; justify-content:space-between; padding:2px 4px; border-bottom:1px dotted #c8c4b8; }
.res-unpack-row b{ color:#1a7d1a; }
.hs-infected{ color:#d06aff; font-weight:bold; animation:heatBlink .7s steps(2) infinite; }
.res-haggle-info{ font-size:12px; margin:4px 0; }
.haggle{ background:#1a1a1a; color:#dcd; border:1px solid #555; padding:10px; margin:6px 0; }
.haggle-line{ font-size:12px; margin-bottom:8px; }
.haggle-row{ display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:8px; }
.haggle-row input{ flex:1; }
.haggle-msg{ font-size:11px; color:#e0a53a; min-height:14px; margin-top:6px; }
.dex-upbar{ font-size:11px; background:#000; color:#5adc8c; border:2px inset #2a2a2a; padding:6px 8px; margin-bottom:6px; }
.dex-upbar b{ color:#fff; }
.dex-upbar-note{ display:block; color:#5a8c6c; margin-top:2px; }
.dex-up{ font-family:inherit; font-size:9px; cursor:pointer; background:#dcdcd4; border:1px solid #999; padding:2px 5px; flex-shrink:0; }
.dex-up.on{ background:#3a9ce0; color:#fff; border-color:#1a6ab0; }
.desk-upstat{ align-items:center; }
.desk-up-collect{ font-size:10px; padding:2px 6px; margin-left:6px; }

/* ---------- no carrier ---------- */
#noCarrierScreen{ background:#120404; }
.nc-inner{ text-align:center; font-family:"MS Gothic",monospace; }
.nc-big{ font-size:min(13vw,58px); color:#ff4444; letter-spacing:6px; text-shadow:0 0 20px rgba(255,60,60,.6); animation:ncBlink 1.2s steps(2) 2; }
@keyframes ncBlink{ 50%{ opacity:.3; } }
.nc-reason{ color:#ffb0b0; font-size:14px; margin:14px 0 22px; }
.nc-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.nc-tip{ margin-top:26px; font-size:12px; color:#c98; }

/* ---------- upgrade ---------- */
.up-window{ width:min(600px,100%); max-height:92%; display:flex; flex-direction:column; }
.up-body{ overflow:auto; }
.up-money{ font-size:13px; margin-bottom:8px; }
.up-money b{ color:#000082; }
.up-tabs{ display:flex; gap:4px; margin-bottom:10px; }
.up-tab{ font-family:inherit; font-size:12px; cursor:pointer; background:var(--win-face-d); color:#000; border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi); padding:5px 12px; }
.up-tab.active{ background:var(--win-face); font-weight:bold; border-bottom-color:var(--win-face); }
.up-current,.up-next{ background:var(--paper); border:2px inset #8a8e94; padding:10px; margin-bottom:8px; }
.up-cur-label,.up-next-label{ font-size:10px; color:#666; text-transform:uppercase; letter-spacing:1px; }
.up-cur-name,.up-next-name{ font-weight:bold; font-size:15px; color:#000082; }
.up-cur-sub,.up-next-sub{ font-size:12px; color:#444; margin:2px 0; }
.up-cur-meta,.up-next-meta{ font-size:11px; color:#666; }
.up-next.locked{ opacity:.7; }
.up-next .buy{ margin-top:8px; width:100%; }
.up-owned{ background:var(--paper); border:2px inset #8a8e94; padding:8px; margin-bottom:8px; }
.up-owned-label{ font-size:10px; color:#666; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.up-owned-list{ display:flex; flex-direction:column; gap:3px; max-height:170px; overflow:auto; }
.up-owned-item{ display:flex; align-items:center; gap:8px; font-family:inherit; font-size:12px; text-align:left; cursor:pointer;
  background:#dcdcd4; border:1px solid #b7b3a4; padding:4px 6px; }
.up-owned-item.active{ background:#fffbe0; border-color:#000082; font-weight:bold; cursor:default; }
.up-owned-item:hover:not(.active){ background:#fff; }
.up-owned-name{ flex:1; }
.up-owned-era{ color:#888; font-size:10px; }
.up-owned-use{ font-size:10px; color:#1a7d1a; font-weight:bold; }
.up-owned-use.dim{ color:#888; }
.up-roadmap-label{ font-size:10px; color:#666; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.up-roadmap{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.up-road-item{ display:flex; align-items:center; gap:8px; font-size:11px; padding:3px 4px; }
.up-road-item.past{ opacity:.5; }
.up-road-item.now{ background:#fffbe0; font-weight:bold; }
.up-road-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.up-road-name{ flex:1; }
.up-road-era{ color:#888; }
.up-aux-list{ display:flex; flex-direction:column; gap:8px; }
.up-aux{ display:flex; gap:10px; align-items:center; background:var(--paper); border:2px inset #8a8e94; padding:8px 10px; }
.up-aux.maxed{ opacity:.7; }
.up-aux-icon{ font-size:24px; }
.up-aux-main{ flex:1; }
.up-aux-name{ font-weight:bold; font-size:13px; }
.up-aux-lv{ font-weight:normal; color:#666; font-size:11px; }
.up-aux-desc{ font-size:11px; color:#444; margin:2px 0 4px; }
.up-aux-pips{ display:flex; gap:3px; }
.up-aux-pips span{ width:14px; height:8px; background:#b7bbc0; border:1px solid #8a8e94; }
.up-aux-pips span.on{ background:#3a9ce0; }
.up-aux-maxed{ font-weight:bold; color:#1a7d1a; font-size:12px; }

/* ---------- modals ---------- */
.modal-layer{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:200; padding:16px; }
.modal-layer.active{ display:flex; }
.modal{ display:none; width:min(560px,100%); max-height:88vh; }
.modal.active{ display:block; }
.modal-win{ display:flex; flex-direction:column; max-height:88vh; }
.modal-scroll{ overflow:auto; max-height:64vh; }
.modal-foot{ font-size:11px; color:#555; margin-top:8px; }
.changelog-title{ font-weight:bold; margin-bottom:6px; }
.changelog-item{ font-size:12px; line-height:1.6; }
.ach-summary{ font-size:13px; margin-bottom:8px; }
.ach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:6px; }
.ach-item{ background:#d7dade; border:2px inset #8a8e94; padding:6px 8px; opacity:.6; }
.ach-item.done{ background:#e0f0e0; opacity:1; }
.ach-item-name{ font-weight:bold; font-size:12px; }
.ach-item-desc{ font-size:10px; color:#444; margin-top:2px; }

/* ---------- toasts / banners ---------- */
.toast-layer{ position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; z-index:300; }
.ach-toast{
  background:#0d2c17; border:1px solid var(--amber); color:#fff;
  padding:10px 14px; width:240px; transform:translateX(300px); opacity:0; transition:.35s;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.ach-toast.show{ transform:translateX(0); opacity:1; }
.ach-toast-hd{ font-size:10px; color:var(--amber); letter-spacing:1px; }
.ach-toast-name{ font-weight:bold; font-size:13px; margin:2px 0; }
.ach-toast-desc{ font-size:11px; color:#bcd; }
.banner-layer{ position:fixed; left:50%; top:14px; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; z-index:300; width:min(440px,92%); }
.ui-banner{
  background:#07220f; border:1px solid #2a6c40; color:#dfffe8;
  padding:10px 14px; font-size:12px; text-align:center;
  transform:translateY(-24px); opacity:0; transition:.35s;
}
.ui-banner.show{ transform:translateY(0); opacity:1; }
.ui-banner.good{ border-color:var(--amber); color:#fff; }
.ui-banner.info{ border-color:#3a9ce0; }

/* ---------- file dex ---------- */
.dex-summary{ display:flex; gap:14px; align-items:center; background:var(--paper); border:2px inset #8a8e94; padding:10px; margin-bottom:8px; flex-wrap:wrap; }
.dex-pct-wrap{ text-align:center; flex-shrink:0; }
.dex-pct{ font-size:30px; font-weight:bold; color:#000082; line-height:1; }
.dex-pct small{ font-size:14px; }
.dex-pct-sub{ font-size:11px; color:#555; margin-top:2px; }
.dex-bars{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:3px; }
.dex-bar-row{ display:flex; align-items:center; gap:6px; font-size:10px; }
.dex-bar-row > span:first-child{ width:52px; flex-shrink:0; font-weight:bold; }
.dex-bar-row > span:last-child{ width:38px; text-align:right; flex-shrink:0; color:#555; }
.dex-bar{ flex:1; height:9px; background:#b7bbc0; border:1px solid #8a8e94; }
.dex-bar-fill{ height:100%; }
.dex-total{ font-size:12px; margin-bottom:10px; }
.dex-total b{ color:#000082; }
.dex-era{ margin-bottom:12px; }
.dex-era-head{ display:flex; justify-content:space-between; font-size:12px; font-weight:bold; color:#000082; border-bottom:2px solid #000082; padding-bottom:2px; margin-bottom:5px; }
.dex-card{ display:flex; align-items:center; gap:9px; background:#e9e6da; border:1px solid #b7b3a4; padding:5px 8px; margin-bottom:3px; }
.dex-card.dex-undiscovered{ opacity:.5; background:#dcdcd4; }
.dex-card.dex-locked{ opacity:.7; background:#d7d3c7; font-style:italic; }
.dex-icon{ font-size:18px; flex-shrink:0; }
.dex-info{ flex:1; min-width:0; }
.dex-name{ font-size:12px; font-weight:bold; word-break:break-all; }
.dex-meta{ font-size:10px; color:#666; }
.dex-count{ font-size:12px; font-weight:bold; color:#1a7d1a; flex-shrink:0; }
.dex-card.dex-undiscovered .dex-count{ color:#999; font-weight:normal; }

/* ---------- tutorial ---------- */
.tutorial-layer{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:400; padding:16px; }
.tutorial-layer.active{ display:flex; }
.tut-win{ width:min(460px,100%); }
.tut-body{ position:relative; text-align:center; }
.tut-icon{ font-size:44px; margin-bottom:4px; }
.tut-title{ font-size:16px; color:#000082; margin-bottom:10px; }
.tut-text{ font-size:13px; line-height:1.8; color:#1a1a1a; text-align:left; min-height:120px; }
.tut-text b{ color:#000082; }
.tut-steps{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:8px 0; }
.tut-steps span{ background:#000082; color:#fff; font-size:11px; padding:3px 8px; }
.tut-dots{ display:flex; gap:5px; justify-content:center; margin:12px 0 10px; }
.tut-dots span{ width:8px; height:8px; border-radius:50%; background:#a7abb0; }
.tut-dots span.on{ background:#000082; }
.tut-nav{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tut-count{ font-size:12px; color:#555; }
.tut-skip{ position:absolute; top:8px; right:8px; font-family:inherit; font-size:11px; background:none; border:none; color:#555; cursor:pointer; text-decoration:underline; }

/* ---------- coach hint ---------- */
.coach-layer{ position:fixed; left:50%; top:12px; transform:translateX(-50%); width:min(500px,94%); z-index:250; display:flex; flex-direction:column; gap:6px; }
.coach{
  display:flex; align-items:center; gap:10px;
  background:#3a2c0d; border:1px solid var(--amber); color:#fff;
  padding:10px 12px; font-size:12px; line-height:1.5;
  transform:translateY(-24px); opacity:0; transition:.35s;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.coach.show{ transform:translateY(0); opacity:1; }
.coach-tag{ background:var(--amber); color:#000; font-weight:bold; font-size:10px; padding:2px 5px; flex-shrink:0; }
.coach-text{ flex:1; }
.coach-x{ font-family:inherit; font-size:11px; cursor:pointer; background:#0d2c17; color:var(--crt-green); border:1px solid #2a6c40; padding:4px 10px; flex-shrink:0; }

/* ---------- 通話料 / 発熱 HUD ---------- */
.hs-conn, .dl-conn{ display:flex; gap:8px; font-size:11px; align-items:center; }
.hud-bill{ color:#ffd08a; }
.hud-teleho{ color:#8adca0; }
.hud-heat{ color:#9fd; }
.hud-heat.hot{ color:#ff8a6a; font-weight:bold; animation:heatBlink .8s steps(2) infinite; }
@keyframes heatBlink{ 50%{ opacity:.5; } }
.dl-conn{ color:#000; }
.dl-conn .hud-bill{ color:#8a2a00; }
.dl-conn .hud-teleho{ color:#1a6a2a; }
.dl-conn .hud-heat{ color:#333; }

.heat-gauge{ display:inline-block; width:90px; height:10px; background:#0a2a16; border:1px solid #1c5c30; vertical-align:middle; }
.desk-stat .heat-gauge{ background:#9aa; border:1px solid #778; }
.heat-fill{ display:block; height:100%; width:0; background:#3ac06a; transition:width .5s, background .5s; }

.desk-ticker{ width:min(360px,100%); margin-top:6px; overflow:hidden; background:#000; border:2px inset #2a2a2a; height:22px; }
.desk-ticker-in{ white-space:nowrap; color:#5adc8c; font-size:11px; line-height:22px; font-family:"MS Gothic",monospace;
  display:inline-block; padding-left:100%; animation:ticker 40s linear infinite; }
@keyframes ticker{ to{ transform:translateX(-100%); } }

.res-bill{ font-size:13px; margin:2px 0 4px; }
.res-bill b{ color:#b02a2a; }
.res-net{ font-size:11px; color:#555; }
.res-bill.res-teleho{ color:#1a7d1a; font-size:12px; }

.dl-appliances{ min-height:16px; font-size:11px; margin-top:4px; }
.appl.warn{ color:#a06000; }
.appl.active{ color:#c00; font-weight:bold; animation:heatBlink .5s steps(2) infinite; }
.dl-radio{ min-height:15px; font-size:11px; color:#456; font-style:italic; margin-top:2px; }

.dl-event{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:20; }
.dl-event[hidden]{ display:none; }
.dl-event-box{ background:var(--win-face); border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  padding:14px; text-align:center; max-width:260px; box-shadow:3px 3px 12px rgba(0,0,0,.5); }
.dl-event-box.ups{ background:#1a1a1a; color:#ffb84d; border-color:#ffb84d; }
.dl-event-t{ font-weight:bold; font-size:14px; margin-bottom:6px; }
.dl-event-m{ font-size:12px; margin-bottom:10px; }
.dl-event-btns{ display:flex; gap:8px; justify-content:center; }
.ups-bar{ height:8px; background:#333; margin-top:10px; }
.ups-fill{ height:100%; width:100%; background:#ffb84d; transition:width .05s linear; }
#downloadScreen.dl-blackout{ filter:brightness(.08); transition:filter .1s; }

/* ---------- PC: start menu / DOS / BSOD / screensaver ---------- */
.pc-layer{ position:fixed; inset:0; z-index:500; display:none; }
.pc-layer.active{ display:block; }

.start-backdrop{ position:absolute; inset:0; }
.start-menu{ position:absolute; left:4px; bottom:38px; display:flex; background:var(--win-face);
  border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  box-shadow:2px 2px 8px rgba(0,0,0,.5); font-size:13px; color:#000; }
.start-rail{ width:26px; background:linear-gradient(#000082,#3a3a8a); color:#c8c8d8; font-weight:bold;
  writing-mode:vertical-rl; text-orientation:mixed; text-align:right; padding:8px 4px; letter-spacing:2px; font-size:12px; }
.start-items{ padding:3px; min-width:210px; }
.start-item{ position:relative; padding:7px 22px 7px 10px; cursor:pointer; white-space:nowrap; }
.start-item:hover{ background:var(--win-navy); color:#fff; }
.start-item.has-sub > .sub-arrow{ position:absolute; right:6px; }
.start-sub{ display:none; position:absolute; left:100%; top:0; background:var(--win-face); color:#000;
  border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  box-shadow:2px 2px 8px rgba(0,0,0,.5); padding:3px; min-width:170px; }
.start-item.has-sub:hover > .start-sub{ display:block; }
.start-sep{ height:2px; margin:3px 2px; border-top:1px solid var(--win-shadow); border-bottom:1px solid var(--win-hi); }

.ctx-menu{ position:absolute; background:var(--win-face); border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  box-shadow:2px 2px 8px rgba(0,0,0,.5); min-width:170px; padding:3px; font-size:12px; color:#000; }
.props-win, .chat-win{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(340px,92vw); background:var(--win-face); border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  box-shadow:3px 3px 14px rgba(0,0,0,.6); color:#000; }
.props-body{ padding:12px; }
.props-section{ margin-bottom:10px; font-size:12px; }
.props-section b{ display:block; margin-bottom:4px; }
.props-section select{ width:100%; font-family:inherit; font-size:12px; }
.props-swatches{ display:flex; gap:6px; }
.props-sw{ width:28px; height:20px; border:2px solid #888; cursor:pointer; }
.props-sw.on{ border-color:#000082; box-shadow:0 0 0 1px #fff inset; }
.props-radios label{ display:block; font-size:12px; margin:2px 0; }
#propsOk{ width:100%; margin-top:4px; }
.chat-win{ width:min(420px,94vw); height:min(360px,80vh); display:flex; flex-direction:column; }
.chat-body{ flex:1; overflow:auto; background:#fff; border:1px inset #888; padding:6px; font-size:12px; font-family:"MS Gothic",monospace; }
.chat-msg{ margin-bottom:3px; line-height:1.5; }
.chat-msg b{ color:#000082; }
.chat-msg.me b{ color:#1a7d1a; }
.chat-dial{ background:#3a2c0d; color:#ffb84d; padding:0 4px; font-weight:bold; }
.chat-input-row{ display:flex; align-items:center; gap:4px; padding:4px; font-size:12px; font-family:"MS Gothic",monospace; }
.chat-input{ flex:1; font-family:inherit; font-size:12px; }
.dial-prefix{ font-size:10px; color:#7fbf95; margin-left:6px; }
.dial-memo{ margin-top:8px; font-size:11px; color:#9fdfb2; }
.dial-memo-chip{ font-family:inherit; font-size:11px; cursor:pointer; background:#3a2c0d; color:var(--amber); border:1px solid #7a5c20; padding:2px 6px; }
.route-skip{ display:block; font-size:11px; margin:8px 0; color:#333; }
.hs-route{ color:var(--amber); }
.salv{ background:#1a1a1a; color:#dcd; border:1px solid #555; padding:10px; margin:6px 0; }
.salv-t{ font-size:11px; margin-bottom:8px; }
.salv-bits{ display:flex; gap:4px; justify-content:center; margin-bottom:8px; }
.salv-bit{ width:26px; height:30px; font-family:"MS Gothic",monospace; font-size:15px; font-weight:bold;
  background:#0d2c17; color:var(--crt-green); border:1px solid #2a6c40; cursor:pointer; }
.salv-bit.wrong{ background:#4a0d0d; color:#ff8a8a; border-color:#8a2020; }
.trash-win{ width:min(360px,92vw); }
.trash-body{ padding:10px; }
.trash-empty{ font-size:12px; color:#555; text-align:center; padding:10px; }
.trash-row{ display:flex; justify-content:space-between; align-items:center; font-size:11px; padding:4px 0; border-bottom:1px dotted #b7b3a4; }
.trash-name{ word-break:break-all; flex:1; }
.trash-empty-btn{ width:100%; margin-top:8px; }
.dex-trash{ font-family:inherit; font-size:10px; cursor:pointer; background:#dcdcd4; border:1px solid #999; padding:2px 4px; flex-shrink:0; }
.dl-phantom{ position:absolute; left:8%; right:8%; top:30%; background:#1a1a1a; border:1px solid #7a2020; padding:8px; text-align:center; pointer-events:auto; }
.ph-label{ color:#ff6a6a; font-weight:bold; font-size:12px; }
.ph-track{ height:12px; background:#333; margin:6px 0; }
.ph-bar{ height:100%; width:0; background:#ff4444; transition:width .1s; }
.ph-taunt{ font-size:11px; }
.y2k-scr{ position:absolute; inset:0; background:#000; color:#0f0; font-family:"MS Gothic",monospace; display:flex; align-items:center; justify-content:center; }
.y2k-inner{ max-width:480px; text-align:center; }
.y2k-head{ color:#ff0; font-weight:bold; margin-bottom:14px; letter-spacing:2px; }
.y2k-body{ font-size:13px; line-height:1.8; margin-bottom:16px; }
.y2k-count{ font-size:40px; color:#f00; font-weight:bold; }
.y2k-field{ position:relative; height:140px; border:1px solid #0f0; }
.y2k-target{ position:absolute; font-family:inherit; font-size:13px; cursor:pointer; background:#003300; color:#0f0; border:1px solid #0f0; padding:6px 10px; }
.ch-win{ width:min(400px,94vw); max-height:88vh; }
.ch-body{ padding:12px; overflow:auto; }
.ch-lead{ font-size:11px; color:#444; margin-bottom:10px; }
.ch-item{ background:var(--paper); border:2px inset #8a8e94; padding:8px; margin-bottom:8px; }
.ch-name{ font-weight:bold; font-size:13px; color:#000082; }
.ch-best{ font-weight:normal; font-size:10px; color:#1a7d1a; }
.ch-desc{ font-size:11px; color:#444; margin:4px 0 6px; }
.ch-item button{ width:100%; }
.ch-warn{ font-size:12px; background:#fff0e0; border:1px solid #d8a870; padding:8px; }
.ch-hud{ width:min(360px,100%); }
.ch-hud-time{ font-family:"MS Gothic",monospace; font-size:22px; color:#000082; margin:4px 0; }
.br-win{ width:min(460px,94vw); height:min(420px,84vh); display:flex; flex-direction:column; }
.br-addr{ font-size:10px; background:#fff; border:1px inset #888; padding:3px 6px; color:#00f; white-space:nowrap; overflow:hidden; }
.br-page{ flex:1; overflow:auto; background:#fff; padding:12px; font-size:13px; line-height:1.7; color:#000; font-family:"MS PGothic",serif; }
.br-page h3{ color:#000082; border-bottom:2px solid #000082; margin-bottom:8px; }
.br-links{ display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.br-link{ font-family:inherit; font-size:12px; text-align:left; background:none; border:none; color:#00e; text-decoration:underline; cursor:pointer; padding:2px 0; }
.br-dl{ color:#1a7d1a; font-weight:bold; }
.br-status{ font-size:10px; background:#c0c0c0; border-top:1px solid #888; padding:3px 6px; color:#333; }

.app-win{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--win-face); border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  box-shadow:3px 3px 14px rgba(0,0,0,.6); color:#000; max-width:94vw; max-height:90vh; overflow:auto; }
.ms-top{ display:flex; justify-content:space-between; align-items:center; padding:6px; background:#c0c0c0; border-bottom:1px solid #888; }
.ms-count{ font-family:"MS Gothic",monospace; background:#000; color:#f00; padding:2px 6px; font-weight:bold; }
.ms-face{ font-size:18px; border:2px outset #ddd; background:#c0c0c0; cursor:pointer; padding:1px 4px; }
.ms-grid{ display:grid; gap:0; padding:6px; }
.ms-cell{ width:24px; height:24px; font-size:13px; font-weight:bold; font-family:"MS Gothic",monospace;
  border:2px outset #d8d8d8; background:#c0c0c0; cursor:pointer; padding:0; line-height:1; }
.ms-cell.rev{ border:1px solid #999; background:#bdbdbd; cursor:default; }
.ms-cell.rev.mine{ background:#e0483a; }
.ms-cell.n1{ color:#0000ff; } .ms-cell.n2{ color:#008000; } .ms-cell.n3{ color:#ff0000; }
.ms-cell.n4{ color:#000080; } .ms-cell.n5{ color:#800000; } .ms-cell.n6{ color:#008080; }
.ms-msg{ text-align:center; padding:6px; font-weight:bold; }
.ms-msg.bad{ color:#c00; }
.mem-top{ padding:6px 8px; font-size:12px; }
.mem-grid{ display:grid; grid-template-columns:repeat(4,52px); gap:5px; padding:8px; }
.mem-card{ width:52px; height:52px; font-size:22px; cursor:pointer; background:#000082; color:#000082;
  border:2px outset #4a4ac0; }
.mem-card.up{ background:#fff; color:#000; }
.mem-card.done{ background:#c8f0c8; }
.paint-body{ padding:8px; }
.paint-canvas{ display:grid; gap:0; border:2px inset #888; background:#fff; width:max-content; cursor:crosshair; touch-action:none; }
.pt-px{ width:14px; height:14px; display:block; }
.paint-pal{ display:grid; grid-template-columns:repeat(8,22px); gap:2px; margin:8px 0; }
.pt-sw{ width:22px; height:22px; border:2px solid #888; cursor:pointer; padding:0; }
.pt-sw.on{ border-color:#000082; }
.paint-actions{ display:flex; gap:6px; }

.dos-win{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(600px,94vw); height:min(420px,80vh); display:flex; flex-direction:column;
  background:#000; border:2px solid; border-color:var(--win-hi) var(--win-shadow) var(--win-shadow) var(--win-hi);
  box-shadow:3px 3px 14px rgba(0,0,0,.6); }
.dos-screen{ flex:1; overflow:auto; padding:8px; font-family:"MS Gothic","Courier New",monospace;
  font-size:13px; line-height:1.45; color:#c8c8c8; white-space:pre-wrap; word-break:break-all; background:#000; }
.dos-inputline{ display:flex; align-items:center; gap:4px; padding:4px 8px; background:#000; font-family:"MS Gothic","Courier New",monospace; font-size:13px; color:#c8c8c8; }
.dos-prompt{ flex-shrink:0; }
.dos-input{ flex:1; background:#000; border:none; outline:none; color:#c8c8c8; font-family:inherit; font-size:13px; }

.bsod{ position:absolute; inset:0; background:#0000aa; color:#fff;
  font-family:"MS Gothic","Courier New",monospace; display:flex; align-items:center; justify-content:center; padding:24px; cursor:pointer; }
.bsod-inner{ max-width:640px; font-size:13px; line-height:1.7; }
.bsod-head{ background:#c8c8c8; color:#0000aa; display:inline-block; padding:0 8px; margin-bottom:14px; font-weight:bold; }
.bsod p{ margin-bottom:12px; }
.bsod-foot{ margin-top:20px; }

.screensaver{ position:fixed; inset:0; background:#000; z-index:450; overflow:hidden; }
.ss-logo{ position:absolute; font-family:"MS Gothic",monospace; font-size:28px; font-weight:bold; color:#5adc8c;
  text-shadow:0 0 12px currentColor; white-space:nowrap; will-change:transform; }
.ss-stars{ position:absolute; inset:0; background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),
  radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1px 1px at 40% 80%,#aaa,transparent),
  radial-gradient(1px 1px at 90% 20%,#fff,transparent),radial-gradient(1px 1px at 10% 70%,#ccc,transparent); }

.confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:600; overflow:hidden; }
.confetti-layer i{ position:absolute; top:-12px; width:8px; height:12px; animation:confFall linear forwards; }
@keyframes confFall{ to{ transform:translateY(105vh) rotate(720deg); opacity:.7; } }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .crt{ padding:0; }
  .crt-frame{ width:100%; height:100%; border-radius:0; box-shadow:none; }
  .desk-bg{ gap:16px; padding:14px 14px 44px; }
  .desk-icons{ flex-direction:row; flex-wrap:wrap; }
  .nego-wrap{ grid-template-columns:90px 1fr; }
  .hs-stage-head h2{ font-size:16px; }
  .dial-readout{ font-size:22px; }
}