/* Handeware web kit, Reversi's copy (from arcade-web/_kit/kit.css): the shared
   pieces (pills, jewels, cards, rows, toggles, toast, the Arcade link) recoloured
   light and calm. No web fonts: system type only. */
:root{
  --paper:#F3F5F8;--paper-hi:#FFFFFF;--ink:#1C2530;--ink-soft:#4B5868;--ink-dim:#7A8696;
  --hair:rgba(28,37,48,.14);--accent:#2F6FDE;--accent-lo:#2358B8;--accent-soft:#E3ECFB;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:18px/1.45 var(--sans);color:var(--ink);background:var(--paper);-webkit-tap-highlight-color:transparent;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout: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}

.title{font-weight:800;letter-spacing:-.01em;margin:0;line-height:1;color:var(--ink)}

/* buttons: the accent pill, plain links, round jewels */
.pill{border:0;border-radius:999px;padding:.7em 2.2em;min-height:48px;font-weight:700;font-size:1.1em;color:#fff;
  background:var(--accent);box-shadow:0 2px 0 var(--accent-lo),0 6px 16px rgba(47,111,222,.25)}
.pill:hover{background:#3A7AE8}
.pill:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-lo),0 3px 8px rgba(47,111,222,.2)}
.pill.quiet{background:var(--paper-hi);color:var(--accent);box-shadow:0 0 0 1.5px var(--accent) inset}
.link{background:none;border:0;color:var(--accent);text-decoration:underline;text-underline-offset:.2em;padding:.4em .6em;min-height:44px}
.jewel{width:2.9em;height:2.9em;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;padding:0;
  background:var(--paper-hi);box-shadow:0 2px 8px rgba(28,37,48,.08)}
.jewel svg{width:1.4em;height:1.4em;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jewel:disabled{opacity:.4;cursor:default}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.choice:focus-visible,.row:focus-visible,.x:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* cards */
.veil{position:fixed;inset:0;background:rgba(20,28,38,.42);display:grid;place-items:center;z-index:20;padding:12px;animation:fade .18s}
.card{background:var(--paper-hi);border-radius:20px;box-shadow:0 20px 50px rgba(20,28,38,.28);width:min(24em,100%);max-height:calc(100% - 8px);
  overflow:auto;padding:1.2em 1.3em 1em;position:relative;animation:rise .22s cubic-bezier(.2,.9,.3,1.2)}
.card h2{font:800 1.45em/1.15 var(--sans);text-align:center;margin:0 1.4em .6em}
.card p{margin:.3em 0}
.card .x{position:absolute;right:.5em;top:.5em;width:44px;height:44px;border-radius:50%;border:0;background:var(--paper)}
.card .x svg{width:1.1em;height:1.1em;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;vertical-align:middle}
.card .actions{display:flex;flex-direction:column;align-items:center;gap:.35em;margin-top:.9em}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.97)}}
.rows{display:flex;flex-direction:column;gap:.45em}
.row{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.6em .9em;min-height:48px;border-radius:12px;background:var(--paper);border:0;width:100%;text-align:left}
.row small{display:block;color:var(--ink-soft);font-size:.8em}
.choices{display:flex;gap:.4em;flex-wrap:wrap;justify-content:center}
.choice{border:1.5px solid var(--hair);background:var(--paper-hi);border-radius:12px;padding:.45em .9em;min-height:46px;color:var(--ink);font-weight:600}
.choice[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.toggle{width:3em;height:1.7em;border-radius:999px;border:0;background:#C9D1DC;position:relative;flex:none;padding:0}
.toggle::after{content:"";position:absolute;top:.2em;left:.2em;width:1.3em;height:1.3em;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle[aria-pressed=true]{background:var(--accent)}
.toggle[aria-pressed=true]::after{left:1.5em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;margin:.2em 0 .6em;color:var(--ink-soft);text-align:center;font-size:.85em}
.stats b{display:block;color:var(--ink);font:800 1.6em/1.1 var(--sans)}
.note{color:var(--ink-soft);font-size:.9em;text-align:center}
.toast{position:fixed;left:50%;bottom:2em;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:.6em 1.2em;z-index:30;white-space:nowrap}
.foot{position:absolute;bottom:max(.4em,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:.72em;color:var(--ink-dim)}
.foot a{color:var(--ink-soft)}
@media (max-width:420px){body{font-size:16px}}
@media (min-width:700px) and (min-height:700px) and (pointer:coarse){body{font-size:21px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!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}