@font-face{font-family:'Gloock';font-weight:400;font-display:swap;src:url(fonts/gloock-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Gloock';font-weight:400;font-display:swap;src:url(fonts/gloock-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:'Instrument Sans';font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  /* plum cloth, ivory cards, cherry for the red suits, gold for "it is your move" */
  --plum-1:#5e1d48;
  --plum-2:#3c1131;
  --plum-3:#210717;
  --ivory:#fbf5ea;
  --ink:#241a2d;
  --cherry:#d42a4c;
  --gold:#ffc65c;
  --mist:rgba(251,245,234,.68);
  --line:rgba(251,245,234,.17);
  --rule:rgba(36,26,45,.13);

  --display:'Gloock','Times New Roman',serif;
  --ui:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);

  --cw:clamp(50px,min(15.4vw,13.2vh),96px); /* width of a card in the hand */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
@supports (height:1dvh){
  :root{--cw:clamp(50px,min(15.4vw,13.2dvh),96px)}
}

/* dice.kamagio.com: the same table in a petrol-green cloth */
html[data-site="dice"]{
  --plum-1:#1d5f5c;
  --plum-2:#0f3d3e;
  --plum-3:#061f20;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ui);
  font-size:1rem;
  line-height:1.45;
  color:var(--ivory);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(125% 85% at 50% 36%,var(--plum-1),var(--plum-2) 58%,var(--plum-3));
  background-color:var(--plum-3);
  background-attachment:fixed;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
svg.suit,.icon svg,.chipico{fill:currentColor}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── buttons, fields ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:52px;padding:.7em 1.5em;
  font-weight:600;font-size:1.02rem;line-height:1.2;
  color:var(--ivory);background:rgba(251,245,234,.07);
  border:1.5px solid var(--line);border-radius:999px;
  transition:transform .12s var(--ease),background-color .15s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--gold);border-color:transparent;color:var(--ink)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ivory{background:var(--ivory);border-color:transparent;color:var(--ink)}
.btn.small{min-height:40px;padding:.4em 1em;font-size:.9rem}
.link{
  background:none;border:0;padding:.6em .4em;
  color:var(--mist);font-size:.95rem;
  text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--line);
}
.icon{
  flex:none;width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;border-radius:50%;color:var(--ivory);
}
.icon svg{width:24px;height:24px}
.icon:active{background:rgba(251,245,234,.1)}
label{display:block;font-size:.9rem;font-weight:500;color:var(--mist);margin:0 0 .4rem}
input[type=text],input[type=password]{
  width:100%;min-height:52px;padding:.6em 1em;
  font:500 1.1rem var(--ui);color:var(--ivory);
  background:rgba(0,0,0,.24);border:1.5px solid var(--line);border-radius:16px;
  -webkit-user-select:text;user-select:text;
}
input[type=text]::placeholder{color:rgba(251,245,234,.32)}
input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--gold)}
.sheet input[type=text],.sheet input[type=password]{color:var(--ink);background:#fff;border-color:rgba(36,26,45,.25)}
.sheet input:focus{border-color:var(--ink)}
.sheet label{color:rgba(36,26,45,.7)}
.fielderr{margin:.4rem 0 0;font-size:.9rem;color:var(--gold)}

/* ── home, lobby ─────────────────────────────────────────────────────── */
.screen{min-height:100%}
#home,#lobby{
  display:grid;place-items:center;
  min-height:100vh;min-height:100dvh;
  padding:calc(var(--sat) + 24px) calc(var(--sar) + 22px) calc(var(--sab) + 24px) calc(var(--sal) + 22px);
}
.col{width:100%;max-width:23.5rem;text-align:center}
.hero{position:relative;height:calc(var(--hw)*1.6);margin:0 auto .9rem;--hw:clamp(62px,18vw,84px)}
.hero .card{
  --w:var(--hw);
  position:absolute;left:50%;top:6%;margin-left:calc(var(--hw)/-2);
  transform-origin:50% 130%;
  transform:rotate(var(--r)) translateY(var(--y,0));
  animation:heroDeal .75s var(--ease) both;animation-delay:var(--d);
}
@keyframes heroDeal{from{transform:translateY(-70vh) rotate(-40deg);opacity:0}}
h1{
  margin:0;font:400 clamp(2.9rem,14vw,3.8rem)/1 var(--display);letter-spacing:-.015em;
}
.lead{margin:.7rem auto 1.3rem;max-width:19rem;color:var(--mist);font-size:1.02rem}
#homeForm{text-align:left;display:grid;gap:.85rem}
#homeForm label{margin-bottom:-.35rem}
.joinrow{margin-top:.9rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.joinrow label{margin-bottom:.45rem!important}
.pair{display:grid;grid-template-columns:1fr auto;gap:.6rem}
#code{font:400 1.5rem var(--display);letter-spacing:.24em;text-transform:uppercase;text-align:center;padding-left:1.24em}
.foot{margin-top:1.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.2rem}

.codelabel{margin:0;color:var(--mist);font-size:.95rem}
.code{
  display:block;margin:.1rem auto .9rem;padding:0 0 0 .2em;background:none;border:0;
  font:400 clamp(3rem,16vw,4.2rem)/1.05 var(--display);letter-spacing:.2em;color:var(--ivory);
}
.seats{list-style:none;margin:1.2rem 0 1.1rem;padding:0;text-align:left;border-top:1px solid var(--line)}
.seats li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;
  min-height:54px;padding:.3rem 0;border-bottom:1px solid var(--line);
}
.seats .ava{width:40px;height:40px;font-size:1.15rem}
.seats .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seats .nm small{display:block;font-weight:400;font-size:.84rem;color:var(--mist)}
.seats .free .nm{font-weight:400;color:var(--mist)}
.seats .free .ava{background:none;box-shadow:none;border:1.5px dashed var(--line)}
.opts{display:grid;gap:.6rem;margin:0 0 1.2rem}
.opt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .7rem;color:var(--mist)}
.vdesc{margin:-.25rem 0 .2rem;text-align:left;font-size:.9rem;color:var(--mist)}
.seg{display:inline-flex;padding:3px;border:1.5px solid var(--line);border-radius:999px}
.seg button{
  min-width:56px;min-height:38px;border:0;border-radius:999px;background:none;
  font:400 1.1rem var(--display);color:var(--mist);
}
.seg.text button{padding:0 .95em;font:600 .92rem var(--ui)}
.seg button[aria-pressed=true]{background:var(--ivory);color:var(--ink)}
.seg button:disabled{cursor:default}
#lobby .btn.primary{width:100%}
.hint{margin:.7rem 0 0;color:var(--mist);font-size:.93rem}
#lobby .link{margin-top:1.1rem}

/* ── cards ───────────────────────────────────────────────────────────── */
.card{
  --w:var(--cw);
  position:relative;display:block;flex:none;
  width:var(--w);height:calc(var(--w)*1.42);
  padding:0;border:0;border-radius:calc(var(--w)*.095);
  font-size:var(--w);
  color:var(--ink);
  background:linear-gradient(158deg,#fffdf8,#f5ecdc);
  box-shadow:0 0 0 1px rgba(36,26,45,.16),0 1px 1px rgba(0,0,0,.3),0 .14em .26em -.1em rgba(0,0,0,.6);
}
.card.red{color:var(--cherry)}
/* The queen of spades is the one card everybody watches for. She is a light
   card like the rest (a dark one was easy to overlook on the dark cloth),
   marked by a gold frame. */
.card.queen{
  box-shadow:inset 0 0 0 .045em var(--gold),0 0 0 1px rgba(36,26,45,.16),0 1px 1px rgba(0,0,0,.3),0 .14em .26em -.1em rgba(0,0,0,.6);
}
.card .idx{
  position:absolute;left:.075em;top:.07em;width:.3em;
  display:flex;flex-direction:column;align-items:center;gap:.025em;
}
.card .idx b{display:block;font:700 .3em/1 var(--ui);font-stretch:75%;letter-spacing:-.05em}
.card .idx svg{width:.215em;height:.215em}
.card .idx.flip{left:auto;top:auto;right:.075em;bottom:.07em;transform:rotate(180deg)}
.card .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.card .mid svg{width:.42em;height:.42em}
.card .mid.ace svg{width:.6em;height:.6em}
.card .mid.face i{font:400 .62em/1 var(--display);margin-top:-.06em}
.card .mid.face svg{width:.2em;height:.2em;margin-top:.03em}

/* ── table ───────────────────────────────────────────────────────────── */
#table{
  position:fixed;inset:0;
  display:grid;grid-template-rows:auto 1fr auto auto;grid-template-columns:minmax(0,1fr);
  padding:var(--sat) var(--sar) 0 var(--sal);
  overflow:hidden;
}
.topbar{display:flex;align-items:center;gap:.25rem;padding:6px 8px 0 12px}
.chip{
  flex:none;min-height:36px;padding:0 .85em 0 .95em;border-radius:999px;
  background:rgba(0,0,0,.24);border:1.5px solid var(--line);
  font:400 1.05rem/1 var(--display);letter-spacing:.16em;color:var(--ivory);
}
.roundtag{flex:1;min-width:0;padding-left:.6rem;font-size:.86rem;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.broken{flex:none;width:36px;height:44px;display:grid;place-items:center;color:rgba(251,245,234,.2);transition:color .4s}
.broken svg{width:20px;height:20px}
.broken.on{color:var(--cherry)}

.felt{position:relative;min-height:0}
.ring{
  position:absolute;left:50%;top:50%;
  width:min(94%,calc(var(--cw)*7.2));aspect-ratio:1.18;transform:translate(-50%,-50%);
  border:1.5px solid rgba(251,245,234,.075);border-radius:50%;
  pointer-events:none;
}

.plate{
  position:absolute;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:76px;padding:4px;margin:0;border:0;background:none;
  text-align:center;color:var(--ivory);
}
.plate .who{display:grid;justify-items:center;gap:1px;min-width:0}
.plate[data-pos="1"]{left:6px;top:47%;transform:translateY(-50%)}
.plate[data-pos="3"]{right:6px;top:47%;transform:translateY(-50%)}
.plate[data-pos="2"]{left:50%;top:2px;transform:translateX(-50%)}
.plate[data-pos="2"],.mebar .plate{flex-direction:row;gap:.6rem;text-align:left}
.plate[data-pos="2"] .who,.mebar .plate .who{justify-items:start}
.plate:disabled{cursor:default}
.ava{
  position:relative;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font:400 1.3rem/1 var(--display);
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1.5px var(--line);
  transition:box-shadow .25s;
}
.ava .chipico{
  position:absolute;right:-5px;bottom:-4px;width:20px;height:20px;padding:2.5px;
  border-radius:50%;background:var(--ivory);color:var(--ink);
}
.plate .nm{
  max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.82rem;font-weight:600;line-height:1.3;
}
.plate .nums{display:flex;align-items:baseline;gap:.4rem;line-height:1}
.plate .pts{font:400 1.35rem/1 var(--display)}
.plate .rd{display:inline-flex;align-items:center;gap:.12rem;font-size:.8rem;font-weight:600;color:var(--gold)}
.plate .rd svg{width:.8em;height:.8em}
.plate .sub{font-size:.72rem;color:var(--mist);line-height:1.25;max-width:92px}
.plate .qtag{
  display:inline-flex;align-items:center;gap:.2rem;margin-top:2px;padding:1px 7px 1px 5px;border-radius:999px;
  background:var(--ivory);color:var(--ink);font-size:.72rem;font-weight:700;line-height:1.35;white-space:nowrap;
}
.plate .qtag svg{width:.85em;height:.85em}
.plate.turn .ava{box-shadow:0 0 0 2.5px var(--gold),0 0 0 8px rgba(255,198,92,.2);animation:pulse 1.7s ease-in-out infinite}
.plate.off .ava,.plate.off .nm,.plate.off .nums{opacity:.45}
.plate.off .sub{color:var(--gold)}
@keyframes pulse{50%{box-shadow:0 0 0 2.5px var(--gold),0 0 0 13px rgba(255,198,92,0)}}

.bubble{
  position:fixed;z-index:15;
  font-size:2.1rem;line-height:1;pointer-events:none;
  animation:bubble 2.4s var(--ease) both;
}
@keyframes bubble{
  0%{transform:translate(-50%,10px) scale(.3);opacity:0}
  12%{transform:translate(-50%,-8px) scale(1.15);opacity:1}
  20%,80%{transform:translate(-50%,-6px) scale(1);opacity:1}
  100%{transform:translate(-50%,-22px) scale(1);opacity:0}
}

.trick{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1}
.trick{--tw:calc(var(--cw)*1.2)} /* cards on the table are a little larger than in the hand */
.slot{
  position:absolute;left:calc(var(--tw)/-2);top:calc(var(--tw)*-.71);
  transition:filter .25s;
}
.slot .card{--w:var(--tw)}
.slot[data-pos="0"]{transform:translate(6%,47%) rotate(3deg)}
.slot[data-pos="1"]{transform:translate(-70%,3%) rotate(-6deg)}
.slot[data-pos="2"]{transform:translate(-6%,-47%) rotate(-2deg)}
.slot[data-pos="3"]{transform:translate(70%,-3%) rotate(7deg)}
.trick.decided .slot:not(.win){filter:brightness(.62)}
.slot.win{z-index:3}
.slot.win .card{box-shadow:0 0 0 2.5px var(--gold),0 .14em .3em -.08em rgba(0,0,0,.7)}

.center{
  position:absolute;inset:0;z-index:3;
  display:grid;place-content:center;justify-items:center;gap:.9rem;
  padding:0 90px;text-align:center;pointer-events:none;
}
.center > *{pointer-events:auto}
.center p{margin:0;max-width:15rem}
.center .big{font:400 1.45rem/1.2 var(--display)}
.center .dir{width:40px;height:40px;color:var(--gold)}
.center .dir svg{width:100%;height:100%}
.center .dir.right{transform:scaleX(-1)}
.center .dir.across{transform:rotate(90deg)}
.center .wait{color:var(--mist);font-size:.95rem}
.center .stack{display:grid;gap:.45rem;width:100%}
.center .stack .btn{white-space:normal;background:rgba(33,7,23,.55)}

.mebar{
  position:relative;z-index:4;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;
  padding:0 8px 0 10px;min-height:52px;
}
.mebar .plate{position:static;min-width:0;padding:0}
.mebar .plate .ava{width:42px;height:42px;font-size:1.2rem}
.mebar .plate .nm{max-width:78px}
.status{
  margin:0;justify-self:center;
  padding:.5em 1em;border-radius:999px;
  font-size:.95rem;font-weight:500;line-height:1.25;text-align:center;color:var(--mist);
  transition:background-color .2s,color .2s;
}
.status.go{background:var(--gold);color:var(--ink);font-weight:600}
.status:empty{visibility:hidden}
.reactbar{
  position:fixed;z-index:16;
  display:flex;gap:2px;padding:6px;border-radius:999px;
  background:var(--ivory);box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  animation:rise .18s var(--ease);
}
.reactbar button{width:46px;height:46px;border:0;background:none;border-radius:50%;font-size:1.6rem;line-height:1}
.reactbar button:active{background:var(--rule)}

.hand{
  position:relative;z-index:3;
  height:calc(var(--cw)*1.9 + var(--sab));
  touch-action:none;
}
.hand .card{
  position:absolute;left:50%;top:calc(var(--cw)*.4);margin-left:calc(var(--cw)/-2);
  transition:transform .3s var(--ease),filter .2s,box-shadow .2s;
  will-change:transform;
}
.hand .card.dim{filter:brightness(.56) saturate(.75)}
.hand .card.sel{box-shadow:0 0 0 2.5px var(--gold),0 .2em .36em -.08em rgba(0,0,0,.7)}
.hand .card.new::after{
  content:"";position:absolute;left:50%;top:-.14em;width:.11em;height:.11em;margin-left:-.055em;
  border-radius:50%;background:var(--gold);
}
.hand .card.shake{animation:shake .3s}
@keyframes shake{25%{translate:-5px 0}75%{translate:5px 0}}

/* ── Vrhcáby: the score sheet and the dice ───────────────────────────── */
#dice{
  position:fixed;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);
  padding:var(--sat) var(--sar) var(--sab) var(--sal);
}
.dsheet{
  width:calc(100% - 20px);max-width:34rem;margin:8px auto 0;
  background:var(--ivory);color:var(--ink);border-radius:18px;
  overflow:auto;overscroll-behavior:contain;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.7);
}
.dpad{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums}
.dpad th,.dpad td{height:clamp(25px,4.2vh,38px);padding:0 .25rem;border-bottom:1px solid var(--rule);text-align:center}
.dpad thead th{
  position:sticky;top:0;z-index:1;height:36px;background:var(--ivory);
  font-size:.82rem;font-weight:600;border-bottom:1.5px solid var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dpad th:first-child{width:37%;padding-left:.85rem;text-align:left;font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpad td{font:400 1.1rem/1 var(--display)}
.dpad .me{background:rgba(255,198,92,.22)}
.dpad thead th.me{background:#fde9c0}
.dpad thead th.now{box-shadow:inset 0 -3px 0 var(--cherry)}
.dpad td.zero{color:rgba(36,26,45,.3)}
.dpad td.can{font:500 .92rem/1 var(--ui);color:rgba(36,26,45,.36)}
.dpad td.can.mine{color:var(--cherry);font-weight:700;cursor:pointer}
.dpad td.can.mine.nil{color:rgba(36,26,45,.42);font-weight:500}
.dpad td.can.pick{background:var(--ink);color:var(--ivory)}
.dpad td.fresh{animation:fresh 1.6s ease-out}
@keyframes fresh{from{background:var(--gold)}}
.dpad tr.bonus th,.dpad tr.bonus td{border-bottom:1.5px solid var(--ink)}
.dpad tr.bonus td{font:500 .8rem/1 var(--ui);color:rgba(36,26,45,.62)}
.dpad tr.bonus td.got{color:var(--cherry);font-weight:700}
.dpad tfoot th,.dpad tfoot td{position:sticky;bottom:0;height:40px;background:var(--ivory);border-bottom:0;border-top:1.5px solid var(--ink)}
.dpad tfoot td{font-size:1.45rem}
.dpad tfoot td.me{background:#fde9c0}

.dtray{display:grid;justify-items:center;gap:8px;padding:8px 12px 12px}
.dtray .status{min-height:2.3em;display:grid;place-items:center;padding:.3em 1em}
/* The tray: dice are real cubes that roll across it, bounce off the rim and off each other. */
.tray{
  position:relative;width:100%;max-width:26rem;height:clamp(124px,20vh,176px);
  border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 150% at 50% 25%,rgba(0,0,0,.14),rgba(0,0,0,.4));
  box-shadow:inset 0 3px 12px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(251,245,234,.09);
}
.tray canvas{display:block;width:100%;height:100%;cursor:pointer}
.tray.off canvas{cursor:default}
.hero.dicehero{height:clamp(130px,38vw,170px)}
.hero.dicehero canvas{display:block;width:100%;height:100%;animation:diceDrop .8s var(--ease) both}
@keyframes diceDrop{from{transform:translateY(-60vh) rotate(-12deg);opacity:0}}
.dacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:26rem}
.dacts .btn{padding-left:.6em;padding-right:.6em}
.rank{width:100%;margin-top:1rem;border-collapse:collapse}
.rank td{padding:.5rem .2rem;border-bottom:1px solid var(--rule)}
.rank td:last-child{text-align:right;font:400 1.5rem/1 var(--display)}
.rank tr.me td{font-weight:700}
.rank tr.best td:last-child{color:var(--cherry)}

/* ── the portal: game tiles, picker, series, rewards ─────────────────── */
.pick{margin:.7rem 0 -.2rem;font-size:.9rem;font-weight:500;color:var(--mist)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.tile{
  display:grid;justify-items:start;gap:.15rem;padding:.8rem .85rem;text-align:left;
  color:var(--ivory);background:rgba(251,245,234,.07);border:1.5px solid var(--line);border-radius:18px;
  transition:transform .12s var(--ease),background-color .15s;
}
.tile:active{transform:scale(.97);background:rgba(251,245,234,.13)}
.tile svg{width:26px;height:26px;margin-bottom:.25rem;color:var(--gold)}
.tile b{font:400 1.25rem/1.15 var(--display)}
.tile small{font-size:.8rem;color:var(--mist)}
.minidie{
  width:26px;height:26px;margin-bottom:.25rem;padding:4px;border-radius:6px;background:var(--gold);
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);
}
.minidie i{width:4px;height:4px;border-radius:50%;background:var(--ink);place-self:center}
.minidie i:nth-child(1){grid-area:1/1}.minidie i:nth-child(2){grid-area:1/3}.minidie i:nth-child(3){grid-area:2/2}
.minidie i:nth-child(4){grid-area:3/1}.minidie i:nth-child(5){grid-area:3/3}
.gpick{display:flex;align-items:center;gap:.6rem;color:var(--ivory)}
.gpick b{font:400 1.2rem/1 var(--display)}
.menulist.games button{justify-content:flex-start;gap:.9rem;min-height:64px;padding:.5rem .1rem}
.menulist.games i{flex:none;width:30px;display:grid;place-items:center;color:var(--cherry)}
.menulist.games i svg{width:26px;height:26px}
.menulist.games .minidie{margin:0;background:var(--ink)}
.menulist.games .minidie i{background:var(--ivory)}
.menulist.games b{font-weight:600}
.menulist.games small{display:block;font-weight:400;font-size:.84rem;color:rgba(36,26,45,.62)}
.menulist.games button.on{background:rgba(255,198,92,.22)}
.series{margin-top:1.1rem}
.series h3{margin:0}
.award{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin-top:1rem}
.award span{padding:.3em .75em;border-radius:999px;background:var(--gold);color:var(--ink);font-size:.9rem;font-weight:600}
.level{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.2rem .8rem;margin-top:1rem}
.level b{font:400 1.2rem/1 var(--display)}
.level .bar{height:8px;border-radius:999px;background:var(--rule);overflow:hidden}
.level .bar i{display:block;height:100%;border-radius:999px;background:var(--cherry)}
.level small{grid-column:2;font-size:.8rem;color:rgba(36,26,45,.62)}
.cups{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.cups span{display:grid;justify-items:center;font-size:1.9rem;line-height:1.1}
.cups small{font-size:.72rem;color:rgba(36,26,45,.66)}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.5rem}
.badges div{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;align-items:center;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:14px;opacity:.42}
.badges div.got{opacity:1;background:rgba(255,198,92,.2);border-color:rgba(255,198,92,.7)}
.badges i{grid-row:span 2;font-style:normal;font-size:1.5rem;filter:grayscale(1)}
.badges .got i{filter:none}
.badges b{font-size:.88rem;font-weight:600;line-height:1.2}
.badges small{font-size:.74rem;line-height:1.25;color:rgba(36,26,45,.7)}
.tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.tabs button{min-height:34px;padding:0 .8em;border:1px solid var(--rule);border-radius:999px;background:none;color:var(--ink);font-size:.86rem;font-weight:500}
.tabs button[aria-pressed=true]{background:var(--ink);color:var(--ivory);border-color:transparent}
.ladder th{padding:0 .2rem .3rem;font-size:.78rem;font-weight:500;text-align:right;color:rgba(36,26,45,.6)}
.ladder td:first-child{width:2rem;color:rgba(36,26,45,.6)}
.ladder td:nth-child(2){display:flex;align-items:center;gap:.6rem;font-weight:600}
.ladder td small{display:block;font-weight:400;font-size:.78rem;color:rgba(36,26,45,.62)}
.ladder .ava{width:34px;height:34px;font-size:1rem;color:var(--ivory);background-color:var(--ink)}
.rank.ladder td:last-child{font-size:1.2rem}

/* the screen of a game module: the shell gives it the room below the top bar */
#gscreen{
  position:fixed;inset:0;
  display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  padding:var(--sat) var(--sar) var(--sab) var(--sal);
}
.groot{position:relative;min-height:0}
.card.back{
  background:
    repeating-linear-gradient(45deg,transparent 0 .055em,rgba(251,245,234,.13) .055em .075em),
    repeating-linear-gradient(-45deg,transparent 0 .055em,rgba(251,245,234,.13) .055em .075em),
    linear-gradient(158deg,#6a2152,#3c1131);
  box-shadow:inset 0 0 0 .04em var(--ivory),0 0 0 1px rgba(0,0,0,.35),0 .14em .26em -.1em rgba(0,0,0,.6);
}

/* ── profiles ────────────────────────────────────────────────────────── */
.ava.pic{background-size:cover;background-position:center}
.acct{
  display:flex;align-items:center;gap:.8rem;padding:.55rem .6rem .55rem .7rem;
  border:1.5px solid var(--line);border-radius:18px;background:rgba(0,0,0,.2);
}
.acct .who{min-width:0;margin-right:auto;font-weight:600;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .who small{display:block;font-weight:400;font-size:.84rem;color:var(--mist)}
.acctform{display:grid;gap:.5rem;margin-top:1rem}
.acctform label{margin:.4rem 0 -.2rem}
.phead{display:flex;align-items:center;gap:1rem}
.phead h2{margin:0}
.ava.big{width:84px;height:84px;flex:none;border:0;padding:0;font-size:2.3rem;color:var(--ivory);background-color:var(--ink);box-shadow:none;cursor:pointer}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:.5rem;margin-top:1.1rem}
.statrow div{padding:.6rem .4rem;border:1px solid var(--rule);border-radius:14px;text-align:center}
.statrow b{display:block;font:400 1.55rem/1.1 var(--display)}
.statrow span{font-size:.8rem;color:rgba(36,26,45,.66)}
.glist{list-style:none;margin:.5rem 0 0;padding:0;max-height:36vh;overflow:auto;overscroll-behavior:contain}
.glist li{padding:.6rem 0;border-bottom:1px solid var(--rule)}
.gtop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.gtop b{font-weight:600}
.gtop span{font-size:.86rem;color:rgba(36,26,45,.62);white-space:nowrap}
.gpl{display:flex;flex-wrap:wrap;gap:.15rem .9rem;margin-top:.25rem;font-size:.95rem;color:rgba(36,26,45,.78)}
.gpl .me{font-weight:700;color:var(--ink)}
.gpl .won::before{content:"★ ";color:var(--cherry)}
.tava{display:inline-block;width:18px;height:18px;margin-right:4px;border-radius:50%;background-size:cover;background-position:center;vertical-align:-4px}

/* ── sheets ──────────────────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;z-index:20;
  display:grid;align-items:end;justify-items:center;
  background:rgba(20,5,14,.62);
  animation:fade .2s both;
}
.sheet{
  width:100%;max-width:30rem;max-height:calc(100dvh - var(--sat) - 28px);overflow:auto;
  padding:1.5rem 1.35rem calc(1.35rem + var(--sab));
  background:var(--ivory);color:var(--ink);
  border-radius:26px 26px 0 0;
  box-shadow:0 -12px 50px rgba(0,0,0,.5);
  animation:rise .32s var(--ease) both;
  overscroll-behavior:contain;
}
@media (min-width:600px) and (min-height:560px){
  .overlay{align-items:center}
  .sheet{border-radius:26px;padding-bottom:1.5rem}
}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(28px);opacity:0}}
.sheet h2{margin:0 0 .3rem;font:400 2rem/1.1 var(--display)}
.sheet h3{margin:1.3rem 0 0;font:400 1.3rem/1.2 var(--display)}
.sheet p{margin:.4rem 0 0}
.sheet .note{color:var(--cherry);font-weight:600}
.sheet .quiet{color:rgba(36,26,45,.66);font-size:.93rem}
.sheet .btn{color:var(--ink);background:none;border-color:rgba(36,26,45,.22)}
.sheet .btn.primary{background:var(--ink);color:var(--ivory);border-color:transparent}
.sheet .btn.danger{color:var(--cherry);border-color:rgba(212,42,76,.4)}
.sheet .acts{display:grid;gap:.6rem;margin-top:1.2rem}
.sheet .acts.two{grid-template-columns:1fr 1fr}
.sheet :focus-visible{outline-color:var(--ink)}
.sheet ul.rules{margin:.9rem 0 0;padding:0 0 0 1.1rem;display:grid;gap:.55rem}
.sheet ul.rules li::marker{color:var(--cherry)}

/* the score pad: ruled like the paper one next to a real card table */
.pad{width:100%;margin-top:1rem;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.pad th,.pad td{padding:.42rem .2rem;text-align:center;border-bottom:1px solid var(--rule)}
.pad thead th{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1.5px solid var(--ink)}
.pad th:first-child{width:3.5rem;text-align:left;font-weight:500;font-size:.82rem;color:rgba(36,26,45,.6)}
.pad td{font:400 1.15rem/1.2 var(--display)}
.pad td.zero{color:rgba(36,26,45,.35)}
.pad tr.moon td{color:var(--cherry)}
.pad tfoot td,.pad tfoot th{border-bottom:0;border-top:1.5px solid var(--ink);padding-top:.55rem}
.pad tfoot td{font-size:1.7rem}
.pad .me{background:rgba(255,198,92,.2)}
.pad tfoot td.best{color:var(--cherry)}
.padwrap{max-height:42vh;overflow:auto;margin:0 -.2rem}
.readyrow{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.9rem;font-size:.9rem;color:rgba(36,26,45,.66)}
.readyrow .ok{color:var(--ink);font-weight:600}
.lastrow{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1.1rem;justify-items:center}
.lastrow .card{--w:min(19vw,84px)}
.lastrow figure{margin:0;display:grid;justify-items:center;gap:.4rem;font-size:.84rem;min-width:0;max-width:100%}
.lastrow figcaption{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lastrow .won figcaption{font-weight:700}
.menulist{display:grid;margin-top:.6rem}
.menulist button{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:54px;padding:0 .1rem;background:none;border:0;border-bottom:1px solid var(--rule);
  font-size:1.02rem;font-weight:500;text-align:left;color:var(--ink);
}
.menulist button span{color:rgba(36,26,45,.6);font-weight:400}
.menulist button.danger{color:var(--cherry);border-bottom:0}

/* ── notices ─────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--cw)*2.1 + var(--sab) + 62px);z-index:30;
  max-width:min(88vw,24rem);padding:.65em 1.1em;border-radius:16px;
  background:var(--ivory);color:var(--ink);font-size:.95rem;font-weight:500;text-align:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
  transition:transform .25s var(--ease),opacity .25s;
}
.toast.on{transform:translate(-50%,0);opacity:1}
.conn{
  position:fixed;left:50%;top:calc(var(--sat) + 8px);z-index:40;transform:translateX(-50%);
  padding:.5em 1em;border-radius:999px;white-space:nowrap;
  background:var(--gold);color:var(--ink);font-size:.9rem;font-weight:600;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.7);
}

@media (min-width:700px){
  .plate[data-pos="1"]{left:calc(50% - var(--cw)*4.6)}
  .plate[data-pos="3"]{right:calc(50% - var(--cw)*4.6)}
  .mebar{width:min(100%,calc(var(--cw)*10.5));margin:0 auto}
  .center{padding:0 calc(50% - var(--cw)*3)}
}

.conn.update{top:auto;bottom:calc(var(--sab) + 10px);border:0;white-space:normal;max-width:calc(100% - 24px);z-index:45}

/* phone held sideways: the table is short, so the top player moves aside */
@media (max-height:480px) and (orientation:landscape){
  .plate[data-pos="1"]{left:calc(50% - var(--cw)*5.4)}
  .plate[data-pos="3"]{right:calc(50% - var(--cw)*5.4)}
  .plate[data-pos="2"]{left:calc(50% - var(--cw)*2.7)}
  .trick{--tw:var(--cw)}
  .topbar{padding-top:2px}
  .mebar{min-height:44px}
  .center{padding:0 30%;gap:.4rem}
  .center .big{font-size:1.1rem}
  .center .dir{width:26px;height:26px}
}

/* "Animace: vypnuté" in the menu */
html.still *,html.still *::before,html.still *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}