/* v5m: phone layout (360-430 portrait + landscape). Desktop untouched: everything is inside the media query. */
:root{--sab:env(safe-area-inset-bottom,0px);--sat:env(safe-area-inset-top,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--mnav:60px;--dbh:104px}
@media (max-width:860px), (max-height:500px) and (pointer:coarse){
  html,body{overflow-x:hidden;max-width:100vw}
  body{-webkit-tap-highlight-color:transparent}
  input,select,textarea{font-size:16px}
  /* ---------- header: one compact scrollable row ---------- */
  .top{height:auto;min-height:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;padding:calc(6px + var(--sat)) calc(8px + var(--sar)) 6px calc(8px + var(--sal));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top::-webkit-scrollbar,.tbar::-webkit-scrollbar,.pmbar::-webkit-scrollbar,.pv-tools::-webkit-scrollbar{display:none}
  .top,.tbar{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .top::after,.tbar::after{content:"";flex:0 0 22px}
  .top>*{flex:none}.top .sp{flex:1 0 4px}.top .stat,.brand span,.codebox .lbl{display:none}
  .top .codebox{padding:2px 4px 2px 10px;gap:6px}.top .code{font-size:17px}
  .top .hbtn,.top .btn.sm{min-height:38px;min-width:38px}
  .langs .hbtn{min-width:34px;padding:0 6px}
  /* ---------- GM: app = full-height column, no page scroll ---------- */
  body.is-dm{overflow:hidden}
  body.is-dm #app{display:flex;flex-direction:column;height:100vh;height:100dvh}
  body.is-dm .dm{display:flex;flex-direction:column;flex:1;min-height:0;height:auto}
  .dm-map{flex:1;min-height:0;padding-bottom:calc(var(--mnav) + var(--sab))}
  .dm-map .maphost{flex:1;height:auto;min-height:0}
  .tbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;padding:6px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tbar>*{flex:none;scroll-snap-align:start}.tbar>.sp{display:none}
  .tbar .seg{flex-wrap:nowrap}.tbar .seg button{white-space:nowrap;padding:0 12px}
  .tbar .btn.sm{min-height:40px;white-space:nowrap}
  /* GM side panel -> bottom nav + bottom sheet */
  .dm-side{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:calc(100dvh - 60px);border:0;border-top:var(--bw) solid var(--line);border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.35);padding-bottom:var(--sab);padding-left:var(--sal);padding-right:var(--sar)}
  .dm-side::before{content:"";position:absolute;left:50%;top:5px;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--line);opacity:.8;pointer-events:none}
  .dm-side .tabs{order:2;margin:10px 8px 6px;flex:none;overflow-x:auto;scrollbar-width:none}
  .dm-side .tabs button{min-height:44px;min-width:0;padding:0 4px;font-size:14px;white-space:nowrap}
  .dm-side .tabs .cnt{min-width:16px;padding:0 3px;font-size:10.5px;line-height:16px;margin-left:2px}
  .dm-side .sbody{display:none;order:1;padding:16px 14px 10px;max-height:58dvh;overscroll-behavior:contain}
  body.msheet .dm-side .sbody{display:block;padding-top:42px}
  body.msheet .dm-side .tabs{margin-top:4px;border-top:var(--bw) solid color-mix(in srgb,var(--line) 60%,transparent);padding-top:6px}
  .msh-x{display:none}
  body.msheet .msh-x{display:flex;position:absolute;right:8px;top:6px;z-index:2;width:36px;height:30px;align-items:center;justify-content:center;border:0;border-radius:10px;background:var(--panel2);color:var(--text);cursor:pointer}
  .msh-x .svic{width:16px;height:16px}
  .is-dm .zoom{right:8px;bottom:8px}
  .is-dm .jr{right:8px;top:8px;left:auto;width:min(350px,calc(100% - 16px));max-height:calc(100% - 70px)}
  .is-dm .jr.off{left:8px;right:auto;width:auto}
  .is-dm .modeind{display:none}
  .selp{left:8px;right:8px;width:auto;max-width:none;transform:none;bottom:8px;flex-wrap:wrap;white-space:normal}
  .mus{left:8px;right:8px;width:auto;bottom:calc(var(--mnav) + 10px + var(--sab))}
  body.msheet .mus{display:none}
  /* ---------- player ---------- */
  .pv-top{left:calc(8px + var(--sal));right:calc(8px + var(--sar));top:calc(8px + var(--sat));gap:8px}
  .pv-top .pill{min-width:0;padding:6px 12px;gap:8px}.pv-top .pill .me{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu{width:44px;height:44px;flex:none}
  .turn{top:56px;padding:6px 16px;max-width:calc(100% - 120px);text-align:center}
  .pv .zoom{top:calc(64px + var(--sat));right:8px;bottom:auto}
  .pv-tools{position:absolute;top:auto;right:auto;left:calc(8px + var(--sal));bottom:calc(var(--dbh) + 6px + var(--sab));flex-direction:row;flex-wrap:nowrap;max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none;z-index:9}
  .pv-tools button{white-space:nowrap;min-height:40px;padding:0 12px}
  .pv-dice{left:calc(8px + var(--sal));right:calc(8px + var(--sar));bottom:calc(8px + var(--sab));max-width:none;align-items:stretch}
  .dbar{flex-wrap:wrap;justify-content:flex-start;gap:4px;padding:6px}
  .dbar .die{flex:1 0 38px;min-width:0;padding:0 2px;min-height:42px;font-size:14px}.dbar .stepper{flex:none;margin-right:auto}.dbar .d3b{flex:none}
  .log.mini{display:none}
  .pv-panel{left:8px;right:8px;width:auto;top:auto;bottom:calc(var(--dbh) + 56px + var(--sab));max-height:50vh;max-height:50dvh}
  .pv-panel.min{bottom:calc(var(--dbh) + 56px + var(--sab))}
  .is-pv .jr{left:8px;right:8px;width:auto;max-width:none;bottom:calc(var(--dbh) + 56px + var(--sab));top:auto;max-height:40vh}
  .is-pv .jr.off{left:8px;right:auto;bottom:auto;top:calc(64px + var(--sat))}
  .is-pv .mus{left:8px;right:62px;width:auto;top:calc(64px + var(--sat));bottom:auto}
  body.is-pv:has(#pmbar) .pv-panel,body.is-pv:has(#pmbar) .pv-panel.min,body.is-pv:has(#pmbar) .jr:not(.off){bottom:calc(var(--dbh) + 104px + var(--sab))}
  /* ---------- theme bar ---------- */
  .pmbar{left:calc(8px + var(--sal));right:auto;transform:none;max-width:calc(100vw - 16px);bottom:calc(var(--dbh) + 54px + var(--sab));overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;white-space:nowrap;scrollbar-width:none;gap:6px;padding:5px 6px 5px 10px}
  body:has(.pv-panel:not([hidden]):not(.min)) .pmbar{left:calc(8px + var(--sal));max-width:calc(100vw - 16px)}
  .pmbar>*{flex:none}
  .pmbar button{min-height:34px}
  .pmbar .pmb-x{position:sticky;right:0;min-width:34px}
  .pmbar .pmb-tick{max-width:150px;overflow:hidden;text-overflow:ellipsis}
  body.is-dm .pmbar{bottom:calc(var(--mnav) + 10px + var(--sab))}
  body.msheet .pmbar{display:none}
  body.is-dm:has(#pmbar) .mus{bottom:calc(var(--mnav) + 58px + var(--sab))}
  .pm-kitty{left:4px;bottom:calc(var(--dbh) + 100px + var(--sab));width:60px;height:54px}
  body.is-dm .pm-kitty{bottom:calc(var(--mnav) + 58px + var(--sab))}
  .pm-fire{left:6px;bottom:calc(var(--dbh) + 100px + var(--sab));transform:scale(.75);transform-origin:left bottom}
  body.is-dm .pm-fire{bottom:calc(var(--mnav) + 58px + var(--sab))}
  .pmsight{width:min(360px,80vw)!important}
  /* ---------- profile card -> bottom sheet ---------- */
  .dcard,.dcard.in{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;transform:none;max-height:85vh;max-height:85dvh;overflow-y:auto;border-radius:18px 18px 0 0;padding-bottom:var(--sab);z-index:95}
  .dcard{transform:translateY(105%)}.dcard.in{transform:none}
  .dcard .dc-x{min-width:40px;min-height:40px}
  .dc-sight{min-height:48px}
  /* ---------- modals -> bottom sheets ---------- */
  .modal{align-items:flex-end;padding:0}
  .modal .mbox{width:100%;max-width:none;max-height:90vh;max-height:90dvh;overflow-y:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + var(--sab));margin:0}
  .modal .mbox .row{flex-wrap:wrap}
  .modal .mbox .btn{min-height:44px}
  .pf{left:8px;right:8px;width:auto;max-width:none}
  .ctxm{max-width:calc(100vw - 16px)}
  /* ---------- toasts ---------- */
  .toast{left:12px;right:12px;transform:none;bottom:calc(var(--mnav) + 18px + var(--sab));text-align:center}
  [data-design="b"] .toast{transform:rotate(-1deg)}
  .rolltoast{max-width:calc(100vw - 24px)}
  .eggtoast{max-width:calc(100vw - 24px)}
  /* ---------- start screen ---------- */
  .lobby{padding:24px 14px calc(24px + var(--sab))}
  .lcards{grid-template-columns:1fr}.hero h1{font-size:30px}
  .lobby .btn{min-height:48px}
}
/* landscape phones: thinner chrome so the map keeps most of the height */
@media (max-height:500px) and (orientation:landscape){
  :root{--mnav:50px;--dbh:62px}
  .dbar{flex-wrap:nowrap}.dbar .stepper{margin-right:0}
  .top{padding-top:4px;padding-bottom:4px}.top .hbtn,.top .btn.sm{min-height:34px}
  .tbar{padding:4px 8px}.tbar .btn.sm{min-height:36px}
  .dm-side{left:auto;width:min(460px,60vw);right:calc(8px + var(--sar));border-radius:16px 16px 0 0}
  .dm-side .tabs{margin:8px 6px 4px}.dm-side .tabs button{min-height:36px}
  .dm-side .sbody{max-height:calc(100dvh - 140px)}
  .dm-map{padding-bottom:calc(var(--mnav) + var(--sab))}
  .pv-dice{left:auto;width:min(520px,62vw)}
  .pv-panel{top:60px;bottom:8px;width:min(380px,48vw);right:auto;max-height:none}
  body.is-dm .pmbar{left:auto;right:calc(8px + var(--sar));max-width:calc(100vw - min(460px,60vw) - 40px);bottom:8px;left:8px;right:auto}
  .modal .mbox{max-height:96dvh}
  .dcard,.dcard.in{left:50%;right:auto;width:min(560px,96vw);margin-left:calc(min(560px,96vw) / -2);max-height:96dvh}
}
@media (max-width:860px), (max-height:500px) and (pointer:coarse){
  body.is-dm:has(#pmbar) .selp{bottom:54px}
  body.is-dm:has(#pmbar) .zoom{bottom:54px}
}