/* Board Games: one stylesheet for the hub and the seven games. The bar, sheets, seats and the article under the board
   follow Card Games (src/card-games/cg.css) so the two listings feel like one family; the boards, pieces, dice,
   dominoes, fleets and the Ludo board are drawn here and by js/views/<game>.js. The looks (Walnut, Slate, and the Pro
   Rosewood, Seaside and Midnight) are html[data-bg-look]. */
:root{
  --t1:#1f6b47;--t2:#143d2b;--t3:#0a2419;
  --fr1:#8a5a34;--fr2:#5a3519;--sqa:#ecd9b4;--sqb:#7a4c2a;--field:#2f7a52;--field2:#256644;--line:rgba(0,0,0,.42);
  --pta:#e8d6b0;--ptb:#8c3b2e;
  --ink:#f4f1ea;--muted:rgba(244,241,234,.84);--accent:#f2c14e;
  --page:#0b3b26;--paper:#f7f5ef;--text:#1d2420;--sub:#4f5b55;--rule:#dcd8cc;--link:#0f6b45;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sh-bg:#f2f2f7;--sh-card:#fff;--sh-ink:#1c1c1e;--sh-sub:#636366;--sh-line:rgba(60,60,67,.16);--tint:#0f6b45;--on-tint:#fff;--good:#1f8a4c;--bad:#c0362c;
  --sys:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dark:#2a2422;--dark-hi:#5a4f4a;--light:#f3eadb;--light-lo:#c9b89b;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#121815;--text:#e8ece9;--sub:#a9b4ae;--rule:#2a332e;--link:#7fd1a6;--sh-bg:#1c1c1e;--sh-card:#2c2c2e;--sh-ink:#f2f2f7;--sh-sub:#aeaeb2;--sh-line:rgba(255,255,255,.14);--tint:#4cc38a;--on-tint:#06210f;--good:#5fd08f;--bad:#ff8a7d;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#121815;--text:#e8ece9;--sub:#a9b4ae;--rule:#2a332e;--link:#7fd1a6;--sh-bg:#1c1c1e;--sh-card:#2c2c2e;--sh-ink:#f2f2f7;--sh-sub:#aeaeb2;--sh-line:rgba(255,255,255,.14);--tint:#4cc38a;--on-tint:#06210f;--good:#5fd08f;--bad:#ff8a7d;color-scheme:dark}
:root[data-bg-look="slate"]{--t1:#3a4148;--t2:#20262c;--t3:#101418;--fr1:#5d666f;--fr2:#353c43;--sqa:#d9dde1;--sqb:#56616c;--field:#3f6f5f;--field2:#335b4e;--pta:#cfd5da;--ptb:#4b5a68}
:root[data-bg-look="rosewood"]{--t1:#6b231e;--t2:#3a100d;--t3:#1d0705;--fr1:#7b2f27;--fr2:#3f1410;--sqa:#f0d9c0;--sqb:#7b2f27;--field:#2e6b4c;--field2:#245a3f;--pta:#f0dcc2;--ptb:#5d1b16}
:root[data-bg-look="seaside"]{--t1:#2b6f80;--t2:#1d4a5a;--t3:#0f2b35;--fr1:#e2d2b0;--fr2:#b49c70;--sqa:#fbf3e2;--sqb:#5f9fb3;--field:#5b9fae;--field2:#4b8c9b;--pta:#fbf0da;--ptb:#e07a5f;--line:rgba(0,40,60,.38)}
:root[data-bg-look="midnight"]{--t1:#232b52;--t2:#0d1126;--t3:#05070f;--fr1:#2e3866;--fr2:#141a36;--sqa:#c9d1ec;--sqb:#3a4680;--field:#2a3a6e;--field2:#22305c;--pta:#c9d1ec;--ptb:#b2475a;--accent:#ffd36b}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--text);font:16px/1.6 var(--sys);-webkit-text-size-adjust:100%}
a{color:var(--link)}
[hidden]{display:none!important}

/* ---- the table and its bar (as Card Games) ---- */
.game{position:relative;background:var(--t2) radial-gradient(ellipse at 50% 0%,var(--t1) 0%,var(--t2) 68%,var(--t3) 100%);color:var(--ink);min-height:100vh;min-height:100svh;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));overflow:hidden}
.top{display:flex;align-items:center;gap:8px;min-height:56px;padding:6px 0;max-width:1240px;margin:0 auto}
.brand{color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;display:inline-flex;align-items:center;min-height:44px;padding:0 6px 0 4px;border-radius:12px;white-space:nowrap}
.brand:focus-visible,.gsw:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gsw{appearance:none;border:0;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 12px;margin-right:auto;border-radius:22px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);color:var(--ink);font:700 15px var(--sys);cursor:pointer;white-space:nowrap}
.gsw svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stats{display:flex;gap:2px;font-variant-numeric:tabular-nums}
.stat{display:flex;flex-direction:column;align-items:center;min-width:48px;line-height:1.15;padding:0 2px}
.stat span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.stat b{font-size:18px;font-weight:700;color:var(--ink);white-space:nowrap}
.tools{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:4px max(6px,env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom));background:rgba(4,14,10,.7);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 -.5px 0 rgba(255,255,255,.16)}
.tb{appearance:none;border:0;background:none;color:var(--ink);font:600 11px/1.1 var(--sys);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:0 4px;border-radius:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s,background-color .15s;position:relative}
.tb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tb>span{white-space:nowrap}
.tb:active{transform:scale(.92);background:rgba(255,255,255,.1)}
.tb:disabled{opacity:.42;cursor:default;transform:none}
.tb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (hover:hover){.tb:not(:disabled):hover{background:rgba(255,255,255,.1)}}
@media (min-width:700px){
  .tools{position:static;display:flex;gap:8px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .tb{flex-direction:row;gap:7px;font-size:15px;padding:0 16px 0 13px;min-height:44px;border-radius:22px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18)}
  .tb svg{width:19px;height:19px}
  .stats{margin:0 6px}
}
@media (min-width:700px) and (max-width:1040px){.tb{padding:0 12px;min-width:46px}.tb>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-height:520px) and (min-width:560px) and (max-width:699.9px){.tools{position:static;display:flex;gap:6px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.tb{min-width:46px;min-height:44px;border-radius:22px;background:rgba(0,0,0,.22)}.tb>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.top{min-height:48px;padding:2px 0}.stats{display:none}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,8px);width:max-content;max-width:calc(100vw - 32px);background:rgba(28,28,30,.94);color:#fff;padding:10px 16px;border-radius:14px;font:600 15px/1.3 var(--sys);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:2100;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:700px){.toast{bottom:34px}}

/* ---- the arena: seats, the stage the board is drawn in, the coach ---- */
.arena{display:flex;flex-direction:column;max-width:1240px;margin:0 auto;height:calc(100svh - 68px - 58px - env(safe-area-inset-bottom));min-height:420px;padding-bottom:6px}
@media (min-width:700px){.arena{height:calc(100svh - 70px);min-height:520px;padding-bottom:14px}}
@media (max-height:520px) and (min-width:560px){.arena{height:calc(100svh - 52px);min-height:300px}}
.seats{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:46px;flex:none;flex-wrap:wrap}
.seats:empty{min-height:0}
#seatsTop{transform:translateY(var(--gap,0px))}
#seatsBottom,.arena>.coach{transform:translateY(calc(-1 * var(--gap,0px)))}
.stage{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.coach{margin:6px auto 0;min-height:22px;max-width:640px;padding:0 6px;text-align:center;font:600 14px/1.35 var(--sys);color:var(--muted);flex:none;text-wrap:balance}
.coach:empty{display:none}
.coach b{color:var(--ink)}
/* wide screens: the seats and the coach in a column beside the board */
@media (min-aspect-ratio:5/4){
  .arena{display:grid;grid-template-columns:minmax(150px,230px) 1fr;grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". stage" "st stage" "co stage" "sb stage" ". stage";column-gap:14px}
  #seatsTop{grid-area:st;flex-direction:column;align-items:stretch}
  #seatsBottom{grid-area:sb;flex-direction:column;align-items:stretch}
  .coach{grid-area:co;align-self:center;text-align:left;margin:10px 0}
  #seatsTop,#seatsBottom,.arena>.coach{transform:none}
  .stage{grid-area:stage}
}
.seat{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:24px;background:rgba(0,0,0,.24);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16);color:var(--ink);font:600 13px/1.15 var(--sys);white-space:nowrap;transition:box-shadow .2s,background-color .2s;min-width:0;max-width:100%;min-height:42px}
.seat .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--sys);color:#fff;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 1px 3px rgba(0,0,0,.4)}
.seat .nm{display:flex;flex-direction:column;min-width:0}
.seat .nm b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.seat .nm span{font-weight:600;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.seat.turn{background:rgba(0,0,0,.42);box-shadow:0 0 0 2px var(--accent)}
.seat .dots{display:inline-flex;gap:3px;margin-left:4px}
.seat .dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:bgd 1s infinite}
.seat .dots i:nth-child(2){animation-delay:.15s}.seat .dots i:nth-child(3){animation-delay:.3s}
@keyframes bgd{0%,60%,100%{opacity:.25}30%{opacity:1}}
.seat.won{box-shadow:0 0 0 2px #7fd1a6}
.seat .tag{margin-left:6px;font:800 10px/1 var(--sys);letter-spacing:.06em;padding:3px 6px;border-radius:999px;background:var(--accent);color:#2a1e00}
/* the panel over the board: Roll, Done, Draw, Next round, the fleet's buttons */
.mid{position:absolute;left:50%;bottom:8px;translate:-50% 0;z-index:800;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:max-content;max-width:calc(100% - 12px);padding:10px 12px;border-radius:18px;background:rgba(6,16,12,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.18);color:var(--ink);font:600 15px/1.3 var(--sys);animation:bgm .25s var(--ease)}
.mid.top{bottom:auto;top:8px}
.mid.center{bottom:auto;top:50%;translate:-50% -50%}
@keyframes bgm{from{opacity:0;scale:.96}}
.mid p{margin:0}
.mid .sub{font-size:13px;font-weight:500;color:var(--muted)}
.mid .row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mb{appearance:none;border:0;min-height:44px;min-width:44px;padding:0 16px;border-radius:22px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);color:var(--ink);font:700 15px var(--sys);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .1s;touch-action:manipulation}
.mb.pri{background:var(--accent);color:#2a1e00;box-shadow:none}
.mb:disabled{opacity:.45;cursor:default}
.mb:active:not(:disabled){transform:scale(.95)}
.mb:focus-visible{outline:2px solid #fff;outline-offset:2px}
.float{position:absolute;z-index:950;pointer-events:none;font:800 17px var(--sys);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);padding:4px 10px;border-radius:12px;background:rgba(0,0,0,.55);animation:bgf 1.6s var(--ease) forwards;white-space:nowrap;translate:-50% 0}
.float.good{background:rgba(31,138,76,.94)}.float.bad{background:rgba(160,40,30,.92)}
@keyframes bgf{0%{opacity:0;transform:translateY(6px)}15%{opacity:1;transform:none}75%{opacity:1;transform:translateY(-14px)}100%{opacity:0;transform:translateY(-22px)}}

/* ---- sheets (as Card Games) ---- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:70;opacity:0;transition:opacity .3s}
.scrim.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;max-height:92vh;max-height:92dvh;background:var(--sh-bg);color:var(--sh-ink);border-radius:22px 22px 0 0;box-shadow:0 -10px 50px rgba(0,0,0,.3);z-index:71;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .36s var(--ease);padding-bottom:env(safe-area-inset-bottom);font-family:var(--sys);line-height:1.4}
.sheet.on{transform:none}
.sheet .grab{width:38px;height:5px;border-radius:3px;margin:7px auto 0;flex:none;background:color-mix(in srgb,var(--sh-ink) 22%,transparent)}
.sheet .shd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 8px}
.sheet .shd h2{margin:0;font-size:17px;font-weight:600;grid-column:2}
.sheet .hb{grid-column:3;justify-self:end;border:0;background:none;color:var(--tint);font:600 17px var(--sys);min-height:44px;padding:0 12px;border-radius:12px;cursor:pointer}
.sheet .sbody{overflow:auto;padding:4px 16px 22px;overscroll-behavior:contain}
.glabel{font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--sh-sub);margin:18px 16px 6px}
.glabel:first-child{margin-top:8px}
.group{background:var(--sh-card);border-radius:12px;overflow:hidden}
.srow{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 16px;width:100%;border:0;background:none;color:inherit;font:17px/1.3 var(--sys);text-align:left}
.srow+.srow,.srow+.tgl,.tgl+.srow{border-top:.5px solid var(--sh-line)}
.srow .rv{margin-left:auto;color:var(--sh-sub);font-variant-numeric:tabular-nums;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow>span:not(.rv){flex:none}
button.srow,a.srow{cursor:pointer;text-decoration:none;color:inherit}
button.srow:active,a.srow:active{background:var(--sh-line)}
.srow .chev{color:var(--sh-sub);font-size:22px;line-height:1;margin-left:2px}
.srow .pro{font:800 10px var(--sys);letter-spacing:.06em;padding:2px 6px;border-radius:999px;background:linear-gradient(135deg,#f7d774,#c9952b);color:#3a2700;margin-left:6px}
.srow .gi{width:30px;height:30px;border-radius:8px;flex:none}
.tgl{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 16px;font:17px/1.3 var(--sys);cursor:pointer}
.tgl+.tgl{border-top:.5px solid var(--sh-line)}
.tgl input{margin-left:auto;width:22px;height:22px;accent-color:var(--tint)}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--sh-ink) 8%,transparent);position:relative}
.seg3.two{grid-template-columns:repeat(2,1fr)}
.seg3.four{grid-template-columns:repeat(4,1fr)}
.seg3 label{min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9px;font:600 15px/1.2 var(--sys);cursor:pointer;color:var(--sh-ink);text-align:center;padding:3px 2px}
.seg3 label small{font-size:12px;font-weight:500;color:var(--sh-sub)}
.seg3 input{position:absolute;opacity:0;pointer-events:none}
.seg3 input:checked+label{background:var(--sh-card);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.seg3 input:focus-visible+label{outline:2px solid var(--tint)}
.gnote{font-size:13px;color:var(--sh-sub);margin:6px 16px 0}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border:0;border-radius:14px;font:600 17px var(--sys);background:var(--sh-card);color:var(--tint);cursor:pointer;transition:transform .12s;text-decoration:none}
.btn.pri{background:var(--tint);color:var(--on-tint)}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.srow:focus-visible,.hb:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.acts{display:grid;gap:10px;margin-top:18px}
.center{text-align:center}
.alert h2{font-size:20px;margin:12px 0 6px}
.alert p{margin:0;color:var(--sh-sub)}
.win h2{font-size:28px;margin:4px 0 2px}
.win .wsub{color:var(--sh-sub);margin:2px 0}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 4px}
.nums span{background:var(--sh-card);border-radius:14px;padding:10px 4px;font-size:13px;color:var(--sh-sub)}
.nums b{display:block;font-size:24px;line-height:1.2;color:var(--sh-ink);font-variant-numeric:tabular-nums;font-weight:700}
@media (min-width:700px){.sheet{bottom:50%;border-radius:22px;transform:translateY(calc(50% + 100vh));max-height:86vh;max-height:86dvh}.sheet.on{transform:translateY(50%)}.sheet .grab{display:none}.sheet .shd{padding-top:10px}}
.sc{width:100%;border-collapse:collapse;font:15px/1.3 var(--sys);font-variant-numeric:tabular-nums;background:var(--sh-card);border-radius:12px;overflow:hidden}
.sc th,.sc td{padding:9px 8px;text-align:right;border-top:.5px solid var(--sh-line)}
.sc tr:first-child th{border-top:0}
.sc th{font-weight:600;color:var(--sh-sub);font-size:13px}
.sc th:first-child,.sc td:first-child{text-align:left;padding-left:14px}
.sc td:last-child,.sc th:last-child{padding-right:14px}
.sc .tot td{font-weight:700;font-size:17px}
.sc .me{color:var(--tint);font-weight:700}
.scwrap{max-height:46vh;overflow:auto;border-radius:12px}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px 12px}
.sw{appearance:none;border:2px solid transparent;border-radius:12px;background:none;padding:6px 2px 4px;font:600 11px/1.2 var(--sys);color:var(--sh-ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:74px;position:relative}
.sw i{display:block;width:40px;height:40px;border-radius:9px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sw[aria-pressed="true"]{border-color:var(--tint)}
.sw .pro{position:absolute;top:2px;right:2px;font:800 8px var(--sys);padding:1px 4px;border-radius:999px;background:linear-gradient(135deg,#f7d774,#c9952b);color:#3a2700}
.tally{display:grid;grid-template-columns:auto repeat(6,1fr);gap:0;background:var(--sh-card);border-radius:12px;overflow:hidden;font:15px/1.2 var(--sys);font-variant-numeric:tabular-nums;text-align:center}
.tally>*{padding:8px 2px;border-top:.5px solid var(--sh-line)}
.tally>:nth-child(-n+7){border-top:0}
.tally .h{font-weight:600;color:var(--sh-sub);font-size:13px}
.tally .l{text-align:left;padding-left:14px;font-weight:600}
.tally .pip{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#fff;color:#111;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);font-weight:800;font-size:13px}
/* the end-of-game art and the cover between two people's turns */
.medal{width:84px;height:84px;margin:6px auto 4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe79a,#f2c14e 45%,#b57f12);box-shadow:0 6px 18px rgba(0,0,0,.25),inset 0 -4px 0 rgba(0,0,0,.15);display:grid;place-items:center;font:900 38px var(--sys);color:#5a3d00}
.medal::after{content:"★"}
.medal.lose{background:radial-gradient(circle at 35% 30%,#e9edf2,#aeb7c2 50%,#6b7480);color:#39414a}.medal.lose::after{content:"♟"}
.medal.draw{background:radial-gradient(circle at 35% 30%,#f4e6d4,#c9a982 50%,#8a6a45);color:#4a3418}.medal.draw::after{content:"="}
.medal.hand{background:radial-gradient(circle at 35% 30%,#bfe6ff,#4a9fd8 50%,#1f5f8f);color:#fff}.medal.hand::after{content:"⇄"}
.sheet.alert[data-modal]{z-index:90}
#handSheet.on~.scrim,.scrim.cover{background:var(--t2)}

/* ---- the boards: a wooden frame round each, drawn at the size the view gives it ---- */
.board{position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.frame{position:absolute;border-radius:12px;background:linear-gradient(135deg,var(--fr1),var(--fr2));box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.3)}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(100deg,rgba(255,240,210,.05) 0 3px,rgba(0,0,0,.04) 3px 9px,transparent 9px 17px);pointer-events:none}
.sq{position:absolute;border:0;padding:0;margin:0;background:var(--sqa);font:inherit;color:inherit;cursor:default}
.sq.d{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(0,0,0,.08)),var(--sqb)}
button.sq{appearance:none}
.sq:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:5}
.sq.can{cursor:pointer}
.sq .dot{position:absolute;left:50%;top:50%;width:30%;height:30%;translate:-50% -50%;border-radius:50%;background:rgba(242,193,78,.85);box-shadow:0 0 0 3px rgba(242,193,78,.25);pointer-events:none}
.sq.lastf,.sq.lastt{box-shadow:inset 0 0 0 999px rgba(242,193,78,.2)}
.sq.sel{box-shadow:inset 0 0 0 3px var(--accent)}
.coords{position:absolute;font:700 10px/1 var(--sys);color:rgba(255,240,210,.7);pointer-events:none;text-align:center}
/* a playing piece: a disc lit from the top left */
.pc{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;transition:transform .32s var(--ease),opacity .3s;z-index:10}
.pc::before{content:"";position:absolute;inset:0;border-radius:50%}
.pc.p0::before{background:radial-gradient(circle at 34% 28%,var(--dark-hi) 0,var(--dark) 55%,#120f0e 100%);box-shadow:0 3px 5px rgba(0,0,0,.5),inset 0 -2px 3px rgba(0,0,0,.5)}
.pc.p1::before{background:radial-gradient(circle at 34% 28%,#fff 0,var(--light) 50%,var(--light-lo) 100%);box-shadow:0 3px 5px rgba(0,0,0,.45),inset 0 -2px 3px rgba(0,0,0,.2)}
.pc::after{content:"";position:absolute;inset:16%;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.08)}
.pc.king::after{inset:22%;background:radial-gradient(circle,rgba(242,193,78,.95) 0 38%,transparent 40%);box-shadow:inset 0 0 0 2px rgba(242,193,78,.85)}
.pc.king.p0::after{background:radial-gradient(circle,#f2c14e 0 30%,transparent 33%)}
.pc.gone{opacity:0}
.pc.jump{z-index:20}
/* reversi: a disc that turns over */
.rv-disc{position:absolute;left:0;top:0;pointer-events:none;perspective:300px;z-index:10}
.rv-disc i{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d;transition:transform .42s var(--ease)}
.rv-disc i::before,.rv-disc i::after{content:"";position:absolute;inset:0;border-radius:50%;backface-visibility:hidden}
.rv-disc i::before{background:radial-gradient(circle at 34% 28%,#4a4442,#151312 70%);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.rv-disc i::after{background:radial-gradient(circle at 34% 28%,#fff,#efe8dc 55%,#cfc5b4);transform:rotateY(180deg);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.rv-disc.w i{transform:rotateY(180deg)}
.rv-disc.new i{animation:bgpop .3s var(--ease)}
@keyframes bgpop{from{scale:.4;opacity:0}}
.rv-field{position:absolute;border-radius:6px;background:var(--field);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.rv-sq{position:absolute;appearance:none;border:0;padding:0;background:transparent;box-shadow:inset 0 0 0 .5px var(--line);cursor:default}
.rv-sq.can{cursor:pointer}
.rv-sq .dot{position:absolute;left:50%;top:50%;width:30%;height:30%;translate:-50% -50%;border-radius:50%;background:rgba(0,0,0,.32);box-shadow:0 0 0 2px rgba(242,193,78,.75)}
.rv-sq.p1t .dot{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.rv-sq:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.rv-sq.last::after{content:"";position:absolute;left:50%;top:50%;width:12%;height:12%;translate:-50% -50%;border-radius:50%;background:#e8452f;z-index:30}
.rv-star{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.5);translate:-50% -50%;pointer-events:none}
/* four in a row: a blue frame with holes, discs falling behind it */
.c4{position:absolute;overflow:hidden}
.c4 .holes{position:absolute;inset:0;pointer-events:none;z-index:15}
.c4 .disc{position:absolute;left:0;top:0;border-radius:50%;z-index:5;transition:transform .45s cubic-bezier(.5,0,.75,0)}
.c4 .disc.s0{background:radial-gradient(circle at 35% 30%,#ff8a7a,#d8352a 55%,#9c1d16)}
.c4 .disc.s1{background:radial-gradient(circle at 35% 30%,#fff2a8,#f2c14e 55%,#b78812)}
.c4 .disc::after{content:"";position:absolute;inset:18%;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(0,0,0,.14)}
.c4 .disc.win{animation:bgwin .6s ease-in-out infinite alternate;z-index:6}
@keyframes bgwin{to{filter:brightness(1.35)}}
.c4col{position:absolute;appearance:none;border:0;padding:0;background:transparent;cursor:pointer;z-index:20}
.c4col:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.c4col.full{cursor:default}
.c4hover{position:absolute;border-radius:50%;opacity:.85;pointer-events:none;transition:transform .12s;z-index:21}
.c4hover.s0{background:radial-gradient(circle at 35% 30%,#ff8a7a,#d8352a 55%,#9c1d16)}
.c4hover.s1{background:radial-gradient(circle at 35% 30%,#fff2a8,#f2c14e 55%,#b78812)}
/* backgammon */
.bg-board{position:absolute;border-radius:10px;background:linear-gradient(135deg,var(--fr1),var(--fr2));box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.2)}
.bg-field{position:absolute;background:var(--field);box-shadow:inset 0 2px 8px rgba(0,0,0,.35);border-radius:4px}
.bg-pt{position:absolute;appearance:none;border:0;padding:0;background:transparent;cursor:default}
.bg-pt svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.bg-pt.can{cursor:pointer}
.bg-pt.can svg polygon{filter:brightness(1.25)}
.bg-pt .glow{position:absolute;left:12%;right:12%;height:10px;border-radius:5px;background:var(--accent);box-shadow:0 0 12px var(--accent);pointer-events:none}
.bg-pt:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.bg-num{position:absolute;font:700 10px/1 var(--sys);color:rgba(255,240,210,.62);text-align:center;pointer-events:none}
.ck{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;transition:transform .34s var(--ease);z-index:10}
.ck.c0{background:radial-gradient(circle at 34% 28%,#fff,#f3eadb 52%,#c7b593);box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(0,0,0,.18)}
.ck.c1{background:radial-gradient(circle at 34% 28%,#f07d6b,#b8352a 52%,#7a1c14);box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 0 0 1.5px rgba(0,0,0,.25)}
.ck::after{content:"";position:absolute;inset:20%;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.15)}
.ck.sel{box-shadow:0 0 0 3px var(--accent),0 4px 10px rgba(0,0,0,.5);z-index:30}
.ck .n{position:absolute;inset:0;display:grid;place-items:center;font:800 12px var(--sys);color:#3a2a14}
.ck.c1 .n{color:#fff}
.bg-off{position:absolute;border-radius:4px;background:rgba(0,0,0,.25);box-shadow:inset 0 1px 4px rgba(0,0,0,.4)}
.bg-off.can{cursor:pointer;background:rgba(242,193,78,.28);box-shadow:inset 0 0 0 2px var(--accent)}
.bg-off .stack{position:absolute;left:12%;right:12%;height:4px;border-radius:2px}
.bg-off .stack.c0{background:#f3eadb}.bg-off .stack.c1{background:#b8352a}
.dice{position:absolute;display:flex;gap:6px;pointer-events:none;z-index:40}
.die{width:34px;height:34px;border-radius:8px;background:linear-gradient(145deg,#fff,#e9e3d6);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 -2px 0 rgba(0,0,0,.12);position:relative;transition:opacity .2s}
.die.d1{background:linear-gradient(145deg,#e0503f,#a42a1f)}
.die.d1 i{background:#fff}
.die.used{opacity:.35}
.die i{position:absolute;width:18%;height:18%;border-radius:50%;background:#1d1d1f;translate:-50% -50%}
.die.roll{animation:bgroll .5s var(--ease)}
@keyframes bgroll{0%{transform:rotate(-200deg) scale(.6);opacity:.2}70%{transform:rotate(12deg) scale(1.08)}100%{transform:none}}
.cube{position:absolute;width:30px;height:30px;border-radius:6px;background:#fbf7ec;color:#2a1e00;display:grid;place-items:center;font:900 14px var(--sys);box-shadow:0 2px 5px rgba(0,0,0,.45);z-index:40;pointer-events:none}
/* dominoes */
.dm-table{position:absolute;inset:0}
.tile{position:absolute;left:0;top:0;border-radius:7px;background:linear-gradient(160deg,#fffdf6,#efe7d4);box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 -2px 0 rgba(0,0,0,.08);transition:transform .34s var(--ease),opacity .25s,box-shadow .2s;transform-origin:50% 50%}
.tile .hf{position:absolute}
.tile .hf i{position:absolute;width:15%;height:15%;border-radius:50%;background:#1d1d1f;translate:-50% -50%;box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.tile.v .hf{left:0;right:0;height:50%}.tile.v .hf.b{top:50%}.tile.v .hf.a{top:0}
.tile.h .hf{top:0;bottom:0;width:50%}.tile.h .hf.b{left:50%}.tile.h .hf.a{left:0}
.tile.v .hf i{width:17%;height:auto;aspect-ratio:1}
.tile.h .hf i{height:17%;width:auto;aspect-ratio:1}
.tile::after{content:"";position:absolute;background:rgba(0,0,0,.35)}
.tile.v::after{left:14%;right:14%;top:50%;height:1.5px;translate:0 -50%}
.tile.h::after{top:14%;bottom:14%;left:50%;width:1.5px;translate:-50% 0}
.tile.back{background:linear-gradient(160deg,#2c5a43,#183a2a)}
.tile.back .hf{display:none}.tile.back::after{display:none}
.tile.back::before{content:"";position:absolute;inset:4px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
button.tile{appearance:none;border:0;padding:0;cursor:pointer;font:inherit}
.tile.can{box-shadow:0 0 0 2.5px var(--accent),0 4px 10px rgba(0,0,0,.45)}
.tile.dim{filter:brightness(.72) saturate(.6)}
.tile:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tile.new{animation:bgglow 1.2s ease-out}
@keyframes bgglow{0%{box-shadow:0 0 0 4px var(--accent),0 2px 4px rgba(0,0,0,.45)}100%{box-shadow:0 2px 4px rgba(0,0,0,.45)}}
.endbtn{position:absolute;appearance:none;border:2px dashed var(--accent);background:rgba(242,193,78,.18);border-radius:8px;color:var(--ink);font:800 13px var(--sys);cursor:pointer;z-index:30;display:grid;place-items:center;animation:bgpulse 1.2s ease-in-out infinite alternate}
@keyframes bgpulse{to{background:rgba(242,193,78,.36)}}
.bone{position:absolute;appearance:none;border:0;padding:0;background:none;cursor:default;color:var(--ink);font:700 12px var(--sys);display:flex;flex-direction:column;align-items:center;gap:4px}
.bone.can{cursor:pointer}
.bone .heap{position:relative;width:64px;height:44px}
.bone .heap .tile{position:absolute}
.bone.can .heap .tile:last-child{box-shadow:0 0 0 2.5px var(--accent),0 4px 10px rgba(0,0,0,.45)}
/* sea battle */
.sea{position:absolute;border-radius:8px;background:linear-gradient(180deg,#2d6f9c,#1b4c74);box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12);overflow:hidden}
.sea::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(170deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px);pointer-events:none}
.sea.mine{background:linear-gradient(180deg,#3a6e8c,#244e69)}
.sea .lbl{position:absolute;font:700 10px/1 var(--sys);color:rgba(255,255,255,.62);text-align:center;pointer-events:none}
.sea .cell{position:absolute;appearance:none;border:0;padding:0;background:transparent;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14);cursor:default}
.sea .cell.can{cursor:crosshair}
@media (hover:hover){.sea .cell.can:hover{background:rgba(242,193,78,.25)}}
.sea .cell.aim{background:rgba(242,193,78,.4);box-shadow:inset 0 0 0 2px var(--accent)}
.sea .cell:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:9}
.sea .cell.miss::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;translate:-50% -50%;border-radius:50%;background:rgba(255,255,255,.75)}
.sea .cell.hit::after,.sea .cell.sunk::after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,#ffd36b 0,#ff7a2f 45%,#c92f1c 75%);box-shadow:0 0 8px rgba(255,120,40,.8)}
.sea .cell.sunk::after{background:radial-gradient(circle,#7a1d14,#3a0b07);box-shadow:inset 0 0 0 2px #ff7a2f}
.sea .cell.new{animation:bgshot .6s var(--ease)}
@keyframes bgshot{0%{background:rgba(255,255,255,.7)}100%{background:transparent}}
.ship{position:absolute;border-radius:999px;background:linear-gradient(180deg,#c4ccd4,#7d8995);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.35);pointer-events:none;transition:transform .2s var(--ease)}
.ship::after{content:"";position:absolute;inset:30% 18%;border-radius:999px;background:rgba(0,0,0,.18)}
.ship.down{background:linear-gradient(90deg,#c4ccd4,#7d8995)}
.ship.sunkS{background:linear-gradient(180deg,#5b3a35,#2e1c1a);opacity:.9}
.ship.drag{z-index:40;box-shadow:0 0 0 3px var(--accent),0 8px 18px rgba(0,0,0,.5)}
.ship.bad{box-shadow:0 0 0 3px #ff5a4a}
.ship.place{pointer-events:auto;cursor:grab;touch-action:none}
.ship.place:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fleetlist{position:absolute;display:flex;flex-wrap:wrap;gap:4px 10px;font:600 12px/1.2 var(--sys);color:var(--muted);justify-content:center}
.fleetlist s{color:rgba(244,241,234,.45)}
.splash{position:absolute;pointer-events:none;border-radius:50%;z-index:30;animation:bgsplash .7s ease-out forwards}
.splash.boom{background:radial-gradient(circle,#fff6c0,#ff9b3f 40%,rgba(255,80,30,0) 70%)}
.splash.water{background:radial-gradient(circle,rgba(255,255,255,.9),rgba(160,210,255,.5) 40%,rgba(160,210,255,0) 70%)}
@keyframes bgsplash{0%{transform:scale(.2);opacity:1}100%{transform:scale(2.2);opacity:0}}
/* ludo */
.ludo{position:absolute;border-radius:12px;background:#fbf7ee;box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 6px var(--fr1),0 0 0 8px var(--fr2)}
.ludo .lq{position:absolute;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28)}
.ludo .yard{position:absolute;border-radius:10px}
.ludo .yard::after{content:"";position:absolute;inset:16%;border-radius:12px;background:#fbf7ee;box-shadow:inset 0 2px 6px rgba(0,0,0,.18)}
.ludo .ystar{position:absolute;display:grid;place-items:center;color:rgba(0,0,0,.35);font-size:12px;pointer-events:none}
.ludo .hometri{position:absolute;pointer-events:none}
.tok{position:absolute;left:0;top:0;border-radius:50%;transition:transform .3s var(--ease);z-index:10;pointer-events:none}
.tok::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 3px 4px rgba(0,0,0,.45),inset 0 -2px 3px rgba(0,0,0,.3)}
.tok::after{content:"";position:absolute;inset:26%;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 2px rgba(0,0,0,.15)}
.tok.l0::before{background:radial-gradient(circle at 35% 28%,#ff9a8a,#d8352a 60%,#8f1a12)}
.tok.l1::before{background:radial-gradient(circle at 35% 28%,#8fe0a6,#2e9d55 60%,#155a2d)}
.tok.l2::before{background:radial-gradient(circle at 35% 28%,#fff0a0,#ecbf2c 60%,#a07a0a)}
.tok.l3::before{background:radial-gradient(circle at 35% 28%,#9ac8ff,#2f6fd0 60%,#163e80)}
.tok.can{z-index:20;animation:bgtok .7s ease-in-out infinite alternate}
@keyframes bgtok{to{translate:0 -4px;filter:brightness(1.15)}}
.tokbtn{position:absolute;appearance:none;border:0;padding:0;background:transparent;border-radius:50%;cursor:pointer;z-index:25}
.tokbtn:focus-visible{outline:3px solid #1d1d1f;outline-offset:1px}
.ludie{position:absolute;z-index:40}
.ludie .die{width:46px;height:46px;border-radius:11px}
.ldie-btn{appearance:none;border:0;background:none;padding:0;cursor:pointer;border-radius:12px}
.ldie-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cvr{position:absolute;inset:0;border-radius:12px;background:var(--t2) radial-gradient(ellipse at 50% 30%,var(--t1),var(--t2));z-index:500;display:grid;place-items:center;color:var(--muted);font:700 17px var(--sys)}

/* ---- the game icons: the switcher's rows and the hub's cards ---- */
.gi{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,var(--fr1),var(--fr2))}
.gi::before,.gi::after{content:"";position:absolute}
.gi.g-checkers{background:conic-gradient(var(--sqb) 25%,var(--sqa) 0 50%,var(--sqb) 0 75%,var(--sqa) 0) 0 0/50% 50%}
.gi.g-checkers::before{left:12%;top:12%;width:34%;height:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a4f4a,#1d1716)}
.gi.g-checkers::after{right:12%;bottom:12%;width:34%;height:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d8c8a8)}
.gi.g-reversi{background:var(--field)}
.gi.g-reversi::before{left:14%;top:14%;width:36%;height:36%;border-radius:50%;background:#171312;box-shadow:calc(var(--gs,30px)*.36) calc(var(--gs,30px)*.36) 0 #f3ede2}
.gi.g-reversi::after{right:14%;top:14%;width:36%;height:36%;border-radius:50%;background:#f3ede2;box-shadow:calc(var(--gs,30px)*-.36) calc(var(--gs,30px)*.36) 0 #171312}
.gi.g-four-in-a-row{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%232b5fc4'/%3E%3Cg fill='%230e3a1f'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='30' cy='12' r='6.5'/%3E%3Ccircle cx='48' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='30' r='6.5'/%3E%3Ccircle cx='48' cy='30' r='6.5'/%3E%3C/g%3E%3Cg fill='%23e0453a'%3E%3Ccircle cx='30' cy='30' r='6.5'/%3E%3Ccircle cx='12' cy='48' r='6.5'/%3E%3Ccircle cx='48' cy='48' r='6.5'/%3E%3C/g%3E%3Cg fill='%23f2c14e'%3E%3Ccircle cx='30' cy='48' r='6.5'/%3E%3C/g%3E%3C/svg%3E") center/cover}
.gi.g-backgammon{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%236e4322'/%3E%3Crect x='5' y='5' width='50' height='50' rx='3' fill='%232f7a52'/%3E%3Cg fill='%23a3392b'%3E%3Cpath d='M5 5h12.5L11.25 29z'/%3E%3Cpath d='M30 5h12.5L36.25 29z'/%3E%3Cpath d='M17.5 55H30l-6.25-24z'/%3E%3Cpath d='M42.5 55H55l-6.25-24z'/%3E%3C/g%3E%3Cg fill='%23efdcb5'%3E%3Cpath d='M17.5 5H30l-6.25 24z'/%3E%3Cpath d='M42.5 5H55l-6.25 24z'/%3E%3Cpath d='M5 55h12.5l-6.25-24z'/%3E%3Cpath d='M30 55h12.5l-6.25-24z'/%3E%3C/g%3E%3Ccircle cx='11.25' cy='48' r='5.6' fill='%23f6efe2' stroke='%23b7a37f' stroke-width='1.2'/%3E%3Ccircle cx='11.25' cy='37' r='5.6' fill='%23f6efe2' stroke='%23b7a37f' stroke-width='1.2'/%3E%3Ccircle cx='48.75' cy='12' r='5.6' fill='%23c63b2d' stroke='%237a1c14' stroke-width='1.2'/%3E%3Ccircle cx='48.75' cy='23' r='5.6' fill='%23c63b2d' stroke='%237a1c14' stroke-width='1.2'/%3E%3C/svg%3E") center/cover}
.gi.g-dominoes{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%2322543c'/%3E%3Cg transform='rotate(-24 30 30)'%3E%3Crect x='18' y='5' width='24' height='50' rx='4' fill='%23fffdf6' stroke='%23cdbf9f' stroke-width='1.2'/%3E%3Cpath d='M21 30h18' stroke='%23555' stroke-width='1.4'/%3E%3Cg fill='%231d1d1f'%3E%3Ccircle cx='24.5' cy='11' r='2.3'/%3E%3Ccircle cx='35.5' cy='11' r='2.3'/%3E%3Ccircle cx='24.5' cy='17.5' r='2.3'/%3E%3Ccircle cx='35.5' cy='17.5' r='2.3'/%3E%3Ccircle cx='24.5' cy='24' r='2.3'/%3E%3Ccircle cx='35.5' cy='24' r='2.3'/%3E%3Ccircle cx='24.5' cy='36' r='2.3'/%3E%3Ccircle cx='30' cy='42.5' r='2.3'/%3E%3Ccircle cx='35.5' cy='49' r='2.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/cover}
.gi.g-sea-battle{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233a80b0'/%3E%3Cstop offset='1' stop-color='%231b4c74'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23s)'/%3E%3Cg stroke='rgba(255,255,255,.18)' stroke-width='1'%3E%3Cpath d='M12 0v60M24 0v60M36 0v60M48 0v60M0 12h60M0 24h60M0 36h60M0 48h60'/%3E%3C/g%3E%3Crect x='14' y='27' width='32' height='10' rx='5' fill='%23cfd6dd' stroke='%2359646f' stroke-width='1.2'/%3E%3Crect x='22' y='30' width='16' height='4' rx='2' fill='%238b96a1'/%3E%3Ccircle cx='42' cy='15' r='6' fill='%23ff7a2f'/%3E%3Ccircle cx='42' cy='15' r='3' fill='%23ffd36b'/%3E%3Ccircle cx='18' cy='48' r='2.6' fill='%23fff'/%3E%3Ccircle cx='30' cy='12' r='2.6' fill='%23fff'/%3E%3C/svg%3E") center/cover}
.gi.g-ludo{background:conic-gradient(#2e9d55 0 25%,#ecbf2c 0 50%,#2f6fd0 0 75%,#d8352a 0)}
.gi.g-ludo::before{inset:32%;background:#fbf7ee;rotate:45deg;border-radius:10%}
.gi.g-ludo::after{left:42%;top:42%;width:16%;height:16%;border-radius:50%;background:#d8352a;box-shadow:0 0 0 1.5px #fff}

/* ---- the hub ---- */
.hub{max-width:980px;margin:0 auto;padding:6px 6px 24px}
.hub h1{font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.1;margin:10px 4px 4px;color:var(--ink);text-wrap:balance}
.hub .lead{color:var(--muted);margin:0 4px 16px;font-size:1.02rem;max-width:62ch}
.gcards{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){.gcards{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.gcards{grid-template-columns:repeat(3,1fr)}}
.gcard{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(0,0,0,.24);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);color:var(--ink);text-decoration:none;min-height:104px;transition:transform .15s,background-color .15s}
.gcard:active{transform:scale(.985)}
@media (hover:hover){.gcard:hover{background:rgba(0,0,0,.34)}}
.gcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gcard .art{grid-row:1 / span 3;width:72px;height:72px;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.12);--gs:72px}
.gcard h2{margin:0;font-size:1.2rem;line-height:1.2}
.gcard p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.35}
.gcard .meta{font-size:.8rem;font-weight:600;color:var(--accent)}
.gcard.cont{background:rgba(242,193,78,.16);box-shadow:inset 0 0 0 1.5px var(--accent)}
.hubfoot{display:flex;flex-wrap:wrap;gap:8px;margin:16px 4px 0}
.hubfoot a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);color:var(--ink);font:600 15px var(--sys);text-decoration:none}

/* ---- the article under the board ---- */
.content{max-width:720px;margin:0 auto;padding:40px 16px 60px}
.content h1{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.15;margin:0 0 .4em;text-wrap:balance}
.content h2{font-size:1.35rem;margin:1.8em 0 .5em;text-wrap:balance}
.content h3{font-size:1.05rem;margin:1.3em 0 .3em}
.content .lead{font-size:1.1rem;color:var(--sub)}
.content table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.95rem}
.content th,.content td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
.content th{background:color-mix(in srgb,var(--rule) 45%,transparent)}
.tablewrap{overflow-x:auto}
.more{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.more a{border:1px solid var(--rule);border-radius:999px;padding:10px 16px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
footer{max-width:720px;margin:0 auto;padding:0 16px 40px;color:var(--sub);font-size:.9rem}
@media (prefers-reduced-motion:reduce){.toast,.sheet,.scrim,.pc,.ck,.tok,.tile,.c4 .disc,.rv-disc i,.ship,.seat{transition:none!important}.mid,.float,.seat .dots i,.tok.can,.endbtn,.die.roll,.c4 .disc.win,.splash,.tile.new,.sea .cell.new,.rv-disc.new i{animation:none!important}.float{opacity:1}}
/* mobile.js gives every button on a touch screen a 40 px minimum height; the board's own squares, points and cells
   are sized here, so they keep their size (the bar's buttons and the sheets' rows are 44 px or more) */
:root:root .board button{min-height:0}
:root:root .tb{min-height:50px}
@media (min-width:700px){:root:root .tb{min-height:44px}}
:root:root .gsw,:root:root .sheet .hb,:root:root .mb{min-height:44px}
:root:root button.srow{min-height:46px}
:root:root .sheet .btn{min-height:50px}

/* the hint: the Hard player's move, pulsing on the board */
.hint{animation:bghint .8s ease-in-out infinite alternate!important;z-index:25}
@keyframes bghint{from{box-shadow:0 0 0 2px rgba(127,209,255,.4)}to{box-shadow:0 0 0 4px #7fd1ff,0 0 18px #7fd1ff}}
.sq.hint,.rv-sq.hint,.sea .cell.hint,.bg-pt.hint{box-shadow:inset 0 0 0 3px #7fd1ff}
.c4 .disc.last::before{content:"";position:absolute;inset:36%;border-radius:50%;background:rgba(255,255,255,.55)}
/* the person's turn: their chip breathes once */
.seat.turn.cue{animation:bgcue .9s ease-out}
@keyframes bgcue{0%{box-shadow:0 0 0 2px var(--accent)}40%{box-shadow:0 0 0 7px rgba(242,193,78,.35)}100%{box-shadow:0 0 0 2px var(--accent)}}
/* a win: a short burst of confetti over the board */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:65;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:bgconf 1.8s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes bgconf{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}
@media (max-height:520px) and (min-width:560px){.arena{grid-template-columns:minmax(120px,160px) 1fr;column-gap:8px}.seat{min-height:38px;padding:2px 10px 2px 3px}.seat .av{width:28px;height:28px}.coach{font-size:12px}}
@media (prefers-reduced-motion:reduce){.hint,.seat.turn.cue{animation:none!important}.confetti{display:none}}

/* the hub table's game links: a 44px tap target without moving the text (tap-targets.mjs) */
.tablewrap td>a:only-child{display:inline-block;padding:13px 6px;margin:-13px -6px;min-width:32px}