/* 數方塊搶答（UIUX 第 6 節）。版面以 flex 欄位排列，盤面區吃剩餘高度，遊戲中不捲動。 */
.bx { --cell: 72px; --key: 52px; --target-h: 72px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s2); }

.bx-solved { flex: 0 0 36px; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.bx-heads { display: flex; align-items: center; gap: 0; position: relative; }
.bx-head { margin-left: -6px; position: relative; animation: slide-in var(--d-base) var(--ease) both; border-radius: var(--r-full); box-shadow: 0 0 0 2px var(--bg); }
.bx-more { margin-left: var(--s1); font: var(--t-micro); color: var(--muted); }
@keyframes slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.bx-target { flex: 0 0 var(--target-h); height: var(--target-h); display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.bx-target-label { font: var(--t-micro); letter-spacing: .04em; color: var(--muted); }
.bx-target-num { font: var(--t-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.bx-target-mark { width: 28px; height: 28px; color: var(--ok); }
.bx-target-mark svg { width: 28px; height: 28px; }
.bx-answerline { text-align: center; font: var(--t-small); color: var(--muted); min-height: 0; }
.bx-answerline:empty { display: none; }

.bx-stage { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.bx-gridwrap { position: relative; transition: opacity var(--d-slow) var(--ease); }
.bx--intro .bx-gridwrap { opacity: 0; }
/* 盤面尺寸自適應（3x3 到 16x16）：格寬同時受盤面區寬與高限制，格距、字級、圓角依密度縮小。 */
.bx-stage { container-type: size; }
.bx-gridwrap { --gap: 6px; --bw: 3px; }
.bx[data-density="m"] .bx-gridwrap { --gap: 4px; --bw: 2px; }
.bx[data-density="l"] .bx-gridwrap { --gap: 2px; --bw: 2px; }
.bx-grid, .bx-rects, .bx-marks {
  display: grid; gap: var(--gap);
  --cw: min(var(--cell),
    calc((100cqw - (var(--cols, 4) - 1) * var(--gap)) / var(--cols, 4)),
    calc((100cqh - 12px - (var(--rows, 4) - 1) * var(--gap)) / var(--rows, 4)));
  grid-template-columns: repeat(var(--cols, 4), var(--cw));
  grid-template-rows: repeat(var(--rows, 4), var(--cw));
}
.bx-rects { position: absolute; inset: 0; pointer-events: none; }
.bx-cell {
  display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  background: var(--raised); border-radius: min(var(--r-sm), calc(var(--cw) * .18));
  font: var(--t-title); font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: clamp(9px, calc(var(--cw) * .42), 24px); line-height: 1;
}
.bx-cell--blank { background: var(--surface); border: 1px dashed var(--line); }
.bx-cell--neg { color: var(--info); }
.bx-rect { border: var(--bw) solid var(--accent); background: rgba(215, 242, 90, .15); border-radius: var(--r-sm); margin: calc(var(--bw) * -1); transition: opacity var(--d-fast); animation: fade-in var(--d-fast) var(--ease) both; }
.bx-rect--dim { opacity: 0; }
.bx-rectcount { position: absolute; right: 0; bottom: 0; font: var(--t-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
.bx-rectcount:empty { display: none; }

.bx-intro { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); z-index: 2; }
.bx--intro .bx-intro { display: flex; }
.bx-intro-q { font: var(--t-display); }
.bx-tier { font: var(--t-micro); letter-spacing: .04em; padding: var(--s1) var(--s3); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.bx-tier[data-tier="1"] { color: var(--info); border-color: var(--info); }
.bx-tier[data-tier="2"] { color: var(--danger); border-color: var(--danger); }
.bx-tier[data-tier="3"] { color: var(--danger); border-color: var(--danger); }


.bx--closing .bx-answerline { color: var(--warn); }

.bx-bottom { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s3); }
.bx-inputrow { height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.bx-ask { font: var(--t-body); color: var(--muted); }
.bx-answer {
  min-width: 72px; height: 44px; padding: 0 var(--s3); display: inline-flex; align-items: center; justify-content: center;
  font: 800 28px/1 var(--font-num); font-variant-numeric: tabular-nums; border-radius: var(--r-sm); background: var(--surface); border: 2px solid var(--line);
}
.bx[data-streak] .bx-answer {
  border-color: color-mix(in srgb, var(--warn) calc(var(--heat, 0) * 100%), var(--line));
  box-shadow: 0 0 calc(var(--heat, 0) * 18px) calc(var(--heat, 0) * 3px) color-mix(in srgb, var(--warn) calc(var(--heat, 0) * 60%), transparent);
  transition: border-color var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
}
.bx-answer--empty::after { content: ""; width: 24px; height: 3px; background: var(--dim); border-radius: 2px; }
.bx-answer--shake { animation: shake 300ms var(--ease); }
.bx-answer--ready { animation: ready var(--d-slow) var(--ease); }
@keyframes shake { 16%, 50%, 84% { transform: translateX(-8px); } 33%, 67% { transform: translateX(8px); } }
@keyframes ready { 0% { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215,242,90,.35); } 100% { border-color: var(--line); box-shadow: none; } }

.bx-padwrap { position: relative; }
.bx-pad {
  display: grid; gap: 6px;
  grid-template-columns: repeat(3, 1fr) 1.3fr;
  grid-template-rows: repeat(4, var(--key));
  grid-template-areas: "k1 k2 k3 sb" "k4 k5 k6 sb" "k7 k8 k9 sb" "kd k0 . sb";
}
.bx-key { border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font: 700 22px/1 var(--font-num); display: flex; align-items: center; justify-content: center; transition: transform var(--d-fast) var(--ease), background var(--d-fast); }
.bx-key:active:not(:disabled) { transform: scale(.95); background: var(--raised); }
.bx-key:disabled { opacity: .4; }
.bx-key[data-testid="bx-key-1"] { grid-area: k1; } .bx-key[data-testid="bx-key-2"] { grid-area: k2; } .bx-key[data-testid="bx-key-3"] { grid-area: k3; }
.bx-key[data-testid="bx-key-4"] { grid-area: k4; } .bx-key[data-testid="bx-key-5"] { grid-area: k5; } .bx-key[data-testid="bx-key-6"] { grid-area: k6; }
.bx-key[data-testid="bx-key-7"] { grid-area: k7; } .bx-key[data-testid="bx-key-8"] { grid-area: k8; } .bx-key[data-testid="bx-key-9"] { grid-area: k9; }
.bx-key[data-testid="bx-key-0"] { grid-area: k0; } .bx-key--del { grid-area: kd; color: var(--muted); }
.bx-key--del svg { width: 24px; height: 24px; }
.bx-key--submit { grid-area: sb; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font: var(--t-head); }
.bx--intro .bx-pad { opacity: .4; pointer-events: none; }

.bx-lock {
  position: absolute; inset: -4px; z-index: 4; border-radius: var(--r-md);
  background: rgba(14, 17, 22, .86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2);
  text-align: center; padding: var(--s3); animation: fade-in var(--d-base) var(--ease) both;
}
.bx-lock-icon svg { width: 28px; height: 28px; color: var(--danger); }
.bx-lock-text { font: var(--t-small); color: var(--text); }
.bx-lock-count { position: relative; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }
.bx-ring { position: absolute; inset: 0; border-radius: var(--r-full); background: conic-gradient(var(--danger) calc(var(--p, 1) * 360deg), var(--raised) 0); -webkit-mask: radial-gradient(circle, transparent 22px, #000 23px); mask: radial-gradient(circle, transparent 22px, #000 23px); }
.bx-lock-sec { position: relative; font: 800 20px/1 var(--font-num); font-variant-numeric: tabular-nums; }

.bx-wait { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s3) 0; animation: fade-in var(--d-base) var(--ease) both; }
.bx-wait-line { display: flex; align-items: center; gap: var(--s2); font: var(--t-small); color: var(--muted); }

.bx-result { display: flex; flex-direction: column; gap: var(--s1); }
.bx-result:empty { display: none; }
.bx-correct { font: var(--t-head); color: var(--ok); text-align: center; font-variant-numeric: tabular-nums; }
.bx-timeout { font: var(--t-head); color: var(--muted); text-align: center; }
.bx-you { font: var(--t-small); text-align: center; font-variant-numeric: tabular-nums; }
.bx-top3-title { font: var(--t-micro); color: var(--muted); letter-spacing: .04em; margin-top: var(--s1); }
.bx-top3 { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--s2); height: 36px; }
.bx-top3--me .bx-top3-name { color: var(--accent); }
.bx-top3-name { font: var(--t-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-top3-sec { font: 700 14px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--muted); }
.bx-rankline { font: var(--t-small); text-align: center; animation: slide-up var(--d-base) var(--ease) both; }
@keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 高度不足時依序壓縮：盤面格、目標區、鍵高（鍵高至少 44）。 */
@media (max-height: 700px) {
  .bx { --cell: 56px; --key: 48px; --target-h: 60px; }
  .bx-target-num { font-size: 34px; line-height: 40px; }
}
@media (max-height: 620px) {
  .bx { --cell: 52px; --key: 46px; --target-h: 52px; gap: var(--s1); padding-top: var(--s1); }
  .bx-solved { flex-basis: 32px; height: 32px; }
  .bx-target-num { font-size: 30px; line-height: 36px; }
  .bx-bottom { padding-bottom: var(--s2); }
}
@media (max-height: 560px) {
  .bx { --cell: 44px; --key: 44px; }
}

/* 標注：按住拖曳框出任意矩形，框上顯示框內總和；等於目標亮綠框（Jim 2026-11-13） */
.bx-grid { touch-action: none; user-select: none; -webkit-user-select: none; }
.bx-cell { color: var(--text); cursor: crosshair; }
.bx[data-phase="reveal"] .bx-cell, .bx[data-phase="intro"] .bx-cell { cursor: default; }
.bx-marks { position: absolute; inset: 0; pointer-events: none; }
.bx-mark { --mc: var(--info); position: relative; margin: calc(var(--bw) * -1); border: var(--bw) solid var(--mc); border-radius: var(--r-sm); background: color-mix(in srgb, var(--mc) 16%, transparent); }
.bx-mark--c1 { --mc: #B98CFF; }
.bx-mark--c2 { --mc: #FF9F5A; }
.bx-mark--c3 { --mc: #FF7AB6; }
.bx-mark--draft { --mc: var(--text); border-style: dashed; background: rgba(255, 255, 255, .08); }
.bx-mark--hit { --mc: var(--ok); box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 55%, transparent); }
.bx-mark-sum {
  position: absolute; top: -11px; right: -9px; min-width: 24px; height: 22px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--mc); color: #0B0C10; font: 800 13px/22px var(--font-num); font-variant-numeric: tabular-nums; text-align: center;
}
.bx-mark--draft .bx-mark-sum { background: var(--text); }
.bx[data-phase="reveal"] .bx-marks, .bx[data-phase="intro"] .bx-marks { display: none; }
.bx-markbar { flex: 0 0 24px; height: 24px; display: flex; align-items: center; justify-content: center; gap: var(--s3); font: var(--t-micro); color: var(--muted); }
.bx-marksum[data-hit]:not([data-hit="0"]) { color: var(--ok); }
.bx-markclear { font: var(--t-micro); color: var(--muted); text-decoration: underline; min-height: 24px; padding: 0 var(--s2); }
.bx-cell.bx-cell--blank { border: 1px dashed var(--line); }
.bx[data-density="l"] .bx-mark-sum { top: -9px; right: -7px; min-width: 20px; height: 18px; font-size: 11px; line-height: 18px; padding: 0 4px; }
.bx[data-density="l"] .bx-cell.bx-cell--blank { border-width: 1px; }

/* 大盤面（密度 m、l）：鍵盤改兩列精簡版、頂部壓縮，把高度讓給盤面。 */
.bx[data-density="m"], .bx[data-density="l"] { --target-h: 48px; --key: 40px; gap: var(--s1); }
.bx[data-density="m"] .bx-target-num, .bx[data-density="l"] .bx-target-num { font-size: 32px; line-height: 40px; }
.bx[data-density="m"] .bx-pad, .bx[data-density="l"] .bx-pad {
  grid-template-columns: repeat(5, 1fr) 1.4fr;
  grid-template-rows: repeat(2, var(--key));
  grid-template-areas: "k1 k2 k3 k4 k5 kd" "k6 k7 k8 k9 k0 sb";
}
.bx[data-density="m"] .bx-inputrow, .bx[data-density="l"] .bx-inputrow { height: 40px; }
.bx[data-density="m"] .bx-answer, .bx[data-density="l"] .bx-answer { height: 40px; }
.bx[data-density="m"] .bx-key--submit, .bx[data-density="l"] .bx-key--submit { font: var(--t-body); font-weight: 800; }
.bx[data-density="m"] .bx-bottom, .bx[data-density="l"] .bx-bottom { padding-bottom: var(--s2); gap: var(--s1); }
/* 矮螢幕（高 700 以下）不論盤面大小都用兩列精簡鍵盤，否則 4x4 也會被大鍵盤擠小。 */
@media (max-height: 700px) {
  .bx { --key: 40px; }
  .bx .bx-pad { grid-template-columns: repeat(5, 1fr) 1.4fr; grid-template-rows: repeat(2, var(--key)); grid-template-areas: "k1 k2 k3 k4 k5 kd" "k6 k7 k8 k9 k0 sb"; }
  .bx .bx-inputrow, .bx .bx-answer { height: 40px; }
  .bx .bx-key--submit { font: var(--t-body); font-weight: 800; }
  .bx .bx-bottom { gap: var(--s1); }
}

/* spec 六.6 題型：洞與缺角、分數格、≥ 目標、題型說明 */
.bx-cell.bx-cell--hole { background: transparent; border: 0; box-shadow: none; color: transparent; pointer-events: auto; }
.bx-cell.bx-cell--hole::after { content: ""; position: absolute; inset: 22%; border-radius: var(--r-sm, 4px); background: repeating-linear-gradient(45deg, var(--line) 0 3px, transparent 3px 7px); opacity: .55; }
.bx-cell { position: relative; }
.bx[data-kind="frac"] .bx-cell { font-variant-numeric: diagonal-fractions; }
.bx-mark--bad { --mc: var(--danger); opacity: .7; border-style: dashed; }
.bx-intro-kind { font: var(--t-small, 14px/1.4 inherit); color: var(--muted); margin-top: var(--s2); text-align: center; }