:root{
  --bg:#04141d;
  --panel:#0a2c3c;
  --panel-2:#0d3547;
  --panel-3:#123f54;
  --edge:rgba(127,211,240,.16);
  --edge-strong:rgba(127,211,240,.32);
  --ink:#eaf7ff;
  --ink-dim:#8fb6c9;
  --aqua:#2fc1ee;
  --aqua-strong:#7fdcff;
  --gold:#ffd23f;
  --coral:#ff5f57;
  --pink:#e91e8c;
  --good:#2ecc71;
  --bad:#e74c3c;
  --font:'Segoe UI', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; min-height:100%; }
body{
  min-height:100vh;
  display:grid; place-items:center;
  padding:16px;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(47,193,238,.15), transparent 70%),
    radial-gradient(900px 620px at 88% 112%, rgba(233,30,140,.07), transparent 60%),
    linear-gradient(180deg, #061c27, var(--bg));
  color:var(--ink);
  font-family:var(--font);
  user-select:none;
}

.hidden{ display:none !important; }
:focus-visible{ outline:2px solid var(--aqua); outline-offset:2px; }

/* ---------- game shell: top bar + canvas as one card ---------- */

#gameShell{
  position:relative;
  display:flex; flex-direction:column;
  width:min(1200px, 96vw, calc((100vh - 96px) * 1.5));
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(234,247,255,.06);
}

#gameShell:fullscreen{
  width:100vw; height:100vh; max-width:none;
  border-radius:0; border:none;
  background:#03121a;
}
#gameShell:fullscreen #wrap{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
}
#gameShell:fullscreen canvas{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
}

#topBar{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  min-height:54px;
  background:linear-gradient(180deg, rgba(234,247,255,.05), rgba(234,247,255,0)), var(--panel);
  border-bottom:1px solid var(--edge);
}

#brand{ display:flex; align-items:center; gap:9px; }
#brandIcon{ width:24px; height:24px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
#brandName{
  font-size:17px; font-weight:900; font-style:italic; letter-spacing:2.5px;
  background:linear-gradient(100deg, var(--gold), var(--coral) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

#topActions{ display:flex; gap:8px; }
.iconBtn{
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel-2); color:var(--ink-dim);
  border:1px solid var(--edge); border-radius:9px;
  font-size:16px; font-weight:700; line-height:1;
  cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.iconBtn:hover{ color:var(--ink); border-color:var(--edge-strong); background:var(--panel-3); }
.iconBtn svg{ width:17px; height:17px; }
.iconBtn.musicOff{ opacity:0.4; }
.iconBtn.musicOff:hover{ color:var(--ink); border-color:var(--edge-strong); background:var(--panel-3); opacity:0.4; }

/* ---------- HUD (lives in the top bar, centered) ---------- */

#hud{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:20px;
}
.stat{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:64px; }
.statLabel{
  font-size:9.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--ink-dim);
}
.stat b{
  font-size:21px; line-height:1.1; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.statValue{ display:flex; align-items:center; line-height:1.1; }
.statValue b{ font-size:21px; }
.statDivider{ width:1px; height:26px; background:var(--edge); }

#scoreVal{ color:var(--aqua-strong); }
#scoreVal, #chainVal{ display:inline-block; }
#scoreVal.pop, #chainVal.pop{ animation:pop .35s ease; }
@keyframes pop{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.4); }
  100%{ transform:scale(1); }
}

#chainFlame{
  display:inline-block; margin-left:4px; font-size:13px;
  opacity:0; transform:scale(.6);
  transition:opacity .25s, transform .25s;
}
#multiplierVal{
  display:inline-block; margin-left:7px;
  font-size:12px; font-weight:800;
  color:#ffd9ef; background:rgba(233,30,140,.28);
  border:1px solid rgba(233,30,140,.55);
  padding:1px 7px; border-radius:20px;
  text-shadow:0 0 8px rgba(233,30,140,.7);
}
#multiplierVal.pop{ animation:pop .35s ease; }

#zoneVal{
  font-size:12px; font-weight:700; letter-spacing:.3px;
  padding:3px 10px; border-radius:20px;
  background:rgba(4,24,34,.6); border:1px solid var(--edge);
  white-space:nowrap;
}
#zoneVal[data-zone="pool"]{ color:var(--aqua-strong); }
#zoneVal[data-zone="deck"]{ color:var(--gold); border-color:rgba(255,210,63,.35); }
#zoneVal[data-zone="moving"]{ color:var(--ink-dim); }

/* ---------- golden window banner (sticky, over the canvas) ---------- */

#goldenBanner{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 18px;
  background:rgba(4,24,34,.45);
  border:1px solid rgba(255,210,63,.5); border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.35), 0 0 16px rgba(255,210,63,.2);
  pointer-events:none;
}
#goldenBannerText{
  font-size:13px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 0 10px rgba(255,210,63,.55);
}
.goldenBarTrack{
  width:180px; height:6px; border-radius:6px;
  background:rgba(234,247,255,.15);
  overflow:hidden;
}
#goldenBarFill{
  height:100%; width:100%;
  background:linear-gradient(90deg, var(--gold), #ff9f3f);
  border-radius:6px;
  transform-origin:left center;
}

/* ---------- wind gust ribbon (full-width, over the whole canvas) ---------- */

#windBanner{
  position:absolute; top:0; left:0; right:0;
  z-index:6;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:16px 20px 26px;
  background:linear-gradient(180deg, rgba(4,24,34,.8) 0%, rgba(4,24,34,.35) 60%, rgba(4,24,34,0) 100%);
  pointer-events:none;
}
#windArrow{
  display:inline-block;
  font-size:34px; line-height:1;
  color:var(--aqua-strong);
  transition:transform .3s ease;
  filter:drop-shadow(0 0 8px rgba(160,220,255,.65));
}
#windBannerText{
  font-size:24px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--aqua-strong);
  text-shadow:0 0 16px rgba(160,220,255,.65), 0 2px 6px rgba(0,0,0,.6);
  white-space:nowrap;
}
#windBanner[data-phase="incoming"] #windBannerText,
#windBanner[data-phase="incoming"] #windArrow{ color:#ffd23f; text-shadow:0 0 16px rgba(255,210,63,.65), 0 2px 6px rgba(0,0,0,.6); }
#windBanner[data-phase="active"]{ animation:windPulse 1s ease-in-out infinite; }
#windBanner[data-phase="fading"]{ opacity:.6; }
@keyframes windPulse{
  0%, 100%{ background:linear-gradient(180deg, rgba(4,24,34,.8) 0%, rgba(4,24,34,.35) 60%, rgba(4,24,34,0) 100%); }
  50%{ background:linear-gradient(180deg, rgba(20,60,80,.85) 0%, rgba(20,60,80,.4) 60%, rgba(20,60,80,0) 100%); }
}

/* ---------- canvas ---------- */

#wrap{ position:relative; background:#03121a; }
canvas{
  display:block;
  width:100%; height:auto;
  background:#c9a86a;
  cursor:crosshair;
}

/* ---------- buttons & inputs ---------- */

button{
  background:var(--panel-2); color:var(--ink);
  border:1px solid var(--edge-strong);
  padding:9px 16px; border-radius:10px;
  font-size:13.5px; font-weight:600; font-family:inherit;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .05s;
}
button:hover{ background:var(--panel-3); border-color:var(--aqua); }
button:active{ transform:translateY(1px); }

.btnPrimary{
  background:linear-gradient(180deg, #46cdf4, #1a8fc4);
  border:1px solid rgba(127,220,255,.6);
  color:#04202c;
  font-weight:800; letter-spacing:.3px;
  box-shadow:0 4px 14px rgba(47,193,238,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btnPrimary:hover{
  background:linear-gradient(180deg, #5cd6f9, #229ed4);
  border-color:var(--aqua-strong);
}

.linkBtn{
  background:none; border:none; box-shadow:none;
  color:var(--ink-dim); text-decoration:underline; text-underline-offset:3px;
  font-size:12.5px; font-weight:600; padding:2px 4px; cursor:pointer;
}
.linkBtn:hover{ background:none; border:none; color:var(--ink); }

input[type="text"], input:not([type]), input[type="number"]{
  background:rgba(4,24,34,.85); color:var(--ink);
  border:1px solid var(--edge-strong); border-radius:10px;
  padding:10px 12px; font-size:14px; font-family:inherit;
  text-align:center;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder{ color:#557d91; }
input:focus{
  outline:none;
  border-color:var(--aqua);
  box-shadow:0 0 0 3px rgba(47,193,238,.18);
}

.keys{
  display:inline-block;
  background:#06202b; padding:2px 8px 3px;
  border-radius:6px; border:1px solid var(--edge-strong);
  border-bottom-width:2px;
  font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size:11.5px; color:var(--aqua-strong);
  white-space:nowrap;
}

/* ---------- lobby screens (over the canvas) ---------- */

.lobbyScreen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(4,18,26,.72);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  padding:20px;
}
.lobbyFlamingo{
  position:absolute; right:4%; bottom:-4%;
  height:72%; width:auto;
  opacity:.09; pointer-events:none;
}

.lobbyCard{
  position:relative;
  display:flex; flex-direction:column; gap:12px;
  width:min(340px, 92%);
  padding:28px 30px 24px;
  background:rgba(9,38,52,.94);
  border:1px solid var(--edge);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(234,247,255,.06);
  text-align:center;
}
.lobbyTitle{
  margin:0;
  font-size:27px; font-weight:900; font-style:italic; letter-spacing:3px;
  background:linear-gradient(100deg, var(--gold), var(--coral) 75%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lobbyTagline{ margin:-6px 0 6px; font-size:12.5px; color:var(--ink-dim); }

.orDivider{
  display:flex; align-items:center; gap:10px;
  margin:4px 0 0;
  color:var(--ink-dim); font-size:10.5px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
}
.orDivider::before, .orDivider::after{
  content:''; flex:1; height:1px; background:var(--edge);
}

.joinRow{ display:flex; gap:8px; }
.joinRow input{
  width:0; flex:1;
  text-transform:uppercase; letter-spacing:5px;
  font-weight:700; font-size:15px;
}
.joinRow button{ flex:none; }

#connectError{ margin:0; color:var(--bad); font-size:12.5px; min-height:1em; }

/* room screen */
.roomLabel{
  margin:0; font-size:10.5px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--ink-dim);
}
.codeChip{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 14px;
  background:rgba(4,24,34,.85);
  border:1px dashed rgba(255,210,63,.45); border-radius:12px;
}
.codeChip:hover{ background:rgba(4,24,34,.85); border-color:var(--gold); }
#roomCodeVal{
  font-family:ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size:28px; font-weight:800; letter-spacing:9px; text-indent:9px;
  color:var(--gold);
}
.copyHint{ font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim); }
.copyHint::after{ content:'copy'; }
.codeChip.copied{ border-color:var(--good); }
.codeChip.copied .copyHint{ color:var(--good); }
.codeChip.copied .copyHint::after{ content:'copied!'; }

#rosterList{
  list-style:none; margin:4px 0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
#rosterList li{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px;
  background:rgba(4,24,34,.55);
  border:1px solid var(--edge); border-radius:10px;
  font-size:13.5px; text-align:left;
}
#rosterList .avatar{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#04202c;
  background:var(--aqua);
}
#rosterList li:nth-child(4n+2) .avatar{ background:var(--gold); }
#rosterList li:nth-child(4n+3) .avatar{ background:var(--coral); }
#rosterList li:nth-child(4n+4) .avatar{ background:#b78ef7; }
#rosterList .pname{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rosterList .hostBadge{
  flex:none; font-size:9.5px; font-weight:800; letter-spacing:1px;
  color:var(--good); border:1px solid rgba(46,204,113,.5);
  padding:1px 7px; border-radius:20px;
}

#hostControls{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.fieldRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; color:var(--ink-dim);
}
.fieldRow input{ width:64px; padding:7px 8px; }
#waitingMsg, #waitingRestartMsg{ margin:0; color:var(--ink-dim); font-size:13px; }

/* the "Realistic water" toggle, styled as a switch */
.settingRow{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; color:var(--ink-dim); cursor:pointer;
  justify-content:center;
}
.settingRow:hover{ color:var(--ink); }
.settingRow input{
  appearance:none; -webkit-appearance:none;
  flex:none; width:36px; height:20px; margin:0;
  border-radius:20px; position:relative; cursor:pointer;
  background:#0a2433; border:1px solid var(--edge-strong);
  transition:background .2s, border-color .2s;
}
.settingRow input::after{
  content:''; position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:50%;
  background:#7695a5;
  transition:transform .2s, background .2s;
}
.settingRow input:checked{ background:rgba(47,193,238,.35); border-color:var(--aqua); }
.settingRow input:checked::after{ transform:translateX(16px); background:var(--aqua-strong); }

/* ---------- game over overlay ---------- */

#overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:20px; text-align:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(30,167,214,.35), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(255,210,63,.14), transparent 55%),
    rgba(4,18,26,.94);
  background-size:220% 220%, 220% 220%, 100% 100%;
  animation:overlayDrift 14s ease-in-out infinite alternate;
}
@keyframes overlayDrift{
  0%{ background-position:10% 0%, 90% 100%, 0 0; }
  100%{ background-position:60% 50%, 30% 40%, 0 0; }
}
#overlay h2{
  margin:0; font-size:30px; font-weight:900; font-style:italic; letter-spacing:1px;
  text-shadow:0 3px 12px rgba(0,0,0,.5);
}
#finalScore{
  display:flex; flex-direction:column; gap:2px;
  font-size:58px; line-height:1; font-weight:900;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  text-shadow:0 4px 18px rgba(255,210,63,.35), 0 2px 6px rgba(0,0,0,.5);
}
#finalScore::before{
  content:'Final score';
  font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink-dim); text-shadow:none;
}
#overlay p{ margin:0; max-width:520px; line-height:1.55; font-size:13.5px; color:var(--ink-dim); }
#overlay .btnPrimary{ padding:11px 26px; font-size:14px; }

/* ---------- help overlay ---------- */

#helpOverlay{
  position:absolute; inset:0; z-index:30;
  background:rgba(3,14,20,.78);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
#helpPanel{
  position:relative;
  background:var(--panel); border:1px solid var(--edge); border-radius:16px;
  padding:26px 30px 22px;
  max-width:620px; width:100%; max-height:92%; overflow-y:auto;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
#helpPanel::-webkit-scrollbar{ width:8px; }
#helpPanel::-webkit-scrollbar-thumb{ background:var(--panel-3); border-radius:4px; }
#helpPanel h2{ margin:0 0 4px; font-size:21px; font-weight:800; }
.helpIntro{ margin:0 0 16px; font-size:12.5px; color:var(--ink-dim); }
#helpPanel h3{
  margin:18px 0 8px; font-size:11px; font-weight:800;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--aqua);
}
#helpPanel h3:first-of-type{ margin-top:0; }
.helpRow{
  display:grid; grid-template-columns:132px 1fr; gap:10px;
  align-items:baseline;
  padding:4px 0; font-size:13px; line-height:1.45;
}
.helpRow > span:last-child{ color:#c3dbe7; }
.helpTip{
  margin:3px 0; padding-left:14px; position:relative;
  font-size:12.5px; line-height:1.5; color:var(--ink-dim);
}
.helpTip::before{ content:'—'; position:absolute; left:0; color:var(--aqua); }
#helpCloseBtn{
  position:absolute; top:10px; right:12px;
  background:none; border:none; box-shadow:none;
  color:var(--ink-dim); font-size:22px; line-height:1;
  padding:4px 8px; cursor:pointer;
}
#helpCloseBtn:hover{ background:none; border:none; color:var(--coral); }
#helpPanel .settingRow{
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--edge);
}

/* ---------- small screens ---------- */

@media (max-width:820px){
  body{ padding:8px; }
  #gameShell{ width:100%; }
  #brandName{ display:none; }
  #hud{ gap:12px; }
  .stat{ min-width:0; }
  .statZone, .hideSm{ display:none; }
}