/* Regnum Solis · Il Mazzo Siciliano — mobile-first */
@font-face { font-family: "Sachsenwald"; src: url("./assets/fonts/sachsenwald-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sachsenwald"; src: url("./assets/fonts/sachsenwald-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
:root {
  --notte: #16130D;
  /* tricromia Mulciber: blu, rosso, giallo */
  --blu: #203459;
  --rosso: #D1322D;
  --giallo: #F8AE03;
  --sfondo: var(--blu);
  --sfondo-scuro: #142240;
  --crepuscolo: #2A2416;
  --terra: #3D3821;
  --oro: #D2B262;
  --oro-scuro: #8E733E;
  --acqua: #86AB9E;
  --acqua-scura: #2D7674;
  --sangue: #CF5145;
  --bruno: #592D1C;
  --pergamena: #FFFFFF;
  --nebbia: #C9D3E8;

  /* colori dei semi, ripresi dalle carte */
  --coppe: #FF5A4E;
  --denari: #F8AE03;
  --spade: #18A4A9;
  --bastoni: #F27A3D;
  --footer: var(--rosso);
  --ombra: rgba(18,13,8,.76);
  --chip-bg: rgba(12,9,6,.6);

  --f-title: "Sachsenwald", "Cormorant SC", Georgia, serif;
  --f-display: "Cormorant SC", "Cormorant", Georgia, serif;
  --f-body: "Cormorant", Georgia, serif;
  --f-ui: "Open Sans", system-ui, sans-serif;

  --chamfer: 10px;
  --radius-card: 14px;
  --flip-ms: 700ms;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: #15110C url("./assets/brand/mappa-sicilia-m.jpg") center / cover no-repeat;
  color: var(--pergamena);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acqua); outline-offset: 4px; }

/* Background: mappa della Sicilia in ombra + vignetta */
@media (min-width: 700px) { body { background-image: url("./assets/brand/mappa-sicilia.jpg"); } }
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before { background: var(--ombra); }
body::after {
  background: radial-gradient(120% 80% at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
}

/* ---------- Layout (mobile) ---------- */
.app {
  position: relative; z-index: 1;
  min-height: 0; width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) 14px;
  max-width: 520px; margin: 0 auto;
}

.topbar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Tre X tricolori a filo del bordo destro */
.xx {
  position: fixed; z-index: 2; right: 6px; top: max(18px, env(safe-area-inset-top));
  width: 20px; height: auto;
  fill: none; stroke-width: 24; stroke-linecap: butt; pointer-events: none;
}
.logo-rs { width: min(210px, 56vw); height: auto; }
.kicker {
  margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acqua); text-align: center;
}

.table {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "stage" "panel" "actions";
  gap: 12px;
}
.deck { display: none; grid-area: deck; }
.stage { grid-area: stage; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; container-type: size; position: relative; }
.flip { position: relative; z-index: 1; }
.panel { grid-area: panel; text-align: center; min-width: 0; }
.actions { grid-area: actions; display: grid; gap: 10px; }

/* ---------- Card flip ---------- */
.flip {
  --flip-max: 282px;
  width: min(100cqw, 100cqh * 57 / 89, var(--flip-max));
  aspect-ratio: 57 / 89;
  perspective: 1400px;
  border-radius: var(--radius-card);
}
.flip-inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-ms) cubic-bezier(.3,.7,.2,1.05);
}
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip.is-lifting { animation: lift var(--flip-ms) ease-out; }
@keyframes lift { 0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-10px) scale(1.04); } }

.face {
  position: absolute; inset: 0; display: block;
  border-radius: var(--radius-card); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--bruno);
  box-shadow:
    0 18px 40px -6px rgba(0,0,0,.55),
    0 0 28px rgba(248,174,3,.18);
}
.face img { width: 100%; height: 100%; object-fit: cover; }
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(248,174,3,.85); }
.face--front { transform: rotateY(180deg); background: #fff; }

.flip.is-shuffling, .deck-stack.is-shuffling { animation: riffle 620ms ease-in-out; }
@keyframes riffle {
  0%,100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-10px) rotate(-3deg); }
  40% { transform: translateX(9px) rotate(2.5deg); }
  60% { transform: translateX(-6px) rotate(-1.5deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}

/* ---------- Panel ---------- */
.panel-kicker, .panel-tip { display: none; }
.divider { display: flex; align-items: center; gap: 10px; width: min(240px, 70%); margin: 0 auto 4px; }
.divider span { flex: 1; height: 1px; background: rgba(255,244,226,.45); }
.divider i { width: 8px; height: 8px; background: var(--giallo); transform: rotate(45deg); }
.card-name {
  margin: 0; font-family: var(--f-title); font-weight: 400;
  font-size: clamp(28px, 8.4vw, 36px); line-height: 1.1; color: var(--pergamena);
}
.card-meta { margin: 2px 0 0; font-style: italic; font-size: 18px; color: var(--nebbia); }
.card-name.is-new, .card-meta.is-new { animation: fadeUp 420ms ease-out both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.history { margin-top: 10px; }
.history-label {
  margin: 0 0 6px; font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,244,226,.8);
}
.chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; overflow: hidden;
  min-height: 30px;
}
.chip {
  --seme: var(--pergamena);
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 8px; border-radius: 6px;
  background: var(--chip-bg);
  white-space: nowrap; animation: fadeUp 300ms ease-out both;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seme); flex: none; }
.chip--coppe   { --seme: var(--coppe); }
.chip--denari  { --seme: var(--denari); }
.chip--spade   { --seme: var(--spade); }
.chip--bastoni { --seme: var(--bastoni); }
.chip b { font-family: var(--f-display); font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--pergamena); }
.chip em { font-size: 16px; color: rgba(255,244,226,.85); }
.chips li:nth-child(n+4) { display: none; }
.chips-empty { font-style: italic; font-size: 16px; color: rgba(255,244,226,.7); align-self: center; }

/* ---------- Buttons (chamfered, Daggerheart-like) ---------- */
.btn {
  --cut: var(--chamfer);
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 0 24px;
  font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: transform 120ms ease, filter 160ms ease;
  touch-action: manipulation;
}
.btn i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); flex: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--primary { background: var(--giallo); color: var(--blu); }
.btn--secondary { min-height: 48px; font-size: 17px; color: #fff; background: var(--rosso); }
.btn--secondary::before {
  content: ""; position: absolute; inset: 1.5px; z-index: -1;
  background: var(--rosso);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  transition: background 160ms ease;
}
@media (hover: hover) {
  .btn--primary:hover { filter: brightness(1.07); }
  .btn--secondary:hover::before { background: #B82A26; }
  /* Inclinazione 3D che segue il mouse (impostata da app.js) */
  .flip, .deck-stack {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
    transition: transform 380ms cubic-bezier(.2,.8,.2,1);
  }
  .is-tilting { transition-duration: 90ms; }
}
.btn[disabled] { opacity: .7; cursor: progress; }
.btn.is-empty { opacity: .45; cursor: not-allowed; }
.deck-stack.is-empty { opacity: .3; cursor: not-allowed; }
.deck-stack.is-empty .deck-card { transform: none !important; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  background: var(--footer);
  color: var(--pergamena);
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
}
.sf-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-brand img { width: 92px; height: auto; }
.sf-links { display: flex; align-items: center; gap: 8px; }
.sf-links a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background 160ms ease, opacity 160ms ease; }
.sf-icon { width: 44px; height: 44px; border-radius: 50%; }
.sf-icon img { width: 22px; height: 22px; object-fit: contain; }
.sf-icon:hover { background: rgba(255,255,255,.12); }
.sf-links a[hidden] { display: none; }
.sf-store {
  height: 38px; padding: 0 18px; border-radius: 999px;
  font-family: var(--f-ui); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--footer); background: var(--pergamena);
}
.sf-store:hover { background: #fff; }
.sf-exit {
  height: 38px; padding: 0 14px; border-radius: 999px;
  font-family: var(--f-ui); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85);
}
.sf-exit:hover { background: rgba(255,255,255,.14); }
.sf-copy { display: none; margin: 0; font-family: var(--f-ui); font-size: 13px; color: rgba(241,232,212,.7); }

/* Very short phones: tighten */
@media (max-height: 680px) {
  .app { gap: 6px; }
  .logo-rs { width: 160px; }
  .table { gap: 8px; }
  .history { margin-top: 6px; }
  .btn { min-height: 50px; }
  .btn--secondary { min-height: 42px; }
  .site-footer { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .sf-icon { width: 38px; height: 38px; }
  .sf-store { height: 34px; }
}

/* Tablet in verticale */
@media (min-width: 600px) and (max-width: 959px) and (min-height: 760px) {
  .app { max-width: 640px; }
  .flip { --flip-max: 420px; }
  .logo-rs { width: 240px; }
}

/* ---------- Phone in landscape ---------- */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 959px) {
  .app { max-width: 900px; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding-top: max(10px, env(safe-area-inset-top)); }
  .topbar { flex-direction: row; justify-content: center; gap: 14px; }
  .logo-rs { width: 130px; }
  .table {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "stage panel" "stage actions";
    column-gap: 24px; align-items: center;
  }
  .stage { height: 100%; }
  .flip { --flip-max: 100cqw; }
  .btn { min-height: 46px; }
  .btn--secondary { min-height: 40px; }
}

/* ---------- Desktop / tablet landscape ---------- */
@media (min-width: 960px) and (min-height: 600px) {
  :root { --gutter: clamp(24px, 4.5vw, 64px); }
  .app { max-width: 1440px; gap: 24px; padding-top: 32px; padding-bottom: 32px; }
  .topbar { flex-direction: row; justify-content: space-between; }
  .xx { width: 30px; top: 32px; right: 10px; }
  .site-footer { padding-top: 14px; padding-bottom: 14px; }
  .sf-brand img { width: 120px; }
  .sf-links { order: 3; }
  .sf-copy { display: inline; }
  .logo-rs { width: 232px; }
  .kicker { font-size: 15px; }

  /* 960–1199px: carta | pannello + azioni (mazzo nascosto) */
  .table {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    grid-template-rows: 1fr auto;
    grid-template-areas: "stage panel" "stage actions";
    column-gap: clamp(32px, 5vw, 72px); row-gap: 18px;
    align-items: center;
  }
  .deck { display: none; flex-direction: column; align-items: center; gap: 18px; align-self: end; }
  .deck-stack { position: relative; width: min(236px, 100%); aspect-ratio: 57 / 89; border-radius: var(--radius-card); }
  .deck-card {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--radius-card);
    box-shadow: inset 0 0 0 1.5px rgba(248,174,3,.85), 0 14px 30px -8px rgba(0,0,0,.6);
    outline: 1.5px solid rgba(248,174,3,.7); outline-offset: -1.5px;
    transition: transform 240ms ease;
  }
  .deck-card--3 { transform: translate(10px, -10px) rotate(2.5deg); }
  .deck-card--2 { transform: translate(5px, -5px) rotate(-2deg); }
  .deck-stack:hover .deck-card--3 { transform: translate(22px, -14px) rotate(7deg); }
  .deck-stack:hover .deck-card--2 { transform: translate(10px, -9px) rotate(-4deg); }
  .deck-stack:hover .deck-card--1 { transform: translate(-4px, -12px) rotate(-1.5deg); }
  .deck-hint { margin: 0; font-style: italic; font-size: 18px; color: var(--nebbia); }
  .actions { align-self: start; width: 100%; justify-self: center; }

  .stage { height: 100%; }
  .flip { --flip-max: 410px; }
  .panel { position: relative; padding-left: 52px !important; }
  .panel::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    height: min(100%, 440px); aspect-ratio: 133 / 1173;
    background: url("./assets/ornaments/colonna.png") center / contain no-repeat;
  }

  .panel {
    text-align: left; align-self: end;
    padding: 0; background: none; border: 0; box-shadow: none;
  }
  .panel-kicker, .panel-tip { display: block; }
  .panel-kicker { margin: 0 0 12px; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: rgba(248,174,3,.85); }
  .card-name { font-size: 42px; }
  .card-meta { font-size: 20px; margin-top: 6px; }
  .divider { order: 0; width: 100%; margin: 18px 0; }
  .panel { display: flex; flex-direction: column; }
  .panel .divider { order: 3; }
  .panel .card-name { order: 1; }
  .panel .card-meta { order: 2; }
  .panel .history { order: 4; margin-top: 0; }
  .panel .panel-tip { order: 5; margin: 18px 0 0; font-size: 17px; color: rgba(255,244,226,.85); line-height: 1.45; }
  .history-label { font-size: 14px; margin-bottom: 10px; }
  .chips { flex-direction: column; align-items: flex-start; gap: 8px; }
  .chips li:nth-child(n+4) { display: inline-flex; }
  .chips li:nth-child(n+6) { display: none; }
}

/* ≥1200px: mazzo | carta | pannello */
@media (min-width: 1200px) and (min-height: 600px) {
  .table {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas: "deck stage panel" "actions stage panel";
  }
  .deck { display: flex; }
  .actions { width: min(300px, 100%); }
  .panel { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --flip-ms: 1ms; }
  .flip.is-lifting, .flip.is-shuffling, .deck-stack.is-shuffling, .chip, .is-new { animation: none !important; }
}

/* Telefoni stretti: 2 chip, così non vengono tagliate */
@media (max-width: 420px) { .chips li:nth-child(n+3) { display: none; } }

/* Footer con "Esci": più compatto sui telefoni */
.sf-brand { flex: none; }
@media (max-width: 520px) {
  .sf-links { gap: 2px; }
  .sf-icon { width: 36px; height: 36px; }
  .sf-icon img { width: 20px; height: 20px; }
  .sf-store, .sf-exit { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .sf-exit { margin-right: 4px; }
}