/* Prevent iOS text loupe/callouts on the play surface while preserving dialog zoom. */
html{
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:auto;
  scrollbar-gutter:stable;
}
body{
  position:relative;
  inset:auto;
  height:auto;
  min-height:100svh;
  overflow:visible;
  overscroll-behavior-y:auto;
}
.game-shell{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.board,.piece,.piece *{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}
.drag-preview.is-auto-rotated span{box-shadow:inset 0 0 12px #d6b86688,0 0 8px #f3db8b}
.hint-target{z-index:8}
.play-layout{
  display:grid;
  grid-template-columns:clamp(42px,12vw,64px) minmax(0,1fr) clamp(42px,12vw,64px);
  gap:5px;
  align-items:stretch;
  width:min(100%,430px);
  margin:0 auto;
}
.play-layout .board-panel{width:100%;margin:0;align-self:center}
.play-layout .board{width:92%}
.side-drawer{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #5f4d2b;
  border-radius:12px;
  background:linear-gradient(180deg,#17130d,#0d0b08);
  box-shadow:0 10px 25px #0007,inset 0 0 20px #0005;
}
.side-drawer-label{
  display:block;
  min-height:23px;
  padding:7px 2px 5px;
  color:var(--gold-soft);
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-align:center;
}
.side-drawer .piece-drawer{
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  gap:4px;
  padding:4px 3px 5px;
  border-top:1px solid #3d321e;
  background:transparent;
}
.side-drawer .drawer-slot{
  display:grid;
  flex:1 1 0;
  min-width:0;
  min-height:40px;
  height:auto;
  max-height:none;
  place-items:center;
  border-radius:7px;
}
.side-drawer .drawer-slot.is-empty{border-color:#282116;background:#09080666}
.drawer-piece{--drawer-cell:11px;width:calc(var(--piece-w) * var(--drawer-cell));height:calc(var(--piece-h) * var(--drawer-cell))}
.drawer-piece.is-drawer-wide{--drawer-cell:8px}
.drawer-piece.is-drawer-narrow .piece-cell{left:50%;width:var(--drawer-cell);transform:translateX(-50%)}
.drawer-piece.is-drawer-flat .piece-cell{top:50%;height:var(--drawer-cell);transform:translateY(-50%) scaleY(1.12)}
.piece-actions{grid-template-columns:repeat(4,1fr)}
.piece-actions #go{border-color:#aa8740;background:linear-gradient(#41351c,#19130b);letter-spacing:.08em}
.scorebar{grid-template-columns:repeat(5,1fr)}
.scorebar.is-timer-hidden{grid-template-columns:repeat(4,1fr)}
.scorebar.is-timer-hidden>div:nth-child(3){border-right:1px solid #40351f}
.scorebar.is-timer-hidden>div:nth-child(4){border-right:0}
.result-stats{grid-template-columns:repeat(3,1fr)}

@media(pointer:fine){
  html{overflow-y:scroll}
}

@media(max-height:840px) and (max-width:699px){
  .game-shell{padding-top:8px}
  .topbar{margin-bottom:5px}
  .scorebar{margin-bottom:4px}
  .message{margin-block:2px 4px}
  .play-layout{width:min(100%,390px)}
  .play-layout .board-panel{width:100%}
  .side-drawer-label{min-height:20px;padding:5px 1px 3px;font-size:6px}
  .side-drawer .piece-drawer{gap:2px;padding:3px 2px 4px}
  .side-drawer .drawer-slot{min-height:34px}
  .piece-actions{margin-block:5px}
  .drawer-piece{--drawer-cell:9px}
  .drawer-piece.is-drawer-wide{--drawer-cell:7px}
  .ad-reservation{min-height:23px;margin-top:6px}
}
@media(min-width:700px) and (min-height:821px){
  .play-layout{width:min(88vw,700px);grid-template-columns:minmax(72px,92px) minmax(0,1fr) minmax(72px,92px);gap:10px}
  .play-layout .board-panel{width:100%}
  .play-layout .board{width:92%}
  .side-drawer-label{font-size:8px}
  .side-drawer .piece-drawer{gap:6px;padding:6px}
  .drawer-piece{--drawer-cell:14px}
  .drawer-piece.is-drawer-wide{--drawer-cell:10.5px}
}
@media(min-width:900px) and (max-height:820px){
  .play-layout{width:min(100%,500px);grid-template-columns:minmax(56px,72px) minmax(0,340px) minmax(56px,72px);gap:8px;justify-content:center}
  .play-layout .board-panel{width:100%}
  .play-layout .board{width:92%}
  .side-drawer .piece-drawer{gap:3px;padding:4px 3px}
  .side-drawer .drawer-slot{min-height:36px}
  .drawer-piece{--drawer-cell:10px}
  .drawer-piece.is-drawer-wide{--drawer-cell:8px}
  .ad-reservation{min-height:22px;margin-top:5px}
}