:root{
  --water:#2a8f9e; --water2:#1d6f7c; --deep:#134f5a; --deepest:#0c3a43;
  --orange:#f28c28; --orange2:#c96a12; --teal:#26b4b0; --teal2:#178a87;
  --ink:#10333a; --paper:#fffaf0; --card:#fff; --muted:#5b6d70; --green:#2e9e5b;
  --quack:#ffd200; --quack2:#ff3d6f;
}
*{box-sizing:border-box}
html,body{margin:0;color:var(--ink);font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:12px 16px calc(40px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#e9f6f7 0,#d5eef0 55%,#c5e5e8 100%);overscroll-behavior:none}
a{color:var(--teal2)}
header{width:100%;max-width:520px;display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
h1{margin:0;font-size:30px;letter-spacing:-.5px;font-weight:900}
h1 a{color:inherit;text-decoration:none}
h1 span{color:var(--teal2)}
.tag{font-size:12px;color:var(--muted)}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:10px 14px;font-weight:700;color:#fff;background:var(--deep);transition:transform .12s ease,filter .12s ease;-webkit-tap-highlight-color:transparent}
button:active{transform:scale(.94)}
button.ghost{background:transparent;color:var(--deep);border:2px solid var(--deep)}
button.big{font-size:18px;padding:14px 22px;border-radius:16px}
button.go{background:var(--green)}
button:disabled{opacity:.4;cursor:default;transform:none}
input[type=text]{font:inherit;font-size:17px;padding:10px 12px;border-radius:12px;border:2px solid #bcd;width:100%;background:#fff}
.card{width:100%;max-width:520px;background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:0 4px 14px rgba(19,79,90,.12);margin-top:14px}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:6px 0;font-size:14px;line-height:1.45}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted);font-size:13px}
.hidden{display:none!important}

/* status */
.status{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px}
.who{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;min-width:0}
.who .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset -2px -3px 0 rgba(0,0,0,.18)}
.dot.A{background:var(--orange)} .dot.B{background:var(--teal)}
.players{display:flex;gap:12px;font-size:13px;color:var(--muted);align-items:center}
.players b{color:var(--ink)}
.players .me::after{content:" (you)";font-weight:400;color:var(--muted)}
.bag{font-size:13px;color:var(--muted);white-space:nowrap}

/* pond */
.pond{position:relative;width:100%;max-width:520px;border-radius:26px;padding:16px 10px 12px;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% -10%,#6cc6cf 0,var(--water) 40%,var(--water2) 80%,var(--deep) 100%);
  box-shadow:0 12px 30px rgba(19,79,90,.28), inset 0 0 0 4px rgba(255,255,255,.16)}
.pond.shake{animation:shake .5s ease-in-out}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,2px) rotate(-.6deg)}40%{transform:translate(5px,-2px) rotate(.5deg)}60%{transform:translate(-4px,1px)}80%{transform:translate(3px,-1px)}}
/* water: two drifting caustic layers plus a slow surface sheen */
.water{position:absolute;inset:-20%;pointer-events:none;z-index:0}
.water.c1{background:
  radial-gradient(ellipse 30% 18% at 20% 30%,rgba(255,255,255,.22),transparent 70%),
  radial-gradient(ellipse 26% 16% at 70% 60%,rgba(255,255,255,.18),transparent 70%),
  radial-gradient(ellipse 34% 20% at 45% 85%,rgba(255,255,255,.14),transparent 70%),
  radial-gradient(ellipse 22% 14% at 85% 20%,rgba(255,255,255,.16),transparent 70%);
  animation:drift1 14s ease-in-out infinite alternate;filter:blur(6px)}
.water.c2{background:
  radial-gradient(ellipse 24% 14% at 60% 25%,rgba(180,240,245,.20),transparent 70%),
  radial-gradient(ellipse 30% 18% at 25% 70%,rgba(180,240,245,.16),transparent 70%),
  radial-gradient(ellipse 20% 12% at 80% 80%,rgba(180,240,245,.18),transparent 70%);
  animation:drift2 19s ease-in-out infinite alternate;filter:blur(8px)}
.water.sheen{background:repeating-linear-gradient(172deg,transparent 0 26px,rgba(255,255,255,.055) 26px 30px);animation:sheen 9s linear infinite;opacity:.9}
@keyframes drift1{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(3%,3%) scale(1.06)}}
@keyframes drift2{from{transform:translate(3%,2%) rotate(0deg)}to{transform:translate(-3%,-3%) rotate(2deg)}}
@keyframes sheen{from{transform:translateY(0)}to{transform:translateY(30px)}}
.ring{position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.55);pointer-events:none;z-index:2;
  animation:ring 1.1s ease-out forwards}
.ring.soft{border-color:rgba(255,255,255,.28);animation:ring 2.5s ease-out forwards}
@keyframes ring{from{transform:scale(.3);opacity:.9}to{transform:scale(2.6);opacity:0}}
.lily{position:absolute;pointer-events:none;font-size:22px;opacity:.85;z-index:1}
.reeds{position:absolute;left:-6px;bottom:-4px;font-size:34px;opacity:.9;transform:scaleX(-1);pointer-events:none;z-index:1}
.reeds.r{left:auto;right:-6px;transform:none}

.grid{position:relative;display:grid;gap:6px;margin:0 auto;z-index:3;touch-action:none}
.col{display:grid;gap:6px;position:relative;border-radius:14px;padding:0 1px;transition:background .15s}
.col.hot{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.col.hot.boom{background:rgba(255,90,60,.25)}
.col .arrow{position:absolute;top:-16px;left:50%;transform:translateX(-50%);color:#fff;opacity:0;font-size:14px;transition:opacity .15s;pointer-events:none}
.col.hot .arrow{opacity:.95}
.cell{position:relative;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--deepest) 0,var(--deep) 62%,rgba(19,79,90,.55) 100%);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.08)}
.disc{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:clamp(18px,5.4vw,30px);color:#fff;font-family:Georgia,"Times New Roman",serif;
  text-shadow:0 2px 0 rgba(0,0,0,.25);box-shadow:inset -3px -5px 0 rgba(0,0,0,.18),0 3px 6px rgba(0,0,0,.35);will-change:transform}
.disc.A{background:radial-gradient(circle at 35% 30%,#ffb066,var(--orange) 55%,var(--orange2))}
.disc.B{background:radial-gradient(circle at 35% 30%,#7fe3df,var(--teal) 55%,var(--teal2))}
.disc img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.disc.drop{animation:drop var(--t,.55s) cubic-bezier(.34,1.56,.64,1) both}
@keyframes drop{0%{transform:translateY(var(--d))}70%{transform:translateY(0)}85%{transform:translateY(-6%)}100%{transform:translateY(0)}}
.disc.win{animation:none;box-shadow:0 0 0 4px var(--quack),0 0 18px var(--quack)}
.disc.blown{animation:blown .7s ease-in both;pointer-events:none}
@keyframes blown{to{transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(.4);opacity:0}}
.duck{position:absolute;inset:-8% 0 0 0;display:flex;align-items:flex-start;justify-content:center;font-size:clamp(30px,9vw,50px);
  pointer-events:none;z-index:5;animation:duckin .45s cubic-bezier(.34,1.56,.64,1) both,bob 1.6s ease-in-out infinite var(--del2,.5s)}
@keyframes duckin{0%{transform:translateX(-120vw) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6%) rotate(4deg)}}

/* bomb in flight and blast */
.bombfly{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:6;animation:drop var(--t,.6s) cubic-bezier(.4,1.2,.6,1) both}
.bombfly svg{width:78%;height:78%}
.blast{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;z-index:7;pointer-events:none;
  background:radial-gradient(circle,#fff 0,#ffd200 30%,#ff5a2e 60%,transparent 70%);animation:blast .6s ease-out forwards}
@keyframes blast{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(28);opacity:0}}
.flash{position:fixed;inset:0;background:#fff;z-index:40;pointer-events:none;animation:flash .35s ease-out forwards}
@keyframes flash{from{opacity:.85}to{opacity:0}}

/* rack */
.rackwrap{width:100%;max-width:520px;margin-top:14px}
.rack{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:74px;padding:10px;border-radius:18px;background:var(--paper);box-shadow:0 4px 14px rgba(19,79,90,.15);position:relative}
.rack.off{opacity:.55}
.tile{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;color:#fff;font-family:Georgia,serif;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;position:relative;
  box-shadow:inset -3px -5px 0 rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.2);transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,opacity .2s}
.tile.A{background:radial-gradient(circle at 35% 30%,#ffb066,var(--orange) 55%,var(--orange2))}
.tile.B{background:radial-gradient(circle at 35% 30%,#7fe3df,var(--teal) 55%,var(--teal2))}
.tile img{width:70%;height:70%;object-fit:contain;pointer-events:none}
.tile.sel{transform:translateY(-10px) scale(1.12);box-shadow:0 0 0 4px var(--quack),0 8px 14px rgba(0,0,0,.3)}
.tile.lift{opacity:.25}
.tile.new{animation:tumble .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tumble{from{transform:translateY(-40px) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
.dragghost{position:fixed;left:0;top:0;width:60px;height:60px;border-radius:50%;pointer-events:none;z-index:100;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:28px;color:#fff;font-family:Georgia,serif;box-shadow:0 10px 20px rgba(0,0,0,.35);transform:translate(-50%,-60%) scale(1.15)}
.dragghost img,.dragghost svg{width:72%;height:72%}
.hint{font-size:13px;color:var(--muted);text-align:center;margin:8px 0 0;min-height:18px}
.hint.warn{color:#b3411f;font-weight:700}
.controls{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;align-items:center}

/* the bomb button */
.bombbtn{background:none;padding:2px;border-radius:50%;width:66px;height:66px;position:relative;touch-action:none;cursor:grab}
.bombbtn svg{width:100%;height:100%;overflow:visible}
.bombbtn .spark{transform-origin:50px 8px;animation:fizz .18s linear infinite alternate}
@keyframes fizz{from{transform:scale(.7) rotate(-15deg);opacity:.7}to{transform:scale(1.2) rotate(15deg);opacity:1}}
.bombbtn.sel{filter:drop-shadow(0 0 8px var(--quack2))}
.bombbtn.sel svg{animation:wiggle .25s ease-in-out infinite alternate}
@keyframes wiggle{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.bombbtn.used{opacity:.3;filter:grayscale(1);cursor:default}
.bombbtn.used .spark{display:none}
.bombtxt{font-size:11px;font-weight:800;color:var(--muted);text-align:center;margin-top:-4px}

/* toasts, last move */
.last{width:100%;max-width:520px;text-align:center;font-size:14px;color:var(--ink);margin-top:10px;min-height:20px}
.last b{font-weight:800}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;z-index:90;box-shadow:0 6px 20px rgba(0,0,0,.3);animation:toastin .25s cubic-bezier(.34,1.56,.64,1) both;max-width:90vw;text-align:center}
.toast.warn{background:#b3411f}
@keyframes toastin{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* share panel */
.linkbox{display:flex;gap:8px;align-items:center;background:#f1f6f7;border-radius:12px;padding:8px 10px;font-family:ui-monospace,monospace;font-size:13px;word-break:break-all}
.linkbox span{flex:1}

/* game list */
.games{list-style:none;margin:0;padding:0}
.games li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid #e6eeef;gap:10px}
.games li:first-child{border-top:0}
.games a{font-weight:800;text-decoration:none;color:var(--ink)}
.pill{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:#e6eeef;color:var(--muted);white-space:nowrap}
.pill.go{background:var(--green);color:#fff}
.pill.win{background:var(--quack);color:var(--ink)}

/* QUACK */
.quack{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60;pointer-events:none}
.quack.on{display:flex}
.quack .dots{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,61,111,.55) 1.6px,transparent 2px) 0 0/14px 14px;animation:fadein .3s both}
.quack.settle .dots{animation:none;opacity:0;transition:opacity .5s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.quack .bw{transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.quack.settle .bw{transform:scale(.5) translateY(46vh)}
.burst{position:relative;width:min(88vw,460px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{0%{transform:scale(0) rotate(-25deg)}100%{transform:scale(1) rotate(-6deg)}}
.burst svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 0 rgba(0,0,0,.35))}
.burst .word{position:relative;font:900 clamp(56px,17vw,110px)/1 Impact,"Arial Black","Helvetica Neue",sans-serif;color:var(--quack2);-webkit-text-stroke:3px var(--ink);text-shadow:6px 6px 0 var(--ink);letter-spacing:2px;transform:rotate(-6deg)}
.burst .sub{position:absolute;bottom:14%;font:800 18px/1.2 -apple-system,sans-serif;color:var(--ink);background:#fff;padding:6px 12px;border-radius:999px;border:3px solid var(--ink);transform:rotate(-6deg);max-width:80%;text-align:center}
.burst.lose .word{color:#6b7c80}

details.card{padding:10px 16px}
details.card summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between}
details.card summary::after{content:"+";font-weight:900}
details.card[open] summary::after{content:"–"}

/* game on! */
.status.flash-on .who{animation:flashon .5s ease-in-out 4}
@keyframes flashon{50%{color:var(--green);transform:scale(1.06)}}
.games li.go a{color:var(--green)}
.btnlink{display:inline-block;text-decoration:none;color:#fff;background:var(--green);font-weight:800;font-size:18px;padding:14px 22px;border-radius:16px}