/* SEASONAL GAMES (2026-10-10) -- page styles on top of arcade.css.
   Deployed to /css/seasonal.css; loaded by the seasonal arcade pages only. */

.season-tag {
  align-self: flex-start; margin: -4px 0 2px; padding: 3px 10px; border-radius: 999px;
  font: 700 11px var(--display-font); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(242,140,40,.14); color: #f6a54a; border: 1px solid rgba(242,140,40,.3);
}

/* ---------- TRICK OR TREAT ---------- */
.tt-scene {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px; padding-top: 46px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background:
    radial-gradient(1.2px 1.2px at 12% 16%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 61% 12%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 92% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 6% 44%, rgba(255,255,255,.3), transparent),
    linear-gradient(180deg, #160f26 0%, #24163a 55%, #2d1a2c 100%);
}
.tt-scene::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 0;
  background: linear-gradient(180deg, #2b3a22 0, #1f2a18 4px, #1a1310 4px, #120c09 100%);
}
.tt-moon {
  position: absolute; top: 34px; right: 7%; width: 74px; height: 74px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 38% 36%, #fff4d2, #f3d99a 60%, #d9b46a);
  box-shadow: 0 0 40px 10px rgba(255,220,150,.22), 0 0 120px 30px rgba(255,200,120,.08);
}
.tt-moon::before, .tt-moon::after { content: ''; position: absolute; border-radius: 50%; background: rgba(170,130,70,.25); }
.tt-moon::before { width: 14px; height: 14px; left: 18px; top: 40px; }
.tt-moon::after { width: 9px; height: 9px; left: 44px; top: 20px; }
.tt-bats { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tt-bats i {
  position: absolute; width: 22px; height: 9px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath fill='%23090611' d='M22 6c1-3 2-4 2-4l1 3c3-1 8 0 11-5 1 6 6 9 8 9-4 1-6 4-6 8-3-3-7-3-9-1-2-3-5-3-7 0-2-3-5-3-7 1-2-2-6-2-9 1 0-4-2-7-6-8 2 0 7-3 8-9 3 5 8 4 11 5l1-3s1 1 2 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: ttBat 14s linear infinite;
}
.tt-bats i:nth-child(1) { top: 18%; animation-delay: -2s; }
.tt-bats i:nth-child(2) { top: 30%; width: 16px; height: 7px; animation-duration: 19s; animation-delay: -9s; }
.tt-bats i:nth-child(3) { top: 12%; width: 13px; height: 6px; animation-duration: 23s; animation-delay: -15s; }
@keyframes ttBat {
  0% { left: -30px; transform: translateY(0); }
  25% { transform: translateY(-8px); } 50% { transform: translateY(6px); } 75% { transform: translateY(-4px); }
  100% { left: 105%; transform: translateY(0); }
}

.tt-house-wrap {
  position: relative; z-index: 1; max-height: 400px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; padding: 0 12px;
}
.tt-house-wrap::-webkit-scrollbar { display: none; }
.tt-house { position: relative; width: min(100%, 400px); margin: 0 auto; }
.tt-roof {
  position: relative; height: 54px; margin: 0 -14px;
  background: linear-gradient(180deg, #3a2343, #2a1830);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tt-roof::after { content: ''; position: absolute; left: 50%; bottom: 12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle, #ffb347 0 40%, #c46a12 70%); box-shadow: 0 0 14px rgba(255,170,60,.55); }
.tt-chimney { position: absolute; right: 24%; top: 6px; width: 16px; height: 30px; background: #2a1830; }
.tt-floors {
  display: flex; flex-direction: column; gap: 0;
  background: repeating-linear-gradient(90deg, #352032 0 22px, #301c2d 22px 24px);
  border: 2px solid #1b0f1b; border-top: 0; box-shadow: inset 0 0 30px rgba(0,0,0,.5);
}
.tt-steps { height: 8px; margin: 0 28%; background: #4a3b3e; border: 1px solid #1b0f1b; border-top: 0; }

.tt-floor {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) 48px; align-items: center; gap: 6px;
  padding: 6px 6px; border-bottom: 3px solid #1b0f1b; transition: background .2s, opacity .2s;
}
.tt-floor:last-child { border-bottom: 0; }
.tt-floor.locked { opacity: .55; }
.tt-floor.done, .tt-floor.bust, .tt-floor.current { opacity: 1; }
.tt-floor.current { background: linear-gradient(90deg, rgba(242,140,40,.0), rgba(242,140,40,.16), rgba(242,140,40,.0)); }
.tt-floor.unvisited { opacity: .6; }
.tt-fl { font: 700 12px var(--display-font); color: rgba(255,255,255,.45); text-align: center; }
.tt-floor.current .tt-fl { color: #ffb347; }
.tt-fm { font: 700 13px var(--display-font); text-align: right; color: var(--text-dim); }
.tt-doors { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 54px)); justify-content: center; gap: 10px; }

.tt-door {
  position: relative; height: 52px; padding: 0; border: 0; border-radius: 22px 22px 3px 3px; cursor: pointer;
  background: radial-gradient(circle at 50% 60%, #ffcc70 0, #f28c28 45%, #6a2c08 100%);
  perspective: 300px; transition: transform .15s, filter .15s;
}
.tt-door:disabled { cursor: default; }
.tt-floor.current .tt-door:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.15); }
.tt-floor.current .tt-door:not(:disabled) { box-shadow: 0 0 0 2px rgba(255,179,71,.6), 0 0 14px rgba(255,150,40,.35); }
.tt-door-leaf { position: absolute; inset: 0; transform-origin: 6% 50%; transition: transform .45s cubic-bezier(.3,.7,.4,1); }
.tt-door-leaf svg { width: 100%; height: 100%; display: block; }
.tt-door-in { position: absolute; inset: 7px 6px 4px; display: flex; align-items: center; justify-content: center; }
.tt-door-in svg { width: 100%; max-width: 34px; height: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.tt-door.knock .tt-door-leaf { animation: ttKnock .38s ease-in-out; }
@keyframes ttKnock { 0%, 100% { transform: none; } 25% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } }
.tt-door.open .tt-door-leaf { transform: rotateY(-78deg); }
.tt-door.open .tt-door-in { animation: ttPop .4s .12s cubic-bezier(.2,1.6,.4,1) backwards; }
@keyframes ttPop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.tt-door.open.ghost { background: radial-gradient(circle at 50% 55%, #c9d4ff 0, #5a63a8 55%, #1b1d33 100%); }
.tt-door.open.ghost .tt-door-in { animation: ttBoo .5s .1s cubic-bezier(.2,1.6,.4,1) backwards; }
@keyframes ttBoo { from { transform: translateY(16px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.tt-door.peek { background: rgba(0,0,0,.35); }
.tt-door.peek .tt-door-leaf { transform: rotateY(-78deg); opacity: .25; }
.tt-door.peek .tt-door-in { opacity: .45; filter: grayscale(.4); }
.tt-floor.bust .tt-fl { color: #ff8b8b; }

.tt-fm.c-corn, .tt-leg.c-corn b { color: #f6c431; }
.tt-fm.c-lollipop, .tt-leg.c-lollipop b { color: #ff7aa8; }
.tt-fm.c-chocolate, .tt-leg.c-chocolate b { color: #e0a070; }
.tt-fm.c-toffee, .tt-leg.c-toffee b { color: #ffd84a; text-shadow: 0 0 8px rgba(255,210,70,.5); }

.tt-legend { display: grid; gap: 6px; margin-top: 4px; }
.tt-leg {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 9px; background: var(--bg-panel-2); border: 1px solid var(--border);
}
.tt-leg svg { width: 26px; height: 26px; }
.tt-leg-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.tt-leg-name small { display: block; font-size: 11px; font-weight: 500; color: var(--text-dim); }
.tt-leg b { font: 700 14px var(--display-font); }
.tt-leg.ghost b { color: #ff8b8b; }
.game-controls.mode-auto .tt-legend { display: none; }

@media (max-width: 640px) {
  .tt-house-wrap { max-height: 340px; }
  .tt-door { height: 44px; }
  .tt-doors { gap: 6px; }
  .tt-floor { grid-template-columns: 20px minmax(0, 1fr) 40px; }
  .tt-moon { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-bats i, .tt-door.knock .tt-door-leaf, .tt-door.open .tt-door-in { animation: none; }
}

/* ---------- TURKEY TROT ---------- */
.tr-picks { display: grid; gap: 6px; }
.tr-pick {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--text);
  background: var(--bg-panel-2); border: 1px solid var(--border); transition: border-color .15s, background .15s;
}
.tr-pick svg { width: 34px; height: 30px; }
.tr-pick-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.tr-pick-name small { display: block; font-size: 11px; font-weight: 500; color: var(--text-dim); }
.tr-pick b { font: 700 15px var(--display-font); color: var(--c); }
.tr-pick:hover:not(:disabled):not(.active) { border-color: rgba(255,255,255,.18); }
.tr-pick.active { border-color: var(--c); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), var(--bg-panel-2) 70%); box-shadow: 0 0 0 1px var(--c) inset; }
.tr-pick:disabled { cursor: not-allowed; opacity: .6; }
.tr-pick.active:disabled { opacity: 1; }

.tr-scene {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: linear-gradient(180deg, #f0a35c 0%, #e07b45 30%, #b9543a 62%, #7e3a35 100%);
}
.tr-sky { position: relative; flex: 1; min-height: 130px; }
.tr-sun {
  position: absolute; right: 16%; bottom: 26px; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle, #ffe6a8 0 52%, #ffc773 70%, rgba(255,190,110,0) 72%);
  box-shadow: 0 0 60px 24px rgba(255,200,120,.35);
}
.tr-hills {
  position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V38C40 20 80 18 120 30s90 26 140 8 100-30 140-14v38Z' fill='%238a4a36'/%3E%3Cpath d='M0 70V52c50-14 110-16 170-4s120 14 160 0 50-8 70-4v26Z' fill='%236b3a2c'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}
.tr-barn {
  position: absolute; left: 7%; bottom: 0; width: 124px; height: 88px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 88'%3E%3Cpath d='M6 36 62 4l56 32v52H6Z' fill='%23a3352a' stroke='%234a1610' stroke-width='3'/%3E%3Cpath d='M6 36 62 4l56 32' fill='none' stroke='%23f1e3cf' stroke-width='4'/%3E%3Cpath d='M44 88V52h36v36' fill='%237a2318' stroke='%23f1e3cf' stroke-width='3'/%3E%3Cpath d='M44 52l36 36M80 52 44 88' stroke='%23f1e3cf' stroke-width='3'/%3E%3Cpath d='M53 22h18v14H53Z' fill='%23ffd27a' stroke='%23f1e3cf' stroke-width='2.5'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.tr-fence {
  position: absolute; left: calc(7% + 124px); right: 0; bottom: 0; height: 26px; opacity: .9;
  background: repeating-linear-gradient(90deg, #5a3a22 0 5px, transparent 5px 30px), linear-gradient(#5a3a22, #5a3a22) 0 5px / 100% 3px no-repeat, linear-gradient(#5a3a22, #5a3a22) 0 15px / 100% 3px no-repeat;
}
.tr-track {
  position: relative; margin: 0; padding: 10px 0 12px;
  background: linear-gradient(180deg, #5d7a34 0, #4c6a2a 6px, #6b4a2a 6px, #5e4024 100%);
}
.tr-finish {
  position: absolute; top: 10px; bottom: 12px; right: 26px; width: 10px; z-index: 0;
  background: repeating-conic-gradient(#f5f5f5 0 25%, #1a1a1a 0 50%) 0 0 / 10px 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.tr-lanes { position: relative; z-index: 1; display: grid; }
.tr-lane { position: relative; height: 58px; display: flex; align-items: center; border-bottom: 2px dashed rgba(255,235,200,.16); }
.tr-lane:last-child { border-bottom: 0; }
.tr-lane-no { position: absolute; left: 6px; font: 700 11px var(--display-font); color: rgba(255,235,200,.5); }
.tr-lane.mine { background: linear-gradient(90deg, rgba(255,235,200,.12), transparent 60%); }
.tr-lane.mine .tr-lane-no { color: #ffe0a8; }
.tr-runner { position: relative; margin-left: 20px; width: 56px; height: 46px; will-change: transform; }
.tr-runner svg { width: 56px; height: 46px; display: block; }
.tr-tag {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%); white-space: nowrap; padding: 0 6px; border-radius: 999px;
  font: 700 9px var(--display-font); letter-spacing: .05em; text-transform: uppercase; color: #1a1208; background: var(--c);
  opacity: 0; transition: opacity .2s;
}
.tr-lane.mine .tr-tag, .tr-lane.won .tr-tag { opacity: 1; }
.tr-runner.running svg { animation: trBob .22s ease-in-out infinite alternate; }
.tr-runner.running .tr-leg.a { animation: trLegA .22s linear infinite alternate; transform-origin: 27px 41px; }
.tr-runner.running .tr-leg.b { animation: trLegB .22s linear infinite alternate; transform-origin: 34px 41px; }
@keyframes trBob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(3deg); } }
@keyframes trLegA { from { transform: rotate(-24deg); } to { transform: rotate(22deg); } }
@keyframes trLegB { from { transform: rotate(22deg); } to { transform: rotate(-24deg); } }
.tr-lane.won .tr-runner svg { animation: trWin .5s cubic-bezier(.2,1.6,.4,1) 2 alternate; filter: drop-shadow(0 0 8px rgba(255,220,120,.8)); }
@keyframes trWin { to { transform: translateY(-10px) scale(1.12); } }
.tr-lane.won { background: linear-gradient(270deg, rgba(255,220,120,.22), transparent 55%); }
.tr-lane.lost .tr-runner { opacity: .75; }

@media (max-width: 640px) {
  .tr-lane { height: 42px; }
  .tr-runner, .tr-runner svg { width: 46px; height: 38px; }
  .tr-sun { width: 60px; height: 60px; }
  .tr-barn { width: 90px; height: 64px; }
  .tr-fence { left: calc(7% + 90px); }
}
@media (prefers-reduced-motion: reduce) {
  .tr-runner.running svg, .tr-runner.running .tr-leg { animation: none; }
}

/* ---------- SNOWBALL FIGHT ---------- */
.season-tag.sb-season { background: rgba(120,180,255,.14); color: #9cc8ff; border-color: rgba(120,180,255,.3); }
.sb-duel-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sb-duel-actions .btn b { color: #9cc8ff; margin-left: 4px; }
.sb-list-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font: 700 11px var(--display-font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.sb-list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.sb-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--bg-panel-2); border: 1px solid var(--border); }
.sb-row-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-row b { font: 700 13px var(--display-font); }
.sb-row .btn { padding: 5px 10px; font-size: 11px; }
.sb-empty { margin: 4px 0; font-size: 12px; color: var(--text-dim); }
.sb-wait { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(120,180,255,.4); background: rgba(120,180,255,.06); }
.sb-wait span { font-size: 12px; color: var(--text-dim); }
.sb-wait-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-wait-actions .btn { padding: 6px 10px; font-size: 11px; }
.sb-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sb-av-blank { display: inline-flex; align-items: center; justify-content: center; background: #2a3a52; color: #cfe3ff; font: 700 11px var(--display-font); }

.sb-clock { text-align: center; font: 700 13px var(--display-font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.sb-clock b { color: var(--text); }
.sb-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-team { display: grid; gap: 4px; justify-items: center; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--border); text-align: center; }
.sb-team.red { background: linear-gradient(180deg, rgba(229,72,77,.18), var(--bg-panel-2)); border-color: rgba(229,72,77,.35); }
.sb-team.blue { background: linear-gradient(180deg, rgba(70,140,255,.18), var(--bg-panel-2)); border-color: rgba(70,140,255,.35); }
.sb-team-name { font: 700 14px var(--display-font); letter-spacing: .1em; text-transform: uppercase; }
.sb-team.red .sb-team-name { color: #ff8a8d; }
.sb-team.blue .sb-team-name { color: #8ab8ff; }
.sb-team-pot { font: 700 20px var(--display-font); }
.sb-team-pot .frag-icon { height: 1em; margin-right: 3px; }
.sb-team-sub { font-size: 11px; color: var(--text-dim); }
.sb-join { width: 100%; margin-top: 4px; }
.sb-team.red .sb-join { background: #d8434a; }
.sb-team.blue .sb-join { background: #3b7be0; }
.sb-note { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; }

.sb-scene {
  position: relative; flex: 1; display: flex; flex-direction: column; min-height: 360px; padding: 46px 12px 16px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: linear-gradient(180deg, #1b2b44 0, #2b4466 62px, #cfe0f2 62px, #e8f1fb 100%);
}
.sb-flakes { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 60%, #fff, transparent), radial-gradient(2px 2px at 55% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 70%, #fff, transparent), radial-gradient(2px 2px at 90% 15%, #fff, transparent);
  background-size: 220px 220px; animation: sbSnow 9s linear infinite; }
@keyframes sbSnow { to { background-position: 40px 220px; } }
.sb-timer { position: relative; z-index: 2; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 10px; }
.sb-timer i { display: block; height: 100%; width: 0; background: #9cc8ff; transition: width .2s linear; }
.sb-timer i.low { background: #ff8b8b; }
.sb-field { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(24px, 14%) minmax(0, 1fr); align-items: center; }
.sb-side { display: grid; gap: 8px; justify-items: center; align-content: center; }
.sb-side.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-mid { align-self: stretch; margin: 12px 0; border-left: 2px dashed rgba(40,70,110,.25); justify-self: center; }
.sb-fort {
  position: relative; width: 100%; max-width: 92px; height: 54px; padding: 0; border: 0; background: none; cursor: default;
  border-radius: 12px; transition: transform .12s, filter .12s;
}
.sb-fort svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34px; z-index: 1; }
.sb-fort-n { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font: 700 11px var(--display-font); color: #6e86a4; z-index: 1; }
.sb-side.red .sb-fort-n { color: #c0676b; }
.sb-side.blue .sb-fort-n { color: #5c86c4; }
.sb-chips { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; z-index: 0; }
.sb-fort.can { cursor: pointer; }
.sb-fort.can:hover { transform: translateY(-2px); filter: drop-shadow(0 4px 8px rgba(40,80,140,.35)); }
.sb-fort.hide-me { filter: drop-shadow(0 0 8px rgba(255,255,255,.95)); }
.sb-fort.hide-me .sb-fort-n { color: #1d2a3c; }
.sb-aim { position: absolute; left: 50%; top: 30%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; opacity: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, transparent 0 5px, currentColor 5px 7px, transparent 7px 10px, currentColor 10px 12px, transparent 12px); color: #ff5a5f; transition: opacity .15s; }
.sb-fort.aim-mate .sb-aim { opacity: .45; }
.sb-fort.aim-me .sb-aim { opacity: 1; animation: sbAim 1s ease-in-out infinite alternate; }
@keyframes sbAim { to { transform: scale(1.15); } }
.sb-chip { display: inline-flex; border-radius: 50%; padding: 2px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .3s, opacity .3s, filter .3s; }
.sb-chip .sb-av { width: 20px; height: 20px; }
.sb-chip.red { background: #e5484d; }
.sb-chip.blue { background: #3b7be0; }
.sb-chip.me { padding: 3px; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.35); }
.sb-chip.mate { opacity: .75; }
.sb-chip.out { transform: translateY(8px) rotate(-70deg) scale(.85); opacity: .45; filter: grayscale(1); }
.sb-fort.splat::after { content: ''; position: absolute; left: 50%; top: 22%; width: 46px; height: 30px; margin-left: -23px; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0 32%, transparent 34%), radial-gradient(circle at 18% 40%, #fff 0 12%, transparent 14%), radial-gradient(circle at 84% 34%, #fff 0 12%, transparent 14%), radial-gradient(circle at 70% 82%, #fff 0 10%, transparent 12%), radial-gradient(circle at 26% 80%, #fff 0 9%, transparent 11%);
  animation: sbSplat .7s ease-out forwards; }
@keyframes sbSplat { from { transform: scale(.3); opacity: 1; } 60% { opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.sb-ball { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff 0 40%, #dfe9f5 70%, #b9cbe0); box-shadow: 0 3px 6px rgba(0,0,0,.25); }

.sb-pickbar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: center; min-height: 22px; font-size: 13px; color: var(--text-dim); }
.sb-pickbar b { color: var(--text); }
.sb-pickbar em { font-style: normal; color: #9cc8ff; }
.sb-pickbar.locked .sb-lock { color: var(--good); }
.sb-roster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-roster-col { border-radius: 10px; border: 1px solid var(--border); background: var(--bg-panel-2); padding: 8px; min-width: 0; max-height: 220px; overflow-y: auto; }
.sb-roster-col.red { border-color: rgba(229,72,77,.3); }
.sb-roster-col.blue { border-color: rgba(70,140,255,.3); }
.sb-roster-head { display: flex; justify-content: space-between; font: 700 11px var(--display-font); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.sb-roster-col.red .sb-roster-head { color: #ff8a8d; }
.sb-roster-col.blue .sb-roster-head { color: #8ab8ff; }
.sb-roster-head span { color: var(--text-dim); letter-spacing: 0; text-transform: none; font-weight: 600; }
.sb-roster-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 3px 0; font-size: 12px; }
.sb-roster-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sb-roster-row small { color: var(--text-dim); }
.sb-roster-row em { font-style: normal; font-size: 11px; color: var(--text-dim); min-width: 52px; text-align: right; }
.sb-roster-row.out { opacity: .5; }
.sb-roster-row.me span { color: #fff; }

@media (max-width: 640px) {
  .sb-scene { min-height: 320px; padding: 42px 6px 12px; }
  .sb-fort { height: 46px; }
  .sb-side.grid { gap: 4px; }
  .sb-roster { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sb-flakes, .sb-fort.aim-me .sb-aim { animation: none; } }
.sb-av-yeti { background: #dbe8f7; color: #2b4466; }

/* ---------- PRESENT STACK ---------- */
.season-tag.ps-season { background: rgba(60,170,100,.14); color: #8fe0ad; border-color: rgba(60,170,100,.32); }
.ps-sizes { display: grid; gap: 6px; }
.ps-size {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px;
  border-radius: 10px; cursor: pointer; text-align: left; color: var(--text); background: var(--bg-panel-2); border: 1px solid var(--border);
  transition: border-color .15s, transform .12s, background .15s;
}
.ps-size:not(:disabled):hover { border-color: rgba(143,224,173,.55); transform: translateY(-1px); }
.ps-size:disabled { cursor: default; opacity: .55; }
.ps-size-box { justify-self: center; display: block; border-radius: 3px; background: #c0392b; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); position: relative; }
.ps-size-box::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #f2c94c; }
.ps-size.s-small .ps-size-box { width: 16px; height: 12px; }
.ps-size.s-medium .ps-size-box { width: 23px; height: 16px; background: #1f7a4d; }
.ps-size.s-big .ps-size-box { width: 32px; height: 22px; background: #2f5fb0; }
.ps-size-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.ps-size-name small { display: block; font-size: 11px; font-weight: 500; color: var(--text-dim); }
.ps-size b { font: 700 15px var(--display-font); color: #8fe0ad; }
.ps-size.capped b { color: #ff8b8b; }
.ps-add-label { margin-top: 2px; }

.ps-scene {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(120% 80% at 50% 0%, #2b1d2a 0%, #1a1220 60%, #140e18 100%);
}
.ps-window {
  position: absolute; right: 9%; top: 52px; width: 120px; height: 140px; border-radius: 60px 60px 6px 6px; border: 6px solid #4a3324;
  background: radial-gradient(circle at 70% 25%, #fff6d8 0 9px, transparent 10px), linear-gradient(180deg, #0e1a33, #1f3a5c);
  box-shadow: inset 0 -18px 0 #dfe9f5, 0 0 0 2px #2a1c14;
}
.ps-window::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; background: #4a3324; }
.ps-window::after { content: ''; position: absolute; left: 0; right: 0; top: 52%; height: 5px; background: #4a3324; }
.ps-tree {
  position: absolute; left: 5%; bottom: 40px; width: 130px; height: 210px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 210'%3E%3Cpath d='M58 182h14v28H58Z' fill='%235a3a22'/%3E%3Cpath d='M65 14 112 92H88l30 50H92l30 44H8l30-44H12l30-50H18Z' fill='%231f6b3e' stroke='%23123d24' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M65 14 112 92H88l30 50H92l30 44H65Z' fill='%23000' opacity='.15'/%3E%3Cpath d='M36 96c18 10 40 10 58 0M26 146c26 12 54 12 80 0' fill='none' stroke='%23f2c94c' stroke-width='2.5' stroke-linecap='round'/%3E%3Cg%3E%3Ccircle cx='48' cy='103' r='5' fill='%23e5484d'/%3E%3Ccircle cx='80' cy='104' r='5' fill='%2368a8ff'/%3E%3Ccircle cx='40' cy='154' r='5.5' fill='%23ffd27a'/%3E%3Ccircle cx='70' cy='158' r='5.5' fill='%23e5484d'/%3E%3Ccircle cx='96' cy='152' r='5.5' fill='%2368a8ff'/%3E%3Ccircle cx='64' cy='62' r='4.5' fill='%23ffd27a'/%3E%3C/g%3E%3Cpath d='M65 0l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1Z' fill='%23ffd84a' stroke='%23b8860b' stroke-width='1.5'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(255,210,120,.18));
}
.ps-snow { position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(2px 2px at 15% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 55%, #fff, transparent), radial-gradient(2px 2px at 80% 35%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 80%, #fff, transparent);
  background-size: 200px 200px; animation: sbSnow 12s linear infinite; }
.ps-floor { position: relative; z-index: 1; height: 40px; background: repeating-linear-gradient(90deg, #4a3020 0 60px, #43291b 60px 62px), linear-gradient(#5a3a26, #3a2416); box-shadow: inset 0 3px 0 #6b4630; }
.ps-stage { position: relative; z-index: 2; height: 320px; display: flex; align-items: flex-end; justify-content: center; margin-top: 46px; }
.ps-stack { display: flex; flex-direction: column-reverse; align-items: center; transform-origin: 50% 100%; transition: transform .35s ease; }
.ps-gift {
  position: relative; flex: 0 0 auto; transform: translateX(var(--x)); border-radius: 4px; background: var(--c);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), inset 0 0 0 2px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.35);
}
.ps-gift::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 16%; transform: translateX(-50%); background: var(--r); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.ps-gift.s-small { width: 62px; height: 40px; }
.ps-gift.s-medium { width: 86px; height: 52px; }
.ps-gift.s-big { width: 116px; height: 68px; }
.ps-lid { position: absolute; left: -4px; right: -4px; top: -2px; height: 26%; border-radius: 3px; background: var(--c); filter: brightness(1.12); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 2px 0 rgba(0,0,0,.2); }
.ps-lid::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 16%; transform: translateX(-50%); background: var(--r); }
.ps-bow { position: absolute; left: 50%; top: -12px; width: 30px; height: 14px; margin-left: -15px; z-index: 1; overflow: visible; }
.ps-gift.s-small .ps-bow { transform: scale(.75); top: -10px; }
.ps-gift + .ps-gift { margin-bottom: 2px; }
.ps-tag { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; font: 700 12px var(--display-font); color: rgba(255,255,255,.55); }
.ps-gift.drop { animation: psDrop .42s cubic-bezier(.3,1.4,.5,1) backwards; }
@keyframes psDrop { from { transform: translate(var(--x), -160px) rotate(-6deg); opacity: 0; } 70% { opacity: 1; } }
.ps-stack.wobble .ps-gift { animation: psWobble .38s ease-in-out; }
@keyframes psWobble { 25% { transform: translateX(calc(var(--x) + 6px)) rotate(2deg); } 75% { transform: translateX(calc(var(--x) - 6px)) rotate(-2deg); } }
.ps-stack.topple .ps-gift { animation: psFall .9s cubic-bezier(.4,0,.8,.6) forwards; animation-delay: calc((12 - var(--i)) * 25ms); }
@keyframes psFall { to { transform: translate(calc(var(--x) + 60px + var(--i) * 22px), calc(var(--i) * 30px)) rotate(calc(40deg + var(--i) * 12deg)); opacity: .55; } }

@media (max-width: 640px) {
  .ps-scene { min-height: 340px; }
  .ps-stage { height: 270px; }
  .ps-tree { width: 90px; height: 150px; }
  .ps-window { width: 80px; height: 100px; right: 5%; }
}
@media (prefers-reduced-motion: reduce) { .ps-snow, .ps-gift.drop, .ps-stack.wobble .ps-gift { animation: none; } }

/* ---------- CUPID'S ARROW ---------- */
.season-tag.ca-season { background: rgba(232,51,109,.14); color: #ff9dbd; border-color: rgba(232,51,109,.35); }
.ca-rings { display: grid; gap: 6px; }
.ca-ring {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 12px 7px 10px;
  border-radius: 10px; cursor: pointer; text-align: left; color: var(--text); background: var(--bg-panel-2); border: 1px solid var(--border);
  transition: border-color .15s, background .15s;
}
.ca-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--f); box-shadow: inset 0 0 0 2px rgba(138,18,56,.6); }
.ca-ring[data-k="heart"] .ca-dot { background: radial-gradient(circle, #e0103f 0 38%, #fff 40%); }
.ca-ring-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.ca-ring-name small { display: block; font-size: 11px; font-weight: 500; color: var(--text-dim); }
.ca-ring b { font: 700 15px var(--display-font); color: #ff9dbd; }
.ca-ring:hover:not(:disabled):not(.active) { border-color: rgba(255,157,189,.4); }
.ca-ring.active { border-color: #e8336d; background: linear-gradient(90deg, rgba(232,51,109,.18), var(--bg-panel-2) 70%); box-shadow: 0 0 0 1px #e8336d inset; }
.ca-ring:disabled { cursor: not-allowed; opacity: .6; }
.ca-ring.active:disabled { opacity: 1; }

.ca-scene {
  position: relative; flex: 1; min-height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(90% 70% at 70% 20%, rgba(255,170,200,.35), transparent 70%), linear-gradient(180deg, #3a1638 0%, #6a2450 48%, #a5405e 100%);
}
.ca-hearts { position: absolute; inset: 0; pointer-events: none; }
.ca-hearts i { position: absolute; bottom: -30px; width: 16px; height: 16px; opacity: .35; animation: caFloat 11s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -10 24 18'%3E%3Cpath d='M0 7C-6 2-11-2-11-6.5a5.5 5.5 0 0 1 11-1.8 5.5 5.5 0 0 1 11 1.8C11-2 6 2 0 7Z' fill='%23ffc2d6'/%3E%3C/svg%3E") center / contain no-repeat; }
.ca-hearts i:nth-child(1) { left: 12%; animation-delay: -1s; }
.ca-hearts i:nth-child(2) { left: 30%; width: 11px; height: 11px; animation-duration: 14s; animation-delay: -6s; }
.ca-hearts i:nth-child(3) { left: 52%; animation-duration: 12s; animation-delay: -3s; }
.ca-hearts i:nth-child(4) { left: 74%; width: 12px; height: 12px; animation-duration: 15s; animation-delay: -9s; }
.ca-hearts i:nth-child(5) { left: 90%; animation-duration: 13s; animation-delay: -5s; }
@keyframes caFloat { from { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-200px) rotate(10deg); } to { transform: translateY(-460px) rotate(-6deg); opacity: 0; } }
.ca-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(180deg, #4f7d3a, #355a27); box-shadow: inset 0 3px 0 #6a9a4a; }
.ca-bow {
  position: absolute; left: 4%; bottom: 70px; width: 70px; height: 140px; z-index: 2; transform-origin: 30% 50%; transition: transform .12s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 140'%3E%3Cpath d='M18 6C58 30 58 110 18 134' fill='none' stroke='%23e8336d' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M18 6C58 30 58 110 18 134' fill='none' stroke='%23ffd27a' stroke-width='2' stroke-dasharray='4 8' stroke-linecap='round'/%3E%3Cpath d='M18 6 18 134' stroke='%23fff3f7' stroke-width='1.6'/%3E%3Cpath d='M42 60c-6-6-14-3-12 3 1 4 7 8 12 11 5-3 11-7 12-11 2-6-6-9-12-3Z' fill='%23ffd27a' stroke='%23a3641a' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.ca-bow.loose { transform: scaleX(.86); }
.ca-range { position: absolute; right: 6%; bottom: 46px; height: min(330px, calc(100% - 96px)); width: min(62%, 330px); display: flex; align-items: center; justify-content: center; }
.ca-range::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 70%; height: 40%; transform: translateX(-50%); z-index: 0;
  background: linear-gradient(90deg, transparent 18%, #5a3a22 18% 24%, transparent 24% 76%, #5a3a22 76% 82%, transparent 82%); }
.ca-target { position: relative; z-index: 1; width: 100%; max-width: 300px; aspect-ratio: 1; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.ca-target svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ca-zone { cursor: pointer; transition: filter .2s, stroke-width .2s; }
.ca-zone.win { filter: drop-shadow(0 0 4px rgba(255,220,120,.9)); stroke: #ffd27a; stroke-width: 2.6; }
.ca-hit circle { fill: #2a0f1d; stroke: #fff; stroke-width: 1.6; }
.ca-hit .core { fill: #fff; stroke: none; }
.ca-hit { opacity: .45; }
.ca-hit.latest { opacity: 1; }
.ca-hit.latest.w circle:first-child { fill: #1f8a4d; }
.ca-hit.latest.l circle:first-child { fill: #8a1238; }
.ca-arrow { position: absolute; left: 0; top: 0; width: 100px; height: 17px; z-index: 3; pointer-events: none; }
.ca-arrow svg { width: 100%; height: 100%; display: block; }
.ca-arrow.stuck { animation: caStuck .35s ease-out 2, caFade 1.2s .4s forwards; }
@keyframes caStuck { 50% { margin-top: -2px; } }
@keyframes caFade { to { opacity: 0; } }

@media (max-width: 640px) {
  .ca-scene { min-height: 330px; }
  .ca-bow { width: 46px; height: 96px; bottom: 60px; left: 2%; }
  .ca-range { width: 72%; right: 3%; }
}
@media (prefers-reduced-motion: reduce) { .ca-hearts i, .ca-arrow.stuck { animation: none; } }

/* ---------- BUNNY HOP ---------- */
.season-tag.bh-season { background: rgba(160,120,230,.14); color: #c9b2ff; border-color: rgba(160,120,230,.32); }
.bh-scene { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 380px; padding-top: 44px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: linear-gradient(180deg, #9fd3f5, #cdebff); }
.bh-scene .cd-caption { color: #1d3550; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.bh-scene .cd-caption.win { color: #13703f; }
.bh-scene .cd-caption.loss { color: #b3263a; }
.bh-view { position: relative; flex: 1; min-height: 320px; overflow: hidden; }
.bh-world { position: absolute; left: 0; right: 0; bottom: 0; will-change: transform; }
.bh-row { position: absolute; left: 0; right: 0; height: 50px; overflow: hidden; }
.bh-row-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 700 11px var(--display-font); letter-spacing: .1em; text-transform: uppercase; color: rgba(20,50,20,.55); }
.bh-start { background: linear-gradient(180deg, #8fd16a, #74bb52); box-shadow: inset 0 3px 0 #a6e07f; }
.bh-finish { background: radial-gradient(circle at 30% 40%, #ffd6e8 0 3px, transparent 4px) 0 0 / 34px 26px, radial-gradient(circle at 70% 70%, #fff3a8 0 3px, transparent 4px) 0 0 / 30px 30px, linear-gradient(180deg, #a6e07f, #8fd16a); }
.bh-basket { position: absolute; left: 50%; bottom: 4px; width: 64px; height: 42px; margin-left: -32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 42'%3E%3Cpath d='M12 18a20 16 0 0 1 40 0' fill='none' stroke='%238a5a2b' stroke-width='4'/%3E%3Cellipse cx='22' cy='18' rx='6' ry='8' fill='%23ff9dbd' stroke='%23a3446a' stroke-width='1.5'/%3E%3Cellipse cx='32' cy='16' rx='6' ry='8' fill='%239cd3ff' stroke='%233b6ea3' stroke-width='1.5'/%3E%3Cellipse cx='42' cy='18' rx='6' ry='8' fill='%23ffe08a' stroke='%23a3801a' stroke-width='1.5'/%3E%3Cpath d='M6 20h52l-6 20H12Z' fill='%23c08a4a' stroke='%236b4423' stroke-width='2'/%3E%3Cpath d='M9 28h46M11 34h42' stroke='%23a06b33' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }

.bh-lane.t-grass { background: linear-gradient(180deg, #7cc35a, #66ac47); }
.bh-lane.t-road { background: #4a4f58; box-shadow: inset 0 2px 0 #6b707a, inset 0 -2px 0 #33373e; }
.bh-lane.t-road::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #f2f2f2 0 22px, transparent 22px 44px); opacity: .8; }
.bh-lane.t-highway { background: #3a3e46; box-shadow: inset 0 3px 0 #f2c94c, inset 0 -3px 0 #f2c94c; }
.bh-lane.t-highway::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, #ddd 0 16px, transparent 16px 36px); opacity: .7; }
.bh-lane.t-river { background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 18px, transparent 18px 60px) 0 30% / 120px 2px no-repeat, linear-gradient(180deg, #3d9ad8, #2c7fbd); }
.bh-lane.t-river { animation: bhRipple 3s linear infinite; }
@keyframes bhRipple { to { background-position: 120px 30%, 0 0; } }
.bh-lane.t-rail { background: repeating-linear-gradient(90deg, #6b4a2a 0 6px, transparent 6px 22px) 0 10px / 100% 30px no-repeat, linear-gradient(180deg, #8d8678, #77705f); }
.bh-lane.t-rail::before, .bh-lane.t-rail::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: #c9ccd2; box-shadow: 0 1px 0 #555; }
.bh-lane.t-rail::before { top: 15px; } .bh-lane.t-rail::after { top: 32px; }

.bh-movers { position: absolute; inset: 0; z-index: 1; }
.bh-lane.left .bh-movers { transform: scaleX(-1); }
.bh-movers i { position: absolute; left: 0; top: 50%; animation: bhDrive var(--dur) linear infinite; animation-delay: var(--delay); }
@keyframes bhDrive { from { transform: translate(-120px, -50%); } to { transform: translate(calc(var(--w, 700px) + 20px), -50%); } }
.bh-car { width: 46px; height: 26px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.35); }
.bh-car::before { content: ''; position: absolute; right: 8px; top: 4px; bottom: 4px; width: 11px; border-radius: 3px; background: rgba(200,230,255,.85); }
.bh-car::after { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 7px; border-radius: 2px; background: rgba(0,0,0,.25); }
.bh-car.truck { width: 78px; height: 30px; border-radius: 5px; background: linear-gradient(90deg, #d8dbe0 0 70%, var(--c) 70%); }
.bh-log { width: 92px; height: 22px; border-radius: 11px; background: linear-gradient(180deg, #9a6a3a, #6b4423); box-shadow: inset 0 0 0 2px #4a2e16; }
.bh-log::after { content: ''; position: absolute; right: 4px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #c9945a 0 30%, #a06b33 32% 50%, #c9945a 52%); }
.bh-train { width: 320px; height: 32px; border-radius: 6px; background: repeating-linear-gradient(90deg, #c0392b 0 70px, #2a2a2a 70px 74px); box-shadow: inset 0 0 0 2px rgba(0,0,0,.3); animation-name: bhTrain !important; }
.bh-train::before { content: ''; position: absolute; left: 8px; right: 8px; top: 7px; height: 9px; background: repeating-linear-gradient(90deg, rgba(200,230,255,.9) 0 18px, transparent 18px 26px); }
@keyframes bhTrain { 0% { transform: translate(-360px, -50%); } 40% { transform: translate(calc(var(--w, 700px) + 40px), -50%); } 100% { transform: translate(calc(var(--w, 700px) + 40px), -50%); } }
.bh-fox { width: 30px; height: 18px; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M2 12c4-6 12-6 18-4l6-5 1 6c2 2 2 4 0 6H8C5 15 3 14 2 12Z' fill='%23e8742a'/%3E%3Cpath d='M2 12c-1 2 0 4 3 4' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.bh-lane.crossed .bh-movers i:not(.hit) { animation-play-state: paused; opacity: 0; transition: opacity .3s; }
.bh-lane.crossed.t-river .bh-pad { opacity: 1; }
.bh-pad { position: absolute; left: 50%; top: 50%; width: 46px; height: 30px; margin: -15px 0 0 -23px; border-radius: 50%; z-index: 1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at 60% 40%, #6fcf5a, #3f9a32); box-shadow: inset 0 0 0 2px #2e7a25; clip-path: polygon(0 0, 46% 0, 50% 50%, 56% 0, 100% 0, 100% 100%, 0 100%); }
.bh-movers i.hit { animation: bhHit .7s cubic-bezier(.5,0,.8,.5) forwards; }
.bh-movers i.bh-train.hit { animation: bhHit .9s cubic-bezier(.4,0,.8,.5) forwards !important; }
@keyframes bhHit { from { transform: translate(-340px, -50%); } to { transform: translate(calc(var(--w, 700px) + 40px), -50%); } }
.bh-lane.pounce .bh-fox { opacity: 1; animation: bhPounce .6s ease-out forwards; }
@keyframes bhPounce { from { transform: translate(40px, -50%); } to { transform: translate(calc(var(--w, 700px) / 2 - 15px), -50%); } }

.bh-tag { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; justify-items: end; line-height: 1.05; padding: 3px 8px; border-radius: 8px; background: rgba(10,16,28,.6); color: #fff; }
.bh-tag b { font: 700 13px var(--display-font); }
.bh-tag small { font-size: 10px; opacity: .75; }
.bh-lane.next .bh-tag { background: #f28c28; box-shadow: 0 0 0 2px #fff; }
.bh-lane.capped .bh-tag b { color: #ffb3b3; }
.bh-lane.crossed .bh-tag { background: rgba(31,138,77,.85); }

.bh-bunny { position: absolute; left: 50%; width: 40px; height: 44px; margin-left: -20px; z-index: 5; transition: bottom .38s cubic-bezier(.3,1.3,.5,1), transform .3s, opacity .3s; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.bh-bunny svg { width: 100%; height: 100%; display: block; }
.bh-bunny.hopping svg { animation: bhHop .38s ease-out; }
@keyframes bhHop { 40% { transform: translateY(-14px) scale(1.06, .95); } 100% { transform: none; } }
.bh-bunny.squash { transform: scale(1.35, .25); opacity: .55; }
.bh-bunny.sink { transform: scale(.4) translateY(10px); opacity: 0; }
.bh-bunny.caught { animation: bhShake .4s ease-in-out; opacity: .4; }
@keyframes bhShake { 25% { margin-left: -24px; } 75% { margin-left: -16px; } }

@media (max-width: 640px) { .bh-scene { min-height: 340px; } .bh-view { min-height: 290px; } }
@media (prefers-reduced-motion: reduce) { .bh-movers i, .bh-lane.t-river { animation: none !important; } }

/* ---------- LIGHT THE FUSE ---------- */
.season-tag.lf-season { background: rgba(77,141,255,.14); color: #a8c8ff; border-color: rgba(77,141,255,.32); }
.lf-modes button { padding-left: 4px; padding-right: 4px; }
.lf-scene {
  position: relative; flex: 1; min-height: 390px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(70% 50% at 50% 100%, rgba(255,120,60,.18), transparent 70%), linear-gradient(180deg, #050a1c 0%, #0d1838 55%, #1c2350 100%);
}
.lf-stars { position: absolute; inset: 0; opacity: .7;
  background-image: radial-gradient(1.2px 1.2px at 10% 15%, #fff, transparent), radial-gradient(1px 1px at 25% 40%, #fff, transparent), radial-gradient(1.4px 1.4px at 48% 10%, #fff, transparent), radial-gradient(1px 1px at 62% 33%, #fff, transparent), radial-gradient(1.2px 1.2px at 80% 18%, #fff, transparent), radial-gradient(1px 1px at 92% 44%, #fff, transparent), radial-gradient(1px 1px at 36% 24%, #fff, transparent); }
.lf-sky { position: absolute; left: 0; right: 0; top: 0; bottom: 120px; z-index: 2; pointer-events: none; }
.lf-city { position: absolute; left: 0; right: 0; bottom: 56px; height: 90px; z-index: 1; opacity: .95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V60h30V40h20v20h25V25h30v35h20V50h25V15h12V5h6v10h12v45h30V35h35v25h20V45h30v15h25V20h28v40h22V50h30v40Z' fill='%23070b1a'/%3E%3Cg fill='%23ffd27a' opacity='.55'%3E%3Crect x='82' y='34' width='4' height='4'/%3E%3Crect x='92' y='44' width='4' height='4'/%3E%3Crect x='160' y='24' width='4' height='4'/%3E%3Crect x='170' y='40' width='4' height='4'/%3E%3Crect x='238' y='44' width='4' height='4'/%3E%3Crect x='352' y='30' width='4' height='4'/%3E%3Crect x='362' y='46' width='4' height='4'/%3E%3Crect x='460' y='28' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.lf-pad { position: absolute; left: 50%; bottom: 56px; width: 120px; height: 230px; margin-left: -60px; z-index: 3; display: flex; align-items: flex-end; justify-content: center; }
.lf-pad::before { content: ''; position: absolute; bottom: 0; left: 6px; right: 6px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #5a5f6b, #3a3e48); box-shadow: 0 -2px 0 #7a7f8a; }
.lf-rocket { position: relative; width: 70px; height: 190px; margin-bottom: 12px; --charge: 0; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 calc(4px + var(--charge) * 26px) rgba(255, calc(200 - var(--charge) * 120), 80, calc(.2 + var(--charge) * .7))); transition: filter .3s; }
.lf-rocket svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lf-pad.lit .lf-rocket::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, #ffd84a 35%, rgba(255,120,40,0) 70%); animation: lfSpark .25s ease-in-out infinite alternate; }
@keyframes lfSpark { to { transform: scale(1.6) translate(1px, -1px); opacity: .7; } }
.lf-rocket.shake { animation: lfShake .42s ease-in-out; }
@keyframes lfShake { 20% { transform: translateX(-4px) rotate(-2deg); } 40% { transform: translateX(4px) rotate(2deg); } 60% { transform: translateX(-3px) rotate(-1deg); } 80% { transform: translateX(3px); } }
.lf-rocket.fizzled { filter: grayscale(1) brightness(.45); transform: rotate(-14deg) translateY(4px); transition: transform .4s, filter .4s; }
.lf-rocket.gone { opacity: 0; }
.lf-smoke { position: absolute; left: 50%; bottom: 30px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: rgba(160,165,180,.6); z-index: 4; animation: lfSmoke 1.2s ease-out forwards; }
@keyframes lfSmoke { to { transform: translate(var(--dx), var(--dy)) scale(2.6); opacity: 0; } }
.lf-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 8px currentColor, 0 0 3px #fff; }

.lf-fuse { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; height: 26px; }
.lf-seg { border-radius: 4px; background: #22283a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); position: relative; }
.lf-seg.packing { background: #6b5a2a; animation: lfPack .26s ease-in-out; }
@keyframes lfPack { 50% { transform: scaleY(1.3); } }
.lf-seg.lit { background: linear-gradient(180deg, #ffd84a, #f08a24); box-shadow: 0 0 8px rgba(255,180,60,.6); }
.lf-seg.dud { background: #3a1a22; box-shadow: inset 0 0 0 1px #ff5a6a; }
.lf-seg.dud::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: #ff5a6a; }
.lf-seg.hit { background: #ff3a4e; box-shadow: 0 0 12px rgba(255,60,80,.8); }
.lf-seg.hit::after { background: #fff; }

@media (max-width: 640px) {
  .lf-scene { min-height: 350px; }
  .lf-pad { transform: scale(.85); transform-origin: 50% 100%; }
  .lf-fuse { gap: 2px; height: 22px; left: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lf-pad.lit .lf-rocket::after, .lf-rocket.shake, .lf-seg.packing { animation: none; } }

.arcade-rule-fair { grid-column: 1 / -1; }
.arcade-rule-fair a { color: var(--gold); }