/* The look comes from the table prototype: a phone screen, card colour carrying the suit colour. */
:root{
  color-scheme:light;
  --paper:#ffffff;
  --coral:#f4565c;
  --coral-deep:#c9333b;
  --ink:#27242a;
  --table:#fdeeec;
  --line:#f6cfcc;
  --muted:#7a6f72;
  --outside:#f4ecea;
  --online:#2e9e6b;
  --u-coral:#f4565c;
  --u-sun:#ee9b22;
  --u-leaf:#2e9e6b;
  --u-sea:#3b78dc;
  --display:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--outside);color:var(--ink);font:400 15px/1.35 var(--body);display:flex;align-items:center;justify-content:center;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.caps{font:700 11px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase}

/* Stage: paper, then the felt that opens over it, then the cards that never leave, then the screen */
#frame{position:relative;width:390px;height:min(844px,calc(100% - 32px));background:var(--paper);border-radius:34px;overflow:hidden;box-shadow:0 24px 60px rgba(60,30,34,.2);flex:none}
#felt{position:absolute;inset:0;background:var(--table);clip-path:circle(0 at 50% 40%);overflow:hidden}
#orbit{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#screen{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;inset:0}
.layer.leaving{pointer-events:none}
#fx{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:hidden}
@media (max-width:759px){
  /* The frame, and so everything placed on it, starts below the status bar, where iOS draws its own fade.
     Only the felt reaches up under the bar, so the table still runs to the top of the screen. */
  :root{--bar:calc(env(safe-area-inset-top,0px) + 24px)}
  body{align-items:stretch;background:var(--paper);padding-top:var(--bar);transition:background-color .48s cubic-bezier(.3,.7,.2,1)}
  /* Safari tints the status bar from the page background, not from the felt under it, so the page takes the table's colour too */
  body:has(#felt[data-open="true"]){background:var(--table)}
  #frame{width:100%;height:auto;flex:1;min-height:0;border-radius:0;box-shadow:none;overflow:visible}
  #felt{top:calc(-1 * var(--bar))}
  /* The orbiting cards reach up under the bar too, or the paper screens show them sliced along the frame's top edge */
  #orbit{overflow:visible;clip-path:inset(calc(-1 * var(--bar)) 0 0 0)}
}
#bar{display:none}
/* In a Safari tab the bar blurs well below the safe area, unless a fixed element holds the top edge: then Safari
   draws the bar flat in that element's colour, so a strip the page's colour keeps the frame close under it */
@media (max-width:759px) and (display-mode:browser){
  :root{--bar:calc(env(safe-area-inset-top,0px) + 12px)}
  #bar{display:block;position:fixed;left:0;right:0;top:0;height:var(--bar);background:inherit;z-index:30;pointer-events:none}
}

/* Cards. --w is a real length, so a hand that changes card size can animate it */
@property --w{syntax:"<length>";inherits:true;initial-value:60px}
.flight{position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w)*1.4)}
.flight .card{position:absolute;left:0;top:0}
.card{position:relative;width:var(--w,60px);height:calc(var(--w,60px)*1.4);border-radius:calc(var(--w,60px)*.15);color:#fff;overflow:hidden;flex:none;box-shadow:0 1px 3px rgba(39,20,24,.22);user-select:none}
.card.red{background:var(--coral)}
.card.ink{background:var(--ink)}
.card .ix{position:absolute;left:9%;top:6%;display:flex;flex-direction:column;align-items:center;font:800 calc(var(--w,60px)*.25)/1 var(--display);letter-spacing:-.04em}
.card .ix svg{width:calc(var(--w,60px)*.17);height:calc(var(--w,60px)*.17);margin-top:calc(var(--w,60px)*.03);fill:currentColor}
.card .big{position:absolute;right:-9%;bottom:-7%;width:70%;height:50%;fill:currentColor}
.card.mini{border-radius:calc(var(--w)*.17)}
.card.mini .big{display:none}
.card.mini .ix{left:5%;top:5%;font-size:calc(var(--w)*.46)}
.card.mini .ix svg{width:calc(var(--w)*.36);height:calc(var(--w)*.36);margin-top:1px}
/* Rummy's back: coral, with deep pinstripes running edge to edge */
.card.back{background:repeating-linear-gradient(-45deg,var(--coral-deep) 0 calc(var(--w,60px)*.045),var(--coral) 0 calc(var(--w,60px)*.1))}
/* Uno's back: the card cut into the four colours from the middle, an ink dot where they meet */
.card.back.uno-back{background:radial-gradient(circle,var(--ink) 0 calc(var(--w,60px)*.16),#fff 0 calc(var(--w,60px)*.2),transparent 0),conic-gradient(var(--u-coral) 0 25%,var(--u-sun) 0 50%,var(--u-leaf) 0 75%,var(--u-sea) 0)}
/* A Joker is the one card in sun, so it never passes for a heart or a spade at any size */
.card.joker{background:var(--u-sun)}
/* Uno cards: flat colour like the Rummy cards, the number is its own big symbol, Wilds are the ink card */
.card.uno{background:var(--c);--bg:var(--c)}
.card.uno.u-coral{--c:var(--u-coral)}
.card.uno.u-sun{--c:var(--u-sun)}
.card.uno.u-leaf{--c:var(--u-leaf)}
.card.uno.u-sea{--c:var(--u-sea)}
.card.uno.u-wild{--c:var(--ink)}
.card.uno .ix{z-index:1}
.card.uno .num{position:absolute;right:-5%;bottom:-20%;font:900 calc(var(--w,60px)*1.08)/1 var(--display);letter-spacing:-.07em}
.card.uno.mini .num{display:none}
.card .wildmark{position:absolute;right:6%;top:5%;width:calc(var(--w)*.3);height:calc(var(--w)*.3);fill:currentColor}
.flying{position:absolute;left:0;top:0;will-change:transform;z-index:2}
.orbit-card{position:absolute;left:0;top:0;will-change:transform}

/* Icons draw themselves in, then each has its own move when its button is pressed */
.ic{width:var(--ic,22px);height:var(--ic,22px);display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic *{transform-box:fill-box;transform-origin:center;animation:ic-draw .45s cubic-bezier(.3,.7,.2,1) .12s backwards}
.ic .dot{fill:currentColor;stroke:none}
.ic .soft{fill:currentColor;fill-opacity:.22}
@keyframes ic-draw{from{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}to{stroke-dasharray:1;stroke-dashoffset:0;opacity:1}}
.ic-back.play .m{animation:ic-nudge .36s cubic-bezier(.3,.7,.2,1)}
.ic-go.play .m{animation:ic-slide-r .36s cubic-bezier(.3,.7,.2,1)}
.ic-undo.play .m{animation:ic-swing .42s cubic-bezier(.3,.7,.2,1)}
.ic-sort.play .up{animation:ic-rise .42s cubic-bezier(.3,.7,.2,1)}
.ic-sort.play .down{animation:ic-fall .42s cubic-bezier(.3,.7,.2,1)}
.ic-chevron .m{transition:transform .25s cubic-bezier(.3,.7,.2,1)}
[aria-expanded="true"] > .ic-chevron .m{transform:rotate(180deg)}
.ic-leave.play .m{animation:ic-slide-r .36s cubic-bezier(.3,.7,.2,1)}
.ic-sound .waves,.ic-sound .mute{transition:opacity .2s}
.ic-sound .mute,.off > .ic-sound .waves{opacity:0}
.off > .ic-sound .mute{opacity:1}
.ic-sound.play .waves{animation:ic-pop .34s cubic-bezier(.3,1.3,.5,1)}
.ic-rules.play .a{animation:ic-slide-l .42s cubic-bezier(.3,.7,.2,1)}
.ic-rules.play .b{animation:ic-slide-r .42s cubic-bezier(.3,.7,.2,1)}
.ic-stats.play .t{animation:ic-rise .42s cubic-bezier(.3,.7,.2,1)}
.ic-stats.play .s{animation:ic-fall .42s cubic-bezier(.3,.7,.2,1)}
.ic-react .eyes{animation:ic-blink 4.5s ease-in-out infinite}
.ic-react.play .m{animation:ic-wobble .5s ease-out}
.ic-guide.play .glass{animation:ic-pop .34s cubic-bezier(.3,1.3,.5,1)}
.ic-guide .rays{animation:none;opacity:0;transition:opacity .2s}
[data-level="1"] .ic-guide .glass,[data-level="2"] .ic-guide .glass{fill:currentColor;fill-opacity:.3;transition:fill-opacity .2s}
[data-level="2"] .ic-guide .rays{opacity:1;animation:ic-glow 1.6s ease-in-out infinite}
.ic-laugh .loop{animation:ic-laugh .9s ease-in-out infinite}
.ic-flame .loop{transform-origin:50% 100%;animation:ic-flicker .7s ease-in-out infinite}
.ic-flame .inner{transform-origin:50% 100%;animation:ic-flicker .5s ease-in-out infinite reverse}
.ic-shock .loop{animation:ic-tremble .4s linear infinite}
.ic-shock .o{animation:ic-pop 1s ease-in-out infinite}
.ic-clap .l{transform-origin:100% 100%;animation:ic-clap-l .6s ease-in-out infinite}
.ic-clap .r{transform-origin:0 100%;animation:ic-clap-r .6s ease-in-out infinite}
.ic-clap .sparks{animation:ic-spark .6s ease-out infinite}
.ic-eyeroll .pupils{animation:ic-roll 1.6s linear infinite}
.ic-joker .loop{animation:ic-twinkle 2s ease-in-out infinite}
@keyframes ic-nudge{50%{transform:translateX(-4px)}}
@keyframes ic-slide-l{50%{transform:translateX(-6px)}}
@keyframes ic-slide-r{50%{transform:translateX(6px)}}
@keyframes ic-swing{50%{transform:rotate(-36deg)}}
@keyframes ic-rise{50%{transform:translateY(-3px)}}
@keyframes ic-fall{50%{transform:translateY(3px)}}
@keyframes ic-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes ic-wobble{25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}
@keyframes ic-pop{50%{transform:scale(1.2)}}
@keyframes ic-glow{50%{opacity:.35}}
@keyframes ic-laugh{25%{transform:translateY(-2px) rotate(-7deg)}75%{transform:translateY(-2px) rotate(7deg)}}
@keyframes ic-flicker{33%{transform:scale(.94,1.08) skewX(-3deg)}66%{transform:scale(1.04,.95) skewX(3deg)}}
@keyframes ic-tremble{25%{transform:translateX(-.6px)}75%{transform:translateX(.6px)}}
@keyframes ic-clap-l{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(0)}}
@keyframes ic-clap-r{0%,100%{transform:rotate(16deg)}50%{transform:rotate(0)}}
@keyframes ic-spark{0%,40%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@keyframes ic-roll{0%,100%{transform:translate(0,-1.3px)}25%{transform:translate(1.3px,0)}50%{transform:translate(0,1.3px)}75%{transform:translate(-1.3px,0)}}
@keyframes ic-twinkle{50%{transform:rotate(36deg) scale(.86)}}

/* Pills and home */
.centre{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.pins{position:absolute;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:10px;padding-inline:24px;z-index:3}
.pill{min-width:210px;padding:14px 26px;border-radius:999px;font:800 17px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-align:center;transition:transform .12s}
.pill:active{transform:scale(.96)}
.pill.solid{background:var(--coral);color:#fff}
.pill.plain{background:var(--table);color:var(--coral-deep)}
.pill.small{min-width:0;padding:10px 18px;font-size:13px}
.pill[disabled]{background:#eee3e2;color:var(--muted);cursor:default}
.pair{display:flex;gap:8px;justify-content:center}
.logo-top{font:800 21px/1 var(--display);letter-spacing:.42em;margin-right:-.42em}
.logo-num{font:900 118px/.95 var(--display);color:var(--coral);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tag{font:600 14px/1.3 var(--body);color:var(--muted);max-width:230px;margin-top:8px}
.namebar{display:flex;align-items:center;width:100%;max-width:310px;padding:6px;border-radius:999px;background:var(--coral);transition:background .15s}
.namebar:has(.name:focus){background:var(--coral-deep)}
.name{flex:1;min-width:0;padding:0 8px;border:0;outline:0;background:none;text-align:center;font:800 17px/1 var(--display);color:#fff;caret-color:#fff}
.name:focus-visible{outline:0}
.name::placeholder{color:#fff;opacity:.85}
.namebar .av{position:static;flex:none;width:44px;height:44px;box-shadow:0 0 0 2px #fff;transition:transform .12s}
.namebar .av:active{transform:scale(.92)}
.charpick{display:flex;flex-direction:column;align-items:center;gap:18px}
.chargrid{display:grid;grid-template-columns:repeat(4,64px);gap:16px}
.chargrid .av{position:static;width:64px;height:64px}
.chargrid .av:active{transform:scale(.92)}
.chargrid .av[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.go{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--coral-deep);transition:background .15s,color .15s,transform .12s}
.go:active{transform:scale(.92)}
.go[disabled]{background:rgba(255,255,255,.25);color:#fff;cursor:default;transform:none}

/* Who's online, and other paper screens */
.head{position:absolute;left:0;right:0;top:0;padding:26px 22px 0;text-align:center;z-index:2}
.head h1{margin:0;font:800 26px/1.05 var(--display);text-wrap:balance}
.head p{margin:6px 0 0;color:var(--muted);font-weight:600}
.back-btn{position:absolute;left:14px;top:20px;width:36px;height:36px;border-radius:50%;background:var(--table);display:grid;place-items:center;z-index:3}
.rules-btn{left:auto;right:14px}
.people{position:absolute;left:0;right:0;top:92px;bottom:107px;overflow-y:auto;padding:4px 18px 14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none;z-index:2}
.person{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;background:var(--table);text-align:left;width:100%;transition:transform .16s cubic-bezier(.3,.7,.2,1),background .16s}
.person .av{position:static;transition:none}
.person b{font:700 16px/1.1 var(--display);display:block}
.person small{display:flex;align-items:center;gap:5px;font:600 12px/1.2 var(--body);color:var(--muted);margin-top:3px}
.person small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--online)}
.person .state{font:800 12px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--coral-deep);padding:8px 11px;border-radius:999px;background:#fff}
.person[aria-pressed="true"]{background:var(--ink);color:#fff;transform:scale(1.015)}
.person[aria-pressed="true"] small{color:#cfc6c8}
.person[aria-pressed="true"] .state{background:var(--coral);color:#fff}
.person[disabled]{cursor:default;opacity:.62}
.person small.busy::before,.hero-state.busy::before{background:var(--muted)}

/* Picking bots: the count is the screen when nobody else is here, and a small row when someone is */
.botpick{gap:14px}
.botpick .caps{color:var(--muted)}
.stepper{display:flex;align-items:center;justify-content:center;gap:8px}
.step{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--table);color:var(--coral-deep);font:800 20px/1 var(--display);transition:transform .12s,opacity .15s}
.step:active{transform:scale(.88)}
.step[disabled]{opacity:.35;cursor:default;transform:none}
.count{display:flex;align-items:baseline;justify-content:center;gap:4px;min-width:58px;font:800 15px/1 var(--display);font-variant-numeric:tabular-nums}
.count span{font:700 13px/1 var(--display);color:var(--muted)}
.stepper.big{gap:22px}
.stepper.big .step{width:62px;height:62px;font-size:32px}
.stepper.big .count{flex-direction:column;align-items:center;gap:2px;min-width:96px}
.stepper.big .count b{font:900 118px/.95 var(--display);color:var(--coral);letter-spacing:-.04em}
.stepper.big .count span{font:800 21px/1 var(--display);color:var(--ink)}
.botrow{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 8px 6px 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--table);transition:opacity .16s}
.botrow>span{font:700 13px/1 var(--display);color:var(--muted);white-space:nowrap}
.botrow .pill.small{padding:10px 14px}
.botrow.quiet{opacity:.45}
.people.people{bottom:208px}

/* One other player online: they get the whole screen */
.duel{top:84px;bottom:166px;justify-content:center;gap:6px;padding-inline:24px}
.hero-av.av{position:static;width:136px;height:136px;font-size:64px;transition:none}
.duel .hero-av{margin-bottom:12px}
.duel.waiting .hero-av{animation:alarm 1.2s infinite}
.hero-name{font:900 40px/1.05 var(--display);letter-spacing:-.02em;max-width:100%;overflow-wrap:anywhere}
.hero-state{display:flex;align-items:center;gap:6px;font:600 15px/1.2 var(--body);color:var(--muted)}
.hero-state::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--online)}
.hero-state:empty{display:none}
.duelbar{display:flex;align-items:stretch;gap:10px;width:100%;max-width:400px}
.pill.huge{flex:1;min-width:0;min-height:66px;padding:20px 16px;font-size:23px;line-height:1.1;text-wrap:balance;overflow-wrap:anywhere}
.discard{--ic:26px;flex:none;width:66px;border-radius:999px;display:grid;place-items:center;background:var(--table);color:var(--coral-deep);transition:transform .12s}
.discard:active{transform:scale(.88)}

/* A challenge coming in */
.invite{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.invite .hero-av.av{width:96px;height:96px;font-size:44px;margin-bottom:8px}
.sheet .invite h3{font-size:26px;line-height:1.1;overflow-wrap:anywhere}
.invite .pair{width:100%;margin-top:12px}
.invite .pill{flex:1;min-width:0}

/* Round table seats */
.seat{position:absolute;left:0;top:0;width:0;height:0;z-index:3;transition:transform .25s}
.seat.active{z-index:4}
.av{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 16px/1 var(--display);color:#fff;background:var(--ink);transition:transform .25s}
.av.c1{background:var(--coral)}
/* The player characters from avatars.js fill the badge and blink now and then */
.av .char{display:block;width:100%;height:100%;overflow:visible}
.char .eyes{transform-box:fill-box;transform-origin:center;animation:ic-blink 4.5s ease-in-out infinite}
.char .zz{animation:char-zz 2.4s ease-in-out infinite}
@keyframes char-zz{0%,100%{opacity:0;transform:translate(-2px,2px)}50%{opacity:1;transform:none}}
.seat.active .av{transform:scale(1.14)}
.tring{position:absolute;left:-27px;top:-27px;width:54px;height:54px;transform:rotate(-90deg);pointer-events:none;overflow:visible}
.tring circle{fill:none;stroke:var(--coral);stroke-width:4;stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151}
.av.c1 ~ .tring circle{stroke:var(--ink)}
.seat.warn .tring circle{stroke:var(--coral-deep);stroke-width:6}
.lab{position:absolute;left:-28px;width:56px;text-align:center;font:700 11px/1.15 var(--display);white-space:nowrap;pointer-events:none;overflow:hidden;text-overflow:ellipsis}
.lab small{display:block;font:500 11px/1.15 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.lab.below{top:25px}
.lab.beside{left:25px;top:-13px;width:60px;text-align:left}
.seat.me .lab{left:29px;top:-16px;width:66px;text-align:left}
.seat.me .lab small{font:800 18px/1.05 var(--display);color:var(--coral)}
.cnt{position:absolute;left:9px;top:-25px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#fff;color:var(--ink);font:800 11px/19px var(--display);text-align:center;box-shadow:0 1px 4px rgba(39,20,24,.3);pointer-events:none}
.seat.last .cnt{background:var(--coral);color:#fff;animation:pulse 1s infinite}
.seat.last .av{animation:alarm 1s infinite}
@keyframes pulse{50%{transform:scale(1.28)}}
@keyframes alarm{50%{box-shadow:0 0 0 8px rgba(244,86,92,.28)}}
.fan{position:absolute;left:0;top:0;width:0;height:0;transition:transform .25s}
.fan .card{position:absolute;left:-8.5px;top:-24px;transform-origin:50% 100%;transform:rotate(var(--r)) translateY(var(--y,0px));transition:transform .25s;box-shadow:0 0 0 .5px #fff}
.seat.thinking .fan .card{animation:shuffle 1.1s ease-in-out var(--d) infinite}
@keyframes shuffle{50%{transform:rotate(var(--r)) translateY(-5px)}}

/* The felt's fixtures */
.spot{position:absolute;left:0;top:0;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,#fff 0%,rgba(255,255,255,.75) 45%,rgba(255,255,255,0) 100%);transition:transform .45s cubic-bezier(.3,.7,.2,1);pointer-events:none}
.mark{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font:900 128px/1 var(--display);letter-spacing:-.04em;color:#fbe0dd;pointer-events:none;user-select:none}

/* Melds */
.meld{position:absolute;left:0;top:0;display:flex;border-radius:6px;padding:0}
.meld .card{margin-left:calc(var(--w)*-.35);transform-origin:0 0}
.meld .card:first-child{margin-left:0}
.meld.fits{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--coral);border-radius:7px}
.meld .who{position:absolute;left:-7px;top:-9px;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;font:800 8px/1 var(--display);background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line);z-index:1}

/* Stock and pile */
.mid{position:absolute;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;z-index:2}
.stock{position:relative;display:block;border-radius:6px}
.stock .card:nth-child(1){position:absolute;left:2px;top:-2px}
.stock .card:nth-child(2){position:relative}
.stock.hot{animation:hot 1s infinite}
.stock .n{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);min-width:22px;padding:0 5px;height:16px;border-radius:9px;background:#fff;color:var(--ink);font:800 10px/16px var(--display);box-shadow:0 1px 3px rgba(39,20,24,.25);z-index:1}
@keyframes hot{50%{box-shadow:0 0 0 6px rgba(244,86,92,.32)}}
.pile{position:relative;height:59px;width:86px;display:block;border-radius:6px}
.pile .pc{position:absolute;top:0;transition:left .22s cubic-bezier(.3,.7,.2,1)}
.pile.hot{animation:hot 1s infinite}
.pile .n{position:absolute;right:-6px;bottom:-7px;min-width:22px;padding:0 5px;height:16px;border-radius:9px;background:#fff;color:var(--ink);font:800 10px/16px var(--display);box-shadow:0 1px 3px rgba(39,20,24,.25);z-index:6}

/* Uno: the colour in play rings the top card, an arrow by the stock shows which way play goes */
.unotable .pile .pc:last-of-type .card{box-shadow:0 0 0 2.5px #fff,0 0 0 5.5px var(--now,transparent);transition:box-shadow .2s}
.dirmark{position:absolute;left:50%;width:26px;height:26px;margin:-13px 0 0 -112px;color:var(--coral);opacity:.55;z-index:2;pointer-events:none}
.dirmark svg{width:100%;height:100%;display:block;transition:transform .3s}
.dirmark.ccw svg{transform:scaleX(-1)}
.unotable .hc .card{transition:--w .24s cubic-bezier(.3,.7,.2,1),box-shadow .14s,translate .2s,filter .2s}
.unotable .hc.dim .card{translate:0 12px;filter:saturate(.55) brightness(.92)}
.shout{position:absolute;left:0;top:0;font:900 24px/1 var(--display);letter-spacing:-.02em;color:var(--coral);-webkit-text-stroke:4px #fff;paint-order:stroke fill;white-space:nowrap;z-index:4}
.colours{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.colour{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 14px;border-radius:16px;background:var(--c);color:#fff;text-align:left;transition:transform .12s}
.colour:active{transform:scale(.95)}
.colour b{font:800 18px/1 var(--display)}
.colour small{font:600 12px/1.2 var(--body);opacity:.85}

/* Your side */
/* Bottom-aligned, so the dock grows up from where the sort button sits when its drawer opens */
.row{position:absolute;left:100px;right:12px;height:52px;padding-bottom:3px;display:flex;align-items:flex-end;justify-content:flex-end;gap:6px;z-index:6}
.say{position:absolute;left:50%;width:210px;margin-left:-105px;text-align:center;font:700 13px/1.25 var(--display);text-wrap:balance;z-index:2;pointer-events:none}
.dock{display:flex;flex-direction:column;align-items:center;padding:4px;border-radius:999px;background:#fff}
.tool{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .15s,color .15s,transform .12s}
.tool:active{transform:scale(.88)}
@media (hover:hover){.tool:hover{background:var(--table)}}
.tool.on{background:var(--ink);color:#fff}
.tool.off{color:var(--muted)}
.tool.solo{width:46px;height:46px;background:#fff}
/* The dock's drawer opens upward over the felt into the tools used less often */
.drawer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s cubic-bezier(.3,.7,.2,1)}
.drawer.open{grid-template-rows:1fr}
.drawer > div{overflow:hidden;display:flex;flex-direction:column;gap:2px}
.drawer.open > div{padding-bottom:2px}
.hand{position:absolute;left:0;right:0;bottom:0;z-index:5;touch-action:none}
.hand.catching{z-index:7}
.hand .flying{pointer-events:none}
.hc{display:block;position:absolute;left:50%;bottom:-6px;transform-origin:50% 100%;transition:transform .24s cubic-bezier(.3,.7,.2,1);border-radius:10px}
.hc .card{transition:--w .24s cubic-bezier(.3,.7,.2,1),box-shadow .14s}
.hc.arriving{visibility:hidden;transition:none}
.hc.sel .card{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--ink)}
.hc.must .card{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--coral-deep)}
.hc.hint .card{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--online)}
.hc.dragging{visibility:hidden}
.float{position:absolute;left:0;top:0;font:900 26px/1 var(--display);color:var(--coral);-webkit-text-stroke:3px #fff;paint-order:stroke fill;z-index:3}
.shock{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px;border-radius:50%;border:3px solid var(--coral)}
.toast{position:absolute;left:50%;top:var(--toast,48px);transform:translateX(-50%);max-width:92%;background:var(--ink);color:#fff;padding:8px 14px;border-radius:999px;font:700 12px/1.2 var(--display);text-align:center;z-index:15;pointer-events:none}
.toss{position:absolute;left:0;top:0;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--coral-deep);box-shadow:0 4px 14px rgba(39,20,24,.2);--ic:30px}
.out{position:absolute;inset:0;z-index:25;display:grid;place-items:center;text-align:center;background:rgba(255,255,255,.86)}
.out b{display:block;font:900 110px/.9 var(--display);color:var(--coral);letter-spacing:-.03em}
.out span{font:600 15px var(--body)}

/* Sheets */
.scrim{position:absolute;inset:0;background:rgba(39,20,24,.28);z-index:30}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;background:#fff;border-radius:24px 24px 0 0;padding:20px 20px 26px;display:flex;flex-direction:column;gap:14px;max-height:82%;overflow-y:auto;scrollbar-width:none}
.sheet h3{margin:0;font:800 20px/1 var(--display)}
.sheet .sub{color:var(--muted);font-size:14px;margin-top:4px}
.sheet .mset{display:flex;flex-wrap:wrap;gap:12px}
.sheet .bigmeld{display:flex}
.sheet .bigmeld .card + .card{margin-left:-20px}
.reacts{display:flex;justify-content:space-between;gap:4px}
.reacts button{width:46px;height:46px;border-radius:50%;background:var(--table);color:var(--coral-deep);display:grid;place-items:center;flex:none;--ic:28px;transition:transform .12s}
.reacts button:active{transform:scale(.88)}
.pilegrid{display:flex;flex-wrap:wrap;gap:6px}
.pilegrid button{border-radius:8px;position:relative;transition:transform .14s cubic-bezier(.3,.7,.2,1)}
.pilegrid button.taking{transform:translateY(-5px)}
.pilegrid button.chosen .card{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.pilegrid button.dead .card{opacity:.38}
.choice{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--table);font:700 14px/1.2 var(--display);text-align:left;width:100%}
.choice .fanned{display:flex;flex:none}
.choice .fanned .card + .card{margin-left:-10px}
.setting{display:flex;flex-direction:column;gap:7px}
.setting>span{font:700 14px/1.2 var(--display)}
.setting .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.setting .seg button{padding:11px 4px;font-size:14px}
.seg{display:flex;background:var(--table);border-radius:999px;padding:3px;flex:none}
.seg button{padding:7px 10px;border-radius:999px;font:700 12px/1 var(--display);color:var(--coral-deep);white-space:nowrap;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--coral);color:#fff}

/* Stats */
.statbody{position:absolute;left:0;right:0;top:130px;bottom:0;overflow-y:auto;padding:0 18px 90px;scrollbar-width:none;z-index:2}
.tabs{position:absolute;left:0;right:0;top:82px;display:flex;justify-content:center;z-index:3}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile{background:var(--table);border-radius:16px;padding:12px 6px;text-align:center}
.tile b{display:block;font:900 26px/1 var(--display);color:var(--coral);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile span{display:block;font:600 11px/1.2 var(--body);color:var(--muted);margin-top:4px}
.sect{margin:18px 0 8px;color:var(--muted)}
.hist{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 12px;border-radius:12px;background:#fff;box-shadow:0 1px 6px rgba(39,20,24,.1);margin-bottom:6px}
.hist b{font:700 13px/1.2 var(--display)}
.hist small{font:600 12px/1.2 var(--body);color:var(--muted)}
.hist em{font:800 11px/1.2 var(--display);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep);align-self:center;grid-row:1/3;grid-column:2}
.board{width:100%;border-collapse:collapse;font:600 13px/1.2 var(--body);font-variant-numeric:tabular-nums}
.board th{font:700 10px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right;padding:6px 4px}
.board th:nth-child(2),.board td:nth-child(2){text-align:left}
.board td{padding:9px 4px;border-top:1px solid var(--table);text-align:right}
.board td:nth-child(2){font:700 14px/1.2 var(--display);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board tr.me td{color:var(--coral-deep)}
.empty{color:var(--muted);text-align:center;padding:30px 12px;font-weight:600}

/* Round score: a circular race to the target, then each player's cards turn over */
#scorescreen{position:absolute;inset:0;display:flex;flex-direction:column}
.hero{position:relative;flex:none;overflow:hidden}
.race{position:absolute;left:50%;z-index:1}
.race svg{position:absolute;inset:0;overflow:visible}
.race .band{fill:none;stroke:var(--table);stroke-width:46}
.race .tick{stroke:#fff;stroke-width:2}
.race .flag{stroke:var(--ink);stroke-width:3}
.race .sarc{fill:none;stroke-width:6;transition:stroke-dasharray 1s cubic-bezier(.3,.7,.2,1)}
.flaglab{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font:800 12px/1 var(--display);letter-spacing:.06em;color:var(--ink)}
.rav{left:50%;top:50%;width:24px;height:24px;margin:-12px;font-size:11px;box-shadow:0 0 0 2px #fff;transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.rav.now{z-index:2;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.rc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap}
.rc .num{font-weight:900;font-family:var(--display);line-height:1;letter-spacing:-.04em;color:var(--coral);font-variant-numeric:tabular-nums}
.rc .num.down{color:var(--ink)}
.rc .sub{font:600 12px/1.2 var(--body);color:var(--muted);margin-top:3px}
.scoresheet{position:relative;z-index:2;flex:0 1 auto;min-height:0;margin-top:auto;display:flex;flex-direction:column;background:var(--paper);border-radius:24px 24px 0 0;box-shadow:0 -6px 24px rgba(39,20,24,.14)}
.rows{position:relative;flex:0 1 auto;min-height:0;overflow-y:auto;padding:10px 12px 0;display:flex;flex-direction:column;gap:2px;scrollbar-width:none}
.srow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:9px;align-items:center;padding:3px 8px;border-radius:12px;transition:background .2s;flex:none}
.srow.now{background:var(--table)}
.srow .av{position:static;width:30px;height:30px;font-size:13px;transition:none}
.srow .nm{font:700 12px/1.1 var(--display);margin-bottom:2px}
.cs{display:flex;align-items:center;gap:6px;height:31px;overflow:hidden}
.cs .grp{display:flex}
.cs .grp .card + .card{margin-left:-8px}
.cs .card{visibility:hidden}
.cs .card.on{visibility:visible}
.cs .minus{font:800 14px/1 var(--display);color:var(--muted);visibility:hidden}
.cs .minus.on{visibility:visible}
.cs .wentout{font:800 10px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep);visibility:hidden;white-space:nowrap}
.cs .wentout.on{visibility:visible}
.nums{text-align:right;min-width:48px}
.nums .tot{font:800 20px/1 var(--display);font-variant-numeric:tabular-nums}
.nums .dl{font:700 12px/1.2 var(--display);color:var(--muted);font-variant-numeric:tabular-nums;min-height:15px}
.srow.lead .tot{color:var(--coral)}
.scorefoot{flex:none;padding:10px 24px 20px;display:flex;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .seat.thinking .fan .card,.seat.last .cnt,.seat.last .av,.stock.hot,.pile.hot{animation:none}
  .seat,.hc,.hc .card,.spot,.rav,.race .sarc,.person,.pile .pc{transition:none}
  .ic *,.char *{animation:none!important}
}