:root {
  --bg: #0a0a18;
  --surface: rgba(255, 255, 255, .045);
  --surface-hover: rgba(255, 255, 255, .09);
  --border: rgba(255, 255, 255, .11);
  --text: #eceae3;
  --muted: #9b9dae;
  --gold: #e3b95f;
  --accent: #f0b94a;
  --accent-soft: rgba(240, 185, 74, .38);
  --teal: #8fb4ff;
  --danger: #ff8a73;
  --yt: #ff5a4d;
  --tw: #9146ff;
  --topbar-h: 56px;
  --side-w: 300px;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
}

body {
  background:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255, 240, 200, .8), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255, 240, 200, .6), transparent),
    radial-gradient(1.4px 1.4px at 41% 12%, rgba(255, 240, 200, .75), transparent),
    radial-gradient(1px 1px at 57% 83%, rgba(255, 240, 200, .55), transparent),
    radial-gradient(1.2px 1.2px at 73% 31%, rgba(255, 240, 200, .7), transparent),
    radial-gradient(1px 1px at 86% 74%, rgba(255, 240, 200, .6), transparent),
    radial-gradient(1.3px 1.3px at 93% 14%, rgba(255, 240, 200, .75), transparent),
    radial-gradient(1px 1px at 5% 90%, rgba(255, 240, 200, .5), transparent),
    radial-gradient(900px 520px at 50% -180px, rgba(240, 185, 74, .13), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, rgba(90, 80, 220, .16), transparent 70%),
    radial-gradient(700px 500px at 100% 60%, rgba(140, 90, 220, .13), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

.hidden { display: none !important; }

/* ---------- Occhio della divinazione (logo) ---------- */
.orb {
  display: inline-block;
  width: 30px;
  height: 30px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Cdefs%3E%3CradialGradient%20id='i'%20cx='40%25'%20cy='35%25'%20r='70%25'%3E%3Cstop%20offset='0'%20stop-color='%23fff2c9'/%3E%3Cstop%20offset='.5'%20stop-color='%23f0b94a'/%3E%3Cstop%20offset='1'%20stop-color='%23a24a12'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx='32'%20cy='32'%20r='30'%20fill='none'%20stroke='%23e3b95f'%20stroke-opacity='.55'%20stroke-width='1.5'/%3E%3Cpath%20d='M32%205v7M15%2011l3%205.5M49%2011l-3%205.5'%20stroke='%23e3b95f'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20d='M7%2034Q32%2012%2057%2034Q32%2056%207%2034Z'%20fill='%23120f26'%20stroke='%23f0b94a'%20stroke-width='2.5'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='32'%20cy='34'%20r='10.5'%20fill='url(%23i)'/%3E%3Cpath%20d='M32%2027L33.8%2032.2L39%2034L33.8%2035.8L32%2041L30.2%2035.8L25%2034L30.2%2032.2Z'%20fill='%23120f26'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(240, 185, 74, .45));
  animation: glow 5s ease-in-out infinite;
}
.orb-big { width: 56px; height: 56px; }

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(240, 185, 74, .35)); }
  50%      { filter: drop-shadow(0 0 10px rgba(240, 185, 74, .8)); }
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
}

/* ---------- Setup ---------- */
.setup {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.setup { position: relative; overflow: hidden; }
/* cerchi concentrici sottili, come un astrolabio, dietro la card */
.setup::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(980px, 130vw);
  height: min(980px, 130vw);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 70px, rgba(240, 185, 74, .08) 71px 72px);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  pointer-events: none;
}

.setup-card {
  position: relative;
  width: min(680px, 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 185, 74, .22);
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.brand-big { justify-content: center; margin-bottom: 4px; }
.setup-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .1em;
  background: linear-gradient(180deg, #ffe7a8, #d9a43f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline {
  text-align: center;
  color: var(--muted);
  margin: 4px 0 14px;
  font-size: 15px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 18px;
  color: var(--gold);
  opacity: .75;
  font-size: 12px;
  letter-spacing: .3em;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 185, 74, .5), transparent);
}

.intro { color: var(--muted); line-height: 1.6; margin: 0 0 18px; font-size: 14px; }

/* ---------- Righe dei link ---------- */
.rows { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; align-items: center; }

.row input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, .35);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.row input::placeholder { color: #666878; }
.row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.row.valid input { border-color: rgba(123, 224, 195, .55); }
.row.invalid input { border-color: rgba(255, 138, 115, .7); }

.row-del {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 14px;
}
.row.is-last-empty .row-del { visibility: hidden; }

.msg { min-height: 1.4em; color: var(--danger); font-size: 14px; margin: 12px 0 8px; }

/* ---------- Bottoni ---------- */
button, .btn {
  display: inline-block;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
button:hover, .btn:hover { background: var(--surface-hover); border-color: rgba(255, 255, 255, .25); }
button:active { transform: translateY(1px); }

button.accent { border-color: rgba(240, 185, 74, .55); color: var(--accent); }
button.accent:hover { background: rgba(240, 185, 74, .12); border-color: var(--accent); }

button.primary {
  width: 100%;
  background: linear-gradient(180deg, #f7ce6b, #d4a03a);
  border: 0;
  border-radius: 14px;
  color: #1c1305;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 20px;
  box-shadow: 0 6px 24px rgba(240, 185, 74, .25);
}
button.primary:hover { filter: brightness(1.07); background: linear-gradient(180deg, #f7ce6b, #d4a03a); }

.donate { color: var(--gold); border-color: rgba(240, 185, 74, .35); }

/* ---------- Selettore lingua (bandiera + nome nativo) ---------- */
.lang-switch { position: relative; flex: none; }
.lang-switch-corner { position: absolute; top: 18px; right: 18px; }

.lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
}
.lang-switch-btn:hover { background: var(--surface-hover); border-color: rgba(255, 255, 255, .25); }
.lang-switch-btn::after { content: "▾"; font-size: 9px; color: var(--muted); margin-left: 1px; }
.lang-switch-btn[aria-expanded="true"]::after { content: "▴"; }

.flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  flex: none;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

.lang-switch-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #151822;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  min-width: 190px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 30;
}

.lang-switch-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.lang-switch-option:hover { background: rgba(255, 255, 255, .08); }
li[aria-selected="true"] .lang-switch-option { color: var(--accent); }

.setup-footer { margin-top: 20px; text-align: center; }

/* ---------- Topbar ---------- */
.topbar {
  position: relative; /* backdrop-filter crea un contesto di stacking: senza position
                          la topbar resta "non posizionata" e il <main> (dopo nel DOM)
                          la ricoprirebbe comunque, tendina lingua compresa */
  z-index: 20;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(14, 16, 24, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(240, 185, 74, .18);
}
.topbar .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Wall (modalità griglia: layout calcolato da script.js) ---------- */
.wall {
  --head-h: 34px; /* altezza della riga col titolo: il valore vero lo imposta script.js */
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--tile-w, 100%));
  gap: 8px;
  padding: 8px;
  justify-content: center;
  align-content: center;
}

/* Ogni riquadro = riga col titolo (fuori dal video) + video sotto */
.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.tile:hover { border-color: rgba(255, 255, 255, .22); }

.tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: var(--head-h);
  padding: 0 6px 0 12px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--border);
}

.badge {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.badge.yt { background: var(--yt); box-shadow: 0 0 6px rgba(255, 90, 77, .6); }
.badge.tw { background: var(--tw); box-shadow: 0 0 6px rgba(145, 70, 255, .7); }

.tile-head .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
}

.tile-head .mute {
  flex: none;
  padding: 3px 10px;
  font-size: 14px;
}

.tile-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.tile-video iframe,
.player-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Strato trasparente che intercetta il click (altrimenti l'iframe se lo mangia) */
.shield {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tile.is-error .label { color: var(--danger); }

/* Drag & drop: solo classi sul riquadro reale, nessun elemento fluttuante */
.tile.dragging { opacity: .35; }
.tile.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* Il video con l'audio attivo ha un alone dorato */
.tile.has-audio {
  border-color: var(--accent);
  box-shadow: 0 0 22px var(--accent-soft);
}
.tile.has-audio .tile-head { background: rgba(240, 185, 74, .10); }

/* ---------- Modalità focus ---------- */
.wall.focus {
  /* l'ultima riga 1fr assorbe lo spazio extra del video grande: niente buchi nella colonna */
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  grid-template-rows: repeat(var(--side-count, 1), auto) 1fr;
  justify-content: stretch;
  align-content: start;
  align-items: start;
}

.wall.focus .tile {
  grid-column: 2;
  grid-row: var(--row, auto); /* posizione fissa: non cambia quando cambia il tile in evidenza */
  width: auto;
}

/* Riquadro vuoto nella posizione lasciata libera dal tile portato in primo piano */
.tile-ghost {
  border-style: dashed;
  opacity: .4;
  cursor: default;
  pointer-events: none;
}
.tile-ghost .tile-video { background: transparent; }

.wall.focus .tile.focused {
  grid-column: 1;
  grid-row: 1 / -1;
  height: var(--main-h, 70vh);
  position: sticky;
  top: 8px;
  cursor: default;
}

.wall.focus .tile.focused .tile-video {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}

/* Nel video principale lo schermo trasparente sparisce: si usano i controlli del player */
.wall.focus .tile.focused .shield { display: none; }

/* ---------- Finestra donazioni ---------- */
.dialog {
  padding: 0;
  border: 1px solid rgba(240, 185, 74, .28);
  border-radius: 22px;
  background: #11131c;
  color: var(--text);
  width: min(440px, calc(100% - 32px));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
}
.dialog::backdrop {
  background: rgba(5, 6, 10, .65);
  backdrop-filter: blur(4px);
}

.dialog-body { position: relative; padding: 26px; }
.dialog h2 {
  margin: 0 28px 6px 0;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .05em;
  color: var(--accent);
}
.dialog-text { color: var(--muted); line-height: 1.5; margin: 0 0 18px; font-size: 14px; }

.dialog-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 13px;
}

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

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.chip:hover {
  background: rgba(240, 185, 74, .12);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.donate-custom { margin-top: 18px; }
.donate-custom label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.donate-custom-row { display: flex; gap: 8px; }

.amount-field {
  position: relative;
  flex: 1;
  min-width: 0;
}
.amount-field input {
  width: 100%;
  background: rgba(0, 0, 0, .35);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 36px 11px 14px;
  font-family: var(--font-ui);
  font-size: 15px;
}
.amount-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.amount-field .currency {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.primary-sm {
  flex: none;
  background: linear-gradient(180deg, #f7ce6b, #d4a03a);
  border: 0;
  border-radius: 12px;
  color: #1c1305;
  font-weight: 600;
  padding: 0 18px;
}
.primary-sm:hover { filter: brightness(1.07); background: linear-gradient(180deg, #f7ce6b, #d4a03a); }

.dialog-note { color: var(--muted); font-size: 12px; margin: 4px 0 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #151822;
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mobile ---------- */
@media (max-width: 800px) {
  .wall.focus { grid-template-columns: 1fr; grid-template-rows: none; }
  .wall.focus .tile { grid-column: 1; grid-row: auto; }
  .tile-ghost { display: none; } /* su mobile è un elenco verticale: niente colonna, niente buco */
  .wall.focus .tile.focused {
    grid-row: auto;
    position: relative;
    top: 0;
    height: auto;
    order: -1;
  }
  .wall.focus .tile.focused .tile-video {
    aspect-ratio: 16 / 9;
    flex: none;
  }
}

@media (max-width: 700px) {
  .donate-text { display: none; }
}

@media (max-width: 600px) {
  .brand-name { display: none; }
  .setup-card { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .tile, .toast, .chip, button { transition: none; }
}