:root{
  --bg-1:#0e1420;
  --bg-2:#161f2e;
  --panel:#1b2536;
  --panel-border:#2c3a52;
  --gold:#d8b45a;
  --gold-dim:#8a713a;
  --text:#e8ecf1;
  --text-dim:#93a1b5;
  --danger:#c0554b;
  --danger-hover:#d76a5f;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  font-family:'Trebuchet MS', 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at 50% -10%, #253248 0%, var(--bg-1) 55%),
    var(--bg-1);
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px 16px 60px;
}
h1{
  font-size:clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 0 18px rgba(216,180,90,0.35);
  margin:8px 0 4px;
  text-align:center;
}
.subtitle{
  color:var(--text-dim);
  font-size:0.9rem;
  margin-bottom:22px;
  text-align:center;
}

.era-selector{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-bottom:28px;
  max-width:900px;
}
.era-btn{
  background:var(--panel);
  border:1px solid var(--panel-border);
  color:var(--text-dim);
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
  font-size:0.85rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  transition:all .15s ease;
  min-width:120px;
}
.era-btn .num{
  font-size:0.7rem;
  color:var(--gold-dim);
  letter-spacing:1px;
}
.era-btn:hover{
  border-color:var(--gold-dim);
  color:var(--text);
}
.era-btn.active{
  background:linear-gradient(180deg,#2a3448,#1e2738);
  border-color:var(--gold);
  color:var(--gold);
  box-shadow:0 0 14px rgba(216,180,90,0.2);
}
.era-btn.active .num{ color:var(--gold); }

.layout{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  max-width:1100px;
  width:100%;
}

.wheel-area{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.confetti-piece{
  position:absolute;
  top:38%;
  left:50%;
  width:8px;
  height:14px;
  border-radius:2px;
  pointer-events:none;
  opacity:0.95;
  animation: confettiFall var(--dur, 1100ms) ease-out forwards;
}
@keyframes confettiFall{
  0%   { transform:translate(0,0) rotate(0deg); opacity:1; }
  100% { transform:translate(var(--dx,0), 220px) rotate(540deg); opacity:0; }
}
.wheel-wrap{
  position:relative;
  width:min(420px, 88vw);
  height:min(420px, 88vw);
}
.pointer{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:28px solid var(--gold);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  z-index:5;
}
canvas#wheel{
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:
    0 0 0 6px var(--panel-border),
    0 0 0 10px var(--bg-2),
    0 10px 40px rgba(0,0,0,0.5);
  will-change: transform, filter;
}
.pointer.tick{
  animation: pointerTick 0.12s ease;
}
@keyframes pointerTick{
  0%   { transform:translateX(-50%) rotate(0deg); }
  35%  { transform:translateX(-50%) rotate(-16deg); }
  100% { transform:translateX(-50%) rotate(0deg); }
}
.hub{
  position:absolute;
  top:50%; left:50%;
  width:16%; height:16%;
  background:radial-gradient(circle at 35% 30%, #f0d896, var(--gold) 55%, var(--gold-dim));
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px var(--bg-2), 0 4px 10px rgba(0,0,0,0.5);
  z-index:4;
}

button.spin-btn{
  background:linear-gradient(180deg,#e2c374,var(--gold-dim));
  color:#241a06;
  border:none;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:12px 34px;
  border-radius:10px;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(216,180,90,0.3);
  transition:transform .1s ease, box-shadow .15s ease;
}
button.spin-btn:hover{ box-shadow:0 6px 20px rgba(216,180,90,0.45); }
button.spin-btn:active{ transform:translateY(1px) scale(0.98); }
button.spin-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  box-shadow:none;
}

.result{
  min-height:2.4rem;
  font-size:1.3rem;
  font-weight:700;
  color:var(--gold);
  text-align:center;
  text-shadow:0 0 12px rgba(216,180,90,0.3);
}
.result.reveal{
  animation: resultPop 0.5s ease;
}
@keyframes resultPop{
  0%   { transform:scale(0.6); opacity:0; text-shadow:0 0 0 rgba(216,180,90,0); }
  55%  { transform:scale(1.15); opacity:1; text-shadow:0 0 26px rgba(216,180,90,0.8); }
  100% { transform:scale(1); text-shadow:0 0 12px rgba(216,180,90,0.3); }
}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:18px 20px;
  width:320px;
  max-width:90vw;
}
.panel h2{
  margin:0 0 4px;
  font-size:1rem;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:1px;
}
.panel .era-name{
  color:var(--text-dim);
  font-size:0.8rem;
  margin-bottom:12px;
}
ul.civ-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:420px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
ul.civ-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-2);
  border:1px solid var(--panel-border);
  border-radius:8px;
  padding:8px 10px;
  font-size:0.88rem;
}
ul.civ-list li .remove-btn{
  background:transparent;
  border:1px solid var(--danger);
  color:var(--danger);
  width:24px;
  height:24px;
  border-radius:6px;
  cursor:pointer;
  font-size:0.85rem;
  line-height:1;
  flex-shrink:0;
}
ul.civ-list li .remove-btn:hover{
  background:var(--danger);
  color:#fff;
  border-color:var(--danger-hover);
}
ul.civ-list:empty::after{
  content:"Nenhuma civilização restante nesta era.";
  color:var(--text-dim);
  font-size:0.85rem;
}

.panel-footer{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.panel-footer button{
  flex:1;
  background:var(--bg-2);
  border:1px solid var(--panel-border);
  color:var(--text-dim);
  padding:8px 6px;
  border-radius:8px;
  cursor:pointer;
  font-size:0.78rem;
}
.panel-footer button:hover{
  color:var(--text);
  border-color:var(--gold-dim);
}

footer{
  margin-top:36px;
  color:var(--text-dim);
  font-size:0.75rem;
  text-align:center;
}

.back-link{
  align-self:flex-start;
  margin:0 0 12px 4px;
  color:var(--text-dim);
  text-decoration:none;
  font-size:0.85rem;
}
.back-link:hover{ color:var(--gold); }

.game-cards{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
  max-width:900px;
  width:100%;
  margin-top:24px;
}
.game-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:280px;
  min-height:180px;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:16px;
  padding:28px 20px;
  text-decoration:none;
  color:var(--text);
  transition:all .18s ease;
  text-align:center;
}
.game-card:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(216,180,90,0.2);
}
.game-card-badge{
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--gold);
}
.game-card-desc{
  color:var(--text-dim);
  font-size:0.85rem;
}