/* ==========================================
   SPEAR-MACE PVP - Stylesheet
   Minecraft-style retro / pixel theme
   (flat colors only: no gradients, no rounded corners)
   ========================================== */

:root {
    --stone: #8b8b8b;
    --stone-light: #c6c6c6;
    --stone-dark: #373737;
    --stone-mid: #6b6b6b;
    --panel: #2e2e2e;
    --panel-light: #4a4a4a;
    --black: #000;
    --grass: #5da83e;
    --gold: #fcdb05;
    --text-primary: #ffffff;
    --text-muted: #b8b8b8;
    --text-shadow: #3f3f3f;
    --font-pixel: 'Press Start 2P', 'VT323', monospace;
    --font-body: 'VT323', 'Courier New', monospace;
    --dirt: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

img, canvas, .px-head, .px-icon, .cube-face {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

body {
    background-color: #4a3322;
    background-image: var(--dirt);
    background-size: 64px 64px;
    image-rendering: pixelated;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.15;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
}

/* ==========================================
   BLOCKY RETRO BUTTONS (shared by every button)
   ========================================== */
.btn-ctrl,
.btn-play-mode,
.ha-btn,
.hp-btn,
.btn-submit-arena,
.btn-submit-custom,
.btn-google-signin,
.car-arrow,
.touch-btn,
.btn-close-modal,
.arena-mode-pill,
.arena-wep-card {
    font-family: var(--font-body);
    font-size: 20px;
    color: #fff;
    text-shadow: 2px 2px 0 var(--text-shadow);
    background: var(--stone);
    border: 3px solid var(--black);
    box-shadow:
        inset 3px 3px 0 #c9c9c9,
        inset -3px -3px 0 #555,
        0 4px 0 #1a1a1a;
    cursor: pointer;
    min-height: 40px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    line-height: 1.1;
    position: relative;
    top: 0;
    transition: background-color 0.05s steps(2);
}

.btn-ctrl:hover,
.btn-play-mode:hover,
.ha-btn:hover,
.hp-btn:hover,
.btn-submit-arena:hover,
.btn-submit-custom:hover,
.btn-google-signin:hover,
.car-arrow:hover:not(:disabled),
.touch-btn:hover,
.btn-close-modal:hover,
.arena-mode-pill:hover,
.arena-wep-card:hover,
.mode-card:hover .btn-play-mode {
    background: #7c8bd6;
    color: #ffffa0;
}

/* Click / press animation: the block sinks down */
.btn-ctrl:active,
.btn-play-mode:active,
.ha-btn:active,
.hp-btn:active,
.btn-submit-arena:active,
.btn-submit-custom:active,
.btn-google-signin:active,
.car-arrow:active:not(:disabled),
.touch-btn:active,
.btn-close-modal:active,
.arena-mode-pill:active,
.arena-wep-card:active,
.mc-press {
    top: 4px;
    box-shadow:
        inset 3px 3px 0 #555,
        inset -3px -3px 0 #c9c9c9,
        0 0 0 #1a1a1a;
    background: #6e6e6e;
}

.mc-press {
    animation: mcPress 0.22s steps(3);
}

@keyframes mcPress {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(4px); }
    100% { transform: translateY(0); }
}

button:disabled,
.btn-ctrl:disabled {
    background: #5a5a5a;
    color: #9a9a9a;
    text-shadow: none;
    cursor: not-allowed;
}

button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Selected state for toggle-like buttons */
.arena-mode-pill.active,
.arena-wep-card.selected {
    background: #5da83e;
    color: #fff;
}

/* ==========================================
   HEADER (uniform button grid)
   ========================================== */
.game-header {
    width: 100%;
    max-width: 960px;
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.header-top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-title {
    font-family: var(--font-pixel);
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 3px 3px 0 #3f3f3f;
}

.top-bar-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
}

.top-bar-controls .btn-ctrl {
    width: 100%;
    font-size: 19px;
    padding: 6px 4px;
}

.gold-pill {
    background: var(--panel);
    border: 3px solid var(--black);
    box-shadow: inset 3px 3px 0 #555, inset -3px -3px 0 #1a1a1a;
    color: var(--gold);
    font-size: 22px;
    padding: 4px 12px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    text-shadow: 2px 2px 0 #3f3a00;
}

.btn-profile {
    min-width: 170px;
    gap: 8px;
}

.header-username {
    color: #fff;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-level-badge {
    background: var(--gold);
    color: #000;
    text-shadow: none;
    font-size: 16px;
    padding: 0 5px;
    border: 2px solid #000;
}

.google-pill-tag {
    background: #4285F4;
    color: #fff;
    font-size: 14px;
    padding: 0 4px;
    border: 2px solid #000;
}

.tier-pip {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #000;
    vertical-align: middle;
}

/* ==========================================
   3D CUBE AVATAR (head textures as cube faces)
   ========================================== */
.cube-wrap {
    display: inline-block;
    width: var(--s);
    height: var(--s);
    perspective: calc(var(--s) * 6);
    flex: none;
}

.cube {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: cubeSpin 7s linear infinite;
}

.cube-face {
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.45);
    backface-visibility: hidden;
}

.cube-front  { transform: translateZ(calc(var(--s) / 2)); }
.cube-back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube-right  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube-left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-top    { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

@keyframes cubeSpin {
    from { transform: rotateX(-20deg) rotateY(-35deg); }
    to   { transform: rotateX(-20deg) rotateY(325deg); }
}

.px-head {
    display: block;
    border: 2px solid #000;
}

.px-icon {
    display: block;
}

/* ==========================================
   MAIN CONTAINER & CANVAS
   ========================================== */
.arena-container {
    position: relative;
    width: 800px;
    max-width: 96vw;
    margin: 8px auto 16px;
    overflow: hidden;
    border: 6px solid #000;
    box-shadow: 0 0 0 4px var(--stone-mid), 0 8px 0 4px #1a1a1a;
    background: #000;
}

#game-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 400;
    touch-action: none;
    transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ==========================================
   HOME MENU OVERLAY (Minecraft dirt background)
   ========================================== */
.overlay {
    position: absolute;
    inset: 0;
    background-color: #4a3322;
    background-image: var(--dirt);
    background-size: 64px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px 8px;
    z-index: 100;
}

.overlay.hidden {
    display: none;
}

.menu-title-banner {
    text-align: center;
    margin-bottom: 8px;
}

.menu-title-banner h1 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 26px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 4px 4px 0 #3f3f3f;
}

.menu-title-banner p {
    color: #ffff55;
    font-size: 20px;
    margin-top: 4px;
    text-shadow: 2px 2px 0 #3f3f00;
}

/* Carousel */
.carousel {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.car-arrow {
    flex: none;
    align-self: center;
    width: 52px;
    height: 90px;
    padding: 0;
}

.car-arrow svg {
    filter: drop-shadow(2px 2px 0 #3f3f3f);
}

.car-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border: 3px solid #000;
    background: rgba(0, 0, 0, 0.45);
}

.car-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s steps(6);
}

.car-slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.car-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
}

.car-title {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: #fff;
    text-shadow: 2px 2px 0 #3f3f3f;
    text-transform: uppercase;
}

.car-dots {
    display: flex;
    gap: 8px;
}

.car-dot {
    width: 14px;
    height: 14px;
    background: var(--stone-mid);
    border: 2px solid #000;
    cursor: pointer;
}

.car-dot.active {
    background: var(--grass);
}

.car-hint {
    color: #ffff55;
    text-align: center;
    text-shadow: 2px 2px 0 #3f3f00;
}

/* Mode Cards */
.mode-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 700px;
    align-content: start;
}

.mode-card {
    background: var(--panel);
    border: 3px solid #000;
    box-shadow: inset 3px 3px 0 var(--panel-light), inset -3px -3px 0 #1a1a1a, 0 4px 0 #1a1a1a;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: 0;
}

.mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #576574;
}

.mode-card.mode-practice::before { background: rgb(40, 120, 130); }
.mode-card.mode-easy::before { background: rgb(150, 0, 0); }
.mode-card.mode-normal::before { background: rgb(120, 40, 190); }
.mode-card.mode-pro::before { background: rgb(230, 180, 20); }
.mode-card.mode-god::before { background: #8a1f1f; }
.mode-card.mode-pvp::before { background: #ff5722; }
.mode-card.mode-custom::before { background: #00b4d8; }

.mode-card:hover {
    background: #3a3a3a;
}

.mode-card:active {
    top: 4px;
    box-shadow: inset 3px 3px 0 #1a1a1a, inset -3px -3px 0 var(--panel-light), 0 0 0 #1a1a1a;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 6px 6px;
}

.card-badge {
    font-size: 16px;
    padding: 0 6px;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
    border: 2px solid #000;
}

.card-hotkey {
    font-size: 16px;
    color: var(--text-muted);
}

.card-title {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 11px;
    color: #fff;
    margin: 0 0 6px 6px;
}

.card-sub {
    font-size: 18px;
    color: #ffff55;
    margin: 0 0 4px 6px;
}

.card-desc {
    font-size: 17px;
    color: var(--text-muted);
    margin: 0 0 10px 6px;
    flex-grow: 1;
}

.btn-play-mode {
    width: 100%;
}

/* Key guide */
.menu-key-guide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    font-size: 19px;
    color: #fff;
    padding: 10px 14px;
    background: var(--panel);
    border: 3px solid #000;
    box-shadow: inset 3px 3px 0 var(--panel-light), inset -3px -3px 0 #1a1a1a;
}

.key-pill {
    display: inline-block;
    padding: 0 6px;
    background: var(--stone);
    border: 2px solid #000;
    box-shadow: inset 2px 2px 0 #c9c9c9, inset -2px -2px 0 #555;
    color: #fff;
    text-shadow: 2px 2px 0 var(--text-shadow);
    margin-right: 4px;
}

/* ==========================================
   MINECRAFT DUNGEONS HUB & INVENTORY UI
   ========================================== */
.home-dungeons-hub {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-inv-trigger {
    width: 100%;
    background: var(--panel);
    border: 3px solid #000;
    box-shadow: inset 3px 3px 0 var(--panel-light), inset -3px -3px 0 #1a1a1a, 0 4px 0 #1a1a1a;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: left;
    position: relative;
    top: 0;
    transition: background-color 0.05s steps(2);
}

.home-inv-trigger:hover {
    background: #3a3a3a;
}

.home-inv-trigger:active {
    top: 4px;
    box-shadow: inset 3px 3px 0 #1a1a1a, inset -3px -3px 0 var(--panel-light);
}

.hit-icon {
    font-family: var(--font-pixel);
    font-size: 20px;
    background: #8b8b8b;
    color: #fff;
    border: 3px solid #000;
    box-shadow: inset 2px 2px 0 #c9c9c9, inset -2px -2px 0 #555;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    text-shadow: 2px 2px 0 #3f3f3f;
}

.hit-title {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: #55ff55;
    margin-bottom: 4px;
}

.hit-desc {
    font-size: 17px;
    color: var(--text-muted);
}

.modal-inventory-card {
    max-width: 680px;
    width: 95%;
}

.mc-inv-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 3px solid #000;
    padding-bottom: 8px;
}

.mc-inv-tab {
    font-family: var(--font-body);
    font-size: 20px;
    color: #fff;
    background: var(--stone);
    border: 3px solid #000;
    box-shadow: inset 2px 2px 0 #c9c9c9, inset -2px -2px 0 #555;
    padding: 4px 14px;
    cursor: pointer;
}

.mc-inv-tab.active {
    background: #5da83e;
    color: #fff;
    box-shadow: inset 2px 2px 0 #80df59, inset -2px -2px 0 #3b6d26;
}

.mc-sec-title {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: #fcdb05;
    margin-bottom: 8px;
    text-shadow: 2px 2px 0 #3f3a00;
}

.mc-inventory-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 6px;
    background: #1e1e1e;
    border: 3px solid #000;
    padding: 8px;
}

.mc-slot {
    aspect-ratio: 1 / 1;
    background: #8b8b8b;
    border: 2px solid #373737;
    box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #c6c6c6;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.mc-slot.active {
    outline: 3px solid #55ff55;
    outline-offset: -3px;
    background: #a0a0a0;
}

.mc-slot-num {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
}

.crafting-table-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #1e1e1e;
    border: 3px solid #000;
    padding: 14px;
    margin-bottom: 12px;
}

.crafting-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 4px;
}

.c-slot {
    background: #8b8b8b;
    border: 2px solid #373737;
    box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #c6c6c6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-slot-big {
    width: 60px;
    height: 60px;
}

.crafting-arrow {
    font-family: var(--font-pixel);
    font-size: 18px;
    color: #fcdb05;
}

/* ==========================================
   MODALS (Minecraft inventory panel look)
   ========================================== */
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.modal-backdrop.hidden {
    display: none;
}

.modal-card {
    background: var(--panel);
    border: 4px solid #000;
    box-shadow: inset 4px 4px 0 var(--panel-light), inset -4px -4px 0 #1a1a1a;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 92%;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    border-bottom: 4px solid #000;
    padding-bottom: 10px;
    gap: 10px;
}

.modal-header h2 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    text-shadow: 2px 2px 0 #3f3f3f;
}

.btn-close-modal {
    min-height: 36px;
    width: 40px;
    padding: 0;
    font-size: 26px;
    flex: none;
}

.modal-subtitle {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.modal-actions .btn-ctrl {
    flex: 1;
    min-width: 0;
}

/* Custom Bot Form */
.custom-bot-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .custom-bot-fields { grid-template-columns: 1fr; }
}

.control-group {
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 10px;
    border: 2px solid #000;
}

.control-label {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.control-value {
    color: #55ff55;
}

.slider {
    width: 100%;
    accent-color: var(--grass);
    cursor: pointer;
}

.control-group-toggles {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    cursor: pointer;
    color: #fff;
}

.toggle-label input {
    accent-color: var(--grass);
    width: 18px;
    height: 18px;
}

.btn-submit-custom {
    width: 100%;
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.stat-col {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
    padding: 12px;
    font-size: 19px;
}

.stat-col h4 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 10px;
    line-height: 1.4;
    color: var(--gold);
    margin-bottom: 8px;
    border-bottom: 2px solid #000;
    padding-bottom: 6px;
}

.stat-col p {
    margin-bottom: 6px;
    color: var(--text-muted);
}

.stat-col b {
    color: #fff;
}

/* ==========================================
   TOUCH CONTROLS
   ========================================== */
.touch-controls {
    display: flex;
    justify-content: space-between;
    width: 800px;
    max-width: 96vw;
    margin: 10px auto;
    padding: 0 10px;
}

.touch-controls.hidden { display: none; }

.touch-cluster {
    display: flex;
    gap: 10px;
}

.touch-btn {
    width: 64px;
    height: 56px;
    padding: 0;
    font-size: 18px;
}

/* ==========================================
   FOOTER
   ========================================== */
.game-footer {
    margin-top: auto;
    padding: 14px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 0 #3f3f3f;
}

/* ==========================================
   PROFILE / AUTH
   ========================================== */
.home-profile-banner,
.home-arena-banner {
    width: 100%;
    max-width: 640px;
    background: var(--panel);
    border: 3px solid #000;
    box-shadow: inset 3px 3px 0 var(--panel-light), inset -3px -3px 0 #1a1a1a, 0 4px 0 #1a1a1a;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    position: relative;
    top: 0;
}

.home-profile-banner:hover,
.home-arena-banner:hover {
    background: #3a3a3a;
}

.home-profile-banner:active,
.home-arena-banner:active {
    top: 4px;
    box-shadow: inset 3px 3px 0 #1a1a1a, inset -3px -3px 0 var(--panel-light), 0 0 0 #1a1a1a;
}

.hp-left,
.ha-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-cube {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.hp-title,
.ha-title {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 2px 2px 0 #3f3f3f;
}

.hp-desc,
.ha-desc {
    font-size: 18px;
    color: var(--text-muted);
}

.hp-btn,
.ha-btn {
    min-width: 120px;
}

.modal-auth-card { max-width: 560px; width: 95%; }

.auth-section {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
    padding: 12px;
    margin-bottom: 12px;
}

.auth-sec-title {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 10px;
    line-height: 1.4;
    color: #55ff55;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.auth-sec-desc {
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.btn-google-signin {
    width: 100%;
    background: #fff;
    color: #202124;
    text-shadow: none;
}

.btn-google-signin:hover {
    background: #e8e8e8;
    color: #202124;
}

.google-disclaimer {
    font-size: 17px;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

.google-connected-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: rgba(93, 168, 62, 0.25);
    border: 2px solid #000;
    padding: 10px 12px;
}

.google-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.google-check-icon {
    background: var(--grass);
    color: #fff;
    border: 2px solid #000;
    padding: 0 4px;
    font-size: 16px;
}

.google-name { color: #fff; }
.google-status { font-size: 17px; color: #55ff55; }

.username-input-row {
    display: flex;
    gap: 8px;
}

.auth-input {
    flex-grow: 1;
    min-width: 0;
    background: #000;
    border: 3px solid var(--stone-mid);
    padding: 6px 10px;
    color: #fff;
    font-size: 22px;
    font-family: var(--font-body);
    outline: none;
}

.auth-input:focus {
    border-color: #fff;
}

.form-feedback {
    font-size: 17px;
    margin-top: 6px;
    min-height: 18px;
}

.form-feedback.success { color: #55ff55; }
.form-feedback.error { color: #ff5555; }

.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 10px;
}

.avatar-choice {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid #000;
    background: var(--stone-mid);
    position: relative;
    top: 0;
}

.avatar-choice:hover { background: #7c8bd6; }
.avatar-choice:active { top: 3px; }

.avatar-choice.selected {
    border-color: #fff;
    background: var(--grass);
}

.avatar-choice img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.career-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.career-rank-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-name { color: var(--gold); }

.level-pill {
    background: var(--stone-mid);
    border: 2px solid #000;
    color: #fff;
    font-size: 16px;
    padding: 0 6px;
}

.xp-bar-wrapper { width: 150px; }

.xp-label {
    font-size: 16px;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 2px;
}

.xp-track {
    width: 100%;
    height: 12px;
    background: #000;
    border: 2px solid #000;
    outline: 2px solid var(--stone-mid);
}

.xp-fill {
    height: 100%;
    background: #7fe036;
    transition: width 0.3s steps(8);
}

.career-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.career-stat-card {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
    padding: 8px;
    text-align: center;
}

.cs-val {
    display: block;
    font-size: 24px;
    color: #fff;
}

.cs-label {
    display: block;
    font-size: 16px;
    color: var(--text-muted);
}

/* Google Chooser */
.google-chooser-card {
    max-width: 440px;
    background: var(--panel);
    color: #fff;
}

.google-chooser-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    border-bottom: 4px solid #000;
    padding-bottom: 10px;
    position: relative;
}

.google-chooser-header h3 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 11px;
    color: #fff;
}

.google-chooser-header p {
    font-size: 17px;
    color: var(--text-muted);
    margin-top: 4px;
}

.google-chooser-header .btn-close-modal {
    position: absolute;
    right: 0;
    top: 0;
}

.google-account-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.google-acc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 3px solid #000;
    background: var(--stone-mid);
    cursor: pointer;
}

.google-acc-row:hover { background: #7c8bd6; }

.google-acc-img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: 2px solid #000;
}

.google-acc-name { color: #fff; }
.google-acc-email { font-size: 16px; color: #ddd; }

.google-custom-divider {
    text-align: center;
    margin: 14px 0 10px;
    position: relative;
}

.google-custom-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: #000;
}

.google-custom-divider span {
    position: relative;
    background: var(--panel);
    padding: 0 8px;
    font-size: 17px;
    color: var(--text-muted);
}

.google-custom-email-row {
    display: flex;
    gap: 8px;
}

/* ==========================================
   ARMORY, SKINS, ARENA & LEADERBOARD
   ========================================== */
.modal-weapons-card { max-width: 640px; width: 95%; }

.weapons-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.weapon-shop-card,
.skin-card,
.arena-section,
.action-box {
    background: rgba(0, 0, 0, 0.35);
    border: 3px solid #000;
    padding: 12px;
}

.weapon-shop-card.equipped,
.skin-card.equipped {
    border-color: var(--grass);
}

.weapon-shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ws-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ws-title {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: #fff;
    margin-bottom: 4px;
}

.ws-cat { font-size: 17px; color: #55ffff; }
.ws-desc { font-size: 18px; color: var(--text-muted); margin-bottom: 8px; }

.ws-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 17px;
    background: rgba(0, 0, 0, 0.35);
    padding: 6px 10px;
    margin-bottom: 10px;
}

.ws-stats-row b { color: #fff; }

.badge-equipped,
.badge-max {
    display: inline-block;
    background: var(--grass);
    color: #fff;
    border: 2px solid #000;
    text-shadow: 2px 2px 0 #1f3f12;
    font-size: 16px;
    padding: 2px 8px;
}

.badge-max { background: #e67e22; text-shadow: 2px 2px 0 #4a2800; }

.weapon-upgrades-section {
    border-top: 3px solid #000;
    padding-top: 8px;
}

.wu-header {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--gold);
    margin-bottom: 8px;
}

.wu-list { display: flex; flex-direction: column; gap: 6px; }

.wu-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 10px;
}

.wu-name { color: #fff; margin-right: 6px; }
.wu-level { font-size: 16px; color: #55ffff; }
.wu-desc { font-size: 16px; color: var(--text-muted); }

.modal-skins-card { max-width: 620px; width: 95%; }

.skins-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.skin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.skin-avatar-preview {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.skin-name { color: #fff; margin-bottom: 4px; }
.skin-desc { font-size: 16px; color: var(--text-muted); margin-bottom: 10px; min-height: 36px; }
.skin-action { width: 100%; }
.skin-action .btn-ctrl { width: 100%; }

/* Arena Hub */
.modal-arena-card { max-width: 680px; width: 95%; }

.arena-rank-banner {
    background: rgba(0, 0, 0, 0.35);
    border: 3px solid #000;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.arb-left { display: flex; align-items: center; gap: 12px; }
.arb-icon .tier-pip { width: 28px; height: 28px; }
.arb-tier { font-size: 24px; }
.arb-rp { font-size: 17px; color: #ddd; }
.arb-progress { width: 180px; }

.arb-track {
    width: 100%;
    height: 12px;
    background: #000;
    outline: 2px solid var(--stone-mid);
    margin-bottom: 4px;
}

.arb-fill { height: 100%; transition: width 0.3s steps(8); }
.arb-next { font-size: 16px; color: var(--text-muted); text-align: right; }

.arena-section { margin-bottom: 12px; }

.arena-modes-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.arena-mode-pill {
    flex-direction: column;
    height: auto;
    min-height: 64px;
    white-space: normal;
    gap: 2px;
}

.amp-title { font-size: 20px; }
.amp-sub { font-size: 16px; color: #eee; text-shadow: none; }

.arena-wep-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.arena-wep-card { min-width: 96px; }

.arena-actions-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    .arena-actions-split { grid-template-columns: 1fr; }
}

.action-box h4 {
    font-family: var(--font-pixel);
    font-weight: normal;
    font-size: 10px;
    color: #fff;
    margin-bottom: 6px;
}

.action-box p {
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.btn-submit-arena { width: 100%; }

.private-controls-row { margin-bottom: 8px; }
.private-controls-row .btn-ctrl { width: 100%; }

.private-room-panel {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 18px;
}

.private-room-panel .btn-submit-arena { margin-top: 8px; }

.room-code-val { color: #55ff55; font-size: 22px; }

.join-private-row { display: flex; gap: 8px; }
.join-private-row .btn-ctrl { min-width: 72px; padding: 4px 8px; }

/* Queue modal (square pixel "radar") */
.queue-card {
    max-width: 380px;
    text-align: center;
    padding: 24px 20px;
}

.queue-card .btn-ctrl { margin-top: 16px; }

.queue-radar {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: #000;
    border: 4px solid var(--grass);
    overflow: hidden;
}

.radar-circle {
    position: absolute;
    inset: 24px;
    border: 4px dashed #3f7d2a;
}

.radar-sweep {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 8px;
    background: var(--grass);
    animation: radarScan 1s steps(8) infinite alternate;
}

@keyframes radarScan {
    from { top: 0; }
    to   { top: calc(100% - 8px); }
}

.queue-count { font-size: 24px; color: #55ff55; margin: 6px 0; }
.queue-timer { font-size: 20px; color: var(--text-muted); }

/* Leaderboard */
.modal-leaderboard-card { max-width: 720px; width: 95%; }

.leaderboard-tier-explainer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.lte-badge {
    font-size: 16px;
    padding: 2px 8px;
    color: #fff;
    border: 2px solid #000;
}

.leaderboard-list-container { display: flex; flex-direction: column; gap: 6px; }

.leaderboard-row {
    display: grid;
    grid-template-columns: 50px 1.5fr 1fr 80px 1fr 70px;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
    padding: 6px 12px;
    font-size: 18px;
}

.leaderboard-row:hover { background: rgba(255, 255, 255, 0.08); }
.leaderboard-row.top-three { border-color: var(--gold); }
.leaderboard-row.user-highlight { border-color: #55ff55; background: rgba(93, 168, 62, 0.25); }

.lb-rank { color: var(--gold); }
.lb-player { display: flex; align-items: center; gap: 8px; color: #fff; }
.lb-flag .px-head { border-width: 2px; }
.lb-tier { font-size: 17px; }
.lb-rp { color: #55ffff; }
.lb-weapon { color: var(--text-muted); }
.lb-winrate { color: #55ff55; }

@media (max-width: 700px) {
    .game-title { font-size: 13px; }
    .menu-title-banner h1 { font-size: 16px; }
    .leaderboard-row { grid-template-columns: 40px 1.5fr 1fr 70px; }
    .lb-weapon, .lb-winrate { display: none; }
}

/* ==========================================
   SUBTLE HOME BUTTON
   ========================================== */
.btn-home-subtle {
    background: #4a4a4a !important;
    color: #b0b0b0 !important;
    border: 2px solid #222 !important;
    box-shadow: inset 2px 2px 0 #666, inset -2px -2px 0 #2b2b2b, 0 2px 0 #111 !important;
    font-size: 16px !important;
    padding: 3px 8px !important;
    min-height: 32px !important;
    opacity: 0.85;
}
.btn-home-subtle:hover {
    background: #5c5c5c !important;
    color: #ffffff !important;
    opacity: 1;
}

/* ==========================================
   MATCHMAKING RADAR QUEUE MODAL
   ========================================== */
.matchmaking-card {
    text-align: center;
    max-width: 440px;
}
.matchmaking-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 10px;
}
.radar-box {
    width: 120px;
    height: 120px;
    background: #0d1e12;
    border: 3px solid #2ecc71;
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: inset 0 0 15px rgba(46, 204, 113, 0.4);
}
.radar-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 1px dashed rgba(46, 204, 113, 0.6);
}
.radar-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, rgba(46, 204, 113, 0.5) 0deg, transparent 60deg, transparent 360deg);
    animation: radarSpin 2s linear infinite;
}
.radar-ping {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff4757;
    top: 35%;
    left: 65%;
    animation: pingBlink 1s ease-in-out infinite alternate;
}
@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pingBlink {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.3); }
}
.matchmaking-status {
    font-size: 18px;
    color: #2ecc71;
    margin-bottom: 6px;
    font-family: var(--font-pixel);
    font-size: 11px;
    line-height: 1.5;
}
.matchmaking-eta {
    font-size: 16px;
    color: var(--text-muted);
}
.matchmaking-eta span {
    color: var(--gold);
    font-weight: bold;
}

/* ==========================================
   SOCIAL & MAILBOX MODAL
   ========================================== */
.social-card {
    max-width: 600px;
}
.social-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 3px solid #000;
    margin-bottom: 15px;
    background: #222;
    padding: 4px 4px 0 4px;
}
.social-tab-btn {
    flex: 1;
    font-family: var(--font-body);
    font-size: 19px;
    padding: 6px 10px;
    background: #3a3a3a;
    color: var(--text-muted);
    border: 2px solid #000;
    border-bottom: none;
    cursor: pointer;
}
.social-tab-btn.active {
    background: var(--panel);
    color: #fff;
    font-weight: bold;
    border-color: var(--gold);
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

/* Friends list */
.add-friend-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}
.friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #000;
    padding: 8px 12px;
}
.friend-name-col {
    display: flex;
    align-items: center;
    gap: 10px;
}
.friend-status-dot {
    width: 10px;
    height: 10px;
    border: 1px solid #000;
}
.status-online { background: #2ecc71; }
.status-in-match { background: #f1c40f; }
.status-offline { background: #7f8c8d; }
.friend-actions {
    display: flex;
    gap: 6px;
}
.btn-sm-ctrl {
    font-size: 15px !important;
    min-height: 28px !important;
    padding: 2px 8px !important;
}

/* Mailbox */
.mail-compose-box {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
    padding: 12px;
    margin-bottom: 16px;
}
.mail-compose-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.mail-textarea {
    width: 100%;
    min-height: 55px;
    resize: vertical;
    margin-bottom: 8px;
    font-family: var(--font-body);
    font-size: 18px;
}
.mail-compose-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}
.mail-item {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #000;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mail-item.has-gift {
    border-color: var(--gold);
}
.mail-top-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mail-from {
    font-weight: bold;
    color: var(--gold);
    font-size: 18px;
}
.mail-date {
    font-size: 14px;
    color: var(--text-muted);
}
.mail-text {
    font-size: 17px;
    color: #e0e0e0;
    line-height: 1.25;
}
.mail-text.restricted {
    color: #e74c3c;
    font-style: italic;
    background: rgba(231, 76, 60, 0.15);
    padding: 4px 6px;
    border-left: 3px solid #e74c3c;
}
.mail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Account Safety (Minor Mode) */
.safety-card {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #000;
    padding: 16px;
}
.safety-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.safety-toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}
.safety-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.safety-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #555;
    border: 2px solid #000;
    transition: .2s;
}
.safety-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border: 1px solid #000;
    transition: .2s;
}
.safety-toggle-switch input:checked + .safety-slider {
    background-color: #2ecc71;
}
.safety-toggle-switch input:checked + .safety-slider:before {
    transform: translateX(24px);
}
.safety-info-box {
    background: rgba(0, 0, 0, 0.25);
    border-left: 4px solid var(--gold);
    padding: 10px;
    font-size: 16px;
    color: #dcdde1;
    line-height: 1.3;
    margin-bottom: 14px;
}
.safety-badge {
    font-size: 15px;
    padding: 6px 10px;
    border: 2px solid #000;
    background: #2c3e50;
    color: #ecf0f1;
    display: inline-block;
}
.safety-badge.active-minor {
    background: #27ae60;
    border-color: #2ecc71;
    color: #fff;
    font-weight: bold;
}

/* ==========================================
   MATCH STATS MODAL (DETAILED BREAKDOWN)
   ========================================== */
.stats-modal-card {
    max-width: 650px;
}
.stats-winner-banner {
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--gold);
    margin-bottom: 14px;
}
.stats-winner-title {
    font-size: 26px;
    color: var(--gold);
    margin-bottom: 4px;
}
.stats-score-line {
    font-size: 18px;
    color: #2ecc71;
}
.altitude-champion-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 210, 211, 0.15);
    border: 2px solid #00d2d3;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.altitude-crown {
    font-size: 28px;
}
.altitude-info h4 {
    color: #00d2d3;
    font-size: 18px;
    margin-bottom: 2px;
}
.altitude-info p {
    color: #fff;
    font-size: 16px;
}
.stats-table-container {
    width: 100%;
    border: 2px solid #000;
    background: rgba(0, 0, 0, 0.4);
    margin-bottom: 12px;
}
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    text-align: left;
}
.stats-table th {
    background: #333;
    padding: 8px 10px;
    border-bottom: 2px solid #000;
    color: var(--gold);
}
.stats-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #222;
    color: #ecf0f1;
}
.stats-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}