/* ==========================================================================
   ATOM THADINGYUT — brand look
   --------------------------------------------------------------------------
   Loaded after styles.css. Everything brand-specific lives here:
   ATOM's blue background and artwork (assets/atom/), the pink "PLAY" button
   style, lime / cyan accents taken from the title logo, and Myanmar type
   (Noto Sans Myanmar; Outfit for Latin letters and digits).
   Colours sampled from ATOM's files:
     royal #1a2ed8 · navy #0d0b7c · sky #0590e8 · cyan #37c8ff
     pink #f8388a · coral #ff6a5f · lime #abff35
   ========================================================================== */

:root {
  --a-royal: #1a2ed8;
  --a-navy: #0d0b7c;
  --a-deep: #070952;
  --a-sky: #0590e8;
  --a-cyan: #37c8ff;
  --a-ice: #d9f3ff;
  --a-pink: #f8388a;
  --a-coral: #ff6a5f;
  --a-lime: #abff35;

  /* accent ladder used by styles.css (was gold) */
  --gold-50: #ffffff;
  --gold-100: #eaf8ff;
  --gold-200: #a9e6ff;
  --gold-300: #37c8ff;
  --gold-400: #1f8dff;
  --gold-500: #1a2ed8;
  --gold-700: #0d0b7c;
  --amber: #37c8ff;
  --ember: #f8388a;
  --jade: #abff35;

  --text: #ffffff;
  --text-2: rgba(255, 255, 255, .84);
  --text-3: rgba(255, 255, 255, .62);
  --line: rgba(140, 210, 255, .28);
  --line-2: rgba(140, 210, 255, .55);
  --glass: linear-gradient(180deg, rgba(20, 34, 190, .72), rgba(10, 12, 110, .84));

  --f-ui: 'Outfit', 'Noto Sans Myanmar', 'Myanmar Text', 'Pyidaungsu', system-ui, sans-serif;
  --f-display: var(--f-ui);
  --f-my: var(--f-ui);
}

/* ------------------------------------------------------------ background */
body {
  line-height: 1.6;
  background: linear-gradient(180deg, #1a2ed8 0%, #1a2ed8 22%, #12128e 60%, #0d0b7c 70%, #0668d8 90%, #0590e8 100%);
  background-color: var(--a-royal);
}
#app::before { /* ATOM background artwork, exactly one phone wide */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('assets/atom/bg.jpg') center bottom / cover no-repeat;
}
@media (min-width: 700px) {
  #app { box-shadow: 0 0 80px rgba(2, 4, 60, .55); }
}
#bg { opacity: .55; }

/* Myanmar script: no letter-spacing, no uppercase, taller lines */
.btn, .kicker, .field-label, .link-btn, .hud-stage-num, .hud-score-label, .intro-kicker, .clear-kicker, .lb-kicker, .combo-pop span, .r-name em, .lc-wind, .lc-banner.quick span, .demo-item i, .badge-best, .float {
  letter-spacing: 0; text-transform: none;
}
h1, h2, h3 { line-height: 1.5; }

/* ------------------------------------------------------------ components */
.kicker { font-size: 13px; font-weight: 700; color: var(--a-lime); }
.card {
  border-radius: 20px; border: 2px solid rgba(140, 210, 255, .3);
  box-shadow: 0 18px 40px -20px rgba(2, 4, 60, .8), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.card.ornate::before, .card.ornate::after { display: none; }
.card-head { align-items: center; }
.card-head h2, .page-head h2 { font-weight: 800; font-size: 17px; color: #fff; }
.page-head h2 { font-size: 22px; }

/* Buttons follow ATOM's PLAY button: glossy pink, silver frame, chunky base */
.btn { border-radius: 16px; min-height: 56px; font-size: 17px; font-weight: 800; line-height: 1.3; }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #ff8fc4 0%, #fb5ca3 46%, #f8388a 54%, #f2267c 100%);
  border: 3px solid #eef0f8;
  box-shadow: 0 5px 0 #8f95b3, 0 14px 24px -10px rgba(4, 6, 70, .8), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(150, 20, 80, .45);
  text-shadow: 0 2px 0 rgba(150, 20, 80, .45);
}
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #8f95b3, inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(150, 20, 80, .45); }
.btn-ghost {
  color: #fff; background: rgba(10, 14, 120, .55);
  box-shadow: inset 0 0 0 2px rgba(140, 210, 255, .6);
}
.btn-text { color: var(--text-2); }
.btn-go { /* the "ဆော့မယ်" button on instruction screens */
  min-width: 190px; min-height: 62px; padding: 0 34px; margin-top: 16px; font-size: 22px;
  color: #fff;
  background: linear-gradient(180deg, #ff8fc4 0%, #fb5ca3 46%, #f8388a 54%, #f2267c 100%);
  border: 4px solid #eef0f8;
  box-shadow: 0 6px 0 #8f95b3, 0 18px 30px -10px rgba(4, 6, 70, .9), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(150, 20, 80, .45);
  text-shadow: 0 2px 0 rgba(150, 20, 80, .5);
  pointer-events: auto;
  animation: goPulse 1.5s ease-in-out infinite;
}
.btn-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #8f95b3, inset 0 2px 0 rgba(255, 255, 255, .5); animation: none; }
@keyframes goPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
:focus-visible { outline: 3px solid var(--a-lime); outline-offset: 3px; }

.icon-btn { border-radius: 12px; border: 2px solid rgba(255, 255, 255, .35); background: linear-gradient(180deg, #3f6bff, #1a2ed8); color: #fff; box-shadow: 0 3px 0 rgba(4, 6, 70, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mute-btn.muted { color: rgba(255, 255, 255, .6); }
.back-btn { border: 2px solid rgba(255, 255, 255, .35); background: linear-gradient(180deg, #3f6bff, #1a2ed8); color: #fff; }
.link-btn { color: var(--a-ice); font-size: 14px; font-weight: 700; }
.board-sub { font-size: 13px; }

/* leaderboard rows */
.row { min-height: 46px; border-radius: 14px; background: rgba(8, 12, 110, .5); font-size: 15px; }
.board-list.compact .row { min-height: 42px; }
.r-rank { color: var(--a-ice); }
.r-name { font-weight: 700; }
.r-name em { color: #23300a; background: var(--a-lime); font-size: 11px; padding: 1px 8px; vertical-align: 1px; }
.r-score { color: #fff; }
.row.top1 { background: linear-gradient(90deg, rgba(255, 214, 80, .32), rgba(8, 12, 110, .5)); }
.row.top1 .r-rank { color: #ffd84a; } .row.top2 .r-rank { color: #e8eefc; } .row.top3 .r-rank { color: #ffb37a; }
.row.you {
  background: linear-gradient(90deg, rgba(248, 56, 138, .6), rgba(248, 56, 138, .25));
  box-shadow: inset 0 0 0 2px rgba(255, 190, 220, .8), 0 0 24px -6px rgba(248, 56, 138, .7);
}
.row.you .r-rank { color: #fff; }
.row.empty { padding: 10px 12px; }
.r-games { font-size: 11px; line-height: 1.3; }

/* fields */
.field-label { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.field input {
  height: 54px; border-radius: 14px; border: 2px solid rgba(140, 210, 255, .5);
  background: rgba(8, 12, 100, .6); color: #fff; font: 600 17px var(--f-ui);
}
.field input::placeholder { color: rgba(255, 255, 255, .4); }
.field input:focus { border-color: var(--a-cyan); box-shadow: 0 0 0 4px rgba(55, 200, 255, .25); }
.field.invalid input { border-color: #ff8fb0; box-shadow: 0 0 0 4px rgba(255, 111, 142, .2); }
.field-error { color: #ffd0dc; font-size: 13px; line-height: 1.6; }
.field-hint { font-size: 12px; line-height: 1.7; color: var(--text-3); margin-top: 6px; }
.check { color: #fff; }
.check input { accent-color: var(--a-pink); }
.check.invalid span { color: #ffd0dc; }
.check-start span { font-size: 14px; line-height: 1.7; color: #fff; }
.tc-link { color: var(--a-ice); }
#toast { background: rgba(8, 10, 90, .96); border: 2px solid rgba(140, 210, 255, .6); color: #fff; font-size: 14px; border-radius: 16px; max-width: 92vw; text-align: center; line-height: 1.6; }

/* ------------------------------------------------------------------ title */
.title-wrap { padding-top: calc(54px + var(--safe-t)); gap: 6px; }
.title-logo { margin: 0; width: min(80%, 310px); line-height: 0; animation: logoFloat 3.6s ease-in-out infinite; }
.title-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(4, 6, 70, .55)); }
@keyframes logoFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.start-form { margin-top: 10px; }
.btn-play {
  align-self: center; width: min(74%, 250px); min-height: 0; margin-top: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; animation: goPulse 1.8s ease-in-out infinite; touch-action: manipulation;
}
.btn-play img { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 16px rgba(4, 6, 70, .6)); pointer-events: none; }
.btn-play:active { transform: translateY(3px) scale(.98); animation: none; }
.btn-play:disabled { opacity: .6; }
.welcome { font-size: 14px; color: #fff; }
.welcome b { color: var(--a-lime); }
.board-preview { margin-top: 18px; }

/* ------------------------------------------------------------------ HUD */
.hud-row .icon-btn { background: linear-gradient(180deg, #8fe84f, #37b52e); border-color: rgba(255, 255, 255, .55); box-shadow: 0 3px 0 #1d7a1c; }
.hud-stage-num { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.5; }
.hud-stage-name { font-size: 18px; font-weight: 800; color: var(--a-lime); line-height: 1.5; text-shadow: 0 2px 0 rgba(4, 6, 70, .4); }
.hud-score-label { font-size: 12px; font-weight: 700; color: var(--a-ice); line-height: 1.4; }
.hud-score-val { font-size: 28px; color: #fff; text-shadow: 0 2px 0 rgba(4, 6, 70, .5); }
.hud-progress i { width: 16px; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .2); border: 0; }
.hud-progress i.current { background: rgba(255, 255, 255, .55); animation: pulseDot 1.2s ease-in-out infinite; }
.hud-progress i.done { background: var(--a-lime); box-shadow: 0 0 10px rgba(182, 242, 58, .7); }
.hud-combo { background: rgba(8, 12, 110, .6); border: 2px solid rgba(255, 255, 255, .35); opacity: .7; }
.hud-combo-val { color: #fff; }
.hud-combo-track { background: rgba(255, 255, 255, .22); }
.hud-combo-track i { background: linear-gradient(90deg, var(--a-cyan), var(--a-lime)); }
.hud-combo[data-mult="2"] { border-color: var(--a-cyan); }
.hud-combo[data-mult="3"], .hud-combo[data-mult="4"], .hud-combo[data-mult="5"] { background: rgba(248, 56, 138, .55); border-color: #ffd0e4; box-shadow: 0 0 18px rgba(248, 56, 138, .6); }
.hud-timer { height: 5px; background: rgba(255, 255, 255, .2); }
.hud-timer i { background: linear-gradient(90deg, var(--a-cyan), var(--a-lime)); }
.hud-timer.low i { background: linear-gradient(90deg, #ff4f6b, var(--a-pink)); }

.float { font-size: 22px; color: #fff; text-shadow: 0 0 10px rgba(4, 6, 70, .9), 0 2px 0 rgba(4, 6, 70, .9); line-height: 1.4; }
.float.hot { font-size: 28px; color: var(--a-lime); }
.float.perfect { font-size: 26px; background: linear-gradient(180deg, #fff, #ffe66b 60%, #ffb02e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(4, 6, 70, .9)); }
.combo-pop b { font-weight: 800; font-size: 84px; background: linear-gradient(180deg, #fff, #ffe66b 55%, #ff9a2e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(4, 6, 70, .8)); }
.combo-pop span { font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(4, 6, 70, .8); }

/* -------------------------------------------------- how to play + banners */
.overlay.intro { background: rgba(6, 8, 80, .78); cursor: default; }
.intro-card {
  width: min(350px, 100%); gap: 4px; padding: 22px 16px 22px; border-radius: 24px;
  background: var(--glass); border: 2px solid rgba(140, 210, 255, .45);
  box-shadow: 0 24px 50px -18px rgba(2, 4, 60, .9), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.intro-my { display: none; }
.intro-kicker { font-size: 14px; font-weight: 800; color: #23300a; background: var(--a-lime); padding: 2px 16px; border-radius: 999px; }
.intro-title { font-size: 21px; font-weight: 800; line-height: 1.7; color: #fff; text-shadow: 0 2px 0 rgba(4, 6, 70, .5); margin-top: 6px; }
.intro-title-my:empty { display: none; }
.intro-demo { height: auto; width: 100%; margin: 8px 0 6px; }
.intro-text { font-size: 16px; font-weight: 600; line-height: 1.8; max-width: 300px; }

/* points shown with the lantern pictures */
.demo-sky { flex-direction: column; gap: 10px; width: 100%; }
.demo-pts {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 16px; background: rgba(8, 12, 100, .55); border: 2px solid rgba(140, 210, 255, .3);
}
.demo-arts { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
.demo-arts span { display: block; line-height: 0; }
.demo-sky .sky-art, .demo-sky .demo-item:last-child .sky-art { width: 100%; height: auto; }
.demo-pts b { flex: none; display: flex; align-items: baseline; gap: 5px; font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; }
.demo-pts b i { font-style: normal; font-size: 34px; line-height: 1; color: var(--a-lime); text-shadow: 0 3px 0 rgba(4, 6, 70, .6); }
.demo-special b i { color: #ffe66b; }

.lc { border-radius: 0; }
.stage-area { margin: 2px 0 0; border-radius: 0; }
.lc-clock { font-size: 16px; color: #fff; background: rgba(8, 12, 110, .7); border: 2px solid rgba(255, 255, 255, .35); }
.lc-clock.low { color: #fff; background: var(--a-pink); border-color: #ffd0e4; }
.lc-wind { top: 44px; background: rgba(8, 12, 110, .75); border: 2px solid var(--a-cyan); color: #fff; font-size: 13px; }

.lc-banner { gap: 2px; padding: 16px; background: rgba(6, 8, 80, .8); }
.lc-banner.quick, .lc-banner.final { background: radial-gradient(ellipse at center, rgba(6, 8, 80, .75), rgba(6, 8, 80, 0) 70%); }
.lc-banner.quick { background: none; }
.lb-kicker { font-size: 18px; font-weight: 800; color: #fff; padding: 0; }
.lb-num {
  font-weight: 800; font-size: 104px; line-height: 1;
  background: linear-gradient(180deg, #fff 10%, #ffe66b 55%, #ff9a2e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 5px 0 rgba(4, 6, 70, .8));
}
.lb-score { font-size: 84px; }
.lb-name { font-size: 26px; font-weight: 800; line-height: 1.6; color: var(--a-lime); text-shadow: 0 2px 0 rgba(4, 6, 70, .6); }
.lb-line { font-size: 15px; font-weight: 700; line-height: 1.75; color: #ffd0e4; margin-top: 2px; }
.lb-intro {
  max-width: 300px; margin-top: 10px; padding: 10px 14px; border-radius: 16px;
  font-size: 16px; font-weight: 600; line-height: 1.8; color: #fff;
  background: rgba(20, 34, 190, .7); border: 2px solid rgba(140, 210, 255, .4);
}
.lb-mini { font-size: 30px; line-height: 1.5; color: #fff; text-shadow: 0 0 18px rgba(248, 56, 138, .9), 0 3px 0 rgba(4, 6, 70, .8); }
.lc-banner.quick span { font-size: 16px; font-weight: 800; color: var(--a-lime); text-shadow: 0 2px 0 rgba(4, 6, 70, .8); }

/* lantern artwork in play */
.sky-img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.sky-glow { top: 40%; width: 150%; height: 110%; background: radial-gradient(closest-side, rgba(255, 244, 200, .38), rgba(255, 244, 200, 0) 72%); }
.sky-special .sky-glow { top: 34%; width: 170%; height: 100%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(140, 220, 255, .18) 55%, transparent 76%); animation: goldPulse .7s ease-in-out infinite alternate; }
.giant-count { color: #fff; text-shadow: 0 0 14px rgba(4, 6, 70, .9), 0 3px 0 rgba(4, 6, 70, .9); }
.giant-ring { background: rgba(4, 6, 70, .6); }
.giant-ring i { background: linear-gradient(90deg, var(--a-cyan), var(--a-lime)); }

.overlay.pause { background: rgba(6, 8, 80, .86); }
.pause-card h2 { font-weight: 800; font-size: 26px; color: #fff; }
.pause-card p { font-size: 15px; }

/* ---------------------------------------------------------------- results */
.share-frame { border-radius: 20px; background: var(--a-navy); box-shadow: 0 24px 50px -18px rgba(2, 4, 60, .9), 0 0 0 3px rgba(255, 255, 255, .85), 0 0 40px -6px rgba(55, 200, 255, .6); }
.share-actions .btn { font-size: 15px; }
.btn-fb { background: #1877f2; border: 3px solid #eef0f8; box-shadow: 0 5px 0 #8f95b3, 0 14px 24px -10px rgba(4, 6, 70, .8); }
.rank-num { font-weight: 800; color: #fff; text-shadow: 0 5px 0 rgba(4, 6, 70, .55); }
.rank-num .hash { color: var(--a-lime); }
.rank-card.first .rank-num { animation: none; color: #ffe66b; }
.rank-of { font-size: 14px; color: var(--text-2); }
.chase { background: rgba(182, 242, 58, .14); border: 2px dashed rgba(182, 242, 58, .6); font-size: 14px; line-height: 1.7; }
.chase svg { color: var(--a-lime); }
.chase b { color: var(--a-lime); }
.best-line { font-size: 13px; line-height: 1.7; color: var(--text-2); }
.best-line b { color: #fff; }
.best-line .climb { color: var(--a-lime); }
.breakdown summary { font-size: 15px; color: #fff; }
.breakdown summary::after { color: var(--a-lime); }
.breakdown li { font-size: 14px; color: #fff; }
.breakdown li small { color: var(--text-3); }
.breakdown em { color: #fff; }
.bd-pic { width: 22px; height: 26px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.bd-bar b { background: linear-gradient(90deg, var(--a-cyan), var(--a-lime)); }
.bd-total span { color: var(--a-lime); }
.res-actions { background: linear-gradient(180deg, rgba(6, 30, 150, 0), rgba(6, 30, 150, .92) 40%, rgba(6, 30, 150, .98)); }
.res-actions .btn { font-size: 16px; }
.save-overlay, .tc-overlay { background: rgba(6, 8, 80, .92); }
.save-box p { font-size: 15px; }
.tc-box { background: linear-gradient(180deg, #1a2ed8, #0d0b7c); border: 2px solid rgba(140, 210, 255, .5); border-radius: 22px; }
.tc-head h2 { color: #fff; font-weight: 800; }
.tc-body { color: #fff; line-height: 1.8; }

/* ------------------------------------------------------- short screens */
@media (max-height: 700px) {
  .title-wrap { padding-top: calc(44px + var(--safe-t)); }
  .title-logo { width: min(64%, 240px); }
  .intro-card { padding: 16px 14px 18px; }
  .lb-num { font-size: 84px; }
  .btn-go { min-height: 56px; margin-top: 10px; }
}
@media (max-width: 360px) {
  .hud-stage-name { font-size: 16px; }
  .demo-pts { padding: 6px 8px; }
  .demo-pts b i { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .title-logo, .btn-play, .btn-go { animation: none !important; }
}

/* ==========================================================================
   Matched to ATOM's designer mock-ups ("interface Clean.ai", 5 artboards):
   lime #abff35 accents, lime score, cyan level number, green Leaderboard
   button, trophy rows with a pink "You" tag.
   ========================================================================== */
:root { --a-lime: #abff35; --jade: #abff35; }

/* HUD */
.hud-score-val { color: var(--a-lime); font-size: 30px; }
.hud-combo, .hud-combo[data-mult="2"], .hud-combo[data-mult="3"], .hud-combo[data-mult="4"], .hud-combo[data-mult="5"] {
  opacity: 1; background: rgba(8, 12, 90, .78); border: 2px solid rgba(255, 255, 255, .8); box-shadow: none;
}
.hud-combo.active { box-shadow: 0 0 14px rgba(171, 255, 53, .45); }
.hud-combo-track i, .hud-timer i { background: var(--a-lime); }
.hud-progress i.current { background: rgba(171, 255, 53, .55); }

/* level banner: big cyan number, lime name */
.lc-banner { background: rgba(6, 8, 80, .74); }
.lb-kicker { font-size: 24px; }
.lb-num {
  font-size: 140px;
  background: linear-gradient(180deg, #c4f6f8 0%, #94dcef 45%, #5a7ed6 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(4, 6, 70, .35));
}
.lb-name { color: var(--a-lime); }

/* end screen */
.share-frame { border-radius: 26px; box-shadow: 0 24px 50px -18px rgba(2, 4, 60, .9), 0 0 0 2px rgba(255, 255, 255, .55); }
.btn-fb { border: 0; border-radius: 999px; background: linear-gradient(180deg, #4d6bff, #2449fb); box-shadow: 0 10px 22px -10px rgba(4, 6, 70, .9), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.share-actions .btn-ghost { border-radius: 999px; }
.res-actions .btn { border-radius: 999px; min-height: 60px; }
.res-actions .btn-ghost { background: rgba(10, 22, 120, .92); box-shadow: inset 0 0 0 2px rgba(140, 210, 255, .55); }
.res-actions .btn-primary {
  border: 0; text-shadow: 0 2px 0 rgba(30, 110, 20, .5);
  background: linear-gradient(180deg, #a8ef5e 0%, #74d23a 55%, #5cbf2c 100%);
  box-shadow: 0 5px 0 #2f8a1c, 0 14px 24px -10px rgba(4, 6, 70, .8), inset 0 2px 0 rgba(255, 255, 255, .4);
}
.rank-num .hash { color: #94dcef; }
.rank-num #r-rank { background: linear-gradient(180deg, #c4f6f8, #94dcef 45%, #5a7ed6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank-num { text-shadow: none; }
.rank-card.first .rank-num { color: inherit; }

/* leaderboard rows */
.row, .row.top1, .row.top2, .row.top3 {
  min-height: 52px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(28, 140, 255, .8), rgba(28, 110, 245, .18));
  border: 1px solid rgba(190, 230, 255, .6);
}
.board-list.compact .row { min-height: 46px; }
.row.empty, .row.skeleton { background: rgba(8, 12, 110, .5); border-color: rgba(140, 210, 255, .3); }
.r-score { color: var(--a-lime); }
.r-name em { color: #fff; background: #ff3d7f; }
.row.top1 .r-rank, .row.top2 .r-rank, .row.top3 .r-rank { font-size: 0; width: 34px; height: 28px; background: url('assets/atom/trophy-1.webp') left center / contain no-repeat; }
.row.top2 .r-rank { background-image: url('assets/atom/trophy-2.webp'); }
.row.top3 .r-rank { background-image: url('assets/atom/trophy-3.webp'); }
.row.top1 .r-rank::before, .row.top2 .r-rank::before, .row.top3 .r-rank::before { content: none; }
.row.you { background: linear-gradient(90deg, rgba(255, 61, 127, .7), rgba(255, 61, 127, .22)); border-color: rgba(255, 200, 225, .85); }
.back-btn { border-radius: 14px; background: linear-gradient(180deg, #a8ef5e, #5cbf2c); border: 0; box-shadow: 0 3px 0 #2f8a1c; }
.page-head h2 { color: var(--a-lime); }

/* 5G (5 points) and evenly sized point pictures */
.sky-super .sky-glow { top: 34%; width: 180%; height: 105%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(220, 150, 255, .28) 55%, transparent 76%); animation: goldPulse .45s ease-in-out infinite alternate; }
.sky-giant .sky-glow { top: 36%; width: 170%; height: 110%; background: radial-gradient(closest-side, rgba(255, 255, 255, .6), rgba(140, 220, 255, .25) 55%, transparent 78%); }
.demo-sky { gap: 8px; }
.demo-pts { padding: 6px 12px; }
.demo-arts { align-items: center; gap: 8px; }
.demo-sky .demo-arts .sky-art { width: 100%; height: 100%; object-fit: contain; }
.demo-super b i { color: #ffb3f0; }
/* big lanterns: ATOM and ကံထူး 15, 5G 30 */
.demo-big { position: relative; margin-top: 10px; padding-top: 12px; border-color: rgba(171, 255, 53, .55); }
.demo-tag { position: absolute; top: -12px; left: 12px; padding: 0 12px; border-radius: 999px; background: var(--a-lime);
  font-size: 13px; font-weight: 800; font-style: normal; line-height: 1.8; color: #23300a; }
.demo-big-set { display: flex; align-items: center; gap: 8px; }
.demo-big b { flex-direction: column; align-items: center; gap: 2px; font-size: 13px; line-height: 1.4; }
.demo-big b i { color: #ff8fc8; }
.bd-pics { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; }
.bd-pics .bd-pic { width: 18px; height: 24px; margin: 0; }
.breakdown li > span:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }

/* ---- campaign window (23–27 Oct) ---- */
.campaign-note { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 0 4px; padding: 6px 16px; border-radius: 999px;
  background: rgba(8, 12, 110, .6); border: 2px solid rgba(171, 255, 53, .55); font-size: 14px; line-height: 1.7; color: #fff; text-align: center; }
.campaign-note:empty { display: none; }
.campaign-note b { color: var(--a-lime); }
body[data-campaign="closed"] .campaign-note, body[data-campaign="before"] .campaign-note { border-radius: 20px; padding: 14px 18px; max-width: 360px; gap: 6px; }
body[data-campaign="closed"] .campaign-note b, body[data-campaign="before"] .campaign-note b { font-size: 22px; }
body[data-campaign="before"] .start-form { display: none; }
/* after the campaign: play for fun — only the PLAY button, the final leaderboard, nothing saved */
body[data-campaign="closed"] .start-form > :not(.btn-play), body[data-campaign="closed"] .prizes-card { display: none; }
.rank-card.fun-card { display: none; }
body.fun .rank-card.fun-card { display: block; margin-top: 56px; } /* clear of the sound button */
body.fun .share-hero, body.fun #r-rank-card { display: none; }
.fun-card .rank-num #r-fun-score { background: linear-gradient(180deg, #c4f6f8, #94dcef 45%, #5a7ed6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.row.win { box-shadow: inset 4px 0 0 var(--a-lime); }
.row.you.win { box-shadow: inset 4px 0 0 var(--a-lime), 0 0 24px -6px rgba(248, 56, 138, .7); }

/* ---- old iPhones without WebP ---- */
.no-webp .row.top1 .r-rank { background-image: url('assets/atom/trophy-1.png'); }
.no-webp .row.top2 .r-rank { background-image: url('assets/atom/trophy-2.png'); }
.no-webp .row.top3 .r-rank { background-image: url('assets/atom/trophy-3.png'); }

/* ---- ATOM round 3 ---- */
.btn-play { width: min(46%, 168px); margin-top: 18px; }
.board-preview .card-head h2 { font-size: 15px; }
.lc-banner.wait { cursor: pointer; }
.share-frame { width: min(84%, 300px); }
.share-actions { width: min(100%, 330px); }
.res-actions { grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; padding-left: 12px; padding-right: 12px; }
.res-actions .btn { font-size: 15px; padding: 0 8px; }
.res-actions .btn svg { display: none; }
.prizes-card { width: 100%; max-width: 380px; margin-top: 14px; text-align: left; }
.prize-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prize { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(28, 140, 255, .8), rgba(28, 110, 245, .18)); border: 1px solid rgba(190, 230, 255, .6); line-height: 1.6; }
.prize b { color: var(--a-lime); font-size: 15px; }
.prize span { font-size: 14px; font-weight: 600; }

/* Myanmar: lines break only between phrases */
.nw { white-space: nowrap; }
.res-actions .btn svg { display: inline-block; width: 17px; height: 17px; flex: none; }
.res-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .85fr); }
.res-actions .btn { min-width: 0; white-space: nowrap; gap: 5px; }
@media (max-width: 400px) { .res-actions .btn { font-size: 14px; padding: 0 6px; } .res-actions .btn svg { display: none; } }
.card-head .link-btn { white-space: nowrap; flex: none; }
.board-preview .card-head h2 { min-width: 0; }
.board-preview .card-head { gap: 8px; }
.board-preview .card-head .link-btn { font-size: 13px; }

/* ---- buttons always fit their text (any phone, larger system font sizes) ---- */
.btn { min-width: 0; max-width: 100%; }
.res-actions .btn, .share-actions .btn {
  height: auto; min-height: 54px; padding: 6px 8px; gap: 6px;
  white-space: nowrap; line-height: 1.3; text-align: center; overflow: hidden;
  font-size: 16px;
}
.res-actions .btn .nw, .share-actions .btn .nw { white-space: nowrap; }
.res-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.res-actions .btn-primary { order: 0; }
@media (max-width: 480px) { .res-actions .btn svg { display: none; } }
.share-actions { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.share-actions .btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 340px) { .share-actions .btn svg { display: none; } }

/* ---- prize frame (ATOM design) ---- */
.prizes-card { padding: 20px 14px 16px; text-align: center; }
.prizes-title { display: flex; flex-direction: column; align-items: center; margin: 0 0 8px; line-height: 1.5; }
.prizes-title span { font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 3px 0 rgba(4, 6, 70, .5); }
.prizes-title b { font-size: 32px; font-weight: 800; color: var(--a-lime); text-shadow: 0 3px 0 rgba(4, 6, 70, .5); }
.prizes-img { display: block; width: 100%; max-height: 200px; object-fit: contain; margin: 4px 0 10px; }
.prize-list { gap: 10px; }
.prize { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 16px; grid-template-columns: none;
  background: linear-gradient(90deg, rgba(28, 140, 255, .85), rgba(28, 110, 245, .2)); border: 1.5px solid rgba(190, 230, 255, .7); }
.prize-ico { flex: none; width: 46px; height: 40px; display: grid; place-items: center; }
.prize-ico img, .prize-ico svg { width: 100%; height: 100%; object-fit: contain; }
.prize-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.prize-txt b { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.prize-txt small { font-size: 12.5px; font-weight: 600; color: var(--a-lime); overflow-wrap: anywhere; }

/* ATOM: no game stats on the results page (heading line + 4 numbers) */

.prize-ico img { width: auto; height: auto; max-width: 46px; max-height: 40px; }
.lc-banner .lb-name { font-size: 22px; }