:root {
    --bg-top: #172538;
    --bg-bottom: #23344a;
    --panel-bg: rgba(9, 17, 28, 0.72);
    --panel-border: rgba(255,255,255,0.08);
    --board-light: rgb(194 180 157 / 35%);
    --board-dark: #647b66;
    --piece-light: #eee7d1;
    --piece-dark: #081725;
    --piece-light-shadow: rgba(56, 42, 15, 0.65);
    --piece-dark-shadow: rgba(228, 214, 181, 0.28);
    --accent-blue: #4aa3df;
    --accent-orange: #47320f;
    --accent-success: #2ecc71;
    --start-glow: rgba(46, 204, 113, 0.75);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
    color: #ecf0f1;
    min-height: 100vh;
    overflow-x: hidden;
  }
  .container {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }
  header {
    text-align: center;
    width: 100%;
  }
  h1 {
    font-size: clamp(1.5rem, 4.2vw, 1.8rem);
    letter-spacing: 1.5px;
    background: linear-gradient(90deg, #f39c12, #e74c3c, #9b59b6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1px;
  }
  .subtitle {
    font-size: 0.75rem;
    color: #95a5a6;
    font-style: italic;
  }
  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 600px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    padding: 8px 10px;
    border-radius: 8px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .turn-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    flex-wrap: wrap;
  }
  .turn-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .turn-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ecf0f1;
    box-shadow: 0 0 8px currentColor;
  }
  .turn-dot.white { background: #fff; color: #fff; }
  .turn-dot.black { background: #000; color: #000; }
  .turn-timer {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffcc57;
    background: rgba(10, 16, 26, 0.86);
    border: 1px solid rgba(243, 156, 18, 0.35);
    border-radius: 999px;
    padding: 2px 9px;
    min-width: 58px;
    text-align: center;
  }
  .game-message {
    font-size: 0.8rem;
    font-weight: 700;
    color: #f39c12;
    height: 1.3em;
    line-height: 1.3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    max-width: 200px;
  }
  .ai-panel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.82rem;
  }
  .ai-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    user-select: none;
  }
  .ai-toggle input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-orange);
  }
  .ai-color-label {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .ai-color-label select {
    background: #24384d;
    color: #ecf0f1;
    border: 1px solid #576574;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.82rem;
  }
  .ai-panel.disabled .ai-color-label {
    opacity: 0.5;
    pointer-events: none;
  }
  .ai-status {
    color: #f39c12;
    font-weight: 700;
    white-space: nowrap;
  }
  .ai-thinking {
    color: #f39c12;
    font-style: italic;
  }
  .board-wrapper {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .player-label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 4px 8px;
    font-size: 0.85rem;
    color: #bdc3c7;
  }
  .move-history-bar {
    width: 100%;
    max-width: 600px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
  }
  .move-history-bar button {
    min-width: 42px;
    padding: 8px 12px;
  }
  .move-history-text {
    min-width: 0;
    text-align: center;
    font-size: 0.85rem;
    color: #dfe6e9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .board {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    border: 3px solid #314a63;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    user-select: none;
    touch-action: manipulation;
    overflow: hidden;
  }
  .cell {
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    overflow: hidden;
  }
  .cell.light { background: var(--board-light); }
  .cell.dark { background: var(--board-dark); }
  .cell.selected { background: #f7ec74 !important; box-shadow: inset 0 0 0 3px #f39c12; }
  .cell.last-move { background: rgba(243, 156, 18, 0.35) !important; }
  .cell.in-check {
    box-shadow: inset 0 0 0 4px #e74c3c;
    animation: checkPulse 1s infinite;
  }
  @keyframes checkPulse {
    0%, 100% { box-shadow: inset 0 0 0 4px rgba(231, 76, 60, 0.55); }
    50% { box-shadow: inset 0 0 0 4px rgba(231, 76, 60, 1); }
  }
  .cell.valid-move::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    background: rgba(46, 204, 113, 0.7);
    border-radius: 50%;
    pointer-events: none;
    animation: pulse 1.2s infinite;
    z-index: 3;
  }
  .cell.valid-capture::before,
  .cell.valid-convert::before {
    content: '';
    position: absolute;
    width: 22%;
    height: 22%;
    background: rgba(46, 204, 113, 0.92);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
    pointer-events: none;
    animation: pulse 1.2s infinite;
    z-index: 4;
  }
  .cell.valid-capture::after {
    width: 85%;
    height: 85%;
    background: transparent;
    border: 4px solid rgba(231, 76, 60, 0.85);
    border-radius: 50%;
    animation: pulseCapture 1.2s infinite;
    z-index: 3;
  }
  .cell.valid-convert::after {
    width: 85%;
    height: 85%;
    background: transparent;
    border: 4px solid rgba(155, 89, 182, 0.9);
    border-radius: 50%;
    animation: pulseCapture 1.2s infinite;
    z-index: 3;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
  }
  @keyframes pulseCapture {
    0%, 100% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
  }
  .piece {
    font-size: clamp(38px, 12vw, 64px);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 2;
    max-width: 100%;
    overflow: hidden;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", "Apple Symbols", "DejaVu Sans", serif;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
  .piece.white {
    color: var(--piece-light) !important;
    -webkit-text-fill-color: var(--piece-light) !important;
    text-shadow: 0 0 2px rgba(45, 31, 8, 0.9), 0 1px 3px var(--piece-light-shadow);
  }
  .piece.black {
    color: var(--piece-dark) !important;
    -webkit-text-fill-color: var(--piece-dark) !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.28), 0 1px 3px var(--piece-dark-shadow);
  }
  .piece.dama {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 5vw, 40px);
    font-weight: 900;
    font-family: serif;
    box-shadow: 3px 2px 4px rgba(0,0,0,0.9);
  }
  .piece.dama.white.eliminadora {
    background: radial-gradient(circle at 30% 30%, #fbefcc, #695e40);
    color: #c0392b;
    -webkit-text-fill-color: #c0392b;
    border: 2px solid #6e5930;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }
  .piece.dama.white.conversora {
    background: radial-gradient(circle at 30% 30%, #fbefcc, #695e40);
    color: #8e44ad;
    -webkit-text-fill-color: #8e44ad;
    border: 2px solid #1e0a27;
    box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.55), 0 2px 4px rgba(0,0,0,0.4);
  }
  .piece.dama.black.eliminadora {
    background: radial-gradient(circle at 30% 30%, #355572, #19324a);
    color: #e74c3c;
    -webkit-text-fill-color: #e74c3c;
    border: 2px solid #d8e6ef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
  }
  .piece.dama.black.conversora {
    background: radial-gradient(circle at 30% 30%, #355572, #19324a);
    color: #9b59b6;
    -webkit-text-fill-color: #9b59b6;
    border: 2px solid #c0392b;
    box-shadow: 0 0 0 3px rgba(187, 107, 217, 0.8), 0 2px 4px rgba(0,0,0,0.6);
  }
  .piece.dama.special::before {
    content: '★';
    position: absolute;
    top: -14px;
    right: -12px;
    font-size: 40px;
    color: #f1c40f;
    text-shadow: 0 0 3px #000;
    font-family: sans-serif;
  }
  .piece.cavaleiro,
  .piece.snake {
    width: 78%;
    height: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .piece-icon-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  .piece.cavaleiro .piece-icon-canvas {
    filter: drop-shadow(0 0 4px rgba(230, 126, 34, 0.55));
  }
  .piece.snake .piece-icon-canvas {
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.55));
  }
  .side-panel {
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .captured-panel {
    width: 100%;
    max-width: 600px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    overflow: hidden;
  }
  .captured-panel summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    font-weight: 700;
    color: #f4f6f8;
    user-select: none;
  }
  .captured-panel summary::-webkit-details-marker {
    display: none;
  }
  .captured-panel summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
  }
  .captured-panel[open] summary::before {
    transform: rotate(90deg);
  }
  .captured-box {
    background: transparent;
    padding: 8px;
    border-radius: 6px;
    min-height: 60px;
  }
  .captured-box h4 {
    font-size: 0.8rem;
    margin-bottom: 4px;
    color: #95a5a6;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .captured-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 1.3rem;
    min-height: 1.5em;
  }
  .captured-pieces .mini-piece.white {
    color: var(--piece-light) !important;
    -webkit-text-fill-color: var(--piece-light) !important;
    text-shadow: 0 0 1px rgba(45, 31, 8, 0.9);
  }
  .captured-pieces .mini-piece.black {
    color: var(--piece-dark) !important;
    -webkit-text-fill-color: var(--piece-dark) !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.18);
  }
  .controls {
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }
  button {
    padding: 10px 8px;
    font-size: 0.92rem;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  button:hover { background: #3795d3; transform: translateY(-1px); }
  button:active { transform: translateY(0); }
  button.secondary { background: #7b8a8b; }
  button.secondary:hover { background: #697879; }
  button.rules-btn { background: #2f8fd5; }
  button.rules-btn:hover { background: #247fc0; }
  button.icon-btn {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.08rem;
  }
  .btn-icon-canvas {
    display: block;
    margin: 0 auto;
    pointer-events: none;
  }
  .compact-action-btn .btn-icon-canvas { margin-bottom: 1px; }
  .help-action-visual .btn-icon-canvas { margin-bottom: 2px; }
  button.start-btn {
    background: #1f9d55;
    border: 1px solid rgba(255,255,255,0.18);
    animation: startPulse 1.2s infinite;
  }
  button.start-btn:hover { background: #168447; }
  button.stop-btn {
    background: #c0392b;
    animation: none;
  }
  button.stop-btn:hover { background: #a93226; }
  button.theme-btn { background: #8e44ad; }
  button.theme-btn:hover { background: #7d3c98; }
  button.ai-level-btn { background: #d68910; }
  button.ai-level-btn:hover { background: #b9770e; }
  [hidden] { display: none !important; }
  @keyframes startPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--start-glow), 0 2px 6px rgba(0,0,0,0.3); }
    50% { box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.18), 0 0 12px 2px rgba(46, 204, 113, 0.45), 0 2px 6px rgba(0,0,0,0.3); }
  }
  .pwa-banner {
    width: 100%;
    max-width: 600px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(243, 156, 18, 0.28);
    border-left: 4px solid #f39c12;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .pwa-banner.update {
    border-left-color: #2ecc71;
    border-color: rgba(46, 204, 113, 0.28);
  }
  .pwa-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pwa-banner-title {
    font-weight: 700;
    color: #ecf0f1;
  }
  .pwa-banner-copy {
    font-size: 0.88rem;
    color: #bdc3c7;
    line-height: 1.4;
  }
  .pwa-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  button.notice-cta {
    background: #f39c12;
    color: #17202a;
  }
  button.notice-cta:hover { background: #f1c40f; }
  .pwa-banner.update button.notice-cta {
    background: #2ecc71;
    color: #102a17;
  }
  .pwa-banner.update button.notice-cta:hover { background: #58d68d; }
  button.notice-secondary {
    background: #55606d;
  }
  button.notice-secondary:hover { background: #687583; }
  .rules-modal-body {
    text-align: left;
    font-size: 0.85rem;
    line-height: 1.5;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding-right: 4px;
  }
  .rules-modal-body ul { margin-top: 8px; padding-left: 20px; }
  .rules-modal-body li { margin: 4px 0; }
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
    font-size: 0.8rem;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .legend-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
  }
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
  }
  .modal.active { display: flex; }
  .modal-content {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    border: 2px solid #f39c12;
  }
  .modal-content h2 {
    color: #f39c12;
    margin-bottom: 12px;
    font-size: 1.4rem;
  }
  .modal-content p {
    margin-bottom: 16px;
    color: #ecf0f1;
  }
  .modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .modal-buttons button {
    width: 100%;
  }
  .option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    text-align: left;
  }
  .option-card {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px;
    color: #ecf0f1;
    text-align: left;
  }
  .option-card:hover {
    background: rgba(255,255,255,0.1);
  }
  .option-card:active {
    transform: translateY(0);
  }
  .option-card strong {
    display: block;
    margin-bottom: 6px;
  }
  .option-card.active {
    outline: 2px solid #f39c12;
    background: rgba(243, 156, 18, 0.12);
  }
  .theme-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 8px;
  }
  .theme-preview span {
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.14);
  }
  .option-copy {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.35;
  }
  .multiplayer-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  .compact-action-btn {
    min-width: 0;
    padding: 10px 6px;
    font-size: 1.1rem;
    line-height: 1;
  }
  .compact-action-btn small {
    display: block;
    font-size: 0.63rem;
    margin-top: 4px;
    line-height: 1.1;
  }
  .action-brand-whatsapp {
    background: #25d366;
    color: #0f2b16;
  }
  .action-brand-whatsapp:hover {
    background: #1ebe5d;
  }
  .action-brand-sms {
    background: #6c7a89;
  }
  .action-brand-sms:hover {
    background: #5c6a78;
  }
  .action-brand-qr {
    background: #2d98da;
  }
  .action-brand-qr:hover {
    background: #2584bd;
  }
  .multiplayer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    margin-top: 14px;
  }
  .multiplayer-field span {
    font-size: 0.82rem;
    color: #d6dee6;
  }
  .multiplayer-field input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    color: #ecf0f1;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
  }
  .multiplayer-note {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #c7d0d8;
    line-height: 1.4;
    text-align: left;
  }
  .multiplayer-chat-panel {
    margin-top: 14px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    text-align: left;
  }
  .inline-chat-panel {
    width: 100%;
    max-width: 600px;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
  }
  .inline-chat-column {
    min-width: 0;
  }
  .inline-chat-column .multiplayer-chat-header {
    margin-bottom: 10px;
  }
  .multiplayer-chat-header {
    font-size: 0.84rem;
    font-weight: 700;
    color: #f6d27b;
    margin-bottom: 8px;
  }
  .multiplayer-chat-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 4px;
  }
  .multiplayer-chat-empty {
    font-size: 0.8rem;
    color: #c7d0d8;
  }
  .multiplayer-chat-item {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(20, 31, 43, 0.7);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .multiplayer-chat-item.mine {
    background: rgba(46, 163, 223, 0.18);
    border-color: rgba(74, 163, 223, 0.34);
  }
  .multiplayer-chat-item.system {
    background: rgba(243, 156, 18, 0.14);
    border-color: rgba(243, 156, 18, 0.24);
  }
  .multiplayer-chat-meta {
    font-size: 0.73rem;
    color: #c4d2df;
    margin-bottom: 4px;
  }
  .multiplayer-chat-text {
    font-size: 0.83rem;
    color: #f3f6f9;
    line-height: 1.35;
  }
  .quick-chat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }
  .quick-chat-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: none;
    font-size: 0.8rem;
    line-height: 1.25;
    padding: 9px 8px;
  }
  .quick-chat-btn:hover {
    background: rgba(255,255,255,0.12);
  }
  .qr-code-wrap {
    display: flex;
    justify-content: center;
    margin: 10px 0 14px;
  }
  .qr-code-wrap img {
    width: min(76vw, 240px);
    height: min(76vw, 240px);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .help-modal-body {
    text-align: left;
    font-size: 0.84rem;
    line-height: 1.45;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding-right: 4px;
  }
  .help-action-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
  .help-action-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
  }
  .help-action-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.22);
  }
  .help-action-visual small {
    font-size: 0.62rem;
    margin-top: 4px;
  }
  .help-action-copy strong {
    display: block;
    color: #f6d27b;
    margin-bottom: 3px;
  }
  .scanner-video {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    background: #09111c;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  }
  .scanner-status {
    font-size: 0.82rem;
    color: #d8e2ec;
    min-height: 1.3em;
  }
  .winner-banner {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 12px 0;
    background: linear-gradient(90deg, #f39c12, #e74c3c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .winner-followup {
    min-height: 1.25em;
    font-size: 0.82rem;
    color: #d8e2ec;
  }
  @media (max-width: 480px) {
    .container { padding: 8px; gap: 8px; }
    .status-bar {
      justify-content: center;
    }
    .turn-indicator {
      width: 100%;
      justify-content: center;
    }
    .ai-panel {
      width: 100%;
      justify-content: center;
    }
    .ai-status {
      width: 100%;
      text-align: center;
    }
    .side-panel { grid-template-columns: 1fr; }
    .controls { gap: 4px; }
    button.icon-btn { font-size: 1rem; padding: 9px 4px; }
    .option-grid { grid-template-columns: 1fr; }
    .multiplayer-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .quick-chat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inline-chat-panel { grid-template-columns: 1fr; }
    .help-action-item { grid-template-columns: 1fr; }
    .pwa-banner {
      flex-direction: column;
      align-items: flex-start;
    }
    .pwa-banner-actions {
      width: 100%;
    }
    .pwa-banner-actions button {
      flex: 1 1 140px;
    }
  }