/* 추억의 정원: 정원 동화책 같은 나무 간판, 꽃잎, 양피지 톤 */
:root {
  --wood-hi: #e2ab69;
  --wood: #c48745;
  --wood-mid: #9a6233;
  --wood-dark: #6e4220;
  --wood-deep: #4d2c13;
  --cream: #fff7e3;
  --paper: #fff9ec;
  --paper-edge: #f3dfb4;
  --ink: #4a2e16;
  --ink-soft: #7a5a3a;
  --leaf: #5cbf4f;
  --leaf-hi: #8be070;
  --leaf-dark: #2f8a3a;
  --leaf-deep: #1f5e27;
  --petal: #ff8fb8;
  --petal-dark: #e0538a;
  --gold: #ffd257;
  --gold-dark: #d98a1c;
  --font-title: 'Jua', 'Gowun Dodum', 'Noto Sans KR', sans-serif;
  --font-body: 'Gowun Dodum', 'Noto Sans KR', system-ui, sans-serif;
  --wood-grain:
    repeating-linear-gradient(92deg, rgba(77, 44, 19, 0.07) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, var(--wood-mid));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #8fcf6a;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

.stage { position: fixed; inset: 0; }

.world {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(70, 40, 10, 0.22) 100%);
}

.screen-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 58%,
    rgba(var(--flash-color, 255, 244, 214), var(--flash-strength, 0.6)) 0%,
    rgba(var(--flash-color, 255, 244, 214), calc(var(--flash-strength, 0.6) * 0.5)) 35%,
    rgba(var(--flash-color, 255, 244, 214), 0) 75%);
}
.screen-flash.is-on { animation: screen-flash 0.42s ease-out; }
@keyframes screen-flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ── 나무 간판 HUD ─────────────────────────────────── */
.hud {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
}

.sign {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 18px;
  min-height: 58px;
  background: var(--wood-grain);
  border: 3px solid var(--wood-dark);
  border-radius: 18px;
  box-shadow:
    inset 0 2px 0 rgba(255, 240, 210, 0.55),
    inset 0 -5px 0 rgba(77, 44, 19, 0.25),
    0 5px 0 var(--wood-deep),
    0 12px 22px rgba(40, 20, 0, 0.3);
}
/* 간판 네 귀퉁이의 못 */
.sign::before, .sign::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0d8b0, #7a5530 70%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.sign::before { left: 9px; }
.sign::after { right: 9px; }

.sign-cell {
  display: grid;
  justify-items: center;
  line-height: 1;
  gap: 3px;
}
.sign-cell span {
  font-family: var(--font-title);
  font-size: 0.78rem;
  color: #fde9c4;
  text-shadow: 0 1px 0 var(--wood-dark);
  letter-spacing: 0.02em;
}
.sign-cell strong {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--cream);
  text-shadow: 0 2px 0 var(--wood-deep), 0 0 10px rgba(255, 220, 150, 0.35);
}
.sign-score strong { color: #fff1a8; }

/* 가운데 메달: 잎사귀 화관, 금테, 크림색 판에 남은 이동 */
.moves {
  position: relative;
  width: 104px;
  height: 104px;
  margin: -16px 4px -34px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 4px 0 rgba(77, 44, 19, 0.45)) drop-shadow(0 10px 14px rgba(40, 20, 0, 0.3));
}
.moves-medal { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.moves-medal .wreath { transform-origin: 60px 60px; animation: wreath 14s linear infinite; }
.moves-medal .lf-a { fill: #4fae45; stroke: #2a6f2e; stroke-width: 1.2; }
.moves-medal .lf-b { fill: #7fd36a; stroke: #2a6f2e; stroke-width: 1.2; }
.moves-medal .rim { fill: url(#rim); stroke: #8a5214; stroke-width: 2; }
.moves-medal .rim-in { fill: none; stroke: #fff4c4; stroke-width: 1.2; opacity: 0.8; }
.moves-medal .face { fill: url(#face); stroke: #d9a24a; stroke-width: 1; }
.moves-medal .gloss { fill: url(#shine); }
.moves-medal .bloom circle { fill: #ff9cc2; stroke: #d84f86; stroke-width: 1.2; }
.moves-medal .bloom .bloom-heart { fill: #ffd257; stroke: #c98a1c; }
.moves strong {
  position: relative;
  margin-top: -4px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 2.35rem;
  line-height: 1;
  color: #5a3414;
  text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}
.moves-ribbon {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 2px 12px 3px;
  font-family: var(--font-title);
  font-size: 0.68rem;
  color: #fff;
  text-shadow: 0 1px 0 var(--leaf-deep);
  background: linear-gradient(180deg, var(--leaf-hi), var(--leaf-dark));
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%);
}
.moves.bump strong { animation: moves-bump 0.35s ease-out; }
@keyframes moves-bump { 30% { transform: scale(1.3); } }
.moves.is-low .lf-a { fill: #e8703a; stroke: #8a2a14; }
.moves.is-low .lf-b { fill: #f5a05a; stroke: #8a2a14; }
.moves.is-low .rim { stroke: #b4232c; }
.moves.is-low { animation: low-glow 0.9s ease-in-out infinite; }
.moves.is-low strong { color: #b4232c; animation: beat 0.9s ease-in-out infinite; }
@keyframes low-glow {
  50% { filter: drop-shadow(0 4px 0 rgba(77, 44, 19, 0.45)) drop-shadow(0 0 16px rgba(255, 80, 60, 0.85)); }
}
@keyframes beat { 50% { transform: scale(1.16); } }
@keyframes wreath { to { transform: rotate(360deg); } }

.stage-name {
  margin: 30px 0 0;
  padding: 5px 28px 7px;
  font-family: var(--font-title);
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 2px 0 var(--leaf-deep);
  background: linear-gradient(180deg, var(--leaf-hi), var(--leaf) 45%, var(--leaf-dark));
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  filter: drop-shadow(0 3px 0 rgba(31, 94, 39, 0.5));
}
.stage-name:empty { display: none; }
.stage-name.flash { animation: name-in 0.6s ease-out; }
@keyframes name-in { 0% { transform: scale(1.5); opacity: 0; } 60% { transform: scale(0.95); opacity: 1; } }

/* 목표: 씨앗 봉투 */
.goals {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.goal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 14px 3px 4px;
  background: var(--paper);
  border: 2px solid var(--paper-edge);
  outline: 2px dashed rgba(196, 135, 69, 0.45);
  outline-offset: -6px;
  border-radius: 14px;
  box-shadow: 0 3px 0 #d8b98a, 0 6px 14px rgba(40, 20, 0, 0.18);
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--ink-soft);
  transform: rotate(-1.5deg);
}
.goal:nth-child(2n) { transform: rotate(1.5deg); }
.goal img { width: 38px; height: 38px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18)); }
.goal strong {
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink);
  min-width: 1.6em;
  text-align: right;
}
.goal.is-done {
  background: #effbe6;
  border-color: #a8dc8f;
  outline-color: rgba(47, 138, 58, 0.4);
}
.goal.is-done strong { color: var(--leaf-dark); font-size: 0.95rem; }
.goal.is-done::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 2px 0 var(--leaf-deep), 0 0 12px rgba(139, 224, 112, 0.9);
  animation: pop-in 0.35s ease-out;
}
.goal.bump { animation: bump 0.35s ease-out; }
@keyframes bump { 30% { transform: scale(1.22) rotate(0deg); } }
@keyframes pop-in { from { transform: scale(0); } 70% { transform: scale(1.3); } }

.sound-btn {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid var(--wood-dark);
  border-radius: 50%;
  background: var(--wood-grain);
  color: var(--cream);
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, 0.5), 0 4px 0 var(--wood-deep), 0 8px 14px rgba(40, 20, 0, 0.25);
  cursor: pointer;
}
.sound-btn svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 0 var(--wood-deep)); }
.sound-btn .icon-off { display: none; }
.sound-btn[aria-pressed='false'] .icon-on { display: none; }
.sound-btn[aria-pressed='false'] .icon-off { display: block; }
.sound-btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 240, 210, 0.5), 0 1px 0 var(--wood-deep); }

.move-gain {
  position: absolute;
  left: 50%;
  top: 92%;
  white-space: nowrap;
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: #eaffd8;
  -webkit-text-stroke: 1.5px var(--leaf-deep);
  paint-order: stroke fill;
  text-shadow: 0 0 14px rgba(139, 224, 112, 0.95);
  pointer-events: none;
  animation: gain 1.6s ease-out forwards;
}
@keyframes gain {
  0% { opacity: 0; transform: translate(-50%, 30px) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, 4px) scale(1.3); }
  70% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(1); }
}

/* ── 점수 팝업, 연쇄, 칭찬 ───────────────────────────── */
.popups { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.popup {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: 1.35rem;
  color: #fffbe6;
  white-space: nowrap;
  -webkit-text-stroke: 2px #c76a12;
  paint-order: stroke fill;
  text-shadow: 0 0 12px rgba(255, 214, 90, 0.95), 0 3px 0 rgba(140, 60, 0, 0.5);
  animation: popup 1.1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.popup.combo { font-size: 1.6rem; color: #fff3f8; -webkit-text-stroke-color: #d63a7a; text-shadow: 0 0 14px rgba(255, 143, 184, 1), 0 3px 0 rgba(140, 20, 60, 0.5); }
.popup.big { font-size: 2.2rem; color: #fffbe0; -webkit-text-stroke-color: #b4541a; text-shadow: 0 0 22px rgba(255, 210, 90, 1), 0 0 44px rgba(255, 180, 60, 0.7), 0 4px 0 rgba(120, 50, 0, 0.6); }
.popup.special { font-size: 1.15rem; color: #f6efff; -webkit-text-stroke-color: #7a4fd0; text-shadow: 0 0 14px rgba(200, 170, 255, 1); }
@keyframes popup {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.4); }
  18% { opacity: 1; transform: translate(-50%, -70%) scale(1.3); }
  35% { transform: translate(-50%, -80%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.95); }
}

.combo {
  position: absolute;
  right: max(16px, calc(50% - 330px));
  top: 34%;
  margin: 0;
  font-family: var(--font-title);
  font-size: calc(1.8rem * var(--size, 1));
  color: #fff6c2;
  -webkit-text-stroke: 2.5px #d0601a;
  paint-order: stroke fill;
  text-shadow: 0 0 18px rgba(255, 200, 80, 1), 0 0 40px rgba(255, 150, 40, 0.6), 0 4px 0 rgba(130, 50, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: rotate(-7deg);
}
.combo.is-on { animation: combo 0.95s ease-out forwards; }
@keyframes combo {
  0% { opacity: 0; transform: rotate(-7deg) scale(2.4); }
  14% { opacity: 1; transform: rotate(-7deg) scale(0.88); }
  24% { transform: rotate(-7deg) scale(1.06); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-7deg) scale(1) translateY(-12px); }
}

.toasts {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.toast {
  grid-area: 1 / 1;
  margin: 0;
  padding: 8px 20px 10px;
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--cream);
  background: var(--wood-grain);
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--wood-deep), 0 10px 22px rgba(40, 20, 0, 0.3);
  text-shadow: 0 2px 0 var(--wood-deep);
  animation: rise 1.4s ease-out forwards;
}
.toast.small { font-size: 0.95rem; }
.toast.big {
  font-size: clamp(2.3rem, 8vw, 4rem);
  background: none;
  border: 0;
  box-shadow: none;
  color: #fffbe0;
  -webkit-text-stroke: 3px #e07a1f;
  paint-order: stroke fill;
  text-shadow: 0 0 24px rgba(255, 214, 90, 1), 0 0 60px rgba(255, 160, 60, 0.75), 0 6px 0 #a3461a;
}
@keyframes rise {
  0% { opacity: 0; transform: translateY(24px) scale(0.7); }
  15% { opacity: 1; transform: translateY(0) scale(1.08); }
  70% { opacity: 1; transform: translateY(-18px) scale(1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.95); }
}

.banner {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 22px 12px;
  font-family: var(--font-title);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 2px 0 var(--wood-deep);
  background: var(--wood-grain);
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, 0.5), 0 4px 0 var(--wood-deep), 0 12px 26px rgba(40, 20, 0, 0.3);
  animation: banner-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
  pointer-events: none;
}
.banner[hidden] { display: none; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, 24px) rotate(-3deg); } }

/* ── 안내 카드: 양피지와 나무 테두리 ─────────────────── */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(40, 60, 20, 0.25), rgba(25, 30, 10, 0.55));
  backdrop-filter: blur(3px);
}
.overlay[hidden] { display: none; }

.card {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100% - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 30px 24px 24px;
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(235, 200, 140, 0.35), transparent 60%),
    var(--paper);
  border: 6px solid var(--wood-mid);
  outline: 3px solid var(--wood-dark);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 3px #f6e2bb,
    inset 0 0 30px rgba(196, 135, 69, 0.25),
    0 8px 0 var(--wood-deep),
    0 26px 60px rgba(20, 10, 0, 0.45);
  animation: card-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
/* 귀퉁이 잎사귀 장식 */
.card::before, .card::after {
  content: '';
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M4 4c22 0 34 10 36 30C20 34 6 24 4 4z' fill='%235cbf4f' stroke='%232f8a3a' stroke-width='2'/%3E%3Cpath d='M4 4c10 10 18 18 34 28' fill='none' stroke='%232f8a3a' stroke-width='1.6'/%3E%3Cpath d='M8 30c14-2 22 4 26 18C20 50 10 42 8 30z' fill='%238be070' stroke='%232f8a3a' stroke-width='2'/%3E%3Ccircle cx='40' cy='12' r='6' fill='%23ff8fb8' stroke='%23e0538a' stroke-width='2'/%3E%3Ccircle cx='40' cy='12' r='2.2' fill='%23ffd257'/%3E%3C/svg%3E") no-repeat center / contain;
}
.card::before { top: 2px; left: 2px; }
.card::after { bottom: 2px; right: 2px; transform: rotate(180deg); }
@keyframes card-in { from { transform: scale(0.8) rotate(-3deg); opacity: 0; } }

.card h2 {
  margin: 0 0 14px;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 2.1rem;
  color: #fff6c2;
  -webkit-text-stroke: 2px var(--wood-dark);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--wood-deep);
}
.eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 16px 5px;
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 0 1px 0 var(--leaf-deep);
  background: linear-gradient(180deg, var(--leaf-hi), var(--leaf-dark));
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--leaf-deep);
}
.card-lead { margin: 0; color: var(--ink); line-height: 1.65; }
.card-note { margin: 14px 0 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; }
.card-score { margin: 0; font-family: var(--font-title); color: var(--ink-soft); }
.card-score strong {
  font-weight: 400;
  font-size: 3rem;
  color: #fff1a8;
  -webkit-text-stroke: 2px #c76a12;
  paint-order: stroke fill;
  text-shadow: 0 0 20px rgba(255, 210, 90, 0.9), 0 4px 0 #8a4410;
}

.card-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.card-goals li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: #fff;
  border: 2px dashed #e2c48f;
  border-radius: 14px;
  text-align: left;
  font-family: var(--font-title);
  color: var(--ink);
}
.card-goals img { width: 46px; height: 46px; }

.card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.btn {
  font-family: var(--font-title);
  font-size: 1.05rem;
  min-height: 48px;
  padding: 0 22px 3px;
  border-radius: 16px;
  border: 3px solid var(--wood-dark);
  color: var(--cream);
  background: var(--wood-grain);
  text-shadow: 0 2px 0 var(--wood-deep);
  box-shadow: inset 0 2px 0 rgba(255, 240, 210, 0.5), 0 5px 0 var(--wood-deep), 0 10px 18px rgba(40, 20, 0, 0.25);
  cursor: pointer;
  transition: transform 0.08s;
}
.btn.primary {
  font-size: 1.3rem;
  min-width: 170px;
  min-height: 56px;
  border-color: var(--leaf-deep);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.45), transparent 60%),
    linear-gradient(180deg, var(--leaf-hi), var(--leaf) 50%, var(--leaf-dark));
  text-shadow: 0 2px 0 var(--leaf-deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 6px 0 var(--leaf-deep), 0 0 24px rgba(139, 224, 112, 0.55), 0 12px 22px rgba(20, 60, 10, 0.3);
  animation: glow-btn 2.2s ease-in-out infinite;
}
@keyframes glow-btn { 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 6px 0 var(--leaf-deep), 0 0 36px rgba(170, 255, 140, 0.9), 0 12px 22px rgba(20, 60, 10, 0.3); } }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--wood-deep); }
.btn.primary:active { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--leaf-deep); }

button:focus-visible, a:focus-visible { outline: 3px solid #fff3a0; outline-offset: 3px; }

.corner-link {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(8px, env(safe-area-inset-bottom));
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.noscript { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: var(--paper); }

@media (max-width: 560px) {
  .hud { width: calc(100% - 20px); }
  .sign { padding: 6px 10px; min-height: 52px; }
  .sign-cell strong { font-size: 1.25rem; }
  .moves { width: 88px; height: 88px; margin: -12px 2px -28px; }
  .moves strong { font-size: 1.95rem; }
  .goal { font-size: 0.78rem; padding-right: 10px; }
  .goal img { width: 30px; height: 30px; }
  .goal-name { display: none; }
  .card h2 { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .popup, .move-gain, .toast { animation: none; opacity: 1; }
}