/* col-shell.css —— 手機柱模型的共用骨架（當代中文系列三站＋華語城堡；上游在 ZPD/Layout/，各站放副本，check.js 驗分岔）
   v1.0（2026-09-19，路線 A）：從三站 v2.00.00 的 index.html 抽出來的相同段落——之後由 bake-col.js 從 col.spec 烘出（路線 B），站的掛載不變。
   規則（SpecBoard 四鐵律換算子）：柱寬是唯一輸入（字級 cqw、幾何 375 基準×U）、所有狀態住 #col、一柱一個伸縮件（#play flex:1）、auditLayout 實磅 0 違規。
   帶：#status → #nav → #board → #play → #dock → #hint；桌機（body.wide）：#left｜#col｜#right，節點由 col-shell.js 搬家。
   站專屬（題目區高度、拇指區欄數、drill／盤面樣式）寫在各站 index.html，不寫這裡。 */
:root{
  --ink:#1B3A2F; --panel:#1F4236; --panel-2:#183329;
  --rule:rgba(232,240,228,.14);
  --chalk:#F1EFE6; --dim:#A9B8A8;
  --beam:#F5D66B; --beam-soft:rgba(245,214,107,.16);
  --ok:#9BE3A8; --err:#F29B8B;
  --ts:1;
  --num:ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
  --han:'Songti TC','Noto Serif CJK TC',PMingLiU,Georgia,serif;
  --hei:'Noto Sans TC','Source Han Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --ui:'PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --title:'CVTitle',var(--han);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='700'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.004 .02' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 .95  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>"),
    radial-gradient(120% 100% at 50% 40%,#22483B 0%,var(--ink) 60%,#122A21 100%);
  color:var(--chalk);font-family:var(--ui);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none;
}
button,select{ font:inherit;color:inherit;touch-action:manipulation;-webkit-touch-callout:none;user-select:none; }
button:focus-visible{ outline:2px solid var(--beam);outline-offset:2px; }

/* ═══ 骨架：手機＝單柱；≥ wideMin ＝ 左欄｜柱｜右欄 ═══ */
#app{ position:fixed;inset:0;display:grid;grid-template-columns:1fr;justify-items:center;height:100%; }
#left,#right{ display:none; }
#col{ position:relative;width:100%;max-width:var(--colmax,560px);height:100%;container-type:inline-size;
  display:flex;flex-direction:column;padding:max(8px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));overflow:hidden; }
body.wide #app{ grid-template-columns:1fr var(--colw) 1fr;gap:20px;padding:14px 20px;align-items:stretch; }
body.wide #left,body.wide #right{ display:flex;flex-direction:column;gap:14px;max-width:520px;width:100%;padding-top:6px; }
body.wide #left{ justify-self:end; }
body.wide #right{ justify-self:start; }
body.wide #col{ max-width:none;width:var(--colw);padding:8px 10px 10px;border:1px solid var(--rule);border-radius:14px;background:rgba(0,0,0,.12); }

/* ═══ 帶（字級全 cqw：1cqw＝柱寬 1%；375 寬時 1cqw≈3.6px） ═══ */
#status{ flex:0 0 auto;display:flex;align-items:center;gap:2.5cqw;min-height:11cqw;font-size:calc(3.2cqw*var(--ts));color:var(--dim);overflow:hidden; }
.brand{ font-family:var(--han);font-size:calc(4.2cqw*var(--ts));letter-spacing:.04em;color:var(--beam);white-space:nowrap; }
#stats,#hud{ display:flex;align-items:center;gap:2cqw;margin-left:auto;min-width:0;font-family:var(--num);white-space:nowrap; }
#pips,.pips{ display:flex;gap:1cqw; }
.pip{ width:3cqw;height:1.2cqw;border-radius:1cqw;background:rgba(232,240,228,.2); }
.pip.done{ background:var(--ok); } .pip.now{ background:var(--beam); }

#nav{ flex:0 0 auto;display:flex;flex-direction:column;gap:1.6cqw;margin-top:1.6cqw; }
#nav label{ display:flex;align-items:center;gap:2cqw;font-size:calc(3.6cqw*var(--ts));color:var(--dim);min-width:0; }
#nav label > span{ display:none; }
select{ width:100%;min-height:12.5cqw;font-size:calc(6cqw*var(--ts));color:var(--chalk);background:var(--panel-2);
  border:1px solid var(--rule);border-radius:2cqw;padding:0 3cqw; }
.gone{ display:none !important; }
.tabs,.seg{ display:flex;background:var(--panel-2);border:1px solid var(--rule);border-radius:2cqw;overflow:hidden; }
.tabs button,.seg button{ flex:1;font-size:calc(6cqw*var(--ts));color:var(--dim);background:none;border:0;min-height:12.5cqw;padding:0 3cqw;cursor:pointer;white-space:nowrap; }
.tabs button[aria-selected="true"],.seg button.on{ background:var(--panel);color:var(--chalk);box-shadow:inset 0 -2px 0 var(--beam); }
.seg button.on{ background:var(--beam);color:#221A0E; }
.seg button:disabled{ opacity:.35;cursor:default; }
.tog{ font-size:calc(6cqw*var(--ts));color:var(--dim);background:var(--panel-2);border:1px solid var(--rule);border-radius:2cqw;min-height:12.5cqw;padding:0 3cqw;cursor:pointer;white-space:nowrap; }
.tog.on{ color:var(--ok);border-color:var(--ok); }
.tog[hidden]{ display:none; }

#board{ flex:0 0 36%;position:relative;display:flex;flex-direction:column;min-height:0;padding-top:1cqw; }   /* 題目區高度：站專屬覆寫 */
.boardTop{ display:flex;align-items:center;gap:2cqw;min-height:8cqw; }
#play{ flex:1 1 auto;position:relative;min-height:0;display:flex;flex-direction:column;padding-top:2cqw; }   /* 一柱唯一的伸縮件 */
#dock{ flex:0 0 auto;display:flex;align-items:center;gap:2cqw;padding-top:2cqw; }
#hint{ flex:0 0 auto;font-size:calc(3.4cqw*var(--ts));color:var(--dim);text-align:center;padding:1.6cqw 0 0;min-height:5cqw; }
.note{ font-size:calc(3.6cqw*var(--ts));margin-top:1.5cqw;min-height:5cqw;color:var(--err);line-height:1.35; }
.note b{ color:var(--chalk); }
.note.good{ color:var(--ok); } .note.good b{ color:var(--ok); }
.hide{ display:none !important; }
@keyframes shake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.shake{ animation:shake .3s; }
@keyframes blink{ 50%{ opacity:.35; } }

/* 拇指區通用件：選項格與「看答案」列 */
.chips{ display:grid;gap:2.4cqw;align-content:start; }
.chips button{ color:var(--chalk);background:var(--panel);border:1px solid var(--rule);border-radius:2cqw;min-height:14cqw;padding:2cqw;cursor:pointer;transition:background .12s,border-color .12s,transform .06s; }
.chips button:active{ transform:translateY(1px); }
.chips button.right{ border-color:var(--ok);color:var(--ok);background:rgba(155,227,168,.1); }
.chips button.wrong{ border-color:var(--err);color:var(--err); }
.chips button:disabled{ cursor:default; }
.mini{ display:flex;gap:2cqw;margin-top:auto;padding-top:2cqw; }
.mini button{ flex:1;font-size:calc(6cqw*var(--ts));color:var(--dim);background:none;border:1px solid var(--rule);border-radius:2cqw;min-height:12.5cqw;cursor:pointer; }

/* ═══ 桌機側欄：搬過去的節點照側欄字級走（柱外沒有容器單位，用 vh：1vh ≈ 柱寬 0.56%） ═══ */
body.wide #left #nav{ margin:0;gap:10px; }
body.wide #left select,body.wide #left .tabs button,body.wide #left .seg button,body.wide #left .tog{ font-size:calc(2.6vh*var(--ts));min-height:6vh;border-radius:8px;padding:0 14px; }
body.wide #left #nav label{ flex-direction:column;align-items:stretch;gap:4px; }
body.wide #left #nav label > span{ display:block;font-size:2vh;color:var(--dim); }
body.wide #left #dock{ padding:0;flex-wrap:wrap;gap:10px; }
body.wide #left #hint{ font-size:2vh;text-align:left;padding:4px 0 0; }
body.wide #right #stats{ margin:0;font-size:2.6vh;gap:16px;flex-wrap:wrap; }
body.wide #right .pip{ width:22px;height:7px; }

/* ═══ 結算卡（柱內覆蓋） ═══ */
#card{ position:absolute;inset:0;background:rgba(10,24,18,.94);display:grid;place-items:center;z-index:5;padding:4cqw; }
#card[hidden]{ display:none; }
.sheet{ width:100%;background:var(--panel);border:1px solid var(--rule);border-radius:3cqw;padding:5cqw; }
.sheet h2{ font-family:var(--han);font-size:calc(7.5cqw*var(--ts));margin:0 0 1cqw;font-weight:500;color:var(--beam); }
.sheet .sub{ font-size:calc(3.6cqw*var(--ts));color:var(--dim);margin-bottom:4cqw;line-height:1.3; }
.rows{ display:grid;gap:2.4cqw;margin-bottom:4cqw; }
.row{ display:flex;align-items:baseline;gap:2cqw;font-size:calc(4.3cqw*var(--ts));flex-wrap:wrap; }
.row span{ color:var(--dim); }
.row b{ margin-left:auto;font-family:var(--num);font-size:calc(7.5cqw*var(--ts));font-weight:500; }
.row b.good{ color:var(--ok); } .row b.gold{ color:var(--beam); }
#cardBars{ display:grid;gap:1.6cqw;margin-bottom:4cqw; }
#cardBars div{ font-size:calc(3.6cqw*var(--ts));color:var(--dim);display:flex;align-items:center;gap:2cqw;line-height:1.3; }
#cardBars i{ height:1.6cqw;background:var(--err);display:block;min-width:1cqw;flex:0 0 auto; }
#cardBars .w{ font-family:var(--han);color:var(--chalk); }
#cardGo{ width:100%;font-size:calc(5.3cqw*var(--ts));font-weight:600;background:var(--beam);color:#2A2405;border:0;min-height:13cqw;cursor:pointer;border-radius:2cqw; }

/* ═══ 封面（柱內覆蓋） ═══ */
#cover{ position:absolute;inset:0;z-index:10;background:radial-gradient(120% 100% at 50% 40%,#22483B 0%,var(--ink) 60%,#122A21 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s;padding:0 4cqw; }
#cover.lifted{ opacity:0;pointer-events:none; }
#coverTitle{ font-family:var(--title);font-weight:900;font-size:calc(9.6cqw*var(--ts));letter-spacing:.06em;color:var(--beam);white-space:nowrap; }
#coverEn{ font-family:var(--num);font-size:calc(3.5cqw*var(--ts));letter-spacing:.3em;color:var(--dim);margin-top:1.5cqw;text-align:center; }
#coverRule{ width:50%;height:2px;background:linear-gradient(90deg,transparent,var(--beam),transparent);margin:5cqw 0; }
#coverRpg{ font-family:var(--num);font-size:calc(4.3cqw*var(--ts));color:var(--chalk);min-height:6cqw; }
#coverCode{ margin:2cqw 0 4cqw !important;font-size:calc(4.3cqw*var(--ts)) !important;color:var(--chalk);text-align:center;line-height:1.5 !important; }
#coverCode label{ display:inline-flex;align-items:center;gap:2cqw; }
#coverCode input{ font:inherit;width:9ch !important;min-height:11cqw;text-align:center;background:transparent;color:inherit;border:2px solid currentColor;border-radius:1.5cqw !important;padding:.1em .3em; }
#syncStatus{ font-size:calc(3.4cqw*var(--ts));color:var(--dim);margin-top:1cqw; }
#coverStart{ font-size:calc(5.3cqw*var(--ts));color:var(--chalk);animation:blink 1.2s steps(2) infinite;text-align:center; }
#coverStartEn{ font-family:var(--num);font-size:calc(3.5cqw*var(--ts));letter-spacing:.3em;color:var(--dim);margin-top:1cqw; }
#coverVer{ position:absolute;right:3cqw;bottom:2cqw;font-size:calc(3.2cqw*var(--ts));color:var(--dim);font-family:var(--num); }
#dp-handle{ left:auto!important;right:10px!important;bottom:auto!important;top:max(10px,env(safe-area-inset-top))!important; }   /* 設計師把手右上：左下是拇指區的地盤 */
@media (prefers-reduced-motion:reduce){ *{ animation:none!important;transition:none!important; } }