/* 基本重置與可用性 */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%;overflow:hidden;overscroll-behavior:none;height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,"Noto Sans","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;background:#0b0f14;color:#e6edf3;overflow:hidden;overscroll-behavior:none;min-height:100%;font-size:clamp(14px,1.2vw,18px)}

/* 定尺寸舞台與置中縮放 */
#viewport{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
#page{position:relative;width:2560px;height:1440px;transform-origin:top left}

@media (max-width: 99999px){
  /* 以較小邊等比縮放，塞進可視區域 */
  #viewport{--vw:100vw;--vh:100vh}
}
a{color:#7cc4ff;text-decoration:none}
a:hover{text-decoration:underline}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* 佈局 */
.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header,.site-footer{background:#0e141b;border-bottom:1px solid #1f2a37}
.site-footer{border-bottom:none;border-top:1px solid #1f2a37}
.header-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-title{margin:0;font-size:clamp(16px,1.4vw,22px);letter-spacing:2px}

.site-main{display:grid;grid-template-columns:280px 1fr 280px;gap:16px;align-items:start}
@media (max-width: 1440px){
  .site-main{grid-template-columns:280px 1fr;}
  #right-panel{grid-column:1 / -1;}
}
@media (max-width: 1024px){
  .site-main{grid-template-columns:1fr}
  .panel{order:2}
  .game-area{order:1}
  .panel+.panel{order:3}
}

/* 小螢幕優化：觸控鍵預設顯示、工具列更大 */
@media (max-width: 768px){
  .btn.touch{min-width:56px;min-height:56px}
  #touch-controls[hidden]{display:grid}
}

/* 卡片與面板 */
.card{background:#0e141b;border:1px solid #1f2a37;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.card-title{margin:0 0 8px 0;font-size:16px}
.panel{padding:12px}

/* 控制列與按鈕 */
.controls{display:flex;gap:8px;flex-wrap:wrap}
.btn{appearance:none;border:1px solid #2a3b4d;background:#121a23;color:#e6edf3;border-radius:8px;padding:clamp(6px,.6vw,10px) clamp(10px,1vw,14px);font-weight:600;cursor:pointer;transition:transform .05s ease,border-color .2s ease,background .2s ease}
.btn:hover{border-color:#3a5168;background:#16212c}
.btn:active{transform:translateY(1px)}
.btn.primary{background:#2b6cb0;border-color:#2b6cb0}
.btn.primary:hover{background:#2f77c3;border-color:#2f77c3}
.btn.ghost{background:transparent}
.btn.full{width:100%}
.kb-hint{opacity:.75;margin:6px 0 0}

/* 遊戲區域 */
.game-area{padding:12px}
.playfield-wrapper{display:flex;justify-content:center}
.playfield{position:relative;inline-size:100%;block-size:auto;max-inline-size:100%;aspect-ratio:10/20;background:#0a0f14;border:1px solid #1f2a37;border-radius:8px;overflow:hidden}
.layer{position:absolute;inset:0;display:block;width:100%;height:100%}
.fallback-grid{display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:1fr;gap:1px;background:#0a0f14}
.fallback-grid>div{background:#111923}

.bottom-toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.touch-controls{display:grid;gap:8px}
.touch-row{display:flex;gap:8px;justify-content:center}
.btn.touch{min-width:44px;min-height:44px}

/* 訊息與列表 */
.list{margin:0;padding-left:18px}
.score-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stat{display:flex;flex-direction:column;background:#0b121a;border:1px solid #182434;border-radius:8px;padding:8px}
.label{font-size:12px;opacity:.8}
.value{font-size:clamp(16px,1.6vw,22px);font-weight:700}

/* 覆蓋視窗 */
.overlay{position:fixed;inset:0;background:rgba(2,6,12,.6);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:saturate(130%) blur(2px)}
.overlay[hidden]{display:none}
.dialog{padding:16px;max-width:420px}
.dialog-title{margin:0 0 8px 0}
.dialog-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
.dialog .note{opacity:.8}

/* 設定表單 */
.settings-form fieldset{border:1px solid #223040;border-radius:10px;margin:0 0 12px 0}
.settings-form legend{opacity:.9}
.settings-form label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.keymap{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.keymap input{width:100%;text-align:right;padding:6px;border-radius:6px;border:1px solid #223040;background:#0b121a;color:#e6edf3}
.keymap-actions{display:flex;gap:8px;justify-content:flex-end}

/* 頁尾 */
.version{opacity:.7}
.links{display:flex;gap:10px}