:root{
  font-family:Inter,system-ui,sans-serif;
  color:#24314e;
  background:#f5f8ff;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(circle at 15% 8%, rgba(162,232,255,.72), transparent 28%),
    radial-gradient(circle at 88% 76%, rgba(255,208,229,.7), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255,242,192,.45), transparent 34%),
    linear-gradient(180deg,#f7fbff 0%,#eef6ff 46%,#f8fbff 100%);
}
button,select{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ff9b33;outline-offset:3px}
[hidden]{display:none!important}

.heist{
  width:calc(100% - 12px);
  min-height:calc(100dvh - var(--games-header-height,80px));
  margin:auto;
  padding:1px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.panel{
  width:min(1100px,100%);
  min-height:min(700px,calc(100dvh - var(--games-header-height,80px) - 20px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:auto;
  padding:clamp(22px,3.5vw,38px);
  border:1px solid #d8e5f6;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,252,255,.98));
  box-shadow:0 20px 60px rgba(36,49,78,.12);
  text-align:center;
  backdrop-filter:blur(6px);
}

.setup.panel{
  position:relative;
  justify-content:flex-start;
  height:calc(100dvh - var(--games-header-height,80px) - 12px);
  min-height:0;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,252,247,.98)),
    linear-gradient(140deg,rgba(255,207,153,.16),rgba(255,255,255,0) 36%),
    linear-gradient(220deg,rgba(126,212,255,.14),rgba(255,255,255,0) 32%);
}
.setup.panel > *:not(.setup-balloons){position:relative;z-index:1}
.setup-top{display:flex;flex-direction:column;gap:clamp(10px,1.5vh,15px)}
.settings-rows{margin-top:4px}
.setting-group{display:grid;gap:10px;text-align:left}
.setting-selection{grid-template-columns:minmax(0,1fr);width:100%;max-width:420px;margin-inline:auto}
.setting-match,.setting-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.setting-group label{min-width:0;font-size:clamp(16px,1.5vw,20px);font-weight:750;color:#40516e}
.setting-group select{
  display:block;
  width:100%;
  min-height:56px;
  font-size:20px;
  font-weight:700;
  margin-top:0;
  border:1px solid #c9d8ed;
  border-radius:16px;
  padding:0 14px;
  background:rgba(255,255,255,.93);
  color:#263650;
  box-shadow:0 6px 18px rgba(36,49,78,.08);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
/* Native dropdown rows stay compact; the closed grade selector keeps its full height. */
#grade option{font-size:15px;padding:3px 8px;line-height:1.15}
.setting-group select:hover{border-color:#84a8de;box-shadow:0 10px 20px rgba(36,49,78,.11)}
.setting-group select:focus-visible{border-color:#3474d4;box-shadow:0 0 0 3px rgba(52,116,212,.14),0 12px 20px rgba(36,49,78,.12)}
.setup-bottom{flex-shrink:0;padding-top:12px;padding-bottom:7px}
.hint{font-size:.96rem;line-height:1.5;color:#61718a;margin:8px auto 16px;max-width:620px}
.primary,.secondary{
  font-size:1.08rem;
  border:0;
  border-radius:16px;
  min-height:48px;
  padding:11px 23px;
  font-weight:900;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.primary{
  background:linear-gradient(180deg,#ffd56f 0%,#ffbf45 100%);
  color:#25314a;
  box-shadow:0 5px 0 #dc9b32,0 16px 20px rgba(255,189,86,.28);
}
.setup .primary{width:100%;min-width:0;min-height:56px;font-size:1.14rem;border-radius:16px}
.secondary{
  background:linear-gradient(180deg,#f4f8ff,#e7efff);
  color:#314c7a;
  box-shadow:0 10px 18px rgba(72,105,173,.11);
}
.primary:hover,.secondary:hover{transform:translateY(-1px);filter:saturate(1.03)}
.primary:active,.secondary:active{transform:translateY(3px)}
.primary:active{box-shadow:0 2px 0 #df9d37,0 8px 14px rgba(255,189,86,.2)}
.error{color:#bc2942;font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.designer{position:fixed;bottom:9px;right:12px;z-index:8;font-size:11px;font-weight:700;color:#70819c;text-decoration:none;opacity:.7}

.setup-balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.setup-balloon{
  position:absolute;
  left:var(--balloon-left,0%);
  top:var(--balloon-top-pos,0%);
  width:var(--balloon-size,160px);
  aspect-ratio:1/1.08;
  border-radius:50% 50% 48% 48%;
  opacity:var(--balloon-opacity,.22);
  transform:rotate(var(--balloon-rotate,0deg));
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.82) 0 10%, rgba(255,255,255,.28) 11%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg,var(--balloon-top),var(--balloon-mid) 62%,var(--balloon-bottom));
  border:2px solid rgba(255,255,255,.48);
  box-shadow:inset -18px -16px 28px rgba(45,72,107,.12), inset 12px 12px 20px rgba(255,255,255,.28);
  filter:saturate(1.03);
}
.setup-balloon::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16px;
  width:18px;
  height:18px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--balloon-mid),var(--balloon-bottom));
  clip-path:polygon(50% 100%,0 0,100% 0);
}
.setup-balloon::after{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 2px);
  width:2px;
  height:var(--balloon-string,70px);
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(112,140,176,.45),rgba(112,140,176,0));
}

.unit-choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  flex:1 1 0;
  min-height:68px;
  gap:9px;
  padding:4px;
  overflow:auto;
  margin:8px 0 6px;
}
.unit-choice{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:62px;
  padding:10px 12px;
  border:1px solid rgba(196,210,231,.95);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 18px rgba(36,49,78,.08);
  cursor:pointer;
  text-align:left;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.unit-choice:hover{transform:translateY(-1px);border-color:#8fb5ea;box-shadow:0 14px 20px rgba(36,49,78,.11)}
.unit-choice.selected{border-color:#2296d2;background:linear-gradient(180deg,#edf8ff,#e0f2ff);box-shadow:0 16px 22px rgba(34,150,210,.14)}
.unit-choice input{flex:none;width:20px;height:20px;margin:0;accent-color:#168ac6}
.unit-choice strong{font-size:clamp(16px,1.4vw,20px);white-space:nowrap;color:#243d63}
.unit-choice span{margin-left:auto;font-size:clamp(14px,1.15vw,18px);font-weight:700;color:#50627f;text-align:right;overflow-wrap:anywhere}

.game{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:calc(100dvh - var(--games-header-height,80px) - 2px);
  min-height:0;
}
.timer{height:10px;width:100%;margin:0;background:#dbe5f4;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(46,71,108,.14)}
.timer>div{height:100%;background:linear-gradient(90deg,#4cc9ab,#ffbd56 70%,#ff8a7a);width:100%}
.timer-left>div{margin-left:auto}
.timer-right>div{margin-right:auto}
.target{
  position:relative;
  z-index:5;
  width:100%;
  order:2;
  text-align:center;
  border:1px solid rgba(216,229,246,.9);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.98));
  padding:10px 16px 14px;
  box-shadow:0 12px 30px rgba(24,60,120,.12);
  pointer-events:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,max-content) minmax(0,1fr);
  align-items:center;
  gap:8px 18px;
}
.target::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(126,212,255,.12),transparent 28%,transparent 72%,rgba(255,189,86,.1));
  pointer-events:none;
}
.target #roundLabel{position:relative;font-size:clamp(.9rem,1.5vw,1.08rem);font-weight:900;color:#2455ad;letter-spacing:.02em;margin-bottom:0;white-space:nowrap;grid-column:1/-1;text-align:center}
.target .target-caption{display:none}
.target strong{position:relative;display:block;font-size:clamp(1.34rem,3vw,2rem);font-weight:900;text-align:center;grid-column:2;grid-row:2;line-height:1.16;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:clip;color:#274d9a;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.target .timer-left{grid-column:1;grid-row:2}
.target .timer-right{grid-column:3;grid-row:2}

.arena{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:space-between;gap:clamp(20px,4vw,38px);flex:1;min-height:0}
.game.single-player .arena{grid-template-columns:minmax(0,1fr)}
.game.single-player .arena .p2{display:none}
.lane{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:0;
  border:2px solid;
  border-radius:28px;
  isolation:isolate;
  box-shadow:0 18px 36px rgba(48,72,112,.14);
}
.lane::before,
.lane::after{content:"";position:absolute;pointer-events:none;inset:auto}
.lane::before{
  left:-8%; right:-8%; top:46px; bottom:-12px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.7) 0 18%, transparent 19%),
    radial-gradient(circle at 76% 22%, rgba(255,255,255,.66) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 62%, rgba(255,255,255,.52) 0 22%, transparent 23%);
  opacity:.5;
}
.lane::after{
  width:180px;height:180px;border-radius:50%;top:-42px;right:-44px;filter:blur(2px);opacity:.28;
}
.p1{border-color:#77caef;background:linear-gradient(180deg,#eefaff 0%,#ffffff 32%,#f7fcff 100%)}
.p1::after{background:radial-gradient(circle,#90e2ff 0%,rgba(144,226,255,.12) 52%,rgba(144,226,255,0) 70%)}
.p2{border-color:#f2b1ce;background:linear-gradient(180deg,#fff4f9 0%,#ffffff 32%,#fffbfd 100%)}
.p2::after{background:radial-gradient(circle,#ffc1dd 0%,rgba(255,193,221,.13) 52%,rgba(255,193,221,0) 70%)}
.player-heading{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  font-weight:900;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 18px rgba(37,59,93,.08);
}
.player-heading span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;pointer-events:none;color:#465d7e;letter-spacing:.04em}
.p1 .player-heading{justify-content:flex-end}
.p2 .player-heading{justify-content:flex-start}
.player-heading strong{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(255,255,255,.75)}
.p1 .player-heading strong{color:#1686b1}
.p2 .player-heading strong{color:#c64786}

.bubbles{position:absolute;inset:60px 0 0;overflow:hidden}
.bubble{
  position:absolute;
  left:var(--x);
  bottom:0;
  width:var(--size);
  height:var(--size);
  display:grid;
  place-items:center;
  padding:12px 12px 18px;
  border:2px solid rgba(255,255,255,.95);
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.38) 10%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 36% 32%, rgba(255,255,255,.35), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 52% 62%, var(--bubble-light) 0%, var(--bubble-mid) 64%, var(--bubble-dark) 100%);
  box-shadow:
    inset -14px -18px 24px rgba(67,89,127,.18),
    inset 9px 12px 18px rgba(255,255,255,.3),
    0 18px 28px rgba(67,89,127,.18);
  color:#1f385d;
  font-size:clamp(.9rem,1.85vw,1.32rem);
  font-weight:900;
  line-height:1.13;
  overflow-wrap:normal;
  white-space:pre-line;
  word-break:normal;
  text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
  animation:rise var(--duration) linear forwards;
  animation-delay:var(--delay);
  animation-fill-mode:both;
  animation-play-state:paused;
  touch-action:manipulation;
  overflow:visible;
}
.bubble::before{
  content:"";
  position:absolute;
  left:19%;
  top:17%;
  width:30%;
  height:24%;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,0));
  transform:rotate(-22deg);
  pointer-events:none;
}
.bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  width:16px;
  height:18px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--bubble-mid),var(--bubble-dark));
  clip-path:polygon(50% 100%,0 0,100% 0);
  filter:drop-shadow(0 2px 2px rgba(67,89,127,.2));
  pointer-events:none;
}
.bubble:hover{filter:saturate(1.05) brightness(1.02)}
.bubble.popped{animation:none;opacity:0;pointer-events:none;transition:opacity .14s}
.bubble:disabled{cursor:default}

.bubble--sky{--bubble-light:#d8f5ff;--bubble-mid:#9bdeff;--bubble-dark:#59b0ef}
.bubble--mint{--bubble-light:#dcffef;--bubble-mid:#9ef0ca;--bubble-dark:#59cf9d}
.bubble--violet{--bubble-light:#eddcff;--bubble-mid:#c8a7ff;--bubble-dark:#9171ee}
.bubble--gold{--bubble-light:#fff0c7;--bubble-mid:#ffd885;--bubble-dark:#ffb55d}
.bubble--rose{--bubble-light:#ffdce9;--bubble-mid:#ffb3cd;--bubble-dark:#ef7ea7}
.bubble--coral{--bubble-light:#ffe0d3;--bubble-mid:#ffb08c;--bubble-dark:#ff866c}

.lock{
  position:absolute;
  inset:60px 0 0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(8px);
  color:#b43b6a;
  font-weight:1000;
  font-size:1.4rem;
  letter-spacing:.04em;
}
.lane:has(.lock:not([hidden])) .bubbles{filter:blur(6px);pointer-events:none}
.game.is-paused{filter:blur(7px);pointer-events:none;user-select:none}

.modal{position:fixed;inset:0;z-index:20;background:rgba(23,38,66,.56);display:grid;place-items:center;padding:16px}
.modal-card{
  position:relative;
  width:min(600px,100%);
  max-height:90dvh;
  overflow:auto;
  padding:clamp(20px,4vw,36px);
  border-radius:24px;
  border:1px solid rgba(219,230,247,.9);
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:0 20px 80px rgba(16,28,60,.25);
  text-align:center;
}
.modal-card h2{font-size:clamp(2rem,5.5vw,3.5rem);color:#2455ad;margin:0 0 18px}
.pause-instructions{text-align:left;color:#34445f;font-size:clamp(.94rem,1.8vw,1.08rem);line-height:1.45}
.pause-instructions>p{margin:0 0 12px}
.pause-instructions h3{margin:12px 0 8px;color:#2455ad;font-size:1.12rem}
.pause-instructions ul{list-style:none;margin:0 0 10px;padding:0;border:1px solid #dbe6f7;border-radius:14px;overflow:hidden}
.pause-instructions li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:#f8fbff}
.pause-instructions li+li{border-top:1px solid #dbe6f7}
.pause-instructions li strong{white-space:nowrap;color:#2455ad;font-variant-numeric:tabular-nums}
.pause-instructions .pause-note{margin:8px 0 0;font-size:.92em}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left}
.stats:has(> .stat-player:only-child){grid-template-columns:minmax(0,360px);justify-content:center}
.stat-player{border:2px solid #dbe6f7;border-radius:18px;padding:13px;background:linear-gradient(180deg,#ffffff,#f8fbff)}
.stat-player h3{font-size:clamp(1.2rem,2.5vw,1.65rem);margin:0 0 12px;color:#2857a3}
.stat-player p{margin:9px 0;font-size:clamp(1.05rem,2vw,1.35rem)}
.stat-player strong{font-variant-numeric:tabular-nums}
.result-card{width:min(760px,100%);overflow:hidden}
.result-card .primary,.result-card .secondary{font-size:clamp(1.05rem,2vw,1.3rem)}
.result-card>*:not(canvas){position:relative;z-index:1}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

@keyframes rise{
  from{transform:translate3d(0,calc(var(--size) + 16px + var(--offset,0px)),0)}
  to{transform:translate3d(0,calc(-1 * var(--travel) + var(--offset,0px)),0)}
}

@media(max-width:900px){
  .setting-match,.setting-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .arena{gap:16px}
}

@media(max-width:700px){
  .heist{width:calc(100% - 6px);padding:1px 0}
  .arena{grid-template-columns:minmax(0,1fr)}
  .arena .p2{display:none}
  .lane{border-width:2px;border-radius:18px}
  .player-heading{padding:9px 10px;font-size:.83rem}
  .bubbles,.lock{inset:47px 0 0}
  .bubble{font-size:clamp(.72rem,2.6vw,.96rem);padding:6px 6px 12px;line-height:1.08;will-change:transform}
  .bubble::after{bottom:-10px;width:12px;height:14px}
  .target{border-radius:16px;column-gap:8px;row-gap:4px;min-height:42px;padding:8px 10px 10px}
  .target .timer{height:4px}.target strong{font-size:clamp(1rem,4.5vw,1.4rem);line-height:1.08}.target #roundLabel{font-size:clamp(.7rem,2.8vw,.85rem)}
  .panel{margin:auto;padding:18px 13px}
  .setup.panel{padding:12px 11px}
  .setup .setup-top{gap:5px}
  .setup .settings-rows{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 7px;
    margin-top:1px;
  }
  .setup .settings-rows > .setting-group{display:contents}
  .setup #wordDirection{grid-column:1 / -1;grid-row:1}
  .setup #playerCount{grid-column:1;grid-row:2}
  .setup #difficulty{grid-column:2;grid-row:2}
  .setup #roundCount{grid-column:1;grid-row:3}
  .setup #bubbleCount{grid-column:2;grid-row:3}
  .setup #start{grid-column:1 / -1;grid-row:4}
  .setup .setting-group{gap:5px}
  .setup .setting-group select{padding:0 9px;min-height:44px;font-size:15px;border-radius:11px}
  .setup .primary{min-height:44px;padding:7px 10px;font-size:1rem;border-radius:11px}
  .setup .unit-choices{gap:4px;margin:3px 0;padding:2px}
  .setup .unit-choice{min-height:44px;padding:5px 9px;gap:6px}
  .setup .setup-bottom{padding-top:4px;padding-bottom:2px}
  .setting-group label{font-size:16px}
  .player-count-setting{display:block}.setting-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{gap:7px;grid-template-columns:minmax(0,1fr)}.stat-player{padding:9px}
  .modal{padding:6px;overflow:hidden}.modal-card{max-height:calc(100dvh - 12px);padding:12px 14px;border-radius:14px;overscroll-behavior:contain}.modal-card h2{font-size:clamp(1.4rem,5vw,2rem);margin-bottom:8px}.pause-instructions{font-size:.85rem;line-height:1.25}.pause-instructions>p{margin-bottom:7px}.pause-instructions h3{font-size:1rem;margin:8px 0 5px}.pause-instructions li{padding:5px 8px}.pause-instructions .pause-note{margin-top:5px}.modal-actions{gap:7px;margin-top:10px}.modal-actions .primary,.modal-actions .secondary{min-height:40px;padding:7px 13px;font-size:.92rem}
  .setup-balloon{opacity:calc(var(--balloon-opacity,.22) * .7)}
}

@media(max-width:600px){
  .unit-choices{grid-template-columns:1fr}
  .setup .unit-choice{min-height:42px;padding:5px 9px}
  .unit-choice strong{font-size:15px}
  .unit-choice span{font-size:13px}
}

@media(max-width:390px){.setting-group label{font-size:15px}.stat-player p{font-size:.95rem}}
@media(max-height:570px){.heist{padding-bottom:3px}}