@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --marble: #E8E2D3;
  --marble-dim: #C9C1AC;
  --ink: #17140F;
  --ink-soft: #241F17;
  --gold: #C9A227;
  --gold-bright: #F0C954;
  --blood: #B23A2E;
  --broadcast: #2FD3C8;
  --panel: #1F1B14;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    linear-gradient(rgba(23,20,15,0.88), rgba(23,20,15,0.94)),
    url('/assets/arena-bg.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  color:var(--marble);
  font-family:'Space Mono', monospace;
  min-height:100vh;
  padding:16px;
}

.broadcast-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(201,162,39,0.35);
  padding-bottom:10px;
  margin-bottom:18px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--marble-dim);
}
.broadcast-bar .live{
  color:var(--broadcast);
  font-weight:700;
}
.live::before{
  content:'●';
  margin-right:6px;
  animation:pulse 1.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

.brand-emblem{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
  filter:drop-shadow(0 0 12px rgba(201,162,39,0.35));
}

h1{
  font-family:'Cinzel', serif;
  font-weight:800;
  font-size:clamp(28px,6vw,44px);
  text-align:center;
  margin:0 0 4px;
  letter-spacing:2px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.subtitle{
  text-align:center;
  color:var(--marble-dim);
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:24px;
}

.setup{
  max-width:720px;
  margin:0 auto 24px;
  background:var(--panel);
  border:1px solid rgba(201,162,39,0.3);
  border-radius:6px;
  padding:16px;
}
.lore-intro{
  border-left:3px solid var(--broadcast);
  background:rgba(47,211,200,0.06);
  padding:14px 16px;
  margin-bottom:18px;
  font-size:12px;
  line-height:1.8;
  color:var(--marble-dim);
}
.lore-intro em{
  color:var(--marble);
  font-style:italic;
}
.setup h2{
  font-family:'Cinzel', serif;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 12px;
}
.hero-picker{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.hero-btn{
  flex:1;
  min-width:140px;
  background:var(--ink-soft);
  border:1px solid rgba(201,162,39,0.25);
  color:var(--marble);
  padding:10px;
  border-radius:5px;
  cursor:pointer;
  font-family:'Space Mono', monospace;
  font-size:12px;
  text-align:center;
  transition:all .15s;
}
.hero-btn-portrait{
  display:block;
  width:auto;
  height:150px;
  max-width:100%;
  margin:0 auto 8px;
  object-fit:contain;
  border-radius:4px;
  border:1px solid rgba(201,162,39,0.3);
}
.hero-btn:hover{border-color:var(--gold);}
.hero-btn.selected{
  border-color:var(--gold-bright);
  background:rgba(201,162,39,0.15);
  box-shadow:0 0 0 1px var(--gold-bright) inset;
}
.start-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
select, button.action{
  font-family:'Space Mono', monospace;
}
select{
  background:var(--ink-soft);
  color:var(--marble);
  border:1px solid rgba(201,162,39,0.3);
  padding:8px;
  border-radius:5px;
  font-size:12px;
}
button.primary{
  background:var(--gold);
  color:var(--ink);
  border:none;
  padding:10px 20px;
  border-radius:5px;
  font-weight:700;
  font-family:'Cinzel', serif;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:13px;
  cursor:pointer;
}
button.primary:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
button.secondary{
  background:var(--ink-soft);
  color:var(--marble);
  border:1px solid rgba(47,211,200,0.4);
  padding:10px 16px;
  border-radius:5px;
  font-weight:700;
  font-family:'Cinzel', serif;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
}
button.secondary:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.join-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.join-row input{
  background:var(--ink-soft);
  color:var(--marble);
  border:1px solid rgba(201,162,39,0.3);
  padding:9px 10px;
  border-radius:5px;
  font-size:13px;
  font-family:'Space Mono', monospace;
  letter-spacing:2px;
  text-transform:uppercase;
  width:110px;
}

.waiting-panel{
  max-width:720px;
  margin:0 auto 24px;
  background:var(--panel);
  border:1px solid rgba(47,211,200,0.4);
  border-radius:6px;
  padding:20px;
  text-align:center;
  display:none;
}
.waiting-panel.visible{display:block;}
.waiting-panel h2{
  font-family:'Cinzel', serif;
  font-size:15px;
  color:var(--broadcast);
  letter-spacing:1px;
  margin:0 0 10px;
}
.waiting-panel .room-code{
  font-family:'Cinzel', serif;
  font-size:28px;
  letter-spacing:4px;
  color:var(--gold-bright);
  margin:10px 0;
}
.waiting-panel .room-link{
  font-size:12px;
  word-break:break-all;
  color:var(--broadcast);
}
.waiting-panel .spinner{
  color:var(--marble-dim);
  font-size:11px;
  margin-top:10px;
  letter-spacing:1px;
}

.arena{
  max-width:900px;
  margin:0 auto;
  display:none;
}
.arena.visible{display:block;}

.vs-row{
  display:flex;
  gap:16px;
  align-items:stretch;
  margin-bottom:18px;
}
.hero-card{
  flex:1;
  background:var(--panel);
  border:1px solid rgba(201,162,39,0.3);
  border-radius:8px;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.hero-card.dead{opacity:0.35;filter:grayscale(1);}
.hero-card-portrait{
  display:block;
  width:auto;
  height:190px;
  max-width:100%;
  margin:0 auto 8px;
  object-fit:contain;
  border-radius:6px;
  border:1px solid rgba(201,162,39,0.3);
}
.hero-name{
  font-family:'Cinzel', serif;
  font-size:16px;
  color:var(--gold-bright);
  letter-spacing:1px;
  margin-bottom:2px;
}
.you-tag{
  display:inline-block;
  font-size:9px;
  color:var(--broadcast);
  border:1px solid rgba(47,211,200,0.4);
  border-radius:8px;
  padding:1px 6px;
  margin-left:6px;
  vertical-align:middle;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.hero-tag{
  font-size:10px;
  color:var(--marble-dim);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:10px;
}
.bar-row{margin-bottom:8px;}
.stat-row{
  display:flex;
  justify-content:space-between;
  background:rgba(0,0,0,0.2);
  border-radius:4px;
  padding:6px 10px;
  margin-bottom:10px;
  font-size:11px;
  color:var(--marble);
}
.special-desc{
  font-size:10px;
  color:var(--marble-dim);
  line-height:1.5;
  background:rgba(47,211,200,0.07);
  border-left:2px solid var(--broadcast);
  padding:6px 8px;
  margin-top:8px;
  border-radius:3px;
}
.special-desc strong{color:var(--gold-bright);}
.bar-label{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--marble-dim);
  margin-bottom:3px;
}
.bar-bg{
  height:8px;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  overflow:hidden;
}
.bar-fill{
  height:100%;
  border-radius:4px;
  transition:width .4s ease;
}
.bar-fill.hp{background:linear-gradient(90deg,#7a2620,var(--blood));}
.bar-fill.mana{background:linear-gradient(90deg,#1b7d76,var(--broadcast));}

.status-tags{
  display:flex;
  gap:6px;
  margin-top:8px;
  flex-wrap:wrap;
}
.status-tag{
  font-size:9px;
  padding:3px 7px;
  border-radius:10px;
  background:rgba(47,211,200,0.15);
  color:var(--broadcast);
  border:1px solid rgba(47,211,200,0.4);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.vs-mark{
  font-family:'Cinzel', serif;
  font-size:22px;
  color:var(--gold);
  display:flex;
  align-items:center;
  padding:0 6px;
}

@media (max-width:640px){
  .vs-row{
    flex-direction:column;
  }
  .vs-mark{
    align-self:center;
    padding:4px 0;
  }
  .hero-card-portrait{
    height:150px;
  }
  .actions{
    flex-wrap:nowrap;
  }
  button.action{
    flex:1;
    min-width:0;
    padding:10px 6px;
    font-size:11px;
  }
  button.action .icon{
    font-size:14px;
  }
}

.turn-banner{
  text-align:center;
  font-family:'Cinzel', serif;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
  min-height:18px;
}

.turn-timer{
  text-align:center;
  font-family:'Space Mono', monospace;
  font-size:14px;
  color:var(--broadcast);
  margin-bottom:14px;
  min-height:18px;
}

.actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:20px;
  flex-wrap:wrap;
}
button.action{
  background:var(--ink-soft);
  border:1px solid rgba(201,162,39,0.35);
  color:var(--marble);
  padding:12px 16px;
  border-radius:6px;
  cursor:pointer;
  font-size:12px;
  min-width:110px;
  transition:all .15s;
}
button.action:hover:not(:disabled){
  border-color:var(--gold-bright);
  background:rgba(201,162,39,0.12);
}
button.action:disabled{
  opacity:0.3;
  cursor:not-allowed;
}
button.action .icon{font-size:16px;display:block;margin-bottom:4px;}
.action-hint{
  font-size:9px;
  color:var(--marble-dim);
  margin-top:6px;
  line-height:1.4;
  font-weight:normal;
}

.log{
  background:var(--panel);
  border:1px solid rgba(201,162,39,0.25);
  border-radius:8px;
  padding:14px;
  max-height:280px;
  overflow-y:auto;
  font-size:12px;
  line-height:1.7;
}
.log-title{
  font-family:'Cinzel', serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
  border-bottom:1px solid rgba(201,162,39,0.2);
  padding-bottom:6px;
}
.log-line{margin-bottom:6px;color:var(--marble-dim);}
.log-line.roll{color:var(--broadcast);}
.log-line.dmg{color:var(--blood);}
.log-line.heal{color:#7fd88f;}
.log-line.turn{
  color:var(--gold-bright);
  font-weight:700;
  margin-top:10px;
  border-top:1px dashed rgba(201,162,39,0.2);
  padding-top:8px;
}
.log-line.win{
  color:var(--gold-bright);
  font-family:'Cinzel', serif;
  font-size:14px;
  text-align:center;
  margin-top:12px;
}

.reset-row{
  text-align:center;
  margin-top:16px;
}
button.ghost{
  background:none;
  border:1px solid rgba(201,162,39,0.3);
  color:var(--marble-dim);
  padding:8px 18px;
  border-radius:5px;
  cursor:pointer;
  font-size:11px;
  font-family:'Space Mono', monospace;
}