/* Go Fish: a sunny lake-side table over the Handeware kit. */
:root{--sea:#1c7ed6;--deep:#1864ab;--teal:#12b886;--sun:#ffd43b;--sun-lo:#fab005;--coral:#ff8a3d;--ink-dark:#1b2a4a;--glow:#ffe066;--violet:#7048e8;color-scheme:light}
body{background:#1c7ed6;color:#fff}
.sea{background:
  radial-gradient(ellipse 60% 18% at 50% 104%,rgba(255,255,255,.18),transparent 70%),
  radial-gradient(circle at 10% 16%,rgba(255,255,255,.16) 0 6px,transparent 7px),
  radial-gradient(circle at 86% 10%,rgba(255,255,255,.22) 0 4px,transparent 5px),
  radial-gradient(circle at 78% 74%,rgba(255,255,255,.12) 0 9px,transparent 10px),
  radial-gradient(circle at 20% 86%,rgba(255,255,255,.14) 0 5px,transparent 6px),
  radial-gradient(circle at 94% 46%,rgba(255,255,255,.14) 0 6px,transparent 7px),
  linear-gradient(170deg,#38d9a9 0%,#1c7ed6 50%,#364fc7 100%)}

/* home */
.home{gap:.75em;padding:1em;align-items:center;justify-content:center;text-align:center}
.logo{position:relative;width:7em;height:4.8em;flex:none}
.lc{position:absolute;left:50%;top:0;width:3.1em;height:4.3em;margin-left:-1.55em;border-radius:.45em;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25);display:grid;place-items:center}
.lc b{font:900 2.4em/1 var(--sans);color:var(--c)}
.l1{--c:#e03131;transform:rotate(-14deg) translateX(-1.1em)}
.l2{--c:#364fc7;transform:rotate(10deg) translateX(.9em)}
.logo .fish{position:absolute;left:50%;bottom:-.3em;width:4.4em;margin-left:-1.6em;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));animation:swim 3s ease-in-out infinite}
@keyframes swim{50%{transform:translate(-.3em,-.2em) rotate(-4deg)}}
.home .title{font:900 clamp(2.6em,11vw,4.6em)/1.02 var(--sans);color:#fff;text-shadow:0 3px 0 #1864ab,0 8px 20px rgba(0,0,0,.3);letter-spacing:-.01em}
.tagline{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);font-weight:700;margin:0;font-size:1.1em}
.opts{display:flex;flex-direction:column;gap:.55em;align-items:center}
.choices{display:flex;gap:.45em;flex-wrap:wrap;justify-content:center}
.choice{min-height:48px;min-width:5.4em;font-weight:800;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.6);color:#fff;border-radius:999px;padding:.45em 1em}
.choice.num{min-width:3.2em}
.choices .lab{align-self:center;font-weight:800;margin-right:.2em}
.choice[aria-pressed=true]{background:var(--sun);color:var(--ink-dark);border-color:#fff}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.pill{font-family:var(--sans);font-weight:900;color:var(--ink-dark);background:linear-gradient(180deg,#fff3bf,var(--sun) 45%,var(--sun-lo));box-shadow:0 1px 0 #fff inset,0 4px 0 #e67700,0 8px 16px rgba(0,0,0,.25);min-height:50px}
.pill:active{box-shadow:0 1px 0 #fff inset,0 2px 0 #e67700,0 4px 10px rgba(0,0,0,.2)}
.pill.alt{background:linear-gradient(180deg,#e7f5ff,#a5d8ff 45%,#74c0fc);box-shadow:0 1px 0 #fff inset,0 4px 0 #1971c2,0 8px 16px rgba(0,0,0,.25)}
.links{display:flex;flex-wrap:wrap;justify-content:center}
.link{min-height:44px;color:#fff;font-weight:700}
.lock{color:#fff}
.lock a{color:var(--sun)}
.pill:focus-visible,.choice:focus-visible,.link:focus-visible,.row:focus-visible,.toggle:focus-visible,.jewel:focus-visible,.pond:focus-visible,.seat:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--violet)}
/* a short landscape screen: the title beside the buttons, never stacked */
@media (max-height:560px) and (min-width:540px){
  .home{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;align-content:center;justify-items:center;column-gap:1.6em;row-gap:.45em}
  .home .logo{grid-column:1;grid-row:1;font-size:.62em}
  .home .title{grid-column:1;grid-row:2;font-size:2.6em}
  .home .tagline{grid-column:1;grid-row:3;font-size:1em}
  .home .opts{grid-column:2;grid-row:1/3;gap:.4em}
  .home .go{grid-column:2;grid-row:3}
  .home .links{grid-column:1/3;grid-row:4}
}
@media (max-height:420px){
  html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:52px!important}
  .home .logo{display:none}
  .home{row-gap:.3em}
  .choice{min-height:44px;padding:.3em .9em}
  .pill{min-height:46px;padding:.5em 1.8em}
}
@media (max-height:700px) and (max-width:539px){.home{gap:.55em}.logo{font-size:.8em}}

/* bar */
#game .bar{padding:max(.5em,env(safe-area-inset-top)) .7em .25em}
.bar .jewel{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.7);box-shadow:none;width:2.8em;height:2.8em}
.bar .jewel svg{stroke:#fff}
.status{flex:1;text-align:center;font-weight:800;font-size:1.15em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.5);border-radius:999px;padding:.3em .9em;font-weight:800;white-space:nowrap;min-height:2.4em;display:flex;align-items:center}

/* the cards, drawn in code and moved by transform alone */
.felt{overflow:hidden;touch-action:manipulation}
.pc{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw)*1.4);padding:0;border:0;background:none;color:var(--sc);transform-origin:50% 50%;
  transition:transform .4s cubic-bezier(.2,.85,.25,1.08),opacity .25s,filter .2s;will-change:transform;cursor:default}
.pc.mine,.pc.inpond{cursor:pointer}
.pc .front,.pc .back{position:absolute;inset:0;border-radius:calc(var(--cw)*.1);overflow:hidden}
.pc .front{background:#fff;border:1px solid rgba(0,0,0,.14);box-shadow:0 3px 8px rgba(10,30,70,.3);transition:box-shadow .2s}
.pc .back{display:none;border:calc(var(--cw)*.05) solid #fff;box-shadow:0 3px 8px rgba(10,30,70,.3);
  background:radial-gradient(circle at 50% 50%,#ffd43b 0 13%,transparent 14%),
    radial-gradient(circle at 25% 25%,rgba(255,255,255,.35) 0 12%,transparent 14%) 0 0/calc(var(--cw)*.3) calc(var(--cw)*.3),
    linear-gradient(150deg,#ff8a3d,#f03e3e)}
.pc.down .front{display:none}
.pc.down .back{display:block}
.pc.hide{opacity:0;pointer-events:none}
.pc.booked{transition:transform .45s cubic-bezier(.2,.85,.25,1.08),opacity .25s .4s}
.pc svg{fill:currentColor;display:block}
.ix{position:absolute;left:4%;top:3%;width:28%;display:flex;flex-direction:column;align-items:center;line-height:1}
.ix b{font:900 calc(var(--cw)*.24)/1 var(--sans);letter-spacing:-.04em}
.ix b.ten{font-size:calc(var(--cw)*.2);letter-spacing:-.08em}
.ix svg{width:calc(var(--cw)*.16);height:calc(var(--cw)*.16);margin-top:calc(var(--cw)*.02)}
.ix.br{left:auto;top:auto;right:4%;bottom:3%;transform:rotate(180deg)}
.mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mid b{font:900 calc(var(--cw)*.6)/1 var(--sans);letter-spacing:-.04em}
.mid b.ten{font-size:calc(var(--cw)*.5);letter-spacing:-.08em}
.mid svg{width:calc(var(--cw)*.28);height:calc(var(--cw)*.28);margin-top:calc(var(--cw)*.03)}
.pc.ok .front{box-shadow:0 0 0 2px rgba(255,224,102,.9),0 0 calc(var(--cw)*.14) rgba(255,224,102,.8),0 6px 14px rgba(10,30,70,.35)}
.pc.sel .front{box-shadow:0 0 0 4px var(--glow),0 0 calc(var(--cw)*.3) var(--glow),0 8px 18px rgba(10,30,70,.4)}
.pc.fresh .front{animation:fresh 1.4s}
@keyframes fresh{0%,100%{box-shadow:0 3px 8px rgba(10,30,70,.3)}25%{box-shadow:0 0 0 5px #69db7c,0 0 26px #69db7c}}
.pc:focus-visible{outline:none}
.pc:focus-visible .front{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--violet)}
@media (hover:hover){.pc.ok:hover .front{transform:translateY(-4%)}}
.front.nudge{animation:nudge .34s}
@keyframes nudge{20%{transform:translateX(-7%)}40%{transform:translateX(6%)}60%{transform:translateX(-4%)}80%{transform:translateX(2%)}}
.felt.instant .pc{transition:none!important}

/* the pond */
.pond{position:absolute;z-index:50;border:0;padding:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(ellipse at 50% 40%,#74c0fc 0%,#339af0 45%,#1864ab 100%);
  box-shadow:0 0 0 5px rgba(255,255,255,.35),inset 0 6px 18px rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.2)}
.pond .ripple{position:absolute;inset:18% 22%;border-radius:50%;border:2px solid rgba(255,255,255,.35);animation:ripple 3.2s ease-out infinite;pointer-events:none}
@keyframes ripple{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.pondct{position:absolute;z-index:600;transform:translate(-50%,-50%);min-width:2em;height:2em;border-radius:999px;background:#fff;color:var(--ink-dark);font-weight:900;font-size:.9em;
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25);padding:0 .35em;pointer-events:none}
.pond.glow{animation:pglow 1.1s ease-in-out infinite}
@keyframes pglow{0%,100%{box-shadow:0 0 0 5px var(--glow),0 0 14px var(--glow)}50%{box-shadow:0 0 0 9px var(--glow),0 0 34px var(--glow)}}
.pond.empty{background:radial-gradient(ellipse,#a5d8ff,#74c0fc);opacity:.6}
.pond.shake{animation:nudge .4s}
.felt .pc.inpond{filter:saturate(.9)}

/* the friends */
.seat{position:absolute;z-index:500;transform:translateX(-50%);display:flex;align-items:center;gap:.35em;padding:.2em .6em .2em .25em;border-radius:999px;border:0;height:44px;
  background:rgba(255,255,255,.94);color:var(--ink-dark);box-shadow:0 3px 10px rgba(0,0,0,.2);font-weight:800;white-space:nowrap;transition:box-shadow .25s,transform .25s;cursor:default}
.seat .av{width:1.8em;height:1.8em;border-radius:50%;background:var(--avc);display:grid;place-items:center;font-size:1.05em}
.seat .ct{background:#ff8a3d;color:#fff;border-radius:999px;min-width:1.7em;padding:0 .35em;text-align:center}
.seat .bk{display:flex;align-items:center;gap:.2em;color:var(--deep)}
.seat .bk i{width:.8em;height:1.05em;border-radius:.15em;background:#fff;border:2px solid var(--deep);box-shadow:2px -2px 0 -0px #a5d8ff,4px -4px 0 #74c0fc}
.felt.wide .seat{font-size:.88em}
.seat.on{box-shadow:0 0 0 4px var(--glow),0 0 18px var(--glow);transform:translateX(-50%) scale(1.06)}
.seat.talk{animation:talk .5s ease-in-out infinite}
@keyframes talk{50%{transform:translateX(-50%) scale(1.08) rotate(-2deg)}}
.seat.pickme{cursor:pointer;box-shadow:0 0 0 4px #69db7c,0 0 20px #69db7c;animation:pick 1s ease-in-out infinite}
@keyframes pick{50%{transform:translateX(-50%) translateY(-3px)}}
.has{position:absolute;z-index:490;transform:translateX(-50%);display:flex;gap:.25em;align-items:center;background:rgba(27,42,74,.55);color:#fff;border-radius:999px;padding:.1em .5em;font-size:.8em;font-weight:700;white-space:nowrap}
.has b{background:#fff;color:var(--ink-dark);border-radius:.3em;padding:0 .3em;font-weight:900}

/* your books */
.mybooks{position:absolute;z-index:450;transform:translateX(-50%);display:flex;align-items:center;gap:.3em;white-space:nowrap;max-width:calc(100% - 12px)}
.mybooks .lab{font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.35);font-size:.9em}
.mybooks .num{background:var(--sun);color:var(--ink-dark);border-radius:999px;min-width:1.7em;height:1.7em;display:grid;place-items:center;font-weight:900;margin-right:.2em}
.bkc{height:calc(var(--bh) - 6px);min-width:calc((var(--bh) - 6px)*.72);border-radius:.3em;background:#fff;color:var(--ink-dark);font-weight:900;display:grid;place-items:center;
  box-shadow:2px -2px 0 #a5d8ff,4px -4px 0 #74c0fc,0 3px 6px rgba(0,0,0,.25);font-size:calc(var(--bh)*.42);padding:0 .15em;flex:none}
.bkc.pop{animation:bpop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bpop{0%{transform:scale(.2) rotate(-20deg)}100%{transform:scale(1)}}

/* speech */
.bubble{position:absolute;z-index:850;background:#fff;color:var(--ink-dark);font-weight:900;font-size:1.1em;line-height:1.2;padding:.45em .85em;border-radius:1em;
  box-shadow:0 6px 16px rgba(0,0,0,.25);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.bubble.show{opacity:1;animation:bub .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes bub{from{scale:.6}to{scale:1}}
.bubble.me{background:var(--sun)}

/* cards over the table */
.veil{background:rgba(10,30,70,.45);z-index:900}
.card{background:#fff;color:var(--ink-dark);border:0;box-shadow:0 0 0 5px rgba(255,255,255,.5),0 20px 50px rgba(0,0,0,.35)}
.card h2{font:900 1.6em/1.1 var(--sans);color:var(--sea)}
.card .x{border-color:#dee2e6;color:var(--ink-dark)}
.card .x svg{stroke:var(--ink-dark)}
.row{min-height:48px;color:var(--ink-dark);background:#e7f5ff;border-color:#d0ebff}
.row small{color:#5c5f66}
.card .link{color:var(--sea)}
.note{color:#5c5f66}
.stats{color:#5c5f66}
.stats b{color:var(--ink-dark);font:900 1.6em/1.1 var(--sans)}
.stats.four{gap:1.2em}
.toggle{background:#ced4da;border-color:#adb5bd}
.toggle::after{background:#fff}
.toggle[aria-pressed=true]{background:#40c057}
.toggle[aria-pressed=true]::after{background:#fff}
.how{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:.35em}
.how .keys{color:#5c5f66;font-size:.9em}
.lvs{display:flex;justify-content:center;gap:.8em;color:#868e96;font-weight:700}
.lv.done{color:#2b8a3e}
.big{font-size:2.6em;text-align:center;margin:0;line-height:1.1}
.results.won h2{font-size:2.1em;color:#f76707}
.results .actions .pill{min-width:10em}
.menu{display:grid;grid-template-columns:1fr;gap:.5em}
.toast{top:max(.45em,env(safe-area-inset-top));bottom:auto;z-index:960;background:#fff;color:var(--ink-dark);border:0;box-shadow:0 6px 18px rgba(0,0,0,.25);font-weight:800;pointer-events:none;
  width:max-content;max-width:calc(100% - 8.4em);text-align:center;line-height:1.2;padding:.55em 1em;font-size:.95em;animation:toastin .25s cubic-bezier(.3,1.5,.5,1)}
@keyframes toastin{from{transform:translateX(-50%) translateY(-60%) scale(.8);opacity:0}}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:950}
@media (max-height:480px){
  .card{padding:.9em 1.1em .8em}
  .card h2{margin-bottom:.4em;font-size:1.35em}
  .menu{grid-template-columns:1fr 1fr}
  .big{display:none}
  .results .actions{flex-wrap:nowrap}
  .results .actions .pill{min-width:0;padding:.5em 1.2em;font-size:1em;white-space:nowrap}
  .stats b{font-size:1.3em}
  .card .note{margin:.2em 0}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .how{gap:.15em;font-size:.92em}
  .stats{margin:.1em 0 .2em}
  .bubble{font-size:1em}
}