@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --bg:#0b1221;
  --panel:#111c2e;
  --line:#253349;
  --muted:#91a0b7;
  --mint:#70efb3;
  --blue:#78aaff;
  --red:#ff8795;
  --text:#eef3fb
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:radial-gradient(ellipse at 90% 10%,#122b3c66,transparent 45%),var(--bg);
  color:var(--text);
  font:15px 'DM Sans',system-ui,sans-serif
}
a{
  color:inherit;
  text-decoration:none
}
button,input,select{
  font:inherit
}
button,.button{
  cursor:pointer;
  border-radius:9px;
  min-height:48px;
  padding:13px 23px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  border:1px solid transparent;
  font-weight:700;
  transition:transform .18s,background .18s
}
button:hover,.button:hover{
  transform:translateY(-2px)
}
button:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none
}
.primary{
  background:var(--mint);
  color:#0b2920
}
.primary:hover{
  background:#96f6ca
}
.secondary{
  background:#1b2940;
  color:var(--text);
  border-color:#35455f
}
.ghost{
  color:var(--muted);
  background:transparent;
  border-color:var(--line)
}
.compact{
  min-height:39px;
  padding:8px 15px;
  font-size:13px
}
.topbar{
  height:101px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  max-width:1300px;
  margin:auto;
  padding:0 40px
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font:700 25px 'Space Grotesk',sans-serif;
  letter-spacing:-1px
}
.brand-icon{
  color:var(--mint);
  font-size:48px;
  line-height:1
}
.brand small{
  display:block;
  font:600 8px 'DM Sans',sans-serif;
  letter-spacing:2.5px;
  margin-top:3px;
  color:var(--muted)
}
nav{
  display:flex;
  gap:32px
}
nav a{
  font-weight:500;
  color:#b9c5d7
}
nav a:hover{
  color:var(--mint)
}
.live{
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}
.live i,.dot{
  height:7px;
  width:7px;
  display:inline-block;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 14px #70efb34f
}
.mint{
  color:var(--mint)
}
.muted{
  color:var(--muted)
}
main{
  max-width:1220px;
  margin:auto;
  padding:0 30px;
  min-height:75vh
}
.hero{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  padding:70px 0 55px;
  gap:15px
}
.eyebrow{
  font-size:10px;
  letter-spacing:2px;
  font-weight:700;
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center
}
h1,h2,h3{
  font-family:'Space Grotesk',system-ui,sans-serif;
  letter-spacing:-1px;
  margin:0
}
h1{
  font-size:68px;
  line-height:1.04;
  margin:22px 0
}
h2{
  font-size:32px;
  line-height:1.2
}
h3{
  font-size:22px;
  letter-spacing:-.6px
}
.lead{
  font-size:17px;
  line-height:1.8;
  color:#a3b0c5;
  max-width:430px;
  margin:22px 0 28px
}
.hero-actions,.action-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.hero-meta{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:10px;
  color:var(--muted);
  margin-top:28px
}
.globe-card{
  height:460px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}
.orb{
  width:365px;
  height:365px;
  border-radius:50%;
  position:relative;
  background:radial-gradient(circle at 35% 30%,#1b4d52,#112932 60%,#08131f 90%);
  box-shadow:inset -25px -20px 50px #0008,0 0 100px #3dbd9b0e;
  border:1px solid #37786770;
  transform:rotate(-16deg)
}
.orb-grid{
  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  background:repeating-linear-gradient(0deg,transparent 0 44px,#5dac8d30 45px 46px,transparent 47px 48px);
  border:1px solid #3b796d
}
.orb-grid:before,.orb-grid:after{
  content:'';
  position:absolute;
  inset:-1px 27%;
  border:1px solid #5dac8d45;
  border-radius:50%
}
.orb-grid:after{
  inset:-1px 10%
}
.continents{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:#5dcaa163;
  stroke:#82e2b535;
  stroke-width:1.5
}
.globe-pin{
  position:absolute;
  color:var(--mint);
  font-size:30px;
  text-shadow:0 0 22px var(--mint)
}
.pin-one{
  top:36%;
  left:26%
}
.pin-two{
  top:64%;
  right:25%
}
.globe-ring{
  position:absolute;
  inset:8%;
  border:1px dashed #88fac950;
  border-radius:50%;
  transform:rotate(35deg) scaleX(1.35)
}
.floating{
  position:absolute;
  padding:15px 18px;
  background:#14283be8;
  border:1px solid #44635680;
  border-radius:10px;
  box-shadow:0 15px 40px #0003;
  font-size:12px;
  backdrop-filter:blur(12px)
}
.tag-one{
  top:66px;
  right:0;
  display:flex;
  gap:10px;
  align-items:center
}
.tag-one span{
  margin-left:12px;
  color:var(--mint)
}
.tag-two{
  bottom:40px;
  left:7px;
  line-height:1.7
}
.tag-two small{
  color:var(--muted)
}
.coordinate{
  position:absolute;
  bottom:5px;
  right:15px;
  color:#6b8b91;
  font-size:8px;
  letter-spacing:3px
}
.features{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:25px 0;
  margin-bottom:36px
}
.features>div{
  display:flex;
  align-items:center;
  gap:20px;
  padding:4px 25px;
  border-right:1px solid var(--line)
}
.features>div:first-child{
  padding-left:0
}
.features>div:last-child{
  border:0
}
.features b{
  font:500 30px 'Space Grotesk';
  color:#658086
}
.features span{
  font-weight:600
}
.features small{
  display:block;
  font-size:11px;
  color:var(--muted);
  font-weight:400;
  margin-top:7px
}
.notice{
  border:1px solid #9d88465c;
  background:#b7952b0a;
  border-radius:9px;
  padding:16px 20px;
  color:#e4ce95;
  font-size:12px;
  line-height:1.8;
  margin:20px 0
}
.notice strong{
  display:block
}
.notice span{
  color:#beb49c
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:45px 0 23px
}
.section-heading .eyebrow{
  margin-bottom:12px
}
.section-heading p{
  color:var(--muted);
  font-size:12px
}
.setup-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  align-items:start
}
.panel{
  background:linear-gradient(130deg,#142136,#101a2b);
  border:1px solid var(--line);
  border-radius:16px;
  padding:30px
}
.card-heading{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:25px
}
.card-heading p{
  font-size:12px;
  color:var(--muted);
  margin:5px 0
}
.icon-box{
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  background:#70efb311;
  color:var(--mint);
  border:1px solid #70efb330;
  border-radius:12px;
  font-size:24px
}
.blue{
  color:var(--blue);
  background:#78aaff12;
  border-color:#78aaff33
}
label{
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12px;
  color:#bbc6d8;
  margin-bottom:19px
}
input,select{
  background:#0c1627;
  border:1px solid #2b3c55;
  color:var(--text);
  border-radius:8px;
  padding:13px 14px;
  width:100%;
  outline:none;
  min-height:46px
}
input::placeholder{
  color:#60738d
}
input:focus,select:focus{
  border-color:var(--mint);
  box-shadow:0 0 0 3px #70efb312
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 16px
}
form>button{
  width:100%;
  margin-top:4px
}
form>small{
  display:block;
  text-align:center;
  font-size:10px;
  margin-top:15px
}
.side-stack{
  display:grid;
  gap:20px
}
.code-input{
  font-family:'Space Grotesk',monospace;
  letter-spacing:8px;
  text-transform:uppercase;
  font-size:22px
}
.small-card{
  display:flex;
  gap:18px;
  background:#112a2c50;
  border:1px solid #28514a;
  border-radius:14px;
  padding:24px
}
.small-card>span{
  font-size:28px;
  color:var(--mint)
}
.small-card strong{
  font-size:13px
}
.small-card p{
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:8px 0 0
}
.how{
  margin:45px 0 60px
}
.how h2{
  margin-top:15px
}
.how-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:25px
}
.how p{
  color:var(--muted);
  line-height:1.8;
  font-size:12px
}
.how-grid strong{
  display:block;
  color:var(--mint);
  font-size:13px;
  margin-bottom:12px
}
footer{
  max-width:1160px;
  margin:45px auto 0;
  padding:25px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:10px;
  gap:15px;
  color:#a8b6cb
}
footer a{
  color:var(--muted)
}
#toast{
  position:fixed;
  left:50%;
  bottom:25px;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  background:#eef7f3;
  color:#12283a;
  padding:16px 25px;
  border-radius:10px;
  z-index:99999;
  max-width:90vw;
  box-shadow:0 10px 50px #0007;
  transition:.2s
}
#toast.visible{
  opacity:1;
  transform:translate(-50%,0)
}
.hidden{
  display:none!important
}
.room-shell{
  padding-top:40px
}
.room-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.room-heading h2{
  margin-top:12px
}
.room-actions{
  display:flex;
  gap:10px
}
.scoreboard{
  display:flex;
  gap:16px;
  margin:30px 0
}
.score-card{
  flex:1;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:12px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.score-card.blue-team{
  border-top:2px solid var(--blue)
}
.score-card.red-team{
  border-top:2px solid var(--red)
}
.score-card strong{
  font:600 28px 'Space Grotesk'
}
.score-card small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px
}
.players{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin:25px 0
}
.player{
  background:#0d1728;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
  display:flex;
  gap:14px;
  align-items:center
}
.avatar{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#78aaff20;
  color:var(--blue);
  font:600 22px 'Space Grotesk'
}
.red-team .avatar{
  color:var(--red);
  background:#ff879520
}
.player small{
  display:block;
  color:var(--muted);
  margin-top:5px;
  font-size:11px
}
.player .badge{
  margin-left:auto
}
.badge{
  font-size:10px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--muted)
}
.badge.ready{
  color:var(--mint);
  border-color:#70efb340
}
.lobby-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:23px
}
.stage-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:28px 0 20px
}
.stage-bar h3{
  margin-top:10px
}
.timer{
  font:500 32px 'Space Grotesk';
  padding:14px 23px;
  background:var(--panel);
  border-radius:12px;
  border:1px solid var(--line);
  font-variant-numeric:tabular-nums
}
.timer.urgent{
  color:var(--red);
  border-color:var(--red)
}
.waiting{
  text-align:center;
  padding:65px 25px
}
.radar{
  font-size:70px;
  color:var(--mint);
  animation:pulse 3s infinite
}
.waiting h2{
  margin:20px 0
}
.waiting p{
  color:var(--muted);
  line-height:1.8
}
.play-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:20px
}
.map{
  height:440px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#17283c;
  z-index:1;
  color:#111
}
.map a{
  color:#1674a0
}
.viewer{
  background:#080e19;
  border-radius:12px;
  position:relative;
  overflow:hidden
}
.preview{
  height:300px;
  margin:18px 0
}
.street{
  height:550px
}
.explore-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:15px
}
.explore-toolbar p{
  color:var(--muted)
}
.check{
  flex-direction:row;
  align-items:center;
  line-height:1.5
}
.check input{
  width:18px;
  min-height:18px;
  accent-color:var(--mint)
}
.preview-panel>button{
  width:100%
}
.candidates{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.candidates button{
  font-size:11px;
  min-height:34px;
  padding:8px 13px
}
#guess-panel{
  margin-top:22px
}
#guess-panel .section-heading{
  margin-top:0
}
.table-wrap{
  overflow-x:auto
}
table{
  border-collapse:collapse;
  width:100%;
  margin:20px 0 25px;
  text-align:left;
  font-size:13px
}
th{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  font-weight:500
}
td,th{
  padding:17px 13px;
  border-bottom:1px solid var(--line)
}
td a{
  color:var(--mint)
}
.page-head{
  padding:65px 0 30px
}
.winner-icon{
  font-size:70px;
  color:var(--mint)
}
#final{
  text-align:center;
  margin-top:30px
}
#final .lead{
  margin:20px auto
}
#final .action-row{
  justify-content:center;
  margin:30px 0 45px
}
#final h1{
  font-size:45px
}
#final h3{
  margin-top:40px
}
#final table{
  text-align:left
}
#result-summary h2{
  margin-bottom:12px
}
#result-summary p{
  color:var(--muted)
}
.celebrate{
  animation:celebrate 1.3s ease-out
}
.history-round{
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:20px 0
}
.history-round h4{
  color:var(--mint);
  margin:0
}
.history-round p{
  font-size:12px;
  color:var(--muted)
}
#identity-panel{
  max-width:480px;
  margin:40px auto
}
#identity-panel p{
  color:var(--muted)
}
:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:4px
}
@keyframes pulse{
  50%{
    opacity:.4;
    transform:scale(.92)
  }
}
@keyframes celebrate{
  0%{
    box-shadow:0 0 0 0 #70efb360
  }
  100%{
    box-shadow:0 0 0 45px #70efb300
  }
}
@media(max-width:960px){
  .topbar{
    padding:0 25px
  }
  .live{
    display:none
  }
  h1{
    font-size:56px
  }
  .orb{
    width:300px;
    height:300px
  }
  .hero-meta{
    gap:12px
  }
  .tag-one{
    right:0;
    top:80px
  }
  .features>div{
    padding:4px 15px;
    gap:12px
  }
  .features small{
    font-size:10px
  }
  .play-grid{
    grid-template-columns:1fr
  }
  .how-grid{
    grid-template-columns:1fr 1fr
  }
  .preview{
    height:340px
  }
  footer{
    margin:40px 30px 0
  }
}
@media(max-width:640px){
  .topbar{
    height:84px;
    padding:0 20px
  }
  .brand{
    font-size:20px
  }
  .brand-icon{
    font-size:38px
  }
  .brand small{
    font-size:6px
  }
  nav{
    gap:15px;
    font-size:11px
  }
  main{
    padding:0 20px
  }
  .hero{
    grid-template-columns:1fr;
    padding-top:40px
  }
  .hero h1{
    font-size:58px
  }
  .lead{
    font-size:15px
  }
  .globe-card{
    height:330px
  }
  .orb{
    width:265px;
    height:265px
  }
  .tag-one{
    top:15px
  }
  .tag-two{
    bottom:12px
  }
  .coordinate{
    display:none
  }
  .features{
    grid-template-columns:1fr;
    padding:5px 0
  }
  .features>div,.features>div:first-child{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:18px 0
  }
  .features small{
    font-size:11px
  }
  .setup-grid{
    grid-template-columns:1fr
  }
  .panel{
    padding:22px
  }
  .section-heading{
    align-items:flex-start;
    flex-direction:column
  }
  .section-heading p{
    margin:0
  }
  .form-grid{
    gap:0 12px
  }
  .how-grid{
    gap:14px
  }
  .how h2{
    font-size:26px
  }
  footer{
    flex-direction:column;
    line-height:1.8
  }
  .room-heading{
    align-items:flex-start;
    flex-direction:column
  }
  .score-card{
    padding:14px
  }
  .score-card strong{
    font-size:23px
  }
  .players{
    grid-template-columns:1fr
  }
  .lobby-bottom{
    align-items:flex-start;
    flex-direction:column
  }
  .lobby-bottom .action-row{
    width:100%
  }
  .stage-bar h3{
    font-size:18px
  }
  .timer{
    font-size:24px;
    padding:12px
  }
  .map{
    height:350px
  }
  .street{
    height:440px
  }
  .explore-toolbar{
    flex-direction:column;
    align-items:stretch
  }
  .explore-toolbar .action-row{
    justify-content:space-between
  }
  #final h1{
    font-size:35px
  }
  .page-head h1{
    font-size:45px
  }
  #final{
    padding:20px 12px
  }
  .room-shell{
    padding-top:25px
  }
  .hero-meta{
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

.map-navigation{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.map-navigation label{margin:0;flex:1;min-width:160px}
.map-navigation .check{font-size:11px;flex:0 1 210px}
.map-navigation select{min-height:38px;padding:8px}

.panorama-marker{display:flex!important;flex-direction:column;align-items:center;justify-content:center;background:#70efb3;border:2px solid #063f2c;border-radius:11px;color:#063f2c;box-shadow:0 3px 9px #0005;cursor:pointer;font-family:'Space Grotesk',sans-serif}
.panorama-marker span{font-size:9px;font-weight:700;line-height:12px}.panorama-marker b{font-size:16px;line-height:18px}
.panorama-marker:hover,.panorama-marker:focus{background:#fff;border-color:#1976d2;z-index:10000!important;outline:3px solid #1976d266}
#candidates{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;max-height:265px;overflow-y:auto;padding:5px 3px}
#candidates .panorama-card{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:11px;min-height:65px;color:var(--text);background:#14283d;border:1px solid #345371;border-radius:10px;text-align:left;font-size:12px}
.panorama-card strong{color:var(--mint);font-size:19px;white-space:nowrap}.panorama-card small{display:block;color:var(--muted);font-size:10px;margin-top:5px}
#candidates .panorama-card.selected{border-color:var(--mint);background:#153b32}
#selection-map{height:520px}.map-navigation{align-items:flex-end}.map-navigation label{min-width:200px}
#preview-loading{padding:10px 14px;margin:10px 0}.preview-panel{position:sticky;top:20px;align-self:start}
@media(max-width:960px){.preview-panel{position:static}#selection-map{height:430px}}

.expedition-banner{display:flex;align-items:center;gap:24px;padding:27px 30px;margin-bottom:24px;border:1px solid #70efb350;background:linear-gradient(110deg,#153a35,#132135);border-radius:16px}
.expedition-banner h3{color:var(--mint)}.expedition-banner p{font-size:12px;line-height:1.8;color:#a5c4ba;margin:8px 0 0}.expedition-symbol{margin-left:auto;font-size:52px;color:var(--mint)}
.mode-description{font-size:12px;color:var(--mint);line-height:1.7}.catalog-info{color:var(--mint);border:1px solid #70efb330;border-radius:9px;background:#70efb309;padding:14px 18px;font-size:12px;margin:18px 0}
.automatic .scoreboard{overflow-x:auto;gap:10px;scrollbar-width:thin;padding-bottom:7px}
.individual-score{display:flex;align-items:center;gap:12px;min-width:190px;flex:1;background:#122237;border:1px solid #293c52;border-top:2px solid var(--player-color);border-radius:10px;padding:14px}
.individual-score strong{font-size:12px;display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.individual-score small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.individual-score>b{font-family:'Space Grotesk',sans-serif;font-size:24px;margin-left:auto;color:var(--player-color)}.rank-number{color:var(--muted);font-size:11px}
.automatic .stage-bar{position:sticky;top:0;z-index:8;background:#0b1221ee;padding:12px 0;margin-top:12px}
.automatic #street-viewer{height:calc(100vh - 250px);min-height:430px}
.automatic #guess-panel{position:fixed;right:24px;bottom:18px;width:min(490px,calc(100vw - 32px));z-index:1200;box-shadow:0 15px 70px #000a;padding:18px;max-height:85vh;overflow:auto}
.automatic #guess-panel .map{height:310px}.automatic #guess-panel .section-heading{flex-direction:row;align-items:center}.automatic #guess-panel h3{font-size:17px}.automatic #guess-panel .lobby-bottom{flex-wrap:wrap;gap:12px}
.automatic .players{grid-template-columns:repeat(3,1fr)}.automatic .player{padding:18px}.automatic .avatar{color:var(--mint);background:#70efb315}
@media(max-width:760px){.automatic .players{grid-template-columns:repeat(2,1fr)}.individual-score{min-width:160px}.expedition-banner{flex-wrap:wrap;padding:22px}.expedition-symbol{display:none}.automatic #guess-panel{right:12px;bottom:12px;width:calc(100vw - 24px)}.automatic #guess-panel .map{height:270px}}
@media(max-width:460px){.automatic .players{grid-template-columns:1fr}.automatic #street-viewer{min-height:400px}.automatic #guess-panel .section-heading{gap:8px}.expedition-banner{gap:14px}}

.automatic #stage .timer{position:fixed;top:14px;right:20px;z-index:1300;font-size:26px;min-width:104px;text-align:center;background:#101d30f5;box-shadow:0 6px 25px #0005}
.automatic .stage-bar{padding-right:120px}
@media(max-width:640px){.automatic #stage .timer{top:10px;right:12px;font-size:22px;min-width:86px;padding:10px 14px}.automatic .stage-bar{padding-right:98px}}