/* tavla-ag: simple, light, minimal (same family as the bridge app): white header, #111 wordmark, one accent colour. */
:root{
  --bg:#f0f0ee; --fg:#0a0a0a; --muted:#4a4a4a; --line:#d0d0cc; --card:#fff;
  --frame:#1a1a1a; --felt:#f0eade; --pt-a:#a89778; --pt-b:#5f7165; --bar:#1a1a1a;
  --me:#ffffff; --me-line:#111; --bot:#1a1a1a; --bot-line:#000;
  --accent:#e89a00; --accent-soft:rgba(232,154,0,.48); --hint:#1a5fd4; --hint-soft:rgba(26,95,212,.38);
  --btn:#fff; --btn-line:#b8b8b2; --pri:#0a0a0a; --pri-fg:#fff; --top-bg:#fff; --icon-bg:#fff;
  --die-bg:#fff; --die-line:#111; --die-pip:#0a0a0a; --bdie-bg:#1a1a1a; --bdie-line:#000; --bdie-pip:#fff;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",Roboto,system-ui,sans-serif;
  --safeTop:env(safe-area-inset-top,0px); --edgeT:min(30px,calc(var(--safeTop)*.75)); --safeT:calc(var(--safeTop) + var(--edgeT)); --safeB:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden;padding-top:calc(50px + var(--safeT));padding-bottom:var(--safeB);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.hidden{display:none!important}
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:8px;height:calc(50px + var(--safeT));padding:var(--safeT) 12px 0;background:var(--top-bg);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;letter-spacing:-.2px}
.mark{width:28px;height:28px;border-radius:7px}
.back-btn{border:0;background:none;color:var(--fg);font-size:17px;font-weight:600;padding:8px 4px;color:var(--fg)}
.binfo{flex:1;text-align:right;font-size:13px;color:var(--muted);line-height:16px;white-space:nowrap;overflow:hidden;font-weight:500}
.binfo b{color:var(--fg);font-weight:700}
.icon-btn{border:1px solid var(--btn-line);background:var(--icon-bg);color:var(--fg);border-radius:10px;width:44px;height:38px;font-size:18px}
.game{flex:1;display:flex;flex-direction:column;min-height:0;padding:6px 8px 8px}
.strip{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding:2px 4px;height:22px;font-weight:500}
.strip b{color:var(--fg);font-weight:600}
.strip .who{display:flex;align-items:center;gap:6px}
.strip .dot{width:12px;height:12px;border-radius:50%;display:inline-block;border:2px solid var(--me-line);background:var(--me);box-shadow:0 0 0 0.5px rgba(0,0,0,.15)}
.strip .dot.bot{background:var(--bot);border-color:var(--bot-line)}
.strip .turn{color:var(--fg);font-weight:600}
.play{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.board-wrap{display:flex;align-items:center;justify-content:center}
.board{display:block;touch-action:none}
.status{min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;line-height:19px;padding:4px 6px;color:var(--fg);font-weight:600}
.status .sub{color:var(--muted);font-weight:500}
.actions{display:flex;gap:8px;padding-top:2px}
.actions button{flex:1;height:48px;border-radius:12px;border:1.5px solid var(--btn-line);background:var(--btn);font-weight:650;font-size:16px;color:var(--fg)}
.actions button:disabled{opacity:.5;color:var(--muted)}
.actions button.pri{background:var(--pri);color:var(--pri-fg);border-color:var(--pri)}
.actions button.pri:disabled{background:var(--btn);color:var(--fg);border-color:var(--btn-line)}
/* board svg parts */
.ck-sel{fill:none;stroke:var(--accent);stroke-width:4;stroke-linejoin:round}
.ck-cand{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-dasharray:5 3}
.dest{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.4}
.dest-col{fill:var(--accent-soft)}
.hint-src{fill:none;stroke:var(--hint);stroke-width:4}
.hint-dst{fill:var(--hint);stroke:#fff;stroke-width:2}
.hint-arrow{stroke:var(--hint);stroke-width:3;fill:none;stroke-linecap:round;opacity:1}
.hint-num{fill:#fff;font-weight:700;font-family:var(--sans)}
.die rect{fill:var(--die-bg);stroke:var(--die-line);stroke-width:2}
.die circle{fill:var(--die-pip)}
.die.bot rect{fill:var(--bdie-bg);stroke:var(--bdie-line)}
.die.bot circle{fill:var(--bdie-pip)}
.die.used{opacity:.4}
.die.ghost rect{fill:rgba(255,255,255,.55);stroke:#1d1d1d;stroke-dasharray:4 3}
.roll-lab{font-family:var(--sans);font-weight:700;fill:#111}
.cnt{font-family:var(--sans);font-weight:700;text-anchor:middle;dominant-baseline:central}
.ptnum{font-family:var(--sans);text-anchor:middle}
/* settings screen */
.settings{flex:1;overflow-y:auto;padding:10px 14px 24px;-webkit-overflow-scrolling:touch}
.settings h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:14px 4px 7px}
.group{background:var(--card);color:var(--fg);border-radius:14px;border:1px solid var(--line);overflow:hidden}
.row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;background:none;text-align:left;border-top:1px solid var(--line);min-height:50px}
.row:first-child{border-top:0}
.row .lab{flex:1}
.row .lab small{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.row .tick{width:22px;text-align:center;font-weight:700;color:var(--fg);visibility:hidden}
.row.on .tick{visibility:visible}
.seg{display:flex;gap:6px;padding:10px}
.seg button{flex:1;height:42px;border-radius:10px;border:1px solid var(--btn-line);background:var(--btn);color:var(--fg);font-weight:600}
.seg button.on{background:var(--pri);color:var(--pri-fg);border-color:var(--pri)}
.switch{width:50px;height:30px;border-radius:15px;background:#d5d5d1;position:relative;flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.row.on .switch{background:var(--pri)}
.row.on .switch::after{left:23px}
.note{font-size:13px;color:var(--muted);margin:8px 4px;line-height:18px}
.bigbtn{display:block;width:100%;height:50px;border-radius:12px;border:0;background:var(--pri);color:var(--pri-fg);font-weight:600;font-size:16px;margin-top:10px}
.upd-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(70px + var(--safeB));z-index:30;border:0;border-radius:20px;background:#111;color:#fff;padding:9px 16px;font-size:14px;box-shadow:0 3px 12px rgba(0,0,0,.3)}

/* ---------------- board style B: classic wood tavla box ---------------- */
html.theme-b,body.theme-b{--bg:#ead9c0; --fg:#1f1208; --muted:#5c4630; --line:#c9b48f; --card:#fbf6ec; --top-bg:#f4ead8; --icon-bg:#fbf6ec;
  --btn:#fbf6ec; --btn-line:#b89a6e; --pri:#3d1f0e; --pri-fg:#f6ead0;
  --accent:#d99200; --accent-soft:rgba(217,146,0,.52); --hint:#1550c0; --hint-soft:rgba(21,80,192,.4);
  --die-bg:#fff8e8; --die-line:#3d2212; --die-pip:#1f1208; --bdie-bg:#2a160c; --bdie-line:#0a0502; --bdie-pip:#f6ead0}
/* ---------------- board style C: dark ---------------- */
html.theme-c,body.theme-c{--bg:#0a0c10; --fg:#f4f6f8; --muted:#a0a8b4; --line:#2a303a; --card:#141820; --top-bg:#10141a; --icon-bg:#1a1f28;
  --btn:#1a1f28; --btn-line:#3a4452; --pri:#2ad4f0; --pri-fg:#04161a;
  --accent:#2ad4f0; --accent-soft:rgba(42,212,240,.34); --hint:#c9a0ff; --hint-soft:rgba(201,160,255,.4);
  --die-bg:#f4f6f8; --die-line:#1a1a1a; --die-pip:#0a0a0a; --bdie-bg:#ff5a3a; --bdie-line:#ffd0c4; --bdie-pip:#1a0502}
body.theme-c .actions button.pri:disabled{background:var(--btn);color:var(--fg)}
body.theme-c .hint-num{fill:#14171c}
body.theme-c .switch{background:#3a404a}
/* ---------------- board style D: big board (turned sideways), slim bars ---------------- */
/* Big board (D) portrait: upright board; slim chrome so the board fills more of the screen. Landscape uses body.land. */
body.theme-d.port{padding-top:calc(38px + var(--safeT))}
body.theme-d.port .top{height:calc(38px + var(--safeT))}
body.theme-d.port .brand{font-size:15px} body.theme-d.port .mark{width:22px;height:22px;border-radius:6px}
body.theme-d.port .icon-btn{width:36px;height:30px;font-size:15px;border-radius:8px}
body.theme-d.port .binfo{font-size:12px;line-height:14px}
body.theme-d.port .game{padding:2px 2px 3px}
body.theme-d.port .strip{display:none}
body.theme-d.port .status{min-height:28px;font-size:13px;line-height:16px;padding:1px 4px}
body.theme-d.port .actions{gap:5px;padding:0 2px}
body.theme-d.port .actions button{height:40px;font-size:14px;border-radius:10px}
/* Big board in landscape: same side-column layout as other themes (body.land); keep strips hidden if any */
body.theme-d.land .strip{display:none}

/* contrast: used dice keep a readable rim; rolling shake keeps a solid edge */
.die.used rect{stroke-opacity:.85}
body.theme-c .die:not(.bot) rect{stroke:#1a1a1a;stroke-width:2.2}
body.theme-c .die.bot rect{stroke:#ffd0c4;stroke-width:2}
.icon-btn{font-weight:600}

/* record screen */
.row .chev{font-size:22px;color:var(--muted);width:22px;text-align:center}
.rec-row{display:grid;grid-template-columns:1.45fr 1fr 1fr 1fr;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:15px;font-variant-numeric:tabular-nums}
.rec-row:first-child{border-top:0}
.rec-row span:not(:first-child){text-align:center}
.rec-head{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding-top:8px;padding-bottom:8px}
.rec-row.cur{background:var(--accent-soft)}
.rec-row.cur span:first-child{font-weight:700}
.rec-tot{font-weight:600}
.confirm{margin-top:12px;padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.confirm p{margin:0 2px 4px;font-size:15px}
.confirm-btns{display:flex;gap:8px}
.confirm-btns .bigbtn{flex:1;background:var(--btn);color:var(--fg);border:1px solid var(--btn-line)}
.confirm-btns .bigbtn.danger{background:#c0392b;color:#fff;border-color:#c0392b}
.binfo .rec{display:inline-block;padding:0 5px;border-radius:6px;background:var(--accent-soft);font-weight:600;font-size:.92em}
/* ---------------- landscape phone: full-width board left, slim side column right (header info, status, buttons) */
body.land{--side:178px; --safeL:env(safe-area-inset-left,0px); --safeR:env(safe-area-inset-right,0px);
  --padL:max(6px,var(--safeL)); --padR:max(6px,var(--safeR))}
body.land{padding-top:calc(44px + var(--safeTop));padding-left:var(--padL);padding-right:var(--padR)}
body.land .top{height:calc(44px + var(--safeTop));padding:var(--safeTop) var(--padR) 0 var(--padL)}
body.land.v-game{padding-top:0}
body.land.v-game .top{left:auto;right:var(--padR);width:var(--side);height:auto;padding:6px 0 0;background:transparent;box-shadow:none;align-items:flex-start;gap:6px}
body.land.v-game .brand{display:none}
body.land.v-game .binfo{text-align:left;font-size:12.5px;line-height:16px;white-space:normal}
body.land.v-game .icon-btn{width:40px;height:34px;font-size:16px;flex:none}
body.land.v-game .game{display:grid;grid-template-columns:minmax(0,1fr) var(--side);grid-template-rows:62px minmax(0,1fr) auto;column-gap:8px;padding:4px 0 max(6px,var(--safeB))}
body.land.v-game .play{grid-column:1;grid-row:1/4;min-width:0}
body.land.v-game .strip{display:none}
body.land.v-game .status{grid-column:2;grid-row:2;min-height:0;font-size:14px;line-height:18px;padding:2px 2px;overflow:hidden}
body.land.v-game .actions{grid-column:2;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0}
body.land.v-game .actions button{height:42px;font-size:15px;border-radius:11px}
body.land.v-game .actions button.pri{grid-column:1/-1}
@media (max-height:350px){body.land.v-game .actions button{height:38px} body.land.v-game .game{grid-template-rows:56px minmax(0,1fr) auto}}