* { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#0b0e12; touch-action:manipulation; }
  #wrap,#gl,#fx,#touchUI { touch-action:none; }
  body { font-family:"Arial Black","Arial Bold",Impact,"Helvetica Neue",Arial,sans-serif; user-select:none; -webkit-user-select:none; }
  #wrap { position:fixed; inset:0; }
  #gl { position:absolute; inset:0; width:100%; height:100%; display:block; }
  #fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }

  /* ---- HUD ---- */
  #hud { position:absolute; inset:0; z-index:4; pointer-events:none; color:#fff;
    font-style:italic; text-shadow:3px 3px 0 rgba(0,0,0,.85); }
  .hidden { display:none !important; }

  #pos { position:absolute; top:18px; left:22px; line-height:.9; }
  #pos .big { font-size:56px; color:#ffd23f; letter-spacing:-2px; }
  #pos .small { font-size:20px; color:#fff; }
  #gap { position:absolute; top:80px; left:24px; font-size:16px; color:#fff; }
  #gap b { color:#ffd23f; }

  #timer { position:absolute; top:18px; left:50%; transform:translateX(-50%) skewX(-6deg); font-size:30px; letter-spacing:1px; }

  #speed { position:absolute; right:26px; bottom:20px; text-align:right; line-height:.85; transform:skewX(-6deg); }
  #speed .num { font-size:72px; letter-spacing:-3px; }
  #speed .unit { font-size:18px; color:#ffd23f; }

  #boostWrap { position:absolute; left:22px; bottom:26px; width:230px; }
  #boostLabel { font-size:14px; margin-bottom:4px; color:#ffd23f; letter-spacing:2px; }
  #boostBar { width:100%; height:20px; border:3px solid #fff; background:rgba(0,0,0,.45); box-shadow:3px 3px 0 rgba(0,0,0,.85); }
  #boostFill { height:100%; width:0%; background:linear-gradient(90deg,#ff8a00,#ff3d00); }
  #boostBar.full #boostFill { background:linear-gradient(90deg,#ffe259,#ff3d00); animation:pulse .5s infinite alternate; }
  @keyframes pulse { from{filter:brightness(1);} to{filter:brightness(1.6);} }

  #prog { position:absolute; right:22px; top:50%; transform:translateY(-50%); width:10px; height:56vh;
    border:3px solid #fff; background:rgba(0,0,0,.4); box-shadow:3px 3px 0 rgba(0,0,0,.85); }
  #prog .dot { position:absolute; left:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
    border:2px solid #000; }
  #prog .dot.me { width:16px; height:16px; margin:-8px 0 0 -8px; border:3px solid #fff; z-index:2; }
  #prog .flag { position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); font-size:15px; font-style:normal; }

  #popups { position:absolute; left:50%; top:32%; transform:translateX(-50%); text-align:center; width:80%; }
  .pop { font-size:42px; color:#ffd23f; letter-spacing:1px; transform:skewX(-8deg);
    animation:popA 1.3s ease-out forwards; margin-top:4px; }
  .pop.small { font-size:24px; color:#fff; animation-duration:.8s; }
  .pop.bad { color:#ff5040; }
  .pop.pow { color:#fff; font-size:52px; }
  .pop.go { color:#59ff7a; font-size:110px; }
  .pop.up { color:#59ff7a; font-size:36px; }
  .pop.down { color:#ff6a5a; font-size:30px; }
  .pop.pb { color:#ffd23f; font-size:48px; }
  @keyframes popA { 0%{opacity:0; transform:skewX(-8deg) scale(.4);} 12%{opacity:1; transform:skewX(-8deg) scale(1.12);}
    24%{transform:skewX(-8deg) scale(1);} 70%{opacity:1;} 100%{opacity:0; transform:skewX(-8deg) scale(1) translateY(-46px);} }

  #count { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); font-size:150px; color:#ffd23f;
    text-shadow:6px 6px 0 rgba(0,0,0,.85); }

  /* trick progress: land after the bar fills (turns green near the end) */
  #trickWrap { position:absolute; left:50%; top:57%; width:170px; height:10px; margin-left:-85px;
    border:2px solid #fff; background:rgba(0,0,0,.45); box-shadow:2px 2px 0 rgba(0,0,0,.8); transform:skewX(-8deg); }
  #trickFill { height:100%; width:0%; background:#ff5040; }
  #trickFill.safe { background:#59ff7a; }

  #muteTag { position:absolute; top:60px; right:26px; font-size:15px; color:#ffd23f; }
  #hint { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:12px; color:rgba(255,255,255,.75);
    font-style:normal; text-shadow:2px 2px 0 rgba(0,0,0,.8); transition:opacity 1s; white-space:nowrap; }

  /* ---- Title screen ---- */
  #title { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center;
    justify-content:center; padding-bottom:16px; color:#fff;
    background:linear-gradient(180deg, rgba(8,12,20,.30), rgba(8,12,20,.62)); text-align:center; }
  #logo { font-style:italic; line-height:.82; letter-spacing:-2px; transform:skewX(-8deg) rotate(-2deg); }
  #logo .l1 { font-size:min(11vw,92px); color:#fff;
    text-shadow:3px 3px 0 #143, 6px 6px 0 rgba(0,0,0,.9); }
  #logo .l2 { font-size:min(14vw,120px); color:#ffd23f;
    text-shadow:3px 3px 0 #a33, 7px 7px 0 rgba(0,0,0,.9); }
  #tag { margin-top:14px; font-size:15px; font-style:italic; color:#cfe; text-shadow:2px 2px 0 #000; }
  #bestLine { margin-top:8px; font-size:17px; font-style:italic; color:#ffd23f; text-shadow:2px 2px 0 #000; letter-spacing:1px; }
  #chalLine { margin-top:4px; font-size:16px; font-style:italic; color:#59ff7a; text-shadow:2px 2px 0 #000; letter-spacing:1px; }
  #levelRow { margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:700px; }
  .lvlBtn { pointer-events:auto; cursor:pointer; font:italic 900 12px "Arial Black","Arial Bold",Impact,sans-serif;
    color:#9fd; background:rgba(10,16,24,.55); border:2px solid rgba(160,220,255,.35); border-radius:6px;
    padding:6px 9px; letter-spacing:.5px; text-shadow:2px 2px 0 #000; }
  .lvlBtn:hover { color:#fff; border-color:#fff; }
  .lvlBtn.on { color:#0b0e12; background:#ffd23f; border-color:#ffd23f; text-shadow:none; }
  #mpRow { margin-top:10px; }
  #mpRow .lvlBtn { color:#59ff7a; border-color:rgba(89,255,122,.45); font-size:13px; padding:7px 14px; }
  #mpRow .lvlBtn:hover { color:#fff; border-color:#fff; }

  /* ---- multiplayer panel ---- */
  #mpPanel { position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center;
    background:rgba(5,8,14,.72); pointer-events:auto; }
  #mpBox { width:min(480px,92vw); max-height:88vh; overflow-y:auto; background:rgba(10,16,26,.96);
    border:2px solid rgba(160,220,255,.35); border-radius:12px; padding:18px 20px; color:#fff;
    font-style:italic; text-align:center; text-shadow:2px 2px 0 #000; }
  #mpTitle { font-size:24px; color:#ffd23f; letter-spacing:1px; margin-bottom:12px; }
  .mpLabel { display:block; font-size:13px; color:#9fd; margin-bottom:10px; }
  #mpBox input[type=text], #mpBox input:not([type]) { font:italic 900 16px "Arial Black",Impact,sans-serif;
    background:#0b0e12; color:#fff; border:2px solid rgba(160,220,255,.35); border-radius:6px;
    padding:7px 10px; width:170px; text-align:center; text-transform:uppercase; }
  .mpOpts { display:flex; gap:18px; justify-content:center; font-size:13px; color:#cfe; margin:8px 0 12px; }
  .mpOpts input { accent-color:#ffd23f; transform:scale(1.3); margin-right:5px; }
  .mpBig { display:block; margin:8px auto; width:min(320px,80%); font:italic 900 15px "Arial Black",Impact,sans-serif;
    color:#0b0e12; background:#ffd23f; border:0; border-radius:8px; padding:10px 0; cursor:pointer; }
  .mpBig:hover { background:#fff; }
  .mpBig:disabled { background:rgba(255,255,255,.25); color:rgba(0,0,0,.5); cursor:default; }
  .mpJoinRow { display:flex; gap:8px; justify-content:center; align-items:center; margin:2px 0 10px; }
  .mpJoinRow input { width:90px !important; letter-spacing:3px; }
  .mpJoinRow .mpBig { margin:0; width:auto; padding:10px 18px; }
  .mpHead { font-size:12px; color:#9fd; letter-spacing:1px; margin:10px 0 6px; }
  #mpRooms { display:flex; flex-direction:column; gap:6px; align-items:center; min-height:30px; }
  .mpRoomBtn { width:min(340px,88%); }
  .mpHint { font-size:12px; color:rgba(255,255,255,.5); }
  #mpRoomCode { font-size:22px; color:#59ff7a; letter-spacing:3px; margin-bottom:6px; }
  #mpPlayers { margin:10px 0; display:flex; flex-direction:column; gap:5px; align-items:center; font-size:15px; }
  .mpPlayer b { color:#ffd23f; font-size:11px; margin-left:6px; }
  .mpPlayer b.rdy { color:#59ff7a; }
  .mpPlayer .chip { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:8px; }
  #mpLevelLine { font-size:13px; color:#9fd; margin:6px 0 4px; }
  #mpLevel { font:italic 900 14px "Arial Black",Impact,sans-serif; background:#0b0e12; color:#fff;
    border:2px solid rgba(160,220,255,.35); border-radius:6px; padding:6px 10px; margin-bottom:6px; }
  #mpMsg { min-height:18px; font-size:13px; color:#ff8a7a; margin-top:8px; }
  #mpClose { margin-top:10px; font:italic 900 13px "Arial Black",Impact,sans-serif; color:#9fd;
    background:none; border:2px solid rgba(160,220,255,.35); border-radius:6px; padding:6px 14px; cursor:pointer; }
  #mpClose:hover { color:#fff; border-color:#fff; }
  #modeTag { position:absolute; top:50px; left:50%; transform:translateX(-50%) skewX(-6deg); font-size:14px; color:#ffd23f; }
  #target { position:absolute; top:70px; left:50%; transform:translateX(-50%) skewX(-6deg); font-size:15px; color:#59ff7a; }
  #chalBtn, #homeBtn, #shareBtn { display:block; margin:14px auto 0; padding:8px 14px; font-family:inherit; font-style:italic; font-weight:900;
    font-size:14px; color:#fff; background:rgba(255,140,0,.35); border:2px solid #fff; box-shadow:3px 3px 0 rgba(0,0,0,.7);
    cursor:pointer; letter-spacing:.5px; }
  #chalBtn:hover { background:rgba(255,140,0,.6); }
  #shareBtn { margin-top:8px; background:rgba(90,220,130,.28); }
  #shareBtn:hover { background:rgba(90,220,130,.5); }
  #homeBtn { margin-top:8px; background:rgba(80,140,255,.30); }
  #homeBtn:hover { background:rgba(80,140,255,.55); }
  #resFoot { text-align:center; margin-top:10px; font-size:11px; font-style:italic; }
  #resFoot a { color:#8fb8ff; text-decoration:none; }
  #resFoot a:hover { text-decoration:underline; }
  #fsBtn { position:absolute; top:12px; right:12px; z-index:6; width:38px; height:38px;
    display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff;
    background:rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.5); cursor:pointer;
    opacity:.55; user-select:none; }
  #fsBtn:hover { opacity:1; }
  body.touch #fsBtn { display:none; }   /* touch has its own ⛶ in the button row */
  #controls { margin-top:26px; display:grid; grid-template-columns:auto auto; gap:4px 18px; font-size:14px;
    font-style:normal; text-align:left; background:rgba(0,0,0,.5); padding:14px 22px; border:2px solid rgba(255,255,255,.25); }
  #controls b { color:#ffd23f; font-style:italic; }
  #pressEnter { margin-top:18px; font-size:26px; font-style:italic; color:#fff; text-shadow:3px 3px 0 #000;
    animation:blink 1.1s steps(2) infinite; }
  @keyframes blink { 50% { opacity:.15; } }

  /* ---- Results ---- */
  #results { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center;
    justify-content:center; color:#fff; background:rgba(5,8,14,.45); overflow-y:auto; }
  #resPanel { position:relative; background:rgba(0,0,0,.72); border:3px solid #fff; box-shadow:6px 6px 0 rgba(0,0,0,.7); padding:22px 34px; min-width:min(480px,92vw); margin:auto; }
  #rankStamp { position:absolute; top:-22px; right:-18px; font-size:58px; font-style:italic; font-weight:900;
    padding:0 16px; border:4px solid currentColor; border-radius:8px; transform:rotate(12deg);
    background:rgba(0,0,0,.65); text-shadow:3px 3px 0 rgba(0,0,0,.8); }
  #rankStamp.S { color:#ffd23f; } #rankStamp.A { color:#59ff7a; } #rankStamp.B { color:#6fc3ff; }
  #rankStamp.C { color:#fff; } #rankStamp.D { color:#ff7a6f; }
  #rankStamp .rg { line-height:1.05; text-align:center; }
  #rankStamp .rl { font-size:11px; letter-spacing:1.5px; text-align:center; margin:-3px 0 8px; font-weight:700; }
  #resTitle { font-style:italic; font-size:44px; color:#ffd23f; text-shadow:3px 3px 0 #000; text-align:center; letter-spacing:1px; }
  #resSub { text-align:center; font-size:15px; margin:2px 0 4px; color:#9fd; font-style:italic; }
  #resRecap { text-align:center; font-size:13px; margin:0 0 4px; color:#cfe3ff; font-style:italic; max-width:440px; }
  #resStats { text-align:center; font-size:12px; margin:0 0 12px; color:#ffd23f; font-style:italic; letter-spacing:.5px; }
  #resTable { width:100%; border-collapse:collapse; font-size:17px; }
  #resTable td { padding:5px 10px; border-bottom:1px solid rgba(255,255,255,.18); font-style:italic; }
  #resTable tr.me td { color:#ffd23f; background:rgba(255,210,63,.12); }
  #resTable .chip { display:inline-block; width:13px; height:13px; border:1px solid #000; margin-right:7px; }
  #resAgain { margin-top:18px; font-size:20px; font-style:italic; color:#fff; animation:blink 1.2s steps(2) infinite; text-align:center; }

  #fatal { position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center;
    color:#fff; background:#301010; font-size:16px; padding:30px; text-align:center; font-style:normal; }

  #hitflash { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
    background:radial-gradient(ellipse at center, rgba(255,40,20,.12) 30%, rgba(255,30,15,.5) 100%); }
  #hitflash.flash { animation:hitA .5s ease-out; }
  @keyframes hitA { 0%{opacity:1;} 100%{opacity:0;} }

  /* ---- touch controls (shown only on coarse-pointer devices) ---- */
  #touchUI { position:absolute; inset:0; z-index:4; pointer-events:none; font-style:normal; }
  .tbtn { position:absolute; pointer-events:auto; display:flex; align-items:center; justify-content:center;
    border:3px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(10,14,22,.38);
    color:#fff; font-weight:900; font-size:15px; line-height:1; text-align:center;
    text-shadow:2px 2px 0 rgba(0,0,0,.8); box-shadow:3px 3px 0 rgba(0,0,0,.45);
    touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
  .tbtn.on, .tbtn:active { background:rgba(255,140,0,.6); border-color:#ffd23f; }
  #tLeft  { left:calc(14px + env(safe-area-inset-left)); bottom:calc(16px + env(safe-area-inset-bottom)); width:86px; height:86px; font-size:34px; }
  #tRight { left:calc(114px + env(safe-area-inset-left)); bottom:calc(16px + env(safe-area-inset-bottom)); width:86px; height:86px; font-size:34px; }
  #tBrake { left:calc(58px + env(safe-area-inset-left)); bottom:calc(116px + env(safe-area-inset-bottom)); width:64px; height:64px; font-size:12px; }
  #tJump  { right:calc(14px + env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); width:92px; height:92px; }
  #tPunch { right:calc(116px + env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); width:66px; height:66px; font-size:26px; }
  #tKick  { right:calc(190px + env(safe-area-inset-right)); bottom:calc(26px + env(safe-area-inset-bottom)); width:60px; height:60px; font-size:24px; }
  #tBoost { right:calc(140px + env(safe-area-inset-right)); bottom:calc(142px + env(safe-area-inset-bottom)); width:74px; height:74px; font-size:14px; }
  .tbtn.trick { width:56px; height:56px; font-size:10px; }
  #tT1 { right:calc(16px + env(safe-area-inset-right)); bottom:calc(122px + env(safe-area-inset-bottom)); }
  #tT2 { right:calc(74px + env(safe-area-inset-right)); bottom:calc(122px + env(safe-area-inset-bottom)); }
  #tT3 { right:calc(16px + env(safe-area-inset-right)); bottom:calc(182px + env(safe-area-inset-bottom)); }
  #tT4 { right:calc(74px + env(safe-area-inset-right)); bottom:calc(182px + env(safe-area-inset-bottom)); }
  .tbtn.tiny { width:44px; height:44px; font-size:18px; border-width:2px; }
  #tGhost { top:calc(12px + env(safe-area-inset-top)); right:calc(220px + env(safe-area-inset-right)); }
  #tMute { top:calc(12px + env(safe-area-inset-top)); right:calc(168px + env(safe-area-inset-right)); }
  #tRestart { top:calc(12px + env(safe-area-inset-top)); right:calc(116px + env(safe-area-inset-right)); }
  #tHome { top:calc(12px + env(safe-area-inset-top)); right:calc(64px + env(safe-area-inset-right)); }
  #tFull { top:calc(12px + env(safe-area-inset-top)); right:calc(12px + env(safe-area-inset-right)); }

  #rotate { position:absolute; inset:0; z-index:7; display:none; flex-direction:column; gap:8px;
    align-items:center; justify-content:center; text-align:center; background:rgba(8,12,18,.88);
    color:#ffd23f; font-style:italic; font-size:26px; pointer-events:none; text-shadow:3px 3px 0 #000; }
  @media (orientation:portrait){ body.touch #rotate { display:flex; } }

  /* ---- compact HUD on touch devices / small screens ---- */
  body.touch #hint, body.touch #muteTag { display:none; }
  /* compact results on touch: the panel scrolls instead of clipping, and the
     grade stamp moves inline where it can actually be read */
  body.touch #results { padding:8px 0; }
  body.touch #resPanel { padding:8px 14px; min-width:min(420px,94vw); max-width:94vw; }
  body.touch #rankStamp { position:static; width:fit-content; margin:0 auto 2px; transform:rotate(-2deg);
    font-size:30px; padding:0 10px; border-width:3px; }
  body.touch #rankStamp .rl { font-size:9px; margin:-2px 0 4px; }
  body.touch #resTitle { font-size:22px; }
  body.touch #resSub { font-size:12px; }
  body.touch #resRecap { font-size:10px; }
  body.touch #resStats { font-size:9px; margin:0 0 6px; }
  body.touch #resTable { font-size:12px; }
  body.touch #resTable td { padding:2px 6px; }
  body.touch #chalBtn, body.touch #homeBtn, body.touch #shareBtn { padding:5px 10px; font-size:11px; margin-top:6px; }
  body.touch #resAgain { font-size:10px; }
  body.touch #resFoot { font-size:9px; margin-top:6px; }
  body.touch #gap { top:66px; left:18px; font-size:13px; }
  body.touch #boostWrap { left:16px; top:94px; bottom:auto; width:150px; }
  body.touch #boostLabel { font-size:11px; }
  body.touch #boostBar { height:14px; border-width:2px; }
  body.touch #speed { right:16px; top:64px; bottom:auto; }
  body.touch #speed .num { font-size:44px; }
  body.touch #speed .unit { font-size:13px; }
  body.touch #prog { height:30vh; top:34%; right:8px; border-width:2px; }
  body.touch #controls { display:none; }
  @media (max-width:940px){
    #pos .big { font-size:38px; } #pos .small { font-size:15px; }
    #timer { font-size:20px; top:14px; }
    #count { font-size:92px; }
    .pop { font-size:27px; } .pop.pow { font-size:34px; } .pop.go { font-size:66px; }
    #resTitle { font-size:32px; } #resTable { font-size:14px; } #resPanel { padding:14px 18px; }
    #logo .l1 { font-size:min(11vw,64px); } #logo .l2 { font-size:min(14vw,84px); }
    #tag { font-size:12px; padding:0 14px; } #pressEnter { font-size:20px; }
  }