/* ========== 全体 ========== */
:root{
  --fg:#cfe3ff; --dim:#7fa6d8; --line:rgba(90,175,255,.22);
  --panel:rgba(6,20,48,.82); --panel2:rgba(9,30,70,.6);
  --cyan:#49d5ff; --green:#6dffa8; --yellow:#ffd36b;
  --pink:#ff7ad9; --orange:#ffa759; --red:#ff6b7a;
  --mono:"Cascadia Mono","Consolas","DejaVu Sans Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#03102a;color:var(--fg);
  font-family:var(--mono);font-size:14px;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.spacer{flex:1}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(90,175,255,.25)}

/* 走査線＋周辺減光（ブラウン管ふう） */
#crt{position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.20) 0 1px,rgba(0,0,0,0) 1px 3px)}
#crt::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 240px rgba(0,0,0,.8)}

/* ========== フェーズ1: 背景ウィンドウ ========== */
#stage{position:fixed;inset:0;z-index:1;overflow:hidden;
  background:radial-gradient(130% 110% at 50% -10%,#1b63d8 0%,#0c3c90 38%,#06143c 78%,#030d26 100%)}
#stage::after{content:"";position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 4px)}
.win{position:absolute;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(4,16,44,.72);border:1px solid var(--line);
  box-shadow:0 18px 60px rgba(0,0,0,.55)}
.win .bar{display:flex;gap:12px;align-items:center;padding:5px 10px;font-size:11px;
  color:#a9cdfb;border-bottom:1px solid var(--line);background:rgba(12,46,104,.65)}
.win .bar .dot{width:9px;height:9px;border-radius:50%;background:#2e6fc9;box-shadow:0 0 8px #49d5ff}
.win pre{flex:1;margin:0;padding:6px 10px;font-size:11px;line-height:1.3;
  white-space:pre;overflow:hidden;color:#a7cbf5;opacity:.9}

/* ========== フェーズ1: パスワード ========== */
/* 背景のダミーウィンドウを暗く落として、入力欄を読みやすくする */
#lock{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(2,9,26,.68);backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.lock-box{width:min(780px,88vw);padding:34px 40px 28px;
  background:rgba(4,14,38,.72);border:1px solid rgba(124,192,255,.3);
  box-shadow:0 24px 80px rgba(0,0,0,.6)}
.lock-label{font-size:30px;font-weight:700;margin:0 0 12px;
  text-shadow:0 0 18px rgba(110,190,255,.9)}
#pw{display:flex;align-items:center;width:100%;height:62px;padding:0 18px;overflow:hidden;
  color:#eaf4ff;font:400 26px/1 var(--mono);white-space:nowrap;
  background:rgba(3,16,44,.55);border:2px solid #7cc0ff;
  box-shadow:0 0 30px rgba(70,160,255,.35) inset}
#pw-dots{letter-spacing:12px}
#pw .caret{width:13px;height:30px;margin:0 0 0 4px}
.lock-buttons{display:flex;gap:24px;justify-content:flex-end;margin-top:20px}
.lock-buttons button{background:none;border:none;cursor:pointer;color:#eaf4ff;
  font:700 22px var(--mono);text-shadow:0 0 14px rgba(110,190,255,.9)}
.lock-buttons button:hover{color:#fff}
.lock-hint{margin-top:16px;text-align:right;font-size:11px;color:rgba(190,220,255,.5)}
.shake{animation:shake .25s 2}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ========== フェーズ2: ブートログ ========== */
#boot{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  padding:10px 14px;background:#02091d}
#boot-log{flex:1;overflow:hidden;font-size:12px;line-height:1.28;white-space:pre;color:#8fd8ff}
#boot-log .ok{color:var(--green)}
#boot-log .warn{color:var(--yellow)}
#boot-log .err{color:var(--red)}
#boot-log .dim{color:#4d7fb8}
#boot-log .acc{color:var(--cyan)}
#boot-bar{height:4px;margin-top:8px;background:rgba(90,175,255,.15)}
#boot-bar i{display:block;height:100%;width:0;background:var(--cyan);
  box-shadow:0 0 14px var(--cyan);transition:width .12s linear}
#boot-hint{margin-top:6px;font-size:11px;color:#3f6ea6;text-align:right}

/* ========== フェーズ3: IDE ========== */
#ide{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#05173c,#030e26 60%,#02091c)}
.menubar{display:flex;align-items:center;gap:16px;height:30px;padding:0 12px;flex:none;
  font-size:12px;color:#a9cdfb;border-bottom:1px solid var(--line);background:rgba(8,28,66,.75)}
.menubar .logo{color:var(--cyan);text-shadow:0 0 10px var(--cyan)}
.menubar span:hover{color:#fff}
.mb-dim{color:#5d87bd;font-size:11px}

.panes{flex:1;display:grid;grid-template-columns:238px 1fr 300px;min-height:0}
.panel-title{padding:7px 12px;font-size:10px;letter-spacing:1.6px;color:#6f9ad0;
  border-bottom:1px solid var(--line);background:rgba(10,32,74,.5)}

/* 左: エクスプローラ */
.explorer{display:flex;flex-direction:column;min-height:0;
  border-right:1px solid var(--line);background:var(--panel)}
.tree{flex:1;overflow:auto;padding:4px 0;font-size:12.5px}
.tree .node{display:flex;align-items:center;gap:6px;padding:2px 10px;white-space:nowrap;cursor:default}
.tree .node:hover{background:rgba(70,150,255,.12)}
.tree .node.active{background:rgba(73,213,255,.18);color:#fff}
.tree .arrow{width:10px;color:#5d87bd}
.tree .ico{color:var(--cyan)}
.tree .ico.file{color:#7fa6d8}
.tree .ico.js{color:var(--yellow)}
.tree .ico.py{color:var(--green)}
.tree .ico.c{color:var(--pink)}
.timeline{height:150px;overflow:hidden;padding:6px 10px;font-size:11px;color:#6f9ad0}
.timeline div{padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline b{color:#9fc6f3;font-weight:400}

/* 中央 */
.center{display:flex;flex-direction:column;min-width:0;min-height:0}
.tabs{display:flex;flex:none;height:32px;border-bottom:1px solid var(--line);
  background:rgba(7,24,58,.7);font-size:12px}
.tabs span{display:flex;align-items:center;gap:8px;padding:0 14px;color:#7fa6d8;
  border-right:1px solid var(--line)}
.tabs span.active{color:#fff;background:rgba(14,48,110,.85);box-shadow:inset 0 -2px 0 var(--cyan)}
.editor{flex:1;min-height:0;overflow:auto;padding:8px 0 40px;background:rgba(3,13,34,.5)}
.editor.focus{box-shadow:inset 0 0 0 1px rgba(73,213,255,.3)}
.code{font-size:13px;line-height:1.5}
.row{display:flex}
.row .num{flex:none;width:56px;padding-right:14px;text-align:right;color:#3f6396;user-select:none}
.row .src{white-space:pre-wrap;word-break:break-word}
.caret{display:inline-block;width:8px;height:15px;margin-bottom:-3px;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* カーソルはフォーカスされている側だけ点滅させる（幅は残して文字がずれないように） */
.editor:not(.focus) .caret,
.terminal:not(.focus) .caret,
.atk-win:not(.focus) .caret{opacity:0;animation:none}

/* シンタックスハイライト */
.k{color:#78b4ff}.s{color:#ffb38a}.c{color:#4f7aab;font-style:italic}
.n{color:#b7f08a}.f{color:#ffd36b}.t{color:#6ee7e7}.pp{color:#ff9fd6}.o{color:#a9cdfb}

/* ターミナル */
.terminal{flex:none;height:36%;min-height:150px;display:flex;flex-direction:column;
  border-top:1px solid var(--line);background:rgba(2,10,28,.85)}
.terminal.focus{box-shadow:inset 0 0 0 1px rgba(73,213,255,.45)}
.term-tabs{display:flex;align-items:center;gap:18px;flex:none;padding:6px 14px;
  font-size:10.5px;letter-spacing:1.3px;color:#5d87bd;border-bottom:1px solid var(--line)}
.term-tabs .active{color:#fff;border-bottom:1px solid var(--cyan);padding-bottom:4px}
.term-body{flex:1;overflow:auto;padding:8px 14px;font-size:12.5px;line-height:1.45}
.term-body div{white-space:pre-wrap;word-break:break-word}
.t-prompt .u{color:var(--green)}
.t-prompt .p{color:var(--cyan)}
.t-prompt .cmd{color:#fff}
.t-out{color:#9fc6f3}
.t-ok{color:var(--green)}
.t-err{color:var(--red)}
.t-warn{color:var(--yellow)}
.t-acc{color:var(--cyan)}

/* 右: 監視パネル */
.side{display:flex;flex-direction:column;min-height:0;overflow:hidden;
  border-left:1px solid var(--line);background:var(--panel)}
.meters{padding:8px 12px;font-size:10.5px}
.meter{display:flex;align-items:center;gap:8px;margin:3px 0}
.meter .lb{width:58px;color:#6f9ad0}
.meter .bar{flex:1;height:7px;background:rgba(90,175,255,.12)}
.meter .bar i{display:block;height:100%;background:var(--green);box-shadow:0 0 8px var(--green);
  transition:width 1.1s ease-out,background .6s linear}
.meter .bar i.hot{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.meter .bar i.max{background:var(--red);box-shadow:0 0 8px var(--red)}
.meter .vv{width:38px;text-align:right;color:#9fc6f3}
#graph{width:100%;height:90px;display:block}
.folders{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px;padding:12px}
.folder{text-align:center;font-size:9.5px;color:#8fb7e6;overflow:hidden}
.folder .g{width:44px;height:32px;margin:0 auto 4px;border-radius:3px;
  background:linear-gradient(170deg,#7ff0ff,#2aa8e8);
  box-shadow:0 0 14px rgba(73,213,255,.55);position:relative}
.folder .g::before{content:"";position:absolute;top:-5px;left:3px;width:17px;height:6px;
  border-radius:3px 3px 0 0;background:#7ff0ff}
.proc{flex:1;overflow:hidden;padding:6px 12px;font-size:10.5px;color:#7fa6d8}
.proc div{display:flex;gap:8px;padding:1px 0}
.proc .pid{width:42px;color:#5d87bd}
.proc .nm{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.proc .cp{width:34px;text-align:right;color:var(--green)}

/* ステータスバー */
.statusbar{display:flex;align-items:center;gap:18px;flex:none;height:26px;padding:0 14px;
  font-size:11px;color:#a9cdfb;background:rgba(12,52,124,.9);border-top:1px solid var(--line)}
.st-accent{color:var(--green);text-shadow:0 0 10px rgba(109,255,168,.7)}

/* ========== サイバー攻撃マップ ==========
   背景色は world.webp の海の色に合わせてある（地図の縁が出ないように） */
#attack{position:fixed;inset:0;z-index:8000;background:#010d18;overflow:hidden}
#atk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.atk-top{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;
  gap:16px;padding:0 18px;font-size:12px;letter-spacing:1.4px;color:#9fc6f3;
  background:linear-gradient(180deg,rgba(1,13,24,.95),rgba(1,13,24,0))}
.atk-live{color:#ff4d5e;font-weight:700;text-shadow:0 0 12px rgba(255,77,94,.9);
  animation:blink 1.4s steps(1) infinite}
.atk-title{color:#fff;font-size:15px;font-weight:700;letter-spacing:2.6px;
  text-shadow:0 0 18px rgba(110,190,255,.8)}
.atk-sub{color:#5d87bd}

.atk-side{position:absolute;right:0;top:46px;width:318px;padding:12px 14px;
  background:linear-gradient(90deg,rgba(1,13,24,0),rgba(1,13,24,.9) 18%);font-size:11px}
.atk-big{margin-bottom:12px}
.atk-big .lb{display:block;font-size:9.5px;letter-spacing:2px;color:#6f9ad0}
.atk-big .vv{display:block;font-size:32px;font-weight:700;color:#fff;line-height:1.15;
  text-shadow:0 0 24px rgba(110,190,255,.85)}
.atk-kv{display:flex;justify-content:space-between;padding:3px 0;color:#6f9ad0;
  border-bottom:1px solid rgba(90,175,255,.12)}
.atk-kv b{color:#49d5ff;font-weight:400}
.atk-feedtitle{margin:14px 0 6px;font-size:9.5px;letter-spacing:2px;color:#6f9ad0}
.atk-feed{font-size:9.5px;line-height:1.8}
.atk-feed div{display:flex;gap:6px;white-space:nowrap;animation:slidein .25s ease-out}
.atk-feed .tm{color:#5d87bd}
.atk-feed .ip{color:#cfe3ff;width:84px}
.atk-feed .cc{color:#ffd36b;width:16px}
.atk-feed .ty{flex:1;overflow:hidden;text-overflow:ellipsis}
.atk-feed .st{color:#6dffa8}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}}

.atk-legend{position:absolute;left:18px;bottom:84px;font-size:10px;color:#9fc6f3;
  letter-spacing:.8px}
.atk-legend div{display:flex;align-items:center;gap:7px;padding:1.5px 0}
.atk-legend i{width:16px;height:2px;box-shadow:0 0 8px currentColor}
.atk-hint{position:absolute;right:18px;bottom:8px;font-size:10px;color:#3f6ea6}

/* ========== 発信元の追跡（F1） ========== */
#trace{position:fixed;inset:0;z-index:8000;overflow:hidden;
  background:radial-gradient(140% 130% at 50% 45%,#4fb7f2 0%,#2e95d8 34%,#1770bd 60%,#0d4e94 82%,#09396f 100%)}
#trace::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 3px)}
#trc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.trc-side{position:absolute;right:0;top:0;width:330px;padding:34px 14px 12px;font-size:11px;z-index:2;
  background:linear-gradient(90deg,rgba(3,22,54,0),rgba(3,22,54,.82) 16%)}
.trc-x{position:absolute;right:12px;top:10px;cursor:pointer;font-size:14px;color:#8dbde8;
  padding:2px 6px;line-height:1}
.trc-x:hover{color:#fff}
.trc-big{margin-bottom:12px}
.trc-big .lb{display:block;font-size:9.5px;letter-spacing:2px;color:#a9d4f6}
.trc-big .vv{display:block;font-size:32px;font-weight:700;color:#fff;line-height:1.15;
  text-shadow:0 0 24px rgba(255,255,255,.7)}
.trc-kv{display:flex;justify-content:space-between;padding:3px 0;color:#a9d4f6;
  border-bottom:1px solid rgba(255,255,255,.14)}
.trc-kv b{color:#9cf3ff;font-weight:400}
.trc-feedtitle{margin:14px 0 6px;font-size:9.5px;letter-spacing:2px;color:#a9d4f6}
.trc-feed{font-size:9.5px;line-height:1.85}
.trc-feed div{display:flex;gap:7px;white-space:nowrap;animation:slidein .25s ease-out}
.trc-feed .no{color:#7fb6e4;width:16px}
.trc-feed .ip{color:#fff;width:92px}
.trc-feed .ms{color:#9cf3ff;width:52px;text-align:right}
.trc-feed .as{flex:1;overflow:hidden;text-overflow:ellipsis;color:#a9d4f6}

/* 状態（SEARCHING / SIGNAL LOST / ROUTE LOCKED） */
.trc-state{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:2;
  padding:9px 26px 11px;font-size:17px;font-weight:700;letter-spacing:2.4px;
  color:#0d2a4e;background:#eaf6ff;border-radius:3px;
  box-shadow:0 10px 36px rgba(0,0,0,.45)}
.trc-state.bad{color:#fff;background:#e02b3c;box-shadow:0 10px 36px rgba(224,43,60,.5)}
.trc-state.ok{color:#06301d;background:#6dffa8;box-shadow:0 10px 36px rgba(109,255,168,.5)}

/* 特定できたときのアドレス */
.trc-result{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:3;
  min-width:min(1020px,74vw);padding:26px 56px 32px;text-align:center;
  background:linear-gradient(180deg,rgba(9,52,112,.97),rgba(6,36,84,.97));
  border:1px solid rgba(160,220,255,.4);box-shadow:0 24px 80px rgba(0,0,0,.55)}
.trc-result .lb{font-size:26px;font-weight:700;letter-spacing:1.6px;color:#dcefff;
  font-family:system-ui,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif}
.trc-result .vv{margin-top:10px;font-size:clamp(26px,2.6vw,46px);font-weight:800;color:#fff;letter-spacing:1px;
  text-shadow:0 0 26px rgba(160,230,255,.85);word-break:break-all;
  font-family:system-ui,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif}
.trc-result.pop{animation:trcpop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes trcpop{from{opacity:0;transform:translateX(-50%) scale(.9)}}

/* 見つけたあと、次の追跡を始めるボタン */
.trc-again{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:1.6px;cursor:pointer;
  color:#06301d;background:#6dffa8;border:0;border-radius:4px;padding:13px 34px 15px;
  box-shadow:0 10px 36px rgba(109,255,168,.45);animation:trcpop .42s cubic-bezier(.2,1.5,.4,1)}
.trc-again:hover{background:#a6ffcb}

.trc-hint{position:absolute;right:18px;bottom:8px;font-size:10px;color:#8dbde8;z-index:2}

/* 浮いているターミナル（地図画面・IDE画面どちらでも出せる） */
.atk-win{position:fixed;z-index:8500;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(2,10,30,.93);border:1px solid rgba(90,175,255,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.aw-grip{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
.aw-grip::after{content:"";position:absolute;right:3px;bottom:3px;width:9px;height:9px;
  border-right:2px solid rgba(90,175,255,.55);border-bottom:2px solid rgba(90,175,255,.55)}
.atk-win.focus .aw-grip::after{border-color:rgba(73,213,255,.9)}
.atk-win.focus{border-color:rgba(73,213,255,.75);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(73,213,255,.3)}
.aw-bar{display:flex;align-items:center;gap:10px;flex:none;padding:5px 10px;cursor:move;
  font-size:11px;color:#a9cdfb;background:rgba(12,46,104,.8);
  border-bottom:1px solid rgba(90,175,255,.22);user-select:none}
.aw-bar .dot{width:8px;height:8px;border-radius:50%;background:#2e6fc9;box-shadow:0 0 8px #49d5ff}
.atk-win.focus .aw-bar .dot{background:#6dffa8;box-shadow:0 0 10px #6dffa8}
.aw-x{cursor:pointer;color:#7fa6d8;padding:0 2px}
.aw-x:hover{color:#ff6b7a}
.aw-body{flex:1;overflow:auto;padding:7px 11px;font-size:11.5px;line-height:1.45}
.aw-body div{white-space:pre-wrap;word-break:break-word}
.aw-swap{cursor:pointer;color:#7fa6d8;padding:0 5px}
.aw-swap:hover{color:#fff}

/* 映像のポップアップ */
.vid-win .aw-body{padding:0;overflow:hidden;background:#000}
.vid-win iframe{display:block;width:100%;height:100%;border:0}
.aw-bar .dot.live{background:#ff4d5e;box-shadow:0 0 10px #ff4d5e;
  animation:blink 1.4s steps(1) infinite}
/* 窓を動かしている間は iframe にマウスを取られないようにする */
body.dragging iframe{pointer-events:none}

/* ========== 撮影モード ========== */
body.scene .atk-hint,
body.scene #st-hint{display:none}          /* 収録に写り込む案内を消す */
#scene-cue{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9500;
  padding:8px 20px;font-size:12px;letter-spacing:3px;color:var(--cyan);
  background:rgba(2,10,28,.85);border:1px solid rgba(73,213,255,.5)}
#scene-marker{position:fixed;inset:0;z-index:10000;background:#fff}  /* 2画面を合わせる目印 */

/* ========== オーバーレイ ========== */
#flash{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(2,8,24,.72)}
#flash span{font-size:min(9vw,110px);font-weight:700;letter-spacing:6px;
  padding:24px 54px;border:4px solid currentColor;animation:pop .18s ease-out}
#flash.granted span{color:var(--green);text-shadow:0 0 40px rgba(109,255,168,.9)}
#flash.denied span{color:var(--red);text-shadow:0 0 40px rgba(255,107,122,.9)}
@keyframes pop{from{transform:scale(.88);opacity:0}}

#help{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;
  background:rgba(2,8,24,.82)}
.help-box{position:relative;width:min(780px,92vw);padding:34px 42px 28px;
  background:rgba(6,24,58,.96);border:1px solid var(--cyan);
  box-shadow:0 0 60px rgba(73,213,255,.35)}
.help-box h2{margin:0 0 20px;font-size:19px;letter-spacing:3px;color:var(--cyan)}
.help-box ul{margin:0;padding-left:22px;font-size:14.5px;line-height:2.15}
.help-x{position:absolute;top:10px;right:16px;font-size:16px;line-height:1;
  color:#5d87bd;cursor:pointer;user-select:none;padding:4px 6px}
.help-x:hover{color:#ff6b7a}
.help-box b{color:#fff}
.help-foot{display:flex;align-items:center;justify-content:space-between;
  margin-top:20px;font-size:11px;color:#5d87bd}
.help-skip{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.help-skip:hover{color:#9fc6f3}
.help-skip i{position:relative;width:13px;height:13px;border:1px solid #5d87bd}
.help-skip.on i{border-color:var(--cyan);box-shadow:0 0 8px rgba(73,213,255,.6)}
.help-skip.on i::after{content:"";position:absolute;left:3px;top:0;width:4px;height:8px;
  border:solid var(--cyan);border-width:0 2px 2px 0;transform:rotate(45deg)}
.help-close{color:#5d87bd}