/* =========================================================================
   Cloud the Peacekeeper — menu & overlay skin.

   Design language: a cloud-watcher's storybook almanac. Warm paper cards,
   dark-ink linework, hard "sticker" shadows (no soft SaaS glow), and solid
   fills pulled straight from the game's own sky/sun/grass palette. Headings
   are set in a serif; nothing here uses a gradient. The intent is that the
   menu reads like a hand-lettered page, not a generated dashboard.
   ========================================================================= */

:root {
  /* Surfaces — warm paper, two weights */
  --paper:        #f3e7c9;
  --paper-deep:   #ecdcb6;
  --paper-sunk:   #e3d0a3;

  /* Ink — the linework + body copy */
  --ink:          #2b2c46;
  --ink-soft:     #565576;
  --ink-faint:    #7c7a98;

  /* Accents, named for what they are in the world */
  --sky:          #4f7bff;   /* the lightning bolt's blue */
  --sky-deep:     #33509f;
  --sun:          #e3a127;   /* midday/dusk gold */
  --sun-deep:     #a9741a;
  --grass:        #4f6f3a;   /* statue-complete green */
  --storm:        #d1413f;   /* a death, the peace broken */

  /* A deliberate radius hierarchy — not one rounded corner everywhere */
  --r-card:  20px 22px 19px 23px;  /* hand-drawn, faintly uneven */
  --r-chip:  11px;
  --r-btn:   13px 14px 13px 14px;

  /* One shared motion language */
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
           Palatino, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Safe-area insets surfaced as variables so game.js can read them (it sizes
     the canvas in JS). Need viewport-fit=cover on the viewport meta to be set. */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0c1538;
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  /* Stop rapid clicks / drags from selecting page text. Safari & iOS only
     honour the -webkit- prefixed forms, so set both. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Touch hygiene: no rubber-band scroll, no tap flash, no gesture zoom. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* The name field is the one place text selection should still work. */
#customName {
  -webkit-user-select: text;
  user-select: text;
}

#stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  /* Keep the playfield clear of notches / rounded corners. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Keep the 5:3 canvas aspect ratio while filling the window. */
#game {
  width: min(100vw, 166.6667vh);
  height: min(60vw, 100vh);
  background: #0b1026;
  display: block;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  cursor: crosshair;
  touch-action: none;
}

/* On a touch device, game.js drives the canvas size/position (fixed, full-bleed,
   fitted to the visual viewport & safe area). Drop the desktop letterbox sizing
   and shadow so it can fill a landscape phone screen. */
@media (pointer: coarse) and (hover: none) {
  #game {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    box-shadow: none;
    cursor: default;
  }
  /* Centre overlays within the always-visible (small) viewport so a card and its
     button never end up underneath the URL bar. svh = toolbars-shown height.
     The padding (screen-edge gap + notch/home-indicator insets) is built into the
     overlay, and the card is capped at 100% of that padded box — so the modal is
     sized to the space that's actually free and never needs scrolling to reach
     its own edges. */
  .overlay {
    position: fixed;
    top: 0;
    bottom: auto;
    height: 100svh;
    padding:
      calc(env(safe-area-inset-top) + 12px)
      calc(env(safe-area-inset-right) + 12px)
      calc(env(safe-area-inset-bottom) + 12px)
      calc(env(safe-area-inset-left) + 12px);
  }
  .panel { max-height: 100%; }
}

/* ---- Overlay: a quiet vignette so the live sky still shows through ------ */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 40%,
      rgba(10, 16, 38, 0.30),
      rgba(8, 12, 30, 0.74) 88%);
  z-index: 5;
}

.overlay.hidden { display: none; }

/* ---- The paper card ----------------------------------------------------- */
.panel {
  position: relative;
  width: min(540px, 92vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--paper);
  /* The whole card is one piece of stock: ink edge + a flat dropped shadow. */
  border: 2.5px solid var(--ink);
  border-radius: var(--r-card);
  padding: 30px 32px 28px;
  box-shadow: 9px 10px 0 0 rgba(20, 22, 42, 0.55);
  /* Re-enable vertical touch-scroll inside cards (the page itself is locked). */
  touch-action: pan-y;
}

/* a faint top-edge highlight, like light catching the paper */
.panel::before {
  content: "";
  position: absolute;
  inset: 4px 4px auto 4px;
  height: 38%;
  border-radius: 16px 18px 40px 40px;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.5), transparent);
  pointer-events: none;
}

/* Menu groups are invisible to layout by default, so the panel lays all of its
   children out in one flex column. `order` preserves the desktop/portrait reading
   order (title → intro → name → busyness → Drift in → how-to) even though the
   Drift-in button lives in the intro group for the landscape two-column layout. */
.menu-intro, .menu-form { display: contents; }

#menu .panel { display: flex; flex-direction: column; gap: 18px; }
#menu .menu-intro > *,
#menu .menu-form > *,
#menu .howto { margin-top: 0; margin-bottom: 0; }
#menu .menu-intro h1 { order: 1; }
#menu .menu-intro .blurb { order: 2; }
#menu .menu-form .field:nth-of-type(1) { order: 3; }
#menu .menu-form .field:nth-of-type(2) { order: 4; }
#menu .menu-intro button.primary { order: 5; }
#menu .howto { order: 6; }

.panel > *,
.menu-intro > *,
.menu-form > * { position: relative; }

.panel.small {
  width: min(340px, 90vw);
  text-align: center;
  padding: 26px 28px;
}

/* End screen (win/lose): a compact card centred in the overlay, never the whole
   page — kept narrow and short on every screen, with its own scroll if needed. */
#endScreen .panel {
  width: min(380px, 88vw);
  max-height: 86svh;
  text-align: center;
}
#endScreen .stats { text-align: left; }

/* ---- Display type ------------------------------------------------------- */
h1 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.4px;
  color: var(--ink);
  /* a soft paper-coloured edge so the dark letters sit on the page */
  text-shadow: 1px 1px 0 rgba(255, 252, 240, 0.6);
}

/* "the" — a small hand-tucked word, gold and tilted */
h1 .tag {
  display: inline-block;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  color: var(--sun-deep);
  transform: rotate(-7deg) translateY(-2px);
  margin: 0 2px;
}

.panel.small h1 { font-size: 30px; margin-bottom: 8px; }

/* End-screen titles carry the verdict's colour */
h1.win  { color: var(--grass); }
h1.lose { color: var(--storm); }

/* ---- Body copy ---------------------------------------------------------- */
.blurb {
  color: var(--ink-soft);
  line-height: 1.58;
  font-size: 16px;
}
.blurb em {
  color: var(--storm);
  font-style: italic;
  font-weight: 600;
}
.blurb b { color: var(--ink); }

/* ---- Fields & labels ---------------------------------------------------- */
.field { margin: 22px 0; }

.field > label {
  display: inline-block;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 10px;
  /* a marker underline, drawn under the word */
  padding-bottom: 2px;
  border-bottom: 2px solid var(--sun);
}

.choices { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 8px; }

/* ---- Choice chips: little paper tokens you press in --------------------- */
.choice {
  flex: 1 1 auto;
  min-width: 92px;
  padding: 10px 12px;
  border-radius: var(--r-chip);
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: 2px 3px 0 0 rgba(20, 22, 42, 0.5);
  transition: transform 0.1s var(--ease), box-shadow 0.1s var(--ease),
              background 0.12s var(--ease);
}
.choice:hover {
  background: #fff6e0;
  transform: translate(-1px, -1px);
  box-shadow: 3px 4px 0 0 rgba(20, 22, 42, 0.5);
}
/* pressed-in state: token sinks toward the page, shadow collapses */
.choice.active {
  background: var(--sky);
  border-color: var(--sky-deep);
  color: #fff;
  transform: translate(1px, 2px);
  box-shadow: 1px 1px 0 0 var(--sky-deep);
}
.choice .sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  margin-top: 3px;
}
.choice.active .sub { color: rgba(255, 255, 255, 0.85); }

/* ---- Free-text name ----------------------------------------------------- */
#customName {
  width: 100%;
  margin-top: 9px;
  padding: 11px 13px;
  border-radius: var(--r-chip);
  border: 2px solid var(--ink);
  background: var(--paper-sunk);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  /* inset, like a stamped field on a form */
  box-shadow: inset 2px 2px 0 0 rgba(20, 22, 42, 0.14);
}
#customName::placeholder { color: var(--ink-faint); font-style: italic; }
#customName:focus {
  outline: none;
  border-color: var(--sky-deep);
  background: #fff8e6;
  box-shadow: inset 2px 2px 0 0 rgba(51, 80, 159, 0.18);
}

/* ---- The one true button: solid, chunky, presses into its shadow -------- */
button.primary {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
  background: var(--sun);
  border: 2.5px solid var(--ink);
  border-radius: var(--r-btn);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(120, 70, 10, 0.45);
  box-shadow: 4px 5px 0 0 var(--ink);
  transition: transform 0.08s var(--ease), box-shadow 0.08s var(--ease),
              background 0.12s var(--ease);
}
button.primary:hover { background: #f0ad33; }
button.primary:active {
  transform: translate(4px, 5px);
  box-shadow: 0 0 0 0 var(--ink);
}

/* ---- How-to: a folded note ---------------------------------------------- */
.howto {
  margin-top: 20px;
  border-top: 1.5px dashed rgba(43, 44, 70, 0.35);
  padding-top: 14px;
  color: var(--ink-soft);
  font-size: 14px;
}
.howto summary {
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--sun-deep);
  list-style: none;
}
.howto summary::before { content: "✎ "; }
.howto[open] summary::before { content: "✕ "; }
.howto ul { margin: 12px 0 0; padding-left: 20px; line-height: 1.7; }
.howto b { color: var(--ink); }

/* ---- End-screen stat sheet ---------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 20px 0 6px;
  font-size: 15px;
  border-top: 1.5px solid rgba(43, 44, 70, 0.25);
}
.stats .k,
.stats .v {
  padding: 7px 2px;
  border-bottom: 1.5px dotted rgba(43, 44, 70, 0.22);
}
.stats .k { color: var(--ink-soft); }
.stats .v {
  text-align: right;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--sun-deep);
}

/* ---- Rotate-to-landscape glyph ------------------------------------------ */
.rotateGlyph {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--sun-deep);
  animation: rotateHint 1.8s var(--ease) infinite;
}
@keyframes rotateHint {
  0%, 55%  { transform: rotate(0deg); }
  78%, 100% { transform: rotate(90deg); }
}

/* ---- Short viewports (a phone in landscape): shrink the cards ------------ */
@media (max-height: 480px) {
  .panel { padding: 16px 22px 14px; max-height: 94svh; }
  .panel.small { padding: 16px 22px; }
  h1 { font-size: 26px; margin-bottom: 8px; }
  .panel.small h1 { font-size: 22px; }
  .blurb { font-size: 14px; line-height: 1.42; }
  .field { margin: 12px 0; }
  .field > label { font-size: 15px; margin-bottom: 7px; }
  .choice { padding: 8px 10px; }
  button.primary { margin-top: 11px; padding: 11px; font-size: 17px; }
  .howto { margin-top: 12px; padding-top: 10px; }
  .rotateGlyph { font-size: 40px; margin-bottom: 6px; }
}

/* ---- Intro UI on a landscape phone: a wider, two-column card -------------
   Left third = title + intro text; right two-thirds = the Cloud-name and
   Busyness pickers stacked vertically with the start button. The how-to spans
   the full width beneath both columns. */
@media (pointer: coarse) and (hover: none) and (orientation: landscape) {
  /* width 100% = the padded overlay box, so the card already respects the
     screen-edge / safe-area gap; max-height comes from .panel { max-height:100% }. */
  #menu .panel {
    width: min(680px, 100%);
    flex-direction: row;          /* two columns instead of one stack */
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 18px;
    row-gap: 0;
    padding: 12px 16px;
  }

  /* Each wrapper becomes its own tight column (no grid row-coupling gaps). The
     order rules above no longer apply once the children are grouped per wrapper. */
  #menu .menu-intro {
    display: flex;
    flex-direction: column;
    flex: 0 0 40%;                /* left: title + intro + how-to + Drift in */
    min-width: 0;
    gap: 6px;
  }
  #menu .menu-form {
    display: flex;
    flex-direction: column;
    flex: 1;                      /* right: name + busyness, stacked */
    min-width: 0;
    gap: 9px;
  }
  #menu .menu-intro h1,
  #menu .menu-intro .blurb,
  #menu .menu-intro button.primary,
  #menu .menu-form .field { order: 0; }

  /* Squeeze hard so the whole card fits without scrolling. */
  #menu .menu-intro h1 { font-size: 20px; margin-bottom: 0; }
  #menu .blurb { font-size: 11.5px; line-height: 1.3; }
  #menu .field { margin: 0; }
  #menu .field > label { font-size: 13px; margin-bottom: 4px; }
  #menu button.primary { font-size: 15px; padding: 8px; margin: 0; }
  #menu .menu-intro .howto { order: 0; margin: 0; padding-top: 6px; font-size: 12px; }
  #menu .howto summary { font-size: 13px; }

  /* Compact chips: shrink to share a row instead of forcing tall wrapping. */
  #menu .choices { gap: 6px; }
  #menu .choice {
    min-width: 0;
    flex: 1 1 auto;
    padding: 6px 7px;
    min-height: 0;
    font-size: 12px;
  }
  #menu .choice .sub { font-size: 9.5px; margin-top: 1px; }
  #menu #customName { margin-top: 6px; padding: 7px 10px; font-size: 14px; }
}