/* ==========================================================
   SCRATCH CARDS — componente demo (prefisso .gv-)
   ========================================================== */
.gv-root{
  --gv-cell-a:#3d2c14; --gv-cell-b:#1e1509; --gv-cell-r:#ffce60;
  --gv-gold-hi:#fff8dc;--gv-gold-1:#ffe082;--gv-gold-2:#ffc236;--gv-gold-3:#ef9612;--gv-gold-4:#a95f08;
  --gv-green:#3ddc84;
  --gv-display:'Anton','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --gv-text:'Archivo','Helvetica Neue',Arial,sans-serif;
  --gv-face:linear-gradient(158deg,var(--gv-gold-hi) 0%,var(--gv-gold-1) 16%,var(--gv-gold-2) 38%,var(--gv-gold-3) 62%,var(--gv-gold-4) 84%,var(--gv-gold-2) 100%);
  position:relative;display:flex;flex-direction:column;min-height:0;height:100%;
  color:#fff6e1;font-family:var(--gv-text);
}
.gv-root *,.gv-root *::before,.gv-root *::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* nessuna selezione durante il grattare (Safari richiede il prefisso) */
.gv-root,.gv-root *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.gv-root img,.gv-root canvas{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.gv-root ::selection{background:transparent}
.gv-root ::-moz-selection{background:transparent}

/* ---------- HUD ---------- */
.gv-hud{flex:none;display:flex;align-items:center;gap:8px;padding:10px clamp(8px,2.5vw,18px);
  border-bottom:1px solid rgba(255,214,120,.13);flex-wrap:nowrap}
.gv-logo{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0;flex:1 1 auto;overflow:hidden}
.gv-meter{flex:none}
.gv-mark{width:32px;height:32px;border-radius:6px;flex:none;background:var(--gv-face);display:grid;place-items:center;
  font-family:var(--gv-display);font-size:14px;color:#2a1500;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 0 rgba(120,60,0,.4) inset}
.gv-name{font-family:var(--gv-display);font-size:15px;line-height:1;letter-spacing:.02em;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.gv-sub{font-size:8.5px;letter-spacing:.16em;font-weight:800;color:rgba(255,246,225,.42);display:block;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;text-transform:uppercase}
.gv-meter{text-align:right;line-height:1}
.gv-meter span{display:block;font-size:8px;letter-spacing:.18em;font-weight:800;color:rgba(255,246,225,.42);text-transform:uppercase}
.gv-meter b{font-family:var(--gv-display);font-weight:400;font-size:18px;color:var(--gv-gold-1);letter-spacing:.02em}
.gv-meter.gv-w b{color:var(--gv-green)}
.gv-ico{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid rgba(255,214,120,.24);
  background:rgba(255,255,255,.05);color:rgba(255,246,225,.7);font-size:13px;cursor:pointer;line-height:1}
.gv-ico:hover{color:var(--gv-gold-1);border-color:var(--gv-gold-2)}
.gv-ico{display:grid;place-items:center;position:relative}
.gv-ico svg{display:block}
.gv-ico.gv-muted{color:rgba(255,246,225,.3);border-color:rgba(255,255,255,.12)}
.gv-ico.gv-muted::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:1.5px;
  background:currentColor;transform:rotate(-38deg);border-radius:2px}
.gv-ico.gv-calbtn{display:none}
.gv-ico.gv-calbtn.gv-on{display:block}
.gv-prog{flex:none;height:3px;background:rgba(255,255,255,.07)}
.gv-prog i{display:block;height:100%;width:0;background:var(--gv-face);transition:width .25s ease}

/* ---------- palco ---------- */
.gv-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:clamp(8px,2vh,18px)}
.gv-card{position:relative;container-type:inline-size;overflow:hidden;
  border-radius:clamp(8px,1.6vh,14px);touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,214,120,.18)}
.gv-card>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}

/* ---------- strati grattabili ---------- */
.gv-layer{position:absolute;overflow:hidden;border-radius:1.6cqw;
  background:linear-gradient(180deg,var(--gv-cell-a),var(--gv-cell-b));
  box-shadow:inset 0 .7cqw 1.2cqw rgba(0,0,0,.85),inset 0 0 0 .3cqw color-mix(in srgb,var(--gv-cell-r) 45%,transparent)}
.gv-layer.gv-circles{background:none;box-shadow:none}
.gv-layer canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  transition:opacity .45s ease}
.gv-layer.gv-done canvas{opacity:0}

.gv-face{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1;text-align:center}
.gv-face::before{content:'';position:absolute;inset:5%;border-radius:1.1cqw;z-index:-1;
  background:radial-gradient(circle at 36% 26%,
    color-mix(in srgb,var(--gv-cell-a) 78%,#fff 12%),
    var(--gv-cell-a) 55%, var(--gv-cell-b) 100%);
  box-shadow:inset 0 .4cqw .7cqw rgba(0,0,0,.75),
             0 0 0 .22cqw color-mix(in srgb,var(--gv-cell-r) 42%,transparent);
  transition:background .3s,box-shadow .3s}
.gv-face.gv-round::before{border-radius:50%;inset:7%}
.gv-sym{display:block;filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.55))}
.gv-n{font-family:var(--gv-display);color:#fff;
  text-shadow:.16cqw .16cqw 0 #000,-.16cqw .16cqw 0 #000,.16cqw -.16cqw 0 #000,-.16cqw -.16cqw 0 #000,0 .5cqw .5cqw rgba(0,0,0,.6)}
.gv-p{font-family:var(--gv-text);font-weight:900;color:var(--gv-gold-2);letter-spacing:.03em}

.gv-face.gv-hit::before{background:var(--gv-face);
  box-shadow:inset 0 .3cqw .3cqw rgba(255,255,255,.9),inset 0 -.4cqw .5cqw rgba(120,60,0,.55),
             0 0 0 .4cqw #fff,0 0 3cqw rgba(255,200,60,.95)}
.gv-face.gv-hit{animation:gv-beat 1.15s ease-in-out infinite}
.gv-face.gv-hit .gv-n{color:#2a1500;text-shadow:0 .16cqw 0 rgba(255,255,255,.6)}
.gv-face.gv-hit .gv-p{color:#0c5a2b}
.gv-face.gv-hit .gv-sym{filter:drop-shadow(0 0 1.4cqw rgba(255,255,255,.9))}
@keyframes gv-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.gv-face.gv-pop{animation:gv-pop .45s cubic-bezier(.2,.9,.3,1.5)}
@keyframes gv-pop{0%{transform:scale(.8)}58%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---------- overlay di marcatura (cartella tombola) ---------- */
.gv-ov{position:absolute;z-index:2;pointer-events:none}
.gv-ovc{position:absolute}
.gv-ovc::before{content:'';position:absolute;inset:9%;border-radius:1cqw;opacity:0;
  background:rgba(255,201,60,.26);box-shadow:0 0 0 .45cqw #ffc93c,0 0 3cqw rgba(255,200,60,.9);
  transition:opacity .3s,transform .3s}
.gv-ovc.gv-marked::before{opacity:1;animation:gv-mark .45s cubic-bezier(.2,.9,.3,1.5)}
@keyframes gv-mark{0%{transform:scale(1.35)}100%{transform:scale(1)}}

.gv-float{position:absolute;z-index:20;pointer-events:none;font-family:var(--gv-display);font-size:4.6cqw;
  color:var(--gv-green);text-shadow:0 .3cqw .4cqw rgba(0,0,0,.85);animation:gv-up 1.2s ease-out forwards}
@keyframes gv-up{0%{opacity:0;transform:translate(-50%,0) scale(.7)}18%{opacity:1;transform:translate(-50%,-1.5cqw) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-9cqw) scale(1)}}

.gv-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none;text-align:center;
  font-family:var(--gv-display);font-size:4.6cqw;color:#fff;letter-spacing:.05em;transition:opacity .35s;
  text-shadow:.18cqw .18cqw 0 #000,-.18cqw .18cqw 0 #000,.18cqw -.18cqw 0 #000,-.18cqw -.18cqw 0 #000,0 .6cqw 1cqw rgba(0,0,0,.85)}
.gv-hint small{display:block;font-family:var(--gv-text);font-weight:800;font-size:2.2cqw;letter-spacing:.16em;margin-top:1.3cqw;opacity:.85}
.gv-hint.gv-off{opacity:0}
.gv-dust{position:absolute;inset:0;width:100%;height:100%;z-index:24;pointer-events:none}
.gv-confetti{position:absolute;inset:0;z-index:30;pointer-events:none}

/* ---------- esito ---------- */
.gv-result{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:6cqw;
  background:rgba(6,4,2,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.gv-result.gv-on{opacity:1;pointer-events:auto}
.gv-result-in{text-align:center;transform:scale(.86);transition:transform .5s cubic-bezier(.2,.9,.3,1.45)}
.gv-result.gv-on .gv-result-in{transform:scale(1)}
.gv-rl{font-family:var(--gv-text);font-weight:900;font-size:2.9cqw;letter-spacing:.3em;color:var(--gv-gold-2);text-transform:uppercase}
.gv-rv{font-family:var(--gv-display);font-size:16cqw;line-height:.9;margin-top:2cqw;color:#fff;
  text-shadow:0 0 6cqw rgba(255,190,60,.85),0 .6cqw 0 #7a3f00}
.gv-rs{font-size:2.9cqw;font-weight:700;color:rgba(255,246,225,.72);margin-top:3cqw;line-height:1.5}
.gv-result.gv-lose .gv-rl{color:rgba(255,246,225,.5)}
.gv-result.gv-lose .gv-rv{font-size:11cqw;text-shadow:none;color:rgba(255,246,225,.9)}
.gv-result .gv-btn{margin-top:6cqw}

/* ---------- comandi ---------- */
.gv-bar{flex:none;display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;
  padding:11px clamp(10px,3vw,18px);border-top:1px solid rgba(255,214,120,.13)}
.gv-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border:0;cursor:pointer;
  font-family:var(--gv-display);font-size:17px;text-transform:uppercase;letter-spacing:.045em;border-radius:5px;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s;white-space:nowrap}
.gv-btn-gold{background:var(--gv-face);color:#2a1500;
  box-shadow:0 2px 0 rgba(255,255,255,.5) inset,0 -3px 0 rgba(120,60,0,.45) inset,0 12px 26px -12px rgba(255,170,30,.8)}
.gv-btn-ghost{background:transparent;color:#fff6e1;border:2px solid rgba(255,214,120,.32)}
.gv-btn:active{transform:translateY(2px)}
.gv-btn.gv-big{height:56px;font-size:19px;padding:0 28px}
.gv-seg{display:flex;border:1px solid rgba(255,214,120,.24);border-radius:100px;overflow:hidden;flex:none}
.gv-seg button{height:32px;padding:0 11px;border:0;background:transparent;color:rgba(255,246,225,.55);cursor:pointer;
  font-family:var(--gv-text);font-weight:800;font-size:9.5px;letter-spacing:.12em}
.gv-seg button[aria-pressed="true"]{background:var(--gv-face);color:#2a1500}

/* ---------- regole ---------- */
.gv-sheet{position:fixed;inset:0;z-index:140;display:none;place-items:center;padding:20px;background:rgba(4,3,6,.9);
  backdrop-filter:blur(10px)}
.gv-sheet.gv-on{display:grid}
.gv-sheet-in{max-width:440px;width:100%;background:#100c14;border:1px solid rgba(255,214,120,.2);border-radius:16px;padding:26px;
  color:#fff6e1;font-family:var(--gv-text)}
.gv-sheet h3{font-family:var(--gv-display);font-weight:400;font-size:26px;text-transform:uppercase;margin:0;
  background:var(--gv-face);-webkit-background-clip:text;background-clip:text;color:transparent}
.gv-sheet ol{margin:16px 0 0;padding-left:20px;color:rgba(255,246,225,.68);font-size:14.5px;line-height:1.6}
.gv-sheet li{margin-bottom:10px}
.gv-sheet .gv-note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,214,120,.15);
  font-size:10.5px;letter-spacing:.1em;font-weight:800;text-transform:uppercase;color:rgba(255,246,225,.35);line-height:1.7}

/* ---------- calibrazione ---------- */
.gv-root.gv-caling .gv-layer canvas{opacity:.16}
.gv-root.gv-caling .gv-layer{outline:1px dashed rgba(0,240,255,.9);outline-offset:-1px}
.gv-root.gv-caling .gv-face::before{background:rgba(0,240,255,.14);box-shadow:none}
.gv-root.gv-caling .gv-n,.gv-root.gv-caling .gv-p,.gv-root.gv-caling .gv-sym{display:none}
.gv-root.gv-caling .gv-layer.gv-sel{outline:2px solid #ff2ea6}
.gv-root.gv-caling .gv-hint,.gv-root.gv-caling .gv-result{display:none!important}
.gv-cal{position:fixed;right:10px;bottom:10px;z-index:145;width:min(250px,92vw);max-height:74vh;overflow:auto;display:none;
  background:rgba(9,7,12,.96);border:1px solid rgba(255,214,120,.32);border-radius:14px;padding:14px;
  font-family:'Archivo',Arial,sans-serif;font-size:12px;color:#fff6e1;box-shadow:0 20px 50px rgba(0,0,0,.7)}
.gv-cal.gv-on{display:block}
.gv-cal h4{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.04em;
  margin:0;color:#ffc236}
.gv-cal .gv-tabs{display:flex;gap:4px;margin:10px 0;flex-wrap:wrap}
.gv-cal .gv-tabs button{flex:1 0 30%;height:26px;border-radius:6px;cursor:pointer;font-weight:800;font-size:8.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:0 3px;border:1px solid rgba(255,214,120,.24);
  background:rgba(255,255,255,.05);color:rgba(255,246,225,.6);font-family:inherit}
.gv-cal .gv-tabs button[aria-pressed="true"]{background:linear-gradient(158deg,#fff8dc,#ffc236 40%,#a95f08);color:#2a1500;border-color:transparent}
.gv-cal .gv-row{display:grid;grid-template-columns:1fr 28px 60px 28px;gap:4px;align-items:center;margin-bottom:5px}
.gv-cal .gv-row span{color:rgba(255,246,225,.55);font-size:10px;text-transform:uppercase}
.gv-cal .gv-row button{height:25px;border:1px solid rgba(255,214,120,.3);background:rgba(255,255,255,.06);color:#fff6e1;
  border-radius:5px;cursor:pointer;font-size:12px;padding:0}
.gv-cal input{-webkit-user-select:text;user-select:text}
.gv-cal .gv-row input{height:25px;width:100%;border:1px solid rgba(255,214,120,.28);background:rgba(255,255,255,.05);
  color:#ffe082;border-radius:5px;text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:0 2px}
.gv-cal .gv-acts{display:flex;gap:6px;margin-top:12px}
.gv-cal .gv-acts button{flex:1;height:30px;border:0;border-radius:6px;cursor:pointer;font-family:'Anton',Impact,sans-serif;
  font-size:12px;text-transform:uppercase}
.gv-cal .gv-acts .gv-a1{background:linear-gradient(158deg,#fff8dc,#ffc236 40%,#a95f08);color:#2a1500}
.gv-cal .gv-acts .gv-a2{background:transparent;border:1px solid rgba(255,214,120,.3);color:#fff6e1}
.gv-cal .gv-tip{margin-top:10px;color:rgba(255,246,225,.42);font-size:10px;line-height:1.55}

@media (max-width:620px){
  .gv-sub{display:none}
  .gv-name{font-size:13px;max-width:30vw}
  .gv-mark{width:28px;height:28px;font-size:12px}
  .gv-ico{width:28px;height:28px;font-size:12px}
  .gv-seg button{padding:0 8px;height:28px}
  .gv-meter b{font-size:16px}
}
@media (max-width:430px){
  .gv-logo .gv-name{display:none}
  .gv-meter span{font-size:7px;letter-spacing:.1em}
}
@media (max-height:640px){ .gv-btn{height:42px;font-size:15px;padding:0 16px} }
@media (prefers-reduced-motion:reduce){ .gv-root *{animation:none!important} }