/* ═══════════════════════════════════════════════════════════   SlitherBR — Premium CSS Design   Dark neon theme with glassmorphism & smooth animations═══════════════════════════════════════════════════════════ */*, *::before, *::after {    box-sizing: border-box;    margin: 0;    padding: 0;}:root {    --neon-green:  #2ED573;    --neon-blue:   #1E90FF;    --neon-purple: #A29BFE;    --neon-orange: #FFA502;    --neon-pink:   #FD79A8;    --bg-dark:     #0A0E1A;    --bg-panel:    rgba(255,255,255,0.05);    --bg-panel-hover: rgba(255,255,255,0.09);    --border:      rgba(255,255,255,0.12);    --text:        #E8EAED;    --text-dim:    rgba(232,234,237,0.6);    --shadow-glow: 0 0 30px rgba(46,213,115,0.25);    --radius-lg:   20px;    --radius-md:   12px;    --radius-sm:   8px;    --font-title:  'Orbitron', sans-serif;    --font-ui:     'Rajdhani', sans-serif;    --font-body:   'Inter', sans-serif;}html, body {    width: 100%;    height: 100%;    overflow: hidden;    background: var(--bg-dark);    color: var(--text);    font-family: var(--font-body);}/* ─── Screens ──────────────────────────────────────────── */.screen {    position: fixed;    inset: 0;    display: none;    opacity: 0;    transition: opacity 0.35s ease;}.screen.active {    display: flex;    opacity: 1;}/* ═══════════════════════ MENU SCREEN ════════════════════ */#menu-screen {    align-items: center;    justify-content: flex-start;    flex-direction: column;    overflow-y: auto;}.menu-bg {    position: absolute;    inset: 0;    z-index: 0;}#bg-canvas {    width: 100%;    height: 100%;}.menu-overlay {    position: absolute;    inset: 0;    background: radial-gradient(ellipse at center,        rgba(10,14,26,0.65) 0%,        rgba(10,14,26,0.92) 70%    );}.menu-content {    position: relative;    z-index: 1;    display: flex;    flex-direction: column;    align-items: center;    gap: clamp(12px, 2vh, 28px);    width: 100%;    max-width: 480px;    padding: clamp(12px, 2vh, 24px) 24px;    min-height: min-content;}/* Logo */.logo-wrap {    text-align: center;    user-select: none;}.logo-snake {    font-size: clamp(32px, 7vh, 64px);    animation: snake-bounce 2s ease-in-out infinite;    display: block;    filter: drop-shadow(0 0 20px rgba(46,213,115,0.8));}@keyframes snake-bounce {    0%, 100% { transform: translateY(0) rotate(-5deg); }    50%       { transform: translateY(-12px) rotate(5deg); }}.logo-title {    font-family: var(--font-title);    font-size: clamp(32px, 8vw, 72px);    font-weight: 900;    letter-spacing: 6px;    background: linear-gradient(135deg, #2ED573 0%, #1E90FF 50%, #A29BFE 100%);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text;    text-shadow: none;    filter: drop-shadow(0 0 16px rgba(46,213,115,0.5));}.logo-br {    color: var(--neon-orange);    -webkit-text-fill-color: var(--neon-orange);}.logo-sub {    font-family: var(--font-ui);    font-size: 15px;    letter-spacing: 3px;    color: var(--text-dim);    text-transform: uppercase;    margin-top: 4px;}/* Menu card */.menu-card {    width: 100%;    background: rgba(255,255,255,0.04);    border: 1px solid var(--border);    border-radius: var(--radius-lg);    padding: clamp(16px, 2.5vh, 28px);    backdrop-filter: blur(20px);    -webkit-backdrop-filter: blur(20px);    display: flex;    flex-direction: column;    gap: clamp(12px, 2vh, 22px);    box-shadow: 0 8px 40px rgba(0,0,0,0.5), var(--shadow-glow);}.input-group {    display: flex;    flex-direction: column;    gap: 8px;}.input-group label,.color-picker-section label {    font-family: var(--font-ui);    font-size: 13px;    font-weight: 600;    letter-spacing: 2px;    text-transform: uppercase;    color: var(--neon-green);}#player-name {    background: rgba(0,0,0,0.4);    border: 1.5px solid var(--border);    border-radius: var(--radius-sm);    padding: 12px 16px;    font-family: var(--font-body);    font-size: 16px;    color: var(--text);    outline: none;    transition: border-color 0.2s, box-shadow 0.2s;    width: 100%;}#player-name:focus {    border-color: var(--neon-green);    box-shadow: 0 0 0 3px rgba(46,213,115,0.2);}#player-name::placeholder {    color: rgba(232,234,237,0.3);}/* Color grid */.color-picker-section {    display: flex;    flex-direction: column;    gap: 10px;}.color-grid {    display: grid;    grid-template-columns: repeat(10, 1fr);    gap: 6px;}.color-swatch {    width: 100%;    aspect-ratio: 1;    border-radius: 50%;    cursor: pointer;    border: 2.5px solid transparent;    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;}.color-swatch:hover {    transform: scale(1.2);    border-color: rgba(255,255,255,0.6);}.color-swatch.selected {    border-color: #fff;    box-shadow: 0 0 0 3px rgba(255,255,255,0.3),                0 0 14px currentColor;    transform: scale(1.25);}/* Play button */.btn-play {    display: flex;    align-items: center;    justify-content: center;    gap: 10px;    width: 100%;    padding: 16px 24px;    background: linear-gradient(135deg, #2ED573, #1E90FF);    border: none;    border-radius: var(--radius-md);    font-family: var(--font-title);    font-size: 18px;    font-weight: 700;    letter-spacing: 3px;    color: #fff;    cursor: pointer;    transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;    box-shadow: 0 4px 20px rgba(46,213,115,0.4);    text-shadow: 0 1px 4px rgba(0,0,0,0.3);}.btn-play:hover {    transform: translateY(-2px);    box-shadow: 0 8px 30px rgba(46,213,115,0.6);    filter: brightness(1.1);}.btn-play:active {    transform: translateY(0);}.btn-play-icon {    font-size: 20px;}/* Stats row */.menu-stats {    display: flex;    justify-content: space-around;    padding-top: 4px;    border-top: 1px solid var(--border);}.stat-item {    display: flex;    flex-direction: column;    align-items: center;    gap: 4px;    font-family: var(--font-ui);    font-size: 11px;    letter-spacing: 1px;    text-transform: uppercase;    color: var(--text-dim);}.stat-icon { font-size: 18px; }/* Controls hint */.controls-hint {    display: flex;    gap: 24px;    font-family: var(--font-ui);    font-size: 13px;    color: var(--text-dim);    letter-spacing: 1px;}/* ═══════════════════════ GAME SCREEN ════════════════════ */#game-screen {    position: fixed;    inset: 0;}#game-canvas {    width: 100%;    height: 100%;    display: block;    cursor: default;    touch-action: none;}/* ── HUD ── */#hud {    position: absolute;    top: 16px;    left: 16px;    display: flex;    gap: 12px;    z-index: 10;}#hud-score, #hud-kills, #hud-rank {    background: rgba(0,0,0,0.55);    border: 1px solid rgba(255,255,255,0.1);    border-radius: var(--radius-sm);    padding: 10px 16px;    backdrop-filter: blur(10px);    min-width: 80px;    text-align: center;}.hud-label {    font-family: var(--font-ui);    font-size: 10px;    letter-spacing: 2px;    color: var(--text-dim);    text-transform: uppercase;}.hud-value {    font-family: var(--font-title);    font-size: 22px;    font-weight: 700;    color: var(--neon-green);    text-shadow: 0 0 10px rgba(46,213,115,0.5);    margin-top: 2px;}/* ── Leaderboard ── */#leaderboard {    position: absolute;    top: 16px;    right: 16px;    width: 200px;    background: rgba(0,0,0,0.6);    border: 1px solid rgba(255,255,255,0.1);    border-radius: var(--radius-md);    padding: 12px;    backdrop-filter: blur(12px);    z-index: 10;}.lb-title {    font-family: var(--font-ui);    font-size: 13px;    font-weight: 700;    letter-spacing: 2px;    text-transform: uppercase;    color: var(--neon-orange);    margin-bottom: 10px;    text-align: center;}#lb-list {    list-style: none;    display: flex;    flex-direction: column;    gap: 5px;}.lb-item, .lb-entry {    display: flex;    align-items: center;    gap: 8px;    font-family: var(--font-ui);    font-size: 13px;    padding: 4px 6px;    border-radius: 6px;    transition: background 0.2s;}.lb-item.you, .lb-entry.lb-me {    background: rgba(46,213,115,0.15);    color: var(--neon-green);    font-weight: 700;}.lb-rank {    font-size: 11px;    color: var(--text-dim);    min-width: 18px;    text-align: right;}.lb-dot {    width: 8px;    height: 8px;    border-radius: 50%;    flex-shrink: 0;}.lb-name {    flex: 1;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}.lb-score {    font-size: 12px;    color: var(--text-dim);    font-weight: 600;}/* ── Minimap ── */#minimap-wrap {    position: absolute;    bottom: 90px;    right: 16px;    z-index: 10;    text-align: center;}#minimap {    width: 140px;    height: 140px;    border-radius: var(--radius-sm);    border: 1px solid rgba(255,255,255,0.15);    background: rgba(0,0,0,0.5);    display: block;}.minimap-label {    font-family: var(--font-ui);    font-size: 10px;    letter-spacing: 2px;    color: var(--text-dim);    text-transform: uppercase;    margin-top: 4px;}/* ── Chat ── */#chat-wrap {    position: absolute;    bottom: 16px;    left: 16px;    width: 320px;    z-index: 10;    display: flex;    flex-direction: column;    gap: 6px;}#chat-log {    max-height: 150px;    overflow-y: auto;    display: flex;    flex-direction: column;    gap: 3px;    scrollbar-width: thin;    scrollbar-color: rgba(255,255,255,0.2) transparent;    padding: 4px 0;}.chat-msg {    background: rgba(0,0,0,0.5);    backdrop-filter: blur(6px);    border-radius: 6px;    padding: 5px 10px;    font-size: 13px;    line-height: 1.4;    animation: chat-slide 0.2s ease;    border-left: 3px solid var(--neon-green);    word-break: break-word;}.chat-msg.system {    border-left-color: var(--neon-purple);    color: var(--text-dim);    font-style: italic;}.chat-name {    font-weight: 700;    color: var(--neon-green);    margin-right: 4px;}@keyframes chat-slide {    from { opacity: 0; transform: translateX(-10px); }    to   { opacity: 1; transform: translateX(0); }}#chat-input-row {    display: flex;    gap: 6px;}#chat-input {    flex: 1;    background: rgba(0,0,0,0.55);    border: 1px solid rgba(255,255,255,0.12);    border-radius: 8px;    padding: 8px 12px;    font-family: var(--font-body);    font-size: 13px;    color: var(--text);    outline: none;    display: block;    transition: border-color 0.2s;}#chat-input.visible {    display: block;}#chat-input:focus {    border-color: var(--neon-green);}/* ── Boost bar ── */#boost-bar-wrap {    position: absolute;    bottom: 16px;    right: 16px;    width: 140px;    z-index: 10;    text-align: center;    display: flex;    flex-direction: column;    align-items: center;    gap: 6px;}.boost-label {    font-family: var(--font-ui);    font-size: 10px;    letter-spacing: 2px;    color: var(--text-dim);    text-transform: uppercase;}#boost-bar-outer {    width: 100%;    height: 8px;    background: rgba(255,255,255,0.1);    border-radius: 4px;    overflow: hidden;}#boost-bar-inner {    height: 100%;    width: 100%;    background: linear-gradient(90deg, #FFA502, #FF6348);    border-radius: 4px;    transition: width 0.1s linear, background 0.3s;}#boost-bar-inner.boosting {    background: linear-gradient(90deg, #2ED573, #1E90FF);    animation: boost-pulse 0.3s ease-in-out infinite alternate;}@keyframes boost-pulse {    from { filter: brightness(1); }    to   { filter: brightness(1.4) drop-shadow(0 0 6px #2ED573); }}/* ═══════════════════════ DEATH SCREEN ═══════════════════ */#death-screen {    align-items: center;    justify-content: center;    background: rgba(5, 5, 15, 0.92);    backdrop-filter: blur(8px);}.death-content {    display: flex;    flex-direction: column;    align-items: center;    gap: 24px;    max-width: 420px;    width: 100%;    padding: 24px;    text-align: center;    animation: death-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}@keyframes death-pop {    from { transform: scale(0.6); opacity: 0; }    to   { transform: scale(1);   opacity: 1; }}.death-icon {    font-size: 80px;    filter: drop-shadow(0 0 20px rgba(255, 100, 100, 0.7));    animation: death-shake 0.5s ease 0.2s;}@keyframes death-shake {    0%, 100% { transform: rotate(0deg); }    25%       { transform: rotate(-15deg); }    75%       { transform: rotate(15deg); }}.death-title {    font-family: var(--font-title);    font-size: 48px;    font-weight: 900;    letter-spacing: 6px;    background: linear-gradient(135deg, #FF4757, #FF6B81);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text;    filter: drop-shadow(0 0 10px rgba(255,71,87,0.5));}.death-info {    width: 100%;    background: rgba(255,255,255,0.04);    border: 1px solid var(--border);    border-radius: var(--radius-lg);    padding: 20px;    display: flex;    justify-content: space-around;    gap: 16px;    backdrop-filter: blur(12px);}.death-stat {    display: flex;    flex-direction: column;    align-items: center;    gap: 6px;}.death-label {    font-family: var(--font-ui);    font-size: 11px;    letter-spacing: 2px;    text-transform: uppercase;    color: var(--text-dim);}.death-value {    font-family: var(--font-title);    font-size: 26px;    font-weight: 700;    color: var(--text);}.btn-menu {    background: none;    border: 1px solid rgba(255,255,255,0.2);    border-radius: var(--radius-sm);    padding: 10px 20px;    font-family: var(--font-ui);    font-size: 14px;    letter-spacing: 1px;    color: var(--text-dim);    cursor: pointer;    transition: border-color 0.2s, color 0.2s;}.btn-menu:hover {    border-color: rgba(255,255,255,0.4);    color: var(--text);}/* ═══════════════════════ MOBILE CONTROLS ════════════════ */#mobile-controls {    display: none;    position: absolute;    bottom: 30px;    right: 20px;    z-index: 20;}#boost-btn-mobile {    width: 70px;    height: 70px;    border-radius: 50%;    background: linear-gradient(135deg, #FFA502, #FF6348);    border: none;    font-size: 28px;    display: flex;    align-items: center;    justify-content: center;    cursor: pointer;    box-shadow: 0 4px 20px rgba(255,165,2,0.5);    user-select: none;    -webkit-user-select: none;}@media (pointer: coarse) {    #mobile-controls { display: flex; }    #game-canvas     { cursor: default; }}/* ═══════════════════════ SCROLLBAR ══════════════════════ */::-webkit-scrollbar { width: 4px; }::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }/* ═══════════════════════ NOTIFICATIONS ══════════════════ */#notifications {    position: absolute;    top: 80px;    left: 50%;    transform: translateX(-50%);    z-index: 20;    display: flex;    flex-direction: column;    gap: 8px;    pointer-events: none;    align-items: center;}.notif {    background: rgba(0,0,0,0.75);    border: 1px solid rgba(255,255,255,0.15);    border-radius: 30px;    padding: 8px 20px;    font-family: var(--font-ui);    font-size: 14px;    letter-spacing: 1px;    white-space: nowrap;    animation: notif-in 0.3s ease, notif-out 0.4s ease 2.3s forwards;    backdrop-filter: blur(8px);}@keyframes notif-in {    from { opacity: 0; transform: translateY(-10px) scale(0.9); }    to   { opacity: 1; transform: translateY(0)     scale(1);   }}@keyframes notif-out {    from { opacity: 1; transform: translateY(0)    scale(1);   }    to   { opacity: 0; transform: translateY(-10px) scale(0.9); }}.notif.kill  { border-color: var(--neon-green);  color: var(--neon-green);  }.notif.death { border-color: #FF4757;             color: #FF6B81;             }.notif.info  { border-color: var(--neon-blue);   color: var(--neon-blue);   }/* ═══════════════════════ ACCOUNT ROW ════════════════════ */.account-row {    display: flex;    align-items: center;    justify-content: center;    gap: 10px;    flex-wrap: wrap;    padding-top: 4px;    border-top: 1px solid var(--border);}.account-user {    font-family: var(--font-ui);    font-size: 14px;    font-weight: 600;    color: var(--neon-green);    letter-spacing: 1px;}.btn-account {    background: rgba(255,255,255,0.06);    border: 1px solid rgba(255,255,255,0.18);    border-radius: var(--radius-sm);    padding: 8px 18px;    font-family: var(--font-ui);    font-size: 13px;    font-weight: 600;    letter-spacing: 1px;    color: var(--text);    cursor: pointer;    transition: background 0.2s, border-color 0.2s, color 0.2s;}.btn-account:hover {    background: rgba(255,255,255,0.12);    border-color: rgba(255,255,255,0.35);    color: #fff;}.btn-account.btn-register {    background: linear-gradient(135deg, rgba(46,213,115,0.15), rgba(30,144,255,0.15));    border-color: var(--neon-green);    color: var(--neon-green);}.btn-account.btn-logout {    color: #FF6B81;    border-color: rgba(255,107,129,0.4);    text-decoration: none;    display: inline-flex;    align-items: center;}/* ═══════════════════════ GLOBAL LEADERBOARD (menu) ══════ */.menu-global-lb {    width: 100%;    max-width: 480px;    background: rgba(255,255,255,0.04);    border: 1px solid var(--border);    border-radius: var(--radius-md);    padding: 16px 20px;    backdrop-filter: blur(12px);}.menu-global-lb .lb-title {    text-align: center;    margin-bottom: 10px;}#global-lb-list {    list-style: none;    display: flex;    flex-direction: column;    gap: 4px;    max-height: 200px;    overflow-y: auto;}.lb-loading {    font-family: var(--font-ui);    font-size: 13px;    color: var(--text-dim);    text-align: center;    padding: 8px 0;    font-style: italic;}/* ═══════════════════════ MODAL ══════════════════════════ */.modal-overlay {    position: fixed;    inset: 0;    background: rgba(5,5,15,0.75);    backdrop-filter: blur(6px);    z-index: 100;    display: flex;    align-items: center;    justify-content: center;}.modal-box {    position: relative;    background: #111827;    border: 1px solid rgba(255,255,255,0.12);    border-radius: var(--radius-lg);    padding: 32px 28px;    width: 100%;    max-width: 400px;    display: flex;    flex-direction: column;    gap: 18px;    box-shadow: 0 8px 60px rgba(0,0,0,0.6);    animation: death-pop 0.3s cubic-bezier(0.34,1.56,0.64,1);}.modal-close {    position: absolute;    top: 12px;    right: 14px;    background: none;    border: none;    color: var(--text-dim);    font-size: 20px;    cursor: pointer;    padding: 4px 8px;    border-radius: 6px;    transition: color 0.2s, background 0.2s;}.modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }.modal-title {    font-family: var(--font-title);    font-size: 22px;    letter-spacing: 3px;    text-align: center;    color: var(--neon-green);}.modal-field {    display: flex;    flex-direction: column;    gap: 6px;}.modal-field label {    font-family: var(--font-ui);    font-size: 12px;    letter-spacing: 2px;    text-transform: uppercase;    color: var(--text-dim);}.modal-field input {    background: rgba(0,0,0,0.4);    border: 1.5px solid var(--border);    border-radius: var(--radius-sm);    padding: 10px 14px;    font-family: var(--font-body);    font-size: 15px;    color: var(--text);    outline: none;    transition: border-color 0.2s, box-shadow 0.2s;}.modal-field input:focus {    border-color: var(--neon-green);    box-shadow: 0 0 0 3px rgba(46,213,115,0.2);}.modal-error {    background: rgba(255,71,87,0.15);    border: 1px solid rgba(255,71,87,0.4);    border-radius: var(--radius-sm);    padding: 10px 14px;    font-size: 13px;    color: #FF6B81;    text-align: center;}/* ═══════════════════════ GFX QUALITY SETTINGS ══════════════ */.gfx-settings-card {    padding: 18px 22px !important;    gap: 12px !important;}.gfx-header {    display: flex;    align-items: center;    gap: 8px;}.gfx-icon {    font-size: 20px;}.gfx-label {    font-family: var(--font-ui);    font-size: 12px;    font-weight: 600;    letter-spacing: 2px;    color: var(--neon-green);    flex: 1;}.gfx-value {    font-family: var(--font-title);    font-size: 14px;    font-weight: 700;    color: var(--neon-blue);    letter-spacing: 1px;    padding: 2px 10px;    background: rgba(30,144,255,0.12);    border: 1px solid rgba(30,144,255,0.3);    border-radius: 20px;}.gfx-bar-wrap {    display: flex;    align-items: center;    gap: 10px;}.gfx-bar-label {    font-family: var(--font-ui);    font-size: 11px;    letter-spacing: 1px;    color: var(--text-dim);    white-space: nowrap;}/* Custom range slider */.gfx-slider {    flex: 1;    -webkit-appearance: none;    appearance: none;    height: 8px;    background: linear-gradient(90deg,        rgba(46,213,115,0.3) 0%,        rgba(30,144,255,0.3) 50%,        rgba(162,155,254,0.3) 100%    );    border-radius: 4px;    outline: none;    cursor: pointer;}.gfx-slider::-webkit-slider-thumb {    -webkit-appearance: none;    width: 22px;    height: 22px;    border-radius: 50%;    background: linear-gradient(135deg, var(--neon-green), var(--neon-blue));    border: 2px solid rgba(255,255,255,0.3);    box-shadow: 0 0 12px rgba(46,213,115,0.5);    cursor: pointer;    transition: box-shadow 0.2s, transform 0.15s;}.gfx-slider::-webkit-slider-thumb:hover {    transform: scale(1.15);    box-shadow: 0 0 20px rgba(46,213,115,0.7);}.gfx-slider::-moz-range-thumb {    width: 22px;    height: 22px;    border-radius: 50%;    background: linear-gradient(135deg, var(--neon-green), var(--neon-blue));    border: 2px solid rgba(255,255,255,0.3);    box-shadow: 0 0 12px rgba(46,213,115,0.5);    cursor: pointer;}.gfx-desc {    font-family: var(--font-body);    font-size: 12px;    color: var(--text-dim);    font-style: italic;    text-align: center;    min-height: 16px;}/* ═══════════════════════ RESUME BUTTON ══════════════════════ */.btn-resume {    background: linear-gradient(135deg, #FFA502, #FF6348) !important;    box-shadow: 0 4px 20px rgba(255,165,2,0.4) !important;    animation: resume-pulse 1.5s ease-in-out infinite alternate;}.btn-resume:hover {    box-shadow: 0 8px 30px rgba(255,165,2,0.6) !important;}@keyframes resume-pulse {    from { filter: brightness(1); }    to   { filter: brightness(1.15); }}/* ═══════════════════════ OVERLAY MODE ═══════════════════════ *//* When menu is overlay on top of game, make it semi-transparent */#menu-screen.active + #game-screen.active,#game-screen.active {    z-index: 1;}#menu-screen.active {    z-index: 50;}/* ═══════════════════ MENU RESPONSIVO (altura) ════════════════ *//* Esconde o emoji da cobra em telas muito curtas */@media (max-height: 700px) {    .logo-snake { display: none; }    .menu-content { gap: 10px; padding: 10px 20px; }    .menu-card { padding: 14px; gap: 10px; }    .logo-title { font-size: clamp(28px, 6vw, 48px); }    .logo-sub { font-size: 12px; letter-spacing: 2px; margin-top: 2px; }    .menu-global-lb { display: none; }    .controls-hint { display: none; }}@media (max-height: 820px) {    .logo-snake { font-size: 36px; }    .menu-content { gap: 14px; }    .menu-card { padding: 18px; gap: 14px; }}/* ══════════════════════ DISCORD BUTTON ═══════════════════════ */.btn-discord {    display: inline-flex;    align-items: center;    gap: 6px;    background: #5865F2;    color: #fff;    border: none;    border-radius: var(--radius-sm);    padding: 8px 14px;    font-size: 13px;    font-weight: 600;    cursor: pointer;    text-decoration: none;    transition: filter .2s, transform .15s;    letter-spacing: .5px;}.btn-discord:hover {    filter: brightness(1.15);    transform: translateY(-1px);}/* ════════════════════ HUD EXTRA BUTTONS ═════════════════════ */#hud-extra-btns {    position: absolute;    top: 16px;    left: 50%;    transform: translateX(-50%);    display: flex;    gap: 8px;    z-index: 30;}#hud-extra-btns button {    background: rgba(0,0,0,0.55);    border: 1px solid rgba(255,255,255,0.15);    border-radius: 10px;    color: #fff;    font-size: 18px;    width: 44px;    height: 44px;    cursor: pointer;    backdrop-filter: blur(8px);    transition: background .2s, transform .15s;    display: flex;    align-items: center;    justify-content: center;}#hud-extra-btns button:hover {    background: rgba(46,213,115,0.2);    transform: scale(1.08);}
/* ═══════════════════════════════════════════════════════════════
   PAINEL SOCIAL — Janela Flutuante Arrastável (estilo Agar.io)
═══════════════════════════════════════════════════════════════ */
#social-panel {
    position: fixed !important;
    left: 20px !important;
    bottom: 70px !important;
    width: 300px !important;
    height: 440px !important;
    min-width: 220px;
    min-height: 260px;
    background: rgba(13,17,28,0.97);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 48px rgba(0,0,0,0.80), 0 0 0 1px rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    overflow: hidden;
    animation: spFloatIn .18s ease;
    resize: both;
}
@keyframes spFloatIn {
    from { opacity: 0; transform: scale(.95) translateY(12px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}
.sp-header {
    display: flex !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
    background: rgba(255,255,255,0.025) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    cursor: grab !important;
    user-select: none !important;
    height: 40px !important;
    padding: 0 !important;
}
.sp-header:active { cursor: grabbing !important; }
.sp-tabs-row { display: flex !important; flex: 1 !important; }
.sp-tab {
    position: relative !important;
    flex: 1 !important;
    background: none !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.38) !important;
    font-size: 16px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background .15s, color .15s !important;
    line-height: 1 !important;
}
.sp-tab:last-of-type { border-right: none !important; }
.sp-tab:hover  { background: rgba(255,255,255,0.05) !important; color: #fff !important; }
.sp-tab.active {
    background: rgba(46,213,115,0.08) !important;
    color: #2ED573 !important;
    box-shadow: inset 0 -2px 0 #2ED573 !important;
}
.sp-close-btn {
    background: none !important;
    border: none !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.28) !important;
    font-size: 13px !important;
    padding: 0 13px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background .15s, color .15s !important;
}
.sp-close-btn:hover { background: rgba(239,68,68,.18) !important; color: #f87171 !important; }
.sp-badge-dot {
    position: absolute;
    top: 5px; right: 5px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #f87171;
    border: 1.5px solid rgba(13,17,28,.9);
    pointer-events: none;
}
.sp-tab-content {
    display: none !important;
    flex-direction: column !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 11px !important;
    gap: 7px !important;
    min-height: 0 !important;
}
.sp-tab-content.active { display: flex !important; }
.sp-tab-content::-webkit-scrollbar { width: 3px; }
.sp-tab-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.sp-label        { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.28); }
.sp-section-title{ font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sp-empty        { text-align: center; color: rgba(255,255,255,0.2); font-size: 12px; padding: 18px 0; }
.sp-input        { width: 100%; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.09); border-radius: 6px; padding: 7px 10px; color: #E8EAED; font-size: 12px; outline: none; transition: border-color .15s; }
.sp-input:focus  { border-color: rgba(46,213,115,0.35); }
.sp-icon-btn     { background: rgba(46,213,115,0.12); border: 1px solid rgba(46,213,115,0.22); border-radius: 6px; color: #2ED573; font-size: 15px; padding: 5px 11px; cursor: pointer; transition: background .15s; white-space: nowrap; }
.sp-icon-btn:hover { background: rgba(46,213,115,0.22); }
.sp-primary-btn  { width: 100%; background: linear-gradient(135deg,#2ED573,#1E90FF); border: none; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; padding: 9px; cursor: pointer; transition: filter .15s, transform .1s; }
.sp-primary-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
.sp-danger-btn   { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.22); border-radius: 7px; color: #f87171; font-size: 11px; font-weight: 600; padding: 6px 11px; cursor: pointer; transition: background .15s; }
.sp-danger-btn:hover { background: rgba(239,68,68,0.25); }
.sp-action-btn   { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 5px; color: rgba(255,255,255,0.55); font-size: 11px; padding: 3px 7px; cursor: pointer; transition: background .12s; }
.sp-action-btn:hover { background: rgba(255,255,255,0.12); }
.sp-feedback     { font-size: 11px; padding: 5px 9px; border-radius: 6px; background: rgba(255,255,255,0.04); }
.sp-feedback-ok  { color: #2ED573; background: rgba(46,213,115,.07); }
.sp-feedback-err { color: #f87171; background: rgba(239,68,68,.07); }
.sp-count-badge  { display: inline-block; background: #f87171; color: #fff; font-size: 9px; font-weight: 700; border-radius: 20px; padding: 1px 5px; margin-left: 3px; }
.sp-unread-badge { background: #f87171; color: #fff; font-size: 9px; font-weight: 700; border-radius: 20px; padding: 1px 5px; }
.sp-online-header{ display: flex; align-items: center; justify-content: space-between; }
.sp-online-num   { font-family: 'Orbitron',sans-serif; font-size: 20px; color: #2ED573; font-weight: 700; }
.sp-profile-card { display: flex; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 10px; align-items: flex-start; }
.sp-avatar-wrap  { position: relative; flex-shrink: 0; }
.sp-avatar       { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#2ED573,#1E90FF); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sp-clan-badge   { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); background: rgba(255,165,2,0.22); border: 1px solid rgba(255,165,2,0.38); color: #FFA502; font-size: 7px; font-weight: 700; border-radius: 3px; padding: 1px 3px; white-space: nowrap; }
.sp-profile-info { flex: 1; min-width: 0; }
.sp-profile-name { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.sp-profile-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.sp-badge        { font-size: 9px; font-weight: 700; letter-spacing: 1px; padding: 1px 7px; border-radius: 20px; }
.sp-badge-admin  { background: rgba(255,165,2,0.18);  color: #FFA502; border: 1px solid rgba(255,165,2,0.35); }
.sp-badge-clan   { background: rgba(162,155,254,0.18); color: #A29BFE; border: 1px solid rgba(162,155,254,0.28); }
.sp-badge-player { background: rgba(46,213,115,0.09);  color: #2ED573; border: 1px solid rgba(46,213,115,0.25); }
.sp-mini-stats   { display: flex; gap: 8px; }
.sp-mini-stat    { display: flex; flex-direction: column; align-items: center; }
.sp-mini-stat span  { font-family: 'Orbitron',sans-serif; font-size: 14px; color: #2ED573; font-weight: 700; }
.sp-mini-stat small { font-size: 8px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1px; }
.sp-guest-msg    { text-align: center; color: rgba(255,255,255,0.4); font-size: 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sp-link-btn     { display: inline-block; background: linear-gradient(135deg,#2ED573,#1E90FF); color: #fff; border: none; border-radius: 7px; padding: 7px 14px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; transition: filter .2s; }
.sp-link-btn:hover { filter: brightness(1.1); }
.sp-discord-btn  { display: inline-flex; align-items: center; gap: 5px; background: #5865F2; color: #fff; padding: 7px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; transition: filter .2s; }
.sp-discord-btn:hover { filter: brightness(1.15); }
.sp-lb-list      { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.sp-lb-list li   { display: flex; align-items: center; gap: 7px; font-size: 11px; padding: 4px 7px; border-radius: 5px; background: rgba(0,0,0,0.22); }
.sp-lb-list li .sp-pos    { color: rgba(255,255,255,0.25); width: 16px; font-size: 10px; }
.sp-lb-list li .sp-pname  { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-lb-list li .sp-pscore { color: #2ED573; font-weight: 700; font-size: 10px; }
.sp-discord-big-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #5865F2; color: #fff; padding: 10px; border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none; width: 100%; transition: filter .2s, transform .15s; }
.sp-discord-big-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
.sp-search-row   { display: flex; gap: 5px; }
.sp-req-item     { display: flex; align-items: center; justify-content: space-between; background: rgba(255,165,2,0.04); border: 1px solid rgba(255,165,2,0.13); border-radius: 7px; padding: 7px 9px; margin-bottom: 3px; }
.sp-req-name     { font-size: 12px; font-weight: 600; }
.sp-btn-accept:hover { background: rgba(46,213,115,0.2); color: #2ED573; }
.sp-btn-reject:hover { background: rgba(239,68,68,0.2);  color: #f87171; }
.sp-friend-item  { display: flex; align-items: center; gap: 7px; padding: 7px 5px; border-radius: 7px; background: rgba(255,255,255,0.025); margin-bottom: 2px; transition: background .12s; }
.sp-friend-item:hover { background: rgba(255,255,255,0.06); }
.sp-friend-avatar{ width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#2ED573,#1E90FF); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.sp-friend-info  { flex: 1; min-width: 0; }
.sp-friend-name  { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-clan-tag     { color: #FFA502; font-size: 10px; font-weight: 700; }
.sp-btn-dm:hover     { background: rgba(46,213,115,0.2); color: #2ED573; }
.sp-btn-remove:hover { background: rgba(239,68,68,0.2);  color: #f87171; }
.sp-conv-item    { display: flex; align-items: center; gap: 9px; padding: 9px 7px; border-radius: 8px; background: rgba(255,255,255,0.03); margin-bottom: 3px; cursor: pointer; transition: background .15s; }
.sp-conv-item:hover { background: rgba(255,255,255,0.08); }
.sp-conv-avatar  { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#2ED573,#1E90FF); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.sp-conv-info    { flex: 1; min-width: 0; }
.sp-conv-name    { font-size: 12px; font-weight: 700; }
.sp-conv-last    { font-size: 10px; color: rgba(255,255,255,0.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.sp-chat-header  { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 7px; flex-shrink: 0; }
.sp-back-btn     { background: rgba(255,255,255,0.06); border: none; border-radius: 5px; color: #E8EAED; font-size: 11px; padding: 3px 9px; cursor: pointer; }
.sp-back-btn:hover { background: rgba(255,255,255,0.12); }
.sp-chat-title   { font-weight: 700; font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-chat-log     { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; min-height: 0; }
.sp-chat-log::-webkit-scrollbar { width: 3px; }
.sp-chat-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.sp-chat-loading { color: rgba(255,255,255,0.25); font-size: 11px; text-align: center; padding: 16px; }
.sp-msg          { display: flex; flex-direction: column; }
.sp-msg-mine     { align-items: flex-end; }
.sp-msg-theirs   { align-items: flex-start; }
.sp-msg-bubble   { max-width: 84%; padding: 7px 11px; border-radius: 13px; font-size: 12px; line-height: 1.4; word-break: break-word; }
.sp-msg-mine   .sp-msg-bubble { background: rgba(46,213,115,0.15); border: 1px solid rgba(46,213,115,0.22); border-bottom-right-radius: 3px; }
.sp-msg-theirs .sp-msg-bubble { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); border-bottom-left-radius: 3px; }
.sp-msg-time     { font-size: 9px; color: rgba(255,255,255,0.2); margin-top: 2px; padding: 0 3px; }
.sp-chat-input-row { display: flex; gap: 5px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.sp-clan-header  { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 9px; padding: 12px; text-align: center; }
.sp-clan-tag-big { font-family: 'Orbitron',sans-serif; font-size: 22px; font-weight: 900; color: #FFA502; letter-spacing: 2px; }
.sp-clan-name    { font-size: 14px; font-weight: 700; margin-top: 2px; }
.sp-clan-desc    { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 3px; }
.sp-clan-meta    { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 5px; }
.sp-clan-locked   { background: rgba(255,165,2,0.07); border: 1px solid rgba(255,165,2,0.25); border-radius: 9px; padding: 12px; }
.sp-clan-lock-msg { font-size: 12.5px; line-height: 1.5; color: #FFD98A; text-align: center; }
.sp-clan-lock-sub { font-size: 11px; color: rgba(255,255,255,0.55); }
.sp-clan-members { display: flex; flex-direction: column; gap: 3px; }
.sp-clan-member  { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.03); border-radius: 7px; padding: 6px 9px; }
.sp-clan-member-name { font-size: 11px; font-weight: 600; }
.sp-clan-create,.sp-clan-join { display: flex; flex-direction: column; gap: 7px; }
.sp-clan-role-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 5px; color: #E8EAED; font-size: 10px; padding: 2px 5px; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   CONSOLE ADMIN — Janela Flutuante Arrastável (estilo Agar.io)
═══════════════════════════════════════════════════════════════ */
#ingame-console {
    position: fixed !important;
    bottom: 70px !important;
    right: 20px !important;
    width: min(560px, 88vw);
    height: 300px;
    min-width: 240px; min-height: 160px;
    background: rgba(5,8,14,0.97);
    border: 1px solid rgba(46,213,115,0.22);
    border-radius: 8px;
    display: flex; flex-direction: column;
    z-index: 60;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.85), 0 0 16px rgba(46,213,115,0.05);
    overflow: hidden;
    animation: igcAppear .16s ease;
    resize: both;
}
@keyframes igcAppear {
    from { opacity:0; transform: scale(.96) translateY(8px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}
#igc-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: rgba(46,213,115,0.06); border-bottom: 1px solid rgba(46,213,115,0.13); cursor: grab; user-select: none; flex-shrink: 0; }
#igc-header:active { cursor: grabbing; }
#igc-drag-zone { display: flex; align-items: center; gap: 7px; flex: 1; }
#igc-title { font-family: 'Courier New',monospace; font-size: 10px; font-weight: 700; color: #2ED573; letter-spacing: 2px; }
.igc-dot-on  { color: #2ED573; font-size: 11px; }
.igc-dot-off { color: #f87171; font-size: 11px; }
#igc-header button { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; font-size: 12px; padding: 2px 7px; border-radius: 4px; transition: background .12s; line-height: 1; }
#igc-header button:hover { background: rgba(239,68,68,.16); color: #f87171; }
#igc-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#igc-log { flex: 1; overflow-y: auto; padding: 7px 11px; font-family: 'Courier New',monospace; font-size: 12px; color: #00ff88; white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
#igc-log::-webkit-scrollbar { width: 3px; }
#igc-log::-webkit-scrollbar-thumb { background: rgba(46,213,115,0.2); border-radius: 2px; }
#igc-input-row { display: flex; align-items: center; padding: 6px 11px; background: rgba(0,0,0,0.28); border-top: 1px solid rgba(46,213,115,0.09); gap: 6px; flex-shrink: 0; }
.igc-prompt  { color: #2ED573; font-family: monospace; font-size: 13px; }
#igc-input   { flex: 1; background: transparent; border: none; outline: none; color: #00ff88; font-family: 'Courier New',monospace; font-size: 12px; caret-color: #2ED573; }
#igc-input::placeholder { color: rgba(0,255,136,0.2); }
/* ══════════════════════════════════════════════════════════════
   AVATAR — Foto de perfil clicável
   ══════════════════════════════════════════════════════════════ */
.sp-avatar {
    position: relative !important;
    cursor: pointer !important;
    border-radius: 50%;
    overflow: hidden;
    transition: box-shadow .18s;
}
.sp-avatar:hover {
    box-shadow: 0 0 0 3px rgba(88,101,242,0.7) !important;
}
.sp-avatar-cam-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0;
    transition: opacity .18s;
    border-radius: 50%;
    pointer-events: none;
}
.sp-avatar:hover .sp-avatar-cam-overlay {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   DISCORD — Linha de Discord vinculado / botão vincular
   ══════════════════════════════════════════════════════════════ */
.sp-discord-row {
    /* display controlado inline pelo PHP/JS (flex quando vinculado, none quando não).
       Sem !important para o none inline funcionar. */
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 2px;
    padding: 3px 7px;
    background: rgba(88,101,242,0.12);
    border: 1px solid rgba(88,101,242,0.28);
    border-radius: 6px;
    font-size: 11px;
    color: #b9beff;
}
.sp-discord-row img {
    width: 18px; height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.sp-discord-tag {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}
.sp-unlink-btn {
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,0.35) !important;
    cursor: pointer !important;
    font-size: 11px !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    line-height: 1 !important;
    flex-shrink: 0;
    transition: color .14s, background .14s !important;
}
.sp-unlink-btn:hover {
    color: #f87171 !important;
    background: rgba(239,68,68,0.12) !important;
}
.sp-discord-link-btn {
    /* display controlado inline (none quando já há Discord vinculado).
       Sem !important para o none inline funcionar. */
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 2px;
    padding: 4px 9px;
    background: rgba(88,101,242,0.15);
    border: 1px solid rgba(88,101,242,0.35);
    border-radius: 6px;
    color: #b9beff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    width: fit-content;
}
.sp-discord-link-btn:hover {
    background: rgba(88,101,242,0.30) !important;
    border-color: rgba(88,101,242,0.6) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVO — SlitherBR
   Breakpoint principal: 768px (tablets e celulares)
   Dispositivos de toque: pointer:coarse
══════════════════════════════════════════════════════════════════ */

/* ── Joystick virtual (mobile) ──────────────────────────────────── */
#vjoy-wrap {
    display: none;
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 25;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
#vjoy-base {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    border: 2px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#vjoy-knob {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(46,213,115,0.7), rgba(30,144,255,0.7));
    border: 2px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 14px rgba(46,213,115,0.4);
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    transition: box-shadow 0.1s;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — Dispositivos de toque (pointer:coarse = celular/tablet)
══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
    /* ── Joystick + Boost ── */
    #vjoy-wrap       { display: block; }
    #mobile-controls { display: flex; position: fixed; bottom: 30px; right: 16px; z-index: 25; }
    #boost-btn-mobile{ width: 76px; height: 76px; font-size: 30px; }

    /* ── HUD — topo esquerdo compacto ── */
    #hud             { top: 8px; left: 8px; gap: 5px; flex-wrap: nowrap; }
    #hud-score, #hud-kills, #hud-rank {
        padding: 4px 8px;
        min-width: 46px;
        border-radius: 7px;
    }
    .hud-label       { font-size: 7px; letter-spacing: 1px; }
    .hud-value       { font-size: 15px; margin-top: 1px; }

    /* HUD nível — oculto em mobile (só mostra número, sem barra XP) */
    #hud-level       { display: none; }

    /* ── Leaderboard — topo direito compacto ── */
    #leaderboard     { width: 120px; top: 8px; right: 8px; padding: 6px 7px; }
    .lb-title        { font-size: 9px; margin-bottom: 5px; letter-spacing: 1px; }
    .lb-item, .lb-entry { font-size: 10px; gap: 4px; padding: 3px 4px; }
    .lb-score        { display: none; } /* oculta score no lb mobile */
    .lb-rank         { min-width: 14px; font-size: 9px; }

    /* ── Minimap — canto dir. acima do boost ── */
    #minimap-wrap    { bottom: 120px; right: 8px; }
    #minimap         { width: 80px; height: 80px; }
    .minimap-label   { font-size: 7px; margin-top: 2px; }

    /* ── Barra de boost — oculta (botão ⚡ faz a vez) ── */
    #boost-bar-wrap  { display: none; }

    /* ── Chat — oculto por padrão; mostra só o log pequeno ── */
    #chat-wrap       {
        width: calc(100vw - 140px); /* não sobrepõe joystick nem leaderboard */
        left: 8px;
        bottom: 8px;
    }
    #chat-log        { max-height: 60px; font-size: 11px; }
    #chat-input-row  { display: none; } /* esconde input; abre só ao pressionar T */
    #chat-input-row.mobile-open { display: flex; }

    /* ── Notificações ── */
    #notifications   { top: 56px; }
    .notif           { font-size: 11px; padding: 5px 12px; white-space: normal; max-width: 80vw; text-align: center; }

    /* ── HUD extra buttons (centro topo) ── */
    #hud-extra-btns  { top: 8px; gap: 4px; }
    #hud-extra-btns button { width: 34px; height: 34px; font-size: 14px; border-radius: 7px; }

    /* ── Console in-game — inutilizável em mobile, ocultar ── */
    #ingame-console  { display: none !important; }
    #hud-console-btn { display: none !important; }

    /* ── Painel social — bottom sheet ── */
    #social-panel {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 65vh !important;
        max-height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
        resize: none !important;
    }
    /* Handle de drag vira decoração, não funcional no mobile */
    .sp-header { cursor: default !important; }

    /* ── Radio — acima do minimap ── */
    #radio-wrap  { right: 8px; bottom: 212px; }
    #radio-toggle{ width: 36px; height: 36px; font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — Layout do menu (telas <= 600px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Menu geral */
    .menu-content    { padding: 10px 12px; gap: 10px; max-width: 100%; }
    .logo-title      { font-size: clamp(26px, 9vw, 44px); letter-spacing: 3px; }
    .logo-sub        { font-size: 10px; letter-spacing: 2px; }
    .logo-snake      { font-size: 34px; }
    .menu-card       { padding: 12px; gap: 10px; border-radius: 14px; }
    #player-name     { font-size: 16px; padding: 12px; } /* maior para toque */

    /* Cores: 6 por linha → swatches maiores e mais fáceis de tocar */
    .color-grid      { grid-template-columns: repeat(6, 1fr); gap: 10px; }

    /* Botão jogar — grande, área de toque confortável */
    .btn-play        { padding: 20px; font-size: 17px; border-radius: 14px; min-height: 58px; }

    /* Botões de conta */
    .account-row     { gap: 6px; flex-wrap: wrap; justify-content: center; }
    .btn-account     { padding: 10px 14px; font-size: 13px; min-height: 42px; }
    .account-user    { font-size: 13px; width: 100%; text-align: center; }
    .btn-discord     { padding: 10px 14px; font-size: 13px; min-height: 42px; }

    /* Estatísticas do menu */
    .menu-stats      { flex-wrap: wrap; gap: 4px; }
    .stat-item       { font-size: 10px; gap: 2px; min-width: 80px; }
    .stat-icon       { font-size: 16px; }

    /* Esconder elementos desnecessários */
    .menu-global-lb  { display: none; }
    .controls-hint   { display: none; }
    /* .gfx-settings-card permanece visível: é essencial em telas pequenas/fracas */

    /* Modal — full-width com padding generoso para digitação */
    .modal-box       { max-width: calc(100vw - 20px); padding: 20px 16px; border-radius: 16px; margin: 10px; }
    .modal-title     { font-size: 17px; letter-spacing: 2px; }
    .modal-field input { padding: 12px; font-size: 16px; } /* evita zoom automático iOS */

    /* Tela de morte */
    .death-content   { padding: 14px; gap: 14px; }
    .death-title     { font-size: 30px; letter-spacing: 3px; }
    .death-icon      { font-size: 56px; }
    .death-info      { padding: 12px; gap: 8px; flex-wrap: wrap; justify-content: center; }
    .death-value     { font-size: 20px; }
    .death-label     { font-size: 10px; }
    .btn-respawn, .btn-menu { min-height: 44px; font-size: 14px; padding: 12px 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE — tela curta (altura < 500px)
   Em landscape o width é grande (~700-900px) portanto max-width:600px
   não dispara — precisamos usar max-height como gatilho.
══════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (pointer: coarse) {
    /* ── HUD in-game ── */
    #vjoy-wrap       { bottom: 8px; left: 8px; }
    #vjoy-base       { width: 88px; height: 88px; }
    #vjoy-knob       { width: 34px; height: 34px; }
    #mobile-controls { bottom: 8px; right: 8px; }
    #boost-btn-mobile{ width: 60px; height: 60px; font-size: 24px; }
    #minimap-wrap    { display: none; }
    #radio-wrap      { display: none; }
    #chat-wrap       { display: none; }
    #leaderboard     { width: 100px; }
    #leaderboard .lb-item:nth-child(n+6) { display: none; }
    .hud-value       { font-size: 13px; }
    #hud-extra-btns  { top: 6px; }
    #btn-fullscreen-mobile { top: 6px; right: 6px; width: 36px; height: 36px; }
    #btn-fullscreen-mobile svg { width: 16px; height: 16px; }

    /* ── Menu principal — layout horizontal compacto ── */
    .menu-overlay    { overflow-y: auto; align-items: flex-start; padding: 6px 0; }
    .menu-content    {
        padding: 8px 12px;
        gap: 8px;
        max-height: 100vh;
        overflow-y: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        max-width: 100%;
    }
    .logo-wrap       { display: none; }          /* esconde logo em landscape */
    .menu-card       { padding: 8px 10px; gap: 6px; border-radius: 12px; flex: 1 1 200px; min-width: 180px; max-width: 260px; }
    #player-name     { font-size: 14px; padding: 8px 10px; }
    .color-grid      { grid-template-columns: repeat(8, 1fr); gap: 6px; }
    .btn-play        { padding: 10px; font-size: 15px; min-height: 40px; border-radius: 10px; }
    .account-row     { gap: 4px; }
    .btn-account, .btn-discord { padding: 7px 10px; font-size: 12px; min-height: 34px; }
    /* .gfx-settings-card permanece visível: é essencial em telas pequenas/fracas */
    .menu-global-lb  { display: none; }
    .menu-stats      { display: none; }
    .controls-hint   { display: none; }

    /* ── Tela de morte — compacta horizontal ── */
    #death-screen    { align-items: center; justify-content: center; }
    .death-content   {
        padding: 10px 16px;
        gap: 8px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        max-width: 96vw;
        max-height: 96vh;
        overflow-y: auto;
        border-radius: 14px;
    }
    .death-title     { font-size: 20px; letter-spacing: 2px; width: 100%; text-align: center; margin: 0; }
    .death-icon      { font-size: 30px; }
    .death-info      { padding: 8px 12px; gap: 6px; flex-wrap: wrap; justify-content: center; }
    .death-stat      { min-width: 60px; }
    .death-value     { font-size: 16px; }
    .death-label     { font-size: 9px; }
    #btn-respawn, .btn-menu { min-height: 36px; font-size: 13px; padding: 8px 16px; flex: 1 1 120px; max-width: 200px; }

    /* ── Modal (login, registro) — compacto ── */
    .modal-box       { padding: 12px 14px; gap: 10px; max-width: calc(100vw - 24px); max-height: 90vh; overflow-y: auto; border-radius: 12px; }
    .modal-title     { font-size: 14px; letter-spacing: 1px; }
    .modal-field input { padding: 8px 10px; font-size: 14px; }
    .modal-actions   { gap: 6px; }
    .modal-actions button { padding: 8px 14px; font-size: 13px; min-height: 34px; }

    /* ── Painel social ── */
    #social-panel    { height: 85vh !important; }
}

/* ══════════════════════════════════════════════════════════════════
   BOTÃO FULLSCREEN MOBILE
══════════════════════════════════════════════════════════════════ */
#btn-fullscreen-mobile {
    display: none; /* só aparece em touch */
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 120;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10,14,26,0.75);
    border: 1.5px solid rgba(46,213,115,0.4);
    color: #2ED573;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s, transform 0.15s;
    touch-action: manipulation;
}
#btn-fullscreen-mobile svg {
    width: 20px;
    height: 20px;
    display: block;
}
#btn-fullscreen-mobile:active { transform: scale(0.90); background: rgba(46,213,115,0.18); }

@media (pointer: coarse) {
    #btn-fullscreen-mobile { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════
   OVERLAY: GIRAR DISPOSITIVO (portrait → landscape)
══════════════════════════════════════════════════════════════════ */
#rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(5,8,18,0.97);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#rotate-overlay:active { background: rgba(5,8,18,0.90); }
#rotate-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #fff;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
}
#rotate-box p {
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    margin: 0;
}
#rotate-tap-hint {
    font-size: 13px;
    color: #2ED573;
    letter-spacing: 1px;
    opacity: 0.85;
    animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}
.rotate-phone-icon {
    width: 80px;
    height: 80px;
    animation: rotateHint 1.6s ease-in-out infinite;
    transform-origin: center;
}
@keyframes rotateHint {
    0%   { transform: rotate(0deg);   opacity: 1; }
    40%  { transform: rotate(-90deg); opacity: 1; }
    60%  { transform: rotate(-90deg); opacity: 1; }
    90%  { transform: rotate(0deg);   opacity: 0.6; }
    100% { transform: rotate(0deg);   opacity: 1; }
}

/* Mostra overlay apenas em portrait em dispositivos touch */
@media (pointer: coarse) and (orientation: portrait) {
    #rotate-overlay { display: flex; }
}

/* ══════════════════════════════════════════════════════════════
   BOTÃO PERSONALIZAR (menu)
══════════════════════════════════════════════════════════════ */
.btn-customize {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    background: linear-gradient(135deg,
        rgba(162,155,254,0.15) 0%,
        rgba(253,121,168,0.15) 100%);
    border: 1px solid rgba(162,155,254,0.4);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--neon-purple);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 14px rgba(162,155,254,0.15);
}
.btn-customize:hover {
    background: linear-gradient(135deg,
        rgba(162,155,254,0.28) 0%,
        rgba(253,121,168,0.22) 100%);
    border-color: rgba(162,155,254,0.75);
    box-shadow: 0 4px 22px rgba(162,155,254,0.35);
    transform: translateY(-1px);
}
.btn-customize:active { transform: translateY(0); }
.btn-customize-icon { font-size: 18px; }
.btn-customize-arrow {
    margin-left: auto;
    font-size: 20px;
    opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════
   MODAL DE PERSONALIZAÇÃO
══════════════════════════════════════════════════════════════ */
.cst-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(5,8,20,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.cst-overlay.open {
    display: flex;
    animation: cstFadeIn 0.18s ease;
}
@keyframes cstFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cst-box {
    position: relative;
    background: linear-gradient(160deg, #0f1629 0%, #0d1220 100%);
    border: 1px solid rgba(162,155,254,0.25);
    border-radius: 22px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 0 0 1px rgba(162,155,254,0.08),
        0 24px 80px rgba(0,0,0,0.7),
        0 0 60px rgba(162,155,254,0.07);
    animation: cstPopIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
}
@keyframes cstPopIn {
    from { transform: scale(0.88); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Header */
.cst-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.cst-header-icon { font-size: 22px; }
.cst-header-title {
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex: 1;
}
.cst-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 16px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.cst-close:hover { background: rgba(255,71,87,0.18); color: #FF6B81; border-color: rgba(255,71,87,0.4); }

/* Preview row */
.cst-preview-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.cst-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
#custom-preview {
    border: 2px solid rgba(162,155,254,0.35);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(162,155,254,0.06) 0%, rgba(0,0,0,0.5) 100%);
    box-shadow: 0 0 20px rgba(162,155,254,0.15);
}
.cst-preview-label {
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon-purple);
    opacity: 0.8;
}
.cst-preview-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.cst-preview-stat {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 5px 10px;
    transition: color 0.2s, border-color 0.2s;
}
.cst-preview-stat.updated {
    color: var(--neon-purple);
    border-color: rgba(162,155,254,0.35);
}

/* Tabs */
.cst-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.cst-tabs::-webkit-scrollbar { display: none; }
.cst-tab {
    flex: 1;
    min-width: 80px;
    padding: 10px 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.cst-tab:hover { color: #fff; background: rgba(255,255,255,0.04); }
.cst-tab.active {
    color: var(--neon-purple);
    border-bottom-color: var(--neon-purple);
    background: rgba(162,155,254,0.06);
}

/* Panels */
.cst-panels {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.cst-panel {
    display: none;
    padding: 14px 16px;
    overflow-y: auto;
    height: 100%;
    max-height: calc(90vh - 310px);
    scrollbar-width: thin;
    scrollbar-color: rgba(162,155,254,0.3) transparent;
}
.cst-panel::-webkit-scrollbar { width: 4px; }
.cst-panel::-webkit-scrollbar-thumb { background: rgba(162,155,254,0.3); border-radius: 2px; }
.cst-panel.active { display: block; }

/* Grid de itens */
.cst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.cst-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px 9px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
    user-select: none;
    -webkit-user-select: none;
}
.cst-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(162,155,254,0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.cst-item.selected {
    border-color: var(--neon-purple);
    background: rgba(162,155,254,0.14);
    box-shadow: 0 0 14px rgba(162,155,254,0.35), inset 0 0 8px rgba(162,155,254,0.08);
}
.cst-item canvas {
    border-radius: 50%;
    display: block;
}
.cst-item-label {
    font-family: var(--font-ui);
    font-size: 9px;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding: 0 2px;
}
.cst-item.selected .cst-item-label { color: var(--neon-purple); }

/* Grid de cores no modal */
.cst-color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 8px 4px;
}
.cst-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cst-color-swatch:hover {
    transform: scale(1.18);
    border-color: rgba(255,255,255,0.6);
}
.cst-color-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 0 16px rgba(255,255,255,0.2);
    transform: scale(1.22);
}

/* Rodapé */
.cst-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.cst-btn-save {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s, transform 0.12s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(162,155,254,0.35);
}
.cst-btn-save:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 26px rgba(162,155,254,0.5); }
.cst-btn-save:active { transform: translateY(0); }

/* ═══════════════════════ MODAL DE CONTROLES ════════════════════ */
.ctl-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.ctl-section { display: flex; flex-direction: column; gap: 8px; }
.ctl-label {
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--neon-green);
}
.ctl-scheme { display: flex; gap: 8px; }
.ctl-scheme-btn, .ctl-stick-btn {
    flex: 1; padding: 12px 10px; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1.5px solid var(--border);
    color: var(--text); font-family: var(--font-ui); font-size: 13px; font-weight: 600;
    transition: border-color .15s, background .15s, transform .12s;
}
.ctl-scheme-btn:hover, .ctl-stick-btn:hover { background: rgba(255,255,255,0.09); transform: translateY(-1px); }
.ctl-scheme-btn.active, .ctl-stick-btn.active {
    border-color: var(--neon-purple); background: rgba(162,155,254,0.16); color: #fff;
    box-shadow: 0 0 12px rgba(162,155,254,0.3);
}
.ctl-status {
    font-family: var(--font-ui); font-size: 12px; padding: 10px 12px; border-radius: 8px;
    background: rgba(0,0,0,0.3); border: 1px solid var(--border); color: var(--text-dim);
}
.ctl-status.connected { color: var(--neon-green); border-color: rgba(46,213,115,0.4); }
.ctl-binds { display: flex; flex-direction: column; gap: 8px; }
.ctl-bind-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 12px;
}
.ctl-bind-name { flex: 1; font-family: var(--font-ui); font-size: 13px; color: var(--text); }
.ctl-bind-key {
    font-family: var(--font-title); font-size: 12px; color: var(--neon-blue);
    padding: 3px 10px; background: rgba(30,144,255,0.12);
    border: 1px solid rgba(30,144,255,0.3); border-radius: 14px; min-width: 54px; text-align: center;
}
.ctl-bind-btn {
    padding: 7px 12px; border-radius: 8px; cursor: pointer; font-family: var(--font-ui);
    font-size: 12px; font-weight: 600; color: #fff; border: none;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
}
.ctl-bind-btn.listening { animation: resume-pulse 0.8s ease-in-out infinite alternate; }
.ctl-toggle {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: var(--font-ui); font-size: 13px; color: var(--text);
}
.ctl-toggle input { width: 18px; height: 18px; accent-color: var(--neon-purple); cursor: pointer; }
.ctl-hint {
    font-family: var(--font-body); font-size: 12px; color: var(--text-dim);
    font-style: italic; text-align: center;
}

/* Mobile responsivo */
@media (max-width: 480px) {
    .cst-box { border-radius: 16px; }
    .cst-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
    .cst-panel { max-height: calc(90vh - 290px); }
    .cst-preview-row { gap: 12px; }
    #custom-preview { width: 100px; height: 100px; }
}
@media (max-height: 600px) {
    .cst-panel { max-height: calc(90vh - 260px); }
    .cst-preview-row { padding: 10px 16px 8px; }
    #custom-preview { width: 90px; height: 90px; }
}

/* ═══════════════ CHAT MOBILE — exibição forçada ao abrir ═══════════════════ */
/* Em telas baixas/landscape o chat é ocultado (#chat-wrap display:none). Quando o
   jogador toca no botão 💬, esta classe força o chat visível e o reposiciona acima
   dos controles, para que o log e o input apareçam de fato. Maior especificidade
   que as regras das media queries → vence sem precisar tocar nelas. */
#chat-wrap.chat-force-show {
    display: flex !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: 78px !important;
    width: min(88vw, 440px) !important;
    z-index: 45 !important;
    background: rgba(0,0,0,0.55);
    padding: 8px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
}
#chat-wrap.chat-force-show #chat-log { display: flex !important; max-height: 84px; }
#chat-wrap.chat-force-show #chat-input-row { display: flex !important; }