/* ============ FONT DEL GIOCO (cartella fonts/) ============ */
  @font-face {
    font-family: 'AnotherDanger';   /* nome interno invariato: ora carica Saphifen */
    src: url('fonts/Saphifen.otf') format('opentype'),
         url('fonts/Saphifen.ttf') format('truetype'),
         url('fonts/Saphifen.woff2') format('woff2'),
         url('fonts/Saphifen.woff') format('woff');
    font-display: swap;
  }
  @font-face {
    font-family: 'Saphifen';
    src: url('fonts/Saphifen.otf') format('opentype'),
         url('fonts/Saphifen.ttf') format('truetype'),
         url('fonts/Saphifen.woff2') format('woff2'),
         url('fonts/Saphifen.woff') format('woff');
    font-display: swap;
  }

  /* ============ RESET & BASE ============ */
  * { margin:0; padding:0; box-sizing:border-box; }
  html,body { width:100%; height:100%; overflow:hidden; background:#06070c;
              font-family:'AnotherDanger','Arial Black',Impact,sans-serif; user-select:none; }
  canvas { display:block; }

  :root{
    --bone:#d8d2c0;
    --blood:#b1121b;
    --toxic:#7da144;
    --gold:#d9a43c;
    --panel:rgba(8,10,14,.72);
  }

  .stencil { font-family:'AnotherDanger','Arial Black',Impact,sans-serif;
             letter-spacing:.08em; text-transform:uppercase; }

  /* ============ HUD ============ */
  #hud { position:fixed; inset:0; pointer-events:none; z-index:10; }

  #atmo { position:absolute; inset:0;
          background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%); }

  #vignette { position:absolute; inset:0; opacity:0; transition:opacity .08s;
              background:radial-gradient(ellipse at center, transparent 35%, rgba(150,0,0,.65) 100%); }

  #crosshair { position:absolute; left:50%; top:50%; width:22px; height:22px;
               transform:translate(-50%,-50%); }
  #crosshair::before, #crosshair::after { content:''; position:absolute; background:var(--bone); opacity:.85; }
  #crosshair::before { left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
  #crosshair::after  { top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }

  #hitmarker { position:absolute; left:50%; top:50%; width:30px; height:30px;
               transform:translate(-50%,-50%) rotate(45deg); opacity:0; }
  #hitmarker span { position:absolute; background:#ff5547; }
  #hitmarker span:nth-child(1){ left:0; top:0; width:9px; height:3px; }
  #hitmarker span:nth-child(2){ right:0; top:0; width:9px; height:3px; }
  #hitmarker span:nth-child(3){ left:0; bottom:0; width:9px; height:3px; }
  #hitmarker span:nth-child(4){ right:0; bottom:0; width:9px; height:3px; }

  /* Salute */
  #hpPanel { position:absolute; left:24px; bottom:24px; width:260px;
             background:var(--panel); border:1px solid #2a2e36; padding:12px 14px; }
  #hpLabel { font-size:13px; color:#8b8576; margin-bottom:6px; }
  #hpBarBg { height:16px; background:#1a1115; border:1px solid #3a232a; }
  #hpFill  { height:100%; width:100%; background:linear-gradient(90deg,#6e0c12,var(--blood));
             transition:width .12s ease-out; }
  #hpText  { font-size:24px; color:var(--bone); margin-top:4px; }

  /* Livello / zombie */
  #wavePanel { position:absolute; right:24px; top:24px; text-align:right;
               background:var(--panel); border:1px solid #2a2e36; padding:12px 16px; }
  #levelText { font-size:26px; color:var(--toxic); }
  #themeText { font-size:14px; color:#8b8576; letter-spacing:.12em; margin-top:2px; }
  #zombText  { font-size:16px; color:var(--bone); margin-top:6px; letter-spacing:.06em;
               font-family:'Segoe UI',Arial,sans-serif; }

  /* Arma + munizioni + slot */
  #weapPanel { position:absolute; right:24px; bottom:24px; text-align:right;
               background:var(--panel); border:1px solid #2a2e36; padding:12px 16px; }
  #weapText  { font-size:22px; color:var(--bone); }
  #ammoText  { font-size:26px; color:var(--gold); margin-top:2px; letter-spacing:.06em; }
  #ammoText.empty { color:var(--blood); }
  #slots { margin-top:8px; display:flex; gap:6px; justify-content:flex-end; }
  .slot { width:30px; height:30px; border:1px solid #3a3f49; color:#565b66;
          display:flex; align-items:center; justify-content:center; font-size:16px;
          background:#13161c; }
  .slot.owned { color:var(--bone); border-color:#6a7080; }
  .slot.current { color:#0c0e12; background:var(--gold); border-color:var(--gold); }

  /* Barra di carica arco */
  #chargeWrap { position:absolute; left:50%; bottom:90px; transform:translateX(-50%);
                width:220px; height:10px; background:#101318; border:1px solid #2a2e36; display:none; }
  #chargeFill { height:100%; width:0%; background:linear-gradient(90deg,#5a6e34,var(--toxic)); }

  /* Barra del BOSS */
  #bossPanel { position:absolute; left:50%; top:64px; transform:translateX(-50%);
               width:min(480px,70vw); display:none; text-align:center; }
  #bossName { font-size:20px; color:#e08a8a; letter-spacing:.2em; text-shadow:0 0 14px rgba(177,18,27,.7); }
  #bossBarBg { height:14px; margin-top:6px; background:#160a10; border:1px solid #4a1d28; }
  #bossFill { height:100%; width:100%; background:linear-gradient(90deg,#5e0d35,#c2153a); transition:width .1s; }

  /* Messaggio centrale */
  #msgCenter { position:absolute; left:50%; top:34%; transform:translate(-50%,-50%);
               font-size:52px; color:var(--toxic); text-shadow:0 0 24px rgba(125,161,68,.5);
               opacity:0; transition:opacity .3s; text-align:center; white-space:nowrap; }
  #msgSub { font-size:18px; color:var(--bone); margin-top:10px; letter-spacing:.2em; }

  /* Toast (pickup, avvisi) */
  #toast { position:absolute; left:50%; bottom:150px; transform:translateX(-50%);
           font-size:22px; color:var(--gold); letter-spacing:.12em; opacity:0;
           transition:opacity .25s; text-shadow:0 0 16px rgba(217,164,60,.5); white-space:nowrap; }

  /* ============ SCHERMATE ============ */
  .screen { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
            align-items:center; justify-content:center; text-align:center;
            background:rgba(4,5,9,.88); cursor:pointer; }
  .screen h1 { font-size:74px; color:var(--bone); letter-spacing:.1em;
               text-shadow:0 0 30px rgba(177,18,27,.55); }
  .screen h1 span { color:var(--blood); }
  .screen .tag { color:var(--toxic); font-size:16px; letter-spacing:.4em; margin-top:6px;
                 text-transform:uppercase; }
  .screen .controls { margin-top:30px; color:#9b9482; font-size:15px; line-height:2;
                      font-family:'Segoe UI',Arial,sans-serif; }
  .screen .controls b { color:var(--bone); background:#1c2027; padding:2px 8px;
                        border:1px solid #343a44; border-radius:3px; font-weight:600; }
  .screen .cta { margin-top:32px; font-size:22px; color:var(--bone); letter-spacing:.15em;
                 animation:pulse 1.6s infinite; }
  @keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

  #gameoverScreen { display:none; }
  #gameoverScreen h1 { color:var(--blood); text-shadow:0 0 40px rgba(177,18,27,.8); }
  #goStats { margin-top:20px; color:var(--bone); font-size:20px; line-height:1.9;
             font-family:'Segoe UI',Arial,sans-serif; }
  #restartBtn { margin-top:34px; pointer-events:auto; cursor:pointer;
                font-family:'AnotherDanger','Arial Black',Impact,sans-serif; letter-spacing:.15em;
                font-size:22px; color:var(--bone); background:var(--blood);
                border:none; padding:14px 44px; text-transform:uppercase; }
  #restartBtn:hover { background:#d61824; }

  #pauseScreen { display:none; }

  /* HUD scalabile: ancora ogni pannello al proprio angolo, lo scaling JS regola --uiScale */
  #hpPanel   { transform-origin: bottom left; }
  #wavePanel { transform-origin: top right; }
  #weapPanel { transform-origin: bottom right; }
  #scorePanel{ transform-origin: top left; }
  #bossPanel { transform-origin: top center; }

  /* OPTIONS button + panel */
  #optionsBtn { position:absolute; top:22px; left:50%; transform:translateX(-50%);
                font-family:'AnotherDanger','Arial Black',Impact,sans-serif; letter-spacing:.1em;
                font-size:13px; color:#8b8576; background:var(--panel); border:1px solid #2a2e36;
                padding:4px 14px; cursor:pointer; pointer-events:auto; z-index:14; text-transform:uppercase; }
  #optionsBtn:hover { color:var(--bone); border-color:#6a7080; }
  #optionsPanel { position:fixed; inset:0; z-index:31; display:none; background:rgba(4,5,9,.93);
                  flex-direction:column; align-items:center; justify-content:center; }
  #optionsPanel .opt-box { background:#13161c; border:1px solid #3a3f4a; padding:30px 40px; min-width:320px; }
  #optionsPanel h2 { font-family:'AnotherDanger','Arial Black',Impact,sans-serif; color:var(--toxic);
                     font-size:34px; letter-spacing:.12em; text-align:center; margin:0 0 24px; }
  .opt-row { display:flex; align-items:center; justify-content:space-between; gap:24px;
             margin:16px 0; font-family:'Segoe UI',Arial,sans-serif; color:var(--bone); font-size:15px; }
  .opt-row input[type=range] { width:150px; accent-color:var(--toxic); }
  .opt-toggle { font-family:'AnotherDanger',sans-serif; letter-spacing:.1em; cursor:pointer;
                background:#1f2530; border:1px solid #4a505c; color:var(--bone); padding:5px 16px; min-width:70px; text-align:center; }
  .opt-toggle.on { background:var(--toxic); color:#0c0e12; border-color:var(--toxic); }
  #optClose { margin-top:24px; font-family:'AnotherDanger','Arial Black',Impact,sans-serif;
              letter-spacing:.14em; font-size:20px; color:var(--bone); background:var(--blood);
              border:none; padding:12px 40px; text-transform:uppercase; cursor:pointer; }
  #optClose:hover { background:#d61824; }