:root {
  --velvet-1: #3c1a72;
  --velvet-2: #1c0b38;
  --velvet-3: #0b0422;
  --ink: #06021a;
  --gold: #e8c76a;
  --gold-hi: #ffe9b0;
  --gold-lo: #a97f2f;
  --ivory: #fbf3e3;
  --bad: #ff6b6b;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: "Manrope", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--ivory);
  background: radial-gradient(130% 100% at 50% -20%, var(--velvet-1) 0%, var(--velvet-2) 42%, var(--velvet-3) 78%, var(--ink) 100%);
}

/* ---------- backdrop ---------- */
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240vmax;
  height: 240vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 233, 176, .05) 0deg 5deg, transparent 5deg 13deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: raysSpin 140s linear infinite;
}
@keyframes raysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 176, .5), rgba(255, 233, 176, 0) 70%);
  animation: bokehFloat 12s ease-in-out infinite;
}
.b1 { width: 90px; height: 90px; left: 6%; top: 12%; }
.b2 { width: 130px; height: 130px; right: 2%; top: 40%; animation-delay: -3s; }
.b3 { width: 70px; height: 70px; left: 10%; bottom: 16%; animation-delay: -6s; }
.b4 { width: 110px; height: 110px; right: 8%; bottom: 8%; animation-delay: -9s; }
.b5 { width: 60px; height: 60px; left: 46%; top: 2%; animation-delay: -4.5s; }
@keyframes bokehFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: .5; }
  50% { transform: translateY(-24px) scale(1.12); opacity: .9; }
}
.vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, transparent 40%, rgba(6, 2, 26, .72) 100%); }

/* ---------- app shell ---------- */
#app {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 10px) 12px env(safe-area-inset-bottom, 12px);
  gap: 12px;
}

/* ---------- HUD ---------- */
#hud {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(70, 34, 120, .66), rgba(26, 11, 48, .6));
  border: 1px solid rgba(255, 235, 160, .3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
}
#menuBtn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gold-hi);
  font-size: 20px;
  background: radial-gradient(circle at 32% 26%, rgba(120, 70, 180, .6), rgba(30, 12, 54, .78));
  border: 1px solid rgba(255, 235, 160, .42);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .12s ease, filter .12s ease;
}
#menuBtn:hover { transform: translateY(-1px); filter: brightness(1.12); }
#menuBtn:active { transform: scale(.93); }

#scoreWrap { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; justify-self: center; }
#scoreWrap .statLabel {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .34em;
  color: rgba(255, 233, 176, .72);
}
#scoreCount {
  font-family: "Playfair Display", "Noto Serif KR", serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff8e0 0%, #ffd878 48%, #c9973a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(255, 216, 120, .25));
}
#scoreCount.score-pop { animation: scorePop .28s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes scorePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

#modeWrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#modeLabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--gold-hi);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 216, 120, .4);
}
#statWrap { display: flex; align-items: center; gap: 6px; font-size: 17px; }
#statIcon { color: var(--gold); }
#statValue {
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
#statWrap.low-time #statValue { color: var(--bad); animation: lowTime .8s ease-in-out infinite; }
@keyframes lowTime { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- board stage & gold frame ---------- */
#boardStage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-frame {
  position: relative;
  width: min(92vw, 452px, calc((100vh - 150px) * 0.8));
  padding: 11px;
  border-radius: 28px;
  background:
    linear-gradient(165deg, rgba(255, 246, 210, .6), rgba(168, 124, 44, .28) 32%, rgba(96, 60, 16, .4) 62%, rgba(255, 246, 210, .5)),
    linear-gradient(180deg, #7a561c, #4a2f0c);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .6),
    0 6px 18px rgba(0, 0, 0, .4),
    inset 0 2px 2px rgba(255, 246, 210, .75),
    inset 0 -4px 8px rgba(0, 0, 0, .55),
    inset 4px 0 6px rgba(0, 0, 0, .3),
    inset -4px 0 6px rgba(0, 0, 0, .3);
}
.corner { position: absolute; width: 22px; height: 22px; border: 2.5px solid var(--gold-hi); filter: drop-shadow(0 0 5px rgba(255, 224, 150, .8)); }
.corner.tl { top: 3px; left: 3px; border-right: none; border-bottom: none; border-top-left-radius: 14px; }
.corner.tr { top: 3px; right: 3px; border-left: none; border-bottom: none; border-top-right-radius: 14px; }
.corner.bl { bottom: 3px; left: 3px; border-right: none; border-top: none; border-bottom-left-radius: 14px; }
.corner.br { bottom: 3px; right: 3px; border-left: none; border-top: none; border-bottom-right-radius: 14px; }

#board {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 10;
  border-radius: 19px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, .07), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #241147, #150831);
  box-shadow: inset 0 0 0 2px rgba(255, 235, 160, .22), inset 0 2px 10px rgba(0, 0, 0, .5);
}

#fxLayer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ---------- cells & gems ---------- */
.cell {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1);
  will-change: transform;
  touch-action: none;
}

.candy {
  width: 96%;
  height: 96%;
  position: relative;
  cursor: pointer;
  transition: transform .12s ease;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .35));
}
.candy.selected {
  animation: selectBounce .55s cubic-bezier(.34, 1.56, .64, 1) infinite;
  filter: drop-shadow(0 0 10px rgba(255, 244, 204, .95));
}
@keyframes selectBounce {
  0%, 100% { transform: scale(1.12); }
  50% { transform: scale(1.27); }
}
.candy.popping { animation: pop .18s ease forwards; }
.candy.spawning { animation: spawnIn .34s cubic-bezier(.34, 1.56, .64, 1); }
.candy.shake { animation: shake .18s ease; }

@keyframes pop {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.35); filter: brightness(2.2); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes spawnIn {
  0% { transform: scale(.3); opacity: 0; }
  55% { transform: scale(1.22); opacity: 1; }
  75% { transform: scale(.9); }
  90% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-14%); }
  75% { transform: translateX(14%); }
}

.gem {
  position: absolute;
  inset: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24%;
}
.gem-icon {
  position: relative;
  width: 92%;
  height: 92%;
}
.gem-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 93% 15%, 100% 57%, 72% 100%, 28% 100%, 0% 57%, 7% 15%);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 34%),
    var(--gem);
}
.gem-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 93% 15%, 100% 57%, 72% 100%, 28% 100%, 0% 57%, 7% 15%);
  background:
    repeating-conic-gradient(from 30deg at 50% 46%, rgba(255, 255, 255, .2) 0deg 3.5deg, rgba(0, 0, 0, .06) 3.5deg 7deg),
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .3) 100%);
}
.gem-icon .shine {
  position: absolute;
  left: 6%;
  top: -6%;
  width: 46%;
  height: 150%;
  transform: rotate(28deg);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  opacity: .6;
  animation: gemTwinkle 3.4s ease-in-out infinite;
}
@keyframes gemTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

.c0 .gem-icon { --gem: radial-gradient(circle at 33% 27%, #ff9db1 0%, #ff2d55 48%, #8f0f2e 100%); }
.c0 .gem { filter: drop-shadow(0 4px 5px rgba(143, 15, 46, .5)); }
.c1 .gem-icon { --gem: radial-gradient(circle at 33% 27%, #ffd08a 0%, #ff8a1e 48%, #a34a00 100%); }
.c1 .gem { filter: drop-shadow(0 4px 5px rgba(163, 74, 0, .5)); }
.c2 .gem-icon { --gem: radial-gradient(circle at 33% 27%, #8ff0b0 0%, #17b45c 48%, #0a6b33 100%); }
.c2 .gem { filter: drop-shadow(0 4px 5px rgba(10, 107, 51, .5)); }
.c3 .gem-icon { --gem: radial-gradient(circle at 33% 27%, #8fd0ff 0%, #1e7aff 48%, #0b3aa8 100%); }
.c3 .gem { filter: drop-shadow(0 4px 5px rgba(11, 58, 168, .5)); }
.c4 .gem-icon { --gem: radial-gradient(circle at 33% 27%, #e0b0ff 0%, #9a3ee0 48%, #58127f 100%); }
.c4 .gem { filter: drop-shadow(0 4px 5px rgba(88, 18, 127, .5)); }
.c5 .gem-icon { --gem: radial-gradient(circle at 33% 27%, #ffffff 0%, #cfe6ff 48%, #7fa3c9 100%); }
.c5 .gem { filter: drop-shadow(0 4px 5px rgba(127, 163, 201, .5)); }

/* ---------- special gems ---------- */
.candy.special-stripeH::before, .candy.special-stripeV::before {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 244, 204, 0), rgba(255, 244, 204, .9) 30%, #fff 50%, rgba(255, 244, 204, .9) 70%, rgba(255, 244, 204, 0));
  filter: drop-shadow(0 0 6px rgba(255, 235, 160, .85));
  animation: beamPulse 1.5s ease-in-out infinite;
}
.candy.special-stripeH::before { left: -42%; right: -42%; top: 44%; height: 14%; }
.candy.special-stripeV::before {
  left: 44%; right: 44%; top: -40%; bottom: -40%;
  background: linear-gradient(0deg, rgba(255, 244, 204, 0), rgba(255, 244, 204, .9) 30%, #fff 50%, rgba(255, 244, 204, .9) 70%, rgba(255, 244, 204, 0));
}
.candy.special-stripeH .gem-icon, .candy.special-stripeV .gem-icon { transform: scale(.82); }
.candy.special-stripeH .gem, .candy.special-stripeV .gem { animation: specialGlow 1.4s ease-in-out infinite; }
@keyframes specialGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4) drop-shadow(0 0 10px rgba(255, 244, 204, .9)); }
}
@keyframes beamPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.candy.special-wrapped .gem-icon { transform: scale(.78); }
.candy.special-wrapped::before {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 32%;
  border: 3px solid var(--gold-hi);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .28), 0 0 14px rgba(255, 235, 160, .8), inset 0 0 10px rgba(255, 235, 160, .4);
  animation: wrapPulse 1.6s ease-in-out infinite;
}
.candy.special-wrapped::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 244, 204, .55);
  animation: spin 10s linear infinite;
}
@keyframes wrapPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0, 0, 0, .28), 0 0 10px rgba(255, 235, 160, .6); }
  50% { box-shadow: 0 0 0 3px rgba(0, 0, 0, .28), 0 0 22px rgba(255, 235, 160, 1); }
}

.candy.special-bomb .gem { filter: drop-shadow(0 4px 12px rgba(124, 77, 255, .85)); }
.candy.special-bomb .gem-icon { width: 96%; height: 96%; }
.candy.special-bomb .gem-icon::before {
  clip-path: circle(50% at 50% 50%);
  background: conic-gradient(from 0deg, #ff2d6b, #ff8a1e, #ffd94d, #17b45c, #1e7aff, #9a3ee0, #ff2d6b);
  animation: spin 2.6s linear infinite;
}
.candy.special-bomb .gem-icon::after {
  clip-path: circle(50% at 50% 50%);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 50% 50%, rgba(20, 8, 40, 0) 52%, rgba(10, 2, 28, .9) 68%);
}
.candy.special-bomb .gem-icon .shine { display: none; }
.candy.special-bomb::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 244, 204, .6);
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- fx ---------- */
.combo-pop {
  position: absolute;
  font-family: "Playfair Display", "Noto Serif KR", serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .03em;
  white-space: nowrap;
  color: #ffe9b0;
  text-shadow: 0 1px 0 rgba(60, 30, 0, .6), 0 0 14px rgba(255, 220, 130, .9), 0 0 30px rgba(255, 200, 90, .5);
  animation: comboFloat .5s ease forwards;
  pointer-events: none;
}
@keyframes comboFloat {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  20% { transform: translateY(-6px) scale(1.12); opacity: 1; }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}

.blast {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 224, 150, .7) 32%, rgba(255, 224, 150, 0) 70%);
  box-shadow: 0 0 30px rgba(255, 220, 130, .8);
  animation: blastAnim .24s ease forwards;
  pointer-events: none;
}
.blast::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 244, 204, .8) 0deg 4deg, transparent 4deg 12deg);
  clip-path: circle(50% at 50% 50%);
  animation: spin .3s linear infinite;
}
@keyframes blastAnim {
  0% { transform: scale(.2); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- overlays / cards ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, rgba(84, 40, 140, .5), rgba(8, 3, 22, .88) 72%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.overlay.open { display: flex; }
#modal { z-index: 40; }

.royal-card {
  position: relative;
  width: 100%;
  max-width: 372px;
  padding: 32px 28px 30px;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(78, 38, 128, .94), rgba(28, 12, 54, .96));
  border: 1px solid rgba(255, 235, 160, .5);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 60px rgba(232, 199, 106, .07);
  animation: cardIn .4s cubic-bezier(.34, 1.3, .64, 1);
}
.royal-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 235, 160, .3);
  border-radius: 20px;
  pointer-events: none;
}
@keyframes cardIn {
  0% { transform: translateY(24px) scale(.9); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.royal-emblem {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  color: #2a1700;
  background: radial-gradient(circle at 34% 28%, #ffe9b0, #c9973a 55%, #8a5e1c);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 2px 3px rgba(255, 255, 255, .5);
  border: 2px solid rgba(255, 255, 255, .25);
}

.royal-title {
  position: relative;
  z-index: 1;
  margin: 6px 0 4px;
  font-family: "Playfair Display", "Noto Serif KR", serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #fff8e0 0%, #ffd878 45%, #c58a2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(232, 199, 106, .4));
}
.royal-title span { font-weight: 700; }
.royal-sub {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  font-size: 13.5px;
  letter-spacing: .04em;
  line-height: 1.6;
  opacity: .85;
}
#modalBody {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
  opacity: .92;
}

.mode-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  margin-bottom: 12px;
  border-radius: 18px;
  cursor: pointer;
  color: var(--ivory);
  background: linear-gradient(135deg, rgba(120, 70, 190, .4), rgba(38, 16, 70, .5));
  border: 1px solid rgba(255, 235, 160, .35);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: transform .13s ease, box-shadow .13s ease, filter .13s ease, border-color .13s ease;
}
.mode-btn:last-child { margin-bottom: 0; }
.mode-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  border-color: rgba(255, 235, 160, .7);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 20px rgba(232, 199, 106, .25);
}
.mode-btn:active { transform: translateY(0) scale(.98); }
.mode-embleme {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #2a1700;
  background: radial-gradient(circle at 34% 28%, #ffe9b0, #d8a64e 60%, #9a6b22);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .55), 0 4px 10px rgba(0, 0, 0, .35);
}
.mode-text { display: flex; flex-direction: column; gap: 3px; }
.mode-text strong {
  font-family: "Playfair Display", "Noto Serif KR", serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
}
.mode-text em { font-style: normal; font-size: 12px; opacity: .78; line-height: 1.5; }

#modalBtn {
  position: relative;
  z-index: 1;
  border: none;
  margin-top: 4px;
  padding: 14px 40px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Playfair Display", "Noto Serif KR", serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #2a1700;
  background: linear-gradient(180deg, #fff3cd 0%, #f2cd72 45%, #c9973a 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 8px rgba(120, 70, 10, .45), 0 12px 26px rgba(0, 0, 0, .45);
  transition: transform .12s ease, filter .12s ease;
}
#modalBtn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.06); }
#modalBtn:active { transform: translateY(0) scale(.97); }

/* ---------- small screens ---------- */
@media (max-height: 700px) {
  #scoreCount { font-size: 24px; }
  .royal-title { font-size: 26px; }
  .royal-emblem { width: 54px; height: 54px; font-size: 28px; margin-bottom: 6px; }
  .royal-sub { margin-bottom: 16px; }
  .mode-btn { padding: 12px 14px; }
  .board-frame { padding: 9px; }
}