/* ==============================================================================================
   ANIMAL CRICKET CLASH 3D  -  interface stylesheet
   ----------------------------------------------------------------------------------------------
   This file styles ONLY the 2D interface drawn on top of the 3D stadium: the loading screen, the
   start screen, the team / overs / difficulty selector, the scoreboard, the audio button and the
   tap-to-play button. The stadium, players and LED signboard are drawn with WebGL, so their
   colours live in js/game.js instead (see [CFG-KITS] and [CFG-BRANDING] there).

   Search anchors in this file:
     [CSS-PAGE]      page background + the font used everywhere
     [CSS-SCORE]     the scoreboard tiles (top-left)
     [CSS-START]     start screen: how big the logo image is drawn, START MATCH button
     [CSS-SETUP]     team cards, over chips, difficulty chips, START CHASE button
     [CSS-AUDIO]     round audio button (top-right)
     [CSS-TAPBTN]    the bat button - size and position of the only on-screen control
     [CSS-MOBILE]    phone / tablet rules: safe-area notch insets and the small-screen sizes

   RESPONSIVE NOTE: the interface is fluid. Sizes are written as clamp(min, vw, max), so the same
   stylesheet fits a 320px phone and a 4K monitor without any JavaScript. The max value in a clamp()
   is the desktop size, the min is the phone size - change either end and everything in between
   follows automatically.

   Full illustrated guide: ../../documentation/index.html      Support: ali.appsclub@gmail.com
   ============================================================================================== */

  /* [CSS-PAGE] sky colour behind the canvas + the interface font stack. */
  :root{ color-scheme: light;
    /* notch / home-indicator insets, 0 on any device without them */
    --sat:env(safe-area-inset-top,0px);  --sar:env(safe-area-inset-right,0px);
    --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html,body{ width:100%; height:100%; overflow:hidden; background:#bfe6ff;
    font-family:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
    /* touch behaviour: no double-tap zoom delay, no grey tap flash, no long-press menu */
    touch-action:manipulation; overscroll-behavior:none;
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
  #app{ position:fixed; inset:0; touch-action:none; }
  canvas{ display:block; }
  #fx{ position:fixed; inset:0; z-index:8; pointer-events:none; }

  .hud{ position:fixed; z-index:10; pointer-events:none; user-select:none; }

  /* ---- scoreboard (top-left) ---- */
  /* [CSS-SCORE] Every scoreboard tile. `top`/`left` on #board moves the whole group; .panel is the tile
     itself (background, border, radius); .panel .k is the small caption and .panel .v the big value.
     The group is allowed to WRAP: on a narrow phone the five tiles fold onto a second row instead of
     running off the screen, and `max-width` keeps them clear of the audio button in the top-right. */
  #board{ top:max(16px,var(--sat)); left:max(16px,var(--sal)); display:flex; gap:10px; align-items:stretch;
    flex-wrap:wrap; max-width:calc(100vw - 32px - var(--sal) - var(--sar) - 74px); }
  #board{ gap:11px; }
  .panel{ position:relative; overflow:hidden;
    background:linear-gradient(158deg,rgba(19,35,60,.94),rgba(30,57,90,.90));
    border:1px solid rgba(150,196,240,.20); border-radius:17px; padding:11px 18px;
    box-shadow:0 14px 32px rgba(6,20,38,.44), 0 2px 6px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 18px rgba(4,14,28,.35);
    color:#eaf6ff; backdrop-filter:blur(10px) saturate(1.15); min-width:82px; }
  /* premium hairline of gold light along the top edge of every scoreboard tile */
  .panel::before{ content:''; position:absolute; left:12px; right:12px; top:0; height:1.5px;
    background:linear-gradient(90deg,transparent,rgba(255,214,110,.85),transparent); }
  .panel .k{ font-size:10px; letter-spacing:2.4px; color:#93c0e8; font-weight:800; opacity:.92; }
  .panel .v{ font-size:31px; font-weight:900; line-height:1.05; color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .18s; }
  .panel .v small{ font-size:15px; color:#a9c9e6; font-weight:800; }
  .panel.pop .v{ transform:scale(1.28); color:#ffe08a; }
  #lastPanel .v{ font-size:26px; }

  /* (the top-right "Bunnies batting / Pandas fielding" strip was removed per design direction —
     which side bats and which fields is announced on the 3D LED signboard instead) */

  /* ---- big message ---- */
  #msg{ top:20%; left:50%; transform:translateX(-50%); text-align:center; width:94vw; }
  #msg .big{ font-size:clamp(38px,9vw,96px); font-weight:900; letter-spacing:2px;
    background:linear-gradient(180deg,#fff,#ffd84a); -webkit-background-clip:text;
    background-clip:text; color:transparent; text-shadow:0 6px 24px rgba(0,0,0,.28);
    opacity:0; transform:translateY(14px) scale(.7); transition:opacity .25s, transform .3s cubic-bezier(.2,1.4,.4,1); }
  #msg .big.show{ opacity:1; transform:translateY(0) scale(1); }
  #msg .sub{ font-size:clamp(14px,2.4vw,22px); font-weight:800; color:#fff; text-shadow:0 3px 10px rgba(0,0,0,.35);
    opacity:0; transition:opacity .25s; margin-top:-6px; }
  #msg .sub.show{ opacity:1; }

  /* ---- TAP-TO-PLAY 3D circle bat button — the ONLY on-screen control (the timing gauge was removed per
         design direction). It is centred horizontally and hugged to the BOTTOM EDGE on purpose: with the
         gameplay camera (fov 50, pos ~(-3.4,5.1,STRIKER_Z-7.9) looking at (0,1.55,STRIKER_Z+4.5)) the striker
         projects between ~61% and ~80% of the screen height and sits right of centre, and his stumps are higher
         still — so anything kept below ~85% height in the middle column lands on empty foreground grass and can
         never cover the batsman, the wicket or the keeper. Size is deliberately moderate (84px, ~9% of a 900px
         viewport) so it reads as a real button without eating the play area. ---- */
  /* [CSS-TAPBTN] To resize the button change width+height here AND the .bat width/height a few lines down
     (keep the bat about 60% of the button). To lift it off the bottom edge raise `bottom`. If you enlarge it
     a lot, also enlarge the small-screen values in the @media block at the end of this section.
     `bottom` uses max(18px, safe-area) so the button never sits under an iPhone home indicator. */
  #tapBtn{ position:fixed; left:50%; bottom:max(18px,var(--sab)); transform:translateX(-50%);
    width:84px; height:84px; border-radius:50%; border:none; padding:0; cursor:pointer;
    pointer-events:auto; z-index:44; display:grid; place-items:center; overflow:visible;
    background:radial-gradient(circle at 34% 26%, #fff8d2 0%, #ffdc4d 40%, #f4a713 74%, #c87c05 100%);
    box-shadow:0 8px 0 #a2680a, 0 15px 28px rgba(0,0,0,.40),
      inset 0 5px 9px rgba(255,255,255,.75), inset 0 -9px 16px rgba(150,90,0,.34);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, transform .12s ease, box-shadow .12s ease; }
  #tapBtn.show{ opacity:1; visibility:visible; }
  /* the centring translateX MUST be repeated here, or the puck jumps left on every press */
  #tapBtn:active{ transform:translate(-50%,6px);
    box-shadow:0 2px 0 #a2680a, 0 7px 14px rgba(0,0,0,.35),
      inset 0 4px 8px rgba(255,255,255,.6), inset 0 -6px 12px rgba(150,90,0,.4); }
  #tapBtn .bat{ width:50px; height:50px; display:block; pointer-events:none;
    filter:drop-shadow(0 2px 2px rgba(120,72,0,.5)); }
  /* first-time affordance: a pulsing ring + a pointing hand. Both vanish after the first tap. */
  #tapBtn .hand{ position:absolute; width:36px; height:47px; right:-8px; bottom:-14px;
    pointer-events:none; opacity:0; transition:opacity .25s;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
  #tapBtn.firstTap .hand{ opacity:1; animation:tapPoke 1.15s ease-in-out infinite; }
  #tapBtn.firstTap::after{ content:''; position:absolute; inset:-9px; border-radius:50%;
    border:3px solid rgba(255,236,150,.85); animation:tapRing 1.5s ease-out infinite; }
  @keyframes tapPoke{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-5px,-7px); } }
  @keyframes tapRing{ 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.42); opacity:0; } }

  /* Short viewports have less empty grass under the batsman, so shrink the puck instead of raising it. */
  /* [CSS-MOBILE] ---- PHONES AND TABLETS. Three sizes: <=760px wide OR <=640px tall (most phones),
     <=430px wide (small phones), and <=480px tall (a phone held sideways, where vertical room is the
     scarce one). Every value below is only a smaller version of the desktop rule above it. */
  @media(max-width:760px), (max-height:640px){
    #tapBtn{ bottom:max(14px,var(--sab)); width:70px; height:70px; }
    #tapBtn .bat{ width:42px; height:42px; }
    #tapBtn .hand{ width:30px; height:39px; right:-6px; bottom:-12px; }
    /* scoreboard: tighter tiles so all five fit a phone without covering the pitch */
    #board{ top:max(9px,var(--sat)); left:max(9px,var(--sal)); gap:6px;
      max-width:calc(100vw - 18px - var(--sal) - var(--sar) - 62px); }
    .panel{ padding:6px 11px; border-radius:12px; min-width:58px; }
    .panel::before{ left:8px; right:8px; }
    .panel .k{ font-size:8.5px; letter-spacing:1.3px; }
    .panel .v{ font-size:21px; } .panel .v small{ font-size:11px; }
    #lastPanel .v{ font-size:18px; }
    #audioCtl{ top:max(9px,var(--sat)); right:max(9px,var(--sar)); }
    .audbtn{ width:46px; height:46px; } .audbtn .ic{ width:25px; height:25px; }
    #againBtn{ font-size:16px; padding:12px 30px; letter-spacing:3px; } }

  @media(max-width:430px){
    #board{ gap:5px; }
    .panel{ padding:5px 8px; min-width:49px; border-radius:11px; }
    .panel .k{ font-size:7.5px; letter-spacing:.7px; }
    .panel .v{ font-size:18px; } .panel .v small{ font-size:10px; }
    #lastPanel .v{ font-size:15px; } }

  /* a phone held sideways: keep the puck small and lift the score tiles out of the sky */
  @media(max-height:480px) and (orientation:landscape){
    #tapBtn{ width:62px; height:62px; bottom:max(10px,var(--sab)); }
    #tapBtn .bat{ width:37px; height:37px; }
    #board{ top:max(7px,var(--sat)); gap:5px; }
    .panel{ padding:5px 9px; } .panel .v{ font-size:18px; }
    .audbtn{ width:42px; height:42px; } .audbtn .ic{ width:23px; height:23px; } }

  #loader{ position:fixed; inset:0; z-index:50; display:flex; align-items:center;
    justify-content:center; flex-direction:column; gap:16px; padding:20px; text-align:center;
    background:linear-gradient(180deg,#bfe6ff,#8fd0f0); }
  #loader .r{ font-size:60px; animation:hop 1s infinite ease-in-out; }
  #loader .t{ font-size:clamp(15px,2vw,19px); font-weight:800; color:#1f3b52; }
  @keyframes hop{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
  .fade{ opacity:0; transition:opacity .5s; pointer-events:none; }

  /* ---- custom loader ball (no emoji) ---- */
  #loader .ball{ width:64px; height:64px; border-radius:50%;
    background:radial-gradient(circle at 34% 30%, #ff6a6a, #c11f1f 62%, #7d0f0f);
    box-shadow:0 10px 22px rgba(120,10,10,.4), inset -6px -8px 14px rgba(0,0,0,.35);
    position:relative; animation:hop 1s infinite ease-in-out; }
  #loader .ball::before, #loader .ball::after{ content:''; position:absolute; left:50%;
    top:8%; height:84%; width:2px; transform:translateX(-50%); }
  #loader .ball::before{ box-shadow:-9px 0 0 rgba(255,255,255,.55), -9px 3px 0 rgba(255,255,255,.35); }
  #loader .ball::after{ box-shadow:9px 0 0 rgba(255,255,255,.55), 9px 3px 0 rgba(255,255,255,.35); }

  /* ================= 3D START SCREEN ================= */
  /* [CSS-START] The dark vignette behind the logo is the `background` on #startScreen. #ssLogo sizes the
     logo artwork (the picture itself is game/img/logo.png), and #ssStart is the START MATCH button.
     Sizes are clamp(phone, viewport-width, desktop) so the logo scales itself on every screen. The
     ::before/::after auto margins centre the block while still letting it scroll on a very short screen. */
  #startScreen{ position:fixed; inset:0; z-index:40; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start; gap:6px; user-select:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));
    background:radial-gradient(120% 90% at 50% 8%, rgba(9,20,38,.30), rgba(6,14,28,.72) 68%, rgba(4,10,20,.9));
    transition:opacity .8s ease, transform .8s ease; }
  #startScreen::before{ content:''; margin-top:auto; }
  #startScreen::after{ content:''; margin-bottom:auto; }
  #startScreen.hide{ opacity:0; transform:scale(1.08); pointer-events:none; }
  /* 270px is the floor on a 320px phone (it still leaves the 12px padding either side); 700px is the cap
     on a desktop window. The second value is a safety net for SHORT-but-WIDE windows such as 1024x600
     or a 1366x568 browser: the artwork is 3:2, so 150vh-280px is the widest it can be and still leave
     room for the tagline and the START button below it. Raise 64vw to make the logo dominate more of a
     phone screen; the other two numbers protect the layout, so change them only if you resize the art. */
  #ssLogo{ display:block; width:min(clamp(270px,64vw,700px), calc(150vh - 280px)); height:auto; max-width:100%;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.55));
    animation:logoIn 1s cubic-bezier(.2,1.3,.4,1) both, floaty 4.5s 1s ease-in-out infinite; }
  @keyframes logoIn{ from{ opacity:0; transform:translateY(30px) scale(.6) rotate(-8deg);} to{ opacity:1; transform:none;} }
  @keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

  .ssTag{ margin-top:clamp(9px,1.6vw,16px); font-weight:900; letter-spacing:clamp(2px,.4vw,4px);
    font-size:clamp(11px,1.8vw,19px); color:#eaf6ff; text-shadow:0 3px 10px rgba(0,0,0,.5);
    text-align:center; }
  .ssTag .vs{ color:#ff6a6a; margin:0 8px; font-style:italic; }
  #ssStart{ margin-top:clamp(16px,3vw,30px); pointer-events:auto; cursor:pointer; border:none;
    font-family:inherit; font-weight:900; letter-spacing:clamp(2px,.4vw,3px);
    font-size:clamp(15px,2.2vw,22px); color:#0d2136;
    padding:clamp(11px,1.6vw,16px) clamp(28px,4.6vw,46px); border-radius:999px;
    min-height:48px;                              /* a comfortable touch target on any phone */
    background:linear-gradient(180deg,#fff3bd,#ffd23e 48%,#f7a91a 78%,#e08c0c);
    box-shadow:0 9px 0 #a86c09, 0 18px 34px rgba(0,0,0,.45),
      inset 0 2px 0 rgba(255,255,255,.7), inset 0 -6px 12px rgba(150,90,0,.28);
    transition:transform .12s, box-shadow .12s;
    animation:pulse 1.8s ease-in-out infinite; }
  #ssStart:hover{ transform:translateY(-2px); }
  #ssStart:active{ transform:translateY(6px); box-shadow:0 2px 0 #b7770c, 0 8px 16px rgba(0,0,0,.35); }
  @keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
  /* The logo image sizes itself from the viewport (clamp above), so no width breakpoints are needed
     here. Only a SHORT screen needs help: a phone held sideways has plenty of width and almost no
     height, so the logo and the gaps come down to keep the START button on screen. */
  @media(max-height:560px){
    #ssLogo{ width:clamp(190px,52vh,420px); }
    .ssTag{ margin-top:7px; } #ssStart{ margin-top:12px; } }
  /* ---- CINEMATIC intro (target reveal) hides the match HUD ---- */
  body.cinematic #board, body.cinematic #msg,
  body.cinematic #tapBtn{ display:none !important; }
  /* All gameplay announcement TEXT lives on the 3D LED signboard in-scene — never a flat overlay. */
  #celebrate{ display:none !important; }

  /* ================= MATCH SETUP (team + overs) ================= */
  /* [CSS-SETUP] .teamCard is one animal card (its `width` is what makes the row wider or narrower),
     .ovChip is both the over buttons and the difficulty buttons, .sel is the chosen state, and #suGo is
     the START CHASE button. Sizes are clamp(phone, viewport, desktop) so the whole panel scales itself.
     IMPORTANT for small screens: this screen SCROLLS. `overflow-y:auto` plus the ::before/::after auto
     margins keep the block centred on a big screen while still letting a phone reach the START button. */
  #setupScreen{ position:fixed; inset:0; z-index:38; display:none; flex-direction:column;
    align-items:center; justify-content:flex-start; gap:clamp(9px,1.8vh,18px);
    padding:calc(2vh + var(--sat)) calc(3vw + var(--sar)) calc(2vh + var(--sab)) calc(3vw + var(--sal));
    user-select:none; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:radial-gradient(120% 90% at 50% 6%, rgba(9,20,38,.30), rgba(6,14,28,.76) 66%, rgba(3,8,18,.92));
    opacity:0; transition:opacity .5s ease; }
  #setupScreen::before{ content:''; margin-top:auto; }
  #setupScreen::after{ content:''; margin-bottom:auto; }
  #setupScreen.show{ opacity:1; }
  #setupScreen.hide{ opacity:0; pointer-events:none; }
  .suTitle{ font-family:'Arial Black','Trebuchet MS',sans-serif; font-weight:900;
    letter-spacing:clamp(3px,.9vw,8px); font-size:clamp(19px,4.2vw,42px); text-align:center; line-height:1;
    color:#ffe15a; background:linear-gradient(180deg,#fff6cf 8%,#ffd23e 48%,#f4a512 64%,#ffe27a 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    text-shadow:0 2px 0 #bd800e,0 4px 0 #a36c0b,0 10px 18px rgba(0,0,0,.5); }
  .suStep{ font-weight:900; letter-spacing:clamp(2px,.5vw,5px); font-size:clamp(10.5px,1.3vw,13px);
    color:#8fc7ff; text-align:center; }
  .suRow{ display:flex; gap:clamp(9px,1.7vw,22px); justify-content:center; flex-wrap:wrap; }
  .teamCard{ position:relative; overflow:hidden; pointer-events:auto; cursor:pointer;
    width:clamp(132px,16.5vw,210px); padding:clamp(10px,1.2vw,16px) 14px clamp(12px,1.4vw,18px);
    border-radius:clamp(16px,1.9vw,24px);
    background:linear-gradient(168deg,rgba(28,50,82,.96),rgba(11,22,42,.97));
    border:1.5px solid rgba(150,196,240,.16);
    box-shadow:0 20px 44px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
    display:flex; flex-direction:column; align-items:center; gap:7px;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
  /* soft stage spotlight behind the mascot so the head reads as a lit 3D model */
  .teamCard::before{ content:''; position:absolute; left:50%; top:56px; width:150px; height:150px;
    transform:translateX(-50%); border-radius:50%;
    background:radial-gradient(circle,rgba(255,224,138,.20),transparent 66%); pointer-events:none; }
  .teamCard:hover{ transform:translateY(-6px); border-color:rgba(255,214,110,.4);
    box-shadow:0 26px 52px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2); }
  .teamCard .nm{ font-family:'Arial Black',sans-serif; font-weight:900; letter-spacing:clamp(2px,.35vw,4px);
    font-size:clamp(15px,1.9vw,23px); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5); }
  .teamCard .rl{ font-size:clamp(9px,1.1vw,11px); font-weight:800; letter-spacing:clamp(1.4px,.25vw,2.4px); color:#8fb8dd; }
  .teamCard svg{ width:clamp(58px,7.9vw,100px); height:clamp(58px,7.9vw,100px); filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
  .teamCard.sel{ border-color:#ffd23e; box-shadow:0 0 0 3px rgba(255,210,62,.30),0 0 34px rgba(255,200,60,.28),0 22px 46px rgba(0,0,0,.55);
    transform:translateY(-6px) scale(1.03); }
  .teamCard.sel .nm{ color:#ffe08a; }
  .ovChip{ position:relative; overflow:hidden; pointer-events:auto; cursor:pointer; border:1.5px solid rgba(150,196,240,.18);
    background:linear-gradient(180deg,rgba(30,54,88,.96),rgba(12,25,45,.97)); color:#eaf6ff;
    font-family:inherit; font-weight:900; letter-spacing:clamp(1px,.25vw,2px); font-size:clamp(14px,1.7vw,20px);
    padding:clamp(9px,1vw,12px) clamp(15px,2vw,25px); min-width:48px;   /* min-width = a fair touch target */
    border-radius:clamp(12px,1.4vw,17px); box-shadow:0 10px 24px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14);
    transition:transform .14s, border-color .14s, box-shadow .14s; }
  .ovChip::before{ content:''; position:absolute; left:10px; right:10px; top:0; height:1.5px;
    background:linear-gradient(90deg,transparent,rgba(255,214,110,.55),transparent); }
  .ovChip small{ display:block; font-size:clamp(8.5px,.85vw,10px); letter-spacing:clamp(1.2px,.22vw,2px);
    color:#8fb8dd; font-weight:800; }
  .ovChip:hover{ transform:translateY(-3px); border-color:rgba(255,214,110,.35); }
  .ovChip.sel{ border-color:#ffd23e; color:#ffe08a;
    box-shadow:0 0 0 2px rgba(255,210,62,.28),0 12px 26px rgba(0,0,0,.45); transform:translateY(-3px) scale(1.05); }
  #suGo{ margin-top:4px; pointer-events:auto; cursor:pointer; border:none; font-family:inherit;
    font-weight:900; letter-spacing:clamp(2.5px,.5vw,4px); font-size:clamp(15px,2vw,21px); color:#0d2136;
    padding:clamp(11px,1.4vw,15px) clamp(30px,4.8vw,50px); border-radius:999px; min-height:48px;
    background:linear-gradient(180deg,#fff3bd,#ffd23e 48%,#f7a91a 78%,#e08c0c);
    box-shadow:0 9px 0 #a86c09, 0 18px 34px rgba(0,0,0,.45),
      inset 0 2px 0 rgba(255,255,255,.7), inset 0 -6px 12px rgba(150,90,0,.28);
    transition:transform .12s, box-shadow .12s, opacity .2s; }
  #suGo:hover{ transform:translateY(-2px); }
  #suGo:active{ transform:translateY(6px); box-shadow:0 2px 0 #b7770c,0 8px 16px rgba(0,0,0,.35); }
  #suGo:disabled{ opacity:.30; cursor:default; transform:none; }
  #suGo.ready{ animation:pulse 1.6s ease-in-out infinite; }
  .suNote{ font-size:13px; font-weight:800; color:#a9c9e6; letter-spacing:1px; text-align:center; }
  /* [CSS-MOBILE] setup screen on a phone. Portrait: the four team cards fold into a tidy 2 x 2 grid and
     the whole panel scrolls if it runs out of room. Landscape (short screen): flatter cards so all four
     still fit one row and the START CHASE button stays visible without scrolling. */
  @media(max-width:760px){
    #setupScreen{ gap:10px; }
    .suRow{ gap:10px; width:100%; max-width:380px; }
    .teamCard{ flex:1 1 calc(50% - 10px); width:auto; min-width:128px; max-width:174px; }
    .teamCard::before{ top:42px; width:112px; height:112px; } }
  @media(max-height:560px){
    #setupScreen{ gap:7px; }
    .suRow{ gap:8px; max-width:none; }
    .teamCard{ flex:0 0 auto; width:clamp(104px,17vh,152px); padding:8px 10px 10px; gap:4px; }
    .teamCard svg{ width:clamp(44px,9vh,74px); height:clamp(44px,9vh,74px); }
    .teamCard::before{ top:32px; width:92px; height:92px; }
    .suTitle{ font-size:clamp(17px,4.6vh,30px); }
    .ovChip{ padding:8px 14px; } #suGo{ margin-top:0; } }

  /* ---- PLAY AGAIN bar (after the match result) ---- */
  #againBar{ position:fixed; bottom:max(26px,calc(var(--sab) + 8px)); left:50%; transform:translateX(-50%) translateY(24px);
    z-index:44; display:none; opacity:0; transition:opacity .4s, transform .4s; }
  #againBar.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  #againBtn{ pointer-events:auto; cursor:pointer; border:none; font-family:inherit; font-weight:900;
    letter-spacing:clamp(2.5px,.5vw,4px); font-size:clamp(15px,1.9vw,19px); color:#0d2136;
    padding:clamp(11px,1.3vw,13px) clamp(30px,4vw,40px); border-radius:999px; min-height:46px;
    background:linear-gradient(180deg,#fff3bd,#ffd23e 48%,#f7a91a 78%,#e08c0c);
    box-shadow:0 9px 0 #a86c09, 0 18px 34px rgba(0,0,0,.45),
      inset 0 2px 0 rgba(255,255,255,.7), inset 0 -6px 12px rgba(150,90,0,.28);
    animation:pulse 1.8s ease-in-out infinite; }
  #againBtn:active{ transform:translateY(5px); box-shadow:0 2px 0 #b7770c; }
  /* ---- FOUR / SIX / WIN celebration signboard (DOM overlay above the 3D scene) ---- */
  #celebrate{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events:none; z-index:40; opacity:0; transition:opacity .25s; }
  #celebrate.show{ opacity:1; }
  #celeCard{ text-align:center; padding:26px 60px; border-radius:26px; transform:scale(.6) rotate(-4deg);
    transition:transform .35s cubic-bezier(.2,1.5,.4,1); }
  #celebrate.show #celeCard{ transform:scale(1) rotate(-2deg); }
  #celeBig{ font-family:'Baloo 2',system-ui,sans-serif; font-weight:900; font-size:132px; line-height:1;
    letter-spacing:2px; -webkit-text-stroke:4px rgba(0,0,0,.35); }
  #celeSub{ font-family:'Baloo 2',system-ui,sans-serif; font-weight:800; font-size:30px; margin-top:10px;
    color:#fff; text-shadow:0 3px 12px rgba(0,0,0,.5); letter-spacing:1px; }
  .cele-four #celeBig{ color:#5cffb0; text-shadow:0 0 30px rgba(46,193,107,.9),0 8px 24px rgba(0,0,0,.5); }
  .cele-six  #celeBig{ color:#ffd23f; text-shadow:0 0 46px rgba(255,210,63,1),0 10px 30px rgba(0,0,0,.55);
    animation:celePop .5s ease infinite alternate; }
  .cele-win  #celeBig{ color:#ffe08a; font-size:150px; text-shadow:0 0 60px rgba(255,210,63,1),0 10px 30px rgba(0,0,0,.55);
    animation:celePop .5s ease infinite alternate; }
  @keyframes celePop{ from{ transform:scale(1);} to{ transform:scale(1.08);} }
  /* ---- ONE round audio button (music + sound effects toggle together, icon only, no label text) ---- */
  /* [CSS-AUDIO] #audioCtl positions the button (top/right); .audbtn is its size and gold 3D look.
     The speaker/waves artwork itself is inline SVG in index.html, and .audbtn.off is the muted state.
     top/right use max(16px, safe-area) so the button clears a notch in landscape. */
  #audioCtl{ position:fixed; top:max(16px,var(--sat)); right:max(16px,var(--sar)); z-index:45; display:flex; gap:9px; }
  .audbtn{ pointer-events:auto; cursor:pointer; border:none; font-family:inherit; padding:0;
    width:52px; height:52px; border-radius:50%; display:grid; place-items:center; position:relative;
    background:radial-gradient(circle at 34% 26%, #fff8d2 0%, #ffdc4d 42%, #f4a713 76%, #c87c05 100%);
    box-shadow:0 5px 0 #a2680a, 0 10px 20px rgba(0,0,0,.34),
      inset 0 3px 6px rgba(255,255,255,.7), inset 0 -6px 11px rgba(150,90,0,.3);
    transition:transform .12s, box-shadow .12s, filter .15s; }
  .audbtn .ic{ width:28px; height:28px; display:block; pointer-events:none;
    filter:drop-shadow(0 1px 1px rgba(255,246,214,.6)); }
  .audbtn.off{ background:radial-gradient(circle at 34% 26%, #cfd6e2 0%, #9aa3b4 42%, #5d6577 100%);
    box-shadow:0 5px 0 #363c49, 0 10px 18px rgba(0,0,0,.3),
      inset 0 3px 6px rgba(255,255,255,.35), inset 0 -6px 11px rgba(40,46,58,.35); }
  .audbtn.off .ic{ filter:drop-shadow(0 1px 1px rgba(255,255,255,.35)); }
  /* the icon swaps its own artwork: sound waves when ON, a clean cross when muted — no overlay slash hack */
  .audbtn .wv{ display:block; }
  .audbtn .mute{ display:none; }
  .audbtn.off .wv{ display:none; }
  .audbtn.off .mute{ display:block; }
  .audbtn:active{ transform:translateY(3px);
    box-shadow:0 2px 0 #a2680a, inset 0 3px 6px rgba(255,255,255,.6); }