/* Study Grove shell (Grove Shell 2). The one stylesheet that owns the play
   screen's layout: the world fills the window, and five zones float over it:
   place card (top left), focus pill or next goal (top centre), status (top
   right), dock (bottom centre) and the status stack above the dock. Panels open
   in one sheet beside the world (src/sheet-host.js). Loaded last; component
   skins inside panels still come from the earlier sheets. */

:root {
  --hud-edge: 14px;
  --hud-h: 50px;
  --dock-h: 72px;
  --sheet-w: 452px;
  --sheet-top: calc(var(--hud-edge) + var(--hud-h) + 12px);
  --sheet-bottom: calc(var(--hud-edge) + var(--dock-h) + 12px);
  --hud-line: 3px solid var(--cz-cocoa);
  --hud-lift: 0 3px 0 var(--cz-cocoa);
  --hud-float: 0 3px 0 var(--cz-cocoa), 0 10px 24px #3c28221f;
  --soft-line: 2px dashed #5a403838;
  --z-world: 1;
  --z-hud: 30;
  --z-tour: 34;
  --z-sheet: 40;
  --z-chat: 42;
  --z-toast: 60;
  --z-modal: 65;
  --z-gate: 70;
}

/* ---------- pixel icons ---------- */
.px {
  display: inline-block;
  flex: none;
  width: var(--px-size, 21px);
  height: var(--px-size, 21px);
  background: currentColor;
  -webkit-mask: var(--px) center / contain no-repeat;
  mask: var(--px) center / contain no-repeat;
  vertical-align: middle;
}
/* Pixel icons: 14x14 grids drawn as masks so they take the colour of the text around them. */
.px-minimap{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h12v1H1zM1 2h1v1H1zM12 2h1v1H12zM1 3h1v1H1zM3 3h3v1H3zM8 3h3v1H8zM12 3h1v1H12zM1 4h1v1H1zM3 4h3v1H3zM8 4h3v1H8zM12 4h1v1H12zM1 5h1v1H1zM3 5h3v1H3zM8 5h3v1H8zM12 5h1v1H12zM1 6h1v1H1zM12 6h1v1H12zM1 7h1v1H1zM6 7h2v1H6zM12 7h1v1H12zM1 8h1v1H1zM5 8h4v1H5zM12 8h1v1H12zM1 9h1v1H1zM6 9h2v1H6zM12 9h1v1H12zM1 10h1v1H1zM12 10h1v1H12zM1 11h1v1H1zM12 11h1v1H12zM1 12h12v1H1z'/%3E%3C/svg%3E")}
.px-focus{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h4v1H5zM6 1h2v1H6zM4 2h6v1H4zM3 3h1v1H3zM10 3h1v1H10zM2 4h1v1H2zM6 4h2v1H6zM11 4h1v1H11zM1 5h1v1H1zM6 5h2v1H6zM12 5h1v1H12zM1 6h1v1H1zM6 6h2v1H6zM12 6h1v1H12zM1 7h1v1H1zM6 7h4v1H6zM12 7h1v1H12zM1 8h1v1H1zM12 8h1v1H12zM1 9h1v1H1zM12 9h1v1H12zM2 10h1v1H2zM11 10h1v1H11zM3 11h1v1H3zM10 11h1v1H10zM4 12h6v1H4z'/%3E%3C/svg%3E")}
.px-study{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1 2h5v1H1zM8 2h5v1H8zM0 3h1v1H0zM6 3h2v1H6zM13 3h1v1H13zM0 4h1v1H0zM2 4h3v1H2zM6 4h2v1H6zM9 4h3v1H9zM13 4h1v1H13zM0 5h1v1H0zM6 5h2v1H6zM13 5h1v1H13zM0 6h1v1H0zM2 6h3v1H2zM6 6h2v1H6zM9 6h3v1H9zM13 6h1v1H13zM0 7h1v1H0zM6 7h2v1H6zM13 7h1v1H13zM0 8h1v1H0zM2 8h2v1H2zM6 8h2v1H6zM9 8h2v1H9zM13 8h1v1H13zM0 9h1v1H0zM6 9h2v1H6zM13 9h1v1H13zM0 10h1v1H0zM6 10h2v1H6zM13 10h1v1H13zM1 11h5v1H1zM8 11h5v1H8zM6 12h2v1H6z'/%3E%3C/svg%3E")}
.px-map{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M0 1h4v1H0zM8 1h4v1H8zM0 2h1v1H0zM3 2h5v1H3zM11 2h3v1H11zM0 3h1v1H0zM3 3h1v1H3zM7 3h1v1H7zM11 3h1v1H11zM13 3h1v1H13zM0 4h1v1H0zM3 4h1v1H3zM7 4h1v1H7zM11 4h1v1H11zM13 4h1v1H13zM0 5h1v1H0zM3 5h1v1H3zM7 5h1v1H7zM11 5h1v1H11zM13 5h1v1H13zM0 6h1v1H0zM3 6h1v1H3zM7 6h1v1H7zM11 6h1v1H11zM13 6h1v1H13zM0 7h1v1H0zM3 7h1v1H3zM7 7h1v1H7zM11 7h1v1H11zM13 7h1v1H13zM0 8h1v1H0zM3 8h1v1H3zM7 8h1v1H7zM11 8h1v1H11zM13 8h1v1H13zM0 9h1v1H0zM3 9h1v1H3zM7 9h1v1H7zM11 9h1v1H11zM13 9h1v1H13zM0 10h3v1H0zM7 10h5v1H7zM13 10h1v1H13zM2 11h6v1H2zM11 11h3v1H11z'/%3E%3C/svg%3E")}
.px-journal{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h10v1H2zM1 1h1v1H1zM12 1h1v1H12zM1 2h1v1H1zM3 2h8v1H3zM12 2h1v1H12zM1 3h1v1H1zM3 3h1v1H3zM10 3h1v1H10zM12 3h1v1H12zM1 4h1v1H1zM3 4h8v1H3zM12 4h1v1H12zM1 5h1v1H1zM12 5h1v1H12zM1 6h1v1H1zM4 6h6v1H4zM12 6h1v1H12zM1 7h1v1H1zM12 7h1v1H12zM1 8h1v1H1zM4 8h6v1H4zM12 8h1v1H12zM1 9h1v1H1zM12 9h1v1H12zM1 10h1v1H1zM12 10h1v1H12zM1 11h11v1H1zM2 12h1v1H2zM5 12h1v1H5zM3 13h2v1H3z'/%3E%3C/svg%3E")}
.px-play{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h2v1H6zM6 1h2v1H6zM5 2h4v1H5zM5 3h4v1H5zM0 4h14v1H0zM1 5h12v1H1zM2 6h10v1H2zM3 7h8v1H3zM3 8h8v1H3zM2 9h4v1H2zM8 9h4v1H8zM2 10h3v1H2zM9 10h3v1H9zM1 11h3v1H1zM10 11h3v1H10zM1 12h2v1H1zM11 12h2v1H11z'/%3E%3C/svg%3E")}
.px-together{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h3v1H2zM9 1h3v1H9zM1 2h5v1H1zM8 2h5v1H8zM1 3h5v1H1zM8 3h5v1H8zM1 4h5v1H1zM8 4h5v1H8zM2 5h3v1H2zM9 5h3v1H9zM1 7h5v1H1zM8 7h5v1H8zM0 8h7v1H0zM8 8h6v1H8zM0 9h7v1H0zM8 9h6v1H8zM0 10h7v1H0zM8 10h6v1H8zM0 11h7v1H0zM8 11h6v1H8z'/%3E%3C/svg%3E")}
.px-coin{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h6v1H4zM2 1h2v1H2zM10 1h2v1H10zM1 2h1v1H1zM4 2h6v1H4zM12 2h1v1H12zM1 3h1v1H1zM3 3h1v1H3zM10 3h1v1H10zM12 3h1v1H12zM0 4h1v1H0zM2 4h1v1H2zM6 4h2v1H6zM11 4h1v1H11zM13 4h1v1H13zM0 5h1v1H0zM2 5h1v1H2zM5 5h4v1H5zM11 5h1v1H11zM13 5h1v1H13zM0 6h1v1H0zM2 6h1v1H2zM6 6h2v1H6zM11 6h1v1H11zM13 6h1v1H13zM0 7h1v1H0zM2 7h1v1H2zM6 7h2v1H6zM11 7h1v1H11zM13 7h1v1H13zM0 8h1v1H0zM2 8h1v1H2zM5 8h4v1H5zM11 8h1v1H11zM13 8h1v1H13zM0 9h1v1H0zM2 9h1v1H2zM6 9h2v1H6zM11 9h1v1H11zM13 9h1v1H13zM1 10h1v1H1zM3 10h1v1H3zM10 10h1v1H10zM12 10h1v1H12zM1 11h1v1H1zM4 11h6v1H4zM12 11h1v1H12zM2 12h2v1H2zM10 12h2v1H10zM4 13h6v1H4z'/%3E%3C/svg%3E")}
.px-gear{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h2v1H6zM3 1h1v1H3zM6 1h2v1H6zM10 1h1v1H10zM2 2h3v1H2zM6 2h2v1H6zM9 2h3v1H9zM3 3h8v1H3zM3 4h2v1H3zM9 4h2v1H9zM0 5h4v1H0zM10 5h4v1H10zM0 6h4v1H0zM10 6h4v1H10zM3 7h2v1H3zM9 7h2v1H9zM3 8h8v1H3zM2 9h3v1H2zM6 9h2v1H6zM9 9h3v1H9zM3 10h1v1H3zM6 10h2v1H6zM10 10h1v1H10zM6 11h2v1H6z'/%3E%3C/svg%3E")}
.px-close{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h2v1H2zM10 2h2v1H10zM2 3h3v1H2zM9 3h3v1H9zM3 4h3v1H3zM8 4h3v1H8zM4 5h6v1H4zM5 6h4v1H5zM5 7h4v1H5zM4 8h6v1H4zM3 9h3v1H3zM8 9h3v1H8zM2 10h3v1H2zM9 10h3v1H9zM2 11h2v1H2zM10 11h2v1H10z'/%3E%3C/svg%3E")}
.px-more{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1 6h2v1H1zM6 6h2v1H6zM11 6h2v1H11zM1 7h2v1H1zM6 7h2v1H6zM11 7h2v1H11z'/%3E%3C/svg%3E")}
.px-home{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h2v1H6zM5 1h4v1H5zM4 2h2v1H4zM8 2h2v1H8zM3 3h2v1H3zM9 3h2v1H9zM2 4h2v1H2zM10 4h2v1H10zM1 5h2v1H1zM11 5h2v1H11zM0 6h2v1H0zM12 6h2v1H12zM1 7h1v1H1zM12 7h1v1H12zM1 8h1v1H1zM4 8h4v1H4zM12 8h1v1H12zM1 9h1v1H1zM4 9h1v1H4zM7 9h1v1H7zM12 9h1v1H12zM1 10h1v1H1zM4 10h1v1H4zM7 10h1v1H7zM12 10h1v1H12zM1 11h1v1H1zM4 11h1v1H4zM7 11h1v1H7zM12 11h1v1H12zM1 12h12v1H1z'/%3E%3C/svg%3E")}
.px-door{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h10v1H2zM2 1h1v1H2zM11 1h1v1H11zM2 2h1v1H2zM11 2h1v1H11zM2 3h1v1H2zM11 3h1v1H11zM2 4h1v1H2zM11 4h1v1H11zM2 5h1v1H2zM11 5h1v1H11zM2 6h1v1H2zM8 6h2v1H8zM11 6h1v1H11zM2 7h1v1H2zM11 7h1v1H11zM2 8h1v1H2zM11 8h1v1H11zM2 9h1v1H2zM11 9h1v1H11zM2 10h1v1H2zM11 10h1v1H11zM2 11h1v1H2zM11 11h1v1H11zM1 12h12v1H1z'/%3E%3C/svg%3E")}
.px-chat{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h12v1H1zM0 2h1v1H0zM13 2h1v1H13zM0 3h1v1H0zM13 3h1v1H13zM0 4h1v1H0zM3 4h2v1H3zM6 4h2v1H6zM9 4h2v1H9zM13 4h1v1H13zM0 5h1v1H0zM3 5h2v1H3zM6 5h2v1H6zM9 5h2v1H9zM13 5h1v1H13zM0 6h1v1H0zM13 6h1v1H13zM0 7h1v1H0zM13 7h1v1H13zM1 8h5v1H1zM8 8h5v1H8zM5 9h1v1H5zM7 9h1v1H7zM5 10h2v1H5zM5 11h1v1H5z'/%3E%3C/svg%3E")}
.px-search{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h5v1H3zM2 2h1v1H2zM8 2h1v1H8zM1 3h1v1H1zM9 3h1v1H9zM1 4h1v1H1zM9 4h1v1H9zM1 5h1v1H1zM9 5h1v1H9zM1 6h1v1H1zM9 6h1v1H9zM2 7h1v1H2zM8 7h1v1H8zM3 8h6v1H3zM9 9h2v1H9zM10 10h2v1H10zM11 11h2v1H11zM12 12h1v1H12z'/%3E%3C/svg%3E")}
.px-keyboard{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1 2h12v1H1zM0 3h1v1H0zM13 3h1v1H13zM0 4h1v1H0zM2 4h1v1H2zM4 4h1v1H4zM6 4h1v1H6zM8 4h1v1H8zM10 4h1v1H10zM13 4h1v1H13zM0 5h1v1H0zM13 5h1v1H13zM0 6h1v1H0zM3 6h1v1H3zM5 6h1v1H5zM7 6h1v1H7zM9 6h1v1H9zM11 6h1v1H11zM13 6h1v1H13zM0 7h1v1H0zM13 7h1v1H13zM0 8h1v1H0zM4 8h6v1H4zM13 8h1v1H13zM0 9h1v1H0zM13 9h1v1H13zM1 10h12v1H1z'/%3E%3C/svg%3E")}
.px-expand{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h5v1H1zM8 1h5v1H8zM1 2h2v1H1zM11 2h2v1H11zM1 3h1v1H1zM3 3h1v1H3zM10 3h1v1H10zM12 3h1v1H12zM1 4h1v1H1zM4 4h1v1H4zM9 4h1v1H9zM12 4h1v1H12zM1 5h1v1H1zM12 5h1v1H12zM1 8h1v1H1zM12 8h1v1H12zM1 9h1v1H1zM4 9h1v1H4zM9 9h1v1H9zM12 9h1v1H12zM1 10h1v1H1zM3 10h1v1H3zM10 10h1v1H10zM12 10h1v1H12zM1 11h2v1H1zM11 11h2v1H11zM1 12h5v1H1zM8 12h5v1H8z'/%3E%3C/svg%3E")}
.px-help{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h6v1H4zM3 1h2v1H3zM9 1h2v1H9zM2 2h2v1H2zM10 2h2v1H10zM7 3h2v1H7zM10 3h2v1H10zM6 4h2v1H6zM10 4h2v1H10zM5 5h2v1H5zM5 6h2v1H5zM5 7h2v1H5zM5 9h2v1H5zM5 10h2v1H5z'/%3E%3C/svg%3E")}
.px-pin{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h4v1H5zM4 1h1v1H4zM9 1h1v1H9zM3 2h1v1H3zM10 2h1v1H10zM3 3h1v1H3zM6 3h2v1H6zM10 3h1v1H10zM3 4h1v1H3zM6 4h2v1H6zM10 4h1v1H10zM3 5h1v1H3zM10 5h1v1H10zM4 6h1v1H4zM9 6h1v1H9zM4 7h1v1H4zM9 7h1v1H9zM5 8h1v1H5zM8 8h1v1H8zM5 9h1v1H5zM8 9h1v1H8zM6 10h2v1H6zM2 12h10v1H2z'/%3E%3C/svg%3E")}
.px-walk{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M11 0h2v1H11zM10 1h4v1H10zM10 2h4v1H10zM11 3h2v1H11zM2 4h2v1H2zM1 5h4v1H1zM1 6h4v1H1zM10 6h2v1H10zM2 7h2v1H2zM9 7h4v1H9zM9 8h4v1H9zM2 9h2v1H2zM10 9h2v1H10zM1 10h4v1H1zM1 11h4v1H1zM2 12h2v1H2z'/%3E%3C/svg%3E")}
.px-portal{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h6v1H4zM2 1h2v1H2zM10 1h2v1H10zM1 2h1v1H1zM4 2h6v1H4zM12 2h1v1H12zM1 3h1v1H1zM3 3h1v1H3zM10 3h1v1H10zM12 3h1v1H12zM0 4h1v1H0zM2 4h1v1H2zM5 4h4v1H5zM11 4h1v1H11zM13 4h1v1H13zM0 5h1v1H0zM2 5h1v1H2zM4 5h1v1H4zM9 5h1v1H9zM11 5h1v1H11zM13 5h1v1H13zM0 6h1v1H0zM2 6h1v1H2zM4 6h1v1H4zM6 6h2v1H6zM9 6h1v1H9zM11 6h1v1H11zM13 6h1v1H13zM0 7h1v1H0zM2 7h1v1H2zM4 7h1v1H4zM6 7h2v1H6zM9 7h1v1H9zM11 7h1v1H11zM13 7h1v1H13zM0 8h1v1H0zM2 8h1v1H2zM4 8h1v1H4zM9 8h1v1H9zM11 8h1v1H11zM13 8h1v1H13zM0 9h1v1H0zM2 9h1v1H2zM5 9h4v1H5zM11 9h1v1H11zM13 9h1v1H13zM1 10h1v1H1zM3 10h1v1H3zM10 10h1v1H10zM12 10h1v1H12zM1 11h1v1H1zM4 11h6v1H4zM12 11h1v1H12zM2 12h2v1H2zM10 12h2v1H10zM4 13h6v1H4z'/%3E%3C/svg%3E")}
.px-lock{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h6v1H4zM3 1h1v1H3zM10 1h1v1H10zM2 2h1v1H2zM11 2h1v1H11zM2 3h1v1H2zM11 3h1v1H11zM2 4h1v1H2zM11 4h1v1H11zM1 5h12v1H1zM1 6h1v1H1zM12 6h1v1H12zM1 7h1v1H1zM6 7h2v1H6zM12 7h1v1H12zM1 8h1v1H1zM6 8h2v1H6zM12 8h1v1H12zM1 9h1v1H1zM7 9h1v1H7zM12 9h1v1H12zM1 10h1v1H1zM12 10h1v1H12zM1 11h12v1H1z'/%3E%3C/svg%3E")}
.px-back{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h2v1H5zM4 2h2v1H4zM3 3h2v1H3zM2 4h2v1H2zM1 5h10v1H1zM1 6h11v1H1zM2 7h2v1H2zM11 7h2v1H11zM3 8h2v1H3zM12 8h1v1H12zM4 9h2v1H4zM12 9h1v1H12zM5 10h2v1H5zM11 10h2v1H11zM10 11h2v1H10z'/%3E%3C/svg%3E")}
.px-pause{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M3 2h3v1H3zM8 2h3v1H8zM3 3h3v1H3zM8 3h3v1H8zM3 4h3v1H3zM8 4h3v1H8zM3 5h3v1H3zM8 5h3v1H8zM3 6h3v1H3zM8 6h3v1H8zM3 7h3v1H3zM8 7h3v1H8zM3 8h3v1H3zM8 8h3v1H8zM3 9h3v1H3zM8 9h3v1H8zM3 10h3v1H3zM8 10h3v1H8zM3 11h3v1H3zM8 11h3v1H8z'/%3E%3C/svg%3E")}
.px-resume{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h2v1H3zM3 2h4v1H3zM3 3h6v1H3zM3 4h8v1H3zM3 5h10v1H3zM3 6h11v1H3zM3 7h10v1H3zM3 8h8v1H3zM3 9h6v1H3zM3 10h4v1H3zM3 11h2v1H3z'/%3E%3C/svg%3E")}
.px-stop{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h10v1H2zM2 3h10v1H2zM2 4h10v1H2zM2 5h10v1H2zM2 6h10v1H2zM2 7h10v1H2zM2 8h10v1H2zM2 9h10v1H2zM2 10h10v1H2zM2 11h10v1H2z'/%3E%3C/svg%3E")}
.px-check{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M12 3h2v1H12zM11 4h2v1H11zM10 5h2v1H10zM1 6h2v1H1zM9 6h2v1H9zM2 7h2v1H2zM8 7h2v1H8zM3 8h2v1H3zM7 8h2v1H7zM4 9h4v1H4zM5 10h2v1H5z'/%3E%3C/svg%3E")}
.px-music{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h7v1H6zM6 1h7v1H6zM6 2h1v1H6zM12 2h1v1H12zM6 3h1v1H6zM12 3h1v1H12zM6 4h1v1H6zM12 4h1v1H12zM6 5h1v1H6zM12 5h1v1H12zM6 6h1v1H6zM12 6h1v1H12zM6 7h1v1H6zM12 7h1v1H12zM3 8h4v1H3zM9 8h4v1H9zM2 9h5v1H2zM8 9h5v1H8zM2 10h5v1H2zM8 10h5v1H8zM3 11h3v1H3zM9 11h3v1H9z'/%3E%3C/svg%3E")}
.px-sparkle{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h2v1H6zM6 1h2v1H6zM5 2h4v1H5zM4 3h6v1H4zM1 4h11v1H1zM3 5h7v1H3zM4 6h6v1H4zM3 7h3v1H3zM8 7h3v1H8zM2 8h2v1H2zM10 8h2v1H10zM10 10h1v1H10zM9 11h3v1H9zM10 12h1v1H10z'/%3E%3C/svg%3E")}
.px-user{--px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath d='M5 0h4v1H5zM4 1h6v1H4zM4 2h6v1H4zM4 3h6v1H4zM5 4h4v1H5zM3 6h8v1H3zM2 7h10v1H2zM1 8h12v1H1zM1 9h12v1H1zM1 10h12v1H1zM1 11h12v1H1z'/%3E%3C/svg%3E")}

/* ---------- page & world ---------- */
html, body { height: 100%; }
body { overflow: hidden; height: 100dvh; margin: 0; }
.app-shell, main#main-content, .view, .grove-grid, .world-column { display: block; margin: 0; padding: 0; max-width: none; min-height: 0; }
.legacy-hud, #room-connection-status { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.world-card { position: fixed; inset: 0; z-index: var(--z-world); overflow: hidden; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #a8c66c; }
.canvas-wrap { position: absolute; inset: 0; overflow: hidden; margin: 0; border: 0; border-radius: 0; }
.canvas-wrap > #world {
  position: absolute;
  display: block;
  left: var(--world-css-left, 50%);
  top: var(--world-css-top, 50%);
  width: var(--world-css-w, 100%);
  height: var(--world-css-h, auto);
  transform: var(--world-css-transform, translate(-50%, -50%));
  image-rendering: pixelated;
  outline: none;
  cursor: pointer;
  touch-action: none;
}
.canvas-wrap > #world:focus-visible { outline: 3px solid var(--cz-peach-deep); outline-offset: -3px; }
.canvas-wrap.world-contain { background: radial-gradient(circle at 1px 1px, #93b35c 1px, transparent 1.5px) 0 0 / 12px 12px, #a8c66c; }

/* What you can do right where you stand. */
.world-label {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -100%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 4px;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: 2px solid var(--cz-cocoa);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--cz-cocoa);
  font-family: var(--cz-font-display);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.world-label.prompt-below { transform: translate(-50%, 10px); }
.world-label kbd { font-size: 14px; padding: 0 5px; }
.world-guide {
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: calc(var(--sheet-bottom) + 6px);
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: #3c2822d9;
  color: var(--cz-paper);
  font-family: var(--cz-font-display);
  font-size: 13px;
  pointer-events: none;
  white-space: nowrap;
}
body.guide-seen .world-guide, body.sheet-open .world-guide, body.has-session .world-guide { display: none; }
/* A status card in the same spot (placing, a walk, an activity) says it better. */
body:has(:is(#decoration-toolbar, #route-hud, #active-activity, #fishing-hud, #breathing-hud):not([hidden])) .world-guide { display: none; }
.world-loading {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: radial-gradient(circle at 1px 1px, #c9d88a 1px, transparent 1.5px) 0 0 / 14px 14px, var(--cz-meadow);
  color: var(--cz-cocoa);
  font-family: var(--cz-font-display);
  text-align: center;
}
.loading-sprout { font-size: 44px; animation: grove-bob 1.4s ease-in-out infinite; }
#startup-status { font-size: 20px; }
#startup-detail { color: var(--cz-cocoa-soft); font-family: var(--cz-font-body); max-width: 40ch; }
@keyframes grove-bob { 50% { transform: translateY(-6px); } }
#storage-warning:not([hidden]) {
  position: fixed;
  z-index: var(--z-toast);
  top: calc(var(--sheet-top) + 4px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 24px));
  margin: 0;
  padding: 10px 16px;
  background: #fff1d6;
  border: var(--hud-line);
  border-radius: 14px;
  box-shadow: var(--hud-lift);
  font-size: 14px;
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed;
  z-index: var(--z-hud);
  top: var(--hud-edge);
  left: var(--hud-edge);
  right: var(--hud-edge);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
.topbar > * { min-width: 0; }
.topbar button, .topbar summary, .topbar .next-step-bar, .topbar .focus-pill, .topbar .multiplayer-hud { pointer-events: auto; }
.hud-left { display: flex; align-items: center; gap: 8px; justify-self: start; }
.hud-center { display: grid; justify-items: center; gap: 8px; justify-self: center; min-width: 0; }
.hud-right { display: flex; align-items: center; gap: 8px; justify-self: end; flex-wrap: nowrap; }
.topbar :is(button, summary) { font-family: var(--cz-font-display); color: var(--cz-cocoa); }

/* Place card: where you are; click for the map. */
.place-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 320px;
  height: var(--hud-h);
  padding: 0 14px 0 6px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 16px;
  box-shadow: var(--hud-float);
  text-align: left;
  cursor: pointer;
}
.place-card:hover { background: #fff6e2; }
.place-card .brand-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; background: #3c6955; border: 2px solid var(--cz-cocoa); border-radius: 10px; box-shadow: none; }
.place-card .brand-mark img { width: 28px; height: 28px; image-rendering: pixelated; }
.place-copy { display: grid; min-width: 0; line-height: 1.12; }
#scene-title { font-size: 17px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.world-sub { font-family: var(--cz-font-body); font-size: 12.5px; color: var(--cz-cocoa-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-map-icon { --px-size: 21px; margin-left: 2px; color: var(--cz-cocoa-soft); }
.place-card:hover .place-map-icon { color: var(--cz-cocoa); }

.hud-chip {
  height: 42px;
  padding: 0 14px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 999px;
  box-shadow: var(--hud-float);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.hud-chip:hover { background: #fff6e2; }
#room-toggle { display: inline-flex; align-items: center; gap: 7px; }
#room-toggle::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--px) center / contain no-repeat; mask: var(--px) center / contain no-repeat; }

/* The ⋯ menu: fullscreen, shortcuts, palette, help. */
.world-menu { position: relative; margin: 0; padding: 0; border: 0; background: none; }
.world-menu > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 50%;
  box-shadow: var(--hud-float);
  cursor: pointer;
}
.world-menu > summary::-webkit-details-marker { display: none; }
.world-menu[open] > summary { background: var(--cz-peach); }
.world-menu-items {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-width: 240px;
  padding: 6px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 16px;
  box-shadow: var(--hud-float);
}
.world-menu-items button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
}
.world-menu-items button:hover, .world-menu-items button:focus-visible { background: var(--cz-paper-deep); }
.world-menu-items button > span:nth-child(2) { flex: 1; }
.world-menu-items kbd { font-size: 13px; }

/* Next goal: one line, one action, dismissible. Hidden while a session runs. */
.next-step-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  max-width: min(540px, 40vw, 100%);
  margin: 0;
  padding: 4px 6px 4px 12px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 999px;
  box-shadow: var(--hud-float);
}
.next-step-icon { --px-size: 18px; color: var(--cz-gold-deep); }
#next-step-copy { flex: 1 1 auto; min-width: 0; font-family: var(--cz-font-body); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#next-step-action {
  flex: none;
  min-height: 32px;
  padding: 4px 12px;
  background: var(--cz-cocoa);
  color: var(--cz-paper);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
#next-step-action:hover { background: #6c4d43; }
.next-step-dismiss { display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; background: transparent; border: 0; border-radius: 50%; box-shadow: none; color: var(--cz-cocoa-soft); cursor: pointer; }
.next-step-dismiss .px { --px-size: 14px; }
.next-step-dismiss:hover { background: var(--cz-paper-deep); color: var(--cz-cocoa); }
.next-step-bar.is-dismissed, body.has-session .next-step-bar, body:has(.arrival-help:not([hidden])) .next-step-bar { display: none; }

/* Focus pill: the one countdown while a session runs. */
.focus-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 4px 6px 7px 4px;
  overflow: hidden;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 999px;
  box-shadow: var(--hud-float);
}
.focus-pill #dock-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 3px 14px 3px 8px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
}
.focus-pill #dock-open:hover { background: var(--cz-paper-deep); }
.focus-pill .dock-icon { --px-size: 24px; color: var(--cz-moss-deep); }
.pill-copy { display: grid; text-align: left; min-width: 0; }
#dock-countdown { font-family: var(--cz-font-mono); font-size: 36px; font-weight: 400; line-height: .85; letter-spacing: .02em; }
#dock-status { display: block; max-width: 30ch; overflow: hidden; color: var(--cz-cocoa-soft); font-family: var(--cz-font-body); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.pill-button { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; background: var(--cz-paper-deep); border: 2px solid var(--cz-cocoa); border-radius: 50%; box-shadow: 0 2px 0 var(--cz-cocoa); cursor: pointer; }
.pill-button .px { --px-size: 18px; }
.focus-pill #dock-pause { background: var(--cz-cocoa); color: var(--cz-paper); }
.focus-pill #dock-pause:hover { background: #6c4d43; }
.pill-progress { position: absolute; left: 18px; right: 18px; bottom: 3px; height: 4px; overflow: hidden; background: #5a403824; border-radius: 99px; }
.pill-progress > span { display: block; width: calc(var(--progress, 0) * 100%); height: 100%; background: var(--cz-moss-deep); border-radius: inherit; transition: width .9s linear; }
.focus-pill[data-status="paused"] { background: #fff1d6; }
.focus-pill[data-status="paused"] .dock-icon { color: var(--cz-peach-deep); }
.focus-pill[data-status="paused"] .pill-progress > span { background: var(--cz-peach-deep); }
.focus-pill[data-status="paused"] #dock-countdown { opacity: .7; }

/* Status: coins, level ring, profile, settings. */
.wallet, .level-ring, .hud-profile, .hud-settings {
  height: 44px;
  background: var(--cz-paper);
  border: var(--hud-line);
  box-shadow: var(--hud-float);
  cursor: pointer;
}
.wallet { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; border-radius: 999px; }
.wallet .px-coin { --px-size: 21px; color: var(--cz-gold-deep); }
.wallet strong { font-family: var(--cz-font-mono); font-size: 24px; font-weight: 400; line-height: 1; }
.level-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  padding: 0;
  border-radius: 50%;
  background: conic-gradient(var(--cz-moss-deep) calc(var(--xp, 0) * 1%), #e7dcbd 0);
}
.level-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--cz-paper); }
.level-number { position: relative; font-family: var(--cz-font-display); font-size: 16px; font-weight: 700; }
.hud-profile { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 3px; border-radius: 999px; }
#profile-sprite { width: 34px; height: 36px; image-rendering: pixelated; background: #e8eecf; border-radius: 50%; }
#profile-name { max-width: 12ch; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.sync-dot { width: 10px; height: 10px; background: var(--cz-moss); border: 2px solid var(--cz-cocoa); border-radius: 50%; }
.sync-dot[data-tone="busy"] { background: var(--cz-gold); }
.sync-dot[data-tone="warn"] { background: var(--cz-peach-deep); }
.hud-settings { display: grid; place-items: center; width: 44px; padding: 0; border-radius: 50%; }
.hud-settings .px { --px-size: 21px; }
:is(.wallet, .level-ring, .hud-profile, .hud-settings):hover { background-color: #fff6e2; }
.level-ring:hover { background: conic-gradient(var(--cz-moss) calc(var(--xp, 0) * 1%), #efe5c8 0); }

/* ---------- dock ---------- */
.game-tools {
  position: fixed;
  z-index: var(--z-hud);
  left: 50%;
  bottom: var(--hud-edge);
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 6px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 22px;
  box-shadow: var(--hud-float);
}
.dock-button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  width: 76px;
  height: 58px;
  min-height: 0;
  padding: 6px 4px 5px;
  background: transparent;
  color: var(--cz-cocoa);
  border: 0;
  border-radius: 15px;
  box-shadow: none;
  font-family: var(--cz-font-display);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.dock-button .px { --px-size: 28px; }
.dock-button:hover { background: var(--cz-paper-deep); transform: translateY(-1px); }
.dock-button:active { transform: translateY(1px); }
.dock-button.is-open { background: var(--cz-peach); box-shadow: inset 0 0 0 2px var(--cz-cocoa); }
.dock-primary { width: 92px; background: var(--cz-cocoa); color: var(--cz-paper); box-shadow: 0 3px 0 var(--cz-cocoa-deep); }
.dock-primary:hover { background: #6c4d43; }
.dock-primary.is-open { background: var(--cz-cocoa-deep); box-shadow: inset 0 0 0 2px var(--cz-peach); }
.dock-primary.is-running { background: var(--cz-moss-deep); box-shadow: 0 3px 0 #3f5f2d; }
.dock-primary.is-paused { background: var(--cz-peach-deep); box-shadow: 0 3px 0 #a85f3c; }
.dock-time { font-family: var(--cz-font-mono); font-size: 22px; line-height: .8; }
.dock-primary:is(.is-running, .is-paused) .px { display: none; }
.dock-badge {
  position: absolute;
  top: 1px;
  right: 9px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--cz-gold);
  color: var(--cz-cocoa);
  border: 2px solid var(--cz-cocoa);
  border-radius: 99px;
  font-family: var(--cz-font-mono);
  font-size: 16px;
  line-height: 16px;
}
#together-badge { min-width: 14px; width: 14px; height: 14px; padding: 0; font-size: 0; background: var(--cz-moss); }

/* ---------- status stack (above the dock) ---------- */
.status-stack {
  position: fixed;
  z-index: var(--z-hud);
  left: 50%;
  bottom: var(--sheet-bottom);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  width: min(620px, calc(100vw - 2 * var(--hud-edge)));
  pointer-events: none;
}
.status-stack > * { pointer-events: auto; max-width: 100%; margin: 0; }
.status-stack > :is(.activity-hud, .action-status, .decoration-toolbar, .tool-context-hint, .game-status, .cafe-shortcuts, .supply-hud, .local-game-hud, .exploration-hint, .pet-exploration-hint) {
  position: static;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  padding: 6px 8px 6px 14px;
  background: var(--cz-paper);
  border: var(--hud-line);
  /* Round enough to read as a pill on one line, still a card when it wraps. */
  border-radius: 24px;
  box-shadow: var(--hud-float);
  font-size: 14px;
  transform: none;
}
.status-stack .tool-context-hint { padding: 6px 14px; color: var(--cz-cocoa-soft); font-size: 13px; }
.status-stack .route-hud .px-walk { --px-size: 18px; color: var(--cz-moss-deep); }
.status-stack .route-copy { font-weight: 600; }
.status-stack :is(.activity-hud, .action-status, .decoration-toolbar, .game-status, .cafe-shortcuts) button { min-height: 34px; padding: 4px 12px; border-radius: 999px; font-size: 14px; }
.status-stack .action-status { background: #ffe9e0; }
.game-status:not(:has(> button:not([hidden]))) { display: none !important; }
#activity-status { font-weight: 600; }
.status-stack > :is(.fishing-hud, .breathing-hud) {
  position: static;
  width: min(560px, 100%);
  margin: 0;
  padding: 12px 14px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 18px;
  box-shadow: var(--hud-float);
  transform: none;
}

/* ---------- the sheet: one panel at a time ---------- */
.sheet-host {
  position: fixed;
  z-index: var(--z-sheet);
  top: var(--sheet-top);
  right: var(--hud-edge);
  bottom: var(--sheet-bottom);
  width: min(var(--sheet-w), calc(100vw - 2 * var(--hud-edge)));
  display: flex;
  pointer-events: none;
}
.sheet-host[hidden] { display: none; }
.sheet-host[data-size="full"] { left: var(--hud-edge); width: auto; }
.sheet-scrim { display: none; }
.sheet-frame {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--cz-cocoa), 0 22px 48px #3c28222e;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .sheet-host:not([hidden]) .sheet-frame { animation: sheet-in .2s var(--cz-ease); }
  @keyframes sheet-in { from { opacity: 0; transform: translateX(14px); } }
}
.sheet-header { display: none; align-items: center; gap: 8px; padding: 10px 10px 8px 12px; border-bottom: var(--soft-line); background: #fff6e2; }
.sheet-host.grouped .sheet-header { display: flex; }
.sheet-tabs { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tablist { display: flex; gap: 2px; width: max-content; padding-right: 26px; }
.sheet-tablist[hidden] { display: none; }
.sheet-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 36px;
  padding: 5px 11px;
  background: transparent;
  color: var(--cz-cocoa-soft);
  border: 2px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--cz-font-display);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sheet-tab:hover { background: var(--cz-paper-deep); color: var(--cz-cocoa); transform: none; }
.sheet-tab[aria-selected="true"] { background: var(--cz-cocoa) !important; color: var(--cz-paper) !important; border-color: var(--cz-cocoa) !important; }
.sheet-tab[data-glyph]::before { content: none; }
.sheet-tab .tab-badge { padding: 0 6px; background: var(--cz-gold); color: var(--cz-cocoa); border: 2px solid var(--cz-cocoa); border-radius: 99px; font-family: var(--cz-font-mono); font-size: 14px; line-height: 1.1; }
@media (max-width: 720px) {
  .sheet-tabs[data-fade="none"] { -webkit-mask-image: none; mask-image: none; }
  .sheet-tabs[data-fade="start"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 26px); mask-image: linear-gradient(to right, transparent, #000 26px); }
  .sheet-tabs[data-fade="both"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent); }
}
/* With a pointer and room to spare, every tab stays in sight: the row wraps instead of scrolling. */
@media (min-width: 721px) {
  .sheet-tabs { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .sheet-tablist { flex-wrap: wrap; width: auto; padding-right: 0; row-gap: 4px; }
  .sheet-tab { padding: 5px 8px; font-size: 13px; }
  .sheet-header { align-items: flex-start; gap: 4px; padding-left: 8px; }
}
.sheet-close, .sheet-body .close-dialog, dialog.true-modal .close-dialog {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: 2px solid var(--cz-cocoa);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--cz-cocoa);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.sheet-close .px { --px-size: 16px; }
:is(.sheet-close, .close-dialog):hover { background: var(--cz-paper-deep); }
.sheet-banner { padding: 10px 14px 0; }
.sheet-banner[hidden] { display: none; }
.sheet-body { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sheet-body > dialog[open], .sheet-body > aside:not([hidden]) {
  position: static;
  inset: auto;
  display: block;
  flex: 1;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 0 18px 22px;
  overflow: auto;
  overscroll-behavior: contain;
  /* Things scrolled into view (keyboard focus, "show me") land below the sticky heading. */
  scroll-padding-top: 92px;
  scroll-padding-bottom: 16px;
  background: transparent;
  color: var(--cz-cocoa);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  scrollbar-gutter: stable;
  outline: none;
}
.sheet-body > :focus-visible { outline: 3px solid var(--cz-peach-deep) !important; outline-offset: -3px; }
.sheet-body .dialog-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 16px 0 10px;
  background: var(--cz-paper);
  border-bottom: var(--soft-line);
}
.sheet-body .dialog-heading h2 { margin: 0; font-size: 22px; line-height: 1.15; }
/* One heading face in every panel, including the older journals that used a serif. */
.sheet-body :is(h2, h3), .sheet-body #progression-dialog :is(h2, h3), .sheet-body .exploration-body h3 { font-family: var(--cz-font-display); font-weight: 600; letter-spacing: 0; }
.sheet-body #progression-dialog h2 { font-size: 22px; }
.sheet-body .exploration-body h3 { font-size: 20px; }
.sheet-body .dialog-heading .eyebrow { margin-bottom: 4px; }
.sheet-host.grouped .sheet-body .close-dialog { display: none; }
.sheet-host.grouped .sheet-body .dialog-heading { padding-top: 14px; }
.sheet-body .dialog-intro { margin: 0 0 12px; color: var(--cz-cocoa-soft); }
.sheet-body h3 { font-size: 17px; margin: 14px 0 8px; }
/* The Journal flattens its own tab row into the sheet's. */
.sheet-body #player-journal .journal-tabs { display: none; }
.sheet-body .journal-content { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.journal-card .journal-goal { margin: 2px 0 4px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--cz-cocoa); }
.journal-card .journal-detail { margin: 0 0 8px; font-size: 13px; color: var(--cz-cocoa-soft); }

/* Modals that stay modal: palette, shortcuts, room report. */
dialog.true-modal, #room-report-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80dvh, 720px);
  margin: auto;
  padding: 0 20px 20px;
  overflow: auto;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: var(--hud-line);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--cz-cocoa), 0 30px 70px #3c282259;
}
dialog.true-modal::backdrop, #room-report-dialog::backdrop { background: #3c282259; backdrop-filter: blur(2px); }
dialog.true-modal .dialog-heading, #room-report-dialog .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 10px; margin-bottom: 10px; border-bottom: var(--soft-line); }
dialog.true-modal .dialog-heading h2 { margin: 0; font-size: 22px; }

/* ---------- focus panel ---------- */
#study-panel .timer-card { display: grid; gap: 14px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; max-width: none; }
#study-panel .timer-heading { margin-bottom: 0; }
.timer-heading-actions { display: flex; align-items: center; gap: 10px; }
#timer-tasks { font-size: 14px; }
#timer-form { display: grid; gap: 10px; }
#timer-form > label { margin: 0; font-family: var(--cz-font-display); font-size: 13px; letter-spacing: .03em; }
#task { width: 100%; }
.timer-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.timer-presets button { min-height: 44px; padding: 6px 4px; font-family: var(--cz-font-body) !important; font-size: 15px !important; font-weight: 700 !important; }
#custom-duration { font-size: 20px !important; }
#duration-field { display: grid; gap: 4px; }
#duration-field label { font-family: var(--cz-font-display); font-size: 13px; margin: 0; }
.timer-face { position: relative; display: grid; place-items: center; width: min(210px, 70%); aspect-ratio: 1; margin: 6px auto 2px; }
.timer-face svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-track { fill: #f6efd9; stroke: #5a403826; stroke-width: 12; }
.timer-progress { fill: none; stroke: var(--cz-moss); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 502.65; transition: stroke-dashoffset .6s linear; }
.timer-face > div { position: relative; display: grid; justify-items: center; gap: 4px; }
#countdown { font-family: var(--cz-font-mono); font-size: 62px; font-weight: 400; line-height: .85; letter-spacing: .02em; }
#timer-status { font-family: var(--cz-font-display); font-size: 12.5px; letter-spacing: .1em; color: var(--cz-cocoa-soft); }
#timer-start { width: 100%; min-height: 52px; font-size: 18px; }
.session-controls { display: grid; gap: 8px; }
.session-controls:not([hidden]) { display: grid; }
#timer-pause { min-height: 50px; font-size: 17px; }
#timer-end { justify-self: center; font-size: 14px; }
#recovery-controls:not([hidden]) { display: grid; gap: 8px; padding: 12px; background: #fff1d6; border: 2px dashed var(--cz-gold-deep); border-radius: 14px; }
#recovery-controls p { margin: 0; font-size: 14px; }
.timer-reward { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; color: var(--cz-cocoa-soft); }
.timer-reward > span:first-child { color: var(--cz-gold-deep); }
.focus-today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.focus-today > div { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 10px; background: var(--cz-cream); border: 2px solid var(--cz-cocoa); border-radius: 14px; box-shadow: none; }
.focus-today .small-label { margin: 0 0 2px; font-size: 11px; padding: 0 7px 0 5px; }
.focus-today h3 { margin: 0; font-size: 18px; font-family: var(--cz-font-display); }
.focus-today h3 small { font-family: var(--cz-font-body); font-size: 12px; font-weight: 500; color: var(--cz-cocoa-soft); }
.focus-today p:not(.small-label) { margin: 0; font-size: 12.5px; color: var(--cz-cocoa-soft); }
.today-symbol { --px-size: 28px; color: var(--cz-moss-deep); }
#pet-card { width: 44px; height: 36px; image-rendering: pixelated; flex: none; }
.companion-card > div { min-width: 0; flex: 1; }
#pet-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#pet-edit { width: 30px; height: 30px; min-height: 0; flex: none; font-size: 14px; }
#pet-caption { font-size: 12px !important; line-height: 1.25; }
.extension-setup { padding: 10px 12px; background: #fffdf6; border: var(--soft-line); border-radius: 14px; font-size: 14px; }
.extension-setup summary { cursor: pointer; font-family: var(--cz-font-display); font-size: 14px; }
.extension-setup p { margin: 8px 0 0; font-size: 13.5px; }
.extension-setup a { font-weight: 600; }
.demo-button { justify-self: center; font-size: 14px; }
.demo-note { margin: 0; text-align: center; font-size: 13px; color: var(--cz-cocoa-soft); }

/* Level strip: the Journal's banner. */
#main-content > .journey-strip { display: none; }
.journey-strip { display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 14px; background: var(--cz-cream); border: 2px solid var(--cz-cocoa); border-radius: 14px; }
.journey-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
#level-title { font-family: var(--cz-font-display); font-size: 15px; }
#journey-detail { margin: 0; font-size: 12.5px; color: var(--cz-cocoa-soft); }
.xp-track { height: 8px; overflow: hidden; background: #5a403824; border-radius: 99px; }
#xp-fill { display: block; height: 100%; background: var(--cz-moss-deep); border-radius: inherit; }
.journey-score { display: grid; justify-items: end; text-align: right; }
#xp-total { font-family: var(--cz-font-mono); font-size: 22px; font-weight: 400; line-height: 1; }
#level-next { font-size: 12px; color: var(--cz-cocoa-soft); }

/* Study history. */
.journal-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.journal-summary > div { display: grid; gap: 2px; padding: 10px; background: var(--cz-cream); border: 2px solid var(--cz-cocoa); border-radius: 14px; text-align: center; }
.journal-summary strong { font-family: var(--cz-font-mono); font-size: 30px; font-weight: 400; line-height: 1; }
.journal-summary span { font-size: 12px; color: var(--cz-cocoa-soft); }
.journal-list { display: grid; gap: 8px; }
.journal-entry { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #fffdf6; border: 2px solid #5a403833; border-radius: 12px; }
.journal-entry h3 { margin: 0 0 2px; font-size: 15px; }
.journal-entry p { margin: 0; font-size: 12.5px; color: var(--cz-cocoa-soft); }
.journal-entry > span { flex: none; font-family: var(--cz-font-mono); font-size: 18px; color: var(--cz-moss-deep); }
.journal-empty { display: grid; justify-items: center; gap: 8px; padding: 24px 12px; text-align: center; }
.journal-empty h2 { font-size: 19px; }

/* ---------- map ---------- */
.sheet-body > #map-dialog[open] { display: flex; flex-direction: column; padding-bottom: 16px; }
#map-dialog .dialog-heading { flex: none; align-items: flex-start; }
.map-layout { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; min-height: 0; }
.map-world {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: var(--hud-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 1px 1px, #b7c97b 1px, transparent 1.6px) 0 0 / 16px 16px,
    radial-gradient(ellipse at 30% 55%, #e5ecb0 0, transparent 55%),
    #d3e09a;
  box-shadow: inset 0 0 0 4px #fffaee80;
}
.map-terrain { position: absolute; pointer-events: none; }
.map-sea {
  right: -12%;
  bottom: -26%;
  width: 52%;
  height: 58%;
  border-radius: 46% 0 0 0;
  background:
    repeating-linear-gradient(170deg, transparent 0 14px, #ffffff40 14px 16px),
    linear-gradient(160deg, #a9d8ea, #7fbfda);
  border-top-left-radius: 60% 70%;
  box-shadow: -8px -8px 0 #f2e2b4;
}
.map-peaks {
  right: 0;
  top: -4%;
  width: 46%;
  height: 46%;
  background: linear-gradient(#e9eef0, #b9c6cc);
  clip-path: polygon(0 100%, 14% 46%, 24% 70%, 40% 18%, 56% 62%, 68% 30%, 82% 66%, 100% 8%, 100% 100%);
  opacity: .9;
}
.map-woods {
  left: 40%;
  top: 22%;
  width: 34%;
  height: 62%;
  border-radius: 40%;
  background: radial-gradient(circle, #7ea85c 0 9px, transparent 10px) 0 0 / 26px 24px, radial-gradient(circle, #6a9a4d 0 7px, transparent 8px) 13px 12px / 26px 24px;
  opacity: .55;
}
.map-river {
  left: 0;
  top: 64%;
  width: 46%;
  height: 10px;
  border-radius: 99px;
  background: #9fcfe3;
  transform: rotate(-7deg);
  opacity: .8;
}
.map-trails { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-trail { fill: none; stroke: #8a6a4f; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .5 11; }
.map-trail.door { stroke: #8a6a4f99; stroke-dasharray: 1 7; stroke-width: 4; }
.map-place {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  gap: 3px;
  width: clamp(118px, 13.5vw, 172px);
  margin: 0;
  padding: 6px 6px 8px;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: var(--hud-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--cz-cocoa);
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%) !important;
  transition: box-shadow .12s, background .12s;
}
.map-place:hover { background: #fff6e2; box-shadow: 0 6px 0 var(--cz-cocoa); }
.map-place:active { box-shadow: 0 2px 0 var(--cz-cocoa); }
.map-place.map-cafe { width: clamp(100px, 10.5vw, 136px); }
.map-place-art { position: relative; display: block; overflow: hidden; border: 2px solid var(--cz-cocoa); border-radius: 9px; }
.map-place-art img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; image-rendering: pixelated; }
.map-place-name { font-family: var(--cz-font-display); font-size: 14px; font-weight: 600; line-height: 1.15; }
.map-place-meta { min-height: 1.2em; font-size: 11.5px; line-height: 1.25; color: var(--cz-cocoa-soft); }
.map-place.selected { background: #fff1e2; box-shadow: 0 0 0 4px var(--cz-peach), 0 4px 0 6px var(--cz-cocoa); }
.map-place.current { border-color: var(--cz-moss-deep); }
.map-place:is(.current, .selected) .map-place-meta { color: var(--cz-cocoa); }
.map-place.unexplored .map-place-art img { filter: saturate(.25) brightness(1.08) contrast(.85); }
.map-place.unexplored .map-place-art::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; background: #fffaee66; font-family: var(--cz-font-display); font-size: 28px; color: var(--cz-cocoa); }
.map-place.portal .map-place-name::after { content: " ✦"; color: #8a63c4; }
.map-you {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 9px 0 2px;
  transform: translateX(-50%);
  background: #44703a;
  color: var(--cz-paper);
  border: 2px solid var(--cz-cocoa);
  border-radius: 999px;
  font-family: var(--cz-font-display);
  font-size: 12px;
  white-space: nowrap;
}
.map-you canvas { width: 26px; height: 28px; margin: -8px 0 -2px; image-rendering: pixelated; }
@media (prefers-reduced-motion: no-preference) {
  .map-you { animation: map-you 1.6s ease-in-out infinite; }
  @keyframes map-you { 50% { transform: translate(-50%, -3px); } }
}
.map-detail { display: grid; align-content: start; gap: 10px; min-height: 0; overflow: auto; padding: 2px 2px 8px; }
.map-detail.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.map-detail-art img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; image-rendering: pixelated; border: var(--hud-line); border-radius: 14px; }
.map-detail-head h3 { margin: 0; font-size: 24px; }
.map-detail-kind { display: inline-block; margin: 0 0 2px; font-family: var(--cz-font-display); font-size: 12px; letter-spacing: .08em; text-transform: lowercase; color: var(--cz-cocoa-soft); }
.map-detail-blurb { margin: 0; font-size: 14px; color: var(--cz-cocoa-soft); }
.map-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip { padding: 2px 9px; background: var(--cz-cream); border: 2px solid var(--cz-cocoa); border-radius: 999px; font-size: 12px; font-weight: 600; }
.map-chip.here { background: #cfe3b5; }
.map-chip.portal { background: #e3d6f5; }
.map-chip.new { background: #ffe0c9; }
.map-actions { display: grid; gap: 8px; }
.map-actions .button { min-height: 48px; font-size: 17px; }
.map-route, .map-note { margin: 0; font-size: 13px; color: var(--cz-cocoa-soft); }
.map-note { padding: 8px 10px; background: #fff1d6; border: 2px dashed var(--cz-gold-deep); border-radius: 12px; color: var(--cz-cocoa); }
.map-places h4 { margin: 4px 0 8px; font-family: var(--cz-font-display); font-size: 15px; }
.map-place-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.map-place-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: #fffdf6; border: 2px solid #5a403830; border-radius: 12px; }
.map-place-copy { display: grid; min-width: 0; line-height: 1.2; }
.map-place-copy strong { font-size: 14px; }
.map-place-copy small { font-size: 12px; color: var(--cz-cocoa-soft); }
.map-place-list .map-go { min-height: 34px !important; padding: 3px 14px !important; font-size: 14px !important; }
.map-empty { margin: 0; font-size: 13px; color: var(--cz-cocoa-soft); }
/* Every place around you looks and behaves the same, in one grid: one tap walks you there. */
.map-here { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.map-here[hidden] { display: none; }
.map-here > h3 { display: none; }
.map-here .location-actions { display: contents; }
.map-here .location-actions[hidden] { display: none; }
.map-here .location-actions button {
  display: flex !important; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; min-width: 0; min-height: 40px !important; margin: 0 !important; padding: 6px 10px 6px 12px !important;
  font: 600 13.5px/1.2 var(--cz-font-body) !important; letter-spacing: 0 !important; text-align: left; text-transform: none !important;
  color: var(--cz-cocoa) !important; background: #fffdf6 !important; border: 2px solid #5a403830 !important; border-radius: 12px !important; box-shadow: none !important;
}
.map-here .location-actions button::after { content: "→"; flex: none; font-weight: 700; color: var(--cz-cocoa-soft); }
.map-here .location-actions button:hover:not(:disabled) { background: #fff3dc !important; border-color: var(--cz-cocoa) !important; }
.map-here .location-actions button:disabled { cursor: default; opacity: .62; }
.map-here .location-actions button:disabled::after { content: none; }
.map-passport { justify-self: start; font-size: 14px; }
/* Offers in sheets: picture, name, a line about it, then one button (purchases confirm in place). */
.sheet-body .shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet-body .shop-item { display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow-wrap: normal; }
.sheet-body .shop-item canvas { order: 0; align-self: center; width: 64px; height: 60px; }
.sheet-body .shop-item h3 { order: 1; margin: 0; font-size: 15px; line-height: 1.2; }
.sheet-body .shop-item .item-description { order: 2; flex: 1; margin: 0; font-size: 12px; line-height: 1.4; }
.sheet-body .shop-item .button { order: 3; width: 100%; min-height: 36px; padding: 4px 8px; font-size: 13px; }
.sheet-body .boutique-characters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.sheet-body .character-offer { gap: 4px; padding: 10px 8px 8px; overflow-wrap: normal; }
.sheet-body .character-offer canvas { width: 56px; height: 56px; }
.sheet-body .character-offer > strong { font-family: var(--cz-font-display); font-size: 15px; font-weight: 600; line-height: 1.2; }
.sheet-body .character-offer small { font-size: 11px; line-height: 1.3; }
.sheet-body .character-offer .button { width: 100%; min-height: 34px; padding: 4px 6px; font-size: 13px; white-space: nowrap; }
.sheet-body .character-offer.equipped::before { position: absolute; top: 6px; left: 6px; padding: 2px 6px; font-size: 10px; white-space: nowrap; }
.sheet-body .boutique-items { gap: 6px; }
.sheet-body .boutique-items .button { min-height: 34px; padding: 4px 10px; font-size: 13px; }
@media (max-width: 380px) { .sheet-body .boutique-characters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#notes-status { margin: 0 10px; color: #44703a; font-size: 12px; }
.workshop-tabs button[aria-pressed="true"] { color: var(--cz-cocoa) !important; }
/* Two saves found: the choice sits in Account. */
#save-recovery { display: grid; gap: 8px; margin: 12px 0; padding: 12px; background: #fff1d6; border: 2px dashed var(--cz-gold-deep); border-radius: 14px; }
#save-recovery label { display: grid; gap: 4px; font-weight: 600; }
/* Settings sections. */
.settings-heading { margin: 16px 0 6px; font-family: var(--cz-font-display); font-size: 15px; }
.settings-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.settings-help .button { min-height: 40px; padding: 6px 10px; font-size: 14px; }
@media (hover: none) and (pointer: coarse) { .settings-keyboard { display: none !important; } }
.map-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 2px 0 0; font-size: 13px; color: var(--cz-cocoa-soft); }
.map-explorer { font-size: 13.5px; white-space: nowrap; }

/* ---------- radio (bottom left) ---------- */
.music-dock {
  position: fixed;
  z-index: var(--z-hud);
  left: var(--hud-edge);
  bottom: var(--hud-edge);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  max-width: 390px;
  margin: 0;
  padding: 6px 8px 6px 7px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 18px;
  box-shadow: var(--hud-float);
}
.music-disc {
  flex: none;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, var(--cz-peach) 0 4px, var(--cz-cocoa) 5px 7px, #2f211c 8px 18px, #4a3630 19px);
  border: 2px solid var(--cz-cocoa);
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .music-dock.is-playing .music-disc { animation: disc-spin 3.2s linear infinite; }
  @keyframes disc-spin { to { transform: rotate(1turn); } }
}
.music-copy { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.15; }
#music-station { overflow: hidden; font-family: var(--cz-font-display); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
#music-mood { overflow: hidden; font-size: 12px; color: var(--cz-cocoa-soft); white-space: nowrap; text-overflow: ellipsis; }
.music-controls { display: flex; flex: none; align-items: center; gap: 5px; }
.music-controls > * { flex: none; }
.music-controls button { display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; background: var(--cz-paper); color: var(--cz-cocoa); border: 2px solid var(--cz-cocoa); border-radius: 50%; box-shadow: 0 2px 0 var(--cz-cocoa); font-size: 13px; cursor: pointer; }
.music-controls #music-toggle { background: var(--cz-cocoa); color: var(--cz-paper); }
.music-dock.sfx-off #sfx-toggle { opacity: .55; }
.music-volume { display: flex; align-items: center; }
.music-volume input { width: 64px; accent-color: var(--cz-moss-deep); }

/* ---------- chat & minimap (bottom right) ---------- */
.chat-toggle {
  position: fixed;
  z-index: var(--z-hud);
  right: var(--hud-edge);
  bottom: var(--hud-edge);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 60px;
  padding: 0 16px 0 13px;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: var(--hud-line);
  border-radius: 18px;
  box-shadow: var(--hud-float);
  font-family: var(--cz-font-display);
  font-size: 15px;
  cursor: pointer;
}
.chat-toggle:hover, .minimap-toggle:hover { background: #fff6e2; }
.chat-toggle[aria-expanded="true"] { background: var(--cz-peach); }
.chat-toggle-icon { --px-size: 22px; }
.chat-unread { display: none; min-width: 20px; height: 20px; padding: 0 5px; background: var(--cz-peach-deep); color: #fff; border: 2px solid var(--cz-cocoa); border-radius: 99px; font-family: var(--cz-font-mono); font-size: 15px; line-height: 16px; text-align: center; }
.chat-unread:not(:empty) { display: inline-block; }
.chat-panel {
  position: fixed;
  z-index: var(--z-chat);
  right: var(--hud-edge);
  bottom: calc(var(--hud-edge) + 74px);
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - 2 * var(--hud-edge)));
  height: min(470px, calc(100dvh - 200px));
  overflow: hidden;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: var(--hud-line);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--cz-cocoa), 0 22px 48px #3c28222e;
}
.chat-panel[hidden] { display: none; }
@media (min-width: 900px) { body.sheet-open .chat-panel { right: calc(var(--sheet-w) + 2 * var(--hud-edge)); } }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px; background: #fff6e2; border-bottom: var(--soft-line); }
.chat-tab { min-height: 34px; padding: 4px 14px; background: transparent; border: 2px solid transparent; border-radius: 999px; box-shadow: none; font-family: var(--cz-font-display); font-size: 14px; color: var(--cz-cocoa-soft); cursor: pointer; }
.chat-tab[aria-selected="true"] { background: var(--cz-cocoa); color: var(--cz-paper); }
.chat-close { margin-left: auto; width: 34px; height: 34px; padding: 0; border: 2px solid var(--cz-cocoa); border-radius: 50%; background: var(--cz-paper); font-size: 20px; text-decoration: none; display: grid; place-items: center; }
.chat-note { margin: 0; padding: 8px 12px 0; font-size: 12px; color: var(--cz-cocoa-soft); }
.chat-messages { display: grid; flex: 1; align-content: start; gap: 7px; margin: 0; padding: 10px 12px; overflow: auto; list-style: none; }
.chat-messages li { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.chat-messages li.mine .chat-name { color: var(--cz-moss-deep); }
.chat-name { margin-right: 6px; padding: 0; background: none; border: 0; font-family: var(--cz-font-display); font-weight: 600; color: var(--cz-cocoa); cursor: pointer; }
.chat-time { margin-left: 6px; font-size: 11px; color: var(--cz-cocoa-soft); }
.chat-empty { color: var(--cz-cocoa-soft); font-size: 13px; }
.chat-form { display: flex; gap: 6px; padding: 10px; border-top: var(--soft-line); }
#chat-input { flex: 1; min-width: 0; }
.chat-send { min-height: 42px; }
.chat-status { margin: 0; padding: 0 12px 8px; font-size: 12px; color: #a24a2c; }
.chat-status:empty { display: none; }
.minimap-toggle {
  position: fixed;
  z-index: var(--z-hud);
  right: calc(var(--hud-edge) + 116px);
  bottom: var(--hud-edge);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: var(--hud-line);
  border-radius: 18px;
  box-shadow: var(--hud-float);
  cursor: pointer;
}
.minimap-toggle[aria-pressed="true"] { background: var(--cz-peach); }
.minimap-toggle .px { --px-size: 24px; }
#world-minimap {
  position: fixed;
  z-index: var(--z-hud);
  right: var(--hud-edge);
  bottom: calc(var(--hud-edge) + 74px);
  width: 200px;
  height: 120px;
  image-rendering: pixelated;
  background: #a8c66c;
  border: var(--hud-line);
  border-radius: 14px;
  box-shadow: var(--hud-float);
  cursor: crosshair;
}
body.minimap-min #world-minimap, body:has(.chat-panel:not([hidden])) #world-minimap { display: none; }

/* ---------- shared rooms ---------- */
.multiplayer-hud {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: min(520px, 100%);
  margin: 0;
  padding: 4px;
  background: var(--cz-paper);
  border: var(--hud-line);
  border-radius: 999px;
  box-shadow: var(--hud-float);
}
.multiplayer-hud[hidden] { display: none; }
.hud-pill { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 2px 14px 2px 10px; background: var(--cz-cream); border: 2px solid var(--cz-cocoa); border-radius: 999px; box-shadow: none; font-family: var(--cz-font-display); font-size: 14px; cursor: pointer; }
.hud-count { font-family: var(--cz-font-body); font-size: 12px; color: var(--cz-cocoa-soft); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cz-cocoa); background: var(--cz-peach-deep); }
.status-dot.relay, .status-dot.p2p { background: var(--cz-moss); }
.hud-center-timer { display: none !important; }
#hud-lobby-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-count { white-space: nowrap; }
/* Room bar: who is here, emotes, and one menu for the rest. */
.multiplayer-hud .hud-btn { display: grid; flex: none; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; background: var(--cz-paper); border: 2px solid var(--cz-cocoa); border-radius: 50%; box-shadow: none; font-size: 17px; line-height: 1; }
.multiplayer-hud .hud-btn:hover { background: #fff6e2; }
.room-menu { flex: none; }
.room-menu > summary { width: 36px; height: 36px; border-width: 2px; box-shadow: none; }
.room-menu .world-menu-items { left: auto; right: -4px; min-width: 250px; }
.room-menu .cafe-choice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 14px; white-space: nowrap; }
.room-menu .cafe-choice select { flex: none; width: auto; min-width: 110px; min-height: 32px; padding: 2px 6px; font-size: 13px; }
.room-people-dialog .room-presence { position: static; display: block; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.emote-wheel { position: fixed; z-index: var(--z-modal); left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 240px; height: 240px; background: #fffaeeee; border: var(--hud-line); border-radius: 50%; box-shadow: var(--hud-float); }
.emote-wheel[hidden] { display: none; }
.emote-wheel-items { position: relative; width: 100%; height: 100%; }
.emote-btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--cz-cocoa); background: var(--cz-paper); font-size: 22px; }
.emote-wheel-center { position: absolute; font-family: var(--cz-font-display); font-size: 13px; }
.soundscapes-panel { position: fixed; z-index: var(--z-chat); left: 50%; top: calc(var(--sheet-top) + 50px); transform: translateX(-50%); width: min(360px, calc(100vw - 24px)); padding: 12px 14px; background: var(--cz-paper); border: var(--hud-line); border-radius: 18px; box-shadow: var(--hud-float); }
.soundscapes-panel[hidden] { display: none; }
.proximity-chat-bar { position: fixed; z-index: var(--z-chat); left: 50%; bottom: calc(var(--sheet-bottom) + 60px); transform: translateX(-50%); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  z-index: var(--z-toast);
  top: calc(var(--hud-edge) + 66px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  margin: 0;
  padding: 10px 18px;
  background: var(--cz-cocoa);
  color: var(--cz-paper);
  border: 3px solid var(--cz-cocoa-deep);
  border-radius: 14px;
  box-shadow: 0 8px 22px #3c282244;
  font-size: 14.5px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}
/* In a shared room the room bar sits under the hint; messages drop below both. */
body:has(.multiplayer-hud:not([hidden])) .toast { top: calc(var(--hud-edge) + 2 * var(--hud-h) + 26px); }
@media (prefers-reduced-motion: no-preference) {
  .toast:not([hidden]) { animation: toast-in .22s var(--cz-ease); }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
}

/* ---------- command palette & shortcuts ---------- */
.palette { width: min(640px, calc(100vw - 24px)); margin: 11vh auto auto; padding: 0; overflow: hidden; }
.palette-form { display: block; margin: 0; }
.palette-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: var(--soft-line); }
.palette-search .px { --px-size: 22px; color: var(--cz-cocoa-soft); }
.palette-input { flex: 1; min-width: 0; min-height: 40px !important; padding: 0 !important; background: transparent !important; border: 0 !important; font-size: 18px !important; outline: none !important; }
.palette-input::-webkit-search-cancel-button { display: none; }
.palette-results { display: grid; gap: 2px; max-height: min(430px, 58dvh); margin: 0; padding: 8px; overflow: auto; list-style: none; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; cursor: pointer; }
.palette-item.active { background: var(--cz-peach); }
.palette-group { flex: none; width: 72px; font-family: var(--cz-font-display); font-size: 11.5px; letter-spacing: .06em; text-transform: lowercase; color: var(--cz-cocoa-soft); }
.palette-item.active .palette-group { color: var(--cz-cocoa); }
.palette-label { flex: 1; font-weight: 600; }
.palette-hint { font-size: 12px; color: var(--cz-cocoa-soft); }
.palette-empty { padding: 16px; color: var(--cz-cocoa-soft); text-align: center; }
.shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; align-items: center; margin: 4px 0 12px; }
.shortcut-list dt { display: flex; gap: 4px; flex-wrap: wrap; }
.shortcut-list dd { margin: 0; font-size: 14px; }

/* ---------- first-visit tour ---------- */
.arrival-help.walkthrough {
  position: fixed;
  z-index: var(--z-tour);
  top: var(--sheet-top);
  left: var(--hud-edge);
  width: min(420px, calc(100vw - 2 * var(--hud-edge)));
  max-height: calc(100dvh - var(--sheet-top) - var(--sheet-bottom));
  margin: 0;
  padding: 14px 18px 18px;
  overflow: auto;
  background: var(--cz-paper);
  color: var(--cz-cocoa);
  border: var(--hud-line);
  border-radius: 20px;
  box-shadow: 0 4px 0 var(--cz-cocoa), 0 22px 48px #3c28222e;
  transform: none;
}
.arrival-help[hidden] { display: none; }
.coach-pulse { animation: coach-pulse 1s ease-in-out 5; position: relative; z-index: 5; }
@keyframes coach-pulse { 50% { box-shadow: 0 0 0 6px var(--cz-peach), 0 0 0 10px #f3a97b55; } }

/* ---------- touch ---------- */
#touch-controls { display: none; }
@media (pointer: coarse) {
  #touch-controls:not([hidden]) {
    position: fixed;
    z-index: var(--z-hud);
    right: var(--hud-edge);
    bottom: calc(var(--sheet-bottom) + 64px);
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 4px;
    width: max-content;
    margin: 0;
    padding: 6px;
    background: #fffaeed9;
    border: 2px solid var(--cz-cocoa);
    border-radius: 16px;
    box-shadow: var(--hud-lift);
  }
  #touch-controls [data-direction="ArrowUp"] { grid-area: 1 / 2; }
  #touch-controls [data-direction="ArrowLeft"] { grid-area: 2 / 1; }
  #touch-controls [data-direction="ArrowRight"] { grid-area: 2 / 3; }
  #touch-controls [data-direction="ArrowDown"] { grid-area: 3 / 2; }
  #touch-controls #touch-interact { grid-area: 2 / 2; }
  #touch-controls #touch-run { grid-area: 3 / 3; font-size: 11px; }
  #touch-controls button { min-width: 44px; min-height: 44px; padding: 0; border-radius: 12px; font-size: 16px; }
  body.sheet-open #touch-controls, body.hud-hidden #touch-controls { display: none !important; }
  /* Every control in the status cards is a comfortable 44px touch target. */
  .status-stack :is(button, select) { min-width: 44px; min-height: 44px !important; }
  /* Fishing and breathing bring their own controls; the d-pad rests until they end. */
  body:has(:is(#fishing-hud, #breathing-hud):not([hidden])) #touch-controls { display: none !important; }
  /* Status cards never sit on the d-pad: above it on tall screens, beside it on short ones. */
  body:has(#touch-controls:not([hidden])):not(:has(:is(#fishing-hud, #breathing-hud):not([hidden]))) .status-stack { bottom: calc(var(--sheet-bottom) + 64px + 164px); }
  .world-guide { display: none; }
}

/* ---------- hidden HUD (H) ---------- */
body.hud-hidden :is(.hud-left, .hud-right, .next-step-bar, .multiplayer-hud, .game-tools, .music-dock, .chat-toggle, .minimap-toggle, #world-minimap, .world-guide) { display: none !important; }
.show-hud { position: fixed; z-index: var(--z-hud); right: var(--hud-edge); top: var(--hud-edge); min-height: 36px; padding: 4px 14px; background: #fffaeee6; border: 2px solid var(--cz-cocoa); border-radius: 999px; box-shadow: var(--hud-lift); font-family: var(--cz-font-display); font-size: 13px; cursor: pointer; }
.show-hud[hidden] { display: none; }

/* ---------- sign-in gate ---------- */
.entry-gate { position: fixed; inset: 0; z-index: var(--z-gate); display: grid; grid-template-columns: minmax(340px, 520px) 1fr; font-family: var(--cz-font-body); color: var(--cz-cocoa); }
.entry-gate[hidden] { display: none; }
.entry-gate-panel { display: flex; flex-direction: column; justify-content: center; gap: 10px; overflow: auto; padding: clamp(20px, 4vh, 48px) clamp(20px, 5vw, 64px); background: var(--cz-paper); border-right: 4px solid var(--cz-cocoa); box-shadow: 6px 0 0 #5a403822; }
.entry-gate-brand { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; margin-bottom: 14px; font-family: var(--cz-font-display); font-size: 24px; font-weight: 700; color: var(--cz-cocoa); text-decoration: none; }
.entry-gate-brand img { width: 36px; height: 36px; background: #3c6955; border: 2px solid var(--cz-cocoa); border-radius: 10px; box-shadow: 2px 2px 0 var(--cz-cocoa); }
.entry-gate-brand .brand-grove { color: var(--cz-peach-deep); }
.entry-gate h1 { margin: 0; font-family: var(--cz-font-display); font-size: clamp(28px, 4vw, 36px); }
.entry-gate-lead { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--cz-cocoa-soft); }
.entry-gate-providers { display: grid; gap: 8px; }
.entry-gate-google { display: grid; justify-items: stretch; min-height: 0; }
.entry-gate-google:empty { display: none; }
.entry-gate .button-discord { margin-top: 0; }
.entry-gate .auth-divider { margin: 6px 0; }
.entry-gate-form { display: grid; gap: 8px; }
.entry-field { display: grid; gap: 4px; }
.entry-field[hidden] { display: none; }
.entry-field label { margin: 0; font-family: var(--cz-font-display); font-size: 13px; letter-spacing: .03em; }
.entry-field input { width: 100%; }
.entry-gate-submit { min-height: 48px; margin-top: 4px; font-size: 17px; }
.entry-gate-status { min-height: 1.3em; margin: 0; font-size: 14px; color: var(--cz-cocoa-soft); }
.entry-gate-status.is-error { color: #b83b3b; }
.entry-gate-switch { margin: 6px 0 0; padding-top: 12px; border-top: var(--soft-line); font-size: 14px; color: var(--cz-cocoa-soft); }
.entry-gate-switch .text-button { padding: 0 2px; font-family: var(--cz-font-display); font-size: 14px; color: var(--cz-cocoa); text-decoration: underline; }
.entry-gate-fine { margin: 0; font-size: 12px; color: var(--cz-cocoa-soft); }
.entry-gate-scene { position: relative; pointer-events: none; }
.entry-gate-caption { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 10px; background: var(--cz-paper); border: 2px solid var(--cz-cocoa); border-radius: 999px; box-shadow: 2px 2px 0 var(--cz-cocoa); font-size: 13px; color: var(--cz-cocoa-soft); }
.entry-gate-caption strong { font-family: var(--cz-font-display); font-size: 15px; color: var(--cz-cocoa); }
.entry-gate .live-dot, .live-dot { display: inline-block; width: 10px; height: 10px; background: var(--cz-moss); border: 2px solid var(--cz-cocoa); border-radius: 50%; }
body.gated :is(.topbar, .game-tools, .status-stack, .arrival-help, .music-dock, .chat-toggle, .chat-panel, .minimap-toggle, .sheet-host, #touch-controls, #world-minimap, .world-guide, .show-hud) { visibility: hidden !important; }
@media (max-width: 760px) {
  .entry-gate { grid-template-columns: 1fr; }
  .entry-gate-scene { display: none; }
  .entry-gate-panel { justify-content: flex-start; padding-top: max(24px, env(safe-area-inset-top)); background: #fffaeef2; border-right: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .entry-gate-panel { animation: gate-in .35s ease-out; }
  @keyframes gate-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- responsive ---------- */
@media (max-width: 1366px) {
  #room-toggle { width: 44px; padding: 0; justify-content: center; font-size: 0; }
  #room-toggle::before { width: 20px; height: 20px; }
}
@media (max-width: 1280px) {
  .music-volume, #sfx-toggle { display: none; }
  .music-dock { max-width: 230px; }
}
@media (max-width: 1180px) {
  :root { --sheet-w: 400px; }
  .music-copy { display: none; }
  #profile-name { display: none; }
  .hud-profile { padding: 0 8px 0 3px; }
  .place-card { max-width: 250px; }
  .next-step-bar { max-width: min(440px, 36vw, 100%); }
  /* Where you are wins over the hint: the hint shrinks first (its tooltip has the rest). */
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .place-map-icon { display: none; }
}
@media (max-width: 980px) {
  :root { --sheet-w: 380px; --dock-h: 66px; }
  .dock-button { width: 64px; height: 52px; font-size: 12px; }
  .dock-button .px { --px-size: 24px; }
  .dock-primary { width: 80px; }
  .hud-chip { padding: 0 10px; font-size: 13px; }
  .next-step-bar { max-width: min(32vw, 100%); }
  #next-step-action { display: none; }
  .next-step-bar { cursor: pointer; }
  .minimap-toggle { display: none; }
  .map-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 860px) {
  /* One column: the map, then its details; the sheet scrolls rather than squeezing them. */
  .map-layout { flex: none; grid-template-columns: 1fr; }
  .map-world { min-height: 360px; }
  .map-detail { overflow: visible; }
}

/* Small tablets: the hint gets its own row under the place and your stats. */
@media (max-width: 900px) and (min-width: 721px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 8px; }
  .hud-left { grid-column: 1; grid-row: 1; }
  .hud-right { grid-column: 2; grid-row: 1; }
  .hud-center { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .next-step-bar { max-width: min(560px, 100%); }
  #next-step-action { display: inline-flex; }
}
/* Phones: two short rows on top, the dock across the bottom, panels as bottom sheets. */
@media (max-width: 720px) {
  :root { --hud-edge: 8px; --hud-h: 46px; --dock-h: 60px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 8px; }
  .hud-left { grid-column: 1; grid-row: 1; gap: 6px; }
  .hud-right { grid-column: 2; grid-row: 1; gap: 6px; }
  .hud-center { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-items: stretch; }
  .place-card { height: 46px; gap: 8px; padding: 0 10px 0 4px; max-width: none; }
  .place-card .brand-mark { width: 32px; height: 32px; }
  .place-card .brand-mark img { width: 24px; height: 24px; }
  #scene-title { font-size: 15px; }
  .world-sub { font-size: 12px; }
  .place-map-icon { display: none; }
  .hud-chip { height: 40px; padding: 0 10px; font-size: 13px; }
  #room-toggle { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  #room-toggle::before { width: 20px; height: 20px; }
  .hud-left .world-menu { display: none; }
  .wallet { height: 40px; padding: 0 10px 0 8px; }
  .wallet strong { font-size: 21px; }
  .level-ring { width: 40px; height: 40px; }
  .hud-profile { height: 40px; padding: 0 3px; }
  .sync-dot { display: none; }
  #profile-sprite { width: 30px; height: 32px; }
  .hud-settings { display: none; }
  .next-step-bar { max-width: none; width: 100%; min-height: 40px; }
  #next-step-action { display: inline-flex; }
  .focus-pill { width: 100%; min-height: 50px; }
  .focus-pill #dock-open { flex: 1; }
  #dock-countdown { font-size: 30px; }
  #dock-status { max-width: none; }
  .multiplayer-hud { max-width: 100%; justify-self: center; }
  .game-tools { left: var(--hud-edge); right: var(--hud-edge); transform: none; justify-content: space-between; gap: 2px; padding: 4px; border-radius: 18px; }
  .dock-button { flex: 1 1 0; width: auto; min-width: 0; height: 48px; padding: 4px 1px 3px; gap: 3px; font-size: 10.5px; border-radius: 12px; }
  .dock-button .px { --px-size: 21px; }
  .dock-primary { flex: 1.25 1 0; width: auto; }
  .dock-time { font-size: 17px; }
  .dock-badge { right: 2px; top: -2px; min-width: 18px; height: 18px; font-size: 14px; line-height: 14px; }
  .music-dock { left: var(--hud-edge); bottom: calc(var(--hud-edge) + var(--dock-h) + 8px); height: 48px; padding: 4px; gap: 4px; border-radius: 16px; }
  .music-disc { width: 34px; height: 34px; }
  .music-controls button { width: 32px; height: 32px; }
  #music-next { display: none; }
  .chat-toggle { right: var(--hud-edge); bottom: calc(var(--hud-edge) + var(--dock-h) + 8px); height: 48px; padding: 0 12px; border-radius: 16px; }
  .chat-toggle-label { display: none; }
  .chat-panel { left: var(--hud-edge); right: var(--hud-edge); bottom: calc(var(--hud-edge) + var(--dock-h) + 64px); width: auto; height: min(420px, calc(100dvh - 260px)); }
  #world-minimap { display: none; }
  .status-stack { bottom: calc(var(--hud-edge) + var(--dock-h) + 64px); width: calc(100vw - 2 * var(--hud-edge)); }
  .status-stack > :is(.activity-hud, .action-status, .decoration-toolbar, .game-status, .cafe-shortcuts) { border-radius: 16px; }
  .world-guide { bottom: calc(var(--hud-edge) + var(--dock-h) + 64px); }
  .toast { top: calc(var(--hud-edge) + 108px); }
  body.has-session .toast { top: calc(var(--hud-edge) + 116px); }
  /* Place and stats, the hint, then the room bar: messages go below all three rows. */
  body:has(.multiplayer-hud:not([hidden])) .toast { top: calc(var(--hud-edge) + 3 * var(--hud-h) + 30px); }
  /* Bottom sheet. */
  .sheet-host, .sheet-host[data-size="full"] { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(88dvh, calc(100dvh - 48px)); }
  .sheet-host[data-size="full"] { height: calc(100dvh - 10px); }
  .sheet-scrim { position: fixed; inset: 0; display: block; background: #3c28224d; pointer-events: auto; }
  .sheet-frame { border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -4px 0 #5a403833, 0 -18px 40px #3c282233; }
  .sheet-frame::before { content: ""; position: absolute; top: 6px; left: 50%; width: 44px; height: 5px; margin-left: -22px; background: #5a403840; border-radius: 99px; z-index: 4; }
  .sheet-header { padding-top: 16px; }
  .sheet-body > dialog[open], .sheet-body > aside:not([hidden]) { padding: 0 14px calc(18px + env(safe-area-inset-bottom)); }
  .sheet-body .dialog-heading { padding-top: 16px; }
  .sheet-body .dialog-heading h2 { font-size: 20px; }
  body.sheet-open :is(.game-tools, .music-dock, .chat-toggle, .status-stack) { visibility: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .sheet-host:not([hidden]) .sheet-frame { animation: sheet-up .22s var(--cz-ease); }
    @keyframes sheet-up { from { transform: translateY(30px); opacity: .6; } }
  }
  .arrival-help.walkthrough { top: auto; bottom: calc(var(--hud-edge) + var(--dock-h) + 8px); left: var(--hud-edge); right: var(--hud-edge); width: auto; max-height: calc(100dvh - 170px); }
  .map-world { min-height: 0; aspect-ratio: 4 / 3.4; }
  .map-place { left: var(--mx); top: var(--my); }
  .map-layout { flex: none; }
  .map-place { width: 30%; padding: 3px 3px 4px; gap: 1px; border-radius: 10px; }
  .map-place.map-cafe { width: 24%; }
  .map-place-meta { display: none; }
  .map-place-name { font-size: 11.5px; }
  .map-place-art { border-radius: 7px; }
  .map-you { top: -16px; font-size: 10px; }
  .journal-summary strong { font-size: 24px; }
  .focus-today { grid-template-columns: 1fr; }
  .timer-face { width: min(180px, 60%); }
  #countdown { font-size: 52px; }
}
@media (max-width: 480px) {
  .journey-strip { flex-wrap: wrap; gap: 6px 12px; }
  .journey-copy { flex-basis: 100%; }
  .journey-score { grid-auto-flow: column; justify-items: start; align-items: baseline; gap: 10px; text-align: left; }
  #xp-total { font-size: 18px; }
}
@media (max-width: 420px) {
  /* The level lives in the Journal; the place name needs the room. */
  .level-ring { display: none; }
}
@media (max-width: 380px) {
  .hud-chip { display: none; }
  .dock-button { font-size: 9.5px; }
}
/* Short landscape screens: everything a little smaller, the sheet stays at the side. */
@media (max-height: 560px) and (min-width: 721px) {
  :root { --hud-edge: 8px; --hud-h: 44px; --dock-h: 58px; }
  .place-card { height: 44px; }
  .dock-button { height: 46px; gap: 2px; }
  .dock-button .px { --px-size: 20px; }
  .music-dock, .chat-toggle, .minimap-toggle { height: 50px; }
  .minimap-toggle { width: 50px; }
  .map-world { min-height: 300px; }
  /* With little height, an open panel gets all of it: it runs top to bottom, the dock steps
     aside until it closes, the level banner is skipped and the tabs scroll in one row. */
  .sheet-host { top: var(--hud-edge); bottom: var(--hud-edge); }
  body.sheet-open :is(.game-tools, .music-dock, .chat-toggle, .minimap-toggle, .status-stack) { visibility: hidden; }
  .sheet-banner { display: none !important; }
  .sheet-tabs { overflow-x: auto; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  .sheet-tablist { flex-wrap: nowrap; width: max-content; padding-right: 26px; }
  .sheet-header { padding-top: 6px; padding-bottom: 6px; }
  .sheet-body .dialog-heading { padding-top: 8px; }
}

@media (pointer: coarse) and (max-height: 560px) {
  body:has(#touch-controls:not([hidden])):not(:has(:is(#fishing-hud, #breathing-hud):not([hidden]))) .status-stack { bottom: var(--sheet-bottom); left: var(--hud-edge); right: calc(var(--hud-edge) + 172px); width: auto; transform: none; }
}

/* ---------- Play → Activities ---------- */
.activity-board { display: grid; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.activity-board li { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 12px; background: #fffdf6; border: 2px solid #5a403830; border-radius: 14px; }
.activity-board li .px { --px-size: 22px; color: var(--cz-moss-deep); }
.activity-board li.is-done { opacity: .6; }
.activity-copy { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.activity-copy strong { font-size: 14.5px; }
.activity-copy small { font-size: 12px; color: var(--cz-cocoa-soft); }
.activity-board .activity-go { flex: none; min-height: 34px !important; padding: 3px 12px !important; font-size: 13.5px !important; }
.activity-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.activity-links .activity-tile { display: grid; justify-items: start; gap: 2px; min-height: 0; padding: 10px 12px; text-align: left; box-shadow: 0 2px 0 var(--cz-cocoa); }
.activity-links .activity-tile > span { font-size: 18px; }
.activity-links .activity-tile small { font-size: 12px; color: var(--cz-cocoa-soft); }

/* ---------- account ---------- */
.account-card { display: grid; gap: 2px; padding: 12px 14px; background: var(--cz-cream); border: 2px solid var(--cz-cocoa); border-radius: 14px; }
.account-card strong { font-family: var(--cz-font-display); font-size: 18px; }
.account-card span { font-size: 13px; color: var(--cz-cocoa-soft); }
.account-sync-info { margin: 12px 0 4px; font-size: 14px; }
.account-status-overview { margin: 0 0 12px; padding: 0; background: none; border: 0; box-shadow: none; font-size: 13px; color: var(--cz-cocoa-soft); }
.account-status-overview p { margin: 0; color: inherit; }
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.account-rooms { font-size: 14px; }
.account-providers { display: grid; gap: 8px; }

/* ---------- Together → Rooms ---------- */
.lobby-dialog .google-multiplayer-auth { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; padding: 8px 12px; background: var(--cz-cream); border: 2px solid #5a403830; border-radius: 12px; box-shadow: none; }
.lobby-dialog #google-auth-status { flex: 1; margin: 0; font-size: 13px; }
.lobby-dialog #google-auth-logout { font-size: 13px; }
.lobby-dialog .lobby-lead { margin: 0 0 10px; font-size: 14px; color: var(--cz-cocoa-soft); }
.lobby-dialog #find-cafe-room { width: 100%; min-height: 48px; margin-bottom: 12px; }
.lobby-dialog .lobby-tabs { display: flex; gap: 4px; margin: 0 0 12px; padding: 4px; background: var(--cz-paper-deep); border-radius: 999px; }
.lobby-dialog .lobby-tabs .tab-btn { flex: 1; min-height: 34px !important; padding: 4px 10px !important; background: transparent; border: 0 !important; border-radius: 999px; box-shadow: none !important; font-size: 13.5px !important; }
.lobby-dialog .lobby-tabs .tab-btn.active { background: var(--cz-cocoa) !important; color: var(--cz-paper) !important; }
/* One room per row: name and tags on the left, who is there and Join on the right. */
.lobby-dialog .lobby-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.lobby-dialog .lobby-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head join" "title join" "tags join"; align-items: center; gap: 2px 12px; padding: 10px 12px; }
.lobby-dialog .lobby-card:hover { transform: none; }
.lobby-dialog .lobby-card-header { grid-area: head; justify-content: flex-start; gap: 8px; }
.lobby-dialog .lobby-title { grid-area: title; margin: 2px 0 0; font-family: var(--cz-font-display); font-size: 15px; line-height: 1.25; }
.lobby-dialog .lobby-tags { grid-area: tags; gap: 4px; }
.lobby-dialog .lobby-tags:empty { display: none; }
.lobby-dialog .lobby-tag { font-size: 11px; }
.lobby-dialog .lobby-capacity { font-size: 11.5px; }
.lobby-dialog .lobby-card-footer { grid-area: join; display: grid; justify-items: end; gap: 4px; margin: 0; padding: 0; border: 0; }
.lobby-dialog .lobby-mode-indicator { font-size: 11.5px; white-space: nowrap; }
.lobby-dialog .join-btn { min-height: 36px !important; padding: 4px 14px !important; font-size: 14px !important; white-space: nowrap; }
.music-volume { flex: none; width: 72px; }
.music-volume input { width: 72px !important; min-width: 0; }

/* ---------- travel fade (src/world.js: World.fade) ---------- */
/* One cocoa layer straight over the world canvas, under every HUD layer. Hops
   fade it out and back in; scene cuts lift out of it. Never under reduced motion. */
.world-fade { position: absolute; inset: 0; z-index: 1; background: #3c2822; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .world-fade { display: none; } }

/* ---------- status cards beside an open side sheet ---------- */
/* On wide screens the side sheet covers the right; the status cards (a round
   left part-way, a route, a game's card) centre in the space still showing the world. */
@media (min-width: 900px) and (pointer: fine) {
  body.sheet-open:has(.sheet-host:not([data-size="full"])) .status-stack {
    left: calc((100vw - var(--sheet-w) - var(--hud-edge)) / 2);
    width: min(620px, calc(100vw - var(--sheet-w) - 3 * var(--hud-edge)));
  }
}

/* Keyboard focus on the world shows as a soft inner frame, not a hard orange border. */
.canvas-wrap > #world:focus-visible { outline: 2px solid #e9a07e8c; outline-offset: -2px; }