:root{
    --sea-deep:#0b3a5c;
    --sea-mid:#12507a;
    --sea-light:#1a6a9c;
    --foam:#eaf6ff;
    --wood:#6b4226;
    --wood-dark:#4a2d1a;
    --gold:#f2c14e;
    --gold-dark:#b8860b;
    --parchment:#e8dcc0;
    --ink:#2b1d12;
    --danger:#c1440e;
    --hp:#e0483e;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
  html,body{
    margin:0; padding:0; height:100%; overflow:hidden;
    background:#05121c;
    font-family:'Trebuchet MS', 'Segoe UI', sans-serif;
    touch-action:none;
    overscroll-behavior:none;
  }
  #stage{
    position:relative;
    width:100%; height:100%;
    max-width:480px;
    margin:0 auto;
    background:var(--sea-deep);
    overflow:hidden;
    /* belt-and-braces: some older iOS Safari builds need touch-action
       repeated on the element actually receiving the gesture, not just
       inherited from html/body, to fully suppress double-tap zoom/pan */
    touch-action:none;
  }
  canvas{ display:block; width:100%; height:100%; position:relative; z-index:1; touch-action:none; }
  #water-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    background-image:url('../assets/images/water-bg.gif');
    background-repeat:repeat;
    background-size:100% auto;
    image-rendering:pixelated;
    z-index:0;
  }

  #volume-btn{
    position:absolute; top:8px; right:8px;
    z-index:30;
    display:flex; align-items:center; gap:4px;
    background:rgba(5,18,28,0.78);
    border:2px solid var(--gold);
    color:var(--gold);
    border-radius:20px;
    padding:6px 11px;
    font-size:11px;
    font-weight:bold;
    font-family:inherit;
    cursor:pointer;
    pointer-events:all;
    box-shadow:0 2px 0 rgba(0,0,0,0.4);
    white-space:nowrap;
  }
  #volume-btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,0.4); }

  #giant-wave{
    position:absolute; inset:0;
    width:100%; height:100%;
    background-image:url('../assets/images/onda-gigante.webp');
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
    /* above the canvas (z-index:1) so obstacles falling toward the bottom
       visually sink behind/under the wave crest instead of sliding over it —
       the ship sails higher up the screen than the wave's visible crest, so
       it stays unaffected during normal (non-surge) play */
    z-index:2;
    pointer-events:none;
    transform-origin:center bottom;
    animation: giant-wave-breathe 3.4s ease-in-out infinite;
  }
  @keyframes giant-wave-breathe{
    0%,100%{ transform:translateY(47%) scale(1); }
    50%{ transform:translateY(43%) scale(1.01); }
  }
  /* triggered briefly (JS adds/removes the class) when the player is hit by
     the 'wave' hazard obstacle — the background wave rises up over roughly
     half the screen like a light flood, then eases back down */
  #giant-wave.surge{
    animation: giant-wave-surge 1.6s cubic-bezier(.32,.9,.28,1) forwards;
  }
  @keyframes giant-wave-surge{
    0%{ transform:translateY(47%) scale(1); }
    28%{ transform:translateY(6%) scale(1.06); }
    55%{ transform:translateY(10%) scale(1.04); }
    100%{ transform:translateY(47%) scale(1); }
  }

  #hud{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:68%;
    aspect-ratio:1057/538;
    pointer-events:none;
    z-index:5;
    container-type:inline-size;
  }
  #hud-panel-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    display:block;
    image-rendering:pixelated;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  }

  /* every slot below is positioned as a % of the panel image itself,
     read directly off top-panel.png, so it scales with #hud at any
     device width without needing fixed pixel values */
  .hud-icon{ width:16px; height:16px; image-rendering:pixelated; flex-shrink:0; }

  #hud-lives{
    position:absolute; left:5.7%; top:12.2%; width:21.8%; height:27.9%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  #hud-lives .hud-icon{ width:26px; height:26px; }
  #lives-row{ display:flex; gap:3px; }
  .heart{ width:13px; height:13px; }

  #hud-score{
    position:absolute; left:32.5%; top:12.3%; width:35.2%; height:19.9%;
    display:flex; align-items:center; justify-content:center;
  }
  #score-val{
    font-size:clamp(9px, 8.5cqw, 22px); font-weight:bold;
    color:var(--gold); letter-spacing:1px;
    text-shadow:1px 1px 0 #000;
    text-align:center;
  }

  #hud-level{
    position:absolute; left:36.3%; top:34%; width:27.7%; height:6.9%;
    display:flex; align-items:center; justify-content:center;
  }
  #progress-label{
    font-size:clamp(6px, 4cqw, 11px); color:var(--gold);
    text-shadow:1px 1px 0 #000; white-space:nowrap;
    text-align:center;
  }

  #hud-coins{
    position:absolute; left:71.9%; top:11.7%; width:22.1%; height:22.3%;
    display:flex; align-items:center; justify-content:center; gap:4px;
  }
  #hud-coins .hud-icon{ width:clamp(11px, 14cqw, 20px); height:auto; image-rendering:pixelated; }
  #coin-count-val{
    font-size:clamp(8px, 9cqw, 16px); font-weight:bold;
    color:var(--gold); text-shadow:1px 1px 0 #000;
  }

  #hud-timer{
    position:absolute; left:78%; top:53.5%; width:13%; height:13.4%;
    display:flex; align-items:center; justify-content:center;
  }
  #timer-val{
    font-size:clamp(6px, 5.6cqw, 11px); font-weight:bold;
    color:var(--gold); text-shadow:1px 1px 0 #000;
  }

  #center-msg{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    text-align:center; color:var(--parchment); z-index:10;
    background:linear-gradient(180deg, rgba(11,58,92,0.92), rgba(5,18,28,0.94));
    border:3px solid var(--gold);
    border-radius:16px;
    padding:22px 22px 24px;
    width:88%;
    max-width:400px;
    max-height:88vh;
    overflow-y:auto;
    box-shadow:0 12px 32px rgba(0,0,0,0.5);
  }
  #center-msg h1{ margin:0 0 10px; color:var(--gold); font-size:24px; text-shadow:2px 2px 0 #000; line-height:1.15; }
  #center-msg p{ margin:4px 0 12px; font-size:13px; line-height:1.5; opacity:.92; }
  #prize-reminder{ color:var(--gold); font-weight:bold; font-size:13px; margin:0 0 10px; }
  #intro-text{ opacity:.85; }

  #title-screen{
    position:absolute; inset:0;
    z-index:20;
    overflow:hidden;
    transition:opacity .35s ease;
  }
  #title-screen.hidden{ display:none !important; }
  #title-bg{
    position:absolute; inset:0;
    overflow:hidden;
  }
  #title-bg video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
  }
  #title-logo-wrap{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:92%;
    aspect-ratio:1080/1866;
  }
  #title-logo{
    display:block; width:100%; height:100%;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,0.5));
  }
  .title-text{
    position:absolute; left:0; width:100%;
    text-align:center;
    transform:translateY(-50%);
    color:#fff;
    font-weight:bold;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-shadow:
      -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
      0 2px 0 #000, 0 -2px 0 #000, 2px 0 0 #000, -2px 0 0 #000;
  }
  #title-fuori{ top:50.80%; font-size:clamp(13px, 4.2vw, 20px); }
  #title-stores{ top:59.75%; font-size:clamp(10px, 3.3vw, 15px); }
  #title-supportedby{ top:77.82%; font-size:clamp(10px, 3.3vw, 15px); }

  #title-gioca-btn, #title-classifica-btn{
    position:absolute;
    left:29.44%; width:38.89%;
    background:transparent; border:none; padding:0; margin:0;
    cursor:pointer;
    transition:transform .15s ease;
  }
  #title-gioca-btn{ top:62.49%; height:6.22%; }
  #title-classifica-btn{ top:69.08%; height:6.06%; }
  #title-gioca-btn:hover, #title-classifica-btn:hover{ transform:scale(1.05); }
  #title-gioca-btn:active, #title-classifica-btn:active{ transform:scale(0.96); }
  #title-gioca-btn{
    animation:gioca-pulse 1.8s ease-in-out infinite;
  }
  #title-gioca-btn:hover{ animation-play-state:paused; }
  @keyframes gioca-pulse{
    0%, 100% { box-shadow:0 0 0 0 rgba(242,193,78,0.55); }
    50% { box-shadow:0 0 0 12px rgba(242,193,78,0); }
  }

  #registration-form{
    position:absolute; inset:0;
    z-index:21;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
  }
  #registration-form.hidden{ display:none !important; }
  #reg-form{
    width:100%; max-width:340px;
    max-height:88vh;
    overflow-y:auto;
    display:flex; flex-direction:column; gap:10px;
    text-align:left; color:var(--parchment);
    background:rgba(5,18,28,0.9);
    border:3px solid var(--gold);
    border-radius:14px;
    padding:22px 24px;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
  }
  #reg-form h2{
    margin:0 0 4px; color:var(--gold); font-size:20px;
    text-shadow:2px 2px 0 #000; text-align:center;
  }
  #reg-form label{
    font-size:12px; font-weight:bold; letter-spacing:.03em;
    color:var(--gold); margin-bottom:-4px;
  }
  #reg-form input{
    font:inherit; font-size:15px;
    padding:9px 10px;
    border-radius:7px;
    border:2px solid var(--wood);
    background:var(--parchment);
    color:var(--ink);
  }
  #reg-form input:focus{
    outline:none; border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(242,193,78,0.4);
  }
  #reg-form input:disabled{ opacity:.45; cursor:not-allowed; }
  .ig-input-group{
    display:flex; align-items:stretch;
    border-radius:7px;
    border:2px solid var(--wood);
    background:var(--parchment);
    overflow:hidden;
  }
  .ig-input-group .ig-prefix{
    display:flex; align-items:center;
    padding:0 0 0 10px;
    font:inherit; font-size:15px; font-weight:bold;
    color:var(--ink); opacity:.6;
    background:var(--parchment);
    user-select:none;
  }
  .ig-input-group input{
    flex:1; min-width:0;
    border:none !important; border-radius:0 !important;
    padding-left:2px !important;
  }
  .ig-input-group input:focus{ box-shadow:none !important; }
  .ig-input-group:focus-within{
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(242,193,78,0.4);
  }
  .reg-note{
    margin:2px 0 4px; font-size:11px; line-height:1.5; opacity:.8;
  }
  #reg-submit-btn{ width:100%; margin-top:4px; }
  #reg-submit-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
  #reg-presave-btn{
    width:100%; margin:0 0 6px;
    background:linear-gradient(180deg, #22a5d8, #0b6b8f);
    border:2px solid var(--ink);
    color:#fff;
  }
  #reg-presave-btn.presaved{
    background:linear-gradient(180deg, #6fd89a, #2f9e64);
    color:#0e2233;
    cursor:default;
    pointer-events:none;
  }

  #legend{
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;
    margin:0 0 6px;
  }
  .legend-group-title{
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    margin:4px 0 -1px;
    padding:0 2px;
  }
  .legend-group-title.is-good{ color:#7fe8a0; }
  .legend-group-title.is-bad{ color:#ff8a6a; }
  .legend-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .legend-card{
    position:relative;
    display:flex; align-items:center; gap:8px;
    padding:8px 9px;
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.12);
    border-left:3px solid rgba(255,255,255,0.25);
    border-radius:9px;
  }
  .legend-card.span-2{ grid-column:1 / -1; }
  .legend-card img{ width:26px; height:26px; object-fit:contain; image-rendering:pixelated; flex-shrink:0; }
  .legend-icon-pair{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .legend-icon-pair img{ width:24px; height:24px; }
  .legend-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .legend-text b{ font-size:11.5px; color:var(--parchment); line-height:1.2; }
  .legend-text span{ font-size:10.5px; line-height:1.25; opacity:.78; }
  /* corner badge: an unmistakable ✔/✖ so bonus vs malus reads instantly
     even without looking at colour or copy */
  .legend-badge{
    position:absolute; top:-6px; right:-6px;
    width:16px; height:16px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    font-size:10px; font-weight:900; line-height:1;
    color:#0e2233;
    border:2px solid var(--ink);
  }
  .legend-badge.good{ background:#7fe8a0; }
  .legend-badge.bad{ background:#ff8a6a; }
  /* colour language: gold = bonus/collectible, red = malus/danger, bright
     gold = the rare big reward — matches the in-game HUD gold and the
     obstacle-hit flash red, so it reads instantly without needing to
     read the copy first */
  .legend-card.is-bonus{ border-left-color:var(--gold); }
  .legend-card.is-bonus .legend-text b{ color:var(--gold); }
  .legend-card.is-malus{ border-left-color:var(--danger); }
  .legend-card.is-malus .legend-text b{ color:#ff8a6a; }
  .legend-card.is-super{
    border-left-color:#ffd76a;
    background:rgba(242,193,78,0.12);
  }
  .legend-card.is-super .legend-text b{ color:#ffd76a; }
  #center-msg.hide-legend #legend{ display:none; }

  /* ---------- GAME OVER / RESULT SCREEN ---------- */
  #result-block{ margin:2px 0 14px; }
  #result-block.hidden{ display:none !important; }
  #result-score-val{
    font-size:38px; font-weight:bold;
    color:var(--gold);
    text-shadow:2px 2px 0 #000;
    letter-spacing:1px;
    line-height:1.1;
  }
  #result-record-badge{
    display:inline-block;
    margin:6px 0 2px;
    padding:4px 12px;
    font-size:12px; font-weight:bold;
    color:#2b1d12;
    background:linear-gradient(180deg, #ffe27a, #f2c14e);
    border-radius:20px;
    box-shadow:0 2px 0 rgba(0,0,0,0.35);
    animation:record-pop .4s ease-out;
  }
  #result-record-badge.hidden{ display:none !important; }
  @keyframes record-pop{
    0%{ transform:scale(0.6); opacity:0; }
    70%{ transform:scale(1.08); opacity:1; }
    100%{ transform:scale(1); }
  }
  #result-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-top:14px;
  }
  .stat-chip{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:9px 4px;
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(242,193,78,0.28);
    border-radius:10px;
  }
  .stat-icon{ font-size:16px; line-height:1; }
  .stat-label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
  .stat-value{ font-size:13px; font-weight:bold; color:var(--gold); }
  .btn{
    background:linear-gradient(180deg, var(--gold), var(--gold-dark));
    border:2px solid var(--ink);
    color:var(--ink);
    font-weight:bold;
    padding:10px 22px;
    border-radius:8px;
    font-size:15px;
    cursor:pointer;
    pointer-events:all;
    box-shadow:0 3px 0 #6b4a10;
  }
  .btn:active{ transform:translateY(2px); box-shadow:0 1px 0 #6b4a10; }
  .btn-small{ padding:7px 14px; font-size:13px; }
  .btn-ghost{
    background:transparent; color:var(--gold); border:2px solid var(--gold);
    box-shadow:none; margin-top:10px; margin-left:8px;
  }
  .btn-ghost:active{ transform:translateY(2px); }
  .hidden{ display:none !important; }

  #score-submit{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    margin-bottom:14px;
  }
  #name-input{
    width:180px; padding:8px 10px;
    border-radius:6px; border:2px solid var(--gold-dark);
    background:#0e2233; color:var(--parchment);
    font-size:14px; text-align:center;
  }
  #name-input:focus{ outline:2px solid var(--gold); }
  #submit-status{ font-size:11px; min-height:14px; color:#7fe8c8; }

  #leaderboard-panel{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    text-align:center; color:var(--parchment);
    /* must render above EVERY other screen (title video is z-index:20,
       the registration form is z-index:21) — otherwise tapping
       "Classifica" from the title screen technically opened the panel
       but it sat invisibly behind the video, looking like a dead button */
    z-index:25;
    background:rgba(5,18,28,0.94);
    border:3px solid var(--gold);
    border-radius:14px;
    padding:20px 24px;
    width:82%; max-width:340px;
    max-height:80vh; overflow-y:auto;
  }
  #leaderboard-panel h2{ margin:0 0 12px; color:var(--gold); font-size:20px; text-shadow:2px 2px 0 #000; }
  #leaderboard-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:13px; }
  .leaderboard-row{
    display:flex; justify-content:space-between; gap:10px;
    padding:6px 10px; border-radius:6px;
    background:rgba(255,255,255,0.05);
  }
  .leaderboard-row.rank-1{ background:rgba(242,193,78,0.25); font-weight:bold; }
  .leaderboard-rank{ color:var(--gold); min-width:22px; text-align:left; }
  .leaderboard-name{ flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .leaderboard-score{ color:var(--gold); font-weight:bold; }

  #leaderboard-my-rank{
    margin:2px 0 14px; padding:8px 10px;
    border:1px dashed var(--gold);
    border-radius:8px;
    font-size:13px;
    text-align:center;
    color:var(--parchment);
  }
  #leaderboard-my-rank b{ color:var(--gold); }

  #word-hud{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:6px;
    display:flex; gap:8px;
    z-index:5;
    pointer-events:none;
    animation:word-hud-in .25s ease-out;
  }
  #word-hud.hidden{ display:none !important; }
  .word-letter{
    width:25px; height:28px;
    display:flex; align-items:center; justify-content:center;
    font-size:0;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    background-color:rgba(11,30,46,0.65);
    border:2px solid rgba(242,193,78,0.35);
    border-radius:6px;
    transition:all .25s;
    filter:drop-shadow(0 0 0 rgba(242,193,78,0));
  }
  .word-letter[data-slot="0"]{ background-image:url('../assets/images/letters/letter-P.webp'); }
  .word-letter[data-slot="1"]{ background-image:url('../assets/images/letters/letter-I.webp'); }
  .word-letter[data-slot="2"]{ background-image:url('../assets/images/letters/letter-R.webp'); }
  .word-letter[data-slot="3"]{ background-image:url('../assets/images/letters/letter-A.webp'); }
  .word-letter[data-slot="4"]{ background-image:url('../assets/images/letters/letter-T.webp'); }
  .word-letter[data-slot="5"]{ background-image:url('../assets/images/letters/letter-A.webp'); }
  .word-letter.lit{
    background-color:rgba(242,193,78,0.3);
    border-color:var(--gold);
    transform:scale(1.15);
    filter:drop-shadow(0 0 8px rgba(242,193,78,0.6));
  }
  @keyframes word-hud-in{
    from{ opacity:0; transform:translateX(-50%) translateY(-6px); }
    to{ opacity:1; transform:translateX(-50%) translateY(0); }
  }

  #buff-timer{
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    margin-top:42px;
    z-index:6;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    pointer-events:none;
    background:rgba(11,30,46,0.6);
    border:2px solid #ffd76a;
    border-radius:8px;
    padding:5px 10px;
    color:#ffd76a;
    font-size:11px; font-weight:bold;
    text-shadow:1px 1px 0 #000;
  }
  #buff-timer.hidden{ display:none !important; }
  #buff-timer-bar-wrap{
    width:90px; height:6px;
    background:rgba(0,0,0,0.4);
    border-radius:4px; overflow:hidden;
  }
  #buff-timer-bar{
    height:100%; width:100%;
    background:linear-gradient(90deg, #ffd76a, #fff3cf);
  }

  /* lane input (tap-to-lane + drag/swipe) is now handled by a single
     listener on #stage in JS, so this layer no longer needs to catch
     pointer events itself — pointer-events:none lets taps/drags pass
     straight through to #stage without an extra listener fighting it */
  #lane-touch{
    position:absolute; inset:0; z-index:4;
    display:flex;
    pointer-events:none;
  }
  #lane-touch div{ flex:1; }