/* The chrome is deliberately quiet. Everything that matters happens in the room, and the one
   piece of UI allowed to shout is the tick - the tactical watch everybody in the group is
   reading off, and the number every plan is written in. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --ink: #E8ECF4;
  --dim: rgba(232, 236, 244, .56);
  --faint: rgba(232, 236, 244, .30);
  --panel: #1A1F29;
  --panel-2: #212734;
  --line: rgba(232, 236, 244, .14);
  --amber: #FFC838;
  --green: #4ECB71;
  --red: #FF6B6B;
  --violet: #A96BFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: #0A0D13;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex; justify-content: center;
}

#stage {
  position: relative;
  width: min(100vw, 900px);
  height: 100dvh; max-height: 100dvh;
  overflow: hidden;
  background: #10141C;
}
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- HUD ---------------- */
#hud {
  position: absolute; top: max(10px, var(--safe-top)); left: 0; right: 0;
  padding: 0 12px; z-index: 5;
  display: flex; align-items: flex-start; gap: 10px;
  pointer-events: none;
}
#hud button { pointer-events: auto; }
.watch {
  background: rgba(10,14,20,.72); border: 1px solid var(--line); border-radius: 12px;
  padding: 5px 12px 6px; text-align: center; flex: none; backdrop-filter: blur(6px);
}
.watch b { display: block; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.watch i { display: block; font-style: normal; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
.hudmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.roomname { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster { display: flex; gap: 5px; flex-wrap: wrap; }
.pip {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  background: rgba(10,14,20,.7); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px 3px 5px; font-size: 11px; font-weight: 700; color: var(--dim);
  font-family: inherit;
}
.pip i { width: 9px; height: 9px; border-radius: 3px; display: block; font-style: normal; }
.pip.now { color: var(--ink); border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.pip.out { color: var(--green); }
.pip.dead { color: var(--red); text-decoration: line-through; }
.pip.pending { opacity: .5; }
.hudright { display: flex; gap: 6px; flex: none; }
.ib {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  background: rgba(10,14,20,.72); border: 1px solid var(--line); color: var(--ink);
  font-size: 15px; line-height: 1; font-family: inherit;
}
.ib:active { transform: translateY(1px); }

/* the one line of text that tells you what this moment is */
.prompt {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(14px, var(--safe-bottom)) + 158px);
  z-index: 6; max-width: min(92%, 460px); text-align: center;
  background: rgba(10,14,20,.82); border: 1px solid var(--line); border-radius: 14px;
  padding: 9px 15px; font-size: 13.5px; line-height: 1.45; font-weight: 600;
  backdrop-filter: blur(6px);
}
.prompt b { color: var(--amber); }
.prompt .keys { display: block; margin-top: 5px; font-size: 11.5px; color: var(--dim); font-weight: 700; }

/* ---------------- the stick ---------------- */
/* The whole lower band is the control. A five-button pad was right when a press was one square;
   with continuous movement you cannot hold a diagonal on one, and every direction that is not
   one of four is unreachable. Press anywhere, drag, and the vector is the direction. */
.pad {
  position: absolute; left: 0; right: 0; bottom: 0; height: 168px; z-index: 6;
  touch-action: none; cursor: grab;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: max(10px, var(--safe-bottom));
}
.pad:active { cursor: grabbing; }
.pad .hint {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  pointer-events: none; transition: opacity .15s;
}
.pad.live .hint { opacity: 0; }
.pad .ring, .pad .knob { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .12s; }
.pad .ring {
  left: var(--ox); top: var(--oy); width: 106px; height: 106px; margin: -53px 0 0 -53px;
  border: 2px solid rgba(232,236,244,.20); background: rgba(10,14,20,.34);
}
.pad .knob {
  left: var(--sx); top: var(--sy); width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background: rgba(232,236,244,.82); box-shadow: 0 0 18px rgba(255,255,255,.28);
}
.pad.live .ring, .pad.live .knob { opacity: 1; }

/* ---------------- screens ---------------- */
.screen {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  padding: max(18px, var(--safe-top)) 20px max(18px, var(--safe-bottom));
  background: #10141C;
}
.screen.modal { background: rgba(6,9,14,.78); align-items: center; justify-content: center; backdrop-filter: blur(3px); }

#title { align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(120% 90% at 50% 32%, #1E2634 0%, #0C1017 68%); }
.titlewrap { max-width: 420px; }
#title h1 { font-size: clamp(30px, 9vw, 48px); letter-spacing: .18em; font-weight: 800; }
.tag { margin-top: 14px; color: var(--dim); font-size: 14px; line-height: 1.6; font-weight: 600; }
.menu { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.foot { margin-top: 22px; font-size: 11.5px; color: var(--faint); font-weight: 600; }

/* A sheet is a head that stays, a body that scrolls and an action that is pinned. The pinned
   action is not a style choice - a primary button that can be pushed off the bottom by content
   is a bug, and it is one this codebase's sibling shipped. */
.sheet { gap: 12px; }
.head { display: flex; align-items: center; gap: 12px; flex: none; }
.head h2 { font-size: 21px; font-weight: 700; flex: 1; letter-spacing: .02em; }
.back {
  width: 36px; height: 36px; flex: none; border-radius: 11px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 20px; font-family: inherit;
}
.grouptag { text-align: right; min-width: 54px; }
.grouptag b { display: block; font-size: 20px; line-height: 1; color: var(--amber); }
.grouptag i { font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; }
.body > * { flex: none; }
.actions { flex: none; display: flex; flex-direction: column; gap: 8px; }

.legline { color: var(--dim); font-size: 13.5px; line-height: 1.55; font-weight: 600; }
.nodes { display: flex; flex-wrap: wrap; gap: 7px; }
.node {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--faint);
}
.node.done { background: #1B3326; border-color: rgba(78,203,113,.5); color: var(--green); }
.node.here { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 0 2px rgba(255,200,56,.18); }
.node.legbreak { margin-left: 14px; }
.stats { display: flex; gap: 24px; padding-top: 4px; }
.stats b { display: block; font-size: 20px; }
.stats span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

.note { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.note b { display: block; font-size: 14px; margin-bottom: 4px; }
.note span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--dim); font-weight: 600; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px; width: min(100%, 400px); }
.card h2 { font-size: 22px; }
.card p { margin-top: 7px; color: var(--dim); font-size: 13px; line-height: 1.55; font-weight: 600; }
.resroster { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.resrow { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
.resrow i { width: 10px; height: 10px; border-radius: 3px; font-style: normal; flex: none; }
.resrow span { margin-left: auto; font-size: 11.5px; color: var(--dim); }
.row { margin-top: 18px; display: flex; gap: 9px; }
.row .big { flex: 1; }

.big {
  font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: #10141C; background: var(--amber); border: none; border-radius: 13px;
  padding: 13px 22px; width: 100%; letter-spacing: .01em;
}
.big:active { transform: translateY(2px); }
.ghost {
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  color: var(--ink); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 13px; padding: 11px 20px; width: 100%;
}
.ghost:active { transform: translateY(2px); }

#toast {
  position: absolute; left: 50%; transform: translateX(-50%); top: 96px; z-index: 30;
  background: rgba(10,14,20,.92); border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700;
}

@media (max-width: 380px) {
  .pad { height: 148px; }
  .prompt { bottom: calc(max(14px, var(--safe-bottom)) + 138px); font-size: 12.5px; }
}