/* Backgammon: the word game's cobalt felt and saffron accents, around a wide board that fills the phone's width */
:root{
  --felt:#1A2466; --felt-2:#222E7C; --felt-3:#2D3A92; --line:#3B4AA6;
  --fg:#F4F2FF; --muted:#AEB5E6;
  --sun:#FFC53D; --sun-ink:#2B1F00; --sun-edge:#C8901A;
  --go:#2ECF7E; --stop:#FF5E57;
  --body:"Rubik",system-ui,-apple-system,"Segoe UI","Noto Sans",Arial,sans-serif;
  --display:"Rubik",system-ui,-apple-system,"Segoe UI","Noto Sans",Arial,sans-serif;
  --display-weight:800;
  color-scheme:dark;
}
:root[lang="he"]{--display:"Secular One","Rubik","Arial Hebrew","Noto Sans Hebrew",Arial,sans-serif;--display-weight:400}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--felt);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#app{min-height:100%;max-width:760px;margin:0 auto;padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,a:focus-visible,[data-act="spot"]:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
input{font:inherit;color:var(--fg);background:var(--felt-2);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;min-width:0}
h1,h2{font-family:var(--display);font-weight:var(--display-weight);margin:0;line-height:1.1}
p{margin:0}
a{color:var(--muted)}
.screen{flex:1;display:flex;flex-direction:column;gap:16px}
.home,.lobby,.screen:not(.game){max-width:520px;width:100%;margin:0 auto}
.label{font-size:13px;letter-spacing:.04em;color:var(--muted);font-weight:500}
.muted{color:var(--muted)}
.small{font-size:14px}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:6px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.topbar h1{font-size:34px;color:var(--sun)}
.topbar nav{display:flex;gap:14px;font-size:14px}
.tagline{font-size:18px}

.seg{display:flex;background:var(--felt-2);border-radius:14px;padding:4px;gap:4px}
.seg button{flex:1;padding:10px 6px;border-radius:10px;color:var(--muted);font-weight:500}
.seg button[aria-pressed="true"]{background:var(--felt-3);color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}

.cta{display:block;width:100%;padding:16px;border-radius:18px;background:var(--sun);color:var(--sun-ink);font-family:var(--display);font-weight:var(--display-weight);font-size:22px;box-shadow:0 5px 0 var(--sun-edge)}
.cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sun-edge)}
.ghost{padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);font-weight:500;color:var(--fg)}
.cta:disabled,.ghost:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.link{color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:8px 0;align-self:center}
.join-row{display:flex;gap:8px}
.join-row input{text-transform:uppercase;letter-spacing:.2em;font-weight:700}
.join-row .ghost{flex:none;min-width:96px}
.err{color:var(--stop)}
.links{margin-top:auto;display:flex;gap:14px;font-size:14px}

.room-code{font-family:var(--display);font-size:56px;letter-spacing:.18em;text-align:center;color:var(--sun)}
.qr-box{align-self:center;width:min(240px,70vw);border-radius:16px;overflow:hidden;background:#fff;line-height:0}
.qr{display:block;width:100%;height:auto}
.waiting{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}

.game{gap:10px}
.player{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--felt-2);font-size:15px}
.player.turn{box-shadow:inset 0 0 0 2px var(--sun)}
.player .score{margin-inline-start:auto;font-weight:700;font-size:18px}
.player .muted.small{margin-inline-start:6px}
.dot{width:16px;height:16px;border-radius:50%;flex:none}
.dot.w{background:#FFF7E6;box-shadow:0 0 0 2px #C9B98F}
.dot.b{background:#2A2F55;box-shadow:0 0 0 2px #6E76B8}
.off-dot{width:8px;height:8px;border-radius:50%;background:var(--stop)}
.board-wrap{width:100%}
.board{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.board .num{fill:#6E76B8;font:600 15px var(--body);text-anchor:middle}
.board .count{font:700 22px var(--body);text-anchor:middle;pointer-events:none}
.board .count.w{fill:#1A2466}.board .count.b{fill:#FFF7E6}
.board .tray-n{fill:var(--muted);font:600 16px var(--body);text-anchor:middle}
.board .cube{fill:#2B1F00;font:800 22px var(--body);text-anchor:middle}
.board .can{stroke:var(--sun);stroke-width:5}
.board .sel{stroke:var(--go);stroke-width:7}
.controls{display:flex;flex-direction:column;gap:8px}
.status{text-align:center;font-weight:600;font-size:18px}
.status.big{font-family:var(--display);font-weight:var(--display-weight);font-size:28px;color:var(--sun)}
.row{display:flex;gap:10px}
.row > *{flex:1}
.small-links{justify-content:center}
.small-links > *{flex:none}
.banner{background:var(--felt-3);border-radius:10px;padding:6px 12px;text-align:center;font-size:14px}
.center-screen{justify-content:center;align-items:center}
.toast{position:fixed;inset-inline:16px;bottom:24px;margin:0 auto;max-width:420px;background:var(--felt-3);padding:10px 14px;border-radius:12px;text-align:center}
@media (min-width:700px){.status{font-size:20px}}
.legal{max-width:680px;gap:10px;display:block}
.legal h1{font-size:34px;color:var(--sun);margin:8px 0}
.legal h2{font-size:22px;margin:18px 0 6px}
.legal p,.legal li{color:var(--fg)}