:root{
  --deep:#04121f; --abyss:#071e33; --panel:rgba(10,38,61,.82); --panel2:rgba(14,52,82,.9);
  --ink:#dff3ff; --dim:#8fb8cf; --teal:#2ee6a8; --coral:#ff7a66; --gold:#ffd166; --line:rgba(120,200,240,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif; color:var(--ink);
  background:radial-gradient(1200px 700px at 70% -10%, rgba(20,90,130,.55) 0, transparent 60%),
             linear-gradient(180deg,#062238 0%, var(--deep) 55%, #020a13 100%);
  background-color:var(--deep); min-height:100vh; padding:18px 16px 60px;
}
.hidden{display:none !important}
button{font-family:inherit}
.btn{border:1px solid var(--line); background:var(--panel2); color:var(--ink); border-radius:999px; padding:9px 16px; font-size:15px; cursor:pointer}
.btn:hover{border-color:var(--teal)}
.btn-coral{background:linear-gradient(180deg,#ff8a70,#f9613f); border-color:#ff9a86; color:#fff; font-weight:600}
.btn-ghost{background:transparent}
.btn-echo{background:linear-gradient(180deg,#ff9d5c,#ff7a66); color:#20130a; font-weight:800; letter-spacing:.4px}
.btn-echo:disabled{opacity:.35; cursor:not-allowed; filter:grayscale(.6)}
.btn-mic{font-size:19px; padding:8px 13px}
.btn-mic.live{background:linear-gradient(180deg,#2ee6a8,#12b57e); color:#03251a; border-color:#7ff5cd; box-shadow:0 0 18px rgba(46,230,168,.45)}
.topbar{text-align:center; margin:8px 0 14px}
.logo{font-size:34px; letter-spacing:2px; font-weight:300}
.logo span{font-weight:800; background:linear-gradient(90deg,var(--teal),#57c7ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline{color:var(--dim); font-size:14px; margin-top:2px}
.theme-card,.map-card,.stream-card,.identity-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:16px 18px; backdrop-filter: blur(6px)}
.theme-card{max-width:860px;margin:0 auto 14px}
.theme-label{color:var(--gold); font-size:12.5px; letter-spacing:1.4px; font-weight:700}
.theme-text{font-size:19px; margin-top:5px; font-style:italic}
.map-card{max-width:860px;margin:0 auto 18px; text-align:center}
.sonar{position:relative; width:min(430px,84vw); aspect-ratio:1; margin:4px auto; border-radius:50%;
  background:radial-gradient(circle, rgba(46,230,168,.10) 0%, rgba(10,50,80,.25) 55%, rgba(2,12,22,.6) 100%);
  border:1px solid var(--line); overflow:hidden}
.sonar .ring{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(46,230,168,.25)}
.sonar .r1{margin:16%} .sonar .r2{margin:31%} .sonar .r3{margin:44%}
.sonar .sweep{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(46,230,168,.35), transparent 18%);
  animation:sweep 5s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.you-dot{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:19px; z-index:3}
.pin{position:absolute; transform:translate(-50%,-50%); z-index:2; cursor:pointer; text-align:center; background:none;border:none}
.pin .pin-dot{display:block; font-size:24px; filter:drop-shadow(0 0 8px rgba(46,230,168,.8)); animation:pulse 2.4s ease-in-out infinite}
.pin .pin-name{display:block; font-size:10.5px; color:var(--ink); background:rgba(3,18,30,.75); padding:1px 6px; border-radius:8px; margin-top:1px; white-space:nowrap}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.map-caption{color:var(--dim); font-size:13.5px}
.controls-row{max-width:860px;margin:0 auto 10px; display:flex; justify-content:space-between; align-items:center}
.controls-row h2{font-size:20px; margin:0; font-weight:700}
.pod-grid{max-width:860px;margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:13px}
.pod-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:15px 16px; display:flex; flex-direction:column; gap:6px}
.pod-card h3{margin:0; font-size:18px}
.pod-place{color:var(--teal); font-size:13px}
.pod-topic{color:var(--dim); font-size:14px; font-style:italic; min-height:34px}
.pod-foot{display:flex; justify-content:space-between; align-items:center; margin-top:auto}
.pod-count{font-variant-numeric:tabular-nums; font-weight:700; font-size:17px}
.pod-count small{display:block; color:var(--dim); font-weight:400; font-size:11px}
.fineprint{max-width:860px;margin:16px auto 0; color:var(--dim); font-size:12.5px; text-align:center}
.modal{position:fixed; inset:0; background:rgba(1,8,15,.72); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px}
.modal-card{background:#0a2a44; border:1px solid var(--line); border-radius:18px; padding:22px; width:min(430px,94vw)}
.modal-card h3{margin-top:0}
.modal-card label{display:block; font-size:13.5px; color:var(--dim); margin:11px 0}
.modal-card input,.modal-card select,.identity-card select,#chat-input{
  width:100%; margin-top:4px; background:#062136; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:15px}
.modal-actions{display:flex; justify-content:flex-end; gap:9px; margin-top:14px}
/* room */
#view-room{max-width:920px;margin:0 auto}
.room-head{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.room-title{flex:1; min-width:0}
#room-name{font-size:23px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.room-meta{color:var(--dim); font-size:13px}
.room-timer{text-align:right}
#room-count{font-size:25px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--gold)}
.timer-label{font-size:11px; color:var(--dim)}
.identity-card{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; padding:12px 16px}
.filter-chip{background:rgba(46,230,168,.16); color:var(--teal); border-radius:999px; padding:2px 10px; font-size:12.5px; margin-left:6px}
.filter-pick{font-size:13px; color:var(--dim); display:flex; align-items:center; gap:8px}
.filter-pick select{width:auto; margin:0; padding:6px 9px}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(106px,1fr)); gap:10px; margin-bottom:12px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; transition:box-shadow .15s, border-color .15s}
.tile .tile-emoji{font-size:30px}
.tile .tile-name{font-size:12.5px; margin-top:4px; word-break:break-word}
.tile.speaking{border-color:var(--teal); box-shadow:0 0 16px rgba(46,230,168,.55)}
.tile.me{border-color:var(--gold)}
.stream-card{padding:0; overflow:hidden}
.stream-head{padding:12px 16px; border-bottom:1px solid var(--line); font-weight:700}
.echo-count{color:var(--coral); font-size:13px; font-weight:600; margin-left:8px}
.stream{height:342px; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:9px}
.bubble{max-width:82%; padding:9px 13px; border-radius:15px; font-size:14.5px; line-height:1.4; background:#0d3355; border:1px solid var(--line)}
.bubble .b-from{font-size:11.5px; color:var(--teal); font-weight:700; margin-bottom:2px}
.bubble.mine{align-self:flex-end; background:#123f66; border-color:rgba(255,209,102,.35)}
.bubble.mine .b-from{color:var(--gold)}
.bubble.voice-b{background:#0d3a3a}
.bubble.echo-b{background:linear-gradient(180deg,#4a241f,#38202b); border-color:rgba(255,122,102,.5); align-self:center; text-align:center; max-width:92%}
.bubble.echo-b .b-from{color:var(--coral)}
.bubble.system{align-self:center; background:transparent; border-style:dashed; color:var(--dim); text-align:center; font-size:13px}
.bubble audio{width:230px; max-width:100%; margin-top:6px; height:34px}
.composer{display:flex; gap:8px; align-items:center; padding:12px; border-top:1px solid var(--line); flex-wrap:wrap}
.composer #chat-input{flex:1; min-width:130px; margin:0}
.wave-wrap{width:90px; height:34px}
.composer-hint{padding:0 14px 11px; color:var(--dim); font-size:12.5px}
.overlay{position:fixed; inset:0; z-index:80; background:radial-gradient(circle at 50% 40%, rgba(20,80,120,.92), rgba(1,8,15,.97)); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px}
.overlay-emoji{font-size:64px; animation:pulse 1.6s ease-in-out infinite}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#0d3355; border:1px solid var(--teal); color:var(--ink); border-radius:999px; padding:9px 18px; font-size:14px; z-index:90; box-shadow:0 6px 24px rgba(0,0,0,.5)}
.bubbles span{position:fixed; bottom:-30px; border-radius:50%; background:radial-gradient(circle at 32% 32%, rgba(255,255,255,.5), rgba(140,210,255,.12)); animation:rise linear infinite; z-index:0; pointer-events:none}
.bubbles span:nth-child(1){left:8%; width:14px;height:14px; animation-duration:13s}
.bubbles span:nth-child(2){left:22%; width:8px;height:8px; animation-duration:19s; animation-delay:3s}
.bubbles span:nth-child(3){left:47%; width:17px;height:17px; animation-duration:16s; animation-delay:1s}
.bubbles span:nth-child(4){left:66%; width:9px;height:9px; animation-duration:11s; animation-delay:5s}
.bubbles span:nth-child(5){left:82%; width:13px;height:13px; animation-duration:21s; animation-delay:2s}
.bubbles span:nth-child(6){left:93%; width:7px;height:7px; animation-duration:14s; animation-delay:7s}
@keyframes rise{to{transform:translateY(-108vh)}}
main{position:relative; z-index:1}
@media (max-width:560px){ .stream{height:290px} .logo{font-size:27px} }