/* Shared by index.html and gameboard.html. Page files only add their own layout extras. */
:root { --bg: #111; --card: #1e1e1e; --raised: #2e2e2e; --text: #f0f0f0; --muted: #a8a8a8; --accent: #d81b60; --border: #777; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); margin: 0 auto; padding: 16px; max-width: 600px; }
h1 { font-size: 1.4rem; text-align: center; margin: 0 0 12px; }

button { flex: 1; min-width: 90px; min-height: 48px; padding: 10px 8px; border: none; border-radius: 10px; background: var(--raised); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button.primary { background: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.controls, .actionbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* The timer docks with the buttons so the bar can never cover it. */
.dock { position: sticky; bottom: 0; z-index: 1; background: var(--bg); }
.actionbar { padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }

.toggles { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: .95rem; }
.toggles label { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
input[type=checkbox] { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
input[type=text] { width: 100%; min-height: 48px; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: #222; color: var(--text); font: inherit; }
fieldset { border: 1px solid #444; border-radius: 10px; margin: 0 0 12px; padding: 6px 14px; }

#whose { font-size: 1.3rem; font-weight: 700; text-align: center; margin: 8px 0 4px; color: var(--accent); min-height: 1.6em; }
#kind { text-align: center; font-size: .85rem; color: var(--muted); min-height: 1.2em; margin-bottom: 8px; }
.narration { display: grid; gap: 8px; margin-bottom: 8px; }
.say { min-height: 8em; padding: 10px 16px 14px; border: 1px solid #555; border-radius: 12px; background: var(--card); }
.say.private { border: 2px dashed var(--accent); }
.say h2 { min-height: 1.3em; margin: 0 0 6px; font-size: .8rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.say p { margin: 0; font-size: 1.15rem; line-height: 1.4; }
#timer { font-size: 3.5rem; font-weight: 700; text-align: center; margin: 4px 0; font-variant-numeric: tabular-nums; }
#timer.running { color: var(--accent); }
/* Taller slots only where the screen has room; on short phones they would push the timer under the action bar. */
@media (max-width: 480px) and (min-height: 700px) { .say { min-height: 11em; } }
@media (orientation: portrait) and (max-height: 699px) { #timer { font-size: 2.6rem; margin: 0; } }

/* Pages wrap play in .col-main (prompt) and .col-side (timer, buttons). The wrappers add no box
   in portrait, so the dock still sticks to the whole play area. */
.col-main, .col-side { display: contents; }
/* Short landscape phones: two columns, so the action bar never covers the timer or the prompt. */
@media (orientation: landscape) and (max-height: 500px) {
  body { max-width: 960px; padding: 8px 16px; }
  h1 { font-size: 1.1rem; margin-bottom: 6px; }
  #play { display: flex; gap: 16px; align-items: flex-start; }
  .col-main, .col-side { display: block; flex: 1; min-width: 0; }
  .col-side { position: sticky; top: 8px; }
  .col-side .dock { position: static; }
  .col-side .actionbar { padding-bottom: 8px; }
  #timer { font-size: 2.6rem; }
}