/* app/shell.css — the page around the game: a full-viewport stage and the
   Play screen shown before the game starts and after it is closed. The game
   brings its own stylesheets (game/css/theme.css, game/css/game.css). */
html, body { margin: 0; height: 100%; }
body {
  background: #EDE0C2;
  color: #1A0D07;
  font-family: 'Atkinson Hyperlegible', 'Calibri', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.shell {
  box-sizing: border-box;
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #F5EACC 0%, #EDE0C2 55%, #E4D4A8 100%);
}
.shell[hidden] { display: none; }
.shell h1 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: .02em; }
.shell p { margin: 0 auto; max-width: 32rem; color: #5C4030; line-height: 1.4; }
.shell .play {
  justify-self: center;
  min-height: 3rem;
  padding: 0 2rem;
  font: 700 1.1rem/1 inherit;
  font-family: inherit;
  color: #FDF4DC;
  background: #3D1238;
  border: 0;
  border-radius: 0 10px 0 10px;
  cursor: pointer;
}
.shell .play:hover { filter: brightness(1.15); }
.shell .play:focus-visible { outline: 3px solid #3D1238; outline-offset: 3px; }
.shell .play[disabled] { opacity: .6; cursor: progress; }
.shell .links { font-size: .9rem; }
.shell .links a { color: #3D1238; }
.shell .error { color: #6E1A1A; font-weight: 700; }
.embedded .shell h1 { font-size: clamp(1.2rem, 5vw, 1.8rem); }
.embedded .shell .links { display: none; }