@layer reset {

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-touch-callout: none; }

body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--page-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  user-select: none;
}

body:has(.stop-screen) {
  height: 100dvh;
  overflow: hidden;
}

/* The game screen is a fixed-height shell: state bar pinned top, hand +
   items + actions pinned bottom, one scrollable center slot in between.
   For .stop-screen's flex:1 to actually fill the viewport, its parent
   #main-content must itself be a height-constrained flex column. */
body:has(.stop-screen) #main-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

}