/* Layer order: lower layers have less specificity priority */
@layer reset, tokens, base, components, responsive, utilities;

@layer tokens {
  :root {
    color-scheme: dark;
    --bg-base: #050505;
    --bg-panel: #0a0f14;
    --bg-card: rgba(10, 15, 20, 0.95);
    --text-main: #e0e6ed;
    --text-soft: #94a3b8;
    --line: #1e293b;

    /* Cyberpunk Palette */
    --neon-cyan: #00f3ff;
    --neon-pink: #bc13fe;
    --neon-green: #0f0;
    --neon-red: #f00;

    --primary: var(--neon-cyan);
    --primary-glow: rgba(0, 243, 255, 0.3);
    --accent: var(--neon-pink);
    --accent-glow: rgba(188, 19, 254, 0.3);

    --ok: var(--neon-green);
    --alert: var(--neon-red);

    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    --shadow: 0 0 20px rgba(0, 243, 255, 0.1);
    --border-glow: 0 0 10px rgba(0, 243, 255, 0.2);

    /* Semantic colors */
    --text-bright: #fff;
    --text-on-primary: #000;
    --text-on-accent: #000;
    --bg-input: rgba(0, 0, 0, 0.3);
    --bg-input-focus: rgba(0, 0, 0, 0.5);
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-modal: rgba(10, 15, 20, 0.98);
    --btn-primary-hover-bg: #fff;
    --btn-primary-hover-color: #000;
    --scanline-opacity: 0.15;
    --ambient-bg: radial-gradient(circle at 50% 50%, rgba(188, 19, 254, 0.05), transparent 70%);
    --grid-line: rgba(0, 243, 255, 0.03);
    --bg-deep: rgba(0, 0, 0, 0.8);
    --bg-deep-focus: rgba(0, 0, 0, 0.9);
    --placeholder-color: rgba(255, 255, 255, 0.45);
    --subtle-highlight: rgba(255, 255, 255, 0.03);
    --subtle-highlight-strong: rgba(255, 255, 255, 0.05);
    --card-inset-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
  }

  /* Light theme */
  [data-theme="light"] {
    color-scheme: light;
    --bg-base: #e8ecf0;
    --bg-panel: #dde2e8;
    --bg-card: rgba(225, 230, 238, 0.97);
    --text-main: #1a1e2e;
    --text-soft: #4a5568;
    --line: #bfc8d6;

    /* Adjusted neon for light backgrounds — deeper for contrast */
    --neon-cyan: #0099aa;
    --neon-pink: #9b00d9;
    --neon-green: #008a00;
    --neon-red: #cc0000;

    --primary: var(--neon-cyan);
    --primary-glow: rgba(0, 153, 170, 0.25);
    --accent: var(--neon-pink);
    --accent-glow: rgba(155, 0, 217, 0.2);

    --ok: var(--neon-green);
    --alert: var(--neon-red);

    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --border-glow: 0 0 8px rgba(0, 153, 170, 0.2);

    --text-bright: #0d1117;
    --text-on-primary: #fff;
    --text-on-accent: #fff;
    --bg-input: rgba(255, 255, 255, 0.6);
    --bg-input-focus: rgba(255, 255, 255, 0.8);
    --bg-overlay: rgba(0, 0, 0, 0.35);
    --bg-modal: rgba(225, 230, 238, 0.98);
    --btn-primary-hover-bg: #006070;
    --btn-primary-hover-color: #fff;
    --scanline-opacity: 0.04;
    --ambient-bg: radial-gradient(circle at 50% 50%, rgba(155, 0, 217, 0.03), transparent 70%);
    --grid-line: rgba(0, 153, 170, 0.04);
    --bg-deep: rgba(255, 255, 255, 0.85);
    --bg-deep-focus: rgba(255, 255, 255, 0.95);
    --placeholder-color: rgba(0, 0, 0, 0.4);
    --subtle-highlight: rgba(0, 0, 0, 0.025);
    --subtle-highlight-strong: rgba(0, 0, 0, 0.04);
    --card-inset-shadow: inset 0 0 30px rgba(0, 0, 0, 0.04);
  }

  /* System preference — applies when no data-theme is set */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      color-scheme: light;
      --bg-base: #e8ecf0;
      --bg-panel: #dde2e8;
      --bg-card: rgba(225, 230, 238, 0.97);
      --text-main: #1a1e2e;
      --text-soft: #4a5568;
      --line: #bfc8d6;

      --neon-cyan: #0099aa;
      --neon-pink: #9b00d9;
      --neon-green: #008a00;
      --neon-red: #cc0000;

      --primary: var(--neon-cyan);
      --primary-glow: rgba(0, 153, 170, 0.25);
      --accent: var(--neon-pink);
      --accent-glow: rgba(155, 0, 217, 0.2);

      --ok: var(--neon-green);
      --alert: var(--neon-red);

      --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      --border-glow: 0 0 8px rgba(0, 153, 170, 0.2);

      --text-bright: #0d1117;
      --text-on-primary: #fff;
      --text-on-accent: #fff;
      --bg-input: rgba(255, 255, 255, 0.6);
      --bg-input-focus: rgba(255, 255, 255, 0.8);
      --bg-overlay: rgba(0, 0, 0, 0.35);
      --bg-modal: rgba(225, 230, 238, 0.98);
      --btn-primary-hover-bg: #006070;
      --btn-primary-hover-color: #fff;
      --scanline-opacity: 0.04;
      --ambient-bg: radial-gradient(circle at 50% 50%, rgba(155, 0, 217, 0.03), transparent 70%);
      --grid-line: rgba(0, 153, 170, 0.04);
      --bg-deep: rgba(255, 255, 255, 0.85);
      --bg-deep-focus: rgba(255, 255, 255, 0.95);
      --placeholder-color: rgba(0, 0, 0, 0.4);
      --subtle-highlight: rgba(0, 0, 0, 0.025);
      --subtle-highlight-strong: rgba(0, 0, 0, 0.04);
      --card-inset-shadow: inset 0 0 30px rgba(0, 0, 0, 0.04);
    }
  }
}

@layer reset {
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-base);
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;
    font-weight: 500;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: var(--ambient-bg);
    z-index: -1;
  }

  .scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1));
    background-size: 100% 4px;
    z-index: 999;
    opacity: var(--scanline-opacity);
  }
}

/* end @layer reset */

@layer base {
  .app-shell {
    width: min(1200px, 95vw);
    margin: 1.5rem auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: calc(100dvh - 3rem);
  }

  /* Typography */
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    margin: 0;
    text-wrap: balance;
    color: var(--accent);
    text-transform: uppercase;
  }

  /* Selective uppercase — only structural/branding elements */
  .brand h1,
  .badge,
  .encryption-badge,
  .scan-badge,
  .timer-label,
  .status-sub,
  .sidebar-title,
  .game-status-display h2,
  .query-badge,
  .vote-card-status,
  .vote-card-answer-label,
  .input-status-bar {
    text-transform: uppercase;
  }
}

/* end @layer base */

@layer components {

  /* Topbar */
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    view-transition-name: topbar;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .brand-logo {
    color: var(--primary);
    filter: drop-shadow(0 0 5px var(--primary));
  }

  .brand h1 {
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    color: var(--text-bright);
    text-shadow: 0 0 10px var(--primary-glow);
  }

  .brand-subtitle {
    font-size: 0.8rem;
    color: var(--primary);
    letter-spacing: 0.2em;
    margin: 0;
  }

  /* Custom Dropdown */
  .cyber-select {
    position: relative;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    user-select: none;
  }

  .cyber-select-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    color: var(--text-main);
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
    transition: border-color 0.2s, box-shadow 0.2s;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }

  .cyber-select-trigger:hover,
  .cyber-select.open .cyber-select-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 6px var(--primary-glow);
  }

  .cyber-select-arrow {
    color: var(--primary);
    font-size: 0.7em;
    transition: transform 0.2s;
  }

  .cyber-select.open .cyber-select-arrow {
    transform: rotate(180deg);
  }

  .cyber-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--primary);
    box-shadow: 0 4px 20px rgba(0, 243, 255, 0.15), var(--card-inset-shadow);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    z-index: 1000;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }

  .cyber-select.open .cyber-select-menu {
    display: block;
    animation: selectSlideIn 0.15s ease-out;
  }

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

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .cyber-select-option {
    padding: 0.4rem 0.75rem;
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  .cyber-select-option:hover {
    background: rgba(0, 243, 255, 0.08);
    color: var(--primary);
  }

  .cyber-select-option.active {
    color: var(--primary);
    background: rgba(0, 243, 255, 0.12);
    border-left: 2px solid var(--primary);
    padding-left: calc(0.75rem - 2px);
    text-shadow: 0 0 8px var(--primary-glow);
    font-weight: 700;
  }

  .cyber-select-option.active::before {
    content: "▸ ";
    color: var(--primary);
  }

  .cyber-select--inline {
    display: inline-block;
    vertical-align: baseline;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
  }

  .cyber-select--inline .cyber-select-trigger {
    margin: 0;
    padding: 0.1rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--text-soft);
    border-radius: 0;
    clip-path: none;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    vertical-align: baseline;
  }

  .cyber-select--inline .cyber-select-trigger:hover,
  .cyber-select--inline.open .cyber-select-trigger {
    border-bottom-color: var(--primary);
    border-bottom-style: solid;
    box-shadow: none;
  }

  .cyber-select--inline .cyber-select-menu {
    right: auto;
    left: 0;
  }

  /* Views */
  .view {
    display: none;
    animation: fadeIn 0.4s ease-out;
  }

  .view.active {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Cyber Card */
  .cyber-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    padding: 1.5rem;
    position: relative;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
  }

  .cyber-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--primary);
    border-left: 2px solid var(--primary);
  }

  .cyber-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
  }

  /* Hero Section */
  .glitch-text {
    font-size: clamp(1.5rem, 5vw, 3rem);
    font-weight: 900;
    text-shadow: 0 0 10px var(--accent-glow);
    margin-bottom: 0.5rem;
  }

  .view-description {
    color: var(--primary);
    font-family: var(--font-display);
    letter-spacing: 0.1em;
    font-size: 0.9rem;
  }

  /* Home Card */
  .home-card {
    border: 1px solid var(--primary);
    box-shadow: var(--shadow);
  }

  .home-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .home-identity .form-group {
    flex: 1;
    margin-bottom: 0;
  }

  .avatar-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: var(--bg-panel);
    font-size: 2rem;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-content: center;
    box-shadow: 0 0 15px var(--accent-glow);
    transition: all 0.3s ease;
  }

  .avatar-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--accent-glow);
  }

  .avatar-edit-icon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--accent);
    color: var(--text-on-accent);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.75rem;
    display: grid;
    place-content: center;
  }

  /* Forms */
  .form-group {
    margin-bottom: 1rem;
  }

  .cyber-label {
    display: block;
    color: var(--primary);
    font-family: var(--font-display);
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
    letter-spacing: 0.1em;
  }

  .cyber-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    background: var(--bg-input);
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  .cyber-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: var(--border-glow), inset 0 0 0 1px var(--primary);
  }

  .cyber-input-wrapper input,
  .cyber-input-wrapper input[type] {
    width: 100%;
    background: transparent !important;
    border: none !important;
    padding: 0.65rem 0.75rem;
    color: var(--text-bright);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none !important;
    box-shadow: none !important;
  }

  .input-icon {
    padding-right: 1rem;
    font-size: 1.2rem;
    opacity: 0.7;
  }

  /* Buttons */
  .actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .btn {
    flex: 1;
    padding: 0.75rem;
    border: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.8);
  }

  .btn.primary {
    background: var(--primary);
    color: var(--text-on-primary);
  }

  .btn.primary:hover {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-color);
    box-shadow: 0 0 20px var(--primary);
  }

  .btn.secondary {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
  }

  .btn.secondary:hover {
    background: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 0 20px var(--accent);
  }

  .btn.ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
  }

  .btn.ghost:hover {
    border-color: var(--text-main);
    color: var(--text-main);
  }

  .btn.destructive {
    border: 1px solid var(--alert);
    color: var(--alert);
    background: transparent;
  }

  .btn.destructive:hover {
    background: var(--alert);
    color: var(--text-on-primary);
  }

  /* Rooms List */
  .search-wrapper {
    border: 1px solid var(--accent);
  }

  .search-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow), inset 0 0 0 1px var(--accent);
  }

  .search-icon {
    padding-left: 1rem;
    color: var(--accent);
  }

  .scan-badge {
    background: var(--accent);
    color: var(--text-on-accent);
    padding: 0.2rem 0.5rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    margin-right: 0.5rem;
  }

  .rooms-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1rem;
  }

  .room-item {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
  }

  .room-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }

  .room-item.selected {
    border-color: var(--primary);
    background: rgba(0, 243, 255, 0.05);
  }

  .room-item-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .room-item strong {
    color: var(--text-bright);
    font-family: var(--font-display);
  }

  .badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--line);
    color: var(--text-soft);
    text-transform: uppercase;
  }

  .room-meta {
    font-size: 0.9rem;
    color: var(--text-soft);
    margin: 0.2rem 0;
  }

  /* Lobby */
  /* Cards use flex column for layout order; footer pushed on mobile */
  .view>.cyber-card:last-of-type,
  .view>form:last-of-type {
    display: flex;
    flex-direction: column;
  }

  .lobby-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .lobby-name-row h3 {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lobby-meta {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-soft);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.5rem;
  }

  .lobby-meta-item strong {
    color: var(--text-main);
  }

  .lobby-meta-divider {
    color: var(--line);
  }

  .lobby-counts {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text-soft);
  }

  .lobby-counts strong {
    color: var(--primary);
    font-size: 1.1rem;
  }

  .code-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.4rem;
    background: transparent;
    border: 1px dashed var(--primary);
    color: var(--primary);
    padding: 0.25rem 0.6rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .code-chip:hover {
    background: rgba(0, 243, 255, 0.08);
    box-shadow: 0 0 8px var(--primary-glow, rgba(0, 243, 255, 0.3));
  }

  .neon-text {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    text-shadow: 0 0 10px var(--accent-glow);
  }

  .players-list {
    display: grid;
    gap: 0.5rem;
  }

  .player-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem;
    background: var(--subtle-highlight);
    border-left: 2px solid transparent;
  }

  .player-item.ready {
    border-left-color: var(--ok);
  }

  .player-item.waiting {
    border-left-color: var(--alert);
  }

  .player-main {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .player-role {
    font-size: 0.8rem;
    color: var(--text-soft);
  }

  /* Game View */
  .game-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.75rem;
  }

  .status-sub {
    color: var(--primary);
    margin: 0;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
  }

  .game-timer-display {
    text-align: right;
  }

  .timer-label {
    display: block;
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 0.2em;
    margin-bottom: 0.2rem;
  }

  .digital-clock {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--text-bright);
    text-shadow: 0 0 10px var(--accent);
    line-height: 1;
    position: relative;
  }

  .digital-clock::before,
  .digital-clock::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-base);
  }

  .digital-clock::before {
    left: 2px;
    text-shadow: -1px 0 red;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
  }

  .digital-clock::after {
    left: -2px;
    text-shadow: -1px 0 blue;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
  }

  @keyframes glitch-anim {
    0% {
      clip: rect(11px, 9999px, 86px, 0);
    }

    5% {
      clip: rect(98px, 9999px, 3px, 0);
    }

    10% {
      clip: rect(51px, 9999px, 60px, 0);
    }

    15% {
      clip: rect(10px, 9999px, 98px, 0);
    }

    20% {
      clip: rect(76px, 9999px, 5px, 0);
    }

    25% {
      clip: rect(18px, 9999px, 94px, 0);
    }

    30% {
      clip: rect(61px, 9999px, 34px, 0);
    }

    35% {
      clip: rect(89px, 9999px, 12px, 0);
    }

    40% {
      clip: rect(27px, 9999px, 78px, 0);
    }

    45% {
      clip: rect(54px, 9999px, 45px, 0);
    }

    50% {
      clip: rect(93px, 9999px, 21px, 0);
    }

    55% {
      clip: rect(6px, 9999px, 67px, 0);
    }

    60% {
      clip: rect(39px, 9999px, 88px, 0);
    }

    65% {
      clip: rect(72px, 9999px, 15px, 0);
    }

    70% {
      clip: rect(44px, 9999px, 56px, 0);
    }

    75% {
      clip: rect(13px, 9999px, 91px, 0);
    }

    80% {
      clip: rect(82px, 9999px, 29px, 0);
    }

    85% {
      clip: rect(33px, 9999px, 74px, 0);
    }

    90% {
      clip: rect(66px, 9999px, 49px, 0);
    }

    95% {
      clip: rect(96px, 9999px, 8px, 0);
    }

    100% {
      clip: rect(22px, 9999px, 63px, 0);
    }
  }

  @keyframes glitch-anim-2 {
    0% {
      clip: rect(65px, 9999px, 100px, 0);
    }

    5% {
      clip: rect(52px, 9999px, 74px, 0);
    }

    10% {
      clip: rect(79px, 9999px, 85px, 0);
    }

    15% {
      clip: rect(25px, 9999px, 58px, 0);
    }

    20% {
      clip: rect(96px, 9999px, 12px, 0);
    }

    25% {
      clip: rect(41px, 9999px, 69px, 0);
    }

    30% {
      clip: rect(8px, 9999px, 93px, 0);
    }

    35% {
      clip: rect(63px, 9999px, 27px, 0);
    }

    40% {
      clip: rect(88px, 9999px, 46px, 0);
    }

    45% {
      clip: rect(16px, 9999px, 81px, 0);
    }

    50% {
      clip: rect(74px, 9999px, 35px, 0);
    }

    55% {
      clip: rect(32px, 9999px, 97px, 0);
    }

    60% {
      clip: rect(57px, 9999px, 19px, 0);
    }

    65% {
      clip: rect(91px, 9999px, 64px, 0);
    }

    70% {
      clip: rect(12px, 9999px, 86px, 0);
    }

    75% {
      clip: rect(48px, 9999px, 53px, 0);
    }

    80% {
      clip: rect(84px, 9999px, 22px, 0);
    }

    85% {
      clip: rect(29px, 9999px, 77px, 0);
    }

    90% {
      clip: rect(68px, 9999px, 43px, 0);
    }

    95% {
      clip: rect(94px, 9999px, 9px, 0);
    }

    100% {
      clip: rect(36px, 9999px, 61px, 0);
    }
  }

  .game-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    flex: 1;
  }

  .sidebar-collapse {
    border: none;
    padding: 0;
    margin: 0;
  }

  .sidebar-title {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
    list-style: none;
    cursor: default;
  }

  .sidebar-title::-webkit-details-marker {
    display: none;
  }

  .game-main-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
  }

  .cyber-box {
    border: 1px solid var(--primary);
    background: rgba(0, 243, 255, 0.02);
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
  }

  .cyber-box::before,
  .cyber-box::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--primary);
    transition: all 0.3s;
  }

  .cyber-box::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
  }

  .cyber-box::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
  }

  .cyber-header {
    text-align: center;
    padding: 1rem;
  }

  .encryption-badge {
    background: rgba(0, 243, 255, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  .cyber-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
  }

  .round-prompt {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.5vw, 1.5rem);
    color: var(--text-bright);
    margin-bottom: 1.25rem;
    max-width: min(80%, 100%);
  }

  .phase-content {
    width: 100%;
  }

  .phase-content textarea {
    width: 100%;
    background: var(--bg-input-focus);
    border: 1px solid var(--line);
    color: var(--text-bright);
    padding: 0.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 100px;
  }

  .phase-content textarea:focus {
    border-color: var(--primary);
    outline: none;
  }

  .cyber-actions {
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  .cyber-actions:empty {
    display: none;
    padding: 0;
  }

  /* Chat */
  .game-chat-panel {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }

  .chat-header h3 {
    font-size: 0.9rem;
    color: var(--text-soft);
    margin-bottom: 0.5rem;
  }

  .chat-messages {
    flex: 1;
    height: auto;
    overflow-y: auto;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .chat-message {
    padding: 0.3rem 0.5rem;
    border-left: 2px solid var(--line);
  }

  .chat-message .chat-meta {
    font-weight: bold;
  }

  .chat-message.self {
    border-left-color: var(--primary);
    background: rgba(0, 243, 255, 0.05);
  }

  .chat-message.system {
    border-left-color: var(--accent);
    color: var(--accent);
    font-style: italic;
  }

  .chat-message.qa-log {
    color: var(--primary);
    font-style: italic;
  }

  .chat-message.qa-question {
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: bold;
    background: rgba(0, 243, 255, 0.1);
    padding: 0.5rem;
  }

  .chat-message.qa-answer {
    color: var(--text-main);
    border-left-color: var(--text-main);
    font-style: italic;
    opacity: 0.9;
  }

  .chat-message.qa-answer .chat-meta::before {
    content: '⇢ ';
    font-weight: bold;
  }

  .chat-message.game-over {
    border: 1px solid var(--alert);
    background: var(--bg-panel);
    color: var(--alert);
    text-align: center;
    padding: 1rem;
    font-weight: bold;
    margin: 1rem 0;
  }

  .chat-form {
    display: flex;
    gap: 0.5rem;
  }

  .chat-form input {
    flex: 3;
    background: var(--bg-input);
    border: 1px solid var(--accent);
    color: var(--text-bright);
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
  }

  .chat-form button {
    width: auto;
    padding: 0.5rem 1.5rem;
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    font-weight: bold;
    min-width: 80px;
  }

  /* Victory Banner */
  .victory-banner {
    background: var(--bg-input-focus);
    border: 1px solid var(--primary);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .victory-banner.player-won {
    border-color: var(--ok);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
    background: linear-gradient(90deg, rgba(0, 255, 0, 0.1) 0%, transparent 100%);
  }

  .victory-banner.player-won h3 {
    color: var(--ok);
    text-shadow: 0 0 10px var(--ok);
  }

  .victory-banner.player-lost {
    border-color: var(--alert);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.1) 0%, transparent 100%);
  }

  .victory-banner.player-lost h3 {
    color: var(--alert);
    text-shadow: 0 0 10px var(--alert);
  }

  .victory-icon {
    font-size: 4rem;
  }

  .victory-text h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .results-grid h4 {
    color: var(--primary);
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }

  .results-grid .phase-list {
    display: grid;
    gap: .2rem;
  }

  .results-grid .phase-list-item {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
  }

  .results-grid .phase-list-item .badge {
    width: 5rem;
    height: fit-content;
  }

  /* Responsive */
  @media (max-width: 768px) {
    /* Round view: fill viewport but don't let chat stretch */
    #view-round.view.active {
      flex: 1;
    }

    .game-layout {
      grid-template-columns: 1fr;
      gap: 0.75rem;
      flex: 1;
    }

    .game-sidebar {
      order: 2;
    }

    .game-main-panel {
      order: 1;
      flex: 1;
      height: auto;
      gap: 0.75rem;
    }

    .sidebar-collapse:not([open]) .sidebar-title {
      margin-bottom: 0;
    }

    .sidebar-title {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .sidebar-title::after {
      content: '▾';
      font-size: 0.7em;
      color: var(--primary);
      transition: transform 0.2s;
    }

    .sidebar-collapse:not([open]) .sidebar-title::after {
      transform: rotate(-90deg);
    }

    .cyber-box {
      min-height: auto;
      flex: 1;
    }

    .cyber-body {
      padding: 1rem;
    }

    .cyber-actions {
      padding: 0.75rem;
    }

    /* Chat – constrained, no flex-grow */
    .game-chat-panel {
      flex: none;
      min-height: auto;
      padding-top: 0.75rem;
      gap: 0.25rem;
    }

    .chat-header h3 {
      margin-bottom: 0.25rem;
    }

    .chat-messages {
      flex: none;
      max-height: 28dvh;
      min-height: 3rem;
    }

    .chat-form {
      position: sticky;
      bottom: 0;
      z-index: 5;
      background: var(--bg-base);
      padding: 0.4rem 0;
    }

    .chat-form input {
      padding: 0.4rem 0.65rem;
    }

    .chat-form button {
      padding: 0.4rem 1rem;
    }

    .results-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Modal */
  .modal {
    background: transparent;
    border: none;
  }

  .modal-content {
    background: var(--bg-modal);
    border: 1px solid var(--primary);
    padding: 1.5rem;
    color: var(--text-bright);
    box-shadow: 0 0 30px var(--bg-overlay);
  }

  .avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
  }

  .avatar-choice {
    background: var(--subtle-highlight-strong);
    border: 1px solid var(--line);
    font-size: 2rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .avatar-choice:hover,
  .avatar-choice.selected {
    border-color: var(--primary);
    background: rgba(0, 243, 255, 0.1);
  }

  /* Form Elements & Inputs */
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--line);
    color: var(--text-bright);
    padding: 0.6rem 0.75rem;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: all 0.3s;
  }

  /* Inputs inside wrappers inherit wrapper border — no own border */
  .cyber-input-wrapper input[type="text"],
  .cyber-input-wrapper input[type="search"],
  .cyber-input-wrapper input[type="password"],
  .cyber-input-wrapper input[type="number"] {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  input[type="text"]:focus,
  input[type="search"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    border-color: var(--primary);
    box-shadow: var(--border-glow), inset 0 0 0 1px var(--primary);
    background: var(--bg-input-focus);
  }

  /* Focus override for wrapped inputs */
  .cyber-input-wrapper input[type="text"]:focus,
  .cyber-input-wrapper input[type="search"]:focus,
  .cyber-input-wrapper input[type="password"]:focus,
  .cyber-input-wrapper input[type="number"]:focus {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
  }

  /* Fieldsets */
  fieldset {
    border: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
    background: transparent;
  }

  legend {
    color: var(--primary);
    font-family: var(--font-display);
    padding: 0;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
    float: left;
    width: 100%;
  }

  /* Chip Options (Radio Buttons) */
  .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .chip-option {
    position: relative;
    cursor: pointer;
    user-select: none;
  }

  .chip-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .chip-option span {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--line);
    background: var(--bg-input);
    color: var(--text-soft);
    transition: all 0.2s;
    font-family: var(--font-body);
    font-size: 0.9rem;
  }

  .chip-option:hover span {
    border-color: var(--primary);
    color: var(--text-bright);
    box-shadow: var(--border-glow);
  }

  .chip-option input[type="radio"]:checked+span {
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
    font-weight: 600;
  }

  /* Select Styling */
  select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
    cursor: pointer;
  }

  select option {
    background: var(--bg-panel);
    color: var(--text-bright);
  }

  /* Lobby Edit Inputs */
  .lobby-edit-input {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--text-soft);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: inherit;
    max-width: 100%;
    padding: 0.1rem 0;
    border-radius: 0;
  }

  .lobby-name-row .lobby-edit-input {
    width: auto;
    min-width: 3ch;
  }

  .lobby-meta-item .lobby-edit-input {
    width: auto;
    min-width: 4ch;
    display: inline;
  }

  .lobby-edit-input:focus {
    border-bottom-color: var(--primary);
    border-bottom-style: solid;
    background: var(--bg-input);
    box-shadow: 0 2px 8px var(--primary-glow);
    outline: none;
  }

  /* Vote Phase Redesign */
  .vote-phase-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .vote-question-card {
    background: var(--bg-overlay);
    border: 1px solid var(--primary);
    padding: 1.5rem;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 0 15px var(--primary-glow);
    margin-bottom: 1rem;
  }

  .vote-question-card h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .vote-question-text {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--text-bright);
  }

  .vote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 1.5rem;
    width: 100%;
  }

  @media (min-width: 768px) {
    .vote-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    }

    .vote-card {
      padding: 1.5rem;
    }

    .vote-card-answer-text {
      font-size: 1.3rem;
    }

    .vote-card-avatar {
      width: 50px;
      height: 50px;
      font-size: 2rem;
    }
  }

  .vote-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
  }

  .vote-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
    transform: translateY(-2px);
  }

  .vote-card.targeted {
    border-color: var(--alert);
    box-shadow: 0 0 15px rgba(255, 0, 50, 0.3);
    background: rgba(40, 10, 10, 0.9);
  }

  .vote-card.self {
    opacity: 0.8;
    border-style: dashed;
    background: rgba(20, 20, 25, 0.5);
  }

  .vote-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.6rem;
  }

  .vote-card-avatar {
    font-size: 1.8rem;
    background: var(--bg-input);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid var(--line);
  }

  .vote-card-info {
    flex: 1;
    min-width: 0;
    /* Allow text truncation */
  }

  .vote-card-name {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--text-bright);
    display: block;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }

  .vote-card-status {
    font-size: 0.65rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .vote-card-status::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 4px var(--primary);
  }

  .vote-card.targeted .vote-card-status {
    color: var(--alert);
  }

  .vote-card.targeted .vote-card-status::before {
    background: var(--alert);
    box-shadow: 0 0 4px var(--alert);
  }

  .vote-card-answer-box {
    background: var(--bg-overlay);
    padding: 0.6rem;
    border-radius: 4px;
    border-left: 2px solid var(--accent);
    min-height: 60px;
    display: flex;
    flex-direction: column;
  }

  .vote-card-answer-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 0.3rem;
    display: block;
  }

  .vote-card-answer-text {
    font-style: normal;
    color: var(--text-bright);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.3;
    overflow-y: auto;
    max-height: 80px;
    text-shadow: 0 0 5px var(--bg-overlay);
  }

  .vote-card-actions {
    margin-top: auto;
  }

  .vote-btn {
    width: 100%;
    padding: 0.6rem;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .vote-btn:hover {
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: 0 0 15px var(--primary-glow);
  }

  .vote-card.targeted .vote-btn {
    background: var(--alert);
    color: var(--text-on-primary);
    border-color: var(--alert);
    pointer-events: none;
  }

  .vote-card.self .vote-btn {
    background: transparent;
    border-color: var(--text-soft);
    color: var(--text-soft);
    cursor: not-allowed;
    opacity: 0.5;
  }

  .targeted-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    border: 3px solid var(--alert);
    color: var(--alert);
    font-size: 1rem;
    font-weight: 900;
    padding: 0.5rem;
    text-transform: uppercase;
    background: var(--bg-deep-focus);
    pointer-events: none;
    box-shadow: 0 0 15px var(--alert);
    z-index: 10;
    white-space: normal;
    text-align: center;
    width: 90%;
    text-shadow: 0 0 5px var(--alert);
    animation: stamp-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes stamp-in {
    0% {
      transform: translate(-50%, -50%) scale(2) rotate(-15deg);
      opacity: 0;
    }

    100% {
      transform: translate(-50%, -50%) scale(1) rotate(-15deg);
      opacity: 1;
    }
  }

  /* Cyber Query Phase Redesign */
  .cyber-query-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
    width: 100%;
  }

  .cyber-query-box {
    position: relative;
    width: 100%;
    max-width: 800px;
    border: 2px solid var(--neon-cyan);
    background: linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px);
    background-size: 100% 4px;
    padding: 2rem 1.5rem;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.1), inset 0 0 30px rgba(0, 243, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* Corner accents for query box */
  .cyber-query-box::before,
  .cyber-query-box::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid var(--neon-cyan);
    transition: all 0.3s ease;
  }

  .cyber-query-box::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
  }

  .cyber-query-box::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
  }

  .query-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-deep);
    border: 1px solid var(--primary);
    color: var(--neon-cyan);
    padding: 0.3rem 1.5rem;
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    white-space: nowrap;
  }

  .query-content {
    text-align: center;
    width: 100%;
  }

  .query-tag {
    font-family: var(--font-display);
    color: var(--neon-cyan);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    opacity: 0.8;
    text-shadow: 0 0 5px var(--neon-cyan);
    margin: 0.5rem 0;
  }

  .query-text {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3.5vw, 2rem);
    color: var(--text-bright);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin: 1rem 0;
    line-height: 1.4;
    word-wrap: break-word;
  }

  .query-footer {
    font-size: 0.8rem;
    color: var(--text-soft);
    opacity: 0.6;
    margin-top: 1rem;
    font-family: monospace;
  }

  /* Cyber Input Area */
  .cyber-input-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid var(--neon-pink);
    background: var(--bg-deep);
    padding: 0.5rem;
    position: relative;
    box-shadow: 0 0 15px rgba(188, 19, 254, 0.2);
    transition: all 0.3s ease;
  }

  .input-wrapper:focus-within {
    box-shadow: 0 0 25px rgba(188, 19, 254, 0.4);
    background: var(--bg-deep-focus);
  }

  .input-wrapper.submitted {
    border-color: var(--ok);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
  }

  .input-wrapper.submitted .input-icon {
    color: var(--ok);
  }

  .input-wrapper.submitted .cyber-submit-btn {
    background: var(--ok);
    color: var(--text-on-primary);
  }

  .input-icon {
    font-size: 1.5rem;
    color: var(--neon-pink);
    padding: 0 1rem;
  }

  #responseInput {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-bright);
    font-family: var(--font-body);
    font-size: 1.2rem;
    padding: 1rem;
    outline: none;
  }

  #responseInput::placeholder {
    color: var(--placeholder-color);
  }

  /* Global placeholder contrast improvement */
  ::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
  }

  .cyber-submit-btn {
    background: var(--neon-pink);
    color: var(--text-on-accent);
    border: none;
    padding: 0.8rem 2rem;
    font-family: var(--font-display);
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
    /* Slight slant top-left */
    transition: all 0.2s ease;
    text-transform: uppercase;
    margin-left: 0.5rem;
  }

  .cyber-submit-btn:hover:not(:disabled) {
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-color);
    box-shadow: 0 0 15px var(--neon-pink);
  }

  .cyber-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    filter: grayscale(0.5);
  }

  .input-status-bar {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Light theme component overrides */
  [data-theme="light"] .scanlines {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.06));
    background-size: 100% 4px;
  }

  [data-theme="light"] .query-text {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }

  [data-theme="light"] .cyber-select-option:hover {
    background: rgba(0, 153, 170, 0.08);
  }

  [data-theme="light"] .cyber-select-option.active {
    background: rgba(0, 153, 170, 0.12);
  }

  [data-theme="light"] .room-item.selected {
    background: rgba(0, 153, 170, 0.05);
  }

  [data-theme="light"] .chat-message.self {
    background: rgba(0, 153, 170, 0.05);
  }

  [data-theme="light"] .chat-message.qa-question {
    background: rgba(0, 153, 170, 0.1);
  }

  [data-theme="light"] .vote-card.targeted {
    background: rgba(204, 0, 0, 0.06);
  }

  [data-theme="light"] .vote-card.self {
    background: rgba(0, 0, 0, 0.03);
  }

  [data-theme="light"] .vote-btn:hover {
    background: var(--primary);
    color: var(--text-on-primary);
  }

  [data-theme="light"] .victory-banner.player-won {
    background: linear-gradient(90deg, rgba(0, 138, 0, 0.08) 0%, transparent 100%);
  }

  [data-theme="light"] .victory-banner.player-lost {
    background: linear-gradient(90deg, rgba(204, 0, 0, 0.08) 0%, transparent 100%);
  }

  /* System light preference: duplicate overrides for :root:not([data-theme]) */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .scanlines {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.06));
      background-size: 100% 4px;
    }

    :root:not([data-theme]) .query-text {
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    }

    :root:not([data-theme]) .cyber-select-option:hover {
      background: rgba(0, 153, 170, 0.08);
    }

    :root:not([data-theme]) .cyber-select-option.active {
      background: rgba(0, 153, 170, 0.12);
    }

    :root:not([data-theme]) .room-item.selected {
      background: rgba(0, 153, 170, 0.05);
    }

    :root:not([data-theme]) .chat-message.self {
      background: rgba(0, 153, 170, 0.05);
    }

    :root:not([data-theme]) .chat-message.qa-question {
      background: rgba(0, 153, 170, 0.1);
    }

    :root:not([data-theme]) .vote-card.targeted {
      background: rgba(204, 0, 0, 0.06);
    }

    :root:not([data-theme]) .vote-card.self {
      background: rgba(0, 0, 0, 0.03);
    }

    :root:not([data-theme]) .vote-btn:hover {
      background: var(--primary);
      color: var(--text-on-primary);
    }

    :root:not([data-theme]) .victory-banner.player-won {
      background: linear-gradient(90deg, rgba(0, 138, 0, 0.08) 0%, transparent 100%);
    }

    :root:not([data-theme]) .victory-banner.player-lost {
      background: linear-gradient(90deg, rgba(204, 0, 0, 0.08) 0%, transparent 100%);
    }
  }
}

/* end @layer components */

@layer responsive {
  /* ======================================================
   COMPREHENSIVE RESPONSIVE DESIGN
   ====================================================== */

  /* --- Tablet & Small Desktop (max-width: 1024px) --- */
  @media (max-width: 1024px) {
    .app-shell {
      width: min(1200px, 98vw);
    }

    .game-layout {
      gap: 1.5rem;
    }

    .cyber-body {
      padding: 1.5rem;
    }
  }

  /* --- Tablet & Below (max-width: 768px) --- */
  @media (max-width: 768px) {

    /* Shell & Container */
    .app-shell {
      width: 100%;
      margin: 0;
      padding: 0 1rem;
      gap: 1.25rem;
      min-height: 100dvh;
    }

    /* Topbar */
    .topbar {
      padding: 0.75rem 0;
      gap: 0.5rem;
    }

    .brand {
      gap: 0.5rem;
    }

    .brand-subtitle {
      font-size: 0.7rem;
    }

    .view-header {
      margin-bottom: 0.5rem;
    }

    .view-header h2 {
      font-size: clamp(1rem, 4vw, 1.4rem);
    }

    .view-description {
      font-size: 0.8rem;
      margin-top: 0.15rem;
    }

    /* Cards & Panels */
    .cyber-card {
      padding: 1.25rem;
      border-color: var(--line);
      box-shadow: none;
    }

    /* Remove decorative corner accents on mobile — saves space, reduces noise */
    .cyber-card::before,
    .cyber-card::after,
    .cyber-box::before,
    .cyber-box::after,
    .cyber-query-box::before,
    .cyber-query-box::after {
      display: none;
    }

    .cyber-body {
      padding: 1.25rem;
    }

    .round-prompt {
      max-width: 100%;
    }

    .cyber-box {
      min-height: 200px;
    }

    /* Actions / Buttons */
    .actions {
      flex-wrap: wrap;
    }

    .actions .btn {
      min-width: 0;
      padding: 0.7rem 0.75rem;
      font-size: 0.9rem;
    }

    /* Form density on mobile */
    .form-group {
      margin-bottom: 0.75rem;
    }

    .cyber-label {
      font-size: 0.7rem;
      margin-bottom: 0.2rem;
    }

    /* Sticky form actions on mobile */
    .form-grid>.actions,
    .cyber-card>.actions:last-child {
      position: sticky;
      bottom: 0;
      z-index: 10;
      background: var(--bg-card, rgba(10, 12, 18, 0.95));
      margin: auto -1.25rem -1.25rem;
      padding: 0.75rem 1.25rem;
      border-top: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }

    /* Stretch last card to fill viewport on mobile; push footer down */
    .view>.cyber-card:last-of-type,
    .view>form:last-of-type {
      flex: 1;
    }

    .view>.cyber-card:last-of-type>.actions:last-child,
    .view>form:last-of-type>.actions:last-child {
      margin-top: auto;
    }

    /* Lobby */
    .lobby-name-row {
      gap: 0.5rem;
    }

    .neon-text {
      font-size: 1.1rem;
    }

    .lobby-meta {
      font-size: 0.8rem;
    }

    .code-chip {
      font-size: 0.85rem;
      padding: 0.25rem 0.6rem;
    }

    .lobby-counts {
      gap: 1rem;
    }

    /* Rooms */
    .rooms-list {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    /* Game Topbar */
    .game-topbar {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .game-status-display h2 {
      font-size: 0.95rem;
    }

    .status-sub {
      font-size: 0.75rem;
    }

    .game-timer-display {
      text-align: right;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .timer-label {
      margin-bottom: 0;
      font-size: 0.7rem;
    }

    .digital-clock {
      font-size: 1.1rem;
    }

    /* Sidebar is already handled: order 2, single column */
    /* Make sidebar horizontal-friendly when stacked */
    .game-sidebar .players-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 0.4rem;
    }

    .game-sidebar {
      padding-top: 0.25rem;
    }

    /* Victory */
    .victory-banner {
      flex-direction: column;
      gap: 1rem;
      padding: 1.25rem;
      text-align: center;
    }

    .victory-icon {
      font-size: 3rem;
    }

    .victory-text h3 {
      font-size: 1.5rem;
    }

    /* Modal / Dialog */
    dialog.modal {
      max-width: 95vw;
      margin: auto;
    }

    .modal-content {
      padding: 1.25rem;
    }

    .avatar-grid {
      grid-template-columns: repeat(5, 1fr);
      gap: 0.75rem;
    }

    /* Chat */
    .game-chat-panel {
      min-height: auto;
    }

    .chat-messages {
      max-height: 22dvh;
    }

    .chat-form button {
      min-width: 60px;
      padding: 0.4rem 0.75rem;
    }

    /* Vote Phase */
    .vote-question-text {
      font-size: 1.1rem;
    }

    .vote-question-card {
      padding: 1rem;
    }

    /* Query Phase */
    .cyber-query-box {
      padding: 2rem 1rem;
    }

    .input-wrapper {
      flex-direction: column;
      align-items: stretch;
      padding: 1rem;
      gap: 1rem;
    }

    .input-wrapper .input-icon {
      display: none;
    }

    #responseInput {
      text-align: center;
      padding: 0.5rem;
      border-bottom: 1px solid var(--line);
    }

    .cyber-submit-btn {
      width: 100%;
      margin-left: 0;
    }
  }

  /* --- Small Phones (max-width: 480px) --- */
  @media (max-width: 480px) {

    /* Shell */
    .app-shell {
      padding: 0 0.75rem;
      gap: 1rem;
    }

    /* Topbar */
    .topbar {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .brand-subtitle {
      display: none;
    }

    /* Typography */
    .glitch-text {
      font-size: clamp(0.95rem, 5vw, 1.3rem);
    }

    /* Cards */
    .cyber-card {
      padding: 1rem;
      border-color: transparent;
    }

    .cyber-body {
      padding: 1rem;
    }

    .round-prompt {
      margin-bottom: 1rem;
    }

    /* Avatar */
    .avatar-button {
      width: 48px;
      height: 48px;
      font-size: 1.5rem;
    }

    .avatar-edit-icon {
      width: 16px;
      height: 16px;
      font-size: 0.6rem;
    }

    /* Actions – stack vertically on very small screens */
    .actions {
      flex-direction: column;
      gap: 0.5rem;
    }

    .actions .btn {
      flex: none;
      width: 100%;
    }

    /* Rooms */
    .rooms-list {
      grid-template-columns: 1fr;
    }

    /* Lobby */
    .lobby-counts {
      gap: 0.75rem;
      font-size: 0.8rem;
    }

    .lobby-counts strong {
      font-size: 0.95rem;
    }

    /* Game Topbar */
    .game-status-display h2 {
      font-size: 1.1rem;
    }

    .status-sub {
      font-size: 0.75rem;
    }

    /* Sidebar players – single column on very small screens */
    .game-sidebar .players-list {
      grid-template-columns: 1fr;
    }

    /* Victory */
    .victory-banner {
      padding: 1rem;
    }

    .victory-icon {
      font-size: 2.5rem;
    }

    .victory-text h3 {
      font-size: 1.2rem;
    }

    /* Fieldsets */
    fieldset {
      padding: 0;
      margin-bottom: 0.5rem;
    }

    legend {
      font-size: 0.7rem;
      margin-bottom: 0.3rem;
    }

    .chip-group {
      gap: 0.4rem;
    }

    .chip-option span {
      padding: 0.35rem 0.7rem;
      font-size: 0.85rem;
    }

    /* Chat – keep inline on small phones; just compact it */
    .chat-form input {
      min-width: 0;
    }

    .chat-form button {
      min-width: auto;
      padding: 0.4rem 0.75rem;
    }

    /* Modal */
    .avatar-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
    }

    .avatar-choice {
      font-size: 1.5rem;
      padding: 0.4rem;
    }

    /* Vote Phase */
    .vote-grid {
      grid-template-columns: 1fr;
    }

    .vote-question-text {
      font-size: 1rem;
    }

    .vote-card-answer-text {
      font-size: 0.95rem;
    }

    /* Query Phase */
    .cyber-query-box {
      padding: 1.5rem 0.75rem;
    }

    .query-badge {
      font-size: 0.7rem;
      padding: 0.2rem 1rem;
    }

    #responseInput {
      font-size: 1rem;
    }

    .cyber-submit-btn {
      padding: 0.7rem 1.5rem;
      font-size: 0.9rem;
    }

    .input-status-bar {
      flex-direction: column;
      gap: 0.25rem;
      align-items: center;
    }
  }

  /* --- Touch & Interaction Improvements --- */
  @media (hover: none) and (pointer: coarse) {

    /* Ensure minimum tap targets (48px per Google/WCAG guidelines) */
    .btn {
      min-height: 48px;
    }

    .chip-option span {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
    }

    .room-item {
      padding: 1rem;
      min-height: 48px;
    }

    .player-item {
      min-height: 48px;
    }

    .vote-btn {
      min-height: 48px;
      padding: 0.75rem;
    }

    .avatar-choice {
      min-height: 48px;
      min-width: 48px;
    }

    .code-chip {
      min-height: 48px;
    }

    .chat-form button {
      min-height: 48px;
    }

    .cyber-select-trigger {
      min-height: 48px;
    }

    .cyber-select-option {
      min-height: 48px;
      display: flex;
      align-items: center;
    }

    /* Remove hover transforms on touch devices */
    .room-item:hover {
      transform: none;
    }

    .vote-card:hover {
      transform: none;
    }

    .avatar-button:hover {
      transform: none;
    }
  }

  /* --- Safe area for notched/pill-shaped screens --- */
  @supports (padding: env(safe-area-inset-bottom)) {
    .app-shell {
      padding-left: max(0.75rem, env(safe-area-inset-left));
      padding-right: max(0.75rem, env(safe-area-inset-right));
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* --- Landscape phones --- */
  @media (max-height: 500px) and (orientation: landscape) {
    .view-header {
      margin-bottom: 0.25rem;
    }

    .app-shell {
      gap: 0.5rem;
    }

    .cyber-card {
      padding: 0.75rem;
    }

    .form-group {
      margin-bottom: 0.5rem;
    }

    fieldset {
      margin-bottom: 0.4rem;
    }

    .actions {
      margin-top: 0.5rem;
    }

    .game-layout {
      grid-template-columns: 200px 1fr;
    }

    .game-sidebar .players-list {
      max-height: 40dvh;
      overflow-y: auto;
    }
  }
}

/* end @layer responsive */

@layer utilities {

  /* --- Reduced Motion for accessibility --- */
  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .glitch-text {
      text-shadow: none;
    }

    .digital-clock::before,
    .digital-clock::after {
      animation: none;
      display: none;
    }

    .scanlines {
      display: none;
    }
  }

  /* --- Focus Visible — keyboard accessibility --- */
  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-glow);
  }

  /* foco so pelo teclado; o anel acompanha o formato arredondado do chip
     (focus-within marcava tambem o toque, com um quadrado no Android) */
  .chip-option input[type="radio"]:focus-visible+span {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg-base, #000), 0 0 0 6px var(--primary);
  }

  .avatar-choice:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .vote-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-glow);
  }

  /* Remove default outline for mouse/touch users */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* --- Smooth scrolling (respects reduced-motion above) --- */
  html {
    scroll-behavior: smooth;
  }

  /* --- Content visibility for off-screen optimization --- */
  .view:not(.active) {
    content-visibility: hidden;
  }

  /* --- View Transitions API --- */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-6px);
    }
  }

  /* Crossfade de verdade: as duas telas ao mesmo tempo (plus-lighter evita o
     "vale" de opacidade). Antes a antiga sumia antes de a nova aparecer e o
     fundo piscava entre elas. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
    animation-timing-function: ease;
    mix-blend-mode: plus-lighter;
  }

  ::view-transition-old(topbar) {
    display: none;
  }

  ::view-transition-new(topbar) {
    animation: none;
  }

  /* --- Skeleton Loading States --- */
  @keyframes shimmer {
    to {
      background-position: -200% 0;
    }
  }

  .skeleton-block {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
  }

  .skeleton-title {
    height: 2rem;
    width: 60%;
    margin: 0 auto 0.75rem;
  }

  .skeleton-subtitle {
    height: 1rem;
    width: 40%;
    margin: 0 auto;
  }

  .skeleton-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 1.5rem auto;
  }

  .skeleton-input {
    height: 48px;
    width: 100%;
    margin-bottom: 1rem;
  }

  .skeleton-btn {
    height: 48px;
    width: 100%;
    margin-top: 0.5rem;
  }

  .skeleton-room-card {
    height: 72px;
    width: 100%;
    margin-bottom: 0.75rem;
  }

  /* Light theme skeleton */
  [data-theme="light"] .skeleton-block {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .skeleton-block {
      background: linear-gradient(90deg,
          rgba(0, 0, 0, 0.04) 25%,
          rgba(0, 0, 0, 0.08) 50%,
          rgba(0, 0, 0, 0.04) 75%);
      background-size: 200% 100%;
    }
  }
}

/* end @layer utilities */
/* Toast (mensagens de erro/aviso) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  max-width: min(92vw, 480px);
  padding: 0.75rem 1.1rem;
  background: var(--bg-modal);
  color: var(--text-main);
  border: 1px solid var(--primary);
  box-shadow: var(--border-glow);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.75rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.vote-progress {
  color: var(--text-soft);
  text-align: center;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* Resultado da rodada */
.round-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  background: var(--subtle-highlight);
  text-align: center;
}

.round-result.is-infiltrator {
  border-color: var(--ok);
}

.round-result.is-group {
  border-color: var(--alert);
}

.round-result-avatar {
  font-size: 2.5rem;
  line-height: 1;
}

.round-result-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin: 0;
}

.round-result-subtitle {
  margin: 0.5rem 0;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.round-result-next {
  margin-top: 1rem;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.9rem;
}

/* ==========================================================================
   UX em tempo real: celular, tablet e desktop
   ========================================================================== */

/* clip (ao contrario de hidden) nao cria container de rolagem e preserva o sticky */
body {
  overflow-x: clip;
}

.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;
}

/* Foco sempre visivel para quem navega por teclado */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Alvos de toque: minimo 44px, 48px em telas de toque */
.btn,
.cyber-select-trigger,
.code-chip,
.sidebar-title,
.vote-btn,
.chat-form input,
.chat-form button,
.cyber-submit-btn,
#responseInput {
  min-height: 44px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  cursor: pointer;
}

@media (pointer: coarse) {
  .btn,
  .cyber-select-trigger,
  .code-chip,
  .sidebar-title,
  .vote-btn,
  .chat-form input,
  .chat-form button,
  .cyber-submit-btn,
  #responseInput {
    min-height: 48px;
  }
}

/* Cabecalho da partida (fase + cronometro) sempre visivel ao rolar ou digitar */
.game-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-base);
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
}

/* Rolagens programaticas nao escondem o conteudo atras do cabecalho fixo */
.cyber-box,
.pause-banner,
.phase-content input,
.phase-content textarea,
.chat-form input {
  scroll-margin-top: 6rem;
  scroll-margin-bottom: 1rem;
}

/* Urgencia do cronometro */
.digital-clock.is-warning {
  color: #ffb000;
  text-shadow: 0 0 10px rgba(255, 176, 0, 0.6);
}

.digital-clock.is-critical {
  color: var(--alert);
  text-shadow: 0 0 12px rgba(255, 0, 0, 0.7);
  animation: timer-pulse 1s ease-in-out infinite;
}

[data-theme="light"] .digital-clock.is-warning {
  color: #9a5b00;
  text-shadow: none;
}

[data-theme="light"] .digital-clock.is-critical {
  color: #b00020;
  text-shadow: none;
}

@keyframes timer-pulse {
  50% {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .digital-clock.is-critical {
    animation: none;
  }
}

/* Campo de pergunta */
.composer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.composer-label {
  font-weight: 600;
  line-height: 1.35;
}

.composer textarea {
  min-height: 88px;
  font-size: max(16px, 1rem);
  line-height: 1.4;
  resize: vertical;
}

.composer-footer,
.input-status-bar {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.composer-hint {
  display: none;
}

@media (pointer: fine) {
  .composer-hint {
    display: inline;
  }
}

.composer-counter.near-limit {
  color: var(--alert);
  font-weight: 700;
}

.composer-submit {
  width: 100%;
}

[aria-invalid="true"] {
  border-color: var(--alert) !important;
  box-shadow: 0 0 0 2px var(--alert);
}

.phase-waiting {
  text-align: center;
}

#responseInput {
  font-size: max(16px, 1.2rem);
  min-width: 0;
}

/* Telas pequenas: pergunta compacta para o campo de resposta caber na tela */
@media (max-width: 600px) {
  .query-tag,
  .query-footer {
    display: none;
  }

  .cyber-query-box {
    padding: 1.25rem 0.75rem 0.75rem;
  }

  .query-text {
    font-size: 1.15rem;
  }

  .input-icon {
    display: none;
  }
}

/* Teclado virtual aberto: o que nao e essencial para responder recolhe com uma
   transicao curta (sincronizada com a subida do teclado), em vez de sumir de uma
   vez e fazer o conteudo "pular". Alturas maximas proximas das reais evitam o
   atraso tipico da animacao de max-height. */
.topbar,
.app-shell,
.timer-label,
.query-badge,
.role-banner,
.role-banner p {
  transition:
    max-height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    margin 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    gap 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-width 0.28s ease;
}

.topbar {
  max-height: 120px;
}

/* A barra do app (nome, perfil e tema) continua visivel ao digitar: sumir com
   ela desorientava. Durante a partida so o botao de perfil sai (JS). */

@media (max-width: 1024px) {
  .timer-label {
    max-height: 1.6em;
  }

  .role-banner p {
    max-height: 6em;
  }

  body.keyboard-open .app-shell {
    margin-top: 0;
    gap: 0.5rem;
  }

  body.keyboard-open .timer-label,
  body.keyboard-open .role-banner p {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
  }

  body.keyboard-open .query-badge {
    opacity: 0;
    pointer-events: none;
  }

  body.keyboard-open .role-banner {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
  }

  body.keyboard-open .cyber-query-box {
    padding: 0.75rem;
  }

  body.keyboard-open .query-text {
    font-size: 1.05rem;
  }

  /* digitando a pergunta/resposta: o chat (abaixo do campo) sai da frente. Classe
     controlada pelo JS (e nao :has(:focus)) para o layout nao mudar no meio do
     toque em "Enviar". */
  body.keyboard-open.composing-phase .game-chat-panel {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .app-shell,
  .timer-label,
  .query-badge,
  .role-banner,
  .role-banner p {
    transition: none;
  }
}

/* Tela empilhada (celular): com teclado aberto a lista de jogadores sai da frente */
@media (max-width: 768px) {
  body.keyboard-open .game-sidebar {
    display: none;
  }

  body.keyboard-open .game-layout {
    grid-template-columns: 1fr;
  }
}

/* Toast sempre acima do teclado virtual */
.toast {
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px) + var(--kb-inset, 0px));
}

/* Perfil no topo (nome + avatar); abre o dialogo de edicao */
.topbar-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: min(46vw, 220px);
  min-height: 44px;
  padding: 0.25rem 0.75rem 0.25rem 0.4rem;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-chip[hidden] {
  display: none;
}

.profile-chip:hover {
  border-color: var(--primary);
}

.profile-chip-avatar {
  font-size: 1.35rem;
  line-height: 1;
}

.profile-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-chip-edit {
  color: var(--primary);
}

@media (pointer: coarse) {
  .profile-chip {
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .profile-chip {
    max-width: 40vw;
  }
}

.profile-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.35;
}

.profile-avatar-fieldset {
  border: none;
  padding: 0;
  margin: 1rem 0 0;
}

.profile-avatar-fieldset legend {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#profileNicknameInput {
  width: 100%;
  min-height: 48px;
  font-size: max(16px, 1rem);
}

/* Dialogos: cabem na area visivel (inclusive com teclado aberto) e rolam por dentro */
dialog.modal {
  width: min(480px, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  padding: 0;
  overflow: visible;
}

dialog.modal .modal-content {
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* fieldset nao encolhe abaixo do conteudo por padrao; isso vazava a grade de avatares */
.profile-avatar-fieldset {
  min-width: 0;
}

#profileDialog .avatar-grid {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 0.5rem;
  margin: 0;
}

#profileDialog .avatar-choice {
  min-height: 52px;
  font-size: 1.75rem;
  padding: 0.25rem;
}

#profileDialog .actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

#profileDialog .actions .btn {
  flex: 1;
}

/* O legend herda float de outros formularios; a grade (um novo contexto de
   formatacao) ficava ao lado dele com largura zero. */
#profileDialog legend {
  float: none;
  width: auto;
}

#profileDialog .avatar-grid {
  clear: both;
}

/* Botoes do dialogo sempre alcancaveis (rolagem interna + teclado aberto) */
#profileDialog .actions {
  position: sticky;
  bottom: -1.25rem;
  margin-bottom: -1.25rem;
  padding: 0.75rem 0 1.25rem;
  background: var(--bg-modal);
}