/* ============================================================
   SHARED BASE — design system common to all Impostor games.
   Extracted from dance.css / word.css (#26): every rule here was
   byte-for-byte identical in both. Load this BEFORE the game's own
   stylesheet; game files keep only their game-specific rules and
   may override anything below.
   ============================================================ */


:root {
    --bg: #FBF8F3;
    --bg-soft: #f0e9dc;
    --card: #ffffff;
    --card-active: #1a2530;
    --ink: #2a2520;
    --ink-soft: #8a7e6f;
    --ink-faint: #b8ab98;
    --ink-on-dark: #ffffff;
    --ink-on-dark-soft: rgba(255,255,255,0.65);
    --accent-teal: #2f9e94;
    --accent-orange: #e88a3a;
    --accent-red: #d04a2f;
    --accent-yellow: #f0c75e;
    --ring-icon-bg: #ece3d2;
    --border: rgba(42, 37, 32, 0.08);
    --shadow: 0 2px 12px rgba(42, 37, 32, 0.06);
    --radius: 18px;
    --radius-lg: 26px;
  }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    user-select: none;
    -webkit-user-select: none;
  }

body { position: relative; }

.blob { display: none; }

#app {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }

.screen {
    display: none;
    flex-direction: column;
    flex: 1;
    animation: screenIn 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
  }

.screen.active { display: flex; }

@keyframes screenIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

.logo {
    text-align: center;
    margin: 20px 0 36px;
  }

.logo .headphones {
    display: block;
    margin: 0 auto 8px;
    width: 160px;
    height: auto;
    max-width: 60%;
  }

.logo h1 {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--ink);
  }

.logo .sub {
    margin-top: 14px;
    font-size: 15px;
    color: var(--ink-soft);
    font-weight: 400;
    letter-spacing: 0.2px;
  }

.logo .icon { display: inline-block; vertical-align: middle; margin-right: 8px; }

.tile {
    touch-action: manipulation;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s, color 0.2s;
  }

.tile:active:not(:disabled),
  .tile.is-pressed:not(:disabled),
  .tile:hover:not(:disabled) {
    background: var(--card-active);
    color: var(--ink-on-dark);
  }

.tile:active:not(:disabled),
  .tile.is-pressed:not(:disabled) {
    transform: scale(0.965);
    transition: transform 0.06s ease, background 0.2s, color 0.2s;
  }

/* Reduced-motion: no scaling, but keep the non-motion press feedback. */
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled),
  .btn.is-pressed:not(:disabled),
  .tile:active:not(:disabled),
  .tile.is-pressed:not(:disabled),
  .vote-row:active,
  .vote-row.is-pressed {
    transform: none;
  }
}

.tile-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

.tile-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }

.tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

.tile-stack {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 20px;
    gap: 16px;
  }

.tile-stack .tile-icon {
    width: 80px;
    height: 80px;
  }

.tile-stack .tile-icon img {
    width: 80px;
    height: 80px;
  }

.tile-stack .tile-body { width: 100%; }

.tile-stack .tile-title { font-size: 22px; }

.tile:hover .tile-icon,
  .tile:active .tile-icon { background: transparent; }

.tile-body { flex: 1; min-width: 0; }

.tile-title {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1;
  }

.tile-sub {
    color: var(--ink-soft);
    font-size: 14px;
    margin-top: 8px;
    transition: color 0.2s;
  }

.tile:hover .tile-sub,
  .tile:active .tile-sub { color: var(--ink-on-dark-soft); }

.tile-chevron {
    color: var(--ink-faint);
    flex-shrink: 0;
    transition: color 0.2s;
  }

.tile:hover .tile-chevron,
  .tile:active .tile-chevron { color: rgba(255,255,255,0.5); }

/* touch-action: manipulation is not cosmetic. iOS Safari ignores
   user-scalable=no, so double-tap-to-zoom stays live and every tap waits to
   see whether a second one is coming. Right after another gesture that wait
   can eat the tap entirely, which reads as "I had to press it twice". Opting
   out of double-tap zoom on the controls themselves makes the first tap
   count. Pinch zoom elsewhere on the page is untouched. */

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: var(--radius);
    padding: 17px 24px;
    touch-action: manipulation;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s;
    font-family: inherit;
    box-shadow: var(--shadow);
  }

.btn:active:not(:disabled),
  .btn.is-pressed:not(:disabled) {
    transform: scale(0.95);
    box-shadow: 0 1px 6px rgba(42, 37, 32, 0.10);
    filter: brightness(0.97);
    transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.06s ease;
  }

.btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.btn-primary {
    background: var(--card-active);
    color: var(--ink-on-dark);
  }

.btn-accent {
    background: #c8e8d9;
    color: var(--ink);
  }

.btn-secondary {
    background: var(--card);
    color: var(--ink);
  }

.btn-ghost {
    background: transparent;
    color: var(--ink-soft);
    box-shadow: none;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 20px;
  }

.btn-danger {
    background: var(--accent-red);
    color: #fff;
  }

.card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow);
  }

.stack > * + * { margin-top: 14px; }

.stack-lg > * + * { margin-top: 16px; }

.stack-sm > * + * { margin-top: 10px; }

.input {
    width: 100%;
    background: var(--bg-soft);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 16px 18px;
    color: var(--ink);
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
  }

.input:focus {
    outline: none;
    border-color: var(--accent-teal);
    background: #fff;
  }

.input::placeholder { color: var(--ink-faint); }

.input.code {
    text-align: center;
    font-family: 'Literata', Georgia, serif;
    font-size: 32px;
    letter-spacing: 14px;
    font-weight: 400;
    text-transform: uppercase;
  }

select.input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%238a7e6f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
  }

.label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
  }

.field-label {
    display: block;
    font-family: 'Literata', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: -0.2px;
  }

.code-boxes {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 28px 0;
  }

.code-box {
    width: 56px;
    height: 70px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow);
    border: 2px solid transparent;
    text-align: center;
    font-family: 'Literata', Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: var(--ink);
    text-transform: uppercase;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    caret-color: var(--accent-teal);
    transition: border-color 0.2s, opacity 0.2s;
  }

.code-box:focus { outline: none; border-color: var(--accent-teal); }

.code-box::placeholder { color: var(--ink-faint); font-weight: 400; }

.code-box:disabled { opacity: 0.5; }

.join-title { text-align: center; }

.join-title h2 {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 38px;
    color: var(--ink);
    letter-spacing: -0.3px;
  }

.join-title .sub {
    margin-top: 12px;
    font-size: 17px;
    color: var(--ink-soft);
  }

.input-line {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--ink);
    border-radius: 0;
    padding: 6px 0 14px;
    color: var(--ink);
    font-family: 'Literata', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    transition: border-color 0.2s;
  }

.input-line:focus {
    outline: none;
    border-color: var(--accent-teal);
  }

.input-line::placeholder {
    color: var(--ink-faint);
    font-weight: 500;
  }

.input-line.code {
    text-align: center;
    font-size: 38px;
    letter-spacing: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding-left: 14px;
  }

.stepper-line {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1.5px solid var(--ink-faint);
    border-radius: 999px;
    padding: 4px 12px;
    gap: 4px;
  }

.stepper-line button {
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.15s;
  }

.stepper-line button:disabled { opacity: 0.25; cursor: not-allowed; }

.stepper-line .value {
    font-family: 'Literata', Georgia, serif;
    font-size: 28px;
    font-weight: 400;
    min-width: 50px;
    text-align: center;
    color: var(--ink);
  }

.tile-action .tile-title { font-size: 20px; }

.tile-action { padding: 22px 24px; }

.tile-dark {
    background: var(--card-active);
    color: var(--ink-on-dark);
  }

.tile-dark .tile-sub { color: var(--ink-on-dark-soft); }

.tile-dark .tile-chevron { color: rgba(255,255,255,0.5); }

.tile-dark:hover:not(:disabled),
  .tile-dark:active:not(:disabled) { background: var(--card-active); color: var(--ink-on-dark); }

.eyebrow {
    text-align: center;
    color: var(--ink-soft);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px;
  }

.divider {
    display: flex;
    align-items: center;
    color: var(--ink-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 4px 0;
    font-weight: 600;
  }

.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

.divider::before { margin-right: 12px; }

.divider::after { margin-left: 12px; }

.room-code {
    text-align: center;
    padding: 28px 20px;
    border-radius: var(--radius-lg);
    background: var(--card-active);
    color: #fff;
  }

.room-code .label-sm {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
  }

.room-code .code-text {
    font-family: 'Literata', Georgia, serif;
    font-size: 52px;
    font-weight: 400;
    letter-spacing: 12px;
    color: #fff;
  }

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-soft);
    border-radius: 16px;
    padding: 6px;
  }

.stepper button {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: #fff;
    color: var(--ink);
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background 0.15s;
  }

.stepper button:active:not(:disabled) { background: var(--bg-soft); }

.stepper button:disabled { opacity: 0.3; box-shadow: none; }

.stepper .value {
    flex: 1;
    text-align: center;
    font-family: 'Literata', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
  }

.players { display: flex; flex-direction: column; gap: 10px; }

.player-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 18px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    transition: background 0.3s, color 0.3s;
  }

.player-row.ready {
    background: #d6efdc;
    color: var(--ink);
  }

.player-row.just-joined {
    animation: row-in 0.3s ease-out;
  }

.player-row.just-joined .player-avatar {
    animation: avatar-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

@keyframes row-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

@keyframes avatar-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
  }

@media (prefers-reduced-motion: reduce) {
    .player-row.just-joined,
    .player-row.just-joined .player-avatar { animation: none; }
  }

.player-ghost {
    position: fixed;
    margin: 0 !important;
    pointer-events: none;
    z-index: 6;
    animation: row-out 0.28s ease forwards;
  }

@keyframes row-out {
    to { opacity: 0; transform: translateX(10px) scale(0.96); }
  }

.confetti-bit {
    position: fixed;
    width: 5px; height: 9px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 999;
    animation: confetti-fly 0.65s ease-out forwards;
  }

@keyframes confetti-fly {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.55) rotate(var(--rot)); }
  }

.player-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    flex-shrink: 0;
    color: #fff;
    font-family: 'Literata', Georgia, serif;
  }

img.player-avatar {
    object-fit: cover;
  }

.player-name {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: inherit;
  }

.player-tag {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 6px;
  }

.tag-host { background: #c8e8d9; color: #2a8055; }

.tag-you  { background: #fae6a0; color: #8a6b1f; }

.player-row.ready .tag-host { background: #c8e8d9; color: #2a8055; }

.player-row.ready .tag-you  { background: #fae6a0; color: #8a6b1f; }

.player-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-faint);
  }

.player-row.ready .player-status { color: #2a8045; }

.sticky-actions {
    position: sticky;
    /* Cancel #app's 48px bottom padding on both the sticky constraint and
       the flow position so the bar hugs the viewport edge at all times. */
    bottom: -48px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 -24px -48px;
    padding: 12px 24px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg);
  }

#screen-lobby .stack-lg {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

#screen-lobby .sticky-actions { margin-top: auto; }

.countdown {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg);
  }

.countdown.active { display: flex; }

.countdown .num {
    font-family: 'Literata', Georgia, serif;
    font-size: 200px;
    font-weight: 400;
    color: var(--ink);
    animation: pop 1s ease-out;
  }

@keyframes pop {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

.imposter-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(208, 74, 47, 0.08);
    border: 1.5px solid rgba(208, 74, 47, 0.5);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-red);
  }

.reveal-card {
    background: var(--card-active);
    color: #fff;
    text-align: center;
    padding: 56px 28px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

.reveal-line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    margin-bottom: 14px;
  }

.imp-pill {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1.5px solid rgba(255, 122, 92, 0.7);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ff7a5c;
  }

.reveal-name {
    font-family: 'Literata', Georgia, serif;
    font-size: 44px;
    font-weight: 400;
    color: #fff;
    animation: revealPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1.05;
  }

@keyframes revealPop {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

.track-section:first-of-type { margin-top: 0; }

.track-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

.track-label.crew { color: var(--accent-teal); }

.track-label.imp  { color: var(--accent-red); }

.track-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

.track-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--card-active);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
  }

.track-info { flex: 1; min-width: 0; }

.track-title {
    font-family: 'Literata', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.track-artist {
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-120px);
    background: var(--card-active);
    color: #fff;
    padding: 12px 20px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    z-index: 200;
    transition: transform 0.3s ease;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  }

.toast.show { transform: translateX(-50%) translateY(0); }

.row { display: flex; gap: 10px; }

.row > * { flex: 1; }

.center { text-align: center; }

.small { font-size: 13px; color: var(--ink-soft); }

.you-pill {
    display: inline-block;
    background: #fae6a0;
    color: #8a6b1f;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    margin-left: 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

.player-row.ready .you-pill { background: #fae6a0; color: #8a6b1f; }

.back-btn {
    background: none;
    border: none;
    color: var(--ink-soft);
    font-size: 15px;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 12px;
    align-self: flex-start;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
  }

.back-btn:active { color: var(--ink); }

.lobby-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.code-chip {
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 7px 16px;
    font-family: 'Literata', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
    letter-spacing: 2px;
    margin-top: 10px;
    transition: background 0.2s;
  }

.code-chip:active { background: var(--bg-soft); }

.code-chip .copy-icon { color: var(--ink-soft); opacity: 0.7; }

.code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }

.code-row .code-chip { margin-top: 0; }

.qr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s;
  }

.qr-btn:active { background: var(--bg-soft); }

.lobby-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 16px;
  }

/* With no code chip beside it (Pass the Phone), the title has the row to
   itself and centres rather than hugging the left edge. */

.lobby-head.solo { justify-content: center; }

.lobby-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

.lobby-head-icon {
    height: 56px;
    width: auto;
    flex-shrink: 0;
  }

.lobby-head-title h1 {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin: 0;
  }

.lobby-head .code-row { margin-top: 0; flex-shrink: 0; }

.cat-trigger {
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: var(--bg-soft);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 14px 18px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--ink);
    transition: background 0.15s;
  }

.cat-trigger > span {
    font-family: 'Literata', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
  }

.cat-trigger:active { background: #e8e0d0; }

.cat-trigger-chevron { color: var(--ink-soft); flex-shrink: 0; }

/* Modals are inset by a fixed amount and take whatever height is left, so a
     taller screen shows more rows rather than more empty space. The inset lives
     in these two custom properties, which both the backdrop's padding and the
     sheet's max-height read, so the two can never drift apart. The max() keeps
     the sheet clear of the notch and home indicator in the native shell. */

.cat-modal-backdrop {
    --modal-inset-top: max(20px, env(safe-area-inset-top));
    --modal-inset-bottom: max(20px, env(safe-area-inset-bottom));
    position: fixed;
    inset: 0;
    z-index: 150;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgb(222 208 191 / 40%);
    padding: var(--modal-inset-top) 20px var(--modal-inset-bottom);
  }

.cat-modal-backdrop.open { display: flex; }

.cat-modal {
    position: relative;
    background: #fff;
    border-radius: 26px;
    width: 100%;
    max-width: 460px;
    /* vh first as a fallback; dvh wins where supported so mobile browser
       chrome sliding in and out doesn't clip the sheet. */
    max-height: calc(100vh - var(--modal-inset-top, 20px) - var(--modal-inset-bottom, 20px));
    max-height: calc(100dvh - var(--modal-inset-top, 20px) - var(--modal-inset-bottom, 20px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.22);
    animation: catModalIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

.cat-hint {
    position: absolute;
    top: 58px;
    left: 20px;
    z-index: 10;
    max-width: 240px;
    background: var(--card-active);
    color: var(--ink-on-dark);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    animation: catHintIn 0.28s ease-out;
  }

.cat-hint[hidden] { display: none; }

.cat-hint::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: var(--card-active);
    transform: rotate(45deg);
    border-radius: 2px;
  }

@keyframes catHintIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

@keyframes catModalIn {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

.cat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 0;
    flex-shrink: 0;
  }

/* The mode picker's header holds nothing but the close button, which
   space-between would park on the left. Push it to the right, where a close
   control belongs.
   Scoped to this one modal on purpose. The QR, how-to and feedback sheets in
   all three games have single-button headers too, so an unscoped rule would
   quietly move every close button in the app. That may well be the right
   call, but it is a separate decision from the mode picker. */

#mode-modal-backdrop .cat-modal-header > :only-child { margin-left: auto; }

.cat-select-btn {
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 8px 18px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

.cat-select-btn:active { background: var(--bg-soft); }

.cat-select-btn.active {
    background: var(--card-active);
    border-color: var(--card-active);
    color: var(--ink-on-dark);
  }

.cat-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    padding: 0;
    border-radius: 10px;
    transition: background 0.15s;
  }

.cat-modal-close:active { background: var(--bg-soft); }

.cat-modal-title {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    color: var(--ink);
    margin: 0;
  }

#howto-modal-body { padding: 4px 16px 16px; }

.cat-modal-list {
    overflow-y: auto;
    padding: 0 0 8px;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }

.home-footer {
    text-align: center;
    padding: 4px 24px 8px;
  }

.feedback-link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 8px;
  }

.feedback-link:active { color: var(--ink); }

.fbp-card { max-width: 340px; }

.fbp-body { padding: 0 24px 28px; text-align: center; }

.fbp-title {
    font-family: 'Literata', Georgia, serif;
    font-size: 24px;
    color: var(--ink);
  }

.fb-emojis { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }

.fb-emoji {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
    padding: 8px;
    border-radius: 12px;
    transition: transform 0.12s ease;
  }

.fb-emoji:active { transform: scale(1.3); }

.fbp-body .feedback-link { font-size: 13px; margin-top: 6px; }

.fb-body {
    padding: 4px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

.fb-title {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--ink);
    margin: 0;
  }

.fb-desc {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: -4px 0 4px;
  }

.fb-field {
    width: 100%;
    border: 1.5px solid var(--bg-soft);
    border-radius: 14px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    padding: 13px 15px;
    box-sizing: border-box;
    transition: border-color 0.15s;
  }

.fb-field:focus { outline: none; border-color: var(--accent-teal); }

textarea.fb-field { min-height: 120px; resize: vertical; line-height: 1.5; }

.fb-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 2px 0 -8px;
    letter-spacing: 0.3px;
  }

.fb-send {
    background: var(--card-active);
    color: var(--ink-on-dark);
    border: none;
    border-radius: var(--radius);
    padding: 15px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: opacity 0.2s;
    margin-top: 4px;
  }

.fb-send:disabled { opacity: 0.45; cursor: default; }

.share-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 56px;
  }

.share-title {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 30px;
    color: var(--ink);
    margin: 0;
  }

.share-hint {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
    max-width: 260px;
    margin: 18px 0 0;
  }

.qr-card {
    margin-top: 22px;
    background: #fff;
    border-radius: 20px;
    padding: 16px;
    width: 168px;
    height: 168px;
    box-shadow: 0 2px 14px rgba(42, 37, 32, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.qr-card svg { width: 100%; height: 100%; display: block; }

.qr-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px 30px;
  }

.qr-modal-hint {
    font-size: 15px;
    color: var(--ink-soft);
    margin: 0 0 18px;
  }

.qr-modal-code {
    margin-top: 16px;
    font-family: 'Literata', Georgia, serif;
    font-size: 26px;
    letter-spacing: 6px;
    color: var(--ink);
    padding-left: 6px;
  }

.code-divider {
    font-size: 13px;
    color: var(--ink-faint);
    margin: 16px 0 0;
    letter-spacing: 0.3px;
  }

#share-code-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
    cursor: pointer;
  }

#share-code-boxes .code-box {
    width: 56px;
    height: 70px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Literata', Georgia, serif;
    font-size: 32px;
    color: var(--ink);
    box-shadow: 0 2px 14px rgba(42, 37, 32, 0.08);
  }

.share-copy-btn {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    padding: 11px 22px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s;
  }

.share-copy-btn:active { background: var(--bg-soft); }

.cat-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 16px 24px 14px;
    border-bottom: 1px solid var(--border);
  }

.cat-row {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 18px 56px 18px 24px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    color: var(--ink);
  }

.cat-row:last-child { border-bottom: none; }

.cat-row.selected {
    background: var(--card-active);
    color: var(--ink-on-dark);
    border-bottom-color: var(--card-active);
  }

.cat-row-title {
    font-family: 'Literata', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 8px;
  }

.cat-row-desc {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.35;
  }

.cat-row.selected .cat-row-desc { color: var(--ink-on-dark-soft); }

.cat-check {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }

.cat-row.selected .cat-check {
    border-color: var(--ink-on-dark);
    background: var(--ink-on-dark);
    color: var(--card-active);
  }

.cat-check svg { width: 14px; height: 14px; display: block; }

.cat-modal-footer {
    flex-shrink: 0;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: #fff;
  }

.cat-done {
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-on-dark);
    background: var(--card-active);
    border-radius: 16px;
    padding: 15px 20px;
    transition: opacity 0.15s;
  }

.cat-done:active { opacity: 0.85; }

.cat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-bottom: 12px;
  }

.cat-label svg { opacity: 0.65; }

.cat-display {
    font-family: 'Literata', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    padding: 6px 0;
  }

.imposter-pill {
    display: inline-flex;
    align-items: stretch;
    background: #fae6a0;
    color: #8a6b1f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
  }

.imposter-pill .imp-label {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    white-space: nowrap;
    gap: 2px;
  }

.imposter-pill button {
    background: transparent;
    border: none;
    color: inherit;
    width: 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.15s;
  }

.imposter-pill button:active:not(:disabled) { background: rgba(0,0,0,0.08); }

.imposter-pill button:disabled { opacity: 0.35; cursor: not-allowed; }

.avatar-c1 { background: #fae6a0; color: var(--ink); }

.avatar-c2 { background: #bfe5c8; color: var(--ink); }

.avatar-c3 { background: #f4c4b7; color: var(--ink); }

.avatar-c4 { background: #f9d8aa; color: var(--ink); }

.avatar-c5 { background: #d2c2e8; color: var(--ink); }

.avatar-c6 { background: #b8e8c1; color: var(--ink); }

.avatar-c7 { background: #bfd7f0; color: var(--ink); }

.avatar-c8 { background: #f3c5d1; color: var(--ink); }

.home-fold {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 120px);
  }

.home-fold-spacer { flex: 1; min-height: 24px; }

.howto-anchor {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-soft);
    padding: 14px 16px;
    margin: 16px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    letter-spacing: 0.3px;
    align-self: center;
    transition: color 0.2s, transform 0.2s;
  }

.howto-anchor:hover { color: var(--ink); }

.howto-anchor:active { transform: translateY(2px); }

.howto-anchor .arrow { animation: anchorBob 2.4s ease-in-out infinite; }

@keyframes anchorBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
  }

.how-to-play {
    padding: 56px 0 32px;
    scroll-margin-top: 24px;
  }

.howto-header { text-align: center; margin-bottom: 30px; }

.howto-header h2 {
    font-family: 'Literata', Georgia, serif;
    font-size: 38px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.3px;
  }

.howto-header .howto-sub {
    margin-top: 10px;
    color: var(--ink-soft);
    font-size: 16px;
  }

.howto-def {
    max-width: 560px;
    margin: 0 auto 34px;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
    text-align: center;
  }

.howto-def strong { color: var(--ink); font-weight: 600; }

.howto-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
  }

.howto-step {
    display: flex;
    gap: 18px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px 20px;
    box-shadow: var(--shadow);
  }

.step-num {
    font-family: 'Literata', Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    color: var(--accent-teal);
    flex-shrink: 0;
    width: 28px;
    text-align: center;
    line-height: 1;
    padding-top: 2px;
  }

.step-body { flex: 1; min-width: 0; }

.step-body h3 {
    font-family: 'Literata', Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.2;
  }

.step-body p {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.5;
    margin: 0;
  }

.faq-list { display: flex; flex-direction: column; gap: 10px; }

.faq-item {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 4px 20px;
  }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--ink);
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '';
    width: 9px; height: 9px;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-right: 4px;
  }

.faq-item[open] summary::after { transform: rotate(-135deg); }

.faq-item p {
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
    padding: 0 0 18px;
  }

::-webkit-scrollbar { width: 0; display: none; }

/* ============================================================
   GAME MODE PICKER
   Shared by the dance and word games. These lived in dance.css until the
   word game picked up the same picker; the dance-only pieces (the compact
   player card, the "coming soon" badge and the interest button) stayed
   behind. Declared after .cat-row on purpose, since .mode-row restyles the
   category picker's flat rows into spaced cards.
   ============================================================ */

/* Stacked sections inside one card, separated by thin dividers. Two names for
   the same thing: dance's card carries the music picker below the mode, the
   word game's carries the mode's own settings. */

.mode-card,
  .mode-music-card { display: flex; flex-direction: column; gap: 16px; }

.section-divider {
    height: 1px;
    background: var(--border);
    margin: 0 -18px; /* extend into the card's horizontal padding */
  }

/* The trigger is deliberately light: no background, no chevron box, snug
   padding, so the picker below it is the only "button-shaped" control. The
   opacity dip on tap keeps the affordance so it doesn't feel dead. */

.mode-trigger {
    background: transparent;
    padding: 4px 0;
    transition: opacity 0.15s;
  }

.mode-trigger:active {
    background: transparent;
    opacity: 0.6;
  }

.mode-trigger .mode-trigger-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
  }

.mode-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--ink-soft);
    flex-shrink: 0;
  }

.mode-trigger-icon svg { width: 100%; height: 100%; }

.mode-trigger-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Breathing room around the mode-picker card tiles. Scoped to the id, not
   the shared .cat-modal-list class, so the category picker's flat list
   keeps its full-bleed dividers. */

#mode-modal-list { padding: 24px; }

.mode-row {
    /* Card layout: icon + text sit side-by-side in a rounded, bordered tile
       with space between cards, overriding .cat-row's flat list look. */
    display: flex !important;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border) !important;
    border-radius: 20px;
    /* !important so this wins over .cat-row regardless of which stylesheet
       the two end up in. */
    padding: 16px 16px 16px 12px !important;
    margin-bottom: 18px;
  }

.mode-row:last-child { margin-bottom: 0; }

.mode-row.selected { border-color: var(--card-active) !important; }

.mode-row .mode-row-icon {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    flex-shrink: 0;
    align-self: center;
  }

.mode-row.selected .mode-row-icon { color: var(--ink-on-dark); }

.mode-row-icon svg { width: 100%; height: 100%; }

.mode-row-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.mode-row-body { flex: 1; min-width: 0; }

.mode-row-titrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   PASS THE PHONE ROSTER
   The rows are the same .player-row as a real lobby; these add the per-row
   edit controls and the add row. Only the word game uses them today.
   ============================================================ */

.roster-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
  }

/* 44px square, which is the smallest target a fingertip hits reliably. The
   icon inside stays 18px; the extra is invisible until the button is pressed,
   so the row looks the same and is far easier to hit. */

.roster-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    line-height: 0;
    color: var(--ink-faint);
    touch-action: manipulation;
  }

.roster-btn.roster-del { color: var(--ink); }

.roster-btn:active:not(:disabled) { background: rgba(42, 37, 32, 0.07); }

/* At the three-player floor the trash is inert, so say so rather than
   letting a tap silently do nothing. */

.roster-btn:disabled { opacity: 0.3; cursor: default; }

/* Editing borrows the row itself rather than swapping in a different
   control, so the name does not jump when it becomes a field. The 1px of
   padding given back keeps the row the same height as the thicker border
   comes in. */

.player-row.editing {
    border-color: var(--ink);
    border-width: 2px;
    padding: 11px 15px;
  }

.roster-input {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
  }

.add-player-row {
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 15px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }

.add-player-row:active:not(:disabled) { background: var(--bg-soft); }

.add-player-row:disabled { opacity: 0.45; cursor: default; }