/* Euchre Table: a deep green card table over the Handeware kit. */
:root{--felt:#17573f;--felt-deep:#0b2d21;--gold:#ffd166;--card:#fffdf7;--red:#c62f3a;--blk:#1d2026;--us:#a9cbff;--them:#ffd0a1}
body{background:var(--felt-deep)}
.felt-bg{background:radial-gradient(ellipse 120% 90% at 50% 42%,#227456 0%,var(--felt) 45%,var(--felt-deep) 100%)}

/* home */
.home{gap:.8em}
.home .logo img{width:7em;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.home .title{color:#fff8e6;text-shadow:0 2px 0 rgba(0,0,0,.35),0 8px 22px rgba(0,0,0,.4)}
.tagline{color:#f3efe3}
.opts{display:flex;flex-direction:column;gap:.3em;align-items:center}
.opts .choices{justify-content:center}
.lvnote{margin:0;color:#e3efe8;font-size:.92em;min-height:1.3em}
.choice{min-height:48px;min-width:5.4em;font-weight:700;font-size:1.05em;background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.25);color:#fff}
.choice[aria-pressed=true]{background:var(--gold);color:#3a2706;border-color:#fff3c4}
.go{display:flex;flex-direction:column;align-items:center;gap:.1em}
.links{flex-wrap:wrap}
.link{min-height:44px;color:#ffe7a8}
.lock{color:#fff}
.lock a{color:var(--gold)}
@media (max-height:540px) and (min-width:560px){
  .home{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;align-content:center;column-gap:2em;row-gap:.4em}
  .home .logo{grid-column:1;grid-row:1;justify-self:center}
  .home .title{grid-column:1;grid-row:2;font-size:3em}
  .home .tagline{grid-column:1;grid-row:3;justify-self:center}
  .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}
  .home .lock{grid-column:1/3}
  .home .logo img{width:4.6em}
}
@media (max-height:420px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:58px!important}.home .logo{display:none}}

/* bar */
#game .bar{padding-bottom:.2em;gap:.4em}
.bar .jewel{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.5);box-shadow:none;flex:none}
.bar .jewel svg{stroke:#fff}
.status{flex:1;min-width:0;text-align:center;font-weight:700;font-size:1.1em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me{display:flex;align-items:center;gap:.6em;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.3em .8em;color:#fff;white-space:nowrap;min-height:2.4em;flex:none}
.tm{display:flex;align-items:baseline;gap:.25em;position:relative}
.tm.us{color:var(--us)}
.tm.them{color:var(--them)}
.tm b{color:#fff;font-size:1.2em}
.pips{font-style:normal;font-size:.9em;letter-spacing:-.05em;line-height:1;color:var(--gold);margin-left:.05em}
.pips:empty{display:none}
.trump{display:flex;align-items:center;gap:.25em;flex:none;background:var(--card);border-radius:999px;padding:.25em .65em .25em .45em;font-weight:800;font-size:.85em;min-height:2.4em;box-shadow:0 2px 8px rgba(0,0,0,.3);animation:pop .4s}
.trump svg{width:1.5em;height:1.5em;fill:currentColor}
.trump.red{color:var(--red)}
.trump.black{color:var(--blk)}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.12)}}
@media (max-width:430px){.trump span{display:none}.trump{padding:.25em .4em}.status{font-size:1em}}

/* the cards: drawn in code, moved by transform alone */
.felt{overflow:hidden;touch-action:manipulation}
.felt.shake{animation:shk .45s}
@keyframes shk{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.pc{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--cw)*1.4);padding:0;border:0;background:none;transform-origin:50% 50%;
  transition:transform .36s cubic-bezier(.2,.8,.25,1),opacity .3s,filter .2s;will-change:transform;opacity:0;cursor:default}
.pc.mine{cursor:pointer}
.pc .in,.pc .bk{position:absolute;inset:0;border-radius:calc(var(--cw)*.09);border:1px solid rgba(0,0,0,.2);box-shadow:0 2px 6px rgba(0,0,0,.35);overflow:hidden}
.pc .in{background:linear-gradient(170deg,#fff,var(--card) 55%,#f2ede0);transition:box-shadow .2s,transform .15s}
.pc .bk{display:none;background:repeating-linear-gradient(45deg,#2b6f9e 0 6%,#245f88 6% 12%),#2b6f9e;border:calc(var(--cw)*.06) solid #f6f1e4}
.pc.down .in{display:none}
.pc.down .bk{display:block}
.pc.red{color:var(--red)}
.pc.black{color:var(--blk)}
.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:800 calc(var(--cw)*.31)/1 var(--sans);letter-spacing:-.04em}
.ix b.ten{font-size:calc(var(--cw)*.26);letter-spacing:-.08em}
.ix svg{width:calc(var(--cw)*.22);height:calc(var(--cw)*.22);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)*.44)/1 var(--serif)}
.mid.face svg{width:calc(var(--cw)*.24);height:calc(var(--cw)*.24);margin-top:calc(var(--cw)*.04)}
.tmark{display:none;position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(90deg,#e9b949,#ffd166,#e9b949);color:#4a3107;
  font:800 calc(var(--cw)*.12)/calc(var(--cw)*.224) var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.pc.tr .tmark{display:block}
.pc.tr .ix.br{display:none}
.pc.legal .in{box-shadow:0 0 0 3px var(--gold),0 6px 16px rgba(0,0,0,.45)}
.pc.dim{filter:brightness(.78) saturate(.7)}
.pc:focus-visible{outline:none}
.pc:focus-visible .in{box-shadow:0 0 0 4px #fff,0 0 0 7px #1b6cff}
@media (hover:hover){.pc.legal:hover .in{transform:translateY(-6%)}}
.in.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}
html.fast .pc{transition-duration:.12s}

/* the other three players */
.seat{position:absolute;z-index:40;transform:translate(-50%,-50%);width:var(--bw);display:flex;flex-direction:column;align-items:center;gap:.15em;padding:.35em .3em;
  border-radius:1em;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:.9em;line-height:1.15;transition:opacity .25s,box-shadow .25s,background .25s}
.seat .av{position:relative;width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--avc);border:2px solid rgba(255,255,255,.85)}
.seat .dl{display:none;position:absolute;right:-.7em;bottom:-.3em;width:1.35em;height:1.35em;border-radius:50%;background:#fff;color:#123d2e;font:900 .72em/1.35em var(--sans);text-align:center;font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.seat.deal .dl{display:block}
.seat .who{display:flex;flex-direction:column;align-items:center;min-width:0}
.seat .nm{font-weight:700;white-space:nowrap}
.seat .bd{font-size:.88em;color:#e6f2ec;min-height:1.15em;white-space:nowrap}
.seat.pard{border-color:rgba(169,203,255,.6)}
.seat.on{background:rgba(0,0,0,.42);box-shadow:0 0 0 3px var(--gold),0 0 18px rgba(255,209,102,.55)}
.seat.out{opacity:.45}
.seat.won{animation:won .6s}
@keyframes won{40%{box-shadow:0 0 0 3px #9be7a8,0 0 22px rgba(155,231,168,.8);background:rgba(20,80,50,.7)}}
.felt.land .seat{flex-direction:row;gap:.5em;padding:.3em .6em;height:48px}
.felt.land .seat .who{align-items:flex-start}

/* the call panel */
.panel{position:absolute;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.panel>*{pointer-events:auto}
.ptitle{font-weight:800;font-size:1.1em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);text-align:center}
.ptip{font-size:.9em;color:var(--gold);text-align:center;min-height:0}
.ptip:empty{display:none}
.pbtns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%}
.bb{min-height:48px;min-width:48px;padding:.3em 1em;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);color:#fff;font-weight:800;font-size:1em;display:inline-flex;align-items:center;justify-content:center;gap:.3em}
#bOrder{background:linear-gradient(180deg,#ffe39a,var(--gold) 50%,#e5a92a);color:#3a2706;border-color:#fff3c4;box-shadow:0 3px 0 #8a5a12}
.bb.suit{background:var(--card);border-color:#fff;padding:.3em .7em}
.bb.suit.red{color:var(--red)}
.bb.suit.black{color:var(--blk)}
.bb.suit svg{width:1.4em;height:1.4em;fill:currentColor}
.bb.alone[aria-pressed=true]{background:#2b6f9e;border-color:#cfe6ff;box-shadow:0 0 12px rgba(120,190,255,.6)}
.bb.alone[aria-pressed=true]::before{content:"✓"}
.bb:active{transform:translateY(2px)}
.bb:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (hover:hover){.bb:hover{filter:brightness(1.1)}}
.felt.land .bb.suit span{display:none}
@media (max-width:380px){.bb.suit span{display:none}}

/* trump called: a big suit that blooms and fades */
.flash{position:absolute;z-index:80;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  background:rgba(255,253,247,.95);border-radius:1.2em;padding:.5em 1.2em;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.flash svg{width:3.2em;height:3.2em;fill:currentColor}
.flash b{font:900 1.4em/1.1 var(--serif)}
.flash.red{color:var(--red)}
.flash.black{color:var(--blk)}
.flash.go{animation:bloom 1.1s ease-out}
html.fast .flash.go{animation-duration:.3s}
@keyframes bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}

/* cards over the table */
.card{background:linear-gradient(180deg,#1f5a44,#123d2e 60%);border-color:rgba(255,255,255,.18)}
.card h2{color:#ffe3a0}
.row{min-height:48px;color:#fff}
.how{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:.3em}
.scores{display:flex;flex-direction:column;gap:.35em}
.srow{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.45em .8em;border-radius:.7em;background:rgba(255,255,255,.06)}
.srow.you{background:rgba(255,209,102,.16)}
.srow b{font:800 1.3em/1 var(--serif)}
.kicker{margin:-.4em 0 .3em;text-align:center;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:#cfe6d9}
.big{margin:0 0 .2em;text-align:center;font:900 1.6em/1.1 var(--serif)}
.big.plus{color:#9be7a8}
.big.minus{color:#ffb0a8}
.handend.good h2{color:var(--gold)}
.results.won h2{font-size:2em;color:var(--gold)}
.lvs{display:flex;justify-content:center;gap:.8em;color:var(--ink-soft)}
.lv.done{color:var(--gold);font-weight:700}
.toast{top:max(.6em,env(safe-area-inset-top));bottom:auto;min-height:2.8em;display:flex;align-items:center;background:#123d2e;z-index:95;border-color:rgba(255,255,255,.25);color:#fff;white-space:nowrap;font-weight:600;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
@media (max-height:440px){
  .card{padding:.9em 1.2em .8em}
  .card h2{font-size:1.3em;margin-bottom:.35em}
  .results.won h2{font-size:1.5em}
  .card .note{margin:.1em 0 .3em}
  .big{font-size:1.3em}
  .srow{padding:.2em .7em}
  .card .stats{margin:.3em 0 0;gap:1.2em;font-size:.85em}
  .card .stats b{font-size:1.25em}
  .card .actions{flex-direction:row;justify-content:center;gap:1em;margin-top:.5em}
  .card .pill{padding:.5em 1.6em}
  .how{gap:.1em;font-size:.9em}
  .rows{gap:.3em}
  .row{min-height:44px;padding:.4em .9em}
}
.status.won{animation:glow .6s}
@keyframes glow{40%{color:var(--gold);transform:scale(1.08)}}