:root{
  color-scheme:dark;
  --bg:#030a12;
  --muted:#a9bfd0;
  --cyan:#34ceff;
  --pink:#ff2972;
  font-family:Arial,Helvetica,sans-serif
}

*{
  box-sizing:border-box
}
html,body{
  margin:0;
  min-height:100%;
  background:var(--bg)
}
body{
  color:#eaf7ff;
  overflow-x:hidden
}
.app-shell{
  height:100dvh;
  min-height:450px;
  display:flex;
  flex-direction:column;
  background:radial-gradient(ellipse at 52% 45%,#061525 0%,#030913 63%,#020710 100%)
}
button,select{
  font:inherit
}
button{
  cursor:pointer
}
.toolbar{
  height:94px;
  flex:none;
  display:flex;
  align-items:center;
  padding:0 clamp(20px,2.35vw,42px);
  gap:clamp(34px,5vw,88px);
  border-bottom:1px solid rgba(111,158,190,.09);
  background:linear-gradient(180deg,rgba(4,13,23,.97),rgba(3,10,19,.86));
  white-space:nowrap
}
.brand{
  display:flex;
  align-items:center;
  gap:22px;
  flex:none
}
.brand-line{
  width:4px;
  height:45px;
  border-radius:4px;
  background:var(--cyan);
  box-shadow:0 0 11px var(--cyan),0 0 23px rgba(52,206,255,.28)
}
.brand-title{
  font-size:29px;
  font-weight:700;
  letter-spacing:.23em;
  line-height:1
}
.brand-title span{
  color:var(--cyan);
  font-weight:500
}
.brand-subtitle{
  font-size:12px;
  letter-spacing:.2em;
  color:#a2bdd0;
  margin-top:9px
}
.controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,1.4vw,26px);
  flex:1;
  min-width:0
}
.control-group{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:38px
}
.control-group+.control-group{
  padding-left:clamp(16px,2vw,35px);
  border-left:1px solid rgba(134,174,203,.14)
}
.transport{
  gap:30px
}
.text-control{
  height:47px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 3px;
  border:0;
  border-bottom:1px solid transparent;
  background:none;
  color:#b5c5d3;
  font-size:16px
}
.text-control.primary{
  color:#e8f6ff;
  border-color:#178fbd
}
.text-control:hover:not(:disabled),.text-control:focus-visible{
  color:#fff;
  border-color:var(--cyan)
}
.text-control:disabled{
  opacity:.48;
  cursor:default
}
.text-control svg,.group-icon{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.text-control.primary svg,.group-icon{
  color:var(--cyan)
}
.pause-icon{
  fill:none
}
.group-label,.select-group label{
  font-size:16px;
  color:#b5c5d3
}
.switch{
  width:42px;
  height:24px;
  border:0;
  border-radius:30px;
  background:#405363;
  padding:3px;
  transition:background .2s;
  flex:none
}
.switch[aria-checked=true]{
  background:#158dff;
  box-shadow:0 0 13px rgba(30,160,255,.22)
}
.switch span{
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  background:white;
  box-shadow:0 1px 4px #001a30;
  transition:transform .2s
}
.switch[aria-checked=true] span{
  transform:translateX(18px)
}
.select-wrap{
  position:relative;
  display:inline-block
}
.select-wrap:after{
  content:"";
  position:absolute;
  right:15px;
  top:50%;
  width:8px;
  height:8px;
  border-right:1.5px solid var(--cyan);
  border-bottom:1.5px solid var(--cyan);
  transform:translateY(-72%) rotate(45deg);
  pointer-events:none
}
.select-wrap select{
  height:46px;
  min-width:116px;
  max-width:140px;
  appearance:none;
  border:1px solid rgba(126,163,193,.13);
  border-radius:11px;
  padding:0 34px 0 15px;
  color:#c3e9ff;
  background:linear-gradient(135deg,#071522,#081726);
  font-size:16px;
  outline:none;
  cursor:pointer
}
.select-wrap select:hover{
  border-color:rgba(52,206,255,.4)
}
.select-wrap select:focus-visible,.switch:focus-visible,.text-control:focus-visible,.end-content button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px
}
option{
  background:#091725;
  color:#eaf7ff
}
.main-content{
  flex:1;
  min-height:0;
  padding:30px 21px 20px;
  display:flex;
  flex-direction:column
}
.arena-frame{
  position:relative;
  flex:1;
  min-height:300px;
  width:100%;
  border:2px solid transparent;
  border-radius:32px;
  background:linear-gradient(#050e1a,#050e1a) padding-box,linear-gradient(90deg,#30caff 0%,#177ac5 27%,#283848 50%,#ab164e 76%,#ff2d7d 100%) border-box;
  box-shadow:-9px 0 21px rgba(0,171,255,.13),9px 0 23px rgba(255,30,99,.12),inset 0 0 22px rgba(0,0,0,.45);
  overflow:hidden;
  touch-action:none
}
.arena-frame:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  box-shadow:inset 0 0 4px #8ceaff,inset 0 0 15px rgba(26,140,220,.17)
}
canvas{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none
}
.center-message{
  position:absolute;
  left:50%;
  top:35%;
  transform:translate(-50%,-50%);
  z-index:2;
  color:#f5fbff;
  font-size:clamp(34px,5vw,70px);
  font-weight:600;
  letter-spacing:.14em;
  text-align:center;
  text-shadow:0 0 14px rgba(255,255,255,.42),0 0 34px rgba(47,196,255,.25);
  pointer-events:none;
  opacity:0;
  transition:opacity .18s;
  white-space:nowrap
}
.center-message.visible{
  opacity:1
}
.center-message.small{
  font-size:clamp(19px,2.3vw,31px);
  letter-spacing:.12em
}
.end-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  background:rgba(2,8,17,.62);
  backdrop-filter:blur(3px)
}
.end-overlay[hidden]{
  display:none
}
.end-content{
  text-align:center;
  padding:30px
}
.end-eyebrow{
  font-size:12px;
  letter-spacing:.31em;
  color:var(--cyan);
  margin:0 0 14px
}
.end-content h1{
  font-size:clamp(28px,4vw,58px);
  letter-spacing:.15em;
  font-weight:600;
  margin:0 0 27px;
  text-shadow:0 0 24px rgba(56,205,255,.38)
}
.end-content button{
  border:1px solid rgba(80,207,255,.55);
  border-radius:9px;
  background:rgba(7,29,47,.85);
  color:#d9f6ff;
  padding:11px 17px;
  font-size:15px
}
.end-content button:hover{
  background:#0c334d;
  box-shadow:0 0 16px rgba(38,190,255,.17)
}
.end-content button span{
  color:var(--cyan);
  margin-left:10px
}
.controls-hint{
  display:none;
  margin:10px 0 0;
  color:#829caf;
  text-align:center;
  font-size:12px;
  letter-spacing:.04em
}

@media(max-width:1500px){
  .toolbar{
    gap:28px
  }
  .brand-title{
    font-size:24px
  }
  .brand{
    gap:14px
  }
  .controls{
    gap:10px
  }
  .control-group{
    gap:8px
  }
  .control-group+.control-group{
    padding-left:13px
  }
  .transport{
    gap:14px
  }
  .text-control,.group-label,.select-group label,.select-wrap select{
    font-size:14px
  }
  .select-wrap select{
    min-width:102px;
    height:42px;
    padding-left:10px;
    padding-right:28px
  }
  .select-wrap:after{
    right:11px
  }
  .group-icon{
    width:20px;
    height:20px
  }

}

@media(max-width:1050px){
  .toolbar{
    height:auto;
    min-height:104px;
    display:block;
    padding:15px 20px 12px
  }
  .brand{
    margin-bottom:14px
  }
  .brand-title{
    font-size:22px
  }
  .brand-line{
    height:36px
  }
  .brand-subtitle{
    font-size:10px;
    margin-top:6px
  }
  .controls{
    justify-content:space-between;
    gap:6px
  }
  .main-content{
    padding:18px 16px 14px
  }
  .arena-frame{
    border-radius:24px
  }
  .controls-hint{
    display:block
  }

}

@media(max-width:700px){
  .toolbar{
    padding:12px 13px
  }
  .brand{
    margin-bottom:12px
  }
  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px 8px
  }
  .control-group{
    min-height:38px
  }
  .control-group+.control-group{
    border-left:0;
    padding-left:0
  }
  .transport{
    grid-column:1/-1;
    justify-content:space-around;
    border-bottom:1px solid rgba(134,174,203,.12);
    padding-bottom:6px
  }
  .sound-group{
    justify-content:center
  }
  .select-group{
    justify-content:flex-end
  }
  .score-group{
    grid-column:1/-1;
    justify-content:center
  }
  .select-group label,.group-label{
    font-size:13px
  }
  .select-wrap select{
    font-size:13px;
    height:39px;
    min-width:105px
  }
  .main-content{
    padding:12px 10px 8px
  }
  .arena-frame{
    min-height:350px;
    border-radius:18px
  }
  .controls-hint{
    font-size:11px
  }

}

@media(max-width:420px){
  .brand-title{
    font-size:20px
  }
  .controls{
    column-gap:3px
  }
  .select-group{
    gap:5px
  }
  .group-icon{
    width:18px;
    height:18px
  }
  .select-wrap select{
    min-width:98px
  }
  .arena-frame{
    min-height:330px
  }

}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important
  }

}

@media (min-width:1501px) and (max-width:1700px){
  .toolbar{
    gap:35px
  }
  .controls{
    gap:12px
  }
  .control-group+.control-group{
    padding-left:18px
  }

}

.toolbar{position:relative}
.online-status{position:absolute;right:24px;bottom:2px;display:flex;align-items:center;gap:11px;color:#9bb4c5;font-size:11px;letter-spacing:.04em}
.online-status[hidden]{display:none}
.status-dot{width:6px;height:6px;border-radius:50%;background:#41d99a;box-shadow:0 0 7px #41d99a}
.online-status[data-connection="reconnecting"] .status-dot{background:#f4b65a;box-shadow:0 0 7px #f4b65a}
.online-status[data-connection="disconnected"] .status-dot{background:#ff587c;box-shadow:0 0 7px #ff587c}
.online-status[data-connection="connection_lost"] .status-dot{background:#ff587c;box-shadow:0 0 7px #ff587c}
#roomLabel,#pingLabel{padding-left:10px;border-left:1px solid rgba(134,174,203,.2)}
.online-panel{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:16px;background:rgba(3,10,18,.38)}
.online-panel[hidden]{display:none}
.online-card{width:min(370px,100%);padding:22px 24px 17px;border:1px solid rgba(74,193,239,.3);border-radius:13px;background:rgba(5,17,29,.97);box-shadow:0 15px 45px rgba(0,0,0,.48),0 0 24px rgba(26,160,215,.1);text-align:left}
.online-eyebrow{margin:0 0 5px;color:var(--cyan);font-size:10px;letter-spacing:.3em}
.online-card h2{margin:0;color:#f0f9ff;font-size:21px;letter-spacing:.13em;font-weight:600}
.online-info{min-height:34px;margin:11px 0 16px;color:#aec4d2;font-size:13px;line-height:1.4}
.online-main-button,.online-join-row button,.room-code-line button{border:1px solid rgba(71,194,243,.45);border-radius:7px;background:#0a273b;color:#d9f5ff;padding:8px 13px;font-size:13px}
.online-main-button:hover,.online-join-row button:hover,.room-code-line button:hover{background:#10384f}
.online-input-label{display:block;margin:19px 0 7px;color:#9fb9c9;font-size:12px}
.online-join-row{display:flex;gap:8px}
.online-join-row input{width:100%;min-width:0;height:36px;border:1px solid rgba(134,174,203,.32);border-radius:7px;background:#071826;color:#ecfaff;padding:0 10px;font-size:14px;letter-spacing:.16em;text-transform:uppercase;outline:none}
.online-join-row input:focus-visible,.online-card button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.online-join-row input::placeholder{color:#637d8e}
.room-details[hidden],.online-error[hidden],#onlineActions[hidden]{display:none}
.room-code-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#9fb9c9;font-size:12px}
.room-code-line strong{color:#eafaff;font-size:19px;letter-spacing:.16em}
.room-code-line button{padding:6px 9px;font-size:11px}
#roomPlayers{margin:18px 0 4px;color:#b4d6e7;line-height:1.8;font-size:13px;white-space:pre-line}
.online-error{margin:11px 0 0;color:#ff8eac;font-size:12px}
.online-cancel{display:block;margin:17px 0 0;padding:4px 0;border:0;background:none;color:#8da9ba;font-size:12px}
.online-cancel:hover{color:#e1f4ff}
@media(max-width:700px){.online-status{position:static;grid-column:1/-1;justify-content:center;margin-top:1px;font-size:10px}.online-card{padding:19px 18px}.online-panel{align-items:center}}