/* v010 polish: calmer colour, consistent spacing, balanced layouts. */

/* ---------- HOME: one warm primary action, then four calm, identical tiles ---------- */
#home .stats-line { display: none !important; }
#home .home-actions { gap: 14px; }
.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hm-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 104px; padding: 14px 14px 13px; border-radius: 22px; text-align: left; color: var(--cream);
  background: rgba(26, 17, 70, .62); border: 1px solid rgba(255, 243, 224, .14); box-shadow: 0 4px 0 rgba(8, 4, 34, .45), 0 12px 26px rgba(6, 2, 28, .22), inset 0 1px 0 rgba(255, 243, 224, .08);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: transform .12s, background .2s; }
.hm-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(8, 4, 34, .45), inset 0 1px 0 rgba(255, 243, 224, .08); }
.hm-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #ffd27a; background: rgba(255, 200, 87, .13); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, .22); }
.hm-ico svg { width: 20px; height: 20px; }
.hm-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100%; }
.hm-t b { font: 850 16.5px/1.1 var(--head); color: var(--cream); letter-spacing: -.005em; }
.hm-t small { font: 700 12px/1.2 var(--body); color: rgba(255, 243, 224, .58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-badge { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px 0 7px; border-radius: 13px; background: rgba(255, 138, 76, .16); color: #ffb06b; font: 850 13px/1 var(--head); }
.hm-badge svg { width: 14px; height: 14px; }
.hm-badge.zero { background: rgba(255, 243, 224, .07); color: rgba(255, 243, 224, .4); }
@media (max-height: 700px) { .hm-tile { min-height: 88px; gap: 8px; padding: 12px; } .hm-ico { width: 32px; height: 32px; } }
/* the primary card keeps its warmth but loses the extra glow layers */
#home .play-card { box-shadow: 0 5px 0 #b8421f, 0 14px 28px rgba(255, 122, 61, .28), inset 0 2px 0 rgba(255, 255, 255, .55); }

/* ---------- endless picker: titles never wrap, badge sits in the corner ---------- */
.ep-card { padding-right: 40px; }
.ep-text b { white-space: nowrap; }
.ep-chev { position: absolute; right: 14px; top: 50%; margin-top: -11px; }
.ep-card > .ep-new { position: absolute; top: 12px; right: 14px; }
.ep-text em { margin-top: 2px; }
#home #hmLevels.hm-tile { justify-content: space-between; padding: 14px 14px 13px; gap: 12px; }
@media (max-height: 700px) { #home #hmLevels.hm-tile { gap: 8px; padding: 12px; } }
#home #hmStreak.hm-badge { min-width: 0; height: 26px; padding: 0 9px 0 7px; gap: 3px; font: 850 13px/1 var(--head); border: 0; box-shadow: none; background: rgba(255, 138, 76, .16) !important; color: #ffb06b !important; opacity: 1; }
#home #hmStreak.hm-badge.zero { background: rgba(255, 243, 224, .07) !important; color: rgba(255, 243, 224, .4) !important; }
/* world postcards: blurb on one line, hidden when the lock note needs the space */
.cs-wtext em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-world.locked .cs-wtext em { display: none; }
/* calmer headline shadows (no orange offset glow behind the new type) */
.vx-hero h3, .bl-title h1, .ep-modal h2, .bs-modal h2 { text-shadow: 0 2px 14px rgba(10, 4, 40, .45) !important; }
/* short phones (iPhone SE / mini): no tagline, compact tiles, so the hero puff keeps its space above Play */
@media (max-height: 780px) {
  #home .tagline { display: none !important; }
  .hm-grid { gap: 10px; }
  .hm-tile, #home #hmLevels.hm-tile { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 12px; }
  .hm-t small { font-size: 11.5px; }
  .hm-badge, #home #hmStreak.hm-badge { top: 8px; right: 8px; height: 22px; font-size: 12px; padding: 0 7px 0 5px; }
  #home .home-actions { gap: 12px; }
}
.hm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hm-tile { min-width: 0; } .hm-t { min-width: 0; overflow: hidden; }
.hm-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-height: 780px) { .hm-ico { flex: none; } }
@media (max-height: 780px) {
  .hm-tile, #home #hmLevels.hm-tile { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px 12px; min-height: 84px; }
  .hm-ico { width: 30px; height: 30px; border-radius: 10px; } .hm-ico svg { width: 17px; height: 17px; }
  .hm-t b { font-size: 15.5px; }
}
@media (max-height: 780px) {
  #home .home-hero { padding-top: calc(var(--sat) + 52px) !important; }
  #home .logo .logotype { width: min(66vw, 300px) !important; }
  #home .play-card { height: 64px !important; min-height: 0 !important; }
  .hm-tile, #home #hmLevels.hm-tile { min-height: 76px; gap: 6px; padding: 10px 12px; }
  #home .hero-spacer { min-height: 100px; }
}
@media (max-height: 780px) {
  /* pearls move up between the two corner buttons so the hero puff gets the room */
  #home .pearl-badge { position: absolute; top: calc(var(--sat) + 19px); left: 50%; transform: translateX(-50%) scale(.92); margin: 0; z-index: 4; }
}
/* Daily hero: neutral glass with the teal accent kept to the ring and the kicker only */
.dy-hero { background: rgba(26, 17, 70, .62) !important; border-color: rgba(255, 243, 224, .14) !important; box-shadow: 0 4px 0 rgba(8, 4, 34, .45), 0 12px 26px rgba(6, 2, 28, .22), inset 0 1px 0 rgba(255, 243, 224, .08) !important; }
.pb-title { color: var(--cream) !important; text-shadow: 0 2px 14px rgba(10, 4, 40, .45) !important; }
.modal h2, .result h2 { text-shadow: 0 2px 14px rgba(10, 4, 40, .4) !important; }

/* ---------- v011 polish ---------- */
/* pearls pill: the orb sits fully inside the pill with even padding */
.pearl-badge { height: 36px !important; padding: 0 14px 0 7px !important; gap: 7px !important; }
.pearl-badge .pb-orb { width: 22px !important; height: 22px !important; box-shadow: 0 0 6px rgba(230, 215, 255, .45), inset 0 -2px 3px rgba(90, 60, 160, .35) !important; }
.pearl-badge b { font-size: 18px !important; }
.pearl-badge small { font-size: 10px !important; }
/* Daily: clear, even gaps between every container (no card touches another) */
#daily .dy-scroll { display: flex; flex-direction: column; gap: 16px; }
#daily .dy-scroll > * { margin-top: 0 !important; margin-bottom: 0 !important; width: 100%; }
#daily .dy-list { gap: 14px !important; }
#daily .dy-card { box-shadow: 0 3px 0 rgba(8, 4, 34, .45), 0 10px 22px rgba(6, 2, 28, .2), inset 0 1px 0 rgba(255, 243, 224, .08) !important; }
#daily .dy-hero { box-shadow: 0 3px 0 rgba(8, 4, 34, .45), 0 10px 22px rgba(6, 2, 28, .2), inset 0 1px 0 rgba(255, 243, 224, .08) !important; }
#daily .dy-note { padding: 0 12px; }

/* ---------- v012: a lobby that feels live ---------- */
.bl-foot { align-items: center; }
.bl-live { flex: 1; display: flex; align-items: center; gap: 1.6vmin; min-width: 0; }
.bl-dot { flex: none; width: max(10px, 1.4vmin); height: max(10px, 1.4vmin); border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 0 rgba(255, 107, 107, .5); }
.bl-dot[data-on="1"] { background: #5ee6a0; animation: liveDot 2s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(94, 230, 160, .55); } 70% { box-shadow: 0 0 0 max(8px, 1.4vmin) rgba(94, 230, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(94, 230, 160, 0); } }
.bl-meter { display: flex; gap: .8vmin; flex: none; }
.bl-meter:empty { display: none; }
.bl-meter i { width: max(18px, 3vmin); height: max(8px, 1.1vmin); border-radius: 99px; background: rgba(255, 243, 224, .14); transition: background .3s, box-shadow .3s; }
.bl-meter i.on { background: var(--pc); box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 60%, transparent); }
.bl-slot.join { animation: slotIn .55s cubic-bezier(.3, 1.6, .5, 1); }
.bl-slot.on { animation: none; } .bl-slot.on.join { animation: slotIn .55s cubic-bezier(.3, 1.6, .5, 1); }
.bl-slot.ping { animation: slotPing .35s ease-out; }
@keyframes slotPing { 0% { transform: scale(1); } 35% { transform: scale(1.04); box-shadow: 0 0 0 .8vmin color-mix(in srgb, var(--pc) 45%, transparent); } 100% { transform: scale(1); } }
.bl-slot.ready .pp-av { animation: readyHop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes readyHop { 40% { transform: translateY(-1.4vmin) scale(1.06); } }
.bl-slot.late small { color: var(--gold); }
.bl-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.bl-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; animation: dots 1.4s infinite; }
.bl-dots i:nth-child(2) { animation-delay: .2s; } .bl-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 40% { opacity: 1; } }
.bl-join.idle .bl-qr { animation: qrPulse 2.4s ease-in-out infinite; }
@keyframes qrPulse { 50% { box-shadow: 0 0 0 1.4vmin rgba(255, 200, 87, .22), 0 1.4vmin 4vmin rgba(6, 2, 28, .45); } }
.bl-count { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: radial-gradient(closest-side, rgba(14, 8, 48, .55), rgba(14, 8, 48, 0)); }
.bl-count[hidden] { display: none; }
.bl-count > div { display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.bl-count small { font: 850 max(14px, 2.6vmin)/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #8ff0e6; }
.bl-count b { font: 400 max(96px, 26vmin)/1 'Lilita One', var(--head); color: var(--cream); text-shadow: 0 1vmin 0 #e4553b, 0 3vmin 8vmin rgba(10, 4, 40, .6); }
.bl-count b.pop { animation: countPop .85s cubic-bezier(.2, 1.4, .4, 1) both; }
html.reduce-motion .bl-dot, html.reduce-motion .bl-dots i, html.reduce-motion .bl-join.idle .bl-qr { animation: none; }
/* pause card: who paused */
.pp-by { margin: -4px 0 4px; text-align: center; font: 700 13.5px/1.35 var(--body); color: rgba(255, 243, 224, .7); }
#ptpause[data-kind="big"] .modal { width: min(90vw, 70vmin); padding: 4vmin; gap: 2vmin; }
html.big-mode #ptpause .modal h2 { font-size: max(32px, 6vmin); }
html.big-mode #ptpause .pp-by { font-size: max(14px, 2.4vmin); }
/* controller: leave + pause sit together on the left */
.pd-left { justify-self: start; display: flex; gap: 8px; }
.pd-icon[hidden] { display: none; }
.bl-count { background: rgba(14, 8, 48, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
html.big-mode #ptpause .modal { width: min(92vw, 64vmin) !important; max-width: none !important; padding: 4vmin !important; gap: 2vmin !important; }
html.big-mode #ptpause .btn { height: max(52px, 8vmin) !important; font-size: max(18px, 3vmin) !important; }
html.big-mode #ptpause .mascot { width: max(84px, 14vmin) !important; height: auto !important; }
/* v013: Solo Dive on the big screen: one large centred slot */
.bl-mode { width: max(330px, 46vmin) !important; }
.bl-slots[data-solo="1"] { grid-template-columns: 1fr; }
.bl-slots[data-solo="1"] > .bl-slot:not(:first-child):not(.on) { display: none; }
.bl-slots[data-solo="1"] > .bl-slot:first-child { min-height: 46vmin; }
.bl-slots[data-solo="1"] .pp-av, .bl-slots[data-solo="1"] .bl-empty { width: max(84px, 16vmin); height: max(84px, 16vmin); }
.bl-slots[data-solo="1"] b { font-size: max(24px, 4.6vmin); }
.ep-card.tv { background: radial-gradient(120% 140% at 0% 0%, rgba(205, 191, 255, .3), rgba(90, 70, 214, .2) 55%, rgba(30, 20, 82, .55)); border-color: rgba(205, 191, 255, .45); }
.ep-modal { gap: 12px; }
@media (max-height: 700px) { .ep-card { padding: 10px; } .ep-art { width: 64px; height: 64px; border-radius: 18px; } .ep-card.solo .ep-art img { width: 58px; height: 58px; } .ep-text small { font-size: 12px; } }
.bl-slots[data-solo="1"].has > .bl-slot:not(.on) { display: none; }
.bl-slots[data-solo="1"].has > .bl-slot.on { min-height: 46vmin; }
.pb-rows[data-wide="1"] .pb-row { grid-template-columns: 28px minmax(0, 1fr) 56px 76px !important; }
#ptboard[data-kind="big"] .pb-rows[data-wide="1"] .pb-row { grid-template-columns: 5vmin minmax(0, 1fr) 11vmin 16vmin !important; }
.pb-tot { white-space: nowrap; }
.pb-rows[data-solo="1"] .pb-rank, .pb-rows[data-solo="1"] .pb-head span:first-child { visibility: hidden; }
@media (max-height: 700px) { .ep-card { padding: 10px 40px 10px 10px; } }

/* ---------- v014 final polish ---------- */
/* no orphaned single words in titles and short copy */
h1, h2, h3, .pb-title, .vx-hero h3, .start-hint h2, .rs-name, .pd-head, .bl-title h1 { text-wrap: balance; }
p, small, .start-hint span, .fail-card p, .vx-hero p, .ep-text small, .vx-ctext small, .dy-note, .pb-note { text-wrap: pretty; }
/* numbers that count never jiggle sideways */
.tap-n, .pt-val, .pb-tot, .pb-c, .pd-stat b, .go-stats b, .rs-line b, #hmPearls, .pill b, .bl-code, .vx-code, .hm-badge b, .dy-ring b, .cs-wstars, #ptName { font-variant-numeric: tabular-nums; }
/* tuning chip: a quiet spinner only */
.dy-chip.wait { width: 36px; padding: 0; justify-content: center; }
/* clear focus ring for keyboards and TV remotes */
button:focus-visible, .vx-name input:focus-visible { outline: 3px solid rgba(255, 210, 122, .9); outline-offset: 3px; }
/* consistent press feel on every card-like control */
.cs-course:active:not(.locked), .dy-card:active, .ep-card:active, .vx-choice:active, .hm-tile:active { transition-duration: .06s; }

/* ---------- v015: tablets and laptops get a properly sized UI ----------
   The phone layout is designed at ~390 px wide; on an iPad or laptop it read as a small column. Content blocks (not the
   full-screen layers, the canvas, the Big Screen views or the controller, which size themselves) are zoomed by --uiz. */
@media (min-width: 700px) and (min-height: 860px), (min-width: 1000px) and (min-height: 700px) { :root { --uiz: 1.28; } }
@media (min-width: 1300px) and (min-height: 960px) { :root { --uiz: 1.45; } }
@media (min-width: 700px) and (min-height: 700px) {
  #home .topbar > *, #home .home-hero > *, #home .home-actions,
  .screen:not(#home):not(#game):not(#party):not(#biglobby):not(#pad) > .topbar > *,
  .vx-scroll > *, .dy-scroll > *, #settings .scroll > *,
  .cs-sets, .cs-dots, .cs-list,
  #game .hud-row, #game .meter, #game .hud-chips, #game .start-hint, #game .fail-card,
  #pause .modal, #result .modal, #gameover .modal, #endpick .modal, #bigsheet .modal, #charting .modal,
  #party:not([data-kind="big"]) .pt-hud > *, #ptboard:not([data-kind="big"]) .modal, #ptpause:not([data-kind="big"]) .modal { zoom: var(--uiz, 1); }
  .cs-rail { zoom: var(--uiz, 1); }
  #home .hero-spacer { zoom: 1 !important; }
}
/* wide landscape screens (iPad sideways, laptops): hero on the left, actions on the right, so the puff is never squeezed */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  #home { flex-direction: row; align-items: stretch; }
  #home .home-hero { flex: 1; justify-content: center; padding: calc(var(--sat) + 40px) 3vw 4vh 5vw !important; }
  #home .hero-spacer { flex: 0 0 auto; height: min(38vh, 340px); min-height: 0 !important; }
  #home .home-actions { flex: 0 0 auto; width: min(460px, 40vw); align-self: center; margin: 0 6vw 0 0; padding: 0 !important; }
  #home::before { background: linear-gradient(90deg, rgba(14, 8, 48, 0) 40%, rgba(14, 8, 48, .55) 100%) !important; }
}