/* ============================================================
   IECS ARCADE — 資工系小遊戲
   風格：終端機 / CRT 螢光幕 / 電路板
   ============================================================ */

:root{
  /* 背景層 */
  --bg:        #060a0f;
  --bg-2:      #0a1016;
  --panel:     #0c141c;
  --panel-2:   #101b25;
  --line:      #1c2c3a;
  --line-2:    #2a4256;

  /* 文字 */
  --fg:        #cfdde9;
  --fg-dim:    #8aa2b5;
  --fg-faint:  #5b7287;

  /* 強調色（每款遊戲一個） */
  --green:     #39ff88;
  --cyan:      #38d9ff;
  --amber:     #ffc14d;
  --red:       #ff5f6d;
  --violet:    #b98bff;
  --pink:      #ff78c4;
  --lime:      #c6ff4d;

  --ok:        var(--green);
  --bad:       var(--red);

  /* 當前強調色，由 JS / 類別覆寫 */
  --accent:    var(--green);

  --radius:    4px;
  --radius-lg: 8px;
  --gap:       14px;

  --font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas,
               "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", monospace;

  --shadow:    0 10px 30px -12px rgba(0,0,0,.8);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1.6;
  display:flex;
  flex-direction:column;
  min-height:100%;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

/* 背景電路網格 + 暈影 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% -15%, #0d2030 0%, transparent 70%),
    linear-gradient(transparent 95%, rgba(57,255,136,.045) 95%) 0 0/100% 34px,
    linear-gradient(90deg, transparent 95%, rgba(56,217,255,.035) 95%) 0 0/34px 100%,
    var(--bg);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.65) 100%);
}

#bgfx{ position:fixed; inset:0; z-index:-1; width:100%; height:100%; opacity:.5; pointer-events:none; }

/* CRT 掃描線 */
#crt{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
html[data-scanline="off"] #crt{ display:none; }
html[data-motion="off"] #bgfx{ display:none; }

::selection{ background:color-mix(in srgb, var(--accent) 35%, transparent); }

a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===================== 頂列 ===================== */
.topbar{
  position:sticky; top:0; z-index:300;
  display:flex; align-items:center; gap:12px;
  padding:9px clamp(10px,2.5vw,22px);
  background:linear-gradient(180deg, rgba(6,10,15,.96), rgba(6,10,15,.78));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; color:inherit; flex:0 0 auto; }
.brand:hover{ text-decoration:none; }
.brand-mark{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:var(--radius);
  background:#09130d; color:var(--green);
  border:1px solid color-mix(in srgb, var(--green) 45%, transparent);
  font-weight:700; font-size:15px;
  box-shadow:0 0 16px -6px var(--green) inset, 0 0 12px -6px var(--green);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text b{ font-size:15px; letter-spacing:.14em; color:var(--green); }
.brand-text small{ font-size:11px; color:var(--fg-faint); letter-spacing:.06em; }

/* 導覽列：只留少數常用連結，遊戲收進下拉面板 → 任何寬度都不會溢出 */
.nav{
  display:flex; gap:4px; margin-left:8px;
  flex:1 1 auto; min-width:0; align-items:center;
}
.navlink{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px; border-radius:var(--radius);
  color:var(--fg-dim); font-size:13.5px; letter-spacing:.04em;
  border:1px solid transparent; white-space:nowrap;
  background:transparent; font-family:inherit; cursor:pointer;
}
.navlink:hover{ color:#fff; background:var(--panel); text-decoration:none; }
.navlink[aria-current="page"], .navlink--now{
  color:var(--green); border-color:color-mix(in srgb, var(--green) 40%, transparent);
  background:#0a1510;
}
.navbtn .caret{ font-style:normal; font-size:10px; opacity:.7; transition:transform .15s; }
.navbtn[aria-expanded="true"]{ color:#fff; background:var(--panel-2); border-color:var(--line-2); }
.navbtn[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.navbtn-label{ max-width:11ch; overflow:hidden; text-overflow:ellipsis; }

/* 下拉／漢堡共用的面板 */
/* 權重要壓過後面的 .iconbtn{display:grid}，所以用兩個 class */
.iconbtn.navham{ display:none; }
.navpanel{
  position:absolute; z-index:400;
  top:calc(100% + 6px); right:clamp(10px,2.5vw,22px);
  width:min(560px, calc(100vw - 24px));
  max-height:min(76vh, 640px); overflow-y:auto;
  padding:14px;
  background:var(--panel); border:1px solid var(--line-2);
  border-top:2px solid var(--green);
  border-radius:var(--radius-lg); box-shadow:0 24px 60px -24px rgba(0,0,0,.95);
  animation:navin .14s ease-out;
}
@keyframes navin{ from{ opacity:0; transform:translateY(-8px); } }
.navpanel-head{
  font-size:11px; letter-spacing:.2em; color:var(--fg-faint);
  margin:2px 0 8px; text-transform:uppercase;
}
.navpanel-head + .navpanel-links,
.navpanel-grid + .navpanel-head{ margin-top:14px; }
.navpanel-grid{
  display:grid; gap:6px;
  grid-template-columns:repeat(auto-fill, minmax(168px, 1fr));
}
.navitem{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--radius);
  border:1px solid transparent; color:inherit;
}
.navitem:hover{
  text-decoration:none; background:var(--panel-2);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
.navitem--now{
  background:color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
}
.navitem-ic{
  flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center;
  border-radius:var(--radius); font-size:13px; font-weight:700; letter-spacing:-.03em;
  background:color-mix(in srgb, var(--accent) 16%, #0a1218);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color:var(--accent);
}
.navitem-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.navitem-txt b{ font-size:13.5px; color:#fff; }
.navitem-txt span{ font-size:11px; color:var(--fg-faint); }
.navpanel-links{ display:flex; flex-wrap:wrap; gap:6px; }

.topright{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.chip{
  display:flex; align-items:baseline; gap:7px;
  padding:5px 11px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line-2);
  font-size:12px; color:var(--fg-dim);
}
.chip:hover{ text-decoration:none; border-color:var(--accent); }
.chip b{ font-size:14px; color:var(--amber); }
.iconbtn{
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--panel); color:var(--fg-dim);
  border:1px solid var(--line-2); border-radius:var(--radius);
  cursor:pointer; font-size:15px; font-family:inherit;
}
.iconbtn:hover{ color:var(--green); border-color:var(--green); }
.iconbtn[aria-pressed="false"]{ color:var(--fg-faint); opacity:.55; }

/* ===================== 版面 ===================== */
.view{
  flex:1 1 auto; width:100%;
  max-width:1180px; margin:0 auto;
  padding:clamp(16px,3vw,30px) clamp(12px,3vw,24px) 40px;
}
.foot{
  padding:14px 18px 20px; text-align:center;
  color:var(--fg-faint); font-size:12px;
  border-top:1px solid var(--line);
}
.footsep{ margin:0 7px; opacity:.4; }

/* ===================== 元件 ===================== */
.panel{
  position:relative;
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(14px,2.2vw,22px);
  box-shadow:var(--shadow);
}
.panel--accent{ border-color:color-mix(in srgb, var(--accent) 32%, var(--line)); }
.panel > .corner{
  position:absolute; width:11px; height:11px;
  border:1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  pointer-events:none;
}
.panel > .corner.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.panel > .corner.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.panel > .corner.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.panel > .corner.br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:42px; padding:9px 18px;
  font-family:inherit; font-size:14px; letter-spacing:.05em;
  color:var(--fg); background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:var(--radius);
  cursor:pointer; transition:background .12s, border-color .12s, color .12s, transform .08s;
  user-select:none;
}
.btn:hover:not(:disabled){ border-color:var(--accent); color:#fff; background:#13222e; }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn--primary{
  background:color-mix(in srgb, var(--accent) 20%, #0b1319);
  border-color:var(--accent); color:#fff; font-weight:600;
  box-shadow:0 0 20px -8px var(--accent);
}
.btn--primary:hover:not(:disabled){ background:color-mix(in srgb, var(--accent) 34%, #0b1319); }
.btn--ghost{ background:transparent; }
.btn--lg{ min-height:54px; padding:13px 30px; font-size:16px; }
.btn--sm{ min-height:34px; padding:5px 12px; font-size:12.5px; }
.btn--danger:hover:not(:disabled){ border-color:var(--red); color:var(--red); }

.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.spread{ justify-content:space-between; }
.stack{ display:flex; flex-direction:column; gap:var(--gap); }
.center{ text-align:center; }
.muted{ color:var(--fg-dim); }
.faint{ color:var(--fg-faint); }
.nowrap{ white-space:nowrap; }
.hidden{ display:none !important; }
/* inert 的後備：舊瀏覽器至少擋掉滑鼠 */
[inert]{ pointer-events:none; user-select:none; }

/* ---------- 手機：連點不要縮放畫面 ----------
   二進位快打那種要連續快點的遊戲，瀏覽器會把連點當成
   「雙擊放大」，畫面整個跳掉。touch-action:manipulation
   只關掉雙擊縮放，兩指撥動的縮放仍然留著（無障礙需求）。 */
button, a, .bit, .bar, .cline, .node, .sw, .toggle, .gcard, .attract,
.my-btns .btn, .lg-canvas svg, .pk-canvas svg{
  touch-action:manipulation;
}
/* 整個遊戲區都不要雙擊縮放 —— 玩家連點空白處也會觸發 */
.gf-stage, .gf-top{ touch-action:manipulation; }
/* 遊戲控制項不要被長按選取、也不要跳出 iOS 的放大鏡 */
.bit, .bar, .my-btns .btn, .gcard, .lvdot, .statbox, .bin-target, .my-q{
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

.kicker{
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); margin:0 0 6px;
}
h1,h2,h3{ margin:0 0 10px; line-height:1.25; font-weight:700; }
h1{ font-size:clamp(24px,4.4vw,38px); letter-spacing:.02em; }
h2{ font-size:clamp(18px,2.6vw,24px); }
h3{ font-size:16px; }
p{ margin:0 0 10px; }

.tag{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11px; letter-spacing:.08em;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color:var(--accent);
}

.divider{ height:1px; background:var(--line); margin:16px 0; border:0; }

/* 終端機提示字 */
.prompt{ color:var(--green); }
.prompt::before{ content:"$ "; color:var(--fg-faint); }
.caret{
  display:inline-block; width:9px; height:1.05em; vertical-align:-2px;
  background:var(--green); animation:blink 1.05s steps(1) infinite; margin-left:3px;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ===================== 首頁 ===================== */
.hero{ margin-bottom:26px; }
.hero .term{
  background:#070d13; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
}
.term-bar{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; background:#0b141c; border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--fg-faint);
}
.term-dot{ width:10px; height:10px; border-radius:50%; background:#2a3b49; }
.term-dot.r{ background:#ff5f6d; } .term-dot.y{ background:#ffc14d; } .term-dot.g{ background:#39ff88; }
.term-body{ padding:clamp(18px,3.4vw,34px); }

/* 主標題：這是整個畫面第一眼要看到的東西 */
.term-body h1{
  font-size:clamp(34px,7.5vw,68px);
  letter-spacing:.06em;
  line-height:1.05;
  margin:6px 0 4px;
  color:#eaffe9;
  text-shadow:
    0 0 2px rgba(255,255,255,.9),
    0 0 14px rgba(57,255,136,.85),
    0 0 42px rgba(57,255,136,.45),
    0 0 90px rgba(57,255,136,.22);
}
/* 標題下的螢光底線，把視線往下帶到遊戲卡 */
.term-body h1 + .hero-sub::before{
  content:""; display:block;
  width:78px; height:3px; margin:0 0 12px;
  background:linear-gradient(90deg, var(--green), transparent);
  box-shadow:0 0 12px var(--green);
}
.hero-sub{
  color:#b9cdda; max-width:62ch;
  font-size:clamp(14px,1.9vw,17px);
}
.hero-stats{
  display:flex; gap:clamp(14px,3vw,30px); flex-wrap:wrap; margin-top:20px;
  padding-top:16px; border-top:1px solid var(--line);
}
.hero-stat b{
  display:block; font-size:clamp(24px,3.6vw,30px); color:var(--green);
  line-height:1.05; text-shadow:0 0 18px rgba(57,255,136,.4);
  font-variant-numeric:tabular-nums;
}
.hero-stat span{ font-size:11.5px; color:var(--fg-faint); letter-spacing:.12em; }

.grid-games{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
}
.gcard{
  position:relative; display:flex; flex-direction:column; gap:9px;
  padding:16px; text-align:left;
  background:linear-gradient(165deg, var(--panel) 0%, var(--bg-2) 100%);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius-lg); color:inherit; cursor:pointer;
  font-family:inherit; font-size:inherit;
  transition:transform .14s, border-color .14s, box-shadow .14s;
  overflow:hidden;
}
.gcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(260px 120px at 110% -10%,
    color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  opacity:0; transition:opacity .18s;
}
.gcard:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -18px var(--accent); }
.gcard:hover::after{ opacity:1; }
.gcard-top{ display:flex; align-items:center; gap:11px; }
.gcard-icon{
  flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center;
  border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 15%, #0a1218);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color:var(--accent); font-size:17px; font-weight:700; letter-spacing:-.04em;
}
.gcard-name{
  font-size:18.5px; font-weight:700; color:#fff; line-height:1.2;
  text-shadow:0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.gcard-tag{
  font-size:11px; color:var(--fg-faint); letter-spacing:.07em;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
/* 難度標籤：十款遊戲擺在一起，新訪客需要知道從哪開始 */
.gcard-lv{
  flex:0 0 auto; padding:1px 7px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.06em; font-style:normal;
}
.lv-easy{ background:#0c2a1a; color:var(--green); border:1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.lv-mid{ background:#2a2410; color:var(--amber); border:1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.lv-hard{ background:#2a1420; color:var(--pink); border:1px solid color-mix(in srgb, var(--pink) 40%, transparent); }
.navitem-txt span{ display:flex; align-items:center; gap:5px; }
.gcard-blurb{ font-size:13.5px; color:#9fb4c4; min-height:3.2em; }

/* 「推薦先玩」標記：第一次來的人需要一個明確的起點 */
.gcard-pick{
  position:absolute; top:0; right:0;
  padding:3px 10px 4px; border-radius:0 var(--radius-lg) 0 10px;
  background:var(--accent); color:#06120b;
  font-size:10.5px; font-weight:700; letter-spacing:.1em;
}
.gcard--pick{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
             0 10px 30px -18px var(--accent);
}
.gcard-foot{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11.5px; color:var(--fg-faint);
  border-top:1px dashed var(--line); padding-top:9px; margin-top:auto;
}
.gcard-best b{ color:var(--amber); }
.medal{ font-size:14px; letter-spacing:1px; }

.notice{
  display:flex; gap:11px; align-items:flex-start;
  padding:12px 14px; margin-bottom:18px;
  background:#131007; border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius:var(--radius); font-size:13px; color:#ffe3ad;
}
.notice .ic{ color:var(--amber); font-size:15px; line-height:1.4; }

/* ===================== 遊戲外框 ===================== */
.gframe{ display:flex; flex-direction:column; gap:var(--gap); }
.gf-top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 14px; background:var(--panel);
  border:1px solid var(--line); border-top:2px solid var(--accent);
  border-radius:var(--radius-lg);
}
.gf-id{ display:flex; flex-direction:column; min-width:0; flex:1 1 150px; }
.gf-id b{ font-size:16px; color:#fff; }
.gf-id span{ font-size:11px; color:var(--fg-faint); letter-spacing:.07em; }
.gf-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.statbox{
  min-width:74px; padding:5px 11px; text-align:center;
  background:#08111a; border:1px solid var(--line); border-radius:var(--radius);
}
.statbox span{ display:block; font-size:10.5px; color:var(--fg-faint); letter-spacing:.11em; }
.statbox b{ font-size:18px; color:var(--fg); font-variant-numeric:tabular-nums; }
.statbox.time b{ color:var(--cyan); }
.statbox.score b{ color:var(--amber); }
.statbox.warn b{ color:var(--red); animation:pulse .6s ease-in-out infinite alternate; }
@keyframes pulse{ to{ opacity:.45; } }
.gf-actions{ display:flex; gap:7px; }

.gf-stage{
  position:relative; min-height:clamp(380px, 56vh, 620px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(14px,2.4vw,24px); box-shadow:var(--shadow);
}
.gf-hint{
  text-align:center; font-size:13px; color:var(--fg-dim);
  min-height:1.6em; margin-bottom:10px;
}
.gf-hint.good{ color:var(--green); }
.gf-hint.bad{ color:var(--red); }

/* 準備畫面 / 結果畫面（覆蓋在 stage 上） */
.overlay{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:clamp(16px,3vw,28px);
  background:linear-gradient(180deg, rgba(8,13,19,.97), rgba(6,10,15,.99));
  border-radius:var(--radius-lg); text-align:center;
  overflow-y:auto;
}
.overlay h2{ color:#fff; }
.howto{ text-align:left; max-width:52ch; margin:0 auto; }
.howto li{ margin-bottom:7px; font-size:13.5px; color:var(--fg-dim); }
.howto li::marker{ color:var(--accent); }

.bigscore{
  font-size:clamp(44px,9vw,76px); line-height:1; font-weight:700;
  color:var(--amber); text-shadow:0 0 36px rgba(255,193,77,.35);
  font-variant-numeric:tabular-nums;
}
.rank-title{ font-size:19px; color:var(--accent); letter-spacing:.1em; }
.statlist{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.statlist div{
  padding:6px 13px; background:#08111a; border:1px solid var(--line);
  border-radius:var(--radius); font-size:12.5px; color:var(--fg-dim);
}
.statlist b{ color:var(--fg); margin-left:5px; }

.know{
  text-align:left; max-width:58ch; margin:4px auto 0;
  padding:13px 15px; border-radius:var(--radius);
  background:#081219; border:1px solid var(--line);
  border-left:3px solid var(--cyan);
}
.know h3{ font-size:13.5px; color:var(--cyan); letter-spacing:.06em; margin-bottom:7px; }
.know li{ font-size:13px; color:var(--fg-dim); margin-bottom:5px; }
.know ul{ margin:0; padding-left:18px; }

.namebox{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
input[type="text"], input[type="number"]{
  font-family:inherit; font-size:15px; color:var(--fg);
  background:#08111a; border:1px solid var(--line-2);
  border-radius:var(--radius); padding:10px 13px; min-height:42px; width:170px;
}
input[type="text"]:focus{ border-color:var(--accent); outline:none; }

/* ===================== 遊戲 1：二進位 ===================== */
.bin-wrap{ display:flex; flex-direction:column; gap:clamp(12px,2.4vw,22px); margin:auto 0; }
.bin-target{ text-align:center; }
.bin-target .lbl{ font-size:11.5px; letter-spacing:.2em; color:var(--fg-faint); }
.bin-target .num{
  font-size:clamp(50px,13vw,96px); line-height:1; font-weight:700; color:#fff;
  text-shadow:0 0 40px rgba(57,255,136,.35); font-variant-numeric:tabular-nums;
}
.bin-cur{ text-align:center; font-size:clamp(17px,3.4vw,24px); color:var(--fg-dim); }
.bin-cur b{ font-variant-numeric:tabular-nums; }
.bin-cur.hi b{ color:var(--red); } .bin-cur.lo b{ color:var(--cyan); }
.bin-bits{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:clamp(4px,1.1vw,10px);
  max-width:640px; margin:0 auto; width:100%;
}
.bit{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:clamp(7px,1.6vw,13px) 2px; cursor:pointer;
  background:#08111a; border:1px solid var(--line-2); border-radius:var(--radius);
  font-family:inherit; color:var(--fg-faint); transition:all .1s;
}
.bit .v{ font-size:clamp(20px,5vw,32px); font-weight:700; line-height:1; }
.bit .w{ font-size:clamp(8.5px,1.7vw,11px); letter-spacing:.02em; }
.bit[aria-pressed="true"]{
  background:color-mix(in srgb, var(--green) 20%, #08111a);
  border-color:var(--green); color:var(--green);
  box-shadow:0 0 16px -5px var(--green);
}
.bit[aria-pressed="true"] .v{ color:var(--green); text-shadow:0 0 14px var(--green); }
.bin-diff{
  text-align:center; min-height:1.5em;
  font-size:clamp(15px,2.8vw,20px); font-weight:700;
}
.bin-diff.lo{ color:var(--cyan); }
.bin-diff.hi{ color:var(--red); }
.bin-hintrow{ display:flex; justify-content:center; gap:9px; flex-wrap:wrap; }
.bin-binary{
  text-align:center; font-size:clamp(14px,3vw,20px); letter-spacing:.3em;
  color:var(--cyan); min-height:1.5em;
}

/* ===================== 遊戲 2：邏輯閘 ===================== */
.lg-wrap{ display:flex; flex-direction:column; gap:12px; flex:1; }
.lg-task{
  padding:10px 13px; background:#081219; border:1px solid var(--line);
  border-left:3px solid var(--violet); border-radius:var(--radius); font-size:13.5px;
}
.lg-task b{ color:var(--violet); }
.lg-canvas{ flex:1; display:grid; place-items:center; min-height:160px; }
/* 限制高度，真值表和「驗證」按鈕才不會被擠到畫面外（攤位上沒人會想捲動） */
.lg-canvas svg{ width:100%; max-width:760px; height:auto; max-height:min(46vh,340px); overflow:visible; }
.wire{ fill:none; stroke:#2b4154; stroke-width:2.5; stroke-linecap:round; }
.wire.on{ stroke:var(--green); filter:drop-shadow(0 0 5px var(--green)); }
.gatebox{ fill:#0d1821; stroke:#35506a; stroke-width:1.5; }
.gatebox.sel{ stroke:var(--amber); stroke-width:2.5; }
.gatebox.q{ stroke:var(--amber); stroke-dasharray:5 4; }
.gatelabel{ fill:#d7e6f2; font:700 14px var(--font-mono); text-anchor:middle; dominant-baseline:central; }
.gatelabel.q{ fill:var(--amber); }
.sw{ cursor:pointer; }
.sw rect{ fill:#0d1821; stroke:#35506a; stroke-width:1.5; }
.sw.on rect{ fill:color-mix(in srgb, var(--green) 22%, #0d1821); stroke:var(--green); }
.sw text.n{ fill:var(--fg-dim); font:700 13px var(--font-mono); text-anchor:middle; }
.sw.on text.n{ fill:var(--green); }
.sw text.b{ fill:var(--fg-faint); font:700 15px var(--font-mono); text-anchor:middle; }
.sw.on text.b{ fill:var(--green); }
.lamp{ fill:#131a20; stroke:#35506a; stroke-width:2; }
.lamp.on{ fill:var(--green); stroke:var(--green); filter:drop-shadow(0 0 10px var(--green)); }
.hitbox{ fill:transparent; cursor:pointer; }
.lg-palette{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.lg-truth{ display:flex; justify-content:center; }
.lg-truth table{ border-collapse:collapse; font-size:12.5px; }
.lg-truth th,.lg-truth td{
  border:1px solid var(--line); padding:3px 11px; text-align:center;
}
.lg-truth th{ background:#0b1620; color:var(--fg-dim); font-weight:600; }
.lg-truth td.out{ color:var(--amber); font-weight:700; }
.lg-truth tr.now td{ background:#0e1c26; }
.lvdots{ display:flex; gap:5px; justify-content:center; }
.lvdot{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.lvdot.done{ background:var(--green); }
.lvdot.now{ background:var(--amber); box-shadow:0 0 9px var(--amber); }

/* ===================== 遊戲 3：抓 Bug ===================== */
.bh-wrap{ display:flex; flex-direction:column; gap:12px; flex:1; }

/* 開場的語言選擇 */
.lang-pick{
  margin:auto 0; text-align:center;
  display:flex; flex-direction:column; gap:6px;
}
.lang-grid{
  display:grid; gap:clamp(10px,2vw,16px); margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.langcard{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:clamp(16px,2.6vw,24px) 14px;
  background:linear-gradient(170deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:var(--radius-lg); cursor:pointer;
  font-family:inherit; color:inherit;
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
.langcard:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px -18px var(--accent);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
}
.langcard-icon{
  width:52px; height:52px; display:grid; place-items:center; border-radius:var(--radius);
  background:color-mix(in srgb, var(--accent) 16%, #0a1218);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--accent); font-size:20px; font-weight:700;
}
.langcard-name{ font-size:18px; font-weight:700; color:#fff; }
.langcard-note{ font-size:12px; color:var(--fg-dim); line-height:1.45; }
.langcard-count{ font-size:11px; color:var(--fg-faint); letter-spacing:.06em; }
.langcard-tag{
  position:absolute; top:0; right:0;
  padding:2px 9px 3px; border-radius:0 var(--radius-lg) 0 9px;
  background:var(--accent); color:#06120b; font-size:10px; font-weight:700;
}
.bh-meta{ display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap; font-size:12.5px; }
.lives{ letter-spacing:3px; font-size:16px; color:var(--red); }
.code{
  flex:1; background:#070d13; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; font-size:clamp(12.5px,2.2vw,15px);
}
.code-title{
  padding:6px 12px; background:#0b141c; border-bottom:1px solid var(--line);
  font-size:11.5px; color:var(--fg-faint);
}
.cline{
  display:flex; gap:12px; padding:3px 12px; cursor:pointer;
  border-left:3px solid transparent; white-space:pre; overflow-x:auto;
  scrollbar-width:thin;
}
.cline:hover{ background:#0d1a24; border-left-color:var(--amber); }
.cline.dead{ cursor:default; }
.cline.dead:hover{ background:transparent; border-left-color:transparent; }
.cline .ln{
  flex:0 0 2.2em; text-align:right; color:#3f5467;
  user-select:none; position:sticky; left:0;
}
.cline.right{ background:#0a1f14; border-left-color:var(--green); }
.cline.wrong{ background:#220f12; border-left-color:var(--red); }
.cline.reveal{ background:#0a1f14; border-left-color:var(--green); }
.tk-key{ color:#ff78c4; } .tk-str{ color:#c6ff4d; }
.tk-num{ color:#ffc14d; } .tk-com{ color:#5b7287; font-style:italic; }
.tk-fn{ color:#38d9ff; }
.bh-fb{
  padding:12px 14px; border-radius:var(--radius); font-size:13.5px;
  border:1px solid var(--line); background:#081219; min-height:3.4em;
}
.bh-fb.right{ border-left:3px solid var(--green); }
.bh-fb.wrong{ border-left:3px solid var(--red); }
.bh-fb b{ color:#fff; }
.bh-fb code{ background:#0e1c26; padding:1px 5px; border-radius:3px; color:var(--lime); }

/* ===================== 遊戲 4：排序 ===================== */
.sm-wrap{ display:flex; flex-direction:column; gap:14px; flex:1; }
.bars{
  flex:1; display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(5px,1.4vw,14px); min-height:200px; padding-bottom:4px;
}
.bar{
  position:relative; flex:1 1 0; max-width:86px; min-width:26px;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:7px; cursor:pointer; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--cyan) 72%, #0a1218), #0e2130);
  border:1px solid color-mix(in srgb, var(--cyan) 45%, transparent); border-bottom:0;
  color:#06141c; font-weight:700; font-size:clamp(11px,2.2vw,15px);
  transition:height .22s cubic-bezier(.3,1.4,.5,1), transform .14s, background .14s;
}
.bar:hover{ transform:translateY(-4px); }
.bar.sel{
  background:linear-gradient(180deg, color-mix(in srgb, var(--amber) 85%, #0a1218), #2a1f08);
  border-color:var(--amber); box-shadow:0 0 22px -6px var(--amber); transform:translateY(-6px);
}
.bar.ok{
  background:linear-gradient(180deg, color-mix(in srgb, var(--green) 78%, #0a1218), #0a2317);
  border-color:var(--green);
}
.bar.cmp{ background:linear-gradient(180deg, var(--violet), #241338); border-color:var(--violet); }
.sm-info{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===================== 遊戲 5：打字 ===================== */
.ty-wrap{ display:flex; flex-direction:column; gap:14px; flex:1; justify-content:center; }
.ty-target{
  text-align:center; font-size:clamp(20px,5vw,40px); line-height:1.45;
  word-break:break-all; min-height:1.5em; letter-spacing:.01em;
}
.ty-target .ch{ color:var(--fg-faint); }
.ty-target .ch.done{ color:var(--green); }
.ty-target .ch.err{ color:#fff; background:var(--red); border-radius:2px; }
.ty-target .ch.cur{ background:color-mix(in srgb, var(--cyan) 30%, transparent); border-radius:2px; color:#fff; }
.ty-target .ch.sp.done{ background:color-mix(in srgb, var(--green) 22%, transparent); }
.ty-desc{ text-align:center; font-size:13.5px; color:var(--fg-dim); min-height:2.6em; }
.ty-desc b{ color:var(--cyan); }
.ty-input{
  width:100%; max-width:620px; margin:0 auto; display:block;
  font-size:clamp(16px,3.4vw,22px); text-align:center; letter-spacing:.02em;
}
.ty-live{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===================== 遊戲 6：封包路由 ===================== */
.pk-wrap{ display:flex; flex-direction:column; gap:11px; flex:1; }
.pk-canvas{ flex:1; display:grid; place-items:center; min-height:240px; }
.pk-canvas svg{ width:100%; max-width:720px; height:auto; }
.edge{ stroke:#273d4f; stroke-width:3; stroke-linecap:round; }
.edge.used{ stroke:var(--amber); stroke-width:5; filter:drop-shadow(0 0 6px var(--amber)); }
.edge.best{ stroke:var(--green); stroke-width:4; stroke-dasharray:7 5; }
.ew{ fill:var(--fg-faint); font:600 11.5px var(--font-mono); text-anchor:middle; dominant-baseline:central; }
.ew-bg{ fill:#070d13; }
.node circle{ fill:#0d1821; stroke:#3b5670; stroke-width:2; transition:all .12s; }
.node text{ fill:var(--fg-dim); font:700 12px var(--font-mono); text-anchor:middle; dominant-baseline:central; }
.node.reach circle{ stroke:var(--cyan); fill:#0b1d26; }
.node.path circle{ fill:color-mix(in srgb, var(--amber) 30%, #0d1821); stroke:var(--amber); }
.node.src circle{ fill:color-mix(in srgb, var(--green) 28%, #0d1821); stroke:var(--green); }
.node.dst circle{ fill:color-mix(in srgb, var(--violet) 28%, #0d1821); stroke:var(--violet); }
.node.src text,.node.dst text{ fill:#fff; }
.pkt{ fill:var(--amber); filter:drop-shadow(0 0 8px var(--amber)); }
.pk-info{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }

/* ===================== 遊戲 7：迷思破解 ===================== */
.my-wrap{ display:flex; flex-direction:column; gap:16px; flex:1; justify-content:center; }
.my-q{
  text-align:center; font-size:clamp(18px,3.6vw,28px); line-height:1.5;
  max-width:28ch; margin:0 auto; color:#fff; min-height:3em;
  display:flex; align-items:center; justify-content:center;
}
.my-btns{ display:flex; gap:clamp(10px,2.4vw,22px); justify-content:center; }
.my-btns .btn{
  flex:1 1 0; max-width:220px; min-height:clamp(66px,13vw,96px);
  font-size:clamp(18px,3.6vw,26px); font-weight:700; flex-direction:column; gap:2px;
}
.my-btns .btn small{ font-size:11px; font-weight:400; letter-spacing:.1em; opacity:.6; }
.my-yes{ --accent:var(--green); }
.my-no{ --accent:var(--red); }
/* 三秒內要做判斷的遊戲，兩顆按鈕必須一眼就分得出來 */
.my-btns .btn{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 60%, var(--line-2));
  background:color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  text-shadow:0 0 16px color-mix(in srgb, var(--accent) 60%, transparent);
}
.my-btns .btn:hover:not(:disabled){
  color:#fff;
  background:color-mix(in srgb, var(--accent) 26%, var(--panel-2));
  border-color:var(--accent);
  box-shadow:0 0 30px -8px var(--accent);
}
.my-btns .btn:disabled{ opacity:.3; }
.my-fb{
  max-width:56ch; margin:0 auto; text-align:left; font-size:13.5px;
  padding:13px 15px; border-radius:var(--radius);
  background:#081219; border:1px solid var(--line); min-height:5em;
}
.my-fb.right{ border-left:3px solid var(--green); }
.my-fb.wrong{ border-left:3px solid var(--red); }
.my-fb .verdict{ font-weight:700; font-size:15px; display:block; margin-bottom:5px; }
.my-fb.right .verdict{ color:var(--green); }
.my-fb.wrong .verdict{ color:var(--red); }
.my-bar{ height:5px; background:var(--line); border-radius:3px; overflow:hidden; max-width:560px; margin:0 auto; width:100%; }
.my-bar i{ display:block; height:100%; background:var(--pink); transition:width .25s; }

/* ===================== 排行榜 / 關於 / 設定 ===================== */
.lb-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
table.data{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th,table.data td{
  text-align:left; padding:8px 11px; border-bottom:1px solid var(--line);
}
table.data th{ color:var(--fg-faint); font-size:11.5px; letter-spacing:.11em; font-weight:600; }
table.data td.n{ text-align:right; font-variant-numeric:tabular-nums; color:var(--amber); font-weight:700; }
table.data tbody tr:nth-child(1) td.rk{ color:#ffd700; }
table.data tbody tr:nth-child(2) td.rk{ color:#cfd8dc; }
table.data tbody tr:nth-child(3) td.rk{ color:#d99a5b; }
.empty{ padding:28px; text-align:center; color:var(--fg-faint); font-size:13px; }

.badges{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.badge{
  display:flex; gap:10px; align-items:center; padding:10px 12px;
  background:#08111a; border:1px solid var(--line); border-radius:var(--radius);
  font-size:12.5px;
}
.badge.off{ opacity:.35; }
.badge .bi{ font-size:21px; }
.badge b{ display:block; color:#fff; font-size:13px; }
.badge span{ color:var(--fg-faint); font-size:11px; }

.about-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.about-grid li{ font-size:13.5px; color:var(--fg-dim); margin-bottom:6px; }
.setrow{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.setrow:last-child{ border-bottom:0; }
.setrow .t b{ display:block; color:#fff; font-size:14px; }
.setrow .t span{ font-size:12px; color:var(--fg-faint); }
.toggle{
  position:relative; width:52px; height:28px; flex:0 0 auto;
  background:#0d1821; border:1px solid var(--line-2); border-radius:999px;
  cursor:pointer; transition:all .15s;
}
.toggle::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%; background:#44617a; transition:all .15s;
}
.toggle[aria-pressed="true"]{ background:color-mix(in srgb, var(--green) 25%, #0d1821); border-color:var(--green); }
.toggle[aria-pressed="true"]::after{ left:27px; background:var(--green); }

/* ===================== Toast / Modal ===================== */
.toasts{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:1000; display:flex; flex-direction:column; gap:8px;
  align-items:center; pointer-events:none; width:min(92vw,460px);
}
.toast{
  padding:10px 16px; border-radius:var(--radius); font-size:13.5px;
  background:#0d1a24; border:1px solid var(--line-2); color:var(--fg);
  box-shadow:var(--shadow); animation:tin .22s ease-out;
}
.toast.ok{ border-color:var(--green); color:var(--green); }
.toast.bad{ border-color:var(--red); color:#ffb3b9; }
@keyframes tin{ from{ opacity:0; transform:translateY(12px); } }

.backdrop{
  position:fixed; inset:0; z-index:1100;
  background:rgba(3,6,9,.82); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:18px; overflow-y:auto;
}
.dialog{
  width:min(96vw,560px); max-height:88vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-2);
  border-top:2px solid var(--accent);
  border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow);
  animation:din .18s ease-out;
}
@keyframes din{ from{ opacity:0; transform:translateY(-10px) scale(.98); } }

/* 閒置吸引畫面 */
.attract{
  position:fixed; inset:0; z-index:800; display:grid; place-items:center;
  background:rgba(4,7,11,.93); cursor:pointer; text-align:center; padding:24px;
}
.attract .big{
  font-size:clamp(30px,8vw,66px); font-weight:700; color:var(--green);
  text-shadow:0 0 44px rgba(57,255,136,.45); letter-spacing:.04em;
  animation:float 2.6s ease-in-out infinite alternate;
}
.attract .sm{ color:var(--fg-dim); margin-top:14px; font-size:clamp(14px,2.6vw,18px); }
@keyframes float{ to{ transform:translateY(-10px); } }

/* ===================== 無障礙 / 動畫偏好 ===================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:.001s !important; transition-duration:.001s !important;
}

/* ===================== 手機 ===================== */
/* 中等寬度：先收掉最長的那個連結，它在面板裡還找得到 */
@media (max-width:980px){
  .navlink--wide{ display:none; }
}
/* 721px 以上空間還夠，首頁／遊戲／排行榜都留著；
   再窄就整個收成 ☰（下面的 720px 斷點） */
@media (max-width:980px){
  .navbtn-label{ max-width:none; }
}
/* 手機：整個導覽收成 ☰ */
@media (max-width:720px){
  body{ font-size:14.5px; }
  .brand-text small{ display:none; }
  .nav{ display:none; }
  .iconbtn.navham{ display:grid; }
  .navpanel{ left:12px; right:12px; width:auto; }
  .topbar{ gap:8px; }
  .gf-actions{ width:100%; }
  .gf-actions .btn{ flex:1; }
  .gcard-blurb{ min-height:0; }
  .my-btns .btn{ max-width:none; }
  .chip span{ display:none; }
  .navpanel-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width:420px){
  .brand-text b{ font-size:13.5px; letter-spacing:.1em; }
  .brand-mark{ width:32px; height:32px; font-size:13px; }
  .navpanel-grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .bin-bits{ grid-template-columns:repeat(4,1fr); }
  .statbox{ min-width:62px; padding:4px 8px; }
  .statbox b{ font-size:16px; }
}
/* 橫向小螢幕（攤位平板） */
@media (max-height:560px) and (orientation:landscape){
  .gf-stage{ min-height:300px; }
  .hero{ margin-bottom:16px; }
}