:root {
  color-scheme: dark;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: #f9f3ff;
  background: #120e24;
  --panel: #211a3b;
  --line: #8d75b5;
  --gold: #ffe8a8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  /* ★ここを不透明な色にしてはいけない。
     bodyの背景は「負のz-indexの子」より後に塗られるので、
     下の body::before（森の絵）を丸ごと覆い隠してしまう。
     地の色は :root 側で持たせている。 */
  background: transparent;
}

/* 魔法の森の絵は「画面の地」にする。盤の下に敷くとマスに96%隠れて見えないため。
   絵の上に幕を1枚かけて、文字の読みやすさ（4.5:1）を確保する。
   幕の濃さは tests/browser-smoke.cjs が実際の画素から測って見張っている。 */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background: url("assets/stage-background.webp") center / cover no-repeat;
}

body::after {
  z-index: -1;
  background:
    radial-gradient(circle at 12% 5%, #4b2d68a6 0, transparent 24rem),
    radial-gradient(circle at 90% 28%, #174d4ba6 0, transparent 27rem),
    linear-gradient(180deg, #120d269e, #0d1020a8 64%, #120d26b3);
}

button { font: inherit; }

button:focus-visible,
.doll:focus-visible,
details:focus-within {
  outline: 4px solid #fff2a8;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: max(20px, env(safe-area-inset-top)) 16px 14px;
  text-align: center;
}

.hero > :not(.alice-hero-art) { position: relative; z-index: 1; }

/* ★左にはPCの自動広告が縦レールで出る（2026-08-24に本番で確認）。
   絵もHUDも左に置かない。右上へ寄せる。 */
.alice-hero-art {
  position: absolute;
  z-index: 0;
  right: max(8px, calc(50% - 560px));
  top: 50%;
  height: min(86%, 96px);
  width: auto;
  transform: translateY(-50%);
  opacity: .58;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid #e6d2ff8c;
  border-radius: 50%;
  background: url("assets/alice-face-smile.webp") center / cover no-repeat;
  filter: drop-shadow(0 8px 18px #08051199);
  pointer-events: none;
}

.hero h1 {
  margin: .14em 0;
  font-family: Georgia, "Yu Mincho", serif;
  font-size: clamp(26px, 5.6vw, 52px);
  line-height: 1.12;
  letter-spacing: .03em;
  color: #fff9df;
  text-shadow: 0 3px 0 #633c83, 0 8px 28px #d9b5ff5c;
}

.hero p:last-child { margin: 0; color: #f0e9fa; }

.eyebrow {
  margin: 0;
  color: #d6f7ea;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

main { padding: 0 12px 48px; }

.game-card {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.hud {
  width: min(100%, calc(100svh - 176px), 960px);
  min-width: min(100%, 280px);
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid #8e76b6;
  border-radius: 18px;
  background: #211a3be8;
  box-shadow: 0 10px 28px #08051180;
}

.hud > div {
  min-height: 62px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 7px 2px;
  border-right: 1px solid #80689d72;
  flex-wrap: wrap;
}

.hud > div:last-child { border-right: 0; }
.hud span { width: 100%; text-align: center; color: #cdbfe1; font-size: 10px; }
.hud strong { font-variant-numeric: tabular-nums; font-size: clamp(20px, 5vw, 32px); line-height: .9; color: #fff7d6; }
.hud small { color: #b9e6d5; font-size: 10px; }
#bestValue { width: 100%; text-align: center; }

.stage-wrap {
  display: grid;
  place-items: center;
}

.stage {
  --cols: 5;
  position: relative;
  width: min(100%, calc(100svh - 176px), 960px);
  min-width: min(100%, 280px);
  aspect-ratio: 1;
  overflow: hidden;
  border: clamp(3px, .7vw, 8px) solid #4d3a6d;
  border-radius: clamp(14px, 3.2vw, 34px);
  background: linear-gradient(180deg, #1b1338, #140e29 62%, #181040);
  box-shadow: 0 22px 60px #05030db3, inset 0 0 0 2px #b99adb55;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: contain;
  cursor: crosshair;
}

.board,
.doll-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.board { z-index: 1; }
.doll-layer { z-index: 3; pointer-events: none; }

/* 盤は無地の濃い地にして、糸と人形をいちばん読みやすくする。 */
#boardShade { opacity: .34; }
#boardFloor { opacity: .6; }

.grid-cell {
  fill: #221a45a8;
  stroke: #d3c0f08f;
  stroke-width: 3;
}

.cell-fill { transition: opacity .12s linear; }

.thread-base {
  filter: drop-shadow(0 3px 5px #07040f8c);
  transition: stroke-width .12s;
}

.thread-base.is-done { stroke-width: 40; }
.thread-base.is-drawing { stroke-width: 42; }
.thread-weave { pointer-events: none; }

.doll {
  --doll-color: #e65a70;
  position: absolute;
  width: calc(100% / var(--cols) * .82);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  border: clamp(2px, .35vw, 4px) solid #fff8e7;
  border-radius: 50%;
  color: #1b142e;
  background: color-mix(in srgb, var(--doll-color), #241634 46%);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--doll-color), #140e25 52%), 0 6px 12px #08040cb8;
  cursor: pointer;
  pointer-events: none;
  transition: box-shadow .18s, transform .12s;
}

.doll-sprite {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: url("assets/alice-and-dolls-aura-sprite-v2.webp") var(--sprite-x) var(--sprite-y) / 400% 200% no-repeat;
  filter: drop-shadow(0 2px 3px #090616aa);
  pointer-events: none;
}

.doll-symbol {
  position: absolute;
  z-index: 1;
  right: -12%;
  bottom: -12%;
  display: grid;
  place-items: center;
  width: max(12px, 44%);
  aspect-ratio: 1;
  border: 2px solid #fff8e7;
  border-radius: 50%;
  background: color-mix(in srgb, var(--doll-color), #ffffff 32%);
  color: #140d24;
  font-size: 62%;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
}

.doll.is-linked {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 3px #fff6cc, 0 0 16px var(--doll-color), 0 6px 12px #08040cb8;
}

@media (max-width: 520px) {
  .alice-hero-art { height: min(86%, 62px); opacity: .4; right: 4px; }
}

.stage-message {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 6%;
  transform: translate(-50%, -10px);
  width: max-content;
  max-width: 90%;
  padding: 7px 15px;
  border: 2px solid #d8c0f7;
  border-radius: 999px;
  color: #fff;
  background: #24183fe8;
  box-shadow: 0 7px 22px #08040da8;
  font-size: clamp(11px, 2.8vw, 20px);
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.stage-message.show { animation: message 1.35s ease; }

.overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: #0c0816c9;
  backdrop-filter: blur(5px);
}

.overlay[hidden] { display: none; }

.panel {
  width: min(94%, 680px);
  max-height: 96%;
  overflow: auto;
  padding: clamp(15px, 3.6vw, 32px);
  border: 2px solid #9d84c6;
  border-radius: clamp(18px, 4vw, 34px);
  background: linear-gradient(145deg, #31234e, #1b1733);
  box-shadow: 0 24px 70px #050208d9, inset 0 0 40px #a87adb1a;
  text-align: center;
}

.panel h3 {
  margin: 5px 0 15px;
  font-family: Georgia, "Yu Mincho", serif;
  color: #fff7d2;
  font-size: clamp(20px, 4.6vw, 36px);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.steps > div {
  min-width: 0;
  padding: 9px 4px;
  border: 1px solid #9479b8;
  border-radius: 16px;
  background: #15112899;
}

.steps b,
.steps small { display: block; }
.steps b { margin-top: 5px; font-size: clamp(10px, 2.5vw, 16px); }
.steps small { color: #cbbdde; font-size: clamp(8px, 1.9vw, 12px); }
.step-picture { display: grid; place-items: center; min-height: 46px; color: #fff4ae; font-size: clamp(28px, 7.4vw, 52px); font-weight: 300; line-height: 1; }
.pair-picture { color: #ffc0cb; }
.path-picture { color: #7de0b4; }
.goal-picture { color: #e8c7ff; }

.primary-button,
.secondary-button {
  min-width: 112px;
  min-height: 44px;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  font-weight: 900;
}

.primary-button {
  border: 2px solid #fff6c5;
  color: #25183b;
  background: linear-gradient(#fff5bf, #dbba72);
  box-shadow: 0 5px 0 #7d5a2f;
}

.primary-button[hidden] { display: none; }

.secondary-button {
  margin-top: 10px;
  border: 2px solid #b9a4dc;
  color: #f7f0ff;
  background: #332653;
}

.timer-note { margin: 12px 0 0; color: #cbbdde; font-size: 12px; }
.select-note { margin: 12px 0 14px; color: #cbbdde; font-size: clamp(10px, 2.4vw, 13px); }
.help-panel { width: min(94%, 570px); text-align: left; }
.help-panel h3 { text-align: center; }
.help-panel p { color: #e1d7ed; line-height: 1.7; font-size: clamp(12px, 2.7vw, 16px); }
.help-panel .primary-button { display: block; margin: 16px auto 0; }

/* ---------------- ステージ選び ---------------- */

.select-panel { width: min(94%, 620px); }

.stage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(5px, 1.4vw, 10px);
}

.stage-chip {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 52px;
  padding: 5px 2px;
  border: 1px solid #8d75b5;
  border-radius: 13px;
  color: #f6f0ff;
  background: #241b3f;
  cursor: pointer;
  line-height: 1.1;
}

.stage-chip b { font-size: clamp(14px, 3.6vw, 20px); font-variant-numeric: tabular-nums; }
.stage-chip small { color: #bfaee0; font-size: clamp(8px, 2vw, 11px); }
.stage-chip i { color: #ffdf8a; font-size: clamp(6px, 1.7vw, 10px); font-style: normal; letter-spacing: -.5px; }
.stage-chip.is-cleared { border-color: #8ce0b6; background: #1e3a35; }
.stage-chip.is-cleared b { color: #b9f4dc; }
.stage-chip.is-current { outline: 3px solid #fff2a8; outline-offset: 1px; }
.stage-chip:disabled { opacity: .42; cursor: not-allowed; }

.result-score { margin: 0 0 12px; color: #fff2a9; font-size: clamp(16px, 4.4vw, 28px); }
.result-score span { font-size: 2.2em; font-weight: 1000; }
.result-panel dl { width: min(100%, 390px); margin: 0 auto 18px; }
.result-panel dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #8b75a85c; }
.result-panel dt { color: #cabbdc; font-size: clamp(11px, 2.6vw, 15px); }
.result-panel dd { margin: 0; font-weight: 900; font-size: clamp(11px, 2.6vw, 15px); }

/* ---------------- 下のボタン ---------------- */

.game-controls {
  width: min(100%, calc(100svh - 176px), 960px);
  min-width: min(100%, 280px);
  margin: 8px auto 0;
  display: grid;
  gap: 7px;
}

.control-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.control-buttons button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 2px;
  border: 1px solid #8d75b5;
  border-radius: 12px;
  color: #f6f0ff;
  background: #241b3f;
  cursor: pointer;
  font-size: clamp(11px, 3vw, 15px);
  font-weight: 700;
}

.control-buttons button:hover { background: #2f2350; }
.control-buttons button:disabled { opacity: .42; cursor: not-allowed; }
.game-controls p { margin: 0; min-height: 30px; color: #efe8f8; font-size: 12px; line-height: 1.4; text-align: center; }

.guide {
  width: min(100%, 960px);
  margin: 38px auto 0;
  padding: clamp(19px, 4vw, 34px);
  border: 1px solid #66547e;
  border-radius: 24px;
  background: #171329e8;
  box-shadow: 0 16px 42px #08051170;
}

.guide h2 { margin: 0 0 12px; color: #fff1b9; font-family: Georgia, "Yu Mincho", serif; font-size: clamp(21px, 4vw, 30px); }
.guide p, .guide li { color: #d7cce5; line-height: 1.85; }
.guide details { padding: 13px 0; border-top: 1px solid #65547d; }
.guide summary { cursor: pointer; color: #f4eaff; font-weight: 800; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

footer {
  padding: 26px max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid #56486c;
  color: #a99db8;
  background: #0c0916;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

/* WordPressへ埋めたとき（?embed=1）。ページ側に同じ解説があるので、
   ゲームだけを画面ぴったりに出して、iframeの中で縦スクロールが出ないようにする。 */
.is-embed body { min-height: 0; }
.is-embed .guide,
.is-embed footer { display: none; }
.is-embed main { padding-bottom: 8px; }

/* ---------------- 盤の左どなりに立つ全身のアリス ---------------- */

/*
 * 場所の計算:
 *   盤の左はし = 50vw - 盤の幅/2
 *   ★左には自動広告の縦レールが出る（実測で右はし約273px）。290pxまでは使わない。
 *   使える幅 = 50vw - 盤の幅/2 - 290px
 *   これが0以下になる画面では、幅が0になって自然に消える。
 */
.alice-standee {
  --board: min(calc(100svh - 176px), 960px);
  --gap: 12px;    /* 盤とのすき間 */
  --rail: 300px;  /* 左の縦広告のぶん。ここより左には出さない（実測の右はし約273px＋余裕） */
  position: fixed;
  z-index: 0;
  bottom: 1.5%;
  right: calc(50vw + var(--board) / 2 + var(--gap));
  /* すき間ぶんも引いておかないと、左はしが --rail より内側へ入ってしまう */
  width: clamp(0px, calc(50vw - var(--board) / 2 - var(--gap) - var(--rail)), 230px);
  aspect-ratio: 3 / 4;
  background: url("assets/alice-and-dolls-aura-sprite-v2.webp") 0 0 / 400% 200% no-repeat;
  /* 元の絵は背景が色つきのオーラなので、ふちをぼかして森になじませる */
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  filter: drop-shadow(0 8px 20px #06030fb3);
  pointer-events: none;
}

/* 横画面のスマホ・タブレットでは盤の余白が無いので出さない */
@media (max-height: 500px) and (orientation: landscape) {
  .alice-standee { display: none; }
}

/* ---------------- アリスのカットイン ---------------- */

.alice-cutin {
  position: absolute;
  z-index: 9;
  right: 2%;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  max-width: 92%;
  transform: translateY(106%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.alice-cutin.is-shown { transform: translateY(0); }

.alice-figure {
  flex: none;
  width: clamp(74px, 21%, 158px);
  aspect-ratio: 1;
  border: 3px solid #e6d2ff;
  border-radius: 50%;
  background: url("assets/alice-face-talk.webp") center / cover no-repeat;
  box-shadow: 0 6px 18px #06030fcc, 0 0 22px #a87adb4d;
}

/* 場面によってアリスの顔を変える */
.alice-cutin[data-mood="thread"] .alice-figure { background-image: url("assets/alice-face-thread.webp"); }
.alice-cutin[data-mood="smile"] .alice-figure { background-image: url("assets/alice-face-smile.webp"); }

.alice-line {
  position: relative;
  min-width: 0;
  margin: 0 0 14%;
  padding: 9px 14px;
  border: 2px solid #e6d2ff;
  border-radius: 16px 16px 4px 16px;
  color: #fff8ea;
  background: #2a1c4af2;
  box-shadow: 0 8px 22px #07040d9e;
  font-size: clamp(11px, 2.4vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

/* クリアの瞬間、七色の糸が一斉に光る */
.is-celebrating .thread-base { animation: threadGlow .8s ease 2; }

.clear-alice {
  display: block;
  width: clamp(84px, 24%, 138px);
  aspect-ratio: 1;
  margin: -4px auto 6px;
  border: 3px solid #ffe9b4;
  border-radius: 50%;
  background: url("assets/alice-face-smile.webp") center / cover no-repeat;
  box-shadow: 0 6px 18px #06030fcc, 0 0 26px #ffd88a55;
}

/* 20面ぜんぶクリアしたときだけ、ご褒美の1枚絵にする */
.clear-alice.is-final {
  width: min(100%, 320px);
  aspect-ratio: 4 / 3;
  margin: 0 auto 6px;
  border: 2px solid #e6d2ff;
  border-radius: 16px;
  background-image: url("assets/alice-all-clear.webp");
}

/* 絵が入るぶん、まわりをつめる */
.result-panel:has(.is-final) h3 { margin: 2px 0 8px; font-size: clamp(18px, 3.6vw, 28px); }
.result-panel:has(.is-final) .clear-line { margin-bottom: 6px; }
.result-panel:has(.is-final) .result-score { margin-bottom: 2px; font-size: clamp(13px, 3.2vw, 20px); }
.result-panel:has(.is-final) .result-score span { font-size: 1.8em; }
.result-panel:has(.is-final) dl { margin-bottom: 10px; }
.result-panel:has(.is-final) dl div { padding: 3px 0; }

.clear-line {
  margin: 0 0 10px;
  color: #ffe9b4;
  font-size: clamp(12px, 2.7vw, 17px);
  font-weight: 700;
}

@keyframes threadGlow {
  50% { filter: drop-shadow(0 0 14px currentColor) drop-shadow(0 3px 5px #07040f8c); }
}

@keyframes message { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.86); } 14%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -12px); } }

@media (max-width: 560px) {
  .hero { padding-bottom: 10px; }
  .hero p:last-child { font-size: 12px; }
  main { padding-inline: 5px; }
  .hud, .stage, .game-controls { width: 100%; }
  .hud > div { min-height: 54px; }
  .steps { gap: 5px; }
  .panel { width: 96%; }
  .intro-panel { padding: 10px 11px; }
  .intro-panel h3 { margin: 2px 0 8px; font-size: 20px; }
  .intro-panel .steps { margin-bottom: 9px; }
  .intro-panel .steps > div { padding: 5px 2px; }
  .intro-panel .step-picture { min-height: 32px; font-size: 27px; }
  .intro-panel .timer-note { display: none; }
  .two-column { grid-template-columns: 1fr; gap: 8px; }
}

/* 小さい画面では枠と余白をけずり、7×7までのマスを44 CSS px以上に保つ。 */
@media (max-width: 360px) {
  main { padding-inline: 2px; }
  .stage { border-width: 2px; }
}

@media (min-width: 1100px) and (min-height: 650px) {
  .hero {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  .hero h1 {
    margin-block: .08em;
    font-size: clamp(34px, 3.2vw, 46px);
  }

  .hero p:last-child { font-size: 13px; }

  /* 横に余裕があるので、アリスを主役らしく大きく・はっきり出す。
     ★高さは見出しの帯に収める。幅で決めると、あごの所で切れる。 */
  .hero { padding-bottom: 14px; }
  .alice-hero-art { height: min(92%, 116px); opacity: 1; border-width: 3px; }

  /* ★左の列は空けておく。PCの自動広告が左に縦レールで出て、置いたものを隠すため
     （2026-08-24に本番で確認）。盤の大きさと位置は変えず、HUDだけ右上へ移す。 */
  .game-card {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, calc(100svh - 176px)) minmax(160px, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      ". stage hud"
      ". stage controls";
    align-items: start;
    gap: 12px;
  }

  .game-card > .sr-only { position: absolute; }

  .hud {
    grid-area: hud;
    width: 100%;
    min-width: 0;
    margin: 0;
    grid-template-columns: 1fr;
  }

  .hud > div {
    min-height: 62px;
    border-right: 0;
    border-bottom: 1px solid #80689d72;
  }

  .hud > div:last-child { border-bottom: 0; }
  .stage-wrap { grid-area: stage; }

  .stage {
    width: 100%;
    min-width: 0;
    max-width: calc(100svh - 176px);
  }

  .game-controls {
    grid-area: controls;
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .control-buttons { grid-template-columns: 1fr; }

  .game-controls p {
    min-height: 54px;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px solid #66547e;
    border-radius: 14px;
    background: #171329e8;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 6px 12px 4px; }
  .hero h1 { margin: 0; font-size: 22px; }
  .hero p { display: none; }
  main { padding-bottom: 24px; }
  .game-card {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(240px, calc(100svh - 56px)) minmax(140px, 1fr);
    grid-template-areas: "hud stage controls";
    align-items: start;
    gap: 10px;
  }
  .game-card > .sr-only { position: absolute; }
  .hud { grid-area: hud; width: 100%; min-width: 0; margin: 0; grid-template-columns: 1fr; }
  .hud > div { min-height: 42px; border-right: 0; border-bottom: 1px solid #80689d72; }
  .hud > div:last-child { border-bottom: 0; }
  .hud strong { font-size: 18px; }
  .stage-wrap { grid-area: stage; }
  .stage { width: 100%; min-width: 0; max-width: calc(100svh - 56px); }
  .game-controls { grid-area: controls; width: 100%; min-width: 0; margin: 0; }
  .control-buttons { grid-template-columns: 1fr 1fr; }
  .game-controls p { min-height: 0; font-size: 11px; }
  .overlay { padding: 5px; }
  .panel { max-height: 97%; padding: 9px 11px; }
  .panel h3 { margin: 0 0 5px; font-size: 18px; }
  .panel .eyebrow { font-size: 10px; }
  .stage-chip { min-height: 38px; }
  .alice-figure { width: clamp(56px, 16%, 92px); border-width: 2px; }
  .alice-line { padding: 5px 9px; font-size: 11px; }
  .clear-alice { width: 62px; margin: 0 auto 4px; }
  .clear-alice.is-final { width: min(100%, 260px); }
  .clear-line { margin-bottom: 4px; font-size: 12px; }
  .select-note { margin: 7px 0 8px; }
  .result-score { margin-bottom: 4px; font-size: 16px; }
  .result-panel dl { margin-bottom: 6px; }
  .result-panel dl div { padding: 2px 0; }
  .secondary-button { margin-top: 6px; }
  .guide { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}