/* 萬聖節版 Charta 單色系：紫黑夜色 + 南瓜橘 + 骨白；brick（血紅）只給失敗類功能色。
   變數名沿用一代（navy / gold），值換成萬聖節色 */
:root {
  --navy: #16111f;
  --navy-light: #1e1729;
  --navy-mid: #2b2140;
  --navy-soft: #3b2d55;
  --gold: #e8862f;
  --gold-dim: #b8672a;
  --gold-glow: rgba(232,134,47,0.12);
  --gold-line: rgba(232,134,47,0.25);
  --gold-line-strong: rgba(232,134,47,0.45);
  --cream: #f5f0e6;
  --cream-dim: rgba(245,240,230,0.65);
  --cream-faint: rgba(245,240,230,0.35);
  --warm-gray: #8e8296;
  --brick: #c23b3b;
  --leather: #2b211b;

  --serif-en: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --serif-zh: 'Noto Serif TC', 'Songti TC', 'Noto Serif', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--navy);
  color: var(--cream);
  font-family: var(--serif-zh);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.obs, body.obs .stage { background: transparent; }
body.obs .shelf, body.obs .moon, body.obs .web { display: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

#app { max-width: 1200px; margin: 0 auto; padding: 20px 24px 12px; min-height: 100vh; display: flex; flex-direction: column; }

/* ── 頂欄 ── */
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--gold-line); padding-bottom: 12px; }
.brand-en { font-family: var(--serif-en); font-style: italic; color: var(--gold); letter-spacing: .08em; font-size: 15px; }
h1 { margin: 2px 0 0; font-size: 26px; font-weight: 700; letter-spacing: .06em; }
.meters { display: flex; gap: 20px; }
.meter { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.meter-label { color: var(--cream-dim); letter-spacing: .1em; }
.pip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--gold); margin-left: 3px; }
.pip.on { background: var(--gold); }
.pip.low { border-color: var(--brick); background: var(--brick); }
#aff { font-family: var(--serif-en); color: var(--gold); font-size: 17px; }

/* ── 版面 ── */
.layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; padding: 20px 0; align-items: start; }
/* 舞台固定高度並黏在畫面上：右邊面板變高時零韻不會被拉到畫面外 */
.stage {
  position: sticky; top: 16px; height: min(720px, calc(100vh - 150px)); min-height: 560px; overflow: hidden;
  border: 1px solid var(--gold-line);
  background:
    radial-gradient(ellipse at 50% 40%, var(--navy-mid), var(--navy-light) 70%);
}
/* 書架：皮革書脊直條 */
.shelf {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  border-top: 2px solid var(--gold-line-strong);
  background:
    repeating-linear-gradient(90deg,
      var(--leather) 0 14px, #33271f 14px 16px, #241b16 16px 31px, var(--gold-line) 31px 32px,
      #2e231c 32px 49px, #1f1813 49px 51px, #382a21 51px 62px, var(--gold-line) 62px 63px);
  opacity: .75;
}
/* 萬聖節夜：滿月、角落蜘蛛網、書架上的燭光 */
.stage { background: radial-gradient(ellipse at 50% 40%, var(--navy-mid), var(--navy-light) 70%); }
.moon {
  position: absolute; right: 9%; top: 74px; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fbf3e2, #e9dcc2 62%, #d9c8a8);
  box-shadow: 0 0 30px 8px rgba(245,232,205,.18), 0 0 90px 30px rgba(232,134,47,.08);
}
.moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 64% 60%, rgba(150,130,110,.28) 0 8px, transparent 9px), radial-gradient(circle at 34% 66%, rgba(150,130,110,.2) 0 5px, transparent 6px), radial-gradient(circle at 58% 30%, rgba(150,130,110,.18) 0 4px, transparent 5px); }
.web {
  position: absolute; left: 0; top: 0; width: 150px; height: 150px; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%23f5f0e6' stroke-opacity='.45' stroke-width='.8'%3E%3Cpath d='M0 0L150 6M0 0L130 70M0 0L80 120M0 0L30 148M0 0L4 150'/%3E%3Cpath d='M30 1Q24 13 27 14Q16 20 16 30Q8 30 6 31'/%3E%3Cpath d='M62 3Q50 25 54 28Q34 40 32 60Q16 60 13 63'/%3E%3Cpath d='M96 4Q78 38 82 43Q54 62 50 92Q26 92 20 97'/%3E%3Cpath d='M128 5Q106 52 110 58Q74 84 68 122Q36 122 27 130'/%3E%3C/svg%3E") no-repeat;
}
.candle { position: absolute; bottom: 100%; width: 11px; height: 30px; margin-bottom: -2px; background: linear-gradient(90deg, #e9dcc2, #f8f0de 45%, #cfc0a0); border-radius: 2px 2px 1px 1px; }
.candle.tall { height: 44px; }
.candle::before { content: ""; position: absolute; left: 50%; bottom: calc(100% - 1px); width: 1.5px; height: 5px; background: #3e2f1f; transform: translateX(-50%); }
.candle::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); width: 9px; height: 15px; margin-left: -4.5px;
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #fff4d6 0 20%, #ffc56b 45%, #e8862f 75%, transparent 78%);
  box-shadow: 0 0 18px 6px rgba(232,134,47,.35); transform-origin: 50% 100%;
  animation: flicker 2.6s steps(1, end) infinite;
}
.candle.tall::after { animation-delay: -1.1s; }
/* 燭火：幾個停格的姿態輪流切換 */
@keyframes flicker {
  0% { transform: scale(1, 1) rotate(0); opacity: 1; }
  18% { transform: scale(.92, 1.08) rotate(-3deg); opacity: .95; }
  31% { transform: scale(1.05, .94) rotate(2deg); opacity: 1; }
  47% { transform: scale(.96, 1.12) rotate(-1deg); opacity: .9; }
  63% { transform: scale(1, .97) rotate(3deg); opacity: 1; }
  80% { transform: scale(.94, 1.05) rotate(-2deg); opacity: .93; }
}
.shelf { overflow: visible; }
.rein-wrap { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 86%; display: flex; justify-content: center; transition: transform 1.6s cubic-bezier(.3,.6,.3,1); }
.rein-wrap img { display: block; height: min(520px, 62vh); width: auto; max-width: 100%; object-fit: contain; object-position: bottom; animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.rein-wrap.float { transform: translateX(-50%) translateY(-34px) rotate(-2.5deg); }
.rein-wrap.float img { animation: drift 3.4s ease-in-out infinite; }
.rein-wrap.chew img { animation: chew .16s linear 6; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes chew { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-3px,2px); } 75% { transform: translate(3px,-1px); } }

.bubble {
  position: absolute; top: 18px; left: 18px; right: 18px; z-index: 3;
  background: rgba(22,17,31,.88); border: 1px solid var(--gold-line-strong);
  padding: 10px 14px; font-size: 15px; min-height: 48px;
  opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s;
}
.bubble.show { opacity: 1; transform: none; }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }

/* ── 右側面板 ── */
.panel { border: 1px solid var(--gold-line); background: var(--navy-light); padding: 26px 28px; display: flex; flex-direction: column; min-width: 0; }
.screen { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.eyebrow { margin: 0; font-family: var(--serif-en); font-style: italic; color: var(--gold); letter-spacing: .06em; font-size: 15px; }
h2 { margin: 0; font-size: 24px; letter-spacing: .05em; }
.lead { margin: 0; color: var(--cream-dim); }
.lead b { color: var(--gold); font-family: var(--serif-en); font-size: 1.15em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px; min-height: 44px; border: 1px solid var(--gold-line-strong); background: transparent;
  color: var(--cream); cursor: pointer; letter-spacing: .12em; text-decoration: none; font-size: 15px;
  transition: background .15s, border-color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-glow); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #f09a48; }
.btn:disabled { opacity: .35; cursor: default; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.linkbtn { background: none; border: 0; color: var(--cream-faint); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
#btnStart { align-self: flex-start; }

.rules { border-top: 1px solid var(--gold-line); padding-top: 10px; color: var(--cream-dim); font-size: 14px; }
.rules summary { cursor: pointer; color: var(--gold); letter-spacing: .08em; }
.rules ul { margin: 8px 0 0; padding-left: 20px; }
.album { border-top: 1px solid var(--gold-line); padding-top: 10px; font-size: 13px; color: var(--cream-dim); }
.album h3 { margin: 0 0 6px; font-size: 14px; color: var(--gold); letter-spacing: .1em; font-weight: 600; }
.album ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.album li { border: 1px solid var(--gold-line); padding: 1px 8px; }
.album li.got { border-color: var(--gold); color: var(--gold); }

/* 容器 */
.containers { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cont {
  text-align: left; border: 1px solid var(--gold-line); background: var(--navy); padding: 12px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, background .15s;
}
.cont:hover { border-color: var(--gold); background: var(--navy-mid); }
.cont-name { font-weight: 700; font-size: 16px; }
.cont-rule { font-size: 13px; color: var(--cream-dim); line-height: 1.55; }
.cont-lore { font-size: 12px; color: var(--warm-gray); line-height: 1.5; }

/* 盤子 */
.plate-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.plate-head h2 { font-size: 22px; }
.estimate { text-align: right; display: flex; flex-direction: column; line-height: 1.3; flex-shrink: 0; }
.est-label { font-size: 12px; color: var(--cream-dim); letter-spacing: .1em; }
.est-value { font-family: var(--serif-en); font-size: 30px; color: var(--gold); font-weight: 600; }
.est-line { font-size: 12px; color: var(--cream-faint); }
.board { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
/* 盤子＋上方擺盪的手；格數由 game.js 依 config.cols / rows 設定 */
.well { flex: 0 1 380px; min-width: 0; position: relative; display: flex; flex-direction: column; }
.plate {
  width: 100%; padding: 14px; border-radius: 4px 4px 18px 18px;
  border: 1px solid var(--gold-line-strong); border-top-style: dashed; box-shadow: inset 0 0 0 6px var(--navy-light), inset 0 0 0 7px var(--gold-line);
  background: radial-gradient(circle at 50% 80%, var(--navy-mid), var(--navy) 78%);
  display: grid; gap: 6px; position: relative;
  transition: transform .6s cubic-bezier(.5,-0.4,.7,1.4);
}
.plate.flipped { transform: rotate(-14deg) translateY(-30px); }
.plate.spilled { transform: rotate(22deg) translate(40px, 16px); }
/* 材料層：跟格子同一張 grid，多格材料用 span 疊上去 */
.pieces { position: absolute; inset: 14px; pointer-events: none; display: grid; gap: 6px; }
.dropper { height: 74px; padding: 0 15px; }
.track { position: relative; height: 100%; }
.track::before { content: ""; position: absolute; left: -8px; right: -8px; top: 6px; border-top: 1px solid var(--gold-line-strong); }
.hand {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
  animation: swing var(--swing, 1300ms) linear infinite alternate;
}
.hand::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--gold); border-radius: 50%; margin-top: -4px; background: var(--navy-light); }
.hand::after { content: ""; order: 1; width: 1px; height: 14px; background: var(--gold); }
/* 吊著的方塊：跟落盤時同一套樣式，縮小掛在繩子下 */
.hand-piece { position: absolute; left: 0; width: 100%; display: grid; gap: 6px; transform-origin: 50% 0; pointer-events: none; }
.hand-piece .piece { cursor: default; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.hand.idle { animation: none; left: calc(50% - var(--w) / 2); }
.hand.idle::after { opacity: .4; }
.hand.held { animation-play-state: paused; }
.hand-item {
  order: 2; display: flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; white-space: nowrap;
  border: 1px solid var(--gold); background: var(--navy); padding: 2px 7px; font-size: 12px; box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.hand-item.empty { border-color: var(--gold-line); color: var(--cream-faint); box-shadow: none; }
.hand-item .shape-mini { margin-left: 2px; }
/* 擺盪：兩端停一下再折返 */
@keyframes swing { 0%, 10% { left: 0; } 90%, 100% { left: calc(100% - var(--w)); } }
.pop {
  position: absolute; left: 50%; top: 52%; z-index: 6; pointer-events: none; white-space: nowrap;
  font-size: 22px; font-weight: 700; letter-spacing: .12em; color: var(--gold); text-shadow: 0 2px 0 var(--navy), 0 0 12px rgba(232,134,47,.5);
}
.pop.big { font-size: clamp(24px, 3.2vw, 34px); padding: 6px 18px; border: 3px double var(--gold); background: rgba(22,17,31,.92); }
.piece {
  pointer-events: auto; cursor: pointer; position: relative; min-width: 0; min-height: 0;
  border: 1px solid var(--gold-line); border-radius: 8px; background: var(--navy);
  display: grid; padding: 3px; transition: transform .5s ease-in, opacity .5s ease-in;
}
.piece.rar-SR { border-color: var(--gold-line-strong); background: linear-gradient(160deg, var(--navy-mid), var(--navy)); }
.piece.rar-SSR { border-color: var(--gold); background: linear-gradient(160deg, #33274a, var(--navy)); }
.piece.rar-UR { border: 3px double var(--gold); background: radial-gradient(circle at 30% 20%, rgba(232,134,47,.22), var(--navy) 70%); box-shadow: 0 0 14px rgba(232,134,47,.25); }
.piece.L { border-radius: 0; }
.piece.enter { animation: tokIn .45s cubic-bezier(.2,.9,.3,1.3); }
.piece:hover { filter: brightness(1.15); }
.piece .tok { border: 0; background: transparent; padding: 2px; }
.piece.bad { border-color: var(--brick); }
.piece.off { opacity: .45; }
.piece.off .tok-name { text-decoration: line-through; }
.piece.flash { animation: cellFlash .7s ease-out; }
.cell { position: relative; border: 1px dashed var(--gold-line); border-radius: 8px; background: rgba(22,17,31,.55); min-width: 0; min-height: 0; aspect-ratio: 1; }
.cell.rim { border-top-color: var(--gold-line-strong); }
.cell.danger { background: rgba(194,59,59,.16); border-color: rgba(194,59,59,.55); }
/* 落點影子 */
.cell.ghost { background: repeating-linear-gradient(135deg, rgba(232,134,47,.3) 0 7px, rgba(232,134,47,.08) 7px 14px); border: 1px solid var(--gold); }
.cell.ghost.perfect { background: rgba(232,134,47,.42); border: 2px solid var(--gold); box-shadow: 0 0 14px rgba(232,134,47,.55); }
/* 落點飄字：判定與得分 */
.float-txt { position: absolute; z-index: 7; pointer-events: none; white-space: nowrap; font-weight: 700; letter-spacing: .06em; text-shadow: 0 2px 0 var(--navy), 0 0 8px rgba(0,0,0,.6); }
.float-txt.perfect { font-family: var(--serif-en); font-size: 22px; color: var(--gold); text-shadow: 0 2px 0 var(--navy), 0 0 14px rgba(232,134,47,.8); }
.float-txt.good { font-family: var(--serif-en); font-size: 18px; color: var(--cream); }
.float-txt.miss { font-size: 15px; color: #ec8f8f; }
.float-txt.pts { font-family: var(--serif-en); font-size: 17px; color: var(--gold); }
.float-txt.pts.neg { color: #ec8f8f; }
/* 打擊感：碎屑、Perfect 光環、連擊牌 */
.spark { position: fixed; border-radius: 50%; pointer-events: none; }
.ring { position: fixed; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(232,134,47,.7), inset 0 0 12px rgba(232,134,47,.5); pointer-events: none; }
.combo-badge { position: absolute; right: 2px; top: 2px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; pointer-events: none; font-family: var(--serif-en); color: var(--gold); transform-origin: 100% 0; }
.combo-badge small { font-size: 11px; letter-spacing: .25em; color: var(--cream-dim); background: var(--navy-light); padding: 0 2px 0 6px; }
.combo-badge b { font-size: 30px; font-weight: 600; text-shadow: 0 2px 0 var(--navy), 0 0 12px rgba(232,134,47,.5); }
.combo-badge.lv3 b { font-size: 34px; }
.combo-badge.lv4 b { font-size: 39px; color: #f09a48; text-shadow: 0 2px 0 var(--navy), 0 0 18px rgba(232,134,47,.8); }
.combo-badge.lv5 b { font-size: 44px; color: #ffd08a; text-shadow: 0 2px 0 var(--navy), 0 0 24px rgba(232,134,47,1); }
.combo-badge.broken { font-size: 14px; letter-spacing: .12em; color: #ec8f8f; font-family: inherit; font-weight: 700; }
.est-value { display: inline-block; transform-origin: 100% 50%; }
.cell.ghost.bad { background: repeating-linear-gradient(135deg, rgba(194,59,59,.45) 0 7px, rgba(194,59,59,.12) 7px 14px); border-color: var(--brick); }
.rabbit { position: absolute; left: 0; bottom: 0; width: 50px; z-index: 3; pointer-events: none; }
.rabbit svg { display: block; width: 100%; height: auto; }
@keyframes cellFlash { from { box-shadow: 0 0 0 3px var(--gold); } to { box-shadow: 0 0 0 0 transparent; } }
/* 合體塊：一格一片拼起來，完成的套裝整塊發光 */
.piece.fused { border-color: var(--gold); background: #2a2040; }
.piece.fused.done { background: linear-gradient(rgba(232,134,47,.16), rgba(232,134,47,.16)), var(--navy); border-color: var(--gold); }
.piece.part { position: relative; z-index: 1; }
/* 盤上的卡比手上的小一號，單格也塞得下 */
.piece .tok { gap: 0; padding: 1px; overflow: hidden; }
.piece .tok-icon { width: 30px; height: 30px; }
.piece .tok-icon svg { width: 24px; height: 28px; }
.piece .seal { width: 26px; height: 26px; font-size: 13px; }
.piece .tok-name { font-size: 11.5px; line-height: 1.25; }
.piece .tok-meta { font-size: 10.5px; line-height: 1.2; }
.piece .el, .piece .rel { font-size: 10px; top: 1px; }
.seal.done { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.tok.done .tok-meta { color: var(--gold); }
.chip.dim { border-color: var(--gold-line-strong); color: var(--cream-dim); }
.info-members { margin: 0; padding: 0; list-style: none; font-size: 13px; border-top: 1px solid var(--gold-line); padding-top: 6px; }
.info-members li { display: flex; align-items: center; gap: 6px; }
.info-members b { margin-left: auto; font-weight: 600; color: var(--cream-dim); font-family: var(--serif-en), var(--serif-zh); }

.side { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tray { border: 1px solid var(--gold-line); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.tray.active { border-color: var(--gold); background: var(--gold-glow); }
.tray-label { margin: 0; font-size: 12px; color: var(--cream-dim); letter-spacing: .12em; }
.tray-slot { width: 100%; max-width: 130px; min-height: 92px; display: flex; }
.tray-slot .tok { flex: 1; }
.tray-empty { margin: auto; color: var(--cream-faint); font-size: 13px; }
.tray-hint { margin: 0; font-size: 12.5px; color: var(--gold); min-height: 1.2em; line-height: 1.5; }
.tray-lore { margin: 2px 0 0; align-self: stretch; text-align: left; font-size: 12.5px; line-height: 1.6; color: var(--warm-gray); border-left: 2px solid var(--gold-line); padding-left: 10px; }
.btn.small { min-height: 34px; padding: 4px 14px; font-size: 13px; }
.tray-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tray-slot .tok { cursor: pointer; }
.shape-mini { display: inline-grid; grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); gap: 1px; vertical-align: middle; margin-left: 4px; }
.shape-mini i { background: var(--gold-line); }
.shape-mini i.on { background: var(--gold); }

/* 稀有度徽章：同色系深淺，不用彩虹色 */
.rar { display: inline-block; font-family: var(--serif-en); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; line-height: 1.3; padding: 0 4px; border: 1px solid var(--gold-line-strong); color: var(--gold); vertical-align: 1px; }
.rar-R .rar, .rar.R { border-color: var(--gold-line); color: var(--cream-dim); }
.rar.SSR { background: var(--gold-glow); border-color: var(--gold); }
.rar.UR { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 11px; white-space: nowrap; }
.stars .dim { color: var(--gold-line-strong); }
.tok-stars { font-size: 10.5px; color: var(--cream-dim); white-space: nowrap; }

/* 整盤色香味 */
.dish { border: 1px solid var(--gold-line); padding: 8px 10px; font-size: 13px; display: grid; grid-template-columns: auto 1fr auto; gap: 1px 8px; align-items: center; }
.dish .ax { color: var(--cream-dim); }
.dish .avg { font-family: var(--serif-en); color: var(--cream-faint); font-size: 12px; text-align: right; }
.dish .mult { grid-column: 1 / -1; border-top: 1px solid var(--gold-line); margin-top: 4px; padding-top: 4px; display: flex; justify-content: space-between; color: var(--cream-dim); }
.dish .mult b { color: var(--gold); font-family: var(--serif-en); font-size: 15px; }

/* 五行：右上角屬性字，左上角生剋標記 */
.el { position: absolute; top: 3px; right: 5px; font-size: 11px; color: var(--gold-dim); font-weight: 600; pointer-events: none; }
.rel { position: absolute; top: 3px; left: 5px; font-size: 10px; letter-spacing: .02em; pointer-events: none; display: flex; gap: 2px; }
.rel .g { color: var(--gold); }
.rel .k { color: #ec8f8f; }
.tray-slot .tok { position: relative; }
.req { font-size: 12px; color: var(--cream-dim); }
.req b { color: var(--gold); font-family: var(--serif-en); }
.req .ok { color: var(--gold); }
.dish .ax.need { color: var(--gold); }
.dish .avg.met { color: var(--gold); }
.foot-btns { display: flex; gap: 14px; }

/* 食材圖鑑 */
.dex-modal { z-index: 65; }
.dex-box { position: relative; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--navy-light); border: 1px solid var(--gold); padding: 18px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.dex-box h3 { margin: 0; font-size: 20px; letter-spacing: .08em; }
.dex-note { margin: 2px 0 10px; font-size: 12px; color: var(--cream-faint); }
.dex-zone { margin: 12px 0 6px; font-size: 13px; color: var(--gold); letter-spacing: .12em; border-bottom: 1px solid var(--gold-line); padding-bottom: 3px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dex-item { text-align: left; border: 1px solid var(--gold-line); background: var(--navy); padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; font-size: 13px; cursor: pointer; min-width: 0; }
.dex-item:hover { border-color: var(--gold); }
.dex-item.unknown { cursor: default; color: var(--cream-faint); }
.dex-item .dn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dex-item .dm { font-size: 11px; color: var(--cream-dim); }

/* 材料詳情 */
.info-modal { z-index: 70; }
.info-box { position: relative; width: min(360px, calc(100vw - 32px)); background: var(--navy-light); border: 1px solid var(--gold); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.info-box h3 { margin: 0; font-size: 20px; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.info-box .rar { font-size: 13px; }
.info-close { position: absolute; right: 8px; top: 6px; background: none; border: 0; color: var(--cream-dim); font-size: 22px; cursor: pointer; line-height: 1; }
.info-taste { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; font-size: 15px; }
.info-taste .stars { font-size: 16px; }
.info-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--cream-dim); border-top: 1px solid var(--gold-line); padding-top: 8px; }
.info-meta b { color: var(--cream); font-weight: 600; }
.info-effect { font-size: 13.5px; margin: 0; }
.info-effect b { color: var(--gold); }
.info-lore { font-size: 12.5px; color: var(--warm-gray); margin: 0; border-left: 2px solid var(--gold-line); padding-left: 10px; }
.combo-line { display: flex; flex-wrap: wrap; gap: 5px; }

.tok {
  position: relative; flex: 1; border: 1px solid var(--gold-line); background: var(--navy); padding: 4px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; min-width: 0;
  transition: transform .5s ease-in, opacity .5s ease-in;
}
.tok.enter { animation: tokIn .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes tokIn { from { transform: translateY(-18px) rotateY(80deg); opacity: 0; } to { transform: none; opacity: 1; } }
.tok-icon { width: 38px; height: 44px; color: var(--gold); display: flex; align-items: center; justify-content: center; }
.seal { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; }
.tok-name { font-size: 12.5px; line-height: 1.3; word-break: break-all; }
.tok-meta { font-size: 11px; color: var(--cream-dim); font-family: var(--serif-en), var(--serif-zh); letter-spacing: .03em; }
.tok.bad { border-color: var(--brick); }
.tok.bad .tok-meta { color: #ec8f8f; }
.tok.off { opacity: .45; }
.tok.off .tok-name { text-decoration: line-through; }
.tok.warn { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); }
.tok.used .tok-meta::after { content: "・已用"; }

.log { margin: 0; min-height: 3.4em; color: var(--cream-dim); font-size: 14px; }

/* 結算 */
.stamp-big {
  align-self: flex-start; font-family: var(--serif-en); font-weight: 600; font-size: 44px; letter-spacing: .14em;
  border: 3px double var(--gold); color: var(--gold); padding: 0 18px; transform: rotate(-4deg); margin: 6px 0 4px;
  animation: slam .35s cubic-bezier(.2,1.6,.4,1);
}
.stamp-big.fail { color: var(--brick); border-color: var(--brick); }
.stamp-big.zh { font-family: var(--serif-zh); font-size: 36px; }
@keyframes slam { from { transform: rotate(-4deg) scale(2.2); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
.res-score { margin: 0; font-size: 15px; color: var(--cream-dim); }
.res-score b { font-family: var(--serif-en); font-size: 26px; color: var(--gold); }
.res-verdict { margin: 0; border-left: 2px solid var(--gold); padding: 4px 0 4px 14px; font-size: 17px; }
.res-verdict p { margin: 0 0 4px; }
.res-verdict p + p { font-size: 14px; color: var(--cream-dim); }
.trick-box { border: 1px solid var(--brick); padding: 10px 14px; }
.trick-box b { color: #ec8f8f; font-family: var(--serif-en); letter-spacing: .08em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--gold); color: var(--gold); padding: 1px 10px; font-size: 13px; }

.foot { display: flex; justify-content: space-between; align-items: center; color: var(--cream-faint); font-size: 13px; border-top: 1px solid var(--gold-line); padding-top: 10px; }

/* ── 特效 ── */
.heart { position: absolute; color: var(--gold); font-size: var(--s, 22px); animation: heart 1.6s ease-out forwards; animation-delay: var(--d, 0s); opacity: 0; }
@keyframes heart {
  0% { transform: translate(0,0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}
.crumb { position: absolute; width: 5px; height: 5px; background: var(--gold); border-radius: 1px; animation: crumb .7s ease-in forwards; animation-delay: var(--d, 0s); }
@keyframes crumb { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
.slam-text {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%) rotate(-8deg);
  font-size: clamp(48px, 9vw, 96px); font-weight: 700; color: var(--brick); letter-spacing: .1em;
  text-shadow: 0 0 0 var(--navy), 4px 4px 0 var(--navy);
  animation: slamText 1.4s cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes slamText { 0% { transform: translate(-50%,-50%) rotate(-8deg) scale(3); opacity: 0; } 20% { transform: translate(-50%,-50%) rotate(-8deg) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.shake { animation: shake .45s linear; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-9px,4px); } 40% { transform: translate(8px,-5px); } 60% { transform: translate(-6px,-3px); } 80% { transform: translate(5px,5px); } }

.overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
/* ── Trick 霸屏演出（game.js 的 TRICKS 逐格編排） ── */
.trick { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: auto; cursor: default; }
.trick-cap {
  position: absolute; left: 50%; bottom: 10vh; z-index: 5; width: max-content; max-width: min(760px, 88vw);
  background: rgba(22,17,31,.94); border: 1px solid var(--brick); box-shadow: 0 10px 40px rgba(0,0,0,.6);
  padding: 14px 28px 16px; text-align: center; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.5; color: var(--cream);
}
.trick-cap b { display: block; font-family: var(--serif-en); font-weight: 600; color: #ec8f8f; letter-spacing: .28em; font-size: 14px; margin-bottom: 2px; }
.tk-veil { position: absolute; inset: 0; background: rgba(9,6,14,.78); }
/* jump scare：暗場、衝臉、紅暈、白閃 */
.tk-hush { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(6,4,10,.86), #000 70%); opacity: 0; z-index: 2; }
.tk-scare { position: absolute; left: 50%; top: 50%; height: 230vh; width: auto; max-width: none; transform: translate(-50%,-42%); filter: grayscale(1) contrast(1.75) brightness(.82); z-index: 3; }
.tk-red { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 28%, rgba(150,14,14,.7) 78%); z-index: 4; }
.tk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 5; pointer-events: none; }
.tk-dark { position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent 0 90px, rgba(4,6,10,.985) 135px); }
.tk-peek { position: absolute; height: 34vh; width: auto; transform: translate(-50%,-50%); filter: drop-shadow(0 0 24px rgba(0,0,0,.8)); }
.tk-parade { position: absolute; left: 0; bottom: 22vh; display: flex; align-items: flex-end; gap: 34px; padding: 0 40px; }
.tk-yokai { display: block; aspect-ratio: 3 / 4; color: var(--cream); }
.tk-yokai svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(245,240,230,.35)); }
.tk-band { position: absolute; left: -10vw; width: 120vw; height: 17vh; background: repeating-linear-gradient(90deg, #efe6d2 0 46px, #e2d5ba 46px 49px); box-shadow: 0 6px 16px rgba(0,0,0,.45); border-top: 1px solid #d3c4a2; border-bottom: 1px solid #c8b893; }
.tk-nocursor, .tk-nocursor * { cursor: none !important; }
.tk-cursor { position: absolute; z-index: 3; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.tk-thief { position: absolute; height: 34vh; width: auto; z-index: 2; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.tk-pumpkin { position: absolute; left: 50%; top: 50%; width: min(92vmin, 900px); transform: translate(-50%, -160vh); filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); }
.tk-pumpkin svg { width: 100%; height: auto; display: block; }
.tk-pumpkin .glow { opacity: 0; filter: drop-shadow(0 0 10px #ffd08a); }
.tk-bat { position: absolute; left: 0; display: block; }
.tk-bat svg { width: 100%; height: auto; display: block; transform-origin: 50% 40%; }
.tk-splat { position: absolute; transform-origin: 50% 50%; opacity: 0; }
.tk-splat svg { width: 100%; height: 100%; }
.tk-drip { position: absolute; width: 14px; height: 26vh; background: #110c18; border-radius: 0 0 8px 8px; transform-origin: top; transform: scaleY(0); }
.tk-book { position: absolute; top: 0; border: 1px solid rgba(232,134,47,.35); border-radius: 2px; box-shadow: inset 0 10px 0 -6px rgba(232,134,47,.4), inset 0 -10px 0 -6px rgba(232,134,47,.4); }

/* 暴走追殺 */
.chase { position: absolute; bottom: 8vh; left: 0; display: flex; align-items: flex-end; gap: 30px; animation: chase 3.2s linear forwards; }
.chase img { height: 34vh; animation: chew .2s linear infinite; }
.victim { width: 64px; height: 64px; border-radius: 50%; background: var(--cream); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; animation: chew .15s linear infinite; margin-bottom: 20px; }
@keyframes chase { from { transform: translateX(110vw); } to { transform: translateX(-120%); } }

/* ── 證書（截圖用，放畫面外） ── */
.cert-holder { position: fixed; left: -4000px; top: 0; }
.cert {
  width: 540px; height: 675px; position: relative; overflow: hidden;
  background: var(--cream); color: var(--navy); font-family: var(--serif-zh);
  padding: 30px 34px 26px; display: flex; flex-direction: column;
}
.cert::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold-dim); pointer-events: none; }
.cert::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(184,103,42,.45); pointer-events: none; }
.c-head { text-align: center; border-bottom: 1px solid var(--gold-dim); padding-bottom: 8px; }
.c-en { font-family: var(--serif-en); font-style: italic; letter-spacing: .14em; font-size: 12px; color: var(--gold-dim); }
.c-title { font-size: 21px; font-weight: 700; letter-spacing: .3em; margin-top: 2px; }
.c-no { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--warm-gray); margin-top: 4px; font-family: var(--serif-en), var(--serif-zh); letter-spacing: .05em; }
.c-dish { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; margin: 8px 0 0; font-size: 22px; font-weight: 700; letter-spacing: .06em; line-height: 1.35; }
.c-pixel { width: 80px; height: 80px; flex-shrink: 0; image-rendering: pixelated; margin: -12px -6px -12px -10px; }
.c-cont { text-align: center; font-size: 12px; color: var(--warm-gray); margin-bottom: 8px; }
.c-list { font-size: 12.5px; line-height: 1.55; column-gap: 22px; }
.c-list.two { columns: 2; font-size: 11.5px; }
.c-row { display: flex; gap: 6px; break-inside: avoid; }
.c-row .n { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.c-row .p { font-family: var(--serif-en); font-weight: 600; white-space: nowrap; }
.c-row.off .n { text-decoration: line-through; color: var(--warm-gray); }
.c-row.off .p { color: var(--warm-gray); }
.c-row.extra { color: var(--gold-dim); font-style: italic; }
.c-row .rk { font-family: var(--serif-en); font-size: 9.5px; font-weight: 600; color: var(--gold-dim); border: 1px solid rgba(184,103,42,.5); padding: 0 3px; margin-right: 4px; vertical-align: 1px; }
.c-taste { display: flex; justify-content: center; gap: 16px; font-size: 12px; margin-top: 6px; color: var(--navy); }
.c-taste .st { color: var(--gold-dim); letter-spacing: 1px; }
.c-taste .mx { font-family: var(--serif-en); font-weight: 600; }
.c-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--navy); border-bottom: 3px double var(--navy); margin-top: 8px; padding: 4px 0; }
.c-total .l { font-size: 13px; letter-spacing: .2em; }
.c-total .v { font-family: var(--serif-en); font-size: 26px; font-weight: 600; }
.c-total .pl { font-size: 10.5px; color: var(--warm-gray); }
.c-bottom { flex: 1; display: flex; gap: 10px; margin-top: 10px; min-height: 0; }
.c-left { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-verdict-l { font-size: 10.5px; letter-spacing: .2em; color: var(--gold-dim); }
.c-verdict { font-size: 14px; line-height: 1.6; border-left: 2px solid var(--gold-dim); padding-left: 9px; }
.c-verdict .sub { display: block; font-size: 11.5px; color: var(--warm-gray); margin-top: 2px; }
.c-trick { font-size: 11.5px; color: var(--warm-gray); }
.c-trick b { color: var(--brick); font-family: var(--serif-en); letter-spacing: .08em; }
.c-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.c-chip { border: 1px solid var(--gold-dim); color: var(--gold-dim); font-size: 10.5px; padding: 0 6px; }
.c-right { width: 170px; position: relative; flex-shrink: 0; }
.c-portrait { position: absolute; right: -14px; bottom: -26px; height: 250px; width: auto; }
.c-stamp {
  position: absolute; right: 6px; top: 0; transform: rotate(-12deg);
  border: 3px double var(--gold-dim); color: var(--gold-dim); font-family: var(--serif-en); font-weight: 600;
  font-size: 26px; letter-spacing: .12em; padding: 0 10px; background: rgba(245,240,230,.75); z-index: 2;
}
.c-stamp.fail { color: var(--brick); border-color: var(--brick); }
.c-stamp.zh { font-family: var(--serif-zh); font-size: 22px; }
.c-sign { position: absolute; left: 34px; bottom: 22px; font-size: 10.5px; color: var(--warm-gray); letter-spacing: .1em; }

/* 證書彈窗 */
.modal { position: fixed; inset: 0; background: rgba(10,7,15,.82); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; }
.modal-img { width: min(540px, calc(100vw - 32px)); aspect-ratio: 4 / 5; max-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; }
.modal-img img { max-width: 100%; max-height: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.loading { color: var(--cream-dim); }
.hint { margin: 0; font-size: 12px; color: var(--cream-faint); }

/* ── 夾娃娃機台：鑄鐵面板＋鉚釘，只有按鈕是南瓜橘 ── */
.deck {
  position: relative; margin-top: 14px; padding: 16px 22px 14px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  border: 1px solid var(--gold-line-strong); border-radius: 16px 16px 6px 6px;
  background:
    radial-gradient(circle, #6b5440 0 2.4px, transparent 3px) left 6px top 6px / 12px 12px no-repeat,
    radial-gradient(circle, #6b5440 0 2.4px, transparent 3px) right 6px top 6px / 12px 12px no-repeat,
    radial-gradient(circle, #6b5440 0 2.4px, transparent 3px) left 6px bottom 6px / 12px 12px no-repeat,
    radial-gradient(circle, #6b5440 0 2.4px, transparent 3px) right 6px bottom 6px / 12px 12px no-repeat,
    linear-gradient(180deg, #261c33, #151019 72%, #0d0912);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -3px 0 rgba(0,0,0,.45), 0 10px 22px rgba(0,0,0,.4);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.deck button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; font: inherit; }
.deck-label { display: flex; flex-direction: column; align-items: center; font-size: 12px; line-height: 1.3; letter-spacing: .16em; color: var(--cream-dim); }
.deck-label small { font-size: 10px; letter-spacing: .1em; color: var(--cream-faint); }

/* 大圓頂：按下去凹陷，落點 Perfect 時亮起來 */
.dome {
  position: relative; justify-self: center; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #2a1a10, #120c0a 70%); cursor: pointer;
  box-shadow: 0 0 0 4px #0d0912, 0 0 0 5px var(--gold-line-strong);
}
.dome-cap {
  position: absolute; inset: 7px 7px 13px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 28%, #ffe2a0, var(--gold) 42%, #b8672a 80%);
  box-shadow: 0 6px 0 #7a3c12, inset 0 -5px 10px rgba(0,0,0,.22);
  color: var(--navy); font-size: 25px; font-weight: 700; letter-spacing: .04em;
  transition: transform .05s, box-shadow .05s, filter .15s;
}
.dome:active:not(:disabled) .dome-cap, .dome.press .dome-cap { transform: translateY(5px); box-shadow: 0 1px 0 #7a3c12, inset 0 -2px 6px rgba(0,0,0,.3); }
.dome.hot:not(:disabled) .dome-cap { filter: brightness(1.15); box-shadow: 0 6px 0 #7a3c12, 0 0 26px 6px rgba(232,134,47,.7), inset 0 -5px 10px rgba(0,0,0,.22); }
.dome.hot.press .dome-cap { box-shadow: 0 1px 0 #7a3c12, 0 0 26px 6px rgba(232,134,47,.7); }
.dome:disabled { cursor: default; }
.dome:disabled .dome-cap { filter: grayscale(.75) brightness(.5); }

/* 旋轉鈕 */
.knob, .lever { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer; }
.knob svg {
  width: 56px; height: 56px; padding: 14px; border-radius: 50%; color: var(--gold);
  background: radial-gradient(circle at 40% 32%, #3b2d55, #1e1729 72%);
  box-shadow: 0 0 0 1px var(--gold-line-strong), 0 4px 0 #0d0912;
  transition: transform .2s, box-shadow .08s;
}
.knob:active:not(:disabled) svg { transform: translateY(3px) rotate(90deg); box-shadow: 0 0 0 1px var(--gold), 0 1px 0 #0d0912; }
.knob.off { visibility: hidden; }
.knob:disabled, .lever:disabled { opacity: .35; cursor: default; }

/* 送餐拉桿：長按往下拉，拉到底才送 */
.lever-slot { position: relative; width: 22px; height: 56px; border-radius: 11px; background: #0d0912; box-shadow: inset 0 0 0 1px var(--gold-line-strong), inset 0 3px 6px rgba(0,0,0,.6); }
.lever-slot::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: calc((100% - 6px) * var(--p, 0)); border-radius: 8px; background: rgba(232,134,47,.4); }
.lever-stick { position: absolute; left: 50%; top: 4px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #ffe2a0, var(--gold) 50%, #7a3c12);
  box-shadow: 0 3px 0 #3e2414; transform: translateY(calc(var(--p, 0) * 30px)); }
.lever.pull .deck-label { color: var(--gold); }

/* ── 手機 ── */
@media (max-width: 860px) {
  #app { padding: 14px 16px 10px; }
  h1 { font-size: 21px; }
  .layout { grid-template-columns: 1fr; gap: 14px; padding: 14px 0; }
  .stage { position: relative; top: auto; height: auto; min-height: 300px; }
  .rein-wrap img { height: 280px; }
  .panel { padding: 18px 16px; }
  .bubble { font-size: 14px; top: 10px; left: 10px; right: 10px; }
  .est-value { font-size: 24px; }
  .board { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .well { flex: none; width: 100%; max-width: 380px; align-self: center; }
  .side { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .side .tray { flex: 1 1 100%; }
  .tray { flex: 1; }
  .combo-line { flex: 1; align-content: flex-start; }
  .tok-name { font-size: 11px; }
  .stamp-big { font-size: 34px; }
  /* 機台黏在畫面底部，大拇指按得到 */
  .deck { position: sticky; bottom: 0; z-index: 20; margin: 12px -16px -18px; padding: 14px 26px 18px; border-radius: 18px 18px 0 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rein-wrap img, .rein-wrap.float img { animation: none; }
  .hand { animation-duration: 3000ms; }
  .candle::after { animation: none; }
}