/* Stile "retro handheld": palette scura, font monospazio/pixel, bezel
   decorativo. Mobile-first: sul telefono l'app riempie lo schermo; da tablet
   in su viene presentata dentro una cornice che richiama una console
   portatile, centrata sulla pagina. */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Press+Start+2P&display=swap');

:root {
  --bg-pagina: oklch(0.07 0.02 240);
  --bezel: oklch(0.32 0.035 250);
  --bezel-bordo: oklch(0.4 0.03 250);
  --schermo: oklch(0.12 0.02 240);
  --pannello: oklch(0.20 0.02 250);
  --pannello-2: oklch(0.18 0.02 250);
  --bordo: oklch(0.30 0.02 250);
  --bordo-forte: oklch(0.35 0.02 250);
  --testo: oklch(0.95 0.01 250);
  --testo-dim: oklch(0.65 0.02 250);
  --testo-faint: oklch(0.5 0.02 250);
  --testo-more-faint: oklch(0.45 0.02 250);
  --accent: oklch(0.78 0.14 175);
  --accent-contrast: oklch(0.12 0.02 240);
  --reverse: oklch(0.8 0.15 85);
  --danger: oklch(0.58 0.19 25);
  --blu: oklch(0.6 0.19 258);
  --blu-contrast: oklch(0.98 0.01 250);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-pagina);
  font-family: 'Space Mono', monospace;
  color: var(--testo);
  min-height: 100vh;
}

button, input {
  font-family: inherit;
}

/* ---- Device / schermo: cornice decorativa, solo da tablet in su ---- */

.device {
  width: 100%;
  min-height: 100vh;
}

.schermo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--schermo);
  overflow: hidden;
}

.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px);
}

@media (min-width: 480px) {
  .device {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
  }

  .schermo {
    width: 100%;
    max-width: 400px;
    min-height: 720px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
  }

  .device::before {
    /* Il bezel è simulato con un padding/bordo attorno allo schermo. */
  }

  .schermo {
    border: 2px solid var(--bezel-bordo);
    outline: 16px solid var(--bezel);
    outline-offset: 0;
  }
}

/* ---- Topbar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  gap: 8px;
  z-index: 1;
}

.topbar__brand { display: flex; align-items: center; gap: 8px; }

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px oklch(0.58 0.19 25 / .8);
  flex-shrink: 0;
}

.logo {
  font: 9px 'Press Start 2P', monospace;
  color: var(--accent);
  letter-spacing: 1px;
}

.topbar__user {
  font: 10px 'Space Mono', monospace;
  color: var(--testo-dim);
  text-align: right;
}

.topbar__user a { color: var(--testo-dim); }

/* ---- Barra di ricerca ---- */

.search-bar {
  margin: 0 16px 12px;
  height: 42px;
  border-radius: 21px;
  background: var(--pannello);
  border: 1px solid var(--bordo);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  z-index: 1;
}

.search-bar__icona { font-size: 12px; color: var(--testo-faint); }

.search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--testo);
  font-size: 13px;
}

.search-bar input::placeholder { color: var(--testo-faint); }

/* ---- Interruttore artwork / foto mie ---- */

.toggle-vista {
  margin: 0 16px 14px;
  display: flex;
  background: var(--pannello);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  z-index: 1;
}

.toggle-vista__opzione {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--testo-dim);
  font: 10px 'Space Mono', monospace;
  cursor: pointer;
}

.toggle-vista__opzione--attiva {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}

/* ---- Form aggiornamento stato ---- */

.update-card {
  margin: 0 16px 14px;
  background: var(--pannello-2);
  border: 1px solid oklch(0.28 0.02 250);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}

.update-card__label {
  font: 10px 'Space Mono', monospace;
  color: var(--testo-dim);
  letter-spacing: .5px;
}

.update-card__row { display: flex; gap: 8px; }

.update-card__row input {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  background: var(--pannello);
  border: none;
  padding: 0 12px;
  color: var(--testo);
  font-size: 13px;
}

.btn-camera {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--pannello);
  border: 1px solid var(--bordo-forte);
  color: var(--testo);
  font-size: 14px;
  cursor: pointer;
}

.update-card__actions { display: flex; gap: 6px; }

.btn-stato {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 10px;
  font: 700 10px 'Space Mono', monospace;
  border: none;
  cursor: pointer;
  background: var(--pannello);
  color: var(--testo-dim);
}

.btn-stato--normale { background: var(--accent); color: var(--accent-contrast); }
.btn-stato--reverse { border: 1px solid oklch(0.8 0.15 85 / .5); color: var(--reverse); }
.btn-stato--rimuovi { color: var(--testo-faint); }

/* Segna, tra i bottoni del modale, quale rappresenta lo stato attuale del
   Pokémon: i colori sopra sono fissi per tipo di bottone, quindi da soli
   non bastano a distinguere la scelta corrente da quelle non selezionate. */
.btn-stato--corrente {
  outline: 2px solid var(--testo);
  outline-offset: 2px;
}

.update-feedback {
  min-height: 14px;
  font-size: 10px;
  color: var(--testo-dim);
}

.update-feedback--ok { color: var(--accent); }
.update-feedback--errore { color: var(--danger); }

/* ---- Griglia ---- */

.grid-wrap {
  flex: 1;
  padding: 0 16px 20px;
  z-index: 1;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (min-width: 480px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

.cella {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.cella img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--pannello);
  object-fit: contain;
  padding: 6px;
}

.cella--non-posseduto img,
.cella--foto-mancante img { filter: grayscale(1) opacity(.55); }

.cella__label {
  font: 9px 'Space Mono', monospace;
  color: var(--testo-faint);
  text-align: center;
}

.cella--normale .cella__label,
.cella--reverse .cella__label {
  color: var(--testo);
}

.stellina {
  position: absolute;
  top: -4px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--reverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--accent-contrast);
  z-index: 2;
}

.cella[hidden] { display: none; }

/* ---- Modale dettaglio carta ---- */

.modale {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
}

.modale[hidden] { display: none; }

.modale__sfondo {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.modale__contenuto {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--pannello-2);
  border: 1px solid var(--bordo-forte);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 480px) {
  .modale { align-items: center; }
  .modale__contenuto { border-radius: 20px; }
}

.modale__chiudi {
  align-self: flex-end;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bordo);
  border: none;
  color: var(--testo);
  font-size: 14px;
  cursor: pointer;
}

.modale__immagini {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.modale__immagine-blocco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 130px;
}

.modale__immagine-blocco img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  border-radius: 10px;
}

.modale__immagine-blocco--foto img {
  background: var(--pannello);
}

.modale__foto-placeholder {
  width: 130px;
  height: 130px;
  border-radius: 10px;
  border: 1px dashed var(--bordo-forte);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: 9px 'Space Mono', monospace;
  color: var(--testo-faint);
  text-align: center;
  line-height: 1.6;
}

.modale__immagine-etichetta {
  font: 9px 'Space Mono', monospace;
  color: var(--testo-faint);
  letter-spacing: .5px;
}

.modale__titolo {
  text-align: center;
  font: 700 15px 'Space Mono', monospace;
}

.modale__stato {
  text-align: center;
  font: 10px 'Space Mono', monospace;
  color: var(--testo-faint);
}

.modale__stato--reverse { color: var(--reverse); }
.modale__stato--normale { color: var(--accent); }

.modale__azioni { padding: 0; }

.btn-foto {
  align-self: center;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--pannello);
  border: 1px solid var(--bordo-forte);
  color: var(--testo);
  font: 700 11px 'Space Mono', monospace;
  cursor: pointer;
}

.modale__divisore { height: 1px; background: var(--bordo); }

.modale__sezione-titolo {
  font: 10px 'Space Mono', monospace;
  color: var(--testo-dim);
  letter-spacing: .5px;
}

.modale__espansioni { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 6px 10px;
  border-radius: 14px;
  background: oklch(0.24 0.02 250);
  border: none;
  font: 10px 'Space Mono', monospace;
  color: var(--testo);
  cursor: pointer;
}

.chip:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.chip--posseduta {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.modale__nota-espansione { font: 9px 'Space Mono', monospace; color: var(--reverse); }
.modale__nota-fase { font: 9px 'Space Mono', monospace; color: var(--testo-more-faint); }

/* ---- Login ---- */

.pagina-login .device {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.schermo--login {
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 32px;
  text-align: center;
}

.login-brand { display: flex; align-items: center; gap: 10px; z-index: 1; }
.login-brand .logo { font-size: 11px; }

.login-sottotitolo {
  font-size: 12px;
  color: var(--testo-dim);
  line-height: 1.6;
  z-index: 1;
}

.login-errore {
  font-size: 11px;
  color: var(--danger);
  z-index: 1;
}

.login-form {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.login-form span {
  font-size: 11px;
  color: var(--testo-dim);
}

.login-form input {
  height: 44px;
  border-radius: 8px;
  background: var(--pannello);
  border: 1px solid var(--bordo-forte);
  padding: 0 14px;
  color: var(--testo);
  font-size: 14px;
}

.btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: 700 13px 'Space Mono', monospace;
  letter-spacing: 1px;
}

.btn--accent { background: var(--accent); color: var(--accent-contrast); }
.btn--full { width: 100%; height: 48px; }

.login-nota {
  font-size: 10px;
  color: var(--testo-more-faint);
  z-index: 1;
}

/* ---- Statistiche ---- */

.schermo--statistiche { padding-bottom: 20px; }

.stat-anello-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  z-index: 1;
}

.stat-anello {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-anello__interno {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--schermo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-anello__numero { font: 700 28px 'Space Mono', monospace; }
.stat-anello__totale { font: 10px 'Space Mono', monospace; color: var(--testo-dim); }
.stat-percentuale { font: 11px 'Space Mono', monospace; color: var(--testo-dim); }

.stat-cards {
  margin: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  z-index: 1;
}

.stat-card {
  background: var(--pannello);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card--largo { grid-column: 1 / 3; }

.stat-card__numero { font: 700 22px 'Space Mono', monospace; }
.stat-card__numero--accent { color: var(--accent); }
.stat-card__numero--danger { color: var(--danger); }
.stat-card__numero--reverse { color: var(--reverse); }
.stat-card__label { font: 10px 'Space Mono', monospace; color: var(--testo-dim); }