/* ============================================================================
   09 · Tarocco — oro su bordeaux.

   Ogni cosa ha una cornice, spesso doppia. Gli enigmi sono arcani numerati e si
   «svelano»; le carte ancora chiuse portano solo una stella. Tutto è centrato e
   un po' solenne.  Mockup: blocco #09.
   ========================================================================= */

html[data-theme="tarocco"] {
  --bg: #3b0d16;
  --ink: #f4e3c4;
  --ink-2: #c9a97e;
  --ink-3: #b8875a;
  --line: #6d4325;
  --surface: rgba(217, 182, 120, .1);
  --surface-ink: #f4e3c4;

  --accent: #d9b678;
  --accent-ink: #3b0d16;
  --ok: rgba(217, 182, 120, .14);
  --ok-ink: #f4e3c4;
  --warn: transparent;
  --warn-ink: #c9a97e;
  --locked: transparent;
  --locked-ink: #7d4f30;
  --hint-locked: transparent;

  /* la carta si legge alla luce: l'enigma è l'unica schermata chiara */
  --lvl-bg: #f4e3c4;
  --lvl-ink: #3b0d16;
  --right-bg: #3b0d16;
  --right-ink: #f4e3c4;
  --wrong-bg: #3b0d16;
  --wrong-ink: #f4e3c4;
  --ask-bg: #3b0d16;
  --ask-ink: #f4e3c4;
  --full-bg: #3b0d16;
  --full-ink: #f4e3c4;

  --conf-1: #d9b678;
  --conf-2: #a3121f;
  --conf-3: #f4e3c4;
  --conf-4: #8a5d33;

  --font: 'Cormorant Garamond', Georgia, serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-mono: 'Cormorant Garamond', Georgia, serif;
  --tt-display: none;
  --tt-label: uppercase;
  --ls-display: 0;
  --ls-label: .3em;
  --w-display: 400;
  --w-label: 400;

  --fs-huge: 36px;
  --fs-title: 31px;
  --fs-lead: 24px;
  --fs-body: 18px;
  --fs-small: 17px;
  --fs-label: 12px;

  --r: 0px;
  --r-lg: 0px;
  --r-pill: 0px;
  --bd: 1px;
  --bd-color: #8a5d33;
  --shadow: none;

  --pad: 24px;
  --head-top: 26px;
  --gap: 10px;
  --gap-block: 22px;
  --block-pad: 18px 20px;
  --btn-pad: 15px;
  color-scheme: dark;

  --ico-fav: 26px;
}

/* --- guscio --- */

html[data-theme="tarocco"] .app.has-tabs .tabbar {
  border-top: 1px solid #6d4325;
  padding: 20px 28px max(28px, var(--safe-tab));
  justify-content: space-between;
}

html[data-theme="tarocco"] .tabbar__item { flex: 0 0 auto; padding: 0; color: #a8794f; }
html[data-theme="tarocco"] .tabbar__item.is-on { background: none; color: #d9b678; }
html[data-theme="tarocco"] .app[data-scr="livello"] .tabbar { border-color: #d6b98f; }

html[data-theme="tarocco"] .head__title { font-family: 'DM Serif Display', serif; font-size: 30px; }
html[data-theme="tarocco"] .brand__name { font-family: 'Cormorant Garamond', serif; font-size: 15px; letter-spacing: .34em; text-transform: uppercase; color: #d9b678; }
html[data-theme="tarocco"] .mark i { background: #f4e3c4; }
html[data-theme="tarocco"] .mark i:nth-child(2) { background: #d9b678; }

html[data-theme="tarocco"] .head__back { font-family: 'Cormorant Garamond', serif; font-size: 14px; letter-spacing: .2em; color: #b8875a; }
html[data-theme="tarocco"] .head__back::before { content: '← '; }
html[data-theme="tarocco"] .head__back[data-racc] span { display: none; }
html[data-theme="tarocco"] .head__back[data-racc]::after { content: attr(data-racc); }
html[data-theme="tarocco"] .app[data-scr="livello"] .head__back { color: #8a5d33; }

html[data-theme="tarocco"] .coins {
  background: none;
  color: #d9b678;
  border: 1px solid #8a5d33;
  border-radius: 2px;
  padding: 5px 11px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .1em;
}

html[data-theme="tarocco"] .coins::before { content: '✦ '; }
html[data-theme="tarocco"] .ico--fav[aria-pressed="true"] { color: #a3121f; }

/* --- home: la carta in cornice, poi il conto degli arcani --- */

/* la cornice doppia: il bordo esterno è del blocco, quello interno è disegnato */
html[data-theme="tarocco"] .resume {
  position: relative;
  border: 1px solid #8a5d33;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(217, 182, 120, .08), rgba(59, 13, 22, 0));
  padding: 21px 23px;
  align-items: center;
  text-align: center;
  gap: 10px;
  color: #f4e3c4;
}

html[data-theme="tarocco"] .resume::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid #8a5d33;
  pointer-events: none;
}

html[data-theme="tarocco"] .resume__where { font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: .3em; color: #d9b678; }
html[data-theme="tarocco"] .resume__text { font-family: 'DM Serif Display', serif; font-size: 29px; line-height: 1.18; color: #fbf1de; letter-spacing: 0; text-transform: none; }

html[data-theme="tarocco"] .resume__cta {
  align-self: center;
  background: none;
  color: #d9b678;
  border: 1px solid #d9b678;
  border-radius: 0;
  padding: 9px 20px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

html[data-theme="tarocco"] .resume__cta::after { content: none; }

html[data-theme="tarocco"] .tally { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }

html[data-theme="tarocco"] .tally::before {
  content: 'Arcani svelati';
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #b8875a;
}

html[data-theme="tarocco"] .tally__n { font-family: 'DM Serif Display', serif; font-size: 36px; color: #d9b678; line-height: 1; letter-spacing: 0; }
html[data-theme="tarocco"] .tally__label { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: #c9a97e; letter-spacing: 0; text-transform: none; padding-top: 0; }

html[data-theme="tarocco"] .colls { grid-template-columns: 1fr; gap: 5px; }

html[data-theme="tarocco"] .coll {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border: 1px solid #6d4325;
  border-radius: 0;
  background: none;
  color: #f4e3c4;
}

html[data-theme="tarocco"] .coll:nth-child(5) { grid-column: auto; }
html[data-theme="tarocco"] .coll[data-state="current"] { border-color: #d9b678; }
html[data-theme="tarocco"] .coll[data-state="locked"] { border-color: #5a3620; opacity: .6; }

html[data-theme="tarocco"] .coll::before {
  content: attr(data-roman);
  width: 38px;
  flex: 0 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: .2em;
  color: #d9b678;
}

html[data-theme="tarocco"] .coll__meta { display: contents; }
html[data-theme="tarocco"] .coll__name { order: 1; flex: 1; font-family: 'DM Serif Display', serif; font-size: 19px; letter-spacing: 0; text-transform: none; }
html[data-theme="tarocco"] .coll__name::after { content: none; }
html[data-theme="tarocco"] .coll[data-ord] .coll__name { font-size: 0; }
html[data-theme="tarocco"] .coll[data-ord] .coll__name::before { content: 'Raccolta ' attr(data-ord); font-size: 19px; }
html[data-theme="tarocco"] .coll__count { order: 2; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #c9a97e; letter-spacing: 0; }
html[data-theme="tarocco"] .coll[data-state="locked"] .coll__count { display: none; }
html[data-theme="tarocco"] .coll__state { order: 3; display: none; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #c9a97e; letter-spacing: 0; text-transform: none; }
html[data-theme="tarocco"] .coll[data-state="locked"] .coll__state { display: block; }

/* --- raccolta: gli arcani, tre per riga --- */

html[data-theme="tarocco"] .scr__intro { align-items: center; text-align: center; }
html[data-theme="tarocco"] .scr__title { font-family: 'DM Serif Display', serif; font-size: 36px; letter-spacing: 0; align-items: center; }
html[data-theme="tarocco"] .scr__title[data-ord] .scr__title-a,
html[data-theme="tarocco"] .scr__title[data-ord] .scr__title-b { display: none; }
html[data-theme="tarocco"] .scr__title[data-ord]::after { content: 'Raccolta ' attr(data-ord); }
html[data-theme="tarocco"] .scr__sub { font-family: 'Cormorant Garamond', serif; font-size: 15px; letter-spacing: .1em; text-transform: none; color: #c9a97e; }

html[data-theme="tarocco"] .cells { grid-template-columns: repeat(3, 1fr); gap: 10px; }

html[data-theme="tarocco"] .cell {
  aspect-ratio: .72;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed #6d4325;
  border-radius: 0;
  background: none;
  color: #7d4f30;
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
}

html[data-theme="tarocco"] .cell[data-state="solved"] { border: 1px solid #8a5d33; background: rgba(217, 182, 120, .14); color: #f4e3c4; }
html[data-theme="tarocco"] .cell[data-state="solved"]::after { content: 'svelato'; }
html[data-theme="tarocco"] .cell[data-state="skipped"] { border: 1px dashed #b8875a; color: #c9a97e; }
html[data-theme="tarocco"] .cell[data-state="skipped"]::after { content: 'sospeso'; color: #b8875a; }
html[data-theme="tarocco"] .cell[data-state="open"] { border: 1px solid #8a5d33; color: #c9a97e; }
html[data-theme="tarocco"] .cell[data-state="open"]::after { content: 'da svelare'; color: #b8875a; }

html[data-theme="tarocco"] .cell[data-state="current"] {
  grid-column: auto;
  aspect-ratio: .72;
  border: 2px solid #d9b678;
  background: linear-gradient(180deg, rgba(217, 182, 120, .28), rgba(59, 13, 22, .2));
  color: #fbf1de;
  font-size: 28px;
}

html[data-theme="tarocco"] .cell[data-state="current"]::after { content: 'ora'; color: #f4e3c4; }

html[data-theme="tarocco"] .cell::after {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d9b678;
}

/* la carta ancora chiusa mostra soltanto la stella */
html[data-theme="tarocco"] .cell[data-state="locked"] .cell__n { font-size: 0; }
html[data-theme="tarocco"] .cell[data-state="locked"] .cell__n::after { content: '✦'; font-size: 20px; }
html[data-theme="tarocco"] .cell__fav::before { content: '✦'; color: #a3121f; font-size: 20px; }

/* --- enigma --- */

html[data-theme="tarocco"] .riddle__meta { justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .3em; color: #8a5d33; }

html[data-theme="tarocco"] .riddle__text {
  position: relative;
  border: 1px solid #b8875a;
  padding: 26px 22px;
  text-align: center;
  font-family: 'DM Serif Display', serif;
  line-height: 1.24;
  letter-spacing: 0;
}

html[data-theme="tarocco"] .riddle__text::after {
  content: '✦';
  display: block;
  padding-top: 14px;
  font-size: 22px;
  color: #b8875a;
}

html[data-theme="tarocco"] .hints { gap: 14px; }

html[data-theme="tarocco"] .hint {
  background: none;
  color: #3b0d16;
  border: 0;
  border-left: 2px solid #a3121f;
  border-radius: 0;
  padding: 0 0 0 14px;
  gap: 5px;
}

html[data-theme="tarocco"] .hint__label { font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .26em; color: #a3121f; }
html[data-theme="tarocco"] .hint__text { font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.45; }

html[data-theme="tarocco"] .hint[data-state="locked"] {
  border: 1px solid #c8a67c;
  padding: 12px;
  justify-content: center;
  gap: 6px;
  color: #8a5d33;
}

html[data-theme="tarocco"] .hint[data-state="locked"] .hint__label { color: #8a5d33; font-size: 14px; letter-spacing: .16em; }
html[data-theme="tarocco"] .hint[data-state="locked"] .hint__label::after { content: ' ·'; }
html[data-theme="tarocco"] .hint__cost { font-family: 'Cormorant Garamond', serif; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
html[data-theme="tarocco"] .option { background: #fbf3e4; border: 1px solid #b8875a; border-radius: 0; color: #3b0d16; }

html[data-theme="tarocco"] .app[data-scr="livello"] .scr__foot {
  border-top: 1px solid #d6b98f;
  padding: 20px 22px max(26px, var(--safe-b));
  gap: 12px;
}

html[data-theme="tarocco"] .answer { border: 0; gap: 12px; }

html[data-theme="tarocco"] .answer__input {
  background: #fbf3e4;
  border: 1px solid #b8875a;
  border-radius: 0;
  padding: 15px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: #3b0d16;
}

html[data-theme="tarocco"] .answer__input::placeholder { color: #a98d6a; }
html[data-theme="tarocco"] .answer__send { width: 56px; background: #3b0d16; color: #f4e3c4; border-radius: 0; font-size: 20px; }
html[data-theme="tarocco"] .answer__send::before { content: '→'; }

html[data-theme="tarocco"] .skip {
  background: none;
  color: #8a5d33;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 0;
}

/* --- esiti --- */

html[data-theme="tarocco"] .verdict { gap: 10px; padding-top: 22px; }
html[data-theme="tarocco"] .verdict__word { font-family: 'DM Serif Display', serif; font-size: 42px; line-height: 1.08; letter-spacing: 0; color: #fbf1de; }
html[data-theme="tarocco"] .verdict__line { order: -1; font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .3em; color: #b8875a; }

html[data-theme="tarocco"] .reward,
html[data-theme="tarocco"] .solution { background: rgba(217, 182, 120, .14); border: 1px solid #d9b678; border-radius: 0; padding: 18px 20px; color: #f4e3c4; }

html[data-theme="tarocco"] .why,
html[data-theme="tarocco"] .unlocked,
html[data-theme="tarocco"] .app[data-scr="sbagliato"] .reward,
html[data-theme="tarocco"] .app[data-scr="salto"] .reward { background: none; border: 1px solid #6d4325; border-radius: 0; padding: 18px 20px; color: #f4e3c4; }

html[data-theme="tarocco"] .reward__label,
html[data-theme="tarocco"] .why__label,
html[data-theme="tarocco"] .solution__label,
html[data-theme="tarocco"] .unlocked__label,
html[data-theme="tarocco"] .themerow__label,
html[data-theme="tarocco"] .fav__where,
html[data-theme="tarocco"] .stat__label { font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .3em; color: #b8875a; opacity: 1; }

html[data-theme="tarocco"] .reward__value,
html[data-theme="tarocco"] .solution__value,
html[data-theme="tarocco"] .unlocked__value,
html[data-theme="tarocco"] .stat__value,
html[data-theme="tarocco"] .themerow__name { font-family: 'DM Serif Display', serif; font-size: 28px; line-height: 1.08; letter-spacing: 0; color: #fbf1de; }

html[data-theme="tarocco"] .why__text,
html[data-theme="tarocco"] .reward__note,
html[data-theme="tarocco"] .ask__text { font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.5; color: #e6d3b4; opacity: 1; }

html[data-theme="tarocco"] .more { background: none; border: 1px solid #6d4325; border-radius: 0; padding: 18px 20px; color: #b8875a; font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .3em; }
html[data-theme="tarocco"] .app[data-scr="fatto"] .hint,
html[data-theme="tarocco"] .app[data-scr="giusto"] .hint { border: 0; border-left: 2px solid #d9b678; padding: 0 0 0 14px; color: #f4e3c4; }
html[data-theme="tarocco"] .app[data-scr="fatto"] .hint__label,
html[data-theme="tarocco"] .app[data-scr="giusto"] .hint__label { color: #d9b678; }
html[data-theme="tarocco"] .app[data-scr="fatto"] .hint__text,
html[data-theme="tarocco"] .app[data-scr="giusto"] .hint__text { color: #e6d3b4; }

html[data-theme="tarocco"] .ask__title,
html[data-theme="tarocco"] .done__title { flex-direction: row; flex-wrap: wrap; gap: .28em; font-family: 'DM Serif Display', serif; font-size: 38px; line-height: 1.08; letter-spacing: 0; color: #fbf1de; }
html[data-theme="tarocco"] .done__sub { font-family: 'Cormorant Garamond', serif; font-size: 16px; letter-spacing: .1em; text-transform: none; color: #c9a97e; }

/* --- preferiti, profilo, negozio --- */

html[data-theme="tarocco"] .fav,
html[data-theme="tarocco"] .stat,
html[data-theme="tarocco"] .account,
html[data-theme="tarocco"] .empty { background: none; border: 1px solid #6d4325; border-radius: 0; padding: 18px 20px; color: #f4e3c4; }
html[data-theme="tarocco"] .account { background: var(--accent); color: var(--accent-ink); }
html[data-theme="tarocco"] .fav[data-state="skipped"] { border-color: #d9b678; background: rgba(217, 182, 120, .1); }
html[data-theme="tarocco"] .fav__title { font-family: 'DM Serif Display', serif; font-size: 20px; line-height: 1.25; letter-spacing: 0; text-transform: none; }
html[data-theme="tarocco"] .stat[data-tone="accent"] { border-color: #d9b678; background: rgba(217, 182, 120, .14); }
html[data-theme="tarocco"] .stat__value { display: block; padding-bottom: 6px; font-size: 30px; }
html[data-theme="tarocco"] .themerow { border: 1px solid #6d4325; border-radius: 0; padding: 18px 20px; }
html[data-theme="tarocco"] .themerow__name { font-size: 24px; }

html[data-theme="tarocco"] .themerow__cta {
  background: none;
  border: 1px solid #d9b678;
  border-radius: 0;
  padding: 11px 16px;
  color: #d9b678;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

html[data-theme="tarocco"] .account__name { font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: 0; color: #f4e3c4; }
html[data-theme="tarocco"] .shop { gap: 8px; }
html[data-theme="tarocco"] .scr__eyebrow { font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: .3em; color: #b8875a; }
html[data-theme="tarocco"] .tdesc { font-family: 'Cormorant Garamond', serif; font-size: 18px; line-height: 1.5; color: #e6d3b4; }
html[data-theme="tarocco"] .credits { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: #a8794f; }

html[data-theme="tarocco"] .btn { border-radius: 0; font-family: 'Cormorant Garamond', serif; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; }
html[data-theme="tarocco"] .btn--primary,
html[data-theme="tarocco"] .btn--go { background: #d9b678; color: #3b0d16; border-color: #d9b678; }
html[data-theme="tarocco"] .btn--ghost,
html[data-theme="tarocco"] .btn--inert { border: 1px solid #8a5d33; color: #c9a97e; }
html[data-theme="tarocco"] .btn--off { border: 1px solid #5a3620; color: #7d4f30; }
html[data-theme="tarocco"] .btn[data-arrow="avanti"]::after { content: ' →'; }
html[data-theme="tarocco"] .btn[data-arrow="indietro"]::before { content: '← '; }

/* ============================================================================
   Anteprima nel negozio — fuori dallo scope del tema: è la vetrina.
   La doppia cornice è disegnata dai due `.tpv__deco`, che qui si accendono.
   ========================================================================= */

.tpv--tarocco {
  background: #3b0d16;
  border-radius: 0;
  color: #f4e3c4;
  padding: 0 14px;
}

.tpv--tarocco .tpv__deco { display: block; }
.tpv--tarocco .tpv__deco:nth-child(1) { inset: 4px; border: 1px solid #d9b678; }
.tpv--tarocco .tpv__deco:nth-child(2) { inset: 7px; border: 1px solid #8a5d33; }
.tpv--tarocco .tpv__num,
.tpv--tarocco .tpv__name,
.tpv--tarocco .tpv__tag { position: relative; }

.tpv--tarocco .tpv__num { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: .24em; color: #b8875a; }
.tpv--tarocco .tpv__name { font-family: 'DM Serif Display', serif; font-size: 20px; color: #f4e3c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tpv--tarocco .tpv__tag {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid #d9b678;
  color: #d9b678;
  padding: 5px 10px;
  white-space: nowrap;
}

.tpv--tarocco.tpv--card {
  padding: 24px 26px;
  align-items: center;
  text-align: center;
  background: #3b0d16;
}

.tpv--tarocco.tpv--card .tpv__deco:nth-child(1) { inset: 8px; border: 2px solid #d9b678; }
.tpv--tarocco.tpv--card .tpv__deco:nth-child(2) { inset: 14px; border: 1px solid #8a5d33; }
.tpv--tarocco.tpv--card .tpv__num { font-size: 12px; letter-spacing: .34em; }
.tpv--tarocco.tpv--card .tpv__num::before { content: 'Arcano '; }
.tpv--tarocco.tpv--card .tpv__name { font-size: 32px; white-space: normal; }
.tpv--tarocco.tpv--card .tpv__tag { font-size: 13px; letter-spacing: .26em; padding: 7px 16px; }