*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html,body{width:100%;height:100%;height:100dvh;background:#000;overflow:hidden;
      font-family:'Roboto',sans-serif;
      user-select:none;-webkit-user-select:none;
      -webkit-tap-highlight-color:transparent;touch-action:none;}
    body{display:flex;flex-direction:column;}

    /* DESKTOP */
    #dw{display:none;position:fixed;inset:0;overflow:hidden;z-index:9999;}
    #dwBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
    #dwOverlay{position:absolute;inset:0;background:rgba(0,0,0,0.6);}
    #dwContent{position:relative;z-index:1;width:100%;height:100%;
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px;}
    #dwImgRow{display:flex;align-items:center;justify-content:center;gap:40px;}
    #dwIcon{width:200px;height:auto;}
    #dwTitleImg{width:200px;height:auto;}
    #dwText{text-align:center;}
    .dwSub1{font-weight:700;font-size:clamp(16px,2.4vw,22px);color:#f5e642;
      letter-spacing:0px;margin-top:0px;text-transform:uppercase;}
    .dwSub2{font-weight:400;font-size:clamp(12px,1.6vw,15px);color:#fff;
      letter-spacing:0px;margin-top:4px;text-transform:uppercase;}
    #dwFooterLink{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
      z-index:1;display:block;}
    #dwFooterLogo{width:200px;height:auto;opacity:0.9;display:block;}
    @media(min-width:600px){#dw{display:flex;}#gw{display:none;}}

    /* GAME WRAP */
    #gw{display:flex;flex-direction:column;width:100%;height:100%;}

    /* HEADER — compact, just logo + 2 lines */
    #hdr{
      flex-shrink:0;
      background:#000;
      padding:12px 12px 12px;
      text-align:center;
      border-bottom:1px solid #111;
      z-index:10;
    }
    #logoWrap{
      display:flex;align-items:center;justify-content:center;gap:8px;
      margin:0 auto;width:min(85%,330px);
    }
    #logo-img{display:block;height:auto;max-width:100%;min-width:0;flex:1 1 auto;}
    #igLink{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    #igLink svg{width:22px;height:22px;display:block;}
    .sub1{
      font-weight:700;font-size:clamp(11px,3.3vw,14px);
      color:#e8c832;letter-spacing:2px;
      margin-top:9px;text-transform:uppercase;
    }
    .sub2{
      font-weight:400;font-size:clamp(9px,2.4vw,12px);
      color:#fff;letter-spacing:1px;
      margin-top:3px;text-transform:uppercase;
    }
    #hdrBrand{display:block;margin:8px auto 0;width:200px;height:auto;opacity:0.9;}

    /* ARENA — fills ALL remaining space */
    #arena{
      flex:1;position:relative;overflow:hidden;min-height:0;
    }
    #bench-bg{
      position:absolute;inset:0;
      background-image:url('assets/crowd-bg.webp');
      /* The photo is square and the arena is portrait, so plain "cover" already fits
         the full image height exactly (no vertical crop at all) — sizing it taller than
         that and anchoring to the bottom pushes more of the photo's own grass band into
         view, cropping the crowd/lights a bit off the top instead. */
      background-size:auto 128%;
      background-position:center bottom;
      z-index:1;
    }
    #bench-bg::after{
      content:'';position:absolute;inset:0;
      background:linear-gradient(to bottom,
        rgba(0,0,0,0.1) 0%,
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 55%,
        rgba(0,0,0,0.25) 100%);
    }
    #chair-img{
      position:absolute;left:50%;bottom:18%;
      transform:translateX(-50%);
      width:49.3%;height:auto;max-height:51%;
      z-index:3;pointer-events:none;
    }
    /* decorative side benches — purely background scenery, no game logic */
    .chair-deco{
      position:absolute;bottom:18%;
      width:49.3%;height:auto;max-height:51%;
      z-index:2;pointer-events:none;
    }
    #chair-deco-l{left:-26%;}
    #chair-deco-r{right:-26%;}
    #chair-deco-l2{left:-53%;}
    #chair-deco-r2{right:-53%;}
    #fig-wrap{
      position:absolute;inset:0;
      z-index:5;overflow:hidden;
      pointer-events:all;touch-action:none;cursor:grab;
    }
    #fig-wrap:active{cursor:grabbing;}
    #dollSvg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;}
    #wobble{
      position:absolute;top:10%;left:0;right:0;
      text-align:center;font-weight:700;
      font-size:clamp(16px,5vw,22px);
      letter-spacing:2px;color:#e8c832;
      opacity:0;transition:opacity 0.15s;
      pointer-events:none;z-index:20;
      text-shadow:0 2px 8px rgba(0,0,0,1);
    }
    #pb{position:absolute;bottom:0;left:0;height:3px;background:#e8c832;width:0%;z-index:20;}
    /* TOP CORNER STAT COUNTERS — purely informational, no game logic */
    .statBox{position:absolute;top:4%;text-align:center;z-index:4;pointer-events:none;}
    #statL{left:4%;}
    #statR{right:4%;}
    .statNum{font-weight:800;font-size:clamp(26px,9vw,38px);color:#fff;line-height:1;}
    .statLabel{font-weight:700;font-size:clamp(9px,2.8vw,11px);color:#fff;
      letter-spacing:1px;margin-top:4px;text-transform:uppercase;line-height:1.3;}
    #ff{position:absolute;inset:0;background:rgba(200,0,0,0);pointer-events:none;z-index:15;transition:background 0.1s;}
    /* SUCCESS MESSAGE — shown over the game while success.mp3 plays, then auto-hides */
    #successMsg{position:absolute;left:0;right:0;top:58%;z-index:25;
      display:none;flex-direction:column;align-items:center;gap:10px;
      pointer-events:none;padding:0 26px;}
    .successBox{background:#000;color:#fff;font-weight:800;
      font-size:clamp(18px,6.5vw,26px);line-height:1.2;text-align:center;
      border-radius:18px;padding:12px 22px;text-transform:uppercase;}

    /* OVERLAYS */
    .ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:50;background:rgba(0,0,0,0.9);}
    /* #rmsg is now a direct child of <body> (not #arena), so it can cover
       the whole screen including #hdr — needs fixed + a z-index above #hdr's.
       It's just the dimmed backdrop now; the card itself (.storyWrap) is
       sized smaller so the game stays visible around it, like a modal. */
    #rmsg{position:fixed;inset:0;width:100%;height:100%;z-index:200;
      background:rgba(0,0,0,0.6);}

    /* FAILURE MESSAGE — modal "story" card over the game (not full-screen):
       bg image, header image (bars+avatar+name baked into messages-header.png),
       message boxes, white CTA. */
    .storyWrap{position:relative;width:min(86vw,380px);height:min(78vh,640px);
      border-radius:26px;overflow:hidden;background:#000;
      box-shadow:0 12px 40px rgba(0,0,0,0.6);}
    .storyBg{position:absolute;inset:0;width:100%;height:100%;
      background-image:url('assets/messages-bg.png');
      background-size:cover;background-position:center;}
    .storyHeaderRow{position:relative;z-index:2;width:100%;
      box-sizing:border-box;padding:18px 20px 0;}
    .storyHeaderImg{display:block;width:100%;height:auto;}
    .storyClose{position:absolute;top:50%;right:4%;transform:translateY(-50%);
      background:none;border:none;color:#111;font-size:28px;
      line-height:1;cursor:pointer;padding:4px;font-weight:700;}
    .storyBody{position:absolute;left:0;right:0;top:50%;transform:translateY(-65%);
      display:flex;flex-direction:column;align-items:center;gap:14px;
      padding:0 26px;z-index:2;}
    .storyBox{background:#000;color:#fff;font-weight:800;
      font-size:clamp(20px,7.5vw,30px);line-height:1.22;text-align:center;
      border-radius:18px;padding:14px 22px;text-transform:uppercase;}
    .storyBtn{position:absolute;bottom:7%;left:24px;right:24px;
      background:#fff;color:#111;border:none;border-radius:30px;
      padding:16px;font-weight:800;font-size:clamp(15px,4vw,18px);
      letter-spacing:1px;text-transform:uppercase;cursor:pointer;z-index:2;
      font-family:'Roboto',sans-serif;}

    /* GAME FOOTER — overlay sitting directly on the grass at the bottom
       of #arena, no background of its own, so it doesn't take layout
       space away from the figure/chair. */
    #gwFooter{position:absolute;left:0;right:0;bottom:1.5%;text-align:center;z-index:6;pointer-events:none;}
    #gwFooterLink{pointer-events:all;display:inline-block;}
    #gwFooterLogo{width:110px;height:auto;opacity:0.9;display:inline-block;}
    #coachCounter{font-weight:400;font-size:clamp(10px,3vw,13px);color:#fff;
      letter-spacing:0.5px;margin-bottom:6px;text-transform:uppercase;}
    #coachCounter strong{font-weight:800;}