/* Moksha Patam desktop studio (1000px and up only). Left rail: who is playing + players. Centre: the board, as large as the screen allows.
   Right rail: whose turn, dice, roll, log. Nothing here applies below 1000px, so phone and tablet layouts are unchanged.
   Board size is pure CSS (container units on .mp-stage), so no script depends on these dimensions. */
@media (min-width:1000px){
  body.mp-studio>.mp-app{
    grid-template-columns:clamp(200px,17vw,340px) minmax(0,1fr) clamp(240px,21vw,380px);
    grid-template-areas:"bar bar bar" "hud stage play";
    grid-template-rows:auto minmax(0,1fr);
    gap:0 20px;align-items:stretch;
    padding:env(safe-area-inset-top,0) 20px 24px;
  }
  body.mp-studio .mp-bar{grid-area:bar;min-height:68px;gap:12px}
  body.mp-studio .mp-bar-t{text-align:left;font-size:24px;padding-left:4px}
  body.mp-studio #mpmodebtn{display:none}

  /* left rail */
  body.mp-studio .mp-hud{grid-area:hud;align-self:start;margin-top:0;padding:20px;border-radius:22px;background:#FBF9F4;border:1px solid rgba(22,32,44,.10);box-shadow:0 1px 0 rgba(22,32,44,.04),0 10px 28px -18px rgba(22,32,44,.28)}
  body.mp-studio .mp-modewrap{display:block}
  body.mp-studio .mp-mh{display:block;margin:0 0 10px;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5A6573}
  body.mp-studio .mp-mode{background:#F0EEE6}
  body.mp-studio .mp-mode button{min-height:44px;font-size:14px}
  body.mp-studio .mp-players{grid-template-columns:1fr;gap:10px;margin-top:18px}
  body.mp-studio .mp-pl{padding:13px 16px;gap:12px;font-size:16px;border-radius:16px;background:#fff}
  body.mp-studio .mp-pl i{width:20px;height:20px}
  body.mp-studio .mp-pl b{font-size:17px}
  body.mp-studio .mp-pl.on{background:color-mix(in srgb,var(--c) 12%,#fff)}

  /* centre: the board */
  body.mp-studio .mp-stage{grid-area:stage;height:100%;min-height:0;padding:4px 0;box-sizing:border-box}
  body.mp-studio .mp-hud,body.mp-studio .mp-play{max-height:calc(100dvh - 110px);overflow:auto}

  /* right rail */
  body.mp-studio .mp-play{grid-area:play;align-self:start;padding:22px;border-radius:22px;background:#FBF9F4;border:1px solid rgba(22,32,44,.10);box-shadow:0 1px 0 rgba(22,32,44,.04),0 10px 28px -18px rgba(22,32,44,.28)}
  body.mp-studio .mp-turn{font-size:28px;margin:0 0 16px;min-height:36px}
  body.mp-studio .mp-die{--s:54px}
  body.mp-studio .mp-roll{min-height:64px;font-size:18px}
  body.mp-studio .mp-log{font-size:15px;min-height:56px;max-height:none;padding:12px 14px;background:#fff;border:1px solid rgba(22,32,44,.08)}
  body.mp-studio .mp-log.up{background:#E3F5E9}
  body.mp-studio .mp-log.down{background:#FDECEC}
  body.mp-studio .mp-again{min-height:52px;font-size:16px}

  /* ladders and snakes: a popover under the toolbar, not a full-width bottom sheet */
  body.mp-studio>.mp-app .mp-rules-sheet{left:auto;right:32px;bottom:auto;top:76px;width:380px;max-height:calc(100dvh - 110px);border-radius:22px;padding:18px 20px}
}