/* ═══════════════════════════════════════════════════════════════
   POLISH LAYER — loaded last, on top of kdl.css.
   One motion language for the whole app (same easings, same timings),
   soft layered shadows instead of flat drops, real press / hover /
   focus feedback on everything tappable, and pictures that fade in
   instead of popping. Nothing here changes layout — only finish.
   Anything that moves is transform / opacity only, so it stays at
   60 fps on a phone, and it all switches off under
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* one set of curves: "out" for things arriving, "spring" for things the finger touched */
  --ease-out: cubic-bezier(.22, .9, .28, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --t-tap: 110ms; --t-fast: 170ms; --t: 260ms; --t-slow: 420ms;
  /* layered shadows read as real depth; a single hard drop reads as a sticker */
  --e-1: 0 1px 2px rgba(31,42,92,.08), 0 2px 8px rgba(31,42,92,.08);
  --e-2: 0 2px 4px rgba(31,42,92,.08), 0 8px 20px rgba(31,42,92,.12);
  --e-3: 0 4px 10px rgba(31,42,92,.10), 0 18px 44px rgba(31,42,92,.18);
  --e-4: 0 8px 20px rgba(31,42,92,.14), 0 34px 80px rgba(31,42,92,.26);
  --ring: 0 0 0 3px #fff, 0 0 0 6px rgba(94,140,255,.9);
}

/* ── buttons: lift on hover, real push on press, visible keyboard focus ── */
.btn, .round, .x-btn, .card, .hud-btn, .dock button, .tabbar button, .ib-q, .chip {
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              filter var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.btn:hover:not([disabled]) { transform: translateY(-2px); }
.btn:active:not([disabled]) { transform: translateY(2px) scale(.985); transition-duration: var(--t-tap); }
.round:hover, .x-btn:hover { transform: translateY(-2px) scale(1.03); }
.round:active, .x-btn:active { transform: translateY(1px) scale(.96); transition-duration: var(--t-tap); }
:where(button, a, input, select, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: 12px; }

/* ── cards: a gentle rise, and the picture is what moves, not the box ── */
.card { will-change: transform; }
.card:hover { transform: translateY(-4px); box-shadow: var(--e-3); }
.card:active { transform: translateY(-1px) scale(.995); transition-duration: var(--t-tap); }
.card .thumb { overflow: hidden; }
.card .thumb img, .card .thumb > picture > img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--ease-out); }
.card:hover .thumb img { transform: scale(1.045); }

/* ── pictures fade in when they decode: no pop-in, no half-drawn covers ── */
img { transition: opacity var(--t) var(--ease-out); }
img[data-fade] { opacity: 0; }
img[data-fade].ready, img[data-fade][data-loaded] { opacity: 1; }
/* a quiet shimmer stands in while a cover loads */
.skel, .thumb:empty:not([style*="url("]) { position: relative; overflow: hidden; background: rgba(31,42,92,.06); }
.skel::after, .thumb:empty:not([style*="url("])::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
  transform: translateX(-100%); animation: skelSweep 1.5s var(--ease-in-out) infinite; }
@keyframes skelSweep { to { transform: translateX(100%); } }

/* ── overlays and panels arrive instead of appearing ── */
.overlay { animation: ovIn var(--t) var(--ease-out); }
@keyframes ovIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; } }
.overlay > .panel { animation: panelIn var(--t-slow) var(--ease-spring); box-shadow: var(--e-4); }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
.panel { scrollbar-width: thin; scrollbar-color: rgba(31,42,92,.28) transparent; overscroll-behavior: contain; }
.panel::-webkit-scrollbar { width: 10px; height: 10px; }
.panel::-webkit-scrollbar-thumb { background: rgba(31,42,92,.22); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
.panel::-webkit-scrollbar-thumb:hover { background: rgba(31,42,92,.36); background-clip: padding-box; }
.panel::-webkit-scrollbar-track { background: transparent; }

/* ── toasts slide down from the HUD instead of blinking on ── */
.toast { animation: toastIn var(--t-slow) var(--ease-spring); box-shadow: var(--e-3); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } }

/* ── the reader: page chrome fades as one, and the words breathe ── */
.ib-top, .ib-bottom, .ib-edge { transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out); }
.ib.calm .ib-edge { transform: scale(.9); }
.ib-page { backface-visibility: hidden; }

/* ── HUD: hover states that do not shove the layout around ── */
.dock button:hover, .tabbar button:hover { transform: translateY(-2px); }
.dock button:active, .tabbar button:active { transform: translateY(1px) scale(.97); transition-duration: var(--t-tap); }

/* ── crisper art: never let a portrait or cover stretch ── */
.portrait img, .avatar img, .friend img, .ib-cover-art, .thumb { background-position: center; background-size: cover; }
.portrait img, .avatar img, .friend img { object-fit: cover; }

/* ── someone who asked for calm gets calm ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHONE HUD — at 375 px the desktop HUD ran out of room: the profile
   card sat under the star/coin pills, the minimap hung off the right
   edge and the five-tab bar was wider than the screen (Home and Shop
   were unreachable). Everything below is layout only, phones only.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* top-left: a compact badge that cannot grow into the pills */
  .hud-tl { max-width: 46vw; }
  .h-profile { padding: 4px 12px 4px 4px; gap: 8px; border-width: 2px; }
  .h-ava { width: 40px; height: 40px; border-width: 2px; box-shadow: 0 0 0 2px #ffc526; }
  .h-name b { font-size: 15px; max-width: 24vw; }
  .place-pill { margin-left: 44px; padding: 4px 10px; font-size: 13px; }

  /* top-right: icon-sized pills, no labels */
  .hud-tr { gap: 5px; max-width: 52vw; justify-content: flex-end; flex-wrap: nowrap; }
  .h-pill { height: 38px; padding: 0 10px 0 4px; border-width: 2px; gap: 4px; }
  .h-pill b { font-size: 15px; min-width: 14px; }
  .h-pill.cur .kic { width: 24px; height: 24px; }
  .h-pill.rewards b { display: none; }
  .h-pill.rewards { padding: 0 8px; }
  .h-round { width: 38px; height: 38px; border-width: 2px; }
  .h-round .kic { width: 20px; height: 20px; }

  /* minimap: smaller, clear of the pills */
  .h-map { width: 92px; height: 92px; right: 8px; top: calc(56px + var(--safe-t)); padding: 4px; }
  .h-north { width: 20px; height: 20px; font-size: 11px; line-height: 20px; top: -6px; }
  .h-expand { width: 30px; height: 30px; right: -4px; bottom: 0; border-radius: 9px; }
  .h-expand .kic { width: 14px; height: 14px; }

  /* left dock: a compact column that clears the joystick */
  .h-dock { left: 8px; top: auto; bottom: calc(176px + var(--safe-b)); transform: none; gap: 7px; }
  .h-dock button { width: 52px; height: 52px; border-radius: 15px; gap: 1px; }
  .h-dock .kic { width: 24px; height: 24px; }
  .h-dock span { font-size: 9px; letter-spacing: 0; }

  /* tab bar: five tabs that always fit, edge to edge */
  .h-tabs { left: 8px; right: 8px; transform: none; padding: 4px; gap: 0; border-radius: 20px; border-width: 2px;
    display: flex; justify-content: space-between; bottom: calc(6px + var(--safe-b)); }
  .h-tabs button { flex: 1 1 0; width: auto; min-width: 0; height: 52px; border-radius: 14px; gap: 1px; }
  .h-tabs .kic { width: 26px; height: 26px; }
  .h-tabs button span { font-size: 11px; }
  .h-tabs button + button::before { top: 12px; bottom: 12px; }

  /* controls sit above the tab bar, not on top of it */
  .joystick { left: 10px; bottom: calc(72px + var(--safe-b)); width: 116px; height: 116px; border-width: 3px; }
  .stick { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .h-actions { right: 8px; bottom: calc(66px + var(--safe-b)); transform: scale(.72); transform-origin: bottom right; }
}
/* short landscape phones: keep the tab bar off the joystick too */
@media (max-height: 460px) {
  .h-dock { bottom: calc(96px + var(--safe-b)); }
  .h-tabs button { height: 48px; }
  .joystick { width: 104px; height: 104px; bottom: calc(60px + var(--safe-b)); }
}

/* v4.1 — "fit" thumbnails: the whole picture, never cropped, on a blurred copy of itself */
.card .thumb.fit { position: relative; overflow: hidden; background: #e9eefc; }
.card .thumb.fit.tall { aspect-ratio: 4/5; }
.card .thumb.fit > i { position: absolute; inset: -18px; background: center/cover no-repeat; filter: blur(16px) saturate(1.15) brightness(1.05); opacity: .85; }
.card .thumb.fit > img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }

/* ═══════════════════════════════════════════════════════════════
   v4.19 additions — a lighter frosted HUD rail, a tab-bar indicator,
   empty states, the first-visit guide, and phone fixes between 481 and
   900 px (the ≤480 phone layout above stays as it is).
   ═══════════════════════════════════════════════════════════════ */

/* ── press feedback on the HUD and the small game buttons (the cards / .btn are handled above) ── */
.h-dock button:active, .h-tabs button:active, .h-pill:active, .h-round:active, .k-btn:active, .tp-card:active, .h-act:active, .act-btn:active, .qz-a:active, .tabs button:active {
  transform: scale(.94) !important; transition: transform .08s !important; }
.tp-card, .k-btn, .tabs button, .qz-a { transition: transform .15s, box-shadow .15s, filter .15s; }
.tp-card:hover { box-shadow: 0 8px 0 rgba(31,42,92,.12), 0 18px 32px rgba(31,42,92,.18); }

/* ── HUD (tablets and up): a lighter frosted rail on the left, a tab bar with an active pill ── */
@media (min-width: 481px) {
  .h-dock { gap: 0; padding: 8px; border-radius: 28px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 3px solid #fff; box-shadow: 0 6px 0 rgba(31,42,92,.12), 0 14px 30px rgba(31,42,92,.16); pointer-events: auto; }
  .h-dock button { width: 74px; height: 72px; border-radius: 20px; gap: 2px; background: transparent; border: 0; box-shadow: none; }
  .h-dock button + button { margin-top: 2px; }
  .h-dock button:hover { transform: none; background: rgba(47,124,240,.1); }
  .h-dock span { color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: .1px; }
  .h-dock .kic, .h-dock i[data-ic] { width: 34px; height: 34px; }
  .h-dock .dot { top: 8px; right: 10px; box-shadow: 0 0 0 2px rgba(255,79,109,.25); animation: dotPulse 1.6s infinite; }
  .h-tabs { padding: 7px; gap: 2px; }
  .h-tabs button { transition: background .2s, transform .15s; }
  .h-tabs button + button::before { display: none; }
  .h-tabs button.on { background: linear-gradient(180deg, #fff, #e9f2ff); box-shadow: inset 0 0 0 2px #cfe1ff, 0 4px 0 rgba(47,124,240,.12); transform: translateY(-2px); }
  .h-tabs button.on::after { content: ''; position: absolute; left: 50%; bottom: 7px; width: 22px; height: 4px; border-radius: 4px; background: #2f7cf0; transform: translateX(-50%); }
  .h-tabs button:hover { background: rgba(47,124,240,.08); }
}
@keyframes dotPulse { 50% { transform: scale(1.18); } }

/* ── top-left: place pill reads as a location, not a button ── */
.place-pill { font-weight: 800; letter-spacing: .1px; }
.h-profile { transition: transform .15s; }
.h-profile:hover { transform: translateY(-2px); }

/* ── stars and coins: a little glow when they change ── */
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.14) rotate(-2deg); } 100% { transform: scale(1); } }
.h-pill.cur.bump { box-shadow: var(--rim), 0 0 0 6px rgba(255,201,60,.35); }

/* ── panel headers: a thin accent line under the title block ── */
.panel > h2 + .sub, .panel .sub { color: var(--ink-2); }
.panel .tabs button { border-radius: 999px; }
.panel .tabs button.on { box-shadow: 0 3px 0 rgba(31,42,92,.12); }

/* ── cards: titles never clip ── */
.card .body b { display: block; line-height: 1.15; overflow-wrap: anywhere; }

/* ── empty states ── */
.empty-state { display: grid; place-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--ink-2); }
.empty-state .es-ic { font-size: 46px; line-height: 1; }
.empty-state b { color: var(--ink); font-family: var(--font-display); font-size: 20px; }

/* ── small tablets: the rail shrinks to icons, the tab bar stays reachable ── */
@media (min-width: 481px) and (max-width: 760px) {
  .h-dock { padding: 6px; border-radius: 22px; transform: translateY(-30%); }
  .h-dock button { width: 56px; height: 56px; border-radius: 16px; }
  .h-dock span { display: none; }
  .h-dock .kic, .h-dock i[data-ic] { width: 30px; height: 30px; }
  .h-tabs button.on::after { bottom: 5px; width: 18px; }
}

/* ── first-visit guide (js/ui/guide.js): a soft spotlight + a speech card ── */
.guide-dim { position: fixed; inset: 0; z-index: 58; pointer-events: none; }
.guide-dim .g-ring { position: absolute; border-radius: 30px; box-shadow: 0 0 0 9999px rgba(20, 24, 60, .55), 0 0 0 6px rgba(255,227,107,.95), 0 0 40px rgba(255,227,107,.7); transition: all .35s cubic-bezier(.2,.9,.3,1.1); }
.guide-card { position: fixed; z-index: 59; width: min(360px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: 0 10px 0 rgba(31,42,92,.14), 0 24px 50px rgba(31,42,92,.35); border: 3px solid #ffe36b; animation: popIn .32s cubic-bezier(.2,.9,.3,1.15); transition: left .35s, top .35s; }
.guide-card .gc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.guide-card .gc-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: linear-gradient(180deg, #fff3c4, #ffd65c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.1); flex: none; }
.guide-card h3 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.guide-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.guide-card .gc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.guide-card .gc-dots { display: flex; gap: 5px; }
.guide-card .gc-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dfe5f5; }
.guide-card .gc-dots i.on { background: #2f7cf0; width: 18px; border-radius: 8px; }
.guide-card .btn { font-size: 16px; padding: 9px 18px; }
.guide-card .btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }

/* ── phones: the tab bar always fits, the profile pill stays out of the way ── */
@media (min-width: 481px) and (max-width: 900px), (min-width: 481px) and (max-height: 620px) { .hud .h-tabs button { width: 76px; height: 60px; } }
@media (min-width: 481px) and (max-width: 640px) {
  .hud .h-tabs { left: 10px; right: 10px; width: auto; transform: none; padding: 5px; gap: 0; }
  .hud .h-tabs button { flex: 1 1 0; width: auto; min-width: 0; height: 58px; }
  body.basic .hud .h-tabs { left: 50%; right: auto; transform: translateX(-50%); }
  body.basic .hud .h-tabs button { flex: none; width: 112px; }
  .hud .h-dock { padding: 5px; border-radius: 20px; }
  .hud .h-dock button { width: 50px; height: 50px; border-radius: 14px; }
  .hud .h-dock .kic, .hud .h-dock i[data-ic] { width: 28px; height: 28px; }
}
/* ── small phones: panel titles clear the close button, Today rows breathe ── */
@media (max-width: 420px) {
  .panel { padding: 20px 14px 18px; }
  .panel h2, .todaypanel .td-head h2 { font-size: 24px; }
  .todaypanel .td-head { padding-right: 44px; text-align: left; }
  .td-card { padding: 12px 12px 14px; }
  .td-cal { gap: 5px; } .td-day { padding: 6px 2px; border-radius: 12px; } .td-day span { font-size: 22px; }
  .td-m { flex-wrap: wrap; padding: 10px; } .td-m > div { flex: 1 1 120px; } .td-m .btn { margin-left: auto; }
  .td-mic { width: 36px; font-size: 26px; }
}

/* ── the client (basic) link: no sign-in form, one start button, no empty side rail ── */
body.basic #authForm > :not(#authTitle):not(#authSub) { display: none !important; }
body.basic #authTitle { margin-bottom: 6px; }
body.basic .auth-extra { margin-top: 22px; }
body.basic .auth-guest { padding: 16px 38px; font-size: 19px; color: #2b2300; background: linear-gradient(180deg, #ffe562, #f5c400); border: 0; box-shadow: 0 6px 0 #b98d00, 0 14px 30px rgba(0,0,0,.35); }
body.basic .auth-guest:hover { background: linear-gradient(180deg, #fff0a0, #ffd21a); transform: translateY(-2px); }
body.basic .auth-guest:active { transform: translateY(3px); box-shadow: 0 3px 0 #b98d00; }
body.basic #authForm.hidden { display: block !important; }   /* the heading shows while the world loads, the form never does */

/* ── kart race on phones: steering under the left thumb, pedals under the right, no speedo ── */
@media (max-width: 640px) {
  .race-hud .rh-touch { left: 10px; right: 10px; bottom: calc(14px + var(--safe-b)); gap: 8px; align-items: flex-end; }
  .race-hud .rt-btn { width: 58px; height: 58px; font-size: 22px; }
  .race-hud .rt-btn.brake { margin-left: auto; }
  .race-hud .rt-btn.gas { width: 76px; height: 76px; font-size: 14px; }
  .race-hud .rt-btn.drift { font-size: 11px; width: 62px; height: 62px; }
  .race-hud .rh-speedo { display: none; }
  .race-hud .rh-map { width: 104px; height: 104px; top: calc(66px + var(--safe-t)); right: 10px; }
  .race-hud .rh-coins { top: calc(178px + var(--safe-t)); right: 10px; font-size: 15px; }
  .race-hud .rh-top { top: calc(64px + var(--safe-t)); left: 10px; gap: 6px; }
  .race-hud .rh-pos { width: 72px; height: 72px; font-size: 30px; border-radius: 22px; }
  .race-hud .rh-lap { font-size: 16px; padding: 6px 12px; } .race-hud .rh-time { font-size: 15px; }
  .race-hud .rh-item { width: 68px; height: 68px; top: calc(64px + var(--safe-t)); }
  .racing .hud .place-pill { display: none; }     /* the lap card already names the track */
}
/* phones: panel subtitles never run under the close button */
@media (max-width: 640px) { .panel .panel-head .sub { padding-right: 52px; } }
@media (max-height: 460px) { .race-hud .rh-speedo { display: none; } .race-hud .rh-coins { top: calc(170px + var(--safe-t)); } }

/* ── show player: the video always stays inside its panel (v4.21) ── */
.panel .player { width: auto; max-width: 100%; }
.panel .player video { width: 100%; max-width: 100%; max-height: min(70vh, 640px); object-fit: contain; aspect-ratio: 16 / 9; }
.panel .player h2 { margin-right: 60px; }

/* ── v4.24: a smaller, quieter HUD on desktop so the world (and its signs) show through ── */
@media (min-width: 901px) and (min-height: 621px) {
  .hud .h-profile { min-width: 236px; padding: 5px 14px 5px 5px; gap: 10px; }
  .hud .h-ava { width: 54px; height: 54px; }
  .hud .h-name b { font-size: 20px; max-width: 130px; }
  .hud .h-lvl { font-size: 14px; } .hud .h-xp { min-width: 70px; height: 10px; }
  .hud .h-pill { height: 46px; padding: 0 12px 0 6px; gap: 6px; }
  .hud .h-pill b { font-size: 18px; } .hud .h-pill.cur .kic { width: 28px; height: 28px; } .hud .h-pill.rewards .kic { width: 26px; height: 26px; }
  .hud .h-round { width: 46px; height: 46px; } .hud .h-round .kic { width: 24px; height: 24px; }
  .hud .h-map { width: 148px; height: 148px; top: calc(70px + var(--safe-t)); }
  .hud .h-dock { padding: 6px; border-radius: 24px; }
  .hud .h-dock button { width: 62px; height: 60px; border-radius: 16px; }
  .hud .h-dock .kic, .hud .h-dock i[data-ic] { width: 28px; height: 28px; }
  .hud .h-dock span { font-size: 11px; }
  .hud .h-tabs { padding: 6px; gap: 2px; }
  .hud .h-tabs button { width: 88px; height: 66px; border-radius: 16px; }
  .hud .h-tabs .kic { width: 34px; height: 34px; } .hud .h-tabs button span { font-size: 14.5px; }
  .hud .h-tabs button.on::after { bottom: 5px; width: 18px; height: 3px; }
  .hud .joystick { width: 150px; height: 150px; left: 120px; }
  .hud .stick { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .hud .h-actions { transform: scale(.84); transform-origin: bottom right; }
  .hud .place-pill { font-size: 13px; padding: 5px 12px; }
}

/* ── v4.29 Sports Field (js/systems/sports.js) ── */
.sportspanel .sp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px 14px; border-radius: 22px; border: 3px solid var(--c); background: #fff;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 55%, #1f2a5c), 0 10px 22px rgba(31,42,92,.12); cursor: pointer; font-family: var(--font); color: var(--ink); text-align: center; transition: transform .15s; }
.sp-card:hover { transform: translateY(-3px); }
.sp-card:active { transform: translateY(2px); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 55%, #1f2a5c); }
.sp-emo { font-size: 58px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
.sp-card b { font-family: var(--font-display); font-size: 22px; }
.sp-card small { font-size: 13px; color: var(--ink-2); font-weight: 600; line-height: 1.35; }
.sp-best { margin-top: 4px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, #fff); }
.sp-verse { text-align: center; margin: 14px 0 0; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.sp-verse small { display: block; opacity: .7; }
.panel.sportsgame { width: min(980px, calc(100vw - 24px)); padding-top: 14px; }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 56px 10px 0; font-family: var(--font-display); font-size: 22px; flex-wrap: wrap; }
.sp-hud { display: flex; align-items: center; gap: 5px; font-family: var(--font); font-size: 15px; }
.sp-hud b { margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: var(--gold-2, #ffd65c); }
.sp-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 13px; background: #e7ecf8; border: 2px solid #cfd7ee; }
.sp-dot.goal { background: #d8f6dd; border-color: #3cc46a; }
.sp-dot.save, .sp-dot.miss, .sp-dot.foul, .sp-dot.strike { background: #ffe1e1; border-color: #ff8a8a; color: #c0392b; }
.sp-stage { position: relative; border-radius: 20px; overflow: hidden; touch-action: manipulation; cursor: pointer; user-select: none; -webkit-user-select: none; box-shadow: inset 0 0 0 3px rgba(31,42,92,.08); }
.sp-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 960 / 600; }
.sp-msg { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -10px) scale(.9); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  padding: 10px 22px; border-radius: 999px; background: rgba(255,255,255,.94); font-family: var(--font-display); font-size: clamp(18px, 3.4vw, 30px); color: var(--ink); white-space: nowrap; box-shadow: 0 8px 24px rgba(31,42,92,.2); }
.sp-msg.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sp-msg.good { background: #3cc46a; color: #fff; }
.sp-msg.warn { background: #fff3d6; color: #8a4b00; }
.sp-msg.big { top: 50%; transform: translate(-50%, -50%); border-radius: 26px; padding: 22px 28px; pointer-events: auto; white-space: normal; width: min(420px, 86%); text-align: center; }
.sp-end { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-end b { font-size: clamp(18px, 3vw, 26px); line-height: 1.2; }
.sp-end small { font-family: var(--font); font-size: 14px; color: var(--ink-2); }
.sp-stars { font-size: 40px; letter-spacing: 4px; }
.sp-pay { font-family: var(--font); font-weight: 800; font-size: 18px; padding: 6px 16px; border-radius: 999px; background: #eef2fb; color: var(--ink-2); }
.sp-pay.on { background: #fff1c2; color: #8a5a00; animation: spPay .5s ease-out; }
@keyframes spPay { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.sp-help { text-align: center; margin: 10px 0 6px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
@media (max-width: 560px) {
  .sportspanel .sp-cards { grid-template-columns: 1fr; }
  .sp-top { font-size: 18px; } .sp-dot { width: 18px; height: 18px; font-size: 10px; } .sp-hud b { font-size: 13px; }
}

/* ═══ v4.31 — 3D stadium games (Kingdom Cup soccer · Home Run Derby) ═══ */
.sp-go { margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; background: var(--c); padding: 6px 14px; border-radius: 999px; box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, #000); }
.sp-quick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted, #6b7393); }
.sp-quick .btn.small { padding: 6px 12px; font-size: 13px; min-height: 0; }
.s3-hud { position: fixed; inset: 0; z-index: 11; pointer-events: none; font-family: var(--font-display); user-select: none; -webkit-user-select: none; }
.s3-hud button { pointer-events: auto; touch-action: none; }
.s3-board { position: absolute; top: calc(12px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 18px;
  background: rgba(31,42,92,.86); color: #fff; box-shadow: 0 8px 24px rgba(31,42,92,.35); white-space: nowrap; font-weight: 700; }
.s3-board b { font-size: 26px; min-width: 70px; text-align: center; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.s3-t { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: .06em; }
.s3-t i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.s3-clock { margin-left: 4px; padding: 4px 10px; border-radius: 12px; background: #fff; color: #1f2a5c; font-size: 18px; font-variant-numeric: tabular-nums; }
.s3-clock.low { background: #ff5f6d; color: #fff; animation: s3pulse .6s ease-in-out infinite alternate; }
@keyframes s3pulse { to { transform: scale(1.08); } }
.s3-msg { position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: opacity .2s, transform .25s; font-size: 30px; font-weight: 700; color: #fff;
  text-shadow: 0 4px 0 #1f2a5c, 0 10px 30px rgba(31,42,92,.5); white-space: nowrap; pointer-events: none; }
.s3-msg.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.s3-msg.big { font-size: clamp(40px, 8vw, 78px); text-shadow: 0 6px 0 #e2679d, 0 14px 40px rgba(31,42,92,.5); }
.s3-joy { position: absolute; left: calc(26px + var(--safe-l, 0px)); bottom: calc(26px + var(--safe-b, 0px)); width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,.28); border: 3px solid rgba(255,255,255,.75); pointer-events: auto; touch-action: none; }
.s3-joy i { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px rgba(31,42,92,.3); transition: transform .05s; }
.s3-btns { position: absolute; right: calc(22px + var(--safe-r, 0px)); bottom: calc(22px + var(--safe-b, 0px)); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 12px; align-items: end; }
.s3-b { width: 78px; height: 78px; border-radius: 50%; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font-size: 26px; line-height: 1;
  background: rgba(255,255,255,.9); box-shadow: 0 5px 0 rgba(31,42,92,.25), 0 10px 20px rgba(31,42,92,.25); color: #1f2a5c; position: relative; }
.s3-b span { font-size: 12px; font-weight: 800; letter-spacing: .05em; margin-top: 3px; }
.s3-b:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(31,42,92,.25); }
.s3-b.sprint { grid-column: 1; grid-row: 2; background: linear-gradient(180deg, #cfe4ff, #8fb8ff); }
.s3-b.pass { grid-column: 1; grid-row: 1; background: linear-gradient(180deg, #ffe7a6, #ffc93c); }
.s3-b.shoot { grid-column: 2; grid-row: 1 / span 2; width: 104px; height: 104px; font-size: 36px; background: linear-gradient(180deg, #ffb4c4, #ff5f7e); color: #fff; }
.s3-b.shoot span { font-size: 14px; }
.s3-pow { position: absolute; left: 10px; right: 10px; bottom: -14px; height: 8px; border-radius: 6px; background: rgba(31,42,92,.35); overflow: hidden; opacity: 0; transition: opacity .15s; }
.s3-pow.on { opacity: 1; }
.s3-pow i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3cc46a, #ffc93c 70%, #ff5f6d); }
.s3-keys { position: absolute; left: 50%; bottom: calc(10px + var(--safe-b, 0px)); transform: translateX(-50%); font-size: 12px; color: #fff; background: rgba(31,42,92,.55); padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.s3-quit { position: absolute; top: calc(12px + var(--safe-t, 0px)); right: calc(12px + var(--safe-r, 0px)); pointer-events: auto; }
.s3-dots { display: inline-flex; gap: 4px; }
.s3-dots i { width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.s3-dots i.now { background: #fff; } .s3-dots i.hr { background: #ffc93c; } .s3-dots i.hit { background: #3cc46a; } .s3-dots i.out, .s3-dots i.foul, .s3-dots i.miss { background: #ff5f6d; opacity: .7; }
.s3-hud.bb .s3-b.swing { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.s3-end .say { max-width: 420px; margin-inline: auto; }
@media (pointer: coarse) { .s3-keys { display: none; } }
@media (max-width: 640px) {
  .s3-board { gap: 6px; padding: 4px 6px 4px 10px; top: calc(54px + var(--safe-t, 0px)); }
  .s3-board b { font-size: 20px; min-width: 52px; } .s3-t { font-size: 11px; } .s3-clock { font-size: 14px; }
  .s3-hud.bb .s3-board { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); white-space: normal; }
  .s3-joy { width: 118px; height: 118px; left: 16px; bottom: 18px; } .s3-joy i { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .s3-b { width: 66px; height: 66px; font-size: 22px; } .s3-b.shoot { width: 88px; height: 88px; font-size: 30px; }
  .s3-btns { right: 14px; bottom: 16px; gap: 9px; }
  .s3-msg { font-size: 22px; }
}

.stadium #hud { display: none !important; }   /* v4.31: the stadium has its own scoreboard + buttons */

/* ═══ v4.32 — tidy map + padlocks on the basic link ═══ */
.kmap .kpin { transition: transform .15s; }
.kmap .kpin span { left: 0 !important; right: auto !important; top: 31px !important; bottom: auto !important; transform: translateX(-50%) !important; }
.kmap.small .kpin span { display: none !important; }
.kmap.small .kpin i { left: -17px !important; top: -17px !important; width: 34px !important; height: 34px !important; }
.kmap.small .kpin i .kic { width: 22px !important; height: 22px !important; }
.kpin.locked i { background: #eef0f6; filter: grayscale(.75); opacity: .85; }
.kpin.locked span { color: #7d849e; }
.kpin .klock { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(31,42,92,.3); filter: none; }
.kmap.small .kpin .klock { width: 18px; height: 18px; right: -5px; bottom: -5px; }
.kmap.small .kpin .klock .kic { width: 13px !important; height: 13px !important; }
.kmap-list button.locked { border-color: #c9cfe0; color: #7d849e; background: #f4f5fa; }
.kyou { z-index: 3; }
.tag.locktag { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.95); color: #5b6380; font-family: var(--font-display); font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(31,42,92,.25); white-space: nowrap; }

/* ═══ v4.33 — Home Run Derby: count, bases, pitch tag, power ═══ */
.bb-count { display: inline-flex; gap: 8px; font-size: 12px; letter-spacing: .04em; }
.bb-count > span { display: inline-flex; align-items: center; gap: 3px; }
.bb-count i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.bb-count > span:nth-child(1) i.on { background: #3cc46a; } .bb-count > span:nth-child(2) i.on { background: #ffc93c; } .bb-count > span:nth-child(3) i.on { background: #ff5f6d; }
.bb-diamond { position: relative; width: 34px; height: 30px; display: inline-block; }
.bb-diamond i { position: absolute; width: 11px; height: 11px; transform: rotate(45deg); background: rgba(255,255,255,.25); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); border-radius: 2px; }
.bb-diamond i[data-b="0"] { right: 2px; top: 13px; } .bb-diamond i[data-b="1"] { left: 11px; top: 2px; } .bb-diamond i[data-b="2"] { left: 2px; top: 13px; }
.bb-diamond i.on { background: #ffc93c; box-shadow: 0 0 8px #ffc93c; }
.bb-pitch { position: absolute; left: 50%; top: calc(74px + var(--safe-t, 0px)); transform: translateX(-50%) scale(.85); opacity: 0; transition: .2s; padding: 6px 16px; border-radius: 999px; background: rgba(31,42,92,.8); color: #fff; font-weight: 700; font-size: 18px; pointer-events: none; white-space: nowrap; }
.bb-pitch.on { opacity: 1; transform: translateX(-50%) scale(1); }
.s3-hud.bb .s3-b.power { grid-column: 1; grid-row: 2; background: linear-gradient(180deg, #e3e7f3, #c3cbe2); }
.s3-hud.bb .s3-b.power.on { background: linear-gradient(180deg, #ffd27a, #ff8a3c); color: #fff; box-shadow: 0 0 0 4px rgba(255,138,60,.35), 0 5px 0 rgba(31,42,92,.25); }
.s3-hud.bb .s3-b.swing { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 640px) { .bb-count { gap: 5px; font-size: 10px; } .bb-count i { width: 8px; height: 8px; } .bb-pitch { top: calc(110px + var(--safe-t, 0px)); font-size: 15px; } }
/* v4.34: the SWING button glows and grows while the ball is in the hitting window */
.s3-hud.bb .s3-b.swing.go { background: linear-gradient(180deg, #a6f0b8, #3cc46a); transform: scale(1.12); box-shadow: 0 0 0 6px rgba(60,196,106,.35), 0 5px 0 rgba(31,42,92,.25); transition: transform .08s; }

/* ═══ v4.35 — the cup: teams + rounds, and the baseball fielding UI ═══ */
.panel.cuppanel { width: min(760px, calc(100vw - 24px)); }
.cup-teams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cup-team { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 20px; border: 3px solid color-mix(in srgb, var(--c) 35%, #fff); background: #fff; font-family: var(--font-display); color: var(--ink); transition: transform .12s, box-shadow .12s; }
.cup-team .ct-emo { font-size: 38px; line-height: 1; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, #fff); box-shadow: inset 0 0 0 3px var(--c); }
.cup-team b { font-size: 16px; } .cup-team small { font-size: 11px; color: var(--muted, #6b7393); text-align: center; line-height: 1.25; }
.cup-team.on { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 8px 18px rgba(31,42,92,.15); transform: translateY(-2px); }
.cup-h { margin: 14px 0 8px; font-family: var(--font-display); font-size: 16px; }
.cup-rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cup-round { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 18px; border: 3px solid #e6e9f3; background: #fff; text-align: left; font-family: var(--font-display); color: var(--ink); }
.cup-round b { font-size: 17px; } .cup-round span { font-size: 13px; } .cup-round small { font-size: 12px; color: #e3a400; letter-spacing: .04em; }
.cup-round em { font-style: normal; font-size: 11px; color: var(--muted, #6b7393); }
.cup-round.on { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.cup-round.locked { opacity: .55; filter: grayscale(.6); }
.cup-play { font-size: 22px; padding: 12px 42px; }
.cup-help { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted, #6b7393); }
@media (max-width: 640px) { .cup-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cup-rounds { grid-template-columns: 1fr; } .cup-team .ct-emo { width: 50px; height: 50px; font-size: 30px; } }
.s3-roundtag { position: absolute; top: calc(66px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: #1f2a5c; font-weight: 700; font-size: 13px; white-space: nowrap; }
.s3-hud .s3-b.shoot.go { background: linear-gradient(180deg, #a6f0b8, #3cc46a); transform: scale(1.1); box-shadow: 0 0 0 6px rgba(60,196,106,.35), 0 5px 0 rgba(31,42,92,.25); }
.s3-end .s3-round { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; color: #3cc46a; }
.bb-inn { padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,.18); font-size: 14px; }
.bb-role { position: absolute; top: calc(96px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(31,42,92,.6); white-space: nowrap; }
.s3-hud.bb .s3-b.bunt { grid-column: 1; grid-row: 1; background: linear-gradient(180deg, #e3e7f3, #c3cbe2); }
.s3-hud.bb .s3-b.bunt.on { background: linear-gradient(180deg, #b7e6ff, #3b8cff); color: #fff; box-shadow: 0 0 0 4px rgba(59,140,255,.35), 0 5px 0 rgba(31,42,92,.25); }
.bb-choice { position: absolute; left: 50%; bottom: calc(110px + var(--safe-b, 0px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px 16px 18px; border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px rgba(31,42,92,.3); pointer-events: auto; }
.bb-choice .btn { font-size: 20px; padding: 12px 22px; }
.bb-timer { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 5px; border-radius: 4px; background: #e6e9f3; overflow: hidden; }
.bb-timer i { display: block; height: 100%; width: 100%; background: #ffc93c; }
.bb-field { position: absolute; left: 0; right: 0; bottom: calc(20px + var(--safe-b, 0px)); display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; }
.bb-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bb-pt { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; padding: 10px 12px; border-radius: 18px; border: 0; background: rgba(255,255,255,.95); box-shadow: 0 5px 0 rgba(31,42,92,.2), 0 10px 20px rgba(31,42,92,.2); font-family: var(--font-display); color: #1f2a5c; }
.bb-pt b { font-size: 28px; } .bb-pt span { font-size: 13px; font-weight: 700; }
.bb-pt:active { transform: translateY(3px); }
.bb-meter { position: relative; width: min(420px, 80vw); height: 26px; border-radius: 14px; background: linear-gradient(90deg, #ff6b6b, #ffc93c 30%, #3cc46a 45%, #3cc46a 55%, #ffc93c 70%, #ff6b6b); box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(31,42,92,.3); }
.bb-meter .bb-green { position: absolute; left: 42%; width: 16%; top: -6px; bottom: -6px; border-radius: 8px; box-shadow: inset 0 0 0 3px #fff; }
.bb-needle { position: absolute; top: -10px; bottom: -10px; width: 6px; margin-left: -3px; border-radius: 3px; background: #1f2a5c; box-shadow: 0 0 0 2px #fff; }
.bb-field #bbThrowPitch { pointer-events: auto; width: 110px; height: 110px; }
.s3-b.bb-catch { position: absolute; right: calc(22px + var(--safe-r, 0px)); bottom: calc(22px + var(--safe-b, 0px)); width: 120px; height: 120px; font-size: 40px; pointer-events: auto; background: linear-gradient(180deg, #e3e7f3, #c3cbe2); color: #1f2a5c; }
.s3-b.bb-catch.go { background: linear-gradient(180deg, #a6f0b8, #3cc46a); color: #fff; transform: scale(1.15); box-shadow: 0 0 0 8px rgba(60,196,106,.35), 0 5px 0 rgba(31,42,92,.25); animation: s3pulse .35s ease-in-out infinite alternate; }
.bb-throw { position: absolute; right: calc(18px + var(--safe-r, 0px)); bottom: calc(18px + var(--safe-b, 0px)); padding: 10px 14px 18px; border-radius: 22px; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px rgba(31,42,92,.3); pointer-events: auto; text-align: center; font-family: var(--font-display); }
.bb-throw p { margin: 0 0 6px; font-weight: 700; color: #1f2a5c; }
.bb-dia { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 44px); gap: 4px; }
.bb-dia button { border: 0; border-radius: 12px; background: #ffc93c; color: #1f2a5c; font-family: var(--font-display); font-weight: 700; font-size: 15px; box-shadow: 0 4px 0 rgba(31,42,92,.2); }
.bb-dia [data-tb="1"] { grid-column: 2; grid-row: 1; } .bb-dia [data-tb="2"] { grid-column: 1; grid-row: 2; } .bb-dia [data-tb="0"] { grid-column: 3; grid-row: 2; } .bb-dia [data-tb="3"] { grid-column: 2; grid-row: 3; background: #ff8ac2; }
.s3-hud .hidden { display: none !important; }
@media (max-width: 640px) { .bb-pt { min-width: 70px; padding: 8px; } .bb-pt b { font-size: 22px; } .bb-choice .btn { font-size: 16px; padding: 10px 14px; } .s3-roundtag { top: calc(118px + var(--safe-t, 0px)); } .bb-role { top: calc(144px + var(--safe-t, 0px)); } }
.bb-pitch { top: calc(124px + var(--safe-t, 0px)); }
.bb-field { bottom: calc(26px + var(--safe-b, 0px)); }
.bb-field #bbThrowPitch { position: absolute; right: calc(22px + var(--safe-r, 0px)); bottom: 0; }
.bb-field .bb-meter { margin-bottom: 40px; }

/* ═══ v4.36 — Galilee Fishing ═══ */
.fish-hud .fh-book { border: 0; border-radius: 12px; padding: 6px 10px; font: inherit; font-size: 13px; background: #fff; color: #1f6aa0; box-shadow: 0 2px 0 rgba(31,42,92,.2); }
:is(.fish-hud, .golf-hud) .fh-hint { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b, 0px)); transform: translateX(-50%); max-width: calc(100vw - 260px); text-align: center; font-size: 14px; color: #fff;
  background: rgba(31,42,92,.6); padding: 6px 14px; border-radius: 999px; white-space: normal; }
:is(.fish-hud, .golf-hud) .fh-hint:empty { display: none; }
:is(.fish-hud, .golf-hud) .fh-aim { position: absolute; left: calc(22px + var(--safe-l, 0px)); bottom: calc(22px + var(--safe-b, 0px)); display: flex; gap: 12px; }
:is(.fish-hud, .golf-hud) .fh-act { position: absolute; right: calc(24px + var(--safe-r, 0px)); bottom: calc(24px + var(--safe-b, 0px)); width: 112px; height: 112px; font-size: 38px; }
:is(.fish-hud, .golf-hud) .fh-act span { font-size: 15px; }
:is(.fish-hud, .golf-hud) .fh-net { position: absolute; right: calc(150px + var(--safe-r, 0px)); bottom: calc(34px + var(--safe-b, 0px)); width: 90px; height: 90px; font-size: 30px;
  background: linear-gradient(180deg, #fff3b0, #ffc93c); animation: fhPulse 1s ease-in-out infinite; }
@keyframes fhPulse { 50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255,201,60,.35), 0 5px 0 rgba(31,42,92,.25); } }
:is(.fish-hud, .golf-hud) .fh-power { position: absolute; right: calc(24px + var(--safe-r, 0px)); bottom: calc(150px + var(--safe-b, 0px)); width: 160px; height: 18px; border-radius: 10px; background: rgba(31,42,92,.45); overflow: hidden; border: 3px solid #fff; }
:is(.fish-hud, .golf-hud) .fh-power i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8fd3ff, #3cc46a 50%, #ffc93c 80%, #ff8a3c); }
.fish-hud .fh-tension { position: absolute; right: calc(150px + var(--safe-r, 0px)); bottom: calc(24px + var(--safe-b, 0px)); width: 34px; height: 170px; border-radius: 18px; background: rgba(31,42,92,.5); border: 3px solid #fff; overflow: hidden; }
.fish-hud .fh-tension .fh-green { position: absolute; left: 0; right: 0; bottom: 19%; height: 52%; background: rgba(60,196,106,.45); }
.fish-hud .fh-tension i { position: absolute; left: 4px; right: 4px; bottom: 4px; border-radius: 12px; background: #ffc93c; transition: height .08s; }
.fish-hud .fh-tension i.ok { background: #3cc46a; } .fish-hud .fh-tension i.red { background: #ff4d6a; } .fish-hud .fh-tension i.low { background: #8fb8ff; }
.fish-hud .fh-tension b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #fff; }
.fish-hud .fh-dist { position: absolute; left: 50%; top: calc(80px + var(--safe-t, 0px)); transform: translateX(-50%); font-size: 22px; color: #fff; background: rgba(31,42,92,.55); padding: 4px 14px; border-radius: 999px; }
:is(.fish-hud, .golf-hud) .s3-b.fh-act.go { background: linear-gradient(180deg, #a6f0b8, #3cc46a); color: #fff; transform: scale(1.14); box-shadow: 0 0 0 8px rgba(60,196,106,.4), 0 5px 0 rgba(31,42,92,.25); }
.fish-card .fc-new { margin: 0 0 4px; font-weight: 800; color: #e2679d; }
.fish-card .fc-size { margin: 2px 0 8px; font-family: var(--font-display); font-size: 20px; color: var(--c, #1f2a5c); filter: brightness(.75); }
.fish-card .big-emoji { filter: drop-shadow(0 6px 0 rgba(31,42,92,.12)); }
.fishbook .fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px; }
.fishbook .fb-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 16px; background: #eef1f8; color: #8a93ad; text-align: center; }
.fishbook .fb-card.got { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c) 28%, #fff)); color: #1f2a5c; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, #fff); }
.fishbook .fb-ic { font-size: 34px; } .fishbook .fb-card b { font-size: 14px; } .fishbook .fb-card small { font-size: 11px; }
.rg-fish { margin-bottom: 8px; background: linear-gradient(180deg, #eaf8ff, #bfe8ff) !important; border-color: #39b6e8 !important; color: #134a6a !important; }
.rg-fish.locked { filter: grayscale(.6); opacity: .8; }
@media (max-width: 720px), (max-height: 520px) {
  :is(.fish-hud, .golf-hud) .fh-act { width: 92px; height: 92px; font-size: 30px; }
  :is(.fish-hud, .golf-hud) .fh-net { right: calc(124px + var(--safe-r, 0px)); width: 74px; height: 74px; }
  .fish-hud .fh-tension { right: calc(126px + var(--safe-r, 0px)); height: 130px; }
  :is(.fish-hud, .golf-hud) .fh-power { bottom: calc(126px + var(--safe-b, 0px)); width: 130px; }
  :is(.fish-hud, .golf-hud) .fh-hint { max-width: calc(100vw - 32px); bottom: calc(126px + var(--safe-b, 0px)); font-size: 12px; }
  .fish-hud .fh-book { font-size: 11px; padding: 4px 8px; }
}
@media (max-height: 520px) {
  .fish-card .big-emoji, .golf-card .big-emoji { font-size: 44px; margin: 0; }
  .fish-card .say { font-size: 15px; margin: 6px 0; }
}

/* ═══ v4.36 — Bible Mini Golf ═══ */
.sportspanel .sp-golf { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "e b" "e s" "e best" "e go"; justify-items: start; text-align: left; column-gap: 16px; }
.sportspanel .sp-golf .sp-emo { grid-area: e; align-self: center; } .sportspanel .sp-golf b { grid-area: b; } .sportspanel .sp-golf small { grid-area: s; }
.sportspanel .sp-golf .sp-best { grid-area: best; } .sportspanel .sp-golf .sp-go { grid-area: go; }
.sportspanel .sp-golf.locked { filter: grayscale(.55); opacity: .85; }
.golf-hud .g-par { font-size: 13px; padding: 3px 8px; border-radius: 10px; background: rgba(255,255,255,.18); }
.golf-hud .g-total { font-size: 15px; padding: 4px 10px; border-radius: 12px; background: #ffd23f; color: #1f2a5c; }
.golf-hud .g-name { position: absolute; left: 50%; top: calc(66px + var(--safe-t, 0px)); transform: translateX(-50%); font-size: 15px; color: #fff; background: rgba(47,179,106,.85); padding: 4px 14px; border-radius: 999px; white-space: nowrap; }
.golf-hud .g-view { position: absolute; right: calc(150px + var(--safe-r, 0px)); bottom: calc(34px + var(--safe-b, 0px)); width: 66px; height: 66px; font-size: 22px; }
.golf-hud .g-view.on { background: linear-gradient(180deg, #b7e6ff, #3b8cff); color: #fff; }
.golf-hud .fh-act { background: linear-gradient(180deg, #a6f0b8, #2fb36a); }
.golf-hud .s3-msg.verse { font-size: clamp(16px, 2.4vw, 24px); max-width: min(680px, calc(100vw - 40px)); white-space: normal; text-align: center; line-height: 1.3; top: 34%; }
.golf-card .g-card { overflow-x: auto; margin: 8px 0 10px; }
.golf-card table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.golf-card th, .golf-card td { padding: 6px 9px; border: 2px solid #e6ecf7; text-align: center; font-size: 16px; }
.golf-card th { background: #2fb36a; color: #fff; }
.golf-card td.under { background: #ffe58a; } .golf-card td.par { background: #d6f5df; }
@media (max-width: 720px), (max-height: 520px) {
  .golf-hud .g-view { right: calc(124px + var(--safe-r, 0px)); width: 56px; height: 56px; }
  .golf-hud .g-name { top: calc(100px + var(--safe-t, 0px)); font-size: 12px; }
  .golf-hud .g-par, .golf-hud .g-total { font-size: 11px; }
}

/* ═══ v4.37 — Noah's Hill: story time · two by two · build the ark ═══ */
.cine #hud, .cine .joy, .cine #joystick, .cine #actBtn, .cine .landbanner { display: none !important; }
.noah-cap { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b, 0px)); transform: translate(-50%, 20px); opacity: 0; z-index: 30;
  width: min(720px, calc(100vw - 32px)); padding: 14px 18px 12px; border-radius: 24px; background: rgba(255,253,244,.96); color: #1f2a5c;
  box-shadow: 0 10px 40px rgba(31,42,92,.3), inset 0 0 0 3px #ffd23f; transition: opacity .35s, transform .35s; font-family: var(--font); }
.noah-cap.in { opacity: 1; transform: translate(-50%, 0); }
.noah-cap .nc-top { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; color: #9b7bff; }
.noah-cap .nc-ic { font-size: 26px; } .noah-cap .nc-n { margin-left: auto; font-size: 13px; color: #8a93ad; }
.noah-cap .nc-t { margin: 6px 0 10px; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.45; font-weight: 700; text-wrap: pretty; }
.noah-cap .nc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.noah-end .noah-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.noah-pairs { position: fixed; left: 50%; top: calc(104px + var(--safe-t, 0px)); transform: translateX(-50%); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 40px 8px 16px; border-radius: 18px; background: rgba(255,255,255,.94); color: #1f2a5c; box-shadow: 0 6px 20px rgba(31,42,92,.2); font-family: var(--font-display); max-width: calc(100vw - 24px); }
.noah-pairs .np-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.noah-pairs .np-p { font-size: 20px; padding: 2px 6px; border-radius: 10px; background: #eef1f8; filter: grayscale(.2); }
.noah-pairs .np-p.on { background: #fff1c2; box-shadow: inset 0 0 0 2px #ffc93c; }
.noah-pairs .np-p.done { background: #d6f5df; box-shadow: inset 0 0 0 2px #3cc46a; }
.noah-pairs .np-p.done::after { content: ' ✓'; font-size: 13px; color: #2fb36a; }
.noah-pairs .np-hint { font-family: var(--font); font-weight: 700; font-size: 12px; color: #5a6485; text-align: center; }
.noah-pairs .np-x { position: absolute; right: 8px; top: 8px; border: 0; background: #eef1f8; border-radius: 50%; width: 26px; height: 26px; color: #5a6485; }
.noah-build .nb-stage { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.noah-build .nb-meter { position: relative; width: min(420px, 100%); height: 26px; border-radius: 14px; background: linear-gradient(90deg, #ffd6d6, #fff3c4 30%, #fff3c4 70%, #ffd6d6); box-shadow: inset 0 0 0 3px #e6ecf7; }
.noah-build .nb-green { position: absolute; left: 34%; width: 32%; top: 3px; bottom: 3px; border-radius: 10px; background: #7fdc95; }
.noah-build .nb-needle { position: absolute; top: -14px; width: 0; height: 0; }
.noah-build .nb-needle::before { content: '🔨'; position: absolute; left: -17px; top: 0; font-size: 34px; transform: rotate(-30deg); }
.noah-build .nb-plank { display: flex; justify-content: space-around; width: min(420px, 100%); height: 62px; border-radius: 10px; margin-top: 18px;
  background: repeating-linear-gradient(90deg, #c98d55 0 70px, #b97b45 70px 74px); box-shadow: 0 6px 0 #8a5530; }
.noah-build .nb-plank.shake { animation: nbShake .3s; }
@keyframes nbShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.noah-build .nb-nail { width: 14px; height: 46px; margin-top: -30px; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #9aa3b5, #e8ecf4, #9aa3b5); transition: transform .2s, height .2s, margin .2s; }
.noah-build .nb-nail::before { content: ''; display: block; width: 26px; height: 8px; margin-left: -6px; border-radius: 4px; background: #7d8699; }
.noah-build .nb-nail.in { height: 14px; margin-top: 0; }
.noah-build .nb-msg { text-align: center; min-height: 24px; font-weight: 800; color: #1f2a5c; margin: 10px 0 0; }
@media (max-width: 520px) { .noah-end .noah-acts { grid-template-columns: 1fr; } .noah-pairs { top: calc(150px + var(--safe-t, 0px)); } }

/* ═══ v4.37 — Creation Forest: seven days ═══ */
.cr-hud { position: fixed; left: 50%; top: calc(104px + var(--safe-t, 0px)); transform: translateX(-50%); z-index: 12; width: min(460px, calc(100vw - 24px));
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 40px 9px; border-radius: 18px; background: rgba(255,255,255,.95); color: #1f2a5c;
  box-shadow: 0 6px 20px rgba(31,42,92,.2); font-family: var(--font-display); text-align: center; }
.cr-hud b { font-size: 17px; } .cr-hud .cr-task { font-family: var(--font); font-weight: 800; font-size: 13px; color: #2fb36a; }
.cr-hud .cr-say { margin: 2px 0 0; font-family: var(--font); font-weight: 700; font-size: 12.5px; color: #5a6485; line-height: 1.35; max-height: 80px; transition: max-height .6s, opacity .6s; overflow: hidden; }
.cr-hud .cr-say.fade { max-height: 0; opacity: 0; }
.cr-hud .cr-x { position: absolute; right: 8px; top: 8px; border: 0; background: #eef1f8; border-radius: 50%; width: 26px; height: 26px; color: #5a6485; }
.cr-days { display: flex; gap: 4px; }
.cr-days span { font-size: 15px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #eef1f8; filter: grayscale(.6); opacity: .7; }
.cr-days span.on { background: #fff1c2; box-shadow: inset 0 0 0 2px #ffc93c; filter: none; opacity: 1; }
.cr-days span.done { background: #d6f5df; box-shadow: inset 0 0 0 2px #3cc46a; filter: none; opacity: 1; }
.cr-days.big { justify-content: center; margin: 8px 0 12px; flex-wrap: wrap; }
.cr-days.big span { width: 44px; height: 52px; border-radius: 14px; font-size: 22px; flex-direction: column; display: flex; align-items: center; justify-content: center; }
.cr-days.big small { font-size: 10px; color: #5a6485; font-weight: 800; }
@media (max-width: 520px) { .cr-hud { top: calc(150px + var(--safe-t, 0px)); } }