:root {
  --bg: #0a0614;
  --cab: #1b1030;
  --cab-edge: #2c1a4d;
  --screen: #05060f;
  --pink: #ff3ea5;
  --cyan: #2ef2ff;
  --yellow: #ffe14a;
  --green: #5cff7a;
  --text: #d8e6ff;
  --dim: #6b7aa6;
  --line: #26305a;
  --pixel: "Press Start 2P", monospace;
  --term: "VT323", monospace;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  min-height: 100dvh;
  font-family: var(--term);
  font-size: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, #2a0f4a 0%, transparent 60%),
    repeating-linear-gradient(90deg, var(--bg) 0 38px, #0d0819 38px 40px);
  background-attachment: fixed;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
input { font-family: var(--term); }

/* effetto CRT riusabile */
.crt { position: relative; }
.crt::after, .screen::after, .gate::after, .sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.5) 100%);
}
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hl { color: var(--yellow); }
.muted { color: var(--dim); }

/* ---------- SCHERMATA PASSWORD ---------- */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
  background: radial-gradient(ellipse at center, #120a2a 0%, #000 75%);
  text-align: center;
}
.gate-title {
  font-family: var(--pixel); font-size: 26px; line-height: 1.8; color: var(--yellow);
  text-shadow: 0 0 6px var(--pink), 0 0 18px var(--pink), 3px 3px 0 #b0006a;
}
.coin-slot {
  width: 74px; height: 110px; border-radius: 8px;
  background: linear-gradient(180deg, #3a3a44, #18181f); border: 3px solid #000;
  display: grid; place-items: center;
  box-shadow: 0 0 22px rgba(255, 62, 165, .35);
}
.coin-slot span {
  width: 8px; height: 56px; border-radius: 4px; background: #000;
  box-shadow: 0 0 0 3px #e03030, 0 0 14px #ff3030;
  animation: slot 1.1s steps(1) infinite;
}
@keyframes slot { 50% { box-shadow: 0 0 0 3px #701818, 0 0 2px #701818; } }
.insert { font-family: var(--pixel); font-size: 20px; color: var(--pink); text-shadow: 0 0 10px var(--pink); }
.gate-form { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 280px; position: relative; z-index: 1; }
.gate-form input {
  font-size: 26px; text-align: center; letter-spacing: 4px;
  background: #000; color: var(--green); border: 3px solid var(--line); padding: 10px; border-radius: 0;
  outline: none; -webkit-appearance: none;
}
.gate-form input:focus { border-color: var(--cyan); box-shadow: 0 0 12px rgba(46,242,255,.5); }
.gate-msg { min-height: 20px; font-family: var(--pixel); font-size: 10px; color: var(--pink); }
.gate-credit { font-family: var(--pixel); font-size: 10px; color: var(--dim); }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }

/* ---------- CABINATO ---------- */
/* Cabinato bloccato a tutto schermo: scorre solo l'elenco dei giochi */
.cabinet {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0;
  max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(10px + var(--safe-top)) 10px calc(90px + var(--safe-bottom));
}
.marquee {
  text-align: center; padding: 16px 8px 12px;
  border-radius: 12px 12px 6px 6px; border: 3px solid #000;
  background: linear-gradient(180deg, #120624, #2b0d3f);
  box-shadow: inset 0 0 30px rgba(255, 62, 165, .35), 0 0 30px rgba(255, 62, 165, .2);
}
.marquee h1 {
  margin: 0; font-family: var(--pixel); font-size: 21px; letter-spacing: 2px; line-height: 1.4;
  color: var(--yellow);
  text-shadow: 0 0 6px var(--pink), 0 0 16px var(--pink), 2px 2px 0 #b0006a;
}
.marquee p { margin: 6px 0 0; color: var(--cyan); font-size: 17px; letter-spacing: 2px; }

.screen {
  position: relative; margin-top: 10px;
  background: radial-gradient(ellipse at center, #0b1030 0%, var(--screen) 85%);
  border: 8px solid #000; border-radius: 18px / 12px;
  box-shadow: 0 0 0 3px var(--cab-edge), inset 0 0 30px #000;
  padding: 12px 10px; overflow: hidden;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.hud {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--pixel); font-size: 10px; margin-bottom: 12px;
}
.filters { display: flex; gap: 6px; margin-bottom: 10px; }
.chip {
  flex: 1; font-family: var(--pixel); font-size: 9px;
  background: transparent; color: var(--dim);
  border: 2px solid var(--line); padding: 10px 4px;
}
.chip.on { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(46,242,255,.4); }

/* ---------- ELENCO ---------- */
.rows {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px;
}
.rows > * { flex-shrink: 0; }
.row {
  display: grid; grid-template-columns: 40px 42px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid #141a38; position: relative; z-index: 1;
}
.row:active { background: rgba(46, 242, 255, .12); }
.check {
  width: 34px; height: 34px; border: 2px solid var(--dim); background: transparent;
  display: grid; place-items: center; padding: 0;
  font-family: var(--pixel); font-size: 13px; color: transparent;
}
.row.done .check { border-color: var(--green); color: var(--green); box-shadow: 0 0 8px rgba(92,255,122,.6); }
.thumb {
  width: 42px; height: 54px; border: 2px solid #000;
  display: grid; place-items: center; font-family: var(--pixel); font-size: 10px; color: #fff;
  background-size: cover; background-position: center; text-shadow: 1px 1px 0 #000;
}
.row-text { min-width: 0; }
.row-name { color: #fff; font-size: 22px; line-height: 1.05; overflow-wrap: anywhere; }
.row.done .row-name { color: var(--green); }
.row-console { color: var(--cyan); font-size: 17px; }
.row-rate { text-align: right; white-space: nowrap; }
.stars { letter-spacing: 0; font-size: 17px; }
.stars .on { color: var(--yellow); text-shadow: 0 0 6px rgba(255,225,74,.7); }
.stars .half { background: linear-gradient(90deg, var(--yellow) 50%, #2a2f55 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars .off { color: #2a2f55; }
.plus {
  display: inline-block; margin-top: 3px; padding: 2px 4px;
  font-family: var(--pixel); font-size: 8px; color: #000;
  background: var(--pink); box-shadow: 0 0 8px var(--pink);
}
.empty { text-align: center; padding: 50px 10px; font-family: var(--pixel); font-size: 11px; line-height: 2; color: var(--dim); }

.add-fab {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 10;
  bottom: calc(16px + var(--safe-bottom));
  font-family: var(--pixel); font-size: 11px; padding: 16px 20px; white-space: nowrap;
  color: #000; background: var(--green); border: 3px solid #000;
  box-shadow: 0 5px 0 #1f8a33, 0 0 22px rgba(92,255,122,.45);
}
.add-fab:active { transform: translate(-50%, 4px); box-shadow: 0 1px 0 #1f8a33; }

/* ---------- DETTAGLIO ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at 50% 20%, #0b1030 0%, var(--screen) 80%);
  padding: calc(12px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}
.sheet::after { position: fixed; }
.sheet-inner { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.back {
  align-self: flex-start; background: none; border: 0; padding: 8px 0;
  font-family: var(--pixel); font-size: 10px; color: var(--cyan);
}
.cover {
  position: relative; width: 62%; margin: 0 auto; aspect-ratio: 3 / 4;
  border: 3px solid #000; box-shadow: 0 0 0 2px var(--cyan), 0 0 26px rgba(46,242,255,.35);
  display: grid; place-items: center; text-align: center;
  background-size: cover; background-position: center;
  font-family: var(--pixel); font-size: 18px; line-height: 1.8; color: #fff; text-shadow: 2px 2px 0 #000;
}
.cover small { display: block; font-size: 8px; }
.cover-edit {
  position: absolute; right: -10px; bottom: -10px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cyan); color: #000; border: 3px solid #000; font-size: 18px; display: grid; place-items: center;
}
.detail-title { margin: 6px 0 0; font-family: var(--pixel); font-size: 15px; line-height: 1.5; color: #fff; text-align: center; }
.detail-meta { text-align: center; color: var(--cyan); }
.detail-rate { text-align: center; }
.detail-rate .stars { font-size: 30px; }
.detail-rate .plus { font-size: 10px; vertical-align: 6px; margin-left: 6px; }

.votes { border: 2px solid var(--line); padding: 10px 12px; background: rgba(10,14,40,.6); }
.votes-label { font-family: var(--pixel); font-size: 9px; color: var(--pink); margin-bottom: 6px; }
.vote-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.vote-row .p { font-family: var(--pixel); font-size: 10px; }
.vote-row .stars { font-size: 20px; }
.vote-row .plus-mini { color: var(--pink); font-family: var(--pixel); font-size: 10px; margin-left: 4px; }

.control-panel {
  margin-top: 4px; padding: 16px 10px 12px;
  background: linear-gradient(180deg, #2a1846, #150b26); border: 3px solid #000; border-radius: 10px;
  display: flex; justify-content: space-around;
}
.arc-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.arc {
  width: 66px; height: 66px; border-radius: 50%; border: 3px solid #000;
  font-family: var(--pixel); font-size: 14px; color: #000;
  box-shadow: 0 6px 0 rgba(0,0,0,.6), inset 0 -6px 0 rgba(0,0,0,.25);
}
.arc:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.arc.a { background: var(--green); }
.arc.b { background: var(--yellow); }
.arc.c { background: var(--cyan); }
.arc-label { font-family: var(--pixel); font-size: 8px; color: var(--dim); text-align: center; }
.secondary { display: flex; justify-content: center; gap: 24px; }
.link-btn { background: none; border: 0; font-family: var(--pixel); font-size: 9px; color: var(--dim); padding: 10px; }
.link-btn.danger { color: #ff5b5b; }

/* ---------- MODALI ---------- */
.modal {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
}
.modal-box {
  width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto;
  background: linear-gradient(180deg, #120a2a, #070814);
  border: 3px solid var(--cyan); box-shadow: 0 0 30px rgba(46,242,255,.35);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 16px;
}
.modal-title { font-family: var(--pixel); font-size: 13px; line-height: 1.6; text-align: center; color: var(--yellow); margin: 0; }
.modal-sub { text-align: center; color: var(--cyan); margin-top: -8px; }

.players { display: flex; flex-direction: column; gap: 12px; }
.player {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: #0b0f26; border: 3px solid var(--pc); text-align: left;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 45%, transparent);
}
.player:active { background: color-mix(in srgb, var(--pc) 25%, #0b0f26); }
.player .tag { font-family: var(--pixel); font-size: 10px; color: #000; background: var(--pc); padding: 6px; }
.player .pname { font-family: var(--pixel); font-size: 13px; color: var(--pc); flex: 1; }
.player .pvote { font-size: 18px; color: var(--dim); }

.star-pick { display: flex; justify-content: center; gap: 4px; }
.star-pick button {
  background: none; border: 0; padding: 4px; font-size: 46px; line-height: 1; color: #2a2f55;
}
.star-pick button.on { color: var(--yellow); text-shadow: 0 0 10px rgba(255,225,74,.8); }
.plus-toggle {
  align-self: center; font-family: var(--pixel); font-size: 11px; padding: 12px 16px;
  background: transparent; color: var(--dim); border: 3px solid #3a2357;
}
.plus-toggle.on { color: #000; background: var(--pink); border-color: #000; box-shadow: 0 0 16px var(--pink); }
.plus-hint { text-align: center; color: var(--dim); font-size: 17px; margin-top: -8px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--pixel); font-size: 9px; color: var(--pink); }
.field input {
  font-size: 22px; padding: 10px; background: #000; color: #fff;
  border: 2px solid var(--line); border-radius: 0; outline: none; -webkit-appearance: none;
}
.field input:focus { border-color: var(--cyan); }

.btns { display: flex; gap: 10px; }
.btns > * { flex: 1; }
.big-btn {
  font-family: var(--pixel); font-size: 11px; padding: 14px 10px;
  border: 3px solid #000; color: #000; background: var(--green); box-shadow: 0 4px 0 #1f8a33;
}
.big-btn.grey { background: #3a4170; color: #fff; box-shadow: 0 4px 0 #1d2140; }
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.big-btn:disabled { opacity: .5; }

.toast {
  position: fixed; left: 50%; top: calc(14px + var(--safe-top)); transform: translateX(-50%); z-index: 60;
  font-family: var(--pixel); font-size: 10px; padding: 10px 14px; line-height: 1.5;
  background: #000; color: var(--yellow); border: 2px solid var(--yellow); max-width: 90vw; text-align: center;
}

/* Press Start 2P non ha la Ì maiuscola: accento grave disegnato a pixel */
.igrave { position: relative; display: inline-block; }
.igrave::before {
  content: ""; position: absolute; left: 24%; top: -0.27em;
  width: 0.16em; height: 0.16em; background: currentColor;
  box-shadow: 0.16em 0.16em 0 currentColor;
}

/* ---------- ORDINAMENTO E DATA ---------- */
.sorts { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-family: var(--pixel); font-size: 8px; color: var(--dim); }
.sorts span { margin-right: 4px; }
.sorts button {
  font-family: var(--pixel); font-size: 8px; padding: 7px 8px;
  background: transparent; color: var(--dim); border: 2px solid transparent;
}
.sorts button.on { color: var(--yellow); border-color: var(--yellow); }
.row-date { color: var(--green); }

.date-btn {
  align-self: center; margin-top: -6px;
  font-family: var(--pixel); font-size: 10px; padding: 10px 12px;
  background: transparent; color: var(--green); border: 2px dashed #2b5f3a;
}
.date-pick { display: flex; gap: 10px; }
.date-pick .field { flex: 1; }
.field select {
  font-family: var(--term); font-size: 24px; padding: 8px 10px; background: #000; color: #fff;
  border: 2px solid var(--line); border-radius: 0; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.modal-box > .link-btn { align-self: center; }

/* ---------- COPERTINA A TUTTO SCHERMO ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 45; background: #000;
  display: flex; align-items: center; justify-content: center;
  padding: calc(56px + var(--safe-top)) 12px calc(24px + var(--safe-bottom));
  animation: fade .15s ease-out;
}
.viewer img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 0 0 2px var(--cyan), 0 0 40px rgba(46,242,255,.35);
}
.viewer-close {
  position: absolute; top: calc(10px + var(--safe-top)); right: 12px;
  width: 44px; height: 44px; border: 2px solid var(--cyan); background: #000;
  color: var(--cyan); font-family: var(--pixel); font-size: 14px;
}
@keyframes fade { from { opacity: 0; } }