/* Backgammon. Built on app.css and stepstone.css (dialogs, rules). Board colours follow the approved canvas. */
:root{--field:#e6d7b8;--frame:#1d1712;--p1:#c4361b;--p2:#3a2a1e;--me:#fbf6e9;--meedge:#8a7d66;--cpu:#1d1712;--cpuedge:#5f5448;--tray:#d9c8a5;--die:#fbf6e9;--pip:#1d1712}
@media (prefers-color-scheme:dark){:root{--field:#2b221b;--frame:#0d0a07;--p1:#b3301a;--p2:#5a4a3a;--me:#efe5d0;--cpuedge:#9a8b74;--tray:#211a14}}

.bg-app{min-height:100dvh;display:flex;flex-direction:column;
  --bw:min(366px,calc(100vw - 24px),calc((100dvh - 280px) * 366 / 286))}
.bg-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px max(12px,var(--sar)) 8px max(12px,var(--sal));min-height:0}
.bg-info{width:var(--bw);display:flex;justify-content:space-between}
.bg-side{display:flex;align-items:center;gap:8px;height:44px;font-weight:600;font-size:16px;min-width:0}
.bg-side .dot{width:18px;height:18px;border-radius:50%;flex:none;border:1.5px solid}
.bg-side .dot.me{background:var(--me);border-color:var(--meedge)}
.bg-side .dot.cpu{background:var(--cpu);border-color:var(--cpuedge)}
.bg-side b{font-weight:700}
.bg-side span{color:var(--mut);font-weight:500;font-size:15px;white-space:nowrap}
.bg-side .clk{font-variant-numeric:tabular-nums;min-width:3ch}
.bg-side .clk.low{color:var(--accent);font-weight:700}
.bg-side.on{box-shadow:inset 0 -3px 0 var(--accent)}
.bg-board{width:var(--bw);display:block;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.bg-board .hit{fill:transparent;cursor:pointer}
.bg-status{min-height:28px;font-weight:600;font-size:17px;text-align:center;display:flex;align-items:center}
.bg-status.mut{color:var(--mut)}
.bg-ctl{width:min(342px,100%);margin-top:auto;display:flex;flex-direction:column}
.bg-ctl .mrow{border-top:1px solid var(--line)}
.bg-ctl .btns{display:flex;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.bg-ctl .btns .pill{height:64px;font-size:20px;flex:1}
.bg-ctl .btns .pill.small{flex:none;width:128px}
.bg-ctl .mact{border-top:1px solid var(--line)}
.bg-ctl .mact{padding-top:8px}
.bg-ctl .step .val{width:118px;font-size:20px}
.pill.sec{background:var(--card);color:var(--fg);border:2px solid var(--fg);box-shadow:none}
.pill.sec:disabled{background:var(--dis-bg);color:var(--dis-fg);border-color:var(--dis-line)}
.bg-app .gbar{margin-top:8px}
.bg-end h2{font-size:26px}
.bg-end p.sub{margin:0;text-align:center;font-size:16px;color:var(--mut);line-height:1.35;font-weight:500}
.rules-bg .money{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.rules-bg .money b{text-align:right}

@media (max-height:700px) and (max-width:899px){
  .bg-app{height:100dvh;overflow:hidden}
  .bg-main{gap:4px;padding-top:2px;padding-bottom:4px}
  .bg-side{height:40px}
  .bg-ctl .mrow{height:50px}
  .bg-ctl .btns{padding-top:10px}
  .bg-ctl .btns .pill{height:56px}
  .bg-ctl .mact .pill{height:56px}
}
@media (min-width:900px){
  .bg-app{--bw:min(770px,calc((100dvh - 290px) * 366 / 286))}
  .bg-main{padding-top:16px;gap:12px}
  .bg-side{font-size:20px;height:48px}
  .bg-side span{font-size:18px}
  .bg-side .dot{width:22px;height:22px}
  .bg-status{font-size:20px}
  .bg-ctl{width:var(--bw);flex-direction:row;align-items:center;justify-content:space-between;gap:32px;margin-top:auto}
  .bg-ctl .mrow{border:0;flex:none;gap:16px;height:64px}
  .bg-ctl .btns{border:0;padding:0;flex:1;max-width:520px;justify-content:flex-end}
  .bg-ctl .btns .pill{height:60px;flex:1;max-width:310px}
  .bg-ctl .btns .pill.small{flex:none;width:170px}
  .bg-ctl .mact{border:0;padding:0;flex:1;max-width:260px}
  .bg-ctl .mact .pill{height:60px}
  .bg-ctl .step .val{width:112px}
}
.bg-ctl .mact .pill{white-space:nowrap}