* { margin:0; padding:0; box-sizing:border-box; }
  html,body { overflow:hidden; height:100%; background:#87c5eb; font-family:'Segoe UI',system-ui,sans-serif; user-select:none; }
  canvas { display:block; }

  #hud { position:fixed; top:14px; left:14px; z-index:10; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.5); pointer-events:none; }
  #score { font-size:34px; font-weight:800; }
  #coins { font-size:18px; font-weight:600; margin-top:2px; }
  #rank  { font-size:13px; opacity:.9; margin-top:2px; letter-spacing:1px; text-transform:uppercase; }
  #ammo  { font-size:22px; margin-top:8px; letter-spacing:2px; }
  #stars { font-size:18px; margin-top:6px; color:#ffd23f; letter-spacing:3px;
           text-shadow:0 0 12px rgba(255,60,40,.9); }
  #hearts { font-size:16px; margin-top:8px; letter-spacing:1px; }
  #hurtFx { position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; transition:opacity .5s;
            background:radial-gradient(ellipse at center, transparent 40%, rgba(200,20,20,.55) 100%); }
  .goStat { font-size:15px; margin:6px 0; color:#cdd6e4; }
  .goStat b { color:#ffd23f; }
  #combo { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:10;
           font-size:28px; font-weight:900; color:#ffd23f; text-shadow:0 2px 6px rgba(0,0,0,.6);
           pointer-events:none; transition:opacity .3s; }
  #hint { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:10;
          color:rgba(255,255,255,.85); font-size:13px; text-shadow:0 1px 3px rgba(0,0,0,.6); pointer-events:none; }
  #toast { position:fixed; top:22%; left:50%; transform:translateX(-50%); z-index:10; font-size:22px; font-weight:800;
           color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.7); pointer-events:none; opacity:0; transition:opacity .4s; }

  #labels { position:fixed; inset:0; z-index:9; pointer-events:none; overflow:hidden; }
  .flab { position:absolute; font-weight:900; font-size:20px; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,.7); white-space:nowrap; transform:translate(-50%,-50%); }
  .flab.big { font-size:26px; color:#ffd23f; }
  .flab.miss { font-size:15px; color:#bbb; }

  #boardWrap { position:fixed; top:178px; right:14px; z-index:10; display:flex; flex-direction:column;
               gap:8px; align-items:flex-end; pointer-events:none; }
  #board, #altBoard { background:rgba(10,14,20,.55);
           border-radius:10px; padding:10px 14px; color:#fff; font-size:12.5px; display:none;
           pointer-events:none; min-width:150px; backdrop-filter:blur(4px); }
  #board b, #altBoard b { color:#ffd23f; font-size:11px; letter-spacing:2px; }
  .brow { margin-top:4px; white-space:nowrap; }
  .brow.me { color:#ffd23f; font-weight:700; }
  .gr { margin-top:2px; white-space:nowrap; }
  .gr.me { color:#ffd23f; font-weight:700; }
  .gr.dim { opacity:.65; font-style:italic; }
  #nameRow input { background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.28); border-radius:24px;
                   color:#fff; font-size:15px; font-weight:700; text-align:center; padding:10px 18px;
                   width:280px; outline:none; transition:border-color .15s, box-shadow .15s; }
  #nameRow input::placeholder { color:#8fa0bd; }
  #nameRow input:focus { border-color:#ffd23f; box-shadow:0 0 0 3px rgba(255,210,63,.16); }
  #netStatus { font-size:12px; margin:8px 0 14px; opacity:.9; text-shadow:0 1px 4px rgba(0,0,0,.8); }
  #menuBtns { display:flex; flex-direction:column; gap:9px; align-items:center; margin-bottom:14px; }
  .mbtn { font-size:15px; font-weight:800; padding:11px 0; width:280px; border:1px solid rgba(255,255,255,.25);
          border-radius:26px; cursor:pointer; background:rgba(0,0,0,.42); color:#fff;
          backdrop-filter:blur(4px); transition:background .15s, transform .1s; letter-spacing:1px; }
  .mbtn:hover { background:rgba(255,255,255,.16); transform:translateY(-1px); }
  .mbtn.primary { background:linear-gradient(180deg,#ffe066,#f0b428); color:#332a10; border:none;
                  font-size:21px; padding:14px 0; box-shadow:0 6px 0 #b8901c, 0 12px 30px rgba(0,0,0,.4); }
  .mbtn.primary:active { transform:translateY(3px); box-shadow:0 2px 0 #b8901c; }
  .panel { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50; display:none;
           background:rgba(12,16,26,.96); border:1px solid rgba(255,255,255,.15); border-radius:20px;
           padding:30px 36px; color:#fff; text-align:center; min-width:340px; max-width:90vw;
           max-height:85vh; overflow-y:auto; backdrop-filter:blur(10px);
           box-shadow:0 24px 80px rgba(0,0,0,.6); }
  .panel h2 { font-size:24px; font-weight:900; margin-bottom:18px; letter-spacing:1px; }
  .panel .mbtn { margin-top:9px; }
  #langRow { display:flex; gap:8px; align-items:center; justify-content:center; width:280px; margin:9px auto 0; }
  #langRow .langIco { font-size:18px; }
  .lbtn { flex:1; font:inherit; font-size:14px; font-weight:800; padding:9px 0; letter-spacing:1px;
          border:1px solid rgba(255,255,255,.25); border-radius:26px; cursor:pointer;
          background:rgba(0,0,0,.42); color:#fff; transition:background .15s, transform .1s; }
  .lbtn:hover { background:rgba(255,255,255,.16); transform:translateY(-1px); }
  .lbtn.active { background:linear-gradient(180deg,#ffe066,#f0b428); color:#332a10; border-color:transparent; }
  #helpGrid { display:grid; grid-template-columns:auto auto; gap:5px 18px; text-align:left;
              font-size:14px; margin-bottom:14px; }
  #helpGrid b { color:#ffd23f; }
  .helpTxt { font-size:13px; color:#aab6c8; text-align:left; max-width:420px; margin-bottom:8px; line-height:1.5; }
  #shop { position:fixed; inset:0; z-index:45; display:none; overflow-y:auto; color:#fff;
          background: radial-gradient(900px 600px at 15% -5%, rgba(90,130,255,.18), transparent 60%),
                      radial-gradient(700px 500px at 90% 10%, rgba(255,170,60,.13), transparent 60%),
                      rgba(9,12,19,.94);
          backdrop-filter: blur(12px); padding:26px 5vw 70px; }
  #shopHead { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
              position:sticky; top:0; z-index:2; margin:0 -14px; padding:12px 14px;
              background:rgba(9,12,19,.8); backdrop-filter:blur(10px);
              border-bottom:1px solid rgba(255,255,255,.08); animation:shopIn .4s ease-out backwards; }
  #shopHead h1 { font-size:32px; font-weight:900; letter-spacing:1px;
              background:linear-gradient(180deg,#ffe98f,#f5a623); -webkit-background-clip:text;
              background-clip:text; -webkit-text-fill-color:transparent;
              filter:drop-shadow(0 4px 14px rgba(0,0,0,.55)); }
  #shopHead h1 .sub { display:block; font-size:10.5px; font-weight:800; letter-spacing:3px;
              color:#8fa3c8; -webkit-text-fill-color:#8fa3c8; margin-top:2px; text-transform:uppercase; }
  #shopCoins { font-size:19px; font-weight:900; color:#ffd23f; padding:8px 18px; border-radius:24px;
              background:rgba(255,210,63,.1); border:1px solid rgba(255,210,63,.4);
              box-shadow:inset 0 0 18px rgba(255,210,63,.12); }
  #shopClose { padding:10px 22px; background:rgba(255,255,255,.1); color:#fff;
               border:1px solid rgba(255,255,255,.25); border-radius:24px; cursor:pointer;
               font-weight:700; font-size:14px; transition:background .15s, transform .15s; }
  #shopClose:hover { background:rgba(255,255,255,.22); transform:translateY(-1px); }
  .sec { display:flex; align-items:baseline; gap:12px; font-size:14px; font-weight:900; letter-spacing:4px;
         color:#ffd23f; margin:34px 0 14px; text-transform:uppercase;
         animation:shopIn .45s ease-out backwards; }
  .sec .cnt { font-size:10px; font-weight:800; color:#8fa3c8; letter-spacing:2px; }
  .sec::after { content:''; flex:1; align-self:center; height:1px;
         background:linear-gradient(90deg, rgba(255,210,63,.35), rgba(255,255,255,.05)); }
  .sgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
  .card { display:flex; flex-direction:column;
          background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
          border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:16px;
          transition:transform .15s, border-color .15s, box-shadow .15s;
          animation:shopIn .4s cubic-bezier(.22,1.1,.36,1) backwards;
          animation-delay:calc(var(--i,0)*45ms); }
  @keyframes shopIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
  #shopItems.re .card, #shopItems.re .sec, #shopItems.re .statline { animation:none; }
  .card:hover { transform:translateY(-4px); border-color:rgba(255,210,63,.45);
                box-shadow:0 12px 32px rgba(0,0,0,.4); }
  .card.equipped { border-color:rgba(255,210,63,.75);
                box-shadow:0 0 0 1px rgba(255,210,63,.5), 0 8px 26px rgba(255,180,40,.16); }
  .card.locked { opacity:.5; }
  .card .ico { font-size:36px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
  .card .nm { font-weight:800; font-size:16px; margin:6px 0 2px; }
  .card .ds { font-size:12.5px; color:#aab6c8; margin:2px 0 10px; }
  .card .ft { margin-top:auto; padding-top:4px; }
  .pips { display:flex; align-items:center; letter-spacing:3px; font-size:11px; margin-bottom:10px; }
  .pips .on { color:#ffd23f; text-shadow:0 0 7px rgba(255,210,63,.6); } .pips .off { color:#4a5568; }
  .pips .lv { margin-left:auto; letter-spacing:1px; font-size:10.5px; font-weight:800; color:#8fa3c8; }
  .buy { background:linear-gradient(180deg,#ffd94f,#f0b428); border:none; border-radius:20px;
         padding:8px 20px; font-weight:900; cursor:pointer; font-size:13px; color:#332a10;
         box-shadow:0 3px 0 #b8901c; transition:transform .12s, filter .15s, box-shadow .12s; }
  .buy:hover { filter:brightness(1.12); transform:translateY(-1px); }
  .buy:active { transform:translateY(2px); box-shadow:0 1px 0 #b8901c; }
  .buy:disabled { background:rgba(255,255,255,.06); color:#7a8595; cursor:default; filter:none;
         box-shadow:none; border:1px solid rgba(255,255,255,.12); transform:none; }
  .chip { display:inline-block; font-size:11px; font-weight:900; letter-spacing:2px;
          padding:7px 15px; border-radius:20px; }
  .chip.max { color:#59ff8c; background:rgba(89,255,140,.1); border:1px solid rgba(89,255,140,.4); }
  .chip.eq { color:#ffd23f; background:rgba(255,210,63,.12); border:1px solid rgba(255,210,63,.5); }
  .skinprev { display:flex; justify-content:center; background:rgba(0,0,0,.28); border-radius:12px;
              padding:8px 0; margin-bottom:8px; }
  .statline { margin-top:30px; color:#8fa3c8; font-size:13px; text-align:center;
              animation:shopIn .45s .2s ease-out backwards; }

  #rankBar { width:150px; height:5px; background:rgba(255,255,255,.25); border-radius:3px; margin-top:4px; }
  #rankFill { height:100%; width:0; background:#ffd23f; border-radius:3px; transition:width .3s; }
  #bellyWrap { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:15px; }
  #bellyBar { width:132px; height:9px; background:rgba(255,255,255,.25); border-radius:5px; overflow:hidden; }
  #bellyFill { height:100%; width:60%; background:linear-gradient(90deg,#e8b45b,#d98a3b); border-radius:5px; transition:width .15s, background .3s; }
  #bellyFill.empty { background:linear-gradient(90deg,#c0392b,#e74c3c); }
  #stamWrap { display:flex; align-items:center; gap:6px; margin-top:5px; font-size:15px; }
  #stamBar { width:132px; height:7px; background:rgba(255,255,255,.25); border-radius:4px; overflow:hidden; }
  #stamFill { height:100%; width:100%; background:linear-gradient(90deg,#ffd23f,#ff9a2e); border-radius:4px; transition:width .1s, background .3s; }
  #stamFill.low { background:linear-gradient(90deg,#e74c3c,#ff9a2e); }
  #stamFill.zap { background:linear-gradient(90deg,#fff6c8,#ffe14d); box-shadow:0 0 10px rgba(255,225,77,.9); }
  #speedlines { position:fixed; inset:0; z-index:5; pointer-events:none; display:none; }
  #district { font-size:13px; font-weight:700; margin-top:8px; color:#ffe9a8; }
  #mission { position:fixed; left:14px; bottom:14px; z-index:10; background:rgba(10,14,20,.55);
             color:#fff; padding:10px 14px; border-radius:10px; font-size:14px; pointer-events:none;
             display:none; max-width:340px; backdrop-filter:blur(4px); }
  #mission b { color:#ffd23f; }
  #quests { position:fixed; left:14px; bottom:96px; z-index:10; background:rgba(10,14,20,.55);
            color:#fff; padding:9px 14px; border-radius:10px; font-size:12px; pointer-events:none;
            display:none; max-width:340px; backdrop-filter:blur(4px); }
  #quests b { color:#8fd8ff; font-size:10.5px; letter-spacing:2px; display:block; margin-bottom:3px; }
  .qrow { margin-top:2px; }
  .qrow.qdone { color:#59ff8c; }
  #mini { position:fixed; top:14px; right:14px; z-index:10; border-radius:10px;
          background:rgba(10,14,20,.5); pointer-events:none; }
  #vignette { position:fixed; inset:0; z-index:5; pointer-events:none;
              background:radial-gradient(ellipse at center, transparent 55%, rgba(8,10,25,.38) 100%); }
  #prompt { position:fixed; bottom:44px; left:50%; transform:translateX(-50%); z-index:10;
            color:#fff; font-size:15px; font-weight:800; text-shadow:0 2px 5px rgba(0,0,0,.7);
            background:rgba(10,14,20,.5); padding:6px 16px; border-radius:20px; display:none; pointer-events:none; }
  #landBtn { left:24px; bottom:28px; }
  #viewBtn { left:44px; bottom:122px; width:60px; height:60px; font-size:26px; }
  #bountyHud { position:fixed; top:52px; left:50%; transform:translateX(-50%); z-index:10;
               font-size:16px; font-weight:800; color:#ffd23f; text-shadow:0 2px 5px rgba(0,0,0,.6);
               pointer-events:none; display:none; }
  #bossBar { position:fixed; top:86px; left:50%; transform:translateX(-50%); z-index:10; text-align:center;
             display:none; pointer-events:none; }
  #bossBar .bn { font-size:12px; font-weight:900; letter-spacing:3px; color:#ff8a7a;
                 text-shadow:0 2px 6px rgba(0,0,0,.7); }
  #bossHP { font-size:19px; letter-spacing:2px; text-shadow:0 2px 6px rgba(0,0,0,.6); }
  #gullBar { position:fixed; top:86px; left:50%; transform:translateX(-50%); z-index:10; text-align:center;
             display:none; pointer-events:none; }
  #gullBar .bn { font-size:12px; font-weight:900; letter-spacing:3px; color:#ffd27a;
                 text-shadow:0 2px 6px rgba(0,0,0,.7); }
  #gullHP { font-size:19px; letter-spacing:2px; text-shadow:0 2px 6px rgba(0,0,0,.6); }
  #raceHud { position:fixed; top:118px; left:50%; transform:translateX(-50%); z-index:10;
             font-size:15px; font-weight:800; color:#59ffd8; text-shadow:0 2px 6px rgba(0,0,0,.7);
             pointer-events:none; display:none; }
  #bountyArrow { position:fixed; z-index:11; font-size:26px; text-align:center; pointer-events:none;
                 display:none; transform:translate(-50%,-50%); text-shadow:0 2px 5px rgba(0,0,0,.6); }
  #bountyArrow div { font-size:12px; font-weight:800; color:#ffd23f; }
  #touchUI { display:none; position:fixed; inset:0; z-index:8; }
  #stickZone { position:absolute; left:0; top:0; bottom:0; width:50%; }
  .tbtn { position:absolute; width:74px; height:74px; border-radius:50%; background:rgba(255,255,255,.18);
          border:2px solid rgba(255,255,255,.4); font-size:34px; display:flex; align-items:center;
          justify-content:center; touch-action:none; }
  #poopBtn { right:24px; bottom:28px; }
  #boostBtn { right:44px; bottom:122px; width:60px; height:60px; font-size:26px; }
  #bestLine { font-size:16px; font-weight:700; margin-bottom:8px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.25); }
  #globalTop, #altMenu { font-size:12.5px; margin-bottom:12px; color:#cdd6e4; background:rgba(255,255,255,.05);
               border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:8px 18px;
               display:none; text-align:center; }
  #globalTop b, #altMenu b { color:#ffd23f; font-size:11px; letter-spacing:2px; display:block; margin-bottom:4px; }
  #globalTop .gr { margin-top:2px; }
  #globalTop .gr.me { color:#ffd23f; font-weight:700; }
  #goTop, #altGo { font-size:12.5px; margin:10px 0 4px; color:#cdd6e4; display:none; }
  #goTop b, #altGo b { color:#ffd23f; font-size:11px; letter-spacing:2px; display:block; margin-bottom:4px; }
  #start { position:fixed; inset:0; z-index:30; display:flex; flex-direction:row; align-items:center;
           justify-content:space-between; text-align:center; color:#fff; padding:5vh 4vw 4vh;
           overflow:hidden;
           background:radial-gradient(58vw 88vh at 5% 50%, rgba(6,10,22,.5), transparent 62%),
                      radial-gradient(58vw 88vh at 95% 50%, rgba(6,10,22,.5), transparent 62%),
                      linear-gradient(180deg, rgba(6,10,22,.6) 0%, rgba(6,10,22,.12) 28%,
                      rgba(6,10,22,0) 55%, rgba(6,10,22,.72) 100%); }
  .s-top, .s-bottom { display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
  .menu #start .s-top { animation:sRise .6s cubic-bezier(.22,1.1,.36,1) backwards; }
  .menu #start .s-bottom { animation:sRise .6s .18s cubic-bezier(.22,1.1,.36,1) backwards; }
  @keyframes sRise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
  #start .emoji { font-size:44px; margin-bottom:2px; animation:sBob 3.4s ease-in-out infinite; }
  @keyframes sBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
  .wordmark { position:relative; padding:0 14px; }
  .wordmark::before { content:''; position:absolute; inset:-42% -16%; pointer-events:none;
           background:radial-gradient(closest-side, rgba(255,210,63,.20), transparent 72%); }
  .splatMark { position:absolute; top:-20px; right:-14px; font-size:36px; pointer-events:none;
           filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation:splatWob 2.6s ease-in-out infinite; }
  @keyframes splatWob { 0%,100% { transform:rotate(10deg) translateY(0); } 50% { transform:rotate(24deg) translateY(-7px); } }
  #start h1 { position:relative; font-size:74px; font-weight:900; letter-spacing:5px; line-height:1.05;
              transform:rotate(-2deg); filter:drop-shadow(0 6px 18px rgba(0,0,0,.65));
              animation:sBobTilt 4.6s ease-in-out 1.2s infinite; }
  @keyframes sBobTilt { 0%,100% { transform:rotate(-2deg) translateY(0); } 50% { transform:rotate(-2deg) translateY(-7px); } }
  #start h1 .wl { display:inline-block; background:linear-gradient(180deg,#ffffff,#b9d6ff);
              -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  #start h1 .wl.w2 { background:linear-gradient(180deg,#ffe98f,#f5a623);
              -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .menu #start h1 .wl { animation:wlPop .55s cubic-bezier(.2,1.5,.4,1) backwards; }
  .menu #start h1 .wl:nth-of-type(1) { animation-delay:.08s; }
  .menu #start h1 .wl:nth-of-type(2) { animation-delay:.13s; }
  .menu #start h1 .wl:nth-of-type(3) { animation-delay:.18s; }
  .menu #start h1 .wl:nth-of-type(4) { animation-delay:.23s; }
  .menu #start h1 .wl:nth-of-type(5) { animation-delay:.28s; }
  .menu #start h1 .wl:nth-of-type(6) { animation-delay:.33s; }
  .menu #start h1 .wl:nth-of-type(7) { animation-delay:.43s; }
  .menu #start h1 .wl:nth-of-type(8) { animation-delay:.48s; }
  .menu #start h1 .wl:nth-of-type(9) { animation-delay:.53s; }
  .menu #start h1 .wl:nth-of-type(10) { animation-delay:.58s; }
  .menu #start h1 .wl:nth-of-type(11) { animation-delay:.63s; }
  .menu #start h1 .wl:nth-of-type(12) { animation-delay:.68s; }
  .menu #start h1 .wl:nth-of-type(13) { animation-delay:.73s; }
  .menu #start h1 .wl:nth-of-type(14) { animation-delay:.78s; }
  @keyframes wlPop { 0% { opacity:0; transform:translateY(34px) scale(.5) rotate(9deg); }
                     70% { opacity:1; transform:translateY(-5px) scale(1.08) rotate(-2deg); }
                     100% { opacity:1; transform:translateY(0) scale(1) rotate(0deg); } }
  #start p.tag { font-size:17px; margin-top:8px; font-style:italic; color:#e9eefb;
              letter-spacing:.5px; text-shadow:0 2px 10px rgba(0,0,0,.8); }
  .menu #start p.tag { animation:sRise .5s .55s ease-out backwards, tagPulse 3s 1.1s ease-in-out infinite; }
  @keyframes tagPulse { 0%,100% { opacity:1; } 50% { opacity:.62; } }
  .skinLabel { margin-top:26px; font-size:10.5px; font-weight:900; letter-spacing:4px; color:#ffd23f;
              text-shadow:0 2px 6px rgba(0,0,0,.8); }
  .menu #start .skinLabel { animation:sRise .5s .68s ease-out backwards; }
  #skinRow { display:flex; align-items:center; gap:10px; margin-top:8px; padding:7px 9px;
             background:rgba(8,13,26,.5); border:1px solid rgba(255,255,255,.16); border-radius:34px;
             backdrop-filter:blur(8px); box-shadow:0 8px 26px rgba(0,0,0,.35); }
  .menu #start #skinRow { animation:sRise .5s .76s ease-out backwards; }
  .sArrow { width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
            background:rgba(255,255,255,.08); color:#ffd23f; font-size:15px; cursor:pointer;
            transition:background .15s, transform .15s; }
  .sArrow:hover { background:rgba(255,210,63,.28); transform:scale(1.08); }
  .sArrow:active { transform:scale(.94); }
  #skinName { font-size:14px; font-weight:800; letter-spacing:3px; text-transform:uppercase;
              text-shadow:0 2px 8px rgba(0,0,0,.85); min-width:180px; }
  .menuCard { display:flex; flex-direction:column; align-items:center; padding:20px 24px 16px;
              background:rgba(8,13,26,.55); border:1px solid rgba(255,255,255,.14); border-radius:26px;
              backdrop-filter:blur(10px); box-shadow:0 18px 50px rgba(0,0,0,.45); max-width:94vw; }
  .cardTitle { font-size:10.5px; font-weight:900; letter-spacing:4px; color:#8fa3c8; margin-bottom:12px; }
  #menuBtns .mbtn:not(.primary) { background:rgba(13,20,38,.5); border-color:rgba(255,255,255,.18);
              transition:background .15s, transform .15s, border-color .15s; }
  #menuBtns .mbtn:not(.primary):hover { background:rgba(255,255,255,.14); transform:translateY(-2px);
              border-color:rgba(255,210,63,.55); }
  .menu #start #menuBtns .mbtn { animation:sRise .45s ease-out backwards; }
  .menu #start #menuBtns .mbtn:nth-child(1) { animation-delay:.34s; }
  .menu #start #menuBtns .mbtn:nth-child(2) { animation-delay:.42s; }
  .menu #start #menuBtns .mbtn:nth-child(3) { animation-delay:.50s; }
  .menu #start #menuBtns .mbtn:nth-child(4) { animation-delay:.58s; }
  #start .drift { position:absolute; z-index:0; pointer-events:none; opacity:.3; }
  #start .drift.d1 { left:10%; top:11%; font-size:40px; animation:driftA 17s ease-in-out infinite alternate; }
  #start .drift.d2 { right:14%; top:22%; font-size:26px; animation:driftA 23s ease-in-out infinite alternate-reverse; }
  #start .drift.d3 { left:19%; bottom:16%; font-size:24px; animation:driftB 13s ease-in-out infinite alternate; }
  @keyframes driftA { from { transform:translate(0,0) rotate(-5deg); } to { transform:translate(46px,16px) rotate(7deg); } }
  @keyframes driftB { from { transform:translate(0,0) rotate(12deg); } to { transform:translate(-34px,-20px) rotate(-9deg); } }
  #controls { display:grid; grid-template-columns:auto auto; gap:4px 16px; text-align:left; font-size:13.5px;
              background:rgba(0,0,0,.38); backdrop-filter:blur(5px); padding:14px 24px;
              border-radius:14px; border:1px solid rgba(255,255,255,.12); margin-bottom:16px; }
  #controls b { color:#ffd23f; }
  #playBtn { position:relative; font-size:24px; font-weight:900; padding:16px 0; width:300px; border:none;
             border-radius:44px; cursor:pointer; letter-spacing:2px;
             background:linear-gradient(180deg,#ffe066,#f0b428); color:#332a10;
             box-shadow:0 6px 0 #b8901c, 0 12px 30px rgba(0,0,0,.4);
             transition:transform .12s, box-shadow .12s, filter .15s; }
  #playBtn::after { content:''; position:absolute; inset:-7px; border-radius:52px; pointer-events:none;
             box-shadow:0 0 26px 7px rgba(255,210,63,.5); opacity:.3;
             animation:glowPulse 1.9s ease-in-out infinite; }
  @keyframes glowPulse { 0%,100% { opacity:.22; transform:scale(.97); } 50% { opacity:.8; transform:scale(1); } }
  #playBtn:hover { transform:translateY(-2px); filter:brightness(1.07); }
  #playBtn:active { transform:translateY(4px); box-shadow:0 2px 0 #b8901c; }
  #loading { font-size:14px; margin-top:12px; opacity:.85; text-shadow:0 2px 6px rgba(0,0,0,.8); }
  @media (max-width:720px), (max-height:540px) {
    #start { padding:3vh 14px 2.5vh; }
    #start h1 { font-size:46px; letter-spacing:3px; }
    #start .emoji { font-size:30px; }
    .splatMark { font-size:24px; top:-14px; right:-8px; }
    #start p.tag { font-size:14px; margin-top:5px; }
    .skinLabel { margin-top:14px; }
    #skinName { min-width:130px; font-size:12px; }
    .sArrow { width:38px; height:38px; }
    .menuCard { padding:13px 14px 10px; border-radius:20px; }
    .cardTitle { margin-bottom:8px; }
    #start #menuBtns { gap:7px; margin-bottom:8px; }
    #start #playBtn { font-size:19px; padding:12px 0; width:280px; }
    #globalTop { font-size:11px; padding:6px 12px; margin-bottom:8px; }
    #start .drift { display:none; }
    #shop { padding:16px 4vw 56px; }
    #shopHead h1 { font-size:23px; }
    #shopHead h1 .sub { letter-spacing:2px; }
    #shopCoins { font-size:15px; padding:6px 13px; }
    #shopClose { padding:8px 14px; font-size:12px; }
    .sgrid { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
    .card { padding:12px; }
    .sec { margin:24px 0 10px; letter-spacing:3px; }
  }
  @media (max-width:720px) and (orientation:portrait) {
    #start { flex-direction:column; justify-content:space-between; }
  }
  .menu #hud, .menu #mini, .menu #hint, .menu #combo, .menu #bountyHud,
  .menu #bountyArrow, .menu #mission, .menu #prompt, .menu #toast,
  .menu #raceHud, .menu #bossBar, .menu #gullBar, .menu #quests, .menu #speedlines { display:none !important; }
  .photo #hud, .photo #mini, .photo #boardWrap, .photo #hint, .photo #combo, .photo #mission,
  .photo #bountyHud, .photo #bountyArrow, .photo #bossBar, .photo #gullBar, .photo #raceHud,
  .photo #labels, .photo #toast, .photo #touchUI, .photo #quests, .photo #speedlines { display:none !important; }
  #debug { top:60%; right:10px; transform:translateY(-50%); z-index:40; display:none;
           flex-direction:column; gap:5px; width:150px; padding:10px; border-radius:10px;
           background:rgba(15,18,26,.92); box-shadow:0 6px 22px rgba(0,0,0,.55); }
  #debug.on { display:flex;position: absolute; }
  #debug .dbgTitle { color:#ffd23f; font-size:13px; font-weight:800; text-align:center; letter-spacing:2px; }
  #debug button { background:#2a3140; color:#dfe6f0; border:1px solid #3d4658; border-radius:6px;
                  padding:6px 8px; font-size:12px; text-align:left; cursor:pointer; }
  #debug button:hover { background:#37415a; }
  #debug .dbgHint { color:#8892a5; font-size:10px; text-align:center; margin-top:2px; }