/* Crazy Eights Party: a bright party table over the Handeware kit. */
:root{--sky:#4dabf7;--blue:#4c6ef5;--violet:#7950f2;--sun:#ffd43b;--sun-lo:#fab005;--ink-dark:#25262b;--paper:#fff;--glow:#ffe066;
  --hearts:#e03131;--diamonds:#f76707;--clubs:#2b8a3e;--spades:#364fc7;color-scheme:light}
body{background:#4c6ef5;color:#fff}
.party{background:
  radial-gradient(circle at 12% 18%,rgba(255,255,255,.16) 0 7px,transparent 8px),
  radial-gradient(circle at 82% 12%,rgba(255,212,59,.35) 0 6px,transparent 7px),
  radial-gradient(circle at 70% 78%,rgba(255,255,255,.13) 0 9px,transparent 10px),
  radial-gradient(circle at 24% 84%,rgba(105,219,124,.3) 0 6px,transparent 7px),
  radial-gradient(circle at 92% 52%,rgba(247,131,172,.32) 0 5px,transparent 6px),
  radial-gradient(circle at 6% 55%,rgba(255,146,43,.3) 0 5px,transparent 6px),
  linear-gradient(160deg,#3bc9db 0%,#4c6ef5 52%,#7950f2 100%)}

/* home */
.home{gap:.75em;padding:1em}
.logo{position:relative;width:6.4em;height:4.6em;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;
  border:3px solid #fff;outline:3px solid var(--c);outline-offset:-7px}
.lc b{font:900 2.2em/1 var(--sans);color:var(--c)}
.l1{--c:var(--hearts);transform:rotate(-16deg) translateX(-1.4em)}
.l2{--c:var(--clubs);transform:translateY(-.25em);z-index:1}
.l3{--c:var(--spades);transform:rotate(16deg) translateX(1.4em)}
.home .title{font:900 clamp(2.3em,9vw,4.2em)/1.02 var(--sans);color:#fff;text-shadow:0 3px 0 #364fc7,0 8px 20px rgba(0,0,0,.3);letter-spacing:-.01em;max-width:11em;text-wrap:balance}
.tagline{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);font-weight:600}
.opts{display:flex;flex-direction:column;gap:.55em;align-items:center}
.opts .choices{justify-content:center}
.choice{min-height:46px;min-width:5.4em;font-weight:700;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55);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:48px}
.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{flex-wrap:wrap}
.link{min-height:44px;color:#fff;font-weight:600}
.lock{color:#fff}
.lock a{color:var(--sun)}
.pill:focus-visible,.choice:focus-visible,.link:focus-visible,.row:focus-visible,.toggle:focus-visible,.suitpick:focus-visible,.jewel:focus-visible,.deckbtn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--violet)}
@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:.7em}
  .home .title{grid-column:1;grid-row:2;font-size:2.4em}
  .home .tagline{grid-column:1;grid-row:3}
  .home .opts{grid-column:2;grid-row:1/3}
  .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:56px!important}}
@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 .32s cubic-bezier(.2,.85,.25,1.08),opacity .25s,filter .2s;will-change:transform;cursor:default}
.pc.mine{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(20,20,60,.3);transition:box-shadow .2s}
.pc .back{display:none;border:calc(var(--cw)*.05) solid #fff;box-shadow:0 3px 8px rgba(20,20,60,.3);
  background:radial-gradient(circle at 50% 50%,#ffd43b 0 14%,transparent 15%),radial-gradient(circle,rgba(255,255,255,.35) 0 18%,transparent 20%) 0 0/calc(var(--cw)*.22) calc(var(--cw)*.22),linear-gradient(135deg,#f06595,#7950f2)}
.pc.down .front{display:none}
.pc.down .back{display:block}
.pc.hide{opacity:0;pointer-events:none}
.pc svg{fill:currentColor;display:block}
.ix{position:absolute;left:4%;top:3%;width:30%;display:flex;flex-direction:column;align-items:center;line-height:1}
.ix b{font:900 calc(var(--cw)*.3)/1 var(--sans);letter-spacing:-.04em}
.ix b.ten{font-size:calc(var(--cw)*.25);letter-spacing:-.08em}
.ix svg{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2);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 svg{width:calc(var(--cw)*.46);height:calc(var(--cw)*.46)}
.mid.ace svg{width:calc(var(--cw)*.62);height:calc(var(--cw)*.62)}
.mid.face b{font:900 calc(var(--cw)*.5)/1 var(--sans)}
.mid.face svg{width:calc(var(--cw)*.24);height:calc(var(--cw)*.24);margin-top:calc(var(--cw)*.03)}
.mid.wild b{font:900 calc(var(--cw)*.62)/1 var(--sans);background:linear-gradient(180deg,#e03131,#f76707 30%,#2b8a3e 62%,#364fc7);-webkit-background-clip:text;background-clip:text;color:transparent}
.mid.wild i{font:900 calc(var(--cw)*.13)/1 var(--sans);font-style:normal;letter-spacing:.12em;color:#7950f2;margin-top:calc(var(--cw)*.02)}
.pc.eight .front{box-shadow:inset 0 0 0 calc(var(--cw)*.04) #fff,inset 0 0 0 calc(var(--cw)*.075) #b197fc,0 3px 8px rgba(20,20,60,.3)}
.pc.ok .front{box-shadow:0 0 0 3px var(--glow),0 0 calc(var(--cw)*.22) var(--glow),0 6px 14px rgba(20,20,60,.35)}
.pc.no{filter:brightness(.9) saturate(.7)}
.pc.fresh .front{animation:fresh 1.2s}
@keyframes fresh{0%,100%{box-shadow:0 3px 8px rgba(20,20,60,.3)}30%{box-shadow:0 0 0 4px #69db7c,0 0 24px #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 deck you draw from, and the suit to follow */
.deckbtn{position:absolute;z-index:600;border:0;padding:0;background:none;border-radius:calc(var(--cw)*.1)}
.deckbtn .dc{position:absolute;right:-.5em;top:-.5em;min-width:1.9em;height:1.9em;border-radius:999px;background:#fff;color:var(--ink-dark);font-weight:900;font-size:.85em;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25);padding:0 .3em}
.deckbtn.glow{animation:glow 1.1s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 3px var(--glow),0 0 10px var(--glow)}50%{box-shadow:0 0 0 6px var(--glow),0 0 26px var(--glow)}}
.deckbtn.empty{border:3px dashed rgba(255,255,255,.6)}
.badge{position:absolute;z-index:200;border-radius:50%;background:#fff;color:var(--sc);display:grid;place-items:center;box-shadow:0 0 0 4px var(--sc),0 6px 14px rgba(0,0,0,.25)}
.badge svg{width:62%;height:62%;fill:currentColor}
.badge.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}

/* the computer players */
.seat{position:absolute;z-index:500;transform:translateX(-50%);display:flex;align-items:center;gap:.35em;padding:.2em .7em .2em .25em;border-radius:999px;
  background:rgba(255,255,255,.92);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}
.seat .av{width:1.7em;height:1.7em;border-radius:50%;background:var(--avc);display:grid;place-items:center;font-size:1.05em}
.seat .ct{background:var(--violet);color:#fff;border-radius:999px;min-width:1.7em;padding:0 .35em;text-align:center}
.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 .one{display:none;position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:.3em;background:#ff6b6b;color:#fff;border-radius:999px;padding:.15em .7em;font-size:.8em;animation:bob 1s ease-in-out infinite}
.seat.last .one{display:block}
@keyframes bob{50%{transform:translateX(-50%) translateY(-3px)}}

/* cards over the table: bright paper */
.veil{background:rgba(30,20,80,.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(--violet)}
.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:#f3f0ff;border-color:#e5dbff}
.row small{color:#5c5f66}
.card .link{color:var(--blue)}
.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}
.suits{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.suitpick{min-height:5.2em;border:3px solid var(--sc);border-radius:1em;background:#fff;color:var(--sc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;font-weight:900;padding:.4em}
.suitpick svg{width:2.2em;height:2.2em;fill:currentColor}
.suitpick small{color:#5c5f66;font-weight:600;font-size:.75em}
.suitpick:hover{background:color-mix(in srgb,var(--sc) 10%,#fff)}
.suitpick:active{transform:scale(.96)}
.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}
  .suits{grid-template-columns:repeat(4,1fr)}
  .suitpick{min-height:4.4em}
  .stats{margin:.1em 0 .2em}
}