:root{
  --gold: #C6A55A;
  --gold-light: #E6CE9A;
  --violet-deep: #1C0E26;
  --cream: #EDE3D2;
  --muted: #A99BC2;
  --bg-page: #0e0712;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%;
  background: var(--bg-page);
  color: var(--cream);
  font-family: "Calibri", "Trebuchet MS", sans-serif;
  overflow: hidden;
}

#app{
  display:flex;
  height:100vh;
  width:100vw;
}

/* ---------- sidebar ---------- */
#sidebar{
  width: 92px;
  flex: 0 0 92px;
  background: linear-gradient(180deg, #150a1e 0%, #1C0E26 100%);
  border-right: 1px solid rgba(198,165,90,0.25);
  display:flex;
  flex-direction: column;
  align-items:center;
  padding: 14px 0 18px;
  overflow-y:auto;
}

.sidebar-logo{
  width:56px; height:56px;
  margin-bottom: 14px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: rgba(198,165,90,0.08);
  border: 1px solid rgba(198,165,90,0.35);
  overflow:hidden;
  flex: 0 0 auto;
}
.sidebar-logo img{ width:100%; height:100%; object-fit:contain; padding:6px; }

#flag-list{
  display:flex; flex-direction:column; gap:10px;
  width:100%;
  align-items:center;
}

.flag-btn{
  width:56px; height:42px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.04);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  position:relative;
}
.flag-btn img{ width:34px; height:23px; object-fit:cover; border-radius:3px; display:block; }
.flag-btn:hover{ transform: scale(1.08); background: rgba(198,165,90,0.12); }
.flag-btn.active{
  border-color: var(--gold);
  background: rgba(198,165,90,0.18);
  box-shadow: 0 0 10px rgba(198,165,90,0.5);
}
.flag-btn .code{
  position:absolute; bottom:-14px; left:0; right:0; text-align:center;
  font-size:9px; letter-spacing:0.5px; color: var(--muted); text-transform:uppercase;
  font-family: Georgia, serif;
}
.flag-btn.active .code{ color: var(--gold-light); }

/* ---------- stage ---------- */
#stage-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 18px 24px;
  min-width:0;
  gap: 12px;
}

#stage{
  width:100%;
  max-width: 1400px;
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

#slide-viewport{
  width:100%;
  aspect-ratio: 16/9;
  max-height: 100%;
  margin: 0 auto;
  position:relative;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(198,165,90,0.25);
  overflow:hidden;
  background: var(--violet-deep);
}

.slide{
  position:absolute; inset:0;
  background-image: url('assets/bg_purple_fantasy_16x9.png');
  background-size: cover;
  background-position: center;
  font-family:"Calibri", sans-serif;
  animation: fadeIn .35s ease;
}
@keyframes fadeIn{ from{ opacity:0; transform: scale(0.99);} to{ opacity:1; transform:scale(1);} }

/* slide-title: position/left/top/width are now set inline per-slide from the
   real ODP title-box coordinates (see app.js titleStyle()). Only typography
   stays here. */
.slide-title{
  position:absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-weight:bold;
  font-size: clamp(16px, 2.6vw, 30px);
  color: var(--gold-light);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin:0;
  text-align:center;
}

.bullets{
  list-style:none; margin:0; padding:0;
}
.bullets li{
  position:relative;
  padding-left: 22px;
  margin-bottom: 14px;
  font-size: clamp(11px, 1.45vw, 16px);
  line-height:1.35;
  color: var(--cream);
}
.bullets li::before{
  content:"";
  position:absolute; left:2px; top:0.45em;
  width:7px; height:7px; border-radius:50%;
  background: var(--gold);
}

.text-block{
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
}

.media-box{
  position:absolute;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden;
}
.icon-right .media-box{ justify-content:flex-start; }
.icon-left .media-box{ justify-content:flex-end; }
.media-box img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}
/* slide senza cornice (gia' a posto cosi') */
.no-frame .media-box img{
  border:none; border-radius:0; box-shadow:none;
}

.fallback-icon{
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: #2A1638;
  border: 2px solid var(--gold);
  box-shadow: 0 0 22px rgba(198,165,90,0.4);
  font-family: Georgia, serif;
  font-weight:bold;
  color: var(--gold-light);
  width:100%; height:100%; aspect-ratio:1/1; max-width:170px; max-height:170px; margin:auto;
  font-size: clamp(28px,5vw,46px);
}

/* ===== per-kind layouts ===== */
/* All positions below (title, text blocks, images, names, captions) are
   driven by inline style (real ODP coordinates injected via JS). The rules
   here only cover structural / typographic aspects that are not
   geometry-specific. */

/* cover */
.kind-cover .embers{ position:absolute; inset:0; opacity:.45; object-fit:cover; width:100%; height:100%; }
.kind-cover .hero{ position:absolute; object-fit:contain; }
.kind-cover .logo{ position:absolute; object-fit:contain; }
.kind-cover .tagline{ position:absolute; left:5.5%; top: 72%; font-style:italic; font-size: clamp(10px,1.5vw,16px); color: var(--cream); }
.kind-cover .langs{ position:absolute; left:5.5%; top: 79%; font-size: clamp(9px,1.2vw,12.5px); color: var(--muted); }
.kind-cover .cover-flag{ position:absolute; object-fit:cover; border-radius:2px; opacity:.85; }
.kind-cover .shop{ position:absolute; left:5.5%; top: 91.5%; font-style:italic; font-size: clamp(9px,1.15vw,12px); color: var(--gold-light); }

/* welcome */
/* text-block and media-box position come from inline style now. */

/* login */
.kind-login .caption{ position:absolute; text-align:center; font-style:italic; color:var(--muted); font-size: clamp(10px,1.25vw,14px); }

/* classes */
.kind-classes .badge{ position:absolute; object-fit:contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
.kind-classes .col{ position:absolute; }
.kind-classes .col img{ width:100%; height:100%; object-fit:contain; }
.kind-classes .name{ position:absolute; text-align:center; font-family:Georgia,serif; font-weight:bold; color:var(--gold-light); font-size: clamp(11px,1.5vw,16px); }

/* kingdoms */
.kind-kingdoms .banner-box{ position:absolute; display:flex; align-items:flex-start; justify-content:center; overflow:hidden; }
.kind-kingdoms .banner-box img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  border: 3px solid var(--gold);
  border-radius: 10px;
}
.kind-kingdoms .kname{ position:absolute; text-align:center; font-family:Georgia,serif; font-weight:bold; color:var(--gold-light); font-size: clamp(10px,1.35vw,15px); }
.kind-kingdoms .kblurb{ position:absolute; text-align:center; color:var(--muted); font-size: clamp(8.5px,1.05vw,11.5px); }
.kind-kingdoms .note{ position:absolute; text-align:center; font-style:italic; color:var(--cream); font-size: clamp(9px,1.2vw,13px); }

/* systemsintro / generic system slide: text-block position is fully inline now */

/* leaderboard */
.kind-leaderboard .cols{ position:absolute; left:6%; top:22%; width:46%; display:flex; justify-content:space-between; gap:6%; }
.kind-leaderboard .col{ width:47%; }
.kind-leaderboard .cat{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size: clamp(9px,1.1vw,13px); color: var(--cream); border-bottom: 1px solid rgba(198,165,90,0.12); }
.kind-leaderboard .cat .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); flex:0 0 auto; }

/* community */
.kind-community .cards{ position:absolute; left:5%; right:5%; top:24%; display:flex; justify-content:space-between; gap:3%; }
.kind-community .card{ width:31%; background: rgba(28,14,38,0.55); border:1.5px solid var(--gold); border-radius:10px; padding: 5% 4%; text-align:center; display:flex; flex-direction:column; align-items:center; }
.kind-community .icon-circle{ width:18%; aspect-ratio:1/1; border-radius:50%; background:#2A1638; border:1.5px solid var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:6%; overflow:hidden; }
.kind-community .icon-circle svg{ width:55%; height:55%; }
.kind-community .icon-circle img{ width:100%; height:100%; object-fit:cover; }
.kind-community .ctitle{ font-family:Georgia,serif; font-weight:bold; color:var(--gold-light); font-size: clamp(10px,1.3vw,14px); margin-bottom:5%; }
.kind-community .ctext{ color:var(--cream); font-size: clamp(8.5px,1.05vw,11.5px); }

/* roadmap */
.kind-roadmap .track{ position:absolute; left:10%; right:10%; top:38%; height:2px; background: var(--gold); opacity:.7; }
.kind-roadmap .steps{ position:absolute; left:10%; right:10%; top:30%; display:flex; justify-content:space-between; }
.kind-roadmap .step{ width:22%; display:flex; flex-direction:column; align-items:center; }
.kind-roadmap .step .num{ width:16%; min-width:34px; aspect-ratio:1/1; border-radius:50%; background:#2A1638; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-family:Georgia,serif; font-weight:bold; color:var(--gold-light); font-size: clamp(12px,1.6vw,18px); }
.kind-roadmap .step .label{ margin-top:14%; text-align:center; color:var(--cream); font-size: clamp(9px,1.2vw,13px); }

/* closing */
.kind-closing .logo{ position:absolute; left:50%; top:8%; width:34%; transform: translateX(-50%); object-fit:contain; }
.kind-closing .ctitle{ position:absolute; left:0; right:0; top:46%; text-align:center; font-family:Georgia,serif; font-weight:bold; color:var(--gold-light); font-size: clamp(18px,3vw,30px); }
.kind-closing .line1{ position:absolute; left:6%; right:6%; top:60%; text-align:center; font-style:italic; color:var(--cream); font-size: clamp(10px,1.4vw,15px); }
.kind-closing .line2{ position:absolute; left:6%; right:6%; top:67%; text-align:center; font-style:italic; color:var(--cream); font-size: clamp(10px,1.4vw,15px); }
.kind-closing .link{ position:absolute; left:0; right:0; top:78%; text-align:center; font-size: clamp(10px,1.3vw,14px); }
.kind-closing .link a{ color: var(--gold-light); text-decoration:none; border-bottom:1px solid var(--gold); }
.kind-closing .link a:hover{ color:#fff; }

/* ---------- controls ---------- */
#controls{
  display:flex; align-items:center; gap: 20px;
  flex: 0 0 auto;
}
.nav-btn{
  width:42px; height:42px; border-radius:50%;
  background: rgba(198,165,90,0.12);
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, transform .15s;
}
.nav-btn:hover{ background: rgba(198,165,90,0.28); transform: scale(1.06); }
.nav-btn:disabled{ opacity:.3; cursor:default; }
#counter{
  font-family: Georgia, serif;
  color: var(--muted);
  font-size: 14px;
  min-width: 64px;
  text-align:center;
}

#progress-track{
  width:100%; max-width:1400px; height:4px;
  background: rgba(198,165,90,0.15);
  border-radius:4px;
  overflow:hidden;
  flex: 0 0 auto;
}
#progress-fill{
  height:100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  width: 2.3%;
  transition: width .25s ease;
}

@media (max-width: 720px){
  #sidebar{ width:64px; flex-basis:64px; }
  .flag-btn{ width:42px; height:30px; }
  .flag-btn img{ width:26px; height:17px; }
  .sidebar-logo{ width:42px; height:42px; }
  #stage-wrap{ padding:10px; }
}