/* Pleasure Paradise, giochi digitali. Token del tema Velluto del sito, bloccati. */
:root {
  /* Scala di movimento transitions-dev (copiata una volta) */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-base: 8px;
  --blur-small: 2px;
  --panel-open-dur: var(--duration-slow);
  --panel-close-dur: var(--duration-medium);
  --panel-translate-y: 48px;
  --panel-blur: var(--blur-small);
  --panel-ease: var(--ease-smooth-out);
  --tabs-dur: var(--duration-fast);
  --tabs-ease: var(--ease-smooth-out);

  /* Brand Velluto */
  --ink: #f5e9da;
  --ink-2: #dccabd;
  --muted: #a8939c;
  --cream: #0b0709;
  --card: #170d14;
  --paper: #130a10;
  --line: rgba(216, 176, 106, .2);
  --gold-solid: #d8b06a;
  --gold-focus: #f3d99a;
  --gold: linear-gradient(100deg, #f6dea0 0%, #d4a651 32%, #a47831 52%, #f1d48e 76%, #c79440 100%);
  --velvet: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 46%), linear-gradient(180deg, #c9193e, #7a0b22);
  --velvet-hi: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 46%), linear-gradient(180deg, #e0254c, #8e0f2a);
  --serif: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 88% -8%, rgba(142, 15, 42, .30), transparent 60%),
    radial-gradient(900px 800px at -12% 38%, rgba(70, 24, 98, .30), transparent 65%),
    var(--cream);
  background-attachment: fixed;
}
body.bloccato { overflow: hidden; }
a { color: var(--gold-focus); }
:focus-visible { outline: 2px solid var(--gold-focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 16px 48px; }

/* Testata */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); min-height: 44px; }
.logo svg { width: 34px; height: 22px; flex: none; }
.logo b { font-family: var(--serif); font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1; }
.logo b i { font-weight: 500; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top-link { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.top-link:hover { color: var(--gold-focus); }

/* Apertura */
.hero { padding: 18px 0 8px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-solid); margin: 0 0 10px; }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 12vw, 64px); line-height: 1; letter-spacing: -.01em; margin: 0 0 14px; }
h1 em, h2 em { font-style: italic; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--ink-2); margin: 0 0 6px; max-width: 34em; }
.stato { margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r); background: rgba(23, 13, 20, .7); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 15px; }
.stato b { color: var(--ink); font-weight: 600; }

/* Livelli: tre schede a larghezza fissa, si muove solo la pillola */
.livello { margin: 22px 0 6px; }
.livello-label { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.t-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px; border-radius: 999px; background: #150c12; box-shadow: inset 0 0 0 1px rgba(216, 176, 106, .18); }
.t-tab { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; min-height: 44px; padding: 6px 4px; border-radius: 999px; color: var(--ink-2); font: 500 14px/1.15 var(--sans); cursor: pointer; transition: color var(--tabs-dur) var(--tabs-ease); }
.t-tab[aria-selected="true"] { color: #fff6ec; }
.t-tabs-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--velvet); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(243,217,154,.35); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform var(--tabs-dur) var(--tabs-ease); pointer-events: none; }
.nota { font-size: 13px; color: var(--muted); margin: 8px 2px 0; }

/* Griglia delle porte */
.porte { margin: 22px 0 0; }
.porta-zero { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 64px; padding: 14px 18px; margin: 0 0 10px; border: 0; border-radius: var(--r-lg); background: var(--card); box-shadow: inset 0 0 0 1px rgba(216, 176, 106, .45); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.porta-zero span { font-family: var(--serif); font-style: italic; font-size: 21px; }
.porta-zero small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-solid); }
.griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .griglia { grid-template-columns: repeat(6, 1fr); gap: 10px; } }
.porta { position: relative; width: 100%; aspect-ratio: 1 / 1.08; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: var(--r); font: inherit; color: var(--ink); cursor: pointer; padding: 6px; }
.porta .num { font-family: var(--serif); font-size: 28px; line-height: 1; font-weight: 500; }
.porta .quando { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.porta.chiusa { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.porta.chiusa .num { color: #8f7d86; }
.porta.aperta { background: var(--velvet); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.35), 0 6px 18px rgba(201, 25, 62, .22); color: #fff6ec; }
.porta.aperta .quando { color: rgba(255, 246, 236, .82); }
.porta.aperta:hover { background: var(--velvet-hi); }
.porta.oggi { box-shadow: inset 0 0 0 2px var(--gold-focus), 0 8px 24px rgba(227, 40, 79, .35); }
.porta .vista { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-focus); opacity: 0; transform: scale(.4); transition: opacity var(--duration-very-slow) var(--ease-bounce), transform var(--duration-very-slow) var(--ease-bounce); }
.porta.letta .vista { opacity: 1; transform: scale(1); }

.parola { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.parola b { color: var(--ink); }
.link-btn { appearance: none; border: 0; background: none; color: var(--gold-focus); font: inherit; text-decoration: underline; cursor: pointer; padding: 10px 4px; min-height: 44px; }

/* Bottoni e campi */
.btn { appearance: none; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 600 16px/1.1 var(--sans); cursor: pointer; text-decoration: none; }
.btn-velluto { background: var(--velvet); color: #fff6ec; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.35), 0 6px 18px rgba(201, 25, 62, .28); }
.btn-velluto:hover { background: var(--velvet-hi); }
.btn-oro { background: var(--gold); color: #1a0d10; }
.btn-linea { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(216, 176, 106, .7); }
.btn-linea:hover { background: rgba(216, 176, 106, .14); color: var(--gold-focus); }
.btn-pieno { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

.box { margin: 26px 0 0; padding: 20px 18px; border-radius: var(--r-lg); background: rgba(23, 13, 20, .85); box-shadow: inset 0 0 0 1px var(--line); }
.box h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.1; margin: 0 0 8px; }
.box p { color: var(--ink-2); margin: 0 0 14px; }
.campo { display: block; margin: 0 0 12px; }
.campo span { display: block; font-size: 14px; color: var(--ink-2); margin: 0 0 6px; }
.campo input, .campo textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: var(--r); background: #150c12; color: var(--ink); font: 16px/1.3 var(--sans); box-shadow: inset 0 0 0 1px rgba(216, 176, 106, .22); }
.campo textarea { min-height: 88px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--gold-focus); outline-offset: 1px; }
.spunta { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); margin: 0 0 14px; cursor: pointer; }
.spunta input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: #c9193e; flex: none; }
.errore { color: #ffb3c1; font-size: 14px; margin: 0 0 12px; min-height: 1em; }
.errore:empty { display: none; }
.riga-btn { display: flex; flex-wrap: wrap; gap: 10px; }

/* Scheda della sera: panel reveal */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(5, 2, 4, .72); opacity: 0; pointer-events: none; transition: opacity var(--panel-close-dur) var(--panel-ease); }
.velo[data-open="true"] { opacity: 1; pointer-events: auto; transition: opacity var(--panel-open-dur) var(--panel-ease); }
.t-panel-slide { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0 auto; max-width: 600px; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(180deg, #1a0e16, #120a0f); box-shadow: inset 0 1px 0 rgba(216, 176, 106, .35), 0 -18px 60px rgba(0,0,0,.5);
  transform: translateY(var(--panel-translate-y)); opacity: 0; filter: blur(var(--panel-blur)); pointer-events: none; visibility: hidden;
  transition: transform var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease), visibility 0s linear var(--panel-close-dur); }
.t-panel-slide[data-open="true"] { transform: translateY(0); opacity: 1; filter: blur(0); pointer-events: auto; visibility: visible;
  transition: transform var(--panel-open-dur) var(--panel-ease), opacity var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease), visibility 0s; }
@media (min-width: 640px) { .t-panel-slide { bottom: auto; top: 50%; border-radius: var(--r-lg); margin-top: -1px; transform: translateY(calc(-50% + var(--panel-translate-y))); } .t-panel-slide[data-open="true"] { transform: translateY(-50%); } }
.scheda h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.08; margin: 4px 0 16px; }
.scheda .testo { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 18px 0 0; }
.scheda .testo p { margin: 0 0 12px; }
.scheda ol { margin: 6px 0 0; padding-left: 22px; color: var(--ink-2); }
.scheda ol li { margin: 0 0 10px; }
.prodotto { display: block; margin: 20px 0 0; padding: 14px 16px; border-radius: var(--r); background: rgba(216, 176, 106, .08); box-shadow: inset 0 0 0 1px rgba(216, 176, 106, .3); text-decoration: none; color: var(--ink); }
.prodotto small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-solid); margin: 0 0 4px; }
.prodotto b { display: block; font-weight: 600; }
.prodotto span { display: block; font-size: 14px; color: var(--ink-2); margin: 2px 0 0; }
.prodotto em { display: inline-block; margin: 8px 0 0; font-style: normal; font-size: 14px; color: var(--gold-focus); text-decoration: underline; }
.stop { margin: 20px 0 0; padding: 12px 14px; border-radius: var(--r); background: rgba(201, 25, 62, .12); box-shadow: inset 0 0 0 1px rgba(201, 25, 62, .4); font-size: 14px; color: var(--ink-2); }
.stop b { color: var(--ink); }
.scheda .riga-btn { margin: 20px 0 0; }
.scheda .riga-btn .btn { flex: 1 1 140px; }

/* Copertina del regalo */
.copertina { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px 16px; background:
    radial-gradient(800px 600px at 80% 0%, rgba(142, 15, 42, .45), transparent 60%),
    radial-gradient(700px 600px at 0% 80%, rgba(70, 24, 98, .4), transparent 65%), var(--cream); text-align: center; }
.copertina[hidden] { display: none; }
.copertina .carta { max-width: 420px; width: 100%; padding: 32px 22px; border-radius: var(--r-lg); background: rgba(19, 10, 16, .9); box-shadow: inset 0 0 0 1px rgba(216, 176, 106, .45); }
.copertina h2 { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; margin: 10px 0 14px; }
.copertina .per, .copertina .da { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-2); margin: 0; }
.copertina .msg { font-size: 17px; color: var(--ink); margin: 16px 0; white-space: pre-line; }
.copertina .btn { margin-top: 18px; }

/* Avviso breve */
.avviso { position: fixed; z-index: 90; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: #1f1119; box-shadow: inset 0 0 0 1px rgba(216, 176, 106, .45), 0 10px 30px rgba(0,0,0,.45); color: var(--ink); font-size: 15px; transform: translate(-50%, var(--distance-base)); opacity: 0; pointer-events: none; transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out); }
.avviso[data-open="true"] { opacity: 1; transform: translate(-50%, 0); transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }

.piede { margin: 40px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.piede a { color: var(--muted); }
.caricamento { color: var(--muted); margin: 24px 0; }

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .t-tab, .t-panel-slide, .velo, .avviso, .porta .vista { transition: none !important; }
  .t-panel-slide { filter: none; }
}