/* mobile.css: v8 touch controls and the phone layout (CONTRACT-v8, builder "mobile").
   Loaded by js/touch.js, which also puts .rc-touch on <html>; every rule here is scoped to it so
   desktop is untouched. Line-art matches the broadcast HUD: thin white strokes on near-transparent
   fills, Chakra Petch labels. Targets 390x844 portrait and 844x390 landscape (plus the shorter
   in-browser viewports). */

html.rc-touch, html.rc-touch body {
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
html.rc-touch #game { touch-action: none; }
html.rc-touch .rc-lobby { touch-action: pan-y; }
html.rc-touch .rc-board, html.rc-touch .rc-board * { touch-action: pan-y; }
html.rc-touch input, html.rc-touch textarea { -webkit-user-select: text; user-select: text; font-size: max(16px, 1em); } /* 16px stops iOS zooming into a focused field */

/* ------------------------------------------------------------------ touch layer */
.tc {
  --tc-w: #f4f7fb;
  --tc-line: rgba(244, 247, 251, 0.62);
  --tc-faint: rgba(244, 247, 251, 0.22);
  --tc-fill: rgba(10, 12, 16, 0.18);
  --tc-on: rgba(244, 247, 251, 0.26);
  --tc-red: #ff3b3b;
  --tc-sb: env(safe-area-inset-bottom, 0px);
  --tc-sl: env(safe-area-inset-left, 0px);
  --tc-sr: env(safe-area-inset-right, 0px);
  --tc-jump: clamp(70px, 21vmin, 92px);
  --tc-act: clamp(56px, 16vmin, 70px);
  --tc-ring: clamp(108px, 32vmin, 140px);
  position: fixed; inset: 0; z-index: 35; pointer-events: none;
  font-family: 'Chakra Petch', 'Rajdhani', system-ui, sans-serif;
  color: var(--tc-w);
  transition: opacity .25s ease;
  touch-action: none;
}
.tc.tc-off { opacity: 0; }
.tc.tc-off * { pointer-events: none !important; }

/* stick zone: left half of the screen below the top HUD column */
.tc-zone {
  position: absolute; left: 0; bottom: 0; width: 50%; top: 34%;
  pointer-events: auto; touch-action: none;
}
.tc-ring {
  position: absolute;
  left: calc(22px + var(--tc-sl)); bottom: calc(26px + var(--tc-sb));
  width: var(--tc-ring); height: var(--tc-ring); border-radius: 50%;
  border: 1.2px solid var(--tc-faint);
  background: radial-gradient(circle, rgba(244, 247, 251, 0.04) 0 55%, rgba(10, 12, 16, 0.16) 56% 100%);
  transition: border-color .15s, opacity .2s;
  opacity: .8;
}
.tc-ring::before { /* tick marks: up / down / left / right */
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background:
    linear-gradient(var(--tc-faint), var(--tc-faint)) 50% 0 / 1px 8px no-repeat,
    linear-gradient(var(--tc-faint), var(--tc-faint)) 50% 100% / 1px 8px no-repeat,
    linear-gradient(var(--tc-faint), var(--tc-faint)) 0 50% / 8px 1px no-repeat,
    linear-gradient(var(--tc-faint), var(--tc-faint)) 100% 50% / 8px 1px no-repeat;
}
.tc-ring.tc-live { border-color: var(--tc-line); opacity: 1; transition: border-color .15s; }
.tc-knob {
  position: absolute; left: 50%; top: 50%;
  width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%;
  border: 1.4px solid var(--tc-line);
  background: rgba(244, 247, 251, 0.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}
.tc-ring.tc-live .tc-knob { border-color: var(--tc-w); background: rgba(244, 247, 251, 0.2); }
.tc-ring-lbl {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: center;
  font-size: 9px; letter-spacing: .22em; color: rgba(244, 247, 251, 0.45);
}
.tc-ring.tc-live .tc-ring-lbl { opacity: 0; }

/* action buttons, bottom right in a thumb arc */
.tc-btns {
  position: absolute; right: 0; bottom: 0;
  width: calc(var(--tc-jump) + var(--tc-act) + 64px + var(--tc-sr));
  height: calc(var(--tc-jump) + var(--tc-act) + 56px + var(--tc-sb));
  pointer-events: auto; touch-action: none;
}
.tc-btn {
  position: absolute; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1.2px solid var(--tc-line);
  background: var(--tc-fill);
  font-size: 9.5px; font-weight: 500; letter-spacing: .16em; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  transition: background .08s, border-color .08s, transform .08s;
}
.tc-btn svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-btn span { padding-left: .16em; }
.tc-btn.tc-on { background: var(--tc-on); border-color: var(--tc-w); transform: scale(.94); }
.tc-jump {
  width: var(--tc-jump); height: var(--tc-jump);
  right: calc(20px + var(--tc-sr)); bottom: calc(24px + var(--tc-sb));
  border-width: 1.6px; font-size: 11px;
}
.tc-jump::after { /* red underline accent, like the broadcast lower thirds */
  content: ''; position: absolute; left: 32%; right: 32%; bottom: 17%; height: 2px; background: var(--tc-red); opacity: .9;
}
.tc-thrust {
  width: var(--tc-act); height: var(--tc-act);
  right: calc(20px + var(--tc-jump) + 16px + var(--tc-sr)); bottom: calc(16px + var(--tc-sb));
}
.tc-boost {
  width: var(--tc-act); height: var(--tc-act);
  right: calc(28px + var(--tc-sr)); bottom: calc(24px + var(--tc-jump) + 16px + var(--tc-sb));
}

/* utility row (lives in the HUD's top-left column) */
.tc-row {
  display: flex; gap: 5px; align-self: flex-start; pointer-events: auto;
}
.rc-hud .tc-row, .rc-hud .tc-row * { pointer-events: auto; }
.tc-sm {
  -webkit-appearance: none; appearance: none;
  width: 40px; height: 40px; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(244, 247, 251, 0.42); border-radius: 3px;
  background: rgba(8, 10, 14, 0.36);
  color: #f4f7fb; font: 500 7.5px 'Chakra Petch', 'Rajdhani', system-ui, sans-serif; letter-spacing: .14em;
  touch-action: manipulation;
}
.tc-sm svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tc-sm:active { background: rgba(244, 247, 251, 0.24); border-color: #f4f7fb; }
.tc-sm:focus { outline: none; }
.tc-sm:focus-visible { outline: 1px solid #ff3b3b; }

/* orientation hint */
.tc-rotate {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 18px 12px;
  background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(244, 247, 251, 0.35);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  pointer-events: auto; transition: opacity .35s ease;
}
.tc-rotate svg { width: 44px; height: 44px; fill: none; stroke: #f4f7fb; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  animation: tc-rot 2.4s ease-in-out infinite; }
@keyframes tc-rot { 0%, 25% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.tc-rotate.tc-gone { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ HUD on touch (both orientations) */
/* stats chip: online count and room only (fps, gfx and music are keyboard-era debug readouts) */
html.rc-touch .rc-stats > :nth-child(n+3):nth-child(-n+8) { display: none; }
html.rc-touch .rc-stats { padding: 5px 10px; font-size: 10.5px; }
html.rc-touch .rc-topleft { gap: 8px; }
html.rc-touch .rc-feed-item { font-size: 12.5px; padding: 3px 12px 3px 10px; }
html.rc-touch .rc-feed { max-width: 62vw; }
html.rc-touch .rc-chat-hint, html.rc-touch .rc-mb-head kbd { display: none; }
html.rc-touch .rc-spectate { bottom: auto; top: calc(var(--gut) + var(--safe-t) + 150px); }
/* chat: the log sits in the left column, the open field moves to the top so the keyboard never hides it */
html.rc-touch .rc-game .rc-chat,
html.rc-touch.rc-touch .rc-look-broadcast .rc-game .rc-chat {
  bottom: auto; top: calc(var(--safe-t) + 34%); width: min(300px, 62vw); min-width: 0;
}
html.rc-touch .rc-chat-log { max-height: 84px; }
html.rc-touch.rc-touch .rc-hud .rc-game .rc-chat.rc-open {
  top: calc(var(--safe-t) + 8px); left: calc(8px + var(--safe-l)); right: calc(8px + var(--safe-r)); width: auto;
  z-index: 60;
}
html.rc-touch.rc-touch .rc-hud .rc-game .rc-chat.rc-open .rc-chat-log { display: none; }
html.rc-touch.rc-touch .rc-hud .rc-game .rc-chat.rc-open .rc-chat-form { background: rgba(4, 5, 8, 0.96); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7); }
html.rc-touch.rc-touch .rc-hud .rc-game .rc-chat.rc-open .rc-chat-input { background: rgba(4, 5, 8, 0.96); color: #f4f7fb; }
/* board: full width, scrollable, close button easy to hit */
html.rc-touch .rc-board-inner { max-height: calc(100% - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.rc-touch .rc-board-close { min-height: 40px; min-width: 72px; }
html.rc-touch .rc-brow { min-height: 40px; }
/* the lobby: keyboard controls card does not apply */
html.rc-touch .rc-lobby .rc-controls, html.rc-touch .rc-lobby .rc-subtitle-new { display: none; }
html.rc-touch .bh-scrub { display: none; }
html.rc-touch .rc-lobby-inner { grid-template-columns: 1fr; max-width: 560px; }

/* ------------------------------------------------------------------ portrait */
@media (orientation: portrait) {
  html.rc-touch .tc-zone { top: 46%; }
  /* broadcast gauges ride just above the thumbs, smaller */
  html.rc-touch .bhud { font-size: clamp(5px, 1.5vw, 8px); }
  html.rc-touch .bh-cluster { bottom: calc(var(--tc-pb, 196px) + env(safe-area-inset-bottom, 0px)); gap: .8em; }
  html.rc-touch .bh-left { left: 1.2em; }
  html.rc-touch .bh-right { right: 1.2em; }
  html.rc-touch .bh-shade { height: calc(var(--tc-pb, 196px) + 120px); }
  html.rc-touch .rc-game .rc-score {
    top: auto; left: auto; right: calc(var(--gut) + var(--safe-r)); transform: none;
    bottom: calc(var(--safe-b) + var(--tc-pb, 196px) + 96px);
  }
  html.rc-touch .rc-game .rc-round {
    top: auto; left: auto; right: calc(var(--gut) + var(--safe-r)); transform: none;
    bottom: calc(var(--safe-b) + var(--tc-pb, 196px) + 128px);
    max-width: calc(100vw - 2 * var(--gut)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.rc-touch .rc-look-broadcast .rc-game .rc-center-hint,
  html.rc-touch .rc-game .rc-center-hint { top: calc(var(--safe-t) + 27%); bottom: auto; }
  html.rc-touch .rc-look-broadcast .rc-game .rc-toast,
  html.rc-touch .rc-game .rc-toast { top: calc(var(--safe-t) + 37%); }
  html.rc-touch .rc-game .rc-chat,
  html.rc-touch.rc-touch .rc-look-broadcast .rc-game .rc-chat { top: calc(var(--safe-t) + 30%); }
  html.rc-touch .rc-cling { top: 40%; }
  /* neon look speedo: above the thumbs too */
  html.rc-touch .rc-cluster { bottom: calc(var(--safe-b) + var(--tc-pb, 196px)); transform: scale(.78); transform-origin: 100% 100%; }
}
@media (orientation: portrait) and (max-height: 700px) {
  html.rc-touch { --tc-pb: 178px; }
  html.rc-touch .tc { --tc-jump: 72px; --tc-act: 56px; --tc-ring: 112px; }
  html.rc-touch .rc-game .rc-minimap-wrap { width: 96px; height: 96px; }
  html.rc-touch .rc-game .rc-miniboard { top: calc(var(--gut) + var(--safe-t) + 104px); width: 136px; }
  html.rc-touch .rc-mb-list .rc-mb-row:nth-child(n+4) { display: none; }
}

/* ------------------------------------------------------------------ landscape */
@media (orientation: landscape) {
  html.rc-touch .tc-zone { top: 30%; width: 42%; }
  /* gauges sit centre-bottom between the stick and the buttons */
  html.rc-touch .bhud { font-size: clamp(5px, 1.3vh + .25vw, 8px); }
  html.rc-touch .bh-cluster { bottom: calc(2.2em + env(safe-area-inset-bottom, 0px)); gap: .9em; }
  html.rc-touch .bh-left { left: auto; right: calc(50% + .6em); }
  html.rc-touch .bh-right { right: auto; left: calc(50% + .6em); }
  html.rc-touch .bh-shade { height: 18em; }
  html.rc-touch .rc-game .rc-score { top: calc(var(--gut) + var(--safe-t)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
  html.rc-touch .rc-game .rc-round {
    top: calc(var(--gut) + var(--safe-t) + 44px); bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
    max-width: calc(100vw - 2 * var(--gut) - 2 * 236px - var(--safe-l) - var(--safe-r));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.rc-touch .rc-game .rc-miniboard { display: none; } /* BOARD button opens the full board */
  html.rc-touch .rc-game .rc-chat,
  html.rc-touch.rc-touch .rc-look-broadcast .rc-game .rc-chat { top: calc(var(--safe-t) + 46%); width: min(280px, 34vw); }
  html.rc-touch .rc-chat-log { max-height: 64px; }
  html.rc-touch .rc-feed { max-width: 36vw; }
  html.rc-touch .rc-look-broadcast .rc-game .rc-toast,
  html.rc-touch .rc-game .rc-toast { top: calc(var(--safe-t) + 28%); }
  html.rc-touch .rc-cling { top: 26%; }
  html.rc-touch .rc-cluster { display: none; } /* neon speedo: no room beside the thumbs; the stats stay in the broadcast gauges */
  html.rc-touch .rc-spectate { top: auto; bottom: calc(var(--safe-b) + 12px); }
  html.rc-touch .tc-rotate { display: none; }
}
@media (orientation: landscape) and (max-height: 430px) {
  html.rc-touch .rc-game .rc-minimap-wrap { width: 92px; height: 92px; }
  html.rc-touch .tc { --tc-jump: 76px; --tc-act: 58px; --tc-ring: 118px; }
  html.rc-touch .rc-feed-item:nth-child(n+3) { display: none; }
}

/* ------------------------------------------------------------------ lobby on phones */
/* the first screen a link click lands on: callsign, paint and JACK IN above the fold */
@media (orientation: portrait) and (max-width: 520px) {
  html.rc-touch .rc-lobby { align-items: flex-start; }
  html.rc-touch .rc-kicker { font-size: 10px; letter-spacing: .2em; }
  html.rc-touch .rc-title { font-size: clamp(34px, 11.5vw, 50px); margin: 10px 0 6px; }
  html.rc-touch .rc-subtitle { margin: 6px 0 4px; font-size: 16px; }
  html.rc-touch .rc-neonline { margin-bottom: 12px; }
  html.rc-touch .rc-form { gap: 12px; }
  html.rc-touch .rc-input { padding-top: 10px; padding-bottom: 10px; }
  html.rc-touch .rc-swatch { width: 40px; height: 40px; }
  html.rc-touch .rc-play { min-height: 54px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  html.rc-touch .rc-lobby { align-items: flex-start; padding-top: calc(10px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b)); }
  html.rc-touch .rc-lobby-inner { max-width: 100%; }
  html.rc-touch .rc-brand {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 24px; align-items: start;
  }
  html.rc-touch .rc-brand > .rc-kicker { grid-column: 1; font-size: 9px; letter-spacing: .2em; }
  html.rc-touch .rc-brand > .rc-title { grid-column: 1; font-size: clamp(34px, 11vh, 50px); margin: 6px 0 4px; }
  html.rc-touch .rc-brand > .rc-subtitle { grid-column: 1; margin: 4px 0; font-size: 14px; }
  html.rc-touch .rc-brand > .rc-neonline { display: none; }
  html.rc-touch .rc-brand > .rc-form { grid-column: 2; grid-row: 1 / span 5; gap: 8px; }
  html.rc-touch .rc-brand > .rc-room { grid-column: 1; margin-top: 6px; }
  html.rc-touch .rc-form .rc-label { margin-bottom: 4px; }
  html.rc-touch .rc-input { padding-top: 7px; padding-bottom: 7px; }
  html.rc-touch .rc-swatch { width: 34px; height: 34px; }
  html.rc-touch .rc-swatch-name { display: none; }
  html.rc-touch .rc-play { min-height: 48px; }
  html.rc-touch .rc-play-alt { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
}

/* integrator: the round line is a flex row, so ellipsis has to live on the note span, not the row */
html.rc-touch .rc-game .rc-round-mode,
html.rc-touch .rc-game .rc-round-time { flex-shrink: 0; }
html.rc-touch .rc-game .rc-round-note { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* integrator: the clip toast sat on top of the feed lines and the minimap in portrait; drop it below the mini leaderboard */
@media (orientation: portrait) {
  html.rc-touch .rcr-toast { top: calc(env(safe-area-inset-top, 0px) + 190px); }
}