/* The phone's page: the book's cream card on the felt, a table that fills a phone held sideways, and a cover asking to turn it
   when it's held upright. The name box and Join are big enough to hit with a thumb (at least 48 px, the box's letters 26 px or
   more, so iOS doesn't zoom in on them), and while typing (body.typing, set by phone.js) the card sits in what the keyboard leaves
   of the screen: --vv-top and --vv-height are the visual viewport's, kept by phone.js. */
:root { --felt: #1b3a2b; --table: #26543e; --cream: #fbf6e9; --ink: #1b1f3b; --red: #c92a3e; --gold: #f2b632; --grey: #8a8476; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--felt); color: var(--ink); font: 18px/1.35 system-ui, sans-serif;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
/* The table's canvas sits in the safe area (env(safe-area-inset-*)): clear of the notch and the home bar, so no card is drawn under
   either; the page's felt (--table, the table's own colour) fills what's left round it, under the status bar too. */
#table { position: fixed; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px);
  left: env(safe-area-inset-left, 0px); width: auto; height: auto; display: block; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* While the table's up (html.playing, set by table.js): the page under it can't scroll, zoom or select, so every touch is the table's.
   Only then: the join card needs its own taps and scrolling. */
html.playing, html.playing body { background: var(--table); touch-action: none; overflow: hidden; -webkit-user-select: none; user-select: none; }
#table[hidden], #panel[hidden], #form[hidden], #paste[hidden], #sideways[hidden] { display: none; }
/* viewport-fit=cover (index.html): the felt reaches under the notch and the home bar, full screen when added to the home screen;
   the join card and the turn-sideways words keep inside the safe area. */
#panel { position: fixed; inset: 0; margin: auto; width: min(34rem, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); height: fit-content; max-height: calc(100dvh - 1rem);
  overflow: auto; background: var(--cream); border: 3px solid var(--ink); border-radius: 1.2rem; padding: .8rem 1.2rem;
  touch-action: manipulation; cursor: text; }
h1 { margin: 0 0 .3rem; color: var(--red); font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; }
#status { margin: .2rem 0 .5rem; }
#form { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; }
#name { display: block; width: 100%; min-height: 3.4rem; font: inherit; font-size: 1.5rem; line-height: 1.2; padding: .5rem .9rem;
  border: 3px solid var(--ink); border-radius: .7rem; background: #fff; color: var(--ink); }
#name:focus { outline: 4px solid var(--gold); outline-offset: 1px; }
#join { display: block; width: 100%; min-height: 3.4rem; font: inherit; font-size: 1.5rem; font-weight: 700; padding: .5rem 1.3rem;
  color: var(--cream); background: var(--ink); border: 3px solid var(--gold); border-radius: .7rem; cursor: pointer; touch-action: manipulation; }
#join:active { background: #2c335e; }
#error { margin: 0; color: var(--red); min-height: 1.2em; }
#error:empty { min-height: 0; }
#names { margin: .4rem 0 0; font: inherit; white-space: pre-line; }
/* The paste box, for a new room's invite link: as big as the name box, for a thumb. */
#paste { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
#link { flex: 1 1 14rem; min-width: 0; min-height: 3.4rem; font: inherit; font-size: 1.1rem; padding: .5rem .9rem;
  border: 3px solid var(--ink); border-radius: .7rem; background: #fff; color: var(--ink); }
#link:focus { outline: 4px solid var(--gold); outline-offset: 1px; }
#go { flex: 0 0 auto; min-width: 7.5rem; min-height: 3.4rem; font: inherit; font-size: 1.5rem; font-weight: 700; padding: .5rem 1.3rem;
  color: var(--cream); background: var(--ink); border: 3px solid var(--gold); border-radius: .7rem; cursor: pointer; touch-action: manipulation; }
#paste-error { flex-basis: 100%; margin: 0; color: var(--red); }
#paste-error:empty { display: none; }
/* A phone held sideways is short (an iPhone's 844 x 390): the box and Join side by side, the box taking the row. */
@media (orientation: landscape) and (max-height: 500px) {
  #form { flex-direction: row; flex-wrap: wrap; }
  #name { flex: 1 1 14rem; width: auto; }
  #join { flex: 0 0 auto; width: auto; min-width: 7.5rem; }
  #error { flex-basis: 100%; }
}
/* Typing: the card at the top of what the keyboard leaves, the title off, so the box and Join both show. */
body.typing #panel { inset: auto 0 auto 0; top: calc(var(--vv-top, 0px) + .4rem); margin: 0 auto;
  max-height: calc(var(--vv-height, 100dvh) - .8rem); padding: .5rem .9rem; }
body.typing h1, body.typing #names { display: none; }
body.typing #status { margin: 0 0 .4rem; font-size: 1rem; }
#sideways { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--felt); color: var(--cream); font-size: 1.5rem;
  padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left)); }
@media (orientation: portrait) { #sideways:not([hidden]) { display: flex; } }