/* Du Tas match table. All rules stay inside the game screen.
   Grid and physical offsets also work in the shipped Android WebView 83. */
.game-shell.game-stage{
  position:relative;isolation:isolate;max-width:none;min-height:100vh;min-height:100dvh;
  padding:22px 30px 36px;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 40%,#36695929 0,transparent 62%),
    radial-gradient(ellipse at 4% 7%,#ba8a4421 0,transparent 37%),
    radial-gradient(ellipse at 95% 87%,#0c9d9420 0,transparent 42%),
    repeating-linear-gradient(89deg,#ffffff02 0,#ffffff02 1px,transparent 1px,transparent 7px),
    linear-gradient(140deg,#152321,#071c21 52%,#09191b);
}
.game-stage:before{
  content:'';position:absolute;z-index:-1;pointer-events:none;top:0;right:0;bottom:0;left:0;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 88px,#d0a56a05 89px,transparent 90px),
    radial-gradient(ellipse at 50% 47%,transparent 25%,#0005 100%);
}
.game-stage .game-top{max-width:1020px;margin:0 auto 21px;min-height:48px;gap:12px}
.game-stage .game-top .brand{color:#f8e7c7;font-size:28px;text-shadow:0 2px 2px #0008}
.game-stage .game-top>.round-button{
  width:46px;height:46px;min-height:46px;flex-shrink:0;border-radius:15px;
  border:1px solid #ccb38044;background:linear-gradient(145deg,#35413a,#172c2d);
  box-shadow:inset 0 1px #ffedbd20,0 4px 9px #0004;
}
.game-stage .game-meta{
  min-height:35px;padding:7px 12px;border:1px solid #cbb27a26;border-radius:12px;
  background:#06171970;color:#d6d8c4;font-size:12px;line-height:1.6;
}
.game-stage .game-center{position:relative;max-width:900px;margin:auto}
.game-stage .game-center>.status-line{
  justify-content:center;margin:0 0 12px;padding:9px 15px;border:1px solid #d8ad7159;
  border-radius:11px;background:#432e22;color:#ffe3b1;text-align:center;
}

/* Player cards use the same ivory and deep jade materials as the pieces. */
.game-stage .player-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
  position:relative;min-height:85px;margin:0 5px;padding:12px 18px;
  border:1px solid #cab07a2c;border-radius:18px;
  background:linear-gradient(112deg,#33423dbe,#172e30d9 48%,#11282acf);
  box-shadow:inset 0 1px #f7e9bf12,0 5px 12px #0003;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.game-stage .player-row.is-active{
  border-color:#d7b96b9c;background:linear-gradient(112deg,#38564bdd,#1a3938ee 60%,#17312ddd);
  box-shadow:inset 0 1px #fff1c42b,0 0 0 1px #d9b7630a,0 4px 18px #0004;
}
.game-stage .player-info{
  display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:13px;min-width:0;
}
.game-stage .player-info>div:last-child{min-width:0}
.game-stage .player-info>.checker-avatar{
  position:relative;width:49px;height:49px;margin:0;border:2px solid #ddc18c;
  background:radial-gradient(ellipse at 33% 21%,#fffff5 0,#f8e9c7 32%,#d4b881 76%,#ae8951 95%);
  box-shadow:inset 0 2px 1px #fff9,inset 0 -3px 3px #7e592d55,0 3px 0 #8d693d,0 6px 10px #0008;
}
.game-stage .checker-avatar:before{
  content:'';position:absolute;top:7px;right:7px;bottom:7px;left:7px;border-radius:50%;
  border:1px solid #a787494f;box-shadow:inset 0 1px 2px #67441625,0 1px #fffff287;
}
.game-stage .checker-avatar.black{
  border-color:#8f9b79;background:radial-gradient(ellipse at 32% 19%,#7b9e89 0,#345b50 27%,#18362f 69%,#0b211e 95%);
  box-shadow:inset 0 2px 1px #bddeca44,inset 0 -3px 3px #0008,0 3px 0 #071915,0 6px 10px #0009;
}
.game-stage .checker-avatar.black:before{border-color:#07291c88;box-shadow:inset 0 1px 3px #0005,0 1px #95bca14d}
.game-stage .player-row.is-active .checker-avatar:after{
  content:'';position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;
  border:1px solid #e2c581a8;box-shadow:0 0 13px #f0c55826;animation:du-tas-turn 2.8s ease-in-out infinite;
}
.game-stage .player-info strong{
  display:block;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#f9edcc;font-size:16px;line-height:1.5;font-weight:700;
}
.game-stage .player-info small{display:block;margin-top:3px;color:#b4c5bc;font-size:12px;line-height:1.6}
.game-stage .player-metrics{
  display:grid;grid-auto-flow:column;grid-auto-columns:auto;align-items:center;gap:18px;
  max-width:none;margin:0;flex-wrap:nowrap;color:#b9c6bd;font-size:12px;line-height:1.5;
}
.game-stage .player-metrics>span{white-space:nowrap}
.game-stage .player-metrics b{font-size:24px;line-height:1.3;color:#ead5a6;font-weight:700;font-variant-numeric:tabular-nums}
.game-stage .turn-pill{
  display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 10px;
  border:1px solid #a9d5a54d;border-radius:9px;color:#e1f1c9;font-size:11px;line-height:1.6;
  background:linear-gradient(135deg,#426b4e,#2a5146);box-shadow:inset 0 1px #effbc71c;
}

/* The SVG owns the board wood and inlays; CSS supplies the table shadow. */
.game-stage .board-wrap{
  position:relative;margin:14px 0 17px;border-radius:24px;direction:ltr;
  background:#35291c;filter:none;
  box-shadow:0 2px 0 #b9904c50,0 7px 0 #120d07,0 13px 17px #0008,0 24px 44px #0007,0 -1px 0 #f3db9e66;
}
.game-stage .board-wrap:before{
  content:'';position:absolute;top:-5px;right:2px;bottom:-10px;left:2px;z-index:-1;border-radius:26px;
  background:linear-gradient(90deg,#b0833b26,transparent 25%,transparent 75%,#b0833b26);
}
.game-stage .board-svg{width:100%;height:auto;min-height:0;overflow:visible;touch-action:manipulation}
.game-stage .board-svg .selected-ring{stroke:#fff1a9;stroke-width:3.5;filter:drop-shadow(0 0 3px #f5d46f)}
.game-stage .board-svg .destination-dot{fill:#f2cf74;stroke:#fff4c7;stroke-width:1.5}
.game-stage .board-svg .board-point:focus>.point-hit,
.game-stage .board-svg [data-bar]:focus>rect:first-child,
.game-stage .board-svg [data-off]:focus>rect:last-child{
  stroke:#fff0a9;stroke-width:2.5;stroke-opacity:1;outline:none;
}

/* A shallow leather tray, with beveled ivory dice and inset dark pips. */
.game-stage .game-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;
  min-height:92px;margin:17px auto 4px;padding:7px 13px;
}
.game-stage .game-controls>*{margin:6px 8px}
.game-stage .dice-tray{
  display:grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;justify-content:center;gap:12px;
  min-height:77px;max-width:100%;padding:12px 16px 15px;border:1px solid #9e814c65;border-radius:18px;direction:ltr;
  background:radial-gradient(ellipse at 50% 0,#76603b27,transparent 80%),
    repeating-linear-gradient(38deg,#fff2 0,#fff2 .3px,transparent .3px,transparent 4px),#143331;
  box-shadow:inset 0 0 0 3px #071f20, inset 0 0 0 4px #ae8a4826,inset 0 3px 10px #000b,0 1px 0 #e6c99126;
}
.game-stage .dice-tray:empty{display:none}
.game-stage .dice-area{display:grid;justify-items:center;align-content:center;gap:9px;min-width:0;max-width:100%}
.game-stage .dice-area>.dice-tray{margin:0}
.game-stage .dice-pair{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:12px;align-items:center;direction:ltr}
.game-stage .die{
  position:relative;width:49px;height:49px;margin:0;padding:9px;border:1px solid #fff3cb;border-radius:11px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;
  background:radial-gradient(ellipse at 25% 8%,#fffffc 0,transparent 56%),linear-gradient(135deg,#fff8df 15%,#f7e8c7 65%,#dfc797);
  box-shadow:inset 0 2px 1px #fff,inset 2px 0 2px #ffffff9c,inset -2px -3px 4px #a77b3b48,
    0 2px 0 #dcc394,0 5px 0 #917142,1px 8px 9px #0009;
  transform:rotate(-4deg);transition:opacity .18s,transform .18s,box-shadow .18s;
}
.game-stage .dice-tray>.die+.die,.game-stage .dice-pair>.die+.die{margin:0}
.game-stage .die:nth-child(even){transform:rotate(5deg)}
.game-stage .die:before{
  content:'';position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid #fff8;border-radius:8px;pointer-events:none;
}
.game-stage .die i{
  position:relative;width:8px;height:8px;align-self:center;justify-self:center;border-radius:50%;
  background:radial-gradient(circle at 58% 69%,#53402b 0,#2c2117 68%,#1a140f 100%);
  box-shadow:inset 0 1.2px 1.7px #000e,0 1px 0 #ffffffd9;border:1px solid #795a3552;
}
.game-stage .die.used{opacity:.37;transform:translateY(3px) rotate(-4deg);box-shadow:inset 0 2px #fff7,0 2px 0 #876c44,0 4px 5px #0006}
.game-stage .die.used:nth-child(even){transform:translateY(3px) rotate(5deg)}
.game-stage .die.unrolled{
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;
  opacity:.65;background:linear-gradient(135deg,#eee3c7,#cabd9c);
  box-shadow:inset 0 2px #fffa,inset -2px -3px 4px #8a714844,0 3px 0 #847044,0 6px 8px #0006;
}
.game-stage .die.unrolled>.icon{width:25px;height:25px;color:#7b6849;opacity:.65}
.game-stage .die.unrolled svg circle{display:none}
.game-stage .dice-uses{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;
  width:100%;max-width:200px;padding:0 4px;color:#c4cebc;text-align:center;
}
.game-stage .move-token{
  display:block;width:8px;height:8px;margin:0 3px;border-radius:50%;border:1px solid #e8d59e88;
  background:radial-gradient(circle at 33% 24%,#fff1b4,#c29c50);
  box-shadow:inset 0 1px #fff5,0 1px 3px #0008,0 0 5px #daba6726;
}
.game-stage .move-token.used{border-color:#94aa9b3b;background:#0c2524;box-shadow:inset 0 1px 2px #0009;opacity:.6}
.game-stage .dice-uses>small{display:block;flex-basis:100%;margin-top:5px;font-size:11px;line-height:1.6;white-space:normal;letter-spacing:0}
.game-stage .game-controls .primary{
  min-width:170px;min-height:55px;padding:13px 25px;border-radius:15px;
  border:1px solid #ffe9aa;background:linear-gradient(180deg,#fce3a2 0,#e9c270 45%,#c89543 100%);
  color:#352816;font-size:16px;font-weight:700;text-shadow:0 1px #fff9;
  box-shadow:inset 0 2px #fff4c999,inset 0 -2px #7d592338,0 4px 0 #775622,0 8px 16px #0006;
}
.game-stage .game-controls .secondary{
  min-height:50px;padding:12px 19px;border-radius:13px;border-color:#9eb5a04a;
  color:#e8edda;background:linear-gradient(180deg,#385d50,#203e38);box-shadow:inset 0 1px #fff2,0 3px 0 #0c251f,0 6px 11px #0004;
}
.game-stage .game-controls .primary:active,.game-stage .game-controls .secondary:active{transform:translateY(2px);box-shadow:inset 0 1px 2px #0002,0 1px 0 #775622}
.game-stage .game-controls .small-link{
  min-height:44px;padding:10px 15px;border:1px solid #bdc8ad2b;border-radius:12px;background:#0a262480;color:#d4d8bc;
}
.game-stage .move-options{
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:0;
  max-width:690px;margin:9px auto 12px;padding:8px 6px;border:1px solid #c1ad772b;border-radius:15px;
  background:linear-gradient(145deg,#263e32ab,#122d2ac4);box-shadow:inset 0 1px #f0e6be0b;
}
.game-stage .move-choice{
  display:grid;grid-template-columns:29px minmax(0,1fr);align-items:center;gap:9px;
  min-width:124px;max-width:100%;min-height:48px;margin:4px;padding:8px 12px;
  border:1px solid #c8b47a64;border-radius:11px;background:linear-gradient(155deg,#415849,#243d33);
  color:#f4e5bf;text-align:start;font-size:13px;line-height:1.65;
  box-shadow:inset 0 1px #fff3cb1c,0 2px 0 #071f19,0 4px 7px #0003;
}
.game-stage .move-choice>b{
  display:grid;place-items:center;width:29px;height:29px;border:1px solid #ffe7af8c;border-radius:7px;
  background:linear-gradient(145deg,#f8e4ae,#cda65f);color:#46341c;font-size:16px;line-height:1;font-weight:700;
  box-shadow:inset 0 1px #fff9,0 2px 0 #745c31;text-shadow:0 1px #fff6;
}
.game-stage .move-choice>span{overflow-wrap:anywhere}
.game-stage .move-choice:active{transform:translateY(1px);background:#415e49;box-shadow:inset 0 1px 2px #0004}
.game-stage .move-choice:focus{outline:2px solid #ffe9a4;outline-offset:3px}
.game-stage .game-hint{max-width:620px;min-height:38px;margin:8px auto 0;padding:0 14px;color:#c2cbbb;font-size:14px;line-height:1.85}
.game-stage .hint-card{max-width:620px;margin:15px auto 8px;padding:17px 21px;border-radius:15px;background:linear-gradient(135deg,#355a4c,#193934);border-color:#d2b77466}
.game-stage .hint-card strong{color:#f6d99e}
.game-stage .hint-card p{color:#e0e6d2}
.game-stage .win-banner{margin:22px 4px 10px;border-color:#e0c38c;background:radial-gradient(ellipse at 50% 0,#bc945448,transparent 72%),linear-gradient(135deg,#2d4c3d,#112e2c);box-shadow:inset 0 0 0 4px #cba35913,0 10px 24px #0005}
@keyframes du-tas-turn{0%,100%{opacity:.7}50%{opacity:1;box-shadow:0 0 17px #efd3823b}}

@media(max-width:640px){
  .game-shell.game-stage{padding:13px 10px 24px}
  .game-stage .game-top{min-height:44px;margin-bottom:14px;gap:8px}
  .game-stage .game-top .brand{font-size:25px}
  .game-stage .game-top>.round-button{width:43px;height:43px;min-height:43px;border-radius:13px}
  .game-stage .game-meta{max-width:104px;min-height:32px;padding:6px 9px;font-size:11px;text-align:center;line-height:1.6}
  .game-stage .player-row{grid-template-columns:minmax(0,1fr) auto;min-height:78px;padding:10px 11px;margin:0 2px;border-radius:15px;gap:9px}
  .game-stage .player-info{grid-template-columns:39px minmax(0,1fr);gap:10px}
  .game-stage .player-info>.checker-avatar{width:38px;height:38px;border-width:2px}
  .game-stage .checker-avatar:before{top:5px;right:5px;bottom:5px;left:5px}
  .game-stage .player-row.is-active .checker-avatar:after{top:-5px;right:-5px;bottom:-5px;left:-5px}
  .game-stage .player-info strong{font-size:14px;line-height:1.6;max-width:150px}
  .game-stage .player-info small{font-size:11px;line-height:1.6;margin-top:2px}
  .game-stage .player-metrics{grid-auto-flow:row;grid-template-columns:auto auto;justify-content:end;gap:3px 9px;font-size:11px;line-height:1.5;max-width:145px}
  .game-stage .player-metrics b{font-size:19px;margin-inline-end:3px}
  .game-stage .player-metrics .turn-pill{grid-column:1/-1;justify-self:end;max-width:145px;padding:3px 8px;min-height:23px;font-size:10px;line-height:1.5;white-space:normal;text-align:center}
  .game-stage .board-wrap{margin:12px 0 16px;border-radius:15px;box-shadow:0 2px 0 #b9904c50,0 5px 0 #120d07,0 10px 15px #0008,0 18px 28px #0007}
  .game-stage .board-wrap:before{border-radius:17px;top:-3px;bottom:-8px}
  .game-stage .game-controls{min-height:84px;margin:10px -4px 0;padding:4px 0}
  .game-stage .game-controls>*{margin:6px}
  .game-stage .dice-tray{min-height:69px;padding:10px 12px 13px;gap:10px;border-radius:15px}
  .game-stage .dice-pair{gap:10px}
  .game-stage .dice-area{gap:8px}
  .game-stage .dice-uses{max-width:180px}
  .game-stage .dice-uses>small{margin-top:4px}
  .game-stage .dice-uses>small{font-size:11px;line-height:1.6}
  .game-stage .die{width:43px;height:43px;padding:8px;border-radius:10px}
  .game-stage .die i{width:7px;height:7px}
  .game-stage .die:before{border-radius:7px}
  .game-stage .game-controls .primary{min-width:148px;min-height:52px;padding:12px 18px;font-size:15px;border-radius:13px}
  .game-stage .game-controls .secondary{min-height:46px;font-size:14px;padding:10px 14px;border-radius:12px}
  .game-stage .game-controls .small-link{font-size:13px;padding:8px 12px}
  .game-stage .move-options{margin:8px 2px 11px;padding:5px 4px;border-radius:13px}
  .game-stage .move-choice{min-width:120px;min-height:47px;margin:4px;padding:8px 10px;gap:8px;font-size:13px}
  .game-stage .game-hint{font-size:13px;line-height:1.85;margin-top:7px;padding:0 13px}
  .game-stage .hint-card{font-size:13px;padding:15px 17px;margin:12px 4px 8px}
  .game-stage .win-banner{padding:22px 17px;border-radius:18px}
  .game-stage .win-banner h2{font-size:27px}
  html[dir=rtl] .game-stage .player-info strong{font-size:14px;line-height:1.7}
  html[dir=rtl] .game-stage .player-info small,html[dir=rtl] .game-stage .player-metrics,html[dir=rtl] .game-stage .game-meta{font-size:12px;line-height:1.7}
  html[dir=rtl] .game-stage .player-metrics{max-width:150px;gap:2px 8px;flex-wrap:nowrap}
  html[dir=rtl] .game-stage .turn-pill{font-size:12px;line-height:1.7}
  html[dir=rtl] .game-stage .game-controls .primary,html[dir=rtl] .game-stage .game-controls .secondary{font-size:18px;line-height:1.7;padding:10px 16px}
  html[dir=rtl] .game-stage .game-hint{font-size:14px;line-height:1.85}
  html[dir=rtl] .game-stage .dice-uses>small{font-size:12px;line-height:1.7}
  html[dir=rtl] .game-stage .move-choice{font-size:15px;line-height:1.7;min-height:50px}
}
@media(max-width:365px){
  .game-shell.game-stage{padding:12px 7px 22px}
  .game-stage .game-top .brand,html[dir=rtl] .game-stage .game-top .brand{font-size:23px}
  .game-stage .game-top .brand-mark{width:27px;height:27px}
  .game-stage .game-meta{max-width:91px;padding:5px 7px}
  .game-stage .player-row{padding:9px;gap:6px;min-height:78px}
  .game-stage .player-info{grid-template-columns:34px minmax(0,1fr);gap:8px}
  .game-stage .player-info>.checker-avatar{width:33px;height:33px}
  .game-stage .player-info strong{font-size:13px;max-width:110px}
  .game-stage .player-metrics,html[dir=rtl] .game-stage .player-metrics{gap:2px 7px;max-width:134px}
  .game-stage .player-metrics b{font-size:18px}
  .game-stage .game-controls>*{margin:5px}
  .game-stage .game-controls .primary{min-width:135px;padding:11px 13px}
  .game-stage .dice-tray{padding:9px 11px 12px;gap:9px}
  .game-stage .die{width:41px;height:41px;padding:7px}
}
/* Wide screens keep the action panel alongside the board instead of below it.
   The height limit reserves room for the header and the two player cards. */
@media(min-width:900px) and (min-height:700px){
  .game-shell.game-stage{padding:14px 30px 22px}
  .game-stage .game-top{max-width:1180px;min-height:44px;margin-bottom:12px}
  .game-stage .game-center{
    display:grid;grid-template-columns:minmax(0,1fr) 184px;grid-template-rows:repeat(5,auto);
    align-items:start;gap:0 20px;max-width:1180px;max-width:min(1180px,calc((100vh - 260px) * 1.4074 + 204px));
  }
  .game-stage .game-center>.player-row,.game-stage .game-center>.board-wrap,.game-stage .game-center>.status-line{grid-column:1}
  .game-stage .player-row{min-height:68px;padding:9px 13px;border-radius:14px}
  .game-stage .player-info{grid-template-columns:40px minmax(0,1fr);gap:11px}
  .game-stage .player-info>.checker-avatar{width:39px;height:39px}
  .game-stage .player-info strong{font-size:14px}
  .game-stage .player-info small{font-size:11px;margin-top:1px}
  .game-stage .player-metrics{gap:12px;font-size:11px}
  .game-stage .player-metrics b{font-size:21px}
  .game-stage .turn-pill{font-size:10px;padding:4px 8px}
  .game-stage .board-wrap{margin:11px 0 15px;border-radius:20px}
  .game-stage .game-actions{
    grid-column:2;grid-row:1/span 5;align-self:center;min-width:0;padding:13px 10px 16px;
    border:1px solid #c5ad6d35;border-radius:20px;background:linear-gradient(145deg,#304238ab,#102a27c7);
    box-shadow:inset 0 1px #fff3c915,0 8px 24px #0003;
  }
  .game-stage .game-actions .game-controls{flex-direction:column;min-height:0;margin:0;padding:0}
  .game-stage .game-actions .game-controls>*{margin:7px 0}
  .game-stage .game-actions .dice-tray{padding:12px 14px 15px}
  .game-stage .game-actions .game-controls .primary,.game-stage .game-actions .game-controls .secondary{width:100%;min-width:0;padding-left:9px;padding-right:9px}
  .game-stage .game-actions .game-controls .small-link{width:100%}
  .game-stage .game-actions .move-options{display:grid;grid-template-columns:1fr;gap:7px;margin:9px 0;padding:0;background:none;border:0;box-shadow:none}
  .game-stage .game-actions .move-choice{width:100%;min-width:0;margin:0;padding:8px;font-size:12px;gap:7px}
  .game-stage .game-actions .game-hint{font-size:12px;line-height:1.75;margin:10px 0 0;padding:0 2px;min-height:0}
  .game-stage .game-actions .hint-card{margin:10px 0;padding:11px 10px;border-radius:12px;font-size:12px}
  .game-stage .game-actions .hint-card p{font-size:12px;line-height:1.8}
  .game-stage .game-actions .hint-card strong{font-size:13px}
  .game-stage .game-center>.win-banner{grid-column:1/-1}
  html[dir=rtl] .game-stage .game-actions .move-choice{font-size:14px}
  html[dir=rtl] .game-stage .game-actions .game-hint,html[dir=rtl] .game-stage .game-actions .hint-card p{font-size:13px;line-height:1.85}
}
/* A narrow landscape window scrolls vertically; the board keeps its geometry. */
@media(orientation:landscape) and (max-height:520px){
  .game-shell.game-stage{padding-top:10px;padding-bottom:20px}
  .game-stage .game-top{margin-bottom:10px}
  .game-stage .game-center{max-width:760px}
  .game-stage .player-row{min-height:67px;padding-top:8px;padding-bottom:8px}
  .game-stage .board-wrap{margin-top:11px;margin-bottom:14px}
  .game-stage .game-controls{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .game-stage .player-row.is-active .checker-avatar:after{animation:none}
  .game-stage .player-row,.game-stage .die{transition:none}
}
/* Override compat.css's old flex margins after switching these rows to grid. */
@supports not (inset:0){
  .game-shell.game-stage{min-height:100vh}
  .game-stage .player-info,.game-stage .player-row,.game-stage .player-metrics,.game-stage .dice-tray{row-gap:inherit;column-gap:inherit}
  .game-stage .player-row{gap:16px}
  .game-stage .player-info{gap:13px}
  .game-stage .player-metrics{gap:18px}
  .game-stage .dice-tray{gap:12px}
  .game-stage .player-row>.player-metrics,
  html[dir=rtl] .game-stage .player-row>.player-metrics,
  .game-stage .player-info>.checker-avatar,
  html[dir=rtl] .game-stage .player-info>.checker-avatar,
  .game-stage .player-metrics>*+*,
  html[dir=rtl] .game-stage .player-metrics>*+*,
  html[dir=rtl] .game-stage .player-metrics>*+*{margin-left:0;margin-right:0}
  .game-stage .game-controls>*{margin:6px 8px}
  .game-stage .dice-tray>.die+.die{margin:0}
  @media(max-width:640px){
    .game-stage .player-row{gap:9px}
    .game-stage .player-info{gap:10px}
    .game-stage .player-metrics{gap:3px 9px}
    html[dir=rtl] .game-stage .player-metrics{gap:2px 8px}
    .game-stage .dice-tray{gap:10px}
    .game-stage .game-controls>*{margin:6px}
  }
  @media(max-width:365px){
    .game-stage .player-row{gap:6px}
    .game-stage .player-info{gap:8px}
    .game-stage .player-metrics,html[dir=rtl] .game-stage .player-metrics{gap:2px 7px}
    .game-stage .dice-tray{gap:9px}
    .game-stage .game-controls>*{margin:5px}
  }
}