/* v0.19 mini-game host, snack picker, result card, BIRDS tabs, Nest, Games hub, perch, admin */
.arc-run { position: fixed; inset: 0; z-index: 60; overflow: hidden; touch-action: none; }
.arc-cv { position: absolute; display: block; touch-action: none; }
.arc-pause { position: absolute; left: calc(12px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); z-index: 3; }
.arc-count { position: absolute; left: 0; right: 0; top: 40%; text-align: center; z-index: 4; pointer-events: none;
  font: 900 88px var(--font, "Lilita One", sans-serif); color: #fff; -webkit-text-stroke: 4px #14161f; paint-order: stroke fill; text-shadow: 0 6px 0 #14161f; }
.arc-count.pop { animation: arcPop .5s ease-out; }
@keyframes arcPop { 0% { transform: scale(1.8); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); } }
.arc-pausecard { position: absolute !important; }
/* Classic HUD (v0.17 race HUD minus "N left" and the feed, plus BEST) + Wings Run */
#s-race.classic .race-left, #s-race.classic .race-roster, #s-race.classic .race-feed { display: none; }
.race-best { left: 50%; transform: translateX(-50%); top: calc(var(--u) * 250); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: #1d2747; border: 4px solid #14161f; border-radius: 99px; padding: 4px 18px; color: #fff; font-size: clamp(18px, 4.6vmin, 28px); -webkit-text-stroke: 4px #14161f; paint-order: stroke fill; }
.race-best[hidden], .race-boost[hidden], .race-lockup[hidden] { display: none !important; }
#s-race.skin-can .race-best { border-color: #d71f3a; box-shadow: 0 0 0 3px #14161f; }
.race-best img { height: 1.3em; }
.race-boost { pointer-events: auto; left: calc(var(--u) * 40); right: calc(var(--u) * 40); top: calc(var(--u) * 1660); height: calc(var(--u) * 150); display: flex; align-items: center; gap: 14px; padding: 0 22px;
  background: linear-gradient(#ff6b6b 0 48%, #d71f3a 48%); border: 5px solid #14161f; border-radius: 26px; box-shadow: 0 6px 0 #14161f; color: #fff; cursor: pointer;
  font: 400 clamp(16px, 4.4vmin, 30px) var(--font); -webkit-text-stroke: 4px #14161f; paint-order: stroke fill; }
.race-boost img { height: 130%; transform: rotate(-12deg); margin: -10px 0; }
.race-boost.empty { filter: saturate(.25) brightness(.85); }
.race-boost.on { animation: boostPulse .3s infinite alternate; }
@keyframes boostPulse { to { transform: scale(1.03); } }
.race-lockup { left: 50%; transform: translateX(-50%); top: calc(var(--u) * 1830); height: calc(var(--u) * 165); background: #fff; border: 5px solid #14161f; border-radius: 26px; box-shadow: 0 6px 0 #14161f; padding: 6px 26px; }
.race-lockup img { height: 100%; display: block; }
/* snack picker + mini-game result card: the race result card family (mockups v1_5/08, 09) */
.arc-layer { position: fixed !important; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: #061a33b8; overflow: auto; }
.arc-layer .rs { max-height: calc(100vh - 32px); overflow: auto; }
.arc-layer .rs-place { font-size: clamp(38px, 11vmin, 60px); line-height: 1; }
.sn-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sn-row { display: grid; grid-template-columns: 56px 1fr 24px; gap: 12px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: #2c3a6e; border: 3px solid transparent; border-radius: 16px; padding: 6px 10px; color: #fff; font: inherit; }
.sn-row.on { background: #ffd23a; border-color: #14161f; color: #14161f; }
.sn-row.off { opacity: .45; cursor: default; }
.sn-row i { font-style: normal; font-size: 24px; visibility: hidden; } .sn-row.on i { visibility: visible; }
.sn-ico { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(#4f9bff 0 50%, #2468d8 50%); border: 3px solid #14161f; display: grid; place-items: center; }
.sn-ico img { width: 44px; height: 44px; object-fit: contain; }
.sn-t b { display: block; font: 400 22px var(--font); -webkit-text-stroke: 3px #14161f; paint-order: stroke fill; color: #fff; }
.sn-row.on .sn-t b { color: #14161f; -webkit-text-stroke: 0; }
.sn-t small { font: 700 14px system-ui, sans-serif; opacity: .9; }
.rs-row .sd { width: 24px; height: 30px; display: block; margin: auto; background: #8fdc52; border: 3px solid #14161f; border-radius: 50% / 60%; transform: rotate(-25deg); }
.rs-row .px { image-rendering: pixelated; }
.rs-row.tok { background: #3b2a12; }
.rs-row s { opacity: .7; }
.rs-mastery .bar.spark i { background: linear-gradient(#ff7ab8, #e84393); }
.medal { display: block; width: 28px; height: 28px; margin: auto; border-radius: 50%; border: 3px solid #14161f; background: #cd7f32; }
.medal.silver { background: #c9d3e0; } .medal.gold { background: #ffd23a; } .medal.platinum { background: #bff3ff; }
body.arc-playing #chrome-top, body.arc-playing #chrome-nav { visibility: hidden; }

/* ===== BIRDS tabs: NEST · FLOCK · GAMES (mockups v1_4/03–05) ===== */
.bt-tabs { display: flex; gap: calc(var(--u) * 22); align-items: stretch; }
.bt-tab { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: 4px solid var(--ink); border-radius: 20px;
  background: linear-gradient(#fff 0 55%, #dfe6f2 55%); box-shadow: 0 5px 0 var(--ink); color: #14306b; font: 400 max(17px, calc(var(--u) * 50)) var(--font); padding: 0 6px; }
.bt-tab.on { background: linear-gradient(#ffe066 0 55%, #ffc21a 55%); color: #14161f; }
.bt-tab .bt-bird { display: inline-flex; align-items: center; font-size: 1em; }
.bt-tab .bt-bird canvas { width: max(28px, calc(var(--u) * 80)) !important; height: auto !important; }
.bt-badge { position: absolute; top: -12px; right: -6px; min-width: 26px; height: 26px; border-radius: 99px; background: #ff3b3b; border: 3px solid #fff; color: #fff; font: 400 14px var(--font); display: grid; place-items: center; padding: 0 4px; box-shadow: 0 2px 0 var(--ink); }
.bt-pane { gap: 12px; }
.bt-pane[hidden], #s-birds [hidden] { display: none !important; }
.sd { display: inline-block; width: .7em; height: .95em; background: #8fdc52; border: 2px solid #14161f; border-radius: 50% / 60%; transform: rotate(-25deg); vertical-align: -0.1em; }

/* NEST */
.nest { display: flex; flex-direction: column; gap: 12px; }
.nest-scene { position: relative; aspect-ratio: 800 / 600; border: 5px solid var(--ink); border-radius: 26px; overflow: hidden; background: #6cc04a url(assets/arcade/nest_scene.2fd11592.webp) center / cover; box-shadow: 0 6px 0 #0007; flex: none; }
.nest-plate { position: absolute; left: 3%; top: 4%; background: linear-gradient(#ffe066 0 55%, #ffc21a 55%); border: 4px solid var(--ink); border-radius: 99px; padding: 4px 16px; font: 400 max(15px, calc(var(--u) * 40)) var(--font); color: #14161f; box-shadow: 0 4px 0 var(--ink); }
.nest-seeds { position: absolute; right: 3%; top: 4%; background: #1d2747; border: 4px solid var(--ink); border-radius: 99px; padding: 4px 14px; font: 400 max(14px, calc(var(--u) * 36)) var(--font); color: #fff; display: flex; gap: 8px; align-items: center; }
.nest-tag { position: absolute; background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 3px 10px; font: 400 max(12px, calc(var(--u) * 30)) var(--font); color: #14161f; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.nest-tag.home { left: 24%; top: 22%; } .nest-tag.shop { right: 3%; top: 38%; }
.nest-bird { position: absolute; transform: translate(-50%, -80%); background: none; border: 0; padding: 0; cursor: pointer; z-index: 3; transition: left 1.4s linear, top 1.4s linear; }
.nest-bird canvas { display: block; width: max(54px, calc(var(--u) * 170)) !important; height: auto !important; filter: drop-shadow(0 6px 0 #0005); animation: nestBob .6s ease-in-out infinite alternate; }
.nest-bird.flip canvas { transform: scaleX(-1); }
.nest-bird.hop canvas { animation: nestHop .45s ease-out; }
.nest-bird.eat canvas { animation: nestEat .3s ease-in-out 4; }
.nest-bird.sleep canvas { animation: none; filter: brightness(.8) drop-shadow(0 6px 0 #0005); }
.nest-bird.sleep::after { content: 'z z'; position: absolute; right: -10px; top: -14px; font: 400 22px var(--font); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
@keyframes nestBob { to { transform: translateY(-4px); } }
@keyframes nestHop { 40% { transform: translateY(-26px); } }
@keyframes nestEat { 50% { transform: rotate(8deg) translateY(4px); } }
.nest-need { position: absolute; right: -24px; top: -26px; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 4px solid var(--ink); display: grid; place-items: center; font-size: 22px; animation: needPulse 1s ease-in-out infinite alternate; }
@keyframes needPulse { to { transform: scale(1.1); } }
.nest-bed { position: absolute; width: 17%; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: #8a5a2b; border: 4px solid var(--ink); box-shadow: inset 0 -8px 0 #5d3a17, inset 0 8px 0 #c48a4c; }
.nest-bowl { position: absolute; width: 11%; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #e24a4a; border: 4px solid var(--ink); }
.nest-bowl img { position: absolute; width: 60%; left: 20%; top: -55%; }
.nest-toy { position: absolute; width: 7%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid var(--ink); cursor: pointer; padding: 0;
  background: conic-gradient(#fff 0 25%, #e8322e 0 50%, #fff 0 75%, #3b7be0 0); }
.nest-toy.kick { animation: toyKick .6s ease-out; }
@keyframes toyKick { 50% { transform: translate(-50%, -160%) rotate(180deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
.nest-plot { position: absolute; width: 6.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 10px; border: 3px solid var(--ink); background: #6b4423; box-shadow: inset 0 -5px 0 #4b2f17; cursor: pointer; padding: 0; display: grid; place-items: center; }
.nest-plot img { width: 80%; opacity: .5; } .nest-plot.sprout img { width: 55%; } .nest-plot.seeded img { width: 35%; }
.nest-plot.ready { background: #8fdc52; box-shadow: 0 0 0 3px #fff; } .nest-plot.ready img { opacity: 1; animation: needPulse .8s infinite alternate; }
.nest-garden { position: absolute; left: 3%; bottom: 2%; background: #8fdc52; border: 4px solid var(--ink); border-radius: 99px; padding: 2px 14px; font: 400 max(12px, calc(var(--u) * 30)) var(--font); color: #14161f; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.nest-float { position: absolute; transform: translate(-50%, -260%); font: 400 26px var(--font); color: #ff4f7b; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; pointer-events: none; animation: floatUp 1.1s ease-out forwards; z-index: 4; }
.nest-float.small { color: #fff; -webkit-text-stroke: 4px var(--ink); }
@keyframes floatUp { to { transform: translate(-50%, -420%); opacity: 0; } }
.nest-panel { background: linear-gradient(#3d7de8 0 50%, #2a63cf 50%); border: 5px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 #0007; padding: 10px 14px; color: #fff; }
.nest-panel h3 { margin: 0 0 6px; text-align: center; font: italic 400 max(18px, calc(var(--u) * 46)) var(--font); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nest-strip { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(#2d4fb0 0 50%, #233f96 50%); }
.ns-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ns-hearts { display: inline-flex; gap: 3px; }
.hrt { width: 22px; height: 20px; display: inline-block; background: #5a6a99; clip-path: polygon(50% 100%, 0 40%, 10% 8%, 30% 0, 50% 16%, 70% 0, 90% 8%, 100% 40%); }
.hrt.on { background: #ff3b5c; } .hrt.half { background: linear-gradient(90deg, #ff3b5c 50%, #5a6a99 50%); }
.ns-bond { font: 400 20px var(--font); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ns-glow { margin-left: auto; font: 400 15px var(--font); color: #ffd23a; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ns-lab { font: 400 17px var(--font); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ns-bar { flex: 1; min-width: 80px; height: 18px; background: #0d1a3a; border: 3px solid var(--ink); border-radius: 99px; overflow: hidden; }
.ns-bar i { display: block; height: 100%; border-radius: 99px; transition: width .5s; }
.ns-bar.belly i { background: #ffb02e; } .ns-bar.spark i { background: #ff5fa8; }
.ns-mood { font: 700 13px system-ui, sans-serif; color: #cfdcff; }
.nest-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nbtn { display: flex; align-items: center; justify-content: center; gap: 6px; border: 5px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); padding: 10px 4px; cursor: pointer;
  font: 400 max(18px, calc(var(--u) * 54)) var(--font); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nbtn img { width: 1.3em; }
.nbtn.feed { background: linear-gradient(#ffe066 0 50%, #ffc21a 50%); } .nbtn.pet { background: linear-gradient(#c59bff 0 50%, #9b6bf2 50%); } .nbtn.play { background: linear-gradient(#7fe06b 0 50%, #3fae3b 50%); }
.nbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.np-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.np-tile { position: relative; flex: none; width: max(52px, calc(var(--u) * 150)); aspect-ratio: 1; border: 4px solid var(--ink); border-radius: 18px; background: linear-gradient(#5b9dff 0 50%, #3c7fe8 50%); cursor: grab; display: grid; place-items: center; padding: 0; touch-action: none; }
.np-tile img { width: 72%; pointer-events: none; } .np-tile.empty img { opacity: .35; filter: grayscale(1); }
.np-tile b { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); min-width: 28px; background: #fff; color: #14161f; border: 3px solid var(--ink); border-radius: 99px; font: 400 15px var(--font); padding: 0 6px; }
.np-tile.plus { background: linear-gradient(#7fe06b 0 50%, #3fae3b 50%); color: #fff; font: 400 44px var(--font); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; cursor: pointer; }
.np-hint { margin: 4px 0 0; font: 700 12px system-ui, sans-serif; color: #dbe6ff; text-align: center; }
.nest-drag { position: fixed; width: 64px; transform: translate(-50%, -50%); pointer-events: none; z-index: 200; filter: drop-shadow(0 6px 0 #0006); }
.nest-chest { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: linear-gradient(#ffcf45 0 50%, #f6aa1c 50%); color: #3a2208; }
.nest-chest > img { width: max(70px, calc(var(--u) * 200)); } .nest-chest > img.bounce { animation: needPulse .7s infinite alternate; } .nest-chest > img.dim { filter: grayscale(.6); }
.nest-chest h3 { text-align: left; color: #fff; margin: 0; }
.nest-chest p { margin: 2px 0; font: 700 13px system-ui, sans-serif; }
.cc-r { display: flex; align-items: center; gap: 6px; font: 400 20px var(--font); color: #3a2208; } .cc-r img { width: 26px; }
.btn.navy { background: linear-gradient(#3a4a7a, #1d2747); box-shadow: 0 6px 0 #10173a, 0 8px 0 var(--ink); }
.fs-av { border-radius: 14px; background: #ffffff22; } .fs-av img { width: 40px; } .fs-av .soil { width: 34px; height: 34px; border-radius: 8px; background: #6b4423; border: 3px solid var(--ink); display: block; }
.care-line { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; font: 700 14px system-ui, sans-serif; background: #ffffff12; border-radius: 14px; padding: 6px 10px; }
.care-line b { font: 400 18px var(--font); color: #ffe066; }

/* GAMES hub */
.ghub { display: flex; flex-direction: column; gap: 14px; }
.gh-line { margin: 0; text-align: center; font: 400 max(14px, calc(var(--u) * 36)) var(--font); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.gcard { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; border: 5px solid var(--ink); border-radius: 26px; overflow: hidden; cursor: pointer; padding: 0; background: #2f9be9 center / cover; box-shadow: 0 6px 0 #0007; text-align: left; color: #fff; }
.gcard.hero { aspect-ratio: 1.75 / 1; }
.gcard.event { aspect-ratio: 3.4 / 1; }
.gcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #ffffff55; }
.gc-art { position: absolute; inset: 0 0 22% 0; background: center / cover no-repeat; }
.gc-art.on { border-bottom: 4px solid var(--ink); }
.gcard.hero .gc-art { background: url(assets/fb/pipe_new.12008385.png) 78% 0 / 14% auto no-repeat; }
.gcard.hero .gc-art::after { content: ''; position: absolute; left: 44%; top: 30%; width: 22%; aspect-ratio: 1.5; background: url(assets/birds/faby.dde0b623.png) 0 0 / auto 100% no-repeat; image-rendering: pixelated; }
.gc-title { position: absolute; left: 4%; bottom: 24%; font: 400 max(26px, calc(var(--u) * 110)) var(--font); line-height: 1; color: #fff; -webkit-text-stroke: max(5px, calc(var(--u) * 14)) var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
.ghub-grid .gc-title { font-size: max(17px, calc(var(--u) * 58)); -webkit-text-stroke-width: max(4px, calc(var(--u) * 10)); bottom: 26%; }
.gcard.event .gc-title { bottom: 34%; font-size: max(24px, calc(var(--u) * 88)); }
.gc-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #131c3e; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4%; font: 800 max(11px, calc(var(--u) * 30)) system-ui, sans-serif; }
.gcard.event .gc-foot { height: 30%; }
.gc-ico { height: 1.4em; vertical-align: middle; margin-right: 4px; }
.gc-partner { color: #ffd23a; font: 400 max(13px, calc(var(--u) * 36)) var(--font); }
.gc-tag { position: absolute; left: 4%; top: 7%; background: linear-gradient(#ffe066 0 55%, #ffc21a 55%); border: 4px solid var(--ink); border-radius: 99px; padding: 2px 14px; color: #14161f; font: 400 max(12px, calc(var(--u) * 34)) var(--font); z-index: 1; }
.gc-ribbon { position: absolute; right: -40px; top: 18px; transform: rotate(35deg); background: #d71f3a; color: #fff; padding: 4px 48px; font: 400 15px var(--font); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.gc-band { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: var(--ev, #d71f3a); }
.gcard.event { background-color: var(--ev); }
.gc-cans { position: absolute; right: 18%; top: 0; height: 70%; display: flex; gap: 40px; } .gc-cans img { height: 100%; }
.gc-cans img:first-child { transform: translateY(-40%); } .gc-cans img:last-child { transform: translateY(35%); }
.ghub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ghub-grid .gcard { aspect-ratio: 1.3 / 1; }
.gc-2p { position: absolute; right: 4%; top: 6%; background: #fff; color: #14161f; border: 4px solid var(--ink); border-radius: 12px; padding: 2px 10px; font: 400 16px var(--font); z-index: 2; }

/* ===== the Perch: live alert pill (Home only) + compact pill (NEST / GAMES) ===== */
.perch { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 4px); transform: translate(-50%, -160%); z-index: 90; max-width: calc(100vw - 24px); box-sizing: border-box;
  display: flex; gap: 8px; align-items: center; background: #000; color: #fff; border-radius: 99px; padding: 5px 5px 5px 14px; min-height: 26px; cursor: pointer; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); white-space: nowrap; }
.perch[hidden] { display: none; }
.perch.drop { transform: translate(-50%, 0); } .perch.up { transform: translate(-50%, -160%); }
.pc-ico { font-size: 13px; line-height: 1; }
.pc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 13px/1.25 var(--font); }
.pc-t b { font: inherit; } .pc-t small { font: inherit; color: #b9c2d9; }
.perch:not(:has(.pc-act)) { padding-right: 16px; }
.pc-act { flex: none; background: #ffd23a; color: #14161f; border: 0; border-radius: 99px; padding: 2px 10px; font: 400 12px/1.25 var(--font); cursor: pointer; }
.perch.t-raided .pc-t b { color: #ff6b6b; }

/* ===== Admin ===== */
.admin { position: fixed; inset: 0; z-index: 120; background: #061a33d9; display: grid; place-items: center; padding: 10px; }
.ad-in { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 8px; background: #fff7e0; border: 5px solid var(--ink); border-radius: 22px; padding: 12px; color: #1e2a4a; overflow: hidden; }
.ad-head { display: flex; align-items: baseline; gap: 10px; } .ad-head h2 { margin: 0; font: 400 28px var(--font); } .ad-head small { flex: 1; font: 700 11px system-ui; color: #6a6f86; }
.ad-x { border: 3px solid var(--ink); border-radius: 12px; background: #fff; font: 700 18px system-ui; width: 38px; height: 38px; cursor: pointer; }
.ad-tabs button { font-size: 12px; min-height: 32px; }
.ad-body { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.ad-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 2px solid #e2d6b6; border-radius: 12px; padding: 6px 8px; font: 700 13px system-ui; }
.ad-row b { font: 400 16px var(--font); } .ad-row small { color: #6a6f86; } .grow { flex: 1; }
.ad-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); }
.ad-note { margin: 0; font: 700 12px system-ui; color: #4a4f63; } .ad-note.bad { color: #c62828; } .ad-note.ok { color: #2e7d32; }
.ad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ad-grid .btn { font-size: 13px; padding: 8px 6px; -webkit-text-stroke: 3px var(--ink); }
.ad-ta { width: 100%; min-height: 120px; font: 12px ui-monospace, monospace; border: 2px solid var(--ink); border-radius: 10px; padding: 6px; box-sizing: border-box; }
.ad-ta.big { min-height: 260px; }
.ad-sel { width: 100%; font: 700 14px system-ui; padding: 6px; border-radius: 10px; border: 2px solid var(--ink); }
.ad-log { font: 11px ui-monospace, monospace; background: #1d2747; color: #cfdcff; border-radius: 10px; padding: 6px; max-height: 180px; overflow: auto; }
.ad-pv .gs-card { color: #fff; }
.ad-box { display: flex; flex-direction: column; gap: 4px; }

/* ===== Home v0.19: PLAY modes, need bubble, event tile ===== */
.play-sub { position: absolute; display: grid; place-items: center; pointer-events: none; border-radius: 99px; background: #d9620a; border: max(2px, calc(var(--u) * 5)) solid #8a3300;
  font: 400 max(11px, calc(var(--u) * 34)) var(--font); color: #fff; -webkit-text-stroke: max(2px, calc(var(--u) * 7)) #4a1c00; paint-order: stroke fill; white-space: nowrap; }
/* 31 Oct: the Home plate is clean art now (assets/home.d5f24362.webp), so the race line is drawn (it was painted on the old plate) */
.play-sub.race { font-size: max(10px, calc(var(--u) * 30)); }
.play-dots { position: absolute; display: flex; gap: calc(var(--u) * 16); justify-content: center; align-items: center; pointer-events: none; }
.play-dots i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; background: #ffffffaa; border: max(1px, calc(var(--u) * 4)) solid var(--ink); }
.play-dots i.on { background: #ffd23a; }
.play-arrow { position: absolute; border-radius: 50%; border: max(3px, calc(var(--u) * 8)) solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; padding: 0 0 calc(var(--u) * 10);
  font: 400 calc(var(--u) * 92) var(--font); line-height: 1; box-shadow: 0 calc(var(--u) * 8) 0 var(--ink); display: grid; place-items: center; }
.play-arrow:active { transform: translateY(calc(var(--u) * 6)); box-shadow: 0 calc(var(--u) * 2) 0 var(--ink); }
.need-bubble { position: absolute; border-radius: 50%; background: #fff; border: max(3px, calc(var(--u) * 8)) solid var(--ink); font-size: calc(var(--u) * 62); display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 calc(var(--u) * 6) 0 #0005; animation: needPulse 1s ease-in-out infinite alternate; z-index: 2; }
.need-bubble[hidden] { display: none; }
.need-bubble::after { content: ''; position: absolute; left: 6%; bottom: -8%; width: 26%; height: 26%; background: #fff; border-left: max(3px, calc(var(--u) * 8)) solid var(--ink); border-bottom: max(3px, calc(var(--u) * 8)) solid var(--ink); transform: rotate(10deg); border-radius: 0 0 0 40%; z-index: -1; }
.ltile.ev-custom > img { visibility: hidden; }
.lt-ev { position: absolute; inset: 0; border-radius: 16%/12%; background: var(--ev, #1b2a5c); border: max(3px, calc(var(--u) * 8)) solid var(--ink); overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 10%; }
.lt-ev[hidden] { display: none; }
.lt-ev::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9%; background: #d71f3a; }
.lt-ev b { font: 400 1.05em var(--font); line-height: 1; text-align: center; color: #fff; -webkit-text-stroke: .18em var(--ink); paint-order: stroke fill; z-index: 1; }
.lt-ev canvas { width: 62% !important; height: auto !important; margin-top: 4%; }
.lt-ev .lt-can { position: absolute; right: 4%; bottom: 20%; width: 26%; transform: rotate(14deg); }
.lt-dots { position: absolute; left: 0; right: 0; bottom: -14%; display: flex; gap: 4px; justify-content: center; }
.lt-dots[hidden] { display: none; } .lt-dots i { width: 8px; height: 8px; border-radius: 50%; background: #fff8; border: 2px solid var(--ink); } .lt-dots i.on { background: #ffd23a; }
.ltile .lt-tag { z-index: 2; } .ltile .hm-badge { z-index: 3; }

/* Base: Activity (moved from Home, v1.4) */
.base-actwrap { position: absolute; left: calc(12px + env(safe-area-inset-left)); z-index: 4; display: flex; align-items: center; gap: 8px; }
.base-actwrap[hidden], .base-rec[hidden] { display: none; }
.base-act { position: relative; width: 56px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; padding: 2px;
  background: linear-gradient(#5bc3ff 0 50%, #1f86e6 50%); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.base-act .ha-ico svg { width: 30px; height: 30px; display: block; }
.base-act b { font: 400 10px var(--font); color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.base-act .hm-badge { position: absolute; top: -9px; right: -9px; }
.base-rec { background: #1d2747; color: #fff; border: 3px solid var(--ink); border-radius: 99px; padding: 6px 12px; font: 400 13px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--ink); max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-badge.care { background: #fff !important; color: #14161f; font-size: 12px; }
/* profile tile: the Flappy centred at 72 % of the tile (v1.4) */
.tb-left[data-kind="profile"] .tb-bird canvas { width: 92% !important; transform: translate(3.6%, -17%) !important; }
.base-act .hm-badge { min-width: 22px; height: 22px; padding: 0 5px; font-size: 13px; display: grid; place-items: center; border: 2px solid #fff; }

/* EVENTS: token event cards (mockup v1_3/04) */
.ev-token { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ev, #d71f3a) inset, 0 6px 0 #0006; }
.ev-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ev, #1b2a5c); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px; border-top: 8px solid #d71f3a; }
.ev-band img { height: 46px; max-width: 70%; object-fit: contain; background: #fff; border-radius: 10px; padding: 2px 8px; }
.ev-band b { font: 400 22px var(--font); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.g-tag.red { background: #d71f3a; color: #fff; }
.g-item.ev-last { box-shadow: 0 0 0 3px #ffd23a inset; }
.g-item .g-av canvas { width: 42px !important; height: auto !important; }
/* Wings Run (25 Oct): the can-pickup protection countdown, under BEST; a status pill, never a modal */
.race-inv { position: absolute; left: auto; right: calc(var(--u) * 40); transform: none; top: calc(var(--u) * 140); display: flex; align-items: center; gap: 8px; white-space: nowrap; pointer-events: none;
  background: #d71f3a; border: 4px solid #14161f; border-radius: 99px; padding: 2px 18px; color: #ffc72c; font-size: clamp(16px, 4.2vmin, 26px); -webkit-text-stroke: 3px #14161f; paint-order: stroke fill; animation: invPulse .5s infinite alternate; }
.race-inv b { color: #fff; font-weight: 400; min-width: 2.2em; text-align: right; }
.race-inv[hidden] { display: none !important; }
@keyframes invPulse { to { filter: brightness(1.15); } }
/* v0.19.2 event modes: bubble chip, LAB tag, the held power-up button, bonus caves, upside-down */
.race-bubble, .race-lab { position: absolute; pointer-events: none; white-space: nowrap; border: 4px solid #14161f; border-radius: 99px; padding: 2px 16px; font-size: clamp(14px, 3.6vmin, 22px); -webkit-text-stroke: 3px #14161f; paint-order: stroke fill; }
.race-bubble { right: calc(var(--u) * 40); top: calc(var(--u) * 228); background: #38b6ff; color: #fff; }
.race-lab { left: calc(var(--u) * 40); top: calc(var(--u) * 300); background: #14161f; color: #ffd23a; -webkit-text-stroke: 0; }
.race-bubble[hidden], .race-lab[hidden], .race-held[hidden], .race-cave[hidden] { display: none !important; }
.race-held { position: absolute; pointer-events: auto; left: calc(var(--u) * 40); top: calc(var(--u) * 1500); display: flex; align-items: center; gap: 10px; padding: 8px 22px 8px 10px; border: 5px solid #14161f; border-radius: 99px; background: #fff; color: #14161f; font: 400 clamp(16px, 4vmin, 26px) var(--font); cursor: pointer; box-shadow: 0 6px 0 #14161f; }
.race-held i { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--pc, #38b6ff); border: 3px solid #14161f; }
.race-cave { position: absolute; inset: 0; display: grid; place-items: center; background: #061a33b8; pointer-events: auto; z-index: 6; }
.cave-card { width: min(92%, 980px); background: #1d2747; border: 6px solid #14161f; border-radius: 30px; padding: 24px; text-align: center; color: #fff; box-shadow: 0 10px 0 #14161f; }
.cave-card > b { display: block; font: 400 clamp(26px, 7vmin, 52px) var(--font); color: #ffd23a; -webkit-text-stroke: 6px #14161f; paint-order: stroke fill; }
.cave-card > small { display: block; font: 800 clamp(13px, 3vmin, 18px) system-ui, sans-serif; margin: 4px 0 16px; color: #cfdcff; }
.cave-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cave-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 5px solid #14161f; border-radius: 20px; background: #fff; color: #14161f; cursor: pointer; }
.cave-opt i { width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--pc); border: 4px solid #14161f; }
.cave-opt b { font: 400 clamp(16px, 4vmin, 26px) var(--font); }
.cave-opt small { font: 700 clamp(10px, 2.4vmin, 14px)/1.25 system-ui, sans-serif; color: #3b4266; }
#s-race.flip .race-canvas { transform: scaleY(-1); }
.race-best .tok-ico { font-size: .9em; -webkit-text-stroke: 0; }
/* v0.19.3 Admin: tap an event name to test-play it; status chips */
.ad-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; background: none; border: 0; padding: 4px 2px; text-align: left; cursor: pointer; color: inherit; min-height: 44px; }
.ad-name:active { background: #fff3c4; border-radius: 8px; }
.ad-name b { color: #1f6fd0; }
.ad-st { font: 800 10px/1 system-ui; font-style: normal; padding: 3px 6px; border-radius: 999px; background: #e6e6e6; color: #444; }
.ad-st.live { background: #2fbf4f; color: #fff; } .ad-st.off { background: #ddd; } .ad-st.ended, .ad-st.queued, .ad-st.events { background: #ffe1a6; color: #6a4500; }
.ad-box div { margin: 3px 0; font: 600 12px/1.35 system-ui; }

/* ======================================================================================
   v0.19.3 FOLD-SAFE OVERLAYS (Zainab, 26 Oct: on a short Android screen the race results'
   CONTINUE was below the fold and the tutorial could not continue). Rules for every card:
   the card is never taller than the screen; its action buttons stick to the card's bottom
   on a solid band; on short screens the content compacts, and it scrolls if it must.
   tools/qa_fold.mjs checks every overlay on 7 viewports (320×480 … 640×360 landscape).
   ====================================================================================== */
.race-result, .arc-layer, .race-pausecard, .modal {
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.race-result .rs, .arc-layer .rs {
  max-height: calc(100vh - 16px); max-height: calc(var(--vvh, 100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.race-result .rs-actions, .arc-layer .rs-actions {
  position: sticky; bottom: -24px; z-index: 3; flex: none;
  margin: 2px -20px -24px; padding: 10px 16px 14px; width: calc(100% + 40px); box-sizing: border-box;
  background: #0f1a3c; border-top: 3px solid #ffffff1f; border-radius: 0 0 22px 22px;
}
/* the chest hero sits inside the card (a scrolling card would clip it above the top edge) */
.race-result .rs.has-hero { padding-top: 14px; margin-top: 0; }
.race-result .rs-hero { position: relative; left: auto; top: auto; transform: none; margin: -4px 0 -2px; }
.race-result .rs-hero::before { width: 200px; height: 200px; }
.race-result .rs-hero img { width: 120px; }
/* tall screens: the hero pops out of the top of the card again (v0.17 look) */
@media (min-height: 860px) {
  .race-result .rs { overflow: visible; max-height: none; }
  .race-result .rs.has-hero { padding-top: 92px; margin-top: 70px; }
  .race-result .rs-hero { position: absolute; left: 50%; top: -86px; transform: translateX(-50%); margin: 0; }
  .race-result .rs-hero::before { width: 260px; height: 260px; }
  .race-result .rs-hero img { width: 150px; }
}
/* short screens: compact rows, side-by-side buttons */
@media (max-height: 780px) {
  .race-result .rs, .arc-layer .rs { gap: 6px; padding: 12px 14px 24px; border-width: 5px; }
  .race-result .rs-actions, .arc-layer .rs-actions { margin: 2px -14px -24px; width: calc(100% + 28px); padding: 8px 12px 12px; flex-direction: row; justify-content: center; }
  .race-result .rs-actions .btn, .arc-layer .rs-actions .btn { flex: 1 1 0; min-width: 0; font-size: clamp(16px, 5vw, 22px); padding: 8px 10px; }
  .race-result .rs-place, .arc-layer .rs-place { font-size: clamp(34px, 9vh, 52px); line-height: 1; }
  .race-result .rs-sub, .arc-layer .rs-sub { font-size: 14px; }
  .race-result .rs-row, .arc-layer .rs-row { padding: 4px 8px; font-size: 14px; grid-template-columns: 28px 1fr auto; }
  .race-result .rs-row em, .arc-layer .rs-row em { font-size: 20px; }
  .race-result .rs-row small, .arc-layer .rs-row small { font-size: 11.5px; }
  .race-result .rs-row .rs-ico img, .arc-layer .rs-row .rs-ico img { width: 26px; }
  .race-result .rs-mastery, .arc-layer .rs-mastery { padding: 5px 10px; font-size: 13px; }
  .race-result .rs-mastery .mb canvas, .arc-layer .rs-mastery .mb canvas { width: 44px !important; }
  .race-result .rs-hero img { width: 84px; } .race-result .rs-hero b { font-size: 20px; }
  .race-result .rs-hero::before { width: 150px; height: 150px; }
  .sn-row { padding-top: 6px !important; padding-bottom: 6px !important; }
}
@media (max-height: 620px) {
  .race-result .rs-row small, .arc-layer .rs-row small { display: none; }
  .race-result .rs-mastery small, .arc-layer .rs-mastery small { display: none; }
  .race-result .rs-hero img { width: 60px; } .race-result .rs-hero b { font-size: 17px; }
  .race-result .rs-hero::before { display: none; }
  .race-result .rs-place, .arc-layer .rs-place { font-size: clamp(28px, 8vh, 40px); }
}
@media (max-height: 420px) {   /* phones in landscape */
  .race-result .rs-mastery, .arc-layer .rs-mastery { display: none; }
  .race-result .rs-hero { display: none; }
}
/* the pause card and every openCard() modal: their trailing buttons stick to the bottom */
.race-pausecard .card { max-height: calc(var(--vvh, 100dvh) - 16px); overflow-y: auto; }
.card .card-actions { position: sticky; bottom: calc(-1 * var(--pb, 20px)); z-index: 3; width: calc(100% + 2 * var(--px, 18px)); margin: 0 calc(-1 * var(--px, 18px)) calc(-1 * var(--pb, 20px)); padding: 10px var(--px, 18px) 14px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--card); border-top: 3px solid #0000001a; border-radius: 0 0 20px 20px; }
/* a row of buttons in the band wraps rather than run past the card (Chest Details: OPEN NOW + OPEN WITH COINS) */
.card .card-actions .g-row { flex-wrap: wrap; justify-content: center; width: 100%; }
.card .card-actions .g-row > .btn { max-width: 100%; }
@media (max-height: 620px) { .card { max-height: calc(var(--vvh, 100dvh) - 16px); } .card header { padding: 8px 10px 6px; } .card h2 { font-size: clamp(24px, 7vmin, 36px); } .card .body { --px: 14px; --pb: 20px; padding: 10px var(--px) var(--pb); gap: 8px; } .card p { font-size: 15px; } }
/* the tutorial bubble never sits over a card's buttons on a short screen: it goes to the top */
/* (v0.20.1: guide bubble placement moved to guide.js place()) */
/* narrow phones: long card titles stay clear of the ✕ */
.card header { position: relative; }
.card header h2 { padding: 0 30px; }
@media (max-width: 360px) { .card h2 { font-size: clamp(20px, 6.8vw, 30px); -webkit-text-stroke-width: 5px; } }

/* ---- Classic GAME OVER + leaderboard (src/race/gameover.js; Figma "Leaderboard" 368:1187, 11 Nov) ----
   Sized in the mock's px: --u = CSS px per mock px (the play column's --m, smaller if the card wouldn't
   fit the screen's height). Text = the kit's Futura / Jost Bold, white, outside stroke --sw (mock px). */
.go-layer { position: fixed; inset: 0; z-index: 85; background: #000000b3; display: flex; align-items: center; justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); overflow-y: auto;
  --u: min(var(--m, calc(100vw / 1440)), calc((var(--vvh, 100vh) - 24px) / 1880), calc((100vw - 16px) / 860)); }
.go-in { display: flex; flex-direction: column; align-items: center; margin: auto; animation: goUp .35s cubic-bezier(.2, 1.2, .4, 1) .3s both; }
@keyframes goUp { from { transform: translateY(60px); opacity: 0 } }
.go-layer :where(.go-ev, .go-sc small, .go-num, .go-rw span, .lb-tab, .lb-rows li, .lb-you, .lb-badge, .go-b) {
  font: 700 calc(var(--u) * var(--fs, 32))/1 var(--font-ui, sans-serif); color: #fff; letter-spacing: 0; white-space: nowrap;
  -webkit-text-stroke: calc(var(--u) * var(--sw, 4) * 2) var(--sc, #000); paint-order: stroke fill; }
.go-ev { --fs: 56; --sw: 6; color: #fffa0c !important; margin-bottom: calc(var(--u) * 12); }
.go-title { width: calc(var(--u) * 854); height: calc(var(--u) * 165); margin-bottom: calc(var(--u) * 63); background: url("assets/ui/fig/go_title.311f14ee.webp") 0 0 / 100% 100% no-repeat;
  animation: goTitle .45s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes goTitle { from { transform: translateY(-30px) scale(.6); opacity: 0 } }
.go-card { position: relative; width: calc(var(--u) * 850); box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--u) * 47) calc(var(--u) * 50) calc(var(--u) * 68); border-radius: calc(var(--u) * 20);
  background: #01a7f9; box-shadow: 0 0 0 calc(var(--u) * 6) #000, inset 0 calc(var(--u) * -24) 0 #0259bc; }
.go-scores { display: grid; grid-template-columns: repeat(2, calc(var(--u) * 360)); gap: calc(var(--u) * 30); }
.go-sc { position: relative; display: flex; flex-direction: column; align-items: center; }
.go-num { --fs: 74.67; --sw: 7.47; width: 100%; height: calc(var(--u) * 130); display: grid; place-items: center; border-radius: calc(var(--u) * 20); background: #006cba; font-variant-numeric: tabular-nums; }
.go-sc.hi .go-num { color: #fffa0c; }
.go-sc small { --fs: 36; --sw: 5; margin-top: calc(var(--u) * 12); height: calc(var(--u) * 36); }
.go-new { position: absolute; top: calc(var(--u) * -16); right: calc(var(--u) * -16); padding: calc(var(--u) * 6) calc(var(--u) * 18); border-radius: 999px; background: #e8322e;
  border: calc(var(--u) * 5) solid #000; font: 700 calc(var(--u) * 28)/1 var(--font-ui, sans-serif); font-style: normal; color: #fff; animation: pulse 1s ease-in-out infinite; }
/* the run's rewards (not in the mock: kept so seeds / bond / mastery and "not counted" still show) */
.go-rw { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 24); max-width: calc(var(--u) * 750); }
.go-rw span { --fs: 28; --sw: 3.5; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 8) calc(var(--u) * 20); border-radius: 999px; background: #006cba; }
.go-rw span img { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.go-rw b { font-weight: inherit; }
/* the board: a white → sky panel, the tab bar on top, the rows scroll under the YOU bar */
.lb { position: relative; width: calc(var(--u) * 750); height: calc(var(--u) * 854); margin: calc(var(--u) * 33) 0 calc(var(--u) * 126); border-radius: calc(var(--u) * 20); background: linear-gradient(#fff, #9de4fd); }
.lb-tabs { position: absolute; left: calc(var(--u) * 15); top: calc(var(--u) * 15); width: calc(var(--u) * 720); height: calc(var(--u) * 140); display: grid; grid-template-columns: 1fr 1fr;
  border-radius: calc(var(--u) * 20); background: #22305233; }
.lb-tab { --fs: 40; --sw: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 16); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.lb-tab.on { margin: calc(var(--u) * 15); border-radius: calc(var(--u) * 15); background: linear-gradient(#5dc2fd, #2b8ce5); --dk: #0159a4; }
.lb-tab small { --fs: 20; display: none; font-size: calc(var(--u) * 20); -webkit-text-stroke: calc(var(--u) * 4) #0159a4; }
.lb-tab.on small { display: block; }
.lb-tab.on span { margin-top: calc(var(--u) * -4); }
.lb-rows { position: absolute; left: 0; right: 0; top: calc(var(--u) * 163); bottom: 0; margin: 0; padding: calc(var(--u) * 19) 0 calc(var(--u) * 48); list-style: none; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; border-radius: 0 0 calc(var(--u) * 20) calc(var(--u) * 20); }
.lb-rows::-webkit-scrollbar { display: none; }
.lb-rows li, .lb-you { display: grid; grid-template-columns: calc(var(--u) * 70) minmax(0, 1fr) calc(var(--u) * 260); align-items: center; }
.lb-rows li { --fs: 32; --sw: 4; height: calc(var(--u) * 70); margin-bottom: calc(var(--u) * 27); padding: 0 calc(var(--u) * 38) 0 calc(var(--u) * 29); column-gap: calc(var(--u) * 34); }
/* the outline is drawn outside the letters: room for it inside the clipping box (the margin keeps the text in place) */
.lb-rows li > span, .lb-you > span { overflow: hidden; text-overflow: ellipsis; text-align: left; padding: calc(var(--u) * 8) calc(var(--u) * 8); margin: 0 calc(var(--u) * -8); }
/* long names (the generated ones run to 14+ characters) step down before they need an ellipsis */
.lb-rows li > span.l { font-size: calc(var(--u) * 28); }
.lb-rows li > span.xl { font-size: calc(var(--u) * 25); }
.lb-rows li > b, .lb-you > b { height: calc(var(--u) * 70); display: grid; place-items: center; border-radius: calc(var(--u) * 13); background: #80cde752; font-weight: inherit; font-variant-numeric: tabular-nums; }
.lb-rows li.me > span { color: #fffa0c; }
.lb-rows li.me > b, .lb-you > b { background: #80cde7; }
.lb-rows li.lb-msg { display: block; height: auto; padding: calc(var(--u) * 120) calc(var(--u) * 30) 0; text-align: center; white-space: normal; line-height: 1.3; }
.lb-badge { --fs: 32; --sw: 3; width: calc(var(--u) * 70); height: calc(var(--u) * 80); align-self: start; margin-top: calc(var(--u) * -5); font-style: normal; text-align: center; line-height: calc(var(--u) * 80);
  background: url("assets/ui/fig/lb_rank.0061eb07.webp") 0 0 / 100% 100% no-repeat; }
.lb-badge.gold, .lb-badge.silver, .lb-badge.bronze { height: calc(var(--u) * 92); margin-top: calc(var(--u) * -4); line-height: calc(var(--u) * 78); }
.lb-badge.gold { background-image: url("assets/ui/fig/lb_gold.973b1f19.webp"); }
.lb-badge.silver { background-image: url("assets/ui/fig/lb_silver.d9e1e4b0.webp"); }
.lb-badge.bronze { background-image: url("assets/ui/fig/lb_bronze.1a19803e.webp"); }
.lb-badge[data-n="3"] { --fs: 25; } .lb-badge[data-n="4"] { --fs: 19; --sw: 2.5; } .lb-badge[data-n="5"] { --fs: 15; --sw: 2; }
.lb-you { --fs: 32; --sw: 4; position: absolute; left: calc(var(--u) * -15); top: calc(var(--u) * 830); width: calc(var(--u) * 780); height: calc(var(--u) * 110); box-sizing: border-box;
  padding: 0 calc(var(--u) * 53) 0 calc(var(--u) * 44); column-gap: calc(var(--u) * 42); box-shadow: 0 0 0 calc(var(--u) * 5) #008bd0; border-radius: calc(var(--u) * 20); background: linear-gradient(#fff, #9de4fd); }
.lb-you .lb-badge { align-self: center; margin-top: 0; }
.go-btns { display: grid; grid-template-columns: repeat(2, calc(var(--u) * 360)); gap: calc(var(--u) * 30); }
.go-card > .go-rw + .go-btns, .go-scores + .go-btns { margin-top: calc(var(--u) * 50); }
.go-b { --fs: 40; --sw: 5; height: calc(var(--u) * 130); padding: 0; border: 0; border-radius: calc(var(--u) * 15); cursor: pointer; touch-action: manipulation;
  opacity: .5; transition: opacity .2s, transform .06s, filter .06s; }
.go-layer.ready .go-b { opacity: 1; }
.go-b:active { transform: translateY(calc(var(--u) * 4)); filter: brightness(.92); }
.go-b:focus-visible, .lb-tab:focus-visible { outline: calc(var(--u) * 8) solid #fff; outline-offset: calc(var(--u) * 4); }
/* the mock's buttons: outside black stroke, a white band on top and a dark one at the bottom */
.go-b, .lb-tab.on { box-shadow: 0 0 0 calc(var(--u) * 5) #000, inset 0 calc(var(--u) * -10) 0 var(--dk), inset 0 calc(var(--u) * 5) 0 #fff; }
.go-b.blue { background: linear-gradient(#5dc2fd, #2b8ce5); --dk: #0159a4; }
.go-b.green { background: linear-gradient(#50de06, #0ec12a); --dk: #038623; }
.go-b.gold { background: linear-gradient(#f9e51a, #fc9407); --dk: #af3f01; }
.go-home { width: 100%; margin-top: calc(var(--u) * 30); }
.go-note { margin-top: calc(var(--u) * 20); color: #ffffffa0; font: 600 10px system-ui; }
@media (max-height: 560px) { .go-note { display: none; } }
/* v0.19.5: the Home bird hovers like flappybird.io (JS, src/home.js), so the CSS bob is off;
   the need bubble is one SVG: a true circle with a tail and a single unbroken outline */
.home-bird .hb-bob, .home-bird .hb-shadow { animation: none !important; will-change: transform; }
.need-bubble { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible; filter: drop-shadow(0 calc(var(--u) * 6) 0 #0005); }
.need-bubble::after, .need-bubble::before { display: none !important; }
.need-bubble .nb-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.need-bubble .nb-i { position: relative; z-index: 1; font-size: calc(var(--u) * 58); line-height: 1; transform: translate(2%, -6%); }
.need-bubble .nb-heart { width: 50%; height: auto; }
.need-bubble .nb-img { width: 56%; height: auto; transform: translate(3%, -7%); }

/* v0.20 (Rohit §3.4): placement-led race HUD: the big number is your place, pipes sit under it */
#s-race.placehud .race-score { font-size: clamp(34px, 8.5vmin, 66px); }
.race-pipes { position: absolute; left: 50%; top: calc(10px + clamp(40px, 10vmin, 80px) + 4px); transform: translateX(-50%); color: #fff; font-size: clamp(15px, 3.6vmin, 22px); -webkit-text-stroke: 4px #14161f; paint-order: stroke fill; background: #14161fb3; border-radius: 99px; padding: 2px 12px; white-space: nowrap; }

/* v0.20 (Rohit §2.1): Classic is a separate secondary action beside PLAY, with the personal best */
.home-classic { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 30%;
  background: #1f6fd6; border: calc(var(--u) * 7) solid #14161f; box-shadow: 0 calc(var(--u) * 10) 0 #14161f, inset 0 calc(var(--u) * -12) 0 #1652a6;
  color: #fff; font-family: inherit; cursor: pointer; padding: 0; }
.home-classic .hc-ico { font-size: calc(var(--u) * 54); line-height: 1; }
.home-classic b { font-size: calc(var(--u) * 30); -webkit-text-stroke: calc(var(--u) * 5) #14161f; paint-order: stroke fill; letter-spacing: .02em; }
.home-classic small { font-size: calc(var(--u) * 22); color: #ffd23a; -webkit-text-stroke: calc(var(--u) * 4) #14161f; paint-order: stroke fill; }
.home-classic:active { transform: translateY(calc(var(--u) * 6)); box-shadow: 0 calc(var(--u) * 4) 0 #14161f, inset 0 calc(var(--u) * -12) 0 #1652a6; }
.rs-care { display: flex; gap: 14px; justify-content: center; font-size: 15px; color: #fff; margin: 4px 0 2px; }
.rs-care b { color: #ffd23a; }
.rs-decide { display: flex; flex-direction: column; gap: 6px; text-align: center; background: #0f1a3c; border-radius: 14px; padding: 10px; width: 100%; }
.rs-decide > b { color: #ffd23a; font-size: 18px; } .rs-decide small { color: #cfe0ff; }
.rs-swap { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rs-swap .btn img { width: 26px; vertical-align: middle; margin-right: 4px; }
.rs-swap .btn.danger { background: #d9483b; }
.g-pill.berry { font-weight: 700; }

/* v0.20 Rohit care panel (§10): Berry / Basic Feed / Pet with previews, the care-chest checklist */
.nest-acts.rohit .nbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.05; }
.nest-acts.rohit .nbtn small { font-size: 11px; opacity: .9; font-weight: 400; }
.nest-acts.rohit .nbtn .nb-ico { font-size: 22px; }
.ns-bar.bond i { background: #ff5a8a; }
.nest-chest.rohit .cc-need { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.nest-chest.rohit .cc-q { all: unset; cursor: pointer; font-size: 13px; color: #ffd7a0; }
.nest-chest.rohit .cc-q.ok { color: #8ef05a; cursor: default; }
.nb-berry { font-size: 26px; }
.bt-tabs.two .bt-tab { flex: 1 1 50%; }

/* v0.20 (Rohit §19.4): the event token shop */
.ev-shop { background: #0f1a3c; border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.ev-shop small { color: #cfe0ff; }
.ev-boost { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ev-b { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 12px; border: 3px solid #14161f; background: #2a3a7a; color: #fff; font-family: inherit; cursor: pointer; }
.ev-b:disabled { opacity: .5; cursor: default; }
.ev-b b { font-size: 13px; font-weight: 400; } .ev-b small { font-size: 11px; color: #ffd23a; }
.pbar[hidden], .home-classic[hidden], .home-classic-tag[hidden] { display: none !important; }

/* v0.20.1 (Rani, iOS Safari): full-screen layers stop at the visible viewport (app.js sets --vvh
   from visualViewport), so their bottom buttons are never under a browser toolbar */
.modal, .go-layer, .arc-layer, .chestfx, .fake-ad { bottom: auto !important; height: var(--vvh, 100%); }
.arc-layer .rs { max-height: calc(var(--vvh, 100vh) - 32px); }

/* v0.20.1 (Jibin): the care chest's button stays inside its card at every width */
.nest-chest { grid-template-columns: auto minmax(0, 1fr) auto; overflow: hidden; }
.nest-chest > img { width: clamp(56px, 18vw, 80px); }
.nest-chest .cc-t { min-width: 0; }
.nest-chest > .btn { min-width: 0; max-width: min(34vw, 150px); padding: 8px clamp(8px, 2.6vmin, 16px); font-size: clamp(14px, 4vmin, 21px); white-space: nowrap; justify-self: end; }
@media (max-width: 360px) { .nest-chest { grid-template-columns: auto minmax(0, 1fr); } .nest-chest > .btn { grid-column: 1 / -1; max-width: none; width: 100%; } }
.nest-chest.rohit .cc-q { color: #4a2a06; font-weight: 700; } .nest-chest.rohit .cc-q.ok { color: #1f7a12; }

/* v0.20.1 (Zainab): the alert and compact pills are big enough to read and notice: Island
   type at 16-17 px, a gold rim, and a short pulse when one appears */
.perch { padding: 8px 8px 8px 18px; min-height: 44px; gap: 10px; background: #14161f; border: 3px solid #ffd23a; box-shadow: 0 4px 0 #0008; max-width: min(440px, calc(100vw - 16px)); top: calc(env(safe-area-inset-top, 0px) + 6px); }
.pc-ico { font-size: 20px; }
.pc-t { font-size: 16px; line-height: 1.2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pc-act { padding: 8px 14px; font-size: 16px; min-height: 36px; }
.perch.drop { animation: perchPulse 1.1s ease-out 1 .35s; }
@keyframes perchPulse { 0% { box-shadow: 0 4px 0 #0008, 0 0 0 0 #ffd23acc; } 70% { box-shadow: 0 4px 0 #0008, 0 0 0 14px #ffd23a00; } 100% { box-shadow: 0 4px 0 #0008, 0 0 0 0 #ffd23a00; } }
.nbtn.full { opacity: .55; filter: grayscale(.4); }


/* ---- v0.21 games hub opened from Home (event carousel) ---- */
.hub-layer { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #1b2550; height: var(--vvh, 100%); }
.hub-layer[hidden] { display: none; }
.hl-head { flex: none; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px; background: #1f74dc; border-bottom: 3px solid #14161f; }
.hl-head b { text-align: center; font: 400 26px var(--font); color: #fff; -webkit-text-stroke: 5px #14161f; paint-order: stroke fill; }
.hl-back { width: 48px; height: 48px; border-radius: 14px; border: 3px solid #14161f; background: #ffc531; color: #14161f; font: 400 34px/1 var(--font); cursor: pointer; box-shadow: 0 4px 0 #14161f; }
.hl-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 18px); }
.hl-body .ghub { max-width: 520px; margin: 0 auto; }
.gcard.focus { animation: hubFocus 1.2s ease-out 2; }
@keyframes hubFocus { 0%, 100% { box-shadow: 0 0 0 0 #ffd23a; } 40% { box-shadow: 0 0 0 6px #ffd23a; } }
.hl-body { --u: calc(min(100vw, 548px) / 1080); font-family: var(--font); color: #fff; }

/* ---- v0.21 simulated interstitial ---- */
.fake-ad.ia .ia-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: min(88vw, 380px); aspect-ratio: 9 / 14; border-radius: 22px; border: 4px solid #14161f; background: #f3ead2; color: #1b2550; font-family: var(--font); text-align: center; padding: 20px; box-sizing: border-box; }
.ia-box b { font: 400 30px var(--font); } .ia-box small { font: 700 13px system-ui, sans-serif; color: #4a5675; }
.ia-tag { position: absolute; left: 12px; top: 12px; padding: 2px 10px; border-radius: 6px; background: #ffc531; border: 2px solid #14161f; font: 400 14px var(--font); }
.ia-t { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1b2550; color: #fff; font: 400 18px var(--font); }
.ia-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #14161f; background: #fff; color: #14161f; font: 700 22px/1 system-ui; cursor: pointer; }
.ia-x[hidden], .ia-t[hidden] { display: none; }
.ad-h { margin: 14px 0 4px; font: 400 16px var(--font); color: #fff; }
/* v0.21.2 Admin → ECONOMY */
.ad-h { color: #1e2a4a; }
.ad-scroll { overflow-x: auto; }
.ad-tbl { width: 100%; border-collapse: collapse; font: 700 12px system-ui; }
.ad-tbl th, .ad-tbl td { padding: 4px 6px; border-bottom: 1px solid #e2d6b6; text-align: left; white-space: nowrap; }
.ad-tbl th { font: 400 13px var(--font); color: #1e2a4a; }
.ad-num, .ad-txt { font: 700 13px system-ui; padding: 4px 6px; border: 2px solid #e2d6b6; border-radius: 8px; background: #fff; color: #1e2a4a; }
.ad-txt { flex: 1; min-width: 180px; }
.ad-scroll { flex: none; } .ad-tbl .ad-num { width: 52px !important; }
.ad-tbl .ad-num { width: 62px !important; padding: 3px 4px; }

/* ===== 29 Oct screen-by-screen feedback ===== */
/* cards: the title stays pinned while the body scrolls under it */
.card header { position: sticky; top: 0; z-index: 4; }
/* Home: no shadow, the race's flight (home.js drives .hb-bob and .hb-wing), the name above the bird */
.home-bird canvas { animation: none; }
.home-bird .hb-wing { position: relative; width: 100%; transform-origin: 50% 62%; will-change: transform; }
.home-bird .hb-name { position: absolute; left: -20%; right: -20%; top: 4%; text-align: center; font: 400 calc(var(--u) * 40)/1 var(--font); color: #fff; letter-spacing: .03em;
  -webkit-text-stroke: calc(var(--u) * 8) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * 4) 0 var(--ink); white-space: nowrap; }
/* Home: clouds drifting at two depths (behind the tiles, the bird and the buttons) */
.home-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.home-sky .hc { position: absolute; left: 0; width: calc(var(--u) * 300 * var(--s, 1)); aspect-ratio: 220 / 100; opacity: .9; will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 100'%3E%3Cg fill='%23d6ecff'%3E%3Ccircle cx='58' cy='66' r='32'/%3E%3Ccircle cx='104' cy='50' r='40'/%3E%3Ccircle cx='152' cy='62' r='32'/%3E%3Crect x='30' y='66' width='160' height='32' rx='16'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='58' cy='60' r='30'/%3E%3Ccircle cx='104' cy='44' r='38'/%3E%3Ccircle cx='152' cy='56' r='30'/%3E%3Ccircle cx='184' cy='70' r='18'/%3E%3Crect x='30' y='60' width='160' height='30' rx='15'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: hcDrift 70s linear infinite; }
.home-sky .hc.far { opacity: .55; filter: blur(.5px); }
@keyframes hcDrift { from { transform: translateX(calc(var(--u) * 1150)); } to { transform: translateX(calc(var(--u) * -340)); } }
@media (prefers-reduced-motion: reduce) { .home-sky .hc { animation: none; display: none; } }
/* Home: an opening chest's slot ticks down with a ticking clock */
.home-stage .cslot.opening .cs-label .ico-svg { animation: csTick 1s ease-in-out infinite; transform-origin: 50% 54%; }
@keyframes csTick { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.home-stage .cslot.opening .cs-label { font-size: calc(var(--u) * 24); gap: calc(var(--u) * 6); font-variant-numeric: tabular-nums; }
/* Home: the event tile slides to the next event */
.lt-evclip { position: absolute; inset: 0; overflow: hidden; border-radius: 16%/12%; pointer-events: none; }
.lt-evclip[hidden] { display: none; }
/* Care: the bird's name walks with it; a full feed button is solid grey, never see-through */
.nest-bird .nest-name { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; padding: 2px 10px; border-radius: 99px; background: #14161fcc;
  font: 400 max(12px, calc(var(--u) * 32))/1.1 var(--font); color: #fff; letter-spacing: .03em; white-space: nowrap; pointer-events: none; }
.nest-acts.rohit .nbtn:disabled { opacity: 1; cursor: default; background: linear-gradient(#cdd2dc 0 50%, #b3b9c6 50%); color: #eef1f6; -webkit-text-stroke-color: #4b5263; box-shadow: 0 6px 0 #4b5263; border-color: #4b5263; }
.nest-acts.rohit .nbtn:disabled .nb-ico { filter: grayscale(1); opacity: .7; }
.nest-acts.rohit .nbtn:disabled:active { transform: none; }
/* Care: the daily care chest's progress bar (one segment per requirement) and the next step */
.nest-chest.rohit .cc-bar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 6px 0 4px; padding: 4px; border-radius: 99px; background: #6b3f0c; border: 3px solid #3b2208; }
.nest-chest.rohit .cc-bar i { height: 14px; border-radius: 99px; background: #3b2208; transition: background .3s; }
.nest-chest.rohit .cc-bar i.on { background: linear-gradient(#a6f27a, #3fae3b); }
.nest-chest.rohit .cc-bar b { position: absolute; right: -2px; top: 50%; transform: translate(100%, -50%); padding-left: 6px; font: 400 16px var(--font); color: #fff; -webkit-text-stroke: 3px #3b2208; paint-order: stroke fill; }
.nest-chest.rohit .cc-bar { margin-right: 38px; }
.nest-chest.rohit .cc-next { all: unset; cursor: pointer; display: block; font: 700 13px/1.25 system-ui, sans-serif; color: #4a2a06; text-decoration: underline; text-underline-offset: 2px; }
.nest-chest.rohit { grid-template-columns: auto minmax(0, 1fr); }
/* Flock: the count on its own row, the ? at the end of the filters, set bonus icons */
.birds-stage .sheet-head .sh-sub { margin: 0; font: 400 max(14px, calc(var(--u) * 36))/1 var(--font); letter-spacing: .04em; color: #fff; -webkit-text-stroke: max(3px, calc(var(--u) * 7)) var(--ink); paint-order: stroke fill; text-shadow: none; }
.birds-stage .sheet-head .sh-sub b { color: var(--gold); }
.birds-stage .sq.info.flock-how { position: absolute; z-index: 2; min-width: 0; min-height: 0; width: calc(var(--u) * 100); height: calc(var(--u) * 100); border-radius: calc(var(--u) * 24); border-width: max(3px, calc(var(--u) * 7)); font-size: max(18px, calc(var(--u) * 52)); display: grid; place-items: center; padding: 0; }
.birds-stage .sq.info.flock-how[hidden] { display: none; }
.flock-set h2 small { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.flock-set h2 small .fs-i { width: 16px; height: 16px; vertical-align: -3px; }
/* How birds work: two pictures, short facts, coin chips */
.how-birds .body { gap: 10px; }
.how-birds .hw-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.how-birds .hw-way { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 16px; background: #fff; border: 3px solid #14161f22; }
.how-birds .hw-way .hw-art { width: 64px; height: 52px; object-fit: contain; display: grid; place-items: center; }
.how-birds .hw-way img.hw-art { width: 112px; }
.how-birds .hw-way .hw-art canvas { width: 56px !important; height: auto !important; }
.how-birds .hw-way b { font: 400 18px var(--font); color: #2a86e0; letter-spacing: .02em; }
.how-birds .hw-way span { font: 700 13px/1.25 system-ui, sans-serif; color: #2b3150; }
.how-birds .hw-facts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.how-birds .hw-facts span { padding: 4px 10px; border-radius: 99px; background: #2a86e01a; font: 700 13px system-ui, sans-serif; color: #2b3150; }
.how-birds .hw-facts b { color: #2a86e0; }
.how-birds .hw-dupes { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.how-birds .hw-dupes small { width: 100%; text-align: center; }
.how-birds .hw-dup { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 12px; background: #fff; border: 3px solid #14161f22; font: 400 17px var(--font); color: #14161f; }
.how-birds .hw-dup em { font: 800 11px system-ui, sans-serif; font-style: normal; text-transform: uppercase; color: #5b6488; margin-right: 2px; }
.how-birds .hw-dup.r2 em { color: #7b4fd6; } .how-birds .hw-dup.r3 em { color: #d6861a; }
.how-birds .hw-i { width: 18px; height: 18px; }
/* Bird details: three smaller buttons on one row */
.card.navy .bd-acts { gap: 8px; }
.card.navy .bd-acts .btn.slim { font-size: clamp(14px, 4vw, 17px); padding: 8px 6px; min-height: 40px; border-width: 3px; }
.card.navy .bd-acts .btn.slim .g-chip { font-size: 11px; padding: 0 5px; }
/* Mastery: the bird in the title, the rule on top, the reward at the end of each bar */
.mastery-card h2 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mastery-card h2 .mc-bird canvas { display: block; width: 52px !important; height: auto !important; image-rendering: pixelated; }
.mastery-card .mc-rule { text-align: center; }
.mastery-card .mg-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: #ffffff12; border: 3px solid #0b1636; text-align: left; }
.mastery-card .mg-row .ttl { font-weight: 400; font-size: 17px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; color: #fff; }
.mastery-card .mg-row .sub { font: 700 12px/1.3 system-ui, sans-serif; color: #a9bbe8; }
.mastery-card .mg-row .g-prog { height: 12px; margin: 6px 0 0; }
.mastery-card .mg-act { margin-top: 8px; }
.mastery-card .mg-act .btn { min-height: 34px; padding: 4px 14px; font-size: 16px; }
.mastery-card .mg-reward { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 14px; background: radial-gradient(#7fd3ff, #2a86e0); border: 3px solid var(--ink); overflow: hidden; }
.mastery-card .mg-reward canvas { width: 46px !important; height: auto !important; image-rendering: pixelated; position: relative; z-index: 1; }
.mastery-card .mg-reward small { font: 800 9px/1.1 system-ui, sans-serif; color: #fff; text-align: center; text-shadow: 0 1px 0 #0b2a55; position: relative; z-index: 1; }
.mastery-card .mg-reward.trail::before { content: ''; position: absolute; left: -6%; right: 52%; top: 34%; height: 12px; border-radius: 999px; background: linear-gradient(90deg, transparent, #ff7a3dcc, #ffd23a); }
.mastery-card .mg-row.progress .mg-reward { filter: saturate(.55) brightness(.9); }
.mastery-card .mg-ok { position: absolute; right: 3px; top: 3px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: #2f9a1f; color: #fff; font: 900 12px/18px system-ui; font-style: normal; text-align: center; border: 2px solid var(--ink); }
/* Pinball: the SHIELD and RAID bumpers are tappable (an invisible round button over each) */
#hits .bumper-hit { position: absolute; pointer-events: auto; border-radius: 50%; border: 0; background: none; padding: 0; cursor: pointer; color: transparent; font-size: 0; }
#hits .bumper-hit:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
/* Board rewards: one icon row per reward */
.board-rewards .br-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.board-rewards .br-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 14px; background: #fff; border: 3px solid #14161f1f; text-align: left; }
.board-rewards .br-ico { width: 40px; height: 40px; display: grid; place-items: center; }
.board-rewards .br-ico img, .board-rewards .br-ico canvas { max-width: 40px; max-height: 40px; }
.board-rewards .br-row b { font: 400 17px var(--font); color: #14161f; letter-spacing: .02em; }
.board-rewards .br-row span { display: inline-flex; align-items: center; gap: 4px; font: 400 17px var(--font); color: #2a86e0; white-space: nowrap; }
.board-rewards .br-row span img { width: 20px; height: 20px; }
/* Raid result: the escaped Flappy line has no frame */
.raid-result .raid-petwin { background: none; border: 0; padding: 0; justify-content: center; }
/* Base: the status band without its world chip; the sheet's header carries the world, the count and Activity */
.tb-band .tb-world[hidden] { display: none; }
.tb-band:has(.tb-world[hidden]) { grid-template-columns: auto calc(var(--k) * 3) auto; justify-content: start; }
.base-sheet .wb-head { align-items: center; }
.base-sheet .wb-head .wb-title { all: unset; cursor: pointer; flex: 1; min-width: 0; font: 400 calc(var(--sk) * 19)/1 var(--font); color: #1b2550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.base-sheet .wb-head .wb-title::after { content: ' ›'; color: #1f74dc; }
.base-sheet .wb-foot .base-actwrap { position: static; flex: none; display: flex; }
.base-sheet .wb-foot .base-act { width: auto; height: calc(var(--sk) * 30); flex-direction: row; gap: calc(var(--sk) * 4); padding: 0 calc(var(--sk) * 10) 0 calc(var(--sk) * 6); border-radius: calc(var(--sk) * 99); }
.base-sheet .wb-foot .base-act .ha-ico svg { width: calc(var(--sk) * 20); height: calc(var(--sk) * 20); }
.base-sheet .wb-foot .base-act b { font-size: calc(var(--sk) * 12); }
.base-sheet .wb-foot .base-act .hm-badge { top: -8px; right: -8px; }
.base-sheet .wb-goal[onclick], .base-sheet .wb-goal:has(b) { cursor: pointer; }
.base-sheet .bcards[hidden] { display: none; }
/* Base: the price is inside the BUILD / REPAIR button */
.lcard .bs-cta-main .bs-cost { display: inline-flex; align-items: center; gap: calc(var(--sk) * 4); margin-left: calc(var(--sk) * 6); padding: calc(var(--sk) * 2) calc(var(--sk) * 10) calc(var(--sk) * 2) calc(var(--sk) * 4); border-radius: calc(var(--sk) * 99); background: #14161f33; font-size: .86em; }
.lcard .bs-cta-main .bs-cost img { width: calc(var(--sk) * 22); }
.base-sheet .wb-row { display: flex; align-items: center; gap: calc(var(--sk) * 8); }
.base-sheet .wb-row .wb-bar { flex: 1; min-width: 0; }
.base-sheet .wb-row .wb-count { flex: none; font: 400 calc(var(--sk) * 14)/1 var(--font); color: #1f74dc; }
/* Store (30 Oct): bigger packs are bigger piles; the starter bundle shows its contents; trails show */
.spack .spile, .sf-item .spile { position: relative; display: block; flex: none; width: calc(var(--u) * 124); height: calc(var(--u) * 124); }
.spack .spile img, .sf-item .spile img { position: absolute; object-fit: contain; filter: drop-shadow(0 2px 0 #0003); }
.spack .spile.t2::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(#fff6b8 0, #fff6b800 68%); }
.sfeat.starter .sf-art.sunburst { position: relative; display: grid; place-items: center; width: calc(var(--u) * 250); aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #fff7 0 9deg, #fff0 9deg 18deg), radial-gradient(#fff6c2 0, #ffcf3a 55%, #ff9d00 100%); box-shadow: inset 0 0 0 3px #14161f33; }
.sfeat.starter .sf-art.sunburst canvas { position: relative; }
.sfeat.starter .sf-look { position: absolute; bottom: calc(var(--u) * -6); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 400 max(10px, calc(var(--u) * 24)) var(--font); font-style: normal; letter-spacing: .02em; color: #fff; background: #1b2550; padding: 2px 9px; border-radius: 99px; }
.sfeat.starter .sf-items { display: flex; align-items: center; gap: 6px; }
.sfeat.starter .sf-item { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 10px 5px; border-radius: 14px; background: #fff6; border: 2px solid #14161f2a; }
.sfeat.starter .sf-item .spile { width: calc(var(--u) * 100); height: calc(var(--u) * 100); }
.sfeat.starter .sf-item b { font: 400 max(17px, calc(var(--u) * 42)) / 1 var(--font); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.sfeat.starter .sf-plus { font: 400 24px var(--font); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.sfeat.starter .sf-once { font: 700 max(11px, calc(var(--u) * 22)) system-ui, sans-serif; color: #6a3d00; }
.spack.cos .cos-art { height: auto; min-height: calc(var(--u) * 110); }
.spack.cos .cos-art canvas.trail-art { display: block; max-width: 100%; height: auto !important; }
/* Rewards & Odds (30 Oct): icon rows like Board rewards, with the chance in a pill */
.odds-card .br-row { grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 8px; padding: 5px 10px; }
.odds-card .br-row b { font-size: 16px; }
.odds-card .br-row span { font-size: 16px; }
.odds-card .br-pct { font: 400 15px var(--font); font-style: normal; color: #fff; background: #2a86e0; border: 2px solid #14161f; border-radius: 99px; padding: 1px 8px; }
.odds-card .od-h { font: 400 16px var(--font); color: #14161f; text-align: center; margin-top: 4px; }
.odds-card .od-chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.odds-card .od-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 99px; background: #fff; border: 3px solid #14161f1f; }
.odds-card .od-chip canvas { width: 30px !important; height: 30px !important; }
.odds-card .od-chip b { font: 400 14px var(--font); color: #14161f; }
.odds-card .od-chip em { font: 400 14px var(--font); font-style: normal; color: #2a86e0; }
.odds-card .od-chip:last-child { padding-left: 10px; }
/* Care (30 Oct): Belly and Spark in two equal halves, label beside its bar */
.ns-row.ns-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ns-two .ns-stat { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ns-two .ns-lab { white-space: nowrap; }
.ns-two .ns-bar { min-width: 36px; }
/* Race (30 Oct): the top bar and the roster at the screen's top on tall phones (the stage clips only
   its sides now, so they can sit above it) */
.race-stage { overflow: visible; overflow-x: clip; }
.race-top { top: calc(10px + env(safe-area-inset-top, 0px) - var(--race-lift, 0px)); }
.race-roster { top: calc(74px + env(safe-area-inset-top, 0px) - var(--race-lift, 0px)); }
/* Home alert pill (30 Oct): sized to its text (left: 50% capped it at half the screen: "Your gol…"),
   below the top bar (top set by perch.js), fading in rather than dropping across the HUD */
.perch { width: max-content; transform: translate(-50%, 0); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.perch.drop { opacity: 1; transform: translate(-50%, 0); }
.perch.up { opacity: 0; transform: translate(-50%, -12px); }

/* roby-island: prototype v0.22–v0.24 additions */
/* v0.22 Classic EASY · MEDIUM · HARD: three Home buttons + the pre-flight screen (src/levelsui.js) */
.home-classic.lv3 { border-radius: calc(var(--u) * 30); border-width: calc(var(--u) * 6); box-shadow: 0 calc(var(--u) * 8) 0 #14161f, inset 0 calc(var(--u) * -10) 0 #0003; gap: 0; }
.home-classic.lv3 b { font-size: calc(var(--u) * 34); line-height: 1; }
.home-classic.lv3 small { font-size: calc(var(--u) * 20); line-height: 1.1; }
.home-classic.lv-easy { background: #3fbf4a; }
.home-classic.lv-medium { background: #1f6fd6; }
.home-classic.lv-hard { background: #e0453a; }
.home-classic.lv3:active { transform: translateY(calc(var(--u) * 5)); box-shadow: 0 calc(var(--u) * 3) 0 #14161f, inset 0 calc(var(--u) * -10) 0 #0003; }
.home-classic-tag { position: absolute; display: grid; place-items: center; border-radius: calc(var(--u) * 23); background: #14161f; color: #ffd23a;
  font-size: calc(var(--u) * 26); letter-spacing: .04em; pointer-events: none; }

.arc-lv .rs.lv { width: min(460px, 100%); gap: 8px; text-align: left; align-items: stretch; }
.arc-lv .rs.lv .rs-place { text-align: center; font-size: clamp(28px, 8.5vmin, 42px); }
.arc-lv .rs.lv .rs-sub { text-align: center; font-size: 14px; }
.lv-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lv-tab { font: inherit; font-size: 18px; color: #fff; border: 3px solid #14161f; border-radius: 12px; padding: 6px 0; cursor: pointer; opacity: .55; -webkit-text-stroke: 3px #14161f; paint-order: stroke fill; }
.lv-tab.t-easy { background: #3fbf4a; } .lv-tab.t-medium { background: #1f6fd6; } .lv-tab.t-hard { background: #e0453a; }
.lv-tab.on { opacity: 1; box-shadow: 0 0 0 3px #ffd23a; }
.lv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lv-kpis > div { background: #0b1430; border-radius: 12px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; }
.lv-kpis b { font-size: 24px; color: #ffd23a; line-height: 1.1; }
.lv-kpis small { font: 600 11px system-ui, sans-serif; color: #cfdcff; }
.lv-for { font: 600 12px system-ui, sans-serif; color: #cfdcff; text-align: center; margin-top: -2px; }
.lv-prev canvas { width: 100%; height: auto; border-radius: 12px; border: 3px solid #14161f; display: block; }
.lv-prev small { font: 600 11px system-ui, sans-serif; color: #cfdcff; display: block; text-align: center; margin-top: 3px; }
.lv-prev .sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-left: 4px; }
.lv-easy .sw.lvl { background: #3fbf4a; } .lv-medium .sw.lvl { background: #2f8fe0; } .lv-hard .sw.lvl { background: #e0453a; }
.lv-prev .sw.prod { border: 2px dashed #fff; }
.lv-h { font-size: 17px; color: #ffd23a; margin-top: 4px; letter-spacing: .03em; }
.lv-h small { font: 600 11px system-ui, sans-serif; color: #9fb4e8; letter-spacing: 0; margin-left: 6px; }
.lv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: #0b1430; border-radius: 10px; padding: 5px 8px; }
.lv-row.edited { box-shadow: inset 3px 0 0 #ffd23a; }
.lv-l b { font-size: 14px; display: block; line-height: 1.15; }
.lv-l small { font: 500 11px system-ui, sans-serif; color: #9fb4e8; display: block; line-height: 1.25; }
.lv-c { display: flex; align-items: center; gap: 4px; }
.lv-st { width: 30px; height: 30px; border-radius: 9px; border: 2px solid #14161f; background: #2a3c78; color: #fff; font: 700 18px system-ui, sans-serif; cursor: pointer; padding: 0; }
.lv-v { min-width: 52px; text-align: center; font-size: 15px; } .lv-v.chg { color: #ffd23a; }
.lv-tog { min-width: 64px; height: 30px; border-radius: 9px; border: 2px solid #14161f; background: #2a3c78; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.lv-tog.on { background: #3fbf4a; }
.lv-c select { font: 600 13px system-ui, sans-serif; border-radius: 8px; padding: 4px; max-width: 46vw; }
.lv-grid { width: 100%; border-collapse: separate; border-spacing: 3px; font-family: system-ui, sans-serif; }
.lv-grid th, .lv-grid td { background: #0b1430; border-radius: 8px; padding: 4px 3px; text-align: center; font-size: 12px; }
.lv-grid thead th { font-size: 11px; color: #9fb4e8; }
.lv-grid tbody th { text-align: left; font-size: 11px; line-height: 1.2; }
.lv-grid small { display: block; font-size: 10px; color: #9fb4e8; font-weight: 500; }
.lv-grid td b { font-size: 13px; }
.lv-grid .cur { background: #1d2f66; } .lv-grid thead .cur { color: #ffd23a; }
.lv-grid .live { background: #2a1f00; } .lv-grid .live b { color: #ffd23a; }
.lv-grid tr.ref th { box-shadow: inset 3px 0 0 #ffd23a; }
.lv-note { font: 500 11px system-ui, sans-serif; color: #9fb4e8; text-align: center; }
.lv-eval, .lv-reset { font: inherit; font-size: 14px; color: #fff; background: #2a3c78; border: 2px solid #14161f; border-radius: 10px; padding: 7px; cursor: pointer; }
.lv-eval:disabled, .lv-st:disabled, .lv-tab:disabled { opacity: .45; cursor: default; }
.lv-tune { background: #0b1430; border-radius: 12px; padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.lv-tune summary { cursor: pointer; font-size: 15px; color: #ffd23a; }
.lv-tune p { font: 500 12px system-ui, sans-serif; color: #cfdcff; margin: 4px 0; }
.lv-tune .lv-row { background: #14214a; margin-top: 4px; }
.lv-levers { display: grid; gap: 4px; margin: 4px 0; } .lv-levers > div { background: #14214a; border-radius: 10px; padding: 5px 8px; }
.lv-levers b { font-size: 13px; } .lv-levers small { display: block; font: 500 11px system-ui, sans-serif; color: #9fb4e8; }
.lv-tune .lv-eval { margin-top: 6px; width: 100%; }
.lv-prog { position: relative; height: 22px; background: #0b1430; border-radius: 11px; overflow: hidden; }
.lv-prog i { position: absolute; inset: 0 auto 0 0; background: #3fbf4a; transition: width .15s; }
.lv-prog span { position: relative; display: block; text-align: center; font: 600 11px/22px system-ui, sans-serif; color: #fff; }
.arc-lv .rs-actions { position: sticky; bottom: -24px; background: #0f1a3c; padding-bottom: 6px; }
/* roby-island (8 Nov): Admin → MINI GAMES */
.ad-game .ad-gico, .ad-row .ad-gico { font-size: 22px; width: 28px; text-align: center; }
.ad-sel { flex: 0 1 auto; min-width: 0; max-width: 190px; }
.ad-log { margin-top: 8px; font: 12px/1.5 ui-monospace, monospace; background: #0b1530; color: #cfe3ff; border-radius: 8px; padding: 8px; max-height: 220px; overflow: auto; }