/* 接住好投資！樣式
 * 顏色全部來自 game_data.json 的 ui.colors，由 game.js 設成 CSS 變數 --c-*
 *   （bgFrom → --c-bg-from、cardBorder → --c-card-border，以此類推）。
 * 尺寸單位 --u ＝ 遊戲區域寬度的 1%，畫面在任何裝置上都等比例縮放。
 * 介面文字用像素字型「俐方體11號」，卡片名稱用 Noto Sans TC（小字較好讀）。
 */

/* 俐方體11號（SIL OFL 授權）；缺字或讀不到時會自動改用 Noto Sans TC */
@font-face {
  font-family: "Cubic 11";
  src: url("assets/Cubic_11.woff") format("woff");
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* 遊戲區域固定 9:16，手機填滿、桌機置中 */
  --stage-h: min(100vh, calc(100vw * 16 / 9));
  --u: calc(var(--stage-h) * 9 / 1600);
  --font: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "PingFang TC", "Heiti TC",
          "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-pixel: "Cubic 11", var(--font);
  --bg: linear-gradient(180deg, var(--c-bg-from), var(--c-bg-to));
  --shadow: color-mix(in srgb, var(--c-text) 14%, transparent);
  --muted: color-mix(in srgb, var(--c-text) 72%, var(--c-bg-from));
  --frame-w: 0px; /* 外框粗細，由 game.js 依 ui.frame 設定 */
  --ipx: calc(var(--u) * 100 / 360); /* 美術圖的一個像素（以 360 寬畫面為準） */
}

@supports (height: 100dvh) {
  :root { --stage-h: min(100dvh, calc(100vw * 16 / 9)); }
}

@media (min-width: 720px) and (min-height: 560px) {
  :root { --stage-h: min(92vh, calc(100vw * 16 / 9)); }
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  color: var(--c-text);
  background-color: var(--c-bg-to);
  background-image: var(--bg);
}

/* 遊戲進行中：鎖住捲動與縮放手勢 */
html.is-playing,
html.is-playing body { touch-action: none; }

.stage {
  position: relative;
  flex: none;
  width: calc(var(--stage-h) * 9 / 16);
  height: var(--stage-h);
  overflow: hidden;
  isolation: isolate;
  background-image: var(--bg);
  font-family: var(--font-pixel);
  font-synthesis: none; /* 像素字型只有一種粗細，不要讓瀏覽器硬加粗 */
  font-size: calc(var(--u) * 4.2);
  line-height: 1.5;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 像素圖放大時保持銳利，不要模糊 */
.stage img { image-rendering: pixelated; }

/* 縮小顯示的圖（卡片圖示、按鈕下方那排、結算清單）：
   在一般電腦螢幕上是真的縮小，用「最近點」會掉線條，改用平滑縮小；
   高密度螢幕（手機等）實際上仍是放大，維持銳利 */
.stage:not(.is-dense) img.art-small { image-rendering: auto; }

/* 電腦版放大倍率不是整數時（見 game.js 的 fitStage），美術圖改用平滑放大，
   避免像素一格 1px、一格 2px 的破碎感；外框線條維持像素放大 */
.stage.is-smooth img.art { image-rendering: auto; }

/* 高解析度圖（檔名含 @2x、@3x）：多數情況是縮小顯示，平滑縮放最細緻 */
.stage img.art-hd { image-rendering: auto; }

/* 九宮格外框：由 game.js 畫在 canvas 上，蓋在所有畫面最上層，中間鏤空。
   （不用 CSS border-image：部分手機瀏覽器在畫面有動畫時會漏畫 border-image，外框會消失或閃爍） */
.stage-frame {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

.stage.has-frame .stage-frame { display: block; }

/* 聲音開關：開始、結算畫面的右上角，外框內側 */
.btn-sound {
  position: absolute;
  top: calc(var(--frame-w) + var(--ipx) * 6);
  right: calc(var(--frame-w) + var(--ipx) * 6);
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--ipx) * 30);
  height: calc(var(--ipx) * 30);
  padding: 0;
  border: calc(var(--ipx) * 2) solid var(--c-card-border);
  background: var(--c-card);
  color: var(--c-text);
  cursor: pointer;
  touch-action: manipulation;
}

.stage[data-screen="start"] .btn-sound:not([hidden]),
.stage[data-screen="result"] .btn-sound:not([hidden]) { display: flex; }

.btn-sound svg { width: calc(var(--ipx) * 18); height: calc(var(--ipx) * 18); }
.btn-sound .icon-off { display: none; }
.btn-sound.is-muted { color: var(--muted); }
.btn-sound.is-muted .icon-on { display: none; }
.btn-sound.is-muted .icon-off { display: inline; }

@media (hover: hover) {
  .btn-sound:hover { background: color-mix(in srgb, var(--c-primary) 14%, var(--c-card)); }
}

.btn-sound:focus-visible {
  outline: calc(var(--u) * 0.6) dashed var(--c-text);
  outline-offset: calc(var(--u) * 0.8);
}

@media (min-width: 720px) and (min-height: 560px) {
  body { background: color-mix(in srgb, var(--c-bg-from) 55%, var(--c-card-border)); }
  .stage {
    box-shadow:
      0 calc(var(--u) * 4) calc(var(--u) * 14) var(--shadow),
      0 0 0 1px color-mix(in srgb, var(--c-card-border) 80%, transparent);
  }
}

/* ---------- 畫面切換 ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}

.screen.is-active {
  display: flex;
  animation: screen-in 0.35s ease both;
}

@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

.screen-center {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--u) * 8);
  gap: calc(var(--u) * 3);
}

.screen-center p { margin: 0; }

.spinner {
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  border: calc(var(--u) * 1.2) solid currentColor;
  border-right-color: transparent;
  opacity: 0.5;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-title { font-size: calc(var(--u) * 6); font-weight: 700; }
.error-desc { font-size: calc(var(--u) * 4); line-height: 1.7; }

/* ---------- 按鈕 ---------- */

/* 像素風按鈕：深色外框（四邊各一格，轉角留空形成階梯圓角）＋頂部亮邊＋底部加深 */
.btn {
  --px: calc(var(--u) * 0.7);                 /* 一個「像素」的大小 */
  --btn-outline: color-mix(in srgb, var(--c-text) 55%, black);
  --btn-light: color-mix(in srgb, var(--c-primary) 55%, white);
  --btn-shade: color-mix(in srgb, var(--c-primary) 78%, black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--u) * 11.5);
  min-width: calc(var(--u) * 43);
  margin: var(--px);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 7) calc(var(--u) * 2.1);
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: calc(var(--u) * 5);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-primary);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    inset 0 calc(var(--px) * -1.4) 0 var(--btn-shade),
    inset 0 var(--px) 0 var(--btn-light),
    0 calc(var(--px) * -1) 0 var(--btn-outline),
    0 var(--px) 0 var(--btn-outline),
    calc(var(--px) * -1) 0 0 var(--btn-outline),
    var(--px) 0 0 var(--btn-outline);
  transition: transform 0.08s ease, background-color 0.12s ease;
}

.btn-primary { color: var(--c-card); }

.btn-secondary {
  --btn-light: var(--c-card);
  --btn-shade: color-mix(in srgb, var(--c-card-border) 55%, var(--c-text));
  background: color-mix(in srgb, var(--c-bg-from) 50%, var(--c-card));
}

/* 分享按鈕：文案較長，字級比一般按鈕小一點（--ipx＝360 寬畫面的 1px） */
.btn-share {
  font-size: calc(var(--ipx) * 15);
  letter-spacing: 0.03em;
  padding-left: calc(var(--u) * 6);
  padding-right: calc(var(--u) * 6);
}

/* 成績圖還在產生時，分享按鈕暫時不能按 */
.btn:disabled { opacity: 0.55; cursor: progress; }

/* 滑鼠移上去時變色（只在有滑鼠的裝置，避免手機點完一直停在變色狀態） */
@media (hover: hover) {
  .btn-primary:hover { background: color-mix(in srgb, var(--c-primary) 82%, white); }
  .btn-secondary:hover { background: color-mix(in srgb, var(--c-primary) 14%, var(--c-card)); }
}

/* 按下：往下沉一格，底部加深變薄 */
.btn:active {
  transform: translateY(calc(var(--px) * 0.8));
  box-shadow:
    inset 0 calc(var(--px) * -0.6) 0 var(--btn-shade),
    inset 0 var(--px) 0 var(--btn-light),
    0 calc(var(--px) * -1) 0 var(--btn-outline),
    0 var(--px) 0 var(--btn-outline),
    calc(var(--px) * -1) 0 0 var(--btn-outline),
    var(--px) 0 0 var(--btn-outline);
}

.btn:focus-visible {
  outline: calc(var(--u) * 0.8) dashed var(--btn-outline);
  outline-offset: calc(var(--u) * 1.4);
}

.meta {
  margin: 0;
  font-size: calc(var(--u) * 3);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-text) 55%, var(--c-bg-from));
  text-align: center;
}

.meta p { margin: 0; text-wrap: balance; }

/* ---------- 1. 開始畫面 ---------- */

.screen-start {
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--frame-w) + var(--u) * 7) calc(var(--frame-w) + var(--u) * 6) calc(var(--frame-w) + var(--u) * 4);
  text-align: center;
}

/* 上方飄浮裝飾（ui.start.decoImages），一高一低交錯 */
.start-deco {
  position: relative;
  flex: none;
  width: 100%;
  height: calc(var(--u) * 17);
  margin-top: calc(var(--ipx) * 26);
  pointer-events: none;
}

.deco {
  position: absolute;
  transform: translateX(-50%);
}

/* 像素式飄動：每次移動剛好一個圖片像素，不會停在半格上而變糊 */
.deco img { display: block; height: auto; animation: bob-px 2.4s steps(4, jump-none) infinite; }

@keyframes bob-px {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--ipx) * -3)); }
}

/* 按鈕下方一排小圖（開始畫面、結算畫面），沿用 decoImages 縮小顯示 */
.deco-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(var(--u) * 2.5);
}

.deco-row img { display: block; height: auto; }

.start-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 4);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  animation: bob 2.4s ease-in-out infinite;
}

.hero-face {
  position: relative;
  z-index: 1;
  font-size: calc(var(--u) * 12);
  margin-bottom: calc(var(--u) * -3.5);
}

.hero-basket { font-size: calc(var(--u) * 24); }
.hero-basket img { width: calc(var(--u) * 28); height: auto; display: block; }

/* 有插圖（heroImage 或主角 idle 圖）時，取代 emoji 版 */
.hero.is-image { animation: none; }
.hero.is-image > span { display: none; }
.hero > img { display: block; height: auto; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--u) * -2)); }
}

.title {
  margin: 0;
  font-size: calc(var(--u) * 9);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

/* 標題圖片（ui.start.titleImage） */
.title.is-image > span { display: none; }
.title > img { display: block; max-width: 100%; height: auto; }

.instructions p {
  margin: 0;
  font-size: calc(var(--u) * 4.4);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: balance;
}

.btn-start { margin-top: calc(var(--u) * 2); }

.tagline {
  margin: calc(var(--u) * 1) 0 0;
  font-size: calc(var(--u) * 4);
  color: var(--c-primary);
}

.tagline:empty { display: none; }

/* ---------- 2. 遊戲畫面 ---------- */

.screen-game { touch-action: none; }

.hud {
  position: absolute;
  /* 往上塞進外框線條下方 1px，避免縮放時出現縫隙、露出後面掉落的卡片（外框層級較高，會蓋住重疊的部分） */
  top: calc(var(--frame-w) - var(--ipx) * 1);
  left: calc(var(--frame-w) + var(--u) * 2);
  right: calc(var(--frame-w) + var(--u) * 2);
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 5);
  pointer-events: none;
}

/* 兩個欄位同寬，寬度抓 4 位數分數（例如 −850、1040）放得下的大小，不隨數字長短變化。
   「分數」「秒」與數字對齊底線，圖示維持垂直置中 */
.hud-pill {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.5);
  min-width: calc(var(--ipx) * 128);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3.5);
  background: var(--c-card);
}

.hud-icon { display: flex; align-items: center; align-self: center; }
.hud-icon:empty { display: none; }
.hud-icon img { display: block; height: auto; }

.hud-label { font-size: calc(var(--u) * 3.4); color: var(--muted); }

.hud-value {
  margin-left: auto;
  font-size: calc(var(--u) * 5.6);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.hud-value.bump { animation: bump 0.3s ease; }
.hud-time.is-low .hud-value { color: var(--c-minus); animation: pulse 1s ease-in-out infinite; }

@keyframes bump {
  40% { transform: scale(1.25); }
}

@keyframes pulse {
  50% { transform: scale(1.12); }
}

.hud-value { display: inline-block; }

/* 提示放在主角上方、玩家視線附近；位置由 game.js 依主角實際高度設定 bottom。
   層級低於掉落物件，避免擋住即將接到的卡片。 */
.tip {
  position: absolute;
  bottom: calc(var(--u) * 50);
  left: 50%;
  z-index: 1;
  max-width: calc(var(--u) * 86);
  width: max-content;
  padding: calc(var(--u) * 2.2) calc(var(--u) * 6);
  background: var(--c-card);
  border: calc(var(--u) * 0.6) solid var(--c-card-border);
  font-size: calc(var(--u) * 4.4);
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(var(--u) * 2));
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* 接住後的回饋：加分綠框、扣分紅框（掉落中的卡片仍維持中性外觀） */
.tip.is-plus {
  border-color: color-mix(in srgb, var(--c-plus) 55%, var(--c-card));
  background: color-mix(in srgb, var(--c-plus) 12%, var(--c-card));
}

.tip.is-minus {
  border-color: color-mix(in srgb, var(--c-minus) 45%, var(--c-card));
  background: color-mix(in srgb, var(--c-minus) 12%, var(--c-card));
}

.tip.show { opacity: 1; transform: translate(-50%, 0); }
.tip.show.pop { animation: tip-pop 0.25s ease; }

@keyframes tip-pop {
  0%   { transform: translate(-50%, 0) scale(0.92); }
  100% { transform: translate(-50%, 0) scale(1); }
}

.items-layer,
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.items-layer { z-index: 2; }
.fx-layer { z-index: 6; }

.item {
  position: absolute;
  left: 0;
  top: 0;
}

/* 掉落卡片：所有類別外觀一致，不用顏色暗示好壞 */
/* 卡片尺寸用整數個美術像素（94、框 2），裡面的圖示才會剛好落在整數像素上 */
.card {
  position: relative;
  width: calc(var(--ipx) * 94);
  height: calc(var(--ipx) * 94);
  border-radius: 50%;
  background: var(--c-card);
  border: calc(var(--ipx) * 2) solid var(--c-card-border);
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 2.8) var(--shadow);
}

/* 圖示（約 28 高）＋名稱區（約 31 高）整組在圓圈內上下置中：上方留白約 14 */
.card-icon {
  position: absolute;
  top: calc(var(--ipx) * 14);
  left: 0;
  right: 0;
  height: calc(var(--ipx) * 28);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: calc(var(--u) * 8.2);
  line-height: 1;
}

/* 寬度由 game.js 依圖片原始尺寸設定（1:1） */
.card-icon img { display: block; height: auto; }

.card-name {
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 34%;
  text-align: center;
  font-family: var(--font);
  font-weight: 700;
}

/* 中文版 Chrome 有最小字級 12px 的限制，小於 12px 的字會被強制放大而超出卡片。
   所以名稱先在 2 倍大的區域用 2 倍字級排版，再整體縮小一半顯示（倍率＝game.js 的 NAME_RENDER_SCALE） */
.card-name-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: scale(0.5);
  transform-origin: 0 0;
}

.card-name-inner > span {
  display: block;
  max-width: 100%;
  font-size: calc(var(--u) * 10);
  line-height: 1.12;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.card-name-inner > span.is-tight { overflow-wrap: anywhere; word-break: break-all; }
.card-name-inner > span.is-split,
.card-name-inner > span.is-code { white-space: nowrap; text-wrap: nowrap; }

.name-code,
.name-sub { display: block; }

.name-code { line-height: 1.1; }
.name-sub { line-height: 1.3; opacity: 0.8; }

.card-probe {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

.catcher {
  position: absolute;
  left: 0;
  bottom: calc(var(--frame-w) + var(--ipx) * 14);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  pointer-events: none;
}

.catcher::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: calc(var(--u) * -1.8);
  height: calc(var(--u) * 2.4);
  border-radius: 50%;
  background: var(--shadow);
  z-index: -1;
}

.catcher-face {
  position: relative;
  z-index: 1;
  font-size: calc(var(--u) * 10);
  margin-bottom: calc(var(--u) * -3);
}

.catcher-face.pop { animation: face-pop 0.3s ease; }

@keyframes face-pop {
  40% { transform: scale(1.3); }
}

.catcher-basket { display: block; font-size: calc(var(--u) * 20); }
.catcher-basket img { width: calc(var(--u) * 23); height: auto; display: block; }
.catcher-basket.bump { animation: basket-bump 0.22s ease; }

@keyframes basket-bump {
  50% { transform: scale(1.08, 0.92); }
}

/* 角色圖模式（ui.catcher.images）：三張圖疊在一起，只顯示目前狀態那張。
   三張圖請輸出成同樣的畫布尺寸，籃子位置一致。 */
.catcher-sprite { display: none; }
.catcher.is-sprite .catcher-face,
.catcher.is-sprite .catcher-basket { display: none; }
.catcher.is-sprite .catcher-sprite { display: block; }
.catcher.is-sprite::after { display: none; }
.catcher-sprite img { display: none; height: auto; }
.catcher-sprite img.is-on { display: block; }
.catcher-sprite.bump { animation: basket-bump 0.22s ease; transform-origin: 50% 100%; }

.float-score {
  position: absolute;
  font-size: calc(var(--u) * 8);
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    0 0 calc(var(--u) * 0.6) var(--c-bg-from),
    0 0 calc(var(--u) * 0.6) var(--c-bg-from);
  animation: float-up 0.9s ease-out forwards;
}

.float-score.is-plus  { color: var(--c-float-plus, var(--c-plus)); }
.float-score.is-minus { color: var(--c-float-minus, var(--c-minus)); }
.float-score.is-zero  { color: var(--c-text); }

@keyframes float-up {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, calc(var(--u) * -3)) scale(1.15); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, calc(var(--u) * -8)) scale(1); }
}

/* ---------- 3. 結算畫面 ---------- */

/* 捲動區域只在外框內側，內容不會滑到外框線條底下 */
.screen-result { inset: var(--frame-w); }
.result-scroll { scrollbar-width: none; }
.result-scroll::-webkit-scrollbar { display: none; }

.result-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 5);
  text-align: center;
}

.result-scroll > * { flex: none; }

.result-label {
  margin: 0 0 calc(var(--u) * -2);
  font-size: calc(var(--u) * 3.8);
  color: var(--muted);
}

.result-score {
  margin: 0;
  font-size: calc(var(--u) * 16);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* 人格卡與扣分清單：依設計稿使用 Noto Sans TC 粗體（小字比像素字好讀） */
.persona,
.review {
  width: min(100%, calc(var(--u) * 75));
  background: var(--c-card);
  border: calc(var(--u) * 0.7) solid var(--c-card-border);
  font-family: var(--font);
  font-weight: 700;
}

.persona { padding: calc(var(--u) * 8.5) calc(var(--u) * 5); }

.persona-emoji {
  font-size: calc(var(--u) * 9);
  line-height: 1.2;
  animation: bob 2.4s ease-in-out infinite;
}

.persona-name {
  margin: calc(var(--u) * 1) 0;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: calc(var(--u) * 5.8);
  line-height: 1.35;
}

/* 換行位置由 JSON 的 desc 裡的 \n 決定 */
.persona-desc {
  margin: 0;
  font-weight: 500;
  font-size: calc(var(--u) * 3.5);
  line-height: 1.6;
  white-space: pre-line;
}

.review { padding: calc(var(--u) * 8.5) calc(var(--u) * 5); }

.review-title {
  margin: 0 0 calc(var(--u) * 5);
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: calc(var(--u) * 4.2);
}

.review-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4.5);
  text-align: left;
}

/* 圖示｜名稱＋標籤｜分數，提示文字在第二行橫跨名稱與分數兩欄 */
.review-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon head score"
    "icon tip  tip";
  align-items: center;
  column-gap: calc(var(--u) * 3);
}

.review-icon {
  grid-area: icon;
  width: calc(var(--u) * 7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--u) * 6);
  line-height: 1;
}

.review-icon img { display: block; height: auto; }

.review-head {
  grid-area: head;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1) calc(var(--u) * 2);
}

.review-name {
  font-size: calc(var(--u) * 3.9);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.review-chip {
  font-size: calc(var(--u) * 2.6);
  line-height: 1.4;
  padding: calc(var(--u) * 0.2) calc(var(--u) * 2);
  border: calc(var(--u) * 0.4) solid var(--c-card-border);
  border-radius: 999px;
  white-space: nowrap;
}

.review-tip {
  grid-area: tip;
  margin: calc(var(--u) * 0.6) 0 0;
  font-size: calc(var(--u) * 3.2);
  line-height: 1.5;
  color: var(--muted);
}

.review-score {
  grid-area: score;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: calc(var(--u) * 4.2);
  color: var(--c-minus);
  font-variant-numeric: tabular-nums;
}

.review-empty {
  margin: 0;
  font-size: calc(var(--u) * 3.8);
  line-height: 1.6;
}

/* 兩顆按鈕同寬：以較寬的那顆為準 */
.result-actions {
  display: grid;
  gap: calc(var(--u) * 3.5);
  margin-top: calc(var(--u) * 0.5);
}

.result-actions .btn {
  width: calc(100% - var(--px) * 2);
  font-size: calc(var(--ipx) * 16); /* 「回到課程」「再玩一次」 */
}

.cta { display: grid; }
.cta:empty { display: none; }

.cta-text {
  margin: 0;
  font-size: calc(var(--u) * 4.2);
  line-height: 1.6;
}

.result-deco { margin-top: auto; padding-top: calc(var(--u) * 4); }

.result-meta p { margin: 0; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .deco img, .hero, .persona-emoji, .hud-time.is-low .hud-value { animation: none; }
}