:root { --ui: rgba(18,24,34,.84); --ui2: rgba(255,255,255,.12); --accent:#ff7a00; --green:#00b06b; --text:#fff; }
  * { box-sizing: border-box; }
  html, body { margin:0; height:100%; overflow:hidden; background:#9fd3f0; color:var(--text); font-family:'Fredoka','Segoe UI',Arial,sans-serif; user-select:none; }
  canvas#game { display:block; touch-action:none; }
  #touch { display:none; }
  body.touch #touch { display:block; }
  body.touch #help { display:none; }
  #stickBase { position:fixed; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.35); display:none; pointer-events:none; z-index:4; }
  #stickKnob { position:absolute; left:37px; top:37px; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.55); }
  #stickHint { position:fixed; left:40px; bottom:40px; width:110px; height:110px; border-radius:50%; border:2px dashed rgba(255,255,255,.35); pointer-events:none; z-index:3; }
  .tbtn { position:fixed; border:none; border-radius:50%; background:rgba(20,24,33,.55); color:#fff; font:700 30px 'Fredoka',sans-serif; z-index:4; touch-action:none; box-shadow:0 0 0 2px rgba(255,255,255,.35) inset; }
  #tJump { right:28px; bottom:34px; width:92px; height:92px; }
  #tAct { right:132px; bottom:30px; width:62px; height:62px; font-size:24px; }
  #tRadio { right:44px; bottom:138px; width:58px; height:58px; font-size:22px; display:none; }
  body.incar #tRadio { display:block; }
  body.touch #prompt { pointer-events:auto; cursor:pointer; bottom:150px; }
  body.touch #side button { width:62px; } body.touch #side button span { font-size:20px; }
  #prompt { pointer-events:auto; cursor:pointer; }
  #vignette { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,.28) 100%); }
  .panel { background:var(--ui); border-radius:14px; padding:10px 14px; }
  #topleft { position:fixed; left:14px; top:14px; display:flex; gap:8px; align-items:center; }
  #title { font-weight:700; font-size:20px; letter-spacing:1px; }
  #title span { color:#ff3b30; }
  #coins, #hearts { font-weight:600; font-size:18px; font-variant-numeric:tabular-nums; }
  #hearts.pulse { animation: hpulse .6s ease; }
  @keyframes hpulse { 0%{ transform:scale(1); } 40%{ transform:scale(1.35); background:#ffd6e7; } 100%{ transform:scale(1); } }
  #place { position:fixed; left:50%; top:14px; transform:translateX(-50%); font-weight:600; font-size:17px; white-space:nowrap; text-align:center; }
  #place small { display:block; font-size:13px; color:#ffb366; font-weight:500; }
  #minimap { position:fixed; right:14px; top:14px; border-radius:50%; border:3px solid rgba(18,24,34,.84); width:190px; cursor:pointer; }
  #bigmap { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:16px; border:4px solid rgba(18,24,34,.9); display:none; z-index:6; max-width:96vw; max-height:92vh; cursor:pointer; box-shadow:0 10px 40px rgba(0,0,0,.5); }
  #side { position:fixed; left:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; }
  #side button { width:74px; border:none; cursor:pointer; color:#fff; background:var(--ui); border-radius:14px; padding:6px 4px 5px; font:600 11.5px 'Fredoka',sans-serif; display:flex; flex-direction:column; align-items:center; gap:1px; box-shadow:0 3px 0 rgba(0,0,0,.35); }
  #side button span { font-size:24px; line-height:1.1; }
  #side button:hover { background:rgba(255,122,0,.85); }
  #side button:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
  #prompt { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); font-size:20px; font-weight:600; display:none; white-space:nowrap; }
  #prompt b { background:#fff; color:#111; border-radius:6px; padding:0 8px; margin:0 3px; }
  #help { position:fixed; left:100px; bottom:14px; font-size:13px; line-height:1.5; max-width:340px; }
  #help b { background:rgba(255,255,255,.18); border-radius:4px; padding:0 5px; }
  #help .h { font-weight:700; font-size:13.5px; margin-top:3px; color:#ffb366; }
  #speedo { position:fixed; right:14px; bottom:14px; text-align:center; display:none; min-width:130px; }
  #dmg { font-size:13px; margin-top:4px; letter-spacing:1px; }
  #speedo .v { font-size:42px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
  #gameHud { position:fixed; left:50%; top:118px; transform:translateX(-50%); font-weight:600; font-size:20px; display:none; text-align:center; white-space:nowrap; pointer-events:none; }
  #gameHud big { display:block; font-size:54px; line-height:1.05; color:#ffd54f; }
  #gameHud small { font-size:13px; opacity:.8; }
  #toast { position:fixed; left:50%; top:74px; transform:translateX(-50%); font-weight:600; font-size:18px; opacity:0; transition:opacity .3s; pointer-events:none; white-space:nowrap; }

  .side-panel { position:fixed; right:14px; top:14px; bottom:14px; width:360px; overflow-y:auto; display:none; z-index:5; padding:16px 18px; }
  .side-panel h2 { margin:0 0 6px; font-size:24px; }
  .side-panel .sec { margin:12px 0 5px; font-weight:600; color:#ffb366; }
  .row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .sw { width:30px; height:30px; border-radius:8px; border:3px solid transparent; cursor:pointer; }
  .sw.sel { border-color:#fff; box-shadow:0 0 0 2px var(--accent); }
  .opt { border:2px solid transparent; background:var(--ui2); color:#fff; border-radius:9px; padding:6px 10px; cursor:pointer; font:500 14px 'Fredoka',sans-serif; }
  .opt.sel { border-color:var(--accent); background:rgba(255,122,0,.3); }
  .opt.big { font-size:16px; padding:9px 12px; }
  .vgrid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
  .vgrid button { border:none; background:var(--ui2); color:#fff; border-radius:12px; padding:12px 8px; cursor:pointer; font:600 15px 'Fredoka',sans-serif; text-align:left; }
  .vgrid button span { font-size:24px; margin-right:6px; vertical-align:middle; }
  .vgrid button:hover, .vgrid button.sel { background:rgba(255,122,0,.45); }
  input[type=color] { width:34px; height:30px; border:none; background:none; padding:0; cursor:pointer; }
  input[type=text] { width:100%; border-radius:9px; border:none; padding:8px 10px; font:500 15px 'Fredoka',sans-serif; }
  .btnrow { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  .btnrow button { flex:1; min-width:120px; border:none; cursor:pointer; color:#fff; font:600 15px 'Fredoka',sans-serif; border-radius:10px; padding:10px; }
  .purple { background:#8e44ad; } .green { background:var(--green); } .red { background:#d63031; } .blue { background:#1e88e5; }
  .note { font-size:13px; opacity:.75; margin-top:6px; }

  #start { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg, rgba(200,40,30,.78), rgba(20,30,60,.88)); z-index:10; padding:16px; }
  #start .card { background:var(--ui); border-radius:20px; padding:24px 30px; max-width:580px; width:100%; text-align:center; max-height:100%; overflow-y:auto; }
  #start h1 { margin:0; font-size:54px; letter-spacing:2px; }
  #start h1 span { color:#ff3b30; }
  #start .xxx { color:#ff3b30; font-size:26px; letter-spacing:6px; margin-bottom:4px; }
  #start p { margin:6px 0 14px; opacity:.88; }
  #start table { margin:0 auto 18px; text-align:left; border-collapse:collapse; font-size:15px; }
  #start td { padding:3px 10px; vertical-align:top; }
  #start td:first-child { font-weight:600; color:#ffb366; white-space:nowrap; }
  .bigbtn { border:none; cursor:pointer; color:#fff; font:700 22px 'Fredoka',sans-serif; background:var(--green); border-radius:14px; padding:12px 40px; box-shadow:0 5px 0 #007a49; }
  .bigbtn:active { transform:translateY(3px); box-shadow:0 2px 0 #007a49; }
  #err { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:#1b2330; color:#fff; z-index:20; text-align:center; padding:20px; font-size:18px; }
  @media (max-width: 760px) {
    .side-panel { left:14px; right:14px; top:auto; width:auto; height:55%; }
    #help, #place { display:none; }
    #minimap { width:130px; }
  }
  #menuBtn { display:none; }
  #coords { position:fixed; left:50%; bottom:3px; transform:translateX(-50%); font:600 11px 'Fredoka',sans-serif; color:rgba(255,255,255,.72); text-shadow:0 1px 2px rgba(0,0,0,.7); pointer-events:none; z-index:4; letter-spacing:.3px; white-space:nowrap; }
  #mission { position:fixed; left:14px; top:66px; font-size:14px; max-width:330px; padding:7px 12px; line-height:1.3; }
  #mission b { color:#ffd54f; } #mission span { color:#9be59b; font-weight:600; white-space:nowrap; }
  #mission.pulse { animation: hpulse .7s ease; }
  @media (max-width: 760px), (max-height: 520px) {
    #title, #place, #help, #vignette { display:none !important; }
    #topleft { left:8px; top:8px; gap:5px; }
    #coins, #hearts { font-size:13px; padding:4px 8px; border-radius:10px; }
    #menuBtn { display:block; padding:4px 10px; font:700 16px 'Fredoka',sans-serif; border:none; color:#fff; cursor:pointer; border-radius:10px; }
    body.menuOpen #menuBtn { background:rgba(255,122,0,.9); }
    #side { display:none; top:42px; left:8px; transform:none; flex-direction:row; flex-wrap:wrap; max-width:calc(100vw - 120px); gap:5px; z-index:6; }
    body.menuOpen #side { display:flex; }
    #side button, body.touch #side button { width:58px; font-size:9.5px; padding:4px 2px; border-radius:10px; }
    #side button span, body.touch #side button span { font-size:18px; }
    #minimap { width:92px; right:8px; top:8px; border-width:2px; }
    #mission { top:40px; left:8px; font-size:11px; max-width:calc(100vw - 120px); padding:4px 8px; border-radius:10px; }
    body.menuOpen #mission { display:none; }
    #toast { top:auto; bottom:calc(50% + 40px); font-size:13px; white-space:normal; max-width:86vw; text-align:center; padding:6px 10px; }
    #prompt, body.touch #prompt { font-size:14px; bottom:96px; padding:6px 10px; }
    #prompt b { padding:0 5px; }
    #speedo { left:50%; right:auto; transform:translateX(-50%); top:8px; bottom:auto; min-width:0; padding:3px 10px; font-size:11px; }
    #speedo .v { font-size:20px; display:inline; } #dmg { display:inline; margin:0 0 0 6px; font-size:10px; }
    #gameHud { top:60px; font-size:14px; } #gameHud big { font-size:30px; }
    #tJump { width:70px; height:70px; right:16px; bottom:18px; font-size:24px; }
    #tAct { width:50px; height:50px; right:96px; bottom:16px; font-size:20px; }
    #tRadio { width:46px; height:46px; right:28px; bottom:98px; font-size:18px; }
    #stickHint { left:22px; bottom:22px; width:84px; height:84px; }
    .side-panel { padding:10px 12px; } .side-panel h2 { font-size:18px; }
    #start .card { padding:14px 16px; } #start h1 { font-size:34px; } #start table { font-size:12px; } #start p { font-size:13px; }
  }
  @media (max-height: 520px) {
    .side-panel { left:auto; right:8px; top:8px; bottom:8px; width:min(340px, 58vw); height:auto; }
    #start table { display:none; }
  }