@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #0a0a1a;
  --bg-2: #14143a;
  --panel: #10102a;
  --frame: #3b3f8f;
  --frame-hi: #6c72d8;
  --cellbg: #07071a;
  --ink: #f2f3ff;
  --ink-soft: #b7b9e6;
  --ink-dim: #8a8dc4;
  --cta: #f7d308;
  --cta-ink: #2a2000;
  --pad: max(14px, env(safe-area-inset-left));
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 500;
  color: var(--ink);
  background:
    radial-gradient(100% 60% at 50% 0%, var(--bg-2) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg), #05050f);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
::selection { background: #5a65ad; color: #fff; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 10px; }

.game {
  position: relative; z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  padding: max(8px, env(safe-area-inset-top)) var(--pad) max(6px, env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto;
  gap: 8px;
}

.hud { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.1rem; }
.brand-logo { width: 30px; height: 20px; }
.hud-btns { display: flex; gap: 6px; }
.ico {
  width: 40px; height: 36px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.07); color: var(--ink-soft);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, color .2s, transform .1s;
}
.ico:hover { background: rgba(255,255,255,.13); color: var(--ink); }
.ico:active { transform: scale(.93); }
.ico svg { width: 20px; height: 20px; fill: currentColor; }
.ico .off { display: none; }
.ico[aria-pressed="false"] .on { display: none; }
.ico[aria-pressed="false"] .off { display: block; }

/* riga sopra il campo: tieni / punti / prossimi */
.top { display: grid; grid-template-columns: 74px 1fr 128px; gap: 8px; align-items: stretch; }
.box {
  background: var(--panel); border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--frame), 0 6px 16px -8px rgba(0,0,0,.8);
  padding: 4px 6px 6px; display: grid; justify-items: center; align-content: start; gap: 2px;
}
.label { font-size: .68rem; color: var(--ink-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
#holdCv { width: 60px; height: 40px; }
#nextCv { width: 114px; height: 40px; }
.hold.used canvas { opacity: .35; filter: grayscale(.8); }
.stats { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-content: center; text-align: center; }
.stats .big { grid-column: 1 / -1; }
dt { font-size: .66rem; color: var(--ink-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats dd { font-size: 1.05rem; line-height: 1.1; }
.stats .big dd { font-size: 1.55rem; line-height: 1; }

.stage { display: flex; justify-content: center; align-items: center; min-height: 0; min-width: 0; will-change: transform; }
.well {
  position: relative; flex: none;
  padding: 3px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--frame-hi), var(--frame) 30%, #23265e);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6);
  transition: box-shadow .3s;
}
.well.danger { background: linear-gradient(180deg, #ff6b6b, #c0282f 30%, #6e1018); }
#board { display: block; touch-action: none; width: 0; height: 0; border-radius: 5px; background: var(--cellbg); }

/* comandi touch */
.pad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pad button {
  height: 56px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #2a2d6a, #1c1e4c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.35), 0 5px 12px -6px rgba(0,0,0,.8);
  color: var(--ink); display: grid; place-items: center; align-content: center; gap: 0;
  transition: transform .06s, filter .12s;
  touch-action: none;
}
.pad button span { font-size: .62rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.pad button svg { width: 26px; height: 26px; }
.pad button[data-act="hold"] svg { width: 20px; height: 20px; }
.pad button:active, .pad button.held { transform: translateY(2px); filter: brightness(1.3); }
.pad .drop { background: linear-gradient(180deg, #ffe34d, #e0b400); color: var(--cta-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(120,90,0,.4), 0 6px 14px -6px rgba(0,0,0,.8); }

.credit { display: flex; justify-content: center; gap: 8px; font-size: .74rem; color: var(--ink-dim); }
.credit a { color: var(--ink-soft); text-decoration: none; }
.credit a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (pointer: fine) and (min-height: 640px) { .pad { display: none; } }

/* scritte */
.popups { position: absolute; inset: 0; pointer-events: none; }
.pop {
  position: absolute; transform: translate(-50%, -50%);
  font-weight: 700; white-space: nowrap; text-align: center; line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6);
  animation: popUp 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.pop.pts { font-size: 1rem; color: #fff; }
.pop.label { font-size: clamp(1.4rem, 7vw, 2rem); color: #fff; }
.pop.label small { display: block; font-size: .5em; margin-top: 4px; color: var(--ink-soft); }
.pop.tetris { font-size: clamp(2.2rem, 12vw, 3.2rem); color: #31c7ef; letter-spacing: .02em; animation-duration: 1.6s; }
.pop.big { font-size: clamp(1.5rem, 7vw, 2.1rem); color: var(--cta); animation-duration: 1.7s; }
@keyframes popUp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  16% { opacity: 1; transform: translate(-50%, -55%) scale(1.15); }
  30% { transform: translate(-50%, -56%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(.96); }
}

.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* schermate */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: 16px;
  background: rgba(5,5,15,.86);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: opacity .3s cubic-bezier(.16,1,.3,1);
}
.screen.hidden { opacity: 0; pointer-events: none; }
.panel { width: min(400px, 100%); text-align: center; display: grid; gap: 14px; justify-items: center; }
#titleCv { width: 260px; height: 120px; }
h1 { font-size: clamp(2.6rem, 13vw, 3.5rem); line-height: .95; margin: 0; letter-spacing: -0.02em; font-weight: 700; text-shadow: 0 4px 0 #2b2f7a; }
h2 { font-size: 2.2rem; margin: 0 0 4px; }
.lead { margin: 0; color: var(--ink-soft); line-height: 1.45; font-size: 1.05rem; max-width: 34ch; }
.lead strong { color: var(--ink); font-weight: 600; }
.cta {
  border: 0; cursor: pointer; padding: 15px 54px; border-radius: 14px;
  font-size: 1.35rem; font-weight: 700; color: var(--cta-ink);
  background: linear-gradient(180deg, #ffe85c, #f0c000);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 5px 0 #a07c00, 0 14px 24px -8px rgba(0,0,0,.8);
  transition: transform .1s, box-shadow .1s;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 1px 0 #a07c00, 0 6px 14px -8px rgba(0,0,0,.8); }
.ghost { border: 0; background: rgba(255,255,255,.08); padding: 12px 28px; border-radius: 12px; cursor: pointer; font-size: 1rem; color: var(--ink-soft); }
.ghost:hover { background: rgba(255,255,255,.14); color: var(--ink); }
.howto { text-align: left; width: 100%; color: var(--ink-soft); font-size: .95rem; background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px 14px; }
.howto summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.howto ul { margin: 10px 0 4px; padding-left: 18px; line-height: 1.45; display: grid; gap: 6px; }
.howto b { color: var(--ink); font-weight: 600; }
.best-line { margin: 0; color: var(--ink-dim); }
.best-line b { color: var(--cta); }
.final { font-size: 3.2rem; font-weight: 700; margin: 0; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cta); }
.newrec { margin: -4px 0 0; color: #42d642; font-weight: 600; font-size: 1.1rem; }
.newrec.hidden { display: none; }
.rbesito { margin: 6px 0 0; font-size: .95rem; font-weight: 600; }
.rbesito.hidden { display: none; }
.summary { display: flex; gap: 22px; margin: 4px 0 8px; }
.summary dd { font-size: 1.3rem; }

/* ===== v5 grafica gemme: sfondo fotografico (render Blender) e cornice in metallo ===== */
body {
  background: #020208 url("../img/sfondo-o.webp") center / cover no-repeat fixed;
}
@media (orientation: portrait) { body { background-image: url("../img/sfondo-v.webp"); } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 75% at 50% 50%, rgba(2,2,10,.55), rgba(2,2,10,.15) 70%, rgba(2,2,10,.5));
}
.well {
  padding: 4px; border-radius: 10px;
  background: linear-gradient(160deg, #f4f6ff 0%, #9aa1b8 18%, #3c4258 40%, #c9cee0 62%, #5b6178 82%, #e8ebf6 100%);
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.7), 0 0 50px -10px rgba(110,140,255,.25);
}
.well.danger { background: linear-gradient(160deg, #ffd0d0, #e0414b 30%, #6e1018 60%, #ff8a8a); }
#board { background: transparent; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.box {
  background: linear-gradient(180deg, rgba(20,22,48,.72), rgba(8,9,24,.78));
  box-shadow: inset 0 0 0 1px rgba(200,210,255,.22), inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -10px rgba(0,0,0,.9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.stats dd { text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.screen { background: rgba(3,3,12,.62); }
.pad button { background: linear-gradient(180deg, rgba(48,52,110,.88), rgba(24,26,64,.92)); }