@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;600&family=JetBrains+Mono:wght@300;400&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#08080f;--text:#e0ddd5;--gold:#c9a84c;--crimson:#8b2500;--heading:'Playfair Display',serif;
  --body:'Inter',sans-serif;--mono:'JetBrains Mono',monospace}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden}
#select-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;position:relative}
#select-title{font-family:var(--heading);font-size:clamp(28px,5vw,52px);font-weight:900;text-align:center;
  color:var(--gold);text-shadow:0 0 40px rgba(201,168,76,.3);letter-spacing:3px}
#select-sub{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.4);margin:12px 0 50px;letter-spacing:2px}
#character-arc{display:flex;gap:25px;flex-wrap:wrap;justify-content:center;max-width:900px}
.char-portrait{cursor:pointer;text-align:center;transition:all .4s;position:relative}
.char-portrait:hover{transform:translateY(-15px) scale(1.05)}
.portrait-frame{width:120px;height:150px;border-radius:16px;overflow:hidden;position:relative;
  border:2px solid rgba(201,168,76,.3);transition:all .4s}
.char-portrait:hover .portrait-frame{border-color:var(--gold);box-shadow:0 15px 40px rgba(201,168,76,.3)}
.portrait-bg{position:absolute;inset:0}
.einstein-bg{background:linear-gradient(135deg,#1a1a3a,#2a2a4a)}.gandhi-bg{background:linear-gradient(135deg,#1a2a1a,#2a3a2a)}
.tesla-bg{background:linear-gradient(135deg,#1a1a2a,#2a3a5a)}.cleo-bg{background:linear-gradient(135deg,#3a1a2a,#4a2a3a)}
.newton-bg{background:linear-gradient(135deg,#2a1a0a,#3a2a1a)}.davinci-bg{background:linear-gradient(135deg,#2a2a1a,#3a3a2a)}
.portrait-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;
  filter:drop-shadow(0 0 15px rgba(0,0,0,.5));transition:all .3s}
.char-portrait:hover .portrait-icon{transform:translate(-50%,-50%) scale(1.15)}
.portrait-name{font-family:var(--heading);font-size:18px;color:var(--gold);margin-top:12px}
.portrait-field{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.35);margin-top:4px;letter-spacing:1px}
#lightning-slash{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.9);animation:slashAnim .6s forwards}
#lightning-slash.hidden{display:none}
#lightning-slash svg{width:200px;height:300px;filter:drop-shadow(0 0 40px #ffd700);animation:flashBolt .3s 2}
@keyframes slashAnim{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes flashBolt{0%{transform:scaleY(0);opacity:0}50%{transform:scaleY(1.2);opacity:1}100%{transform:scaleY(1);opacity:.8}}
#arena{min-height:100vh;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;padding:40px;
  align-items:center;position:relative}
#arena.hidden{display:none}
#arena-bg{position:absolute;inset:0;z-index:0;opacity:.15;transition:background 1s}
#opponent-side{display:flex;flex-direction:column;align-items:center;z-index:1}
#opponent-portrait{width:100px;height:100px;border-radius:50%;background:rgba(201,168,76,.1);
  border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(201,168,76,.2)}
#opp-icon{font-size:48px;transition:all .3s}
#opp-icon.thoughtful{transform:rotate(-5deg) scale(.95)}
#opp-icon.smirk{transform:rotate(5deg) scale(1.05)}
#opponent-name-label{font-family:var(--heading);font-size:20px;color:var(--gold);margin:12px 0}
.speech-bubble{background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);border-radius:16px;
  padding:20px;max-width:350px;position:relative;margin-top:10px}
.speech-bubble::after{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid rgba(201,168,76,.2)}
.speech-bubble p{font-family:var(--mono);font-size:13px;line-height:1.7;color:rgba(255,255,255,.7)}
#arena-center{display:flex;flex-direction:column;align-items:center;gap:30px;z-index:1}
#conviction-meter{text-align:center}
.meter-label{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:3px;margin-bottom:8px}
.meter-bar{width:20px;height:300px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden;position:relative}
#meter-fill{position:absolute;bottom:0;width:100%;height:50%;border-radius:10px;transition:height .8s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(to top,#8b2500,#c9a84c,#ffd700)}
#meter-value{font-family:var(--mono);font-size:14px;color:var(--gold);margin-top:8px}
#crowd-row{display:flex;flex-direction:column;gap:8px;align-items:center}
.crowd-fig{font-size:24px;transition:all .3s;display:block}
.crowd-fig.cheer{animation:crowdCheer .4s}
.crowd-fig.gasp{animation:crowdGasp .4s}
@keyframes crowdCheer{0%{transform:scale(1)}50%{transform:scale(1.3) translateY(-5px)}100%{transform:scale(1)}}
@keyframes crowdGasp{0%{transform:scale(1)}50%{transform:scale(1.2) rotate(10deg)}100%{transform:scale(1)}}
#your-side{display:flex;flex-direction:column;align-items:center;z-index:1}
#your-portrait{width:80px;height:80px;border-radius:50%;background:rgba(100,150,255,.1);
  border:2px solid rgba(100,150,255,.3);display:flex;align-items:center;justify-content:center}
#your-icon{font-size:36px}
#your-label{font-family:var(--heading);font-size:18px;color:rgba(100,150,255,.8);margin:12px 0}
#input-area{width:100%;max-width:350px}
#debate-input{width:100%;padding:15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);
  border-radius:12px;color:var(--text);font-family:var(--mono);font-size:13px;resize:none;transition:border .3s}
#debate-input:focus{outline:none;border-color:var(--gold)}
#debate-input::placeholder{color:rgba(255,255,255,.25)}
#send-btn{width:100%;margin-top:10px;padding:12px;background:linear-gradient(135deg,var(--crimson),#a03000);
  border:none;color:#fff;font-family:var(--heading);font-size:15px;letter-spacing:2px;cursor:pointer;
  border-radius:10px;transition:all .3s}
#send-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,37,0,.4)}
#send-btn:active{transform:translateY(0)}
#back-select{position:fixed;bottom:20px;left:20px;background:none;border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.4);padding:10px 20px;border-radius:20px;font-family:var(--mono);font-size:12px;
  cursor:pointer;z-index:100;transition:all .3s}
#back-select:hover{border-color:var(--gold);color:var(--gold)}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}
@media(max-width:768px){
  #arena{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:30px}
  #character-arc{gap:15px}
  .portrait-frame{width:90px;height:110px}
  .portrait-icon{font-size:36px}
  .speech-bubble{max-width:90vw}
  .meter-bar{width:100%;height:20px}
  #meter-fill{width:50%!important;height:100%!important;position:absolute;left:0;bottom:auto}
  #crowd-row{flex-direction:row}
}