/* =====================================================================================================================
   v021: Versus mode picker · one Big Screen lobby layout for 0-8 players · studio style pass
   ===================================================================================================================== */

/* ---------- Big Screen lobby: one layout for any party size ---------- */
/* Join band (QR + how to join | room code | head-count) across the top; the live stage below is the roster. */
#biglobby .lb-main { grid-template-columns: minmax(0, 1fr); }
#biglobby .lb-roster, #biglobby .lb-meter { display: none; }
#biglobby .lb-join { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: 1fr auto auto 1fr; column-gap: 3.4vmin; row-gap: 1.2vmin; padding: 2.2vmin 4.4vmin 2.2vmin 2.2vmin; }
#biglobby .lb-qr { width: 19vmin; grid-column: 1; grid-row: 1 / 5; }
#biglobby .lb-how { display: contents; }
#biglobby .lb-how > small { grid-column: 2; grid-row: 2; }
#biglobby .lb-how p { display: block; grid-column: 2; grid-row: 3; max-width: 48vmin; }
#biglobby .lb-code { grid-column: 3; grid-row: 1 / 5; align-self: center; margin: 0; padding: 0 4.4vmin; border-left: 1px solid rgba(255, 243, 224, .1); border-right: 1px solid rgba(255, 243, 224, .1); }
#biglobby .lb-head-n { grid-column: 4; grid-row: 1 / 5; align-self: center; display: flex; flex-direction: column; align-items: center; gap: .9vmin; min-width: 17vmin; }
.lb-head-n b { font: 900 max(40px, 9.6vmin)/1 var(--head); color: var(--cream); font-variant-numeric: tabular-nums; transition: transform .25s; }
.lb-head-n small { font: 800 max(11px, 1.6vmin)/1 var(--body); letter-spacing: .06em; color: rgba(255, 243, 224, .58); }
.lb-empty { bottom: auto; top: 18%; font-size: max(14px, 2.2vmin); color: rgba(255, 243, 224, .55); }
.lb-status p { font-size: max(14px, 2.2vmin) !important; }

/* ---------- Versus: mode picker ---------- */
.vx-pick { display: flex; flex-direction: column; gap: 12px; }
.vx-ask { margin: 4px 0 6px; text-align: center; font: 800 15px/1.3 var(--body); color: rgba(255, 243, 224, .66); }
.vx-mode { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 16px 16px 14px; border-radius: 24px; text-align: left; color: var(--cream);
  background: linear-gradient(180deg, rgba(52, 38, 118, .92), rgba(32, 22, 84, .94)); border: 1px solid rgba(255, 243, 224, .1);
  box-shadow: 0 5px 0 rgba(8, 4, 34, .5), 0 14px 30px rgba(6, 2, 28, .28), inset 0 1px 0 rgba(255, 243, 224, .1); transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.vx-mode:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(8, 4, 34, .5), 0 8px 18px rgba(6, 2, 28, .25), inset 0 1px 0 rgba(255, 243, 224, .1); }
.vxm-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #2a1450; background: linear-gradient(180deg, #ffd27a, #ff9b4a); box-shadow: 0 3px 0 #b8421f, inset 0 1px 0 rgba(255, 255, 255, .6); }
.vxm-ico.teal { color: #0e3a52; background: linear-gradient(180deg, #a6f5ec, #3fd2c4); box-shadow: 0 3px 0 #13807a, inset 0 1px 0 rgba(255, 255, 255, .6); }
.vxm-ico svg { width: 26px; height: 26px; }
.vxm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vxm-text b { font: 900 19px/1.15 var(--head); color: var(--cream); }
.vxm-text small { font: 700 13px/1.38 var(--body); color: rgba(255, 243, 224, .66); text-wrap: pretty; }
.vxm-meta { flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.vxm-meta i { font: 850 11.5px/1 var(--body); font-style: normal; padding: 6px 9px; border-radius: 99px; background: rgba(255, 243, 224, .08); color: rgba(255, 243, 224, .78); white-space: nowrap; }
.vxm-meta svg { width: 18px; height: 18px; color: rgba(255, 243, 224, .45); }
/* the featured card: Big Screen, with its illustration on top */
.vx-mode.feat { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(64, 44, 132, .95), rgba(34, 22, 88, .96)); border-color: rgba(255, 200, 120, .35); }
.vx-mode.feat .vxm-art { position: relative; display: grid; place-items: center; height: 146px; padding-top: 6px; background: radial-gradient(ellipse 70% 90% at 50% 115%, rgba(255, 155, 74, .42), transparent 70%), linear-gradient(180deg, rgba(22, 14, 62, .55), rgba(22, 14, 62, 0)); border-bottom: 1px solid rgba(255, 243, 224, .08); }
.vxm-tv { width: 178px; height: auto; filter: drop-shadow(0 10px 16px rgba(6, 2, 28, .45)); }
.vx-mode.feat .vxm-body { display: flex; align-items: center; gap: 14px; padding: 16px 16px 18px 18px; }
.vx-mode.feat .vxm-text b { font-size: 22px; }
.vx-mode.feat .vxm-meta i { background: rgba(255, 200, 120, .16); color: #ffd27a; }
.vx-panel.vx-in { animation: vxIn .26s cubic-bezier(.2, .8, .3, 1); }
@keyframes vxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vx-panel.vx-in { animation: none; } }
html.reduce-motion .vx-panel.vx-in { animation: none; }

/* ---------- studio style pass ---------- */
/* Screen titles: solid cream with a soft shadow. The gradient fill, orange drop and the little underline bar read as
   decoration; a clean title reads as product. */
.topbar .screen-title { background: none !important; -webkit-text-fill-color: currentColor; color: #fff6ea; padding-bottom: 0;
  filter: drop-shadow(0 2px 8px rgba(6, 2, 30, .5)); font-size: 25px; letter-spacing: -.005em; }
.topbar .screen-title::after { display: none; }
#daily .topbar .screen-title { font-size: clamp(21px, 5.8vw, 25px); }
/* one secondary text tone across menus (was five slightly different creams) */
.vx-hero p, .vx-ctext small, .dy-card .info small, .cs-course small, .hm-t small, .st-row small, .vx-rules { color: rgba(255, 243, 224, .66); }
/* micro-labels: a touch less tracking, one colour */
.vx-or span, .vx-field > span { letter-spacing: .1em; color: rgba(255, 243, 224, .55); }
/* player count sits beside the mode name; the chevron alone on the right, vertically centred */
.vxm-text b { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.vxm-n { font: 850 11.5px/1 var(--body); font-style: normal; padding: 5px 8px; border-radius: 99px; background: rgba(255, 243, 224, .09); color: rgba(255, 243, 224, .78); white-space: nowrap; }
.vx-mode.feat .vxm-n { background: rgba(255, 200, 120, .16); color: #ffd27a; }
.vxm-meta { align-self: center; justify-content: center; }
/* iPad sideways and laptops: Big Screen on the left, the two phone modes stacked on the right */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  #versus .scroll.vx-scroll { max-width: none; } /* the page column was capped at 460px; each panel keeps its own cap */
  .vx-scroll > .vx-pick { max-width: 760px; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 14px; }
  .vx-pick .vx-ask { grid-column: 1 / -1; }
  .vx-pick .vx-mode.feat { grid-row: 2 / 4; }
  .vx-pick .vx-mode.feat .vxm-art { flex: 1; height: auto; min-height: 150px; }
}

/* ---------- v022: tall screens use their height, top-anchored ----------
   Content stays anchored under the header (no floating block). On a tall phone the main content grows (bigger Daily rows,
   a taller Big Screen card) and each page's action or footer rests at the bottom edge, so the space reads as layout, not
   as leftover. On short phones nothing grows and pages scroll as before. */
#daily .scroll, #settings .scroll, #versus .scroll { display: flex; flex-direction: column; }
#daily .scroll > *, #settings .scroll > *, #versus .scroll > * { flex-shrink: 0; }
/* picker: the Big Screen card's illustration takes the spare height (within reason) */
.vx-pick .vx-mode.feat .vxm-art { height: clamp(138px, 25vh, 250px); }
.vx-pick .vxm-tv { width: clamp(178px, 26vh, 230px); }
.vx-pick .vx-mode:not(.feat) { min-height: clamp(84px, 12.5vh, 120px); }
/* Daily: rows grow with the screen; the note rests at the bottom */
#daily .dy-card { min-height: clamp(76px, 11.5vh, 116px); }

/* Settings: the version line rests at the bottom */


/* Settings: two labelled groups and a version footer instead of a folded "More" */
.st-sec { margin: 6px 6px 8px; font: 850 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 243, 224, .55); width: 100%; max-width: 480px; align-self: center; }
#settings .scroll > .panel { width: 100%; max-width: 480px; align-self: center; }
#settings .st-sec:not(:first-child) { margin-top: 22px; }
.st-app { display: flex; flex-direction: column; gap: 12px; padding: 16px !important; }
.st-install { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 13.5px/1.4 var(--body); color: rgba(255, 243, 224, .72); }
.st-install .t-ico { flex: none; }
.st-reset { margin: 0 !important; height: 48px; }
.st-ver { margin-top: 18px !important; color: rgba(255, 243, 224, .42) !important; }
/* Courses on tall phones: a bigger world card and roomier rows, and the three course rows sit centred in the space below */
@media (max-width: 699px) and (min-height: 800px) {
  .cs-world { aspect-ratio: 16 / 12.6; width: 78%; max-width: 400px; }
  .cs-rail { padding-left: 11%; padding-right: 11%; scroll-padding: 0 11%; }
  .cs-wtext b { font-size: 26px !important; }
  .cs-course { min-height: 84px; }
  .cs-list { gap: 14px; }
  .cs-dots { margin: 4px 0 6px; }
}
.cs-scroll { display: flex; flex-direction: column; }
.cs-scroll > * { flex-shrink: 0; width: 100%; }
.cs-scroll::before { content: ''; flex: 1 1 0; max-height: 20px; }
.cs-scroll::after { content: ''; flex: 1.6 1 0; }
/* Same Device: on tall phones the player rows and puffs grow a little, so the pinned Start button isn't stranded */
@media (max-width: 699px) and (min-height: 800px) {
  #versus .vx-name { min-height: 58px; }
  #versus .vx-puffs .pp-av { width: 62px; height: 62px; }
  #versus .vx-hero { padding-top: 8px; }
}
/* Same Device: a little diagram of the shared screen, one coloured strip per player */
.vx-how { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 22px; background: rgba(10, 4, 40, .28); border: 1px solid rgba(255, 243, 224, .08); }
.vx-phone { flex: none; width: 92px; height: 58px; padding: 5px; border-radius: 12px; background: #120b36; border: 2px solid rgba(255, 243, 224, .35); box-shadow: 0 6px 14px rgba(6, 2, 28, .35); }
.vx-pz { display: flex; height: 100%; gap: 2px; border-radius: 6px; overflow: hidden; }
.vx-pz i { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 18%, transparent), color-mix(in srgb, var(--pc) 72%, transparent)); }
.vx-pz b { font: 900 11px/1 var(--head); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.vx-how p { margin: 0; font: 700 13px/1.4 var(--body); color: rgba(255, 243, 224, .66); }
.vx-how p b { display: block; margin-bottom: 3px; font: 900 14px/1.2 var(--head); color: var(--cream); }
/* Online: three short steps under the form */
.vx-steps { list-style: none; margin: 0; padding: 6px 4px 0; display: flex; flex-direction: column; gap: 14px; }
.vx-steps[hidden] { display: none; }
.vx-steps li { display: flex; align-items: flex-start; gap: 14px; }
.vx-steps li > i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 14px/1 var(--head); font-style: normal; color: #0e3a52; background: linear-gradient(180deg, #a6f5ec, #3fd2c4); box-shadow: 0 2px 0 #13807a; }
.vx-steps li span { font: 700 13px/1.4 var(--body); color: rgba(255, 243, 224, .66); padding-top: 1px; }
.vx-steps li b { display: block; font: 900 15px/1.2 var(--head); color: var(--cream); margin-bottom: 2px; }
/* tall phones: settings rows and the Daily hero get a little more presence */
@media (max-width: 699px) and (min-height: 800px) {
  #settings .toggle { min-height: clamp(74px, 9.4vh, 88px); }
  #settings .st-sec:not(:first-child) { margin-top: 28px; }
  #daily .dy-hero { padding-top: 22px !important; padding-bottom: 22px !important; }
}
@media (max-height: 700px) { .vx-how { display: none; } }

/* ---------- v024: final menu polish ---------- */
/* Courses: the world rail clipped its selected card's soft shadow into a hard horizontal edge; give the shadow room */
.cs-rail { padding-bottom: 36px !important; margin-bottom: -26px; }
/* Daily: the coloured tier badge already says Easy / Medium / Hard; the extra edge stripe is gone */
.dy-card::before { display: none; }
/* Daily: the week strip joins the date card as its lower half, instead of floating loose between cards */
#daily .dy-hero { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 243, 224, .08) !important; }
#daily .dy-scroll > .dy-week { margin-top: -16px !important; padding: 12px 18px 16px; border-radius: 0 0 var(--r3) var(--r3); background: rgba(26, 17, 70, .62); border: 1px solid rgba(255, 243, 224, .14); border-top: 1px solid rgba(255, 243, 224, .07);
  box-shadow: 0 3px 0 rgba(8, 4, 34, .45), 0 10px 22px rgba(6, 2, 28, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Settings: Reset is a quiet destructive action, not a second primary button */
#stReset { background: rgba(255, 110, 110, .08) !important; border: 1px solid rgba(255, 130, 130, .22) !important; box-shadow: none !important; }
#stReset span { color: #ffa3a3; }
#vsOr[hidden] { display: none; }
/* upright iPads: the phone-designed menus scale up a step further, so pages fill the tall screen instead of the top half */
@media (orientation: portrait) and (min-width: 740px) and (min-height: 1000px) { :root { --uiz: 1.42; } }
/* the Versus page column was capped at 460 px before zoom, which squeezed every Versus page on an upright iPad; each panel
   keeps its own 460 px cap (scaled with the UI), the column itself does not */
#versus .scroll.vx-scroll { max-width: none; }

/* ---------- v025: leaderboards ---------- */
.rk-open { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px 14px 14px; border-radius: 22px; text-align: left; color: var(--cream); background: linear-gradient(180deg, rgba(52, 38, 118, .92), rgba(32, 22, 84, .94)); border: 1px solid rgba(255, 210, 122, .28); box-shadow: 0 4px 0 rgba(8, 4, 34, .45), 0 10px 22px rgba(6, 2, 28, .2), inset 0 1px 0 rgba(255, 243, 224, .1); }
.rk-open:active { transform: translateY(2px); }
.rk-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #2a1450; background: linear-gradient(180deg, #ffe08a, #ffb84d); box-shadow: 0 3px 0 #b8701f, inset 0 1px 0 rgba(255, 255, 255, .6); }
.rk-ico svg { width: 24px; height: 24px; }
.rk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rk-t b { font: 900 17px/1.15 var(--head); } .rk-t small { font: 700 12.5px/1.3 var(--body); color: rgba(255, 243, 224, .66); }
.rk-chev { flex: none; width: 18px; height: 18px; color: rgba(255, 243, 224, .45); }
.rk-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: center; margin: 2px auto 0; padding: 10px 16px; border-radius: 99px; font: 850 13.5px/1 var(--head); color: #ffd27a; background: rgba(255, 210, 122, .1); border: 1px solid rgba(255, 210, 122, .25); }
.rk-link svg { width: 17px; height: 17px; } .rk-link[hidden] { display: none; }
#endpick .rk-link { display: flex; width: fit-content; margin-top: 4px; }
.rk-modal { width: min(100%, 440px); max-height: min(86vh, 720px); display: flex; flex-direction: column; gap: 10px; }
.rk-sub { margin: -4px 0 4px; text-align: center; font: 700 13px/1.35 var(--body); color: rgba(255, 243, 224, .62); }
.rk-tabs[hidden] { display: none !important; }
.rk-tabs { align-self: center; }
.rk-namebar { padding: 12px; border-radius: 18px; background: rgba(255, 210, 122, .08); border: 1px solid rgba(255, 210, 122, .22); }
.rk-namebar[hidden] { display: none; }
.rk-namebar p { margin: 0 2px 8px; font: 750 13px/1.35 var(--body); color: rgba(255, 243, 224, .78); }
.rk-namerow { display: flex; gap: 8px; } .rk-namerow input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255, 243, 224, .16); background: rgba(10, 4, 40, .5); color: var(--cream); font: 800 16px var(--body); }
.rk-namerow .btn { height: 46px; padding: 0 18px; flex: none; }
.rk-rows { list-style: none; margin: 0; padding: 0 2px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.rk-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 16px; background: rgba(10, 4, 40, .34); border: 1px solid rgba(255, 243, 224, .06); }
.rk-row i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 13px/1 var(--head); font-style: normal; color: rgba(255, 243, 224, .8); background: rgba(255, 243, 224, .08); }
.rk-row.m1 i { color: #3a2400; background: linear-gradient(180deg, #ffe08a, #ffb84d); } .rk-row.m2 i { color: #24263a; background: linear-gradient(180deg, #f2f4ff, #b9bfdc); } .rk-row.m3 i { color: #2e1708; background: linear-gradient(180deg, #ffc79a, #d98a52); }
.rk-row b { font: 850 15.5px/1.2 var(--head); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-row b em { margin-left: 8px; font: 850 10.5px/1 var(--body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #8ff0e6; }
.rk-row span { font-variant-numeric: tabular-nums; white-space: nowrap; } .rk-row span b { font: 900 17px/1 var(--head); color: var(--gold); } .rk-row span small { margin-left: 3px; font: 800 11.5px/1 var(--body); color: rgba(255, 243, 224, .55); }
.rk-row.me { background: linear-gradient(90deg, rgba(143, 240, 230, .16), rgba(10, 4, 40, .34)); border-color: rgba(143, 240, 230, .35); }
.rk-row.pinned { flex: none; } .rk-row.pinned[hidden] { display: none; }
.rk-row.sk i, .rk-row.sk b, .rk-row.sk span { background: rgba(255, 243, 224, .07); color: transparent; border-radius: 8px; height: 14px; } .rk-row.sk b { width: 60%; } .rk-row.sk span { width: 40px; } .rk-row.sk i { border-radius: 50%; height: 30px; }
.rk-row.sk { animation: rkPulse 1.2s ease-in-out infinite; } @keyframes rkPulse { 50% { opacity: .55; } }
.rk-state { margin: 6px 4px; text-align: center; font: 750 13.5px/1.45 var(--body); color: rgba(255, 243, 224, .66); text-wrap: balance; } .rk-state:empty { display: none; }
/* Settings: profile name */
.st-namefield { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 10px; align-items: center; padding: 14px 12px; }
.st-namefield .t-ico { grid-row: 1; } .st-nl { display: flex; flex-direction: column; gap: 2px; } .st-nl b { font: 850 17px/1.2 var(--head); color: var(--cream); } .st-nl small { font: 700 12px/1.3 var(--body); color: rgba(255, 243, 224, .62); }
.st-namefield input { grid-column: 1 / -1; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255, 243, 224, .16); background: rgba(10, 4, 40, .5); color: var(--cream); font: 800 16px var(--body); }
.rk-namerow input { width: auto; } .rk-namerow .btn { width: auto !important; min-width: 0; }
.rk-tabs button { white-space: nowrap; padding-left: 18px !important; padding-right: 18px !important; min-width: 108px; }

/* ---------- v025: shop ---------- */
.pb-shop-unused { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 5px 9px 5px 7px; border-radius: 99px; font: 850 11.5px/1 var(--head); letter-spacing: .02em; color: #2a1450; background: linear-gradient(180deg, #ffe08a, #ffb84d); box-shadow: 0 2px 0 #b8701f; }
.pb-shop-unused svg { width: 13px; height: 13px; }
button.pearl-badge { cursor: pointer; } button.pearl-badge:active { transform: translateY(2px); }
.sh-scroll { display: flex; flex-direction: column; gap: 14px; }
.sh-scroll > * { width: 100%; max-width: 460px; margin-left: auto !important; margin-right: auto !important; flex-shrink: 0; }
.sh-hero { position: relative; height: clamp(170px, 26vh, 250px); border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 155, 74, .32), transparent 70%), linear-gradient(180deg, rgba(52, 38, 118, .55), rgba(22, 14, 62, .7)); border: 1px solid rgba(255, 243, 224, .1); box-shadow: 0 4px 0 rgba(8, 4, 34, .45), inset 0 1px 0 rgba(255, 243, 224, .08); }
.sh-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-name { position: absolute; left: 0; right: 0; top: 14px; margin: 0; text-align: center; font: 900 20px/1 var(--head); color: var(--cream); text-shadow: 0 2px 8px rgba(6, 2, 30, .5); }
.sh-action { height: 54px; gap: 8px; } .sh-action svg { width: 20px; height: 20px; } .sh-action svg.pearl { width: 18px; height: 18px; }
.sh-action:disabled { opacity: .6; filter: saturate(.4); }
.sh-tabs { align-self: center; } .sh-tabs button { white-space: nowrap; padding-left: 14px !important; padding-right: 14px !important; }
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sh-grid[hidden], .sh-extras[hidden] { display: none; }
.sh-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 10px; border-radius: 20px; color: var(--cream); background: rgba(10, 4, 40, .48); border: 1.5px solid rgba(255, 243, 224, .08); transition: border-color .2s, background .2s, transform .12s; }
.sh-card:active { transform: scale(.97); }
.sh-card canvas { width: 72px; height: 72px; }
.sh-card b { font: 850 13.5px/1.2 var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sh-card small { display: inline-flex; align-items: center; gap: 3px; font: 850 12px/1 var(--body); color: var(--gold); }
.sh-card small svg { width: 12px; height: 12px; }
.sh-card.wear small { color: #8ff0e6; }
.sh-card.sel { border-color: #ffd27a; background: linear-gradient(180deg, rgba(255, 210, 122, .22), rgba(10, 4, 40, .44)); }
.sh-extras { display: flex; flex-direction: column; gap: 10px; }
.sh-extra { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 20px; text-align: left; color: var(--cream); background: rgba(10, 4, 40, .48); border: 1px solid rgba(255, 243, 224, .08); }
.sh-xico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #2a1450; background: linear-gradient(180deg, #ffe08a, #ffb84d); box-shadow: 0 3px 0 #b8701f; } .sh-xico svg { width: 22px; height: 22px; }
.sh-xt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .sh-xt b { font: 900 16px/1.2 var(--head); } .sh-xt small { font: 700 12.5px/1.35 var(--body); color: rgba(255, 243, 224, .66); }
.sh-xp { flex: none; padding: 9px 12px; border-radius: 99px; font: 900 13px/1 var(--head); color: #2a1450; background: var(--cream); }
.sh-fine { margin: 2px 0 0; text-align: center; font: 700 12px/1.4 var(--body); color: rgba(255, 243, 224, .5); }
.sh-pill svg { color: #f1e8ff; }
@media (min-width: 700px) and (min-height: 700px) { .sh-scroll > * { zoom: var(--uiz, 1); } }

.ad-reward { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 2px; padding: 11px 14px; border-radius: 16px; color: var(--cream); background: rgba(143, 240, 230, .1); border: 1px solid rgba(143, 240, 230, .3); font: 850 14px/1 var(--head); }
.ad-reward[hidden] { display: none; }
.ad-reward svg { width: 18px; height: 18px; color: #f1e8ff; } .ad-reward small { font: 800 11.5px/1 var(--body); color: #8ff0e6; padding: 4px 7px; border-radius: 99px; background: rgba(143, 240, 230, .14); }
.st-restore { margin: 0 !important; height: 48px; }
#shop .sh-pill svg, .sh-card small svg { color: #efe6ff !important; }


/* ---------- v026: wallet, hearts, purchases, themed ads, shop polish ---------- */
/* pearl orb (used for prices everywhere in the shop) */
.orb { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; background: radial-gradient(circle at 34% 30%, #ffffff 0 18%, #f3ebff 34%, #cdb9f6 70%, #9d86dc 100%); box-shadow: 0 1px 2px rgba(20, 8, 60, .45), inset 0 -1px 1px rgba(80, 50, 150, .35); }
.orb.big { width: 34px; height: 34px; }
.sh-card small .orb { width: 13px; height: 13px; margin-right: 2px; }
.sh-action .orb { width: 18px; height: 18px; margin: 0 1px; }
#shop .sh-pill svg { display: none; } #shop .sh-pill::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 18%, #f3ebff 34%, #cdb9f6 70%, #9d86dc 100%); box-shadow: 0 1px 2px rgba(20, 8, 60, .45); }
/* Home: hearts · pearls in one pill (each half is its own button) and a Shop icon in the top bar */
.pearl-badge.wallet { display: inline-flex; align-items: stretch; padding: 0 !important; gap: 0 !important; overflow: hidden; }
.wl-seg { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px 0 8px; color: inherit; font: inherit; }
.wl-seg:first-child { padding-left: 12px; } .wl-seg:active { background: rgba(255, 243, 224, .08); }
.wl-seg b { font: inherit; font-weight: 900; } .wl-seg small { font: inherit; }
.wl-heart { width: 18px; height: 18px; color: #ff6f8f; filter: drop-shadow(0 1px 1px rgba(80, 10, 40, .4)); }
.wl-hearts small { font-size: .78em !important; letter-spacing: .06em; opacity: .75; font-variant-numeric: tabular-nums; }
.wl-hearts.low .wl-heart { color: rgba(255, 243, 224, .35); } .wl-hearts.low small { color: #ff9a9a; opacity: 1; }
.wl-div { width: 1px; margin: 9px 0; background: rgba(255, 243, 224, .18); }
.hm-shopbtn svg { color: #ffd27a; }
#home .topbar .hm-shopbtn { margin-right: 10px; }
/* fail card: the heart it cost */
.fc-hearts { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: -2px auto 8px !important; padding: 6px 12px; border-radius: 99px; font: 850 12.5px/1 var(--body) !important; color: #ffc2cf !important; background: rgba(255, 111, 143, .14); }
.fc-hearts[hidden] { display: none; } .fc-hearts svg { width: 14px; height: 14px; color: #ff6f8f; }
/* hearts sheet */
.hs-modal { width: min(100%, 400px); gap: 10px; }
.hs-row { display: flex; justify-content: center; gap: 8px; margin: 4px 0 2px; }
.hs-row svg { width: 34px; height: 34px; color: rgba(255, 243, 224, .14); } .hs-row svg.on { color: #ff6f8f; filter: drop-shadow(0 3px 6px rgba(255, 80, 120, .35)); }
.hs-inf { font: 900 46px/1 var(--head); color: #ff8fa6; }
.hs-next { margin: 0 0 6px; text-align: center; font: 750 13.5px/1.4 var(--body); color: rgba(255, 243, 224, .7); text-wrap: balance; }
.hs-opts { display: flex; flex-direction: column; gap: 8px; } .hs-opts[hidden] { display: none; }
.hs-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 18px; text-align: left; color: var(--cream); background: rgba(10, 4, 40, .34); border: 1px solid rgba(255, 243, 224, .08); }
.hs-opt:disabled { opacity: .55; } .hs-opt[hidden] { display: none; }
.hs-opt.best { border-color: rgba(255, 210, 122, .4); background: linear-gradient(90deg, rgba(255, 210, 122, .12), rgba(10, 4, 40, .34)); }
.hs-oi { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #ff8fa6, #ff5d7f); box-shadow: 0 3px 0 #b8325a; } .hs-oi svg { width: 21px; height: 21px; }
.hs-oi.teal { color: #0e3a52; background: linear-gradient(180deg, #a6f5ec, #3fd2c4); box-shadow: 0 3px 0 #13807a; } .hs-oi.pearl { background: rgba(255, 243, 224, .1); box-shadow: none; } .hs-oi .orb { width: 24px; height: 24px; }
.hs-ot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hs-ot b { font: 900 15.5px/1.2 var(--head); } .hs-ot small { font: 700 12px/1.3 var(--body); color: rgba(255, 243, 224, .62); }
.hs-opt em { flex: none; font: 900 13.5px/1 var(--head); font-style: normal; padding: 8px 11px; border-radius: 99px; color: #2a1450; background: var(--cream); }
#hsAd em { background: #8ff0e6; } #hsPearls em::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 18%, #f3ebff 34%, #cdb9f6 70%, #9d86dc 100%); }
/* purchase sheet */
.bs-buy { width: min(100%, 360px); align-items: center; text-align: center; gap: 8px; }
.bs-ico { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #2a1450; background: linear-gradient(180deg, #ffe08a, #ffb84d); box-shadow: 0 4px 0 #b8701f, inset 0 1px 0 rgba(255, 255, 255, .6); margin-bottom: 4px; }
.bs-ico svg { width: 36px; height: 36px; } .bs-ico.pearl { background: rgba(255, 243, 224, .1); box-shadow: inset 0 1px 0 rgba(255, 243, 224, .1); }
.bs-blurb { margin: 0; font: 700 14px/1.4 var(--body); color: rgba(255, 243, 224, .72); text-wrap: balance; }
.bs-price { margin: 4px 0 6px; font: 900 28px/1 var(--head); color: var(--gold); }
#byBuy { width: 100%; } .bs-cancel { display: flex !important; justify-content: center; text-decoration: none !important; color: rgba(255, 243, 224, .7) !important; min-height: 44px; }
/* shop extras: tags, owned state */
.sh-xt b em { margin-left: 8px; padding: 3px 7px; border-radius: 99px; font: 850 10px/1 var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #2a1450; background: #8ff0e6; vertical-align: 2px; }
.sh-xico.pearl { background: rgba(255, 243, 224, .1); box-shadow: none; } .sh-xico .orb { width: 24px; height: 24px; }
.sh-extra.own { opacity: .7; } .sh-extra.own .sh-xp { background: rgba(143, 240, 230, .2); color: #8ff0e6; }
.sh-card canvas { width: 78px; height: 78px; }
/* themed ad screen: the game's sky, rising bubbles, Puff, a framed creative and a countdown ring */
#adscreen { z-index: 90; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #2a1660 0%, #5b2f86 45%, #c45f86 80%, #f2a46b 100%); overflow: hidden; }
.ad-sky { position: absolute; inset: 0; pointer-events: none; }
.ad-sky i { position: absolute; bottom: -40px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 45%); animation: adBub 7s linear infinite; }
.ad-sky i:nth-child(1) { left: 8%; animation-delay: -1s; } .ad-sky i:nth-child(2) { left: 22%; width: 10px; height: 10px; animation-delay: -4s; } .ad-sky i:nth-child(3) { left: 41%; width: 24px; height: 24px; animation-delay: -2.5s; }
.ad-sky i:nth-child(4) { left: 63%; width: 12px; height: 12px; animation-delay: -5.5s; } .ad-sky i:nth-child(5) { left: 78%; animation-delay: -3s; } .ad-sky i:nth-child(6) { left: 91%; width: 9px; height: 9px; animation-delay: -6s; }
@keyframes adBub { to { transform: translateY(-115vh) translateX(14px); } }
html.reduce-motion .ad-sky i { animation: none; display: none; }
.ad-frame { position: relative; width: min(100%, 520px); height: 100%; max-height: 920px; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: calc(var(--sat) + 16px) calc(var(--sar) + 18px) calc(var(--sab) + 18px) calc(var(--sal) + 18px); }
.ad-head { display: flex; align-items: center; gap: 12px; }
.ad-head img { width: 52px; height: 52px; filter: drop-shadow(0 4px 8px rgba(20, 6, 50, .4)); animation: bob 2.4s ease-in-out infinite; }
.ad-head div { flex: 1; min-width: 0; } .ad-head small { display: block; font: 850 11px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 243, 224, .7); }
.ad-head h2 { margin: 4px 0 0; font: 900 26px/1.05 var(--head); color: #fff6ea; text-shadow: 0 2px 10px rgba(20, 6, 50, .4); }
.ad-reward-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; font: 900 14px/1 var(--head); color: #2a1450; background: linear-gradient(180deg, #ffe08a, #ffb84d); box-shadow: 0 3px 0 #b8701f; }
.ad-reward-chip[hidden] { display: none; } .ad-reward-chip svg { width: 15px; height: 15px; }
.ad-slot { flex: 1 1 auto; min-height: 220px; max-height: 620px; border-radius: 26px; padding: 10px; background: rgba(18, 8, 52, .55); border: 1px solid rgba(255, 243, 224, .18); box-shadow: 0 6px 0 rgba(12, 4, 40, .4), 0 20px 40px rgba(12, 4, 40, .35); display: flex; }
.ad-ph { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; border-radius: 18px; border: 2px dashed rgba(255, 243, 224, .2); background: repeating-linear-gradient(135deg, rgba(255, 243, 224, .025) 0 16px, rgba(255, 243, 224, .05) 16px 32px); }
.ad-ph-tag { padding: 5px 9px; border-radius: 6px; font: 900 10.5px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: #2a1450; background: #ffd27a; }
.ad-ph b { font: 900 20px/1.2 var(--head); color: rgba(255, 243, 224, .9); } .ad-ph small { max-width: 260px; font: 700 13px/1.45 var(--body); color: rgba(255, 243, 224, .6); }
.ad-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ad-close { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 28px; font: 900 16px/1 var(--head); color: rgba(255, 243, 224, .85); background: rgba(18, 8, 52, .5); border: 1px solid rgba(255, 243, 224, .2); transition: background .25s, color .25s; }
.ad-close.ready { color: #2a1450; background: linear-gradient(180deg, #ffd27a, #ff9b4a); border-color: transparent; box-shadow: 0 4px 0 #b8421f; }
.ad-ring { width: 26px; height: 26px; transform: rotate(-90deg); } .ad-ring circle { fill: none; stroke-width: 4; stroke: rgba(255, 243, 224, .2); } .ad-ring circle + circle { stroke: #ffd27a; stroke-linecap: round; stroke-dasharray: 113; }
.ad-close.ready .ad-ring { display: none; }
.ad-links { display: flex; justify-content: center; gap: 10px; } .ad-link { min-height: 40px; padding: 8px 14px; border-radius: 12px; font: 800 13.5px/1 var(--body); color: rgba(255, 243, 224, .85); background: rgba(18, 8, 52, .35); } .ad-link[hidden] { display: none; }
#adscreen.tv .ad-frame { width: min(100%, 120vmin); gap: 2.4vmin; } #adscreen.tv .ad-head h2 { font-size: max(26px, 5vmin); } #adscreen.tv .ad-slot { max-height: none; }
.sh-xico.heart, .by-heart, .bs-ico.heart { color: #fff; background: linear-gradient(180deg, #ff8fa6, #ff5d7f); box-shadow: 0 3px 0 #b8325a; }
.hs-oi.gold { color: #2a1450; background: linear-gradient(180deg, #ffe08a, #ffb84d); box-shadow: 0 3px 0 #b8701f; }
/* compact Home (shorter phones): the wallet sits in the top bar between Settings and Shop, so it drops its words */
@media (max-height: 780px) {
  #home .pearl-badge.wallet small:not(#hmHeartsT) { display: none; }
  #home .pearl-badge.wallet #hmHeartsT { display: none; }
  #home .pearl-badge.wallet .wl-seg { padding: 0 11px 0 7px; } #home .pearl-badge.wallet .wl-seg:first-child { padding-left: 11px; }
  #home .pearl-badge.wallet { left: 50% !important; }
}
/* v027: Extras tags sit above the name (no more two-line titles) */
.sh-tag { align-self: flex-start; margin-bottom: 2px; padding: 3px 7px; border-radius: 99px; font: 850 9.5px/1 var(--body); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: #2a1450; background: #8ff0e6; }
#hsPearls em { display: inline-flex; align-items: center; gap: 5px; } #hsPearls em::before { margin: 0 !important; flex: none; }
.rk-modal h2 { font-size: clamp(24px, 7vw, 30px) !important; white-space: nowrap; }
.ad-reward .orb { width: 16px; height: 16px; }
/* v028: a larger ad area. The frame fills the screen; the header and the button row stay compact, the creative takes the rest */
.ad-frame { width: min(100%, 600px); max-height: none; justify-content: flex-start; gap: 12px; padding: calc(var(--sat) + 10px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px); }
.ad-head { padding: 2px 4px 0; } .ad-head img { width: 44px; height: 44px; } .ad-head h2 { font-size: 22px; }
.ad-slot { flex: 1 1 0; min-height: 0; max-height: none; padding: 6px; border-radius: 24px; }
.ad-ph { border-radius: 19px; }
.ad-close { height: 52px; }
.ad-links { min-height: 40px; }
@media (min-aspect-ratio: 1/1) { .ad-frame { width: min(100%, 980px); } } /* iPad / laptop: a wide creative area */
#adscreen { align-items: stretch; } .ad-frame { height: auto; align-self: stretch; margin: 0 auto; }
/* v028b: the overlay's own padding was doubling the frame's safe-area padding — let the frame own the edges and fill the screen */
#adscreen { padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: stretch; }
#adscreen .ad-frame { flex: 1 1 auto; height: 100%; min-height: 0; align-self: center; width: min(100%, 600px); }
@media (min-aspect-ratio: 1/1) { #adscreen .ad-frame { width: min(100%, 980px); } }
/* v028c: "Skip" lives in the header, top right across from the puffer and title; the empty links row collapses on rewarded ads */
.ad-head .ad-skip { flex: none; min-height: 36px; padding: 8px 14px; border-radius: 999px; font-size: 13px; }
#adscreen[data-kind="rewarded"] .ad-links { display: none; }
/* v028d: "Remove ads" moves to the same top-right pill as "Skip", so every ad screen has the same ad window */
.ad-head .ad-skip[hidden] { display: none; }
/* v028e: Home's top bar is Settings on the left and Shop on the right (sound lives in Settings and the pause menu) */
#home .topbar .hm-shopbtn { margin-right: 0; }