/* ============================================================
   詞武林官網試玩區：頁面骨架＋遊戲畫面
   只在 /play/ 底下載入，疊在 /assets/style.css 之上，沿用同一組色票變數。
   手機優先：設計寬度 360–430px，桌機把遊戲框限制在 560px 置中。
   ============================================================ */

/* ── 頁面骨架 ─────────────────────────────────────────────── */
.skipLink {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--amber);
  color: #2a1d08;
  font-weight: 700;
}
.skipLink:focus { top: 12px; }

.playNav .navLinks { gap: 22px; }
.playNav .navLinks a { white-space: nowrap; }
.playNav .navLinks a[aria-current='page'] { color: var(--amber); }
.playNav .brand { white-space: nowrap; }

.crumbs {
  padding: 18px var(--pad) 0;
  color: var(--ink-faint);
  font-size: 13px;
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--line); }
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--amber); border-color: currentColor; }

.playHead { padding: 26px var(--pad) 8px; }
.playHead h1 {
  font-family: var(--font-zh-serif);
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: 3px;
  line-height: 1.3;
}
.playHead h1 em { color: var(--amber); font-style: normal; }
.playHead .lead { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips span {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(30, 26, 22, 0.7);
  color: var(--ink-dim);
  font-size: 12.5px;
}

.stageWrap { padding: 20px var(--pad) 10px; }
.stage {
  position: relative;
  width: min(560px, 100%);
  min-height: 420px;
  margin: 0 auto;
  padding: 18px 16px 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber-deep);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(232, 161, 60, 0.07), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow);
  /* 不用 overflow: hidden——那會讓裡面的 position: sticky（練功的自評列）失效 */
  overflow: clip;
  /* 開局時 scrollIntoView 會對齊這裡；留出黏在頂端的導覽列高度 */
  scroll-margin-top: 76px;
}
.stageLoading, .stage noscript p {
  display: grid;
  place-items: center;
  min-height: 380px;
  color: var(--ink-faint);
  text-align: center;
}
.stage.ready .stageLoading { display: none; }
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.playInfo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  width: min(1060px, 100%);
  margin: 0 auto;
  padding: 40px var(--pad) 10px;
}
.playInfo section {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-deep);
}
.playInfo h2 {
  margin-bottom: 12px;
  color: var(--amber);
  font-family: var(--font-zh-serif);
  font-size: 19px;
  letter-spacing: 2px;
}
.playInfo p, .playInfo li { color: var(--ink-dim); font-size: 14.5px; line-height: 1.9; }
.playInfo ol, .playInfo ul { display: grid; gap: 6px; }
.playInfo ol { counter-reset: step; }
.playInfo ol li { position: relative; padding-left: 30px; }
.playInfo ol li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 3px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--amber-deep);
  color: #1a1206;
  font-size: 12px;
  font-weight: 700;
}
.playInfo ul li { position: relative; padding-left: 18px; }
.playInfo ul li::before { content: '◆'; position: absolute; left: 0; color: var(--amber-deep); font-size: 9px; line-height: 2.9; }

.playCta {
  width: min(1060px, calc(100% - 2 * var(--pad)));
  margin: 40px auto 0;
  padding: 34px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(195, 64, 47, 0.16), transparent 62%),
    var(--bg-deep);
  text-align: center;
}
.playCta h2 { font-family: var(--font-zh-serif); font-size: clamp(22px, 4vw, 30px); letter-spacing: 2px; }
.playCta p { max-width: 560px; margin: 12px auto 22px; color: var(--ink-dim); font-size: 15px; }
.playCta .betaActions a { min-width: 220px; }

.moreGames { padding: 50px var(--pad) 70px; }
.moreGames h2 { font-family: var(--font-zh-serif); font-size: 22px; letter-spacing: 3px; margin-bottom: 18px; }

/* 試玩卡片網格 .gameGrid 在 /assets/style.css（首頁也要用，首頁不載入本檔） */

.playFaq { width: min(780px, calc(100% - 2 * var(--pad))); margin: 10px auto 70px; }

/* ── 遊戲畫面共用 ─────────────────────────────────────────── */
.pBtn {
  display: inline-block;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-align: center;
  touch-action: manipulation;
}
.pBtnPrimary { background: var(--amber); color: #2a1d08; }
.pBtnPrimary:hover { filter: brightness(1.07); }
.pBtnGhost { background: var(--surface-2); border-color: var(--line); color: var(--ink-dim); }
.pBtnGhost:hover { border-color: var(--amber-deep); color: var(--ink); }
.pBtn:disabled { opacity: 0.42; cursor: default; filter: none; }

.pIntro, .pResult { display: grid; justify-items: center; gap: 14px; padding: 8px 4px; text-align: center; }
.pSeal {
  padding: 10px 7px;
  border: 3px solid var(--cinnabar);
  border-radius: 8px;
  background: var(--cinnabar-soft);
  color: var(--cinnabar);
  font-family: var(--font-zh-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 4px;
  writing-mode: vertical-rl;
  transform: rotate(-3deg);
}
.pSeal.fail { border-color: var(--ink-faint); background: rgba(156, 144, 120, 0.1); color: var(--ink-faint); }
.pIntroTitle { font-family: var(--font-zh-serif); font-size: 26px; letter-spacing: 3px; }
.pIntroTitle:focus { outline: none; }
.pRules { display: grid; gap: 8px; max-width: 420px; text-align: left; }
.pRules li { position: relative; padding-left: 18px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.8; }
.pRules li::before { content: '◆'; position: absolute; left: 0; color: var(--amber-deep); font-size: 9px; line-height: 2.8; }
.pBest { color: var(--gold); font-size: 13.5px; }
.pBest.new { color: var(--amber); font-weight: 700; }
.pScore { display: flex; align-items: baseline; gap: 6px; }
.pScore b { color: var(--amber); font-family: var(--font-en); font-size: 52px; font-weight: 600; line-height: 1; }
.pScore span { color: var(--ink-faint); }
.pStats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: min(360px, 100%);
  margin: 0;
}
.pStats div { padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-deep); }
.pStats dt { color: var(--ink-faint); font-size: 12px; }
.pStats dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.pNote { max-width: 440px; color: var(--ink-faint); font-size: 13px; line-height: 1.85; }
.pActions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.pActions .pBtn { flex: 1 1 140px; max-width: 240px; }

.pPlay { display: grid; gap: 12px; }
.pHud { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.pHudRow { display: flex; justify-content: flex-end; gap: 8px; margin-top: -6px; }
.pHudStat { display: grid; line-height: 1.15; }
.pHudStat i { color: var(--ink-faint); font-size: 11px; font-style: normal; letter-spacing: 1px; }
.pHudStat b { color: var(--amber); font-family: var(--font-en); font-size: 22px; font-weight: 600; }
.pHudStat.right { text-align: right; }
.pHudMid { color: var(--gold); font-size: 13.5px; font-weight: 700; letter-spacing: 1px; text-align: center; }
.pQuit, .pItem {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--ink-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.pQuit:hover, .pItem:hover { border-color: var(--amber-deep); color: var(--ink); }
.pQuit[aria-pressed='true'] { border-color: var(--amber); color: var(--amber); }
.pItem:disabled { opacity: 0.45; cursor: default; }
.pItems { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pMistakes { color: var(--ink-faint); font-size: 13px; }

.pTimer { height: 6px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; }
.pTimer i {
  display: block;
  height: 100%;
  width: calc(var(--p, 1) * 100%);
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
  transition: width 0.9s linear;
}
.pTimer.low i { background: var(--red); }
.pHint { color: var(--ink-faint); font-size: 12.5px; text-align: center; }

.pPrompt {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-deep);
  text-align: center;
}
.pTag {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid var(--amber-deep);
  border-radius: 999px;
  color: var(--amber);
  font-size: 11.5px;
  letter-spacing: 1px;
}
.pPromptText { font-size: 20px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.pPromptText.en { font-family: var(--font-en); font-size: 24px; font-weight: 600; }
.pPromptText.pSentence { font-size: 18px; font-weight: 400; line-height: 1.6; }
.pPromptSub { color: var(--ink-faint); font-size: 13.5px; }
.pSpeak {
  min-width: 44px;
  min-height: 32px;
  padding: 3px 12px;
  border: 1px solid var(--amber-deep);
  border-radius: 999px;
  background: transparent;
  color: var(--amber);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pSpeak[hidden] { display: none; }

.en { font-family: var(--font-en); }

/* 四選一 */
.pOpts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pOpt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.pOpt.en .pOptText { font-family: var(--font-en); font-size: 17px; }
.pOpt:hover:not(:disabled) { border-color: var(--amber-deep); }
.pOptKey {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-deep);
  color: var(--ink-faint);
  font-size: 12px;
}
.pOptText { overflow-wrap: anywhere; line-height: 1.35; }
.pOpt:disabled { cursor: default; }
.pOpt.correct { border-color: var(--teal); background: rgba(86, 184, 163, 0.18); }
.pOpt.wrong { border-color: var(--red); background: rgba(217, 108, 95, 0.18); }
.pOpt.gone { opacity: 0.3; }

.pFeedback { display: grid; gap: 6px; min-height: 1.5em; text-align: center; }
.pOk { color: var(--teal); font-weight: 700; }
.pBad { color: var(--red); font-weight: 700; }
.pBattleLine { color: var(--gold); font-size: 14px; }
.pExplain { color: var(--ink-dim); font-size: 14px; line-height: 1.75; }
.pNext { justify-self: center; min-width: 180px; }
.pNext[hidden] { display: none; }

/* 配對牌 */
.pPairBoard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pCol { display: grid; gap: 8px; align-content: start; }
.pTile {
  display: grid;
  gap: 1px;
  min-height: 56px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.25s ease, transform 0.25s ease;
}
.pTile small { color: var(--ink-faint); font-size: 10px; letter-spacing: 1px; }
.pTile span { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.pTile.en span { font-family: var(--font-en); font-size: 17px; }
.pTile.root span { font-size: 14px; }
.pTile.sel { border-color: var(--amber); background: rgba(232, 161, 60, 0.18); }
.pTile.solved { opacity: 0.18; transform: scale(0.96); border-color: var(--teal); cursor: default; }

@keyframes pShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.shake { animation: pShake 0.36s ease; border-color: var(--red) !important; }

/* 拆字 */
.pSlots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pSlot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 46px;
  border-bottom: 2px solid var(--line);
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 600;
}
.pSlot.has { border-color: var(--amber); }
.pSlots.ok .pSlot { border-color: var(--teal); color: var(--teal); }
.pSlot.fix { border-color: var(--red); color: var(--red); }
.pLetters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pLetter {
  width: 50px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.pLetter:hover:not(:disabled) { border-color: var(--amber-deep); }
.pLetter.used { opacity: 0.2; }

/* 箭雨 */
.pRainTrack {
  position: relative;
  height: 290px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    repeating-linear-gradient(100deg, transparent 0 22px, rgba(232, 161, 60, 0.04) 22px 23px),
    var(--bg-deep);
  overflow: hidden;
}
.pRainGround {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--cinnabar), transparent);
}
.pRainDrop { position: absolute; left: 8px; right: 8px; top: 8px; }
.pRainDrop.practice { top: auto; bottom: 14px; }
@keyframes pFall { from { transform: translateY(0); } to { transform: translateY(var(--fall, 200px)); } }
.pRainDrop.falling { animation: pFall linear forwards; }
.pRainDrop.paused, .pRainDrop.frozen { animation-play-state: paused; }
.pRainDrop.near .pOpt { border-color: var(--red); }
.pRainDrop .pOpt { min-height: 48px; background: rgba(38, 32, 25, 0.95); }
.pLives { display: flex; gap: 3px; }
.pHeart { color: var(--cinnabar); font-size: 15px; }
.pHeart.empty { color: var(--line); }

/* 猜招 */
.pWdBoard { display: grid; gap: 6px; justify-content: center; }
.pWdRow { display: flex; gap: 6px; }
.pWdCell {
  display: grid;
  place-items: center;
  width: clamp(38px, 11vw, 50px);
  height: clamp(38px, 11vw, 50px);
  border: 2px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
}
.pWdCell.filled { border-color: var(--ink-faint); }
.g { background: #3f8a5c; border-color: #3f8a5c; color: #fff; }
.y { background: #b58a26; border-color: #b58a26; color: #fff; }
.x { background: #3a3129; border-color: #3a3129; color: var(--ink-faint); }
.pWdKeys { display: grid; gap: 6px; }
.pWdKrow { display: flex; justify-content: center; gap: 4px; }
.pWdKey {
  flex: 1 1 0;
  max-width: 42px;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: 17px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.pWdKey.wide { flex: 1.6 1 0; max-width: 64px; }
.pWdGo {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-deep);
  color: var(--ink-faint);
  font: inherit;
  font-weight: 700;
  letter-spacing: 1px;
}
.pWdGo.ready { background: var(--amber); border-color: var(--amber); color: #2a1d08; cursor: pointer; }
.pWdMini { display: grid; gap: 3px; }
.pWdMini div { display: flex; gap: 3px; justify-content: center; }
.pWdMini i { width: 16px; height: 16px; border-radius: 3px; }

/* 連句 */
.pOrderLine {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-height: 64px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 18px;
  line-height: 1.5;
}
.pWordPlaced { color: var(--ink); }
.pCaret { color: var(--amber); animation: pBlink 1s steps(2) infinite; }
@keyframes pBlink { 50% { opacity: 0; } }
.pChips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pChip {
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  touch-action: manipulation;
}
.pChip:hover:not(:disabled) { border-color: var(--amber-deep); }
.pChip.used { visibility: hidden; }
.pChip.hint { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(216, 178, 90, 0.35); }
.pDone { text-align: center; }
.pDone[hidden] { display: none; }

/* 識畫 */
.pCard { justify-self: center; margin: 0; padding: 6px; border: 1px solid var(--amber-deep); border-radius: 12px; background: var(--bg-deep); }
.pCardImg { width: min(200px, 52vw); height: auto; border-radius: 8px; }
.pReveal { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); text-align: left; }
.pRevealWord { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pRevealWord b { color: var(--amber); font-size: 22px; font-weight: 600; }
.pRevealWord span { color: var(--ink-dim); font-size: 14px; }
.pRevealStory { color: var(--ink-dim); font-size: 13.5px; line-height: 1.85; }

/* 心魔之戰 */
.pBattle { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-deep); }
.pBattle.hurt { animation: pShake 0.36s ease; border-color: var(--red); }
.pBossImg { width: 96px; height: auto; border-radius: 8px; }
.pBossImg.hit { animation: pHit 0.4s ease; }
@keyframes pHit { 40% { filter: brightness(2.2) saturate(0.3); transform: scale(0.95); } }
.pBossInfo { display: grid; gap: 4px; }
.pBossName { font-family: var(--font-zh-serif); font-size: 17px; letter-spacing: 3px; }
.pBossBar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pBossBar i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: linear-gradient(90deg, var(--cinnabar), var(--red)); transition: width 0.4s ease; }
.pBossHp { color: var(--ink-faint); font-family: var(--font-en); font-size: 13px; }
.pHearts { display: flex; gap: 4px; }

/* 練功 */
.pFlash {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 250px;
  align-content: center;
  padding: 20px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(232, 161, 60, 0.06), transparent 60%), var(--bg-deep);
  text-align: center;
}
.pFlash.back { justify-items: stretch; align-content: start; min-height: 0; text-align: left; }
.pFlashLabel { color: var(--ink-faint); font-size: 12.5px; letter-spacing: 2px; }
.pFlashWord { color: var(--ink); font-size: 40px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.pFlash.back .pFlashWord { font-size: 30px; }
.pFlashHead { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; }
.pFlashCard { width: 96px; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.pIpa { color: var(--ink-faint); font-size: 14px; }
.pFlashZh { margin-top: 6px; font-size: 16px; }
.pExample { display: grid; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--amber-deep); background: var(--surface); border-radius: 0 10px 10px 0; }
.pExample p { font-size: 14.5px; line-height: 1.7; }
.pExample p + p { color: var(--ink-dim); font-size: 13.5px; }
.pFlip { justify-self: center; min-width: 200px; }
/* 背面內容（助憶故事＋例句）在手機上常超過一屏：自評列黏在視窗底部，不必捲到底才按得到 */
.pRates {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 -4px;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(30, 26, 22, 0.6), var(--surface) 30%);
}
.pRate {
  display: grid;
  gap: 2px;
  min-height: 60px;
  padding: 6px 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.pRate b { font-size: 15px; }
.pRate small { color: var(--ink-faint); font-size: 12px; }
.pRate.again { border-color: rgba(217, 108, 95, 0.6); }
.pRate.hard { border-color: rgba(216, 178, 90, 0.5); }
.pRate.good { border-color: rgba(86, 184, 163, 0.6); }
.pRate.easy { border-color: rgba(232, 161, 60, 0.7); }
.pSchedule { display: grid; gap: 4px; width: min(380px, 100%); text-align: left; }
.pSchedule li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.pSchedule b { font-weight: 600; }
.pSchedule span { color: var(--ink-dim); }

@media (max-width: 620px) {
  .playNav { gap: 10px; }
  .playNav .brand { gap: 8px; font-size: 18px; letter-spacing: 2px; }
  .playNav .navLinks { display: flex; gap: 14px; font-size: 13.5px; }
  .playNav .navLinks .hideSm { display: none; }
  .playNav .navCta { padding: 8px 12px; font-size: 13px; }
  .stage { padding: 14px 10px 18px; }
  .stageWrap { padding-inline: 12px; }
  .playInfo { padding-inline: 16px; }
  .playCta .betaActions a { width: 100%; }
  .pOpt { font-size: 14px; }
}
@media (max-width: 380px) {
  /* 品牌字本身就連回首頁；窄螢幕把「首頁」讓出來給 CTA */
  .playNav .navLinks .hideXs { display: none; }
}
@media (max-width: 360px) {
  .pOpts { grid-template-columns: 1fr; }
  .pLetter { width: 42px; height: 48px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .shake, .pBattle.hurt, .pBossImg.hit, .pCaret { animation: none; }
  .pTile, .pTimer i, .pBossBar i { transition: none; }
}