:root {
  /* AwaSpace base look (v85): navy ground, navy cards, amber accent. These
     were still the old plum values, so anything not recoloured by hand
     (e.g. the Home chat peek) showed plum. */
  --bg: #182036;
  --bg-glow: #232b42;
  --surface: #1f2639;
  --surface-2: #232b42;
  --ink: #f6f1fb;
  --ink-dim: #a9b1c9;
  --accent: #ffb42e;
  --accent-soft: #ffc85c;
  /* Same color as --accent, as a bare "r, g, b" triplet -- for tinted
     backgrounds (a system-event chip, an active toggle pill) that need a
     translucent wash of the accent color rather than a solid fill, which
     rgba() can't build directly from a hex custom property. */
  --accent-rgb: 255, 180, 46;
  /* Text/icon color for anything sitting ON an accent-colored background
     (a solid button, your own sent bubble, an active tab). Onyx's accent is
     LIGHT (it has to be, to show up against a dark surface), which flips
     what "readable text on it" means -- this token is what lets every
     theme get that right instead of every accent surface just assuming
     white always works. */
  --on-accent: #182036;
  /* An RGB triplet (no rgb()/# wrapper) for translucent overlay effects
     drawn on top of an accent surface -- e.g. the voice-note player inside
     your own message bubble -- so those can flip white-on-dark/dark-on-light
     the same way --on-accent does. */
  --on-accent-overlay-rgb: 24, 32, 54;
  --border: #2c3550;
  --online: #35d08a;
  --shadow: 0 18px 42px -20px rgba(8, 5, 18, 0.65);
  --error: #ff7a6b;
  --card-highlight-rgb: 255, 211, 67;
}

/* Per-device theme (Settings -> Theme). Each of you picks your own on your
   own phone -- it's saved to localStorage, never synced. A theme used to
   only ever recolor --accent/--accent-soft (buttons, active tabs, your own
   sent bubbles) while every background/surface/text color stayed the exact
   same regardless of theme -- which is why picking a theme barely changed
   how the app actually looked, and why it all read as "too much white"
   whichever one was picked. Every theme below now recolors the whole
   surface stack, not just the accent -- and picks --on-accent (and its
   overlay-rgb twin) to whatever actually reads clearly against ITS OWN
   accent, rather than assuming white always works. --online stays close to
   the same green in every theme on purpose: "online" has one universal
   meaning in pretty much every chat app there is, and re-skinning it per
   theme would make it a worse signal, not a nicer one. "AWA" is now the
   default look and lives in :root above; "forest" -- the original cream
   look this app launched with -- is preserved below exactly as it was, so
   it's still there as a legacy option in Settings and nothing is lost. */
html[data-theme="forest"] {
  --bg: #f2efe6;
  --bg-glow: #eef1e9;
  --surface: #fffdf8;
  --surface-2: #eae6d8;
  --ink: #1b2a20;
  --ink-dim: #5c6b5d;
  --accent: #124330;
  --accent-soft: #1f8f5e;
  --accent-rgb: 18, 67, 48;
  --on-accent: #ffffff;
  --on-accent-overlay-rgb: 255, 255, 255;
  --border: #ddd6c2;
  --online: #1f8f5e;
  --shadow: 0 16px 34px -20px rgba(20, 26, 18, 0.26);
  --error: #c0392b;
  --card-highlight-rgb: 255, 211, 67;
}
html[data-theme="onyx"] {
  --bg: #111214;
  --bg-glow: #202024;
  --surface: #1b1b1f;
  --surface-2: #29292e;
  --ink: #f4f0ea;
  --ink-dim: #aaa39b;
  --accent: #eadbc8;
  --accent-soft: #c7a987;
  --accent-rgb: 234, 219, 200;
  --on-accent: #1a1714;
  --on-accent-overlay-rgb: 26, 23, 20;
  --border: #39383a;
  --shadow: 0 18px 42px -20px rgba(0, 0, 0, 0.72);
  --card-highlight-rgb: 234, 219, 200;
}
html[data-theme="blossom"] {
  --bg: #f3e4e9;
  --bg-glow: #ead0da;
  --surface: #fff8fa;
  --surface-2: #e9cbd5;
  --ink: #321b25;
  --ink-dim: #745261;
  --accent: #7c294b;
  --accent-soft: #b95a79;
  --accent-rgb: 124, 41, 75;
  --on-accent: #ffffff;
  --on-accent-overlay-rgb: 255, 255, 255;
  --border: #dcb3c1;
  --shadow: 0 18px 42px -22px rgba(74, 35, 51, 0.3);
  --card-highlight-rgb: 246, 187, 103;
}
html[data-theme="ember"] {
  --bg: #f1e4d2;
  --bg-glow: #e7d0b4;
  --surface: #fff9f1;
  --surface-2: #e1c9ab;
  --ink: #2d1d15;
  --ink-dim: #715849;
  --accent: #5a3424;
  --accent-soft: #a06b4d;
  --accent-rgb: 90, 52, 36;
  --on-accent: #fffaf3;
  --on-accent-overlay-rgb: 255, 250, 243;
  --border: #d5b99d;
  --shadow: 0 18px 42px -22px rgba(61, 38, 25, 0.32);
  --card-highlight-rgb: 205, 145, 84;
}


* { box-sizing: border-box; }

/* Drops the browser's old ~300ms "wait to see if a second tap is coming"
   delay on every tap, and stops two taps landing close together in time or
   position from being read as a double-tap-to-zoom gesture -- between this
   and locking the viewport in index.html, taps should register immediately
   and nothing should visibly zoom or shift underneath a touch again. */
html, body { touch-action: manipulation; }

/* A few elements below set their own `display` (flex, etc.) for when
   they're visible, which -- since an author stylesheet always wins over
   the browser's built-in `[hidden]{display:none}` rule regardless of
   selector specificity -- was silently un-hiding them (the claim-a-wish
   box, the Sync Check form/reveal) even while the `hidden` attribute was
   set. This makes `hidden` win no matter what else targets the element. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(120% 100% at 50% -10%, var(--bg-glow) 0%, var(--bg) 55%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 3rem 1.25rem 4rem;
}

.stage { width: 100%; max-width: 640px; }

.brand-mark { display: block; margin: 0 auto 1.2rem; width: 30px; height: 30px; }

/* Wraps the brand-mark SVG everywhere it might instead show the other
   person's uploaded photo (Home contact row, chat topbar, chat info panel)
   -- applyOtherAvatar()/otherAvatarHtml() in main.js swap the contents,
   these rules just keep whichever one's inside sized the same either way. */
.avatar-slot { display: inline-flex; flex-shrink: 0; }
.avatar-photo { display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.chat-info-header .avatar-photo { width: 44px; height: 44px; }

header.top { text-align: center; padding-bottom: 1.2rem; }

.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 0.9rem;
}

h1 {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  margin: 0 0 0.6rem;
  color: var(--ink);
}

.sub { color: var(--ink-dim); font-size: 0.96rem; max-width: 32em; margin: 0 auto; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.dot.online { background: var(--online); box-shadow: 0 0 8px var(--online); }

.notif-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: -0.6rem 0 0.4rem; }
.notif-row .toggle-pill { margin-top: 0; font-size: 0.76rem; text-align: center; }
.notif-hint { text-align: center; font-size: 0.72rem; color: var(--ink-dim); max-width: 30em; margin: 0 auto 1.4rem; }

/* --- Settings: gear button (now a plain topbar icon) + slide-in overlay --- */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  justify-content: flex-end;
  background: rgba(10, 4, 8, 0.72);
}
.settings-panel {
  width: 100%;
  max-width: 22em;
  height: 100%;
  overflow-y: auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: max(1.4rem, env(safe-area-inset-top)) 1.3rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-panel-title {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0;
  color: var(--ink);
}
.settings-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: -0.3rem -0.3rem 0 0;
}
.settings-section {
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.settings-section:first-of-type { border-top: none; padding-top: 0; }
.settings-section-title {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}
.settings-section .notif-row { justify-content: flex-start; margin: 0; }
.settings-section .notif-hint { text-align: left; margin: 0; max-width: none; }
.settings-section .toggle-pill { margin-top: 0; }

/* Your own photo: shows ONLY here, never anywhere else in your own view --
   see main.js's DP section for why (the other person sees it everywhere
   their view shows your identity; you see this preview and nothing more). */
.dp-row { display: flex; align-items: center; gap: 0.9rem; }
.dp-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dp-preview .avatar-photo { width: 64px; height: 64px; }
.dp-preview .brand-mark { width: 32px; height: 32px; margin: 0; }
.dp-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.settings-section .footnote { text-align: left; margin-top: 0; }

/* The stylized game-avatar gallery -- a grid of tappable character
   options, same idea as the theme swatches below but each one previews
   the actual character instead of a color dot. */
.avatar-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.6rem;
  padding-top: 0.2rem;
}
.avatar-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0.35rem 0.2rem;
  cursor: pointer;
}
.avatar-pick-btn .game-avatar { width: 48px; height: 48px; border-radius: 50%; }
.avatar-pick-label { font-size: 0.66rem; color: var(--ink-dim); }
.avatar-pick-btn.avatar-pick-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.avatar-pick-btn.avatar-pick-selected .avatar-pick-label { color: var(--ink); font-weight: 700; }
.avatar-pick-btn:active { transform: scale(0.95); }

/* Base dot shared by every per-area "needs you" indicator -- each Home
   game card (.home-card-badge below) just repositions/resizes this same
   base rather than redefining it. */
.tab-btn-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0483e;
  border: 1.5px solid var(--surface);
}

.gate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 2.4rem 2rem;
  text-align: center;
}

.gate input[type="password"], .gate input[type="text"] {
  width: 100%;
  font-size: max(1.05rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 1.2rem 0;
  text-align: center;
}

.gate input:focus-visible { outline: 2px solid var(--accent-soft); }

.name-pick {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 1.4rem;
}

.waiting-text {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.88rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent-soft); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.btn-solid {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
  box-shadow: 0 14px 26px -12px rgba(var(--accent-rgb), 0.45);
}
.btn-solid:hover { transform: translateY(-1px); }
.btn-solid:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-solid:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

.toggle-pill {
  font-size: 0.78rem;
  padding: 0.4rem 0.8rem;
  margin-top: 0.7rem;
}
.toggle-pill.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}

.tapback-bar {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.5rem;
  box-shadow: var(--shadow);
  min-width: 190px;
}
.tapback-emojis {
  display: flex;
  gap: 0.3rem;
  justify-content: space-between;
  padding: 0 0.1rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.tapback-emojis button {
  font-size: 1.3rem;
  line-height: 1;
  background: transparent;
  border: none;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.tapback-emojis button:hover { transform: scale(1.25); }
.tapback-more {
  font-size: 1.1rem !important;
  font-weight: 800;
  color: var(--ink-dim);
  border: 1px dashed var(--border) !important;
  border-radius: 999px;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.tapback-more.is-open { color: #182036 !important; background: #ffb42e !important; border-color: #ffb42e !important; }
/* v85: the + opens this grid inside the menu (the actions hide while it shows). */
.tapback-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0.45rem 0.1rem 0.1rem; max-height: 212px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.tapback-grid[hidden], .tapback-actions[hidden] { display: none !important; }
.tapback-grid button { font-size: 1.45rem; line-height: 1; background: transparent; border: 0; border-radius: 10px; padding: 0.32rem 0; cursor: pointer; }
.tapback-grid button:active { background: #2c3550; transform: scale(1.15); }
.tapback-actions { display: flex; flex-direction: column; gap: 0.05rem; }
.tapback-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.55rem 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  border-radius: 10px;
}
.tapback-action:hover { background: var(--surface); }
.tapback-action-danger { color: var(--error); }

/* Was a flat var(--ink-dim) gray, which is fine on a white "theirs"
   bubble but nearly invisible italic-on-brown inside a "mine" bubble --
   .msg.mine sets color:#fff for everything inside it, and this was
   overriding that back to a dark gray that has almost no contrast
   against the accent-colored gradient. Inheriting the bubble's own
   text color and just dimming it keeps it readable in both cases. */
.msg-deleted-text { color: inherit; opacity: 0.7; font-style: italic; }

.msg-quote { cursor: pointer; }
.msg-highlight { animation: msgHighlightPulse 1.3s ease; }
@keyframes msgHighlightPulse {
  0% { box-shadow: 0 0 0 3px var(--accent-soft); }
  75% { box-shadow: 0 0 0 3px var(--accent-soft); }
  100% { box-shadow: none; }
}

:root {
  /* Exposed so JS can read the phone's safe-area insets (notch, home
     indicator) when it clamps floating reactions and taunts on screen. */
  --awa-safe-top: env(safe-area-inset-top, 0px);
  --awa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --awa-safe-left: env(safe-area-inset-left, 0px);
  --awa-safe-right: env(safe-area-inset-right, 0px);
}
.float-emoji {
  position: fixed;
  font-size: 3.2rem;
  pointer-events: none;
  animation: float-up 1.8s ease-out forwards;
  /* Above the expanded Cinema stage (z-index 300) too -- a reaction should
     always read as landing on top of whatever's on screen. Centers itself
     on whatever `left` JS set -- a raw pixel value at the sender/receiver's
     player-tag avatar when one's on screen, or the old approximate-middle
     percentage when neither game panel is open to anchor to. */
  transform: translateX(-50%);
  z-index: 310;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4));
}
/* The copy that lands on whoever DIDN'T send the reaction -- they have no
   other cue one just arrived, so it needs to be unmissable rather than a
   small confirmation off to the side. */
.float-emoji-big {
  font-size: 6rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
/* Small name tag under a received reaction -- see spawnFloatEmoji's
   senderName param. Its own font-size (not inherited from the huge emoji
   above it) and centered under it regardless of parent alignment. */
.float-emoji-label {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
  margin-top: -0.3rem;
}
@keyframes float-up {
  0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.6); }
  15% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-140px) scale(1.1); }
}

/* --- The room: a fixed, viewport-locked app shell, not a scrolling page.
   Only the message list itself scrolls -- nothing here ever hands scroll
   back to the body, which is what made the old layout feel like it was
   "jumping around" (the page and the chat log were both scrollable at
   once, fighting each other, especially with the keyboard open on iOS). */
html.room-active, html.room-active body { height: 100%; overflow: hidden; overscroll-behavior: none; }

.room-shell {
  position: fixed;
  inset: 0;
  height: var(--chat-viewport-height, 100dvh);
  max-height: var(--chat-viewport-height, 100dvh);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.chat-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: max(0.62rem, env(safe-area-inset-top)) 0.75rem 0.58rem;
  background: var(--surface);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.topbar-left { display: flex; align-items: center; gap: 0.3rem; min-width: 0; flex: 1; }
.topbar-identity { display: flex; align-items: center; gap: 0.65rem; min-width: 0; cursor: pointer; border-radius: 10px; }
.topbar-identity:hover, .topbar-identity:focus-visible { background: var(--surface-2); }
.topbar-identity:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.topbar-identity .brand-mark { margin: 0; flex-shrink: 0; }
.topbar-text { min-width: 0; }
.topbar-name {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.topbar-status {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.72rem;
  color: var(--ink-dim);
  margin: 0.15rem 0 0;
  white-space: nowrap;
}
/* Online status is the variable-length part, so it's the one that yields
   (ellipsizing) if space is tight -- the short "Reconnecting" label next to
   it keeps its full width instead of both fighting over the same room and
   the status text getting squeezed to nothing. */
.topbar-status #onlineText { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-status .chat-conn-status { flex-shrink: 0; }
.chat-conn-status { color: var(--accent-soft); font-weight: 700; flex-shrink: 0; }

.topbar-actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.icon-btn:hover { border-color: var(--accent-soft); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0483e;
  border: 1.5px solid var(--surface-2);
}

/* --- Home: the real page one now. Chat, Cinema and Games all live one
   tap away from here instead of chat owning the whole first screen --
   see showHome()/showChat() in main.js for the navigation this drives. */
/* Home used to open with its own "Espace" wordmark + logo bar up top --
   Dale's call was that it doesn't earn its keep (you already know what app
   you're in) and it was part of what made Home feel like plain white
   chrome. Just the settings gear remains, floating at the top instead of
   sitting in its own bordered bar. */
.home-top-actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding-top: env(safe-area-inset-top);
  margin-bottom: -0.3rem;
}

.home-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0.7rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  gap: 1rem;
}

/* Tap the row for a quick peek without committing to opening the whole
   conversation -- WhatsApp/iMessage-style, see homeContactRow/homePeekPanel
   wiring in main.js. */
.home-contact-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  /* Long-pressing this row is a real gesture (opens the peek below) -- on
     touch devices that would otherwise also trigger the browser's own text
     selection + Copy/Translate callout, which reads as an outright bug. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.home-contact-row .brand-mark { margin: 0; flex-shrink: 0; }
.home-contact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.home-contact-name {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
}
.home-contact-preview {
  font-size: 0.82rem;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-contact-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex-shrink: 0; }

/* The suspended peek: a real, live slice of the actual chat, not a
   manufactured summary. Stays open once a hold reveals it -- see
   homeContactRow/homePeekPanel wiring in main.js -- until it's swiped down
   or tapped away, so it needs its own "this is draggable" affordance. */
.home-peek-panel {
  background: #1f2639;
  border: 1px solid #2c3550;
  border-radius: 16px;
  padding: 0.6rem 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  animation: home-peek-in 0.16s ease-out;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}
@keyframes home-peek-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.home-peek-handle {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0 auto;
}
.home-peek-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  text-align: center;
}
.home-peek-messages { display: flex; flex-direction: column; gap: 0.32rem; }
.home-peek-empty { margin: 0; font-size: 0.88rem; color: var(--ink-dim); text-align: center; padding: 0.4rem 0; }
.peek-msg {
  max-width: 82%;
  padding: 0.4rem 0.7rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.32;
  word-wrap: break-word;
}
.peek-msg.theirs { align-self: flex-start; background: #2c3550; color: #f5f3ff; }
.peek-msg.mine {
  align-self: flex-end;
  background: #ffb42e;
  color: #182036;
}

/* Cinema is the flagship, full-width banner on top; the four actual games
   form a 2x2 grid underneath it -- five cards read as a considered layout
   this way rather than an awkward odd-one-out in a plain 2-column grid. */
/* Espace Window: a small, intimate surface between presence and play. */
.window-card {
  position: relative; width: 100%; display: flex; align-items: center; gap: .9rem;
  margin: .35rem 0 .95rem; padding: 1rem 1rem 1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 20px; overflow: hidden; text-align: left; color: var(--ink); background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent-soft) 8%, var(--surface)));
  box-shadow: 0 10px 28px -20px var(--accent); cursor: pointer;
}
.window-card::after { content:""; position:absolute; inset:auto -30px -55px auto; width:130px; height:130px; border-radius:50%; background:color-mix(in srgb, var(--accent-soft) 13%, transparent); filter:blur(3px); }
.window-card-glow { width:38px; height:38px; flex:0 0 38px; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent-soft) 55%, transparent); box-shadow:0 0 0 7px color-mix(in srgb, var(--accent-soft) 8%, transparent), inset 0 0 18px color-mix(in srgb, var(--accent-soft) 18%, transparent); position:relative; }
.window-card-glow::after { content:""; position:absolute; width:8px; height:8px; left:14px; top:14px; border-radius:50%; background:var(--accent-soft); box-shadow:0 0 15px var(--accent-soft); }
.window-card-copy { min-width:0; display:flex; flex-direction:column; gap:.15rem; flex:1; position:relative; z-index:1; }
.window-card-kicker,.window-kicker,.window-open-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.61rem; font-weight:700; opacity:.62; }
.window-card-title { font-family:"Funnel Display",system-ui,sans-serif; font-size:1.22rem; font-weight:700; }
.window-card-sub { font-size:.72rem; opacity:.68; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.window-card-action { position:relative; z-index:1; flex:0 0 auto; padding:.45rem .7rem; border-radius:999px; background:var(--accent); color:var(--on-accent,#fff); font-size:.68rem; font-weight:700; }
.window-overlay { position:fixed; inset:0; z-index:180; display:grid; align-items:end; background:rgba(0,0,0,.38); backdrop-filter:blur(10px); }
.window-sheet { width:min(100%,560px); max-height:90vh; overflow:auto; margin:0 auto; padding:1.15rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); border-radius:26px 26px 0 0; background:var(--bg); color:var(--ink); box-shadow:0 -20px 60px -30px rgba(0,0,0,.55); }
.window-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.window-sheet h2 { margin:.15rem 0 0; font-family:"Funnel Display",system-ui,sans-serif; font-size:1.75rem; line-height:1; }
.window-intro,.window-note { font-size:.8rem; line-height:1.55; opacity:.7; }
.window-form { display:grid; gap:.85rem; margin-top:1rem; }
.window-form label { display:grid; gap:.35rem; font-size:.72rem; font-weight:700; }
.window-form input,.window-form textarea,.window-response-form textarea { width:100%; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--ink); padding:.8rem; font:inherit; outline:none; }
.window-form textarea,.window-response-form textarea { min-height:86px; resize:none; }
.window-optional { font-weight:400; opacity:.5; }
.window-share-pills { display:flex; gap:.45rem; overflow:auto; padding:.05rem 0; }
.window-share-pill { border:1px solid var(--border); background:var(--surface); color:var(--ink); padding:.55rem .75rem; border-radius:999px; white-space:nowrap; font-size:.7rem; }
.window-share-pill.is-selected { border-color:var(--accent-soft); background:color-mix(in srgb, var(--accent-soft) 13%, var(--surface)); }
.window-submit { width:100%; margin-top:.2rem; }
.window-note { text-align:center; margin:.9rem .4rem 0; font-size:.68rem; }
.window-empty-state { text-align:center; padding:2rem .5rem 1rem; }
.window-orbit { display:block; width:62px; height:62px; margin:0 auto 1rem; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent-soft) 55%, transparent); box-shadow:0 0 0 12px color-mix(in srgb, var(--accent-soft) 7%, transparent), inset 0 0 24px color-mix(in srgb, var(--accent-soft) 14%, transparent); }
.window-state-title { font-family:"Funnel Display",system-ui,sans-serif; font-size:1.45rem; font-weight:700; margin:.2rem 0; }
.window-state-sub { font-size:.78rem; opacity:.65; margin:0 0 1.1rem; }
.window-open-card,.window-moment-card { padding:1.15rem; border-radius:20px; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent-soft) 7%,var(--surface))); border:1px solid color-mix(in srgb,var(--accent) 12%,transparent); }
.window-open-card h3 { margin:.35rem 0 .4rem; font-family:"Funnel Display",system-ui,sans-serif; font-size:1.7rem; line-height:1.05; }
.window-open-sub,.window-moment-time { margin:0; font-size:.72rem; opacity:.6; }
.window-response-form { display:grid; gap:.65rem; margin-top:.8rem; }
.window-moment-text { font-size:1.05rem; line-height:1.45; margin:.55rem 0 .8rem; }
body.window-open { overflow:hidden; }

.home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-top: 0.2rem;
}
.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-height: 8.5rem;
  padding: 1rem;
  border-radius: 18px;
  border: none;
  cursor: pointer;
  color: #fff;
  text-align: left;
  box-shadow: var(--shadow);
}
.home-card-emoji { font-size: 1.8rem; }
.home-card-title {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
}
.home-card-sub { font-size: 0.74rem; opacity: 0.9; margin-top: auto; }
.home-card-cinema {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  min-height: 5rem;
  background: linear-gradient(135deg, #6a3fd6, #2c1a5e);
}
.home-card-cinema .home-card-emoji { font-size: 2.1rem; }
.home-card-cinema .home-card-sub { margin-top: 0.15rem; }
.home-card-whot { background: linear-gradient(155deg, #d68f2c, #7a4a10); }
/* An actual rendered Whot card (Star 8) instead of a generic playing-card
   emoji -- reuses whotCardFace(), the exact same markup the real game
   table draws its cards with, so this is a true match rather than a
   separate lookalike. */
.home-card-whot-art {
  position: relative;
  display: block;
  width: 100%;
  height: 132px;
  margin: -.25rem -.15rem .15rem;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,235,195,.18), transparent 38%),
    linear-gradient(145deg, rgba(93,48,18,.95), rgba(30,21,15,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -18px 30px rgba(0,0,0,.18);
}
.whot-mini-scene { position: absolute; inset: 0; display: block; }
.whot-mini-table {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 82px;
  height: 66px;
  transform: translate(-50%, -50%) rotate(-2deg);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #b97735 0%, #75411d 63%, #4a2917 100%);
  box-shadow: 0 12px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,226,177,.12);
}
.whot-mini-top-card { position: absolute; left: 31px; top: 12px; transform: rotate(5deg); z-index: 4; }
.whot-mini-top-card .whot-card-face.small { width: 34px; height: 47px; border-width: 1.2px; border-radius: 6px; box-shadow: 0 6px 9px rgba(0,0,0,.3); }
.whot-mini-top-card .whot-card-face.small .wc-shape-svg { width: 22px; height: 22px; }
.whot-mini-top-card .whot-card-face.small .wc-corner { font-size: .45rem; }
.whot-mini-top-card .whot-card-face.small .wc-corner-top { top: 3px; left: 4px; }
.whot-mini-top-card .whot-card-face.small .wc-corner-bottom { bottom: 3px; right: 4px; }
.whot-mini-pile { position: absolute; left: 13px; top: 10px; transform: rotate(-12deg); z-index: 2; }
.whot-card-back.mini-pile-back { width: 34px; height: 47px; border-radius: 6px; font-size: .43rem; box-shadow: 0 6px 9px rgba(0,0,0,.28); }
.whot-mini-hand { position: absolute; left: 50%; bottom: -9px; width: 118px; height: 64px; transform: translateX(-50%); z-index: 8; }
.whot-mini-card { position: absolute; bottom: 0; transition: transform .35s ease; }
.whot-mini-card .whot-card-face.small { width: 39px; height: 53px; border-width: 1.2px; border-radius: 7px; box-shadow: 0 8px 10px rgba(0,0,0,.28); }
.whot-mini-card .whot-card-face.small .wc-shape-svg { width: 24px; height: 24px; }
.whot-mini-card .whot-card-face.small .wc-corner { font-size: .48rem; }
.whot-mini-card .whot-card-face.small .wc-corner-top { top: 3px; left: 4px; }
.whot-mini-card .whot-card-face.small .wc-corner-bottom { bottom: 3px; right: 4px; }
.whot-mini-card.c1 { left: 0; transform: rotate(-15deg); }
.whot-mini-card.c2 { left: 24px; transform: translateY(-5px) rotate(-5deg); }
.whot-mini-card.c3 { left: 48px; transform: translateY(-6px) rotate(5deg); }
.whot-mini-card.c4 { left: 72px; transform: rotate(15deg); }
.whot-mini-opponent-hand { position: absolute; left: 50%; top: -8px; width: 72px; height: 52px; transform: translateX(-50%); z-index: 3; }
.whot-card-back.mini-back { position: absolute; width: 27px; height: 39px; border-radius: 5px; font-size: .38rem; box-shadow: 0 5px 8px rgba(0,0,0,.22); }
.whot-card-back.mini-back-1 { left: 0; transform: rotate(-15deg); }
.whot-card-back.mini-back-2 { left: 22px; transform: rotate(0deg); }
.whot-card-back.mini-back-3 { left: 44px; transform: rotate(15deg); }
.whot-mini-player { position: absolute; display: flex; align-items: center; gap: .3rem; z-index: 10; color: rgba(255,255,255,.92); font-size: .52rem; font-weight: 800; letter-spacing: .01em; }
.whot-mini-player-top { left: 9px; top: 9px; }
.whot-mini-player-bottom { right: 9px; bottom: 8px; flex-direction: row-reverse; }
.whot-mini-avatar { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(145deg, #f3bd73, #b65d38); color: #fff; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.whot-mini-player-name { text-shadow: 0 1px 5px rgba(0,0,0,.45); }
.home-card-whot .home-card-title,
.home-card-whot .home-card-sub { position: relative; z-index: 12; }
.home-card-whot .home-card-sub { color: rgba(255,255,255,.72); }
.home-card-whot-art .whot-card-face.small { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6); }
@keyframes whotMiniPlay {
  0%, 100% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(-4px) rotate(-12deg); }
}
.whot-mini-card.c1 { animation: whotMiniPlay 3.8s ease-in-out infinite; }
.whot-mini-card.c3 { animation: whotMiniPlay 4.3s ease-in-out -1.1s infinite reverse; }
.home-card-deck { background: linear-gradient(155deg, #d6486a, #7a1f38); }
.home-card-words { background: linear-gradient(155deg, #2ca58c, #0f5c46); }
/* Used to ride the theme's own accent color instead of a fixed one like
   its four siblings -- which meant switching themes could turn this card
   almost white (onyx's accent is a pale near-white, made for text/buttons
   sitting ON a dark surface, not for BEING a card background) or make it
   blend into Truth or Dare/Whot whenever their fixed colors happened to
   land near that theme's accent hue (blossom, ember). A fixed blue, same
   as the other four, keeps it a consistent, distinct card in every theme. */
.home-card-sync { background: linear-gradient(155deg, #3f7dd6, #1c3f7a); }
.home-card-badge { top: 10px; right: 10px; width: 11px; height: 11px; border-color: #fff; }

/* Chat is one tap away from Home now, not the first thing you see -- this
   is the way back, alongside the edge swipe-to-go-back gesture wired up
   in main.js (initChatSwipeBack). */
.chat-back-btn { font-size: 1.5rem; font-weight: 700; line-height: 1; flex-shrink: 0; }

/* Single entry point into Sync Check / Truth or Dare / Whot, opening as a
   full-screen panel over everything (same treatment as Settings) so chat
   itself never has to share the screen with a game board. */
.games-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg);
  overflow-y: auto;
}
.games-panel {
  width: 100%;
  max-width: 640px;
  min-height: 100%;
  margin: 0 auto;
  padding: max(1.1rem, env(safe-area-inset-top)) 1.25rem 0.7rem;
  display: flex;
  flex-direction: column;
}
.games-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.games-panel-title {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0;
  color: var(--ink);
}
/* Balances the back button's width on the other side so the title sits
   visually centered instead of hugging the left, now that there's no tab
   bar underneath to anchor it. */
.games-panel-header-spacer { width: 38px; flex-shrink: 0; }

/* Lets the Whot and Word Hunt panels specifically stretch to fill the rest
   of .games-panel's height (itself always at least a full screen tall --
   see min-height above) instead of sitting at their own natural content
   height with the leftover space left blank underneath, which is what a
   tall device was actually showing. Scoped to just these two (rather than
   every .tab-panel) since Sync Check / Truth or Dare / Cinema were never
   part of this complaint and their cards aren't built to stretch --
   turning this on for them too would just relocate the same "empty space"
   problem to inside their own card instead of fixing anything. */
#whotPanel:not([hidden]), #wordsPanel:not([hidden]) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Attention shortcut (chat topbar): hidden with nothing pending, one
   game's own icon when exactly one thing needs you, a generic bell that
   drops this same list down when 2+ do -- see updateGamesBadge() in
   main.js for the logic that drives all of this. */
.attention-shortcut { position: relative; }
.attention-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 11rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 50;
}
.attention-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.attention-dropdown-item:hover { background: var(--surface-2); }

/* Voice/video used to be two permanently-separate icons -- now one Call
   button that drops down to the two choices. */
.call-btn-wrap { position: relative; }
.call-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 10.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 20;
}
.call-dropdown button {
  padding: 0.55rem 0.65rem;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.call-dropdown button:hover { background: var(--surface-2); }

/* Search/Starred/Media live one tap away behind this, instead of sitting
   as icons on top of the chat log all the time. */
.chat-info-btn { color: var(--ink-dim); font-weight: 800; }

.chat-badge {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  min-width: 1.3em;
  text-align: center;
  line-height: 1.4;
}
/* Riding the corner of whichever button hosts it (the Games-panel close
   button, when new chat messages arrived while you were away from chat). */
.settings-close-btn { position: relative; }
.settings-close-btn .chat-badge { position: absolute; top: -4px; right: -4px; }

/* --- Chat: the home screen. Fills every bit of space the topbar and
   composer don't claim, and only this region scrolls. --- */
.chat-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.chat-log-wrap { position: relative; flex: 1; min-height: 0; }

.chat-log {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 0.6rem;
  /* Forces this onto its own GPU-composited layer. Without it, iOS Safari
     can leave a blank white gap after content is inserted/scrolled by
     JavaScript (pagination prepending older messages, jump-to-bottom,
     the initial load) rather than by a finger actually dragging --
     needing one manual scroll afterward to force it to repaint is the
     classic symptom. -webkit-overflow-scrolling: touch (the old fix for a
     related but different problem) is gone too -- it's legacy from before
     iOS had native momentum scrolling on overflow:auto, and keeping it
     around is a known way to keep THIS bug alive on current iOS. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background: var(--bg);
}

.chat-below-log { flex-shrink: 0; padding: 0 1rem; }

/* Hides the very first history load until it's already fully rendered and
   scrolled to the bottom -- no fade, no transition, since the whole point
   is that nothing about it is seen happening. visibility (not display) so
   layout/scroll math stays correct while it's hidden. */
.chat-log.chat-log-loading {
  visibility: visible;
  background: var(--bg);
}
.chat-log.chat-log-loading::before,
.chat-log.chat-log-loading::after { content: none; display: none; }
.chat-log { overflow-anchor: auto; }

.day-divider {
  align-self: center;
  margin: 0.7rem 0 0.6rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.day-divider:first-child { margin-top: 0; }

.history-status {
  align-self: center;
  margin: 0.35rem 0 0.55rem;
  font-size: 0.7rem;
  color: var(--ink-dim);
  text-align: center;
}
.history-load-more {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  touch-action: manipulation;
}
.history-load-more:hover { background: var(--surface-2); }
.history-load-more:disabled { opacity: .6; cursor: default; }

/* Lightweight system card for notable game activity, e.g. "Started a new
   Sync Check" -- not a message bubble from either of you, so it's styled
   completely differently (centered, chip-shaped, tinted with the accent
   color) and doubles as a tappable shortcut into that game. */
.system-event {
  align-self: center;
  max-width: 88%;
  margin: 0.6rem 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 999px;
  cursor: pointer;
}
.system-event:hover { background: rgba(var(--accent-rgb), 0.14); }

.msg {
  position: relative;
  max-width: 76%;
  padding: 0.5rem 0.8rem;
  border-radius: 18px;
  font-size: 0.94rem;
  line-height: 1.38;
  word-wrap: break-word;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  margin-top: 0.5rem;
  /* Let the browser handle vertical scrolling on its own; our own JS reads
     horizontal drags for swipe-to-reply and calls preventDefault only once
     a gesture is confirmed sideways. */
  touch-action: pan-y;
}
.msg:first-child { margin-top: 0; }
/* A run of consecutive messages from the same sender (same day) sits
   noticeably tighter together, WhatsApp-style, instead of every bubble
   getting the same full spacing regardless of who sent the last one. */
.msg.msg-grouped { margin-top: 0.14rem; }

.jump-to-bottom-btn {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.jump-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  min-width: 1.2em;
  text-align: center;
  line-height: 1.4;
}

.chat-info-panel { max-width: 26em; }
.chat-info-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.chat-info-header .brand-mark { width: 44px; height: 44px; flex-shrink: 0; }
.chat-info-avatar-btn {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}
.chat-info-avatar-btn:disabled { cursor: default; }
.chat-info-avatar-btn:not(:disabled):focus-visible,
.chat-info-avatar-btn:not(:disabled):hover { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.chat-info-header-text { min-width: 0; }
.chat-info-name {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0;
}
.chat-info-status {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.78rem;
  color: var(--ink-dim);
  margin: 0.2rem 0 0;
}
.chat-info-body { padding: 0.5rem; display: flex; flex-direction: column; }
.chat-info-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}
.chat-info-row:hover { background: var(--surface-2); }
.chat-info-row-icon { font-size: 1.1rem; }

.chat-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.chat-search-bar input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
  background: var(--surface);
  color: var(--ink);
}
.chat-search-bar input:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }

.edit-preview { border-left: 3px solid var(--accent-soft); }

.msg-star-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 0.68rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.msg.theirs .msg-star-badge { left: -7px; right: auto; }

.msg-edited-tag {
  font-size: 0.62rem;
  font-style: italic;
  opacity: 0.65;
  margin-top: 0.15rem;
}
.msg.mine .msg-edited-tag { text-align: right; }

.msg-list-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 4, 8, 0.55);
}

.photo-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 3, 5, 0.92);
  padding: 2rem 1rem;
}
.photo-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}
.photo-lightbox-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.msg-list-panel {
  width: 100%;
  max-width: 30em;
  /* The Stickers/GIFs picker now locks the page and sizes its overlay to
     window.visualViewport itself (see openStickerGifPicker) so it can
     shrink to sit above the on-screen keyboard -- 100% here lets this
     panel respect that shrunken height instead of a plain 75vh, which
     stays the full-page 75% even once the keyboard has taken part of the
     screen and would otherwise let the panel run underneath it. */
  max-height: min(75vh, 100%);
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.msg-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.msg-list-title { margin: 0; font-weight: 800; color: var(--ink); font-size: 0.95rem; }
.msg-list-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}
.msg-list-body { overflow-y: auto; padding: 0.4rem; }
.msg-list-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
}
.msg-list-row:hover { background: var(--surface-2); }
.msg-list-row-sender { font-size: 0.72rem; font-weight: 800; color: var(--accent); }
.msg-list-row-snippet {
  font-size: 0.88rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.msg-list-row-date { font-size: 0.68rem; color: var(--ink-dim); }
.msg-list-empty { padding: 1.5rem; text-align: center; color: var(--ink-dim); font-size: 0.88rem; }

.gallery-panel { max-width: 34em; }
.gallery-grid[hidden] { display: none !important; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  padding: 0.5rem;
  overflow-y: auto;
}
.gallery-thumb {
  /* Was aspect-ratio: 1/1 -- Safari has a known bug combining aspect-ratio
     with a CSS Grid item (fine standalone, breaks specifically as a grid
     child), which is exactly why this looked right in a desktop Chrome
     preview but not on an actual iPhone. padding-top: 100% is the classic
     "square box from width" trick and has worked in every browser,
     including very old Safari, for years -- no dependency on aspect-ratio
     at all. See .gif-result-tile and .sticker-tile for the same fix. */
  position: relative;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  padding-top: 100%;
  cursor: pointer;
  background: var(--surface-2);
}
.gallery-thumb img,
.gallery-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  padding-left: 0.15rem;
  pointer-events: none;
}

.msg-quote {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  border-left: 3px solid rgba(var(--on-accent-overlay-rgb), 0.5);
  padding: 0.25rem 0 0.25rem 0.55rem;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.msg.theirs .msg-quote { border-left-color: var(--accent-soft); }
.msg-quote-sender { font-weight: 800; }
.msg-quote-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22em;
}

.msg.mine {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
  border-bottom-right-radius: 5px;
}
.msg.theirs {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}

/* Little iMessage-style tail nub on the bubble's flattened corner. */
.msg.mine::after,
.msg.theirs::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 11px;
  height: 11px;
  background: inherit;
}
.msg.mine::after { right: -5px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.msg.theirs::after { left: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.msg.wish {
  border: 1px dashed var(--accent-soft);
  background: rgba(200, 154, 91, 0.18);
  color: var(--ink);
}
.msg.mine.wish { background: rgba(200, 154, 91, 0.34); color: var(--ink); }

.msg.dare {
  border: 1px dashed #e2622a;
  background: rgba(226, 98, 42, 0.18);
  color: var(--ink);
}
.msg.mine.dare { background: rgba(226, 98, 42, 0.32); color: var(--ink); }

/* white-space:normal (the default) collapses runs of whitespace, which
   silently ate every intentional blank line -- typing Enter twice for a
   paragraph break rendered as if there'd been no break at all, since the
   text itself IS stored with the real newlines (the textarea and the
   .trim() before saving both keep them); nothing displayed them. pre-wrap
   keeps single and double newlines exactly as typed while still wrapping
   long lines the same as before (the parent .msg's own word-wrap still
   applies for a single unbroken long word/URL). */
.msg-body { margin-top: 0.1rem; white-space: pre-wrap; }

.msg-status {
  margin-top: 0.3rem;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}
.msg-ticks { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; line-height: 0; flex-shrink: 0; }
.msg-state-mark { display: block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; position: relative; }
.msg-state-mark.sent { border: 1.35px solid currentColor; opacity: .68; }
.msg-state-mark.delivered { border: 1.35px solid currentColor; opacity: .9; }
.msg-state-mark.delivered::after { content: ''; position: absolute; inset: 2px; border: 1px solid currentColor; border-radius: 50%; opacity: .85; }
.msg-state-mark.seen { width: 7px; height: 7px; background: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 16%, transparent), 0 0 7px color-mix(in srgb, currentColor 42%, transparent); }
.msg-state-mark.seen::after { content: ''; position: absolute; inset: -2px; border: 1px solid currentColor; border-radius: 50%; opacity: .32; animation: espaceReceiptPulse 1.8s ease-out 1; }
@keyframes espaceReceiptPulse { 0% { transform: scale(.72); opacity: .65; } 100% { transform: scale(1.55); opacity: 0; } }
/* --- Voice notes --- */
.voice-record-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.1rem 0.7rem;
}
.voice-recording-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.voice-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--error);
  animation: voiceRecPulse 1.2s ease-in-out infinite;
}
@keyframes voiceRecPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.voice-bar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.05rem;
}
.voice-bar-cancel { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-dim); }
.voice-bar-stop { background: var(--error); color: #fff; }
.voice-bar-send {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
  box-shadow: 0 10px 20px -10px rgba(var(--accent-rgb), 0.5);
}

.voice-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 13.5rem;
  padding: 0.15rem 0;
}
.voice-note-preview { flex: 1; }
/* A real, thumb-sized play button (it was 30px and felt like a dot). */
.voice-play-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 14px -8px rgba(var(--accent-rgb), 0.7);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.voice-play-btn svg { width: 18px; height: 18px; margin-left: 2px; }
.voice-note.is-playing .voice-play-btn svg { margin-left: 0; }
.voice-play-btn:active { transform: scale(.92); box-shadow: 0 3px 8px -6px rgba(var(--accent-rgb), 0.7); }
.voice-play-btn:disabled { opacity: .5; }
.msg.mine .voice-play-btn {
  background: var(--on-accent);
  color: var(--accent);
  box-shadow: 0 6px 14px -9px rgba(0, 0, 0, 0.45);
}
/* Loading: a thin ring turns around the button. */
.voice-note.is-loading .voice-play-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  opacity: .7;
  animation: voiceSpin .8s linear infinite;
}
.msg.mine .voice-note.is-loading .voice-play-btn::after { border-top-color: var(--on-accent); border-right-color: var(--on-accent); }
.voice-note:not(.voice-note-preview) .voice-play-btn::after { pointer-events: none; }
@keyframes voiceSpin { to { transform: rotate(360deg); } }
/* The line is a tall invisible target with a slim rail inside it, so a
   thumb can grab it easily. */
.voice-track {
  position: relative;
  flex: 1;
  min-width: 5rem;
  height: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.voice-track-rail {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.msg.mine .voice-track-rail { background: rgba(var(--on-accent-overlay-rgb), 0.3); }
/* Older bubbles (and the recording preview) have no rail wrapper. */
.voice-note-preview .voice-track { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.voice-track-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
}
.msg.mine .voice-track-fill { background: var(--on-accent); }
.voice-track-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transform: scale(.7);
  transition: transform .12s ease;
  pointer-events: none;
}
.msg.mine .voice-track-knob { background: var(--on-accent); }
.voice-note.is-started .voice-track-knob,
.voice-note.is-playing .voice-track-knob { transform: scale(1); }
.voice-note.is-scrubbing .voice-track-knob { transform: scale(1.35); }
.voice-track:focus-visible .voice-track-rail { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
.voice-duration {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  flex-shrink: 0;
  min-width: 2.4em;
}
@media (prefers-reduced-motion: reduce) {
  .voice-note.is-loading .voice-play-btn::after { animation-duration: 2s; }
  .voice-track-knob, .voice-play-btn { transition: none; }
}
.msg-status-pending { font-style: italic; }
.msg-status-failed {
  color: var(--error);
  opacity: 1;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.msg-reactions { display: flex; gap: 0.2rem; margin-top: 0.35rem; }

/* --- Stickers & GIFs (one picker, two separate tabs -- your phone's own
   keyboard already covers emoji, so that's not a third tab here) --- */
.sticker-panel { max-width: 30em; }

/* --- Photo/clip preview before sending --- */
.photo-preview-panel { max-width: 30em; }
.photo-preview-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  max-height: 30vh;
  overflow: hidden;
}
.photo-preview-media img, .photo-preview-media video {
  display: block;
  max-width: 100%;
  max-height: 30vh;
  width: auto;
  height: auto;
}
.photo-preview-form {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.8rem 1rem;
}
.photo-preview-form input {
  flex: 1;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(0.95rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.65rem 1.05rem;
}
.photo-preview-form input:focus-visible { outline: 2px solid var(--accent-soft); }
.photo-preview-form .chat-send-btn { width: 2.6rem; height: 2.6rem; }
.photo-preview-panel .error-text { padding: 0 1rem 0.8rem; margin: 0; }
.picker-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem 0;
}
.picker-tab {
  flex: 1;
  border: none;
  background: var(--surface-2);
  color: var(--ink-dim);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.5rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
}
.picker-tab.active {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
}
.picker-tab-body { overflow-y: auto; max-height: 60vh; }
.picker-tab-body[hidden] { display: none; }

.picker-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin: 0.9rem 0.9rem 0.2rem;
}
.gif-search-bar { padding: 0.6rem 0.7rem 0; }
.gif-search-bar input {
  width: 100%;
  font-size: max(0.92rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
}
.gif-search-bar input:focus-visible { outline: 2px solid var(--accent-soft); }

.gif-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Was `1fr`, which tells the grid to divide its available height
     equally across every row it ends up with -- but each tile below
     already sets its own height via aspect-ratio: 1/1 (square, based on
     its column width). Those two sizing rules fight each other: on this
     grid's own natural (unconstrained) height, browsers can disagree
     about which one wins, and the loser is a tile whose rendered box
     doesn't match its own aspect-ratio -- which is what "GIFs overlapping,
     not standing alone in their squares" looks like. `auto` lets each
     row simply size to its (already-square) content instead of fighting
     it for the space.  */
  grid-auto-rows: auto;
  gap: 0.5rem;
  padding: 0.7rem;
  overflow-y: auto;
  max-height: 50vh;
  min-height: 8rem;
  /* This grid sits inside a column flex box (.msg-list-panel), and a flex
     child's default min-height is "auto", not 0 -- meaning it can refuse
     to shrink to the space actually available and instead size itself to
     its content. 0 here is what makes max-height/overflow-y above actually
     take effect reliably. */
  min-width: 0;
  min-height: 0;
}
.gif-result-tile {
  /* This tile's squareness used to come from aspect-ratio: 1/1. That
     rule works fine on its own, but Safari has a known bug where
     aspect-ratio breaks specifically when the element is also a CSS
     Grid item (this grid uses grid-auto-rows, so every tile qualifies) --
     it can render the tile at its content's natural size instead of the
     square the rule asked for, which is exactly why a portrait or
     landscape GIF thumbnail (GIPHY's come in every shape) would spill
     out over its neighbors. That matches this looking fine in a desktop
     Chrome preview but broken on an actual iPhone -- different engines.
     padding-top: 100% is the classic "square box from width" technique
     and has worked the same way in every browser for years, with no
     dependency on aspect-ratio at all. */
  position: relative;
  border: none;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 0;
  padding-top: 100%;
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.gif-result-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-status-text {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-dim);
  padding: 1.4rem 0.5rem;
}
/* Required by GIPHY's API terms regardless of app size -- a small,
   unobtrusive credit rather than their full logo lockup. */
.gif-attribution {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 0.4rem 0 0.7rem;
  margin: 0;
}

/* The classic reaction-GIF size -- deliberately smaller than a photo (a GIF
   reads as a quick reaction, not a shared memory) and bigger than a sticker
   (which is chromeless and iconographic, not a moving clip). */
.chat-gif {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 10px;
  margin-top: 0.35rem;
  display: block;
}

.sticker-hint {
  font-size: 0.74rem;
  color: var(--ink-dim);
  padding: 0.6rem 0.9rem 0;
  margin: 0;
}
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0.7rem;
  overflow-y: auto;
}
.sticker-grid-loading {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-dim);
  padding: 1rem 0.5rem 0.4rem;
  margin: 0;
}
.sticker-tile {
  /* Same Safari grid + aspect-ratio bug as .gif-result-tile -- your own
     stickers happen to already be roughly square, so this was likely
     invisible here even while it was actively breaking the GIF grid.
     padding-top: 100% instead, same fix. */
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  padding-top: 100%;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
}
.sticker-tile:active { background: var(--surface-2); }
.sticker-img { position: absolute; inset: 0.25rem; width: calc(100% - 0.5rem); height: calc(100% - 0.5rem); object-fit: contain; display: block; }
.sticker-add-tile {
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  color: var(--ink-dim);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stickers show bare, no chat-bubble chrome, same as WhatsApp -- strips
   the background/border/tail/padding this message type would otherwise
   inherit from .msg.mine / .msg.theirs. */
.msg.msg-sticker {
  background: none;
  border: none;
  padding: 0;
  max-width: 45%;
}
.msg.msg-sticker::after { display: none; }
.msg.msg-sticker .msg-status {
  color: var(--ink-dim);
  opacity: 1;
  margin-top: 0.15rem;
}
.sticker-msg-img { display: block; width: 100%; max-width: 9rem; }
.reaction-chip {
  font-size: 0.95rem;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
  line-height: 1.4;
}

.sync-card {
  background: linear-gradient(165deg, color-mix(in srgb, var(--surface) 88%, #000 12%), color-mix(in srgb, var(--surface-2) 94%, #000 6%));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 2.6rem 2.2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sync-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 0%, rgba(31, 143, 94, 0.14), transparent 70%);
  pointer-events: none;
}

.sync-prompt {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  position: relative;
}

.sync-form { display: flex; gap: 0.6rem; position: relative; }
.sync-form input {
  flex: 1;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(0.95rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
}
.sync-form input:focus-visible { outline: 2px solid var(--accent-soft); }

.sync-reveal { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.3rem; position: relative; }
.sync-answer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  text-align: left;
}
.sync-answer span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.3rem;
}
.sync-answer strong { font-size: 1.08rem; }
.sync-answer.mine { border-color: var(--accent); }
.sync-match { color: var(--online); font-weight: 700; margin: 0 0 1.1rem; position: relative; }

.deck-card {
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 2rem 1.8rem;
  text-align: center;
}

/* --- Watch Together --- */
.watch-card {
  position: relative;
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 2rem 1.8rem;
  text-align: center;
}
.watch-setup, .watch-ready { display: flex; flex-direction: column; gap: 0.8rem; }

/* The arrival gate: covers the whole card until both of you confirm
   you're actually here, then a one-shot wordmark+chime sting takes its
   place for a moment before the room itself is revealed underneath. */
.watch-readycheck,
.watch-sting {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  border-radius: 22px;
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
}
.watch-readycheck-title { margin: 0; font-weight: 700; color: var(--ink); }
.watch-readycheck-names { display: flex; gap: 1.4rem; }
.watch-readycheck-person { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.watch-readycheck-name { font-size: 0.85rem; color: var(--ink-dim); font-weight: 700; }
.watch-readycheck-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.watch-readycheck-btn:hover { transform: scale(1.04); }
.watch-readycheck-person.is-confirmed .watch-readycheck-btn {
  background: #3ddc84;
  border-color: #3ddc84;
  color: #06210f;
}
.watch-readycheck-person.is-confirmed .watch-readycheck-name::after { content: " ✓"; }
.watch-sting-wordmark {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  animation: watch-sting-in 0.5s ease both;
}
.watch-sting-wordmark span { color: var(--accent-soft); }
@keyframes watch-sting-in {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
.watch-source-toggle { display: flex; gap: 0.5rem; }
.watch-source-btn {
  flex: 1;
  border: none;
  background: var(--surface-2);
  color: var(--ink-dim);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
}
.watch-source-btn.active {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
}
.watch-card input[type="text"] {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(0.95rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
}
.watch-card input[type="text"]:focus-visible { outline: 2px solid var(--accent-soft); }
.watch-title { font-weight: 800; color: var(--ink); font-size: 1rem; margin: 0; }
.watch-presence { color: var(--ink-dim); font-size: 0.82rem; margin: 0; }

.watch-schedule { display: flex; flex-direction: column; gap: 0.5rem; }
.watch-schedule-line {
  margin: 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-soft);
}
.watch-schedule-form { display: flex; gap: 0.5rem; }
.watch-schedule-form input[type="datetime-local"] {
  flex: 1;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(0.85rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.6rem 0.9rem;
}
.watch-schedule-form input[type="datetime-local"]:focus-visible { outline: 2px solid var(--accent-soft); }
.watch-schedule-form button { flex-shrink: 0; padding: 0.6rem 1rem; font-size: 0.82rem; }
.watch-schedule-clear {
  align-self: center;
  border: none;
  background: none;
  color: var(--ink-dim);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem;
}
.watch-player { border-radius: 14px; overflow: hidden; background: #000; }
/* !important on all four: the YouTube IFrame API sets width/height as
   inline styles directly on the iframe it creates (from the width/height
   passed to new YT.Player(...)), which normal CSS can never out-rank
   regardless of selector specificity. That's the actual reason the video
   stayed stuck at its original small size everywhere -- compact, expanded
   portrait, landscape -- no matter what was set here before. !important is
   the one thing that legitimately beats an inline style. */
.watch-player iframe, .watch-player video {
  display: block;
  width: 100% !important;
  border: none;
  max-height: 320px;
}

/* Landscape, Cinema specifically -- rotating used to do nothing because
   .games-panel stayed capped at 640px and the player itself was capped at
   320px tall regardless of how much real estate turning the phone sideways
   actually freed up. This lets the video claim the full width and height
   of the rotated screen, tucks the title/presence/schedule lines out of
   the way (nothing to react to before playback starts anyway), and pins
   the reaction/perk/trash-talk strip to a slim bar at the very bottom
   instead of letting it eat into player height. Scoped with :has() to the
   Cinema panel only -- Whot and Word Hunt have their own layout and were
   never part of this. */
@media (orientation: landscape) {
  .games-overlay:has(#watchPanel:not([hidden])) .games-panel {
    max-width: none;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
  #watchPanel:not([hidden]) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  #watchPanel .watch-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.75rem;
    text-align: left;
  }
  #watchPanel .watch-ready { flex: 1; min-height: 0; gap: 0.4rem; }
  #watchPanel .watch-title,
  #watchPanel .watch-presence,
  #watchPanel .watch-schedule { display: none; }
  #watchPanel .watch-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  #watchPanel .watch-player { flex: 1; min-height: 0; }
  #watchPanel .watch-player iframe, #watchPanel .watch-player video { height: 100% !important; max-height: none; }
  #watchPanel .watch-live-bar { flex-shrink: 0; }
}

/* Full-bleed stage: once you're actually watching, the stage claims all
   the vertical room the panel has -- title and schedule tuck out of the
   way, same treatment landscape already had above, just no longer gated
   to sideways-only. The presence dot stays -- it's meant to be visible at
   a glance regardless of layout. :has() keys this off the live bar itself
   only showing while watchState.status === 'playing', so setup screens
   are unaffected. */
#watchPanel:has(#watchLiveBar:not([hidden])) { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.75rem;
  text-align: left;
}
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-ready { flex: 1; min-height: 0; gap: 0.4rem; }
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-title,
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-schedule { display: none; }
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-player { flex: 1; min-height: 0; }
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-player iframe,
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-player video { height: 100% !important; max-height: none; }
#watchPanel:has(#watchLiveBar:not([hidden])) .watch-start-btn,
#watchPanel:has(#watchLiveBar:not([hidden])) #watchStartBtn,
#watchPanel:has(#watchLiveBar:not([hidden])) #watchChangeBtn { flex-shrink: 0; }

.watch-browser { display: flex; flex-direction: column; gap: 0.5rem; }
.watch-address-bar { display: flex; gap: 0.5rem; }
.watch-address-bar input[type="text"] { flex: 1; min-width: 0; }
.watch-go-btn { flex-shrink: 0; padding: 0.7rem 1.1rem; }
.watch-open-btn { display: block; text-decoration: none; }
.watch-browser-hint {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.78rem;
  line-height: 1.4;
}
.watch-browser-frame {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  min-height: 50vh;
}
.watch-browser-frame iframe { display: block; width: 100%; height: 50vh; border: none; }

/* The stage wraps the player itself plus our own "expand" button --
   .expanded is toggled by JS and takes over the whole screen using our
   own layout, instead of handing fullscreen to the YouTube embed (which
   would hide everything below, reactions and message box included). */
.watch-stage { position: relative; }
.watch-here-badge { position: absolute; top: .5rem; left: .5rem; z-index: 6; display: flex; gap: .35rem; pointer-events: none; }
.watch-here-pill { display: flex; align-items: center; gap: .3rem; font-size: .65rem; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .5); padding: .18rem .5rem; border-radius: 999px; opacity: .45; transition: opacity .2s ease; }
.watch-here-pill.is-here { opacity: 1; }
.watch-here-dot { width: .4rem; height: .4rem; border-radius: 50%; background: #777; flex-shrink: 0; }
.watch-here-pill.is-here .watch-here-dot { background: #3ddc73; box-shadow: 0 0 4px #3ddc73; }
.watch-expand-btn {
  position: absolute;
  /* Pulled down and in from the literal corner (was 8px/8px, sitting right
     under the notch/status-bar area and genuinely hard to land a thumb on)
     and sized up to a proper touch target. */
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  z-index: 10;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.watch-stage.expanded {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #000;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.watch-stage.expanded .watch-player { flex: 1; min-height: 0; }
/* The base .watch-player iframe rule caps height at 320px (max-height, no
   !important). Overriding width/height here didn't touch that separate
   property, so the fullscreen viewer was still visually pinned to a
   320px-tall box floating inside a full-black screen -- which is also very
   likely the real reason the picture looked so much worse than before:
   YouTube's own player picks its streamed resolution based on the iframe's
   actual rendered size, so a 320px-tall box gets served a low-res stream
   no matter what setPlaybackQuality asks for. max-height needs its own
   !important here since it's cancelling that other rule's plain value. */
.watch-stage.expanded .watch-player iframe { width: 100% !important; height: 100% !important; max-height: none !important; }
.watch-stage.expanded .watch-live-bar {
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.7rem 1rem;
  border-radius: 0;
}
.watch-stage.expanded .watch-drawer button { color: #fff; }

/* Landscape + expanded: the drawer toggle stays anchored to a corner
   rather than fighting for space along a bottom bar while the phone is
   sideways. The drawer panel itself just opens from wherever the toggle
   is (see the .watch-drawer-toggle/.watch-drawer rules below), so there's
   no separate reaction/perk/flash layout to special-case here any more. */

/* This strip sits directly against the video (dark, and unpredictable in
   color -- a bright scene vs. a black letterboxed one), so it gets its own
   fixed dark scrim + light text always, rather than following whichever
   theme is active -- the same treatment .expanded already forced, just no
   longer only in expanded mode, since the compact player sits on the same
   kind of background. */
.watch-live-bar { position: relative; }

.turn-banner {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-soft);
  margin: 0 0 0.9rem;
}

.progress-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  border-radius: 999px;
  width: 0%;
  transition: width 0.3s ease;
}
.progress-label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 1.3rem;
}

.card-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.3rem;
  margin-bottom: 1.2rem;
  position: relative;
}
.card-cat-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1.5px solid var(--wc-color, var(--border));
  color: var(--wc-color, var(--ink));
  margin-right: 0.4rem;
}
.card-type-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.card-text {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0.9rem 0 0;
}

.answer-form { margin-bottom: 1rem; }

.dare-done-block {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.dare-done-block input {
  flex: 1;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(0.9rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.7rem 1rem;
}
.dare-done-block input:focus-visible { outline: 2px solid var(--accent-soft); }

.exchange-block {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  text-align: left;
}
.exchange-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.5rem;
}
.exchange-q {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  color: var(--ink-dim);
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}
.exchange-a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

/* Now a flex column that actually fills the panel (see .tab-panel below)
   instead of a plain block sitting at whatever height its content adds up
   to -- on a tall screen that used to leave a big dead strip of blank
   background below the board. .whot-game-area (everything except the
   footer taunt/reactions row) takes the flexible share of that height and
   spreads ITS OWN children out with space-evenly, so the same fixed-size
   opponent row / pile / hand simply gets more generous, proportional
   breathing room on a tall device instead of literally growing -- the
   already-tight fit at the smallest tested screens is unaffected since
   there's no spare room there to distribute in the first place. The taunt
   row keeps its natural size and sits below it, pinned to the true bottom
   edge of the board. */
.whot-board {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 0.6rem 0.9rem;
  text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.whot-game-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
}
/* Keeps the status/stats/location-tracker trio reading as one tight
   cluster (their own small margins between each other) rather than being
   pulled apart from one another by the space-evenly above -- only the
   GROUPS (this cluster, the opponent row, the pile, the hand, actions)
   get the generous spacing, not every line of text individually. */
.whot-header, .words-header { margin: 0; }
/* The one thing worth knowing at a glance without reading the status line:
   is it actually my move right now. Green when it is, the plain board the
   rest of the time -- not a second color for "her turn", just the absence
   of this one, so there's a single unambiguous "go" signal. */
.whot-board.my-turn {
  background: linear-gradient(165deg, rgba(31, 143, 94, 0.16), var(--surface-2));
  border-color: var(--online);
  box-shadow: 0 0 0 2px rgba(31, 143, 94, 0.3), var(--shadow);
}
.whot-board.my-turn .whot-status,
.whot-board.my-turn .whot-stats,
.whot-board.my-turn .whot-header,
.whot-board.my-turn .whot-hand-count { color: var(--ink); }
.whot-board.my-turn .whot-status strong { color: var(--accent-soft); }

.whot-status { font-size: 0.85rem; color: var(--ink-dim); margin: 0 0 0.15rem; }
.whot-status strong { color: var(--accent-soft); }

.whot-stats {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin: 0 0 0.25rem;
}

/* "Lumi is in Word Hunt" -- surfaced right inside whichever game panel
   you're sitting in, so waiting on a move in the wrong game (because she's
   actually elsewhere) is obvious without backing out to Home to check. */
.whot-other-loc, .words-other-loc {
  font-size: 0.7rem;
  color: var(--accent-soft);
  font-weight: 600;
  margin: 0 0 0.3rem;
}
.words-other-loc { color: var(--wh-ink); opacity: 0.9; }

/* Her hand lives in its own row across the top now, the way an actual
   card-table layout reads (their cards up top, the shared pile in the
   middle, your own cards at the bottom) rather than boxed in next to the
   market pile like just another stat. */
.whot-opp-row,
.whot-my-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: 0.2rem;
}
.whot-side-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.whot-side-label #whotOppCount { font-weight: 800; color: var(--ink); }

/* The avatar + name shown right above whoever's cards those are -- the
   thing a trash-talk bubble or reaction visually connects to (see
   speechAnchorFor/spawnWhotTaunt in main.js), so it's always here whether
   or not anyone's actually talking right now. Same pill for "your own"
   tag above your hand and the opponent's above theirs. */
.player-tag {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.08rem 0.55rem 0.08rem 0.08rem;
}
.player-tag-avatar {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  background: var(--surface-2);
}
.player-tag-avatar .avatar-photo,
.player-tag-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.player-tag-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.whot-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 0.3rem;
  flex-wrap: wrap;
}

.whot-pile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 0.5rem 0.6rem;
  min-width: 82px;
}
.whot-pile-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  min-width: 1.3em;
  text-align: center;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.6);
}
.whot-pile-label { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }

/* The market pile doubles as the "go to market" control -- there's no
   separate button anymore. On your turn it gets a pulsing accent ring and
   its label swaps to "Tap to draw" so it reads as tappable; off your turn
   it's just the plain dashed pile like the opponent's hand pile. */
.whot-market-pile { transition: border-color 0.2s ease, background 0.2s ease; }
.whot-market-pile.whot-market-tappable {
  cursor: pointer;
  border: 1px solid var(--accent);
  border-style: solid;
  background: rgba(var(--accent-rgb), 0.1);
  animation: whotMarketPulse 1.8s ease-in-out infinite;
}
.whot-market-pile.whot-market-tappable .whot-pile-label {
  color: var(--accent);
  font-weight: 800;
}
.whot-market-pile.whot-market-tappable:active { transform: scale(0.95); }
@keyframes whotMarketPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
}

.whot-tap-hint {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.whot-tap-hint::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--accent);
}

/* A card visibly traveling from the market pile to whoever just drew's
   hand, so a draw reads as a real card moving off the pile instead of a
   count just changing. Fixed dark-card coloring on purpose, same as
   .whot-card-back -- it's a card mid-flight, not themed chrome. */
.whot-draw-flyer {
  position: fixed;
  width: 40px;
  height: 54px;
  border-radius: 8px;
  background: linear-gradient(160deg, #5c1830, #7a1f3d);
  border: 1.5px solid rgba(244, 231, 222, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.55rem;
  color: rgba(244, 231, 222, 0.88);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6);
  z-index: 200;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.42s ease;
  will-change: transform, opacity;
}

.whot-top { display: flex; flex-direction: column; align-items: center; }

.whot-card-back {
  width: 66px;
  height: 90px;
  border-radius: 12px;
  background: linear-gradient(160deg, #5c1830, #7a1f3d);
  border: 2px solid rgba(244, 231, 222, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  color: rgba(244, 231, 222, 0.88);
  font-size: 1rem;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6);
}
.whot-card-back.small {
  width: 42px;
  height: 57px;
  font-size: 0.58rem;
  margin: 0 -13px;
  border-width: 1.5px;
}
/* The size her face-down cards render at in the new opponent hand row --
   matches .whot-card-face.small exactly (the size your own hand's cards
   render at) so her row genuinely reads as "the same as mine, just turned
   over" rather than a smaller stand-in. */
.whot-card-back.hand { width: 58px; height: 79px; font-size: 0.68rem; border-width: 1.5px; }

.whot-fan-empty { color: var(--ink-dim); font-size: 0.85rem; }

/* Styled after an actual Waddingtons Whot card: cream stock, one maroon
   ink color for everything, a big shape (or the "Whot" wordmark) dead
   center, and a small number in the top-left corner mirrored (rotated
   180deg) in the bottom-right, so it reads right-side up from either end
   the way a real card does. */
.whot-card-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 90px;
  border-radius: 10px;
  background: #f2e6d8;
  border: 2px solid #9c2245;
  color: #9c2245;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.whot-card-face.small { width: 58px; height: 79px; border-width: 1.5px; }

.wc-shape-svg { width: 40px; height: 40px; fill: currentColor; }
.whot-card-face.small .wc-shape-svg { width: 31px; height: 31px; }

.wc-wordmark {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.96rem;
  transform: rotate(-10deg);
}
.whot-card-face.small .wc-wordmark { font-size: 0.8rem; }

.wc-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1;
}
.whot-card-face.small .wc-corner { font-size: 0.62rem; }
.wc-corner-top { top: 5px; left: 6px; }
.wc-corner-bottom { bottom: 5px; right: 6px; transform: rotate(180deg); }
.wc-corner-w { font-size: 0.6em; margin-top: 1px; }

.whot-called {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  color: var(--accent-soft);
  font-weight: 700;
}

.whot-pending {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.whot-shape-picker {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.whot-shape-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--wc-color, var(--border));
  color: var(--wc-color, var(--ink));
  background: var(--surface);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}

/* Your hand no longer wraps to a second (and a third, and...) row once it
   grows past a handful of cards -- that's what was pushing the whole board
   past one screen after picking up a big Pick Three stack. It's one line
   that scrolls sideways instead, same idea as swiping through a real hand
   of cards fanned out in front of you; the board's own height never
   changes no matter how many cards you're holding. */
/* Full width regardless of what flex context it's sitting in -- both the
   opponent's row (nested inside the centered .whot-opp-row label group)
   and your own need the whole board's width to actually have something to
   scroll sideways within. */
.whot-hand-row { position: relative; width: 100%; margin-bottom: 0.3rem; }
.whot-hand {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.5rem;
  min-height: 90px;
  padding: 0.2rem 0.15rem 0.4rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.whot-hand::-webkit-scrollbar { display: none; }
.whot-hand .whot-card-btn { scroll-snap-align: center; flex-shrink: 0; }
/* A short hand (the common case) still reads as centered rather than
   stuck to the left edge -- only kicks in once there's nothing to scroll. */
.whot-hand:not(.overflowing) { justify-content: center; }
/* No overlap on purpose -- a tighter fan hides the center of every card
   but the frontmost one, which was the actual readability complaint. */
.whot-card-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: default;
  opacity: 1;
  transition: transform 0.15s ease;
}
.whot-card-btn.clickable { cursor: pointer; }
.whot-card-btn.clickable:hover,
.whot-card-btn.clickable:focus-visible { transform: translateY(-8px); }
.whot-card-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

.whot-card-btn.invalid-shake { animation: whot-invalid-shake 0.4s ease; }
@keyframes whot-invalid-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

.whot-actions { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.2rem; }

/* Pinned to the very foot of the board (see .whot-game-area's flex:1
   above, which soaks up all the space this row doesn't need) as two
   separate rows -- the emoji reactions, then a real gap, then the trash
   talk box -- rather than the two squeezed side by side into one shared
   row. */
.whot-taunt-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin: 0.5rem 0 0;
}

/* Sideways-scrolling strip, same behavior as the card hand above it
   (.whot-hand) -- 16 emojis no longer fit in one row, so this scrolls
   instead of wrapping to a second/third line, hides its own scrollbar,
   and fades in from centered-if-short via the same overflow check. */
.whot-emoji-bar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.55rem;
  margin: 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.1rem 0.15rem;
}
.whot-emoji-bar::-webkit-scrollbar { display: none; }
/* No overflow -- short enough to fit -- reads as centered instead of
   stuck to the left edge, same rule as the hand strip. */
.whot-emoji-bar:not(.overflowing) { justify-content: center; }
/* No circular chip behind these anymore -- it was never quite centered
   under the emoji glyph (a platform emoji-metrics thing, not something
   fixable by nudging padding) and wasn't adding anything worth keeping. */
.whot-emoji-bar button {
  font-size: 1.7rem;
  line-height: 1;
  background: none;
  border: none;
  padding: 0.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.whot-emoji-bar button:hover { transform: scale(1.15); }
.whot-emoji-bar button:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 8px; }

.whot-taunt-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  max-width: 320px;
}
.whot-taunt-form input {
  flex: 1;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
}
.whot-taunt-form input::placeholder { color: var(--ink-dim); }
.whot-taunt-send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whot-taunt-send:active { transform: scale(0.92); }

/* A typed taunt reads as an actual line someone said, not a reaction --
   its own speech-bubble treatment (themed, like an in-app message) rather
   than the big floating emoji. Two ways this gets positioned: `anchored`
   (bubble-above / bubble-below), pinned right next to whoever's player
   tag said it, with a tail pointing straight at them -- used whenever
   that tag is actually on screen; `bubble-centered`, the old
   screen-centered placement, kept as the fallback for when neither game
   panel is the one currently open (nothing on screen to point a tail at). */
.whot-taunt-bubble {
  position: fixed;
  max-width: min(72vw, 300px);
  max-height: min(22vh, 120px);
  overflow-wrap: anywhere;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.5);
  z-index: 310;
  pointer-events: none;
}
/* Sender name line, only present when the bubble came with one (see
   spawnWhotTaunt's senderName param) -- disambiguates whose bubble this is
   in Word Hunt, where both player tags sit close together near the top
   rather than split top/bottom the way Whot's are. */
.whot-taunt-bubble .whot-taunt-sender {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.8;
  margin-bottom: 0.15rem;
}
.whot-taunt-bubble.bubble-centered {
  top: 24%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  animation: whotTauntPop 2.6s ease forwards;
}
.whot-taunt-bubble.bubble-centered::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--accent);
}
.whot-taunt-bubble.bubble-above,
.whot-taunt-bubble.bubble-below {
  animation: whotTauntPopAnchored 2.85s ease forwards;
}
/* Tag sits below the bubble -- tail points down at it. */
.whot-taunt-bubble.bubble-above::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tail-x, 50%);
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--accent);
}
/* Tag sits above the bubble (its tag was too close to the top of the
   screen for the bubble to fit above it) -- tail points up at it instead. */
.whot-taunt-bubble.bubble-below::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: var(--tail-x, 50%);
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-bottom-color: var(--accent);
}
@keyframes whotTauntPop {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.7); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1); }
}
@keyframes whotTauntPopAnchored {
  0% { opacity: 0; transform: scale(0.7); }
  12% { opacity: 1; transform: scale(1.05); }
  20% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.whot-callout {
  position: fixed;
  top: 32%;
  left: 50%;
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2rem;
  color: var(--accent-soft);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
  z-index: 90;
  pointer-events: none;
  white-space: nowrap;
  animation: whot-callout-pop 1.6s ease forwards;
}
@keyframes whot-callout-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1); }
}

/* --- End-of-round result: takes over the whole screen for a moment,
   instead of the quiet status-line text this used to be. Win and lose get
   opposite treatments on purpose -- win reads as a celebration, lose reads
   as the other person actually taunting you -- so this needed its own
   look rather than reusing .whot-callout's subtler italic pop. */
.whot-result {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  z-index: 200;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.45);
  animation: whot-result-pop 2.2s ease forwards;
}
.whot-result-emoji {
  font-size: 6rem;
  line-height: 1;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6));
}
.whot-result-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 2.75rem;
  letter-spacing: 0.01em;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
}
.whot-result-win .whot-result-text { color: #ffd257; }
.whot-result-lose .whot-result-text { color: #ff5c6c; }
@keyframes whot-result-pop {
  0% { opacity: 0; }
  10% { opacity: 1; }
  16% { transform: scale(1.06); }
  22% { transform: scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
.whot-result .whot-result-emoji,
.whot-result .whot-result-text {
  animation: whot-result-scale 2.2s ease forwards;
}
@keyframes whot-result-scale {
  0% { transform: scale(0.5); }
  18% { transform: scale(1.1); }
  26% { transform: scale(1); }
  100% { transform: scale(1); }
}

/* --- Word Hunt: async Boggle-style word search --- */
/* Sync Check and Truth or Dare both get a proper card treatment (gradient
   background, border, shadow) -- Word Hunt never had -- so its whole panel
   read as bare page background around a button and a plain gray grid. */
/* A themed game-board feel rather than a plain form card -- a real board
   frame (double ring: an accent bezel around the felt-toned inside) with
   its own little marquee up top, the way an actual boxed board game reads
   as "a board," not just a panel that happens to hold a grid. */
/* Word Hunt is built to look like the real GamePigeon-style word game Dale
   sent as a sample -- a green diamond-patterned board, honey-wood tiles,
   mint-green selection, a reddish connecting trace line -- so, like Whot's
   cream/maroon card faces, these colors are FIXED regardless of theme.
   It's the game's own physical look, not themed chrome. */
.words-card {
  --wh-bg-1: #6f9762;
  --wh-bg-2: #4c6f45;
  --wh-ink: #f1f8e8;
  --wh-stat-ink: #17280f;
  --wh-stat-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.55), 1px -1px 0 rgba(255, 255, 255, 0.55),
    -1px 1px 0 rgba(255, 255, 255, 0.55), 1px 1px 0 rgba(255, 255, 255, 0.55);
  --wh-tray-bg: #33502e;
  --wh-tray-border: #a9d18e;
  --wh-tile-1: #f2cd8d;
  --wh-tile-2: #c99854;
  --wh-tile-border: #8f6330;
  --wh-tile-text: #3a2410;
  --wh-mint-1: #bdf3ac;
  --wh-mint-2: #86d96e;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 24px),
    linear-gradient(165deg, var(--wh-bg-1), var(--wh-bg-2));
  border: 3px solid #2c4527;
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 1.3rem 1.1rem 1.4rem;
}
/* Same idea as .whot-game-area -- fills whatever flexible height the card
   now stretches to (see .tab-panel below) and spreads its own children
   (the header cluster, then whichever of idle/waiting/turn/session/results
   is actually showing) apart with the extra room instead of leaving it as
   dead space below a status/tray pair stuck at the top. */
.words-game-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
  gap: 0.7rem;
}
.words-status {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--wh-ink);
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.words-stats {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--wh-ink);
  opacity: 0.85;
  /* Was a negative top margin, which pulled this line up close enough to
     .words-status above it to overlap on some screens. A small positive
     gap instead. */
  margin: 0.2rem 0 0;
  text-align: center;
}
/* Same player-tag pill as Whot (see .player-tag) -- restyled with Word
   Hunt's own fixed green/wood tokens instead of the theme surface colors,
   since this board deliberately never re-themes. Always visible regardless
   of round state, so a reaction/taunt sent or received here always has
   somewhere to visually connect to. */
.words-player-tags {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}
.words-player-tags .player-tag {
  background: var(--wh-tray-bg);
  border: 1px solid var(--wh-tray-border);
}
.words-player-tags .player-tag-name { color: var(--wh-ink); }
.words-hint { font-size: 0.82rem; color: var(--wh-ink); opacity: 0.9; text-align: center; margin: 0 0 0.6rem; }
.words-idle, .words-turn { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.words-waiting { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.words-waiting .waiting-text {
  color: var(--wh-ink);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.12);
}
.words-waiting-col { width: 100%; max-width: 260px; }

.words-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.words-session-stats { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.words-session-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wh-tray-bg);
  border: 2px solid var(--wh-tray-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.words-session-stat-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.words-found-count, .words-live-score {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--wh-stat-ink);
  text-shadow: var(--wh-stat-shadow);
}
.words-timer {
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--wh-ink);
  background: rgba(0, 0, 0, 0.28);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.words-current-word {
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: var(--wh-tile-text);
  background: linear-gradient(160deg, #fff3dd, #f0d9a8);
  border: 1px solid var(--wh-tile-border);
  border-radius: 14px;
}

.words-session { position: relative; }

.words-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  /* Raised from 320px -- on a taller/wider phone than the smallest ones
     this was ever tuned against, the tray can now actually grow instead
     of capping out small and leaving the extra width unused, which was
     part of the same "board feels cramped" complaint as the vertical
     spacing above. Still just a max, so the smallest tested screens (it
     was never within reach of 420px there in the first place) render
     exactly as before. */
  max-width: 420px;
  margin: 0 auto;
  padding: 0.7rem;
  border-radius: 20px;
  background: var(--wh-tray-bg);
  /* A visible tray bezel -- the mint-green ring around the wood tiles in
     the sample -- reads as a real tile tray set into the board. */
  border: 3px solid var(--wh-tray-border);
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.18), 0 10px 20px -12px rgba(0, 0, 0, 0.5);
  touch-action: none;
  user-select: none;
  /* Clips the tile "lock" pop and the trace line to the tray itself, so
     neither one visibly pokes out past the rounded frame. This is also
     exactly what was turning a layout overflow into a visibly CLIPPED
     last column on a real phone (see .words-cell's min-width:0 below for
     the actual fix) instead of the grid just quietly rendering a hair too
     wide. */
  overflow: hidden;
}
.words-tiles {
  position: relative;
  z-index: 2;
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr -- a bare 1fr still lets a grid item's
     own implied min-width:auto (its content's natural minimum size) win
     out over the track's computed width if the two ever disagree, which
     silently overflows the grid rather than shrinking the item. A single
     bold letter is normally nowhere near that limit, but real-device text
     scaling (Safari's Larger Text / Dynamic Type, which can inflate a
     rem-based font-size well past what this was tuned against) can push
     it there -- and once any column does, the whole row overflows to the
     right and .words-grid's own overflow:hidden above clips exactly the
     rightmost sliver, which is precisely the "last column is cut off" bug
     reported from a real phone that this never reproduced in testing. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}
/* The reddish connecting line + dots drawn through the letters currently
   selected -- recalculated from actual tile positions on every path
   change (see updateWordsTraceLine in main.js). */
.words-trace-svg { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
.words-trace-svg polyline { fill: none; stroke: rgba(122, 40, 30, 0.55); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.words-trace-svg circle { fill: rgba(122, 40, 30, 0.55); }

/* Pops up just above the tray the instant a word lands, GamePigeon-style
   -- a light-green pill with dark text, matching the sample exactly,
   positioned in main.js against the grid's own on-screen position so it
   never gets clipped by the tray's overflow:hidden. */
.words-found-toast {
  position: absolute;
  background: #baf58f;
  color: #16240f;
  border: 2px solid rgba(0, 0, 0, 0.15);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
  border-radius: 10px;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
  animation: wordsFoundToastPop 0.9s ease forwards;
}
.words-found-toast b { color: #16240f; margin-left: 0.3rem; }
@keyframes wordsFoundToastPop {
  0% { opacity: 0; transform: translate(-50%, -100%) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1.06); }
  25% { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
  75% { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-100% - 30px)) scale(1); }
}
/* A proper letter tile -- a warm honey-wood "keycap" look with a bottom
   bevel, matching the sample's wood tile tray instead of a plain form
   grid. */
.words-cell {
  position: relative;
  /* The actual fix for the real-device "last column clipped" bug --
     a CSS Grid item's default min-width is auto (its own content's
     natural minimum width), which can outgrow an evenly-divided 1fr
     track once Mobile Safari's text-size inflation (see
     grid-template-columns above) makes a single letter render wider
     than expected; min-width:0 lets the tile shrink to the track
     instead of forcing the whole grid wider than its tray. */
  min-width: 0;
  min-height: 0;
  /* Stops Safari's automatic text-size "readability" boost from
     inflating this single bold letter past the font-size actually set
     here -- the boost is meant for paragraphs of body text, not a fixed-
     size game tile, and inflating it is exactly what could make a tile's
     own content wider than its track in the first place. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--wh-tile-1), var(--wh-tile-2));
  border: none;
  border-bottom: 3px solid var(--wh-tile-border);
  border-radius: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--wh-tile-text);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.1s ease, border-color 0.12s ease;
}
.words-cell.selected {
  background: linear-gradient(160deg, var(--wh-mint-1), var(--wh-mint-2));
  color: #1f3a12;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  transform: scale(0.93) translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
/* The order a letter was traced in, in the current drag -- a small nicety
   that makes a multi-letter selection easy to read back at a glance
   instead of just "some tiles are highlighted." */
.words-cell.selected::after {
  content: attr(data-order);
  position: absolute;
  top: 3px;
  right: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(31, 58, 18, 0.75);
}
/* A tile "locking in" once its letters actually form a scored word --
   separate from the plain drag-time .selected highlight, so landing a real
   word gets its own bit of feedback instead of quietly just appearing in
   the found list underneath. */
@keyframes wordsTileLock {
  0% { transform: scale(0.93) translateY(1px); }
  45% { transform: scale(1.12) translateY(-3px); box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.4); }
  100% { transform: scale(1) translateY(0); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
}
/* Green for a landed word, red for a bad guess -- fixed colors regardless
   of theme, same reasoning as the rest of this board. */
.words-cell.locked {
  animation: wordsTileLock 0.4s ease;
  background: linear-gradient(160deg, var(--wh-mint-1), var(--online));
  color: #1f3a12;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}

@keyframes wordsTileInvalid {
  0%, 100% { transform: translateX(0) scale(1); }
  25% { transform: translateX(-4px) scale(0.96); }
  75% { transform: translateX(4px) scale(0.96); }
}
.words-cell.invalid {
  animation: wordsTileInvalid 0.42s ease;
  background: linear-gradient(160deg, #f3a3a3, var(--error));
  color: #fff;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}

.words-found-list { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.words-found-chip {
  background: linear-gradient(160deg, var(--wh-tile-1), var(--wh-tile-2));
  border: 1px solid var(--wh-tile-border);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--wh-tile-text);
}
.words-found-chip b { color: #1f3a12; font-weight: 800; }
.words-none { font-size: 0.8rem; color: var(--wh-ink); opacity: 0.75; font-style: italic; }

.words-results { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
.words-result-banner {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
  color: var(--wh-ink);
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
@keyframes wordsResultPop {
  0% { opacity: 0; transform: scale(0.7) translateY(-6px); }
  60% { opacity: 1; transform: scale(1.08) translateY(0); }
  100% { transform: scale(1); }
}
.words-result-banner-pop { animation: wordsResultPop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.3); }
.words-result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; width: 100%; }
.words-result-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.words-result-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wh-tray-bg);
  border: 3px solid var(--wh-tray-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 0.15rem;
}
/* The winning side gets a gold ring on its avatar plus a small trophy
   flag -- matching the sample's plain avatar-and-stats look rather than
   boxing each side in its own card. */
.words-result-col.winner .words-result-avatar {
  border-color: #ffd257;
  box-shadow: 0 0 0 3px rgba(255, 210, 87, 0.35);
}
.words-result-col.winner::before {
  content: "🏆";
  position: absolute;
  top: -0.3rem;
  right: calc(50% - 40px);
  font-size: 1.1rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}
.words-result-name { font-weight: 800; margin: 0; font-size: 0.78rem; color: var(--wh-ink); opacity: 0.85; }
.words-result-count, .words-result-score {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  color: var(--wh-stat-ink);
  text-shadow: var(--wh-stat-shadow);
}
.words-result-count { font-size: 0.76rem; }
.words-result-score { font-size: 1.35rem; margin-bottom: 0.2rem; }
.words-result-words { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }

/* The tan word-bar rows used on the results comparison and the "waiting on
   them" screen -- word bold on the left, its points bold on the right,
   same wood-tile coloring as the board itself. */
.words-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  background: linear-gradient(160deg, var(--wh-tile-1), var(--wh-tile-2));
  border: 1px solid var(--wh-tile-border);
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  font-size: 0.74rem;
}
.words-bar-word { font-weight: 800; color: var(--wh-tile-text); letter-spacing: 0.02em; }
.words-bar-score { font-weight: 800; color: var(--wh-tile-text); }
.words-more { font-size: 0.68rem; color: var(--wh-ink); opacity: 0.75; font-style: italic; text-align: center; margin: 0.1rem 0 0; }

/* One-time static walkthrough, shown exactly once ever per person the
   first time they open Word Hunt -- see maybeShowWordsTutorial() in
   main.js. Same dimmed-modal treatment as the rest of the app's overlays,
   just centered rather than a side panel, since this is a short one-off
   rather than something to browse. */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 4, 8, 0.72);
}
.tutorial-card {
  width: 100%;
  max-width: 22em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 2rem 1.6rem 1.6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.tutorial-emoji { font-size: 2.4rem; }
.tutorial-title {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0.2rem 0 0;
}
.tutorial-body {
  font-size: 0.9rem;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 0 0 0.4rem;
}
.tutorial-dots { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; }
.tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.tutorial-dot.active { background: var(--accent); }
.tutorial-actions { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0.8rem; }
.tutorial-actions .btn { flex: 1; }

.reveal-btn {
  display: block;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px dashed var(--accent-soft);
  color: var(--accent-soft);
  border-radius: 10px;
  padding: 0.9rem 0.7rem;
  cursor: pointer;
  margin-top: 0.3rem;
}
.reveal-btn:disabled { opacity: 0.6; cursor: default; }

.photo-wrap { margin-top: 0.35rem; }
.viewed-placeholder {
  font-size: 0.82rem;
  opacity: 0.75;
  font-style: italic;
  padding: 0.6rem 0;
}
.view-once-badge {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.25rem;
}

.vo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 3, 6, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 2rem 1rem;
}
.vo-image { max-width: 100%; max-height: 82vh; max-height: 82dvh; border-radius: 12px; }
.vo-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 700;
  cursor: pointer;
}

.typing-hint {
  font-size: 0.78rem;
  color: var(--ink-dim);
  min-height: 1.2em;
  margin: 0 0 0.5rem;
}

.chat-form {
  flex-shrink: 0;
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* A prior attempt at the icon-touch-offset bug promoted this row to its
     own GPU-composited layer (transform: translateZ(0)), on the theory
     that it was the same stale-paint issue as .chat-log. That did not fix
     it -- this row resizes on nearly every keystroke (see
     autosizeChatInput), and a layer re-promoted that often is itself a
     known source of hit-test lag on iOS Safari (the compositor's tap
     rect can trail a frame behind the freshly-painted position), which
     produces exactly this symptom rather than curing it. Removed -- see
     .pill-icon-btn/.chat-send-btn's touch-action fix below for the real
     remedy. */
}

/* Sits pinned at the very bottom of the room, so it needs its own safe-area
   padding now that it can actually touch the edge of a notched iPhone. */
.composer-extra {
  flex-shrink: 0;
  padding: 0 0.75rem calc(0.35rem + env(safe-area-inset-bottom));
  background: var(--surface);
}
.composer-extra .toggle-pill { margin-top: 0; }

.reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-soft);
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.6rem;
}
.reply-preview-text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.reply-preview-sender { font-size: 0.72rem; font-weight: 800; color: var(--accent-soft); }
.reply-preview-snippet {
  font-size: 0.82rem;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-preview-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8rem;
  cursor: pointer;
}

/* The sticker and camera icons live inside the input pill itself, same as
   WhatsApp -- not as separate buttons sitting next to it. */
.pill-icon-btn {
  flex-shrink: 0;
  /* Bumped from 2.1rem (33.6px) -- comfortably under the ~44px minimum
     touch target both Apple's and Google's guidelines call for, which is
     exactly what a "have to aim carefully" tap feels like. This is close
     to that minimum while still fitting the compact input pill. */
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  /* Was var(--ink-dim), a lighter gray -- fine for plain text but the
     sticker icon is a thin-stroke outline SVG, and on an actual phone
     screen (versus a desktop preview) that combination came out reading
     as basically invisible: a camera EMOJI ignores CSS color entirely
     and always renders in full color regardless, which is why it stayed
     visible right next to an SVG icon that didn't. The stronger --ink
     color plus a thicker stroke (see .pill-icon-btn svg below) is what
     actually shows up. */
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Removes the browser's built-in ~300ms tap delay and double-tap-to-zoom
     gesture recognition on this button, so a tap resolves immediately
     against wherever your finger actually landed instead of waiting to
     see if a second tap follows -- the standard, low-risk fix for
     "buttons feel like they need a very precise/firm tap" on mobile. */
  touch-action: manipulation;
}
.pill-icon-btn:hover { color: var(--accent-soft); }
/* Safari/iPhone fallback: draw the sticker glyph with CSS rather than an
   inline SVG. WebKit has had historical inline-SVG/flex rendering edge
   cases, including cases where the SVG occupies the button but paints
   nothing. This keeps the control visibly identifiable on the phone. */
.pill-icon-btn .sticker-icon-css {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 6px 6px 9px 6px;
  box-sizing: border-box;
  flex: 0 0 22px;
}
.pill-icon-btn .sticker-icon-css::after {
  content: '';
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  background: var(--surface);
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  border-radius: 1px 0 7px 0;
}
.pill-icon-btn .sticker-icon-css i::before,
.pill-icon-btn .sticker-icon-css i::after {
  content: '';
  position: absolute;
  top: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.pill-icon-btn .sticker-icon-css i::before { left: 5px; }
.pill-icon-btn .sticker-icon-css i::after { right: 5px; }

.chat-img {
  max-width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 0.35rem;
  display: block;
}

.video-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.chat-video {
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  margin-top: 0.35rem;
  display: block;
  background: #000;
}
.chat-video-save {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.chat-video-save:hover { text-decoration: underline; }
.video-retry-note { margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--ink-dim); font-style: italic; }

/* Whatsapp-style input pill: the sticker icon sits inside it on the left,
   the camera icon inside it on the right, and the text area itself has no
   border/background of its own -- the pill provides both. */
.chat-input-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 0.3rem 0.35rem 0.3rem 0.5rem;
  /* Same GPU-layer attempt as .chat-form, and removed for the same
     reason -- this is the container that grows/shrinks on every
     keystroke, making it the worst candidate for a layer that needs
     re-promoting that often. */
}
.chat-input-pill:focus-within { outline: 2px solid var(--accent-soft); }

.chat-form textarea {
  flex: 1;
  min-width: 0;
  /* Always a clearly visible typing cursor, in both themes. */
  caret-color: var(--accent);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(0.95rem, 16px);
  line-height: 1.35;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0.5rem 0.15rem;
  resize: none;
  min-height: 2.2rem;
  max-height: 8.5rem;
  overflow-y: auto;
}
.chat-form textarea:focus-visible { outline: none; }

/* One round button instead of two -- mic while the box is empty, send
   arrow the moment there's something to send (see updateMicSendBtn).
   Sized at 48px (up from the previous 41.6px) -- below the ~44px minimum
   that both Apple's and Google's own guidelines call for, a rushed tap
   that lands a few pixels off the button's edge is read as missing it
   entirely, which is exactly what "only registers if I tap it carefully"
   looks like. This is comfortably above that minimum instead of right at
   the edge of it. */
.chat-send-btn {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 20px -10px rgba(var(--accent-rgb), 0.5);
  position: relative;
  /* Same tap-delay/double-tap-zoom removal as .pill-icon-btn. */
  touch-action: manipulation;
}
.chat-send-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.chat-send-btn svg { transform: translateX(-1px); }
/* Belt-and-suspenders alongside the stale-paint fix above: makes every tap
   anywhere in the button's box resolve to the BUTTON itself, never to one
   of the SVG's own internal shapes (an outline icon like the sticker one
   has "hollow" unpainted interior that some mobile browsers won't treat as
   tappable on its own). */
.pill-icon-btn svg, .chat-send-btn svg { pointer-events: none; }

/* The keyboard-open reflow (room-shell resizing against visualViewport,
   the textarea growing/shrinking with every keystroke) keeps leaving a
   small but real gap between where Send visually sits and where iOS
   actually hit-tests a tap against it, no matter how precisely that
   reflow gets tuned -- reported most recently as "have to tap the gap
   between Send and the camera icon" while the keyboard is up. Rather
   than keep chasing the exact pixel-level cause of that drift, this pads
   the REAL clickable area out well past the visible circle, furthest to
   the left (into that gap, which is empty space either way -- nothing
   else lives there to accidentally out-compete for the tap) using an
   invisible pseudo-element -- a tap landing on it still counts as
   hitting the button itself, so it registers regardless of exactly how
   far the visual and hit-test positions have drifted apart in the
   moment. Kept off the two buttons sharing the input pill (stickerBtn,
   photoBtn): extending THEIR hit area left would eat into the textarea
   sitting right next to them, trading this bug for taps near the
   textarea's edge landing on a button instead. */
.chat-send-btn::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -26px;
}

.footnote { text-align: center; margin-top: 1.6rem; font-size: 0.78rem; color: var(--ink-dim); }

.error-text { color: var(--error); font-size: 0.85rem; margin-top: 0.6rem; }

/* --- Device lock settings row + panel (inside the room) --- */
.settings-row { display: flex; justify-content: center; margin: 1.6rem 0 0; }
.settings-row .toggle-pill { margin-top: 0; font-size: 0.78rem; }

.lock-settings-panel {
  max-width: 26em;
  margin: 0.8rem auto 0;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-align: center;
}
.lock-settings-hint { font-size: 0.76rem; color: var(--ink-dim); margin: 0; }
.lock-pin-setup-form { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.lock-pin-setup-form input {
  flex: 1;
  min-width: 8em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(0.9rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.6rem 0.9rem;
}
.lock-settings-panel .btn { font-size: 0.82rem; padding: 0.6rem 1.1rem; }

/* --- Splash screen: shown once, only on a true cold start where the
   passphrase and name are already remembered and boot() would otherwise
   have dropped silently straight into chat. Reuses the lock screen's
   layout since it's the same "centered card, brand mark, one button"
   shape. --- */
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(120% 100% at 50% -10%, var(--bg-glow) 0%, var(--bg) 55%);
}
.splash-card {
  width: 100%;
  max-width: 22em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.splash-card .brand-mark { width: 56px; height: 56px; margin-bottom: 0.2rem; }
.splash-wordmark {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 2.6rem;
  margin: 0;
  color: var(--ink);
}

/* --- Theme swatches (Settings -> Theme) --- */
.theme-row { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; padding: 0.2rem 0 0.6rem; }
.theme-swatch {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  /* Three stops instead of two -- since a theme now recolors its whole
     background too, not just the accent, the swatch should hint at that
     instead of only ever showing an accent-colored dot no matter how
     different (e.g. onyx's near-black) the actual theme looks once picked. */
  background: linear-gradient(180deg, var(--swatch-soft), var(--swatch-accent) 60%, var(--swatch-bg));
}
.theme-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

/* --- Full-screen device-lock overlay (shown at boot, and again after the
   app's been backgrounded a while) --- */
.lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(120% 100% at 50% -10%, var(--bg-glow) 0%, var(--bg) 55%);
}
.lock-card {
  width: 100%;
  max-width: 22em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.lock-card .brand-mark { margin-bottom: 0; }
.lock-title {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 2rem;
  margin: 0;
  color: var(--ink);
}
.lock-sub { color: var(--ink-dim); font-size: 0.92rem; margin: 0; }
.lock-pin-form { display: flex; gap: 0.5rem; width: 100%; }
.lock-pin-form input {
  flex: 1;
  min-width: 0;
  text-align: center;
  letter-spacing: 0.3em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: max(1rem, 16px);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.75rem 1rem;
}

/* --- Calling: outgoing/incoming/active overlay + transient toast --- */
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 4, 8, 0.88);
  backdrop-filter: blur(6px);
}
.call-card {
  width: 100%;
  max-width: 24em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow);
}
.call-with { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0; }
.call-actions { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; }

.call-icon-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.call-icon-end {
  background: linear-gradient(180deg, #ef4a5f, #c62d40);
  box-shadow: 0 14px 26px -12px rgba(239, 74, 95, 0.6);
  transform: rotate(135deg);
}
.call-icon-accept {
  background: linear-gradient(180deg, #4fd18b, #2ea968);
  box-shadow: 0 14px 26px -12px rgba(79, 209, 139, 0.6);
}
.call-icon-neutral {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
}
.call-icon-neutral.call-icon-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.call-media-wrap {
  width: 100%;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 3 / 4;
}
.call-media-wrap.audio-only {
  aspect-ratio: auto;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.call-media-wrap.audio-only::before {
  content: "🎤 Audio call";
  color: var(--ink-dim);
  font-size: 0.85rem;
}
.call-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.call-local-video {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 28%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  object-fit: cover;
}
/* The small box while you're still waiting for her to pick up -- there's
   no video to show there yet (that's the whole point: it's RESERVED for
   her feed, not filled with one), so it holds her photo/avatar instead of
   sitting empty, the same idea as the video element it'll be replaced by
   once she answers. */
.call-reserved-box {
  aspect-ratio: 3 / 4;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.call-reserved-avatar { width: 52%; opacity: 0.9; line-height: 0; }
.call-reserved-avatar img,
.call-reserved-avatar svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.call-outgoing-media { display:flex; align-items:center; justify-content:center; }
.call-outgoing-person { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 35%, var(--surface-2), var(--bg)); }
.call-outgoing-person > * { width:min(42%, 180px); aspect-ratio:1; border-radius:50%; overflow:hidden; }
.call-outgoing-person img, .call-outgoing-person svg { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.call-local-video.call-outgoing-self { z-index:2; width:clamp(88px, 28%, 132px); height:auto; aspect-ratio:3/4; bottom:1rem; right:1rem; border:2px solid rgba(255,255,255,.85); border-radius:14px; background:#18131b; box-shadow:0 8px 24px rgba(0,0,0,.35); }


/* Incoming-message banner: surfaces a new message from anywhere in the
   app (Home, a game) except while chat's already open and showing it for
   real. A reply box sits right underneath so answering never needs
   opening chat at all -- sending the reply or swiping the banner up
   dismisses it, tapping the banner itself (not the reply field) opens
   full chat scrolled to that message. See showMessageBanner() in main.js. */
.msg-banner {
  position: fixed;
  top: max(0.6rem, env(safe-area-inset-top));
  left: 0.6rem;
  right: 0.6rem;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 0.7rem 0.8rem;
  animation: msgBannerIn 0.22s ease;
}
.cinema-join-banner {
  position: fixed;
  left: 0.6rem;
  right: 0.6rem;
  bottom: max(0.6rem, env(safe-area-inset-bottom));
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 0.6rem 0.6rem 0.6rem 0.9rem;
  animation: msgBannerIn 0.22s ease;
}
.cinema-join-banner-text { font-size: 0.85rem; font-weight: 700; color: var(--ink); min-width: 0; }
.cinema-join-banner .btn { flex-shrink: 0; padding: 0.4rem 0.9rem; }
.msg-banner-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.msg-banner-text { min-width: 0; display: flex; flex-direction: column; }
.msg-banner-name { font-weight: 800; font-size: 0.85rem; color: var(--ink); }
.msg-banner-snippet {
  font-size: 0.82rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-banner-reply-form { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.msg-banner-reply-form input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: max(0.9rem, 16px);
  background: var(--surface-2);
  color: var(--ink);
}
.msg-banner-reply-form button[type="submit"] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  flex-shrink: 0;
}
@keyframes msgBannerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.call-toast {
  position: fixed;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 210;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.85rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
  animation: callToastPop 2.6s ease forwards;
}

/* Deliberately plain and undismissable (no close button) -- this only
   ever appears when there's genuinely a newer build to get onto, and
   the whole point is that it stays put until that actually happens
   rather than being tapped away and forgotten.
   A deliberately different color from the rest of the app (amber, not
   the usual green) -- the first version used the same green as
   everything else here, which read as "just another bit of status text"
   rather than something worth tapping. This one's meant to look like it
   doesn't belong, on purpose, so it's obvious it's asking for a tap. */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  border: none;
  border-bottom: 2px solid #a9660f;
  background: linear-gradient(180deg, #e0932f, #c9761a);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
}
.update-banner u { text-decoration-thickness: 2px; text-underline-offset: 2px; }
@keyframes callToastPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  10%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* Added for newer game functions only. Keep the original game frame/layout. */
.whot-opponent-picker{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 10px}.whot-picker-label{font-size:.78rem;opacity:.72}.whot-opponent-options{display:flex;gap:8px}.whot-opponent-btn{min-width:110px}.whot-opponent-btn.selected{font-weight:700}.whot-opponent-btn.btn-outline{opacity:.82}.whot-opponent-btn.btn-outline:hover{opacity:1}
.whot-card-dragging{transform:translateY(-14px) scale(1.04)!important;z-index:20;filter:drop-shadow(0 14px 12px rgba(0,0,0,.25))}.whot-card-btn.clickable{touch-action:pan-x;user-select:none;-webkit-user-select:none}.whot-card-placeholder{width:58px;height:79px;flex:0 0 58px;border:2px dashed var(--accent-soft);border-radius:9px;opacity:.55;box-sizing:border-box}.whot-card-btn.whot-drag-source{opacity:.35}
.reaction-more-btn{font-size:1.25rem!important;width:2rem;height:2rem;border-radius:50%!important;background:var(--surface-2)!important;border:1px solid var(--border)!important;color:var(--ink-dim)}.reaction-customizer{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);width:min(94vw,420px);max-height:70vh;overflow:auto;z-index:500;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1rem;box-shadow:0 24px 60px rgba(0,0,0,.3)}.reaction-customizer-head{display:flex;justify-content:space-between;align-items:center;font-size:1rem}.reaction-customizer p{margin:.45rem 0 .8rem;font-size:.78rem;color:var(--ink-dim)}.reaction-close{border:0;background:none;color:var(--ink-dim);font-size:1rem;cursor:pointer}.reaction-library{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem}.reaction-library button{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:.5rem 0;font-size:1.35rem;cursor:pointer}.reaction-dragging{transform:scale(1.15);opacity:.7}
.chat-photo-btn{display:block;padding:0;border:0;background:none;cursor:zoom-in;max-width:100%}.chat-photo-btn .chat-img{margin-top:.35rem}.image-viewer-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:4rem 1rem 1rem}.image-viewer-image{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.45);touch-action:none;will-change:transform,opacity}.image-viewer-close{position:absolute;top:1rem;right:1rem;width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.1rem;cursor:pointer}
.word-opponent-picker{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:.4rem 0 .6rem;font-size:.72rem;color:var(--ink-dim)}.word-opponent-btn{padding:.35rem .65rem!important;font-size:.7rem!important}

/* Scoreboard: keep the original game's spacious frame, but make the new
   scoreboard data read horizontally as requested. */
.whot-scoreboard,.words-stats{display:flex;align-items:center;justify-content:center;gap:1rem;text-align:center}.scoreboard-games{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:54px;padding-right:.8rem;border-right:1px solid var(--border)}.scoreboard-games b{font-size:1.35rem;line-height:1}.scoreboard-games small{margin-top:.12rem;font-size:.55rem;letter-spacing:.1em;color:var(--ink-dim)}.scoreboard-player{display:flex;flex-direction:row;align-items:center;gap:.35rem;min-width:70px}.scoreboard-player b{font-size:.55rem;letter-spacing:.08em;color:var(--ink-dim)}.scoreboard-player strong{font-size:1.2rem;line-height:1;color:var(--ink)}


/* Final game-frame correction: preserve the original natural board layout.
   The game itself should size to its contents instead of forcing every
   element to share a full viewport-height flex column. */
.games-overlay { overflow-y: auto; overflow-x: hidden; }
.games-panel { min-height: 100%; }
#whotPanel:not([hidden]), #wordsPanel:not([hidden]) { flex: none; display: block; min-height: 0; }
.whot-board, .words-card { flex: none; }
.whot-game-area, .words-game-area { flex: none; justify-content: initial; }

/* Whot scoreboard is one compact HUD row, never a vertical stack. */
.whot-stats { display: flex; align-items: baseline; justify-content: center; flex-wrap: nowrap; gap: .55rem; white-space: nowrap; margin: .15rem 0 .4rem; }
.scoreboard-games { display: inline-flex; flex-direction: row; align-items: baseline; gap: .22rem; min-width: 0; padding: 0 .45rem 0 0; border-right: 1px solid var(--border); }
.scoreboard-games b { font-size: 1.05rem; line-height: 1; }
.scoreboard-games small { margin: 0; font-size: .52rem; letter-spacing: .08em; }
.scoreboard-player { display: inline-flex; flex-direction: row; align-items: baseline; gap: .28rem; min-width: 0; }
.scoreboard-player b { font-size: .58rem; letter-spacing: .06em; }
.scoreboard-player strong { font-size: 1.15rem; line-height: 1; }
.scoreboard-vs { font-size: .5rem; font-weight: 800; letter-spacing: .08em; color: var(--ink-dim); }

/* A drawn card is unmistakably the newest card for a moment, then settles. */
.whot-card-new { animation: whotNewCard .9s ease-out; filter: drop-shadow(0 9px 9px rgba(31,143,94,.28)); }
@keyframes whotNewCard {
  0% { transform: translateY(-12px) scale(1.055); }
  45% { transform: translateY(-8px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.whot-draw-flyer { width: 44px; height: 60px; }

/* Word Hunt must never clip its bottom row on short Safari viewports. */
.words-card { box-sizing: border-box; }
.words-grid { width: min(100%, 320px); max-width: 320px; box-sizing: border-box; }
.words-tiles { box-sizing: border-box; }
.words-cell { min-width: 0; min-height: 0; overflow: hidden; }
@media (max-width: 430px) and (max-height: 850px) {
  .games-panel { padding-left: .75rem; padding-right: .75rem; }
  .words-card { padding: .85rem .7rem 1rem; gap: .45rem; }
  .words-game-area { gap: .35rem; }
  .words-grid { width: min(100%, 285px); max-width: 285px; padding: .55rem; border-radius: 17px; }
  .words-tiles { gap: .38rem; }
  .words-cell { border-radius: 11px; font-size: 1.3rem; }
  .words-session-header { gap: .35rem; }
  .word-opponent-picker { margin: .2rem 0 .35rem; }
}
@media (max-width: 430px) {
  .whot-stats { gap: .4rem; }
  .scoreboard-games { padding-right: .35rem; }
  .scoreboard-games b { font-size: .98rem; }
  .scoreboard-player strong { font-size: 1.05rem; }
  .scoreboard-player b { font-size: .53rem; }
  .scoreboard-vs { font-size: .45rem; }
}

/* Whot HUD: simple head-to-head score, kept on one line. */
.whot-stats { display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap; gap:.75rem; white-space:nowrap; margin:.2rem 0 .5rem; }
.whot-stats .scoreboard-player { display:inline-flex; flex-direction:row; align-items:baseline; gap:.35rem; min-width:0; }
.whot-stats .scoreboard-player b { font-size:.62rem; letter-spacing:.07em; color:var(--ink-dim); }
.whot-stats .scoreboard-player strong { font-size:1.35rem; line-height:1; color:var(--ink); }
.whot-stats .scoreboard-vs { font-size:.55rem; font-weight:800; letter-spacing:.1em; color:var(--ink-dim); }


/* --- Final targeted polish: no game-frame rewrite, only HUD/detail fixes --- */
.whot-stats {
  width: min(100%, 300px);
  margin: .25rem auto .55rem;
  padding: .48rem .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  white-space: nowrap;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 7px 18px -14px rgba(20,26,18,.45);
}
.whot-stats .scoreboard-player { min-width: 0; display: inline-flex; align-items: baseline; gap: .3rem; }
.whot-stats .scoreboard-player b { font-size: .6rem; letter-spacing: .1em; color: var(--ink-dim); }
.whot-stats .scoreboard-player strong { font-size: 1.25rem; line-height: 1; color: var(--ink); }
.whot-stats .scoreboard-vs { font-size: .8rem; font-weight: 800; color: var(--accent); opacity: .72; }
.whot-card-new {
  position: relative;
  animation: whot-new-card-glow 1.35s ease-in-out infinite;
  z-index: 8;
}
.whot-card-new::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 13px;
  box-shadow: 0 0 0 2px rgba(31,143,94,.35), 0 0 18px 5px rgba(31,143,94,.38);
  pointer-events: none;
}
@keyframes whot-new-card-glow {
  0%,100% { filter: drop-shadow(0 0 3px rgba(31,143,94,.28)); }
  50% { filter: drop-shadow(0 0 11px rgba(31,143,94,.72)); }
}
.watch-share-note, .watch-share-copy { margin: .35rem 0; font-size: .78rem; line-height: 1.4; color: var(--ink-dim); }
.watch-share-controls { display:flex; flex-direction:column; gap:.35rem; padding:.75rem; margin-bottom:.6rem; border:1px solid var(--border); border-radius:16px; background:linear-gradient(145deg,var(--surface),var(--surface-2)); }
.watch-screenshare-block, .watch-library-block { display:flex; flex-direction:column; gap:.35rem; }
.watch-share-youtube-btn { align-self:flex-start; margin-top:.3rem; }
.watch-share-title { margin:0; font-weight:800; color:var(--ink); }
.watch-share-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.watch-share-status { margin:0; font-size:.72rem; color:var(--ink-dim); }
.watch-share-player { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.watch-share-player video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }

/* Home needs a visible surface against the pale browser/background chrome.
   This is intentionally subtle so the five colourful cards remain the focus. */
.home-screen {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .055), var(--surface-2));
  border: 1px solid rgba(var(--accent-rgb), .16);
  border-radius: 24px;
  box-shadow: 0 18px 38px -28px rgba(20,26,18,.45), inset 0 1px 0 rgba(255,255,255,.62);
}

@media (max-width: 430px) {
  .whot-stats { width: min(100%, 270px); gap:.55rem; padding:.42rem .62rem; }
  .whot-stats .scoreboard-player b { font-size:.54rem; }
  .whot-stats .scoreboard-player strong { font-size:1.1rem; }
  .whot-stats .scoreboard-vs { font-size:.68rem; }
  .home-screen { border-radius: 20px; }
}

.watch-share-player { flex: 0 0 auto; }
.watch-stage.expanded .watch-share-player { flex: 1; min-height: 0; aspect-ratio: auto; }
.watch-stage.expanded .watch-share-player video { width:100%; height:100%; object-fit:contain; }
@media (orientation: landscape) {
  #watchPanel .watch-share-player { flex: 1; min-height: 0; aspect-ratio: auto; }
  #watchPanel .watch-share-player video { height:100%; object-fit:contain; }
}


/* Final tactile HUD polish. The score itself gets a small capsule so the
   result reads instantly without making the whole scoreboard oversized. */
.whot-stats {
  width: min(100%, 310px);
  padding: .5rem .72rem;
  gap: .62rem;
  border-color: rgba(var(--accent-rgb), .24);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .075), var(--surface-2));
}
.whot-stats .scoreboard-player {
  gap: .34rem;
}
.whot-stats .scoreboard-player strong {
  display: inline-flex;
  min-width: 2rem;
  height: 1.72rem;
  align-items: center;
  justify-content: center;
  padding: 0 .42rem;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 10px -8px rgba(20,26,18,.5);
}
.whot-stats .scoreboard-vs {
  font-size: .7rem;
  color: var(--ink-dim);
  opacity: 1;
}

/* New market cards use an inset amber/theme highlight. Nothing spills outside
   the card frame, so the hand remains clean and the new card stays obvious. */
.whot-card-new {
  animation: whot-new-card-glow 1.35s ease-in-out infinite;
  filter: none;
}
.whot-card-new::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(var(--card-highlight-rgb), .92),
    inset 0 0 13px rgba(var(--card-highlight-rgb), .34);
  background: radial-gradient(circle at 50% 0%, rgba(var(--card-highlight-rgb), .18), transparent 62%);
  pointer-events: none;
}
@keyframes whot-new-card-glow {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(var(--card-highlight-rgb), .7); }
  50% { box-shadow: inset 0 0 0 2px rgba(var(--card-highlight-rgb), 1), inset 0 0 16px rgba(var(--card-highlight-rgb), .28); }
}

.watch-share-mobile-note {
  margin: .3rem 0 .1rem;
  padding: .6rem .7rem;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .07);
  border: 1px solid rgba(var(--accent-rgb), .16);
  color: var(--ink-dim);
  font-size: .73rem;
  line-height: 1.4;
}
.watch-share-actions .btn:disabled { opacity: .55; cursor: wait; }

/* Final Whot cleanup: identity already lives in the scoreboard. */
.whot-opp-row, .whot-my-row { display:flex; flex-direction:column; gap:.3rem; }
.whot-opp-row .whot-side-label { align-self:center; }

/* New-card highlight is always drawn inside the actual card face. */
.whot-card-new { position:relative; filter:none !important; animation:whot-new-card-pulse 1.35s ease-in-out infinite; }
.whot-card-new::after { display:none; }
.whot-card-new .whot-card-face { position:relative; overflow:hidden; border-radius:inherit; }
.whot-card-new .whot-card-face::after { content:""; position:absolute; inset:2px; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 2px rgba(var(--card-highlight-rgb),.98), inset 0 0 18px rgba(var(--card-highlight-rgb),.48); background:radial-gradient(circle at 50% 8%,rgba(var(--card-highlight-rgb),.24),transparent 58%); }
@keyframes whot-card-new-pulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }

/* Theme-specific highlight contrast. */
:root { --card-highlight-rgb:255,211,67; }
html[data-theme="onyx"] { --card-highlight-rgb:255,246,196; }
html[data-theme="blossom"] { --card-highlight-rgb:255,164,48; }
html[data-theme="ember"] { --card-highlight-rgb:255,226,112; }

/* Sticker picker: WhatsApp-like, one tap from the composer. */
.sticker-pack-tabs { display:flex; gap:.35rem; padding:.45rem .65rem .1rem; overflow-x:auto; scrollbar-width:none; }
.sticker-pack-tabs::-webkit-scrollbar { display:none; }
.sticker-pack-tab { flex:0 0 auto; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-dim); border-radius:999px; padding:.38rem .65rem; font:inherit; font-size:.7rem; white-space:nowrap; }
.sticker-pack-tab.active { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:800; }
.sticker-tools { display:flex; gap:.45rem; padding:.1rem .7rem .65rem; }
.sticker-tools .btn { flex:1; min-width:0; }
.sticker-studio-panel { max-width:31em; }
.sticker-studio-preview { display:flex; justify-content:center; padding:.8rem; }
.sticker-canvas-wrap { width:min(70vw,280px); aspect-ratio:1; border-radius:20px; background:repeating-conic-gradient(var(--surface-2) 0 25%,var(--surface) 0 50%) 0/24px 24px; border:1px solid var(--border); display:grid; place-items:center; overflow:hidden; }
.sticker-canvas-wrap canvas { width:100%; height:100%; object-fit:contain; }
.sticker-studio-actions, .sticker-pack-create { display:flex; gap:.5rem; padding:.45rem .8rem; }
.sticker-pack-create input, .sticker-studio-panel > input { flex:1; min-width:0; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:12px; padding:.7rem .75rem; font:inherit; }
.sticker-studio-status { margin:.45rem .8rem .8rem; color:var(--ink-dim); font-size:.74rem; line-height:1.4; }

.offline-status-bar { position:fixed; z-index:9999; left:50%; bottom:calc(env(safe-area-inset-bottom) + .65rem); transform:translate(-50%,120%); opacity:0; pointer-events:none; max-width:calc(100% - 1.4rem); padding:.55rem .8rem; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.14); font-size:.7rem; transition:transform .2s ease,opacity .2s ease; white-space:nowrap; }
.offline-status-bar.visible { transform:translate(-50%,0); opacity:1; }

.watch-share-youtube-btn { margin-top:.1rem; align-self:flex-start; }

/* Message times stay quiet until the user taps a message, keeping the chat compact while making an exact timestamp immediately available for reference/screenshots. */
.msg .msg-status { display: flex; }
.msg .msg-status .msg-date-time { display: none; }
.msg.timestamp-visible .msg-status .msg-date-time { display: inline; }
.msg.msg-sticker.timestamp-visible .msg-status .msg-date-time { display: inline; }

/* Sticker actions: tapping a received sticker opens an explicit action sheet.
   Nothing is saved just because the sticker was touched. */
.sticker-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.8rem;
  background: rgba(10, 14, 11, .34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.sticker-action-sheet {
  width: min(100%, 430px);
  padding: 0.75rem;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 22px 55px rgba(0,0,0,.22);
  animation: stickerSheetIn .18s ease-out;
}
.sticker-action-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 92px;
  padding: .5rem;
}
.sticker-action-preview img { width: 96px; height: 96px; object-fit: contain; }
.sticker-action-btn {
  width: 100%;
  min-height: 48px;
  margin-top: .45rem;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}
.sticker-action-btn:active { transform: scale(.985); }
.sticker-action-cancel { background: transparent; color: var(--ink-dim); }
@keyframes stickerSheetIn { from { transform: translateY(18px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }


/* Exact timestamp shown only after tapping a message. The date is included
   so a screenshot remains unambiguous even when the message is from another day. */
.msg .msg-status .msg-date-time { white-space: nowrap; }
.msg .msg-status .msg-ticks { opacity: .82; }
.msg.timestamp-visible .msg-status { opacity: 1; }


/* Espace v2 game language: quieter, editorial, less like a generic game site. */
.game-kicker-row { display:flex; justify-content:space-between; gap:.8rem; margin-bottom:1rem; color:var(--ink-dim); font-size:.62rem; letter-spacing:.14em; font-weight:800; }
.sync-mode-row, .deck-mode-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; margin-bottom:1.25rem; }
.sync-mode-btn, .deck-mode-btn { border:1px solid var(--border); background:var(--surface-2); color:var(--ink-dim); border-radius:12px; padding:.62rem .55rem; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }
.sync-mode-btn.active, .deck-mode-btn.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.sync-v2, .deck-v2 { text-align:left; padding:1.15rem; }
.sync-v2 .sync-prompt { font-size:clamp(1.5rem,5vw,2rem); line-height:1.22; margin-bottom:.55rem; font-style:normal; font-weight:800; }
.sync-subline { margin:.1rem 0 1.25rem; color:var(--ink-dim); font-size:.78rem; }
.sync-form-v2 { margin-bottom:1rem; }
.sync-score-line, .deck-score-line { text-align:center; color:var(--ink-dim); font-size:.7rem; letter-spacing:.06em; margin:.85rem 0; }
.sync-v2 .sync-reveal { margin-top:1rem; }
.deck-v2 .turn-banner { margin:.2rem 0 1rem; font-weight:800; }
.card-box-v2 { min-height:170px; display:flex; flex-direction:column; justify-content:center; }
.card-box-v2 .card-text { font-size:1.28rem; line-height:1.35; }

/* Mobile Return means a new line. Desktop Enter sends, while Shift/Ctrl/Command+Enter makes a paragraph. */
@media (pointer: coarse) {
  .chat-form textarea { min-height:2.45rem; }
}
@media (pointer: fine) {
  .chat-form textarea { min-height:2.2rem; }
}

.composer-extra-row { display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; }
.composer-extra-row::-webkit-scrollbar { display:none; }
.composer-extra-row .toggle-pill { flex:0 0 auto; border:0; padding:.22rem .45rem; min-height:0; background:transparent; box-shadow:none; font-size:.67rem; opacity:.68; }
.chat-location-card { display:flex; align-items:center; gap:.7rem; min-width:190px; max-width:270px; margin-top:.35rem; padding:.75rem .85rem; border:1px solid var(--border); border-radius:16px; background:var(--surface-2); color:var(--ink); text-decoration:none; }
.chat-location-pin { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:1.1rem; }
.chat-location-card span:last-child { display:flex; flex-direction:column; gap:.12rem; }
.chat-location-card small { color:var(--ink-dim); font-size:.68rem; }

/* Media loads after the message bubble is painted. Keep the placeholder
   quiet and lightweight so Storage latency never blocks chat interaction. */
.chat-media-placeholder,
.sticker-media-pending,
.chat-video-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--ink-dim);
  font-size: 0.72rem;
}
.chat-video-placeholder { min-width: 180px; min-height: 105px; }
.chat-media-pending { min-width: 210px; min-height: 42px; }
.msg { contain: layout style; }

/* ========================================================================
   Espace visual system v6
   A quieter, more editorial interface. The product is the relationship,
   not a dashboard of features. Surfaces are deliberately sparse, controls
   are tactile, and colour is reserved for meaning rather than decoration.
   ======================================================================== */

/* This section used to open with its own :root block hardcoding a second,
   conflicting green/cream palette on top of the one at the very top of this
   file -- since both were bare :root selectors, the one that happened to
   come later in the file silently won, fighting the real theme system below
   (and masking it, since it happened to be close to the old "forest" look).
   Removed -- the AWA/forest/onyx/blossom/ember variables all live in one
   place now, at the top of this file. */

html, body {
  background: radial-gradient(110% 80% at 50% -12%, var(--bg-glow) 0%, var(--bg) 58%);
}

/* ------------------------------------------------------------------------
   Home: less dashboard, more private room
   ------------------------------------------------------------------------ */
.home-screen {
  width: min(100%, 820px);
  margin: 0 auto;
  padding: max(.35rem, env(safe-area-inset-top)) clamp(1.05rem, 3vw, 2rem) calc(1.5rem + env(safe-area-inset-bottom));
  gap: 1.15rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-top-actions {
  width: 100%;
  height: 2.8rem;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: space-between;
}

.home-top-actions::before {
  content: "Espace";
  font-family: "Funnel Display", system-ui, sans-serif;
  font-size: 1.42rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
  opacity: .92;
}

.home-top-actions .icon-btn {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  box-shadow: none;
  font-size: 1rem;
}
.home-top-actions .icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.home-contact-row {
  position: relative;
  width: 100%;
  min-height: 116px;
  padding: 1.15rem 0 .95rem;
  gap: .9rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-contact-row:hover { background: transparent; }
.home-contact-row:active { transform: scale(.995); }
.home-contact-row .avatar-slot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-soft) 9%, transparent);
}
.home-contact-row .avatar-photo,
.home-contact-row .brand-mark { width: 58px; height: 58px; }
.home-contact-name {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-size: clamp(1.7rem, 5vw, 2.15rem);
  line-height: .98;
  letter-spacing: -.025em;
  font-weight: 600;
}
.home-contact-preview {
  margin-top: .28rem;
  font-size: .76rem;
  letter-spacing: .01em;
  color: var(--ink-dim);
}
.home-contact-meta {
  align-self: flex-start;
  padding-top: .35rem;
}
.home-contact-meta .dot { width: 7px; height: 7px; }
.home-contact-meta .chat-badge { margin-top: .2rem; }

/* The Window is the signature Espace object. It gets one strong surface,
   while everything else stays deliberately quieter. */
.window-card {
  min-height: 132px;
  margin: .15rem 0 .35rem;
  padding: 1.2rem 1.2rem 1.2rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
  border-radius: 26px;
  background:
    radial-gradient(80% 120% at 92% 20%, color-mix(in srgb, var(--accent-soft) 14%, transparent), transparent 60%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 6%, var(--surface)));
  box-shadow: 0 20px 45px -34px rgba(23,63,48,.42), inset 0 1px 0 rgba(255,255,255,.72);
}
.window-card:hover { border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); }
.window-card-glow {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  border-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-soft) 7%, transparent), inset 0 0 20px color-mix(in srgb, var(--accent-soft) 12%, transparent);
}
.window-card-glow::after { left: 17px; top: 17px; }
.window-card-kicker { font-size: .58rem; letter-spacing: .18em; }
.window-card-title { font-size: clamp(1.35rem, 4vw, 1.7rem); letter-spacing: -.01em; }
.window-card-sub { font-size: .72rem; max-width: 34rem; }
.window-card-action {
  padding: .52rem .78rem;
  border-radius: 999px;
  background: var(--accent);
  font-size: .66rem;
  letter-spacing: .01em;
}

.home-cards {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .25rem;
}
.home-cards::before {
  content: "Together";
  grid-column: 1 / -1;
  margin: .15rem 0 .25rem;
  color: var(--ink-dim);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.home-card {
  min-height: 92px;
  padding: .85rem .9rem;
  gap: .22rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--ink);
  box-shadow: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.home-card:hover {
  border-color: color-mix(in srgb, var(--accent-soft) 38%, var(--border));
  background: var(--surface);
}
.home-card:active { transform: scale(.985); }
.home-card::after {
  content: "";
  position: absolute;
  right: .9rem;
  top: .9rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}
.home-card-emoji { display: inline-grid; place-items: center; flex: 0 0 auto; }
.home-card-title {
  margin-top: .05rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: -.01em;
}
.home-card-sub {
  margin-top: .15rem;
  color: var(--ink-dim);
  font-size: .68rem;
  line-height: 1.3;
}
.home-card-whot-art { display: inline-block; }
.home-card-cinema {
  grid-column: 1 / -1;
  min-height: 76px;
  flex-direction: row;
  align-items: center;
  padding: .9rem 1rem;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.home-card-cinema::before {
  content: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  font-size: 1rem;
}
.home-card-cinema::after { background: rgba(255,255,255,.45); }
.home-card-cinema .home-card-title { color: var(--on-accent); font-size: .94rem; }
.home-card-cinema .home-card-sub { color: rgba(255,255,255,.68); }
.home-card-whot,
.home-card-deck,
.home-card-words,
.home-card-sync { background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%); }
.home-card-whot::before,
.home-card-deck::before,
.home-card-words::before,
.home-card-sync::before {
  display: block;
  margin-bottom: .25rem;
  color: var(--accent-soft);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.home-card-whot::before { content: none; }
.home-card-deck::before { content: none; }
.home-card-words::before { content: none; }
.home-card-sync::before { content: none; font-size: 1rem; }

/* ------------------------------------------------------------------------
   Chat: editorial, calm, nearly chrome-less
   ------------------------------------------------------------------------ */
.chat-topbar {
  padding: max(.55rem, env(safe-area-inset-top)) max(.8rem, calc((100vw - 820px) / 2)) .52rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.chat-back-btn,
.topbar-actions .icon-btn {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.chat-back-btn:hover,
.topbar-actions .icon-btn:hover { background: var(--surface-2); }
.topbar-identity { padding: .18rem .35rem; }
.topbar-identity:hover { background: transparent; }
.topbar-name { font-size: 1rem; letter-spacing: -.015em; }
.topbar-status { font-size: .67rem; }

.chat-main { max-width: 820px; }
.chat-log {
  padding: 1.15rem max(1rem, calc((100vw - 760px) / 2)) .75rem;
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(var(--accent-rgb), .025), transparent 70%),
    var(--bg);
}
.day-divider {
  padding: .16rem .55rem;
  border: 0;
  background: transparent;
  font-size: .61rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--ink-dim) 80%, transparent);
}
.history-status { font-size: .64rem; opacity: .72; }
.history-load-more { color: var(--accent-soft); }

.msg {
  max-width: min(76%, 31rem);
  padding: .62rem .85rem;
  margin-top: .52rem;
  border-radius: 19px;
  font-size: .91rem;
  line-height: 1.42;
}
.msg.msg-grouped { margin-top: .12rem; }
.msg.mine {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  box-shadow: 0 5px 16px -13px rgba(23,63,48,.7);
}
.msg.theirs {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow: 0 5px 18px -17px rgba(19,34,25,.5);
}
.msg.mine::after,
.msg.theirs::after { display: none; }
.msg-status { font-size: .6rem; opacity: .62; }

.chat-form {
  gap: .5rem;
  padding: .55rem max(1rem, calc((100vw - 820px) / 2)) calc(.45rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent);
}
.composer-extra {
  padding: 0 max(1rem, calc((100vw - 820px) / 2)) .25rem;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
.chat-input-pill {
  min-height: 48px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 25px;
  box-shadow: 0 8px 26px -24px rgba(19,34,25,.6);
}
.chat-input-pill:focus-within {
  outline: 0;
  border-color: color-mix(in srgb, var(--accent-soft) 52%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 9%, transparent);
}
.chat-send-btn {
  width: 48px;
  height: 48px;
  box-shadow: 0 8px 22px -15px rgba(23,63,48,.7);
}

@media (min-width: 760px) {
  .home-screen { padding-left: 2.25rem; padding-right: 2.25rem; }
  .home-contact-row { min-height: 136px; }
  .home-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-card-cinema { grid-column: 1 / -1; }
  .home-card { min-height: 104px; }
}

@media (max-width: 430px) {
  .home-screen { padding-left: 1rem; padding-right: 1rem; }
  .home-contact-row { min-height: 108px; }
  .home-card { min-height: 88px; }
}


/* Espace colour system v7: the layout stays v6, the palette gets a real identity. */
html[data-theme="forest"] {
  --bg: #e9eee8; --bg-glow: #dde8df; --surface: #fafcf9; --surface-2: #dce7df;
  --ink: #172a21; --ink-dim: #5f7066; --accent: #194c39; --accent-soft: #4f8068;
  --accent-rgb: 25,76,57; --on-accent: #fffdf8; --on-accent-overlay-rgb: 255,255,255;
  --border: #c9d7ce; --shadow: 0 18px 50px -34px rgba(19,34,25,.34); --card-highlight-rgb: 224,188,104;
}
html[data-theme="onyx"] {
  --bg: #111214; --bg-glow: #202024; --surface: #1b1b1f; --surface-2: #29292e;
  --ink: #f4f0ea; --ink-dim: #aaa39b; --accent: #eadbc8; --accent-soft: #c7a987;
  --accent-rgb: 234,219,200; --on-accent: #1a1714; --on-accent-overlay-rgb: 26,23,20;
  --border: #39383a; --shadow: 0 18px 42px -20px rgba(0,0,0,.72); --card-highlight-rgb: 234,219,200;
}
html[data-theme="blossom"] {
  --bg: #f3e4e9; --bg-glow: #ead0da; --surface: #fff8fa; --surface-2: #e9cbd5;
  --ink: #321b25; --ink-dim: #745261; --accent: #7c294b; --accent-soft: #b95a79;
  --accent-rgb: 124,41,75; --on-accent: #fff; --on-accent-overlay-rgb: 255,255,255;
  --border: #dcb3c1; --shadow: 0 18px 42px -22px rgba(74,35,51,.3); --card-highlight-rgb: 246,187,103;
}
html[data-theme="ember"] {
  --bg: #f1e4d2; --bg-glow: #e7d0b4; --surface: #fff9f1; --surface-2: #e1c9ab;
  --ink: #2d1d15; --ink-dim: #715849; --accent: #5a3424; --accent-soft: #a06b4d;
  --accent-rgb: 90,52,36; --on-accent: #fffaf3; --on-accent-overlay-rgb: 255,250,243;
  --border: #d5b99d; --shadow: 0 18px 42px -22px rgba(61,38,25,.32); --card-highlight-rgb: 205,145,84;
}
/* Theme swatches preview the actual family, not a generic accent dot. */
.theme-swatch[data-theme="forest"] { background: linear-gradient(145deg,#fafcf9 0 48%,#194c39 49% 100%); }
.theme-swatch[data-theme="onyx"] { background: linear-gradient(145deg,#29292e 0 48%,#eadbc8 49% 100%); }
.theme-swatch[data-theme="blossom"] { background: linear-gradient(145deg,#fff8fa 0 48%,#7c294b 49% 100%); }
.theme-swatch[data-theme="ember"] { background: linear-gradient(145deg,#fff9f1 0 48%,#5a3424 49% 100%); }
/* The cinematic tile is intentionally a dark surface in every theme. */
.home-card-cinema .home-card-title, .home-card-cinema .home-card-sub { color: #fff; }
/* Placeholders and muted controls inherit the active theme instead of old green literals. */
.home-card-window { background: color-mix(in srgb, var(--accent) 92%, var(--surface)); }
.home-card-window .home-card-title, .home-card-window .home-card-sub { color: var(--on-accent); }
.msg.mine { background: var(--accent); color: var(--on-accent); }
.msg.mine .msg-meta, .msg.mine .msg-ticks { color: color-mix(in srgb, var(--on-accent) 72%, transparent); }
.composer { background: var(--surface); border-color: var(--border); color: var(--ink); }
.composer textarea { color: var(--ink); }
.composer textarea::placeholder { color: var(--ink-dim); opacity: .78; }
.btn-solid, .send-btn { background: var(--accent); color: var(--on-accent); }

/* Espace receipt language: three structurally different states.
   Sent is a quiet ring. Delivered becomes a double ring. Read becomes a
   filled signal with a restrained one-shot pulse. Colour reinforces state,
   but the shape remains understandable without colour. */
html[data-theme="forest"] { --receipt-sent: #a8b7ad; --receipt-delivered: #d7e1da; --receipt-seen: #61b7df; }
html[data-theme="onyx"] { --receipt-sent: #77736e; --receipt-delivered: #aaa49d; --receipt-seen: #6fc7e8; }
html[data-theme="blossom"] { --receipt-sent: #b997a5; --receipt-delivered: #ead8df; --receipt-seen: #58afd3; }
html[data-theme="ember"] { --receipt-sent: #b99f8b; --receipt-delivered: #e6d7c8; --receipt-seen: #58afd3; }
.msg.mine .msg-ticks { color: var(--receipt-sent); opacity: 1; }
.msg.mine .msg-ticks.msg-ticks-delivered { color: var(--receipt-delivered); }
.msg.mine .msg-ticks.msg-ticks-seen { color: var(--receipt-seen); }
.msg.theirs .msg-ticks { color: var(--ink-dim); opacity: .9; }

/* v10: Home attention rail. Quiet, editorial, and actionable. */
.home-attention {
  margin: 0 0 1rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft) 6%);
  box-shadow: var(--shadow);
}
.home-attention-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:0 .25rem .45rem; }
.home-attention-kicker { font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); font-weight:800; }
.home-attention-count { font-size:.7rem; color:var(--ink-dim); }
.home-attention-list { display:grid; gap:.35rem; }
.home-attention-item {
  width:100%; min-height:58px; display:flex; align-items:center; gap:.75rem; padding:.7rem .65rem;
  border:0; border-radius:14px; background:transparent; color:var(--ink); text-align:left; cursor:pointer;
}
.home-attention-item:hover { background:var(--surface-2); }
.home-attention-item:active { transform:scale(.995); }
.home-attention-mark { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.08); }
.home-attention-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:.18rem; }
.home-attention-copy strong { font-size:.84rem; line-height:1.2; font-weight:750; }
.home-attention-copy small { font-size:.72rem; line-height:1.25; color:var(--ink-dim); }
.home-attention-arrow { font-size:1.25rem; color:var(--ink-dim); line-height:1; }

/* v10: mobile-first calling. The call surface is the experience, not a desktop card. */
.call-overlay { padding:0; align-items:stretch; justify-content:stretch; background:var(--bg); backdrop-filter:none; }
.call-card { width:100%; max-width:none; min-height:100%; border:0; border-radius:0; padding:calc(1.2rem + env(safe-area-inset-top)) 1.25rem calc(1.2rem + env(safe-area-inset-bottom)); background:var(--bg); box-shadow:none; gap:1.4rem; justify-content:space-between; }
.call-card::before { content:'ESPACE'; display:block; align-self:center; font-size:.66rem; font-weight:800; letter-spacing:.28em; color:var(--ink-dim); }
.call-with { margin:auto 0 0; font-size:1.35rem; font-weight:650; letter-spacing:-.02em; }
.call-actions { margin:0 auto; width:100%; gap:1rem; padding-top:.5rem; }
.call-icon-btn { width:64px; height:64px; font-size:1.35rem; box-shadow:none; }
.call-icon-end { background:#b64a43; }
.call-icon-accept { background:#376e55; }
.call-icon-neutral { background:var(--surface); border-color:var(--border); }
.call-media-wrap { flex:1; max-height:68vh; aspect-ratio:auto; min-height:260px; border-radius:24px; }
.call-media-wrap.audio-only { height:auto; min-height:0; max-height:none; aspect-ratio:1; width:min(72vw,280px); margin:auto; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); }
.call-media-wrap.audio-only::before { content:'E'; font-family:"Funnel Display",system-ui,sans-serif; font-size:5rem; font-style:italic; color:var(--accent); }
.call-reserved-box { border-radius:50%; width:min(68vw,250px); height:min(68vw,250px); aspect-ratio:1; margin:auto; background:var(--surface-2); border:1px solid var(--border); }
.call-reserved-avatar { width:58%; }
.call-overlay video.call-video { background:#080808; }
.call-with + .call-media-wrap { margin-top:auto; }
.call-toast { max-width:calc(100vw - 2rem); }
@media (min-width: 700px) {
  .call-card { max-width:520px; min-height:100%; margin:auto; border-left:1px solid var(--border); border-right:1px solid var(--border); }
}

/* v11: attention lives on the feature itself. No extra notification rail. */
.home-card.is-attention,
.window-card.is-attention {
  border-color: color-mix(in srgb, var(--accent-soft) 78%, var(--border));
  background: color-mix(in srgb, var(--surface) 84%, var(--accent-soft) 16%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 35%, transparent),
    0 0 22px color-mix(in srgb, var(--accent-soft) 22%, transparent),
    0 12px 34px -22px rgba(0,0,0,.38);
  animation: homeAttentionGlow 2.4s ease-in-out infinite;
}
.home-card-cinema.is-attention {
  background: color-mix(in srgb, var(--accent) 88%, var(--surface));
  border-color: var(--accent-soft);
}
.home-card.is-attention::after,
.window-card.is-attention::after {
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 13%, transparent), 0 0 14px color-mix(in srgb, var(--accent-soft) 65%, transparent);
}
.home-card.is-attention .home-card-title::after {
  content: " · YOUR TURN";
  color: var(--accent-soft);
  font-size: .56rem;
  letter-spacing: .09em;
  font-weight: 900;
  vertical-align: middle;
  white-space: nowrap;
}
.home-card-cinema.is-attention .home-card-title::after {
  color: var(--on-accent);
  opacity: .82;
}
@keyframes homeAttentionGlow {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-soft) 28%, transparent), 0 0 16px color-mix(in srgb, var(--accent-soft) 15%, transparent), 0 12px 34px -22px rgba(0,0,0,.38); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-soft) 48%, transparent), 0 0 28px color-mix(in srgb, var(--accent-soft) 28%, transparent), 0 12px 34px -22px rgba(0,0,0,.38); }
}

.chat-inline-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.chat-link-preview { display: flex; gap: .7rem; margin-top: .55rem; overflow: hidden; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface-2); color: var(--ink); text-decoration: none; min-height: 4.2rem; }
.chat-link-preview img { width: 5.2rem; min-width: 5.2rem; height: 5.2rem; object-fit: cover; }
.chat-link-preview-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: .12rem; padding: .55rem .65rem .55rem 0; }
.chat-link-preview-domain { font-size: .67rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
.chat-link-preview strong { font-size: .84rem; line-height: 1.2; }
.chat-link-preview small { color: var(--ink-dim); font-size: .72rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-link-preview.is-loading { padding: .65rem .75rem; align-items: center; }
.chat-link-preview.is-loading strong { margin-left: .15rem; }
.watch-voice-btn {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.watch-voice-btn.is-listening {
  animation: watchVoicePulse .9s ease-in-out infinite;
}
@keyframes watchVoicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,90,.22); }
  50% { box-shadow: 0 0 0 8px rgba(255,90,90,0); }
}

.watch-share-unmute {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 5;
}

.watch-share-player audio { display: none; }
.watch-share-unmute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  padding: .75rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

/* Keep the shared media compositor cheap during rotation. */
.watch-share-player video {
  contain: strict;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --- Cinema room redesign: one drawer, two tabs (React / Chat), a single
   toggle button instead of two competing floating controls. Full-bleed
   friendly -- everything here is positioned relative to .watch-stage so it
   overlays the video rather than pushing it around. --- */
.watch-presence-row { display: flex; align-items: center; gap: 0.4rem; }
.watch-presence-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-dim);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.watch-presence-dot[data-state="together"] {
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.22), 0 0 10px rgba(61, 220, 132, 0.55);
  animation: watch-presence-pulse 2.4s ease-in-out infinite;
}
.watch-presence-dot[data-state="away"] {
  background: #f5b942;
  box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.2), 0 0 8px rgba(245, 185, 66, 0.45);
}
.watch-presence-dot[data-state="idle"] { background: var(--ink-dim); box-shadow: none; }
@keyframes watch-presence-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.watch-drawer-toggle {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 55;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.watch-drawer[hidden] { display: none !important; }
.watch-reaction-rail {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 56;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  pointer-events: auto;
}
.watch-reaction-rail button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.28rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.watch-reaction-rail button:hover { transform: scale(1.08); background: rgba(0,0,0,.68); }
.watch-reaction-more { font-size: 1.1rem !important; }
.watch-extra-reactions { display: flex; flex-direction: column; gap: .38rem; }
/* Replaces the old chat-toggle/chat-panel drawer -- a small always-visible
   input pinned to the bottom-right of the watching frame. Typing here
   never opens the real chat or the phone keyboard's full-screen chat
   context; it just spawns a floating bubble (see spawnWhotTaunt) on both
   screens and is not saved anywhere. */
.watch-flash-form {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 57;
  display: flex;
  align-items: center;
  gap: .35rem;
  width: min(220px, 56vw);
  pointer-events: auto;
}
.watch-flash-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 .7rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: .85rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.watch-flash-form input::placeholder { color: rgba(255,255,255,.65); }
.watch-flash-form button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
.watch-flash-form button:hover { transform: scale(1.08); background: rgba(0,0,0,.68); }



/* Cinema library */
.cinema-library { margin: 0 0 1rem; }
.cinema-library-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.65rem; }
.cinema-library-head > div { display:flex; align-items:baseline; gap:.55rem; }
.cinema-library-head strong { font-size:.95rem; }
.cinema-library-head span { color:var(--ink-dim); font-size:.75rem; }
/* No fixed max-height/overflow here any more -- the grid used to be its
   own small cramped scroll-box on top of the page's own scrolling, which
   is what made it feel boxed-in on phone. It now just grows with the page
   like everything else in this panel. */
.cinema-library-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; padding:.1rem; }
/* Now a plain container (used to be the clickable <button> itself) --
   holds two real buttons side by side, the play surface and delete, since
   a <button> can't nest inside another <button>. position:relative is what
   lets the delete button sit pinned in the corner via position:absolute. */
.cinema-library-item { position:relative; min-width:0; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:14px; padding:.45rem; }
.cinema-library-item:hover { transform:translateY(-1px); }
.cinema-library-play { all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:.45rem; width:100%; text-align:left; cursor:pointer; }
.cinema-library-thumb { aspect-ratio:16/9; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--accent); font-size:1.3rem; }
/* min-width:0 on the item above isn't enough by itself to let ellipsis
   truncation work on this flex-column child -- a flex child's default
   min-width is "auto", which lets it grow past its container and push
   outside the card, exactly the overflow reported on phone. It needs its
   own min-width:0 too. */
.cinema-library-name { display:block; width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; font-weight:700; }
.cinema-library-delete {
  position: absolute;
  top: .4rem;
  right: .4rem;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: .85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cinema-library-download {
  position: absolute;
  top: .4rem;
  left: .4rem;
  z-index: 2;
  min-width: 26px;
  height: 26px;
  padding: 0 .3rem;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cinema-library-download.is-downloaded { background: color-mix(in srgb, var(--accent) 70%, #000 30%); }
.cinema-library-download.is-downloading { background: rgba(0, 0, 0, 0.75); cursor: default; }
.cinema-library-item.is-renaming { cursor:default; }
.cinema-library-rename-input { width:100%; min-width:0; box-sizing:border-box; font:inherit; font-size:.78rem; font-weight:700; color:var(--ink); background:var(--surface-2); border:1px solid var(--accent); border-radius:6px; padding:.15rem .35rem; }
.cinema-library-empty { color:var(--ink-dim); font-size:.82rem; margin:.25rem 0; }
@media (max-width: 560px) {
  /* Three tight columns is a PC layout; on a phone-width screen two
     comfortably-sized cards read much better than three cramped ones. */
  .cinema-library-grid { grid-template-columns: repeat(2, 1fr); gap:.6rem; }
}
.msg-context-badge { display:inline-flex; align-items:center; gap:.2rem; margin:0 0 .3rem; padding:.18rem .42rem; border-radius:999px; background:rgba(var(--accent-rgb),.1); color:var(--accent-soft); font-size:.62rem; font-weight:800; letter-spacing:.02em; }

/* v31 Cinema: social controls belong to the actual expanded movie frame.
   The preview player stays clean. */
.watch-stage.expanded .watch-live-bar {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
}
.watch-stage.expanded .watch-reaction-rail {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  max-height: calc(100% - 28px);
  overflow: visible;
  pointer-events: auto;
}
.watch-stage.expanded .watch-flash-form {
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: min(280px, 40vw);
  pointer-events: auto;
}

/* Never show Cinema reactions/flash-input in the normal preview frame. */
.watch-live-bar[hidden] { display: none !important; }

@media (max-height: 560px) and (orientation: landscape) {
  .watch-stage.expanded .watch-reaction-rail {
    gap: .22rem;
    left: calc(env(safe-area-inset-left, 0px) + 8px);
  }
  .watch-stage.expanded .watch-reaction-rail button {
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
  }
  .watch-stage.expanded .watch-flash-form {
    width: min(220px, 46vw);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
  }
  .watch-stage.expanded .watch-flash-form input,
  .watch-stage.expanded .watch-flash-form button {
    height: 32px;
  }
}

/* Cinema solo-first room */
.watch-join-prompt { margin: .7rem 0 1rem; padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--accent-soft) 35%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft) 8%); }
.watch-join-prompt[hidden] { display:none !important; }
.watch-join-title { margin:0; font-weight:800; }
.watch-join-copy { margin:.25rem 0 .65rem; color:var(--ink-dim); font-size:.8rem; line-height:1.4; }
.watch-watching-line { margin:.25rem 0 .7rem; color:var(--accent-soft); font-size:.75rem; font-weight:700; }
.failed-message-actions .tapback-actions { display:flex; gap:.4rem; }

.watch-readycheck { display:none !important; }

/* ========================================================================
   AWA SPACE WORLD LAYER
   This is intentionally an override layer. The original interaction and
   feature CSS remains intact underneath it. AWA changes the atmosphere,
   hierarchy and first impression without rewriting the working app.
   ======================================================================== */
:root {
  --awa-night: #100a25;
  --awa-deep: #17103a;
  --awa-purple: #7548ff;
  --awa-pink: #ff3f8e;
  --awa-orange: #ffb83d;
  --awa-cyan: #35d8d0;
  --awa-cream: #fff6e7;
}

html, body {
  background:
    radial-gradient(70% 55% at 50% -5%, rgba(117,72,255,.23), transparent 68%),
    radial-gradient(55% 50% at 5% 20%, rgba(255,63,142,.10), transparent 70%),
    linear-gradient(180deg, #100a25 0%, #15102f 46%, #0d0a1d 100%);
  color: var(--awa-cream);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .16;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 18%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 70%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 45%, #fff 0 1px, transparent 1.5px);
  background-size: 130px 130px, 190px 190px, 240px 240px, 170px 170px;
  animation: awaStars 14s linear infinite;
}

@keyframes awaStars { from { transform: translateY(0); } to { transform: translateY(-18px); } }

.room-shell { background: transparent !important; }
.home-screen {
  position: relative;
  width: min(100%, 980px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(.65rem, env(safe-area-inset-top)) clamp(.9rem, 3vw, 2.2rem) calc(2rem + env(safe-area-inset-bottom));
  overflow-x: hidden;
  color: var(--awa-cream);
}

.home-screen::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  top: -170px;
  right: -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,184,61,.25), transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}

.home-screen::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  top: 300px;
  left: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,216,208,.12), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.home-top-actions {
  position: relative;
  z-index: 3;
  height: 48px;
  margin-bottom: .65rem;
}
.home-top-actions::before { display: none !important; }
.awa-wordmark { display:flex; align-items:baseline; gap:.24rem; line-height:1; }
.awa-wordmark strong {
  font-family:"Funnel Display",system-ui,sans-serif;
  font-size:1.45rem;
  font-weight:800;
  letter-spacing:-.08em;
  background:linear-gradient(90deg,#ffe29a, #ffc35a, #ff9a3d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 14px rgba(255,92,129,.2));
}
.awa-wordmark span { font-size:.57rem; font-weight:800; letter-spacing:.17em; color:rgba(255,246,231,.68); }
.home-top-actions .icon-btn { color:rgba(255,246,231,.75); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(16px); }
.home-top-actions .icon-btn:hover { background:rgba(255,255,255,.13); color:#fff; }

.awa-world-hero {
  position: relative;
  min-height: 255px;
  overflow: hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:30px;
  background:linear-gradient(135deg,#302066 0%,#5b286f 42%,#e35d64 100%);
  box-shadow:0 28px 70px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.18);
  isolation:isolate;
  animation:awaHeroIn .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes awaHeroIn { from{opacity:0; transform:translateY(14px) scale(.985)} to{opacity:1; transform:none} }
.awa-world-copy { position:relative; z-index:4; padding:1.45rem 1.45rem 0; max-width:540px; }
.awa-eyebrow { display:inline-flex; padding:.34rem .55rem; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(10,5,30,.22); backdrop-filter:blur(12px); font-size:.55rem; font-weight:800; letter-spacing:.17em; color:rgba(255,255,255,.76); }
.awa-world-copy h2 { margin:.7rem 0 .35rem; font-family:"Funnel Display",system-ui,sans-serif; font-size:clamp(1.65rem,5vw,2.5rem); line-height:1.02; letter-spacing:-.055em; color:#fff; }
.awa-world-copy p { margin:0; max-width:31em; color:rgba(255,255,255,.76); font-size:.82rem; line-height:1.45; }

.awa-world-scene { position:absolute; inset:0; overflow:hidden; }
.awa-sun,.awa-moon { position:absolute; border-radius:50%; }
.awa-sun { width:112px; height:112px; right:13%; top:42px; background:radial-gradient(circle at 38% 35%,#fff6bd,#ffb83d 58%,rgba(255,184,61,.08) 70%); box-shadow:0 0 70px rgba(255,184,61,.55); }
.awa-moon { width:190px; height:190px; right:-40px; top:-95px; background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.awa-cloud { position:absolute; width:150px; height:28px; border-radius:999px; background:rgba(255,255,255,.12); filter:blur(1px); }
.cloud-one { right:38%; top:98px; transform:scale(.72); }.cloud-two{right:4%;top:144px;transform:scale(.48);opacity:.7;}
.awa-tower { position:absolute; bottom:42px; width:46px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,rgba(32,21,69,.72),rgba(9,7,27,.94)); box-shadow:inset 1px 0 rgba(255,255,255,.06); }
.tower-one{right:31%;height:104px}.tower-two{right:25%;height:72px;width:58px}.tower-three{right:19%;height:128px;width:34px}.tower-four{right:13%;height:83px;width:50px}
.awa-tower::after { content:""; position:absolute; inset:12px 9px 0; background:repeating-linear-gradient(180deg,rgba(255,208,92,.55) 0 3px,transparent 3px 13px); opacity:.5; }
.awa-road { position:absolute; left:36%; right:-8%; bottom:-55px; height:110px; transform:rotate(-5deg); background:linear-gradient(180deg,#2d244d,#0f0b22); border-top:1px solid rgba(255,255,255,.08); }
.awa-road::after { content:""; position:absolute; left:10%; right:4%; top:48%; height:2px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 26px,transparent 26px 54px); opacity:.45; }
.awa-window-light { position:absolute; width:5px;height:5px;border-radius:1px;background:#ffca5a;box-shadow:0 0 10px #ffca5a;opacity:.7;animation:awaLight 3.8s ease-in-out infinite; }
.awa-window-light.one{right:29%;bottom:100px}.awa-window-light.two{right:20%;bottom:145px;animation-delay:1.1s}.awa-window-light.three{right:15%;bottom:83px;animation-delay:2s}
@keyframes awaLight{50%{opacity:.18;transform:scale(.65)} }
.awa-palm { position:absolute; bottom:28px; width:4px; height:100px; background:linear-gradient(#49366c,#16102e); border-radius:999px; transform-origin:bottom; }
.awa-palm::before,.awa-palm::after { content:""; position:absolute; width:70px;height:26px; top:-4px; left:-60px; border-top:7px solid #4f8d69; border-radius:50%; transform:rotate(-17deg); box-shadow:24px 12px 0 -1px #3f7c5d, 47px -8px 0 -1px #5c9a6c; }
.awa-palm::after { left:0; transform:rotate(22deg) scaleX(-1); opacity:.82; }.palm-one{left:8%;height:116px;transform:rotate(4deg)}.palm-two{right:5%;height:92px;transform:rotate(-6deg);opacity:.7}

.awa-section-head { position:relative; z-index:2; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:1.15rem .15rem .45rem; }
.awa-section-head span { font-family:"Funnel Display",system-ui,sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.02em; }
.awa-section-head small { font-size:.62rem; color:rgba(255,246,231,.52); }

.home-contact-row {
  position:relative; z-index:2; min-height:112px; padding:1rem 1.05rem; border:1px solid rgba(255,255,255,.11); border-radius:22px; background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.045)); box-shadow:0 18px 40px -30px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.09); color:#fff;
}
.home-contact-row:hover { background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055)); }
.home-contact-row .avatar-slot { box-shadow:0 0 0 4px rgba(255,255,255,.08),0 10px 28px -15px rgba(0,0,0,.8); }
.home-contact-name { font-family:"Funnel Display",system-ui,sans-serif; color:#fff; font-size:1.4rem; font-weight:700; }
.home-contact-preview { color:rgba(255,255,255,.56); }
.home-contact-meta { color:#fff; }
.home-contact-meta .dot { box-shadow:0 0 12px #35d8a0; }

.awa-quick-actions { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.8rem; }
.awa-quick { min-height:92px; border:1px solid rgba(255,255,255,.11); border-radius:20px; padding:.8rem; color:#fff; text-align:left; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 18px 34px -26px rgba(0,0,0,.75); transition:transform .18s ease,filter .18s ease; overflow:hidden; position:relative; }
.awa-quick::after { content:""; position:absolute; width:80px;height:80px; border-radius:50%; right:-24px;bottom:-32px; background:rgba(255,255,255,.13); }
.awa-quick:hover { transform:translateY(-3px); filter:brightness(1.08); }.awa-quick:active{transform:scale(.98)}
.awa-quick span{font-size:1.25rem}.awa-quick b{font-size:.78rem;font-weight:800}.awa-quick small{font-size:.59rem;color:rgba(255,255,255,.62)}
.awa-quick.play{background:linear-gradient(145deg,#6844ed,#39218c)}.awa-quick.watch{background:linear-gradient(145deg,#f43d8c,#922e78)}.awa-quick.connect{background:linear-gradient(145deg,#0fbfbb,#176b91)}

.window-card { position:relative; z-index:2; min-height:112px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035)); box-shadow:0 18px 42px -30px rgba(0,0,0,.8); color:#fff; }
.window-card:hover { border-color:rgba(255,255,255,.24); }
.window-card-title{color:#fff}.window-card-sub{color:rgba(255,255,255,.6)}.window-card-kicker{color:#ffca5a}.window-card-action{background:#ffb42e; color:#fff; box-shadow:0 8px 22px -12px rgba(255,63,142,.7)}

.home-cards { position:relative; z-index:2; gap:.65rem; margin-top:.95rem; }
.home-cards::before { content:"Things to do together"; color:rgba(255,246,231,.55); margin-bottom:.25rem; }
.home-card { min-height:116px; border:1px solid rgba(255,255,255,.10); border-radius:22px; color:#fff; background:rgba(255,255,255,.075); box-shadow:0 18px 38px -30px rgba(0,0,0,.85),inset 0 1px rgba(255,255,255,.08); }
.home-card:hover { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.105); transform:translateY(-2px); }
.home-card-title{color:#fff}.home-card-sub{color:rgba(255,255,255,.57)}
.home-card-cinema { min-height:100px; background:linear-gradient(135deg,#352064,#b22e72,#e0645b); border-color:rgba(255,255,255,.16); }
.home-card-whot { background:linear-gradient(145deg,#7c4d13,#d7922f); }.home-card-deck{background:linear-gradient(145deg,#76233e,#d94b72)}.home-card-words{background:linear-gradient(145deg,#075e62,#18a99e)}.home-card-sync{background:linear-gradient(145deg,#2b3f89,#6954d9)}

/* Keep the original functional overlays legible against the new world. */
.settings-overlay,.lock-overlay,.call-overlay { backdrop-filter:blur(18px); }

@media (min-width:760px) {
  .home-screen { padding-top:1rem; }
  .awa-world-hero { min-height:300px; }
  .awa-world-copy { padding:1.8rem 1.8rem 0; }
  .awa-quick-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-cards { grid-template-columns:repeat(4,1fr); }
  .home-card-cinema { grid-column:1 / -1; }
}

@media (max-width:430px) {
  .awa-world-hero { min-height:242px; border-radius:25px; }
  .awa-world-copy { padding:1.15rem 1.1rem 0; }
  .awa-world-copy h2 { font-size:1.62rem; }
  .awa-world-copy p { max-width:19em; font-size:.76rem; }
  .awa-sun { width:80px;height:80px;right:8%;top:65px; }
  .awa-tower { transform:scale(.78); transform-origin:bottom right; }
  .awa-quick { min-height:84px; padding:.7rem; }
  .home-contact-row { min-height:100px; }
}

/* AWA splash: entering a world, not opening a utility. */
.splash-overlay { background:#0b0719 !important; }
.splash-overlay::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 32%,rgba(117,72,255,.4),transparent 32%),linear-gradient(180deg,#100a25,#070510); }
.splash-card { position:relative; overflow:hidden; width:min(92vw,440px); min-height:540px; padding:0 1.25rem 1.8rem; border:1px solid rgba(255,255,255,.13); border-radius:32px; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); box-shadow:0 40px 100px -50px rgba(0,0,0,.95); backdrop-filter:blur(18px); justify-content:flex-end; }
.awa-splash-scene { position:absolute; inset:0 0 43%; overflow:hidden; background:linear-gradient(180deg,#312069 0%,#e85c69 72%,#ffb83d 100%); }
.awa-splash-scene::after { content:""; position:absolute; left:-10%;right:-10%;bottom:-42px;height:100px;border-radius:50%;background:#100a25; }
.awa-splash-sun { position:absolute;width:100px;height:100px;right:22%;top:62px;border-radius:50%;background:#ffc955;box-shadow:0 0 70px #ffb83d; }
.awa-splash-city { position:absolute;left:10%;right:10%;bottom:25px;height:90px;background:linear-gradient(90deg,transparent 0 5%,#19102f 5% 14%,transparent 14% 17%,#20153a 17% 26%,transparent 26% 30%,#17102f 30% 40%,transparent 40% 43%,#24173e 43% 52%,transparent 52% 55%,#17102f 55% 66%,transparent 66% 69%,#22153a 69% 78%,transparent 78% 82%,#160e2a 82% 100%);opacity:.9; }
.awa-splash-tower { position:absolute;right:47%;bottom:27px;width:22px;height:142px;background:linear-gradient(90deg,#130d27,#403064,#130d27);border-radius:5px 5px 0 0;box-shadow:0 0 20px rgba(255,255,255,.08); }
.awa-splash-tower::after { content:"";position:absolute;top:-24px;left:10px;width:2px;height:25px;background:#ffce61;box-shadow:0 0 9px #ffce61; }
.awa-splash-palm { position:absolute;bottom:26px;width:4px;height:105px;background:#1a1730;border-radius:99px; }.awa-splash-palm.left{left:8%;transform:rotate(-7deg)}.awa-splash-palm.right{right:8%;transform:rotate(7deg)}
.awa-splash-palm::after { content:"✦"; position:absolute; top:-23px; left:-13px; font-size:30px; color:#4f936e; transform:rotate(18deg); }
.awa-logo { position:relative; z-index:3; font-family:"Funnel Display",system-ui,sans-serif; font-size:3.3rem; font-weight:800; letter-spacing:-.09em; line-height:.8; background:linear-gradient(90deg,#ffe29a, #ffc35a, #ff9a3d);-webkit-background-clip:text;background-clip:text;color:transparent; }
.awa-logo span { display:block; margin-left:1.8rem; margin-top:.15rem; font-size:1.1rem; letter-spacing:.06em; color:#fff; -webkit-text-fill-color:#fff; transform:skew(-8deg); }
.splash-kicker { position:relative;z-index:2;margin:.75rem 0 .4rem;font-size:.56rem;letter-spacing:.16em;color:rgba(255,255,255,.55); }
.splash-welcome { position:relative;z-index:2;margin:0 0 1rem;font-family:"Funnel Display",system-ui,sans-serif;font-size:1.05rem;color:#fff; }
.splash-card .btn-solid { position:relative;z-index:2;width:100%;min-height:52px;border:0;border-radius:18px;background:#ffb42e;color:#fff;font-weight:800;box-shadow:0 14px 34px -16px rgba(255,63,142,.7); }

/* Rebrand legacy chrome without touching feature IDs. */
.update-banner { background:#ffb42e !important; color:#fff !important; }

/* ========================================================================
   AWA SPACE VISUAL IDENTITY / PASS 01
   The product is a place, not a dashboard. Warm daylight, living previews,
   soft glass, playful motion, and the same visual grammar across every room.
   This layer is visual only. Existing mechanics stay untouched.
   ======================================================================== */

:root {
  --awa-cream: #fff7e8;
  --awa-paper: #fffaf2;
  --awa-ink: #f6f1fb;
  --awa-plum: #5a2f68;
  --awa-coral: #ef6b63;
  --awa-gold: #f5b942;
  --awa-teal: #2b9b91;
  --awa-lilac: #8a72d8;
}

body {
  background:
    radial-gradient(80% 55% at 10% 0%, rgba(245,185,66,.14), transparent 60%),
    radial-gradient(75% 60% at 100% 15%, rgba(239,107,99,.12), transparent 58%),
    linear-gradient(145deg, #182036 0%, #1c2338 48%, #1f2639 100%);
}

/* HOME: a night sky, spacious and alive -- not a dashboard. */
#homeScreen {
  position: relative;
  background:
    radial-gradient(90% 42% at 50% 0%, rgba(255,211,112,.10), transparent 70%),
    linear-gradient(180deg, rgba(24, 32, 54,.4), rgba(24, 32, 54,.85));
}
#homeScreen::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -100px;
  top: 300px;
  border-radius: 50%;
  background: rgba(138,114,216,.14);
  filter: blur(25px);
  pointer-events: none;
  animation: awaAmbientFloat 8s ease-in-out infinite;
}
#homeScreen::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -90px;
  top: 470px;
  border-radius: 50%;
  background: rgba(239,107,99,.14);
  filter: blur(24px);
  pointer-events: none;
  animation: awaAmbientFloat 10s ease-in-out infinite reverse;
}
@keyframes awaAmbientFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(12px,-18px,0); }
}

.home-top-actions { margin-bottom: .9rem; }
.awa-wordmark strong {
  background: linear-gradient(100deg, #ffd36a, #ef6b63 52%, #a67fe0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: none;
}
.awa-wordmark span { color: rgba(246,241,251,.65); }
.home-top-actions .icon-btn {
  color: #f6f1fb;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px -20px rgba(0,0,0,.6);
}

.awa-world-hero {
  min-height: 275px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.75);
  background:
    radial-gradient(circle at 72% 30%, rgba(255,220,120,.86), transparent 18%),
    linear-gradient(135deg, #6a4b9c 0%, #a55386 38%, #ed7968 70%, #f4b95f 100%);
  box-shadow: 0 26px 60px -36px rgba(86,48,82,.50), inset 0 1px rgba(255,255,255,.65);
}
.awa-world-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(41,26,49,.32));
  pointer-events: none;
}
.awa-eyebrow {
  color: rgba(255,255,255,.84);
  background: rgba(45,28,55,.18);
  border-color: rgba(255,255,255,.25);
}
.awa-world-copy h2 { text-shadow: 0 8px 30px rgba(60,25,55,.18); }
.awa-world-copy p { color: rgba(255,255,255,.84); }
.awa-sun { box-shadow: 0 0 90px rgba(255,205,86,.72); animation: awaSunPulse 5s ease-in-out infinite; }
@keyframes awaSunPulse { 50% { transform: scale(1.045); box-shadow: 0 0 105px rgba(255,205,86,.84); } }
.awa-cloud { animation: awaCloudDrift 16s ease-in-out infinite alternate; }
.cloud-two { animation-delay: -7s; }
@keyframes awaCloudDrift { to { transform: translateX(-28px) scale(.72); } }
.awa-road { background: linear-gradient(180deg,#443653,#211b32); }
.awa-palm::before,.awa-palm::after { filter: saturate(1.25); }

.awa-section-head { margin-top: 1.25rem; }
.awa-section-head span { color: var(--ink); font-size: 1.05rem; }
.awa-section-head small { color: var(--ink-dim); }

.home-contact-row {
  min-height: 112px;
  background:
    radial-gradient(circle at 92% 0%, rgba(245,185,66,.14), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--awa-ink);
  box-shadow: 0 20px 42px -32px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08);
}
.home-contact-row:hover { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); }
.home-contact-name { color: var(--ink); }
.home-contact-preview { color: var(--ink-dim); }
.home-contact-row::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 13px;
  width: 54px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(245,185,66,0), rgba(245,185,66,.7), rgba(239,107,99,0));
  animation: awaBreath 3.2s ease-in-out infinite;
}
@keyframes awaBreath { 50% { transform: scaleX(1.6); opacity: .55; } }

/* Three living destinations. The pseudo-art is deliberately part of the
   card, so the card itself previews the destination instead of behaving like
   a generic button. */
.awa-quick-actions {
  grid-template-columns: 1.12fr .94fr .94fr;
  gap: .72rem;
  margin-top: .85rem;
}
.awa-quick {
  min-height: 148px;
  padding: .9rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 22px 38px -28px rgba(57,35,55,.38), inset 0 1px rgba(255,255,255,.45);
  isolation: isolate;
}
.awa-quick > * { position: relative; z-index: 4; }
.awa-quick span { font-size: 1.45rem; }
.awa-quick b { font-size: .9rem; letter-spacing: -.02em; }
.awa-quick small { font-size: .64rem; color: rgba(255,255,255,.76); }
.awa-quick::before {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}
.awa-quick.play {
  background: linear-gradient(145deg, #7055c9 0%, #9c5ca8 54%, #e17b70 100%);
}
.awa-quick.play::before {
  width: 94px; height: 68px; right: -8px; top: 27px;
  background:
    linear-gradient(155deg, transparent 0 20%, rgba(255,255,255,.88) 21% 28%, transparent 29% 46%, rgba(255,218,116,.94) 47% 54%, transparent 55% 100%);
  transform: rotate(-13deg);
  animation: awaCards 3.2s ease-in-out infinite;
}
.awa-quick.play::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 42px; height: 58px; right: 26px; top: 30px;
  border-radius: 7px;
  background: linear-gradient(145deg,#fff9ef,#f1d7a2);
  box-shadow: 8px 8px 0 rgba(69,37,91,.26), 0 12px 25px rgba(45,20,50,.24);
  transform: rotate(8deg);
  animation: awaCardLift 3.2s ease-in-out infinite;
}
@keyframes awaCards { 50% { transform: translate(-8px,4px) rotate(-18deg); } }
@keyframes awaCardLift { 50% { transform: translate(5px,-6px) rotate(14deg); } }

.awa-quick.watch { background: linear-gradient(145deg,#ee776c 0%, #df5c7c 50%, #8b5bb8 100%); }
.awa-quick.watch::before {
  width: 112px; height: 72px; right: -18px; top: 25px;
  border-radius: 12px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.76) 0 17px, rgba(255,255,255,.16) 17px 25px);
  opacity: .72;
  transform: rotate(-7deg);
  animation: awaFilm 5s linear infinite;
}
.awa-quick.watch::after {
  content: "▶";
  position: absolute;
  z-index: 2;
  right: 31px; top: 40px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  color: #b6537a;
  box-shadow: 0 8px 24px rgba(71,27,65,.24);
  animation: awaPlayPulse 2.8s ease-in-out infinite;
}
@keyframes awaFilm { to { transform: translateX(-30px) rotate(-7deg); } }
@keyframes awaPlayPulse { 50% { transform: scale(1.08); box-shadow: 0 10px 30px rgba(255,255,255,.24); } }

.awa-quick.connect { background: linear-gradient(145deg,#37a59c 0%, #4f9db8 55%, #6572bf 100%); }
.awa-quick.connect::before {
  width: 92px; height: 92px; right: -10px; top: 18px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 12px rgba(255,255,255,.06), 0 0 0 24px rgba(255,255,255,.035);
  animation: awaMoment 3.6s ease-in-out infinite;
}
.awa-quick.connect::after {
  content: "✦";
  position: absolute; right: 33px; top: 38px; z-index: 3;
  font-size: 2rem; color: #fff3b0;
  animation: awaSpark 2.5s ease-in-out infinite;
}
@keyframes awaMoment { 50% { transform: scale(1.12); opacity: .72; } }
@keyframes awaSpark { 50% { transform: translateY(-4px) rotate(12deg); opacity: .72; } }

/* The old feature pile remains mounted for existing notification logic, but
   Home's identity is now carried by the three living destinations above. */
.home-cards { display: none !important; }
.window-card {
  min-height: 96px;
  margin-top: .2rem;
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.14);
  color: var(--ink);
  box-shadow: 0 18px 40px -32px rgba(0,0,0,.5);
}
.window-card-title { color: var(--ink); }
.window-card-sub { color: var(--ink-dim); }
.window-card-kicker { color: var(--accent-soft); }

/* CHAT: familiar mechanics, unmistakably AwaSpace atmosphere. */
.chat-topbar {
  background: linear-gradient(180deg, rgba(31,38,57,.96), rgba(24, 32, 54,.91));
  border-bottom-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px -28px rgba(0,0,0,.6);
}
.chat-log {
  background:
    radial-gradient(420px 260px at 15% 5%, rgba(245,185,66,.08), transparent 70%),
    radial-gradient(380px 300px at 100% 35%, rgba(138,114,216,.10), transparent 70%),
    linear-gradient(180deg,#182036 0%,#1c2338 100%);
}
.chat-log::before {
  content: "AwaSpace";
  position: fixed;
  left: 50%;
  top: 44%;
  transform: translate(-50%,-50%) rotate(-10deg);
  font-size: 3.8rem;
  font-weight: 900;
  letter-spacing: -.08em;
  color: rgba(255,255,255,.035);
  pointer-events: none;
  z-index: 0;
}
.msg { z-index: 1; }
.msg.theirs {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.12);
  color: var(--ink);
  box-shadow: 0 10px 20px -18px rgba(0,0,0,.5);
}
.msg.mine {
  background: linear-gradient(160deg,#ffe29a,#ffc35a 55%,#f5a63a);
  color: #2a0f1f;
  box-shadow: 0 12px 24px -18px rgba(0,0,0,.5);
}
.msg-status { color: inherit; opacity: .62; }
.chat-form,
.composer-extra { background: rgba(31,38,57,.96); border-top-color: rgba(255,255,255,.08); }
.chat-input-pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: var(--ink); }
.chat-input-pill:focus-within { outline-color: var(--accent-soft); }
.chat-send-btn { background: linear-gradient(145deg,#ffd36a,#f5a63a); color: #2a0f1f; box-shadow: 0 8px 18px -12px rgba(0,0,0,.5); }

/* SETTINGS: same world, but arranged like a calm control room rather than
   a generic list. */
.settings-overlay {
  justify-content: center;
  background: rgba(10,6,18,.58);
  backdrop-filter: blur(20px);
  padding: max(.6rem, env(safe-area-inset-top)) .6rem max(.6rem, env(safe-area-inset-bottom));
}
.settings-panel {
  width: min(100%, 620px);
  max-width: 620px;
  height: min(100%, 900px);
  margin: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background:
    radial-gradient(70% 35% at 100% 0%, rgba(239,107,99,.10), transparent 70%),
    linear-gradient(180deg,#1f2639,#1c2338);
  box-shadow: 0 30px 90px -35px rgba(0,0,0,.6);
  padding: 1rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  gap: .8rem;
  color: var(--ink);
}
.settings-panel-header {
  padding: .35rem .25rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.settings-panel-title {
  font-family: "Funnel Display",system-ui,sans-serif;
  font-style: normal;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--ink);
}
.settings-close-btn {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.12);
  color: var(--ink);
}
.settings-section {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: .95rem;
  gap: .65rem;
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 30px -26px rgba(0,0,0,.5);
}
.settings-section:first-of-type { border-top: 1px solid rgba(255,255,255,.1); padding-top: .95rem; }
.settings-section-title {
  color: var(--accent-soft);
  letter-spacing: .12em;
  font-size: .64rem;
}
.settings-section .btn {
  border-radius: 14px;
}
.settings-section .notif-hint { color: var(--ink-dim); }
.settings-section:has(#themeRow) { display: none !important; }
.avatar-pick-btn { background: rgba(255,255,255,.08); border-color: transparent; }
.avatar-pick-btn.avatar-pick-selected { border-color: var(--accent-soft); background: rgba(242,166,92,.14); }
.lock-settings-panel { background: rgba(255,255,255,.05); border-radius: 16px; padding: .8rem; }

/* Give the Games room the same atmosphere even before individual games are
   redesigned. Existing game mechanics and actual cards are untouched. */
.games-overlay { background: linear-gradient(180deg,#1c2338,#182036); }
.games-panel { background: transparent; }
.games-panel-title { font-family:"Funnel Display",system-ui,sans-serif; font-style:normal; font-weight:800; letter-spacing:-.045em; }

@media (max-width: 560px) {
  .settings-overlay { padding: 0; }
  .settings-panel { height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
  .awa-quick-actions { grid-template-columns: 1.08fr .96fr .96fr; }
  .awa-quick { min-height: 142px; }
}

/* ========================================================================
   AWA SPACE HOME / EXPERIENCE WINDOWS PASS
   Home is a set of living portals, not a pile of feature cards.
   ======================================================================== */
.awa-experience-windows {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr;
  gap:.78rem;
  margin-top:.9rem;
}
.experience-window {
  position:relative;
  display:block;
  width:100%;
  min-height:188px;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(74,48,64,.12);
  border-radius:28px;
  text-align:left;
  color:#2d222a;
  background:#fffaf4;
  box-shadow:0 24px 48px -34px rgba(63,38,49,.42), inset 0 1px rgba(255,255,255,.95);
  isolation:isolate;
  transition:transform .2s ease, box-shadow .2s ease;
}
.experience-window:hover { transform:translateY(-3px); box-shadow:0 28px 55px -34px rgba(63,38,49,.5),inset 0 1px rgba(255,255,255,.95); }
.experience-window:active { transform:scale(.992); }
.experience-kicker { position:relative;z-index:8;display:block;font-size:.54rem;font-weight:900;letter-spacing:.18em;color:rgba(54,39,48,.58); }
.experience-title { position:relative;z-index:8;display:block;margin-top:.18rem;font-family:"Funnel Display",system-ui,sans-serif;font-size:1.15rem;font-weight:800;letter-spacing:-.045em; }
.experience-live { position:absolute;z-index:9;right:.85rem;top:.85rem;font-size:.52rem;font-weight:800;color:rgba(255,255,255,.82);padding:.34rem .48rem;border-radius:999px;background:rgba(33,20,35,.22);backdrop-filter:blur(10px); }
.experience-live i,.chat-window-seen i { display:inline-block;width:6px;height:6px;border-radius:50%;background:#52d39c;box-shadow:0 0 9px rgba(82,211,156,.9);margin-right:4px; }

/* Whot portal */
.experience-window-play {
  min-height:252px;
  color:#fff;
  background:linear-gradient(145deg,#69438b 0%,#a6547d 48%,#e67b5e 100%);
  border-color:rgba(255,255,255,.28);
}
.experience-window-play .experience-kicker { color:rgba(255,255,255,.7); }
.experience-window-play .experience-title { font-size:1.3rem; }
.experience-whot-stage { position:absolute;inset:54px .7rem .45rem;z-index:2;border-radius:21px;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(247,205,117,.22),transparent 28%),linear-gradient(145deg,#5c3a62,#322342);box-shadow:inset 0 1px rgba(255,255,255,.14),0 18px 30px -22px rgba(25,10,29,.8); }
.experience-whot-stage::after { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,transparent 0 25%,rgba(0,0,0,.17) 70%);pointer-events:none; }
.experience-whot-stage .whot-mini-scene { transform:scale(1.02);transform-origin:center; }
.experience-whot-stage .whot-mini-table { background:radial-gradient(ellipse at center,#8b5a3b 0%,#6c402f 62%,#432a2b 100%);box-shadow:inset 0 0 0 1px rgba(255,210,155,.16),inset 0 0 45px rgba(29,13,25,.3); }
.experience-whot-stage .whot-mini-player-name { color:rgba(255,255,255,.88); }

/* Cinema portal */
.experience-window-cinema { min-height:205px; color:#fff; background:linear-gradient(135deg,#21152f 0%,#5b285e 48%,#a9446c 100%);border-color:rgba(255,255,255,.18); }
.experience-window-cinema::before { content:"";position:absolute;inset:auto -10% -40px;height:130px;background:radial-gradient(ellipse at center,rgba(255,197,96,.24),transparent 63%);filter:blur(4px); }
.experience-window-cinema .experience-kicker { color:rgba(255,255,255,.58); }
.experience-window-cinema .experience-title { max-width:13em; }
.cinema-shelf { position:absolute;left:.7rem;right:.7rem;top:77px;bottom:27px;display:flex;align-items:center;gap:.65rem;overflow:hidden;z-index:4; }
.cinema-service { flex:0 0 auto;display:grid;place-items:center;height:78px;min-width:112px;padding:.55rem .8rem;border-radius:18px;background:rgba(255,255,255,.095);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 25px -22px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.1);font-weight:900;letter-spacing:-.05em;animation:awaCinemaSlide 11s linear infinite; }
.cinema-service.youtube { font-size:1.12rem; }.cinema-service.youtube span{font-weight:500;}.cinema-service.tiktok{font-size:1.12rem;animation-delay:-2.7s}.cinema-service.netflix{font-size:1rem;letter-spacing:.06em;animation-delay:-5.4s}.cinema-service.awa-movies{font-size:.92rem;letter-spacing:.02em;animation-delay:-8.1s}.cinema-service.awa-movies b{font-size:.52rem;letter-spacing:.15em;color:#ffca5a;}
@keyframes awaCinemaSlide { 0%,100%{transform:translateY(8px) rotate(-2deg);opacity:.76}50%{transform:translateY(-8px) rotate(2deg);opacity:1} }
.cinema-film-strip { position:absolute;left:1rem;right:1rem;bottom:11px;display:flex;gap:5px;z-index:3;opacity:.55; }
.cinema-film-strip i{height:3px;flex:1;border-radius:99px;background:linear-gradient(90deg,#ffc65d,#ff7b7b);animation:filmPulse 2.2s ease-in-out infinite;}.cinema-film-strip i:nth-child(2){animation-delay:.2s}.cinema-film-strip i:nth-child(3){animation-delay:.4s}.cinema-film-strip i:nth-child(4){animation-delay:.6s}.cinema-film-strip i:nth-child(5){animation-delay:.8s}
@keyframes filmPulse{50%{opacity:.28;transform:scaleY(.6)}}

/* Chat portal -- a calm night-harbor blue/teal, the one portal that isn't
   sunset-hot by design (this is the quiet, always-on one), but still dark
   and vibrant like its three siblings instead of the pale cream card that
   used to sit here. */
.experience-window-chat { min-height:202px; color:#fff; background:linear-gradient(145deg,#122038 0%,#1d5872 52%,#3aa492 100%); border-color:rgba(255,255,255,.18); }
.experience-window-chat .experience-kicker { color:rgba(255,255,255,.62); }
.experience-window-chat::before { content:"";position:absolute;width:150px;height:150px;right:-45px;top:-55px;border-radius:50%;background:rgba(255,211,106,.14);filter:blur(8px); }
.chat-window-avatar { position:absolute;z-index:5;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-weight:900;font-size:.68rem;color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:0 7px 15px -8px rgba(5,15,25,.55); }
.avatar-dale { right:1.05rem;top:1.05rem;background:linear-gradient(135deg,#6b4b9d,#d96868); }.avatar-lumi{right:1.72rem;top:1.05rem;transform:translateX(-25px);background:linear-gradient(135deg,#e5a13c,#d65e7e);}
.chat-window-bubbles { position:absolute;left:1rem;right:1rem;top:70px;bottom:29px;display:flex;flex-direction:column;align-items:flex-start;gap:.36rem;z-index:4; }
.chat-window-bubbles .bubble { max-width:78%;padding:.48rem .66rem;border-radius:15px;font-size:.66rem;line-height:1.25;box-shadow:0 8px 15px -12px rgba(5,15,25,.4);animation:bubbleFloat 4.5s ease-in-out infinite; }
.chat-window-bubbles .theirs { color:#fff;background:rgba(255,255,255,.16);border-bottom-left-radius:5px; }.chat-window-bubbles .mine{align-self:flex-end;color:#122038;background:linear-gradient(135deg,#ffd36a,#f2a65c);border-bottom-right-radius:5px;animation-delay:-1.5s}.chat-window-bubbles .bubble:nth-child(3){animation-delay:-3s;}
@keyframes bubbleFloat{50%{transform:translateY(-2px)}}
.chat-window-seen{position:absolute;z-index:8;left:1rem;bottom:.72rem;font-size:.55rem;color:rgba(255,255,255,.65);font-weight:700;}.chat-window-seen i{margin-left:4px;margin-right:0;}

/* Moments portal */
.experience-window-moments { min-height:225px;color:#fff;background:#232b42;border-color:rgba(255,255,255,.16); }
.experience-window-moments .experience-kicker{color:rgba(255,255,255,.64)}
.experience-window-moments .experience-title{max-width:12em;}
.moment-scene{position:absolute;z-index:2;left:.65rem;right:.65rem;top:68px;bottom:31px;overflow:hidden;border-radius:20px;background:linear-gradient(155deg,#f4b95e 0%,#e77c69 42%,#744f9c 100%);box-shadow:inset 0 1px rgba(255,255,255,.2),0 15px 30px -23px rgba(0,0,0,.65);}
.moment-scene::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-36px;height:105px;border-radius:50%;background:linear-gradient(180deg,#382846,#182036);transform:rotate(-5deg);}
.moment-sun{position:absolute;right:18%;top:18px;width:54px;height:54px;border-radius:50%;background:#ffd36b;box-shadow:0 0 45px rgba(255,211,107,.75);}
.moment-person{position:absolute;bottom:29px;width:38px;height:78px;border-radius:20px 20px 7px 7px;background:linear-gradient(180deg,#4a3156,#241a32);}.moment-person::before{content:"";position:absolute;left:7px;top:-20px;width:24px;height:24px;border-radius:50%;background:#c88769;}.moment-person.p1{left:31%;transform:rotate(-5deg)}.moment-person.p2{left:49%;height:66px;transform:rotate(8deg);background:linear-gradient(180deg,#6b3f53,#2b1d30)}.moment-spark{position:absolute;color:#fff1ad;text-shadow:0 0 12px rgba(255,225,126,.75);animation:momentSpark 2.6s ease-in-out infinite}.moment-spark.s1{left:44%;top:37px}.moment-spark.s2{left:61%;top:64px;animation-delay:-1.1s}@keyframes momentSpark{50%{transform:translateY(-5px) scale(1.15);opacity:.7}}
.moment-caption{position:absolute;z-index:7;left:1rem;bottom:.62rem;font-size:.56rem;color:rgba(255,255,255,.7);font-weight:700;}.experience-window-moments .window-card-action{position:absolute;z-index:8;right:.8rem;bottom:.55rem;padding:.28rem .5rem;border-radius:999px;font-size:.5rem;background:rgba(255,255,255,.14);color:#fff;box-shadow:none;}

/* The old quick-action row is now represented by the portals. Keep the
   legacy nodes mounted because their IDs are still used by the app. */
.awa-quick-actions { display:none !important; }
.home-cards { display:none !important; }

@media (min-width:760px) {
  .awa-experience-windows { grid-template-columns:1.08fr .92fr; }
  .experience-window-play,.experience-window-cinema { min-height:280px; }
  .experience-window-play { grid-row:span 2; }
}
@media (max-width:430px) {
  .awa-world-hero { min-height:215px; }
  .home-contact-row { min-height:86px; }
  .experience-window-play { min-height:238px; }
  .experience-window-cinema { min-height:188px; }
  .experience-window-chat { min-height:190px; }
  .experience-window-moments { min-height:210px; }
}

/* Peek interaction: holding the existing chat row is a temporary peek.
   Releasing it closes the peek immediately. */
.home-peek-panel { touch-action:none; }

/* Experience-window alignment refinement: labels live above the experience,
   never inside the live content. */
.awa-experience-windows { align-items:stretch; }
.experience-window { padding: .82rem; min-width:0; }
.experience-window .experience-title { position:relative; z-index:20; margin:0; min-height:1.65rem; line-height:1.1; }
.experience-window-play .experience-title,
.experience-window-cinema .experience-title,
.experience-window-chat .experience-title,
.experience-window-moments .experience-title { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.experience-live,.experience-kicker { display:none !important; }

/* Whot: the title is a clean header, while the entire lower area is the game. */
.experience-whot-stage { inset:2.45rem .62rem .55rem; }
.experience-window-play { min-height:252px; }

/* Cinema: recognizable service marks, not plain words. */
.experience-window-cinema { min-height:205px; }
.cinema-shelf { position:absolute; left:.62rem; right:.62rem; top:2.55rem; bottom:.62rem; display:flex; align-items:center; gap:.55rem; overflow:hidden; z-index:4; padding:.12rem .05rem; }
.cinema-service { flex:0 0 108px; height:102px; min-width:108px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.34rem; padding:.65rem .55rem; border-radius:18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.13); box-shadow:0 16px 25px -22px rgba(0,0,0,.8), inset 0 1px rgba(255,255,255,.12); animation:awaCinemaDrift 5.5s ease-in-out infinite; }
.cinema-service svg { width:39px; height:39px; display:block; flex:0 0 auto; }
.cinema-service b { font-size:.67rem; letter-spacing:-.02em; color:#fff; white-space:nowrap; }
.cinema-service.youtube b { font-size:.7rem; }
.cinema-service.tiktok svg { width:30px; height:34px; }
.cinema-service.netflix svg { width:29px; height:36px; }
.cinema-service.awa-movies strong { font-size:1.15rem; letter-spacing:-.08em; color:#fff; }
.cinema-service.awa-movies b { font-size:.46rem; letter-spacing:.16em; color:#ffca5a; }
.cinema-service:nth-child(2){animation-delay:-1.2s}.cinema-service:nth-child(3){animation-delay:-2.4s}.cinema-service:nth-child(4){animation-delay:-3.6s}
@keyframes awaCinemaDrift { 0%,100%{transform:translateY(5px);opacity:.82}50%{transform:translateY(-5px);opacity:1} }
.cinema-film-strip { display:none !important; }

/* Chat: title above the conversation, with no text crossing the bubbles. */
.experience-window-chat { min-height:202px; }
.chat-window-bubbles { left:.82rem; right:.82rem; top:3rem; bottom:2.05rem; overflow:hidden; }
.chat-window-bubbles .bubble { position:relative; z-index:3; }
.chat-window-seen { left:.82rem; bottom:.62rem; right:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Moments: one clear title, then the visual moment. */
.experience-window-moments { min-height:225px; }
.experience-window-moments .moment-scene { top:3rem; bottom:2.1rem; }
.experience-window-moments .moment-caption { bottom:.62rem; }

@media (min-width:760px) {
  .awa-experience-windows { grid-template-columns:1.08fr .92fr; }
  .experience-window-play,.experience-window-cinema { min-height:280px; }
  .experience-window-play { grid-row:span 2; }
  .experience-window-cinema { min-height:280px; }
  .experience-window-chat,.experience-window-moments { min-height:214px; }
}

/* ========================================================================
   AWA SPACE DESIGN PASS 05
   Full app build: experience windows + world-class settings
   ======================================================================== */
.awa-experience-windows {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:.72rem !important;
  margin-top:.85rem !important;
}
.experience-window {
  min-width:0 !important;
  min-height:220px !important;
  padding:.72rem !important;
  border-radius:24px !important;
  overflow:hidden !important;
  cursor:pointer;
}
.experience-header {
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:31px;
  padding:0 .12rem .4rem;
}
.experience-title {
  position:static !important;
  margin:0 !important;
  min-height:0 !important;
  font-size:.66rem !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  font-weight:900 !important;
}
.experience-arrow {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:inherit;
  font-size:.78rem;
  font-weight:900;
}
.experience-window-play {
  min-height:220px !important;
  background:linear-gradient(145deg,#5a3b71,#9a4f76 52%,#d97760) !important;
}
.experience-whot-stage {
  position:absolute !important;
  inset:43px .7rem .7rem !important;
  border-radius:19px !important;
}
/* Keep the mini-game itself readable inside the portal. */
.experience-whot-stage .whot-mini-scene { transform:scale(.98) !important; }
.experience-whot-stage .whot-mini-card { transform-origin:center bottom; }

.experience-window-cinema {
  min-height:220px !important;
  background:linear-gradient(145deg,#1c1429,#43234f 55%,#8d3e64) !important;
}
.cinema-grid {
  position:absolute;
  z-index:5;
  left:.72rem;
  right:.72rem;
  top:43px;
  bottom:.72rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:.48rem;
}
.cinema-service {
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  padding:.45rem !important;
  border-radius:15px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.35rem !important;
  flex-direction:column !important;
  animation:none !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.09) !important;
}
.cinema-service b { font-size:.56rem !important; letter-spacing:.02em !important; color:rgba(255,255,255,.82); }
.brand-youtube svg { width:42px; height:auto; display:block; }
.brand-tiktok {
  width:31px;height:31px;display:grid;place-items:center;border-radius:8px;
  color:#fff;font-size:1.45rem;line-height:1;font-weight:900;
  text-shadow:-2px -1px 0 #25f4ee, 2px 1px 0 #fe2c55;
  background:#090909;
}
.brand-netflix {
  color:#e50914;font-family:Impact,"Arial Black",sans-serif;font-size:2.15rem;line-height:.8;
  font-weight:900;transform:scaleX(.8);text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.cinema-service.netflix b { color:#fff; font-size:.52rem !important; letter-spacing:.12em !important; }
.brand-awa {
  font-family:"Funnel Display",system-ui,sans-serif;font-size:1.15rem;font-weight:900;letter-spacing:-.08em;
  color:#ffd36a;
}
.cinema-service.awa-movies b { color:rgba(255,255,255,.68); letter-spacing:.16em !important; }

.experience-window-chat {
  min-height:180px !important;
  background:linear-gradient(145deg,#122038 0%,#1d5872 52%,#3aa492 100%) !important;
}
.chat-window-bubbles {
  position:absolute !important;
  left:.78rem !important;
  right:.78rem !important;
  top:48px !important;
  bottom:30px !important;
  overflow:hidden;
  justify-content:flex-end !important;
  gap:.3rem !important;
}
.chat-window-bubbles .bubble {
  display:block;
  max-width:82% !important;
  padding:.43rem .58rem !important;
  border-radius:13px !important;
  font-size:.59rem !important;
  line-height:1.28 !important;
  animation:none !important;
}
.chat-window-bubbles .bubble small {
  display:block;
  margin-bottom:.14rem;
  font-size:.48rem;
  font-weight:900;
  opacity:.55;
}
.chat-window-bubbles .bubble.mine { align-self:flex-end; }
.chat-preview-empty { align-self:center; margin:auto; color:rgba(255,255,255,.65); font-size:.62rem; }
.chat-window-seen {
  left:.8rem !important;
  bottom:.55rem !important;
  font-size:.5rem !important;
}

.experience-window-moments {
  min-height:180px !important;
}
.moment-scene {
  top:48px !important;
  bottom:.68rem !important;
}
.moment-caption { bottom:.62rem !important; }
.experience-window-moments .window-card-action { bottom:.5rem !important; }

/* The Home should feel like one composition, not a list of four cards. */
.awa-section-head { margin-top:1rem !important; }

/* World-class Settings: same AwaSpace atmosphere, quieter controls. */
.settings-overlay {
  padding:0 !important;
  background:rgba(24,15,24,.58) !important;
  backdrop-filter:blur(22px) !important;
}
.settings-panel {
  width:min(100%,720px) !important;
  max-width:720px !important;
  height:100% !important;
  max-height:none !important;
  border-radius:30px 0 0 30px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  padding:1.1rem 1rem calc(1.8rem + env(safe-area-inset-bottom)) !important;
  overflow:auto !important;
  background:
    radial-gradient(100% 45% at 100% 0%,rgba(226,105,79,.14),transparent 62%),
    radial-gradient(80% 40% at 0% 30%,rgba(119,88,169,.1),transparent 65%),
    linear-gradient(180deg,#1f2639 0%,#1a2134 100%) !important;
  color: var(--ink) !important;
}
.settings-panel-header {
  position:sticky;
  top:-1.1rem;
  z-index:30;
  padding:.35rem .25rem .8rem !important;
  background:linear-gradient(180deg,#1f2639 72%,rgba(31,38,57,0)) !important;
}
.settings-panel-title { font-size:1.65rem !important; color: var(--ink) !important; }
.settings-profile-hero {
  position:relative;
  display:flex;
  align-items:center;
  gap:.8rem;
  margin:.1rem 0 .8rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  box-shadow:0 18px 38px -30px rgba(0,0,0,.55);
}
.settings-profile-avatar { width:54px !important;height:54px !important;flex:0 0 54px; }
.settings-profile-copy { min-width:0;display:flex;flex-direction:column;gap:.08rem; }
.settings-eyebrow { font-size:.5rem;color:var(--accent-soft);font-weight:900;letter-spacing:.16em; }
.settings-profile-copy strong { font-family:"Funnel Display",system-ui,sans-serif;font-size:1.05rem;letter-spacing:-.035em;color:var(--ink); }
.settings-profile-copy span:last-child { color:var(--ink-dim);font-size:.63rem; }
.settings-presence-pill { margin-left:auto;align-self:flex-start;display:flex;align-items:center;gap:.3rem;padding:.36rem .5rem;border-radius:999px;background:rgba(80,195,142,.14);color:#6fe0ad;font-size:.52rem;font-weight:800;white-space:nowrap; }
.settings-presence-pill i { width:6px;height:6px;border-radius:50%;background:#52c98f;box-shadow:0 0 8px rgba(82,201,143,.7); }
.settings-section {
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.1) !important;
  border-radius:0 !important;
  padding:1rem .25rem !important;
  background:transparent !important;
  box-shadow:none !important;
}
.settings-section-title { margin-bottom:.45rem !important;color:var(--accent-soft) !important; }
.settings-section-feature { padding-top:.8rem !important; }
.settings-compact-section { padding:.2rem .25rem !important; }
.settings-row-button,.settings-row-static {
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.65rem;
  padding:.85rem .15rem;border:0;background:transparent;text-align:left;color:var(--ink);
}
.settings-row-button { cursor:pointer; }
.settings-row-button:hover { background:rgba(255,255,255,.08);border-radius:14px; }
.settings-row-button b,.settings-row-static b { display:block;font-size:.78rem; }
.settings-row-button small,.settings-row-static small { display:block;margin-top:.12rem;color:var(--ink-dim);font-size:.59rem; }
.settings-row-value { color:var(--ink-dim);font-size:.57rem;font-weight:800; }
.settings-chevron { color:var(--ink-dim);font-size:1.2rem;line-height:1; }
.avatar-drawer { margin:.15rem 0 .55rem;padding:.75rem;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.05); }
.avatar-drawer[hidden] { display:none !important; }
.avatar-pick-grid { grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:.45rem !important; }
.avatar-pick-btn { min-width:0 !important;border-radius:14px !important;padding:.45rem .2rem !important; }
.avatar-pick-label { font-size:.46rem !important; }
.settings-panel .notif-row { flex-wrap:wrap; }
.settings-panel .toggle-pill { font-size:.62rem; }
.settings-panel .lock-settings-panel { margin-top:.55rem;background:rgba(255,255,255,.05); }

@media (max-width: 560px) {
  .settings-panel { width:100% !important; border-radius:0 !important; }
  .settings-profile-hero { margin-top:.15rem; }
  .avatar-pick-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}

@media (min-width: 900px) {
  .awa-experience-windows { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
  .experience-window-play,.experience-window-cinema { min-height:250px !important; }
  .experience-window-chat,.experience-window-moments { min-height:190px !important; }
}

/* ========================================================================
   AWA HOME PASS 06
   1. The big "Come on in" card is gone. Its job moves into a slim top bar
      with a time-of-day greeting over a small sunset skyline.
   2. Every portal is a strict three-row stack (title, picture, footer), so
      nothing can sit on top of anything else. Root cause of the overlap:
      each portal is a <button>, and browsers vertically centre a button's
      contents, which pushed the title row into the middle of the picture.
   ======================================================================== */
.awa-world-hero, .awa-section-head, .home-top-actions { display:none !important; }

.awa-home-bar {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-height:86px;
  margin:0 0 .55rem;
  padding:.9rem 1rem;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
}
.awa-home-skyline {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}
.awa-home-greeting { min-width:0; }
.awa-greeting-line {
  margin:0;
  font-family:"Funnel Display",system-ui,sans-serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.1;
  color:#fff6ea;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.awa-greeting-name {
  background:linear-gradient(90deg,#ffe29a, #ffc35a 70%, #ff9a3d);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.awa-settings-btn {
  flex:0 0 auto;
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border-radius:50% !important;
  color:#fff6ea !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(10px);
}
.awa-settings-btn svg { display:block; }

/* Portals: title / picture / footer, top to bottom. */
.experience-window {
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:.5rem;
  min-height:0 !important;
  height:228px;
}
.experience-header { flex:0 0 auto; width:100%; min-height:27px !important; padding:0 .1rem !important; }
.experience-whot-stage,
.cinema-grid,
.chat-window-bubbles,
.moment-scene {
  position:relative !important;
  inset:auto !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  flex:1 1 auto;
  min-height:0;
  width:100%;
}
.experience-footer {
  flex:0 0 auto;
  position:relative;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.4rem;
  min-height:22px;
  padding:0 .15rem;
}

/* Whot: names live in the footer, the table only shows cards. */
.experience-whot-stage .whot-mini-player { display:none !important; }
.whot-footer { justify-content:center; gap:.5rem; }
.whot-footer-player { display:flex; align-items:center; gap:.3rem; font-size:.62rem; font-weight:800; color:#fff; }
.whot-footer-player i {
  width:19px; height:19px; display:grid; place-items:center; border-radius:50%;
  font-style:normal; font-size:.55rem; font-weight:900; color:#fff;
  background:linear-gradient(135deg,#e5a13c,#d65e7e);
  border:1.5px solid rgba(255,255,255,.55);
}
.whot-footer-player.me i { background:linear-gradient(135deg,#6b4b9d,#d96868); }
.whot-footer-vs { font-size:.52rem; font-weight:800; letter-spacing:.1em; color:rgba(255,255,255,.55); text-transform:uppercase; }

/* Cinema: tiles start under the title, no footer needed. */
.cinema-grid { display:grid !important; }

/* Chat: bubbles in the middle, conversation status in the footer. */
.chat-window-bubbles { display:flex !important; overflow:hidden; }
.chat-window-seen {
  position:static !important;
  left:auto !important; bottom:auto !important; right:auto !important;
  font-size:.56rem !important;
  color:rgba(255,255,255,.72) !important;
}
.chat-window-seen.has-unread { color:#ffd36a !important; }
.chat-window-seen.has-unread i { display:inline-block; width:6px; height:6px; margin:0 5px 0 0; border-radius:50%; background:#ffd36a; box-shadow:0 0 8px rgba(255,211,106,.8); }

/* Moments: caption and Open side by side under the picture. */
.moment-caption,
.experience-window-moments .window-card-action {
  position:static !important;
  left:auto !important; right:auto !important; bottom:auto !important;
}
.moment-caption { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.56rem !important; }
.experience-window-moments .window-card-action { flex:0 0 auto; }

@media (min-width:760px) {
  .experience-window { height:260px; }
  .experience-window-play { grid-row:auto !important; }
}

.experience-whot-stage .whot-mini-scene { transform:scale(.88) translateY(6px) !important; transform-origin:center !important; }
.home-contact-row { margin-bottom:.15rem; }

/* ========================================================================
   WHOT TABLE PASS
   Two people at one table: her seat at the top, your seat at the bottom,
   a wood-rimmed plum felt between you. Her cards lie small and face down
   on her side; yours fan out large in front of you. A glowing ring on a
   seat says whose turn it is. Every id the game logic uses is unchanged.
   ======================================================================== */
.games-overlay:has(#whotPanel:not([hidden])) { overflow: hidden; }
.games-overlay:has(#whotPanel:not([hidden])) .games-panel {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: max(.6rem, env(safe-area-inset-bottom));
}
#whotPanel:not([hidden]) { flex: 1 1 auto !important; display: flex !important; flex-direction: column; min-height: 0 !important; }

#whotPanel .whot-board.whot-table-view,
#whotPanel .whot-board.whot-table-view.my-turn {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#whotPanel .whot-game-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  gap: 0;
}

/* Scoreboard: one quiet line under the title. */
#whotPanel .whot-header { margin: 0 0 .35rem; }
#whotPanel .whot-stats {
  display: flex; justify-content: center; align-items: center; gap: .55rem;
  margin: 0; font-size: .72rem; color: rgba(245,243,255,.6);
}
#whotPanel .whot-stats b { font-weight: 700; letter-spacing: .06em; }
#whotPanel .whot-stats strong { color: #ffd36a; font-size: .9rem; }

/* Seats */
#whotPanel .whot-seat {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
}
#whotPanel .whot-seat-opp { justify-content: center; margin-bottom: .55rem; }
#whotPanel .whot-seat-me {
  margin-top: .4rem;
  padding: .55rem .6rem .55rem .65rem;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}
#whotPanel .whot-seat-avatar {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg,#6b4b9d,#d96868);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.16);
  transition: box-shadow .35s ease;
}
#whotPanel .whot-seat-opp .whot-seat-avatar { background: linear-gradient(135deg,#e5a13c,#d65e7e); }
#whotPanel .whot-seat-avatar > * { width: 100%; height: 100%; object-fit: cover; }
#whotPanel .whot-seat-avatar .whot-cpu-avatar { width: 24px; height: 24px; }
#whotPanel .whot-board.my-turn .whot-seat-me .whot-seat-avatar,
#whotPanel .whot-board.their-turn .whot-seat-opp .whot-seat-avatar {
  box-shadow: 0 0 0 3px #ffc35a, 0 0 22px 5px rgba(255,195,90,.5);
}
#whotPanel .whot-seat-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; }
#whotPanel .whot-seat-text b { font-size: .95rem; font-weight: 800; color: #f5f3ff; }
#whotPanel .whot-seat-text small { font-size: .74rem; color: rgba(245,243,255,.68); }
#whotPanel .whot-seat-me .whot-seat-text { flex: 1; }
#whotPanel .whot-seat-opp .whot-other-loc {
  margin: 0;
  padding: .28rem .55rem;
  border-radius: 999px;
  font-size: .64rem;
  background: rgba(82,211,156,.12);
  color: #7fe0b6;
  white-space: nowrap;
}
#whotPanel .whot-tray-btn {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #ffd36a;
  cursor: pointer;
}
#whotPanel .whot-tray-btn[aria-expanded="true"] { background: rgba(255,211,106,.16); }

/* The table */
#whotPanel .whot-table {
  position: relative;
  flex: 1 1 auto;
  min-height: 270px;
  padding: 12px;
  border-radius: 150px;
  background: linear-gradient(160deg,#8a5532 0%,#5b3420 45%,#3e2216 100%);
  box-shadow: 0 30px 60px -22px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,214,170,.32);
}
#whotPanel .whot-felt {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  padding: 16px 10px 52px;
  border-radius: 138px;
  background: radial-gradient(80% 60% at 50% 42%,#7a3466 0%,#4d1f48 55%,#2c1230 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,200,150,.18), inset 0 14px 40px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Her hand: small, face down, fanned on her side */
#whotPanel .whot-opp-row { width: 100%; flex: 0 0 auto; }
#whotPanel .whot-opp-row .whot-hand-row { margin: 0; }
#whotPanel #whotOppHand {
  min-height: 0;
  padding: 4px 18px 8px;
  gap: 0;
  justify-content: center;
}
#whotPanel #whotOppHand.overflowing { justify-content: flex-start; }
#whotPanel #whotOppHand .whot-card-btn { margin-left: -16px; transform: translateY(var(--fan-y,0)) rotate(calc(var(--fan-rot,0deg) * -1)); }
#whotPanel #whotOppHand .whot-card-btn:first-child { margin-left: 0; }
#whotPanel #whotOppHand .whot-card-back.hand {
  width: 38px; height: 54px; font-size: .5rem; border-radius: 7px;
  background: repeating-linear-gradient(45deg,#7a1a35 0 5px,#6a152d 5px 10px);
  border: 1.5px solid #b85a73;
}
#whotPanel .whot-fan-empty { color: rgba(245,243,255,.5); }

/* Market and the played pile, side by side in the middle of the felt */
#whotPanel .whot-mid {
  display: flex; align-items: center; justify-content: center; gap: 34px;
  margin: 0; flex: 0 0 auto;
}
#whotPanel .whot-pile { position: relative; padding: 0; border: 0; background: transparent; }
#whotPanel .whot-market-pile .whot-card-back {
  width: 70px; height: 98px; border-radius: 10px;
  background: repeating-linear-gradient(45deg,#7a1a35 0 6px,#6a152d 6px 12px);
  border: 1.5px solid #b85a73;
  box-shadow: 3px 3px 0 #5a1226, 6px 6px 0 #4a0f1f, 0 14px 22px -8px rgba(0,0,0,.7);
}
#whotPanel .whot-market-pile.whot-market-tappable {
  border: 0; background: transparent;
}
#whotPanel .whot-market-pile.whot-market-tappable .whot-card-back {
  box-shadow: 3px 3px 0 #5a1226, 6px 6px 0 #4a0f1f, 0 0 0 2px #ffc35a, 0 0 22px 4px rgba(255,195,90,.45);
}
#whotPanel .whot-pile-badge {
  top: -10px; right: -14px;
  background: #ffb42e; color: #2a0f1f; font-weight: 800;
}
#whotPanel .whot-pile-label { display: block; margin-top: 12px; color: rgba(245,243,255,.7); }
#whotPanel .whot-market-pile.whot-market-tappable .whot-pile-label { color: #ffd36a; }

#whotPanel .whot-discard { position: relative; width: 76px; height: 104px; }
#whotPanel .whot-discard-under {
  position: absolute; inset: 2px 3px;
  border-radius: 10px;
  background: linear-gradient(160deg,#fbf3e4,#efe1c8);
  border: 1.5px solid #c9a98a;
  box-shadow: 0 8px 14px -8px rgba(0,0,0,.6);
}
#whotPanel .whot-discard-under.one { transform: rotate(-9deg); }
#whotPanel .whot-discard-under.two { transform: rotate(6deg); }
#whotPanel #whotTopCard { position: relative; z-index: 2; color: rgba(245,243,255,.5); font-size: 1.4rem; }
#whotPanel #whotTopCard .whot-card-face {
  width: 76px; height: 104px; transform: rotate(-2deg);
  background: linear-gradient(160deg,#fbf3e4,#efe1c8);
  border: 1.5px solid #d5b893; color: #8e1b3a;
}
#whotPanel #whotTopCard .wc-shape-svg { width: 44px; height: 44px; }
#whotPanel #whotTopCard .whot-called {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  white-space: nowrap; color: #ffd36a;
}

/* Status, call-outs and controls sit on the felt */
#whotPanel .whot-status {
  margin: 0;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(14,6,20,.45);
  border: 1px solid rgba(255,214,170,.18);
  font-size: .86rem;
  font-weight: 700;
  color: rgba(245,243,255,.85);
  max-width: 92%;
}
#whotPanel .whot-board.my-turn .whot-status { color: #ffd36a; }
#whotPanel .whot-status strong { color: #ffd36a; }
#whotPanel .whot-pending { margin: 0; padding: .35rem .8rem; border-radius: 12px; background: rgba(255,79,139,.18); color: #ffc0d6; font-size: .76rem; }
#whotPanel .whot-shape-picker { margin: 0; }
#whotPanel .whot-actions { margin: 0; }
#whotPanel .whot-actions:empty { display: none; }

/* Your hand: big, fanned, overlapping only at the edges so every shape
   and number stays fully visible; long hands still scroll sideways. */
#whotPanel .whot-my-row { position: relative; z-index: 3; flex: 0 0 auto; margin-top: -58px; }
#whotPanel .whot-my-row .whot-hand-row { margin: 0; }
#whotPanel #whotHand {
  min-height: 0;
  gap: 0;
  padding: 22px 16px 6px;
  justify-content: center;
}
#whotPanel #whotHand.overflowing { justify-content: flex-start; }
#whotPanel #whotHand .whot-card-btn {
  margin-left: -14px;
  transform: translateY(var(--fan-y,0)) rotate(var(--fan-rot,0deg));
  transform-origin: 50% 120%;
  transition: transform .2s ease;
}
#whotPanel #whotHand .whot-card-btn:first-child { margin-left: 0; }
#whotPanel #whotHand .whot-card-btn.clickable:hover,
#whotPanel #whotHand .whot-card-btn.clickable:focus-visible {
  transform: translateY(calc(var(--fan-y,0px) - 16px)) rotate(var(--fan-rot,0deg));
}
#whotPanel #whotHand .whot-card-face.small {
  width: 66px; height: 92px; border-radius: 10px;
  background: linear-gradient(160deg,#fbf3e4,#efe1c8);
  border: 1.5px solid #d5b893; color: #8e1b3a;
  box-shadow: 0 12px 20px -10px rgba(0,0,0,.75);
}
#whotPanel #whotHand .whot-card-face.small .wc-shape-svg { width: 36px; height: 36px; }
#whotPanel #whotHand .whot-card-face.small .wc-corner { font-size: .74rem; }
#whotPanel #whotHand .whot-card-face.small .wc-wordmark { font-size: .9rem; }
#whotPanel #whotHand .whot-card-placeholder { width: 66px; height: 92px; flex: 0 0 66px; margin-left: -14px; }
#whotPanel #whotHand .whot-card-btn.invalid-shake { animation: none; }
#whotPanel #whotHand .whot-card-btn.invalid-shake .whot-card-face { animation: whot-invalid-shake .4s ease; }

/* Emoji and trash talk: a sheet that slides up from your seat */
#whotPanel .whot-tray {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 640px);
  box-sizing: border-box;
  z-index: 170;
  margin: 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: #221532;
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -20px 40px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: whotTrayUp .22s ease-out;
}
#whotPanel .whot-tray[hidden] { display: none; }
@keyframes whotTrayUp { from { transform: translate(-50%, 30px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#whotPanel .whot-tray-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: .88rem; color: #f5f3ff; }
#whotPanel .whot-tray-close {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #f5f3ff; cursor: pointer;
}
#whotPanel .whot-tray .whot-emoji-bar {
  flex-wrap: wrap;
  overflow: visible;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}
#whotPanel .whot-tray .whot-emoji-bar button { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 1.45rem; }
#whotPanel .whot-tray .whot-taunt-form { margin: 0; }

@media (min-width: 700px) {
  #whotPanel .whot-table { border-radius: 180px; }
  #whotPanel .whot-felt { border-radius: 168px; }
}
#whotPanel .whot-stats { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; }
#whotPanel .whot-stats:empty, #whotPanel .whot-status:empty { display: none; }
#whotPanel .whot-discard:not(:has(.whot-card-face)) .whot-discard-under { display: none; }
#whotPanel .whot-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 34px; }
#whotPanel .whot-header .whot-stats { justify-content: flex-start; gap: .35rem; font-size: .66rem; }
#whotPanel .whot-header .whot-stats strong { min-width: 0 !important; padding: 0 .1rem !important; border: 0 !important; background: none !important; font-size: .85rem; }
#whotPanel .whot-opponent-picker { margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
#whotPanel .whot-opponent-picker[hidden] { display: none; }
#whotPanel .whot-picker-label { display: none; }
#whotPanel .whot-opponent-options { display: flex; gap: 0; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
#whotPanel .whot-opponent-btn {
  min-height: 0 !important; height: 30px; padding: 0 .8rem !important;
  border-radius: 999px !important; border: 0 !important; box-shadow: none !important;
  background: transparent !important; color: rgba(245,243,255,.7) !important;
  font-size: .74rem !important; font-weight: 700;
}
#whotPanel .whot-opponent-btn.selected { background: rgba(255,211,106,.18) !important; color: #ffd36a !important; }
#whotPanel #whotHand { padding-bottom: 16px; }
#whotPanel .whot-seat-opp { margin-top: .2rem; }
#whotPanel .whot-stats strong, #whotPanel .whot-stats b, #whotPanel .whot-stats span { border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; min-width: 0 !important; height: auto !important; }
#whotPanel .whot-stats *::before, #whotPanel .whot-stats *::after { display: none !important; content: none !important; }
#whotPanel .whot-stats .scoreboard-player { display: inline-flex; align-items: center; gap: .3rem; }
#whotPanel .whot-market-pile, #whotPanel .whot-market-pile.whot-market-tappable { animation: none !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; }
#whotPanel .whot-market-pile.whot-market-tappable .whot-card-back { animation: whotPileGlow 1.8s ease-in-out infinite; }
@keyframes whotPileGlow { 0%,100% { opacity: 1; transform: translateY(0); } 50% { opacity: .82; transform: translateY(-2px); } }
#whotPanel .whot-tray-head span { flex: 1; text-align: left; }

/* ========================================================================
   CINEMA LOBBY + ROOMS PASS
   Cinema opens on a lobby of experiences. Each one is its own room with
   its own look (YouTube dark, TikTok black, Screen Share indigo, Our
   movies sunset). Every existing control still lives inside the rooms.
   ======================================================================== */
#watchPanel .watch-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
  color: #f5f3ff;
}
.games-overlay:has(#watchPanel[data-view="room"]:not([hidden])) .games-panel-header { display: none; }
.games-overlay:has(#watchCard[data-room="youtube"]) { background: #0f0f0f !important; }
.games-overlay:has(#watchCard[data-room="tiktok"]) { background: #000 !important; }
.games-overlay:has(#watchCard[data-room="share"]) { background: radial-gradient(120% 55% at 50% 0%, #26306b 0%, #141836 55%, #0b0d20 100%) !important; }
.games-overlay:has(#watchCard[data-room="library"]) { background: radial-gradient(120% 45% at 50% 0%, #232b42 0%, #1d1026 55%, #120a19 100%) !important; }

/* Lobby */
#watchPanel .cinema-lobby[hidden], #watchPanel .cinema-room-head[hidden] { display: none !important; }
#watchPanel .cinema-lobby { display: flex; flex-direction: column; gap: 12px; padding-bottom: 1.2rem; }
#watchPanel .cinema-lobby-title {
  margin: .2rem .2rem .2rem;
  font-family: "Funnel Display", system-ui, sans-serif;
  font-weight: 700; font-size: 1.75rem; letter-spacing: -.04em; line-height: 1.1;
  color: #f5f3ff;
}
#watchPanel .cinema-live-strip {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 18px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: #f5f3ff; font: inherit;
}
#watchPanel .cinema-live-strip[hidden] { display: none; }
#watchPanel .cinema-live-strip.is-live { background: rgba(82,211,156,.1); border-color: rgba(82,211,156,.3); }
#watchPanel .cinema-live-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #ffd36a; }
#watchPanel .cinema-live-strip.is-live .cinema-live-dot { background: #52d39c; animation: cinemaLivePulse 1.8s ease-in-out infinite; }
@keyframes cinemaLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(82,211,156,.6); } 50% { box-shadow: 0 0 0 6px rgba(82,211,156,0); } }
#watchPanel .cinema-live-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#watchPanel .cinema-live-text b { font-size: .9rem; }
#watchPanel .cinema-live-text small { font-size: .74rem; color: rgba(245,243,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#watchPanel .cinema-live-go { padding: 8px 15px; border-radius: 999px; background: #f5f3ff; color: #1a0f22; font-weight: 800; font-size: .8rem; }
#watchPanel .cinema-live-strip.is-live .cinema-live-go { background: #52d39c; color: #0c2a1e; }

#watchPanel .cinema-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#watchPanel .cinema-tile {
  position: relative; min-height: 176px; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  border-radius: 24px; border: 1px solid rgba(255,255,255,.1);
  color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  transition: transform .15s ease;
}
#watchPanel .cinema-tile:active { transform: scale(.97); }
#watchPanel .cinema-tile-text { display: flex; flex-direction: column; gap: 2px; }
#watchPanel .cinema-tile-text b { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
#watchPanel .cinema-tile-text small { font-size: .74rem; opacity: .7; line-height: 1.3; }
#watchPanel .tile-youtube { background: #0f0f0f; }
#watchPanel .tile-tiktok { background: #000; }
#watchPanel .tile-share { background: linear-gradient(150deg,#1d2a5c 0%,#2b1f55 60%,#3b1f4f 100%); border-color: rgba(255,255,255,.14); }
#watchPanel .tile-library { background: linear-gradient(160deg,#f4b95e 0%,#e7746a 45%,#6c3f8e 100%); border-color: rgba(255,255,255,.2); }
#watchPanel .tile-library .cinema-tile-text b { color: #1d0c22; }
#watchPanel .tile-library .cinema-tile-text small { color: #3a1a3a; opacity: 1; }
#watchPanel .brand-yt { width: 58px; height: 41px; display: block; }
#watchPanel .brand-tt { width: 38px; height: 42px; display: block; }
#watchPanel .brand-share { width: 44px; height: 44px; color: #9fc2ff; }
#watchPanel .brand-awa { display: flex; flex-direction: column; line-height: .95; }
#watchPanel .brand-awa strong { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -.08em; color: #fff; }
#watchPanel .brand-awa em { font-style: normal; font-weight: 800; font-size: .66rem; letter-spacing: .22em; color: #2a1230; }
#watchPanel .cinema-tile-netflix {
  display: flex; align-items: center; gap: 14px; width: 100%; height: 68px; padding: 0 16px;
  border-radius: 22px; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03);
  color: rgba(245,243,255,.55); font: inherit; text-align: left; cursor: not-allowed;
}
#watchPanel .brand-nf { font-family: Impact, "Arial Black", sans-serif; font-size: 1.9rem; color: rgba(229,9,20,.55); transform: scaleX(.8); }
#watchPanel .cinema-lobby-schedule {
  margin: 0; padding: 13px 14px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  font-size: .86rem; color: #f5f3ff;
}
#watchPanel .cinema-lobby-schedule[hidden] { display: none; }

/* Room header */
#watchPanel .cinema-room-head { display: flex; align-items: center; gap: 12px; height: 56px; margin-bottom: .4rem; }
#watchPanel .cinema-room-back {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: inherit; cursor: pointer;
}
#watchPanel .cinema-room-brand { flex: 1; min-width: 0; display: flex; align-items: center; }
#watchPanel .room-brand { display: none; align-items: center; gap: 7px; }
#watchPanel .watch-card[data-room="youtube"] .room-brand-youtube,
#watchPanel .watch-card[data-room="tiktok"] .room-brand-tiktok,
#watchPanel .watch-card[data-room="share"] .room-brand-share,
#watchPanel .watch-card[data-room="library"] .room-brand-library { display: flex; }
#watchPanel .room-brand b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.04em; }
#watchPanel .room-brand small { font-size: .74rem; opacity: .55; margin-left: 2px; }
#watchPanel .room-brand .brand-yt { width: 30px; height: 21px; }
#watchPanel .room-brand .brand-tt { width: 21px; height: 23px; }
#watchPanel .room-brand-library { align-items: baseline !important; }
#watchPanel .room-brand-library strong { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 1.45rem; letter-spacing: -.08em; color: #ffd36a; }
#watchPanel .room-brand-library em { font-style: normal; font-weight: 800; font-size: .66rem; letter-spacing: .22em; opacity: .85; }
#watchPanel .cinema-room-partner { position: relative; width: 36px; height: 36px; flex: 0 0 36px; }
#watchPanel .cinema-room-partner-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg,#e5a13c,#d65e7e); }
#watchPanel .cinema-room-partner-avatar > * { width: 100%; height: 100%; object-fit: cover; }
#watchPanel .cinema-room-partner-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #6b6b6b; border: 2px solid #0f0f0f; }
#watchPanel .cinema-room-partner-dot.is-on { background: #52d39c; }

#watchPanel .cinema-room-notice { margin: .4rem 0 1rem; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 10px; }
#watchPanel .cinema-room-notice[hidden] { display: none; }
#watchPanel .cinema-room-notice p { margin: 0; font-size: .88rem; line-height: 1.4; }

/* Setup inside a link room: paste bar on top, name + Load below */
#watchPanel .watch-card[data-room] .watch-setup:not([hidden]) {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-bottom: 14px;
}
#watchPanel .watch-card[data-room] .watch-setup > #watchUrlInput,
#watchPanel .watch-card[data-room] .watch-setup > .watch-share-note,
#watchPanel .watch-card[data-room] .watch-setup > #watchSetupError { grid-column: 1 / -1; }
#watchPanel .watch-card[data-room] #watchUrlInput,
#watchPanel .watch-card[data-room] #watchTitleInput {
  height: 46px; padding: 0 16px; border-radius: 23px; font: inherit; font-size: .95rem;
  background: #121212; border: 1px solid #303030; color: #f1f1f1; box-shadow: none;
}
#watchPanel .watch-card[data-room] #watchSetBtn {
  height: 46px; padding: 0 22px; border-radius: 23px; border: 0;
  background: #f1f1f1; color: #0f0f0f; font-weight: 800; box-shadow: none;
}
#watchPanel .watch-card[data-room="tiktok"] #watchUrlInput,
#watchPanel .watch-card[data-room="tiktok"] #watchTitleInput { background: #161616; border-color: #2a2a2a; }
#watchPanel .watch-card[data-room="tiktok"] #watchSetBtn { background: #fe2c55; color: #fff; }

/* Players */
#watchPanel .watch-card[data-room="youtube"] .watch-player { border-radius: 14px; background: #1f1f1f; }
#watchPanel .watch-card[data-room="youtube"] .watch-player iframe { aspect-ratio: 16 / 9; height: auto !important; max-height: none; }
#watchPanel .watch-card[data-room="tiktok"] .watch-player {
  width: min(100%, 320px); margin: 0 auto; aspect-ratio: 9 / 16; max-height: 68vh;
  border-radius: 20px; background: #111;
  box-shadow: -4px 0 0 rgba(37,244,238,.35), 4px 0 0 rgba(254,44,85,.35);
}
#watchPanel .tiktok-frame { display: block; width: 100% !important; height: 100% !important; max-height: none !important; border: 0; }
#watchPanel .watch-stage.expanded .watch-player:has(.tiktok-frame) { width: auto; height: 100%; aspect-ratio: 9 / 16; margin: 0 auto; box-shadow: none; }

/* Titles, buttons and the join card take the room's colors */
#watchPanel .watch-card[data-room] .watch-title { font-weight: 800; font-size: 1.05rem; margin: .2rem 0 0; text-align: left; }
#watchPanel .watch-card[data-room] .watch-ready { gap: 12px; }
#watchPanel .watch-card[data-room] #watchStartBtn,
#watchPanel .watch-card[data-room] #watchJoinBtn { height: 50px; border-radius: 25px; border: 0; font-weight: 800; box-shadow: none; }
#watchPanel .watch-card[data-room] #watchChangeBtn { height: 46px; border-radius: 23px; border: 0; background: rgba(255,255,255,.1); color: inherit; font-weight: 700; }
#watchPanel .watch-card[data-room="youtube"] #watchStartBtn,
#watchPanel .watch-card[data-room="youtube"] #watchJoinBtn { background: #ff0033; color: #fff; }
#watchPanel .watch-card[data-room="youtube"] #watchChangeBtn { background: #272727; }
#watchPanel .watch-card[data-room="tiktok"] #watchStartBtn,
#watchPanel .watch-card[data-room="tiktok"] #watchJoinBtn { background: #fff; color: #000; }
#watchPanel .watch-card[data-room="share"] #watchJoinBtn,
#watchPanel .watch-card[data-room="share"] #watchShareStartBtn { background: #9fc2ff; color: #0b1430; border: 0; border-radius: 22px; font-weight: 800; }
#watchPanel .watch-card[data-room="library"] #watchJoinBtn,
#watchPanel .watch-card[data-room="library"] #watchShareFileBtn { background: #ffb42e; color: #2a0f1f; border: 0; border-radius: 25px; height: 50px; font-weight: 800; }
#watchPanel .watch-card[data-room] .watch-join-prompt { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: inherit; text-align: left; }
#watchPanel .watch-card[data-room] .watch-schedule { text-align: left; }
#watchPanel .watch-card[data-room] .watch-schedule input { background: rgba(255,255,255,.07); color: inherit; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }

/* Screen Share room */
#watchPanel .watch-card[data-room="share"] .watch-screenshare-block {
  padding: 16px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); text-align: left;
}
#watchPanel .watch-card[data-room="share"] .watch-share-title { font-weight: 800; font-size: 1rem; margin: 0 0 4px; }
#watchPanel .watch-card[data-room="share"] .watch-share-copy,
#watchPanel .watch-card[data-room="share"] .watch-share-mobile-note,
#watchPanel .watch-card[data-room="share"] .watch-share-status { color: #b7bee3; font-size: .84rem; line-height: 1.45; }
#watchPanel .watch-card[data-room="share"] .watch-share-player { border-radius: 14px; overflow: hidden; background: #070915; }

/* Our movies: a poster wall */
#watchPanel .watch-card[data-room="library"] .cinema-library-head strong { font-family: "Funnel Display", system-ui, sans-serif; font-size: 1.15rem; letter-spacing: -.03em; color: #f5f3ff; }
#watchPanel .watch-card[data-room="library"] .cinema-library-head span { color: rgba(245,243,255,.6); }
#watchPanel .watch-card[data-room="library"] #cinemaLibraryRefresh { background: rgba(255,255,255,.08); color: #f5f3ff; border: 0; border-radius: 999px; padding: .45rem .9rem; font-size: .76rem; }
#watchPanel .watch-card[data-room="library"] .cinema-library-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 10px; padding: 0; }
#watchPanel .watch-card[data-room="library"] .cinema-library-item { padding: 0; border: 0; background: transparent; border-radius: 14px; }
#watchPanel .watch-card[data-room="library"] .cinema-library-item:hover { transform: none; }
#watchPanel .cinema-poster {
  position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden;
  display: block; padding: 10px; box-sizing: border-box;
  background:
    radial-gradient(90% 55% at 80% 15%, rgba(255,214,140,.35), transparent 60%),
    linear-gradient(170deg, var(--poster-a,#3a2a6b), var(--poster-b,#c4566e));
  box-shadow: 0 14px 24px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08);
  color: #fff; font-size: 1rem;
}
#watchPanel .cinema-poster::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(10,4,16,.65)); }
#watchPanel .cinema-poster-title {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: .86rem; line-height: 1.12; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
#watchPanel .cinema-poster-play {
  position: absolute; left: 10px; top: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); color: #fff;
}
#watchPanel .watch-card[data-room="library"] .cinema-library-name { font-size: .74rem; color: rgba(245,243,255,.78); padding: 0 2px; }
#watchPanel .watch-card[data-room="library"] .cinema-library-delete,
#watchPanel .watch-card[data-room="library"] .cinema-library-download { z-index: 3; }
#watchPanel .watch-card[data-room="library"] .cinema-library-empty { color: rgba(245,243,255,.65); }
#watchPanel .watch-card[data-room="library"] .cinema-library-status { color: rgba(245,243,255,.75); }

@media (min-width: 700px) {
  #watchPanel .cinema-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); }
  #watchPanel .watch-card[data-room="library"] .cinema-library-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
#watchPanel .cinema-empty-stage { display: none; }
#watchPanel .watch-card[data-room="youtube"] .watch-ready[hidden] + .cinema-empty-stage,
#watchPanel .watch-card[data-room="tiktok"] .watch-ready[hidden] + .cinema-empty-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px dashed #3a3a3a; border-radius: 14px; color: #8f8f8f; font-size: .9rem;
  aspect-ratio: 16 / 9;
}
#watchPanel .watch-card[data-room="tiktok"] .watch-ready[hidden] + .cinema-empty-stage { aspect-ratio: 9 / 16; width: min(100%, 300px); max-height: 60vh; margin: 0 auto; border-radius: 20px; }
#watchPanel .cinema-empty-stage svg { width: 46px; height: 32px; display: none; }
#watchPanel .watch-card[data-room="youtube"] .cinema-empty-stage .empty-yt,
#watchPanel .watch-card[data-room="tiktok"] .cinema-empty-stage .empty-tt { display: block; }
#watchPanel .watch-card[data-room="tiktok"] .cinema-empty-stage .empty-tt { width: 40px; height: 40px; }
#watchPanel .watch-card[data-room="library"] .watch-library-block,
#watchPanel .watch-card[data-room="library"] .cinema-library,
#watchPanel .watch-card[data-room="library"] .watch-share-controls { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#watchPanel .watch-card[data-room="library"] .cinema-library-item:not(.is-renaming) .cinema-library-name { display: none; }
#watchPanel .cinema-poster-play { display: none; }
#watchPanel .watch-card[data-room="library"] .cinema-library-delete,
#watchPanel .watch-card[data-room="library"] .cinema-library-download { background: rgba(0,0,0,.4); backdrop-filter: blur(6px); color: #fff; }

/* ========================================================================
   WHOT PASS 2: shape call sheet, called chip, safe text, quick reactions
   ======================================================================== */
/* Everything written on the table stays inside the middle of the felt
   and wraps, instead of running into the rounded rim. */
#whotPanel .whot-felt { padding-left: 26px; padding-right: 26px; }
#whotPanel .whot-status,
#whotPanel .whot-pending,
#whotPanel .whot-called-chip {
  max-width: min(78%, 280px);
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#whotPanel .whot-pending { font-size: .74rem; }
#whotPanel .whot-called-chip {
  margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: #f6ecda;
  color: #8e1b3a;
  font-size: .8rem; font-weight: 700;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.7);
}
#whotPanel .whot-called-chip[hidden] { display: none; }
#whotPanel .whot-called-chip svg { width: 18px; height: 18px; fill: currentColor; }
#whotPanel .whot-called-chip b { font-weight: 800; }

/* The call-outs ("Pick two joor!") used to sit behind the game screen and
   could run off a phone's edges. Now above it, and they wrap. */
.whot-callout {
  z-index: 320 !important;
  white-space: normal !important;
  text-align: center;
  width: max-content;
  max-width: 86vw;
  font-size: clamp(1.4rem, 7vw, 2rem) !important;
  color: #ffd36a !important;
}

/* Call a shape: slides up by itself after a 20 */
#whotPanel .whot-shape-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, 640px);
  box-sizing: border-box;
  z-index: 175;
  margin: 0;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: #221532;
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -24px 50px rgba(0,0,0,.6);
  display: block;
  text-align: center;
  animation: whotTrayUp .24s ease-out;
}
#whotPanel .whot-shape-sheet[hidden] { display: none; }
#whotPanel .whot-sheet-title { margin: 0; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; color: #f5f3ff; }
#whotPanel .whot-sheet-sub { margin: 4px 0 14px; font-size: .82rem; color: rgba(245,243,255,.65); }
#whotPanel .whot-shape-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
#whotPanel .whot-shape-sheet .whot-shape-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 92px; padding: 0;
  border-radius: 14px;
  border: 1.5px solid #d5b893;
  background: linear-gradient(160deg,#fbf3e4,#efe1c8);
  color: #8e1b3a;
  font-size: .7rem; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.7);
  transition: transform .12s ease;
}
#whotPanel .whot-shape-sheet .whot-shape-btn:active { transform: scale(.94); }
#whotPanel .whot-shape-sheet .whot-shape-btn svg { width: 34px; height: 34px; fill: currentColor; }

/* One-tap reactions on your seat */
#whotPanel .whot-seat-me { gap: .5rem; }
#whotPanel .whot-seat-me .whot-seat-text { flex: 1 1 auto; min-width: 0; }
#whotPanel .whot-quick-reacts { display: flex; gap: 4px; flex: 0 0 auto; }
#whotPanel .whot-quick-reacts button {
  width: 38px; height: 40px; padding: 0;
  border: 0; border-radius: 12px;
  background: rgba(255,255,255,.07);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  transition: transform .12s ease;
}
#whotPanel .whot-quick-reacts button:active { transform: scale(1.25); }
#whotPanel .whot-tray-btn { width: 40px; height: 40px; flex: 0 0 40px; color: #f5f3ff; }
@media (max-width: 360px) {
  #whotPanel .whot-quick-reacts button:nth-child(4) { display: none; }
}
/* Real movie thumbnails on the AWA Library posters */
#watchPanel .cinema-poster-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  animation: cinemaThumbIn .4s ease;
}
@keyframes cinemaThumbIn { from { opacity: 0; } to { opacity: 1; } }
#watchPanel .cinema-poster.has-thumb::after { inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(8,3,14,.85)); z-index: 1; }
#watchPanel .cinema-poster.has-thumb { background: #1a0f22; }

/* WHOT PASS 3: every card number stays visible */
#whotPanel #whotHand { padding: 30px 22px 20px; }
#whotPanel #whotHand .whot-card-btn { margin-left: var(--hand-gap, 6px); }
#whotPanel #whotHand .whot-card-btn:first-child { margin-left: 0; }
#whotPanel #whotHand .whot-card-placeholder { margin-left: var(--hand-gap, 6px); }
#whotPanel #whotHand .whot-card-face.small .wc-corner { font-size: .92rem; font-weight: 900; }
#whotPanel #whotHand .whot-card-face.small .wc-corner-top { top: 5px; left: 6px; }
#whotPanel #whotHand .whot-card-face.small .wc-corner-bottom { bottom: 5px; right: 6px; }
#whotPanel #whotHand.is-overlapping .whot-card-btn { box-shadow: -6px 0 10px -6px rgba(0,0,0,.45); border-radius: 10px; }
#whotPanel #whotTopCard .wc-corner { font-size: 1rem; font-weight: 900; }
/* Change movie is gone: loading or picking something new is how you switch. */
#watchPanel #watchChangeBtn { display: none !important; }
/* Link preview under the paste bar, and the poster before you start */
#watchPanel .cinema-link-preview {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  padding: 8px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  animation: cinemaThumbIn .3s ease;
}
#watchPanel .cinema-link-preview[hidden] { display: none; }
#watchPanel .cinema-link-preview img { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; flex: 0 0 auto; background: #222; }
#watchPanel .watch-card[data-room="tiktok"] .cinema-link-preview img { width: 64px; aspect-ratio: 9 / 16; }
#watchPanel .cinema-link-preview-title { flex: 1; min-width: 0; font-weight: 700; font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#watchPanel .cinema-ready-poster { position: relative; border-radius: 14px; overflow: hidden; background: #1f1f1f; aspect-ratio: 16 / 9; }
#watchPanel .cinema-ready-poster[hidden] { display: none; }
#watchPanel .watch-card[data-room="tiktok"] .cinema-ready-poster { aspect-ratio: 9 / 16; width: min(100%, 300px); max-height: 56vh; margin: 0 auto; border-radius: 20px; }
#watchPanel .cinema-ready-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
#watchPanel .cinema-ready-poster-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #ff0033; color: #fff; }
#watchPanel .watch-card[data-room="tiktok"] .cinema-ready-poster-play { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(6px); }
/* Hold menu on a poster */
#watchPanel .cinema-library-item { position: relative; }
#watchPanel .cinema-poster-menu {
  position: absolute; left: 6px; right: 6px; top: 34%; z-index: 6;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; background: rgba(24,14,32,.94); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 30px -12px rgba(0,0,0,.8); backdrop-filter: blur(10px);
  animation: cinemaThumbIn .18s ease;
}
#watchPanel .cinema-poster-menu button { height: 42px; border: 0; background: transparent; color: #f5f3ff; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
#watchPanel .cinema-poster-menu button + button { border-top: 1px solid rgba(255,255,255,.1); }
#watchPanel .cinema-poster.is-working::before {
  content: ""; position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: cinemaShimmer 1.1s linear infinite;
}
@keyframes cinemaShimmer { to { background-position: -200% 0; } }
#watchPanel .watch-card:has(#cinemaLinkPreview:not([hidden])) .cinema-empty-stage { display: none !important; }

/* WHOT PASS 4: your hand sits below the table, never over it */
#whotPanel .whot-my-row { margin-top: 6px; }
#whotPanel .whot-felt { padding-bottom: 18px; }
#whotPanel #whotHand { padding: 22px 22px 14px; scroll-snap-type: x proximity; }
#whotPanel #whotHand .whot-card-btn { scroll-snap-align: start; }
#whotPanel .whot-table { min-height: 240px; }
#whotPanel #whotHand { padding-bottom: 24px; }
.settings-profile-hero { align-items: center !important; }
.settings-profile-hero .settings-profile-avatar { width: 56px !important; height: 56px !important; flex: 0 0 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; align-self: center; }
.settings-profile-hero .settings-profile-avatar > * { width: 100% !important; height: 100% !important; object-fit: cover; }

/* ========================================================================
   MOMENTS: "What are you doing right now?"
   ======================================================================== */
.moments-overlay { align-items: flex-end !important; }
.moments-sheet {
  width: min(100%, 560px) !important;
  max-height: 92dvh !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom)) !important;
  border-radius: 28px 28px 0 0 !important;
  background: radial-gradient(110% 45% at 50% 0%, #232b42 0%, #1f2639 55%, #182036 100%) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #f5f3ff !important;
  text-align: left;
}
.moments-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.moments-head h2 { margin: 0; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 1.6rem; letter-spacing: -.04em; color: #f5f3ff; }
.moments-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #f5f3ff; cursor: pointer; }
.moment-panel { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.moment-panel[hidden] { display: none; }
.moments-lead { margin: 0; font-size: .95rem; line-height: 1.45; color: rgba(245,243,255,.85); }
.moments-input {
  height: 48px; padding: 0 16px; border-radius: 24px; box-sizing: border-box; width: 100%;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); color: #f5f3ff; font: inherit; font-size: .95rem;
}
.moments-cta { height: 52px; border-radius: 26px !important; border: 0 !important; background: #ffb42e !important; color: #2a0f1f !important; font-weight: 800 !important; font-size: 1rem !important; box-shadow: none !important; }
.moments-cta:disabled { opacity: .45; }
.moments-secondary { height: 46px; border-radius: 23px !important; background: rgba(255,255,255,.08) !important; color: #f5f3ff !important; border: 0 !important; }
.moments-error { margin: 0; color: #ffb0c4; font-size: .84rem; }
.moments-error[hidden] { display: none; }

.moment-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 8px; text-align: center; }
.moment-wait-orbit { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,211,106,.25); border-top-color: #ffd36a; animation: momentSpin 1.2s linear infinite; }
@keyframes momentSpin { to { transform: rotate(360deg); } }
.moment-wait-title { margin: 6px 0 0; font-weight: 800; font-size: 1.1rem; }
.moment-wait-time { margin: 0; font-size: .9rem; color: rgba(245,243,255,.7); font-variant-numeric: tabular-nums; }

.moment-request { padding: 16px; border-radius: 20px; background: rgba(255,211,106,.1); border: 1px solid rgba(255,211,106,.3); }
.moment-request-title { margin: 0; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; }
.moment-request-note { margin: 8px 0 0; font-size: .92rem; color: rgba(245,243,255,.85); }
.moment-request-note[hidden] { display: none; }
.moment-request-time { margin: 10px 0 0; font-weight: 800; color: #ffd36a; font-variant-numeric: tabular-nums; }
.moment-photo-pick {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; width: 100%;
  border-radius: 20px; overflow: hidden; cursor: pointer;
  border: 1.5px dashed rgba(255,255,255,.25); background: rgba(0,0,0,.25);
}
.moment-photo-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.moment-photo-pick img[hidden] { display: none; }
.moment-photo-pick-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 800; color: rgba(245,243,255,.8); }
.moment-photo-pick-empty[hidden] { display: none; }

.moment-full-img { width: 100%; max-height: 62dvh; object-fit: contain; border-radius: 20px; background: #000; }
.moment-full-caption { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.moment-full-caption[hidden] { display: none; }
.moment-full-meta { margin: 0; font-size: .82rem; color: rgba(245,243,255,.65); }
.moment-reacted { margin: 0; font-size: .9rem; font-weight: 700; color: #ffd36a; }
.moment-reacted[hidden], .moment-react[hidden] { display: none; }
.moment-react { display: flex; flex-direction: column; gap: 10px; }
.moment-react-row { display: flex; justify-content: space-between; gap: 6px; }
.moment-react-btn { flex: 1 1 0; min-width: 0; height: 46px; border: 1px solid rgba(245,243,255,.12); border-radius: 14px; background: rgba(255,255,255,.06); font-size: 1.45rem; line-height: 1; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.moment-react-btn:active { transform: scale(.9); }
.moment-react-btn.is-on { background: rgba(255,211,106,.2); border-color: rgba(255,211,106,.7); }
.moment-reply { display: flex; gap: 8px; align-items: center; }
.moment-reply input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(245,243,255,.16); background: rgba(0,0,0,.28); color: #f5f3ff; font: 500 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.moment-reply input::placeholder { color: rgba(245,243,255,.5); }
.moment-reply button { flex: 0 0 44px; height: 44px; border: 0; border-radius: 50%; background: #ffd36a; color: #2a0f1f; display: grid; place-items: center; cursor: pointer; }
#momentFullView:has(.moment-react:not([hidden])) .moment-full-img { max-height: 46dvh; }
.moment-tile-react { position: absolute; top: 6px; right: 6px; padding: 2px 6px; border-radius: 10px; background: rgba(0,0,0,.55); font-size: .78rem; line-height: 1.3; }
.words-cancel { margin-top: 4px; }

.moments-album-wrap[hidden] { display: none; }
.moments-album-title { margin: 4px 2px 10px; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.moments-album { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.moments-empty { grid-column: 1 / -1; margin: 0; padding: 18px; text-align: center; font-size: .88rem; color: rgba(245,243,255,.6); border-radius: 16px; background: rgba(255,255,255,.04); }
.moment-tile { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg,#3a2a6b,#c4566e); cursor: pointer; }
.moment-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.moment-tile-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 6px; text-align: left; font-size: .64rem; color: rgba(255,255,255,.85); background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); }
.moment-tile-meta b { color: #fff; }

/* Home card: the latest moment shows as a real photo */
.moment-scene .moment-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }
.moment-scene.has-photo .moment-sun, .moment-scene.has-photo .moment-person, .moment-scene.has-photo .moment-spark { display: none; }

/* WHOT PASS 5: bigger table, smaller hand resting on your seat, and the
   called shape attached to the played pile where nothing can hide it. */
#whotPanel .whot-table { flex: 1 1 auto; min-height: 300px; }
#whotPanel .whot-felt { justify-content: space-evenly; padding: 14px 22px 14px; gap: .5rem; }
#whotPanel .whot-my-row { margin-top: auto; padding-top: 4px; }
#whotPanel #whotHand { padding: 16px 18px 10px; }
#whotPanel #whotHand .whot-card-face.small { width: 56px; height: 78px; border-radius: 9px; }
#whotPanel #whotHand .whot-card-face.small .wc-shape-svg { width: 30px; height: 30px; }
#whotPanel #whotHand .whot-card-face.small .wc-corner { font-size: .82rem; }
#whotPanel #whotHand .whot-card-face.small .wc-wordmark { font-size: .78rem; }
#whotPanel #whotHand .whot-card-placeholder { width: 56px; height: 78px; flex: 0 0 56px; }
#whotPanel .whot-seat-me { margin-top: 2px; }

#whotPanel .whot-discard { margin-bottom: 26px; }
#whotPanel .whot-discard .whot-called-chip {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 4;
  max-width: none;
  white-space: nowrap;
  flex-direction: column;
  gap: 1px;
  padding: .35rem .7rem .4rem;
  border-radius: 14px;
  line-height: 1.1;
  font-size: .78rem;
  animation: whotChipIn .35s cubic-bezier(.2,.8,.3,1.2);
}
#whotPanel .whot-discard .whot-called-chip small { font-size: .62rem; font-weight: 700; opacity: .75; }
#whotPanel .whot-called-shape { display: inline-flex; align-items: center; gap: 5px; }
@keyframes whotChipIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.moment-photo-pick { aspect-ratio: auto; height: min(42dvh, 340px); }

/* Game open: stop painting what sits under the full-screen game. */
html.awa-game-open #homeScreen,
html.awa-game-open .chat-screen,
html.awa-game-open .app-header { visibility: hidden; }
html.awa-game-open #homeScreen *,
html.awa-game-open #homeScreen *::before,
html.awa-game-open #homeScreen *::after { animation-play-state: paused !important; }
html.awa-game-open .games-overlay { contain: layout paint; }

/* ===== Settings, rebuilt (Oct 2026): one clean list like a real phone ===== */
.settings-overlay { backdrop-filter: none !important; background: rgba(8,4,8,.6) !important; padding: 0 !important; }
.settings-overlay .settings-panel.aws-panel {
  width: 100% !important; max-width: 460px !important; height: 100% !important; max-height: none !important;
  margin: 0 0 0 auto !important; border: 0 !important; border-radius: 0 !important;
  background: radial-gradient(110% 45% at 85% 0%, #3d1a28 0%, #182036 55%, #110910 100%) !important;
  box-shadow: none !important; color: #f5f3ff !important;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)) !important;
  display: flex !important; flex-direction: column !important; gap: 16px !important; overflow-y: auto !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
@media (min-width: 700px) { .settings-overlay .settings-panel.aws-panel { border-left: 1px solid rgba(245,243,255,.1) !important; } }
.aws-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.aws-title { margin: 0; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.04em; color: #f5f3ff; font-style: normal; }
.aws-close { width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; display: flex; align-items: center; justify-content: center; padding: 0; }
.aws-close svg { width: 20px; height: 20px; }
.aws-profile { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: rgba(245,243,255,.05); border: 1px solid rgba(245,243,255,.1); }
.aws-profile-av { width: 64px !important; height: 64px !important; flex: 0 0 64px; border-radius: 50% !important; overflow: hidden; border: 2px solid #ffd36a; display: flex; align-items: center; justify-content: center; background: #5a2a40; }
.aws-profile-av img, .aws-profile-av svg { width: 100%; height: 100%; object-fit: cover; }
.aws-profile-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aws-profile-copy strong { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: #f5f3ff; }
.aws-profile-copy span { font-size: 14px; color: rgba(245,243,255,.7); }
.aws-profile-copy em { font-style: normal; display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(245,243,255,.85); }
.aws-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; }
.aws-group { border-radius: 22px; background: rgba(245,243,255,.05); border: 1px solid rgba(245,243,255,.1); display: flex; flex-direction: column; overflow: hidden; }
.aws-row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 16px; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid rgba(245,243,255,.08); background: transparent; color: #f5f3ff; text-align: left; text-decoration: none; font: inherit; cursor: pointer; border-radius: 0; }
.aws-group > .aws-row:last-child { border-bottom: 0; }
.aws-row:active { background: rgba(245,243,255,.05); }
.aws-row-static { cursor: default; }
.aws-ic { width: 22px; height: 22px; flex: 0 0 22px; color: #f5f3ff; display: flex; }
.aws-ic svg { width: 22px; height: 22px; }
.aws-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #f5f3ff; }
.aws-label small { font-size: 13px; font-weight: 400; color: rgba(245,243,255,.6); }
.aws-label small.is-ok { color: #4ade80; }
.aws-label small.is-warn { color: #ffb36b; }
.aws-value { flex: 0 0 auto; font-size: 14px; color: rgba(245,243,255,.62); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-chev { width: 18px; height: 18px; flex: 0 0 18px; color: rgba(245,243,255,.45); }
.aws-thumb { width: 40px !important; height: 40px !important; flex: 0 0 40px; border-radius: 50% !important; overflow: hidden; border: 2px solid #f5f3ff; display: flex; align-items: center; justify-content: center; background: #5a2a40; }
.aws-thumb img, .aws-thumb svg { width: 100%; height: 100%; object-fit: cover; }
.aws-switch { flex: 0 0 52px; width: 52px; height: 30px; border-radius: 15px; padding: 3px; box-sizing: border-box; background: rgba(245,243,255,.18); display: flex; justify-content: flex-start; transition: background .2s; }
.aws-switch i { width: 24px; height: 24px; border-radius: 50%; background: #fff8ee; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s; }
.aws-row[aria-checked="true"] .aws-switch { background: linear-gradient(90deg, #ffb83d, #ff8a3d); }
.aws-row[aria-checked="true"] .aws-switch i { transform: translateX(22px); }
.aws-sub-actions { display: contents; }
.aws-sub-actions .aws-link-btn:not([hidden]) { display: block; margin: -4px 16px 8px 52px; padding: 0; border: 0; background: none; color: #ffd36a; font: inherit; font-size: 13px; font-weight: 700; text-align: left; }
.aws-sub-actions .error-text:not([hidden]) { margin: 0 16px 8px 52px; }
.aws-drawer:not([hidden]) { padding: 4px 16px 16px; border-bottom: 1px solid rgba(245,243,255,.08); display: flex; flex-direction: column; gap: 10px; }
.aws-signout { margin-top: auto; height: 54px; border-radius: 27px; border: 1.5px solid #ff5a6e; background: rgba(255,90,110,.08); color: #ff7b8b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; font-weight: 700; font-size: 16px; }
.aws-secure:not([hidden]) { margin-top: auto; height: 54px; border-radius: 27px; background: #ffb42e; color: #2a0f1f; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.aws-foot { margin: -6px 8px 0; text-align: center; font-size: 12px; line-height: 1.4; color: rgba(245,243,255,.55); }
.aws-foot a { color: #ffd36a; }

/* ===== Word Hunt, rebuilt (Oct 2026): a real game table ===== */
.games-overlay:has(#wordsPanel:not([hidden])) {
  background: radial-gradient(80% 40% at 50% 38%, rgba(255,170,80,.20) 0%, rgba(255,170,80,0) 70%), linear-gradient(180deg, #1d2a17 0%, #142010 40%, #0e160b 100%) !important;
}
#wordsPanel .words-card { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #f5f3ff; }
#wordsPanel .wh-session:not([hidden]) { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 420px; margin: 0 auto; padding: 4px 4px 8px; box-sizing: border-box; position: relative; }
.wh-hud { display: flex; align-items: center; gap: 8px; }
.wh-player { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 10px; border-radius: 18px; box-sizing: border-box; }
.wh-me { background: rgba(40,80,140,.38); border: 1.5px solid rgba(120,180,255,.55); }
.wh-them { justify-content: flex-end; background: rgba(150,50,90,.32); border: 1.5px solid rgba(255,120,170,.4); }
.wh-av { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; overflow: hidden; border: 2px solid #f5f3ff; display: flex; align-items: center; justify-content: center; background: #5a2a40; }
.wh-av img, .wh-av svg { width: 100%; height: 100%; object-fit: cover; }
.wh-pcopy { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.wh-them .wh-pcopy { text-align: right; }
.wh-pcopy b { font-size: 13px; font-weight: 700; color: #f5f3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-pcopy strong { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 20px; }
.wh-me .wh-pcopy strong { color: #9cc9ff; }
.wh-them .wh-pcopy strong { color: #ffa3c4; }
.wh-clock { flex: 0 0 82px; height: 58px; border-radius: 18px; background: rgba(8,12,6,.72); border: 1px solid rgba(245,243,255,.16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#wordsPanel .wh-clock .words-timer { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 22px; color: #f5f3ff; background: none; padding: 0; border: 0; box-shadow: none; }
#wordsPanel .wh-clock .words-timer.is-low { color: #ff7b8b; }
.wh-clock-bar { width: 56px; height: 4px; border-radius: 2px; background: rgba(245,243,255,.15); overflow: hidden; }
.wh-clock-bar i { display: block; height: 100%; width: 100%; background: #ffd36a; border-radius: 2px; transition: width 1s linear; }
.wh-word-row { display: flex; justify-content: center; min-height: 40px; }
#wordsPanel .wh-word { height: 40px; min-width: 40px; padding: 0 18px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .12em; color: transparent; background: transparent; box-shadow: none; transition: background .12s; }
#wordsPanel .wh-word.is-live { background: #ffd36a; color: #2a1a05; box-shadow: 0 8px 22px rgba(255,190,80,.35); }
#wordsPanel .wh-board { width: 100% !important; max-width: 380px !important; aspect-ratio: 1 / 1; height: auto; margin: 0 auto; padding: 14px !important; box-sizing: border-box; border-radius: 28px !important; background: linear-gradient(160deg, #5a3b20 0%, #3b2614 100%) !important; border: 1px solid rgba(255,220,160,.25) !important; box-shadow: 0 24px 50px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,230,180,.18) !important; position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
#wordsPanel .wh-board .words-tiles { gap: 10px !important; width: 100%; height: 100%; }
#wordsPanel .wh-board .words-tiles.wh-spin { animation: whSpin .35s ease; }
@keyframes whSpin { from { transform: rotate(-90deg) scale(.92); opacity: .4; } to { transform: none; opacity: 1; } }
#wordsPanel .wh-board .words-cell { border: 0 !important; border-radius: 16px !important; background: linear-gradient(180deg, #fbf1dc, #ecdcb8) !important; box-shadow: 0 5px 0 #b49b6a, 0 8px 14px rgba(0,0,0,.35) !important; color: #3a2a12 !important; font-family: "Funnel Display", system-ui, sans-serif !important; font-weight: 700 !important; font-size: clamp(24px, 8vw, 34px) !important; transform: none; transition: transform .08s ease, background .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color: transparent; }
#wordsPanel .wh-board .words-cell span { pointer-events: none; }
#wordsPanel .wh-board .words-cell.selected { background: linear-gradient(180deg, #ffe08a, #ffc23d) !important; box-shadow: 0 3px 0 #b9851a, 0 6px 10px rgba(0,0,0,.3) !important; color: #3a2405 !important; transform: translateY(2px) scale(.97); }
#wordsPanel .wh-board .words-cell.selected::after { color: rgba(58,36,5,.7); font-size: 10px; top: 5px; right: 8px; }
#wordsPanel .wh-board .words-cell.locked { background: linear-gradient(180deg, #b9f5a0, #5fd47e) !important; box-shadow: 0 3px 0 #2f8f4e, 0 6px 10px rgba(0,0,0,.3) !important; color: #123a1c !important; }
#wordsPanel .wh-board .words-cell.invalid { background: linear-gradient(180deg, #ffb3b3, #ff6b6b) !important; box-shadow: 0 3px 0 #b33a3a !important; color: #fff !important; }
#wordsPanel .wh-board .words-cell.hinted { animation: whHint 1.3s ease-in-out 2; outline: 3px solid #ffd36a; outline-offset: 2px; }
#wordsPanel .wh-board .words-cell.hinted::before { content: attr(data-hint); position: absolute; top: 4px; left: 8px; font-size: 11px; color: #b9851a; }
@keyframes whHint { 50% { transform: translateY(-4px); } }
#wordsPanel .wh-board .words-trace-svg polyline { stroke: rgba(255,255,255,.6); stroke-width: 10; filter: drop-shadow(0 0 6px rgba(255,220,120,.8)); }
#wordsPanel .wh-board .words-trace-svg circle { fill: rgba(255,255,255,.7); r: 7; }
.wh-found { padding: 12px 14px; border-radius: 18px; background: rgba(8,12,6,.6); border: 1px solid rgba(245,243,255,.12); }
.wh-found-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: rgba(245,243,255,.75); }
#wordsPanel .wh-chips { margin-top: 10px; justify-content: flex-start; gap: 8px; min-height: 30px; max-height: 82px; overflow-y: auto; }
#wordsPanel .wh-chips .words-found-chip { height: 30px; padding: 0 12px; border-radius: 15px; border: 0; display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: #f5f3ff; background: #1f6b46; }
#wordsPanel .wh-chips .wh-chip-b { background: #2a5a9a; }
#wordsPanel .wh-chips .wh-chip-y { background: #7a5a12; }
#wordsPanel .wh-chips .wh-chip-p { background: #6b2a6a; }
.wh-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wh-tool { height: 50px; border-radius: 25px; border: 1px solid rgba(245,243,255,.18); background: rgba(8,12,6,.6); color: #f5f3ff; font: inherit; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.wh-tool svg { width: 18px; height: 18px; }
.wh-tool:disabled { opacity: .45; }
/* Lobby, waiting and result screens sit on the same table. */
#wordsPanel .words-header, #wordsPanel .words-results, #wordsPanel .words-waiting, #wordsPanel .words-turn, #wordsPanel .words-idle { color: #f5f3ff; }
#wordsPanel .words-status { color: #f5f3ff; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; }
#wordsPanel .words-hint, #wordsPanel .waiting-text { color: rgba(245,243,255,.78); }
#wordsPanel .words-result-col, #wordsPanel .words-waiting-col { background: rgba(8,12,6,.6) !important; border: 1px solid rgba(245,243,255,.12) !important; color: #f5f3ff; }
#wordsPanel .words-result-col.winner { border-color: #ffd36a !important; box-shadow: 0 0 0 2px rgba(255,211,106,.35); }
#wordsPanel #wordsStartBtn, #wordsPanel #wordsPlayBtn, #wordsPanel #wordsPlayAgainBtn { background: #ffb42e !important; color: #2a0f1f !important; border: 0 !important; height: 52px; border-radius: 26px; font-weight: 800; padding: 0 26px; }
#wordsPanel:has(.wh-session:not([hidden])) .words-header { display: none; }

/* ===== Home, rebuilt (Oct 2026): fewer, richer cards ===== */
.home-screen.awh {
  background: radial-gradient(120% 50% at 80% 0%, #4a1d2e 0%, #182036 55%, #110910 100%) !important;
  color: #f5f3ff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom)) !important;
  gap: 16px !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important;
}
.home-screen.awh::before, .home-screen.awh::after { display: none !important; }
.home-screen.awh > * { max-width: 560px; width: 100%; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
.awh-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 0; position: relative; z-index: 3; }
.awh-brand { display: flex; align-items: center; gap: 10px; }
.awh-brand b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.05em; color: #f5f3ff; }
.awh-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #ffd36a, #ff9a3d); display: flex; align-items: center; justify-content: center; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 19px; color: #2a0f1f; }
.awh-bar-actions { display: flex; gap: 8px; }
.awh-icon-btn { position: relative; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(245,243,255,.14); background: rgba(245,243,255,.06); color: #f5f3ff; display: flex; align-items: center; justify-content: center; padding: 0; }
.awh-icon-btn svg { width: 20px; height: 20px; }
.awh-me-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #ffd36a; background: #6b3a4e; color: #f5f3ff; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 16px; padding: 0; }
.awh-hero { position: relative; height: 172px; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #ff9a4a 0%, #e8506d 45%, #5a2140 78%, #23101c 100%); box-shadow: 0 18px 40px rgba(0,0,0,.45); flex: 0 0 auto; }
.awh-sun { position: absolute; left: 50%; top: 74px; width: 124px; height: 124px; margin-left: -62px; border-radius: 50%; background: radial-gradient(circle, #ffe7a3 0%, #ffbf5a 45%, rgba(255,140,80,0) 72%); }
.awh-hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, rgba(20,8,16,0), rgba(20,8,16,.85)); }
.awh-hero-copy { position: absolute; left: 20px; right: 20px; top: 18px; }
.awh-greet { margin: 0; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -.04em; line-height: 1.05; color: #fff8ee; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.awh-greet .awa-greeting-name { color: inherit; font-style: normal; }
.awh-hero-sub { margin: 6px 0 0; font-size: 14px; color: rgba(255,248,238,.9); }
.home-contact-row.awh-presence { position: absolute !important; left: 14px; bottom: 14px; right: auto; max-width: calc(100% - 28px); width: auto !important; margin: 0 !important; display: flex !important; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 6px !important; border-radius: 22px !important; background: rgba(17,9,16,.62) !important; border: 1px solid rgba(245,243,255,.16) !important; box-shadow: none !important; color: #f5f3ff !important; }
.awh-presence .avatar-slot { width: 32px !important; height: 32px !important; flex: 0 0 32px; border-radius: 50%; overflow: hidden; }
.awh-presence .dot { position: static !important; width: 8px; height: 8px; flex: 0 0 8px; }
.awh-presence .home-contact-info { display: block; min-width: 0; }
.awh-presence .home-contact-preview { font-size: 13px; font-weight: 700; color: #f5f3ff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.awh-presence .chat-badge:not([hidden]) { position: static; }
.awh-card { position: relative; display: block; width: 100%; border: 1px solid rgba(245,243,255,.1); border-radius: 26px; color: #f5f3ff; text-align: left; font: inherit; padding: 0; overflow: hidden; flex: 0 0 auto; cursor: pointer; }
.awh-whot { height: 196px; background: radial-gradient(90% 90% at 75% 60%, #5b2a74 0%, #2a1433 60%, #1b0e1f 100%); }
.awh-whot.is-attention, .awh-tile.is-attention { box-shadow: 0 0 0 2px rgba(255,211,106,.65), 0 14px 32px rgba(0,0,0,.4); }
.awh-whot-copy { position: absolute; left: 20px; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.awh-whot-copy b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.03em; }
.awh-whot-copy small { font-size: 13px; color: rgba(245,243,255,.72); }
.awh-fan { position: absolute; right: 16px; top: 28px; width: 150px; height: 130px; }
.awh-fan i { position: absolute; width: 74px; height: 106px; border-radius: 12px; border: 3px solid #f5f3ff; box-shadow: 0 10px 20px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-style: normal; font-size: 34px; color: #f5f3ff; box-sizing: border-box; }
.awh-fan .f1 { left: 0; top: 18px; background: #e23b4e; transform: rotate(-16deg); }
.awh-fan .f2 { right: 0; top: 12px; background: #2f9e5b; transform: rotate(14deg); }
.awh-fan .f3 { left: 34px; top: 0; width: 80px; height: 114px; background: linear-gradient(160deg, #6d3bd1, #3a1a7a); font-size: 17px; letter-spacing: .04em; color: #ffd36a; }
.awh-cta { position: absolute; left: 16px; bottom: 16px; height: 40px; padding: 0 18px; border-radius: 20px; background: rgba(245,243,255,.12); border: 1px solid rgba(245,243,255,.22); color: #f5f3ff; font-weight: 800; font-size: 14px; display: flex; align-items: center; }
.awh-cta.is-turn { background: #ffb42e; border: 0; color: #2a0f1f; }
.awh-panel { padding: 18px; background: rgba(245,243,255,.05); }
.awh-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.awh-panel-head b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.03em; }
.awh-panel-head small { font-size: 13px; color: rgba(245,243,255,.68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awh-services { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.awh-svc { height: 52px; border-radius: 14px; background: #0f0b0e; border: 1px solid rgba(245,243,255,.1); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 15px; color: #f5f3ff; }
.awh-svc svg { width: 26px; height: 18px; }
.awh-tt { width: 15px; height: 17px; border-radius: 4px; background: #25f4ee; box-shadow: 3px 2px 0 #fe2c55; display: inline-block; }
.awh-nf { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 17px; color: #e50914; letter-spacing: .06em; }
.awh-awa { background: linear-gradient(135deg, #3a1a2a, #182036); border-color: rgba(255,211,106,.35); color: #ffd36a; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; }
.awh-bubbles.chat-window-bubbles { margin-top: 12px; display: flex !important; flex-direction: column; gap: 8px; position: static !important; height: auto !important; min-height: 0; padding: 0 !important; background: none !important; }
.awh-bubbles .bubble { position: static !important; display: block; max-width: 85%; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: rgba(245,243,255,.09) !important; color: #f5f3ff !important; font-size: 14px; line-height: 1.35; transform: none !important; animation: none !important; box-shadow: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awh-bubbles .bubble.mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: linear-gradient(90deg, rgba(255,184,61,.28), rgba(255,79,139,.28)) !important; }
.awh-bubbles .bubble small { display: block; font-size: 11px; color: rgba(245,243,255,.6); margin-bottom: 2px; }
.awh-bubbles .chat-preview-empty { font-size: 14px; color: rgba(245,243,255,.6); }
.awh-moments { height: 190px; background: linear-gradient(180deg, #f6a25a 0%, #c9476a 50%, #1f2639 100%); }
.awh-moments.is-attention { box-shadow: 0 0 0 2px rgba(255,211,106,.65); }
.awh-moments-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: linear-gradient(180deg, rgba(17,9,16,0), rgba(17,9,16,.9)); }
.awh-moments-title { position: absolute; left: 18px; top: 16px; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.03em; color: #fff8ee; }
.awh-moments-foot { position: absolute; left: 18px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.awh-moments-cap { font-size: 15px; font-weight: 700; color: #f5f3ff; min-width: 0; }
.awh-pill-light { flex: 0 0 auto; height: 36px; padding: 0 14px; border-radius: 18px; background: #f5f3ff; color: #2a0f1f !important; font-weight: 800; font-size: 13px; display: flex; align-items: center; }
.awh-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.awh-tile, .awh-tile.awa-lounge-card { position: relative; height: 108px; min-height: 0 !important; margin: 0 !important; border-radius: 22px !important; padding: 14px !important; box-sizing: border-box; border: 1px solid rgba(245,243,255,.1) !important; display: flex !important; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 0 !important; text-align: left; color: #f5f3ff !important; font: inherit; text-decoration: none !important; overflow: hidden; }
.awh-t-words { background: linear-gradient(160deg, #2c4a2a, #142113) !important; }
.awh-t-deck { background: linear-gradient(160deg, #5a2a2a, #241111) !important; }
.awh-t-sync { background: linear-gradient(160deg, #23355e, #111a30) !important; }
.awh-t-lounge { background: linear-gradient(160deg, #13392b, #0b1f17) !important; border-color: rgba(82,211,156,.35) !important; }
.awh-tile-art { display: flex; gap: 4px; align-items: center; height: 24px; }
.awh-tile-art i { width: 22px; height: 22px; border-radius: 6px; background: #f5e6c8; color: #3a2a12; font-weight: 800; font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.awh-tile-art i.hot { background: #ffd36a; }
.awh-die { width: 20px; height: 20px; border-radius: 5px; background: #f5f3ff; box-shadow: inset 0 0 0 5px #f5f3ff, inset 0 0 0 7px #e23b4e; }
.awh-die.d2 { transform: rotate(14deg); }
.awh-ring { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #9cc9ff; }
.awh-ring.r2 { margin-left: -10px; border-color: #ffa3c4; }
.awh-tile-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.awh-tile-copy b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 17px; }
.awh-tile-copy small { font-size: 12px; color: rgba(245,243,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awh-tile .awa-tile-badge:not([hidden]) { position: absolute; top: 12px; right: 12px; }
.awh-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px) !important; max-width: 536px !important; height: 66px; border-radius: 24px; background: rgba(24,13,21,.94); border: 1px solid rgba(245,243,255,.12); display: flex; align-items: center; justify-content: space-around; box-shadow: 0 -8px 30px rgba(0,0,0,.4); z-index: 40; margin: 0 !important; }
.awh-nav-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; height: 56px; justify-content: center; border: 0; background: none; color: rgba(245,243,255,.62); font: inherit; font-size: 11px; font-weight: 700; padding: 0; }
.awh-nav-btn svg { width: 22px; height: 22px; }
.awh-nav-btn.is-on { color: #ffd36a; }
#homeScreen[hidden] .awh-nav, .home-screen.awh[hidden] { display: none !important; }

/* No light strip at the bottom: whatever theme an older version saved on
   this phone, the frame behind the app is always the AwaSpace night. */
html, body { background-color: #110910 !important; }
html.room-active body, .room-shell { background: #110910 !important; }

/* The update banner must clear the notch / status bar and sit above
   every overlay, or it can be there and still go unseen. */
.update-banner { z-index: 2147483000 !important; padding-top: calc(.75rem + env(safe-area-inset-top)) !important; }
.home-contact-row.awh-presence { min-height: 0 !important; height: 44px !important; backdrop-filter: none !important; }
.home-contact-row.awh-presence::before, .home-contact-row.awh-presence::after { display: none !important; content: none !important; }
.home-contact-row.awh-presence .avatar-slot { box-shadow: none !important; }
.home-contact-row.awh-presence .avatar-photo, .home-contact-row.awh-presence .brand-mark, .home-contact-row.awh-presence .avatar-slot svg { width: 32px !important; height: 32px !important; }
.awh-bubbles.chat-window-bubbles { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; overflow: visible !important; }
.awh-bubbles .chat-preview-empty { align-self: flex-start; margin: 0; font-size: 14px !important; }
#wordsPanel .wh-word { border: 0 !important; outline: 0; }
#wordsPanel .wh-word:not(.is-live) { background: transparent !important; box-shadow: none !important; }

/* Home touches (v2): real Whot cards, real TikTok mark, livelier Chat, Moments scene */
.awh-fan .awh-fc { position: absolute; width: 74px; height: 106px; border-radius: 11px; overflow: hidden; box-shadow: 0 12px 22px rgba(0,0,0,.45); background: #fbf3e4; }
.awh-fan .awh-fc .whot-card-face { width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; border-radius: 11px; }
.awh-fan .fc1 { left: 0; top: 20px; transform: rotate(-15deg); }
.awh-fan .fc2 { right: 0; top: 14px; transform: rotate(13deg); }
.awh-fan .fc3 { left: 36px; top: 0; width: 80px; height: 114px; z-index: 2; box-shadow: 0 16px 28px rgba(0,0,0,.55), 0 0 0 2px rgba(255,211,106,.55); }
.awh-tt { width: 26px; height: 26px; border-radius: 7px; background: #000; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.awh-tt svg { width: 18px; height: 18px; }
.awh-chat { background: linear-gradient(150deg, #123c4a 0%, #16535a 55%, #1f6f62 100%) !important; border-color: rgba(120,220,200,.22) !important; }
.awh-chat-glow { position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,211,106,.28), rgba(255,211,106,0) 70%); pointer-events: none; }
.awh-chat .awh-panel-head, .awh-chat .awh-bubbles { position: relative; z-index: 1; }
.awh-chat .awh-bubbles .bubble.theirs { background: rgba(255,255,255,.16) !important; color: #fff !important; border-radius: 18px 18px 18px 6px; }
.awh-chat .awh-bubbles .bubble.mine { background: linear-gradient(135deg, #ffd36a, #f2a65c) !important; color: #2a1405 !important; border-radius: 18px 18px 6px 18px; }
.awh-chat .awh-bubbles .bubble.mine small { color: rgba(42,20,5,.6); }
.awh-chat .awh-panel-head small { color: rgba(255,255,255,.75); }
.awh-moments .moment-scene.awh-scene { position: absolute !important; inset: 0 !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; border-radius: 0 !important; z-index: 0 !important; box-shadow: none !important; }
.awh-moments .awh-scene .moment-sun { right: 22%; top: 30px; }
.awh-moments .awh-scene .moment-person { bottom: 40px; }
.awh-moments .awh-moments-fade, .awh-moments .awh-moments-title, .awh-moments .awh-moments-foot { z-index: 4; }

/* Home v3: the chat row under the greeting is unmistakably the chat */
.awh-hero { height: 128px !important; }
.home-contact-row.awh-chatrow { position: relative !important; display: flex !important; align-items: center; gap: 12px; width: 100% !important; min-height: 0 !important; height: auto !important; margin: -4px 0 0 !important; padding: 12px 12px 12px 12px !important; border-radius: 22px !important; background: linear-gradient(120deg, rgba(255,184,61,.16), rgba(255,79,139,.12)) !important; border: 1px solid rgba(255,211,106,.32) !important; box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; color: #f5f3ff !important; text-align: left; backdrop-filter: none !important; }
.home-contact-row.awh-chatrow::before, .home-contact-row.awh-chatrow::after { display: none !important; content: none !important; }
.awh-chatrow-av { position: relative; width: 50px; height: 50px; flex: 0 0 50px; }
.awh-chatrow-av .avatar-slot { width: 50px !important; height: 50px !important; border-radius: 50%; overflow: hidden; display: block; border: 2px solid rgba(245,243,255,.85); box-shadow: none !important; }
.awh-chatrow-av .avatar-slot img, .awh-chatrow-av .avatar-slot svg, .awh-chatrow-av .avatar-photo { width: 100% !important; height: 100% !important; object-fit: cover; }
.awh-chatrow-av .dot { position: absolute !important; right: 0; bottom: 1px; width: 13px !important; height: 13px !important; border: 2.5px solid #182036; box-sizing: border-box; }
.awh-chatrow .home-contact-info { flex: 1 1 auto; min-width: 0; display: flex !important; flex-direction: column; gap: 2px; }
.awh-chatrow .home-contact-name { display: block !important; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: #f5f3ff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awh-chatrow .home-contact-preview { display: block; font-size: 13px; font-weight: 500; color: rgba(245,243,255,.75) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awh-chatrow .chat-badge:not([hidden]) { position: static !important; flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 7px; background: #ff4f8b; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.awh-chatrow-go { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #ffd36a, #ff9a3d); color: #2a0f1f; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(255,79,139,.35); }
.awh-chatrow-go svg { width: 22px; height: 22px; }

/* Whot: your hand lies straight, and the table lights up on your turn */
#whotPanel #whotHand .whot-card-btn { margin-left: -6px !important; transform: none !important; transform-origin: 50% 100%; }
#whotPanel #whotHand .whot-card-btn:first-child { margin-left: 0 !important; }
#whotPanel #whotHand .whot-card-btn.clickable:hover,
#whotPanel #whotHand .whot-card-btn.clickable:focus-visible,
#whotPanel #whotHand .whot-card-btn.clickable:active { transform: translateY(-14px) !important; }
#whotPanel .whot-board.my-turn .whot-table { box-shadow: 0 0 0 3px #ffd36a, 0 0 46px rgba(255,211,106,.55), 0 30px 60px -22px rgba(0,0,0,.85) !important; }
#whotPanel .whot-table::after { content: ""; position: absolute; inset: -10px; border-radius: inherit; border: 3px solid #ffd36a; box-shadow: 0 0 36px rgba(255,211,106,.8); opacity: 0; pointer-events: none; }
#whotPanel .whot-board.my-turn .whot-table::after { animation: whotTurnPulse 1.6s ease-in-out infinite; }
@keyframes whotTurnPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
#whotPanel .whot-board.my-turn .whot-status { color: #2a1405 !important; background: #ffb42e !important; border-color: transparent !important; font-weight: 800; letter-spacing: .02em; box-shadow: 0 8px 22px rgba(255,190,80,.45); }
.home-screen.awh > * { flex: 0 0 auto !important; }
.home-contact-row.awh-chatrow { margin: 0 !important; }

/* Whot instant feel: the card lifts the moment a finger lands, and a played
   card flies to the pile straight away instead of waiting on the network. */
#whotPanel #whotHand .whot-card-btn.clickable{transition:transform .08s ease-out !important}
#whotPanel #whotHand .whot-card-btn.clickable.whot-pressed{transform:translateY(-16px) scale(1.05) !important}
.whot-play-flyer{position:fixed;z-index:9999;pointer-events:none;margin:0;transition:transform .22s cubic-bezier(.2,.8,.2,1);will-change:transform;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}

/* Settings: let the list grow and scroll instead of squashing every group
   into one screen (rows under Sounds & Reactions were being cut off). */
.settings-overlay .settings-panel.aws-panel > * { flex-shrink: 0 !important; }
.settings-overlay .settings-panel.aws-panel { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.cinema-room-partner { cursor: pointer; }

/* Home bottom bar: sit flush on the real bottom edge (iPhone showed a gap
   that the page scrolled through), with the home-indicator area filled in,
   and stop the page bouncing past it. */
.awh-nav {
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  /* v81: the empty band under the buttons cut to about 20 px. */
  height: calc(64px + max(8px, env(safe-area-inset-bottom) - 14px)) !important;
  padding: 0 max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom) - 14px) max(12px, env(safe-area-inset-right)) !important;
  box-sizing: border-box !important;
  border-radius: 22px 22px 0 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background: rgba(24, 13, 21, .97) !important;
}
html { background-color: #110910; }
html, body { overscroll-behavior-y: none; }

/* Whot: give up this round */
.whot-forfeit { display: block; margin: 6px auto 0; padding: 6px 12px; border: 0; background: none; color: rgba(245,243,255,.55); font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.whot-forfeit[hidden] { display: none !important; }
.whot-forfeit.is-armed { color: #ff7b8b; text-decoration: none; background: rgba(255,90,110,.12); border-radius: 999px; }

/* ===== Home and Play (Oct 8): Home is the Space, Play holds every game ===== */
.home-screen.awh[data-view="play"] .awh-home-only,
.home-screen.awh:not([data-view="play"]) .awh-play-only { display: none !important; }
.home-screen.awh[data-view="play"] .awa-secure-nudge { display: none !important; }
.awh-play-head { padding: 6px 4px 2px; }
.awh-play-head h2 { margin: 0; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -.04em; line-height: 1.05; color: #fff8ee; }
.awh-play-head p { margin: 6px 0 0; font-size: 14px; color: rgba(245,243,255,.7); }
.awh-moments[hidden] { display: none !important; }
.awh-panel.is-attention { box-shadow: 0 0 0 2px rgba(255,211,106,.65), 0 14px 32px rgba(0,0,0,.4); }

/* Soundtrack: one slim row on Home */
.awh-sound { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 72px; padding: 0 14px 0 18px; box-sizing: border-box; border-radius: 22px; border: 1px solid rgba(245,243,255,.1); color: #f5f3ff; font: inherit; text-align: left; flex: 0 0 auto; cursor: pointer; }
.awh-sound .awh-eq { flex: 0 0 auto; }
.awh-sound-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.awh-sound-copy b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 17px; }
.awh-sound-copy small { font-size: 12.5px; color: rgba(245,243,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awh-sound-go { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #ffd36a; color: #2a0f1f; display: flex; align-items: center; justify-content: center; }
.awh-sound-go svg { width: 18px; height: 18px; margin-left: 2px; }

/* A dot on Play when a game is waiting on you */
.awh-nav-btn { position: relative; }
.awh-nav-btn.has-dot::after { content: ""; position: absolute; top: 8px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: #ff4f8b; box-shadow: 0 0 0 2px rgba(24,13,21,.94); }

/* Whot: a big hand scrolls freely sideways */
#whotPanel #whotHand { scroll-snap-type: none !important; overscroll-behavior-x: contain; }

/* ===== Play: every game in its own material, same weight ===== */
.pl-list { display: flex; flex-direction: column; gap: 14px; }
.pl-game { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; border: 0; padding: 0; color: #f5f3ff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pl-game:active { transform: scale(.985); }
.pl-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pl-copy b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.02em; line-height: 1.1; }
.pl-copy small { font-size: 13px; line-height: 1.35; color: rgba(245,243,255,.72); }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pl-game:focus-visible { outline: 2px solid #ffd36a; outline-offset: 3px; }
.pl-game.is-attention { box-shadow: 0 0 0 2px #ffd36a; }

/* Whot: purple card-table felt with a stitched edge, real faces fanned off the side */
.pl-whot { height: 112px; padding: 0 0 0 20px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 140% at 85% 50%, #5a2f86 0%, #34195a 55%, #24103f 100%); }
.pl-whot::before { content: ""; position: absolute; inset: 6px; border: 1.5px dashed rgba(255,211,106,.32); border-radius: 13px; pointer-events: none; }

/* Word Hunt: the name is spelled in the board's own wooden tiles */
.pl-words { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 15px; border-radius: 14px; background: linear-gradient(170deg, #7a5129 0%, #5a3b1d 100%); box-shadow: inset 0 2px 0 rgba(255,225,170,.22), inset 0 -3px 0 rgba(0,0,0,.25); }
.pl-tiles { display: flex; gap: 4px; flex-wrap: nowrap; }
.pl-tiles i { position: relative; width: 31px; height: 33px; border-radius: 5px; background: linear-gradient(180deg, #f7e7c2, #e6cc95); color: #3a2412; font-family: "Funnel Display", system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #b38b4f, 0 3px 6px rgba(0,0,0,.3); }
.pl-tiles i sub { position: absolute; right: 3px; bottom: 1px; font-size: 8px; font-weight: 700; }
.pl-tiles em { width: 8px; flex: 0 0 8px; }
.pl-words .pl-copy small { color: rgba(255,240,215,.82); }
.pl-words .awa-tile-badge:not([hidden]) { position: absolute; top: 12px; right: 12px; }

/* Higher or Lower: a cream ticket with a torn-off stub */
.pl-hilo { height: 100px; padding: 0 0 0 18px; border-radius: 10px; background: #f4e4c1; color: #2a0f1f;
  -webkit-mask: radial-gradient(circle 9px at calc(100% - 64px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 64px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at calc(100% - 64px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at calc(100% - 64px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.pl-hilo-num { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: -.04em; color: #b8324a; flex: 0 0 auto; }
.pl-hilo .pl-copy small { color: rgba(42,15,31,.7); }
.pl-hilo-stub { align-self: stretch; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; border-left: 2px dashed rgba(42,15,31,.28); font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 34px; color: rgba(42,15,31,.55); }
.pl-hilo.is-attention { box-shadow: none; outline: 2px solid #ffd36a; }

/* Truth or Dare and Sync Check side by side */
.pl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-deck, .pl-sync { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 150px; padding: 16px 14px 14px; }
.pl-pair .pl-copy b { font-size: 17px; }
.pl-pair .pl-copy small { font-size: 12.5px; }
.pl-deck { border-radius: 4px 22px 4px 22px; background: #8e1f2e; }
.pl-slips { position: relative; height: 44px; width: 100%; }
.pl-slips i { position: absolute; top: 4px; padding: 6px 10px; background: #f5f3ff; color: #8e1f2e; font-style: normal; font-weight: 800; font-size: 13px; border-radius: 2px; box-shadow: 0 4px 8px rgba(0,0,0,.3); }
.pl-slips i:first-child { left: 0; transform: rotate(-7deg); }
.pl-slips i:last-child { left: 62px; top: 10px; transform: rotate(5deg); }
.pl-sync { border-radius: 50px 18px 18px 18px; background: #1d2b52; }
.pl-venn { position: relative; width: 70px; height: 44px; }
.pl-venn i { position: absolute; top: 0; width: 44px; height: 44px; border-radius: 50%; mix-blend-mode: screen; }
.pl-venn i:first-child { left: 0; background: #ff6f91; }
.pl-venn i:last-child { left: 26px; background: #4fa3ff; }

/* Lounge: a quiet strip at the end */
.pl-list .pl-lounge.awa-lounge-card { margin: 0; min-height: 0; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(82,211,156,.35); background: rgba(19,57,43,.55); }
.pl-lounge .pl-copy b { font-size: 16px; }
.pl-lounge .aw-lounge-dot { flex: 0 0 auto; }

/* Home: Whot is one row among the rest, Cinema leads */
.home-screen.awh .awh-whot { height: 112px; }
.home-screen.awh .awh-whot .awh-fan { transform: scale(.62); transform-origin: right center; top: -6px; right: 4px; }
.home-screen.awh .awh-whot .awh-cta:not(.is-turn) { display: none; }
.home-screen.awh .awh-whot .awh-cta { left: auto; right: 14px; bottom: 12px; height: 32px; padding: 0 14px; font-size: 13px; }
.home-screen.awh .awh-whot-copy { top: auto; bottom: 0; top: 50%; transform: translateY(-50%); }

/* Calls: a tap starts their sound when the phone blocks it */
.call-tap-sound { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 5; padding: 12px 22px; border: 0; border-radius: 999px; background: #ffd36a; color: #2a0f1f; font: 800 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; box-shadow: 0 10px 24px rgba(0,0,0,.45); }

/* Home: you and them in one piece. Their row sits on the horizon of the sky */
.home-screen.awh .awh-hero { height: 214px !important; }
.home-screen.awh .awh-hero .awh-sun { top: 70px; }
.home-screen.awh .awh-hero .awh-hero-fade { height: 120px; background: linear-gradient(180deg, rgba(35,16,28,0), rgba(35,16,28,.92)); }
.home-screen.awh .awh-hero .home-contact-row.awh-chatrow.awh-in-hero { position: absolute !important; left: 10px; right: 10px; bottom: 10px; width: auto !important; margin: 0 !important; padding: 10px !important; border-radius: 18px !important; background: rgba(26,11,21,.5) !important; border: 1px solid rgba(245,243,255,.12) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3) !important; z-index: 2; }
.home-screen.awh .awh-in-hero .awh-chatrow-av, .home-screen.awh .awh-in-hero .awh-chatrow-av .avatar-slot { width: 44px !important; height: 44px !important; flex-basis: 44px; }
.home-screen.awh .awh-in-hero .awh-chatrow-av .dot { border-color: #1f2639; }
.home-screen.awh .awh-in-hero .home-contact-name { font-size: 17px; }
.home-screen.awh .awh-in-hero .awh-chatrow-go { width: 42px; height: 42px; flex-basis: 42px; }

/* Play: Whot is a hand of real cards held open on the page, no box around it */
.pl-whot { flex-direction: column; align-items: stretch; gap: 6px; height: auto; padding: 0; border-radius: 0; overflow: visible; background: none; }
.pl-whot::before { content: none; }
.pl-whot.is-attention { box-shadow: none; }
.pl-whot-glow { position: absolute; left: 50%; top: 8px; width: 320px; height: 170px; margin-left: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(122,62,190,.55), rgba(122,62,190,0)); pointer-events: none; }
.pl-whot-hand { position: relative; height: 176px; margin: 0 auto; width: 300px; }
.pl-wc { position: absolute; left: 50%; bottom: 8px; width: 82px; height: 118px; margin-left: -41px; border-radius: 11px; overflow: hidden; background: #fbf3e4; box-shadow: 0 12px 24px rgba(0,0,0,.5); transform-origin: 50% 135%; }
.pl-wc .whot-card-face { width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; border-radius: 11px; }
.pl-wc.w1 { transform: rotate(-26deg); z-index: 1; }
.pl-wc.w2 { transform: rotate(-13deg); z-index: 2; }
.pl-wc.w3 { transform: translateY(-10px); z-index: 5; box-shadow: 0 16px 30px rgba(0,0,0,.6), 0 0 0 2px rgba(255,211,106,.6); }
.pl-wc.w4 { transform: rotate(13deg); z-index: 2; }
.pl-wc.w5 { transform: rotate(26deg); z-index: 1; }
.pl-whot:active .pl-wc.w3 { transform: translateY(-22px); }
.pl-whot-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.pl-whot-foot .pl-copy b { font-size: 26px; letter-spacing: -.03em; }
.pl-whot .pl-turn, .pl-whot .pl-turn[hidden] { position: static; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 20px; background: rgba(245,243,255,.12); border: 1px solid rgba(245,243,255,.22); color: #f5f3ff; font-weight: 800; font-size: 14px; }
.pl-whot .pl-turn.is-turn { background: #ffb42e; border: 0; color: #2a0f1f; }
@media (prefers-reduced-motion: reduce) { .pl-whot:active .pl-wc.w3 { transform: translateY(-10px); } }

/* Whot: the app moves the hand sideways itself (see enableHandSwipe) */
#whotPanel #whotHand, #whotPanel #whotHand .whot-card-btn, #whotPanel #whotHand .whot-card-btn.clickable { touch-action: pan-y !important; }

/* ===== Awa Games: Whot and Word Hunt side by side ===== */
.pl-pair-top { grid-template-columns: 1fr 1fr; }
.pl-pair-top .pl-game { min-height: 172px; }
.pl-pair-top .pl-whot { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; height: auto; padding: 12px 14px 14px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 110% at 70% 15%, #5d3189 0%, #34195a 55%, #22103b 100%); }
.pl-pair-top .pl-whot::before { content: ""; position: absolute; inset: 5px; border: 1.5px dashed rgba(255,211,106,.3); border-radius: 14px; pointer-events: none; }
.pl-pair-top .pl-whot-hand { position: relative; width: 100%; height: 86px; margin: 0; }
.pl-pair-top .pl-wc { left: 50%; bottom: 0; width: 48px; height: 69px; margin-left: -24px; border-radius: 7px; transform-origin: 50% 130%; box-shadow: 0 8px 14px rgba(0,0,0,.45); }
.pl-pair-top .pl-wc .whot-card-face { width: 82px !important; height: 118px !important; transform: scale(.585); transform-origin: top left; border-radius: 12px; }
.pl-pair-top .pl-wc.w1 { transform: rotate(-18deg) translateX(-14px); z-index: 1; }
.pl-pair-top .pl-wc.w2 { transform: translateY(-6px); z-index: 3; box-shadow: 0 10px 18px rgba(0,0,0,.55), 0 0 0 2px rgba(255,211,106,.6); }
.pl-pair-top .pl-wc.w3 { transform: rotate(18deg) translateX(14px); z-index: 2; }
.pl-pair-top .pl-whot:active .pl-wc.w2 { transform: translateY(-14px); }
.pl-pair-top .pl-copy b { font-size: 18px; }
.pl-pair-top .pl-copy small { font-size: 12.5px; }
.pl-pair-top .pl-whot .pl-turn, .pl-pair-top .pl-whot .pl-turn[hidden] { position: absolute; top: 12px; right: 12px; height: auto; padding: 4px 9px; border-radius: 999px; border: 0; background: #ffd36a; color: #2a0f1f; font-size: 11.5px; font-weight: 800; }
.pl-pair-top .pl-whot .pl-turn[hidden] { display: none; }
.pl-pair-top .pl-words { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 14px; }
.pl-pair-top .pl-tiles { flex-direction: column; gap: 5px; }
.pl-pair-top .pl-tiles > span { display: flex; gap: 3px; }
.pl-pair-top .pl-tiles i { width: 27px; height: 29px; font-size: 16px; }
.pl-pair-top .pl-tiles i sub { font-size: 7px; }

/* ===== Home: the music corner, Awa Muzik and Awa Studio side by side ===== */
.awh-music { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 0 0 auto; }
.awh-music .awh-sound { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; height: 100px; padding: 14px 14px 12px; }
.awh-music .awh-sound-copy b { font-size: 16px; }
.awh-music .awh-sound-copy small { font-size: 12px; }
.awh-studio { background: linear-gradient(180deg, #2b2326 0%, #1b1517 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.awh-studio-lamp { width: 26px; height: 12px; border-radius: 6px; background: #ff3b45; box-shadow: 0 0 12px 3px rgba(255,59,69,.5); }

/* Moments: share without being asked */
.moments-or { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; font-size: 12.5px; color: rgba(245,243,255,.5); }
.moments-or span { flex: 1; height: 1px; background: rgba(245,243,255,.14); }
.moments-cta.moments-share { background: rgba(245,243,255,.08) !important; color: #f5f3ff !important; box-shadow: inset 0 0 0 1px rgba(245,243,255,.2) !important; }

/* ===== Reactions everywhere (Oct 2026) ===== */
/* The dock at the bottom of Higher or Lower, Truth or Dare and Sync Check */
.react-dock { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 160; display: flex; align-items: center; gap: 6px; width: min(calc(100% - 20px), 560px); padding: 6px; box-sizing: border-box; border-radius: 22px; background: rgba(22,12,24,.94); box-shadow: 0 0 0 1px rgba(245,243,255,.12), 0 -6px 26px rgba(0,0,0,.45); }
.react-dock[hidden] { display: none; }
.react-dock-row { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 2px; }
.react-dock-row button { flex: 1 1 0; min-width: 0; height: 46px; border: 0; border-radius: 14px; background: none; font-size: 26px; line-height: 1; padding: 0; transition: transform .12s ease-out; }
.react-dock-row button:active { transform: scale(1.25); background: rgba(245,243,255,.08); }
.react-dock-row button.is-sent { animation: reactSent .45s ease-out; }
@keyframes reactSent { 30% { transform: translateY(-10px) scale(1.35); } 100% { transform: none; } }
.react-dock-more { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; border: 0; background: rgba(245,243,255,.1); color: #f5f3ff; display: flex; align-items: center; justify-content: center; padding: 0; }
.react-dock-more svg { width: 20px; height: 20px; }
.games-overlay.has-react-dock .tab-panel:not([hidden]) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* The sheet: ready lines, your own words, every emoji, tray editing */
.react-sheet { position: fixed; inset: 0; z-index: 10080; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,4,10,.6); }
.react-sheet[hidden] { display: none; }
.react-sheet-card { width: 100%; max-width: 560px; max-height: 80dvh; overflow-y: auto; box-sizing: border-box; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #1f1820; color: #f5f3ff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; animation: reactUp .22s cubic-bezier(.2,.9,.3,1); }
@keyframes reactUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.react-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.react-sheet-head b { font: 700 18px "Funnel Display", system-ui, sans-serif; }
.react-sheet-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; font-size: 15px; }
.react-lines { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.react-lines button { padding: 9px 13px; border-radius: 999px; border: 1px solid rgba(255,211,106,.35); background: rgba(255,211,106,.08); color: #f5f3ff; font: 700 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.react-say { display: flex; gap: 8px; margin-bottom: 14px; }
.react-say input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 23px; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; font: 500 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; outline: none; }
.react-say input:focus { box-shadow: inset 0 0 0 2px #ffd36a; }
.react-say button { height: 46px; padding: 0 18px; border-radius: 23px; border: 0; background: #ffb42e; color: #2a0f1f; font: 800 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.react-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.react-grid button { height: 50px; border: 0; border-radius: 14px; background: rgba(245,243,255,.05); font-size: 28px; padding: 0; }
.react-grid button:active { transform: scale(1.15); }
.react-grid button.is-in { background: rgba(255,211,106,.2); box-shadow: inset 0 0 0 2px #ffd36a; }
.react-edit, .react-done { display: block; margin: 14px auto 0; padding: 8px 14px; border: 0; background: none; color: #ffd36a; font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.react-done { width: 100%; height: 48px; border-radius: 24px; background: #ffd36a; color: #2a0f1f; text-decoration: none; }
.react-sheet-note { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: rgba(245,243,255,.7); }
.react-tray-preview { display: flex; gap: 6px; margin-bottom: 14px; padding: 8px; border-radius: 18px; background: rgba(22,12,24,.9); box-shadow: 0 0 0 1px rgba(245,243,255,.12); }
.react-tray-preview span { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 26px; border-radius: 12px; }
.react-tray-preview span.empty { box-shadow: inset 0 0 0 1.5px dashed rgba(245,243,255,.2); border: 1.5px dashed rgba(245,243,255,.2); }

/* What lands on THEIR screen: big, in the middle, with a wobble and a burst */
.float-emoji.float-emoji-hit { font-size: 7.5rem; transform: translate(-50%, -50%); animation: reactHit 2.6s cubic-bezier(.2,.9,.3,1.1) forwards; z-index: 10090; }
.float-emoji-hit .float-emoji-label { font-size: 0.9rem; margin-top: 0; }
@keyframes reactHit {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-25deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.35) rotate(10deg); }
  22% { transform: translate(-50%, -50%) scale(.95) rotate(-8deg); }
  30% { transform: translate(-50%, -50%) scale(1.08) rotate(5deg); }
  38% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  75% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(.9); }
}
.float-emoji-bit { position: absolute; left: 50%; top: 50%; font-size: 1.6rem; opacity: 0; transform: translate(-50%, -50%); animation: reactBit 1.1s ease-out .25s forwards; pointer-events: none; }
@keyframes reactBit { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); } }
.whot-taunt-bubble.whot-taunt-big { font-size: 1rem; padding: .65rem .9rem; border-width: 2px; }
/* Duration comes from the script (longer lines stay up longer), same as your own lines. */
.whot-taunt-bubble.whot-taunt-big.bubble-centered { animation-name: tauntSlam !important; }
@keyframes tauntSlam {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-6deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
  18% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  24%, 30%, 36% { transform: translate(-52%, -50%) rotate(0); }
  27%, 33% { transform: translate(-48%, -50%) rotate(0); }
  85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}
@media (prefers-reduced-motion: reduce) { .float-emoji.float-emoji-hit, .float-emoji-bit { animation-duration: 1.6s !important; animation-name: float-up !important; } .whot-taunt-bubble.whot-taunt-big:not(.is-table) { animation-name: tauntTableCalm !important; } .float-emoji-bit { display: none; } }

/* ===== Suya bets ===== */
.bet-strip { margin: 2px 0 10px; }
.bet-strip[hidden] { display: none; }
.bet-add { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border-radius: 19px; border: 1px dashed rgba(255,211,106,.5); background: rgba(255,211,106,.06); color: #ffd36a; font: 700 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.bet-ic { font-size: 18px; line-height: 1; }
.bet-strip.is-on { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 16px; background: linear-gradient(100deg, rgba(255,184,61,.2), rgba(255,79,139,.18)); box-shadow: inset 0 0 0 1px rgba(255,211,106,.4); color: #f5f3ff; }
.bet-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bet-text small { font-size: 11.5px; font-weight: 700; color: #ffd36a; }
.bet-text b { font: 700 15px "Funnel Display", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-x { flex: 0 0 auto; height: 32px; padding: 0 12px; border-radius: 16px; border: 0; background: rgba(245,243,255,.1); color: #f5f3ff; font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.bet-sheet { position: fixed; inset: 0; z-index: 10080; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,4,10,.6); }
.bet-card { width: 100%; max-width: 560px; box-sizing: border-box; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #1f1820; color: #f5f3ff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; animation: reactUp .22s cubic-bezier(.2,.9,.3,1); }
.bet-head { display: flex; align-items: center; justify-content: space-between; }
.bet-head b { font: 700 19px "Funnel Display", system-ui, sans-serif; }
.bet-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; }
.bet-note { margin: 6px 0 12px; font-size: 13.5px; color: rgba(245,243,255,.7); }
.bet-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.bet-presets button { padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,211,106,.35); background: rgba(255,211,106,.08); color: #f5f3ff; font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.bet-own { display: flex; gap: 8px; margin-top: 14px; }
.bet-own input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 23px; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; font: 500 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; outline: none; }
.bet-own button { height: 46px; padding: 0 18px; border-radius: 23px; border: 0; background: #ffb42e; color: #2a0f1f; font: 800 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.owes { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(245,243,255,.04); box-shadow: inset 0 0 0 1px rgba(245,243,255,.08); }
.owes[hidden] { display: none; }
.owes-title { margin: 0 0 2px; font: 700 16px "Funnel Display", system-ui, sans-serif; }
.owes-row { display: flex; align-items: center; gap: 10px; }
.owes-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.owes-text b { font-size: 13px; color: #ffd36a; }
.owes-row.is-mine .owes-text b { color: #ff9bb3; }
.owes-text small { font-size: 12px; color: rgba(245,243,255,.55); }
.owes-paid { flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 17px; border: 0; background: #5fd0c5; color: #10261f; font: 800 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.awh-icon-btn.has-activity::after { content: ""; position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: #ff4f8b; box-shadow: 0 0 0 2px #182036; }

/* Stickers: Discover and Recent */
.sticker-discover { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }
.sticker-search { height: 44px; padding: 0 14px; border-radius: 22px; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; font: 500 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; outline: none; }
.sticker-search:focus { box-shadow: inset 0 0 0 2px #ffd36a; }
.sticker-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sticker-chips::-webkit-scrollbar { display: none; }
.sticker-chips button { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,211,106,.35); background: rgba(255,211,106,.08); color: #f5f3ff; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.sticker-grid-online { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.chat-gif.chat-gif-sticker { max-width: 150px; max-height: 150px; border-radius: 0; background: none; }
.bubble:has(.chat-gif-sticker) { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }

/* ===== Light mode: fewer moving parts on older phones and slow data ===== */
html.awa-lite *, html.awa-lite *::before, html.awa-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.awa-lite .awh-sun, html.awa-lite .awh-eq i, html.awa-lite .st-strip-eq i, html.awa-lite .st-drawer *, html.awa-lite .sd-lamp, html.awa-lite .sd-go,
html.awa-lite .aw-lounge-dot, html.awa-lite .moment-wait-orbit, html.awa-lite .whot-market-tappable, html.awa-lite .whot-market-tappable *,
html.awa-lite .awx-bar i, html.awa-lite .awx-float, html.awa-lite .awx-eq i, html.awa-lite .awa-lounge-glow, html.awa-lite .pl-rec-lamp { animation: none !important; }
html.awa-lite .float-emoji-bit { display: none; }
html.awa-lite .awh-card, html.awa-lite .awh-hero, html.awa-lite .pl-game, html.awa-lite .awh-sound { box-shadow: none !important; }

/* No connection */
.awa-offline { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); transform: translateX(-50%); z-index: 10100; max-width: calc(100% - 24px); padding: 9px 14px; border-radius: 999px; background: #2b1a22; color: #ffd36a; box-shadow: 0 0 0 1px rgba(255,211,106,.35), 0 8px 20px rgba(0,0,0,.4); font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-align: center; }
.react-tray-preview button { flex: 1; height: 44px; border: 0; border-radius: 12px; background: none; font-size: 26px; padding: 0; }
button.reaction-dragging { transform: scale(1.3) !important; background: rgba(255,211,106,.22) !important; border-radius: 12px; z-index: 3; position: relative; }
.is-sorting button[data-emoji] { transition: transform .12s; -webkit-user-select: none; user-select: none; }
.react-dock-row button, .whot-quick-reacts button, .whot-emoji-bar button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.bet-yes, .bet-no { flex: 0 0 auto; height: 34px; padding: 0 13px; border-radius: 17px; border: 0; font: 800 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.bet-yes { background: #5fd0c5; color: #10261f; }
.bet-no { background: rgba(245,243,255,.1); color: #f5f3ff; }
.bet-strip.is-wait { background: rgba(245,243,255,.06); box-shadow: inset 0 0 0 1px rgba(245,243,255,.16); }

/* Cross-Space interrupt: a lightweight in-app notification that can follow
   you from one Space into another without pretending it is a system push. */
.awa-cross-space-notice {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .72rem .8rem;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 28%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-2) 94%, var(--accent-soft) 6%);
  color: var(--ink);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(18px);
  animation: awa-cross-space-in .2s ease-out;
}
.awa-cross-space-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:12px; background:color-mix(in srgb,var(--accent-soft) 15%,transparent); font-size:1rem; }
.awa-cross-space-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:.12rem; }
.awa-cross-space-copy b { font-size:.82rem; line-height:1.2; }
.awa-cross-space-copy small { color:var(--ink-dim); font-size:.68rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.awa-cross-space-go { flex:0 0 auto; padding:.42rem .62rem; border-radius:999px; background:var(--accent); color:var(--on-accent,#fff); font-size:.68rem; font-weight:800; }
@keyframes awa-cross-space-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }

/* Cinema mini-player. The same YouTube player remains alive while the
   Cinema overlay is hidden, so Home/Chat/Spaces can be used underneath it. */
.watch-stage-actions { position:absolute; top:calc(env(safe-area-inset-top,0px) + 18px); right:calc(env(safe-area-inset-right,0px) + 14px); z-index:12; display:flex; gap:.4rem; }
.watch-stage-actions button { position:static; }
.watch-mini-btn { width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.62); color:#fff; font-size:1.2rem; font-weight:800; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.watch-stage.mini-player { position:fixed !important; right:max(12px,env(safe-area-inset-right)); bottom:max(78px,calc(12px + env(safe-area-inset-bottom))); left:auto !important; top:auto !important; width:min(330px,calc(100vw - 24px)); height:auto; aspect-ratio:16/9; z-index:850; padding:0; border-radius:16px; overflow:hidden; background:#000; box-shadow:0 18px 50px rgba(0,0,0,.5); }
.watch-stage.mini-player .watch-player { width:100%; height:100%; min-height:0; }
.watch-stage.mini-player .watch-player iframe { width:100% !important; height:100% !important; max-height:none !important; }
.watch-stage.mini-player .watch-here-badge { top:.35rem; left:.35rem; }
.watch-stage.mini-player .watch-stage-actions { top:.35rem; right:.35rem; }
.watch-stage.mini-player .watch-expand-btn { display:none; }
.watch-stage.mini-player .watch-mini-btn { width:34px; height:34px; font-size:1rem; }
.watch-stage.mini-player .watch-live-bar { position:absolute; left:0; right:0; bottom:0; z-index:20; background:linear-gradient(transparent,rgba(0,0,0,.8)); padding:1.7rem .45rem .45rem; }
.watch-stage.mini-player .watch-reaction-rail { display:flex; gap:.2rem; overflow:hidden; }
.watch-stage.mini-player .watch-reaction-rail button { width:28px; height:28px; font-size:.85rem; }
.watch-stage.mini-player .watch-flash-form { display:none; }

/* Cinema: YouTube failed to load, with a retry right there. */
.yt-retry { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 180px; padding: 20px; text-align: center; color: #f5f3ff; font-size: 14px; }
.yt-retry p { margin: 0; opacity: .8; }

/* ---------- Game header: big score, who you're playing, the stake ---------- */
.game-score[hidden], .game-vs[hidden] { display: none !important; }
.games-overlay.has-game-score .games-panel-header { display: flex; align-items: center; gap: 10px; }
.games-overlay.has-game-score .games-panel-title { flex: 1; min-width: 0; text-align: left !important; margin: 0 !important; font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 22px !important; letter-spacing: -.03em; }
.games-overlay.has-game-score .games-panel-header-spacer { display: none !important; }
.game-score { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 22px; background: rgba(0,0,0,.35); border: 1px solid rgba(245,243,255,.12); color: #f5f3ff; font-family: "Funnel Display", system-ui, sans-serif; }
.gs-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; box-sizing: border-box; }
.gs-av-me { background: #2a1724; border: 2px solid #ffd36a; }
.gs-av-them { background: #3a1a2e; border: 2px solid #ff4f8b; }
.gs-n { font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: -.03em; color: rgba(245,243,255,.75); display: inline-block; }
.gs-n.is-lead { color: #ffd36a; }
.gs-n.is-pop { animation: gsPop .6s ease-out; }
.gs-dash { font-style: normal; font-size: 15px; color: rgba(245,243,255,.4); }
@keyframes gsPop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }

.game-vs { display: flex; padding: 3px; margin: 10px 0 0; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(245,243,255,.1); }
.game-vs button { flex: 1; min-width: 0; height: 36px; border: 0; border-radius: 11px; background: transparent; color: rgba(245,243,255,.75); font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.game-vs button[data-vs="new"] { flex: 1.25; }
.game-vs button[aria-selected="true"] { background: #f5f3ff; color: #2a0f1f; font-weight: 700; }
.gv-live { display: none; width: 7px; height: 7px; border-radius: 50%; background: #5ee0a0; animation: gvLive 1.6s ease-in-out infinite; flex: 0 0 7px; }
html.awa-someone-live .gv-live { display: inline-block; }
@keyframes gvLive { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
/* The old in-board score line and picker: the header has them now. */
.games-overlay.has-game-score #whotStats,
.games-overlay.has-game-score #wordsStats { display: none !important; }
.games-overlay:not([hidden]) #whotOpponentPicker,
.games-overlay:not([hidden]) #wordOpponentPicker { display: none !important; }

/* Stake bar: one full-width bar with four states. */
.bet-strip:not([hidden]) { margin: 10px 0 8px !important; }
.bet-strip .bet-add { width: 100%; height: auto; min-height: 44px; padding: 6px 14px; border-radius: 14px; justify-content: flex-start; gap: 10px; text-align: left; cursor: pointer; }
.bet-strip .bet-add .bet-text small { color: rgba(255,211,106,.75); }
.bet-strip .bet-add .bet-text b { color: #ffd36a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; font-size: 14px; }
.bet-strip.is-on { min-height: 44px; box-sizing: border-box; padding: 6px 8px 6px 14px; border-radius: 14px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(245,243,255,.14); }
.bet-strip.is-on .bet-text small { color: rgba(245,243,255,.7); font-weight: 600; }
.bet-strip.is-on .bet-text b { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; font-size: 14px; }
.bet-strip.is-ask { background: rgba(255,211,106,.12); box-shadow: inset 0 0 0 1px rgba(255,211,106,.5); }
.bet-strip.is-live { background: linear-gradient(90deg, rgba(255,184,61,.18), rgba(255,79,139,.18)); box-shadow: inset 0 0 0 1px rgba(255,79,139,.5); }
.bet-strip .bet-x, .bet-strip .bet-no, .bet-strip .bet-yes { height: 32px; padding: 0 12px; border-radius: 12px; border: 0; font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.bet-strip .bet-x, .bet-strip .bet-no { background: rgba(245,243,255,.12); color: #f5f3ff; }
.bet-strip .bet-yes { background: #ffb42e; color: #2a0f1f; }

/* ---------- Play someone new sheet ---------- */
.sn-sheet { position: fixed; inset: 0; z-index: 10070; display: flex; align-items: flex-end; justify-content: center; background: rgba(10,4,8,.5); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: #f5f3ff; animation: snFade .18s ease-out; }
.sn-sheet.is-closing { animation: snFade .18s ease-in reverse forwards; }
@keyframes snFade { from { opacity: 0; } to { opacity: 1; } }
.sn-card { width: 100%; max-width: 560px; max-height: 88dvh; overflow-y: auto; box-sizing: border-box; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #1f1820; animation: snUp .32s cubic-bezier(.2,.9,.3,1); }
@keyframes snUp { from { transform: translateY(60px); } to { transform: none; } }
.sn-head { display: flex; align-items: center; justify-content: space-between; }
.sn-head b { font: 700 20px "Funnel Display", system-ui, sans-serif; letter-spacing: -.03em; }
.sn-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; font-size: 15px; cursor: pointer; }
.sn-lead { margin: 6px 0 14px; font-size: 13.5px; line-height: 1.45; color: rgba(245,243,255,.7); }
.sn-loading { margin: 24px 0; text-align: center; color: rgba(245,243,255,.6); }
.sn-open { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(245,243,255,.05); border: 1px solid rgba(245,243,255,.12); margin-bottom: 12px; cursor: pointer; }
.sn-open.is-on { background: rgba(94,224,160,.08); border-color: rgba(94,224,160,.3); }
.sn-open span { flex: 1; font-size: 13.5px; font-weight: 600; }
.sn-open input { position: absolute; opacity: 0; pointer-events: none; }
.sn-live { width: 10px; height: 10px; border-radius: 50%; background: rgba(245,243,255,.3); }
.sn-open.is-on .sn-live { background: #5ee0a0; animation: gvLive 1.6s ease-in-out infinite; }
.sn-toggle { position: relative; width: 46px; height: 28px; border-radius: 14px; background: rgba(245,243,255,.2); transition: background .2s; }
.sn-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sn-open.is-on .sn-toggle { background: #5ee0a0; }
.sn-open.is-on .sn-toggle::after { transform: translateX(18px); }
.sn-wait { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,211,106,.1); font-size: 13px; margin-bottom: 10px; }
.sn-wait span { flex: 1; }
.sn-mini { height: 32px; padding: 0 12px; border-radius: 12px; border: 0; background: rgba(245,243,255,.12); color: #f5f3ff; font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.sn-list { display: flex; flex-direction: column; gap: 8px; }
.sn-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; background: rgba(245,243,255,.05); animation: snIn .35s ease-out both; }
.sn-row:nth-child(2) { animation-delay: .07s; } .sn-row:nth-child(3) { animation-delay: .14s; } .sn-row:nth-child(4) { animation-delay: .21s; }
@keyframes snIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sn-av { flex: 0 0 auto; display: inline-flex; }
.sn-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sn-copy b { font-size: 14.5px; }
.sn-copy small { font-size: 12px; color: rgba(245,243,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-play { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: #ffb42e; color: #2a0f1f; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.sn-play:disabled { opacity: .45; cursor: default; }
.sn-empty, .sn-note { margin: 6px 0; font-size: 13px; line-height: 1.45; color: rgba(245,243,255,.6); text-align: center; }
.sn-foot { margin: 14px 0 0; text-align: center; font-size: 12px; color: rgba(245,243,255,.5); }
.sn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13px; font-weight: 600; }
.sn-field select { height: 46px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(245,243,255,.14); background: rgba(245,243,255,.06); color: #f5f3ff; font: 500 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.sn-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; font-size: 14px; }
.sn-cta { width: 100%; height: 50px; border: 0; border-radius: 25px; background: #ffb42e; color: #2a0f1f; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.sn-cta:disabled { opacity: .45; }

/* Whot seat: five quick reactions where there's room, four on smaller
   phones (three on the smallest), so "You · 5 cards" never gets squeezed. */
@media (max-width: 399px) {
  #whotPanel .whot-quick-reacts button:nth-child(5) { display: none; }
}
#whotPanel .whot-seat-me .whot-seat-text small { white-space: nowrap; }

/* ---------- Palmweaver house ads (after a game, Cinema lobby) ---------- */
.pw-ad-slot[hidden] { display: none !important; }
.pw-ad-slot { margin: 10px 0; }
.pw-ad { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: #f4ead8; color: #1e2a1c !important; text-decoration: none !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); animation: pwUp .5s cubic-bezier(.2,.9,.3,1) .6s both; position: relative; overflow: hidden; }
.pw-ad::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80px; width: 80px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: pwShine 4s ease-in-out 1.4s infinite; pointer-events: none; }
@keyframes pwUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pwShine { 0% { left: -80px; } 30%, 100% { left: 110%; } }
.pw-ad-mark { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: #24402a; display: flex; align-items: center; justify-content: center; }
.pw-ad-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pw-ad-copy small { font-size: 11px; font-weight: 700; color: #5a6b55; }
.pw-ad-copy b { font-size: 14px; font-weight: 700; }
.pw-ad-cta { flex: 0 0 auto; font-size: 13px; font-weight: 800; color: #24402a; white-space: nowrap; }
.pw-ad-go { flex: 0 0 auto; color: #24402a; display: flex; }
.pw-ad-rotor { position: relative; height: 34px; }
.pw-ad-line { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.pw-ad-line.is-on { opacity: 1; transform: none; }
.pw-ad-line b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-ad-slot-cinema { margin-top: 14px; }
#whotAdSlot { margin: 6px 0 8px; }
@media (prefers-reduced-motion: reduce) { .pw-ad, .pw-ad::after { animation: none; } }
.pw-ad, .pw-ad-copy { text-align: left; }

/* Phone Whot fit: keep the new score header, opponent switch and stake,
   and give the felt plus your seat the old playing room.
   The sheet is locked to 100dvh. The new chrome was added above a table
   that still refused to shrink below 300px, so the hand and your seat
   rendered past the bottom edge. */
.games-overlay:has(#whotPanel:not([hidden])) {
  overflow: hidden;
}
.games-overlay:has(#whotPanel:not([hidden])) .games-panel {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding-top: max(.55rem, env(safe-area-inset-top));
  padding-bottom: max(.4rem, env(safe-area-inset-bottom));
}
.games-overlay:has(#whotPanel:not([hidden])) .games-panel-header {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.games-overlay:has(#whotPanel:not([hidden])) .game-vs {
  flex: 0 0 auto;
  margin: 6px 0 0;
}
.games-overlay:has(#whotPanel:not([hidden])) .game-vs button {
  height: 34px;
}
.games-overlay:has(#whotPanel:not([hidden])) .bet-strip {
  flex: 0 0 auto;
  margin: 6px 0 0 !important;
}
.games-overlay.has-game-score #whotPanel .whot-stats {
  display: none;
}
.games-overlay:has(#whotPanel:not([hidden])) #whotPanel .whot-header {
  flex: 0 0 auto;
  margin: 0;
}
#whotPanel:not([hidden]) .whot-game-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#whotPanel .whot-seat-opp,
#whotPanel .whot-my-row,
#whotPanel .whot-seat-me,
#whotPanel #whotAdSlot {
  flex: 0 0 auto;
}
#whotPanel .whot-table {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto;
}
#whotPanel .whot-felt {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
@media (max-width: 430px) {
  .games-overlay:has(#whotPanel:not([hidden])) .games-panel {
    padding-left: .85rem;
    padding-right: .85rem;
  }
  #whotPanel .whot-seat-opp { margin-bottom: .3rem; }
  #whotPanel .whot-seat-me { margin-top: 4px; padding: .4rem .5rem .4rem .55rem; }
  #whotPanel .whot-felt { padding: 8px 12px 8px; gap: .35rem; }
}

.awx-line { margin: 10px 0 4px; }


.awh-mark { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; display: block; }
.aw-brand { display: flex; align-items: center; gap: 8px; }
.aw-brand-icon { width: 28px; height: 28px; border-radius: 8px; }
.awa-movies-art img, .awa-movies-mini { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.pw-ad-under-score { margin: 8px 12px 0; }
.pw-ad-under-score .pw-ad { min-height: 72px; padding: 14px 16px; }
.pw-ad-under-score .pw-ad-copy b { font-size: 16px; }


/* Chat header stays in view when iOS pans for the keyboard. */
.chat-topbar { position: sticky; top: 0; z-index: 40; transform: none; }
.push-ask { display: flex; flex-direction: column; gap: 2px; width: calc(100% - 8px); margin: 8px auto 0; padding: 12px 14px; border: 0; border-radius: 16px; background: #ffd36a; color: #2a0f1f; text-align: left; font: 800 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.push-ask[hidden] { display: none; }
.push-ask small { font-weight: 600; font-size: 12px; opacity: .8; }
.awh-svc.awh-awa img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; }
.cinema-share-btn, .game-share { border: 0; border-radius: 999px; padding: 8px 14px; background: #ffd36a; color: #2a0f1f; font: 800 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.cinema-share-btn { position: absolute; top: 12px; right: 12px; z-index: 2; }
.cinema-lobby { position: relative; }
.call-local-video, #callOutgoingPreview { object-fit: cover; background: #111; }
#callRemoteMedia { object-fit: cover; background: #080808; }

/* Games lobby: three tables, not a settings list. */
.pl-list { gap: 16px; }
.pl-game { min-height: 148px; border-radius: 22px; overflow: hidden; padding: 18px 18px 16px; align-items: flex-end; box-shadow: 0 18px 40px -28px rgba(0,0,0,.8); }
.pl-whot { flex-direction: row; align-items: flex-end; height: 168px; padding: 18px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 140% at 80% 20%, #6b3a9a 0%, #2b1548 55%, #160b24 100%) !important; }
.pl-whot::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(255,211,106,.35); border-radius: 16px; pointer-events: none; }
.pl-words { background: linear-gradient(160deg, #1d3b34, #10241f) !important; }
.pl-hilo { height: 148px; border-radius: 22px; background: linear-gradient(160deg, #f6e7c8, #e7c98a) !important; }
.pl-copy b { font-family: "Funnel Display", system-ui, sans-serif; font-size: 26px; letter-spacing: -.03em; }
.pl-copy small { display: block; margin-top: 4px; font-size: 13px; opacity: .75; }


/* AwaSpace patch: dismissible push reminder */
.push-ask-wrap { position: relative; width: calc(100% - 8px); margin: 8px auto 0; touch-action: pan-y; }
.push-ask-wrap[hidden] { display: none !important; }
.push-ask-wrap .push-ask { width: 100%; margin: 0; padding-right: 44px; }
.push-ask-dismiss { position: absolute; top: 7px; right: 7px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(42,15,31,.12); color: #2a0f1f; font-size: 23px; line-height: 1; display: grid; place-items: center; cursor: pointer; }

/* Empty game titles should not reserve a title-shaped hole in the header. */
.games-panel-title:empty { display: none !important; }
.games-overlay.has-game-score .games-panel-title:empty { display: none !important; }
.games-overlay:has(#watchPanel:not([hidden])) #whotAdSlot,
.games-overlay:has(#watchPanel:not([hidden])) #wordsAdSlot { display: none !important; }

/* Give the outgoing/incoming call screen a real visual anchor, not a blank field. */
.call-person-avatar { width: clamp(104px, 25vw, 138px); height: clamp(104px, 25vw, 138px); flex: 0 0 auto; align-self: center; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 35%, var(--surface)), var(--surface-2)); box-shadow: 0 14px 42px rgba(0,0,0,.22), 0 0 0 10px color-mix(in srgb, var(--accent) 8%, transparent); }
.call-person-avatar > * { width: 100%; height: 100%; border-radius: inherit; }
.call-person-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Settings: send a test notification */
.push-test { padding: 0 4px 6px 52px; }
.push-test-btn { border: 0; background: none; padding: 4px 0; color: #ffd36a; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-decoration: underline; cursor: pointer; }
.push-test-out { margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.3); color: rgba(245,243,255,.85); font: 500 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }

/* =====================================================================
   Game screens: one screen, no scrolling (Whot, Word Hunt, Hilo).
   The sheet is exactly the phone's height. Header and strips keep their
   size; the game takes what's left and its board shrinks to fit.
   While a round is live (.is-live-round) the opponent switch and
   "Add a stake" step aside; an agreed stake stays as a slim line.
   ===================================================================== */
.games-overlay:is(:has(#wordsPanel:not([hidden])), :has(#hiloPanel:not([hidden])), :has(#whotPanel:not([hidden]))) { overflow: hidden !important; }
.games-overlay:is(:has(#wordsPanel:not([hidden])), :has(#hiloPanel:not([hidden])), :has(#whotPanel:not([hidden]))) .games-panel {
  height: 100dvh !important; max-height: 100dvh !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
  box-sizing: border-box;
  padding-top: max(.55rem, env(safe-area-inset-top)) !important;
  padding-bottom: max(.4rem, env(safe-area-inset-bottom)) !important;
}
.games-overlay:is(:has(#wordsPanel:not([hidden])), :has(#hiloPanel:not([hidden])), :has(#whotPanel:not([hidden]))) :is(.games-panel-header, .game-vs, .bet-strip) { flex: 0 0 auto; }
.games-overlay:is(:has(#wordsPanel:not([hidden])), :has(#hiloPanel:not([hidden]))) :is(#wordsPanel, #hiloPanel):not([hidden]) {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}

/* Header: back · title · score · share, on one line on every phone. */
.games-overlay.has-game-score .games-panel-title { font-size: clamp(17px, 5vw, 22px) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-share { flex: 0 0 auto; width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; background: rgba(245,243,255,.1) !important; color: #f5f3ff !important; }
@media (max-width: 370px) {
  .game-score { gap: 6px; padding: 4px 9px 4px 4px; }
  .gs-av { width: 26px; height: 26px; font-size: 12px; }
  .gs-n { font-size: 21px; }
}

/* During a round. */
/* Whot keeps its opponent switch during a game (it isn't timed, and a
   half-finished game with your partner must never lock you out of
   Computer or Someone new). It just gets slimmer. Word Hunt's timed board
   still hides it. */
.games-overlay.is-live-round #gameVs:not([data-game="whot"]) { display: none !important; }
.games-overlay.is-live-round #gameVs[data-game="whot"] { margin-top: 6px !important; padding: 2px !important; }
.games-overlay.is-live-round #gameVs[data-game="whot"] button { height: 30px !important; font-size: 12.5px !important; }
.games-overlay.is-live-round #betStrip:not(.is-on) { display: none !important; }
.games-overlay.is-live-round #betStrip.is-on { min-height: 0 !important; padding: 4px 6px 4px 12px !important; margin: 6px 0 0 !important; }
.games-overlay.is-live-round #betStrip.is-on .bet-ic { font-size: 14px; }
.games-overlay.is-live-round #betStrip.is-on .bet-text { flex-direction: row; align-items: baseline; gap: 6px; }
.games-overlay.is-live-round #betStrip.is-on .bet-text small { white-space: nowrap; }
.games-overlay.is-live-round #betStrip.is-on :is(.bet-x, .bet-no, .bet-yes) { height: 26px; }

/* ---------- Word Hunt ---------- */
#wordsPanel .words-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0 !important; }
#wordsPanel .words-game-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#wordsPanel #wordsSession:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px !important; }
#wordsPanel .wh-hud { flex: 0 0 auto; }
#wordsPanel .wh-word-row { flex: 0 0 auto; min-height: 34px; }
#wordsPanel #wordsGrid.wh-board {
  flex: 1 1 0 !important; min-height: 120px; width: 100% !important; max-width: none !important; height: auto !important;
  aspect-ratio: auto !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  container-type: size; display: flex; align-items: center; justify-content: center;
}
#wordsPanel #wordsGrid.wh-board .words-tiles {
  width: min(100cqw, 100cqh, 400px) !important; height: min(100cqw, 100cqh, 400px) !important;
  box-sizing: border-box; padding: min(3.4cqmin, 14px); gap: min(2.6cqmin, 10px) !important;
  border-radius: 24px; background: linear-gradient(160deg, #5a3b20 0%, #3b2614 100%);
  border: 1px solid rgba(255,220,160,.25); box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,230,180,.18);
}
#wordsPanel #wordsGrid.wh-board .words-cell { font-size: min(9cqmin, 34px) !important; border-radius: min(4cqmin, 16px) !important; }
#wordsPanel #wordsGrid .words-trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#wordsPanel .wh-found { flex: 0 0 auto; padding: 8px 12px !important; }
#wordsPanel .wh-found .words-found-list { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; min-height: 28px; }
#wordsPanel .wh-tools { flex: 0 0 auto; }
#wordsPanel .wh-tools .wh-tool { height: 42px !important; min-height: 0 !important; }
#wordsPanel .whot-taunt-row { flex: 0 0 auto; margin-top: 8px !important; padding: 0 !important; }
.games-overlay.is-live-round #wordsPanel .whot-taunt-form { display: none !important; }
@media (max-height: 700px) {
  #wordsPanel .wh-hud { transform: scale(.92); transform-origin: top center; margin-bottom: -4px; }
  #wordsPanel .wh-found .wh-found-head { display: none !important; }
  #wordsPanel .wh-tools .wh-tool { height: 38px !important; }
}

/* ---------- Hilo ---------- */
#hiloPanel .hilo { flex: 1 1 auto; height: auto !important; min-height: 0 !important; gap: clamp(6px, 1.2dvh, 12px) !important; overflow: hidden;
  padding: 6px 12px calc(76px + env(safe-area-inset-bottom)) !important; }
#hiloPanel .hilo-score { display: none !important; }
#hiloPanel .hilo-side { flex: 0 0 auto; min-height: 0; }
#hiloPanel .hilo-row { min-height: 0; }
#hiloPanel .hilo-table { flex: 0 0 auto; min-height: 0; padding: clamp(10px, 2dvh, 22px) 12px !important; }
#hiloPanel .hilo-card { width: clamp(50px, 9.5dvh, 70px) !important; height: clamp(68px, 13dvh, 96px) !important; }
#hiloPanel .hilo-controls { flex: 0 0 auto; gap: clamp(6px, 1dvh, 10px) !important; margin-top: auto; }
#hiloPanel .hilo-display { height: clamp(38px, 6.4dvh, 54px) !important; font-size: clamp(24px, 4.2dvh, 32px) !important; }
#hiloPanel .hilo-pad { gap: clamp(5px, .9dvh, 8px) !important; }
#hiloPanel .hilo-key { height: clamp(36px, 6.2dvh, 52px) !important; font-size: clamp(18px, 3dvh, 22px) !important; }
#hiloPanel .hilo-intro-title { margin-top: 0 !important; }
#hiloPanel .hilo-seat { gap: 5px; }
#hiloPanel .hilo-seat small { max-width: 92px; text-align: center; line-height: 1.2; font-size: 11.5px; }
#hiloPanel .hilo-key-go { font-size: clamp(15px, 2.4dvh, 20px) !important; white-space: nowrap; letter-spacing: -.01em; padding: 0 4px; }
#hiloPanel .hilo-side { gap: 4px; }
#hiloPanel .hilo-side-name { margin: 0 !important; }
@media (max-height: 700px) {
  #hiloPanel .hilo-card { width: 46px !important; height: 62px !important; }
  #hiloPanel .hilo-table { padding: 8px 12px !important; }
  #hiloPanel .hilo-mini { width: 32px !important; height: 36px !important; font-size: 14px !important; }
  #hiloPanel .hilo-row { min-height: 36px; }
  #hiloPanel .hilo-seat small { font-size: 10.5px; }
}

/* ---------- Whot: result card ---------- */
.whot-end { position: absolute; inset: 0; z-index: 500; isolation: isolate; transform: translateZ(1px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 22px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; background: rgba(12,6,18,.62); backdrop-filter: blur(3px); overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; animation: wrFade .2s ease-out; }
.whot-end[hidden] { display: none !important; }
@keyframes wrFade { from { opacity: 0; } to { opacity: 1; } }
.whot-end-card { width: 100%; max-width: 380px; box-sizing: border-box; padding: 24px 20px 20px; border-radius: 26px; background: #182036; border: 1px solid rgba(245,243,255,.1); text-align: center; color: #f5f3ff; box-shadow: 0 30px 70px rgba(0,0,0,.55); animation: wrPop .45s cubic-bezier(.2,.9,.3,1); }
@keyframes wrPop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
.whot-end-big { font-size: 42px; line-height: 1; }
.whot-end-title { margin: 10px 0 4px; font: 700 28px "Funnel Display", system-ui, sans-serif; letter-spacing: -.035em; }
.whot-end-sub { margin: 0; font-size: 14.5px; color: rgba(245,243,255,.7); }
.whot-end-owed { margin: 14px 0 0; padding: 11px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,184,61,.16), rgba(255,79,139,.16)); font-size: 14px; }
.whot-end-owed[hidden] { display: none; }
.whot-end-actions { display: flex; gap: 10px; margin-top: 18px; }
.whot-end-actions button { flex: 1; height: 48px; border: 0; border-radius: 24px; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.whot-end-done { background: rgba(245,243,255,.1); color: #f5f3ff; }
.whot-end-again { flex: 1.3 !important; background: #ffb42e; color: #2a0f1f; }
.whot-end .pw-ad-slot { width: 100%; max-width: 380px; margin: 0; }
/* The real Whot card (Star 2) on the Whot end card, tipped like it was
   just thrown down. */
.whot-end-big .whot-card-face { transform: rotate(-8deg); box-shadow: 0 14px 26px -10px rgba(0,0,0,.7); }
.whot-end-big:has(.whot-card-face) { padding: 4px 0 2px; }
/* Word Hunt's mark on its end card: one board tile. */
.end-tile { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #ffd36a; color: #2a1a05; font: 800 28px "Funnel Display", system-ui, sans-serif; box-shadow: 0 10px 22px rgba(255,190,80,.3); transform: rotate(-6deg); }
/* HiLo's mark: a face-down card with the higher/lower arrows. */
.end-hilo { display: inline-grid; place-items: center; width: 50px; height: 68px; border-radius: 10px; background: linear-gradient(160deg, #ffd36a, #ff9a3d); color: #2a0f1f; font: 800 22px/1 "Funnel Display", system-ui, sans-serif; box-shadow: 0 12px 24px -8px rgba(0,0,0,.6); transform: rotate(-6deg); }

/* =====================================================================
   One screen, every game state (Oct 13).
   Word Hunt and HiLo keep every control on screen: nothing to scroll
   to, nothing sliding under the reactions.
   ===================================================================== */

/* Word Hunt: the game area never draws under the reactions strip. */
#wordsPanel .words-game-area { overflow: hidden; }
/* The reactions get their own strip at the foot, with a clear edge. */
#wordsPanel .whot-taunt-row {
  position: relative; z-index: 2;
  margin-top: 6px !important; padding: 8px 0 2px !important; gap: 8px !important;
  border-top: 1px solid rgba(245,243,255,.1);
}
/* Waiting for the other person: your words sit in a compact two-column
   card above the strip, and only scroll inside the card if they must. */
#wordsPanel #wordsWaitingBlock:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#wordsPanel #wordsWaitingBlock .waiting-text { flex: 0 0 auto; margin: 0; }
#wordsPanel .words-waiting-col { flex: 0 1 auto; min-height: 0; max-width: 340px; overflow-y: auto; scrollbar-width: none; padding: 10px 10px 12px !important; box-sizing: border-box; }
#wordsPanel .words-waiting-col .words-result-score { margin: 2px 0 8px; }
#wordsPanel .words-waiting-col .words-result-words { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#wordsPanel .words-waiting-col .words-bar { margin: 0; min-width: 0; }
#wordsPanel .words-waiting-col .words-bar-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#wordsPanel .words-waiting-col :is(.words-more, .words-none) { grid-column: 1 / -1; margin: 2px 0 0; }

/* Someone new: the preset lines are one row you slide sideways, and they
   step aside while the board is up so the tiles keep their size. */
#wordsPanel .match-flash-row { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; width: 100%; padding: 2px 2px 0 !important; box-sizing: border-box; }
#wordsPanel .match-flash-row::-webkit-scrollbar { display: none; }
#wordsPanel .match-flash-row button { flex: 0 0 auto; white-space: nowrap; }
.games-overlay.is-live-round #wordsPanel .match-flash-row { display: none !important; }
/* The board never shrinks below finger size (about 56px a tile). */
#wordsPanel #wordsGrid.wh-board { min-height: min(262px, 92vw) !important; }

/* HiLo: the keypad and Guess always fit. The table in the middle gives
   up space first, the guess rows stay one line you slide sideways, and
   "Give up" sits next to the number display instead of under the pad. */
#hiloPanel .hilo { display: flex !important; flex-direction: column !important; }
#hiloPanel .hilo-side { flex: 0 0 auto !important; }
#hiloPanel .hilo-row { flex-wrap: nowrap !important; min-height: 0 !important; padding: 2px 2px 4px !important; }
#hiloPanel .hilo-mini { width: 32px !important; height: 38px !important; font-size: 15px !important; }
#hiloPanel .hilo-table { flex: 1 1 auto !important; min-height: 64px !important; max-height: 230px; container-type: size; padding: 6px 12px !important; overflow: hidden; }
#hiloPanel .hilo-card { height: clamp(40px, 60cqh, 96px) !important; width: auto !important; aspect-ratio: 70 / 96; }
#hiloPanel .hilo-seat small { font-size: clamp(9.5px, 11cqh, 11.5px) !important; }
#hiloPanel .hilo-slot { min-height: 0 !important; }
#hiloPanel .hilo-controls { flex: 0 0 auto !important; margin-top: auto !important; padding-top: 6px; }
#hiloPanel .hilo-controls:has(.hilo-pad) { display: grid !important; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
#hiloPanel .hilo-controls:has(.hilo-pad) > .hilo-display { grid-column: 1; grid-row: 1; }
#hiloPanel .hilo-controls:has(.hilo-pad) > .hilo-link { grid-column: 2; grid-row: 1; padding: 6px 4px; }
#hiloPanel .hilo-controls:has(.hilo-pad) > .hilo-pad { grid-column: 1 / -1; grid-row: 2; }
#hiloPanel .hilo-key { height: clamp(36px, 6dvh, 52px) !important; }
@media (max-height: 620px) {
  #hiloPanel .hilo-side-name { display: none !important; }
  #hiloPanel .hilo-mini { width: 30px !important; height: 32px !important; font-size: 14px !important; }
  #hiloPanel .hilo-display { height: 36px !important; font-size: 22px !important; }
  #hiloPanel .hilo-key { height: 34px !important; }
  #hiloPanel .hilo-pad { gap: 5px !important; }
  #hiloPanel .hilo-seat small { display: none; }
}
@container (max-height: 112px) { #hiloPanel .hilo-seat small { display: none !important; } }
/* The reactions dock's space was being reserved twice (once on the panel,
   once on the game), which is what pushed the keypad's last row under it. */
#hiloPanel .hilo { padding-bottom: 8px !important; }

/* Typing trash talk: keep the box above the phone keyboard (see the
   focusin handler in main.js, which sets --awa-kb and --awa-vvh). */
html.awa-game-typing #whotPanel .whot-tray { bottom: var(--awa-kb, 0px) !important; transition: bottom .12s ease-out; }
html.awa-game-typing .games-overlay:has(#wordsPanel:not([hidden])) { height: var(--awa-vvh, 100dvh) !important; bottom: auto !important; }
html.awa-game-typing .games-overlay:has(#wordsPanel:not([hidden])) .games-panel { height: var(--awa-vvh, 100dvh) !important; max-height: var(--awa-vvh, 100dvh) !important; }
html.awa-game-typing #wordsPanel .words-header { display: none !important; }
html.awa-game-typing .react-sheet { bottom: var(--awa-kb, 0px) !important; }
html.awa-game-typing .react-sheet-card { max-height: calc(var(--awa-vvh, 80dvh) - 12px) !important; }

/* Word Hunt results: Play again always shows. The two word lists share
   whatever room is left and scroll inside themselves if they must. */
#wordsPanel #wordsResults:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; gap: 8px; overflow: hidden; }
#wordsPanel #wordsResults .words-result-banner { flex: 0 0 auto; margin: 0; }
#wordsPanel #wordsResults .words-result-cols { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
#wordsPanel #wordsResults .words-result-cols::-webkit-scrollbar { display: none; }
#wordsPanel #wordsPlayAgainBtn { flex: 0 0 auto; width: 100%; max-width: 340px; align-self: center; }
.voice-note.chat-media-pending .voice-play-btn::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: currentColor; opacity: .55;
  animation: voiceSpin 1s linear infinite; pointer-events: none;
}
.awa-hidden-game { display: none !important; }
/* React sheet: the emoji this game shows sit first, on a soft band. */
.react-arrange-note { margin: 14px 0 8px; font-size: 12.5px; color: rgba(245,243,255,.62); }
.react-arrange.tray-5 > button:nth-child(-n+5),
.react-arrange.tray-6 > button:nth-child(-n+6),
.react-arrange.tray-8 > button:nth-child(-n+8) { background: rgba(255,211,106,.16); box-shadow: inset 0 0 0 1.5px rgba(255,211,106,.55); }
.react-arrange button[data-emoji] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.react-arrange.is-sorting button[data-emoji] { touch-action: none; }
button.reaction-dragging { box-shadow: 0 10px 22px -8px rgba(0,0,0,.55) !important; }
/* Voice note speed pill (1x, 1.5x, 2x). Appears once the note has started. */
.voice-speed {
  display: none;
  flex-shrink: 0;
  min-width: 2.6em;
  height: 24px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .16);
  color: inherit;
  font: 700 0.72rem/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.msg.mine .voice-speed { background: rgba(var(--on-accent-overlay-rgb), .22); }
.voice-note.is-started .voice-speed,
.voice-note.is-playing .voice-speed { display: inline-block; }
.voice-note.is-started .voice-duration,
.voice-note.is-playing .voice-duration { min-width: 2.2em; }
/* Typing trash talk in a game: only one slim box above the keyboard, so
   the game stays in view. The emoji rows and headings come back as soon
   as the keyboard closes. */
html.awa-game-typing #whotPanel .whot-tray .whot-tray-head,
html.awa-game-typing #whotPanel .whot-tray .whot-emoji-bar,
html.awa-game-typing #wordsPanel .whot-taunt-row .whot-emoji-bar,
html.awa-game-typing .react-sheet .react-lines,
html.awa-game-typing .react-sheet .react-arrange-note,
html.awa-game-typing .react-sheet .react-grid { display: none !important; }
html.awa-game-typing #whotPanel .whot-tray { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; gap: 0 !important; min-height: 0 !important; }
html.awa-game-typing .react-sheet-card { padding-top: 10px !important; padding-bottom: 10px !important; }
/* Awa Movies: an empty or loading message spans the whole row, so it
   reads like a sentence instead of one word per line. */
.cinema-library-grid > :not(.cinema-library-item) { grid-column: 1 / -1; }
.cinema-library-empty-rich { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; border-radius: 14px; border: 1px dashed rgba(245,243,255,.18); text-align: left; line-height: 1.45; }
.cinema-library-empty-rich strong { color: #f5f3ff; font-size: .95rem; }
.cinema-library-empty-rich span { font-size: .84rem; }
/* Screen Share: still there, but as one slim row under the main tiles. */
#watchPanel .cinema-tile.cinema-tile-mini,
.cinema-tile.cinema-tile-mini {
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px;
  width: 100%; min-height: 0 !important; height: auto !important; aspect-ratio: auto !important;
  margin-top: 10px; padding: 11px 14px !important; border-radius: 14px !important;
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.1) !important; text-align: left;
}
.cinema-tile.cinema-tile-mini .brand-share { width: 22px !important; height: 22px !important; flex: 0 0 auto; margin: 0 !important; position: static !important; }
.cinema-tile.cinema-tile-mini .cinema-tile-text { flex: 1; display: flex; flex-direction: column; position: static !important; }
.cinema-tile.cinema-tile-mini .cinema-tile-text b { font-size: .9rem !important; }
.cinema-tile.cinema-tile-mini .cinema-tile-text small { font-size: .75rem !important; opacity: .65; }
.cinema-tile.cinema-tile-mini .cinema-mini-chev { width: 16px; height: 16px; opacity: .5; flex: 0 0 auto; }
/* With Studio parked, Awa Muzik takes the full row. */
.awh-music { grid-template-columns: 1fr; }
.awh-music .awh-sound { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; height: 76px; padding: 0 18px; }
/* Three tiles now: Awa Movies takes the full second row on phones. */
#watchPanel .cinema-tiles > .tile-library { grid-column: 1 / -1; min-height: 132px; }
@media (min-width: 700px) {
  #watchPanel .cinema-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  #watchPanel .cinema-tiles > .tile-library { grid-column: auto; min-height: 176px; }
}

/* HiLo card, Oct 14: one flat color block with a drawing of the game
   (a hidden card between "higher" and "lower"), the way NYT Games shows
   each game at a glance. Short and wide; replaces the tall cream ticket. */
.pl-game.pl-hilo2 {
  height: auto !important; min-height: 0 !important;
  flex-direction: row !important; align-items: center !important; gap: 16px;
  padding: 14px 16px 14px 14px !important;
  border-radius: 20px !important;
  background: #241629 !important;
  border: 1px solid rgba(245,243,255,.08);
  color: #f5f3ff;
  -webkit-mask: none !important; mask: none !important;
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.8);
}
.pl-hilo2 .hl-icon {
  flex: 0 0 auto; width: 76px; height: 76px; border-radius: 16px;
  display: grid; place-items: center;
  background: #f2a93b;
}
.pl-hilo2 .hl-icon svg { width: 60px; height: 60px; overflow: visible; }
.pl-hilo2 .hl-card { fill: #fff6e3; }
.pl-hilo2 .hl-q { font: 800 21px "Funnel Display", system-ui, sans-serif; fill: #2a1405; }
.pl-hilo2 .hl-up, .pl-hilo2 .hl-down { fill: none; stroke: #2a1405; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-hilo2 .hl-down { opacity: .32; }
.pl-hilo2 .pl-copy { align-self: center; }
.pl-hilo2 .pl-copy b { font-size: 24px; color: #f5f3ff; }
.pl-hilo2 .pl-copy small { color: rgba(245,243,255,.72); opacity: 1; margin-top: 3px; font-size: 13px; line-height: 1.35; }
.pl-hilo2 .hl-go { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: rgba(245,243,255,.45); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* A gentle nudge: the lit arrow flips between higher and lower. */
@media (prefers-reduced-motion: no-preference) {
  .pl-hilo2 .hl-up { animation: hlUp 2.8s ease-in-out infinite; }
  .pl-hilo2 .hl-down { animation: hlDown 2.8s ease-in-out infinite; }
}
@keyframes hlUp { 0%, 45% { opacity: 1; } 55%, 95% { opacity: .32; } 100% { opacity: 1; } }
@keyframes hlDown { 0%, 45% { opacity: .32; } 55%, 95% { opacity: 1; } 100% { opacity: .32; } }
.pl-hilo2.is-attention { outline: 2px solid #ffd36a; outline-offset: 2px; }
html.awa-lite .pl-hilo2 .hl-up, html.awa-lite .pl-hilo2 .hl-down { animation: none; }

/* Someone new: ask to keep the match as a private Space (Oct 14). */
.match-ask:empty { display: none; }
.match-ask { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(245,243,255,.1); text-align: left; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: #f5f3ff; }
.match-ask-menu { margin: 4px 0 10px; padding: 0; border: 0; }
.match-ask-go {
  display: block; width: 100%; height: 50px; border: 0; border-radius: 25px; cursor: pointer;
  background: #f5f3ff; color: #2a0f1f; font: 800 15.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.match-ask-go:active, .match-ask-yes:active { transform: scale(.98); }
.match-ask-fine { margin: 8px 0 0; font-size: 12.5px; color: rgba(245,243,255,.6); text-align: center; }
.match-ask-line { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(245,243,255,.85); }
.match-ask-line b { color: #f5f3ff; }
.match-ask-line.is-dim { color: rgba(245,243,255,.6); }
.match-ask-line.is-good { color: #7fe0a0; font-weight: 700; }
.match-ask-btns { display: flex; gap: 10px; margin-top: 12px; }
.match-ask-yes, .match-ask-no { height: 46px; border: 0; border-radius: 23px; cursor: pointer; font: 700 14.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.match-ask-yes { flex: 1.6; background: #ffb42e; color: #2a0f1f; }
.match-ask-no { flex: 1; background: rgba(245,243,255,.1); color: #f5f3ff; }
.match-ask button:disabled { opacity: .55; }
.match-ask-safety { display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; background: none; color: rgba(245,243,255,.55); font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Their request, when no end card is on screen: a card at the top. */
.match-ask-pop {
  position: absolute; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 64px); z-index: 520;
  padding: 16px 16px 12px; border-radius: 20px; background: #241629; border: 1px solid rgba(255,211,106,.35);
  box-shadow: 0 22px 50px rgba(0,0,0,.55); animation: wrPop .35s cubic-bezier(.2,.9,.3,1);
}
.match-ask-pop .match-ask { margin: 0; padding: 0; border: 0; }
@media (prefers-reduced-motion: reduce) { .match-ask-pop { animation: none; } }

/* --- Chat over a game (Oct 14) ---
   From a game or Cinema the real chat slides up as a sheet; the game stays
   visible above it. The sheet sits on top of the phone keyboard. */
.over-chat-btn {
  position: relative; flex: 0 0 auto; width: 38px; height: 38px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(245,243,255,.08); color: var(--ink, #f5f3ff);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.over-chat-btn[hidden] { display: none !important; }
.over-chat-btn:active { transform: scale(.92); }
.over-chat-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #ff4f8b; box-shadow: 0 0 0 2px var(--bg, #182036); }
.over-chat-dot[hidden] { display: none; }
.games-panel-header .over-chat-btn { margin-right: 6px; }
.games-panel-header .over-chat-btn + .game-score { margin-left: 0; }
.cinema-room-head .over-chat-cinema { margin-left: auto; margin-right: 8px; background: rgba(255,255,255,.1); color: #fff; }

.chat-sheet-head { display: none; }
.chat-sheet-scrim { position: fixed; inset: 0; z-index: 690; background: rgba(8,4,12,.42); animation: wrFade .2s ease-out; }
.chat-sheet-scrim[hidden] { display: none; }
html.awa-chat-sheet #chatMain {
  position: fixed !important; left: 0; right: 0; margin: 0 auto;
  bottom: var(--chat-kb, 0px);
  height: min(62dvh, calc(var(--chat-viewport-height, 100dvh) - 72px));
  max-width: 640px; z-index: 700;
  background: var(--bg, #182036);
  border-radius: 22px 22px 0 0; overflow: hidden;
  box-shadow: 0 -18px 50px rgba(0,0,0,.5);
  animation: chatSheetUp .26s cubic-bezier(.2,.9,.3,1);
  transition: transform .15s ease-out;
}
html.awa-chat-sheet .chat-sheet-head {
  position: relative; display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 16px 12px 10px 16px; border-bottom: 1px solid rgba(245,243,255,.08);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.chat-sheet-grab { position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: rgba(245,243,255,.28); }
.chat-sheet-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-sheet-who b { font-size: 16px; color: var(--ink, #f5f3ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sheet-av { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: inline-flex; }
.chat-sheet-av > * { width: 100%; height: 100%; }
.chat-sheet-close { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(245,243,255,.08); color: var(--ink, #f5f3ff); cursor: pointer; }
/* While the keyboard is up, the extra row under the box isn't needed. */
html.awa-chat-sheet .composer-extra { display: none; }
html.awa-chat-sheet .chat-form { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
@keyframes chatSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.awa-chat-sheet #chatMain { animation: none; } }

/* Chat button v2 (Oct 14): a clear labelled pill where the game title was.
   In Whot, Word Hunt and HiLo the title goes; the score already says it. */
.games-overlay[data-screen="whot"] .games-panel-title,
.games-overlay[data-screen="words"] .games-panel-title,
.games-overlay[data-screen="hilo"] .games-panel-title { display: none !important; }
.games-overlay[data-screen="whot"] .games-panel-header-spacer,
.games-overlay[data-screen="words"] .games-panel-header-spacer,
.games-overlay[data-screen="hilo"] .games-panel-header-spacer { display: none !important; }
.over-chat-btn {
  width: auto !important; height: 36px !important; margin: 0 auto 0 4px !important;
  padding: 0 14px 0 11px !important; gap: 6px; border-radius: 18px !important;
  background: #f5f3ff !important; color: #2a0f1f !important;
  font: 800 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; letter-spacing: -.01em;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.6);
}
.over-chat-btn .oc-ic { flex: 0 0 auto; }
.over-chat-btn .oc-label { line-height: 1; }
.over-chat-dot {
  position: absolute; top: -5px !important; right: -6px !important; left: auto;
  width: auto !important; height: 18px !important; min-width: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px !important; background: #ff4f8b !important; color: #fff;
  font: 800 11px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-align: center;
  box-shadow: 0 0 0 2px #1c2338 !important;
}
.games-overlay[data-screen] .games-panel-header { display: flex; align-items: center; gap: 10px; }
.cinema-room-head .over-chat-cinema { margin: 0 8px 0 auto !important; }

/* Typing in the chat over a game: the chat takes the whole screen above
   the keyboard (back to the half sheet when the keyboard closes). */
html.awa-chat-sheet.awa-chat-sheet-full #chatMain {
  top: var(--chat-vv-top, 0px) !important; bottom: auto !important;
  height: var(--chat-viewport-height, 100dvh) !important;
  border-radius: 0 !important; animation: none !important; max-width: none;
}
html.awa-chat-sheet.awa-chat-sheet-full .chat-sheet-head { padding-top: max(16px, env(safe-area-inset-top)); }
html.awa-chat-sheet.awa-chat-sheet-full .chat-sheet-grab { display: none; }

/* --- Reset the scores (Oct 14): tap the score to ask --- */
.game-score { cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.game-score:active { transform: scale(.97); }
.game-score.has-reset-ask::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff4f8b; box-shadow: 0 0 0 2px #1a0f1d;
}
.score-reset-pop .match-ask-btns .match-ask-no:only-child { flex: 1; }

/* Voice note came out shorter than the timer (mic dropped). */
.voice-record-bar { position: relative; }
.voice-warn {
  position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 6px; padding: 9px 12px; border-radius: 14px;
  background: #3a1a2a; border: 1px solid rgba(255, 143, 171, .4); color: #ffd6e0;
  font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* --- Whot: market runs out, hands are counted (Oct 14) --- */
#whotPanel #whotOppHand .whot-card-btn.is-open { margin-left: -10px; animation: whotFlipOpen .45s ease both; }
#whotPanel #whotOppHand .whot-card-btn.is-open:first-child { margin-left: 0; }
#whotPanel #whotOppHand .whot-card-btn.is-open .whot-card-face { width: 40px; height: 56px; border-radius: 7px; border-width: 1.3px; font-size: .62rem; }
@keyframes whotFlipOpen { from { transform: rotateY(90deg); opacity: .4; } to { transform: none; opacity: 1; } }
#whotPanel .whot-pile-badge.is-low { background: #ff4f8b; color: #fff; animation: whotLowPulse 1.1s ease-in-out infinite; }
@keyframes whotLowPulse { 50% { transform: scale(1.18); } }
.whot-result-tie .whot-result-text { color: #ffd36a; }
@media (prefers-reduced-motion: reduce) { #whotPanel .whot-pile-badge.is-low, #whotPanel #whotOppHand .whot-card-btn.is-open { animation: none; } }
.whot-count-total { color: #ffd36a; font-weight: 800; }

/* --- Whot rules chip, Last card, callouts (Oct 14) --- */
.whot-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.whot-rules-chip { border: 1px solid rgba(255,211,106,.45); background: rgba(0,0,0,.28); color: #ffd36a; font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; padding: 6px 12px; border-radius: 16px; cursor: pointer; }
.whot-rules-chip.is-live { opacity: .7; border-color: rgba(245,243,255,.18); color: rgba(245,243,255,.75); padding: 3px 10px; font-size: 11.5px; }
.whot-rules-sheet { position: absolute; inset: 0; z-index: 560; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,4,14,.55); }
.whot-rules-card { width: 100%; max-width: 520px; box-sizing: border-box; padding: 20px 18px calc(env(safe-area-inset-bottom,0px) + 16px); border-radius: 24px 24px 0 0; background: linear-gradient(180deg,#1f2639,#182036); color: #f5f3ff; display: flex; flex-direction: column; gap: 10px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; animation: aw-rise .3s ease both; }
.whot-rules-opt { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #f5f3ff; cursor: pointer; font: inherit; }
.whot-rules-opt b { font-size: 16px; }
.whot-rules-opt small { font-size: 13px; line-height: 1.4; color: rgba(245,243,255,.7); }
.whot-rules-opt.is-on { border-color: #ffd36a; background: rgba(255,211,106,.1); }
.whot-rules-note { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(245,243,255,.6); }
.whot-rules-close { border: 0; background: none; color: rgba(245,243,255,.6); font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; padding: 8px; cursor: pointer; }

.whot-my-row { position: relative; }
.whot-last-btn { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); z-index: 5; border: 0; border-radius: 18px; padding: 7px 14px; font: 800 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; background: rgba(245,243,255,.12); color: #f5f3ff; box-shadow: 0 6px 18px rgba(0,0,0,.35); white-space: nowrap; }
.whot-last-btn.is-armed { background: #ffd36a; color: #2a0f1f; }
.whot-last-btn[data-mode="late"] { background: #ffd36a; color: #2a0f1f; animation: whotLastPulse .9s ease-in-out infinite; }
.whot-last-btn[data-mode="catch"] { background: #ffb42e; color: #2a0f1f; animation: whotLastPulse .8s ease-in-out infinite; }
@keyframes whotLastPulse { 50% { transform: translateX(-50%) scale(1.08); } }
.whot-callout { position: fixed; z-index: 700; transform: translate(-50%, -100%); padding: 9px 16px; border-radius: 18px; background: #ffd36a; color: #2a0f1f; font: 900 17px "Funnel Display", system-ui, sans-serif; letter-spacing: -.01em; box-shadow: 0 12px 30px rgba(0,0,0,.45); pointer-events: none; animation: whotCallout 2.3s ease both; white-space: nowrap; }
.whot-callout[data-side="opp"] { transform: translate(-50%, 0); }
.whot-callout.is-caught { background: #ffb42e; }
.whot-callout.is-win { background: #52d39c; color: #06290f; }
@keyframes whotCallout { 0% { opacity: 0; scale: .6; } 12% { opacity: 1; scale: 1.08; } 20% { scale: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .whot-last-btn, .whot-callout { animation: none !important; } }
.sn-section { margin: 14px 0 6px; font: 800 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; letter-spacing: .02em; color: rgba(245,243,255,.6); }

/* --- Sticker and GIF panel, WhatsApp style (Oct 14) --- */
.stk-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 640;
  display: flex; flex-direction: column;
  background: #1c1029; border-top: 1px solid rgba(245,243,255,.08);
  box-shadow: 0 -12px 30px rgba(0,0,0,.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: #f5f3ff;
  animation: stkUp .22s cubic-bezier(.2,.9,.3,1) both;
}
.stk-dock.is-typing { bottom: var(--kb-only, 0px); }
@keyframes stkUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.stk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stk-body[hidden] { display: none; }
.stk-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px 6px; padding: 0 12px; height: 38px; border-radius: 19px; background: rgba(245,243,255,.08); color: rgba(245,243,255,.6); }
.stk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #f5f3ff; font: 500 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.stk-search input::placeholder { color: rgba(245,243,255,.45); }
.stk-jumps { display: flex; gap: 4px; padding: 0 10px 6px; overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; border-bottom: 1px solid rgba(245,243,255,.06); }
.stk-jumps::-webkit-scrollbar { display: none; }
.stk-jumps[hidden] { display: none; }
.stk-jump { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; border: 0; background: none; color: rgba(245,243,255,.55); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; }
.stk-jump img { width: 28px; height: 28px; object-fit: contain; }
.stk-jump.is-on { background: rgba(255,211,106,.14); color: #ffd36a; }
.stk-jump-add { font: 600 22px system-ui; color: #ffd36a; }
.stk-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 8px 10px; }
.stk-sec-name { margin: 10px 6px 6px; font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: rgba(245,243,255,.55); }
.stk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.stk-tile { aspect-ratio: 1; border: 0; background: none; padding: 6px; border-radius: 14px; cursor: pointer; transition: transform .12s, background .12s; }
.stk-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stk-tile:active, .stk-tile.is-sent { transform: scale(.9); background: rgba(255,211,106,.12); }
.stk-grid-gif { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.stk-gif { border: 0; padding: 0; background: rgba(245,243,255,.06); border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; }
.stk-gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stk-empty { grid-column: 1 / -1; margin: 18px 10px; text-align: center; font-size: 13.5px; line-height: 1.45; color: rgba(245,243,255,.55); }
.stk-attrib { margin: 0; padding: 0 0 4px; text-align: center; font-size: 11px; color: rgba(245,243,255,.4); }
.stk-tabs { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-top: 1px solid rgba(245,243,255,.06); flex: 0 0 auto; }
.stk-tab { flex: 1; height: 34px; border-radius: 17px; border: 0; background: none; color: rgba(245,243,255,.6); font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.stk-tab.is-on { background: rgba(255,211,106,.16); color: #ffd36a; }
.stk-kbd { width: 40px; height: 34px; border-radius: 17px; border: 0; background: none; color: rgba(245,243,255,.6); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.stk-tools { position: absolute; left: 10px; right: 10px; bottom: 54px; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 18px; background: #1f2639; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.stk-tools button { height: 44px; border-radius: 14px; border: 0; background: rgba(245,243,255,.07); color: #f5f3ff; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.stk-tools button[data-t="close"] { background: none; color: rgba(245,243,255,.55); }
@media (prefers-reduced-motion: reduce) { .stk-dock { animation: none; } }
/* 22 Oct: pull-down handle, hold menu, add tile, pack filter */
.stk-dock { will-change: transform; }
.stk-grab { flex: 0 0 auto; display: flex; justify-content: center; padding: 7px 0 0; touch-action: none; }
.stk-grab i { width: 38px; height: 4px; border-radius: 2px; background: rgba(245,243,255,.22); }
.stk-dock .stk-search { margin-top: 6px; }
.stk-tile img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; }
.stk-tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; position: relative; }
.stk-tile.is-pinned::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ffd36a; box-shadow: 0 0 0 2px #1c1029; }
.stk-add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px dashed rgba(255,211,106,.45); color: #ffd36a; }
.stk-add-tile span { font: 500 26px/1 system-ui; }
.stk-add-tile small { font: 700 11px/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-align: center; }
.stk-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 4px 8px; }
.stk-filter::-webkit-scrollbar { display: none; }
.stk-filter button { flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid rgba(245,243,255,.12); background: none; color: rgba(245,243,255,.7); font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-transform: capitalize; cursor: pointer; }
.stk-filter button.is-on { background: rgba(255,211,106,.16); border-color: transparent; color: #ffd36a; }
.stk-menu { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; background: rgba(10,6,14,.55); }
.stk-menu-card { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: #1f2639; box-shadow: 0 -14px 34px rgba(0,0,0,.45); }
.stk-menu-card img { align-self: center; width: 96px; height: 96px; object-fit: contain; margin: 2px 0 6px; }
.stk-menu-card button { height: 46px; border-radius: 14px; border: 0; background: rgba(245,243,255,.07); color: #f5f3ff; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.stk-menu-card button.is-danger { color: #ff8a80; }
.stk-menu-card button.is-soft, .stk-tools button.is-soft { background: none; color: rgba(245,243,255,.55); }
.stk-tools-title { margin: 2px 4px 4px; font: 800 15px "Funnel Display", system-ui, sans-serif; }
.stk-tools button { height: auto; min-height: 48px; padding: 9px 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; }
.stk-tools button small { font: 500 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: rgba(245,243,255,.6); margin-top: 2px; }
.stk-tools button.is-soft { align-items: center; }


/* --- Their profile page (Oct 14) --- */
.pf-page { position: fixed; inset: 0; z-index: 700; display: flex; flex-direction: column; background: #140b1d; color: #f5f3ff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.9,.3,1); }
.pf-page.is-in { transform: none; }
.pf-bar { display: flex; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px; font-weight: 700; font-size: 17px; }
.pf-back { width: 40px; height: 40px; border: 0; background: none; color: #ffd36a; font-size: 30px; line-height: 1; cursor: pointer; }
.pf-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 24px); }
.pf-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 18px; }
.pf-photo { width: 136px; height: 136px; border-radius: 50%; border: 0; padding: 0; overflow: hidden; background: linear-gradient(160deg, #4a1a45, #1c0d22); box-shadow: 0 0 0 3px #140b1d, 0 0 0 5px rgba(255,211,106,.5), 0 18px 40px rgba(0,0,0,.5); cursor: pointer; }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-initial { font: 800 54px "Funnel Display", system-ui, sans-serif; color: #ffd36a; }
.pf-name { margin: 16px 0 4px; font: 800 26px/1.1 "Funnel Display", system-ui, sans-serif; letter-spacing: -.02em; }
.pf-sub { margin: 0; font-size: 14px; color: rgba(245,243,255,.6); }
.pf-sub .is-on { color: #7fe0a0; }
.pf-actions { display: flex; gap: 10px; margin-top: 18px; width: 100%; max-width: 380px; }
.pf-actions button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; border: 1px solid rgba(245,243,255,.1); background: rgba(245,243,255,.05); color: #ffd36a; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.pf-actions button span { font-size: 20px; }
.pf-card { margin: 0 0 12px; border-radius: 18px; background: rgba(245,243,255,.05); border: 1px solid rgba(245,243,255,.07); overflow: hidden; }
.pf-card-title { margin: 14px 16px 6px; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: rgba(245,243,255,.6); }
.pf-note { margin: 0 16px 8px; font-size: 13.5px; line-height: 1.45; color: rgba(245,243,255,.7); }
.pf-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-top: 1px solid rgba(245,243,255,.06); background: none; color: #f5f3ff; font: 600 15.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-align: left; cursor: pointer; }
.pf-card .pf-row:first-child { border-top: 0; }
.pf-row span { flex: 1; }
.pf-row i { font-style: normal; color: rgba(245,243,255,.4); font-size: 20px; }
.pf-count { color: rgba(245,243,255,.5); font-size: 14px; }
.pf-danger { color: #ff8fab; }
.pf-strip { display: flex; gap: 6px; padding: 0 12px 14px; overflow-x: auto; scrollbar-width: none; }
.pf-strip::-webkit-scrollbar { display: none; }
.pf-thumb { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 0; padding: 0; background: rgba(245,243,255,.06); cursor: pointer; }
.pf-thumb img, .pf-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-thumb i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pf-strip-empty { margin: 0 4px; font-size: 13.5px; color: rgba(245,243,255,.55); }
.pf-score { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid rgba(245,243,255,.06); font-size: 15px; }
.pf-score b { font: 800 17px "Funnel Display", system-ui, sans-serif; color: #ffd36a; }
.pf-score b i { font-style: normal; color: rgba(245,243,255,.4); }
@media (prefers-reduced-motion: reduce) { .pf-page { transition: none; } }

/* Call-outs you can read anywhere on the table (Oct 15): a dark pill with
   cream text and a gold edge. They used to come out gold on gold. */
.whot-callout { background: rgba(26, 10, 23, .95) !important; color: #f5f3ff !important; border: 1.5px solid #ffc35a; text-shadow: none !important; font-style: normal !important; font-weight: 800 !important; padding: 10px 18px !important; border-radius: 20px !important; box-shadow: 0 14px 34px rgba(0, 0, 0, .55) !important; }
.whot-callout.is-caught { border-color: #ff9a3d; }
.whot-callout.is-win { border-color: #52d39c; color: #c9f5df !important; }

/* Call a shape: close it to look at your hand, open it again (Oct 15) */
#whotPanel .whot-shape-sheet { touch-action: pan-x; transition: transform .2s ease; }
#whotPanel .whot-sheet-grab { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 90px; height: 22px; border: 0; background: none; padding: 8px 0 0; cursor: pointer; }
#whotPanel .whot-sheet-grab i { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: rgba(245,243,255, .3); }
#whotPanel .whot-sheet-x { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(245,243,255, .1); color: #f5f3ff; font-size: 16px; cursor: pointer; }
.whot-shape-peek { position: fixed; z-index: 176; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 520px; box-sizing: border-box; padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; background: #24121f; border-top: 1px solid rgba(255,195,90,.35); box-shadow: 0 -12px 30px rgba(0,0,0,.45); color: #f5f3ff; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; animation: whotPeekIn .28s cubic-bezier(.2,.9,.3,1); }
.whot-shape-peek[hidden] { display: none !important; }
.whot-shape-peek .whot-sheet-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(245,243,255,.35); }
@keyframes whotPeekIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes whotPillIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
#whotTopCard.is-choosing { animation: whotChoosing 1.4s ease-in-out infinite; border-radius: 12px; }
@keyframes whotChoosing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 195, 90, .0); } 50% { box-shadow: 0 0 0 6px rgba(255, 195, 90, .45); } }
/* The one-time "Pick from market" tip sits above the pile now, not on top
   of "It's your turn". */
#whotPanel .whot-tap-hint { top: auto; bottom: calc(100% + 10px); background: #f5f3ff; color: #2a0f1f; font-size: .74rem; }
#whotPanel .whot-tap-hint::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: #f5f3ff; }
.whot-callout:not([data-side]) { font-size: clamp(1.25rem, 6vw, 1.7rem) !important; }

/* ---- Whot: round end, count reveal, table talk, faces, emoji row ---- */
.react-arrange.tray-12 > button:nth-child(-n+12) { background: rgba(255,211,106,.16); box-shadow: inset 0 0 0 1.5px rgba(255,211,106,.55); }

/* Your emoji row swipes: all twelve of your tray, the "+" stays put. */
#whotPanel .whot-seat-me .whot-seat-text { flex: 0 0 auto; }
#whotPanel .whot-quick-reacts {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
  padding-right: 14px;
}
#whotPanel .whot-quick-reacts::-webkit-scrollbar { display: none; }
#whotPanel .whot-quick-reacts button { flex: 0 0 38px; scroll-snap-align: start; }
#whotPanel .whot-quick-reacts button:nth-child(n) { display: inline-flex; align-items: center; justify-content: center; }

/* Faces: a profile photo or your initial on the seats */
.game-initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(140deg, #c0566f, #6b3157); color: #f5f3ff; font: 800 1.15rem/1 "Funnel Display", system-ui, sans-serif; }
.game-initial.is-me { background: linear-gradient(140deg, #ffc35a, #e0782f); color: #2a0f1f; }
#whotPanel .whot-seat-avatar .avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Trash talk lands in the middle of the table */
.whot-taunt-bubble.is-table {
  position: fixed; z-index: 330; max-height: none; overflow: visible;
  padding: .7rem 1.05rem .8rem; border-radius: 20px;
  background: #1a0b19; color: #f5f3ff; border: 1.5px solid rgba(255,211,106,.75);
  font: 700 1.05rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  animation-name: tauntTable; animation-timing-function: ease; animation-fill-mode: forwards;
  transform: none;
}
.whot-taunt-bubble.is-table.is-mine { border-color: rgba(245,243,255,.45); }
.whot-taunt-bubble.is-table .whot-taunt-sender { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #ffd36a; opacity: 1; margin-bottom: .25rem; }
.whot-taunt-bubble.is-table::after { display: none; }
.whot-taunt-bubble.is-table.is-compact { padding: .42rem .8rem .5rem; border-radius: 16px; font-size: .9rem; line-height: 1.22; }
.whot-taunt-bubble.is-table.is-compact .whot-taunt-sender { font-size: .6rem; margin-bottom: .1rem; }
@media (prefers-reduced-motion: reduce) { .whot-taunt-bubble.is-table { animation-name: tauntTableCalm !important; } }
@keyframes tauntTableCalm { 0% { opacity: 0; } 5% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tauntTable { 0% { opacity: 0; transform: scale(.86); } 6% { opacity: 1; transform: scale(1.03); } 10% { transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Round over: the table says who won and offers Play again */
#whotPanel.is-over .whot-status,
#whotPanel.is-over .whot-pending,
#whotPanel.is-over .whot-forfeit,
#whotPanel.is-over .whot-actions { display: none !important; }
#whotPanel.is-over .whot-mid { opacity: .32; filter: saturate(.6); pointer-events: none; }
#whotPanel .whot-finish[hidden] { display: none !important; }
#whotPanel .whot-finish {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 6;
  width: min(250px, 78%); box-sizing: border-box; padding: 14px 14px 14px; border-radius: 22px;
  background: rgba(24,10,24,.9); border: 1px solid rgba(255,211,106,.35); box-shadow: 0 18px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #f5f3ff;
  animation: finPop .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes finPop { 0% { transform: translate(-50%, -50%) scale(.8); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.04); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }
#whotPanel .whot-finish-text { margin: 0; display: flex; flex-direction: column; gap: 3px; }
#whotPanel .whot-finish-text b { font: 700 1.2rem/1.15 "Funnel Display", system-ui, sans-serif; letter-spacing: -.02em; }
#whotPanel .whot-finish-text small { font-size: .78rem; color: rgba(245,243,255,.72); line-height: 1.3; }
#whotPanel .whot-finish-again { width: 100%; height: 46px; border: 0; border-radius: 23px; background: #ffb42e; color: #2a0f1f; font: 800 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(255,154,61,.6); }
#whotPanel .whot-finish-again:active { transform: scale(.97); }

/* End card: one clean card, the ad arrives under it a beat later */
.whot-end { justify-content: center; gap: 14px; }
.whot-end .pw-ad-slot:not([hidden]) { animation: wrFade .35s ease-out; }
.whot-end.is-won .whot-end-card { border-color: rgba(255,211,106,.45); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,211,106,.25), 0 0 60px -10px rgba(255,195,90,.45); }
.whot-end.is-won .whot-end-big { animation: wrTrophy .9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes wrTrophy { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.18) rotate(4deg); opacity: 1; } 100% { transform: none; } }

/* Market finished: open and count the cards */
.whot-reveal { position: fixed; inset: 0; z-index: 520; display: flex; align-items: center; justify-content: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; background: rgba(12,6,18,.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: wrFade .2s ease-out; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: #f5f3ff; }
.whot-reveal.is-leaving { opacity: 0; transition: opacity .25s ease; }
.whot-reveal .wr-box { width: 100%; max-width: 380px; box-sizing: border-box; padding: 20px 16px 18px; border-radius: 26px; background: #182036; border: 1px solid rgba(245,243,255,.1); box-shadow: 0 30px 70px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 12px; }
.whot-reveal .wr-kicker { margin: 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ffd36a; }
.whot-reveal .wr-title { margin: -6px 0 2px; text-align: center; font: 700 26px/1.1 "Funnel Display", system-ui, sans-serif; letter-spacing: -.03em; }
.whot-reveal .wr-row { padding: 10px 12px 12px; border-radius: 18px; background: rgba(245,243,255,.05); border: 1.5px solid transparent; transition: border-color .3s, background .3s, opacity .3s; }
.whot-reveal .wr-row.is-live { border-color: rgba(245,243,255,.2); }
.whot-reveal .wr-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.whot-reveal .wr-name { font-weight: 700; font-size: 15px; }
.whot-reveal .wr-total { font: 800 26px/1 "Funnel Display", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.whot-reveal .wr-cards { display: flex; flex-wrap: wrap; gap: 5px; }
.whot-reveal .wr-c { position: relative; width: 34px; height: 47px; perspective: 400px; }
.whot-reveal .wr-back, .whot-reveal .wr-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .38s cubic-bezier(.3,.8,.3,1); border-radius: 6px; }
.whot-reveal .wr-back { background: repeating-linear-gradient(135deg, #8c1d40 0 5px, #7a1838 5px 10px); box-shadow: inset 0 0 0 1.5px rgba(255,220,200,.35); }
.whot-reveal .wr-front { transform: rotateY(180deg); }
.whot-reveal .wr-c.is-open .wr-back { transform: rotateY(-180deg); }
.whot-reveal .wr-c.is-open .wr-front { transform: rotateY(0); }
.whot-reveal .wr-front .whot-card-face.small { width: 34px; height: 47px; border-width: 1.2px; border-radius: 6px; box-sizing: border-box; }
.whot-reveal .wr-front .whot-card-face.small .wc-shape-svg { width: 20px; height: 20px; }
.whot-reveal .wr-front .whot-card-face.small .wc-corner { font-size: .45rem; }
.whot-reveal .wr-front .whot-card-face.small .wc-corner-top { top: 3px; left: 4px; }
.whot-reveal .wr-front .whot-card-face.small .wc-corner-bottom { bottom: 3px; right: 4px; }
.whot-reveal .wr-front .whot-card-face.small .wc-wordmark { font-size: .5rem; }
.whot-reveal.is-settled .wr-row { opacity: .55; }
.whot-reveal.is-settled .wr-row.is-low { opacity: 1; border-color: #ffd36a; background: rgba(255,211,106,.1); }
.whot-reveal.is-settled .wr-row.is-low .wr-total { color: #ffd36a; }
.whot-reveal .wr-foot { margin: 2px 0 0; text-align: center; font-size: 13px; color: rgba(245,243,255,.7); }
.whot-reveal.is-settled .wr-foot { font-size: 16px; font-weight: 700; color: #f5f3ff; }
@media (prefers-reduced-motion: reduce) { .whot-reveal .wr-back, .whot-reveal .wr-front { transition: none; } }
#whotHand .is-pending-20 { display: none !important; }
@media (max-height: 640px) {
  #whotPanel .whot-finish { top: 64%; padding: 8px 10px 9px; gap: 6px; border-radius: 18px; }
  #whotPanel .whot-finish-text b { font-size: 1.02rem; }
  #whotPanel .whot-finish-text small { display: none; }
  #whotPanel .whot-finish-again { height: 38px; font-size: 14px; }
}

/* Rules are open again once a round ends */
.whot-end-rules { margin: 16px auto 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid rgba(255,211,106,.4); background: rgba(255,211,106,.08); color: #ffd36a; font: 700 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.whot-end-rules[hidden] { display: none; }
.whot-end-rules + .whot-end-actions { margin-top: 12px; }
#whotPanel .whot-finish-rules { border: 0; background: none; color: #ffd36a; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; padding: 2px 8px; cursor: pointer; }
#whotPanel .whot-finish-rules[hidden] { display: none; }
@media (max-height: 640px) { #whotPanel .whot-finish-rules { font-size: 12px; padding: 0 6px; } }

/* ---- Awa names: plain bold text since Oct 20 (the mark is no longer a letter; see src/brand.js) ---- */
.awa-word { display: inline-flex; align-items: baseline; white-space: nowrap; }
/* Home header: the small mark beside the name. On a laptop the side menu already shows it. */
.awh-brand .brand-mark { width: 28px; height: 28px; margin: 0; flex: none; }
html.awa-desk .awh-brand .brand-mark { display: none; }
.awh-brand .awa-word { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.035em; color: #f5f3ff; }
.awh-svc.awh-awa .awa-word { font-size: 1em; }
.awh-sound-copy .awa-word, .cinema-tile-text .awa-word { font: inherit; }
.awa-logo .awa-word { -webkit-text-fill-color: initial; color: #f5f3ff; background: none; letter-spacing: -.05em; }
.top h1 .awa-word { font-size: 1em; }
.watch-sting-wordmark .awa-word { color: inherit; }
.room-brand-library .awa-word { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; }
.aw-brand .awa-word { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.035em; color: #f5f3ff; }
.aw-brand.big .awa-word { font-size: 52px; line-height: 1; }

/* Whot card motion (20 Oct 2026, src/whot-motion.js). A flying card is an
   overlay drawn at pile size and moved only with transform, so it stays on
   the GPU and smooth on slower phones. Its shadow never changes while it
   flies (an animated filter or shadow would repaint every frame). */
.wm-flyer { position: fixed; left: 0; top: 0; width: 76px; height: 104px; z-index: 9998; pointer-events: none; margin: 0; transform-origin: 50% 50%; will-change: transform; contain: layout style; }
.wm-flyer > .whot-card-face { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 10px; background: linear-gradient(160deg,#fbf3e4,#efe1c8); border: 1.5px solid #d5b893; color: #8e1b3a; box-shadow: 0 14px 22px -10px rgba(0,0,0,.7); }
.wm-flyer > .whot-card-face .wc-shape-svg { width: 44px; height: 44px; }
.wm-flyer > .whot-card-face .wc-corner { font-size: 1rem; font-weight: 900; }
.wm-flyer > .wm-back { position: absolute; inset: 0; box-sizing: border-box; border-radius: 10px; background: repeating-linear-gradient(45deg,#7a1a35 0 6px,#6a152d 6px 12px); border: 1.5px solid #b85a73; box-shadow: 0 14px 22px -10px rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; font-family: "Funnel Display", system-ui, sans-serif; font-style: italic; font-weight: 700; font-size: 1rem; color: rgba(244,231,222,.88); }
.wm-flyer.is-back > .whot-card-face, .wm-flyer:not(.is-back) > .wm-back { visibility: hidden; }
/* A card still in the air keeps its spot in the hand, just unseen. */
#whotPanel .whot-card-btn.wm-hide { visibility: hidden !important; }
/* Each card on the pile sits at its own small angle, like real cards
   thrown down. Both phones pick the same angle for the same card. */
#whotPanel #whotTopCard .whot-card-face { transform: rotate(var(--wm-tilt, -2deg)); }

/* --- Arriving from a notification (Oct 20) --- */
/* "Back to Lumi · Whot": floats just under the top bar, never over buttons. */
.awa-back-pill {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  transform: translateX(-50%);
  z-index: 880;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: calc(100vw - 32px);
  padding: .42rem .85rem .42rem .6rem;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 32%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 92%, var(--accent-soft) 8%);
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  cursor: pointer;
  animation: awa-cross-space-in .2s ease-out;
}
.awa-back-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awa-back-pill svg { flex: 0 0 auto; color: var(--accent-soft); }
/* "3 unread messages" line in the chat, where the news starts. */
.unread-divider {
  align-self: stretch;
  margin: .8rem 0 .4rem;
  padding: .3rem 0;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  border-radius: 10px;
}

/* Connection state in the headers (src/conn-status.js), WhatsApp style:
   it takes the place of the usual line instead of popping up. */
html[data-conn] .topbar-status #onlineText,
html[data-conn] .topbar-status #onlineDot { display: none; }
.topbar-status .chat-conn-status { color: inherit; opacity: .85; font-weight: 600; }
.awh-brand { position: relative; }
.awa-conn-label { margin-left: 0; font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; letter-spacing: 0; color: rgba(245,243,255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.awa-conn-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #ffd36a; vertical-align: 1px; animation: awaConnPulse 1.2s ease-in-out infinite; }
html[data-conn="offline"] .awa-conn-label::before { background: rgba(245,243,255, .45); animation: none; }
@keyframes awaConnPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .awa-conn-label::before { animation: none; } }

/* Waiting to send (no network): time and a small clock, like WhatsApp. */
.msg-status-queued { display: inline-flex; align-items: center; gap: 4px; }
.msg-status-queued .msg-clock { opacity: .8; flex: none; }

/* Profile photos: when a photo isn't square, show its top part (the face)
   instead of the middle (the body). Square photos look the same. */
img.avatar-photo, .avatar-slot img, .whot-seat-avatar img, .cinema-room-partner-avatar img,
.settings-profile-avatar img, .aws-profile-av img, .wh-av img, .call-person-avatar img, .player-tag-avatar img { object-position: 50% 15%; }

/* Profile photo crop screen (src/photo-crop.js) */
html.pc-open { overflow: hidden; }
.pc-sheet { position: fixed; inset: 0; z-index: 2147482000; display: flex; flex-direction: column; background: #0b080d; color: #f5f3ff; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); animation: pcIn .18s ease-out both; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.pc-sheet.is-closing { animation: pcOut .18s ease-in both; }
@keyframes pcIn { from { opacity: 0; } }
@keyframes pcOut { to { opacity: 0; } }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px; }
.pc-title { margin: 0; font-weight: 700; font-size: 16px; }
.pc-btn { min-width: 72px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: #f5f3ff; font: 600 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.pc-btn.pc-done { background: #f5f3ff; color: #121828; }
.pc-stage { position: relative; flex: 1 1 auto; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.pc-stage:active { cursor: grabbing; }
.pc-img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.pc-mask { position: absolute; left: 50%; top: 50%; width: var(--pc-frame, 300px); height: var(--pc-frame, 300px); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 200vmax rgba(11, 8, 13, .66); outline: 2px solid rgba(245,243,255, .9); outline-offset: -1px; pointer-events: none; }
.pc-zoom { display: flex; align-items: center; gap: 12px; padding: 14px 24px 18px; font-size: 20px; opacity: .9; }
.pc-zoom input { flex: 1; min-height: 40px; accent-color: #f5f3ff; }

/* ---------------------------------------------------------------------------
   Whot on short screens (Batch B, 21 Oct 2026). Rule: every control fits one
   screen with no scrolling, and nothing on the felt (turn line, "Pick 3",
   the called shape, Give up) may ever sit under your hand. Tall phones keep
   the big table; short ones get the same table, packed tighter.
   --------------------------------------------------------------------------- */
/* An empty scoreboard / picker row takes no space. */
#whotPanel .whot-header:has(> .whot-stats:empty):has(> .whot-opponent-picker[hidden]) { display: none; }
#whotPanel .whot-felt > * { flex-shrink: 0; }
#whotPanel .whot-felt { justify-content: space-evenly; }

@media (max-height: 760px) {
  #whotPanel .whot-seat-opp { margin: 0 0 .25rem; }
  #whotPanel .whot-seat-opp .whot-seat-avatar { width: 34px; height: 34px; flex-basis: 34px; }
  #whotPanel .whot-felt { padding: 6px 12px 8px; gap: .3rem; }
  #whotPanel #whotOppHand { padding: 2px 18px 4px; }
  #whotPanel #whotOppHand .whot-card-back.hand { width: 30px; height: 42px; }
  #whotPanel .whot-mid { gap: 28px; }
  #whotPanel .whot-market-pile .whot-card-back { width: 60px; height: 84px; }
  #whotPanel .whot-discard, #whotPanel #whotTopCard .whot-card-face { width: 62px; height: 86px; }
  #whotPanel #whotTopCard .wc-shape-svg { width: 36px; height: 36px; }
  /* The tap hint bubble already says "Pick from market", and the label
     would run into the called shape under the pile. */
  #whotPanel .whot-pile-label { display: none; }
  #whotPanel .whot-status { padding: .32rem .85rem; font-size: .8rem; }
  #whotPanel .whot-pending { padding: .28rem .7rem; font-size: .72rem; line-height: 1.3; }
  #whotPanel .whot-forfeit { min-height: 32px; padding: 0 .6rem; font-size: .72rem; }
  #whotPanel #whotHand { padding: 12px 16px 6px; }
  #whotPanel .whot-seat-me { margin-top: 2px; padding: .3rem .45rem .3rem .5rem; }
  #whotPanel .whot-seat-me .whot-seat-avatar { width: 36px; height: 36px; flex-basis: 36px; }
}
@media (max-height: 660px) {
  .games-overlay:has(#whotPanel:not([hidden])) .game-vs { margin-top: 4px; }
  #whotPanel .whot-seat-opp { margin: 0 0 .15rem; }
  #whotPanel .whot-seat-opp .whot-seat-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  #whotPanel .whot-seat-text b { font-size: .86rem; }
  #whotPanel .whot-table { padding: 8px; }
  #whotPanel .whot-felt { padding: 4px 10px 6px; gap: .22rem; }
  #whotPanel #whotOppHand .whot-card-back.hand { width: 24px; height: 34px; font-size: 0; }
  #whotPanel #whotOppHand .whot-card-btn { margin-left: -10px; }
  #whotPanel .whot-market-pile .whot-card-back { width: 50px; height: 70px; }
  #whotPanel .whot-discard, #whotPanel #whotTopCard .whot-card-face { width: 52px; height: 72px; }
  #whotPanel #whotTopCard .wc-shape-svg { width: 30px; height: 30px; }
  #whotPanel #whotTopCard .wc-corner { font-size: .8rem; }
  /* The tap hint bubble already says "Pick from market". */
  #whotPanel .whot-pile-label { display: none; }
  #whotPanel .whot-status { padding: .24rem .75rem; font-size: .76rem; }
  #whotPanel .whot-pending { font-size: .68rem; }
  #whotPanel .whot-forfeit { min-height: 28px; }
  #whotPanel #whotHand { padding: 10px 14px 4px; }
  #whotPanel #whotHand .whot-card-face.small { width: 46px; height: 64px; }
  #whotPanel #whotHand .whot-card-face.small .wc-shape-svg { width: 24px; height: 24px; }
  #whotPanel #whotHand .whot-card-face.small .wc-corner { font-size: .72rem; }
  #whotPanel #whotHand .whot-card-placeholder { width: 46px; height: 64px; flex-basis: 46px; }
  #whotPanel .whot-seat-me .whot-seat-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  #whotPanel .whot-quick-reacts button, #whotPanel .whot-tray-btn { width: 40px; height: 40px; flex-basis: 40px; }
}

/* Games page: the Whot "Your turn" badge sits above the card art. */
.pl-pair-top .pl-whot .pl-turn { z-index: 3; }

/* Small buttons get a full-size touch area (about 40 px or more) without
   changing how they look. */
#viewOnceBtn, #sharePlaceBtn, #whotRulesChip, #pushTestBtn, .whot-forfeit { position: relative; }
#viewOnceBtn::after, #sharePlaceBtn::after, #pushTestBtn::after, #whotRulesChip::after, .whot-forfeit::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.whot-end-big .whot-card-back { width: 56px; height: 78px; margin: 4px auto 2px; border-radius: 9px; display: flex; align-items: center; justify-content: center; transform: rotate(-8deg); background: repeating-linear-gradient(45deg,#7a1a35 0 6px,#6a152d 6px 12px); border: 1.5px solid #b85a73; color: rgba(244,231,222,.88); font: italic 700 .8rem "Funnel Display", system-ui, sans-serif; box-shadow: 0 14px 26px -10px rgba(0,0,0,.7); }

/* Awa Movies room: plan a movie night with one tap instead of a bare date
   box, and the room's name in plain bold text. */
.watch-schedule-plan { align-self: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,211,106,.4); background: rgba(255,211,106,.1); color: #ffd36a; font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.watch-schedule-plan[hidden], .watch-schedule-form[hidden] { display: none !important; }
.watch-schedule-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin: 0 auto; }
.watch-schedule-label { font-size: 13px; font-weight: 600; color: rgba(245,243,255,.75); }
.watch-schedule-row { display: flex; gap: 8px; }
.watch-schedule-row input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(245,243,255,.2); background: rgba(14,6,20,.5); color: #f5f3ff; font: 500 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color-scheme: dark; }
.watch-schedule-row .btn { min-height: 44px; }
#watchPanel .room-brand-library b { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.03em; color: #ffd36a; }
/* Small phones: the connection line shortens instead of pushing the header
   apart, and the movie room name stays on one line. */
.awh-bar .awh-brand { min-width: 0; flex: 1 1 auto; }
.awh-bar .awh-bar-actions { flex: 0 0 auto; }
.awa-conn-label { min-width: 0; flex: 0 1 auto; }
@media (max-width: 360px) { .awa-conn-label { font-size: 11.5px; max-width: 30vw; } }
#watchPanel .room-brand-library b { white-space: nowrap; }
@media (max-width: 360px) {
  #watchPanel .over-chat-cinema .oc-label { display: none; }
  #watchPanel .room-brand-library b { font-size: 1.05rem; }
}

/* ---------------------------------------------------------------------------
   Home, round 3 option 2 (Dale's pick, 21 Oct 2026): today's Home with
   a "5 people" pill instead of the row of faces, a live sunset card
   ("Lumi is here", your turn), Cinema as three tiles, Word Hunt under Whot.
   --------------------------------------------------------------------------- */
/* The row of people is replaced by the pill on phones (it keeps running, for
   new joins and activity dots). */
html:not(.awa-desk) .home-screen.awh #awaPeopleRow { display: none !important; }
.awh-people-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px 0 6px; border-radius: 999px; border: 1px solid rgba(245,243,255,.16); background: rgba(255,255,255,.07); color: #f5f3ff; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.awh-people-pill:active { background: rgba(255,255,255,.12); }
.awh-people-faces { display: inline-flex; }
.awh-people-faces > span { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #22141f; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background-size: cover; background-position: 50% 15%; overflow: hidden; }
.awh-people-faces > span + span { margin-left: -8px; }
.awh-people-faces:empty { display: none; }
.awh-people-pill.has-activity::after { content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: #ff4f8b; box-shadow: 0 0 0 2px #182036; }

/* Live sunset card: when it's your turn, a cream "Play" button sits under
   the person, and the card grows to hold it. */
.awh-turn-btn { display: none; }
.awh-turn-btn:not([hidden]) { display: flex; align-items: center; justify-content: center; position: absolute; left: 10px; right: 10px; bottom: 10px; min-height: 46px; border: 0; border-radius: 14px; background: #f5f3ff; color: #23101c; font: 800 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; z-index: 3; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.home-screen.awh .awh-hero:has(.awh-turn-btn:not([hidden])) { height: 268px !important; }
.home-screen.awh .awh-hero:has(.awh-turn-btn:not([hidden])) .home-contact-row.awh-chatrow.awh-in-hero { bottom: 64px; }
.home-screen.awh .awh-in-hero .home-contact-name .is-here-dot { display: none; }

/* Cinema: YouTube, TikTok and Awa Movies as three square tiles, each going
   straight to its room. */
#awaWatchQuick { cursor: default; }
#awaWatchQuick .awh-panel-head { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.awh-svc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.awh-svc-tiles .awh-svc { height: auto !important; min-height: 84px; flex-direction: column; gap: 8px; padding: 12px 6px; font: 800 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.awh-svc-tiles .awh-svc svg { width: 34px; height: 24px; }
.awh-svc-tiles .awh-svc .awh-tt svg { width: 26px; height: 26px; }
.awh-svc-tiles .awh-svc.awh-awa { color: #ffd36a; border-color: rgba(255,211,106,.35); background: linear-gradient(180deg, #3a1e26, #2a1820); }
.awh-svc-tiles .awh-awa-ic { width: 28px !important; height: 28px !important; }
.awh-svc-tiles .awh-svc:active { transform: scale(.97); }

/* Word Hunt card, the same shape as the Whot card. */
.home-screen.awh .awh-words { background: radial-gradient(90% 120% at 85% 50%, #1e5a55 0%, #14262a 70%); }
.awh-letters { position: absolute; right: 16px; top: 18px; display: grid; grid-template-columns: repeat(4, 26px); gap: 4px; }
.awh-letters i { height: 26px; border-radius: 6px; background: #f3e6da; color: #1e5a55; font: 800 13px/26px "Funnel Display", system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.awh-letters i.hot { background: #ffc861; color: #14262a; }
.home-screen.awh .awh-words .awh-cta { left: auto; right: 14px; bottom: 12px; height: 32px; padding: 0 14px; font-size: 13px; }
@media (max-width: 360px) { .awh-letters { grid-template-columns: repeat(4, 22px); } .awh-letters i { height: 22px; line-height: 22px; font-size: 11px; } }
@media (max-width: 360px) { .awh-svc-tiles .awh-svc { font-size: 12px; } .awh-svc-tiles .awh-svc span { white-space: nowrap; } }
/* Smallest phones (about 320 wide): the pill shows just the faces and the
   connection status just its dot, so the AwaSpace name never gets cut. */
@media (max-width: 350px) {
  .awh-people-pill { padding: 0 6px; gap: 0; }
  .awh-people-pill .awh-people-count { display: none; }
  .awh-people-faces:empty + .awh-people-count { display: inline; padding: 0 6px; }
  .awa-conn-label { font-size: 0; max-width: 14px; }
  .awa-conn-label::before { margin-right: 0; }
}
.awa-conn-label:not([hidden]) { min-width: 14px; }
a.aws-profile { text-decoration: none; color: inherit; }
.aws-profile-edit { margin-left: auto; flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 17px; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #ffd36a; border: 1px solid rgba(255, 211, 106, .45); }
/* While "Connecting…" shows on a phone, the pill gives up its words so the
   two never overlap. */
@media (max-width: 380px) {
  .awh-bar:has(.awa-conn-label:not([hidden])) .awh-people-count { display: none; }
  .awh-bar:has(.awa-conn-label:not([hidden])) .awh-people-pill { padding: 0 6px; gap: 0; }
  .awh-brand { flex: 0 0 auto; }
  .awa-conn-label { font-size: 0; max-width: 14px; }
  .awa-conn-label::before { margin-right: 0; }
}

/* The win card button on the end card (22 Oct 2026). */
.whot-end-share { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 14px; border: 1px solid rgba(255, 211, 106, .45); border-radius: 23px; background: rgba(255, 211, 106, .12); color: #ffd77a; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.whot-end-share[hidden] { display: none; }
.whot-end-share svg { width: 18px; height: 18px; }
.whot-end-share + .whot-end-actions { margin-top: 10px; }

/* Unread count on the bottom bar's Chat button (22 Oct) */
.awh-nav-btn { position: relative; }
.awh-nav-badge { position: absolute; top: 6px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #ff5a5f; color: #fff; font: 800 11px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px #140b1d; }
.awh-nav-badge[hidden] { display: none; }
/* Full-screen movie on a phone held upright: the chat box had 40% of the
   width and cut "Say something" off. Give it the room beside the emoji rail. */
@media (orientation: portrait) {
  .watch-stage.expanded .watch-flash-form { width: min(300px, calc(100vw - 86px)); }
}
.watch-presence-row[hidden] { display: none !important; }
.aws-row[hidden] { display: none !important; }

/* ---- Privacy (22 Oct 2026): PIN pad, quiet chat, locked bubble, room sheet ---- */
.pp-wrap { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; background: #121828; color: #f5f3ff; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); animation: ppIn .18s ease-out; }
@keyframes ppIn { from { opacity: 0; } to { opacity: 1; } }
.pp-card { width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; }
.pp-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(245,243,255,.08); margin-bottom: 14px; }
.pp-ic svg { width: 22px; height: 22px; }
.pp-title { font: 700 20px/1.25 "Funnel Display", system-ui, sans-serif; letter-spacing: -.01em; }
.pp-sub { min-height: 20px; margin: 6px 0 0; font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: rgba(245,243,255,.66); }
.pp-sub.is-err { color: #ff9b8a; }
.pp-dots { display: flex; gap: 16px; margin: 26px 0 30px; }
.pp-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid rgba(245,243,255,.55); transition: background .12s, transform .12s; }
.pp-dots i.on { background: #f5f3ff; border-color: #f5f3ff; transform: scale(1.06); }
.pp-dots.shake { animation: ppShake .36s; }
@keyframes ppShake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.pp-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; }
.pp-pad button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(245,243,255,.08); color: #f5f3ff; font: 500 28px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-pad button:active { background: rgba(245,243,255,.22); }
.pp-pad .pp-text { background: transparent; font-size: 15px; font-weight: 600; }
.pp-pad .pp-text:empty { visibility: hidden; }
.pp-wrap.is-wait .pp-pad { opacity: .35; pointer-events: none; }
.pp-link { margin-top: 18px; border: 0; background: none; color: rgba(245,243,255,.78); font: 600 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; padding: 10px; cursor: pointer; }
.pp-cta { margin-top: 22px; min-height: 48px; padding: 0 28px; border-radius: 999px; border: 0; background: #f5f3ff; color: #121828; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
@media (max-height: 600px) { .pp-pad { grid-template-columns: repeat(3, 62px); gap: 10px 18px; } .pp-pad button { width: 62px; height: 62px; font-size: 24px; } .pp-dots { margin: 16px 0 18px; } }

/* Quiet chat: an ordinary-looking empty chat, nothing says it's hidden. */
html.awa-quiet #chatLog > * { display: none !important; }
html.awa-quiet #chatLog::after { content: "No messages here yet. Say hi 👋"; display: block; margin: 38vh auto 0; text-align: center; font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; opacity: .6; }
html.awa-quiet .peek-msg { display: none !important; }
html.awa-quiet #homePeekMessages::after { content: "Nothing here yet. Say hi 👋"; display: block; text-align: center; opacity: .6; font-size: 13px; padding: 10px 0; }
/* Locked Space in the app switcher: nothing readable. */
html.awa-veil body > *:not(#awaPinPad) { filter: blur(24px); }

.aw-bubble-locked .aw-bubble-plus { background: rgba(245,243,255,.08); }

.aws-group-label { margin: 14px 4px 6px; font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; letter-spacing: .02em; opacity: .55; }
.aws-group-label:first-child { margin-top: 2px; }
.aws-dot.is-off { background: rgba(245,243,255,.4) !important; box-shadow: none !important; }
.priv-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 14px; margin: 0 0 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: inherit; text-align: left; cursor: pointer; }
.priv-opt b { display: block; font-size: 15px; }
.priv-opt small { display: block; margin-top: 2px; font-size: 13px; opacity: .65; }
.priv-opt i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); }
.priv-opt.is-on i { border-color: #f6b75b; background: radial-gradient(circle, #f6b75b 0 45%, transparent 50%); }

/* Awa Movies: make room before an upload */
.cr-sheet { position: fixed; inset: 0; z-index: 960; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,6,10,.6); }
.cr-card { width: min(480px, 100%); max-height: 86vh; overflow: auto; padding: 20px 16px max(18px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #1b1620; color: #f5f3ff; }
.cr-title { display: block; font: 700 19px/1.25 "Funnel Display", system-ui, sans-serif; }
.cr-sub { margin: 6px 0 14px; font-size: 14px; line-height: 1.45; opacity: .75; }
.cr-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.cr-bar i { display: block; height: 100%; background: #f6b75b; border-radius: 99px; transition: width .3s; }
.cr-meta { margin: 6px 0 12px; font-size: 12.5px; opacity: .6; }
.cr-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); }
.cr-name { flex: 1; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-name small { display: block; font-size: 12px; opacity: .6; }
.cr-del { flex: none; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(255,140,120,.45); background: none; color: #ffb3a5; font-weight: 600; cursor: pointer; }
.cr-del.is-sure { background: #e5533c; border-color: #e5533c; color: #fff; }
.cr-go { width: 100%; min-height: 50px; margin-top: 16px; border-radius: 99px; border: 0; background: #f5f3ff; color: #121828; font-weight: 700; font-size: 15px; cursor: pointer; }
.cr-go:disabled { opacity: .35; cursor: default; }
.cr-cancel { width: 100%; min-height: 44px; margin-top: 6px; border: 0; background: none; color: inherit; opacity: .7; font-weight: 600; cursor: pointer; }

/* ---- Home: Whot and Word Hunt side by side (22 Oct 2026, both looks) ---- */
.home-screen.awh .awh-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 0 0 auto; }
.home-screen.awh .awh-duo .awh-whot { height: 132px !important; }
.home-screen.awh .awh-duo .awh-whot-copy { left: 14px; right: 12px; top: auto !important; bottom: 12px; transform: none !important; }
.home-screen.awh .awh-duo .awh-whot-copy b { font-size: 19px; }
.home-screen.awh .awh-duo .awh-whot-copy small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-screen.awh .awh-duo .awh-fan { transform: scale(.42) !important; transform-origin: left top; top: 12px !important; left: 14px; right: auto !important; }
.home-screen.awh .awh-duo .awh-letters { left: 14px; right: auto; top: 14px; grid-template-columns: repeat(4, 20px); gap: 3px; }
.home-screen.awh .awh-duo .awh-letters i { height: 20px; line-height: 20px; font-size: 11px; border-radius: 5px; }
.home-screen.awh .awh-duo .awh-cta { right: 10px !important; bottom: 10px !important; top: auto; height: 28px !important; padding: 0 10px !important; font-size: 12px !important; }

/* ---- Ink look (admin switch, html.awa-ink): the splash's world, one warm accent ---- */
html.awa-ink { --ink: #f5f3ff; --ink-bg: #121828; --ink-2: #1d2438; --ink-3: #262e46; --ink-line: rgba(245,243,255,.08); --ink-text: #f5f3ff; --ink-dim: rgba(245,243,255,.62); --ink-accent: #f6b75b; --ink-glow: rgba(246,183,91,.22); }
html.awa-ink.room-active body, html.awa-ink .room-shell { background: var(--ink-bg) !important; }
html.awa-ink .home-screen.awh { background: var(--ink-bg) !important; color: var(--ink-text); }
html.awa-ink .awh-hero { background: var(--ink-2) !important; border: 1px solid var(--ink-line); box-shadow: none !important; }
html.awa-ink .awh-hero::after { content: ""; position: absolute; left: -40px; bottom: -70px; width: 260px; height: 220px; background: radial-gradient(closest-side, var(--ink-glow), transparent); pointer-events: none; transition: background 1.2s; }
html.awa-ink .awh-sun, html.awa-ink .awh-hero-fade { display: none !important; }
html.awa-ink .awh-greet { font-size: 28px !important; font-family: "Funnel Display", system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -.04em !important; color: var(--ink-text) !important; text-shadow: none !important; }
html.awa-ink .awh-hero-sub { color: var(--ink-dim) !important; text-shadow: none !important; }
html.awa-ink .home-contact-row.awh-chatrow { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 8px 0 !important; z-index: 1; }
html.awa-ink .awh-chatrow-av .avatar-slot { border: 0 !important; box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 4px var(--ink-accent) !important; }
html.awa-ink .awh-chatrow-av .dot { border-color: var(--ink-2) !important; }
html.awa-ink .awh-chatrow .home-contact-name { font-size: 22px !important; }
html.awa-ink .awh-chatrow .home-contact-preview { color: var(--ink-dim) !important; }
html.awa-ink .awh-chatrow-go { background: transparent !important; border: 1px solid rgba(245,243,255,.18); color: var(--ink-text) !important; box-shadow: none !important; }
html.awa-ink .awh-turn-btn { background: var(--ink-accent) !important; color: #1a1208 !important; box-shadow: none !important; border: 0 !important; }
html.awa-ink .awh-card, html.awa-ink .awh-whot, html.awa-ink .home-screen.awh .awh-words, html.awa-ink .awh-panel { background: var(--ink-2) !important; border: 1px solid var(--ink-line) !important; box-shadow: none !important; }
html.awa-ink .awh-whot-copy small, html.awa-ink .awh-panel-head small, html.awa-ink .awh-sound-copy small { color: var(--ink-dim) !important; }
html.awa-ink .awh-svc { background: var(--ink-bg) !important; border-color: var(--ink-line) !important; }
html.awa-ink .awh-awa { color: var(--ink-accent) !important; }
html.awa-ink .awh-letters i { background: var(--ink-3); color: var(--ink-text); box-shadow: none; }
html.awa-ink .awh-letters i.hot { background: var(--ink-accent); color: #1a1208; }
html.awa-ink .awh-cta { background: var(--ink-accent) !important; color: #1a1208 !important; box-shadow: none !important; }
html.awa-ink .awh-eq i { background: var(--ink-accent) !important; }
html.awa-ink .awh-people-pill, html.awa-ink .awh-me-btn { background: var(--ink-2) !important; border-color: rgba(245,243,255,.14) !important; box-shadow: none !important; }
html.awa-ink .awh-nav { background: rgba(18,24,40,.96) !important; border-color: var(--ink-line) !important; box-shadow: 0 -6px 24px rgba(0,0,0,.5) !important; }
html.awa-ink .awh-nav-btn.is-on { color: var(--ink-accent) !important; }
html.awa-ink .awh-moments { background: var(--ink-2) !important; }

/* ---- Readability (23 Oct 2026, both looks): their messages, names, Skip ---- */
html:not([data-theme="forest"]) .msg.theirs { background: #2d2832 !important; border-color: rgba(255,255,255,.16) !important; color: #f7f2ec !important; }
html:not([data-theme="forest"]) .msg.theirs .msg-time, html:not([data-theme="forest"]) .msg.theirs .msg-meta { color: rgba(247,242,236,.7) !important; }
.chat-sheet-who b { color: #fff8ef !important; }
#wordsTutorialSkipBtn { color: #f5f3ff !important; border: 1px solid rgba(245,243,255,.45) !important; background: rgba(245,243,255,.08) !important; font-weight: 700; }
.words-howto { align-self: center; margin: 2px auto 0; display: block; min-height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid rgba(245,243,255,.22); background: transparent; color: rgba(245,243,255,.85); font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }

/* ---- Ink Home, alive (the music screen's vibe): colour from what's in each card, edge light, slow motion ---- */
html.awa-ink { --ink-2: #1d2438; --ink-line: rgba(245,243,255,.1); }
html.awa-ink .awh-hero, html.awa-ink .awh-card, html.awa-ink .awh-sound { box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 30px -18px rgba(0,0,0,.8) !important; }
/* Person card: their photo, blurred, as a colour wash; a slow breathing glow. */
html.awa-ink .awh-hero::before { content: ""; position: absolute; inset: -30%; background: var(--ink-photo, radial-gradient(circle at 78% 18%, rgba(255,180,46,.55), transparent 60%)) center / cover no-repeat; filter: blur(46px) saturate(1.6); opacity: .42; pointer-events: none; animation: inkBreathe 9s ease-in-out infinite alternate; }
html.awa-ink .awh-hero::after { animation: inkGlow 7s ease-in-out infinite alternate; }
html.awa-ink .awh-hero > *:not(.awh-sun):not(.awh-hero-fade) { z-index: 1; }
@keyframes inkBreathe { from { transform: scale(1) translateY(0); opacity: .34; } to { transform: scale(1.08) translateY(-4%); opacity: .5; } }
@keyframes inkGlow { from { opacity: .7; } to { opacity: 1; } }
html.awa-ink .awh-chatrow-av .dot.online { animation: inkPulse 2.4s ease-out infinite; }
@keyframes inkPulse { 0% { box-shadow: 0 0 0 0 rgba(76,211,138,.55); } 70% { box-shadow: 0 0 0 9px rgba(76,211,138,0); } 100% { box-shadow: 0 0 0 0 rgba(76,211,138,0); } }
/* Whot: red and green light from the cards, the fan sways a little. */
html.awa-ink .home-screen.awh .awh-whot:not(.awh-words) { background: radial-gradient(120% 90% at 18% 10%, rgba(226,59,78,.32), transparent 55%), radial-gradient(90% 80% at 60% 0%, rgba(47,158,91,.22), transparent 60%), var(--ink-2) !important; }
html.awa-ink .awh-duo .awh-fan { animation: inkSway 5s ease-in-out infinite alternate; }
@keyframes inkSway { from { transform: scale(.42) rotate(-2deg); } to { transform: scale(.42) rotate(3deg) translateY(-3px); } }
/* Word Hunt: amber light from the tiles, one tile lights up after another. */
html.awa-ink .home-screen.awh .awh-words { background: radial-gradient(120% 90% at 20% 10%, rgba(246,183,91,.26), transparent 58%), var(--ink-2) !important; }
html.awa-ink .awh-duo .awh-letters i { animation: inkTile 8s ease-in-out infinite; }
html.awa-ink .awh-duo .awh-letters i:nth-child(2) { animation-delay: 1s; } html.awa-ink .awh-duo .awh-letters i:nth-child(3) { animation-delay: 2s; } html.awa-ink .awh-duo .awh-letters i:nth-child(4) { animation-delay: 3s; }
html.awa-ink .awh-duo .awh-letters i:nth-child(5) { animation-delay: 4s; } html.awa-ink .awh-duo .awh-letters i:nth-child(6) { animation-delay: 5s; } html.awa-ink .awh-duo .awh-letters i:nth-child(7) { animation-delay: 6s; } html.awa-ink .awh-duo .awh-letters i:nth-child(8) { animation-delay: 7s; }
@keyframes inkTile { 0%, 20%, 100% { filter: none; transform: none; } 8% { filter: brightness(1.35); transform: translateY(-2px); } }
/* Cinema: each tile glows in its own colour. */
html.awa-ink .awh-panel { background: radial-gradient(90% 70% at 85% 100%, rgba(246,183,91,.14), transparent 60%), var(--ink-2) !important; }
html.awa-ink .awh-svc[data-cinema-room="youtube"] { box-shadow: inset 0 -18px 30px -18px rgba(255,0,51,.35); }
html.awa-ink .awh-svc[data-cinema-room="tiktok"] { box-shadow: inset 0 -18px 30px -18px rgba(37,244,238,.28); }
html.awa-ink .awh-svc[data-cinema-room="movies"] { box-shadow: inset 0 -18px 30px -18px rgba(246,183,91,.4); }
/* Awa Muzik: warm light and bars that always move a little, like the music screen. */
html.awa-ink .awh-sound.awh-t-sound { background: radial-gradient(90% 140% at 0% 50%, rgba(255,180,46,.22), transparent 60%), #1f2639 !important; border-color: rgba(255,180,46,.28) !important; }
html.awa-ink .awh-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
html.awa-ink .awh-eq i { width: 4px; border-radius: 2px; height: 40%; animation: inkEq 1.6s ease-in-out infinite alternate; }
html.awa-ink .awh-eq i:nth-child(2) { animation-delay: .3s; } html.awa-ink .awh-eq i:nth-child(3) { animation-delay: .6s; } html.awa-ink .awh-eq i:nth-child(4) { animation-delay: .15s; }
@keyframes inkEq { from { height: 25%; } to { height: 95%; } }
@media (prefers-reduced-motion: reduce) { html.awa-ink .home-screen.awh * , html.awa-ink .awh-hero::before, html.awa-ink .awh-hero::after { animation: none !important; } }
html.awa-ink.awa-lite .home-screen.awh *, html.awa-ink.awa-lite .awh-hero::before { animation: none !important; }
html.awa-ink.awa-lite .awh-hero::before { filter: blur(30px); }


/* Keepers on the dark rebuild look. Text stays light. Music tile matches
   Liked songs. Holds do not select. Gallery tabs. */
html.awa-ink .games-panel-title,
html.awa-ink .cinema-lobby-title,
html.awa-ink .vo-close,
html.awa-ink .vo-overlay,
html.awa-ink .view-once-badge,
html.awa-ink .viewed-placeholder,
html.awa-ink .solo-invite-title,
html.awa-ink .solo-invite-sub,
html.awa-ink .solo-invite-card,
html.awa-ink .chat-topbar .topbar-name,
html.awa-ink .topbar-name {
  color: var(--ink-text) !important;
}
.whot-card-btn,
.whot-card-btn *,
.whot-card-face,
.topbar-name,
.topbar-identity,
#homeContactName {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.whot-card-btn.whot-card-dragging,
.whot-card-dragging { transition: none !important; }

.gallery-tabs { display: flex; gap: 8px; padding: 0 2px 12px; }
.gallery-tab { flex: 1; height: 36px; border: 1px solid var(--border, rgba(245,243,255,.16)); border-radius: 18px; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 14px; }
.gallery-tab small { font-weight: 600; opacity: .6; margin-left: 4px; }
.gallery-tab.is-on { background: var(--ink-accent, #f6b75b); color: #1a1208; border-color: transparent; }
.gallery-thumb { background: rgba(245,243,255,.06); }
.gallery-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }


/* A song is on: drop the decorative motion so chat and games keep the phone. */
html.awa-playing .home-screen.awh .awh-words,
html.awa-playing .home-screen.awh .awh-words .awh-letters i,
html.awa-playing .awh-hero::before,
html.awa-playing .awh-hero::after,
html.awa-playing .awh-eq i { animation: none !important; }
#privFold { padding: 4px 0 8px; }
#privFold .aws-row { background: transparent; }


/* Seeking a movie: stop decoration so the phone can buffer. */
html.awa-seeking .home-screen.awh *,
html.awa-seeking .awh-eq i { animation: none !important; }
.aw-install { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 50; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #1b1620; color: #f5f3ff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.aw-install b { display: block; font-size: 14px; }
.aw-install span { display: block; font-size: 12.5px; opacity: .7; }
.aw-install button { margin-left: auto; height: 36px; padding: 0 14px; border: 0; border-radius: 99px; background: #f6b75b; color: #1a1208; font-weight: 700; }
/* 28 Oct 2026: Whot table tidy. One ring on your turn (the old second,
   wider ring ran into the other player's photo and card count), a little
   more room under their seat, a real Last card button, and the shouts
   ("Pick two joor!") on the status line. */
#whotPanel .whot-table::after { inset: 0 !important; box-shadow: 0 0 22px rgba(255,211,106,.55) !important; }
#whotPanel .whot-board.my-turn .whot-table { box-shadow: 0 0 0 3px #ffd36a, 0 0 26px rgba(255,211,106,.45), 0 30px 60px -22px rgba(0,0,0,.85) !important; }
#whotPanel .whot-seat-opp { margin-bottom: .9rem !important; }
@media (max-width: 430px) { #whotPanel .whot-seat-opp { margin-bottom: .8rem !important; } }
@media (max-height: 760px) { #whotPanel .whot-seat-opp { margin-bottom: .65rem !important; } }
@media (max-height: 660px) { #whotPanel .whot-seat-opp { margin-bottom: .5rem !important; } }
#whotPanel .whot-last-btn { top: -54px; min-height: 44px; padding: 10px 22px; border-radius: 22px; font-size: 15px; background: rgba(26,11,25,.92); border: 1.5px solid rgba(255,211,106,.7); color: #ffd36a; }
#whotPanel .whot-last-btn.is-armed, #whotPanel .whot-last-btn[data-mode="call"] { background: #ffd36a; color: #2a0f1f; border-color: transparent; }
#whotPanel.has-last .whot-forfeit { visibility: hidden; }
.whot-callout.is-shout { transform: translate(-50%, -50%) !important; z-index: 335 !important; padding: 6px 16px !important; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.45); font: 900 clamp(.95rem, 4.4vw, 1.15rem)/1.1 "Funnel Display", system-ui, sans-serif !important; animation: whotShoutPop 1.6s ease both !important; }
@keyframes whotShoutPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 24% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .whot-callout.is-shout { animation: tauntTableCalm 1.6s ease both !important; } }
/* The called shape ("Computer needs ★ Star") sits on one line under the
   pile, with room kept for it, so it never runs into the status line. */
#whotPanel .whot-discard .whot-called-chip { flex-direction: row !important; flex-wrap: nowrap !important; width: max-content; gap: 5px !important; padding: .28rem .65rem !important; font-size: .74rem !important; }
#whotPanel .whot-discard .whot-called-chip small { font-size: .7rem !important; }
#whotPanel .whot-discard:has(.whot-called-chip:not([hidden])) { margin-bottom: 38px !important; }
#whotPanel .whot-mid:has(.whot-called-chip:not([hidden])) .whot-pile-label { visibility: hidden; }
/* During a Word Hunt round the music disc steps off the board (it sat on a
   corner tile). The music keeps playing. */
html:has(#wordsSession:not([hidden])) .st-disc { display: none !important; }

/* ===== v45 (28 Oct 2026) ===== */

/* No Copy / Look Up / Translate bubble anywhere you didn't mean it. The app
   behaves like an installed app: holding a tile, a card, a button or a label
   never selects text. Only places you type in (and the admin page) keep it.
   Chat messages keep Copy in their own hold menu. */
html, body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable=""], [contenteditable="true"], .adm, .adm * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img, svg, video { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* The typing cursor always uses the text colour of its box, so it can't
   blend into the box (the accent colour did in some looks). */
input, textarea, [contenteditable=""], [contenteditable="true"] { caret-color: currentColor; }
.chat-form textarea { caret-color: currentColor; }

/* Cinema: Continue watching row (a video left part-way, nobody in it). */
.cinema-continue {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 12px; padding: 8px 8px 8px 8px;
  border-radius: 16px; background: var(--surface-2, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(255,255,255,.1));
}
.cinema-continue[hidden] { display: none; }
.cinema-continue-thumb { flex: 0 0 auto; width: 84px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.35); }
.cinema-continue-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cinema-continue-thumb img:not([src]) { visibility: hidden; }
.cinema-continue-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cinema-continue-text small { font-size: .68rem; opacity: .7; }
.cinema-continue-text b { font-size: .86rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cinema-continue-text i { font-style: normal; font-size: .72rem; opacity: .7; }
.cinema-continue-go { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: .8rem; font-weight: 700; background: var(--accent); color: var(--on-accent, #1a1208); cursor: pointer; }
.cinema-continue-x { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .65; font-size: .9rem; cursor: pointer; }
@media (max-width: 340px) { .cinema-continue-thumb { width: 64px; } .cinema-continue-go { padding: 7px 10px; } }

/* Cinema: TikTok one-tap paste. */
.wt-tt { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; padding: 16px; border-radius: 18px; background: var(--surface-2, rgba(255,255,255,.06)); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.wt-tt-paste { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border: 0; border-radius: 14px; font: inherit; font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(90deg, #25f4ee 0%, #fe2c55 100%); text-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer; }
.wt-tt-paste svg { width: 20px; height: 20px; }
.wt-tt-paste.is-busy { opacity: .7; }
.wt-tt-steps { margin: 0; padding: 0 0 0 1.2rem; display: flex; flex-direction: column; gap: 4px; font-size: .84rem; line-height: 1.35; opacity: .85; }

/* Awa Movies: saving a movie to this phone. */
.cinema-library-download .dl-pct { font-variant-numeric: tabular-nums; }
.cinema-library-download .dl-stop { margin-left: 4px; opacity: .8; font-size: .7rem; }
.cinema-library-download.is-downloading { cursor: pointer; }
.cinema-library-download.is-sure { background: #b3261e; padding: 0 .55rem; }
.cinema-saved-tag { display: none; position: absolute; left: .4rem; bottom: 2.1rem; z-index: 2; padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); pointer-events: none; }
.cinema-library-item.is-saved-here .cinema-saved-tag { display: block; }

/* Cinema: several Continue rows, the switch request and its waiting bar. */
.cinema-continue-list { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.cinema-continue-list[hidden] { display: none; }
.cinema-continue-list .cinema-continue { margin: 0; }
.watch-card[data-pending="1"] #watchReady > *:not(#watchShareControls) { display: none !important; }
.cinema-switch-sheet { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.45); }
.cinema-switch-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 22px; background: var(--surface, #1d2438); color: var(--ink, #fff); box-shadow: 0 20px 50px rgba(0,0,0,.45); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.cinema-switch-card b { font-size: 1.02rem; }
.cinema-switch-card p { margin: 0; font-size: .88rem; line-height: 1.4; opacity: .8; }
.cinema-switch-actions { display: flex; gap: 10px; margin-top: 6px; }
.cinema-switch-actions button { flex: 1; min-height: 46px; border-radius: 14px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.cinema-switch-no { background: var(--surface-2, rgba(255,255,255,.08)); color: inherit; }
.cinema-switch-yes { background: var(--accent); color: var(--on-accent, #1a1208); }
.cinema-switch-wait { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 8999; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(20,16,24,.92); color: #fff; font-size: .84rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.cinema-switch-wait[hidden] { display: none; }
.cinema-switch-wait-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: csw-pulse 1.2s ease-in-out infinite; }
.cinema-switch-wait button { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
@keyframes csw-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cinema-switch-wait-dot { animation: none; } }

/* Game switch in the games header (28 Oct, v60): "Whot v" jumps to Word
   Hunt or HiLo with the same person. No extra row. */
.game-switch-wrap { position: relative; flex: 0 1 auto; min-width: 0; margin-right: auto; }
.game-switch-wrap[hidden] { display: none !important; }
.games-overlay.has-game-switch .games-panel-header .over-chat-btn { margin-right: 6px !important; }
.game-switch {
  position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 36px; padding: 0 11px 0 13px; border-radius: 18px; box-sizing: border-box;
  border: 1px solid rgba(245,243,255,.16); background: rgba(0,0,0,.35); color: #f5f3ff;
  font: 800 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; letter-spacing: -.01em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.game-switch:active { transform: scale(.95); }
.game-switch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.game-switch-chev { flex: 0 0 auto; opacity: .7; transition: transform .18s ease; }
.game-switch-wrap.is-open .game-switch-chev { transform: rotate(180deg); }
.game-switch-dot {
  position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: #ffd36a; box-shadow: 0 0 0 2px #1c2338;
}
.game-switch-dot[hidden] { display: none; }
.game-switch-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 196px;
  padding: 6px; border-radius: 18px; background: #241731; border: 1px solid rgba(245,243,255,.12);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
  transform-origin: 24px 0; animation: gswIn .16s ease-out;
}
.game-switch-menu[hidden] { display: none; }
@keyframes gswIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .game-switch-menu { animation: none; } }
.gsw-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 12px;
  border: 0; border-radius: 12px; background: transparent; color: #f5f3ff; text-align: left;
  font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gsw-item:active, .gsw-item:hover { background: rgba(245,243,255,.07); }
.gsw-item.is-here { color: #ffd36a; }
.gsw-name { flex: 1 1 auto; }
.gsw-turn {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 10px; background: #ffd36a; color: #2a0f1f;
  font: 800 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.gsw-tick { flex: 0 0 auto; }
/* With the switch up, Chat shows just its icon (its count badge stays) so
   the switch and the score both fit without squeezing the game name. */
.games-overlay.has-game-switch .games-panel-header .over-chat-btn { padding: 0 !important; width: 36px !important; justify-content: center; margin-left: 2px !important; }
.games-overlay.has-game-switch .games-panel-header .over-chat-btn .oc-label { display: none; }
.games-overlay.has-game-switch .games-panel-header-spacer { display: none; }
.game-switch-wrap { flex: 0 0 auto; }
@media (max-width: 430px) {
  .games-overlay.has-game-switch .game-score { gap: 6px; padding: 4px 9px 4px 4px; }
  .games-overlay.has-game-switch .gs-av { width: 26px; height: 26px; font-size: 12px; }
  .games-overlay.has-game-switch .gs-n { font-size: 21px; }
}
@media (max-width: 359px) {
  .game-switch { padding: 0 9px 0 11px; font-size: 13.5px; gap: 5px; }
  .games-overlay.has-game-switch .game-score { gap: 4px; padding: 3px 7px 3px 3px; }
  .games-overlay.has-game-switch .gs-av { width: 22px; height: 22px; font-size: 11px; }
  .games-overlay.has-game-switch .gs-n { font-size: 18px; }
  .games-overlay.has-game-switch .gs-dash { font-size: 12px; }
}

/* The Whot rules sheet lives on the page itself (v60), above the end card. */
body > .whot-rules-sheet { position: fixed; inset: 0; z-index: 2147482000; transform: translateZ(60px); -webkit-transform: translateZ(60px); }

/* v62: the end card starts under the games header, so Back, Chat and the
   game switch stay in reach (Safari draws 3D layers by order, so the
   header gets its own lift too). */
.whot-end { top: var(--end-top, 0px); }
#gamesOverlay .games-panel-header { position: relative; z-index: 510; transform: translateZ(2px); }


/* =====================================================================
   v63 (28 Oct 2026): Ink is the default look, a step lighter and lit
   like Awa Muzik (Dale: the old Ink was too dark). Amber is the brand
   colour. Cinema tiles carry their own colours. Chat: no watermark, my
   bubbles amber (shaded by where they sit on screen, chat-tint.js),
   theirs warm charcoal. Plum and sunset stays as the admin fallback.
   ===================================================================== */
.chat-log::before { content: none !important; display: none !important; }

html.awa-ink {
  --ink-bg: #182036; --ink-2: #232b42; --ink-3: #2c3550;
  --ink-line: rgba(245,243,255,.09); --ink-text: #f5f3ff; --ink-dim: rgba(245,243,255,.72);
  --ink-accent: #ffb42e; --ink-glow: rgba(255,180,46,.24);
}
html.awa-ink .awh-hero, html.awa-ink .awh-card, html.awa-ink .awh-sound, html.awa-ink .awh-panel {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 30px -20px rgba(0,0,0,.85) !important;
}
html.awa-ink .awh-hero { background: var(--ink-2) !important; }
html.awa-ink .awh-hero::after { background: radial-gradient(closest-side, rgba(255,180,46,.3), transparent) !important; }
html.awa-ink .awh-nav { background: rgba(27,34,54,.97) !important; }
/* Word Hunt letters take turns: amber, black, amber, black. */
html.awa-ink .awh-letters i { background: var(--ink-accent) !important; color: #1a1205 !important; box-shadow: none !important; }
html.awa-ink .awh-letters i:nth-child(even) { background: #121828 !important; color: var(--ink-accent) !important; box-shadow: inset 0 0 0 1.5px var(--ink-accent) !important; }

/* Cinema in its brand colours, on Home and in the Cinema lobby. */
html.awa-ink .awh-svc[data-cinema-room="youtube"] { background: #c4001f !important; color: #fff !important; border-color: transparent !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important; }
html.awa-ink .awh-svc[data-cinema-room="youtube"] svg rect { fill: #fff; }
html.awa-ink .awh-svc[data-cinema-room="youtube"] svg path { fill: #c4001f; }
html.awa-ink .awh-svc[data-cinema-room="tiktok"] { background: radial-gradient(70% 80% at 0% 0%, rgba(37,244,238,.35), transparent 70%), radial-gradient(70% 80% at 100% 100%, rgba(254,44,85,.4), transparent 70%), #0e0e11 !important; color: #fff !important; border-color: transparent !important; }
html.awa-ink .awh-svc[data-cinema-room="movies"] { background: var(--ink-accent) !important; color: #1a1205 !important; border-color: transparent !important; box-shadow: none !important; }
html.awa-ink .awh-svc[data-cinema-room="movies"] .awh-awa-ic { stroke: #1a1205; }
html.awa-ink #watchPanel .tile-youtube { background: radial-gradient(90% 80% at 100% 100%, rgba(255,110,110,.55), transparent 65%), #c4001f; border-color: rgba(255,255,255,.18); }
html.awa-ink #watchPanel .tile-youtube .brand-yt rect { fill: #fff; }
html.awa-ink #watchPanel .tile-youtube .brand-yt path { fill: #c4001f; }
html.awa-ink #watchPanel .tile-youtube .cinema-tile-text small { opacity: .9; }
html.awa-ink #watchPanel .tile-tiktok { background: radial-gradient(70% 70% at 0% 0%, rgba(37,244,238,.32), transparent 70%), radial-gradient(70% 70% at 100% 100%, rgba(254,44,85,.38), transparent 70%), #0e0e11; border-color: rgba(255,255,255,.14); }
html.awa-ink #watchPanel .tile-library { background: radial-gradient(60% 90% at 85% 40%, #ffe2a0, #ffb42e 55%, #d98a12 100%); border-color: rgba(255,255,255,.25); }
html.awa-ink #watchPanel .tile-library .cinema-tile-text b, html.awa-ink #watchPanel .tile-library .cinema-tile-text small { color: #1a1205; }

/* Chat */
html.awa-ink .chat-log { background: var(--ink-bg) !important; }
html.awa-ink .msg.theirs { background: #232b42 !important; border-color: transparent !important; color: #f5f3ff !important; box-shadow: none !important; }
html.awa-ink .msg.mine {
  --tint: 0.5;
  background: #ffbb45 !important;
  background: color-mix(in srgb, #f08f26 calc(var(--tint) * 100%), #ffcf6b) !important;
  border-color: transparent !important; color: #1a1205 !important; box-shadow: none !important;
}
html.awa-ink .msg.mine .msg-meta, html.awa-ink .msg.mine .msg-time, html.awa-ink .msg.mine .msg-ticks { color: rgba(26,18,5,.62) !important; }
html.awa-ink .msg.mine .msg-ticks.msg-ticks-seen { color: #9a2a00 !important; }
html.awa-ink .msg.mine a { color: #1a1205; text-decoration: underline; }
html.awa-ink .msg.mine .voice-track-fill, html.awa-ink .msg.mine .voice-track-knob { background: #1a1205 !important; }
html.awa-ink .system-event { color: rgba(245,243,255,.72) !important; }
html.awa-ink .chat-send-btn { background: var(--ink-accent) !important; color: #1a1205 !important; }
html.awa-ink .chat-topbar { background: #1b2236 !important; border-bottom-color: rgba(245,243,255,.07) !important; box-shadow: none !important; }
html.awa-ink .chat-topbar .topbar-name { font-family: "Funnel Display", system-ui, sans-serif; font-weight: 800; }
html.awa-ink .chat-form { background: #1b2236 !important; border-top-color: rgba(245,243,255,.07) !important; }

/* =====================================================================
   v66 (29 Oct 2026): Home is the Welcome page, signed in.
   Same ground (#182036), same panel (#1f2639 with a thin amber edge),
   amber as the one brand colour. No plum or purple anywhere on Home.
   The greeting card is lit with warm light so it never reads as dark.
   ===================================================================== */
html.awa-ink { --ink-bg: #182036; --ink-2: #1f2639; --ink-3: #232b42; --ink-edge: rgba(255,180,46,.18); }
html.awa-ink.room-active body, html.awa-ink .room-shell, html.awa-ink .home-screen.awh { background: #182036 !important; }
html.awa-ink .home-screen.awh .awh-card,
html.awa-ink .home-screen.awh .awh-whot,
html.awa-ink .home-screen.awh .awh-words,
html.awa-ink .home-screen.awh .awh-panel,
html.awa-ink .home-screen.awh .awh-sound,
html.awa-ink .home-screen.awh .awt-plan,
html.awa-ink .home-screen.awh .awt-night:not(.is-on) {
  border: 1px solid var(--ink-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 30px -22px rgba(0,0,0,.9) !important;
}
/* Greeting card: warm light from the top right, like a lamp on. */
html.awa-ink .home-screen.awh .awh-hero {
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,180,46,.30), transparent 58%), radial-gradient(80% 70% at 0% 100%, rgba(255,140,40,.12), transparent 60%), #232b42 !important;
  border: 1px solid rgba(255,180,46,.26) !important;
}
html.awa-ink .home-screen.awh .awh-hero::before { opacity: .22 !important; filter: blur(46px) saturate(.9) sepia(.35) !important; }
html.awa-ink .home-screen.awh .awh-hero::after { background: radial-gradient(closest-side, rgba(255,180,46,.32), transparent) !important; }
html.awa-ink .home-screen.awh .awh-greet { color: #f5f3ff !important; }
html.awa-ink .home-screen.awh .awh-hero-sub { color: rgba(245,243,255,.78) !important; }
html.awa-ink .home-screen.awh .awh-hero .home-contact-row.awh-chatrow.awh-in-hero {
  background: rgba(24,32,54,.72) !important; border: 1px solid rgba(245,243,255,.1) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.awa-ink .home-screen.awh .awh-chatrow-go { border-color: rgba(255,180,46,.45) !important; color: #ffb42e !important; }
html.awa-ink .home-screen.awh .awh-chatrow-av .avatar-slot { box-shadow: 0 0 0 2px #182036, 0 0 0 4px #ffb42e !important; }
/* Game cards: the colour comes from what is in them, on the ink panel. */
html.awa-ink .home-screen.awh .awh-whot:not(.awh-words) { background: radial-gradient(110% 90% at 20% 0%, rgba(179,18,43,.30), transparent 58%), #1f2639 !important; }
html.awa-ink .home-screen.awh .awh-words { background: radial-gradient(110% 90% at 20% 0%, rgba(255,180,46,.24), transparent 58%), #1f2639 !important; }
html.awa-ink .home-screen.awh .awh-panel { background: #1f2639 !important; }
html.awa-ink .home-screen.awh .awh-moments { background: #1f2639 !important; }
/* Awa Muzik: ink with an amber glow and amber bars. */
html.awa-ink .home-screen.awh .awh-sound.awh-t-sound,
html.awa-ink .awh-sound.awh-t-sound {
  background: radial-gradient(90% 160% at 0% 50%, rgba(255,180,46,.24), transparent 62%), #1f2639 !important;
  border: 1px solid rgba(255,180,46,.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 34px -12px rgba(255,180,46,.55) !important;
  color: #f5f3ff !important;
}
html.awa-ink .awh-sound.awh-t-sound .awh-sound-copy small { color: rgba(245,243,255,.72) !important; }
html.awa-ink .awh-sound.awh-t-sound .awh-sound-go { background: #ffb42e !important; color: #1a1205 !important; }
html.awa-ink .awh-eq i { background: #ffb42e !important; }
/* Plan game time and game night cards on Home. */
html.awa-ink .awt-plan { background: #1f2639 !important; color: #f5f3ff; }
html.awa-ink .awt-plan-ic, html.awa-ink .awt-plan .awt-ic { background: rgba(255,180,46,.14) !important; color: #ffb42e !important; }
/* Top bar and bottom bar. */
html.awa-ink .awh-people-pill, html.awa-ink .awh-me-btn { background: #1f2639 !important; border-color: rgba(245,243,255,.14) !important; }
html.awa-ink .awh-nav { background: rgba(20,17,23,.97) !important; border-top: 1px solid rgba(245,243,255,.08) !important; border-color: rgba(245,243,255,.08) !important; }
html.awa-ink .awh-nav-btn { color: rgba(245,243,255,.6) !important; }
html.awa-ink .awh-nav-btn.is-on { color: #ffb42e !important; }
/* Notifications reminder: an ink card with an amber edge, not a yellow block. */
.push-ask { background: #1f2639 !important; color: #f5f3ff !important; border: 1px solid rgba(255,180,46,.32) !important; box-shadow: inset 4px 0 0 #ffb42e, 0 12px 26px -18px rgba(0,0,0,.9) !important; padding-left: 18px !important; }
.push-ask small { color: rgba(245,243,255,.74) !important; opacity: 1 !important; }
.push-ask-dismiss { background: rgba(245,243,255,.1) !important; color: #f5f3ff !important; }

/* ---- v66 stakes: money chips, the money tab, ink and amber ---- */
.bet-card { background: #182036 !important; box-shadow: inset 0 1px 0 rgba(255,180,46,.25); }
.bet-money { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 10px; }
.bet-money button { height: 54px; border-radius: 16px; border: 0; background: #ffb42e; color: #1a1205; font: 800 19px "Funnel Display", system-ui, sans-serif; letter-spacing: -.02em; cursor: pointer; }
.bet-money button:active { transform: scale(.97); }
.bet-presets button { border-color: rgba(255,180,46,.3) !important; background: #1f2639 !important; }
.bet-strip.is-live { background: rgba(255,180,46,.12) !important; box-shadow: inset 0 0 0 1px rgba(255,180,46,.55) !important; }
.bet-strip .bet-yes { background: #ffb42e !important; color: #1a1205 !important; }
.owes-total { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; margin: 0 0 10px; border-radius: 16px; background: #1f2639; box-shadow: inset 0 0 0 1px rgba(255,180,46,.35); }
.owes-total > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.owes-total small { font-size: 12px; color: rgba(245,243,255,.65); font-weight: 600; }
.owes-total b { font: 800 18px "Funnel Display", system-ui, sans-serif; color: #ffb42e; letter-spacing: -.02em; }
.owes-total.is-mine b { color: #f5f3ff; }
.owes-paid { background: #ffb42e !important; color: #1a1205 !important; }
.whot-end-owed { background: rgba(255,180,46,.14) !important; box-shadow: inset 0 0 0 1px rgba(255,180,46,.4); }
.whot-end-tab { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: #ffb42e; }

/* ---- v67 (29 Oct 2026): the stake chip in the game header ----
   The stake strip above the table is gone (it took the table's room). */
#betStrip { display: none !important; }
.bet-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 32px; max-width: 120px; padding: 0 10px 0 4px; margin-right: 6px; border-radius: 16px; border: 1px solid rgba(255,180,46,.45); background: #1f2639; color: #f5f3ff; font: 800 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.bet-chip[hidden] { display: none !important; }
.bet-chip span { overflow: hidden; text-overflow: ellipsis; }
.bet-coin { width: 24px; height: 24px; flex: none; display: block; }
.bet-chip.is-up span { color: #ffb42e; }
.bet-chip.is-down span { color: #ff9d8a; }
.bet-chip.is-live { background: rgba(255,180,46,.14); }
.bet-chip.is-ask { background: #ffb42e; color: #1a1205; border-color: #ffb42e; animation: betAsk 1.4s ease-in-out infinite; }
@keyframes betAsk { 50% { box-shadow: 0 0 0 5px rgba(255,180,46,.25); } }
.bet-now { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 6px 0 12px; border-radius: 16px; background: #1f2639; box-shadow: inset 0 0 0 1px rgba(255,180,46,.3); }
.bet-now .bet-coin { width: 40px; height: 40px; }
.bet-now span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bet-now b { font: 800 19px "Funnel Display", system-ui, sans-serif; letter-spacing: -.02em; }
.bet-now small { font-size: 14px; color: rgba(245,243,255,.75); }
.bet-acts { display: flex; gap: 10px; }
.bet-acts button { flex: 1; min-height: 52px; border-radius: 16px; border: 0; font: 800 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.bet-acts .bet-no { background: rgba(245,243,255,.1); color: #f5f3ff; }
.bet-acts .bet-yes { background: #ffb42e; color: #1a1205; }
.whot-end-owed { font-weight: 700; }
@media (max-width: 360px) { .bet-chip { max-width: 92px; padding-right: 8px; font-size: 12px; } }
@media (max-width: 340px) { .bet-chip { padding: 0 4px; } .bet-chip span { display: none; } }
@media (prefers-reduced-motion: reduce) { .bet-chip.is-ask { animation: none; } }

/* =====================================================================
   v68 (29 Oct 2026): amber on a diet. Dale: the yellow was too much for
   the eyes (light-sensitive people too). Rule: at most one solid amber
   thing per screen (the main button). Everything else carries amber as
   a thin edge, a dot or the text colour. Big fills use a deeper amber.
   ===================================================================== */
html.awa-ink { --amber: #ffb42e; --amber-soft: rgba(255,180,46,.12); --amber-edge: rgba(255,180,46,.5); }
/* Greeting card: a candle, not a lamp. */
html.awa-ink .home-screen.awh .awh-hero { background: radial-gradient(110% 80% at 100% 0%, rgba(255,180,46,.12), transparent 60%), #232b42 !important; border-color: rgba(255,180,46,.16) !important; }
html.awa-ink .home-screen.awh .awh-hero::after { background: radial-gradient(closest-side, rgba(255,180,46,.12), transparent) !important; }
html.awa-ink .home-screen.awh .awh-hero::before { opacity: .14 !important; }
/* Your turn: a dark pill with amber words, an amber edge and a live dot. */
html.awa-ink .awh-turn-btn,
html.awa-ink .home-screen.awh .awh-cta.is-turn,
html.awa-ink .home-screen.awh .awh-cta {
  background: rgba(24,32,54,.86) !important; color: #ffb42e !important;
  border: 1px solid var(--amber-edge) !important; box-shadow: none !important;
}
html.awa-ink .awh-turn-btn::before, html.awa-ink .home-screen.awh .awh-cta.is-turn::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #ffb42e; vertical-align: middle;
  animation: amberDot 1.6s ease-in-out infinite;
}
@keyframes amberDot { 50% { opacity: .35; } }
/* Game cards: barely-there colour from what is in them. */
html.awa-ink .home-screen.awh .awh-whot:not(.awh-words) { background: radial-gradient(110% 90% at 20% 0%, rgba(179,18,43,.16), transparent 58%), #1f2639 !important; }
html.awa-ink .home-screen.awh .awh-words { background: #1f2639 !important; }
html.awa-ink .home-screen.awh .awh-card, html.awa-ink .home-screen.awh .awh-whot, html.awa-ink .home-screen.awh .awh-words, html.awa-ink .home-screen.awh .awh-panel, html.awa-ink .home-screen.awh .awh-sound { border-color: rgba(245,243,255,.08) !important; }
/* Word Hunt tiles: amber letters, not amber blocks. Two tiles keep a soft fill. */
html.awa-ink .awh-letters i { background: #182036 !important; color: #ffb42e !important; box-shadow: inset 0 0 0 1.5px rgba(255,180,46,.55) !important; }
html.awa-ink .awh-letters i:nth-child(even) { background: #182036 !important; color: #f5f3ff !important; box-shadow: inset 0 0 0 1.5px rgba(245,243,255,.25) !important; }
html.awa-ink .awh-letters i:nth-child(1), html.awa-ink .awh-letters i:nth-child(5) { background: rgba(255,180,46,.18) !important; }
html.awa-ink .awh-duo .awh-letters i { animation: none !important; }
/* Awa Movies tile: dark with an amber mark (YouTube and TikTok keep their brand colours). */
html.awa-ink .awh-svc[data-cinema-room="movies"] { background: #182036 !important; color: #ffb42e !important; box-shadow: inset 0 0 0 1.5px rgba(255,180,46,.5) !important; }
html.awa-ink .awh-svc[data-cinema-room="movies"] .awh-awa-ic { stroke: #ffb42e !important; }
html.awa-ink #watchPanel .tile-library { background: #182036 !important; border-color: rgba(255,180,46,.5) !important; }
html.awa-ink #watchPanel .tile-library .cinema-tile-text b, html.awa-ink #watchPanel .tile-library .cinema-tile-text small { color: #ffb42e !important; }
/* Awa Muzik: a faint glow. */
html.awa-ink .home-screen.awh .awh-sound.awh-t-sound, html.awa-ink .awh-sound.awh-t-sound { background: #1f2639 !important; border-color: rgba(255,180,46,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; }
html.awa-ink .awh-sound.awh-t-sound .awh-sound-go { background: rgba(255,180,46,.14) !important; color: #ffb42e !important; }
/* The Whot table on your turn: a thin amber ring, not a floodlight. */
#whotPanel .whot-board.my-turn .whot-table { box-shadow: 0 0 0 2px rgba(255,180,46,.7), 0 0 18px rgba(255,180,46,.18), 0 30px 60px -22px rgba(0,0,0,.85) !important; }
#whotPanel .whot-board.my-turn .whot-table::after { animation: none !important; }
#whotPanel .whot-board.my-turn .whot-status { background: rgba(24,32,54,.85) !important; color: #ffb42e !important; border: 1px solid rgba(255,180,46,.55) !important; box-shadow: none !important; }
#whotPanel .whot-status { background: rgba(24,32,54,.7) !important; color: rgba(245,243,255,.85) !important; }
/* Chat: my bubbles a calmer amber. */
html.awa-ink .msg.mine { background: #e9a540 !important; background: color-mix(in srgb, #d98a2b calc(var(--tint) * 100%), #f0c169) !important; }

/* ---- The score pill carries the money (second line) ---- */
.game-score.has-money { flex-wrap: wrap; justify-content: center; row-gap: 0; border-radius: 16px; padding-top: 3px !important; padding-bottom: 3px !important; margin-left: auto; }
.gs-money { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: rgba(245,243,255,.75); white-space: nowrap; }
.gs-money .bet-coin { width: 13px; height: 13px; }
.gs-money.is-up span { color: #ffb42e; }
.gs-money.is-down span { color: #ff9d8a; }
.gs-money.is-off span { color: rgba(245,243,255,.55); }
.gs-money.is-ask span { color: #ffb42e; animation: amberDot 1.2s ease-in-out infinite; }
.games-panel-header .game-score { margin-left: auto; }
.score-menu-pop { position: fixed; z-index: 400; display: flex; flex-direction: column; min-width: 210px; padding: 6px; border-radius: 16px; background: #1f2639; box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,180,46,.25); }
.score-menu-pop button { min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: #f5f3ff; text-align: left; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.score-menu-pop button:active { background: rgba(245,243,255,.08); }

/* ---- Stake sheet: start from where you are ---- */
.bet-carry { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(245,243,255,.08); }
.bet-carry-t { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: rgba(245,243,255,.7); }
.bet-carry-who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bet-carry-who button { min-height: 42px; border-radius: 12px; border: 1px solid rgba(245,243,255,.14); background: #1f2639; color: #f5f3ff; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.bet-carry-who button[aria-pressed="true"] { border-color: #ffb42e; color: #ffb42e; }
.bet-carry-amt { width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,180,46,.35); background: #1f2639; color: #f5f3ff; font: 600 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.bet-carry-amt[hidden] { display: none; }
.bet-money button { background: #1f2639 !important; color: #ffb42e !important; box-shadow: inset 0 0 0 1.5px rgba(255,180,46,.55); }
@media (prefers-reduced-motion: reduce) { .gs-money.is-ask span, html.awa-ink .awh-turn-btn::before, html.awa-ink .home-screen.awh .awh-cta.is-turn::before { animation: none; } }

/* =====================================================================
   v71 (3 Nov 2026): the "B2" look. Dale chose it from three mockups.
   One look only: navy ground, and colour belongs to the games.
   Ground #182036, cards #1f2639, raised #232b42, chips #2c3550,
   text #f5f3ff, amber #ffb42e (Chat and your own things),
   Whot #a81d34, Word Hunt #127552, HiLo #2a55b8, Awa Muzik #5b3fc4.
   Headings on Home and game names: "Unbounded". Body: the phone's font.
   The old Ink colours were swapped for these across the room CSS.
   ===================================================================== */
html.awa-ink {
  --ink-bg: #182036; --ink-2: #1f2639; --ink-3: #2c3550;
  --ink-line: rgba(245,243,255,.08); --ink-text: #f5f3ff; --ink-dim: rgba(245,243,255,.72);
  --ink-accent: #ffb42e; --ink-glow: rgba(120,140,255,.14);
  --b2-whot: #a81d34; --b2-words: #127552; --b2-hilo: #2a55b8; --b2-muzik: #5b3fc4;
  --b2-head: "Unbounded", "Funnel Display", system-ui, sans-serif;
}

/* ---- The person card: you, greeting, streak, your person, Chat ---- */
html.awa-ink .home-screen.awh .awh-hero {
  height: auto !important; display: flex; flex-direction: column; gap: 14px;
  padding: 18px !important; border-radius: 26px !important; overflow: visible;
  background: #1f2639 !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
html.awa-ink .home-screen.awh .awh-hero::before,
html.awa-ink .home-screen.awh .awh-hero::after,
html.awa-ink .home-screen.awh .awh-hero .awh-sun,
html.awa-ink .home-screen.awh .awh-hero .awh-hero-fade,
html.awa-ink .home-screen.awh .awh-hero .awh-hero-sub { display: none !important; }
html.awa-ink .home-screen.awh .awh-hero-copy { position: static !important; transform: none !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 !important; }
html.awa-ink .home-screen.awh .awh-greet { flex-basis: 100%; margin: 0 !important; font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif !important; letter-spacing: 0 !important; color: rgba(245,243,255,.72) !important; }
html.awa-ink .home-screen.awh .awh-greet .awa-greeting-name { color: inherit !important; }
html.awa-ink .home-screen.awh .awt-streak { margin: 0 !important; padding: 6px 12px !important; border-radius: 999px !important; background: #2c3550 !important; border: 0 !important; color: #f5f3ff !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; }
html.awa-ink .home-screen.awh .awt-streak.is-risk { background: rgba(255,180,46,.16) !important; color: #ffd27a !important; }

html.awa-ink .home-screen.awh .awh-hero .home-contact-row.awh-chatrow.awh-in-hero {
  position: relative !important; left: auto; right: auto; bottom: auto !important;
  display: grid !important; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px;
  width: 100% !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; text-align: left;
}
html.awa-ink .home-screen.awh .awh-in-hero .awh-chatrow-av,
html.awa-ink .home-screen.awh .awh-in-hero .awh-chatrow-av .avatar-slot { width: 72px !important; height: 72px !important; flex-basis: 72px; border-radius: 24px !important; }
html.awa-ink .home-screen.awh .awh-in-hero .awh-chatrow-av .avatar-slot { overflow: hidden; box-shadow: none !important; background: #2c3550; }
html.awa-ink .home-screen.awh .awh-in-hero .awh-chatrow-av .avatar-slot img { border-radius: 24px; }
html.awa-ink .home-screen.awh .awh-in-hero .awh-chatrow-av .dot { width: 16px; height: 16px; right: -3px; bottom: -3px; border: 3px solid #1f2639 !important; }
html.awa-ink .home-screen.awh .awh-chatrow .home-contact-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html.awa-ink .home-screen.awh .awh-chatrow .home-contact-name { font-family: var(--b2-head) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.15; color: #f5f3ff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.awa-ink .home-screen.awh .awh-chatrow .home-contact-preview { font-size: 14px !important; color: rgba(245,243,255,.75) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.awa-ink .home-screen.awh .awh-chatrow .chat-badge { position: absolute; left: 56px; top: -6px; z-index: 2; }
html.awa-ink .home-screen.awh .awh-hero .awh-chatrow-go,
html.awa-ink .home-screen.awh .awh-in-hero .awh-chatrow-go {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100% !important; height: 52px !important; flex-basis: auto; border-radius: 999px !important;
  background: #ffb42e !important; color: #1a1205 !important; border: 0 !important; box-shadow: none !important;
}
html.awa-ink .home-screen.awh .awh-chatrow-go svg { width: 18px; height: 18px; }
html.awa-ink .home-screen.awh .awh-go-word { font: 700 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }

/* ---- The one loud thing: your turn, in its game's colour ---- */
.awh-turn-card[hidden] { display: none !important; }
html.awa-ink .home-screen.awh .awh-turn-card {
  display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; flex: 0 0 auto;
  padding: 16px 14px 16px 18px; border: 0; border-radius: 24px; cursor: pointer; text-align: left;
  background: var(--b2-whot); color: #fff; font: inherit;
  box-shadow: 0 14px 30px -16px rgba(168,29,52,.8);
  animation: b2In .35s ease-out both;
}
html.awa-ink .home-screen.awh .awh-turn-card[data-game="words"] { background: var(--b2-words); box-shadow: 0 14px 30px -16px rgba(18,117,82,.8); }
html.awa-ink .home-screen.awh .awh-turn-card:active { transform: scale(.98); }
.awh-tc-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.awh-tc-copy b { font: 700 17px/1.2 var(--b2-head); }
.awh-tc-copy small { font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.88); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awh-tc-go { flex: 0 0 auto; display: flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; background: #fff; color: #8f1429; font-weight: 800; font-size: 15px; }
.awh-turn-card[data-game="words"] .awh-tc-go { color: #0c5a3c; }
@keyframes b2In { from { opacity: 0; transform: translateY(6px); } }

/* ---- Games: three tiles, each owns its colour ---- */
html.awa-ink .home-screen.awh .awh-sec-title { margin: 6px 4px -2px; font: 700 16px/1.2 var(--b2-head); color: #f5f3ff; }
html.awa-ink .home-screen.awh .awh-duo.awh-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html.awa-ink .home-screen.awh .awh-trio .awh-card {
  position: relative; height: 138px !important; padding: 0; overflow: hidden; border: 0 !important; border-radius: 22px !important;
  color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important; cursor: pointer;
}
html.awa-ink .home-screen.awh .awh-trio .awh-whot:not(.awh-words) { background: var(--b2-whot) !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-words { background: var(--b2-words) !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-hilo-q { background: var(--b2-hilo) !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-whot-copy { position: absolute; left: 12px !important; right: 10px !important; top: auto !important; bottom: 12px !important; transform: none !important; display: flex; flex-direction: column; gap: 3px; text-align: left; }
html.awa-ink .home-screen.awh .awh-trio .awh-whot-copy b { font: 700 14px/1.15 var(--b2-head) !important; color: #fff !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-whot-copy small { font-size: 11.5px !important; line-height: 1.3; color: rgba(255,255,255,.86) !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.awa-ink .home-screen.awh .awh-trio .awh-cta { display: none !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-fan { transform: scale(.34) !important; transform-origin: left top; top: 12px !important; left: 12px !important; right: auto !important; animation: none !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-letters { position: absolute; left: 12px !important; right: auto !important; top: 12px !important; grid-template-columns: repeat(2, 19px) !important; gap: 3px !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-letters i { height: 19px !important; line-height: 19px !important; font-size: 10.5px !important; border-radius: 5px !important; animation: none !important; background: #fff !important; color: #0c5a3c !important; box-shadow: none !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-letters i:nth-child(2),
html.awa-ink .home-screen.awh .awh-trio .awh-letters i:nth-child(3) { background: #0c5a3c !important; color: #fff !important; }
html.awa-ink .home-screen.awh .awh-trio .awh-letters i:nth-child(n+5) { display: none !important; }
.awh-hilo-art { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 3px; font: 700 22px/1 var(--b2-head); color: #fff; }
/* Your turn on a tile: a white dot, the live card above says the rest. */
html.awa-ink .home-screen.awh .awh-trio .awh-card.is-attention::after { content: ""; position: absolute; top: 12px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); animation: b2Dot 1.6s ease-in-out infinite; }
@keyframes b2Dot { 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }

/* ---- Awa Muzik: its own purple, the one card with personality ---- */
html.awa-ink .home-screen.awh .awh-sound.awh-t-sound,
html.awa-ink .awh-sound.awh-t-sound { height: 72px; background: var(--b2-muzik) !important; border: 0 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 30px -18px rgba(91,63,196,.9) !important; }
html.awa-ink .awh-sound.awh-t-sound .awh-sound-copy b { color: #fff !important; }
html.awa-ink .awh-sound.awh-t-sound .awh-sound-copy small { color: #e4ddff !important; }
html.awa-ink .awh-sound.awh-t-sound .awh-eq { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; background: conic-gradient(#ffb42e, #ff6fae, #8ad8ff, #ffb42e); }
html.awa-ink .awh-sound.awh-t-sound .awh-eq i { background: #fff !important; width: 3px; }
html.awa-ink .awh-sound.awh-t-sound .awh-sound-go { background: #fff !important; color: #3f2a99 !important; }

/* ---- Watch together: one slim row ---- */
html.awa-ink .home-screen.awh #awaWatchQuick { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; height: auto !important; padding: 10px 10px 10px 16px !important; border-radius: 22px !important; background: #1f2639 !important; border: 0 !important; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-panel-head { flex: 1; min-width: 0; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-panel-head b { font: 700 14px/1.2 var(--b2-head) !important; color: #f5f3ff; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-panel-head small { display: none !important; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-services { display: flex !important; gap: 8px; margin: 0 !important; width: auto !important; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-svc { width: 52px !important; height: 44px !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 0 !important; border-radius: 14px !important; display: flex; align-items: center; justify-content: center; flex: 0 0 52px; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-svc > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-svc svg { width: 24px !important; height: 24px !important; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-svc[data-cinema-room="youtube"] svg { width: 28px !important; height: 20px !important; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-tt { display: flex; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-svc[data-cinema-room="movies"] { background: #ffb42e !important; color: #1a1205 !important; box-shadow: none !important; }
html.awa-ink .home-screen.awh #awaWatchQuick .awh-svc[data-cinema-room="movies"] .awh-awa-ic { stroke: #1a1205 !important; }

/* ---- Game header: back, chat, a labelled switch, the score. Nothing on top of anything. ---- */
html.awa-ink .games-panel-header .game-switch-wrap { flex: 0 1 auto !important; min-width: 74px !important; margin-right: auto !important; }
html.awa-ink .games-panel-header .game-switch-wrap .game-switch-name { display: block !important; min-width: 0; }
html.awa-ink .games-panel-header .game-switch {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; box-sizing: border-box;
  height: 38px; padding: 0 12px 0 14px; border: 0; border-radius: 999px;
  background: #2c3550; color: #fff; font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
.games-overlay[data-screen="whot"] .games-panel-header .game-switch { background: var(--b2-whot) !important; }
.games-overlay[data-screen="words"] .games-panel-header .game-switch { background: var(--b2-words) !important; }
.games-overlay[data-screen="hilo"] .games-panel-header .game-switch { background: var(--b2-hilo) !important; }
html.awa-ink .games-panel-header .game-switch-chev { opacity: .9; }
html.awa-ink .games-panel-header #gameScore { flex: 0 0 auto !important; margin-left: 0 !important; }
/* The score pill with money: the score on one row, the money under it.
   It used to size itself as if the money sat beside the score (220 px
   wide at 375), which pushed the switch under the pill. A grid sizes it
   to the wider of the two rows. */
html.awa-ink #gameScore.has-money {
  display: inline-grid !important; grid-template-columns: repeat(5, auto); align-items: center; justify-items: center;
  column-gap: 5px !important; row-gap: 1px !important; padding: 4px 9px 5px 4px !important;
}
html.awa-ink #gameScore.has-money > .gs-money { grid-column: 1 / -1; flex-basis: auto !important; }
html.awa-ink #gameScore .gs-av-me { order: 0; }
@media (max-width: 360px) {
  html.awa-ink .games-panel-header { gap: 6px !important; padding-right: 8px !important; }
  html.awa-ink .games-panel-header .game-switch { padding: 0 9px 0 11px; font-size: 13px; }
  html.awa-ink #gameScore { gap: 4px !important; padding: 3px 7px 3px 3px !important; }
  html.awa-ink #gameScore .gs-av { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  html.awa-ink #gameScore .gs-n { font-size: 18px !important; }
}
@media (max-width: 340px) {
  html.awa-ink #gameScore.has-money { column-gap: 3px !important; padding: 3px 6px 4px 3px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.awa-ink .home-screen.awh .awh-turn-card, html.awa-ink .home-screen.awh .awh-trio .awh-card.is-attention::after { animation: none !important; }
}

/* =====================================================================
   v72 (3 Nov 2026). Calls hidden for the launch (admin switch, entry.js)
   and the end card's stake as one chip: +₦500 green, −₦500 calm red.
   ===================================================================== */
html.awa-calls-off .call-btn-wrap, html.awa-calls-off #callDropdown { display: none !important; }
.whot-end-owed.is-up, .whot-end-owed.is-down {
  display: inline-flex !important; align-items: center; justify-content: center;
  margin: 12px auto 0; padding: 0 16px; height: 36px; border-radius: 18px; box-shadow: none !important;
  font: 700 18px "Unbounded", system-ui, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.whot-end-owed.is-up { background: rgba(63, 209, 122, .16) !important; color: #5fe39a; }
.whot-end-owed.is-down { background: rgba(255, 120, 120, .12) !important; color: #ff9b9b; }
.whot-end-owed.is-up[hidden], .whot-end-owed.is-down[hidden] { display: none !important; }
.whot-end-owed.is-plain { font-size: 14px; }

/* ===== v74 (4 Nov 2026): game tiles. One layout for every game: the real game's picture,
   the name, one live line. Whot leads at full width, Word Hunt and HiLo share the row under it.
   The same tiles show on Home and on Games. ===== */
.awg-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; box-sizing: border-box; }
.awg-tile {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 2px; min-width: 0; height: 150px;
  padding: 12px; border: 0; border-radius: 22px; overflow: hidden; isolation: isolate; box-sizing: border-box;
  color: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16); transition: transform .15s ease;
}
.awg-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.16), transparent 60%); pointer-events: none; }
.awg-tile:active { transform: scale(.98); }
.awg-tile:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.awg-whot { background: var(--b2-whot, #a81d34); grid-column: 1 / -1; height: 156px; grid-template-columns: minmax(0, 1fr) auto; }
.awg-words { background: var(--b2-words, #127552); }
.awg-hilo { background: var(--b2-hilo, #2a55b8); }
.awg-art { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.awg-name { margin-top: 6px; font: 700 15px/1.2 var(--b2-head, system-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.awg-line { min-height: 17px; font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.awg-whot .awg-art { grid-column: 2; grid-row: 1 / 4; width: 150px; height: 100%; }
.awg-whot .awg-name, .awg-whot .awg-line { grid-column: 1; }
.awg-whot .awg-name { grid-row: 2; } .awg-whot .awg-line { grid-row: 3; }
.awg-whot .awg-name { font-size: 20px; }
.awg-whot .awg-line { font-size: 13.5px; }

/* Whot: three real cards from the game's own renderer, fanned */
.awg-fan { position: relative; width: 150px; height: 100%; }
.awg-fan .awh-fc { position: absolute; left: 50%; top: 50%; width: 74px; height: 106px; margin: -53px 0 0 -37px; border-radius: 11px; overflow: hidden; background: #f4ead5; box-shadow: 0 10px 20px -8px rgba(0,0,0,.55); transform-origin: 50% 50%; }
.awg-fan .awh-fc .whot-card-face { width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; border-radius: 11px; }
.awg-fan .awh-fc.fc1 { transform: translate(-38px, 4px) rotate(-14deg) scale(.6); }
.awg-fan .awh-fc.fc2 { transform: translate(0, -4px) rotate(-2deg) scale(.6); }
.awg-fan .awh-fc.fc3 { transform: translate(38px, 4px) rotate(11deg) scale(.6); }

/* Word Hunt: a real 3 by 3 board with WORD traced across it */
.awg-board { position: relative; display: grid; grid-template-columns: repeat(3, 24px); gap: 4px; }
.awg-board i { position: relative; z-index: 1; height: 24px; border-radius: 6px; font: 700 12px/24px var(--b2-head, system-ui); font-style: normal; text-align: center; background: rgba(255,255,255,.14); color: #fff; }
.awg-board i.on { background: #fff; color: #0c5a3c; }
.awg-board svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.awg-board path { fill: none; stroke: #ffd27a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* HiLo: their hidden number and the two guesses you can make */
.awg-hl { display: flex; align-items: center; gap: 6px; }
.awg-hcard { width: 46px; height: 58px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); font: 700 26px var(--b2-head, system-ui); }
.awg-arrows { display: grid; gap: 4px; }
.awg-arrows > span { width: 30px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fff; color: #1d3f8f; }
.awg-arrows > span + span { background: rgba(255,255,255,.18); color: #fff; }
.awg-arrows svg { width: 14px; height: 14px; }

/* Your turn: the tile itself speaks. White ring, a gentle lift, a pulsing dot, a white button. */
.awg-tile.is-turn { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 3px #182036, 0 0 0 5px #fff, 0 16px 34px -12px rgba(0,0,0,.6); animation: awgLift 2.4s ease-in-out infinite; }
.awg-tile.is-turn::after { content: ""; position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: awgPulse 1.8s ease-out infinite; }
.awg-tile.is-turn .awg-line { min-height: 30px; overflow: visible; }
.awg-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; }
.awg-whot .awg-pill { color: #8f1429; } .awg-words .awg-pill { color: #0c5a3c; } .awg-hilo .awg-pill { color: #1d3f8f; }
@keyframes awgLift { 50% { transform: translateY(-2px); } }
@keyframes awgPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@media (max-width: 340px) {
  .awg-tile { padding: 11px; }
  .awg-name { font-size: 14px; } .awg-whot .awg-name { font-size: 18px; }
  .awg-line { font-size: 12px; }
  .awg-pill { padding: 0 11px; font-size: 12px; }
  .awg-whot .awg-art, .awg-fan { width: 130px; }
}
@media (prefers-reduced-motion: reduce) { .awg-tile.is-turn, .awg-tile.is-turn::after { animation: none; } }

/* Games page: the same tiles; the old list and the Watch together row (Cinema has its own tab) go. */
.home-screen.awh[data-view="play"] .pl-list > .pl-pair,
.home-screen.awh[data-view="play"] .pl-list > .pl-hilo2 { display: none !important; }
html.awa-ink .home-screen.awh[data-view="play"] #awaWatchQuick { display: none !important; }
/* The old turn card above the games is retired. */
html.awa-ink .home-screen.awh #homeTurnBtn { display: none !important; }

/* Bottom bar: square to the bottom edge, navy, and a skirt below it so no strip of page ever shows
   under it (iPhone home indicator area included). */
html.awa-ink .awh-nav { background: #141b2e !important; border-radius: 0 !important; border-top: 1px solid rgba(245,243,255,.07) !important; box-shadow: none !important; }
html.awa-ink .awh-nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 120px; background: #141b2e; pointer-events: none; }
html.awa-desk .awh-nav::after { display: none; }

/* ===== v74: each game screen in its own colour (no plum left). Dark and calm, because people
   sit at these tables for a long time; the bright game colour stays on the Home tiles. ===== */
html.awa-ink #gamesOverlay[data-screen="whot"] { background: radial-gradient(90% 50% at 50% 45%, rgba(168,29,52,.22), transparent 70%), linear-gradient(#2a0d15, #18070c) !important; }
html.awa-ink #gamesOverlay[data-screen="words"] { background: radial-gradient(90% 50% at 50% 40%, rgba(18,117,82,.22), transparent 70%), linear-gradient(#0f2a20, #08180f) !important; }
html.awa-ink #gamesOverlay[data-screen="hilo"] { background: radial-gradient(90% 50% at 50% 40%, rgba(42,85,184,.24), transparent 70%), linear-gradient(#13244b, #0a1630) !important; }
/* Whot: deep red baize inside the wooden rim (back to red in v85d, Dale did not like green) */
#whotPanel .whot-felt { background: radial-gradient(80% 60% at 50% 42%, #7c1a2b 0%, #521020 55%, #2e0811 100%) !important; }
#whotPanel #whotOppHand .whot-card-back.hand { background: repeating-linear-gradient(45deg, #8f1429 0 5px, #7a1023 5px 10px) !important; border-color: #c9566b !important; }
/* v85d: red card backs on red felt blended in. Real Whot cards have a light
   border round the red back, so the backs get a cream edge and the market
   stack shows cream edges underneath. */
#whotPanel #whotOppHand .whot-card-back.hand { border: 2px solid #f1e4c8 !important; box-shadow: 0 3px 8px rgba(0,0,0,.45) !important; }
#whotPanel .whot-market-pile .whot-card-back { border: 2px solid #f1e4c8 !important; box-shadow: 3px 3px 0 #d8c7a4, 6px 6px 0 #b9a582, 0 14px 22px -8px rgba(0,0,0,.7) !important; }
#whotPanel .whot-market-pile.whot-market-tappable .whot-card-back { box-shadow: 3px 3px 0 #d8c7a4, 6px 6px 0 #b9a582, 0 0 0 2px #ffc35a, 0 0 22px 4px rgba(255,195,90,.45) !important; }
/* HiLo: blue baize instead of the brown wood */
html.awa-ink #hiloPanel { background: transparent !important; }
html.awa-ink #hiloTable { background: radial-gradient(90% 70% at 50% 35%, #2a4f9e 0%, #1b3672 55%, #102350 100%) !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 14px 36px rgba(0,0,0,.4), 0 24px 50px -24px rgba(0,0,0,.8) !important; }
html.awa-ink #hiloRoot .hilo-lamp { background: radial-gradient(50% 45% at 50% 40%, rgba(160,195,255,.16), transparent 70%) !important; }
/* End cards, the trash-talk box and the big buttons: navy and amber, like Home */
html.awa-ink .whot-end-card { background: #1f2639 !important; }
html.awa-ink .whot-end { background: rgba(10,14,26,.66) !important; }
html.awa-ink #wordsTauntInput { background: #232b42 !important; border-color: rgba(245,243,255,.12) !important; }
html.awa-ink #wordsPlayAgainBtn, html.awa-ink #whotPanel .whot-finish-again, html.awa-ink #hiloAgain { background: #ffb42e !important; color: #1a1205 !important; box-shadow: none !important; }
html.awa-ink #wordsResultMeCol, html.awa-ink #wordsResultThemCol { background: rgba(4,16,10,.55) !important; }
html.awa-ink #whotPanel .whot-finish { background: rgba(26,8,13,.88) !important; border-color: rgba(255,255,255,.1) !important; }
html.awa-ink #hiloRoot { background: radial-gradient(120% 60% at 50% 0%, rgba(140,180,255,.1), transparent 60%) !important; background-color: transparent !important; }

/* ===== v74: Moments last 24 hours; the sender can delete one for both ===== */
.moments-album-note { margin: -4px 0 10px; font-size: 12.5px; color: rgba(245,243,255,.6); }
.moment-expires { margin: 4px 0 0; font-size: 12.5px; color: rgba(245,243,255,.6); text-align: center; }
.moment-del-btn { display: block; margin: 10px auto 0; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255,92,108,.12); color: #ff8a96; font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.moment-del-btn[hidden], .moment-del-ask[hidden] { display: none !important; }
.moment-del-ask { margin: 10px 0 0; padding: 14px; border-radius: 18px; background: #232b42; color: #f5f3ff; font-size: 14px; line-height: 1.4; }
.moment-del-ask p { margin: 0 0 12px; }
.moment-del-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.moment-del-row button { min-height: 46px; border: 0; border-radius: 999px; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.moment-del-keep { background: #2c3550; color: #f5f3ff; }
.moment-del-yes { background: #e5484d; color: #fff; }
.moment-del-yes:disabled { opacity: .6; }

/* ===== v75 (4 Nov 2026): game tiles back to three in a row (Dale's pick), keeping the v74 pictures,
   live line and turn ring. The line may run to two lines in a narrow tile instead of being cut. ===== */
.awg-games { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.awg-tile, .awg-whot { grid-column: auto !important; height: 168px !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto auto !important; padding: 12px 10px 12px 12px !important; }
.awg-whot .awg-art { grid-column: 1 !important; grid-row: 1 !important; width: auto !important; height: auto !important; }
.awg-whot .awg-name, .awg-whot .awg-line { grid-column: 1 !important; grid-row: auto !important; }
.awg-name, .awg-whot .awg-name { font-size: 14px !important; }
.awg-line, .awg-whot .awg-line { font-size: 11.5px !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 30px; }
.awg-tile.is-turn .awg-line { display: block; -webkit-line-clamp: unset; }
.awg-pill { height: 28px !important; padding: 0 10px !important; font-size: 12px !important; }
.awg-fan { width: 100% !important; height: 72px !important; }
.awg-fan .awh-fc.fc1 { transform: translate(-16px, 3px) rotate(-12deg) scale(.5) !important; }
.awg-fan .awh-fc.fc2 { transform: translate(12px, -2px) rotate(8deg) scale(.5) !important; }
.awg-fan .awh-fc.fc3 { display: none !important; }
.awg-board { grid-template-columns: repeat(3, 21px) !important; gap: 3px !important; }
.awg-board i { height: 21px !important; line-height: 21px !important; font-size: 10.5px !important; border-radius: 5px !important; }
.awg-hcard { width: 38px !important; height: 50px !important; font-size: 21px !important; }
.awg-arrows > span { width: 26px !important; height: 22px !important; }
@media (max-width: 340px) {
  .awg-tile, .awg-whot { padding: 10px 8px 10px 10px !important; }
  .awg-name, .awg-whot .awg-name { font-size: 12.5px !important; }
  .awg-pill { padding: 0 8px !important; font-size: 11px !important; }
  .awg-board { grid-template-columns: repeat(3, 19px) !important; }
  .awg-board i { height: 19px !important; line-height: 19px !important; }
}

/* ===== v75: the turn glow, sharp and the same on every turn. One ring drawn on its own layer,
   always on screen and only switched between hidden and shown, so nothing is left to fade or
   stack up between moves. Whot in amber on the red table, HiLo the same on the blue table.
   Word Hunt has no turns while you play, so it has no glow. ===== */
#whotPanel .whot-table, #whotPanel .whot-felt, #whotPanel .whot-board { transition: none !important; }
#whotPanel .whot-board .whot-table { box-shadow: 0 30px 60px -22px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,214,170,.32) !important; }
#whotPanel .whot-board.my-turn .whot-table { box-shadow: 0 30px 60px -22px rgba(0,0,0,.85), inset 0 2px 0 rgba(255,214,170,.32) !important; }
#whotPanel .whot-table::after { animation: none !important; opacity: 0 !important; }
#whotPanel .whot-table::before { content: ""; position: absolute; inset: -4px; z-index: 0; border-radius: inherit; border: 3px solid #ffb42e; box-shadow: 0 0 22px rgba(255,180,46,.45); opacity: 0; pointer-events: none; transform: translateZ(0); }
#whotPanel .whot-board.my-turn .whot-table::before { opacity: 1; }
#hiloRoot #hiloTable { position: relative; }
#hiloRoot #hiloTable::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 3px solid #ffb42e; box-shadow: 0 0 22px rgba(255,180,46,.45); opacity: 0; pointer-events: none; transform: translateZ(0); }
#hiloRoot.is-my-go #hiloTable::before { opacity: 1; }
.awg-name, .awg-whot .awg-name { white-space: normal !important; line-height: 1.15 !important; overflow-wrap: anywhere; }
.awg-tile, .awg-whot { height: 178px !important; }

/* ===== v77 (4 Nov 2026): Home tiles show the real games, the music row shows the real song,
   HiLo goes petrol, Cinema goes navy. Rule behind all of it (Dale): show the real thing plainly,
   like the Watch together row, never a drawing about it. ===== */
html.awa-ink { --b2-hilo: #0d6e86; }

/* Game tiles: shorter, flat colour, the name on one line, the picture is the real game */
.awg-tile::before { display: none !important; }
.awg-tile, .awg-whot { height: 136px !important; padding: 0 0 10px !important; grid-template-rows: minmax(0, 1fr) auto auto !important; row-gap: 2px !important; box-shadow: none; }
.awg-art { overflow: hidden; align-self: stretch; }
.awg-name, .awg-whot .awg-name { padding: 0 10px; font-size: 12.5px !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: visible !important; overflow-wrap: normal !important; letter-spacing: -.01em; }
.awg-line, .awg-whot .awg-line { padding: 0 10px; font-size: 11px !important; line-height: 1.3 !important; min-height: 0 !important; -webkit-line-clamp: 2; color: rgba(255,255,255,.9) !important; }
.awg-hilo .awg-name, .awg-hilo .awg-line { color: #fff !important; }
/* Whot: two real cards from the table, bigger, held like a hand and cut by the tile edge */
.awg-fan { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; }
.awg-fan .awh-fc { width: 48px !important; height: 68px !important; margin: 0 !important; left: auto !important; top: auto !important; border-radius: 8px !important; box-shadow: 0 8px 14px -8px rgba(0,0,0,.7) !important; }
.awg-fan .awh-fc .whot-card-face { border-radius: 8px !important; }
.awg-fan .awh-fc .wc-shape-svg { width: 26px !important; height: 26px !important; }
.awg-fan .awh-fc .wc-corner { font-size: 9px !important; }
.awg-fan .awh-fc.fc1 { left: 10px !important; top: 14px !important; transform: rotate(-9deg) !important; }
.awg-fan .awh-fc.fc2 { left: 40px !important; top: 10px !important; transform: rotate(7deg) !important; }
.awg-fan .awh-fc.fc3 { display: none !important; }
/* Word Hunt: the real walnut board and cream tiles, WORD in the amber you see while tracing */
.awg-tray { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 4px; border-radius: 9px; background: linear-gradient(160deg, #5a3b20, #3b2614); box-shadow: inset 0 1px 0 rgba(255,220,160,.25), 0 8px 14px -8px rgba(0,0,0,.6); display: grid; grid-template-columns: repeat(3, 17px); gap: 3px; }
.awg-tray i { height: 17px; border-radius: 5px; background: linear-gradient(180deg, #fbf1dc, #ecdcb8); box-shadow: 0 2px 0 #b49b6a; color: #3a2a12; font: 700 10px/17px "Funnel Display", system-ui, sans-serif; font-style: normal; text-align: center; }
.awg-tray i.on { background: linear-gradient(180deg, #ffe08a, #ffc23d); box-shadow: 0 2px 0 #b9851a; color: #3a2405; }
/* HiLo: its real cream cards with the serif numbers */
.awg-hc { position: absolute; top: 13px; width: 36px; height: 50px; border-radius: 6px; background: linear-gradient(180deg, #f3e7cf, #e6d6b4); box-shadow: 0 3px 0 #b49b6a, 0 8px 12px -6px rgba(0,0,0,.6); color: #2c2112; display: flex; align-items: center; justify-content: center; font: 600 18px/1 "Fraunces", Georgia, serif; font-variant-numeric: lining-nums; }
.awg-hc1 { left: 12px; transform: rotate(-6deg); }
.awg-hc2 { left: 46px; transform: rotate(5deg); color: #8b6a2e; }
/* Your turn: a white ring with a glow, and the pulsing dot lives inside the pill (never over the cards) */
.awg-tile.is-turn { box-shadow: 0 0 0 2px #182036, 0 0 0 4.5px #fff, 0 0 22px 4px rgba(255,255,255,.28) !important; }
.awg-tile.is-turn::after { display: none !important; }
.awg-tile.is-turn .awg-line { min-height: 0 !important; overflow: visible !important; display: block !important; }
.awg-pill { height: 22px !important; padding: 0 9px 0 7px !important; font-size: 11px !important; gap: 5px; }
.awg-pdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; animation: awgPing 1.6s ease-out infinite; }
@keyframes awgPing { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 6px transparent; } }
.awg-hilo .awg-pill { color: #0a4f61 !important; }
@media (max-width: 359px) {
  .awg-name, .awg-whot .awg-name { padding: 0 8px; font-size: 11px !important; letter-spacing: -.02em; }
  .awg-line, .awg-whot .awg-line { padding: 0 8px; font-size: 10.5px !important; }
  .awg-pill { margin-left: 0; }
  .awg-fan .awh-fc.fc1 { left: 6px !important; } .awg-fan .awh-fc.fc2 { left: 32px !important; }
  .awg-hc1 { left: 8px; } .awg-hc2 { left: 38px; }
}
@media (prefers-reduced-motion: reduce) { .awg-pdot { animation: none; } }

/* Awa Muzik row: the real cover and song, a play button, a thin progress line.
   No song yet: the beat stays in the cover's place. */
html.awa-ink .awh-sound.awh-t-sound.awm-row { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 0 12px; cursor: pointer; }
.awm-row:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.awm-cover { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.22); box-shadow: 0 6px 12px -6px rgba(0,0,0,.6); }
html.awa-ink .awh-sound.awh-t-sound .awm-cover .awh-eq { width: 100%; height: 100%; flex: none; border-radius: 0; background: transparent !important; box-shadow: none !important; }
.awm-cover .st-cv { width: 46px !important; height: 46px !important; border-radius: 10px !important; }
.awm-row .awh-sound-copy { flex: 1; min-width: 0; }
.awm-row .awh-sound-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awm-play { width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.awm-play svg { width: 15px; height: 15px; fill: var(--b2-muzik, #5b3fc4); }
.awm-play .awm-i-pause, .awm-row.is-live .awm-play .awm-i-play { display: none; }
.awm-row.is-live .awm-play .awm-i-pause { display: block; }
.awm-play:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.awm-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); pointer-events: none; }
.awm-prog[hidden] { display: none !important; }
.awm-prog i { display: block; height: 100%; width: 0; background: #fff; transition: width 1s linear; }

/* People button: a small stack of faces, no words (it still opens your Spaces) */
.awh-people-faces:not(:empty) + .awh-people-count { display: none !important; }
html.awa-ink .awh-people-pill { height: 38px; padding: 0 9px 0 5px; gap: 4px; }
html.awa-ink .awh-people-faces > span { width: 26px; height: 26px; box-shadow: 0 0 0 2px #1f2639 !important; }
html.awa-ink .awh-people-faces > span + span { margin-left: -9px; }
.awh-people-chev { width: 13px; height: 13px; color: rgba(245,243,255,.6); flex: none; }

/* HiLo screen: petrol felt instead of blue, the cream cards stay */
html.awa-ink #gamesOverlay[data-screen="hilo"] { background: radial-gradient(90% 50% at 50% 40%, rgba(13,110,134,.22), transparent 70%), linear-gradient(#0d2a33, #081a20) !important; }
html.awa-ink #hiloTable { background: radial-gradient(90% 70% at 50% 35%, #146e82 0%, #0c4c5c 55%, #07313c 100%) !important; }
html.awa-ink #hiloRoot .hilo-lamp { background: radial-gradient(50% 45% at 50% 40%, rgba(170,235,245,.13), transparent 70%) !important; }
html.awa-ink #hiloRoot { background: radial-gradient(120% 60% at 50% 0%, rgba(120,210,225,.08), transparent 60%) !important; background-color: transparent !important; }

/* Cinema: navy like Home, no plum anywhere outside the game tables */
html.awa-ink #gamesOverlay:not([data-screen="whot"]):not([data-screen="words"]):not([data-screen="hilo"]) { background: #182036 !important; }
#watchPanel .clb-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
#watchPanel .cinema-tile.clb { min-height: 0 !important; height: auto !important; padding: 14px !important; border: 0 !important; border-radius: 20px !important; background: #1f2639 !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 12px !important; color: #f5f3ff !important; grid-column: auto !important; }
#watchPanel .cinema-tile.clb::before, #watchPanel .cinema-tile.clb::after { display: none !important; }
#watchPanel .cinema-tile.clb-yt { grid-column: 1 / -1 !important; }
#watchPanel .clb-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
#watchPanel .clb-ic { width: 48px; height: 36px; flex: 0 0 48px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
#watchPanel .clb-ic-yt { background: #c4001f; }
#watchPanel .clb-ic-yt svg { width: 30px; height: 21px; }
#watchPanel .clb-ic-tt { background: #0b0b0f; }
#watchPanel .clb-ic-tt .brand-tt { width: 20px !important; height: 22px !important; margin: 0 !important; position: static !important; }
#watchPanel .clb-ic-am { background: #ffb42e; color: #1a1205; }
#watchPanel .clb-ic-am svg { width: 20px; height: 20px; }
#watchPanel .clb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
#watchPanel .clb-txt b { font: 700 14px/1.15 var(--b2-head, system-ui) !important; color: #f5f3ff !important; letter-spacing: -.01em; }
#watchPanel .clb-yt .clb-txt b { font-size: 16px !important; }
#watchPanel .clb-txt small { font-size: 12px; line-height: 1.3; color: rgba(245,243,255,.62) !important; opacity: 1 !important; }
#watchPanel .clb-txt .awa-word { font: inherit; color: inherit; }
#watchPanel .clb-search { height: 42px; border-radius: 12px; background: #232b42; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: rgba(245,243,255,.6); font-size: 14px; }
#watchPanel .clb-search svg { width: 16px; height: 16px; flex: none; }
#watchPanel .cinema-lobby-continue { display: grid; gap: 8px; }
#watchPanel .cinema-lobby-continue[hidden] { display: none !important; }
#watchPanel .clc-h { margin: 6px 2px 0; font: 700 14px/1.2 var(--b2-head, system-ui); color: #f5f3ff; }
#watchPanel .clc-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
#watchPanel .clc-thumb { width: 76px; height: 46px; flex: 0 0 76px; border-radius: 9px; overflow: hidden; background: #2c3550; }
#watchPanel .clc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#watchPanel .clc-thumb img:not([src]) { display: none; }
#watchPanel .clc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#watchPanel .clc-text b { font-size: 13.5px; font-weight: 600; color: #f5f3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#watchPanel .clc-text small { font-size: 12px; color: rgba(245,243,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#watchPanel .clc-go { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #2c3550; color: #f5f3ff; font: 700 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; flex: none; }
#watchPanel .cinema-live-strip { background: #1f2639 !important; border-color: rgba(245,243,255,.1) !important; }

/* Inside YouTube / TikTok: the name and "with ..." stacked, so nothing slips under Chat */
#watchPanel .cinema-room-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
#watchPanel .room-brand { min-width: 0; align-items: center; }
#watchPanel .room-brand .rb-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
#watchPanel .room-brand .rb-txt b { white-space: nowrap; }
#watchPanel .room-brand .rb-txt small { margin: 2px 0 0 !important; font-size: 11px !important; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.awa-ink #watchPanel .cinema-continue { background: #1f2639 !important; border-color: rgba(245,243,255,.08) !important; box-shadow: none !important; }

/* ===== v78 (4 Nov 2026): Settings in the same look as Home (navy ground, navy cards,
   Unbounded heading, amber switches). Three groups: you and your Space, notifications and
   privacy, the app. Nothing removed; "Light mode" is now "Lite mode" (it means fewer
   animations, not a light look). ===== */
.settings-overlay { background: rgba(6,9,18,.6) !important; }
.settings-overlay .settings-panel.aws-panel { background: #182036 !important; gap: 10px !important; }
.aws-title { font: 700 22px/1.1 var(--b2-head, "Unbounded", system-ui, sans-serif) !important; letter-spacing: -.01em !important; }
.aws-close { width: 40px; height: 40px; background: #1f2639 !important; color: rgba(245,243,255,.7) !important; }
.aws-close svg { width: 18px; height: 18px; }
.aws-profile { background: #1f2639 !important; border: 0 !important; border-radius: 20px !important; padding: 14px !important; margin-bottom: 4px; }
.aws-profile-av { width: 56px !important; height: 56px !important; flex: 0 0 56px !important; border: 0 !important; background: #3a4566 !important; }
.aws-profile-copy strong { font: 700 17px/1.2 var(--b2-head, "Unbounded", system-ui, sans-serif) !important; letter-spacing: -.01em !important; }
.aws-profile-copy span { font-size: 13px; color: rgba(245,243,255,.62) !important; }
.aws-profile-copy em { font-size: 12.5px; color: rgba(245,243,255,.7) !important; }
.aws-profile-edit { margin-left: auto; height: 32px; padding: 0 14px; border-radius: 999px; background: #2c3550 !important; color: #f5f3ff !important; border: 0 !important; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
.aws-group-label { margin: 10px 6px 2px !important; font: 600 12.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif !important; letter-spacing: 0 !important; color: rgba(245,243,255,.55); opacity: 1 !important; }
.aws-group { background: #1f2639 !important; border: 0 !important; border-radius: 20px !important; }
.aws-group:empty { display: none; }
.aws-row { min-height: 56px; gap: 12px; padding: 8px 14px; border-bottom-color: rgba(245,243,255,.07) !important; }
.aws-row:active { background: #232b42 !important; }
.aws-ic { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; border-radius: 9px; background: #2c3550; align-items: center; justify-content: center; }
.aws-ic svg { width: 17px !important; height: 17px !important; }
.aws-label { font-size: 15px !important; }
.aws-label small { font-size: 12.5px !important; color: rgba(245,243,255,.58) !important; }
.aws-label small.is-ok { color: #4ade80 !important; }
.aws-label small.is-warn { color: #ffb36b !important; }
.aws-thumb { border: 0 !important; background: #3a4566 !important; }
.aws-switch { flex: 0 0 46px !important; width: 46px !important; height: 28px !important; border-radius: 14px !important; background: #2c3550 !important; }
.aws-switch i { width: 22px !important; height: 22px !important; background: #fff !important; }
.aws-row[aria-checked="true"] .aws-switch { background: #ffb42e !important; }
.aws-row[aria-checked="true"] .aws-switch i { transform: translateX(18px) !important; }
.aws-drawer { background: #1a2133 !important; }
#privFold .aws-row { padding-left: 22px; }
.aws-fine a { color: rgba(245,243,255,.6) !important; }
.aws-signout { color: #ff8a96 !important; background: #1f2639 !important; border: 0 !important; border-radius: 999px !important; }
.aws-secure:not([hidden]) { background: #ffb42e !important; color: #1a1205 !important; }
.aws-sub-actions .aws-link-btn:not([hidden]), .aws-foot a { color: #ffb42e !important; }

/* v79 (4 Nov 2026): Home's round "me" button holds your photo as an <img>
   (profiles.js paintHomeMe). The old !important background rules above
   can't cover it, so the button no longer goes blank. */
.awh-me-btn { overflow: hidden; }
.awh-me-btn .awh-me-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 50%; pointer-events: none; }

/* v80 (4 Nov 2026): your turn in Whot can't be missed. A brighter, thicker
   steady ring; two flashes the moment the turn arrives (class turn-arrived,
   set for 1.5 s by whot-table.js); the status line becomes a solid amber
   "It's your turn" pill. No looping animation anywhere. */
#whotPanel .whot-table::before { inset: -5px; border-width: 4px; border-color: #ffbe3d; box-shadow: 0 0 0 1px rgba(255,190,61,.35), 0 0 34px rgba(255,180,46,.6); }
#whotPanel .whot-board.turn-arrived .whot-table::before { animation: awaTurnFlash .7s ease-out 2; }
@keyframes awaTurnFlash {
  0% { box-shadow: 0 0 0 1px rgba(255,190,61,.35), 0 0 34px rgba(255,180,46,.6); transform: scale(1); }
  40% { box-shadow: 0 0 0 6px rgba(255,190,61,.55), 0 0 80px 16px rgba(255,180,46,.85); transform: scale(1.025); }
  100% { box-shadow: 0 0 0 1px rgba(255,190,61,.35), 0 0 34px rgba(255,180,46,.6); transform: scale(1); }
}
#whotPanel .whot-board.my-turn .whot-status { background: #ffb42e !important; color: #1a1205 !important; border: 0 !important; font-weight: 800; box-shadow: 0 8px 24px rgba(255,180,46,.35) !important; }
@media (prefers-reduced-motion: reduce) { #whotPanel .whot-board.turn-arrived .whot-table::before { animation: none; } }

/* v80: the end card in the Home look. A thin edge in the game's colour, the
   two of you as the picture (winner in front, ringed in the game colour),
   the result in Unbounded. */
.whot-end { --awe-c: #a81d34; }
.whot-end[data-game="words"] { --awe-c: #127552; }
.whot-end[data-game="hilo"] { --awe-c: #0d6e86; }
html.awa-ink .whot-end-card { box-shadow: inset 0 4px 0 var(--awe-c), 0 24px 60px -20px rgba(0,0,0,.7) !important; }
.whot-end-big:has(.awe-faces) { padding: 6px 0 0; }
.whot-end.is-won .whot-end-big:has(.awe-faces) { animation: none; }
.awe-faces { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 76px; }
.awe-face { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #2c3550; color: #f5f3ff; box-shadow: 0 0 0 3px #1f2639; }
.awe-face + .awe-face { margin-left: -12px; }
.awe-face > *, .awe-face .avatar-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 50%; }
.awe-face .game-initial { display: grid; place-items: center; font: 700 20px "Unbounded", "Funnel Display", system-ui, sans-serif; background: none; }
.awe-face .awe-cpu { width: 60%; height: 60%; }
.awe-faces.is-me-won .awe-face.is-me, .awe-faces.is-they-won .awe-face.is-them { width: 68px; height: 68px; z-index: 1; box-shadow: 0 0 0 3px #1f2639, 0 0 0 6px var(--awe-c); }
.awe-faces.is-me-won .awe-face.is-them, .awe-faces.is-they-won .awe-face.is-me { opacity: .55; }
.awe-faces.is-tie .awe-face { box-shadow: 0 0 0 3px #1f2639, 0 0 0 5px var(--awe-c); }
html.awa-ink .whot-end-title { font-family: "Unbounded", "Funnel Display", system-ui, sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em; }

/* =====================================================================
   v81 (4 Nov 2026): the end card is a tray that slides up from the
   bottom. The finished table stays in view above it (no dark curtain).
   A win is bright amber with an ink navy Play again; a loss is a light
   #f5f3ff card with an amber Rematch. Faces, title, the score big, the
   money chip, the sub line. No red except a minus money chip. The v80
   coloured top edge is gone.
   ===================================================================== */
#gamesOverlay .whot-end { justify-content: flex-end !important; align-items: stretch; gap: 0; padding: 0 !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none; overflow: hidden; animation: none; }
#gamesOverlay .whot-end-card { pointer-events: auto; position: relative; width: 100%; max-width: 520px; margin: 0 auto; max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 18px calc(16px + env(safe-area-inset-bottom)) !important; border: 0 !important; border-radius: 26px 26px 0 0 !important; background: #f5f3ff !important; color: #182036 !important; box-shadow: 0 -18px 40px rgba(0,0,0,.35) !important; animation: none; }
#gamesOverlay .whot-end.is-in .whot-end-card { animation: aweTrayUp .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes aweTrayUp { from { transform: translateY(100%); } to { transform: none; } }
#gamesOverlay .whot-end.is-won .whot-end-card { background: linear-gradient(170deg, #ffc857 0%, #ffb42e 55%, #f59e1c 100%) !important; color: #1a1205 !important; box-shadow: 0 -18px 50px rgba(255,180,46,.35) !important; border: 0 !important; }
.whot-end-grab { width: 38px; height: 5px; border-radius: 3px; background: currentColor; opacity: .25; margin-bottom: 2px; flex: none; }
#gamesOverlay .whot-end-big { padding: 0 !important; animation: none !important; font-size: 42px; }
#gamesOverlay .whot-end-title { margin: 0 !important; color: inherit; font: 700 24px/1.15 "Unbounded", "Funnel Display", system-ui, sans-serif !important; letter-spacing: -.02em; }
.whot-end-score { font: 700 40px/1 "Unbounded", "Funnel Display", system-ui, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.whot-end-score[hidden] { display: none; }
.whot-end-score i { font-style: normal; opacity: .35; margin: 0 6px; }
#gamesOverlay .whot-end-sub { margin: 0; color: inherit !important; opacity: .78; font-size: 14px; }
#gamesOverlay .whot-end-owed { margin: 0 !important; display: inline-flex; align-items: center; height: 30px; padding: 0 12px !important; border-radius: 15px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: none !important; background: rgba(24,32,54,.08) !important; color: #182036 !important; }
#gamesOverlay .whot-end-owed[hidden] { display: none !important; }
#gamesOverlay .whot-end-owed.is-up { background: #182036 !important; color: #3fd17a !important; }
#gamesOverlay .whot-end-owed.is-down { background: rgba(255,107,107,.14) !important; color: #d93b3b !important; }
#gamesOverlay .whot-end-together { margin: 0; color: inherit; opacity: .8; font-size: 13px; font-weight: 600; }
#gamesOverlay .whot-end-rules, #gamesOverlay .whot-end-share { margin: 2px auto 0 !important; border: 0 !important; background: rgba(24,32,54,.08) !important; color: inherit !important; }
#gamesOverlay .whot-end-rules[hidden], #gamesOverlay .whot-end-share[hidden] { display: none !important; }
#gamesOverlay .whot-end .pw-ad-slot.pw-ad-in-card { width: 100%; margin: 4px 0 0 !important; }
#gamesOverlay .whot-end-actions { width: 100%; display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 6px !important; }
#gamesOverlay .whot-end-actions button { height: 50px; border-radius: 25px; font-size: 16px; }
#gamesOverlay .whot-end-done { background: #e4e7f2 !important; color: #182036 !important; }
#gamesOverlay .whot-end-again { background: #ffb42e !important; color: #1a1205 !important; }
#gamesOverlay .whot-end.is-won .whot-end-done { background: rgba(26,18,5,.12) !important; color: #1a1205 !important; }
#gamesOverlay .whot-end.is-won .whot-end-again { background: #182036 !important; color: #fff !important; }
/* Faces on the light and amber trays */
#gamesOverlay .whot-end .awe-faces { height: 70px; }
#gamesOverlay .whot-end .awe-face { width: 46px; height: 46px; background: #dfe3f1; color: #182036; box-shadow: 0 0 0 3px #f5f3ff; opacity: 1; }
#gamesOverlay .whot-end .awe-faces.is-me-won .awe-face.is-me { width: 66px; height: 66px; background: #182036; color: #ffb42e; box-shadow: 0 0 0 3px #ffc857, 0 0 0 6px #182036; }
#gamesOverlay .whot-end .awe-faces.is-me-won .awe-face.is-them { box-shadow: 0 0 0 3px #ffc857; opacity: .8; }
#gamesOverlay .whot-end .awe-faces.is-they-won .awe-face.is-them { width: 66px; height: 66px; box-shadow: 0 0 0 3px #f5f3ff, 0 0 0 6px #ffb42e; }
#gamesOverlay .whot-end .awe-faces.is-tie .awe-face { box-shadow: 0 0 0 3px #f5f3ff, 0 0 0 5px #ffb42e; }
/* Ads inside the tray */
#gamesOverlay .whot-end .awad-row { background: #fff; color: #182036 !important; box-shadow: 0 1px 0 #e4e7f2; }
#gamesOverlay .whot-end.is-won .awad-row { background: rgba(255,255,255,.55); color: #1a1205 !important; box-shadow: none; }
#gamesOverlay .whot-end .awad-row-copy small { color: inherit; opacity: .75; }
#gamesOverlay .whot-end .awad-more { color: inherit; opacity: .7; }
@media (prefers-reduced-motion: reduce) { #gamesOverlay .whot-end.is-in .whot-end-card { animation: none; } }

/* v81: money colours everywhere. Plus green #3fd17a, minus red #ff6b6b,
   the plain "₦500 a game" in white (dim). Score pill, end chip, tally. */
html.awa-ink .gs-money.is-up span, .gs-money.is-up span { color: #3fd17a !important; }
html.awa-ink .gs-money.is-down span, .gs-money.is-down span { color: #ff6b6b !important; }
html.awa-ink .gs-money.is-flat span, html.awa-ink .gs-money.is-off span, html.awa-ink .gs-money.is-wait span { color: rgba(245,243,255,.72) !important; }
html.awa-ink .gs-money.is-ask span { color: #ffb42e !important; animation: none; }
.owes-total.is-up b { color: #3fd17a !important; }
.owes-total.is-down b { color: #ff6b6b !important; }
/* The dot on the score pill while a stake request waits. */
#gameScore { position: relative; }
#gameScore:has(.gs-money.is-ask)::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #ffb42e; box-shadow: 0 0 0 2px #1f2639; }

/* v81: the stake request card dropped on the table. Stays until answered. */
.bet-ask-card { position: absolute; left: 12px; right: 12px; top: 120px; z-index: 520; max-width: 460px; margin: 0 auto; box-sizing: border-box; padding: 14px; display: grid; gap: 12px; border-radius: 20px; background: #182036; color: #f5f3ff; box-shadow: 0 16px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,180,46,.5); animation: betAskDrop .5s cubic-bezier(.2,.9,.3,1) both; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
@keyframes betAskDrop { from { opacity: 0; transform: translateY(-24px) scale(.96); } to { opacity: 1; transform: none; } }
.bet-ask-top { display: flex; gap: 10px; align-items: center; }
.bet-ask-av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #2c3550; font: 700 16px "Unbounded", system-ui, sans-serif; }
.bet-ask-av > *, .bet-ask-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 50%; }
.bet-ask-av .game-initial { display: grid; place-items: center; background: none; }
.bet-ask-top > div { display: grid; min-width: 0; }
.bet-ask-top b { font: 700 15px/1.25 "Unbounded", system-ui, sans-serif; }
.bet-ask-top span { font-size: 12.5px; color: rgba(245,243,255,.66); }
.bet-ask-acts { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.bet-ask-acts button { height: 44px; border: 0; border-radius: 22px; font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.bet-ask-no { background: #2c3550; color: #f5f3ff; }
.bet-ask-yes { background: #ffb42e; color: #1a1205; }
@media (prefers-reduced-motion: reduce) { .bet-ask-card { animation: none; } }

/* v81: who starts this Whot round, on the felt, once per deal. */
#whotPanel .whot-table { position: relative; }
.whot-starts { position: absolute; left: 50%; bottom: 14%; z-index: 6; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 18px; background: rgba(10,14,26,.78); color: #f5f3ff; font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; pointer-events: none; animation: whotStartsIn .4s cubic-bezier(.2,.9,.3,1) both; transition: opacity .45s ease; }
.whot-starts b { color: #ffb42e; }
.whot-starts.is-going { opacity: 0; }
@keyframes whotStartsIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .whot-starts { animation: none; } }

/* v81: the Home music tile. The song leads (title big in Unbounded, artist
   under); playing, it takes its colour from the cover (--awm-c, home.js);
   your two faces + "Listening together"; a progress line. Nothing playing:
   deep purple, the last song and a play button. No glow under it. */
html.awa-ink .home-screen.awh .awh-sound.awh-t-sound.awm-row, html.awa-ink .awh-sound.awh-t-sound.awm-row { height: auto !important; min-height: 88px; padding: 12px !important; border-radius: 20px; background: #3a2a8c !important; box-shadow: none !important; transition: background-color .5s ease; }
/* v81b (Dale: the colour was too sharp and never changed): every song
   tints the tile with its cover colour, softened into the navy, playing or
   paused. No song at all: plain navy. */
html.awa-ink .home-screen.awh .awh-sound.awh-t-sound.awm-row, html.awa-ink .awh-sound.awh-t-sound.awm-row { background: #1f2639 !important; }
html.awa-ink .home-screen.awh .awh-sound.awh-t-sound.awm-row.has-song, html.awa-ink .awh-sound.awh-t-sound.awm-row.has-song { background: linear-gradient(115deg, color-mix(in srgb, var(--awm-c, #2c3550) 42%, #182036) 0%, color-mix(in srgb, var(--awm-c, #2c3550) 18%, #182036) 100%) !important; }
html.awa-ink .home-screen.awh .awh-sound.awh-t-sound.awm-row.has-song.is-live, html.awa-ink .awh-sound.awh-t-sound.awm-row.has-song.is-live { background: linear-gradient(115deg, color-mix(in srgb, var(--awm-c, #2c3550) 58%, #182036) 0%, color-mix(in srgb, var(--awm-c, #2c3550) 26%, #182036) 100%) !important; }
.awm-row .awm-cover, .awm-row .awm-cover .st-cv { width: 64px !important; height: 64px !important; flex-basis: 64px; border-radius: 12px !important; }
.awm-row .awm-cover { box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.awm-row .awh-sound-copy { display: grid; gap: 2px; }
html.awa-ink .awm-row .awh-sound-copy b { font: 700 15px/1.2 "Unbounded", "Funnel Display", system-ui, sans-serif !important; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.awa-ink .awm-row .awh-sound-copy small { font-size: 12.5px; color: rgba(255,255,255,.78) !important; }
.awm-row .awh-sound-copy em { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awm-row .awh-sound-copy em[hidden] { display: none; }
.awm-faces { display: inline-flex; flex: none; }
.awm-faces i { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #182036; color: #ffb42e; font: 700 9px system-ui, sans-serif; box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.awm-faces i + i { margin-left: -6px; }
.awm-faces i > *, .awm-faces i img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 50%; font-size: 9px; }
.awm-row .awm-play { width: 44px; height: 44px; flex-basis: 44px; }
.awm-row .awm-play svg { width: 18px; height: 18px; fill: #182036; }
.awm-row .awm-prog { left: 12px; right: 12px; bottom: 6px; border-radius: 2px; }
.awm-row .awm-prog i { border-radius: 2px; }

/* v81: the partner dot on Home only shows while they are online (green). */
html.awa-ink .awh-chatrow-av .dot:not(.online) { display: none !important; }
html.awa-ink .awh-chatrow-av .dot.online { background: #3fd17a !important; animation: none !important; }

/* v81: the chat in the AwaSpace look. Their name in Unbounded, a thin amber
   line under the header while they are here, their bubbles #232b42, the
   strip under the box as navy pills with drawn icons, a plain empty chat. */
html.awa-ink .chat-topbar .topbar-name, html.awa-ink .topbar-name { font-family: "Unbounded", "Funnel Display", system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -.01em; }
.chat-topbar { position: relative; }
.chat-topbar.is-live::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(255,180,46,0), #ffb42e, rgba(255,180,46,0)); pointer-events: none; }
html.awa-ink .msg.theirs { background: #232b42 !important; }
html.awa-ink .composer-extra-row .toggle-pill.aw-pill, .toggle-pill.aw-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px !important; border: 0 !important; border-radius: 15px !important; background: #1f2639 !important; color: rgba(245,243,255,.72) !important; font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif !important; opacity: 1 !important; box-shadow: none !important; }
.toggle-pill.aw-pill svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toggle-pill.aw-pill.active { background: #ffb42e !important; color: #1a1205 !important; }
.toggle-pill.aw-pill:disabled { opacity: .6 !important; }
.chat-log-wrap { position: relative; }
.chat-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: rgba(245,243,255,.66); font-size: 14px; pointer-events: none; }
.chat-empty[hidden] { display: none; }
.chat-empty b { display: block; margin-bottom: 4px; font: 700 16px "Unbounded", "Funnel Display", system-ui, sans-serif; color: #f5f3ff; }
/* Share my place: what went wrong, and which setting to switch on. */
.place-help { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(10,14,26,.55); }
.place-help-card { width: 100%; max-width: 440px; box-sizing: border-box; padding: 18px; border-radius: 22px; background: #1f2639; color: #f5f3ff; box-shadow: 0 20px 50px rgba(0,0,0,.5); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
.place-help-card b { display: block; font: 700 16px/1.3 "Unbounded", system-ui, sans-serif; margin-bottom: 8px; }
.place-help-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: rgba(245,243,255,.8); }
.place-help-card p b { display: inline; font: inherit; font-weight: 700; color: #ffb42e; margin: 0; }
.place-help-card button { width: 100%; height: 46px; border: 0; border-radius: 23px; background: #ffb42e; color: #1a1205; font: 700 15px -apple-system, system-ui, sans-serif; }

/* v81: Contact info media opens on top of everything (it sat under the
   media list at 800 and the profile page at 700). Videos with no poster
   show their first frame. */
.photo-lightbox-overlay { z-index: 1000 !important; }
.gallery-thumb .gallery-thumb-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gallery-thumb-play svg { filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }

/* v81: plum leftovers into the B2 look (navy #182036 / #1f2639, amber). */
html.awa-ink .solo-invite-card, .solo-invite-card { background: #182036 !important; }
.awa-spaces-card .aw-bubble.is-on .aw-bubble-av { box-shadow: 0 0 0 3px #182036, 0 0 0 5.5px #ffb42e !important; }
html.awa-ink .solo-invite-ghost { background: #1f2639 !important; border-color: rgba(245,243,255,.1) !important; }
.watch-flash-form input { background: rgba(24,32,54,.86) !important; border: 1px solid rgba(245,243,255,.12) !important; color: #f5f3ff !important; }
.watch-flash-form button { background: #ffb42e !important; color: #1a1205 !important; }
#gamesOverlay .whot-end .awe-face .game-initial { color: inherit !important; }

/* v81b: Moments in the B2 look (it was still the old plum). */
.moments-sheet { background: #182036 !important; border: 0 !important; }
.moments-head h2 { font-family: "Unbounded", "Funnel Display", system-ui, sans-serif !important; font-size: 1.35rem !important; letter-spacing: -.02em !important; }
.moments-close, .moments-secondary { background: #2c3550 !important; }
.moments-input, .moment-reply input { background: #1f2639 !important; border-color: rgba(245,243,255,.1) !important; }
.moments-cta { background: #ffb42e !important; color: #1a1205 !important; }
.moment-reply button { background: #ffb42e !important; color: #1a1205 !important; }
.moment-request { background: #1f2639 !important; border-color: rgba(255,180,46,.35) !important; }
.moment-react-btn { background: #1f2639 !important; border-color: rgba(245,243,255,.08) !important; }
.moment-react-btn.is-on { background: rgba(255,180,46,.18) !important; border-color: #ffb42e !important; }
.moment-tile { background: #232b42 !important; }
.moments-empty { background: #1f2639 !important; }
.moment-wait-orbit { border-color: rgba(255,180,46,.22) !important; border-top-color: #ffb42e !important; }
.moment-request-time, .moment-reacted { color: #ffb42e !important; }
.moments-error { color: #ff6b6b !important; }

/* =====================================================================
   v82 (4 Nov 2026, Dale): ONE look across the app, like the big apps.
   Navy ground #182036, cards #1f2639 / #232b42, chips #2c3550, one accent
   amber #ffb42e, everywhere. The game colours now live only on the Home
   tiles and on the play surface itself (Whot felt, Word Hunt board, HiLo
   table), never on the screen around it. Money keeps green/red.
   ===================================================================== */
html.awa-ink #gamesOverlay[data-screen="whot"],
html.awa-ink #gamesOverlay[data-screen="words"],
html.awa-ink #gamesOverlay[data-screen="hilo"] { background: #182036 !important; }
html.awa-ink #hiloRoot, html.awa-ink #hiloRoot .hilo-lamp { background: transparent !important; }
.games-overlay[data-screen] .games-panel-header .game-switch { background: #232b42 !important; color: #f5f3ff !important; }
/* Panels around the tables: navy, not wine / forest / petrol */
html.awa-ink #whotPanel .whot-finish { background: rgba(24,32,54,.92) !important; }
html.awa-ink #wordsResultMeCol, html.awa-ink #wordsResultThemCol,
#wordsPanel .words-result-col, #wordsPanel .words-waiting-col { background: #1f2639 !important; border-color: rgba(245,243,255,.08) !important; }
#wordsPanel .wh-chips .words-found-chip, #wordsPanel .wh-chips .wh-chip-b, #wordsPanel .wh-chips .wh-chip-y, #wordsPanel .wh-chips .wh-chip-p { background: #232b42 !important; color: #f5f3ff !important; box-shadow: none !important; }
#whotPanel .whot-last-btn { background: rgba(24,32,54,.94) !important; border-color: rgba(255,180,46,.6) !important; }
/* One amber, flat: no more yellow-to-orange gradients */
#wordsPanel #wordsStartBtn, #wordsPanel #wordsPlayBtn, #wordsPanel #wordsPlayAgainBtn,
#whotPanel .whot-finish-again, html.awa-ink #hiloAgain,
#whotPanel .whot-last-btn.is-armed, #whotPanel .whot-last-btn[data-mode="call"] { background: #ffb42e !important; color: #1a1205 !important; box-shadow: none !important; }
#wordsPanel .wh-word.is-live { background: #ffb42e !important; color: #1a1205 !important; }
#whotPanel .whot-finish-rules, #whotPanel .whot-opponent-btn.selected { color: #ffb42e !important; }
#whotPanel .whot-opponent-btn.selected { background: rgba(255,180,46,.16) !important; }
#whotPanel .whot-pile-badge.is-low { background: #ffb42e !important; color: #1a1205 !important; }

/* v82b: the reaction bar (fixed, z-index 160) sat on top of the end tray's
   Done / Rematch, so the card looked stuck. While a result tray or a stake
   request is up, the bar hides; it comes back with the table. */
body:has(#gamesOverlay .whot-end:not([hidden])) .react-dock,
body:has(#betAskCard) .react-dock { display: none !important; }

/* =====================================================================
   v83b (4 Nov 2026, Dale): the end card, one look for every result.
   v81's amber win card hid Rules, Share, the ad and Done in the same
   amber; v83's white was too bright coming out of a dark game (Dale is
   light sensitive). Now a calm mid slate, a step lighter than the game
   screen so it still reads as a card, white text, amber only for Play
   again / Rematch and the ring round the winner. Share is an outline,
   Rules a plain line with "Change", the ad a slightly darker card with
   its button outlined in the advertiser's colour.
   ===================================================================== */
#gamesOverlay .whot-end { --ec-bg: #3a4566; --ec-fg: #f5f3ff; --ec-dim: rgba(245,243,255,.72); --ec-line: rgba(245,243,255,.14); --ec-soft: rgba(245,243,255,.12); --ec-ad: rgba(10,14,28,.22); }
#gamesOverlay .whot-end .whot-end-card, #gamesOverlay .whot-end.is-won .whot-end-card { background: var(--ec-bg) !important; color: var(--ec-fg) !important; box-shadow: 0 -18px 40px rgba(0,0,0,.4) !important; }
#gamesOverlay .whot-end .whot-end-done, #gamesOverlay .whot-end.is-won .whot-end-done { background: var(--ec-soft) !important; color: var(--ec-fg) !important; }
#gamesOverlay .whot-end .whot-end-again, #gamesOverlay .whot-end.is-won .whot-end-again { background: #ffb42e !important; color: #1a1205 !important; }
#gamesOverlay .whot-end .whot-end-sub { color: var(--ec-dim) !important; opacity: 1; }
#gamesOverlay .whot-end .whot-end-sub[hidden] { display: none !important; }
#gamesOverlay .whot-end .awe-face { background: rgba(245,243,255,.14); color: var(--ec-fg); box-shadow: 0 0 0 3px var(--ec-bg); }
#gamesOverlay .whot-end .awe-faces.is-me-won .awe-face.is-me, #gamesOverlay .whot-end.is-won .awe-faces.is-me-won .awe-face.is-me { background: #182036; color: #ffb42e; box-shadow: 0 0 0 3px var(--ec-bg), 0 0 0 6px #ffb42e; }
#gamesOverlay .whot-end .awe-faces.is-me-won .awe-face.is-them, #gamesOverlay .whot-end.is-won .awe-faces.is-me-won .awe-face.is-them { box-shadow: 0 0 0 3px var(--ec-bg); opacity: .75; }
#gamesOverlay .whot-end .awe-faces.is-they-won .awe-face.is-them { box-shadow: 0 0 0 3px var(--ec-bg), 0 0 0 6px #ffb42e; }
#gamesOverlay .whot-end .awe-faces.is-tie .awe-face { box-shadow: 0 0 0 3px var(--ec-bg), 0 0 0 5px #ffb42e; }
#gamesOverlay .whot-end .whot-end-owed { background: rgba(10,14,28,.25) !important; color: var(--ec-fg) !important; }
#gamesOverlay .whot-end .whot-end-owed.is-up { background: rgba(10,14,28,.3) !important; color: #3fd17a !important; }
#gamesOverlay .whot-end .whot-end-owed.is-down { background: rgba(255,107,107,.16) !important; color: #ff8f8f !important; }
#gamesOverlay .whot-end-share { width: 100%; height: 46px; margin: 6px 0 0 !important; border: 1.5px solid rgba(245,243,255,.7) !important; border-radius: 23px; background: transparent !important; color: var(--ec-fg) !important; font-weight: 700; }
#gamesOverlay .whot-end-rules { width: 100%; height: 40px; margin: 2px 0 0 !important; padding: 0 4px !important; border: 0 !important; border-top: 1px solid var(--ec-line) !important; border-radius: 0 !important; background: none !important; color: var(--ec-fg) !important; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14.5px; }
#gamesOverlay .whot-end-rules span { color: var(--ec-dim); }
#gamesOverlay .whot-end-rules b { font-weight: 800; color: #ffb42e; text-decoration: underline; text-underline-offset: 3px; }
#gamesOverlay .whot-end-rules + .whot-end-actions { margin-top: 2px !important; }
#gamesOverlay .whot-end .awad-row, #gamesOverlay .whot-end.is-won .awad-row { background: var(--ec-ad) !important; color: var(--ec-fg) !important; box-shadow: inset 0 0 0 1px var(--ec-line) !important; }
#gamesOverlay .whot-end .awad-row-copy small { color: var(--ec-dim) !important; opacity: 1; }
#gamesOverlay .whot-end .awad-row-btn { background: transparent !important; color: var(--ec-fg) !important; box-shadow: inset 0 0 0 1.5px var(--ad-c, rgba(245,243,255,.7)); }
#gamesOverlay .whot-end .awad-row.is-adv .awad-row-btn { box-shadow: inset 0 0 0 1.5px rgba(245,243,255,.7); }
#gamesOverlay .whot-end .awad-row-adv { background: #182036; color: #ffb42e; }
#gamesOverlay .whot-end .awad-row.is-adv::before { background: rgba(245,243,255,.5); }

/* v83 (Dale): HiLo after a round. The keypad goes away, and Play again
   was pinned to the bottom (margin-top: auto) with the table capped at
   230 px, so a big empty band opened in the middle. Now the finished
   round sits together in the middle of the screen: bigger table and
   cards, the guess rows, Play again right under them. */
#hiloPanel .hilo[data-status="done"] { justify-content: center !important; }
#hiloPanel .hilo[data-status="done"] .hilo-table { flex: 0 0 auto !important; height: clamp(180px, 34dvh, 300px); max-height: none; padding: 14px 12px !important; }
#hiloPanel .hilo[data-status="done"] .hilo-controls { margin-top: 10px !important; }
#hiloPanel .hilo[data-status="done"] .hilo-cta { width: 100%; max-width: 360px; margin: 0 auto; background: #ffb42e !important; color: #1a1205 !important; box-shadow: none !important; }
#hiloPanel .hilo-result-title { font-family: "Funnel Display", system-ui, sans-serif !important; font-weight: 800 !important; font-size: 21px !important; letter-spacing: -.02em; white-space: nowrap; }
#hiloPanel .hilo-result.is-win .hilo-result-title { color: #ffb42e !important; }

/* v83: Plan game time is a small calendar button in the person card. */
html.awa-ink .home-screen.awh .awh-hero { position: relative; }
.awh-plan-btn[hidden] { display: none !important; }
html.awa-ink .home-screen.awh .awh-plan-btn { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 14px; display: grid; place-items: center; background: #2c3550; color: #ffb42e; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.awa-ink .home-screen.awh .awh-plan-btn:active { transform: scale(.94); background: #343e5c; }
html.awa-ink .home-screen.awh .awh-hero-copy { padding-right: 48px !important; }

/* v83: one quiet maker's line at the very bottom of Settings. */
.aws-by { margin: 18px 0 4px; text-align: center; font-size: 12px; color: rgba(245,243,255,.42); }
.aws-by a { color: rgba(245,243,255,.62) !important; text-decoration: none; font-weight: 600; }

/* v83b: the one-time "new icon" card (src/new-icon.js), iPhone home screen app only. */
.ani { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,11,22,.6); animation: aniFade .25s ease-out both; }
.ani-card { width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; box-sizing: border-box; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: #232b42; color: #f5f3ff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; animation: aweTrayUp .45s cubic-bezier(.2,.9,.3,1) both; }
.ani-icons { display: flex; justify-content: center; margin-bottom: 12px; }
.ani-new { width: 76px; height: 76px; display: block; border-radius: 18px; box-shadow: 0 0 0 1px rgba(245,243,255,.16), 0 10px 22px rgba(0,0,0,.35); }
.ani-new svg { width: 100%; height: 100%; display: block; }
.ani-title { margin: 0 0 6px; text-align: center; font: 800 22px/1.2 "Funnel Display", system-ui, sans-serif; letter-spacing: -.02em; }
.ani-p { margin: 0 0 14px; text-align: center; font-size: 15px; line-height: 1.45; color: rgba(245,243,255,.75); }
.ani-warn { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255,180,46,.12); box-shadow: inset 0 0 0 1px rgba(255,180,46,.35); font-size: 14px; line-height: 1.4; }
.ani-warn b { color: #ffb42e; font-size: 15px; }
.ani-warn span { color: rgba(245,243,255,.8); }
.ani-warn-btn { align-self: flex-start; margin-top: 6px; padding: 9px 16px; border-radius: 999px; background: #ffb42e; color: #1a1205 !important; font-weight: 700; text-decoration: none; }
.ani-steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: ani; display: flex; flex-direction: column; gap: 10px; }
.ani-steps li { counter-increment: ani; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; }
.ani-steps li::before { content: counter(ani); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #2c3550; color: #ffb42e; font-weight: 800; font-size: 14px; }
.ani-steps b { color: #fff; }
.ani-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.ani-actions button { height: 50px; border: 0; border-radius: 25px; font: 700 16px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.ani-later { background: rgba(245,243,255,.1); color: #f5f3ff; }
.ani-ok { background: #ffb42e; color: #1a1205; }
@keyframes aniFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ani, .ani-card { animation: none; } }

/* v85c voice trash talk (src/room/taunt.js): the mic lives inside the
   Whot seat bar (before the +) and the HiLo reaction dock, live rounds only. */
.taunt-mic { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,180,46,.45); padding: 0; background: rgba(255,180,46,.12); color: #ffb42e; display: grid; place-items: center; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, background .15s ease; }
.taunt-mic[hidden] { display: none !important; }
.taunt-mic-dock { flex-basis: 46px; width: 46px; height: 46px; border-radius: 14px; }
.taunt-mic.is-rec { transform: scale(1.15); background: #ffb42e; color: #182036; border-color: #ffb42e; }
.taunt-mic.is-cancel { background: #ff6b6b; border-color: #ff6b6b; color: #fff; }
.taunt-ring { position: absolute; inset: -5px; border-radius: inherit; pointer-events: none; opacity: 0; background: conic-gradient(#f5f3ff calc(var(--taunt-p, 0) * 360deg), rgba(24,32,54,.35) 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.taunt-mic-dock .taunt-ring { -webkit-mask: none; mask: none; inset: auto 6px 4px 6px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #182036 calc(var(--taunt-p, 0) * 100%), rgba(24,32,54,.3) 0); }
.taunt-mic.is-rec .taunt-ring, .taunt-mic.is-cancel .taunt-ring { opacity: 1; }
.taunt-tip { position: fixed; z-index: 200; max-width: 240px; padding: 8px 12px; border-radius: 12px; background: #182036; color: #f5f3ff; font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.45); border: 1px solid #2c3550; pointer-events: none; }
.taunt-tip[hidden] { display: none !important; }
.taunt-pill { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 64px); transform: translateX(-50%); z-index: 152; display: flex; align-items: center; gap: 9px; max-width: calc(100% - 32px); padding: 9px 16px 9px 12px; border-radius: 999px; border: 0; background: #ffb42e; color: #182036; font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,.45); animation: tauntIn .25s cubic-bezier(.2,.9,.3,1); }
.taunt-bars { display: flex; align-items: center; gap: 2px; height: 16px; }
.taunt-bars i { display: block; width: 3px; height: 6px; border-radius: 2px; background: #182036; }
.taunt-pill.is-playing .taunt-bars i { animation: tauntBar .7s ease-in-out infinite; }
.taunt-pill.is-playing .taunt-bars i:nth-child(2) { animation-delay: .15s; }
.taunt-pill.is-playing .taunt-bars i:nth-child(3) { animation-delay: .3s; }
.taunt-pill.is-playing .taunt-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes tauntBar { 0%, 100% { height: 5px; } 50% { height: 16px; } }
@keyframes tauntIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* v85d: "X checked up with" + the winning card on the Whot end card. */
.whot-end-check { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0 6px; }
.whot-end-check[hidden] { display: none !important; }
.whot-end-check .awe-check-label { font: 600 14px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: rgba(245,243,255,.85); }
.whot-end-check .whot-card-face { position: relative; flex: 0 0 auto; width: 46px; height: 64px; font-size: 11px; transform: rotate(-4deg); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
/* v85e: voice playback debug log (open the app with ?tauntlog=1, ?tauntlog=0 to hide) */
.taunt-log { position: fixed; left: 8px; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 9999; max-height: 32vh; overflow: hidden; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.85); color: #9ff5b8; font: 11px/1.35 ui-monospace, Menlo, monospace; cursor: pointer; }
.taunt-log b { display: block; color: #ffb42e; margin-bottom: 3px; font-weight: 700; }

/* v87: last games on the stake card (results no longer go into the chat) */
.bet-last { margin: -2px 0 14px; padding: 4px 14px; border-radius: 16px; background: rgba(245,243,255,.05); }
.bet-last-t { margin: 8px 0 2px; font: 700 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; letter-spacing: .02em; color: rgba(245,243,255,.6); }
.bet-last-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(245,243,255,.07); font-size: 14px; color: #f5f3ff; }
.bet-last-t + .bet-last-row { border-top: 0; }
.bet-last-row span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bet-last-row small { font-size: 12px; color: rgba(245,243,255,.55); }
.bet-last-row b { font: 800 15px "Funnel Display", system-ui, sans-serif; flex: none; }
.bet-last-row.is-up b { color: #3fd17a; }
.bet-last-row.is-down b { color: #ff7a6b; }

/* v87: Someone new in the B2 look, asked once, "In a game", quiet request pill */
.sn-card { background: #1f2639 !important; }
.sn-q { margin: 6px 0 0; font: 700 20px/1.2 "Unbounded", "Funnel Display", system-ui, sans-serif; letter-spacing: -.01em; color: #f5f3ff; }
.sn-later { display: block; width: 100%; height: 46px; margin-top: 6px; border: 0; background: none; color: rgba(245,243,255,.72); font: 700 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; cursor: pointer; }
.sn-fine { margin: 2px 0 0; text-align: center; font-size: 12px; color: rgba(245,243,255,.5); }
.sn-busy { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 9px; background: rgba(255,180,46,.16); color: #ffcf77; font: 700 10.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; font-style: normal; vertical-align: 2px; }
.aw-req-pop { background: #1f2639 !important; border-color: rgba(255,180,46,.4) !important; }
.aw-req-pop .aw-cta.small { color: #1a1205 !important; }
.aw-req-pop.is-quiet { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 999px; }
.aw-req-pop.is-quiet .aw-req-card { flex: 1; min-width: 0; gap: 8px; }
.aw-req-pop.is-quiet .aw-req-av { width: 30px; height: 30px; overflow: hidden; border-radius: 50%; flex: none; }
.aw-req-pop.is-quiet .aw-req-av > * { transform: scale(.625); transform-origin: 0 0; }
.aw-req-pop.is-quiet .aw-req-copy b { font-size: 13px; }
.aw-req-pop.is-quiet .aw-req-copy small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-req-pop.is-quiet .aw-req-timer { display: none; }
.aw-req-pop.is-quiet .aw-req-btns { margin: 0; gap: 4px; flex: none; }
.aw-req-pop.is-quiet .aw-req-btns > * { flex: none; height: 34px !important; padding: 0 12px; font-size: 13px !important; border-radius: 17px !important; }

/* ===== v87: first-run card on Home (src/room/first-run.js) ===== */
html.awa-fr-solo .home-screen.awh .awh-hero { display: none !important; }
.afr { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 6px; font-family: "Funnel Display", system-ui, sans-serif; color: #f5f3ff; }
.afr-card { position: relative; border-radius: 22px; background: linear-gradient(160deg, #252e49, #1f2639); padding: 18px 16px 16px; box-shadow: inset 0 0 0 1px rgba(255,180,46,.22); }
.afr-h { margin: 0; font: 700 21px/1.15 "Unbounded", "Funnel Display", system-ui, sans-serif; letter-spacing: -.01em; color: #f5f3ff; padding-right: 26px; }
.afr-p { margin: 6px 0 14px; font: 500 14px/1.4 "Funnel Display", system-ui, sans-serif; color: #b8c0d8; }
.afr-wa { display: flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 16px; background: #25d366; color: #06240f !important; font: 800 16px "Funnel Display", system-ui, sans-serif; text-decoration: none; }
button.afr-wa { width: 100%; border: 0; cursor: pointer; } /* v89: Invite from contacts (Android) */
.afr-row { display: flex; gap: 8px; margin-top: 8px; }
.afr-row-sm { margin-top: 10px; }
.afr-gh { flex: 1; min-width: 0; height: 44px; border: 0; border-radius: 14px; background: rgba(245,243,255,.08); color: #f5f3ff !important; display: flex; align-items: center; justify-content: center; gap: 7px; font: 700 14px "Funnel Display", system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; }
.afr-steps { display: flex; gap: 6px; margin-top: 14px; }
.afr-p + .afr-steps { margin-top: 0; }
.afr-st { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.afr-st b { height: 4px; border-radius: 2px; background: rgba(245,243,255,.14); }
.afr-st.is-on b { background: #ffb42e; }
.afr-st span { font: 600 11.5px "Funnel Display", system-ui, sans-serif; color: #8d96b2; }
.afr-st.is-on span { color: #ffcf77; }
.afr-wait { display: flex; align-items: center; gap: 10px; background: rgba(245,243,255,.06); border-radius: 14px; padding: 11px 12px; margin-top: 12px; }
.afr-wait span { flex: 1; min-width: 0; font: 600 13px "Funnel Display", system-ui, sans-serif; color: #cfd5e8; }
.afr-wait a { font: 800 13px "Funnel Display", system-ui, sans-serif; color: #3fd17a !important; text-decoration: none; white-space: nowrap; }
.afr-play { width: 100%; height: 50px; margin-top: 14px; border: 0; border-radius: 16px; background: var(--b2-whot, #a81d34); color: #fff; font: 800 15px "Funnel Display", system-ui, sans-serif; cursor: pointer; }
.afr-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(245,243,255,.08); color: #cfd5e8; display: grid; place-items: center; cursor: pointer; }
.afr-inv { display: flex; align-items: center; gap: 12px; border-radius: 20px; background: #ffb42e; color: #1a1205; padding: 12px 12px 12px 14px; }
.afr-inv-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.afr-inv-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.afr-inv-copy b { font: 700 15px/1.2 "Unbounded", "Funnel Display", system-ui, sans-serif; }
.afr-inv-copy small { font: 600 12.5px "Funnel Display", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afr-inv-go { height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: #1a1205; color: #ffb42e; font: 800 14px "Funnel Display", system-ui, sans-serif; cursor: pointer; flex: none; }
.afr-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 2px -4px; }
.afr-sec b { font: 700 15px "Unbounded", "Funnel Display", system-ui, sans-serif; }
.afr-sec small { font: 600 12px "Funnel Display", system-ui, sans-serif; color: #8d96b2; }
.afr-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3fd17a; margin-right: 6px; box-shadow: 0 0 0 3px rgba(63,209,122,.2); }
.afr-people { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.afr-people::-webkit-scrollbar { display: none; }
.afr-pp { width: 76px; flex: none; border: 0; border-radius: 16px; background: #1f2639; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #f5f3ff; cursor: pointer; }
.afr-pp-av { position: relative; width: 44px; height: 44px; border-radius: 50%; }
.afr-pp-av > :first-child { border-radius: 50%; overflow: hidden; }
.afr-pp-av em { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #3fd17a; box-shadow: 0 0 0 2px #1f2639; }
.afr-pp b { font: 700 12px "Funnel Display", system-ui, sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afr-pp small { font: 600 10.5px "Funnel Display", system-ui, sans-serif; color: #8d96b2; }
.afr-pp i { font: 800 11px "Funnel Display", system-ui, sans-serif; font-style: normal; color: #ffb42e; }
.afr-here { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 18px; background: #1f2639; padding: 14px; color: #f5f3ff; text-align: left; cursor: pointer; }
.afr-here span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.afr-here b { font: 700 14px "Funnel Display", system-ui, sans-serif; }
.afr-here small { font: 500 12.5px "Funnel Display", system-ui, sans-serif; color: #8d96b2; }
.afr-here i { font-style: normal; height: 36px; padding: 0 16px; border-radius: 12px; background: #ffb42e; color: #1a1205; font: 800 14px/36px "Funnel Display", system-ui, sans-serif; }
.afr-sheet { position: fixed; inset: 0; z-index: 700; background: rgba(5,8,16,.62); display: flex; align-items: flex-end; justify-content: center; }
.afr-sheet-card { position: relative; width: 100%; max-width: 520px; background: #1f2639; border-radius: 26px 26px 0 0; padding: 22px 20px calc(26px + env(safe-area-inset-bottom)); text-align: center; color: #f5f3ff; }
.afr-sheet-card .afr-h { padding: 0 30px; }
.afr-qr { width: 220px; height: 220px; margin: 4px auto 12px; padding: 14px; border-radius: 20px; background: #fff; }
.afr-qr svg { width: 100%; height: 100%; display: block; }
.afr-link { margin: 0; font: 600 13px "Funnel Display", system-ui, sans-serif; color: #8d96b2; }