/* Lychee Games shared UI. Colours are CSS variables so every theme (light, dark, lychee, midnight, matcha) restyles every
   shared component. Theme blocks use ":root[data-theme=x],[data-lg-theme=x]" so a swatch element can preview a theme. */
:root,[data-lg-theme=light]{color-scheme:light;--lg-cream:#fff9f1;--lg-pink:#fbe2e6;--lg-rose:#a82d55;--lg-ink:#482b38;--lg-muted:#795c68;--lg-leaf:#346547;--lg-line:#eacbd0;--lg-white:#fffefd;--lg-on-rose:#ffffff;--lg-radius:24px;--lg-shadow:0 12px 36px #8143530c;--lg-toast-bg:#482b38;--lg-toast-fg:#ffffff;--lg-backdrop:#482b3866;--lg-good:#2f6b45;--lg-bad:#b3261e;--lg-warn:#946200;--lg-p1:#a82d55;--lg-p2:#2f6f8f;--lg-tint-1:#faeeea;--lg-tint-2:#f2f1e5;--lg-tint-3:#eef0f6;--lg-chip2-bg:#eeeede;--lg-chip2-fg:#536346}
:root{font-family:'Nunito',system-ui,sans-serif;color:var(--lg-ink);background:var(--lg-cream)}
:root[data-theme=dark],[data-lg-theme=dark]{color-scheme:dark;--lg-cream:#1d1519;--lg-pink:#4a2433;--lg-rose:#f27ea0;--lg-ink:#f6e7ec;--lg-muted:#c9afba;--lg-leaf:#8fcf9f;--lg-line:#4a3540;--lg-white:#2a1e24;--lg-on-rose:#2b0f19;--lg-shadow:0 12px 36px #0006;--lg-toast-bg:#f6e7ec;--lg-toast-fg:#1d1519;--lg-backdrop:#000a;--lg-good:#7fcf94;--lg-bad:#ff8a80;--lg-warn:#f0c050;--lg-p1:#f27ea0;--lg-p2:#6cc4e8;--lg-tint-1:#35262c;--lg-tint-2:#2b2d27;--lg-tint-3:#272b36;--lg-chip2-bg:#2f3328;--lg-chip2-fg:#b5cba5}
:root[data-theme=lychee],[data-lg-theme=lychee]{color-scheme:light;--lg-cream:#ffeef2;--lg-pink:#fbd3dd;--lg-rose:#b0214f;--lg-ink:#4a1d30;--lg-muted:#7d5063;--lg-leaf:#2f6b45;--lg-line:#f0c3ce;--lg-white:#fff9fb;--lg-on-rose:#ffffff;--lg-shadow:0 12px 36px #b0214f14;--lg-toast-bg:#4a1d30;--lg-toast-fg:#ffffff;--lg-backdrop:#4a1d3066;--lg-good:#2f6b45;--lg-bad:#b3261e;--lg-warn:#946200;--lg-p1:#b0214f;--lg-p2:#2f6f8f;--lg-tint-1:#ffe1e8;--lg-tint-2:#fdeccf;--lg-tint-3:#f3e4f7;--lg-chip2-bg:#f6e0c8;--lg-chip2-fg:#6b4423}
:root[data-theme=midnight],[data-lg-theme=midnight]{color-scheme:dark;--lg-cream:#0f1226;--lg-pink:#262c58;--lg-rose:#9fabff;--lg-ink:#e8eaff;--lg-muted:#aeb4de;--lg-leaf:#7fe0c0;--lg-line:#2d3362;--lg-white:#181c38;--lg-on-rose:#0b0e22;--lg-shadow:0 12px 36px #0008;--lg-toast-bg:#e8eaff;--lg-toast-fg:#0f1226;--lg-backdrop:#000b;--lg-good:#6ee7b7;--lg-bad:#ff9a9a;--lg-warn:#ffd479;--lg-p1:#9fabff;--lg-p2:#ffb86b;--lg-tint-1:#1f2547;--lg-tint-2:#1b2a3d;--lg-tint-3:#2a2347;--lg-chip2-bg:#1d2d3f;--lg-chip2-fg:#9fd8c8}
:root[data-theme=matcha],[data-lg-theme=matcha]{color-scheme:light;--lg-cream:#f3f6ea;--lg-pink:#e1ecc9;--lg-rose:#3f6e2c;--lg-ink:#2c3a27;--lg-muted:#586a4d;--lg-leaf:#2f6b3a;--lg-line:#cfdab8;--lg-white:#fbfdf5;--lg-on-rose:#ffffff;--lg-shadow:0 12px 36px #3f6e2c14;--lg-toast-bg:#2c3a27;--lg-toast-fg:#ffffff;--lg-backdrop:#2c3a2766;--lg-good:#2f6b3a;--lg-bad:#b3261e;--lg-warn:#8a5a00;--lg-p1:#3f6e2c;--lg-p2:#a8412f;--lg-tint-1:#e8f0d6;--lg-tint-2:#f3efd9;--lg-tint-3:#e2eee8;--lg-chip2-bg:#e9e6cf;--lg-chip2-fg:#5d5a2f}
/* Colour-blind-safe palette (Okabe-Ito): good/bad/p1/p2 stay distinguishable for the common colour-vision types. */
:root[data-cb=on]{--lg-good:#0072b2;--lg-bad:#b04600;--lg-warn:#946200;--lg-p1:#0072b2;--lg-p2:#b04600}
:root[data-cb=on][data-theme=dark],:root[data-cb=on][data-theme=midnight]{--lg-good:#56b4e9;--lg-bad:#e69f00;--lg-warn:#f0e442;--lg-p1:#56b4e9;--lg-p2:#e69f00}
:root[data-large=on]{font-size:118%}
*{box-sizing:border-box}body{margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}[hidden]{display:none!important}button,input,select{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--lg-leaf);outline-offset:4px}h1,h2,h3{font-family:'Fredoka',system-ui,sans-serif;font-weight:500}button:disabled{cursor:default;opacity:.55}
.lg-button{border:1px solid var(--lg-line);border-radius:16px;background:var(--lg-white);color:var(--lg-ink);min-height:46px;padding:11px 20px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.lg-primary{background:var(--lg-rose);border-color:var(--lg-rose);color:var(--lg-on-rose)}
.lg-card{background:var(--lg-white);border:1px solid var(--lg-line);border-radius:var(--lg-radius);padding:24px;box-shadow:var(--lg-shadow)}
.lg-chip{display:inline-flex;border-radius:99px;padding:6px 11px;font-size:.78rem;font-weight:800;background:var(--lg-pink);color:var(--lg-rose)}
.lg-muted{color:var(--lg-muted)}.lg-row{display:flex;gap:10px;flex-wrap:wrap}
.lg-lobby{max-width:540px;margin:24px auto}.lg-lobby h1{font-size:2rem}.lg-lobby label{display:block;font-weight:800;margin:18px 0 7px}.lg-lobby input{width:100%;min-height:46px;border:1px solid var(--lg-line);border-radius:12px;background:var(--lg-cream);padding:10px;color:var(--lg-ink)}.lg-lobby input[type=color]{width:74px;padding:5px}.lg-lobby .lg-row{margin:16px 0}.lg-code{display:block;letter-spacing:.18em;font-size:2.6rem;font-weight:800;margin:16px 0}
.lg-avatars{border:0;padding:0;margin:18px 0 0}.lg-avatars legend{font-weight:800;padding:0;margin-bottom:7px}.lg-avatar-list{display:flex;flex-wrap:wrap;gap:8px}
.lg-avatar{width:46px;height:46px;border-radius:14px;border:2px solid var(--lg-line);background:var(--lg-cream);font-size:1.45rem;line-height:1;padding:0;display:grid;place-items:center}.lg-avatar[aria-pressed=true]{border-color:var(--lg-rose);background:var(--lg-pink)}
.lg-toasts{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(90%,420px);z-index:100}
.lg-toast{padding:14px 20px;background:var(--lg-toast-bg);color:var(--lg-toast-fg);border-radius:16px;margin-top:8px;box-shadow:var(--lg-shadow)}
.lg-toast.lg-ach{display:flex;gap:12px;align-items:center;border:2px solid var(--lg-rose)}.lg-toast .lg-toast-icon{font-size:1.7rem;line-height:1}.lg-toast small{display:block;opacity:.8;font-weight:700}
.lg-modal{border:1px solid var(--lg-line);border-radius:24px;padding:28px;max-width:min(90vw,420px);color:var(--lg-ink);background:var(--lg-cream)}.lg-modal::backdrop{background:var(--lg-backdrop)}
.lg-confetti{position:fixed;pointer-events:none;inset:0;overflow:hidden;z-index:99}.lg-confetti i{position:absolute;top:-20px;width:9px;height:15px;background:var(--lg-rose);animation:lg-fall 1.7s ease-in forwards}@keyframes lg-fall{to{transform:translateY(105vh) rotate(540deg)}}
/* Game feel (LG.fx) */
.lg-float{position:fixed;z-index:101;pointer-events:none;font:800 1.5rem/1 'Fredoka','Nunito',system-ui,sans-serif;color:var(--lg-rose);text-shadow:0 2px 0 var(--lg-white),0 0 8px var(--lg-white);white-space:nowrap}
.lg-particle{position:fixed;z-index:101;pointer-events:none;width:9px;height:9px;border-radius:50%}
/* Icon button + settings sheet */
.lg-icon-button{width:46px;min-width:46px;padding:0;font-size:1.25rem;line-height:1}
.lg-sheet{border:1px solid var(--lg-line);border-radius:24px 24px 0 0;padding:0;width:min(100%,520px);max-width:100%;max-height:min(88vh,720px);margin:auto auto 0;color:var(--lg-ink);background:var(--lg-cream);box-shadow:var(--lg-shadow)}
.lg-sheet::backdrop{background:var(--lg-backdrop)}
@media(min-width:700px){.lg-sheet{margin:auto;border-radius:24px}}
.lg-sheet-body{padding:8px 22px 26px}.lg-sheet header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--lg-cream);padding:16px 22px 8px;z-index:1}
.lg-sheet h2{margin:0;font-size:1.4rem}.lg-sheet h3{font-size:1rem;margin:22px 0 8px;color:var(--lg-muted)}
.lg-sheet-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;font-weight:800;border-bottom:1px solid var(--lg-line);padding:6px 0}
.lg-sheet-row small{display:block;font-weight:600;color:var(--lg-muted)}
.lg-sheet input[type=checkbox]{width:26px;height:26px;accent-color:var(--lg-rose);flex:none}
.lg-sheet select,.lg-sheet input[type=text]{min-height:46px;border:1px solid var(--lg-line);border-radius:12px;background:var(--lg-white);color:var(--lg-ink);padding:8px 10px;max-width:60%}
.lg-sheet input[type=text]{max-width:100%;width:100%}.lg-sheet input[type=color]{width:64px;height:46px;padding:4px;border:1px solid var(--lg-line);border-radius:12px;background:var(--lg-white)}
.lg-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lg-theme{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:2px solid var(--lg-line);border-radius:16px;background:var(--lg-white);color:var(--lg-ink);font-weight:800;font-size:.85rem;min-height:44px}
.lg-theme[aria-pressed=true]{border-color:var(--lg-rose);background:var(--lg-pink)}
.lg-sw{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lg-cream);border:2px solid var(--lg-line)}.lg-sw i{width:16px;height:16px;border-radius:50%;background:var(--lg-rose)}
.lg-avatars-sheet .lg-avatar-list{margin-bottom:12px}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) *,:root:not([data-motion=full]) *::before,:root:not([data-motion=full]) *::after{animation:none!important;transition:none!important}}
:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation:none!important;transition:none!important}
/* Hub Game Room chip (shared/session.js): sits in the page flow at the very top, so it never covers a game */
.lg-roomchip{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-height:44px;padding:4px 12px;background:var(--lg-pink);color:var(--lg-ink);border-bottom:1px solid var(--lg-line);font:800 .85rem/1.2 'Nunito',system-ui,sans-serif;position:relative;z-index:50}
.lg-roomchip-room{white-space:nowrap}.lg-roomchip-code{letter-spacing:.12em;color:var(--lg-rose)}
.lg-roomchip-who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lg-roomchip-mark{color:var(--lg-muted)}.lg-roomchip-mark.ok{color:var(--lg-good)}
.lg-roomchip-back{flex:none;min-height:36px;padding:6px 12px;border:1px solid var(--lg-rose);border-radius:12px;background:var(--lg-white);color:var(--lg-ink);font-weight:800;font-size:.82rem}
@media(max-width:420px){.lg-roomchip{gap:6px;padding:4px 8px;font-size:.78rem}.lg-roomchip-back{padding:6px 9px;font-size:.78rem}}

/* ===== PC layout kit (desktop and laptop screens, 1000px and wider) =====
   Phones keep the single column they already have. On a PC a game becomes a no-scroll "stage": the board sits in
   the middle and the controls, scores and history sit in side rails. Use:
     <main class="lg-stage lg-stage--3">   (or --2: board + one right rail, or --1: centre only)
       <aside class="lg-rail lg-rail--left">...</aside>
       <section class="lg-center">...board...</section>
       <aside class="lg-rail lg-rail--right">...</aside>
     </main>
   Rails and the centre never scroll the page: a rail scrolls inside itself. Size a square board with
   .lg-board-fit (the biggest square that fits the stage height) or use the --lg-board-max variable. */
:root{--lg-topbar:72px;--lg-stage-max:1280px;--lg-board-max:min(74vh,640px)}
@media(min-width:1000px){
  html.lg-pc-layout,html.lg-pc-layout body{height:100%}
  .lg-stage{display:grid;gap:24px;max-width:var(--lg-stage-max);margin:0 auto;padding:0 24px;box-sizing:border-box;height:calc(100vh - var(--lg-topbar) - 16px);height:calc(100dvh - var(--lg-topbar) - 16px);min-height:480px;align-items:stretch}
  .lg-stage--3{grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(240px,340px)}
  .lg-stage--2{grid-template-columns:minmax(0,1fr) minmax(260px,340px)}
  .lg-stage--1{grid-template-columns:minmax(0,1fr)}
  .lg-stage>*{min-width:0;min-height:0}
  .lg-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;overflow:hidden}
  .lg-rail{background:var(--lg-white);border:1px solid var(--lg-line);border-radius:var(--lg-radius);padding:18px;box-shadow:var(--lg-shadow);overflow:auto;display:flex;flex-direction:column;gap:14px;min-height:0}
  .lg-board-fit{width:var(--lg-board-max);height:var(--lg-board-max);max-width:100%;max-height:100%;aspect-ratio:1/1}
  .lg-pc-only{display:revert}.lg-phone-only{display:none!important}
}
@media(min-width:1700px){:root{--lg-stage-max:1480px;--lg-board-max:min(76vh,760px)}}
@media(max-width:999px){.lg-pc-only{display:none!important}}