:root {
  --jcc-bg: #edf4fb;
  --jcc-bg-deep: #dbe8f5;
  --jcc-ink: #182334;
  --jcc-muted: #657286;
  --jcc-line: rgba(92, 114, 146, 0.2);
  --jcc-line-strong: rgba(142, 107, 209, 0.34);
  --jcc-glass: rgba(255, 255, 255, 0.68);
  --jcc-glass-strong: rgba(255, 255, 255, 0.88);
  --jcc-board: rgba(232, 241, 250, 0.84);
  --jcc-rose: #c45f8e;
  --jcc-rose-soft: #f1b7d1;
  --jcc-violet: #7868ce;
  --jcc-cyan: #65a9bc;
  --jcc-gold: #bd8754;
  --jcc-good: #287d67;
  --jcc-bad: #ba4960;
  --jcc-shadow: 0 28px 80px rgba(83, 105, 139, 0.2);
  --jcc-shadow-soft: 0 14px 36px rgba(83, 105, 139, 0.14);
  --tile: 58px;
  --gap: 5px;
}

html[data-theme="dark"] {
  --jcc-bg: #07111c;
  --jcc-bg-deep: #111d2b;
  --jcc-ink: #f2f6fb;
  --jcc-muted: #aeb9c8;
  --jcc-line: rgba(199, 220, 241, 0.14);
  --jcc-line-strong: rgba(192, 158, 244, 0.3);
  --jcc-glass: rgba(18, 31, 45, 0.66);
  --jcc-glass-strong: rgba(20, 34, 49, 0.9);
  --jcc-board: rgba(7, 15, 25, 0.7);
  --jcc-rose: #e18ab0;
  --jcc-rose-soft: #8d526f;
  --jcc-violet: #a99af0;
  --jcc-cyan: #8fc6d5;
  --jcc-gold: #e3b77f;
  --jcc-good: #7bd3b7;
  --jcc-bad: #ff91a6;
  --jcc-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  --jcc-shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.28);
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body.page-jcc {
  display: block;
  min-height: 100vh;
  margin: 0;
  padding: 108px 16px 52px !important;
  overflow-x: hidden;
  color: var(--jcc-ink);
  font-family: "SF Pro Text", "PingFang SC", "Segoe UI Variable", "Microsoft YaHei UI", sans-serif;
  background:
    radial-gradient(circle at 18% 14%, rgba(101, 169, 188, 0.23), transparent 31rem),
    radial-gradient(circle at 82% 12%, rgba(120, 104, 206, 0.2), transparent 28rem),
    radial-gradient(circle at 68% 86%, rgba(196, 95, 142, 0.15), transparent 30rem),
    linear-gradient(145deg, var(--jcc-bg), var(--jcc-bg-deep)) fixed !important;
}

body.page-jcc::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.54;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

button {
  font: inherit;
}

button,
.cell {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--jcc-violet) 62%, white);
  outline-offset: 3px;
}

#game-root {
  position: relative;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 26px);
  overflow: visible;
  border: 1px solid var(--jcc-line);
  border-radius: 38px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 38%),
    var(--jcc-glass);
  box-shadow: var(--jcc-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(138%);
  backdrop-filter: blur(28px) saturate(138%);
}

#game-root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 4%, rgba(255, 255, 255, 0.68), transparent 24%),
    radial-gradient(circle at 86% 9%, rgba(120, 104, 206, 0.16), transparent 28%);
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.brand {
  min-width: 0;
}

.brand-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.title {
  margin: 0;
  color: var(--jcc-ink);
  font-family: "SF Pro Display", "PingFang SC", "Segoe UI Variable Display", sans-serif;
  font-size: clamp(24px, 4.6vw, 38px);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-shadow: none;
}

.subtitle {
  margin-top: 7px;
  color: var(--jcc-muted);
  font-size: 12px;
  line-height: 1.45;
}

.exclusive-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--jcc-rose) 38%, transparent);
  border-radius: 999px;
  color: var(--jcc-rose);
  background: color-mix(in srgb, var(--jcc-rose) 10%, transparent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.exclusive-mark span {
  color: var(--jcc-violet);
  font-size: 10px;
}

.about-toggle {
  min-width: 68px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--jcc-line);
  border-radius: 999px;
  color: var(--jcc-ink);
  background: var(--jcc-glass-strong);
  box-shadow: var(--jcc-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.66);
  cursor: pointer;
}

.mission-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 132px;
  margin-bottom: 14px;
  padding: clamp(18px, 3vw, 26px);
  overflow: hidden;
  border: 1px solid var(--jcc-line-strong);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.74), transparent 42%),
    radial-gradient(circle at 92% 18%, rgba(120, 104, 206, 0.2), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--jcc-rose) 12%, transparent), transparent 55%),
    var(--jcc-glass-strong);
  box-shadow: var(--jcc-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.mission-panel::after {
  content: "";
  position: absolute;
  top: -70px;
  right: 8%;
  width: 190px;
  height: 190px;
  border-radius: 46% 54% 62% 38%;
  pointer-events: none;
  opacity: 0.42;
  background: linear-gradient(135deg, var(--jcc-rose-soft), var(--jcc-violet));
  filter: blur(34px);
  animation: star-drift 9s ease-in-out infinite alternate;
}

.mission-copy,
.mission-actions {
  position: relative;
  z-index: 1;
}

.mission-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--jcc-violet);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mission-panel h2,
.dialog-card h2 {
  margin: 0;
  color: var(--jcc-ink);
  font-family: "SF Pro Display", "PingFang SC", "Segoe UI Variable Display", sans-serif;
  font-size: clamp(21px, 4vw, 30px);
  font-weight: 740;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.mission-panel p {
  max-width: 520px;
  margin: 8px 0 0;
  color: var(--jcc-muted);
  font-size: 13px;
  line-height: 1.6;
}

.mission-actions {
  display: grid;
  min-width: 142px;
  gap: 9px;
}

.hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}

.avatar {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(49, 62, 86, 0.16);
}

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

.stat {
  min-height: 67px;
  padding: 10px 12px;
  border: 1px solid var(--jcc-line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--jcc-glass-strong) 82%, transparent);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.stat span {
  display: block;
  color: var(--jcc-muted);
  font-size: 11px;
}

.stat strong {
  display: block;
  margin-top: 4px;
  color: var(--jcc-ink);
  font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 24px;
  line-height: 1;
}

.stat.urgent {
  border-color: color-mix(in srgb, var(--jcc-bad) 54%, transparent);
  background: color-mix(in srgb, var(--jcc-bad) 11%, var(--jcc-glass-strong));
  animation: urgent-pulse 1.2s ease-in-out infinite alternate;
}

.level-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.objective {
  min-height: 50px;
  padding: 10px 13px;
  border: 1px solid var(--jcc-line);
  border-radius: 18px;
  color: var(--jcc-ink);
  background: color-mix(in srgb, var(--jcc-cyan) 9%, var(--jcc-glass));
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.stars {
  display: flex;
  gap: 3px;
}

.star {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: color-mix(in srgb, var(--jcc-muted) 30%, transparent);
  font-size: 21px;
}

.star.on {
  color: var(--jcc-gold);
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--jcc-gold) 32%, transparent));
}

.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 12px;
  align-items: start;
}

#board-shell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--jcc-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 76% 8%, rgba(120, 104, 206, 0.13), transparent 45%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.36), transparent),
    var(--jcc-board);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -24px 50px rgba(76, 93, 122, 0.08);
}

#board {
  display: grid;
  width: calc(var(--tile) * 8 + var(--gap) * 7);
  height: calc(var(--tile) * 8 + var(--gap) * 7);
  max-width: 100%;
  grid-template-columns: repeat(8, var(--tile));
  grid-template-rows: repeat(8, var(--tile));
  gap: var(--gap);
}

.cell {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow:
    0 5px 12px rgba(47, 59, 82, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.cell:disabled {
  opacity: 1;
  cursor: default;
}

.cell:not(:disabled):hover {
  z-index: 2;
  transform: translateY(-2px) scale(1.025);
}

.cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.cell.rarity-5 {
  border-color: color-mix(in srgb, var(--jcc-gold) 68%, white);
}

.cell.rarity-4 {
  border-color: color-mix(in srgb, var(--jcc-violet) 58%, white);
}

.cell.jelly::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 2;
  border: 2px solid rgba(244, 187, 218, 0.9);
  border-radius: 11px;
  pointer-events: none;
  box-shadow: inset 0 0 12px rgba(255, 230, 244, 0.72), 0 0 10px rgba(196, 95, 142, 0.24);
}

.cell.selected {
  z-index: 3;
  border-color: var(--jcc-violet);
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jcc-violet) 24%, transparent), 0 10px 20px rgba(70, 58, 129, 0.24);
}

.cell.hint {
  z-index: 3;
  animation: hint-pulse 0.72s ease-in-out 3 alternate;
}

.cell.invalid {
  animation: invalid-shake 160ms ease-in-out;
  border-color: var(--jcc-bad);
}

.cell.matched {
  animation: clear-pop 220ms ease forwards;
}

.cell.fall {
  animation: tile-fall 180ms ease-out;
}

.mark,
.charm {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mark {
  right: 3px;
  bottom: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--jcc-rose), var(--jcc-violet));
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(44, 36, 83, 0.35);
}

.charm {
  top: 2px;
  left: 2px;
  font-size: 17px;
  filter: drop-shadow(0 2px 3px rgba(65, 33, 55, 0.35));
}

.side {
  display: grid;
  gap: 8px;
}

.booster {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 68px;
  padding: 8px 9px;
  border: 1px solid var(--jcc-line);
  border-radius: 20px;
  color: var(--jcc-ink);
  background: var(--jcc-glass-strong);
  box-shadow: var(--jcc-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.58);
  text-align: left;
  cursor: pointer;
}

.booster:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: var(--jcc-line-strong);
}

.booster:disabled {
  cursor: default;
  opacity: 0.48;
}

.booster.active {
  border-color: color-mix(in srgb, var(--jcc-violet) 66%, transparent);
  background: color-mix(in srgb, var(--jcc-violet) 15%, var(--jcc-glass-strong));
}

.booster .ico {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg, var(--jcc-rose), var(--jcc-violet));
  font-size: 13px;
  font-weight: 900;
}

.booster b,
.booster span span {
  display: block;
}

.booster b {
  font-size: 13px;
}

.booster span span {
  margin-top: 2px;
  color: var(--jcc-muted);
  font-size: 10px;
}

#msg-bar {
  min-height: 44px;
  margin-top: 11px;
  padding: 11px 14px;
  border: 1px solid var(--jcc-line);
  border-radius: 17px;
  color: var(--jcc-muted);
  background: color-mix(in srgb, var(--jcc-glass-strong) 76%, transparent);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
  text-align: center;
}

.combo,
.good {
  color: var(--jcc-good);
  font-weight: 800;
}

.combo {
  color: var(--jcc-rose);
}

.bad {
  color: var(--jcc-bad);
  font-weight: 800;
}

.fever-wrap {
  position: relative;
  height: 24px;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid var(--jcc-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--jcc-glass-strong) 76%, transparent);
}

.fever-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--jcc-rose), var(--jcc-violet), var(--jcc-cyan));
  box-shadow: 0 0 20px color-mix(in srgb, var(--jcc-violet) 42%, transparent);
  transition: width 240ms ease;
}

.fever-wrap::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--jcc-ink);
  font-size: 10px;
  font-weight: 800;
  pointer-events: none;
}

.btn {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid var(--jcc-line);
  border-radius: 999px;
  color: var(--jcc-ink);
  background: var(--jcc-glass-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  font-weight: 760;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.btn:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: var(--jcc-line-strong);
  box-shadow: var(--jcc-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  cursor: wait;
  opacity: 0.58;
}

.btn.primary {
  border-color: rgba(255, 255, 255, 0.34);
  color: white;
  background: linear-gradient(125deg, var(--jcc-rose), var(--jcc-violet) 58%, var(--jcc-cyan));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--jcc-violet) 28%, transparent);
}

.btn-leaderboard {
  color: color-mix(in srgb, var(--jcc-violet) 78%, var(--jcc-ink));
}

.board-lock {
  position: absolute;
  inset: 12px;
  z-index: 8;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--jcc-ink);
  background: color-mix(in srgb, var(--jcc-glass-strong) 76%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.board-lock span {
  padding: 10px 14px;
  border: 1px solid var(--jcc-line);
  border-radius: 999px;
  background: var(--jcc-glass-strong);
  font-size: 12px;
  font-weight: 760;
}

.board-lock[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
}

body[data-game-state="resolving"] #board {
  pointer-events: none;
  opacity: 0.88;
}

.about-menu {
  position: fixed;
  z-index: 1200;
  display: grid;
  width: min(220px, calc(100vw - 20px));
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--jcc-line);
  border-radius: 22px;
  background: var(--jcc-glass-strong);
  box-shadow: 0 24px 70px rgba(42, 53, 77, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.64);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
}

.about-menu button {
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 15px;
  color: var(--jcc-ink);
  background: transparent;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.about-menu button:hover,
.about-menu button:focus-visible {
  background: color-mix(in srgb, var(--jcc-violet) 12%, transparent);
}

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(27, 38, 55, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
}

.dialog-card {
  position: relative;
  width: min(100%, 520px);
  max-height: min(82vh, 660px);
  padding: clamp(24px, 5vw, 38px);
  overflow: auto;
  border: 1px solid var(--jcc-line-strong);
  border-radius: 32px;
  color: var(--jcc-ink);
  background:
    radial-gradient(circle at 90% 0, rgba(120, 104, 206, 0.18), transparent 38%),
    var(--jcc-glass-strong);
  box-shadow: 0 34px 100px rgba(28, 38, 59, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--jcc-line);
  border-radius: 999px;
  color: var(--jcc-ink);
  background: var(--jcc-glass);
  font-size: 24px;
  cursor: pointer;
}

.about-card p,
.result-card p {
  margin: 13px 0 0;
  color: var(--jcc-muted);
  line-height: 1.72;
  user-select: text;
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.score-display {
  margin: 18px 0 8px;
  color: var(--jcc-violet);
  font-family: "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: clamp(46px, 12vw, 72px);
  font-weight: 800;
  line-height: 1;
}

body.game-dialog-open {
  overflow: hidden;
}

@keyframes star-drift {
  to {
    transform: translate3d(-34px, 22px, 0) rotate(16deg);
  }
}

@keyframes hint-pulse {
  to {
    transform: scale(1.08);
    border-color: var(--jcc-cyan);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--jcc-cyan) 22%, transparent), 0 10px 24px rgba(55, 104, 120, 0.25);
  }
}

@keyframes invalid-shake {
  33% { transform: translateX(-5px); }
  66% { transform: translateX(5px); }
}

@keyframes clear-pop {
  to {
    transform: scale(0.64) rotate(5deg);
    opacity: 0;
  }
}

@keyframes tile-fall {
  from {
    transform: translateY(-14px);
    opacity: 0.5;
  }
}

@keyframes urgent-pulse {
  to {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jcc-bad) 12%, transparent);
  }
}

@media (max-width: 700px) {
  :root {
    --tile: min(58px, calc((100vw - 76px - 7 * var(--gap)) / 8));
  }

  .mission-panel {
    grid-template-columns: 1fr;
  }

  .mission-actions {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  :root {
    --gap: 4px;
    --tile: calc((100vw - 48px - 7 * var(--gap)) / 8);
  }

  body.page-jcc {
    padding: calc(84px + env(safe-area-inset-top, 0px)) 5px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #game-root {
    padding: 11px;
    border-radius: 28px;
  }

  .topbar {
    gap: 10px;
    margin-bottom: 11px;
  }

  .title {
    font-size: 24px;
  }

  .subtitle {
    max-width: 250px;
    font-size: 11px;
  }

  .exclusive-mark {
    min-height: 24px;
    padding: 3px 7px;
  }

  .about-toggle {
    min-width: 58px;
    padding-inline: 12px;
  }

  .mission-panel {
    min-height: 0;
    padding: 17px;
    border-radius: 23px;
  }

  .mission-panel h2 {
    font-size: 22px;
  }

  .mission-actions {
    gap: 7px;
  }

  .hero-row {
    display: none;
  }

  .stat {
    min-height: 60px;
    padding: 9px 7px;
    border-radius: 17px;
  }

  .stat strong {
    font-size: 21px;
  }

  .level-strip {
    grid-template-columns: 1fr;
  }

  .stars {
    justify-content: center;
  }

  .main {
    grid-template-columns: 1fr;
  }

  #board-shell {
    padding: 8px;
    border-radius: 22px;
  }

  .board-lock {
    inset: 8px;
  }

  .cell {
    border-radius: 10px;
  }

  .cell.jelly::before {
    inset: 2px;
    border-radius: 8px;
  }

  .mark {
    width: 17px;
    height: 17px;
    font-size: 9px;
  }

  .charm {
    font-size: 14px;
  }

  .side {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .booster {
    grid-template-columns: 1fr;
    min-height: 62px;
    padding: 7px 4px;
    justify-items: center;
    text-align: center;
  }

  .booster .ico {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .booster b {
    font-size: 11px;
  }

  .booster span span {
    font-size: 9px;
  }

  #msg-bar {
    min-height: 50px;
  }

  .dialog-card {
    padding: 28px 20px 22px;
    border-radius: 27px;
  }

  .dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

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

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #game-root,
  .mission-panel,
  .about-menu,
  .dialog-card {
    background: var(--jcc-glass-strong);
  }
}