/* 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.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.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.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; }
.perch-mini { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 4px); z-index: 70; background: #000; color: #fff; border: 0; border-radius: 99px; padding: 5px 16px; font: 400 13px var(--font); cursor: pointer; white-space: nowrap; }
.perch-mini[hidden] { display: none; }

/* ===== 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; }
.play-sub.race { background: transparent; border-color: transparent; color: transparent; -webkit-text-stroke: 0; }
.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; }