:root {
  color-scheme: dark;
  --bg: #071a22;
  --bg-2: #0c2630;
  --surface: rgba(8, 30, 38, 0.86);
  --surface-2: rgba(13, 46, 58, 0.92);
  --line: rgba(159, 222, 220, 0.28);
  --line-strong: rgba(246, 205, 105, 0.58);
  --ink: #f7fbf4;
  --ink-soft: #cbe5de;
  --ink-muted: #8fb6b0;
  --gold: #f6cd69;
  --gold-2: #fff0a8;
  --teal: #30d6c6;
  --rose: #ff5c7a;
  --blue: #55b9ff;
  --green: #54df78;
  --shadow: rgba(0, 0, 0, 0.42);
  --radius: 8px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(48, 214, 198, 0.15), transparent 36%),
    linear-gradient(180deg, #061016 0%, #0b2630 50%, #071016 100%);
  color: var(--ink);
  touch-action: manipulation;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.hidden {
  display: none !important;
}

.archerlab-link {
  position: fixed;
  top: calc(10px + var(--safe-top));
  left: 50%;
  z-index: 80;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 240, 168, 0.34);
  border-radius: 999px;
  background: rgba(4, 20, 26, 0.72);
  color: var(--gold-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.app-shell {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.screen.is-active {
  display: grid;
}

.title-screen {
  place-items: center;
  padding: calc(48px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}

.title-bg,
.title-bg img,
.title-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.title-bg img {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.015);
}

.title-shade {
  background:
    linear-gradient(180deg, rgba(2, 12, 18, 0.36) 0%, rgba(2, 12, 18, 0.05) 34%, rgba(2, 12, 18, 0.42) 100%),
    linear-gradient(90deg, rgba(2, 12, 18, 0.56), transparent 32%, transparent 68%, rgba(2, 12, 18, 0.56));
}

.topbar {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: 12px;
  z-index: 5;
  display: flex;
  gap: 8px;
}

.title-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(92vw, 560px);
  margin-top: auto;
  margin-bottom: min(5vh, 42px);
  text-align: center;
  isolation: isolate;
}

.title-content::before {
  content: "";
  position: absolute;
  inset: -18px -34px -24px;
  z-index: -1;
  background: url("../images/ui/ui-title-plaque.png") center / 100% 100% no-repeat;
  opacity: 0.78;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.34));
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.48);
}

/* 게임 오버(실패) 시 빨간 계열로 명확히 구분 */
.eyebrow.is-gameover {
  color: #ff7d7d;
  text-shadow: 0 1px 10px rgba(255, 60, 60, 0.5);
}
#result-title.is-gameover {
  color: #ffd6d6;
  text-shadow: 0 2px 16px rgba(255, 60, 60, 0.35);
}

h1,
h2,
p {
  margin-top: 0;
}

.title-content h1 {
  margin-bottom: 6px;
  color: #fff9da;
  font-size: clamp(48px, 9vw, 94px);
  line-height: 0.96;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow:
    0 3px 0 rgba(114, 63, 21, 0.72),
    0 14px 38px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(246, 205, 105, 0.38);
}

.subtitle {
  max-width: min(560px, 92vw);
  margin-bottom: 18px;
  color: var(--ink-soft);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 650;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58);
}

.record-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 480px);
  gap: 8px;
  margin-bottom: 18px;
}

.record-strip > div,
.hud-stat,
.objective-panel,
.modal-card,
.board-frame,
.collect-pill,
.stage-item,
.rank-row,
.result-stats > div {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(14, 50, 61, 0.88), rgba(5, 22, 29, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 30px rgba(0, 0, 0, 0.25);
}

.record-strip > div {
  min-width: 0;
  padding: 10px 8px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(15, 52, 61, 0.84), rgba(5, 20, 28, 0.9)),
    url("../images/ui/ui-hud-panel.png") center / 100% 100% no-repeat;
  backdrop-filter: blur(10px);
}

.record-strip span,
.hud-stat span,
.result-stats span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.record-strip strong,
.hud-stat strong,
.result-stats strong {
  display: block;
  margin-top: 2px;
  color: var(--gold-2);
  font-size: 18px;
  font-weight: 950;
}

.title-actions,
.game-controls,
.modal-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.button,
.icon-button {
  position: relative;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  isolation: isolate;
  user-select: none;
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
}

.button::before,
.icon-button::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  z-index: -1;
  background: var(--button-skin, url("../images/ui/ui-button-secondary.png")) center / 100% 100% no-repeat;
  pointer-events: none;
  transition: filter 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.button {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.button-primary {
  --button-skin: url("../images/ui/ui-button-primary.png");
  color: #2d1805;
  text-shadow: 0 1px 0 rgba(255, 246, 198, 0.45);
}

.button .btn-label {
  display: block;
  line-height: 1.15;
}

.button .btn-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  opacity: 0.82;
  letter-spacing: 0;
}

.button-secondary {
  --button-skin: url("../images/ui/ui-button-secondary.png");
  color: #eafff9;
}

.button-ghost {
  --button-skin: url("../images/ui/ui-button-ghost.png");
  color: var(--ink-soft);
}

.button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.button:not(:disabled):hover,
.icon-button:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.button:not(:disabled):hover::before,
.icon-button:not(:disabled):hover::before {
  filter: saturate(1.08) brightness(1.06);
}

.button:not(:disabled):active,
.icon-button:not(:disabled):active {
  transform: translateY(1px) scale(0.99);
}

.button:not(:disabled):active::before,
.icon-button:not(:disabled):active::before {
  transform: scale(0.985);
}

.icon-button {
  --button-skin: url("../images/ui/ui-icon-button.png");
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 40px;
  padding: 0 10px;
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.game-screen {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: calc(44px + var(--safe-top)) clamp(10px, 2.4vw, 26px) calc(10px + var(--safe-bottom));
  background:
    linear-gradient(180deg, rgba(7, 26, 34, 0.88), rgba(5, 15, 21, 0.94)),
    url("../images/ui/jewelria-splash.png") center / cover no-repeat;
}

.app-shell.match-shake .game-screen.is-active {
  animation: screenShake 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.game-hud {
  display: grid;
  grid-template-columns: auto minmax(68px, 0.75fr) minmax(104px, 1.1fr) minmax(62px, 0.75fr) auto;
  gap: 8px;
  align-items: stretch;
  width: min(100%, 820px);
  margin: 0 auto;
}

.hud-stat {
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(16, 56, 65, 0.84), rgba(4, 18, 25, 0.9)),
    url("../images/ui/ui-hud-panel.png") center / 100% 100% no-repeat;
  text-align: center;
}

.hud-stat strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-stat-score strong {
  color: #fff7cf;
}

/* 남은 이동 경고: 적으면 깜빡이며 주의를 끌어다 */
.hud-stat.moves-warn {
  --warn-glow: rgba(255, 198, 80, 0.75);
  animation: movesWarnPulse 0.9s ease-in-out infinite;
}
.hud-stat.moves-warn strong {
  color: #ffd86a;
}
.hud-stat.moves-critical {
  --warn-glow: rgba(255, 80, 80, 0.9);
  animation: movesWarnPulse 0.5s ease-in-out infinite;
}
.hud-stat.moves-critical strong {
  color: #ff7a7a;
}
@keyframes movesWarnPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px var(--warn-glow);
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hud-stat.moves-warn,
  .hud-stat.moves-critical {
    animation: none;
  }
}

.objective-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: min(100%, 820px);
  min-height: 62px;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(10, 39, 49, 0.84), rgba(3, 15, 22, 0.92)),
    url("../images/ui/ui-modal-panel.png") center / 100% 100% no-repeat;
}

.stage-label {
  margin: 0 0 2px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.objective-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.2;
}

.collect-goals {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.collect-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 4px 9px 4px 6px;
  border-radius: var(--radius);
  border: 1px solid rgba(92, 204, 212, 0.24);
  background:
    linear-gradient(180deg, rgba(14, 49, 58, 0.86), rgba(4, 18, 25, 0.9)),
    url("../images/ui/ui-hud-panel.png") center / 100% 100% no-repeat;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mini-gem {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 5px rgba(255, 236, 168, 0.18));
}

.collect-label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.collect-count {
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.01em;
}

.collect-pill--score {
  border: 1px solid rgba(255, 214, 102, 0.35);
}

.mini-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 13px;
  line-height: 1;
  color: #ffd666;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.collect-pill.is-done {
  color: #eafff2;
  border-color: rgba(120, 240, 170, 0.55);
  box-shadow: inset 0 0 0 1px rgba(120, 240, 170, 0.25);
}

.board-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
}

.board-frame {
  --board-frame-outset: clamp(34px, 6vw, 74px);
  --board-frame-shift-x: clamp(-7px, -1.8vw, -12px);
  --board-frame-shift-y: clamp(-23px, -1.2vw, -8px);
  position: relative;
  width: min(94vw, 74svh, 620px);
  max-width: 100%;
  aspect-ratio: 1;
  padding: clamp(15px, 2.8vw, 24px);
  border-radius: var(--radius);
  border-color: rgba(246, 205, 105, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 230, 143, 0.28), transparent 24%, transparent 76%, rgba(48, 214, 198, 0.18)),
    linear-gradient(180deg, rgba(9, 36, 45, 0.94), rgba(2, 13, 19, 0.96));
}

.board-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 240, 168, 0.2);
  border-radius: 6px;
  pointer-events: none;
}

.board-frame::after {
  content: "";
  position: absolute;
  inset: calc(var(--board-frame-outset) * -1);
  z-index: 5;
  background: url("../images/ui/ui-board-frame.png") center / 100% 100% no-repeat;
  transform: translate(var(--board-frame-shift-x), var(--board-frame-shift-y));
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 18px rgba(255, 221, 114, 0.15));
  pointer-events: none;
}

.board-frame.match-impact {
  animation: boardImpact 520ms ease-out both;
}

.board {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: clamp(4px, 0.9vw, 8px);
  width: 100%;
  height: 100%;
  padding: clamp(5px, 1vw, 8px);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 26%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 12.5%),
    rgba(5, 22, 29, 0.94);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.42);
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)),
    rgba(13, 54, 65, 0.72);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -8px 18px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  isolation: isolate;
}

.cell::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(159, 222, 220, 0.12);
  border-radius: 5px;
  pointer-events: none;
}

.cell.selected {
  outline: 3px solid rgba(255, 224, 124, 0.88);
  outline-offset: -2px;
  box-shadow:
    0 0 0 2px rgba(255, 224, 124, 0.24),
    0 0 22px rgba(255, 224, 124, 0.38),
    inset 0 -8px 18px rgba(0, 0, 0, 0.16);
}

.cell.invalid {
  animation: invalidShake 260ms ease;
}

.cell.clearing .gem {
  animation: gemClear 300ms ease forwards;
}

.cell.clearing::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -24%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 10%, rgba(var(--cell-vfx-rgb, 255, 230, 130), 0.78) 16%, rgba(var(--cell-vfx-rgb, 255, 230, 130), 0.2) 38%, transparent 62%),
    conic-gradient(from 0deg, transparent, rgba(var(--cell-vfx-rgb, 255, 230, 130), 0.68), rgba(255, 255, 255, 0.68), rgba(var(--cell-vfx-rgb, 255, 230, 130), 0.5), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cellImpactFlash 360ms ease-out forwards;
}

.cell.transforming .gem {
  animation: gemTransform 420ms ease both;
}

.gem {
  position: relative;
  width: 92%;
  height: 92%;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.35));
  transform: translateZ(0);
  transition: transform 130ms ease, filter 130ms ease;
}

.gem-image {
  position: absolute;
  inset: -18%;
  z-index: 2;
  display: block;
  width: 136%;
  height: 136%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.gem.has-image .gem-core {
  opacity: 0;
}

.gem.falling {
  animation: gemDrop var(--fall-duration, 560ms) cubic-bezier(0.15, 0.82, 0.18, 1) var(--fall-delay, 0ms) both;
  will-change: transform, opacity, filter;
}

.landing-vfx {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 138%;
  height: 138%;
  background-image: url("../images/effects/gem-land-sparkle-strip.png");
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: 1600% 100%;
  filter:
    saturate(1.18)
    brightness(1.12)
    drop-shadow(0 0 10px rgba(255, 238, 166, 0.56));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--landing-scale, 1));
  animation: landingSparkle 520ms steps(15) var(--landing-delay, 0ms) both;
}

.cell:hover .gem {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.36)) drop-shadow(0 0 10px var(--gem-glow));
}

.gem-core {
  position: absolute;
  inset: 0;
  clip-path: var(--gem-shape);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.96) 0 5%, transparent 16%),
    conic-gradient(from 18deg at 50% 52%, rgba(255, 255, 255, 0.45), transparent 13%, rgba(0, 0, 0, 0.22) 25%, transparent 39%, rgba(255, 255, 255, 0.34) 52%, transparent 68%, rgba(0, 0, 0, 0.22) 82%, rgba(255, 255, 255, 0.35)),
    linear-gradient(145deg, var(--gem-light), var(--gem-main) 45%, var(--gem-dark));
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28),
    0 0 12px var(--gem-glow);
}

.gem-core::before {
  content: "";
  position: absolute;
  inset: 9%;
  clip-path: var(--gem-shape);
  border: 2px solid rgba(255, 255, 255, 0.3);
  opacity: 0.8;
}

.gem-core::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 12%;
  width: 36%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.58);
  transform: rotate(-24deg);
  filter: blur(2px);
}

.gem.special-row .gem-core,
.gem.special-col .gem-core {
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -10px 18px rgba(0, 0, 0, 0.26),
    0 0 18px var(--gem-glow),
    0 0 0 3px rgba(255, 238, 170, 0.44);
}

.gem.special-row::before,
.gem.special-col::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 5%;
  clip-path: var(--gem-shape);
  background: repeating-linear-gradient(
    var(--stripe-angle),
    rgba(255, 255, 255, 0) 0 12%,
    rgba(255, 255, 255, 0.78) 13% 21%,
    rgba(255, 255, 255, 0) 22% 34%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.gem.special-row {
  --stripe-angle: 90deg;
}

.gem.special-col {
  --stripe-angle: 0deg;
}

.gem-ruby {
  --gem-main: #e91e3e;
  --gem-light: #ff8fa0;
  --gem-dark: #7d071b;
  --gem-glow: rgba(255, 60, 96, 0.58);
  --gem-shape: polygon(50% 3%, 85% 16%, 97% 50%, 83% 86%, 50% 98%, 17% 86%, 3% 50%, 15% 16%);
}

.gem-sapphire {
  --gem-main: #1976ff;
  --gem-light: #90d7ff;
  --gem-dark: #073078;
  --gem-glow: rgba(71, 171, 255, 0.58);
  --gem-shape: polygon(50% 0%, 95% 50%, 50% 100%, 5% 50%);
}

.gem-emerald {
  --gem-main: #14bb54;
  --gem-light: #9effb7;
  --gem-dark: #075b2c;
  --gem-glow: rgba(65, 231, 116, 0.52);
  --gem-shape: polygon(22% 3%, 78% 3%, 97% 22%, 97% 78%, 78% 97%, 22% 97%, 3% 78%, 3% 22%);
}

.gem-topaz {
  --gem-main: #ffe52a;
  --gem-light: #fff9b6;
  --gem-dark: #9b7600;
  --gem-glow: rgba(255, 232, 62, 0.62);
  --gem-shape: polygon(50% 0%, 92% 34%, 78% 96%, 22% 96%, 8% 34%);
}

.gem-amethyst {
  --gem-main: #9c42e8;
  --gem-light: #e3b0ff;
  --gem-dark: #491078;
  --gem-glow: rgba(180, 91, 255, 0.48);
  --gem-shape: polygon(50% 2%, 91% 22%, 82% 88%, 50% 100%, 18% 88%, 9% 22%);
}

.gem-citrine {
  --gem-main: #ff5a12;
  --gem-light: #ffc06c;
  --gem-dark: #8d2200;
  --gem-glow: rgba(255, 97, 24, 0.58);
  --gem-shape: polygon(50% 0%, 90% 24%, 99% 78%, 50% 100%, 1% 78%, 10% 24%);
}

.combo-layer,
.particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle-layer {
  z-index: 6;
}

.combo-layer {
  z-index: 7;
}

.combo-pop {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  color: #fff8c9;
  font-size: clamp(30px, 7vw, 54px);
  font-weight: 950;
  text-shadow:
    0 3px 0 #67400d,
    0 0 18px rgba(255, 224, 124, 0.9),
    0 0 42px rgba(255, 92, 180, 0.52);
  animation: comboPop 980ms cubic-bezier(0.17, 0.92, 0.24, 1) forwards;
  white-space: nowrap;
}

.combo-pop.super {
  color: #eaffff;
  font-size: clamp(38px, 8vw, 68px);
  text-shadow:
    0 4px 0 #0b6570,
    0 0 26px rgba(48, 214, 198, 0.95),
    0 0 48px rgba(255, 88, 184, 0.7);
}

.combo-pop.mega {
  color: #fff6b4;
  font-size: clamp(42px, 9vw, 78px);
  text-shadow:
    0 5px 0 #6b160e,
    0 0 28px rgba(255, 232, 112, 1),
    0 0 64px rgba(255, 44, 118, 0.82),
    0 0 90px rgba(64, 226, 255, 0.66);
}

.spark {
  position: absolute;
  width: calc(var(--size, 10px) * 2.8);
  height: var(--size, 10px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 76% 50%, rgba(255, 255, 255, 1), transparent 0 28%, rgba(var(--vfx-rgb, 255, 244, 168), 0.78) 34%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96), var(--vfx-color, #fff4a8), transparent);
  box-shadow:
    0 0 14px var(--vfx-glow, rgba(255, 232, 131, 0.95)),
    0 0 28px rgba(var(--vfx-rgb, 255, 244, 168), 0.54);
  animation: sparkFly var(--dur, 760ms) cubic-bezier(0.08, 0.76, 0.18, 1) forwards;
}

.vfx-board-flash,
.vfx-burst,
.vfx-ring,
.vfx-shard,
.vfx-ray,
.vfx-glint {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  will-change: transform, opacity, background-position;
}

.vfx-board-flash {
  inset: 0;
  transform: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, var(--flash-alpha, 0.44)), transparent 18%),
    radial-gradient(circle at 50% 48%, rgba(var(--vfx-rgb, 255, 71, 184), 0.42), transparent 42%),
    linear-gradient(90deg, rgba(var(--vfx-rgb, 255, 71, 184), 0.14), rgba(255, 255, 255, 0.18), rgba(var(--vfx-rgb, 255, 71, 184), 0.14));
  animation: boardFlash 640ms ease-out forwards;
}

.vfx-board-flash.white-hot {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, calc(var(--flash-alpha, 0.44) * 0.92)), transparent 16%),
    conic-gradient(from 22deg at 50% 48%, transparent 0 7%, rgba(255, 255, 255, 0.22) 8% 11%, transparent 12% 20%, rgba(var(--vfx-rgb, 255, 71, 184), 0.22) 21% 25%, transparent 26% 100%);
  animation-duration: 430ms;
}

.vfx-burst {
  width: var(--size);
  height: var(--size);
  opacity: 0.74;
  background-image: url("../images/effects/gem-shatter-strip.png");
  background-position: 0 50%;
  background-size: 1600% 100%;
  background-repeat: no-repeat;
  mask-image: radial-gradient(circle, #000 0 52%, rgba(0, 0, 0, 0.82) 62%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle, #000 0 52%, rgba(0, 0, 0, 0.82) 62%, transparent 78%);
  filter:
    saturate(1.52)
    brightness(1.38)
    contrast(1.08)
    drop-shadow(0 0 20px var(--vfx-glow, rgba(255, 240, 168, 0.72)))
    drop-shadow(0 0 32px rgba(var(--vfx-rgb, 48, 214, 198), 0.38));
  animation: vfxBurst 980ms steps(15) forwards;
}

.vfx-burst.mega {
  opacity: 0.82;
  filter:
    saturate(1.72)
    brightness(1.52)
    contrast(1.12)
    drop-shadow(0 0 34px var(--vfx-glow, rgba(255, 240, 168, 0.88)))
    drop-shadow(0 0 58px rgba(var(--vfx-rgb, 48, 214, 198), 0.58));
}

.vfx-burst.flash {
  opacity: 0.54;
  filter:
    saturate(1.9)
    brightness(1.86)
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.86))
    drop-shadow(0 0 38px var(--vfx-glow, rgba(255, 240, 168, 0.78)));
  animation-duration: 620ms;
}

.vfx-ring {
  width: var(--size);
  height: var(--size);
  border: max(2px, calc(var(--size) * 0.016)) solid rgba(var(--vfx-rgb, 255, 242, 176), 0.72);
  border-radius: 2px;
  clip-path: polygon(50% 0%, 78% 18%, 100% 50%, 79% 82%, 50% 100%, 20% 82%, 0 50%, 22% 18%);
  background:
    conic-gradient(from 22deg, transparent 0 7%, rgba(var(--vfx-rgb, 255, 242, 176), 0.28) 8% 11%, transparent 12% 24%, rgba(255, 255, 255, 0.22) 25% 28%, transparent 29% 48%, rgba(var(--vfx-rgb, 255, 242, 176), 0.22) 49% 52%, transparent 53% 100%);
  box-shadow:
    0 0 18px var(--vfx-glow, rgba(255, 232, 112, 0.8)),
    inset 0 0 18px rgba(var(--vfx-rgb, 48, 214, 198), 0.5);
  animation: ringBurst 620ms cubic-bezier(0.13, 0.86, 0.25, 1) forwards;
}

.vfx-ring.mega {
  border-color: rgba(var(--vfx-rgb, 255, 84, 178), 0.78);
  box-shadow:
    0 0 26px var(--vfx-glow, rgba(255, 84, 178, 0.82)),
    0 0 42px rgba(var(--vfx-rgb, 48, 214, 198), 0.56),
    inset 0 0 22px rgba(255, 242, 176, 0.52);
}

.vfx-ring.screen {
  border-color: rgba(var(--vfx-rgb, 73, 224, 255), 0.82);
  animation-duration: 880ms;
}

.vfx-ring.shock {
  border-width: max(3px, calc(var(--size) * 0.018));
  background:
    radial-gradient(circle, transparent 45%, rgba(255, 255, 255, 0.22) 51%, transparent 58%),
    conic-gradient(from 0deg, transparent 0 4%, rgba(255, 255, 255, 0.34) 5% 7%, transparent 8% 17%, rgba(var(--vfx-rgb, 73, 224, 255), 0.3) 18% 22%, transparent 23% 100%);
  box-shadow:
    0 0 38px rgba(255, 255, 255, 0.44),
    0 0 72px rgba(var(--vfx-rgb, 73, 224, 255), 0.62),
    inset 0 0 34px rgba(var(--vfx-rgb, 73, 224, 255), 0.4);
}

.vfx-shard {
  width: var(--size);
  height: var(--size);
  background-image: url("../images/effects/gem-shards-atlas.png");
  background-size: 400% 400%;
  background-position: var(--atlas-x, 0%) var(--atlas-y, 0%);
  filter:
    saturate(1.44)
    brightness(1.34)
    contrast(1.08)
    drop-shadow(0 0 12px var(--vfx-glow, rgba(255, 255, 255, 0.65)))
    drop-shadow(0 0 22px rgba(var(--vfx-rgb, 255, 255, 255), 0.32));
  animation: shardFly var(--dur, 720ms) cubic-bezier(0.08, 0.72, 0.18, 1) forwards;
}

.vfx-ray {
  width: var(--width, 56px);
  height: var(--height, 5px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 86% 50%, rgba(255, 255, 255, 1), transparent 0 24%, rgba(var(--vfx-rgb, 255, 240, 168), 0.9) 30%, transparent 74%),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.78) 18%, var(--vfx-color, #fff4a8) 44%, transparent 100%);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.72),
    0 0 30px var(--vfx-glow, rgba(255, 240, 168, 0.68));
  transform-origin: 0 50%;
  animation: raySlash var(--dur, 720ms) cubic-bezier(0.05, 0.72, 0.16, 1) forwards;
}

.vfx-glint {
  width: var(--size, 96px);
  height: var(--size, 96px);
  background:
    conic-gradient(from 45deg, transparent 0 10%, rgba(255, 255, 255, 0.98) 11% 13%, transparent 14% 35%, rgba(var(--vfx-rgb, 255, 240, 168), 0.82) 36% 38%, transparent 39% 60%, rgba(255, 255, 255, 0.92) 61% 63%, transparent 64% 85%, rgba(var(--vfx-rgb, 255, 240, 168), 0.78) 86% 88%, transparent 89% 100%),
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 6%, rgba(var(--vfx-rgb, 255, 240, 168), 0.64) 12%, transparent 58%);
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 38px var(--vfx-glow, rgba(255, 240, 168, 0.8)));
  animation: glintPop var(--dur, 640ms) cubic-bezier(0.12, 0.86, 0.18, 1) forwards;
}

.vfx-glint.major {
  filter:
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 54px var(--vfx-glow, rgba(255, 240, 168, 0.92)));
}

.game-controls {
  position: relative;
  z-index: 8;
  width: min(100%, 820px);
  margin: 0 auto;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: calc(18px + var(--safe-top)) 14px calc(18px + var(--safe-bottom));
  background: rgba(1, 10, 14, 0.72);
  backdrop-filter: blur(8px);
}

.modal-card {
  width: min(94vw, 480px);
  max-height: min(86svh, 740px);
  overflow: auto;
  padding: 18px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(12, 42, 52, 0.88), rgba(3, 15, 22, 0.94)),
    url("../images/ui/ui-modal-panel.png") center / 100% 100% no-repeat;
}

.small-card {
  width: min(92vw, 360px);
  text-align: center;
}

.modal-card h2 {
  margin: 0 0 14px;
  color: #fff9db;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.08;
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
}

.stage-item {
  display: grid;
  min-height: 136px;
  padding: 12px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(13, 46, 56, 0.86), rgba(4, 18, 25, 0.92)),
    url("../images/ui/ui-hud-panel.png") center / 100% 100% no-repeat;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.stage-item.locked {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.45);
}

.stage-item strong {
  display: block;
  color: var(--gold-2);
  font-size: 18px;
  line-height: 1.1;
}

.stage-item span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
}

.stage-stars,
.result-stars {
  display: flex;
  gap: 4px;
  color: var(--gold);
  font-size: 22px;
  letter-spacing: 0;
}

.stage-stars {
  margin-top: auto;
}

.result-card {
  text-align: center;
}

.result-stars {
  justify-content: center;
  margin-bottom: 14px;
  font-size: 32px;
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.result-stats > div {
  padding: 10px 8px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(15, 52, 61, 0.84), rgba(5, 20, 28, 0.9)),
    url("../images/ui/ui-hud-panel.png") center / 100% 100% no-repeat;
}

.rank-submit {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 12px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(10, 39, 49, 0.78), rgba(3, 15, 22, 0.88)),
    url("../images/ui/ui-modal-panel.png") center / 100% 100% no-repeat;
}

.rank-submit label {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 900;
}

.rank-submit-row {
  display: flex;
  gap: 8px;
}

.rank-submit input {
  min-width: 0;
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(159, 222, 220, 0.42);
  border-radius: var(--radius);
  outline: 0;
  background: rgba(4, 18, 24, 0.94);
  color: var(--ink);
  font-weight: 800;
}

.rank-submit input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(246, 205, 105, 0.18);
}

.submit-status {
  min-height: 18px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
}

.submit-status.ok {
  color: var(--green);
}

.submit-status.fail {
  color: var(--rose);
}

.rank-content {
  display: grid;
  gap: 7px;
  min-height: 180px;
}

.rank-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(14, 49, 58, 0.86), rgba(4, 18, 25, 0.9)),
    url("../images/ui/ui-hud-panel.png") center / 100% 100% no-repeat;
}

.rank-row.top1 {
  border-color: rgba(255, 223, 112, 0.78);
  background: linear-gradient(180deg, rgba(92, 61, 14, 0.9), rgba(48, 33, 12, 0.9));
}

.rank-row.top2 {
  border-color: rgba(204, 225, 236, 0.58);
}

.rank-row.top3 {
  border-color: rgba(230, 153, 90, 0.58);
}

.rank-row.me {
  border-color: rgba(48, 214, 198, 0.72);
}

.rank-pos {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold-2);
  font-weight: 950;
}

.rank-name {
  overflow: hidden;
  color: var(--ink);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-score {
  display: grid;
  justify-items: end;
  gap: 2px;
  white-space: nowrap;
}

.rank-stage {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.rank-points {
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 950;
}

.rank-loading,
.rank-empty,
.rank-error {
  display: grid;
  place-items: center;
  min-height: 160px;
  color: var(--ink-muted);
  font-weight: 800;
  text-align: center;
}

.rank-error {
  color: var(--rose);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  z-index: 180;
  transform: translate(-50%, 16px);
  max-width: min(92vw, 420px);
  padding: 10px 14px;
  border: 1px solid rgba(246, 205, 105, 0.34);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(10, 39, 49, 0.88), rgba(3, 15, 22, 0.94)),
    url("../images/ui/ui-hud-panel.png") center / 100% 100% no-repeat;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%, -38%) scale(0.54) rotate(-3deg); filter: blur(2px); }
  18% { opacity: 1; transform: translate(-50%, -54%) scale(1.2) rotate(1deg); filter: blur(0); }
  46% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -108%) scale(0.92) rotate(2deg); }
}

@keyframes sparkFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(var(--rot, 0deg)); }
  10% { opacity: 1; }
  68% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.12) rotate(calc(var(--rot, 0deg) + 220deg)); }
}

@keyframes screenShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  8% { transform: translate3d(calc(var(--shake-power, 10px) * -0.75), calc(var(--shake-power, 10px) * 0.18), 0); }
  17% { transform: translate3d(calc(var(--shake-power, 10px) * 0.72), calc(var(--shake-power, 10px) * -0.38), 0); }
  27% { transform: translate3d(calc(var(--shake-power, 10px) * -0.55), calc(var(--shake-power, 10px) * 0.52), 0); }
  39% { transform: translate3d(calc(var(--shake-power, 10px) * 0.44), calc(var(--shake-power, 10px) * -0.22), 0); }
  55% { transform: translate3d(calc(var(--shake-power, 10px) * -0.28), calc(var(--shake-power, 10px) * 0.16), 0); }
  72% { transform: translate3d(calc(var(--shake-power, 10px) * 0.16), calc(var(--shake-power, 10px) * -0.08), 0); }
}

@keyframes boardImpact {
  0% { transform: scale(1); filter: brightness(1); }
  18% { transform: scale(1.024); filter: brightness(1.42) saturate(1.22); }
  100% { transform: scale(1); filter: brightness(1) saturate(1); }
}

@keyframes cellImpactFlash {
  0% { opacity: 0; transform: scale(0.32) rotate(0deg); }
  24% { opacity: 1; transform: scale(1.04) rotate(16deg); }
  100% { opacity: 0; transform: scale(1.72) rotate(64deg); }
}

@keyframes boardFlash {
  0% { opacity: 0; transform: scale(0.9); }
  12% { opacity: 1; }
  34% { opacity: 0.82; }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes vfxBurst {
  0% {
    opacity: 0;
    background-position: 0 50%;
    transform: translate(-50%, -50%) scale(0.58) rotate(var(--spin, 0deg));
  }
  8% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18) rotate(calc(var(--spin, 0deg) * 0.3));
  }
  58% { opacity: 1; }
  100% {
    opacity: 0;
    background-position: 100% 50%;
    transform: translate(-50%, -50%) scale(1.04) rotate(calc(var(--spin, 0deg) * -0.6));
  }
}

@keyframes ringBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24) rotate(-12deg); }
  16% { opacity: 1; }
  52% { opacity: 0.86; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48) rotate(22deg); }
}

@keyframes shardFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.38) rotate(0deg); }
  9% { opacity: 1; }
  58% { opacity: 0.96; filter: brightness(1.45) saturate(1.5); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.16) rotate(var(--rot)); }
}

@keyframes raySlash {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(0.08); }
  8% { opacity: 1; }
  48% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot, 0deg)) scaleX(1.08); }
}

@keyframes glintPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.16) rotate(var(--rot, 0deg)); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(calc(var(--rot, 0deg) + 24deg)); }
  58% { opacity: 0.82; transform: translate(-50%, -50%) scale(0.9) rotate(calc(var(--rot, 0deg) + 52deg)); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42) rotate(calc(var(--rot, 0deg) + 90deg)); }
}

@keyframes invalidShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes gemClear {
  0% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
  70% { opacity: 0.95; transform: scale(1.24) rotate(8deg); filter: brightness(1.6); }
  100% { opacity: 0; transform: scale(0.28) rotate(22deg); filter: brightness(2); }
}

@keyframes gemTransform {
  0% { transform: scale(1); }
  45% { transform: scale(1.34); filter: drop-shadow(0 0 24px var(--gem-glow)); }
  100% { transform: scale(1); }
}

@keyframes gemDrop {
  0% {
    opacity: 0;
    transform: translateY(var(--fall-offset)) scale(0.92);
    filter: drop-shadow(0 18px 10px rgba(0, 0, 0, 0.18)) brightness(1.28);
  }
  58% {
    opacity: 1;
    transform: translateY(6%) scale(1.04);
    filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.34)) brightness(1.08);
  }
  78% {
    transform: translateY(-3%) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.35)) brightness(1);
  }
}

@keyframes landingSparkle {
  0% {
    opacity: 0;
    background-position: 0 50%;
    transform: translate(-50%, -50%) scale(calc(var(--landing-scale, 1) * 0.74));
  }
  12% {
    opacity: 1;
  }
  78% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    background-position: 100% 50%;
    transform: translate(-50%, -50%) scale(calc(var(--landing-scale, 1) * 1.08));
  }
}

@media (max-width: 720px) {
  .game-screen {
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .button::before,
  .icon-button::before {
    inset: -6px -8px;
  }

  .game-hud {
    grid-template-columns: auto minmax(52px, 0.8fr) minmax(82px, 1fr) minmax(52px, 0.8fr) auto;
    gap: 5px;
  }

  .icon-button {
    min-width: 36px;
    height: 36px;
    padding: 0 7px;
    font-size: 9px;
  }

  .hud-stat {
    padding: 7px 5px;
  }

  .hud-stat span,
  .record-strip span,
  .result-stats span {
    font-size: 10px;
  }

  .hud-stat strong,
  .record-strip strong {
    font-size: 15px;
  }

  .objective-panel {
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 8px;
    min-height: 58px;
    padding: 9px;
  }

  .objective-panel > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .objective-panel h2 {
    font-size: 16px;
  }

  .collect-goals {
    justify-content: flex-start;
  }

  .collect-pill {
    min-height: 31px;
    padding: 3px 6px;
    gap: 5px;
  }

  .mini-gem {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }

  .collect-label,
  .collect-count {
    font-size: 11px;
  }

  .board-frame {
    --board-frame-outset: clamp(28px, 7vw, 48px);
    --board-frame-shift-x: clamp(-16px, -3vw, -8px);
    --board-frame-shift-y: clamp(-12px, -2.3vw, -6px);
    width: min(92vw, 60svh);
    padding: 12px;
  }

  .board {
    gap: 4px;
  }

  .game-controls .button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
  }

  .title-content {
    margin-bottom: 2vh;
  }

  .record-strip {
    gap: 6px;
  }

  .title-actions .button {
    min-width: min(42vw, 178px);
  }
}

@media (max-width: 900px) and (max-height: 900px) {
  .topbar {
    left: 8px;
    right: 8px;
    justify-content: space-between;
  }

  .record-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 360px);
  }

  .record-strip > div:nth-child(3) {
    grid-column: 1 / -1;
  }

  .title-actions {
    width: min(100%, 360px);
  }

  .title-actions .button {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }

  .title-actions #play-btn {
    flex-basis: 100%;
  }

  .game-hud,
  .objective-panel,
  .game-controls {
    width: min(100%, 360px);
  }

  .game-hud {
    grid-template-columns: auto minmax(56px, 1fr) minmax(74px, 1.1fr) minmax(52px, 0.9fr) auto;
  }

  .board-frame {
    --board-frame-outset: clamp(28px, 6vw, 46px);
    --board-frame-shift-x: clamp(-16px, -3vw, -8px);
    --board-frame-shift-y: clamp(-12px, -2.3vw, -6px);
    width: min(92vw, 44svh, 352px);
  }
}

@media (min-width: 721px) and (max-width: 1366px) and (orientation: portrait) {
  .board-frame {
    --board-frame-outset: clamp(90px, 6vw, 74px);
    --board-frame-shift-x: clamp(-7px, -1.8vw, -12px);
    --board-frame-shift-y: clamp(-80px, -1.2vw, -8px);
    width: min(80vw, 74svh, 620px);
  }
}

@media (min-width: 721px) and (max-width: 1366px) and (orientation: landscape) {
  .board-frame {
    --board-frame-outset: clamp(28px, 5vw, 50px);
    --board-frame-shift-x: clamp(-14px, -2.2vw, -8px);
    --board-frame-shift-y: clamp(-10px, -1.8vw, -6px);
    width: min(74vw, 72svh, 620px);
  }
}

@media (max-width: 390px), (max-height: 680px) {
  .archerlab-link {
    display: none;
  }

  .title-screen {
    padding-top: calc(36px + var(--safe-top));
  }

  .topbar {
    top: calc(8px + var(--safe-top));
  }

  .game-screen {
    padding-top: calc(8px + var(--safe-top));
  }

  .button::before,
  .icon-button::before {
    inset: -5px -6px;
  }

  .icon-button {
    min-width: 32px;
    height: 34px;
    padding: 0 5px;
    font-size: 8px;
  }

  .game-hud,
  .objective-panel,
  .game-controls {
    width: min(100%, 330px);
  }

  .game-hud {
    grid-template-columns: auto 1fr 1.08fr 0.88fr auto;
  }

  .objective-panel {
    min-height: 52px;
  }

  .stage-label {
    font-size: 10px;
  }

  .objective-panel h2 {
    font-size: 14px;
  }

  .board-frame {
    --board-frame-outset: 40px;
    --board-frame-shift-x: -5px;
    --board-frame-shift-y: -10px;
    width: min(82vw, 50svh, 320px);
    padding: 10px;
  }

  .board {
    gap: 3px;
  }

  .modal-card {
    padding: 14px;
  }

  .rank-submit-row {
    flex-direction: column;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .game-screen {
    grid-template-columns: minmax(250px, 1fr) minmax(320px, 60vh);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 14px;
    padding-top: calc(10px + var(--safe-top));
  }

  .game-hud,
  .objective-panel,
  .game-controls {
    width: 100%;
    max-width: 520px;
  }

  .board-wrap {
    grid-row: 1 / 4;
    grid-column: 2;
  }

  .board-frame {
    --board-frame-outset: clamp(28px, 5vw, 50px);
    --board-frame-shift-x: clamp(-14px, -2.2vw, -8px);
    --board-frame-shift-y: clamp(-10px, -1.8vw, -6px);
    width: min(57vw, 86svh);
  }

  .game-controls {
    align-self: end;
  }
}

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