/** Shopify CDN: Minification failed

Line 327:0 Expected "}" to go with "{"

**/
:root {

  color-scheme: dark;

  --bg:#07130A;

  --panel:#0E1E14;

  --panel2:#15281C;

  --border:#294534;

  --text:#ffffff;

  --muted:#D8D8D8;

  --gold:#F2C14E;

  --goldLight:#FFE08A;

  --red:#C92C25;

  --redDark:#7A1714;

  --accent:#F2C14E;

  --warn:#E53935;

}

* { box-sizing: border-box; }

html, body {
  position: fixed; inset: 0; width: 100%; height: 100%;
  overflow: hidden; touch-action: none; overscroll-behavior: none;
  margin: 0; background: radial-gradient(circle at center,#12351F 0%,#07130A 80%);; color: var(--text);
  font-family: 'Outfit', sans-serif; font-weight: 500; text-align: center;
}

h1, h2, h3, p, ul { margin-top: 0; }
[hidden] { display: none !important; }

/* STRUTTURA PRINCIPALE */
main {
  width: 100vw; height: 100dvh; display: flex;
  align-items: center; justify-content: center;
  max-width: none; margin: 0 auto; padding: 20px;
}

body.playing main { padding-top: 40px; }

.quality-page #MainContent{ width:100vw; height:100vh; max-width:none; padding:20px; margin:0; }

.top { display: none; position: fixed; top: 15px; left: 50%; transform: translateX(-50%); width: min(900px, 90vw); z-index: 1000; }
body.playing .top { display: block; }

.level-info{

font-size:30px;

font-weight:900;

letter-spacing:.5px;

color:#FFF7D6;

text-shadow:

0 3px 10px rgba(0,0,0,.45);

}

/* CARD & HOME LAYOUT (Ottimizzato per iPad) */
.card{

width:100%;

height:100%;

background:

linear-gradient(180deg,#102116,#0B1711);

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

padding:50px;

box-shadow:

0 20px 60px rgba(0,0,0,.45),

inset 0 1px rgba(255,255,255,.05);

}

.home-layout{ display:grid; grid-template-columns: minmax(360px,28%) minmax(0,72%); gap:80px; align-items:start; width:100%; height:100%; }
.home-content{ display:flex; flex-direction:column; justify-content:flex-start; align-items:center; width:100%; height:100%; }

.game-logo { margin-top: -70px; margin-bottom: -50px; text-align: center; }
.game-logo img { width: min(550px, 80vw); height: auto; }

.qr-column { text-align: center; }
.qr-title { font-size: 34px; font-weight: 800; color: #fff; }
.instagram-qr { width: 400px; background: #fff; padding: 12px; border-radius: 16px; }
.qr-text { margin-top: 15px; font-size: 30px; font-weight: 800; color: var(--muted); line-height: 1; }

.intro-main { color: #fff; font-size: 32px; font-weight: 800; margin-bottom: 20px; }
.rules { font-size: 22px; line-height: 1.8; color: var(--text); padding-left: 0; list-style: none; margin-bottom: 20px; text-align:center;}

.title-scoreboard { color: #fff; font-size: 25px; font-weight: 600; margin-bottom: 10px; text-align:center; }

.scoreboard {
  background: rgba(16, 24, 32, 0.55); border: 2px solid rgba(255, 255, 255, 0.7); width:100%; max-width:600px;
  padding: 20px; border-radius: 12px; margin-bottom: 30px; }

.scoreboard h2 { color: var(--accent); font-size: 22px; margin-bottom: 15px; }
.scoreboard dl { margin: 0; }
.scoreboard div { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; padding: 6px 0; }
.scoreboard dd { margin: 0; min-width: 50px; text-align: right; }

.text-difetto { color: #fff; font-size: 30px; font-weight: 600; margin-bottom: 30px; }

button, .action-button {
  width: 100%; padding: 22px; background: var(--accent); color: #06131d;
  font-size: 45px; font-weight: 800; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px;
  cursor: pointer; transition: transform 0.1s ease; }

button:active { transform: scale(0.97); }

/* GIOCO (Griglia e Piastrine) */
.grid { display: grid; gap: 12px; width: 100%; max-width: 900px; margin: 0 auto; }
.cell{

aspect-ratio:1;

background:

linear-gradient(180deg,#15281C,#0D1711);

border-radius:18px;

border:1px solid rgba(255,255,255,.08);

padding:8px;

display:flex;

align-items:center;

justify-content:center;

transition:.18s;

cursor:pointer;

box-shadow:

0 10px 20px rgba(0,0,0,.35),

inset 0 1px rgba(255,255,255,.05);

}

/* Evita l'effetto "incastrato" su iPad: applica hover solo se si usa un mouse */
@media (hover: hover) {
  .cell:hover{

transform:translateY(-2px);

border-color:#F2C14E;

box-shadow:

0 0 0 2px rgba(242,193,78,.45),

0 0 25px rgba(242,193,78,.22),

0 12px 24px rgba(0,0,0,.45);

}

/* Effetto di pressione per schermi Touch (iPad) */
.cell:active { transform: scale(0.95); outline: 4px solid var(--accent); outline-offset: 2px; }

svg { width: 95%; height: 95%; pointer-events: none; }
.gift-shadow{

    fill:#8c1010;
}

.gift-body{

    fill:#cf2c2c;
    stroke:#9b1414;
    stroke-width:3;
}

.gift-light{

    fill:rgba(255,255,255,.18);
}

.gift-ribbon{

    fill:#f6d15b;
}

.gift-bow{

    fill:#f0c33d;
    stroke:#d49d0a;
    stroke-width:2;
}

.gift-knot{

    fill:#ffd65a;
    stroke:#cc9900;
    stroke-width:2;
}

/* BARRA DEL TEMPO */
.timerWrap{

height:18px;

background:#16231A;

border-radius:30px;

overflow:hidden;

border:1px solid rgba(255,255,255,.06);

box-shadow:

inset 0 2px 6px rgba(0,0,0,.45);

}

#timerBar{

height:100%;

background:

linear-gradient(90deg,

#D72F25,

#F3C44F,

#47B96A);

border-radius:30px;

}

/* SCHERMATE DI VINCITA E MESSAGGI */
#message {min-height: 40px;font-size: 32px;font-weight: 800;margin-bottom: 10px;}

/* SCHERMATE FINALI */
.prize-screen,.level-prize-screen {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100dvh;padding: 20px;text-align: center;text-transform: uppercase;}

/* CONTROLLO SUPERATO */
.level-prize-title{margin:0;color:#4eaeea;font-size:54px;font-weight:900;letter-spacing:2px;text-shadow:0 0 15px rgba(78,174,234,.6);}
.level-prize-screen h2{margin:20px 0;color:#ffffff;font-size:110px;font-weight:900;line-height:1;text-shadow:0 4px 0 #071019,0 0 25px rgba(78,174,234,.8);animation:prizePop .7s both;}
.level-prize-screen p:last-child{margin-top:12px;color:#d5e5ef;font-size:42px;font-weight:700;line-height:1.35;text-transform:none;}

/* LOTTO RESPINTO */
.prize-title{margin:0;color:#ff4040;font-size:52px;font-weight:900;letter-spacing:2px;text-shadow:0 0 18px rgba(255,64,64,.8);}
.prize-label{margin:20px 0;color:#ffffff;font-size:30px;font-weight:700;line-height:1.5;}
.prize-label strong{color:#ffd84d;font-size:34px;font-weight:900;}

/* PREMIO */
.prize-bomb{position:relative;margin:35px 0;padding:10px 30px;color:#ffffff;font-size:140px;font-weight:900;line-height:1;text-shadow:0 5px 0 #071019,0 0 20px rgba(255,215,0,.9),0 0 50px rgba(255,180,0,.7);animation:prizePop .9s both,prizePulse 1.1s infinite .9s;}
.prize-bomb::before{content:"";position:absolute;inset:50%;z-index:-1;width:260px;height:260px;background:radial-gradient(circle,#ffe45c 0 18%,#ffb300 19% 38%,transparent 39%);border-radius:50%;transform:translate(-50%,-50%) scale(0);animation:blast .9s ease-out both;}

/* EFFETTI E ANIMAZIONI */
.good { animation: goodFlash 0.25s 3; }
.flash { animation: flash 0.45s infinite; }

@keyframes flash { 50% { background: var(--warn); } }
@keyframes goodFlash { 0%, 100% { background: #23823a; } 50% { background: #45d96a; } }
@keyframes prizePop { 0% { opacity: 0; transform: scale(0.25) rotate(-8deg); } 62% { opacity: 1; transform: scale(1.18) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes prizePulse { 50% { transform: scale(1.04); } }
@keyframes blast { 0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }

/* VIGNETTATURA DANGER */

body::after {
    content: "";
    position: fixed;
    inset: 0; 
    pointer-events: none; /* Fondamentale: permette di continuare a cliccare sui tasti */
    
    /* Effetto vignettatura che parte dal centro */
    background: radial-gradient(
        circle at center,
        transparent 50%,    /* Centro completamente libero e chiaro */
        rgba(255, 0, 0, 0.15) 70%,  /* Inizia a sfumare verso il rosso */
        rgba(255, 0, 0, 0.4) 100%   /* Rosso intenso ai bordi */
    );
    
    opacity: 0; /* Inizialmente invisibile */
    transition: opacity 0.5s ease-out; /* Transizione morbida */
    z-index: 500;
}

/* Quando aggiungi la classe 'danger-overlay' al body, la vignettatura appare */
body.danger-overlay::after {
    opacity: 1;
}

/* MENU AMMINISTRATORE */
.adminMenu { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.adminBox { width: min(600px, 90vw); background: #111; border: 2px solid #444; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 15px; }
.adminBox h2 { text-align: center; color: #fff; margin-bottom: 10px; }
.adminBox button { padding: 20px; border-radius: 12px; font-size: 22px; }