:root{
  --vh: 1vh;
  --bg: #0b1125;
  --bg-2: #0f162e;
  --panel: #121a34;
  --ink: #e7edff;
  --muted: #a3acd6;
  --accent: #7aa2ff;
  --good: #3ef0b4;
  --bad: #ff9aa9;
  --warn: #ffd08a;

  --gap: 10px;
  --board-size: 560px;
  --tile-radius: 10px;
  --tray-cell: 30px;
  --tray-fill: .94;
  --tray-scale-max: 1.9;

  --side-w: 360px;

  --grid-size: 8; /* 8×8 棋盤 */
}

* { box-sizing: border-box; }
html,body{
  height: 100%;
  margin: 0;
  background: radial-gradient(1200px 900px at 60% -10%, #12204b 0%, #0c1430 40%, #0a0f20 96%) fixed;
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "PingFang TC", "Noto Sans TC", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  overscroll-behavior: contain;
}
button{
  background: #192242;
  color: #dbe2ff;
  border: 1px solid #2a3568;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .06s ease, filter .06s ease, background .2s ease;
  outline: none;
}
button:hover{ filter: brightness(1.08); }
button:active{ transform: translateY(1px) scale(.98); }
button.accent{ background: #233159; border-color:#3657c4; color:#e9efff; }

kbd{
  background:#1b2446;border:1px solid #2a3568;border-radius:6px;padding:2px 6px;font-weight:700;
}

.app{
  min-height: calc(var(--vh, 1vh) * 100);
  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 12px;
  padding: 10px 14px 16px;
}

.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.title{ display:flex; align-items:center; gap:8px; font-weight:800; }
.title .dot{ width:10px;height:10px;border-radius:50%; background:#72d7ff; box-shadow:0 0 6px 2px rgba(114,215,255,.55); display:inline-block; }
.scores{ display:flex; gap:20px; color:#cfe1ff; }
.scores b{ font-size:20px; color:#fff; margin-left:6px; }
.combo{ position:relative; display:flex; align-items:center; gap:8px; min-width:140px; }
#comboTag{ font-weight:800; opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s; }
#comboTag.show{ opacity:1; transform:scale(1); }
#comboBar{ position:absolute; left:0; bottom:-6px; height:4px; width:0%; background:linear-gradient(90deg,#8af,#f7a); border-radius:999px; }
.fever{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.fever-bar{ position:relative; width:min(280px, 32vw); height:8px; background:#1a213f; border:1px solid #2a2f58; border-radius:999px; overflow:hidden; }
.fever-bar i{ position:absolute; left:0; top:0; bottom:0; width:calc(var(--fever) * 100%); background: linear-gradient(90deg,#ffb75e,#fe72b2); border-right:1px solid rgba(255,255,255,.4); }
.fever-sweep{ position:absolute; top:-4px; bottom:-4px; background: radial-gradient(30px 30px at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); pointer-events:none; }
.stars-wrap{ font-weight:800; }

.actions{ display:flex; flex-wrap:wrap; gap:8px; }

.content{
  display:grid; grid-template-columns: 1fr; gap:16px; align-items:start;
}

/* 橫向：左 70%（棋盤），右 30%（側欄） */
@media (min-width: 900px) and (min-aspect-ratio: 5/4){
  .content{
    grid-template-columns: minmax(300px, 70%) minmax(280px, 30%);
    align-items: start;
  }
  .board-wrap{ justify-self: end; }
  .side{ justify-self: start; width: var(--side-w); }
}

.board-wrap{ display:flex; justify-content:center; }
.board{
  position:relative;
  width: var(--board-size);
  height: var(--board-size);
  padding: clamp(8px, var(--board-size) * .02, 14px);
  background: #11193b;
  border: 1px solid #2a3568;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 60px rgba(30,45,90,.25);
  overflow:hidden;
}

.cells{
  display:grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  grid-template-rows: repeat(var(--grid-size), 1fr);
  gap: clamp(4px, var(--board-size) * .012, 10px);
  width:100%; height:100%;
}

.cell{
  position:relative; border-radius: 12px; background: #131a3c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.03), inset 0 -10px 18px rgba(0,0,0,.35);
}
.cell .tile{
  position:absolute; inset:0; border-radius:12px; background:#79f;
  box-shadow: inset 0 8px 16px rgba(255,255,255,.12), inset 0 -14px 22px rgba(0,0,0,.35);
  transition: transform .15s ease, opacity .15s ease;
}
.cell .tile.appear{ transform: scale(.85); opacity:.8; animation: pop .18s ease forwards; }
.cell .tile.clearing{ animation: fadeOut .26s var(--delay,0ms) ease both; }
@keyframes pop{ to{ transform:scale(1); opacity:1; } }
@keyframes fadeOut{ 60%{ transform:scale(.96); opacity:.2; } 100%{ transform:scale(1); opacity:0; } }

/* 幽靈層／曲線：放在 board 內部，零位移 */
#ghost, #fx{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }

/* 幽靈格允許小數座標；不要硬取整，並啟用 GPU 管線 */
.ghost-cell{
  position:absolute;
  border-radius:10px;
  background: rgba(122,162,255,.14);
  box-shadow: 0 0 0 2px rgba(122,162,255,.35) inset;
  will-change: transform, left, top, width, height;
}
.ghost-cell.ghost-invalid{
  background: rgba(255,95,95,.18);
  box-shadow: 0 0 0 2px rgba(255,95,95,.45) inset;
}

.cell.highlight{ outline: 3px solid rgba(122,162,255,.65); outline-offset: 2px; }

.side{ display:grid; gap:14px; }
.hold-row{ display:grid; grid-template-columns: auto 1fr auto; gap:10px; align-items:center; }
.hold-label{ color:#cfe1ff; font-weight:800; }
.hold-slot{
  min-height: 120px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; border:1px dashed #33407a; background:#121a34; color:#a3acd6;
  padding:12px;
}
.tools{ display:flex; gap:8px; }
.tools button{ width:48px; height:48px; display:grid; place-items:center; font-size:20px; }

.tray{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }

/* slot 使用 contain，避免 transform 影響外層 reflow */
.slot{
  min-height: 160px; display:grid; place-items:center;
  background: #151d3d; border:1px solid #2a3568; border-radius:16px;
  padding:16px; position:relative;
  transition: box-shadow .15s ease;
  contain: layout paint;
}
.slot.hint{ box-shadow: 0 0 0 2px #7aa2ff; }

/* 內層全部置中，確保 1/2 顆也穩定居中 */
.slot .pwrap,
.slot .pinner { width:100%; height:100%; display:grid; place-items:center; }

.piece{
  display:grid; gap:6px; /* 會由 JS 設定 gridTemplateColumns/Rows */
  transform-origin:center;
}
.cell-mini{
  width: var(--tray-cell); height: var(--tray-cell); border-radius:10px;
  box-shadow: inset 0 7px 12px rgba(255,255,255,.12), inset 0 -10px 16px rgba(0,0,0,.35);
}
.slot .piece.grabbed{ opacity:.82; filter:saturate(.95); }

.help{ color:#cfe1ff; }
.muted{ color:var(--muted); }

.drag-proxy{
  position: fixed; left: 0; top: 0; transform-origin: top left; z-index: 30;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
.guide-proxy{
  position: fixed; left: 0; top: 0; transform-origin: top left; z-index: 25;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.28));
}
.star-fly{ position: fixed; z-index: 40; pointer-events:none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }

.hammer-cursor{ cursor: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><text y="18" font-size="18">🔨</text></svg>') 8 16, crosshair; }

/* Panels / overlay */
.overlay{ position:fixed; inset:0; display:none; place-items:center; background:rgba(2,8,20,.66); z-index:50; }
.overlay.show{ display:grid; }
.panel{
  background: #0f162e; border:1px solid #2a3568; border-radius:16px; padding:18px; width:min(92vw, 520px);
}
.panel.wide{ width:min(96vw, 760px); }
.panel h2{ margin:6px 0 6px; }
.panel .row{ display:flex; gap:10px; justify-content:flex-end; }

/* Toast */
.toasts{ position:fixed; left:0; right:0; top:12px; display:grid; place-items:center; gap:6px; z-index:60; pointer-events:none; }
.toast{ background:#1b2347; border:1px solid #33407a; border-radius:12px; padding:8px 12px; animation: toastIn .15s ease both; }
@keyframes toastIn{ from{ transform:translateY(-6px); opacity:.0; } to{ transform:translateY(0); opacity:1; } }

/* 降噪模式（低 FPS） */
.lowfx .cell .tile{ box-shadow: none; }
.lowfx .cell{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.04); }
.lowfx .cell-mini{ box-shadow: inset 0 5px 8px rgba(255,255,255,.08), inset 0 -8px 12px rgba(0,0,0,.3); }

/* 高對比 */
:root.contrast .cell{ background:#0e1433; }
:root.contrast .cell .tile{ box-shadow: inset 0 10px 18px rgba(255,255,255,.16), inset 0 -16px 26px rgba(0,0,0,.5); }

/* 小裝置優化 */
@media (max-width: 480px){
  .slot{ min-height: 140px; }
  .hold-slot{ min-height: 110px; }
}
.sr{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }