/* BEACH BOLT — shell / UI. The game itself renders on <canvas>. */
:root{
  --sun:#ffd15c; --sun-hot:#ff8a3d; --sea:#1fb6c9; --sea-deep:#0a6b8a;
  --sand:#f4dCA8; --ink:#0a1830; --paper:#fff7e8;
  --ring:#ffd94a; --ring-edge:#c9922a;
  --font: "Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#05101f;font-family:var(--font);color:var(--paper);
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
button,input{touch-action:manipulation}
.pname{-webkit-user-select:text;user-select:text}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
canvas#game{display:block;width:100%;height:100%;touch-action:none}
.hidden{display:none !important}

/* ---------- overlays ---------- */
.overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  text-align:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 12%, rgba(10,24,48,.28), rgba(6,16,31,.86) 70%);
  backdrop-filter:blur(2px);
  animation:fade .45s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.brand{display:flex;flex-direction:column;align-items:center;gap:6px;animation:floaty 3.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.kicker{font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:#ffe6a8;opacity:.85;padding-left:.42em}
h1{
  font-size:clamp(56px,15vw,120px);line-height:.86;font-weight:800;letter-spacing:-.02em;
  color:#fff;text-shadow:0 6px 0 rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.45);
}
h1 span{display:block;background:linear-gradient(180deg,var(--sun) 0%,var(--sun-hot) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tag{margin-top:10px;font-size:clamp(14px,3.6vw,19px);color:#cfe9f2;font-weight:500;letter-spacing:.02em}

.cta{
  font-family:var(--font);font-weight:700;font-size:clamp(17px,4.6vw,22px);letter-spacing:.12em;
  color:var(--ink);background:linear-gradient(180deg,#ffe27a,var(--sun-hot));
  border:none;border-radius:999px;padding:18px 44px;cursor:pointer;
  box-shadow:0 8px 0 #b5561f, 0 16px 30px rgba(255,138,61,.35);
  transition:transform .08s ease, box-shadow .08s ease;
}
.cta:active{transform:translateY(5px);box-shadow:0 3px 0 #b5561f,0 8px 18px rgba(255,138,61,.3)}

.controls-hint{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:13px;color:#bcd6e2}
.controls-hint kbd{
  display:inline-block;min-width:22px;padding:2px 7px;margin:0 1px;border-radius:6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-family:var(--font);font-size:12px}
.credit{position:absolute;bottom:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#6b8299}
.sound-toggle{
  font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:#bcd6e2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:9px 20px;cursor:pointer;transition:all .12s ease;
}
.sound-toggle:active{transform:translateY(1px)}

/* game over card */
.go-card{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  background:rgba(10,24,48,.72);border:1px solid rgba(255,255,255,.12);
  border-radius:26px;padding:34px 30px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:pop .4s cubic-bezier(.2,1.3,.4,1);
}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.go-title{font-size:clamp(30px,8vw,50px);font-weight:800;color:#fff;letter-spacing:.02em;
  text-shadow:0 4px 0 var(--sun-hot)}
.go-stats{display:flex;gap:26px}
.go-stats>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.go-stats span{font-size:34px;font-weight:800;color:var(--sun)}
.go-stats small{font-size:11px;letter-spacing:.18em;color:#9fb6c4}
.go-best{font-size:14px;font-weight:600;color:#ffe6a8;min-height:18px;letter-spacing:.04em}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none;padding:16px 18px;
  font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.hud-left{position:absolute;top:16px;left:18px;display:flex;flex-direction:column;gap:4px}
.hud-right{position:absolute;top:16px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ring-count{display:flex;align-items:center;gap:8px;font-size:30px;color:#fff}
.ring-icon{width:22px;height:22px;border-radius:50%;border:5px solid var(--ring);
  box-shadow:0 0 10px rgba(255,217,74,.7);background:radial-gradient(circle,#fff5cf,transparent 60%)}
.score-row,.best-row{font-size:13px;letter-spacing:.14em;color:#cfe9f2}
.score-row b,.best-row b{color:#fff;font-size:17px;margin-left:4px}
.icon-btn{pointer-events:auto;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(10,24,48,.5);color:#ffe6a8;font-size:16px;cursor:pointer}
#speedWrap{position:absolute;left:18px;right:18px;bottom:calc(16px + env(safe-area-inset-bottom,0px));height:6px;border-radius:6px;
  background:rgba(255,255,255,.14);overflow:hidden}
#speedFill{height:100%;width:0%;border-radius:6px;
  background:linear-gradient(90deg,var(--sea),var(--sun),var(--sun-hot));transition:width .18s ease}

.touch-only{display:none}
@media (pointer:coarse){.touch-only{display:inline}.controls-hint kbd{display:none}}

/* ---------- mode select ---------- */
.mode-btns{display:flex;flex-direction:column;gap:14px;align-items:center}
.cta-alt{background:linear-gradient(180deg,#7fe0e8,#0aa6d6);box-shadow:0 8px 0 #076a8c,0 16px 30px rgba(31,182,201,.35)}
.cta-alt:active{box-shadow:0 3px 0 #076a8c,0 8px 18px rgba(31,182,201,.3)}
.cta-alt em{font-style:normal;font-weight:800;opacity:.7;font-size:.7em;letter-spacing:.05em;margin-left:6px}
.cta-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.28);padding:16px 30px}
.cta-ghost:active{transform:translateY(2px);box-shadow:none}
.tap-hint{font-weight:700;color:#ffe6a8}

/* ---------- lobby ---------- */
.lobby-head{text-align:center;display:flex;flex-direction:column;gap:4px}
.lobby-head h2{font-size:clamp(26px,7vw,42px);font-weight:800;color:#fff;letter-spacing:.01em}
.lobby-head p{font-size:14px;color:#cfe9f2}
.pcards{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.pcard{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:rgba(10,24,48,.6);border:1px solid rgba(255,255,255,.14);
  border-radius:22px;padding:20px 18px;min-width:170px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.pcard[data-p="2"]{border-color:rgba(127,224,232,.4)}
.pnum{font-size:12px;letter-spacing:.2em;color:#9fb6c4;font-weight:700}
.pname{
  width:150px;text-align:center;font-family:var(--font);font-weight:800;font-size:20px;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:8px 6px;text-transform:uppercase;
}
.pname:focus{outline:2px solid var(--sun);background:rgba(255,255,255,.14)}
.difftoggle{display:flex;background:rgba(0,0,0,.3);border-radius:999px;padding:4px;gap:2px}
.diffbtn{
  font-family:var(--font);font-weight:800;font-size:13px;letter-spacing:.06em;
  color:#9fb6c4;background:transparent;border:none;border-radius:999px;padding:8px 16px;cursor:pointer;
  transition:all .12s ease;
}
.diffbtn.is-on{color:var(--ink);background:linear-gradient(180deg,#ffe27a,var(--sun-hot));box-shadow:0 2px 8px rgba(255,138,61,.4)}
.difftoggle[data-p="2"] .diffbtn.is-on{background:linear-gradient(180deg,#a5eef4,var(--sea))}
.vs-dot{font-size:20px;font-weight:800;color:#ffe6a8;opacity:.8}
.diff-legend{font-size:12px;color:#bcd6e2;text-align:center;max-width:340px}
.diff-legend b{color:#fff}
.lobby-btns{display:flex;gap:12px;align-items:center}
.soon-note{position:absolute;bottom:16px;font-size:11px;letter-spacing:.06em;color:#6b8299;text-align:center;padding:0 20px}

/* ---------- turn intro ---------- */
.turn-card{display:flex;flex-direction:column;align-items:center;gap:12px;animation:pop .35s cubic-bezier(.2,1.3,.4,1)}
.turn-num{font-size:13px;letter-spacing:.24em;color:#9fb6c4;font-weight:700}
.turn-name{font-size:clamp(40px,11vw,74px);font-weight:800;color:#fff;line-height:1;text-shadow:0 4px 0 var(--sun-hot)}
.turn-diff{font-size:13px;letter-spacing:.16em;font-weight:700;color:var(--ink);background:var(--sun);padding:5px 14px;border-radius:999px}
.turn-hint{font-size:13px;color:#bcd6e2;margin-top:4px}

/* ---------- results ---------- */
.res-card{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  background:rgba(10,24,48,.72);border:1px solid rgba(255,255,255,.12);
  border-radius:26px;padding:30px 26px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:pop .4s cubic-bezier(.2,1.3,.4,1);min-width:300px;
}
.res-winner{font-size:clamp(28px,8vw,46px);font-weight:800;color:var(--sun);text-shadow:0 4px 0 var(--sun-hot);text-align:center}
.res-rows{display:flex;flex-direction:column;gap:10px;width:100%}
.res-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.06);border-radius:16px;padding:12px 16px;
}
.res-row.win{background:rgba(255,209,92,.16);border:1px solid rgba(255,209,92,.5)}
.res-name{font-weight:800;font-size:18px;color:#fff;text-transform:uppercase;flex:1;text-align:left}
.res-score,.res-rings{display:flex;flex-direction:column;align-items:center;min-width:56px}
.res-score b,.res-rings b{font-size:22px;color:var(--sun);font-variant-numeric:tabular-nums}
.res-score small,.res-rings small{font-size:10px;letter-spacing:.12em;color:#9fb6c4}
.res-btns{display:flex;gap:12px}

/* ---------- versus HUD timer ---------- */
#timerWrap{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(10,24,48,.55);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:6px 20px;
}
#timerWrap #playerTag{font-size:11px;letter-spacing:.14em;color:#ffe6a8;font-weight:700}
#timerWrap #timerVal{font-size:30px;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
#timerWrap.low #timerVal{color:#ff6a5a}