/* Handeware web-game shell (from arcade-web/_kit/kit.css; holdem: retinted to a card-table felt and
   cream cards, the tile, season, daily and page-scroll parts dropped). System type only, no web fonts. */
:root{
  --felt:#145a3c;--felt-hi:#1d7650;--felt-lo:#0a2e1f;--ink:#fbf7ee;--ink-soft:#cfe5d8;--ink-dim:#8fb5a0;
  --hair:rgba(255,236,190,.3);--gold:#f2b33d;--gold-hi:#ffd986;--gold-lo:#c4840f;
  --paper:#fffaf0;--paper-2:#f2ead8;--paper-ink:#25221d;--paper-soft:#756b5e;--blue:#2c66a8;--red:#c2362b;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --round:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:1rem/1.4 var(--sans);color:var(--ink);background:radial-gradient(ellipse at 50% 38%,var(--felt-hi),var(--felt) 55%,var(--felt-lo));
  -webkit-tap-highlight-color:transparent;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}

/* buttons: the gold pill, plain links, round jewels */
.pill{border:0;border-radius:999px;padding:.6em 1.8em;min-height:48px;font:800 1.15em/1.1 var(--round);color:#3a2504;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));box-shadow:0 1px 0 #fff8 inset,0 4px 0 #7a4d06,0 8px 16px rgba(0,0,0,.35)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 #fff8 inset,0 2px 0 #7a4d06,0 4px 10px rgba(0,0,0,.3)}
.pill.ghost{background:rgba(255,255,255,.1);color:var(--ink);box-shadow:inset 0 0 0 2px var(--hair)}
.pill:disabled{opacity:.45;cursor:default}
.link{background:none;border:0;color:var(--gold-hi);text-decoration:underline;text-underline-offset:.2em;padding:.4em .6em;min-height:44px}
.jewel{width:2.7em;height:2.7em;min-width:44px;min-height:44px;border-radius:50%;border:2px solid var(--hair);display:grid;place-items:center;padding:0;background:rgba(0,0,0,.22)}
.jewel svg{width:1.4em;height:1.4em;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.row:focus-visible,.choice:focus-visible,.x:focus-visible,.toggle:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}

/* cards (the popups): cream paper over the felt, always above the table */
.veil{position:fixed;inset:0;background:rgba(3,20,17,.62);display:grid;place-items:center;z-index:20;padding:.5em}
.card{background:var(--paper);color:var(--paper-ink);border-radius:1.1em;box-shadow:0 20px 50px rgba(0,0,0,.5);
  width:min(25em,100%);max-height:calc(100% - .2em);overflow:auto;padding:1.1em 1.3em 1em;position:relative}
.card h2{font:800 1.5em/1.1 var(--round);color:var(--felt);text-align:center;margin:0 0 .6em;padding:0 1.2em}
.card p{margin:.2em 0 .6em}
.card .x{position:absolute;right:.4em;top:.4em;width:44px;height:44px;border-radius:50%;border:0;background:none;color:var(--paper-ink)}
.card .x svg{width:1.1em;height:1.1em;fill:none;stroke:var(--paper-soft);stroke-width:2.4;stroke-linecap:round;vertical-align:middle}
.card .actions{display:flex;flex-direction:column;align-items:center;gap:.4em;margin-top:.8em}
.card .link{color:var(--blue)}
.card .pill.ghost{color:var(--paper-ink);box-shadow:inset 0 0 0 2px rgba(43,38,32,.25);background:none}
.rows{display:flex;flex-direction:column;gap:.45em}
.row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.55em .9em;min-height:48px;border-radius:.8em;background:var(--paper-2);border:0;width:100%;text-align:left;color:var(--paper-ink)}
.row b{font-weight:800}
.row small{display:block;color:var(--paper-soft);font-size:.82em}
.row:disabled{opacity:.55;cursor:default}
.toggle{width:3.2em;height:1.8em;min-width:52px;min-height:30px;border-radius:999px;border:0;background:#cfc6b4;position:relative;flex:none;padding:0}
.toggle::after{content:"";position:absolute;top:.2em;left:.2em;width:1.4em;height:1.4em;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.toggle[aria-pressed=true]{background:var(--felt-hi)}
.toggle[aria-pressed=true]::after{left:1.6em}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:.4em 1.4em;margin:.2em 0 .6em;color:var(--paper-soft);text-align:center;font-size:.9em}
.stats b{display:block;color:var(--paper-ink);font:800 1.6em/1.1 var(--round)}
.note{color:var(--paper-soft);font-size:.9em;text-align:center;margin:.3em 0}
.toast{position:fixed;left:50%;top:4.2em;transform:translateX(-50%);background:var(--paper);color:var(--paper-ink);border-radius:999px;padding:.5em 1.2em;z-index:30;
  box-shadow:0 6px 20px rgba(0,0,0,.35);font-weight:700;white-space:nowrap;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation-duration:.01s!important}}
.store-badge{display:inline-flex;height:52px;align-items:center}
.store-badge img{height:52px;width:auto;display:block}

/* Handeware web-game shell v1: the way back to the arcade, the same in every
   game. Shown only while the game's home screen is (#home without [hidden]). */
.hw-arcade{display:none;position:fixed;z-index:50;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));align-items:center;gap:6px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#121417;font:700 17px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.hw-arcade:hover{background:#fff}
.hw-arcade svg{width:18px;height:18px;flex:none}
body:has(#home:not([hidden])) .hw-arcade{display:inline-flex}
@media (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:max(64px,calc(env(safe-area-inset-top) + 58px))!important}}
html.hw-embed .hw-arcade{display:none!important}

/* hw-nav v3 (owner, 2026-10-28: "consistent nav layer on the games"). The way
   back to the arcade shows on every screen that is not play: the home screen and
   any card (pause, result, how to play, settings, stats). During play it hides so
   it never covers the board; Pause is always one tap away. In the console it
   never shows: the console's Close is the way back. Cards fit a short screen,
   rows in two columns, so no button ever hides below the fold. */
html:not(.hw-embed) body:has(> .veil) .hw-arcade{display:inline-flex;z-index:21}
@media (max-width:760px){html:not(.hw-embed) body:has(> .veil) .veil{padding-top:max(64px,calc(env(safe-area-inset-top) + 58px))}}
@media (max-height:480px){
  html:not(.hw-embed) .veil{padding:.4em .5em .4em max(136px,calc(env(safe-area-inset-left) + 126px))}
  html.hw-embed .veil{padding:.4em}
  .card{padding:.8em 1em .7em;max-height:calc(100% - .2em)}
  .card h2{margin:0 0 .4em;font-size:1.3em}
  .card:has(.row ~ .row ~ .row){width:min(40em,100%)}
  .card:has(> .row ~ .row ~ .row), .card :not(.row):has(> .row ~ .row ~ .row){display:grid;grid-template-columns:1fr 1fr;gap:.4em .6em;align-content:start}
  .card:has(> .row ~ .row ~ .row) > :not(.row){grid-column:1/-1}
  .card .row{padding:.5em .7em;min-height:44px}
  .card .row small{display:none}
  .card .actions{margin-top:.5em;flex-direction:row;flex-wrap:wrap;justify-content:center}
}
/* A card's own buttons stay in view on any screen: a long how-to scrolls under them. */
.card .actions{position:sticky;bottom:-1.2em;z-index:1;padding:.5em 0 .6em;background:inherit}
/* A toast is a note, never a lid: taps go through it (found by coloring-mandala and flag-quiz). */
.toast{pointer-events:none}
html.hw-embed .hw-arcade{display:none!important}
/* /hw-nav v3 */