@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;600;700;900&family=Outfit:wght@400;600;800&display=swap');

:root {
        --bg-dark-base: #030712;
        --bg-dark-surface: #090f1d;
        --bg-dark-surface-2: #111a2e;
        --glass-bg: rgba(9, 15, 29, 0.65);
        --glass-border: rgba(255, 255, 255, 0.07);
        --glass-border-focus: rgba(0, 240, 255, 0.35);
        --glass-blur: 16px;
        --glass-saturate: 190%;
        --accent-cyan: #00f0ff;
        --accent-purple: #bd00ff;
        --accent-pink: #ff007f;
        --accent-gold: #ffd700;
        --accent-emerald: #39ff14;
        --accent-blue: #3b82f6;
        --line-color: rgba(255, 255, 255, 0.09);
        --text-main: #ffffff;
        --text-sub: #94a3b8;
        --text-muted: #64748b;
        --font-inter: 'Inter', sans-serif;
        --font-outfit: 'Outfit', sans-serif;
        --font-orbitron: 'Orbitron', sans-serif;
        
        /* Map legacy and sx variables */
        --bg: var(--bg-dark-base);
        --panel: var(--bg-dark-surface);
        --panel-2: var(--bg-dark-surface-2);
        --line: var(--line-color);
        --text: var(--text-main);
        --muted: var(--text-sub);
        --blue: var(--accent-blue);
        --red: #ef4444;
        --green: #22c55e;
        --yellow: var(--accent-gold);
        --app-vw: 100vw;
        --app-vh: 100dvh;
        
        --sx-bg: var(--bg-dark-base);
        --sx-surface: var(--glass-bg);
        --sx-surface-2: var(--bg-dark-surface-2);
        --sx-cyan: var(--accent-cyan);
        --sx-blue: var(--accent-blue);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-inter);
      }

      body {
        min-height: 100dvh;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: pan-x pan-y;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }

      .hidden {
        display: none !important;
      }

      .app,
      .flow,
      .flow-card,
      .field-card,
      .canvas-wrap,
      .mobile-nav,
      .mobile-nav-right,
      .team-lobby-overlay,
      .team-lobby-popup,
      .mobile-popup,
      .hud,
      button,
      [role="button"],
      .play-choice {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }

      button,
      input,
      select {
        font: inherit;
      }

      button {
        min-height: 48px;
        border: 0;
        border-radius: 8px;
        color: white;
        background: #334155;
        font-weight: 850;
        cursor: pointer;
        touch-action: manipulation;
        transition: transform 0.1s ease, background 0.15s ease;
      }

      button:active:not(:disabled) {
        transform: scale(0.96);
      }

      button:disabled {
        cursor: not-allowed;
        opacity: 0.48;
      }

      input,
      select {
        width: 100%;
        min-height: 40px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #08111f;
        color: var(--text);
        padding: 9px 10px;
        outline: none;
      }

      input,
      textarea,
      select,
      [contenteditable="true"] {
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
      }

      input[type="range"] {
        padding: 0;
        min-height: 26px;
        accent-color: #38bdf8;
      }

      .app {
        width: min(100%, 1280px);
        margin: 0 auto;
        padding: 14px;
      }

      .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 12px;
      }

      .brand-head {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .brand-logo {
        width: clamp(70px, 10vw, 112px);
        height: auto;
        flex: 0 0 auto;
        transform: translateX(7.5%);
        filter: drop-shadow(0 14px 24px rgba(14, 165, 233, 0.26));
      }

      .brand-copy {
        min-width: 0;
      }

      h1 {
        margin: 0 0 5px;
        font-size: clamp(1.45rem, 2.6vw, 2.25rem);
        line-height: 1.05;
        letter-spacing: 0;
      }

      .sub {
        margin: 0;
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.4;
      }

      .pill {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        padding: 7px 10px;
        color: #dbeafe;
        font-size: 0.86rem;
        font-weight: 800;
        white-space: nowrap;
      }

      #connectionPill {
        display: none;
      }

      .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 350px;
        gap: 12px;
        align-items: start;
      }

      .field-card,
      .side {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: 0 22px 44px rgba(0, 0, 0, 0.28);
      }

      .field-card {
        position: relative;
      }

      .field-head {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 10px;
        border-bottom: 0;
        pointer-events: none;
        z-index: 12;
      }

      .field-head[hidden] {
        display: none !important;
      }

      .match-head-inner {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .match-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        border-radius: 8px;
        background: rgba(8, 17, 31, 0.88);
        border: 1px solid rgba(255,255,255,0.16);
        padding: 5px 8px;
        box-shadow: 0 10px 26px rgba(0,0,0,0.32);
        pointer-events: auto;
      }

      .score {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 58px;
        min-height: 34px;
        border-radius: 7px;
        background: rgba(2, 6, 23, 0.82);
        font-size: 1.55rem;
        font-weight: 950;
        letter-spacing: 0;
        border: 1px solid rgba(255,255,255,0.1);
      }

      .match-clock {
        min-width: 86px;
        min-height: 34px;
        display: grid;
        place-items: center;
        border-radius: 7px;
        background: rgba(15, 23, 42, 0.9);
        color: #f8fafc;
        font-size: 1.25rem;
        font-weight: 950;
        font-variant-numeric: tabular-nums;
        border: 1px solid rgba(255,255,255,0.12);
      }

      .match-meta {
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #f8fafc;
        font-size: 0.74rem;
        font-weight: 900;
        letter-spacing: 0;
        white-space: nowrap;
        text-shadow: 0 2px 8px rgba(2, 6, 23, 0.75);
        pointer-events: none;
      }

      .match-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 0;
        padding: 0;
        color: inherit;
        white-space: nowrap;
      }

      .ping-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #94a3b8;
        box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.16);
      }

      .ping-dot.good {
        background: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
      }

      .ping-dot.mid {
        background: #eab308;
        box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.2);
      }

      .ping-dot.bad {
        background: #ef4444;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
      }

      .connection-badge {
        color: #f8fafc;
      }

      .danger-time,
      .match-clock.danger-time {
        animation: scoreAlarm 1s ease infinite;
        border-color: rgba(239, 68, 68, 0.6);
        color: #fecaca;
      }

      @keyframes scoreAlarm {
        0%, 100% { background: #08111f; }
        50% { background: rgba(185, 28, 28, 0.22); }
      }

      .score.blue {
        color: #60a5fa;
      }

      .score.red {
        color: #fb7185;
      }

      .mini {
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.35;
      }

      .canvas-wrap {
        position: relative;
        overflow: hidden;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        background: var(--green);
      }

      canvas {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        background: var(--green);
        transform: translateX(var(--field-x-offset, 0px));
        transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      .hud {
        position: absolute;
        left: 10px;
        bottom: 10px;
        font-weight: 700;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.48);
        padding: 6px 10px;
        color: #e2e8f0;
        font-size: 0.9rem;
        pointer-events: none;
        z-index: 4;
      }

      .pass-request-button {
        position: absolute;
        top: 13%;
        right: 4.7%;
        width: var(--pass-btn-size, clamp(56px, 7.4vw, 86px));
        height: var(--pass-btn-size, clamp(56px, 7.4vw, 86px));
        min-height: 0;
        border-radius: 50%;
        border: 2px solid var(--pass-btn-border-color, rgba(245, 158, 11, 0.7));
        background: var(--pass-btn-bg, rgba(245, 158, 11, 0.08));
        color: var(--pass-btn-color, #fff7ad);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        z-index: 5;
        pointer-events: auto;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(4px);
        opacity: var(--pass-btn-opacity, 0.8);
      }

      .pass-request-button:active,
      .pass-request-button.active {
        background: rgba(245, 158, 11, 0.24) !important;
        border-color: rgba(251, 191, 36, 1) !important;
        color: #fff !important;
        box-shadow: 0 0 16px rgba(250, 204, 21, 0.4) !important;
      }

      .pass-request-button.hidden {
        display: none;
      }

      .dribble-button {
        position: absolute;
        top: calc(13% + clamp(66px, 8.8vw, 102px));
        right: 5.2%;
        width: var(--sprint-btn-size, clamp(56px, 7.4vw, 86px));
        height: var(--sprint-btn-size, clamp(56px, 7.4vw, 86px));
        min-height: 0;
        border-radius: 50%;
        border: 2px solid var(--sprint-btn-border-color, rgba(6, 182, 212, 0.7));
        background: var(--sprint-btn-bg, rgba(6, 182, 212, 0.08));
        color: var(--sprint-btn-color, #e0f2fe);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
        z-index: 5;
        pointer-events: auto;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(4px);
        opacity: var(--sprint-btn-opacity, 0.8);
      }

      .dribble-button.ready {
        background: rgba(6, 182, 212, 0.08) !important;
        border-color: rgba(6, 182, 212, 0.7) !important;
        color: #e0f2fe !important;
      }

      .dribble-button.active {
        background: rgba(34, 197, 94, 0.28) !important;
        border-color: rgba(34, 197, 94, 1) !important;
        color: #fff !important;
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.4) !important;
      }

      .dribble-button.cooldown {
        background: rgba(15, 23, 42, 0.45) !important;
        border-color: rgba(148, 163, 184, 0.4) !important;
        color: #94a3b8 !important;
        opacity: 0.65;
      }

      .dribble-button.hidden {
        display: none;
      }

      .action-btn-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        gap: 2px;
      }

      .action-btn-icon {
        width: clamp(20px, 2.8vw, 32px);
        height: clamp(20px, 2.8vw, 32px);
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s ease;
      }

      .pass-request-button:active .action-btn-icon,
      .dribble-button:active .action-btn-icon {
        transform: scale(1.15);
      }

      .action-btn-label {
        font-size: clamp(0.52rem, 0.78vw, 0.66rem);
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        white-space: nowrap;
      }

      .advanced-aim-arrow {
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 1px;
        z-index: 10;
        pointer-events: none;
        opacity: 0;
        transform-origin: 0 50%;
      }

      .advanced-aim-arrow.show {
        opacity: 1;
      }

      .advanced-aim-arrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(var(--aim-thickness, 26px) / -2);
        width: var(--aim-len, 80px);
        height: var(--aim-thickness, 26px);
        border-radius: 999px 12px 12px 999px;
        background:
          linear-gradient(90deg, rgba(255,255,255,0.04), var(--aim-color, #ff1744)),
          linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
        clip-path: polygon(0 38%, calc(100% - 22px) 18%, 100% 50%, calc(100% - 22px) 82%, 0 62%);
        box-shadow: 0 0 18px var(--aim-glow, rgba(255, 23, 68, 0.34)), 0 0 20px rgba(2, 6, 23, 0.44);
      }

      .advanced-aim-arrow::after {
        display: none;
      }

      .advanced-move-arrow {
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 1px;
        z-index: 9;
        pointer-events: none;
        opacity: 0;
        transform-origin: 0 50%;
      }

      .advanced-move-arrow.show {
        opacity: 1;
      }

      .advanced-move-arrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc(var(--move-arrow-thickness, 26px) / -2);
        width: var(--move-arrow-len, 70px);
        height: var(--move-arrow-thickness, 26px);
        border-radius: 999px 12px 12px 999px;
        background:
          linear-gradient(90deg, rgba(255,255,255,0.02), var(--move-arrow-color, #00d2ff)),
          linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
        clip-path: polygon(0 38%, calc(100% - 22px) 18%, 100% 50%, calc(100% - 22px) 82%, 0 62%);
        box-shadow: 0 0 18px var(--move-arrow-glow, rgba(0, 210, 255, 0.34)), 0 0 20px rgba(2, 6, 23, 0.44);
      }

      .advanced-move-arrow::after {
        display: none;
      }

      .ping-badge {
        position: absolute;
        left: 10px;
        bottom: 46px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.38);
        padding: 4px 8px;
        color: #94a3b8;
        font-size: 0.72rem;
        font-weight: 700;
        pointer-events: none;
        z-index: 4;
      }

      .canvas-score-overlay {
        position: absolute;
        top: 8px;
        right: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(2, 6, 23, 0.78);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 10px;
        padding: 4px 10px;
        font-size: 1.4rem;
        font-weight: 950;
        z-index: 4;
        pointer-events: none;
      }

      .canvas-score-overlay .s-blue { color: #60a5fa; }
      .canvas-score-overlay .s-dash { color: #64748b; margin: 0 4px; }
      .canvas-score-overlay .s-red  { color: #fb7185; }

      .mobile-joystick {
        display: none;
        position: absolute;
        left: 16px;
        bottom: 16px;
        width: var(--joystick-size, 120px);
        height: var(--joystick-size, 120px);
        border: 2.5px solid var(--joystick-color, rgba(255, 255, 255, 0.45));
        border-radius: 50%;
        background:
          radial-gradient(circle at center, rgba(255, 255, 255, 0.18), rgba(2, 6, 23, 0.42)),
          rgba(2, 6, 23, 0.28);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
        pointer-events: auto;
        touch-action: none;
        z-index: 2;
        opacity: var(--joystick-opacity, 0.78);
      }

      #leftJoystick {
        --joystick-size: var(--left-joystick-size, 120px);
        --joystick-opacity: var(--left-joystick-opacity, 0.78);
        --joystick-color: var(--left-joystick-color, rgba(255, 255, 255, 0.45));
      }
      #rightJoystick {
        --joystick-size: var(--right-joystick-size, 120px);
        --joystick-opacity: var(--right-joystick-opacity, 0.78);
        --joystick-color: var(--right-joystick-color, rgba(255, 255, 255, 0.45));
      }

      .joystick-knob {
        position: absolute;
        left: 50%;
        top: 50%;
        width: clamp(32px, 6vmin, 48px) !important;
        height: clamp(32px, 6vmin, 48px) !important;
        border: 2px solid rgba(255, 255, 255, 0.85);
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.94);
        transform: translate(-50%, -50%);
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
      }

      .mobile-joystick.active {
        display: block;
        transform: translate(-50%, -50%);
        z-index: 11;
      }

      .mobile-joystick.aim-only {
        opacity: 0 !important;
        pointer-events: none !important;
      }

      .mobile-joystick.active.aim-only {
        display: block !important;
        width: clamp(48px, 10vmin, 74px) !important;
        height: clamp(48px, 10vmin, 74px) !important;
        border: 2px solid rgba(125, 211, 252, 0.88) !important;
        background:
          radial-gradient(circle at center, rgba(125, 211, 252, 0.22), rgba(14, 165, 233, 0.08) 58%, rgba(2, 6, 23, 0.22)),
          rgba(2, 6, 23, 0.16) !important;
        box-shadow: 0 0 18px rgba(56, 189, 248, 0.34), 0 8px 22px rgba(2, 6, 23, 0.34) !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0.58 !important;
        z-index: 11 !important;
      }

      .mobile-joystick.aim-only .joystick-knob {
        display: none;
      }

      .mobile-joystick.hide-knob .joystick-knob {
        display: none !important;
      }

      .mobile-joystick.active .joystick-knob {
        background: rgba(59, 130, 246, 0.96);
      }

      .mobile-panel-tabs {
        display: none;
      }

      .rotate-overlay {
        display: none;
      }

      .rotate-overlay.show {
        position: fixed;
        inset: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        background: rgba(2, 6, 23, 0.88);
        pointer-events: auto !important;
      }

      .shoot {
        min-height: 58px;
        background: #1d4ed8;
        font-size: 1rem;
      }

      .ready,
      #readyMobileButton {
        background: linear-gradient(135deg, #facc15, #ca8a04);
        color: #111827;
        box-shadow: 0 4px 14px rgba(250,204,21,0.32);
      }

      .ready:hover,
      #readyMobileButton:hover {
        background: linear-gradient(135deg, #fde047, #eab308);
      }

      .ready.is-ready,
      #readyMobileButton.is-ready {
        background: linear-gradient(135deg, #22c55e, #15803d);
        color: #ffffff;
        box-shadow: 0 4px 14px rgba(34,197,94,0.34);
      }

      .ready.is-ready:hover,
      #readyMobileButton.is-ready:hover {
        background: linear-gradient(135deg, #4ade80, #16a34a);
      }

      .danger {
        background: linear-gradient(135deg, #b91c1c, #991b1b);
      }

      .danger:hover {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
      }

      .blue-btn {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        box-shadow: 0 4px 14px rgba(37,99,235,0.3);
      }

      .blue-btn:hover {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
      }

      .yellow-btn {
        background: #b45309;
      }

      .side {
        display: grid;
        gap: 10px;
        padding: 10px;
      }

      .section {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel-2);
        padding: 11px;
      }

      .section h2 {
        margin: 0 0 10px;
        font-size: 1rem;
        letter-spacing: 0;
      }

      [data-panel="room"] {
        gap: 7px;
      }

      [data-panel="room"] h2 {
        margin-bottom: 6px;
        font-size: 0.9rem;
      }

      [data-panel="room"] button {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 0.76rem;
        line-height: 1.12;
        font-weight: 800;
      }

      [data-panel="room"] input {
        min-height: 34px;
        padding: 7px 8px;
        font-size: 0.78rem;
      }

      #startMatchButton {
        min-height: 36px !important;
        padding: 7px 8px !important;
        font-size: 0.8rem !important;
      }

      #teamChangeRow button,
      #joinSpectatorRow button {
        min-height: 32px;
        font-size: 0.74rem;
      }

      #roomInfo {
        font-size: 0.72rem;
        line-height: 1.25;
      }

      #playersBox {
        gap: 5px;
      }

      #playersBox .player-line {
        padding: 5px 7px;
        font-size: 0.74rem;
        line-height: 1.2;
      }

      .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .row.single {
        grid-template-columns: 1fr;
      }

      .stack {
        display: grid;
        gap: 8px;
      }

      .mode-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .tab-button {
        min-height: 40px;
        background: rgba(8, 17, 31, 0.72);
        color: #cbd5e1;
        border: 1px solid rgba(255,255,255,0.1);
        transition: background 0.15s, color 0.15s, transform 0.1s;
      }

      .tab-button.active {
        border-color: rgba(134, 239, 172, 0.9);
        background: linear-gradient(180deg, #4ade80, #16a34a);
        color: #04120a;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 12px 24px rgba(34, 197, 94, 0.18);
      }

      .room-list,
      .chat-log {
        display: grid;
        gap: 8px;
        max-height: 220px;
        overflow: auto;
      }

      .mobile-popup .room-list,
      .mobile-popup .room-list-section,
      .mobile-popup .flow-list {
        max-height: none;
        overflow: visible;
      }

      .room-item,
      .chat-line {
        border-radius: 8px;
        background: rgba(8, 17, 31, 0.62);
        padding: 9px;
      }

      .room-main {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: start;
      }

      .room-title,
      .chat-name {
        font-weight: 850;
      }

      .room-meta,
      .chat-text {
        color: #cbd5e1;
        font-size: 0.82rem;
        line-height: 1.35;
      }

      .badges {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 7px;
      }

      .badge {
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        padding: 3px 6px;
        color: #dbeafe;
        font-size: 0.72rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }

      .room-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        margin-top: 8px;
      }

      .room-actions button {
        min-height: 34px;
        font-size: 0.8rem;
      }

      .player-line,
      .history-line,
      .leader-line {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        border-radius: 8px;
        background: rgba(8, 17, 31, 0.62);
        padding: 8px 9px;
        color: #e2e8f0;
        font-size: 0.86rem;
      }

      .muted {
        color: var(--muted);
      }

      .settings-grid {
        display: grid;
        gap: 9px;
      }

      .team-selector {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
      }

      .team-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 14px 8px;
        border: 2px solid var(--line);
        border-radius: 10px;
        background: rgba(8, 17, 31, 0.62);
        cursor: pointer;
        transition: border-color 0.18s, background 0.18s, transform 0.12s;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
      }

      .team-card:active {
        transform: scale(0.96);
      }

      .team-card.selected {
        border-color: #f8fafc;
        background: rgba(24, 36, 56, 0.78);
      }

      .team-card.auto-card.selected {
        border-color: #facc15;
        background: rgba(32, 28, 8, 0.72);
      }

      .team-dot {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.65);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
      }

      .team-dot.blue {
        background: #00E5FF;
      }

      .team-dot.red {
        background: #FF2BD6;
      }

      /* Takim kimlik renkleri: Ev Sahibi cyan / Deplasman magenta */
      .score.blue, .score-pill.blue { color: #22e0ff !important; }
      .score.red, .score-pill.red { color: #ff5fd6 !important; }
      .team-column.blue { border-color: rgba(0,229,255,0.45) !important; }
      .team-column.red { border-color: rgba(255,46,214,0.45) !important; }
      .team-column.blue .team-column-title { background: #00b8d4 !important; color: #04232b !important; }
      .team-column.red .team-column-title { background: #c0148f !important; color: #ffffff !important; }

      .team-dot.random-dot {
        background: conic-gradient(#00E5FF 0deg 180deg, #FF2BD6 180deg 360deg);
        border-color: #facc15;
      }

      .team-label {
        color: #f8fafc;
        font-size: 0.78rem;
        font-weight: 850;
        text-align: center;
        line-height: 1.2;
      }

      .setting label {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 4px;
        color: #dbeafe;
        font-size: 0.84rem;
        font-weight: 800;
      }

      .summary {
        display: grid;
        gap: 7px;
        color: #e2e8f0;
        font-size: 0.88rem;
      }

      .toast {
        position: fixed;
        left: 50%;
        top: 20px;
        bottom: auto;
        transform: translateX(-50%) translateY(-12px);
        max-width: min(90vw, 520px);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 10px;
        background: rgba(2, 6, 23, 0.96);
        color: white;
        padding: 12px 18px;
        font-size: 0.9rem;
        font-weight: 700;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
        z-index: 50;
        box-shadow: 0 8px 28px rgba(0,0,0,0.4);
        text-align: center;
      }

      .toast.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      .flow {
        position: fixed;
        inset: 0;
        z-index: 12;
        display: grid;
        place-items: center;
        padding: 18px;
        background:
          linear-gradient(rgba(8, 17, 31, 0.72), rgba(8, 17, 31, 0.9)),
          #16a34a;
      }

      .flow.hidden {
        display: none;
      }

      .flow-card.hidden {
        display: none;
      }

      .flow-card {
        width: min(460px, 100%);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 14px;
        background: rgba(16, 24, 39, 0.97);
        padding: 20px;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
      }

      .flow-card h2 {
        margin: 0 0 8px;
        font-size: 1.45rem;
      }

      .flow-card p {
        margin: 0 0 12px;
        color: var(--muted);
        line-height: 1.4;
      }

      .flow-actions {
        display: grid;
        gap: 9px;
      }

      .flow-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }

      .play-setup {
        width: min(520px, 100%);
      }

      .play-setup-grid {
        display: grid;
        gap: 14px;
      }

      #playRoomPasswordSection {
        order: 80;
      }

      #screenPlaySetup .play-actions {
        order: 90;
      }

      .play-option-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .play-option-grid.single {
        grid-template-columns: 1fr;
      }

      .play-option-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .play-option-grid.four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .play-option-grid .wide-choice {
        grid-column: 1 / -1;
      }

      .play-choice {
        position: relative;
        min-height: 48px;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 8px;
        background: rgba(8, 17, 31, 0.68);
        color: #e2e8f0;
        padding: 9px 10px;
        line-height: 1.12;
        overflow-wrap: anywhere;
      }

      .play-choice.selected {
        border-color: rgba(250, 204, 21, 0.78);
        background: rgba(30, 41, 59, 0.96);
        color: #ffffff;
        box-shadow: 0 8px 22px rgba(250, 204, 21, 0.16);
      }

      .play-choice.selected::before {
        content: "✓";
        position: absolute;
        right: 8px;
        top: 6px;
        color: #facc15;
        font-weight: 950;
      }

      .play-training-options {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid rgba(96,165,250,0.22);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.42);
      }

      .play-section-title {
        margin: 0 0 7px;
        color: #dbeafe;
        font-size: 0.82rem;
        font-weight: 900;
      }

      .play-actions {
        display: grid;
        grid-template-columns: 1fr 1.35fr;
        gap: 8px;
      }

      .flow-list {
        display: grid;
        gap: 8px;
        max-height: min(42vh, 300px);
        overflow: auto;
        margin: 10px 0;
      }

      #screenSpectator {
        width: min(980px, 100%);
      }

      .flow-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
      }

      .flow-card-head h2 {
        margin: 0 !important;
      }

      .flow-top-back {
        width: auto !important;
        min-height: 36px !important;
        padding: 7px 12px !important;
        border-radius: 10px !important;
        flex: 0 0 auto;
        font-size: 0.86rem !important;
      }

      #screenSpectator .flow-list {
        max-height: min(68vh, 560px);
        margin: 0;
        padding-right: 2px;
      }

      .confirm-modal {
        position: fixed;
        inset: 0;
        z-index: 99999 !important;
        display: grid;
        place-items: center;
        padding: 18px;
        background: rgba(2, 6, 23, 0.58);
      }

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

      .confirm-card {
        width: min(340px, 100%);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background: rgba(16, 24, 39, 0.98);
        padding: 16px;
        text-align: center;
      }

      .confirm-card h2 {
        margin: 0 0 8px;
        font-size: 1.25rem;
      }

      .confirm-card p {
        margin: 0 0 14px;
        color: var(--muted);
      }

      /* Splash screen */
      .splash {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 30;
        background: #020712;
        overflow: hidden;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      .splash.hidden {
        display: none;
      }

      .splash-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .splash-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
        background: #020712;
        pointer-events: none;
      }

      .splash-intro-gate {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: grid;
        place-items: center;
        padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
        background:
          radial-gradient(circle at 50% 42%, rgba(32, 164, 255, 0.22), transparent 34%),
          linear-gradient(180deg, rgba(2, 7, 18, 0.58), rgba(2, 7, 18, 0.92));
        transition: opacity 180ms ease;
      }

      .splash.intro-playing .splash-intro-gate {
        opacity: 0;
        pointer-events: none;
      }

      .splash-intro-message {
        min-width: min(76vw, 360px);
        min-height: 76px;
        border: 1px solid rgba(125, 211, 252, 0.26);
        border-radius: 18px;
        color: rgba(248, 251, 255, 0.96);
        background: rgba(15, 23, 42, 0.52);
        box-shadow: 0 22px 54px rgba(14, 165, 233, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
        display: grid;
        gap: 4px;
        place-items: center;
        padding: 10px 18px;
        font-weight: 950;
        letter-spacing: 0;
        text-align: center;
        pointer-events: auto;
        backdrop-filter: blur(12px);
      }

      .splash-intro-message strong {
        font-size: clamp(1.1rem, 4.2vw, 1.6rem);
      }

      .splash-intro-message span {
        font-size: clamp(0.72rem, 2.7vw, 0.92rem);
        color: rgba(240, 249, 255, 0.86);
        font-weight: 800;
      }

      /* Ana menu kart stili */
      .main-menu-grid {
        display: grid;
        gap: 10px;
      }

      .main-menu-logo {
        width: min(64vw, 340px);
        justify-self: center;
        height: auto;
        margin: -4px 0 2px;
        transform: translateX(7.5%);
        filter: drop-shadow(0 16px 28px rgba(14, 165, 233, 0.22));
      }

      #screenLogin .main-menu-logo {
        display: none !important;
      }

      .menu-hero-btn {
        min-height: 80px;
        border-radius: 14px;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        box-shadow: 0 14px 40px rgba(37, 99, 235, 0.5);
        letter-spacing: 0.5px;
        border: 1px solid rgba(96,165,250,0.3);
      }

      .menu-hero-btn:hover {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: 0 18px 48px rgba(37, 99, 235, 0.65);
      }

      .menu-hero-btn.resume-match {
        min-height: 58px;
        background: linear-gradient(135deg, #f7d84a, #b98905);
        box-shadow: 0 12px 34px rgba(250, 204, 21, 0.42);
      }

      .menu-hero-btn.hidden {
        display: none;
      }

      .menu-hero-btn .hero-icon {
        font-size: 1.6rem;
      }

      .hero-icon,
      .menu-icon,
      .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        color: #93c5fd;
        line-height: 1;
      }

      .hero-icon {
        width: 28px;
        height: 28px;
        color: #dbeafe;
      }

      .menu-icon-btn .menu-icon {
        width: 24px;
        height: 24px;
      }

      .hero-icon svg,
      .menu-icon svg,
      .nav-icon svg,
      .btn-icon svg,
      .wallet-icon svg,
      .section-title-icon svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
      }

      [data-icon="play"] { color: #dbeafe; }
      [data-icon="return"] { color: #bbf7d0; }
      [data-icon="private-room"],
      [data-icon="room"] { color: #60a5fa; }
      [data-icon="room-list"],
      [data-icon="score"] { color: #38bdf8; }
      [data-icon="profile"] { color: #a78bfa; }
      [data-icon="leaderboard"] { color: #facc15; }
      [data-icon="inventory"] { color: #f59e0b; }
      [data-icon="market"] { color: #34d399; }
      [data-icon="settings"] { color: #cbd5e1; }
      [data-icon="friends"],
      [data-icon="team"] { color: #fb7185; }
      [data-icon="ready"] { color: #4ade80; }
      [data-icon="exit"] { color: #f87171; }
      [data-icon="sound"] { color: #67e8f9; }
      [data-icon="sound-off"] { color: #f87171; }
      [data-icon="chat"] { color: #f472b6; }
      [data-icon="menu"] { color: #93c5fd; }
      [data-icon="coin"] { color: #facc15; }
      [data-icon="diamond"] { color: #67e8f9; }
      [data-icon="start"] { color: #dbeafe; }
      [data-icon="back"] { color: #cbd5e1; }
      [data-icon="random"] { color: #fde68a; }
      [data-icon="shuffle"] { color: #facc15; }
      [data-icon="bot"] { color: #818cf8; }
      [data-icon="add"] { color: #86efac; }
      [data-icon="remove"] { color: #fb7185; }
      [data-icon="invite"] { color: #f9a8d4; }
      [data-icon="copy"] { color: #93c5fd; }
      [data-icon="accept"] { color: #4ade80; }
      [data-icon="decline"] { color: #f87171; }
      [data-icon="restart"] { color: #f97316; }
      [data-icon="ball"] { color: #f8fafc; }
      [data-icon="field"] { color: #22c55e; }
      [data-icon="clock"] { color: #fbbf24; }
      [data-icon="goal"] { color: #fb7185; }
      [data-icon="ai"] { color: #818cf8; }

      .button-icon-content {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
        line-height: 1.1;
      }

      .button-icon-content.vertical {
        flex-direction: column;
        gap: 3px;
      }

      .button-icon-content span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .btn-icon,
      .wallet-icon,
      .section-title-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        line-height: 1;
      }

      .section-title-icon {
        width: 16px;
        height: 16px;
      }

      .icon-section-title {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .room-name-section {
        grid-column: 1 / -1;
      }

      .room-name-section input,
      .room-password-section input {
        width: 100%;
        min-height: 42px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(15, 23, 42, 0.82);
        color: var(--text);
        padding: 0 12px;
        font-weight: 900;
      }

      .menu-icon-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
      }

      .menu-icon-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 86px;
        border-radius: 12px;
        background: rgba(16, 24, 39, 0.8);
        border: 1px solid rgba(255,255,255,0.14);
        font-size: 0.84rem;
        font-weight: 800;
        color: var(--text);
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, transform 0.1s;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
      }

      .menu-icon-btn:hover {
        background: rgba(37, 99, 235, 0.18);
        border-color: rgba(96, 165, 250, 0.35);
      }

      .menu-icon-btn:active {
        background: rgba(37, 99, 235, 0.28);
        border-color: rgba(96, 165, 250, 0.5);
      }

      .menu-icon-btn .menu-icon {
        font-size: 1.7rem;
      }

      .menu-icon-btn.wide-menu-btn {
        grid-column: span 2;
        min-height: 92px;
        background:
          linear-gradient(135deg, rgba(37, 99, 235, 0.32), rgba(20, 184, 166, 0.18)),
          rgba(16, 24, 39, 0.92);
        border-color: rgba(96, 165, 250, 0.34);
        box-shadow: 0 14px 32px rgba(37, 99, 235, 0.18);
      }

      .multiplayer-choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 14px 0;
      }

      .multiplayer-choice-btn {
        min-height: 104px;
        border-radius: 12px;
        padding: 14px;
        display: grid;
        place-items: center;
        gap: 8px;
        text-align: center;
        font-size: 1rem;
        font-weight: 950;
        background:
          linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 24px rgba(0,0,0,0.18);
      }

      .multiplayer-choice-btn.blue-btn {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        border-color: rgba(147, 197, 253, 0.55);
      }

      .flow-back-wide,
      .flow-card > button[data-flow-back="main"] {
        width: min(360px, 100%);
        min-height: 50px;
        margin: 14px auto 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-weight: 950;
      }

      /* Oda listesi filtre */
      .filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
      }

      .filter-chip {
        min-height: 30px;
        border-radius: 16px;
        padding: 4px 12px;
        border: 1px solid var(--line);
        background: rgba(8, 17, 31, 0.62);
        color: #cbd5e1;
        font-size: 0.72rem;
        font-weight: 800;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
        touch-action: manipulation;
        white-space: nowrap;
      }

      .filter-chip.active {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
      }

      .room-item-rich {
        border-radius: 10px;
        background: rgba(8, 17, 31, 0.62);
        border: 1px solid var(--line);
        padding: 10px;
        transition: border-color 0.15s, background 0.15s;
      }

      .room-item-rich:hover {
        border-color: rgba(96,165,250,0.3);
        background: rgba(16, 32, 56, 0.72);
      }

      .room-list-compact {
        display: grid;
        gap: 8px;
        min-height: 0;
      }

      .room-list-toolbar {
        position: sticky;
        top: 0;
        z-index: 3;
        display: grid;
        gap: 7px;
        padding: 8px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 10px;
        background: rgba(8, 17, 31, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }

      .room-list-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
      }

      .room-list-search-row input {
        min-height: 38px;
        border-radius: 8px;
      }

      .room-list-search-row span,
      .room-list-summary {
        color: #94a3b8;
        font-size: 0.72rem;
        font-weight: 850;
        white-space: nowrap;
      }

      .room-list-filter-row {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      #flow .room-list-filter-row button {
        min-height: 32px !important;
        padding: 5px 10px;
        border-radius: 999px !important;
        font-size: 0.74rem !important;
        white-space: nowrap;
        background: rgba(15, 23, 42, 0.72) !important;
        border: 1px solid rgba(148, 163, 184, 0.18) !important;
        color: #cbd5e1 !important;
      }

      #flow .room-list-filter-row button.active {
        border-color: rgba(134, 239, 172, 0.9) !important;
        background: linear-gradient(180deg, #4ade80, #16a34a) !important;
        color: #04120a !important;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 12px 24px rgba(34, 197, 94, 0.18) !important;
      }

      .room-compact-section {
        display: grid;
        gap: 7px;
      }

      .room-compact-section h3 {
        margin: 4px 2px 0;
        color: #e2e8f0;
        font-size: 0.82rem;
      }

      .room-compact-rows {
        display: grid;
        gap: 7px;
      }

      @media (min-width: 720px) {
        .room-list-compact .room-compact-rows {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      .room-compact-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        padding: 9px;
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 10px;
        background: rgba(8, 17, 31, 0.66);
      }

      .room-compact-row.is-mine {
        border-color: rgba(250, 204, 21, 0.36);
        background: rgba(30, 41, 59, 0.72);
      }

      .room-compact-main {
        display: grid;
        gap: 4px;
        min-width: 0;
      }

      .room-compact-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
      }

      .room-compact-title-row strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #f8fafc;
      }

      .room-code-pill {
        flex: 0 0 auto;
        color: #7dd3fc;
        border: 1px solid rgba(125, 211, 252, 0.24);
        border-radius: 7px;
        padding: 2px 6px;
        font-size: 0.7rem;
        font-weight: 900;
      }

      .room-compact-meta,
      .room-compact-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        color: #cbd5e1;
        font-size: 0.72rem;
      }

      .room-compact-tags span {
        border: 1px solid rgba(148, 163, 184, 0.16);
        border-radius: 999px;
        padding: 2px 6px;
        color: #dbeafe;
        font-weight: 800;
      }

      .room-compact-tags .open {
        color: #86efac;
        border-color: rgba(34, 197, 94, 0.26);
      }

      .room-compact-tags .locked {
        color: #fca5a5;
        border-color: rgba(248, 113, 113, 0.28);
      }

      .room-compact-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(54px, auto));
        gap: 5px;
      }

      .room-compact-actions button {
        min-height: 34px !important;
        padding: 5px 8px;
        border-radius: 8px;
        font-size: 0.74rem;
      }

      .room-list-more {
        min-height: 38px !important;
        border-radius: 9px;
        font-size: 0.8rem;
      }

      @media (max-height: 520px), (orientation: landscape) and (max-width: 980px) {
        #screenSpectator .flow-list {
          max-height: calc(var(--app-vh) - 94px);
        }

        .flow-card-head {
          margin-bottom: 6px;
        }

        .flow-top-back {
          min-height: 34px !important;
          padding: 6px 10px !important;
        }

        .room-list-compact {
          gap: 6px;
        }

        .room-list-toolbar {
          padding: 6px;
          gap: 5px;
        }

        .room-compact-row {
          padding: 7px;
          gap: 6px;
        }

        .room-compact-meta,
        .room-compact-tags {
          font-size: 0.68rem;
        }

        .room-compact-actions {
          grid-template-columns: repeat(3, minmax(48px, auto));
          gap: 4px;
        }

        .room-compact-actions button {
          min-height: 32px !important;
          padding: 4px 6px;
        }
      }

      .empty-room-msg {
        text-align: center;
        padding: 24px 12px;
        color: var(--muted);
        font-size: 0.86rem;
        line-height: 1.6;
      }

      .empty-room-msg .empty-icon {
        font-size: 2rem;
        margin-bottom: 8px;
        display: block;
      }

      .room-item-rich .room-top {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 6px;
      }

      .room-item-rich .room-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }

      .ping-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
      }

      .ping-low {
        background: #22c55e;
      }
      .ping-mid {
        background: #eab308;
      }
      .ping-high {
        background: #ef4444;
      }

      /* Countdown overlay */
      .countdown-overlay {
        position: fixed;
        inset: 0;
        z-index: 10;
        display: none;
        place-items: center;
        background: rgba(2, 6, 23, 0.75);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }

      .countdown-overlay.show {
        display: grid;
      }

      .countdown-number {
        font-size: 8rem;
        font-weight: 950;
        color: #f8fafc;
        text-shadow: 0 8px 32px rgba(37, 99, 235, 0.6);
        animation: countPulse 0.55s ease-out;
      }

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

      /* Hizli chat butonlari */
      .quick-chat-row {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 6px;
      }

      .quick-chat-btn {
        min-height: 28px;
        border-radius: 14px;
        padding: 3px 10px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(255,255,255,0.07);
        color: #cbd5e1;
        font-size: 0.68rem;
        font-weight: 800;
        cursor: pointer;
        touch-action: manipulation;
        white-space: nowrap;
      }

      .quick-chat-btn:active {
        background: rgba(37, 99, 235, 0.5);
        border-color: #2563eb;
      }

      .quick-chat-mode-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .quick-chat-mode-grid .quick-chat-btn {
        min-height: 44px;
        border-radius: 8px;
        font-size: 0.82rem;
        background: rgba(37, 99, 235, 0.24);
        border-color: rgba(96, 165, 250, 0.35);
        color: #eff6ff;
      }

      .toggle-setting {
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        background: rgba(15,23,42,0.58);
        padding: 8px 10px;
        color: #e2e8f0;
        font-weight: 850;
      }

      .toggle-setting input {
        width: 20px;
        height: 20px;
        accent-color: #22c55e;
      }

      .toggle-setting .toggle-copy {
        display: grid;
        gap: 2px;
      }

      .toggle-setting .toggle-title {
        font-weight: 950;
      }

      .toggle-setting .toggle-description {
        color: #94a3b8;
        font-size: 0.72rem;
        font-weight: 750;
        line-height: 1.25;
      }

      /* Mac sonu paneli */
      .match-end-panel {
        position: fixed;
        inset: 0;
        z-index: 99999 !important;
        display: none;
        place-items: center;
        padding: 18px;
        background: rgba(2, 6, 23, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .match-end-panel.show {
        display: grid;
      }

      .match-end-panel.keyboard-open {
        align-items: start;
        padding-bottom: calc(var(--vk-height, 0px) + max(12px, env(safe-area-inset-bottom))) !important;
      }

      .match-end-panel.keyboard-open .match-end-card {
        max-height: calc(var(--app-vh) - var(--vk-height, 0px) - 22px) !important;
      }

      .match-end-card {
        width: min(640px, 100%);
        max-height: min(88vh, 720px);
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.08);
        background: rgba(10, 15, 30, 0.88);
        padding: 26px;
        text-align: center;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: 0 32px 80px rgba(0,0,0,0.65);
        transition: box-shadow 0.4s ease;
        position: relative;
      }

      /* Kazanan rengine gore neon parlamalar */
      .match-end-card.blue-win {
        box-shadow: 0 0 30px rgba(6, 182, 212, 0.35), 0 32px 80px rgba(0,0,0,0.65);
        border-color: rgba(6, 182, 212, 0.25);
      }
      .match-end-card.red-win {
        box-shadow: 0 0 30px rgba(244, 63, 94, 0.35), 0 32px 80px rgba(0,0,0,0.65);
        border-color: rgba(244, 63, 94, 0.25);
      }
      .match-end-card.draw {
        box-shadow: 0 0 30px rgba(234, 179, 8, 0.35), 0 32px 80px rgba(0,0,0,0.65);
        border-color: rgba(234, 179, 8, 0.25);
      }

      .premium-match-end-title {
        font-size: 1.6rem;
        font-weight: 900;
        color: #f8fafc;
        margin: 0 0 16px;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
      }

      /* Winner Team Banner */
      .winner-team-banner {
        position: relative;
        padding: 16px 20px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 24px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .winner-team-banner.blue-win {
        background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(37, 99, 235, 0.05));
        border-color: rgba(6, 182, 212, 0.2);
      }
      .winner-team-banner.red-win {
        background: linear-gradient(135deg, rgba(244, 63, 94, 0.1), rgba(220, 38, 38, 0.05));
        border-color: rgba(244, 63, 94, 0.2);
      }
      .winner-team-banner.draw {
        background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(217, 119, 6, 0.05));
        border-color: rgba(234, 179, 8, 0.2);
      }

      .winner-text-main {
        font-size: 1.35rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .blue-win .winner-text-main { color: #22d3ee; text-shadow: 0 0 10px rgba(6, 182, 212, 0.5); }
      .red-win .winner-text-main { color: #fb7185; text-shadow: 0 0 10px rgba(244, 63, 94, 0.5); }
      .draw .winner-text-main { color: #facc15; text-shadow: 0 0 10px rgba(234, 179, 8, 0.5); }

      .final-score-display {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 4px;
      }
      .score-pill {
        font-size: 1.6rem;
        font-weight: 900;
        padding: 4px 16px;
        border-radius: 8px;
        min-width: 50px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      }
      .score-pill.blue {
        background: rgba(37, 99, 235, 0.2);
        border: 1px solid rgba(96, 165, 250, 0.3);
        color: #60a5fa;
      }
      .score-pill.red {
        background: rgba(220, 38, 38, 0.2);
        border: 1px solid rgba(248, 113, 113, 0.3);
        color: #fb7185;
      }
      .score-dash {
        font-size: 1.6rem;
        font-weight: 900;
        color: rgba(255,255,255,0.4);
      }

      /* MVP Spotlight Card */
      .mvp-spotlight-card {
        position: relative;
        padding: 16px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(234, 179, 8, 0.06), rgba(255,255,255,0.01));
        border: 1px solid rgba(234, 179, 8, 0.15);
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
        text-align: left;
        animation: mvpZoomIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      .mvp-crown {
        position: absolute;
        top: -14px;
        left: 32px;
        font-size: 1.5rem;
        filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
        animation: crownFloat 2s ease-in-out infinite;
      }
      .mvp-avatar-circle {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, #facc15, #ca8a04);
        border: 2px solid #fef08a;
        color: #1e293b;
        font-size: 1.35rem;
        font-weight: 900;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px rgba(234, 179, 8, 0.4);
        flex-shrink: 0;
      }
      .mvp-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .mvp-label {
        font-size: 0.68rem;
        font-weight: 900;
        color: #facc15;
        letter-spacing: 1.2px;
      }
      .mvp-player-name {
        font-size: 1.15rem;
        font-weight: 950;
        color: #f8fafc;
      }
      .mvp-score-sub {
        font-size: 0.76rem;
        color: #94a3b8;
      }

      /* Premium Rewards Card */
      .premium-rewards-card {
        padding: 18px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255,255,255,0.05);
        margin-bottom: 24px;
        text-align: left;
      }
      .reward-title {
        font-size: 0.86rem;
        font-weight: 900;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 14px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        padding-bottom: 8px;
      }
      .reward-skipped-msg {
        color: #fb7185;
        font-size: 0.82rem;
        font-weight: 800;
        line-height: 1.4;
      }
      .reward-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 16px;
      }
      .reward-pill {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255,255,255,0.04);
      }
      .reward-pill.xp {
        background: rgba(6, 182, 212, 0.04);
        border-color: rgba(6, 182, 212, 0.12);
      }
      .reward-pill.coin {
        background: rgba(234, 179, 8, 0.04);
        border-color: rgba(234, 179, 8, 0.12);
      }
      .reward-icon {
        font-size: 1.35rem;
      }
      .reward-info {
        display: flex;
        flex-direction: column;
      }
      .reward-amount {
        font-size: 1.15rem;
        font-weight: 900;
      }
      .xp .reward-amount { color: #22d3ee; }
      .coin .reward-amount { color: #facc15; }
      .reward-label {
        font-size: 0.72rem;
        color: #64748b;
        font-weight: 800;
      }

      /* Reklam izle, 2 kat ödül */
      .reward-ad-double {
        margin-bottom: 4px;
      }
      .reward-ad-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid rgba(34, 197, 94, 0.35);
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(234, 179, 8, 0.14));
        color: #e2e8f0;
        cursor: pointer;
        text-align: left;
        transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
        box-shadow: 0 0 14px rgba(34, 197, 94, 0.15);
      }
      .reward-ad-btn:hover:not(:disabled) {
        filter: brightness(1.15);
        box-shadow: 0 0 18px rgba(34, 197, 94, 0.3);
      }
      .reward-ad-btn:active:not(:disabled) {
        transform: scale(0.98);
      }
      .reward-ad-btn:disabled {
        cursor: default;
        opacity: 0.75;
        filter: saturate(0.8);
      }
      .reward-ad-btn.claimed {
        border-color: rgba(34, 197, 94, 0.5);
        background: rgba(34, 197, 94, 0.1);
        opacity: 1;
      }
      .reward-ad-btn .ad-icon {
        font-size: 1.5rem;
      }
      .reward-ad-btn .ad-btn-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .reward-ad-btn .ad-btn-text strong {
        font-size: 0.85rem;
        font-weight: 900;
        color: #4ade80;
        letter-spacing: 0.3px;
      }
      .reward-ad-btn .ad-btn-text small {
        font-size: 0.72rem;
        font-weight: 800;
        color: #94a3b8;
      }

      /* XP Progress bar */
      .reward-xp-progress-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
      }
      .xp-level-badge {
        font-size: 0.74rem;
        font-weight: 900;
        color: #cbd5e1;
        background: rgba(255, 255, 255, 0.06);
        padding: 3px 8px;
        border-radius: 6px;
        white-space: nowrap;
      }
      .xp-level-badge.current {
        border: 1px solid rgba(255,255,255,0.1);
      }
      .xp-level-badge.next {
        border: 1px solid rgba(6, 182, 212, 0.25);
        color: #22d3ee;
      }
      .xp-bar-container {
        flex-grow: 1;
        height: 8px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.03);
      }
      .xp-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #06b6d4, #3b82f6);
        border-radius: 999px;
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
        width: 0%;
        transition: width 1.2s cubic-bezier(0.1, 0.8, 0.2, 1);
      }
      .xp-remaining-hint {
        font-size: 0.72rem;
        color: #64748b;
        font-weight: 800;
        text-align: right;
        margin-top: 5px;
      }

      /* Confetti Sparks */
      .match-end-sparkles {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: 20px;
      }
      .sparkle {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        opacity: 0;
      }
      .sparkle.s1 { background: #06b6d4; left: 10%; bottom: 0; animation: floatSparkle 4s infinite 0.2s; }
      .sparkle.s2 { background: #facc15; left: 40%; bottom: 0; animation: floatSparkle 3.5s infinite 1s; }
      .sparkle.s3 { background: #fb7185; left: 70%; bottom: 0; animation: floatSparkle 4.2s infinite 0.5s; }
      .sparkle.s4 { background: #34d399; left: 90%; bottom: 0; animation: floatSparkle 3.8s infinite 1.5s; }

      .matchmaking-disclaimer {
        font-size: 0.74rem;
        color: #64748b;
        font-weight: 800;
        margin-bottom: 18px;
        line-height: 1.4;
      }

      /* Premium Social Section */
      .match-social-teams {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 24px;
        text-align: left;
      }
      .match-social-team h3 {
        font-size: 0.82rem;
        font-weight: 900;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin: 0 0 10px;
        padding-left: 4px;
      }
      .match-social-team.blue-side h3 { border-left: 2px solid #06b6d4; padding-left: 8px; }
      .match-social-team.red-side h3 { border-left: 2px solid #fb7185; padding-left: 8px; }

      .social-cards-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .premium-social-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        position: relative;
        transition: all 0.2s ease;
      }
      .premium-social-card:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
        transform: translateY(-1px);
      }

      .premium-social-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #475569, #334155);
        color: #cbd5e1;
        font-size: 0.95rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.12);
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
      }
      .premium-social-info {
        flex-grow: 1;
        min-width: 0;
      }
      .premium-social-name {
        font-size: 0.84rem;
        font-weight: 850;
        color: #f1f5f9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .premium-social-meta {
        font-size: 0.68rem;
        color: #64748b;
        font-weight: 750;
      }

      .premium-social-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
      }

      .social-act-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.08);
        color: #cbd5e1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all 0.2s ease;
      }
      .social-act-btn:hover {
        background: rgba(255,255,255,0.1);
        color: #fff;
        transform: scale(1.08);
      }
      .social-act-btn.btn-friend:hover {
        background: rgba(6, 182, 212, 0.15);
        border-color: rgba(6, 182, 212, 0.35);
        color: #22d3ee;
      }
      .social-act-btn.btn-like:hover {
        background: rgba(34, 197, 94, 0.15);
        border-color: rgba(34, 197, 94, 0.35);
        color: #4ade80;
      }
      .social-act-btn.btn-report.danger:hover {
        background: rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.35);
        color: #f87171;
      }

      .match-report-options {
        position: absolute;
        top: 48px;
        right: 10px;
        z-index: 10;
        display: none;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        border-radius: 8px;
        background: #0f172a;
        border: 1px solid rgba(239, 68, 68, 0.25);
        box-shadow: 0 8px 20px rgba(0,0,0,0.5);
        width: 170px;
      }
      .match-report-options.show {
        display: flex;
        animation: traySlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
      }
      .report-box-arrow {
        position: absolute;
        top: -6px;
        right: 14px;
        width: 10px;
        height: 10px;
        background: #0f172a;
        border-left: 1px solid rgba(239, 68, 68, 0.25);
        border-top: 1px solid rgba(239, 68, 68, 0.25);
        transform: rotate(45deg);
      }
      .match-report-options select {
        width: 100%;
        background: rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.12);
        color: #cbd5e1;
        font-size: 0.72rem;
        padding: 5px;
        border-radius: 4px;
        font-weight: 800;
        outline: none;
      }
      .match-report-options button {
        width: 100%;
        min-height: 28px !important;
        font-size: 0.72rem !important;
        font-weight: 900;
        border-radius: 4px;
      }

      /* Animations */
      @keyframes mvpZoomIn {
        0% { transform: scale(0.9); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
      }
      @keyframes crownFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-4px) rotate(4deg); }
      }
      @keyframes floatSparkle {
        0% { transform: translateY(0) scale(0.5); opacity: 0; }
        30% { opacity: 0.8; }
        100% { transform: translateY(-300px) scale(1.2); opacity: 0; }
      }
      @keyframes traySlideDown {
        0% { transform: translateY(-8px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
      }

      @media (max-width: 600px) {
        .match-social-teams {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .reward-grid {
          grid-template-columns: 1fr;
          gap: 8px;
        }
      }

      .mvp-name-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 2px;
      }

      .premium-mvp-badge {
        font-size: 0.76rem;
        font-weight: 900;
        background: linear-gradient(135deg, #facc15, #ca8a04);
        color: #1e293b;
        padding: 2px 8px;
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .premium-social-name-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 2px;
      }

      .score-rating-badge {
        font-size: 0.7rem;
        font-weight: 900;
        padding: 1px 6px;
        border-radius: 4px;
        text-transform: uppercase;
      }

      .score-rating-badge.badge-mvp {
        background: rgba(234, 179, 8, 0.15);
        border: 1px solid rgba(234, 179, 8, 0.4);
        color: #facc15;
        box-shadow: 0 0 8px rgba(234, 179, 8, 0.2);
      }

      .score-rating-badge.badge-gold {
        background: rgba(250, 204, 21, 0.1);
        border: 1px solid rgba(250, 204, 21, 0.25);
        color: #fef08a;
      }

      .score-rating-badge.badge-silver {
        background: rgba(148, 163, 184, 0.1);
        border: 1px solid rgba(148, 163, 184, 0.25);
        color: #cbd5e1;
      }

      .score-rating-badge.badge-bronze {
        background: rgba(180, 83, 9, 0.08);
        border: 1px solid rgba(180, 83, 9, 0.2);
        color: #fed7aa;
      }

      /* Performance sub bars grid */
      .performance-bars-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin: 6px 0;
      }

      .perf-bar-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.62rem;
        font-weight: 800;
        color: #64748b;
      }

      .mini-bar-track {
        flex-grow: 1;
        height: 4px;
        background: rgba(255,255,255,0.05);
        border-radius: 2px;
        overflow: hidden;
      }

      .mini-bar-fill {
        height: 100%;
        border-radius: 2px;
      }

      .mini-bar-fill.hucum {
        background: #fb7185; /* rose */
      }

      .mini-bar-fill.savunma {
        background: #3b82f6; /* blue */
      }

      .mini-bar-fill.kaleci {
        background: #34d399; /* emerald */
      }

      /* Stats counters row */
      .social-stats-counters {
        display: flex;
        gap: 8px;
        margin-top: 4px;
        font-size: 0.68rem;
        font-weight: 900;
        color: #94a3b8;
      }

      .social-stats-counters span {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.04);
        padding: 2px 6px;
        border-radius: 4px;
      }

      /* MVP Highlight border */
      .premium-social-card.mvp-glow-card {
        border-color: rgba(234, 179, 8, 0.3);
        background: linear-gradient(135deg, rgba(234, 179, 8, 0.03), rgba(255, 255, 255, 0.01));
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.08);
      }

      .match-detail-player-row.mvp-row-glow {
        border-color: rgba(234, 179, 8, 0.35) !important;
        background: linear-gradient(135deg, rgba(234, 179, 8, 0.04), rgba(255, 255, 255, 0.01)) !important;
        box-shadow: 0 0 10px rgba(234, 179, 8, 0.08) !important;
      }

      .team-lobby-overlay {
        position: fixed;
        inset: 0;
        z-index: 18;
        display: none;
        place-items: center;
        padding: 14px;
        background: rgba(2, 6, 23, 0.78);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }

      .team-lobby-overlay.show {
        display: grid;
      }

      .team-lobby-card {
        position: relative;
        width: min(980px, 100%);
        max-height: min(92vh, 720px);
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 10px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.98);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
        padding: 12px;
        color: #e2e8f0;
      }

      .team-lobby-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .team-lobby-head h2 {
        margin: 0;
        font-size: 1.05rem;
      }

      .team-lobby-meta {
        color: var(--muted);
        font-size: 0.76rem;
        font-weight: 800;
      }

      .team-lobby-grid {
        display: grid;
        grid-template-columns: 1fr 0.86fr 1fr;
        gap: 10px;
        min-height: 0;
      }

      .team-column {
        min-height: 260px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        background: rgba(8, 17, 31, 0.72);
        padding: 10px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 8px;
        cursor: pointer;
      }

      .team-column.red { border-color: rgba(248, 113, 113, 0.38); }
      .team-column.blue { border-color: rgba(96, 165, 250, 0.38); }
      .team-column.spectator { border-color: rgba(148, 163, 184, 0.28); }

      .team-column:hover {
        background: rgba(15, 23, 42, 0.9);
      }

      .team-column-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 0.86rem;
        font-weight: 950;
      }

      .team-count {
        color: var(--muted);
        font-size: 0.72rem;
      }

      .team-list {
        display: grid;
        align-content: start;
        gap: 6px;
        overflow: auto;
      }

      .team-player {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.055);
        padding: 7px 8px;
        font-size: 0.78rem;
        font-weight: 800;
      }

      .team-player.self {
        outline: 2px solid rgba(250, 204, 21, 0.5);
        background: rgba(250, 204, 21, 0.12);
      }

      .ready-badge,
      .owner-badge {
        border-radius: 999px;
        padding: 2px 6px;
        font-size: 0.62rem;
        font-weight: 950;
      }

      .ready-badge {
        color: #bbf7d0;
        background: rgba(22, 163, 74, 0.28);
      }

      .owner-badge {
        color: #fde68a;
        background: rgba(180, 83, 9, 0.32);
      }

      .bot-badge {
        color: #dbeafe;
        background: rgba(37, 99, 235, 0.34);
      }

      .team-bot-actions {
        display: inline-flex;
        gap: 4px;
        align-items: center;
      }

      .team-bot-actions button {
        min-height: 24px;
        width: auto;
        padding: 2px 7px;
        border-radius: 7px;
        font-size: 0.62rem;
        font-weight: 950;
      }

      .team-lobby-ai-panel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .team-lobby-ai-panel.hidden,
      .team-lobby-settings-panel.hidden {
        display: none;
      }

      .team-lobby-popup.hidden {
        display: none;
      }

      .team-lobby-popup {
        position: fixed;
        inset: max(12px, env(safe-area-inset-top)) max(52px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(52px, env(safe-area-inset-left));
        z-index: 9;
        display: grid;
        place-items: center;
        padding: 8px;
        background: rgba(2, 6, 23, 0.58);
      }

      .team-lobby-popup-card {
        width: min(720px, 100%);
        max-height: min(82dvh, 620px);
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.98);
        box-shadow: 0 24px 70px rgba(0,0,0,0.45);
        padding: 10px;
      }

      .team-lobby-popup-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
        gap: 8px;
        align-items: center;
      }

      .team-lobby-popup-head h3 {
        margin: 0;
        font-size: 0.92rem;
        font-weight: 950;
      }

      .team-lobby-popup-head button {
        min-height: 38px;
        border-radius: 8px;
      }

      .team-lobby-popup-body {
        min-height: 0;
        overflow-y: auto;
        display: grid;
        gap: 10px;
        overscroll-behavior: contain;
      }

      .team-lobby-settings-panel {
        display: grid;
        gap: 10px;
        border-radius: 9px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.055);
        padding: 10px;
      }

      .room-settings-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .room-settings-section {
        display: grid;
        gap: 6px;
      }

      .room-settings-section > span {
        color: #e2e8f0;
        font-size: 0.72rem;
        font-weight: 950;
      }

      .room-settings-choice-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      .room-settings-choice-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .room-settings-choice-grid.four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .room-settings-choice-grid button {
        min-height: 34px;
        border-radius: 7px;
        font-size: 0.68rem;
        font-weight: 950;
      }

      .room-settings-choice-grid button.selected {
        background: #facc15;
        color: #111827;
      }

      .room-settings-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .room-card-extend-section {
        border: 1px solid rgba(96,165,250,0.22);
        border-radius: 8px;
        background: rgba(15,23,42,0.42);
        padding: 9px;
      }

      .room-card-auto-extend {
        min-height: 38px;
      }

      .ai-add-team {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        align-items: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        padding: 8px;
      }

      .ai-add-team-title {
        grid-column: 1 / -1;
        color: #e2e8f0;
        font-size: 0.72rem;
        font-weight: 950;
      }

      .ai-add-team button {
        min-height: 34px;
        border-radius: 7px;
        font-size: 0.68rem;
      }

      .team-empty {
        color: var(--muted);
        font-size: 0.74rem;
        padding: 8px;
        border: 1px dashed rgba(255, 255, 255, 0.12);
        border-radius: 8px;
      }

      .team-lobby-actions {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px;
      }

      .team-lobby-actions button {
        min-height: 38px;
        font-size: 0.78rem;
      }

      @media (max-width: 760px) {
        .team-lobby-grid {
          grid-template-columns: 1fr;
        }

        .team-column {
          min-height: 128px;
        }

        .team-lobby-actions {
          grid-template-columns: 1fr 1fr;
        }
      }

      .team-lobby-overlay {
        padding: 0;
        background: #1b2024;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      .team-lobby-card {
        width: 100%;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #1b2024;
        padding: clamp(14px, 3vh, 28px) clamp(18px, 4vw, 56px) clamp(18px, 4vh, 42px);
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: clamp(16px, 3vh, 28px);
      }

      .team-lobby-head {
        min-height: 30px;
      }

      .team-lobby-head h2 {
        font-size: 0.92rem;
        color: rgba(226, 232, 240, 0.68);
        text-transform: uppercase;
      }

      .team-lobby-meta {
        font-size: 0.68rem;
        opacity: 0.62;
      }

      #teamLobbyCloseButton {
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.06);
      }

      .team-lobby-grid {
        grid-template-columns: 1fr 1.02fr 1fr;
        gap: clamp(10px, 2vw, 18px);
      }

      .team-column {
        position: relative;
        min-height: 0;
        border: 0;
        border-radius: 0;
        background: #11161a;
        padding: clamp(72px, 12vh, 98px) clamp(16px, 3vw, 34px) 18px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
      }

      .team-column:hover {
        background: #12181c;
      }

      .team-column-title {
        position: absolute;
        left: 50%;
        top: clamp(8px, 1.4vh, 18px);
        transform: translateX(-50%);
        width: min(70%, 310px);
        height: clamp(42px, 8vh, 76px);
        border-radius: 8px;
        justify-content: center;
        color: transparent;
        overflow: hidden;
      }

      .team-column.red .team-column-title {
        background: #9d0019;
      }

      .team-column.spectator .team-column-title {
        background: #8c8c8c;
      }

      .team-column.blue .team-column-title {
        background: #4147d4;
      }

      .team-column-title .team-count {
        position: absolute;
        right: 10px;
        bottom: 6px;
        color: rgba(255,255,255,0.54);
      }

      .team-list {
        gap: clamp(14px, 2.6vh, 26px);
        padding-top: clamp(4px, 1vh, 10px);
      }

      .team-player {
        justify-content: flex-start;
        background: transparent;
        padding: 0;
        border-radius: 0;
        font-size: clamp(1rem, 2.1vw, 1.65rem);
        font-weight: 950;
        line-height: 1.15;
      }

      .team-column.red .team-player {
        color: #b80022;
      }

      .team-column.blue .team-player {
        color: #d6d7ff;
      }

      .team-column.spectator .team-player {
        color: #a3a3a3;
      }

      .team-player.self {
        outline: 0;
        background: transparent;
        text-shadow: 0 0 18px rgba(250, 204, 21, 0.45);
      }

      .team-player > span:last-child {
        display: inline-flex;
        gap: 5px;
        margin-left: 8px;
      }

      .team-empty {
        border: 0;
        padding: 0;
        text-align: center;
        color: rgba(210, 214, 220, 0.62);
        font-size: clamp(1rem, 2vw, 1.5rem);
        font-weight: 900;
      }

      .ready-badge,
      .owner-badge {
        transform: translateY(-2px);
      }

      .team-lobby-actions {
        grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.05fr) minmax(150px, 1fr);
        align-items: center;
        gap: clamp(12px, 4vw, 120px);
      }

      .team-lobby-overlay.host .team-lobby-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(10px, 2vw, 28px);
      }

      .team-lobby-actions button {
        min-height: clamp(54px, 10vh, 90px);
        border-radius: 0;
        border: 0;
        font-size: clamp(0.95rem, 2vw, 1.45rem);
        font-weight: 950;
        color: #0b1117;
        box-shadow: none;
      }

      #teamLobbyReadyButton {
        background: #ffc617;
      }

      #teamLobbyBackButton {
        background: #20b84f;
        color: #08110b;
      }

      #teamLobbyStartButton {
        background: #24c35a;
        color: #071109;
      }

      .team-lobby-popup .team-lobby-ai-panel,
      .team-lobby-popup .team-lobby-friends-panel {
        grid-template-columns: 1fr;
      }

      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        .team-lobby-card {
          padding: 12px 14px;
          gap: 12px;
        }

        .team-lobby-head {
          display: none;
        }

        .team-lobby-grid {
          grid-template-columns: 1fr 1fr 1fr;
          gap: 8px;
        }

        .team-column {
          min-height: 58vh;
          padding: 58px 10px 12px;
        }

        .team-column-title {
          width: 72%;
          height: 42px;
          top: 0;
        }

        .team-player,
        .team-empty {
          font-size: 0.9rem;
        }

        .team-lobby-actions {
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 10px;
        }

        .team-lobby-actions button {
          min-height: 48px;
          font-size: 0.78rem;
        }
      }

      .team-lobby-card {
        padding: clamp(10px, 2vh, 18px) clamp(12px, 3vw, 34px) clamp(12px, 3vh, 24px);
        gap: clamp(8px, 2vh, 16px);
      }

      .team-lobby-head {
        display: grid;
        grid-template-columns: 1fr auto;
        text-align: center;
        min-height: 28px;
      }

      .team-lobby-head > div {
        align-self: center;
      }

      .team-lobby-head h2 {
        color: #e5e7eb;
        font-size: clamp(0.98rem, 2.2vw, 1.25rem);
        letter-spacing: 0;
        text-transform: none;
      }

      .team-lobby-meta {
        display: none;
      }

      .team-lobby-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: clamp(8px, 1.2vw, 14px);
      }

      .team-column {
        min-height: 0;
        padding: 0;
        display: grid;
        grid-template-rows: 36px minmax(0, 1fr);
        gap: 8px;
        background: #101519;
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
      }

      .team-column-title {
        position: static;
        transform: none;
        width: min(78%, 260px);
        height: 100%;
        justify-self: center;
        border-radius: 7px;
        color: #101519;
        font-size: 0;
      }

      .team-column-title > span:first-child {
        display: none;
      }

      .team-column-title .team-count {
        right: 6px;
        bottom: 4px;
        font-size: 0.58rem;
      }

      .team-column.blue .team-column-title { background: #4247d8; }
      .team-column.spectator .team-column-title { background: #8d8d8d; }
      .team-column.red .team-column-title { background: #a00018; }

      .team-list {
        align-content: start;
        gap: clamp(9px, 2vh, 18px);
        padding: clamp(12px, 3vh, 34px) clamp(10px, 2vw, 28px);
      }

      .team-player {
        font-size: clamp(0.9rem, 1.9vw, 1.24rem);
        line-height: 1.15;
      }

      .team-player > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .team-player > span:last-child {
        flex: 0 0 auto;
      }

      .team-empty {
        font-size: clamp(0.82rem, 1.65vw, 1.08rem);
        line-height: 1.2;
      }

      .team-lobby-actions,
      .team-lobby-overlay.host .team-lobby-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(8px, 2vw, 18px);
      }

      .team-lobby-actions button {
        min-height: clamp(42px, 9vh, 66px);
        border-radius: 4px;
        font-size: clamp(0.72rem, 1.55vw, 1rem);
      }

      #teamLobbyBackButton {
        display: none !important;
      }



      #teamLobbyStartButton {
        background: #22c55e;
      }

      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        .team-lobby-head {
          display: grid;
        }

        .team-lobby-head h2 {
          font-size: 0.9rem;
        }

        .team-lobby-grid {
          grid-template-columns: 1fr 1fr 1fr;
          gap: 6px;
        }

        .team-column {
          min-height: 52vh;
          grid-template-rows: 32px minmax(0, 1fr);
          padding: 0;
        }

        .team-column-title {
          width: 76%;
          height: 32px;
        }

        .team-list {
          padding: 12px 8px;
          gap: 9px;
        }

        .team-player,
        .team-empty {
          font-size: 0.78rem;
        }

        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 7px;
        }

        .team-lobby-actions button {
          min-height: 40px;
          font-size: 0.66rem;
          padding: 4px;
        }
      }

      .team-lobby-overlay {
        padding: clamp(18px, 4vh, 34px) clamp(64px, 8vw, 128px) !important;
        background: rgba(2, 6, 23, 0.72) !important;
        -webkit-backdrop-filter: blur(3px) !important;
        backdrop-filter: blur(3px) !important;
      }

      .team-lobby-card {
        width: min(86vw, 1120px) !important;
        height: min(76vh, 620px) !important;
        max-height: min(76vh, 620px) !important;
        border: 1px solid rgba(148, 163, 184, 0.22) !important;
        border-radius: 12px !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6) !important;
        background: rgba(20, 24, 29, 0.97) !important;
        padding: clamp(10px, 2vh, 16px) !important;
        gap: 10px !important;
      }

      .team-lobby-head {
        display: grid !important;
        grid-template-columns: 1fr auto;
        min-height: 34px !important;
      }

      .team-lobby-head h2 {
        color: #e5e7eb !important;
        font-size: clamp(0.9rem, 1.9vw, 1.18rem) !important;
      }

      .team-lobby-grid {
        grid-template-columns: 1fr 0.88fr 1fr !important;
        gap: clamp(7px, 1vw, 12px) !important;
        min-height: 0 !important;
      }

      .team-column {
        min-height: 0 !important;
        padding: 8px !important;
        display: grid !important;
        grid-template-rows: 38px minmax(0, 1fr) !important;
        gap: 8px !important;
        border-radius: 8px !important;
        background: #101519 !important;
      }

      .team-column-title {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: 38px !important;
        border-radius: 7px !important;
        color: #f8fafc !important;
        font-size: clamp(0.66rem, 1.35vw, 0.9rem) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      }

      .team-column-title > span:first-child {
        display: block !important;
      }

      .team-column-title .team-count {
        right: 8px !important;
        bottom: 5px !important;
        font-size: 0.58rem !important;
        color: rgba(255,255,255,0.68) !important;
      }

      .team-list {
        padding: 7px !important;
        gap: 7px !important;
      }

      .team-player {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 7px !important;
        border-radius: 7px !important;
        background: rgba(255,255,255,0.045) !important;
        font-size: clamp(0.72rem, 1.25vw, 0.94rem) !important;
        line-height: 1.1 !important;
        text-shadow: none !important;
      }

      .team-player > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .team-player > span:last-child {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin-left: 0 !important;
      }

      .player-ping {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        color: #cbd5e1;
        font-size: 0.62rem;
        font-weight: 950;
      }

      .player-ping > span {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #94a3b8;
      }

      .player-ping.good > span { background: #22c55e; }
      .player-ping.mid > span { background: #facc15; }
      .player-ping.bad > span { background: #ef4444; }

      .team-empty {
        font-size: clamp(0.72rem, 1.2vw, 0.94rem) !important;
        font-weight: 850 !important;
      }

      .team-lobby-actions,
      .team-lobby-overlay.host .team-lobby-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: clamp(7px, 1.1vw, 12px) !important;
      }

      .team-lobby-actions button {
        min-height: clamp(36px, 7vh, 52px) !important;
        border-radius: 7px !important;
        font-size: clamp(0.62rem, 1.18vw, 0.88rem) !important;
        color: #07110b !important;
      }

      .team-lobby-actions .action-green,
      #teamLobbyStartButton.action-green {
        background: #22c55e !important;
      }

      .team-lobby-actions .action-yellow,
      #teamLobbyStartButton.action-yellow,
      #teamLobbyReadyButton.is-ready {
        background: #facc15 !important;
      }

      #teamLobbyRestartButton {
        background: #ef4444 !important;
        color: #fff !important;
      }



      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        .team-lobby-overlay {
          padding: 24px 58px !important;
        }

        .team-lobby-card {
          width: min(88vw, 900px) !important;
          height: min(78vh, 380px) !important;
          max-height: min(78vh, 380px) !important;
        }

        .team-column {
          grid-template-rows: 32px minmax(0, 1fr) !important;
          padding: 6px !important;
        }

        .team-column-title {
          height: 32px !important;
          font-size: 0.62rem !important;
        }

        .team-player {
          font-size: 0.64rem !important;
          padding: 5px !important;
        }

        .team-lobby-actions button {
          min-height: 34px !important;
          font-size: 0.55rem !important;
        }
      }

      .team-lobby-card {
        grid-template-rows: auto auto auto auto !important;
        align-content: start !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
      }

      .team-lobby-grid {
        align-items: start !important;
      }

      .team-column {
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
      }

      .team-list {
        max-height: none !important;
        overflow: visible !important;
      }

      .team-player {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
      }

      .team-player-name {
        min-width: 0;
        flex: 1 1 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .team-player-meta {
        display: inline-flex !important;
        flex: 0 1 auto;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        min-width: 0;
        flex-wrap: wrap;
      }

      .bot-difficulty-badge {
        color: #fef3c7;
        background: rgba(202, 138, 4, 0.32);
      }

      .team-bot-actions {
        flex: 1 0 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-top: 6px;
      }

      .team-bot-actions button {
        min-height: 34px !important;
        width: 100% !important;
        padding: 6px 8px !important;
        border-radius: 7px !important;
        font-size: 0.72rem !important;
      }

      .team-lobby-ai-panel {
        grid-template-columns: 1fr !important;
      }

      .bot-add-toggle,
      .ai-bot-submit {
        min-height: 42px;
        border-radius: 8px;
        font-weight: 950;
      }

      .bot-add-toggle {
        background: #60a5fa;
        color: #07111f;
      }

      .ai-bot-sheet {
        display: grid;
        gap: 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        padding: 10px;
      }

      .ai-bot-sheet.hidden {
        display: none;
      }

      .ai-bot-choice {
        display: grid;
        gap: 6px;
      }

      .ai-bot-choice > span {
        color: #e2e8f0;
        font-size: 0.72rem;
        font-weight: 950;
      }

      .ai-bot-choice-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      .ai-bot-choice-grid button {
        min-height: 36px;
        border-radius: 7px;
        font-size: 0.72rem;
      }

      .ai-bot-choice-grid button.selected {
        background: #facc15;
        color: #111827;
      }

      .ai-bot-submit {
        background: #22c55e;
        color: #071109;
      }

      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        .team-lobby-overlay {
          padding: max(12px, env(safe-area-inset-top)) max(46px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(46px, env(safe-area-inset-left)) !important;
          align-items: start !important;
          overflow: hidden !important;
        }

        .team-lobby-card {
          width: min(92vw, 980px) !important;
          height: auto !important;
          max-height: calc(100dvh - 24px) !important;
          padding: 10px !important;
          gap: 8px !important;
        }

        .team-lobby-head {
          min-height: 30px !important;
        }

        .team-lobby-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 6px !important;
        }

        .team-column {
          grid-template-rows: 30px auto !important;
          padding: 5px !important;
        }

        .team-list {
          padding: 6px 4px !important;
          gap: 6px !important;
        }

        .team-player {
          font-size: 0.62rem !important;
          padding: 5px !important;
          gap: 4px !important;
        }

        .ready-badge,
        .owner-badge {
          padding: 2px 5px !important;
          font-size: 0.54rem !important;
        }

        .team-bot-actions button {
          min-height: 30px !important;
          font-size: 0.62rem !important;
        }

        .team-lobby-ai-panel {
          gap: 6px !important;
        }

        .bot-add-toggle,
        .ai-bot-submit {
          min-height: 34px !important;
          font-size: 0.68rem !important;
        }

        .ai-bot-sheet {
          gap: 7px;
          padding: 8px;
        }

        .ai-bot-choice-grid button {
          min-height: 30px;
          font-size: 0.62rem;
        }

        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
          gap: 6px !important;
        }
      }

      @media (max-width: 560px) {
        .team-lobby-overlay {
          padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
        }

        .team-lobby-card {
          width: calc(100vw - 20px) !important;
          max-height: calc(100dvh - 20px) !important;
        }

        .team-lobby-grid {
          grid-template-columns: 1fr !important;
        }

        .team-column {
          grid-template-rows: 34px auto !important;
        }

        .team-player {
          font-size: 0.76rem !important;
        }

        .team-bot-actions button {
          min-height: 34px !important;
          font-size: 0.7rem !important;
        }

        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }

      @keyframes winnerPop {
        0% { transform: scale(0.7); opacity: 0; }
        70% { transform: scale(1.08); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
      }

      .match-end-panel.show .match-end-card h2 {
        animation: winnerPop 0.5s ease forwards;
      }

      .match-end-card .mvp-line {
        border-radius: 10px;
        background: rgba(250, 204, 21, 0.12);
        border: 1px solid rgba(250, 204, 21, 0.25);
        padding: 10px;
        margin-bottom: 12px;
        font-size: 0.88rem;
      }

      .match-end-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 12px;
        font-size: 0.78rem;
      }

      .match-end-table th {
        color: var(--muted);
        font-weight: 800;
        padding: 6px 5px;
        border-bottom: 1px solid var(--line);
        text-align: center;
      }

      .match-end-table td {
        color: #e2e8f0;
        padding: 6px 5px;
        border-bottom: 1px solid var(--line);
        text-align: center;
      }

      .match-end-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 4px;
      }

      .match-social-list {
        display: grid;
        gap: 8px;
        margin: 10px 0 12px;
        text-align: left;
      }

      .match-social-teams {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 10px 0 12px;
        text-align: left;
      }

      .match-social-team {
        display: grid;
        gap: 8px;
        align-content: start;
      }

      .match-social-team h3 {
        margin: 0;
        font-size: 0.9rem;
        color: #e2e8f0;
      }

      .match-social-card {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        background: rgba(15,23,42,0.72);
        padding: 8px;
      }

      .match-social-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(37,99,235,0.28);
        color: #e0f2fe;
        font-weight: 950;
        background-size: cover;
        background-position: center;
      }

      .match-social-name {
        font-weight: 950;
        color: #f8fafc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .match-social-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
      }

      .match-social-actions button,
      .match-social-actions select {
        min-height: 36px;
        border-radius: 8px;
        font-size: 0.72rem;
      }

      .match-report-options {
        grid-column: 1 / -1;
        display: none;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
      }

      .match-report-options.show {
        display: grid;
      }

      .match-end-chat {
        display: grid;
        gap: 8px;
        margin-top: 10px;
        text-align: left;
      }

      .match-end-chat .chat-log {
        max-height: 108px;
      }

      .match-end-chat-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
      }

      .market-visual {
        height: 64px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.14);
        display: grid;
        place-items: center;
        margin-bottom: 8px;
        background: linear-gradient(135deg, rgba(37,99,235,0.24), rgba(15,23,42,0.7));
        overflow: hidden;
      }

      .market-visual .preview-icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 1.25rem;
        font-weight: 950;
        color: #fff;
        box-shadow: 0 10px 26px rgba(0,0,0,0.28);
      }

      .market-visual.badges .preview-icon { background: linear-gradient(135deg, #facc15, #f97316); }
      .market-visual.frames .preview-icon { background: transparent; border: 5px solid #facc15; border-radius: 12px; }
      .market-visual.balls .preview-icon { background: radial-gradient(circle at 35% 32%, #fff, #93c5fd 42%, #1d4ed8 72%); }
      .market-visual.themes { background: repeating-linear-gradient(90deg, rgba(34,197,94,0.38) 0 14px, rgba(21,128,61,0.5) 14px 28px); }
      .market-visual.diamonds .preview-icon { background: linear-gradient(135deg, #67e8f9, #8b5cf6); transform: rotate(45deg); border-radius: 8px; }
      .market-visual.diamonds .preview-icon span { transform: rotate(-45deg); }

      .profile-feedback-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

      .profile-stat-header {
        display: grid;
        grid-template-columns: 0.7fr repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

      .profile-feedback-grid {
        margin: 8px 0 12px;
      }

      .profile-feedback-item,
      .profile-stat-header span {
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        background: rgba(15,23,42,0.58);
        padding: 8px;
        text-align: center;
        font-size: 0.74rem;
        font-weight: 900;
        color: #e2e8f0;
      }

      .profile-feedback-item strong {
        display: block;
        font-size: 1rem;
        color: #f8fafc;
      }

      @media (max-width: 620px) {
        .match-social-teams {
          grid-template-columns: 1fr;
        }
      }

      .match-end-actions .primary-action {
        background: linear-gradient(135deg, #16a34a, #15803d);
        font-size: 1rem;
        min-height: 52px;
        box-shadow: 0 6px 18px rgba(22,163,74,0.38);
      }

      /* Flow-card gecis animasyonu */
      .flow-card {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.28s ease, transform 0.28s ease;
      }

      .flow-card:not(.hidden) {
        opacity: 1;
        transform: translateY(0);
      }

      /* Mobil alt navigasyon */
      .mobile-nav { display: none; }
      .mobile-nav-right { display: none; }
      .mobile-popup { display: none; }
      .mobile-popup.show {
        display: grid;
        position: fixed;
        inset: 0;
        z-index: 99999 !important;
        background: rgba(2,6,23,0.72);
        place-items: center;
        padding: 14px;
      }
      .mobile-popup-card {
        width: min(420px, 96vw);
        max-height: min(78vh, 720px);
        overflow: auto;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(16,24,39,0.98);
        padding: 14px;
        box-shadow: 0 18px 48px rgba(0,0,0,0.4);
      }
      .mobile-popup-card h2 {
        margin: 0 0 8px;
        font-size: 1rem;
      }
      .settings-popup-grid {
        display: grid;
        gap: 10px;
      }
      .settings-popup-grid .setting {
        background: rgba(15,23,42,0.58);
      }
      .account-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .settings-collapse {
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        background: rgba(15,23,42,0.58);
        padding: 8px;
      }

      .settings-collapse summary {
        min-height: 38px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 950;
        cursor: pointer;
      }

      .settings-rules {
        display: grid;
        gap: 8px;
        padding: 4px 2px 2px;
      }

      .settings-rules h3 {
        margin: 4px 0 0;
        font-size: 0.86rem;
        color: #bfdbfe;
      }

      .settings-rules p {
        margin: 0;
        color: #cbd5e1;
        font-size: 0.78rem;
        line-height: 1.35;
      }

      .room-list-section {
        display: grid;
        gap: 8px;
        margin-bottom: 12px;
      }

      .room-list-section h3 {
        margin: 0;
        font-size: 0.9rem;
      }

      .leader-filter-group {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 10px;
        padding: 5px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 12px;
        background: rgba(2, 6, 23, 0.28);
      }

      .leader-filter-group button,
      .profile-settings-panel button {
        min-height: 42px;
        border-radius: 9px;
      }

      .leader-filter-group button.selected {
        background: linear-gradient(135deg, #facc15, #f59e0b);
        color: #111827;
        box-shadow: 0 8px 18px rgba(250, 204, 21, 0.22);
      }

      .leaderboard-list {
        display: grid;
        gap: 8px;
      }

      .leaderboard-card {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        background: rgba(15,23,42,0.72);
        padding: 8px;
      }

      .leaderboard-card.self {
        border-color: rgba(34,197,94,0.65);
        background: rgba(22,101,52,0.26);
      }

      .leader-rank {
        font-weight: 950;
        color: #facc15;
      }

      .leader-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #2563eb, #16a34a);
        background-size: cover;
        background-position: center;
        font-weight: 950;
      }

      .leader-main {
        min-width: 0;
        display: grid;
        gap: 2px;
      }

      .leader-main span {
        color: var(--muted);
        font-size: 0.72rem;
      }

      .leader-points {
        display: grid;
        text-align: center;
        font-weight: 950;
        color: #f8fafc;
      }

      .leader-points small {
        color: var(--muted);
        font-size: 0.62rem;
      }

      .public-profile-card,
      .profile-settings-panel {
        display: grid;
        gap: 10px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        background: rgba(15,23,42,0.62);
        padding: 10px;
        margin-top: 10px;
      }

      .profile-account-rank {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 32px;
        padding: 6px 9px;
        border: 1px solid rgba(96, 165, 250, 0.22);
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.12);
        color: #dbeafe;
        font-size: 0.76rem;
        font-weight: 950;
        margin-top: 6px;
      }

      .profile-ranked-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

      .public-profile-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
      }

      .public-profile-card .flow-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .public-profile-card .flow-actions button {
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
      }

      .public-profile-card.detail {
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .profile-settings-panel h3 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .profile-name-edit {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
      }

      .mobile-chat-panel .chat-log {
        max-height: min(42vh, 260px);
        overflow: auto;
        font-size: 0.9rem;
      }

      .mobile-chat-panel .quick-chat-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
      }

      .mobile-chat-panel .quick-chat-btn {
        min-height: 38px;
        white-space: normal;
      }

      @media (max-width: 560px) {
        .leader-filter-group {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .leaderboard-card {
          grid-template-columns: auto auto minmax(0, 1fr);
        }
        .leader-points,
        .leaderboard-card [data-view-profile] {
          grid-column: span 1;
        }
        .public-profile-card {
          grid-template-columns: auto minmax(0, 1fr);
        }
        .public-profile-card > button {
          grid-column: span 2;
        }
        .profile-name-edit {
          grid-template-columns: 1fr;
        }
        .profile-ranked-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .multiplayer-choice-grid {
          grid-template-columns: 1fr;
        }
        .room-card-choice-grid,
        .room-card-summary-grid,
        .level-reward-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .level-reward-head {
          display: grid;
        }
      }

      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        .mobile-nav, .mobile-nav-right {
          display: flex;
          flex-direction: column;
          position: fixed;
          top: 50%;
          z-index: 10;
          width: 42px;
          padding: 3px 0;
          background: rgba(2, 6, 23, 0.56);
          border: 1px solid rgba(255,255,255,0.10);
          border-radius: 14px;
          gap: 1px;
          box-shadow: 0 6px 20px rgba(0,0,0,0.32);
        }
        .mobile-nav {
          left: 0;
          transform: translateY(-50%);
        }
        .mobile-nav-right {
          right: calc(2px + env(safe-area-inset-right));
          transform: translateY(-50%);
        }

        .mobile-nav button, .mobile-nav-right button {
          width: 38px;
          height: 38px;
          border-radius: 10px;
          font-size: 0.48rem;
          font-weight: 800;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1px;
          background: transparent;
          color: #94a3b8;
          border: 0;
          padding: 1px;
        }
        .mobile-nav button:active, .mobile-nav-right button:active {
          background: rgba(37,99,235,0.22);
          color: #f8fafc;
        }
        .mobile-nav-right button.nav-ready {
          color: #facc15;
        }
        .mobile-nav-right button.nav-ready.is-ready {
          color: #4ade80;
        }
        .mobile-nav button.nav-exit,
        .mobile-nav-right button.nav-exit {
          color: #fb7185;
        }
        .mobile-nav .nav-icon, .mobile-nav-right .nav-icon {
          width: 15px;
          height: 15px;
          line-height: 1;
        }

        .mobile-popup {
          display: none;
          position: fixed;
          inset: 0;
          z-index: 99999 !important;
          background: rgba(2,6,23,0.72);
          place-items: center;
          padding: 14px;
        }
        .mobile-popup.show { display: grid; }
        .mobile-popup-card {
          width: min(380px,96vw);
          max-height: 70vh;
          overflow: auto;
          border-radius: 12px;
          border: 1px solid rgba(255,255,255,0.14);
          background: rgba(16,24,39,0.98);
          padding: 14px;
          box-shadow: 0 18px 48px rgba(0,0,0,0.4);
        }
        .mobile-popup-card h2 {
          margin: 0 0 8px;
          font-size: 1rem;
        }

        .canvas-wrap {
          padding-left: 0;
          padding-right: 0;
        }

        /* Mobil menu flow-card buyutme */
        .flow-card {
          max-height: 85vh;
          overflow-y: auto;
        }
      }

      /* Ses ac/kapat butonu */
      .sound-toggle {
        position: fixed;
        right: 14px;
        top: 14px;
        z-index: 8;
        width: 42px;
        height: 42px;
        min-height: unset;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(2,6,23,0.72);
        color: #cbd5e1;
        font-size: 1rem;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: background 0.15s, transform 0.1s;
      }

      .sound-toggle:active {
        background: rgba(37,99,235,0.3);
      }

      /* Profil ekrani */
      .profile-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 18px 10px;
      }

      .profile-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, #2563eb, #16a34a);
        display: grid;
        place-items: center;
        font-size: 2rem;
        font-weight: 950;
        border: 3px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
      }

      .profile-name {
        font-size: 1.15rem;
        font-weight: 950;
      }

      .profile-xp-bar {
        width: 100%;
        height: 8px;
        border-radius: 4px;
        background: var(--line);
        overflow: hidden;
      }

      .profile-xp-fill {
        height: 100%;
        border-radius: 4px;
        background: linear-gradient(90deg, #2563eb, #38bdf8);
        transition: width 0.3s;
      }

      .profile-level-panel {
        display: grid;
        gap: 7px;
        padding: 10px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.72);
      }

      .profile-level-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-weight: 950;
      }

      .profile-level-head span {
        color: var(--muted);
        font-size: 0.72rem;
        font-weight: 850;
      }

      .profile-stats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        width: 100%;
        text-align: center;
      }

      .profile-stat .stat-val {
        font-size: 1.15rem;
        font-weight: 950;
      }

      .profile-stat .stat-label {
        font-size: 0.68rem;
        color: var(--muted);
        font-weight: 800;
      }

      .profile-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
      }

      .profile-badge {
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
        padding: 5px 10px;
        font-size: 0.72rem;
        font-weight: 800;
      }

      @media (max-width: 980px) {
        .layout {
          grid-template-columns: 1fr;
        }

        .side {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        :root {
          --mobile-nav-width: 48px;
          --mobile-left-rail: var(--mobile-nav-width);
          --mobile-right-rail: calc(48px + env(safe-area-inset-right));
          --mobile-top-safe: calc(8px + env(safe-area-inset-top));
          --mobile-bottom-safe: calc(8px + env(safe-area-inset-bottom));
        }

        html,
        body {
          height: 100%;
          overflow: hidden;
          background: #071322;
        }

        body {
          overscroll-behavior: none;
        }

        .app {
          width: 100%;
          height: var(--app-vh);
          padding: 0;
          overflow: hidden;
        }

        .top {
          display: none;
        }

        .layout {
          display: grid;
          grid-template-columns: var(--mobile-left-rail) minmax(0, 1fr) var(--mobile-right-rail);
          height: var(--app-vh);
          gap: 0;
        }

        .field-card {
          grid-column: 2;
          height: var(--app-vh);
          align-self: stretch;
          border: 0;
          border-radius: 0;
          box-shadow: none;
          background: #16a34a;
          overflow: hidden;
        }

        .canvas-wrap {
          position: relative;
          inset: auto;
          width: 100%;
          height: 100%;
        }

        canvas {
          width: 100%;
          height: 100%;
          aspect-ratio: auto;
        }

        .field-head {
          position: fixed;
          left: 50%;
          right: auto;
          top: 2px;
          transform: translateX(-50%);
          z-index: 12;
          border: 0;
          padding: 0;
          background: transparent;
          pointer-events: none;
        }

        .match-bar {
          min-height: 34px;
          gap: 5px;
          padding: 3px 5px;
          border-radius: 7px;
        }

        .match-meta {
          left: calc(100% + 6px);
          gap: 5px;
          font-size: 0.56rem;
        }

        .score {
          min-width: 44px;
          min-height: 28px;
          background: rgba(2, 6, 23, 0.72);
          border: 1px solid rgba(255, 255, 255, 0.24);
          font-size: 1.18rem;
          pointer-events: auto;
        }

        .match-clock {
          min-width: 72px;
          min-height: 28px;
          font-size: 1rem;
        }

        .ping-dot {
          width: 7px;
          height: 7px;
        }

        .hud {
          left: calc(var(--mobile-left-rail) + 10px);
          top: var(--mobile-top-safe);
          bottom: auto;
          max-width: 26%;
          padding: 6px 8px;
          font-size: 0.72rem;
          z-index: 4;
        }

        .hud.hud-hidden {
          opacity: 0;
          transform: translateY(-6px);
        }

        .ping-badge {
          left: calc(var(--mobile-left-rail) + 10px);
          bottom: var(--mobile-bottom-safe);
        }

        .mobile-joystick {
          width: clamp(80px, 15vmin, 120px) !important;
          height: clamp(80px, 15vmin, 120px) !important;
          transform: translate(-50%, -50%);
          pointer-events: none;
        }

        .side {
          position: fixed;
          left: auto;
          right: 0;
          top: 0;
          bottom: 0;
          width: min(360px, 92vw);
          height: 100dvh;
          max-height: none;
          overflow: auto;
          border-radius: 12px 0 0 12px;
          border-color: rgba(255, 255, 255, 0.16);
          background: rgba(16, 24, 39, 0.96);
          transform: translateX(100%);
          transition: transform 0.2s ease;
          z-index: 6;
          grid-template-columns: 1fr;
          gap: 8px;
          padding: calc(56px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)) 8px;
          box-shadow: none;
        }

        .side.open {
          transform: translateX(0);
        }

        .mobile-panel-tabs {
          display: none;
          grid-template-columns: 1fr;
          gap: 2px;
          position: fixed;
          right: calc(4px + env(safe-area-inset-right));
          top: 50%;
          transform: translateY(-50%);
          width: 42px;
          z-index: 8;
          padding: 6px 0;
          background: rgba(2, 6, 23, 0.56);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 14px;
          box-shadow: 0 8px 28px rgba(0,0,0,0.28);
        }

        .mobile-panel-tabs button {
          width: 42px;
          height: 40px;
          border-radius: 12px;
          background: transparent;
          color: #94a3b8;
          font-size: 0.5rem;
          font-weight: 800;
          padding: 2px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1px;
        }

        .mobile-panel-tabs button.active {
          background: rgba(37, 99, 235, 0.22);
          color: #f8fafc;
        }

        .side .section {
          display: none;
        }

        .side .section.mobile-visible {
          display: block;
        }

        .side .section.mobile-visible.stack {
          display: grid;
        }

        .room-list,
        .chat-log {
          max-height: 42vh;
        }

        .section {
          padding: 10px;
        }
      }
      /* ---- Giris / Auth Ekrani ---- */
      @media (max-width: 920px) and (orientation: portrait) {
        .rotate-overlay {
          display: none !important;
          pointer-events: none !important;
        }

        .rotate-overlay.show {
          display: flex !important;
          pointer-events: auto !important;
        }

        .rotate-card {
          width: min(360px, 92vw);
          border: 1px solid rgba(255,255,255,0.18);
          border-radius: 14px;
          background: rgba(16,24,39,0.96);
          padding: 22px;
          box-shadow: 0 24px 54px rgba(0,0,0,0.46);
        }

        .rotate-card strong {
          display: block;
          margin-bottom: 8px;
          font-size: 1.2rem;
        }

        .rotate-card span {
          display: block;
          color: var(--muted);
          line-height: 1.45;
          font-weight: 700;
        }
      }

      .auth-tabs { display:flex; gap:8px; margin-bottom:12px; }
      .auth-tabs button {
        flex:1; background:#1f2937; color:var(--muted); font-weight:800;
        border:1px solid var(--line); border-radius:8px; padding:10px;
      }
      .auth-tabs button.active { background:var(--blue); color:#fff; border-color:var(--blue); }
      .auth-form { display:flex; flex-direction:column; gap:10px; }
      .auth-form input { width:100%; }
      .auth-divider {
        display:flex; align-items:center; gap:8px; color:var(--muted);
        margin:14px 0; font-size:0.78rem; font-weight:800;
      }
      .auth-divider::before, .auth-divider::after {
        content:""; flex:1; height:1px; background:var(--line);
      }
      .auth-provider-btn {
        display:flex; align-items:center; justify-content:center; gap:10px;
        width:100%; padding:12px; border-radius:10px; font-weight:850;
        background:#fff; color:#111; min-height:50px;
      }
      .auth-provider-btn.apple { background:#000; color:#fff; }
      .auth-provider-btn.guest { background:#475569; color:#fff; }
      .auth-provider-btn .pico { font-size:1.2rem; line-height:1; }
      .auth-error {
        color:#fca5a5; background:rgba(220,38,38,0.12); padding:8px 10px;
        border-radius:8px; font-size:0.82rem; font-weight:700; display:none;
      }
      .auth-error.visible { display:block; }
      .auth-user-bar {
        display:flex; align-items:center; gap:8px; padding:8px 10px;
        background:var(--panel-2); border-radius:8px; margin-bottom:10px;
      }
      .auth-user-bar .auth-user-name { flex:1; font-weight:800; font-size:0.88rem; }
      .auth-user-bar .auth-user-badge {
        font-size:0.7rem; padding:2px 6px; border-radius:6px;
        background:var(--blue); color:#fff; font-weight:800;
      }
      .auth-user-bar .auth-user-badge.guest { background:#64748b; }
      .auth-logout {
        background:transparent; color:#fca5a5; border:1px solid #fca5a5;
        font-size:0.78rem; padding:4px 10px; min-height:32px; border-radius:6px;
      }

      .auth-remember-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 2px 2px 0;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .auth-remember-row label {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 32px;
      }

      .auth-remember-row input {
        width: 18px;
        height: 18px;
        accent-color: #60a5fa;
      }

      .guest-name-panel {
        display: grid;
        gap: 8px;
        margin-top: 8px;
        padding: 10px;
        border: 1px solid rgba(96,165,250,0.22);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.48);
      }

      .quick-play-grid {
        display: grid;
        gap: 10px;
      }

      .quick-play-grid button {
        min-height: 58px;
        font-size: 0.98rem;
      }

      .main-menu-accountbar {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
      }

      .main-menu-account {
        appearance: none;
        -webkit-appearance: none;
        flex: 1.1;
        min-width: 145px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        padding: 7px 9px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 9px;
        background: rgba(15, 23, 42, 0.72);
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease;
      }

      .main-menu-account:hover,
      .main-menu-account:focus-visible {
        border-color: rgba(125, 211, 252, 0.42);
        background: rgba(30, 41, 59, 0.82);
      }

      .main-menu-account:focus-visible {
        outline: 2px solid rgba(96, 165, 250, 0.55);
        outline-offset: 2px;
      }

      .main-menu-account:active {
        transform: translateY(1px);
      }

      .main-menu-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: linear-gradient(135deg, #2563eb, #16a34a);
        background-size: cover;
        background-position: center;
        display: grid;
        place-items: center;
        font-size: 1rem;
        font-weight: 950;
        border: 2px solid rgba(255,255,255,0.25);
        color: #fff;
      }

      .main-menu-avatar.has-image {
        color: transparent;
      }

      .main-menu-player {
        min-width: 0;
      }

      .main-menu-player-name {
        font-size: 0.86rem;
        font-weight: 950;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .main-menu-player-status {
        color: var(--muted);
        font-size: 0.66rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .main-menu-wallet {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        min-width: 154px;
        flex: 1.1;
      }

      .main-menu-vip-level-card {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 9px;
        background: rgba(15, 23, 42, 0.72);
        padding: 7px 10px;
        cursor: pointer;
        align-self: stretch;
        min-width: 58px;
        flex: 0 0 auto;
        transition: border-color 0.2s, background-color 0.2s;
      }

      .main-menu-vip-level-card:hover {
        border-color: #ffd700;
        background: rgba(212, 175, 55, 0.05);
      }

      .main-menu-vip-level-card span {
        color: #ffd700;
        font-family: 'Orbitron', sans-serif;
        font-weight: 900;
        font-size: 12px;
        letter-spacing: 0.5px;
      }

      .main-menu-energy {
        min-width: 180px;
        flex: 1.6;
        display: grid;
        gap: 4px;
        padding: 6px 8px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 9px;
        background: rgba(15, 23, 42, 0.72);
      }

      .energy-head,
      .energy-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        min-width: 0;
      }

      .energy-head span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 900;
        white-space: nowrap;
      }

      .energy-head strong {
        color: #fde68a;
        font-size: 0.72rem;
        white-space: nowrap;
      }

      .energy-segments {
        display: grid;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 2px;
        min-height: 8px;
      }

      .energy-segment {
        height: 8px;
        border-radius: 2px;
        background: rgba(148, 163, 184, 0.26);
        border: 1px solid rgba(255,255,255,0.08);
      }

      .energy-segment.filled {
        background: linear-gradient(180deg, #facc15, #22c55e);
        box-shadow: 0 0 10px rgba(250, 204, 21, 0.22);
      }

      .energy-foot {
        font-size: 0.58rem;
        color: var(--muted);
        font-weight: 800;
      }

      .energy-foot span {
        flex: 1 1 auto;
        min-width: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .energy-foot button {
        flex: 0 0 auto;
        min-height: 24px;
        padding: 3px 6px;
        border-radius: 7px;
        font-size: 0.58rem;
        background: rgba(37, 99, 235, 0.55);
        white-space: nowrap;
      }

      .room-card-select-body {
        display: grid;
        gap: 8px;
      }

      .room-card-choice-grid,
      .room-card-summary-grid,
      .level-reward-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
      }

      .room-card-choice,
      .room-card-chip,
      .level-reward-chip {
        min-height: 48px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(15,23,42,0.72);
        display: grid;
        place-items: center;
        gap: 2px;
        text-align: center;
        font-size: 0.72rem;
        font-weight: 900;
      }

      .room-card-choice.selected {
        background: #facc15;
        color: #111827;
      }

      .room-card-choice:disabled {
        opacity: 0.42;
      }

      .room-card-hint,
      .level-reward-next {
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 800;
      }

      .profile-level-rewards {
        display: grid;
        gap: 9px;
        padding: 10px;
        border: 1px solid rgba(250,204,21,0.28);
        border-radius: 8px;
        background: rgba(113,63,18,0.18);
      }

      .level-reward-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .level-reward-head h3 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .level-reward-head span {
        color: var(--muted);
        font-size: 0.7rem;
        font-weight: 850;
      }

      .level-reward-head button {
        min-height: 38px;
        white-space: nowrap;
      }

      .level-reward-chip strong {
        font-size: 1rem;
      }

      .level-reward-chip.muted-chip {
        color: var(--muted);
      }

      .wallet-chip {
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.72);
        padding: 8px;
        font-weight: 900;
        display: grid;
        place-items: center;
        gap: 2px;
        text-align: center;
      }

      .wallet-chip span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--muted);
        font-size: 0.7rem;
        margin-bottom: 2px;
      }

      .play-section {
        display: grid;
        gap: 8px;
      }

      .profile-screen,
      .market-screen,
      .inventory-screen {
        gap: 10px;
        max-height: calc(100dvh - 42px);
        overflow: auto;
      }

      .profile-top {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: center;
      }

      .profile-avatar.has-image {
        background-size: cover;
        background-position: center;
        color: transparent;
      }

      /* Main Menu, Profile, Leaderboard, and Friends Premium Avatar Frame Borders */
      .profile-frame-frame-blue {
        border: 3.5px solid #00d2ff !important;
        box-shadow: 0 0 10px #00d2ff, inset 0 0 4px #00d2ff !important;
      }
      .profile-frame-frame-gold {
        border: 3.5px solid #ffd700 !important;
        box-shadow: 0 0 10px #ffd700, inset 0 0 4px #ffd700 !important;
        animation: pulseGold 2s infinite !important;
      }
      .profile-frame-frame-red {
        border: 3.5px solid #ff416c !important;
        box-shadow: 0 0 10px #ff416c, inset 0 0 4px #ff416c !important;
      }
      .profile-frame-frame-neon {
        border: 3.5px solid #00ff87 !important;
        box-shadow: 0 0 12px #00f5ff, inset 0 0 4px #00f5ff !important;
        animation: neonHueCycle 3s linear infinite !important;
      }
      .profile-frame-frame-emerald {
        border: 3.5px solid #00ff87 !important;
        box-shadow: 0 0 10px #00ff87, inset 0 0 4px #00ff87 !important;
      }
      .profile-frame-frame-cosmic {
        border: 3.5px solid #8a2be2 !important;
        box-shadow: 0 0 10px #ff007f, inset 0 0 4px #ff007f !important;
      }

      /* Premium Royal Gold Frames (Added) */
      .profile-frame-frame-laurel-gold {
        border: 4px double #ffd700 !important;
        box-shadow: 0 0 12px #ffd700, inset 0 0 4px #ffd700 !important;
        animation: framePulse 2s infinite ease-in-out !important;
      }
      .profile-frame-frame-royal-crown {
        border: 3.5px solid #ffd700 !important;
        box-shadow: 0 0 14px #f57f17, inset 0 0 4px #ffd700 !important;
        animation: pulseGold 2s infinite !important;
      }
      .profile-frame-frame-victory-gem {
        border: 3.5px solid #ffd700 !important;
        box-shadow: 0 0 12px #ff1744, inset 0 0 4px #ffd700 !important;
      }
      .profile-frame-frame-shadow-hunter {
        border: 3.5px solid #37474f !important;
        box-shadow: 0 0 10px #ff1744, inset 0 0 4px #ff1744 !important;
      }
      .profile-frame-frame-emperor-baroque {
        border: 4px solid #ffd700 !important;
        box-shadow: 0 0 14px #fbc02d, inset 0 0 5px #ffd700 !important;
      }
      .profile-frame-frame-crowned-champion {
        border: 4.5px double #ffd700 !important;
        box-shadow: 0 0 14px #ffd700, inset 0 0 6px #ff1744 !important;
        animation: framePulse 1.8s infinite ease-in-out !important;
      }

      /* Reset standard borders and shadows when a frame is equipped, so only high-fidelity SVG overlay is shown */
      .main-menu-avatar[class*="profile-frame-"],
      .profile-avatar[class*="profile-frame-"],
      .leader-avatar[class*="profile-frame-"],
      .friend-avatar[class*="profile-frame-"] {
        border: none !important;
        box-shadow: none !important;
        position: relative !important;
        overflow: visible !important;
      }

      /* Add margins to accommodate the beautiful ornate wings, laurels, and crowns without overlapping text/ranks */
      .main-menu-avatar[class*="profile-frame-"] {
        margin: 6px 18px !important;
      }

      .profile-avatar[class*="profile-frame-"] {
        margin: 16px 36px !important;
      }

      .leader-avatar[class*="profile-frame-"] {
        margin: 8px 22px !important;
      }

      .friend-avatar[class*="profile-frame-"] {
        margin: 8px 20px !important;
      }

      .profile-economy {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }

      .profile-stat-table {
        display: grid;
        gap: 6px;
      }

      .profile-stat-row {
        display: grid;
        grid-template-columns: 0.7fr repeat(4, 1fr);
        gap: 5px;
        align-items: center;
        padding: 7px;
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.58);
        font-size: 0.74rem;
      }

      .profile-stat-row strong,
      .profile-stat-row span,
      .profile-stat-header span {
        min-height: 28px;
        display: grid;
        place-items: center;
        text-align: center;
      }

      .market-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 104px;
        gap: 10px;
      }

      .market-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .market-category-menu {
        display: grid;
        align-content: start;
        gap: 6px;
        position: sticky;
        top: 0;
      }

      .market-category-menu button,
      .inventory-pages button {
        min-height: 42px;
        padding: 6px;
        font-size: 0.72rem;
      }

      .market-category-menu button.active,
      .inventory-pages button.active {
        border-color: rgba(96,165,250,0.7);
        background: rgba(37,99,235,0.35);
      }

      .market-item,
      .bag-slot {
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.72);
        padding: 8px;
        min-height: 104px;
        display: grid;
        gap: 6px;
        align-content: start;
      }

      .market-item-title,
      .bag-slot-title {
        font-weight: 950;
        font-size: 0.82rem;
      }

      .market-item-desc,
      .bag-slot-desc {
        color: var(--muted);
        font-size: 0.68rem;
        line-height: 1.25;
      }

      .inventory-grid {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 6px;
      }

      .bag-slot {
        min-height: 74px;
        padding: 6px;
      }

      .bag-slot.empty {
        opacity: 0.55;
      }

      .inventory-pages {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }

      .friends-screen {
        gap: 10px;
        max-height: calc(100dvh - 42px);
        overflow: auto;
      }

      #friendsBody {
        display: block;
      }

      /* Landscape Friends Layout Overhaul */
      .friends-landscape-layout {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 16px;
        width: 100%;
        align-items: stretch;
      }

      .friends-left-panel,
      .friends-right-panel {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 0;
      }

      .friends-list-section {
        display: flex;
        flex-direction: column;
        height: 100%;
        flex: 1 1 auto;
      }

      .scrollable-friend-list {
        flex: 1 1 auto;
        min-height: 140px;
        max-height: none;
        overflow-y: auto;
        scrollbar-width: thin;
        padding-right: 4px;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
      }



      /* Compact Buttons inside Friends Layout */
      .friends-landscape-layout .friend-actions button {
        padding: 6px 10px !important;
        font-size: 11px !important;
        height: 30px !important;
      }

      /* Responsiveness: Stack on narrow screens (Portrait mobile) */
      @media (max-width: 720px) {
        .friends-landscape-layout {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .scrollable-friend-list {
          max-height: none !important;
        }
      }

      .friend-section {
        display: grid;
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.72);
      }

      .friend-section h3 {
        margin: 0;
        font-size: 0.92rem;
      }

      .friend-code-row,
      .friend-add-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
      }

      .friend-code {
        min-height: 42px;
        border-radius: 8px;
        border: 1px solid rgba(96,165,250,0.28);
        background: rgba(2, 6, 23, 0.54);
        display: grid;
        place-items: center;
        font-size: 1.05rem;
        font-weight: 950;
        letter-spacing: 1px;
      }

      .friend-list {
        display: grid;
        gap: 7px;
      }

      .friend-pill {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 54px;
        padding: 7px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(8, 17, 31, 0.74);
      }

      .friend-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #2563eb, #16a34a);
        background-size: cover;
        background-position: center;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 950;
        border: 2px solid rgba(255,255,255,0.25);
        flex: 0 0 auto;
      }

      .friend-info {
        min-width: 0;
      }

      .friend-name {
        font-weight: 950;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .friend-status {
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 800;
      }

      .friend-status.online {
        color: #86efac;
      }

      .friend-actions {
        display: flex;
        gap: 5px;
      }

      .friend-actions button {
        min-height: 36px;
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 0.68rem;
        white-space: nowrap;
      }

      .team-lobby-friends-panel {
        display: grid;
        gap: 8px;
        padding: 10px;
        border-radius: 8px;
        background: rgba(32, 37, 44, 0.92);
        border: 1px solid rgba(255,255,255,0.1);
      }

      .team-lobby-friends-panel.hidden {
        display: none;
      }

      .team-lobby-friends-panel h3 {
        margin: 0;
        font-size: 0.9rem;
      }

      .lobby-friend-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
      }

      .lobby-friend-strip .friend-pill {
        border-radius: 12px;
        grid-template-columns: auto minmax(0, 1fr) auto;
      }

      .lobby-friend-strip .friend-in-room-badge {
        font-size: 0.72rem;
        font-weight: 900;
        color: #10b981;
        text-shadow: 0 0 8px rgba(16,185,129,0.45);
        background: rgba(16,185,129,0.12);
        border: 1px solid rgba(16,185,129,0.32);
        padding: 5px 10px;
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .lobby-friend-strip button.invited {
        background: rgba(255,255,255,0.06) !important;
        border-color: rgba(255,255,255,0.15) !important;
        color: rgba(255,255,255,0.45) !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
        box-shadow: none !important;
      }

      .friend-invite-toast {
        position: fixed;
        left: 50%;
        bottom: max(16px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 40;
        width: min(420px, calc(100vw - 24px));
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(15, 23, 42, 0.98);
        box-shadow: 0 18px 48px rgba(0,0,0,0.42);
        padding: 10px;
      }

      .friend-invite-toast.hidden {
        display: none;
      }

      .friend-invite-toast .friend-pill {
        border-radius: 10px;
        background: transparent;
        border: 0;
        padding: 0;
      }

      @media (max-width: 720px) {
        .menu-icon-grid {
          grid-template-columns: 1fr 1fr;
        }

        .menu-icon-btn {
          min-height: 68px;
        }

        .market-layout {
          grid-template-columns: minmax(0, 1fr) 84px;
        }

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

        .inventory-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .friend-code-row,
        .friend-add-row {
          grid-template-columns: 1fr;
        }

        .friend-pill {
          border-radius: 12px;
          grid-template-columns: auto minmax(0, 1fr);
        }

        .friend-actions {
          grid-column: 1 / -1;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      /* 1.1 hotfix: keep lobby actions and flow subpages usable on mobile. */
      #flow > .profile-screen,
      #flow > .market-screen,
      #flow > .inventory-screen {
        width: min(96vw, 760px) !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
      }

      #profileScreenBody,
      #marketBody,
      #inventoryBody {
        min-height: 120px;
        display: grid;
        gap: 10px;
      }

      body:not([data-screen="game"]) .app,
      body:not([data-screen="game"]) .mobile-nav,
      body:not([data-screen="game"]) .mobile-nav-right {
        display: none !important;
      }

      body[data-screen="game"] {
        overflow: hidden;
        background: #071322;
        --game-safe-left: max(0px, min(10px, env(safe-area-inset-left)));
        --game-safe-right: max(4px, min(14px, env(safe-area-inset-right)));
        --game-right-rail: clamp(62px, 5.6vw, 76px);
        --game-nav-width: clamp(46px, 4.8vw, 56px);
        --mobile-left-rail: 0px;
        --mobile-right-rail: calc(var(--game-right-rail) + var(--game-safe-right));
      }

      body[data-screen="game"] .top,
      body[data-screen="game"] .side {
        display: none !important;
      }

        body[data-screen="game"] .app {
          width: 100%;
          height: var(--app-vh);
          padding: 0;
          overflow: hidden;
        }

        body[data-screen="game"] .layout {
          display: grid;
          grid-template-columns: 1fr !important;
          height: var(--app-vh);
          gap: 0;
        }

        body[data-screen="game"] .field-card {
          grid-column: 1 / -1;
          height: var(--app-vh);
          border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
      }

      body[data-screen="game"] .canvas-wrap,
      body[data-screen="game"] canvas {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
      }

      body[data-screen="game"] .mobile-nav-right {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 50%;
        z-index: 10;
        width: var(--game-nav-width);
        padding: 4px 0;
        background: rgba(2, 6, 23, 0.62);
        border: 1px solid rgba(255,255,255,0.11);
        border-radius: 14px;
        gap: 2px;
        box-shadow: 0 8px 22px rgba(0,0,0,0.34);
      }

      body[data-screen="game"] .mobile-nav {
        display: none !important;
      }

      body[data-screen="game"] .mobile-nav-right {
        right: var(--game-safe-right);
        transform: translateY(-50%);
      }

      body[data-screen="game"] .mobile-nav-right button {
        width: calc(var(--game-nav-width) - 8px);
        height: clamp(34px, 7.8vh, 42px);
        min-height: 34px;
        border-radius: 10px;
        font-size: 0.5rem;
        font-weight: 850;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        background: transparent;
        color: #94a3b8;
        border: 0;
        padding: 1px;
      }

      body[data-screen="game"] .mobile-nav-right .nav-icon {
        width: 16px;
        height: 16px;
      }

      body[data-screen="game"] .field-head {
        position: fixed;
        left: calc((100vw - var(--game-right-rail) - var(--game-safe-right)) / 2);
        top: 2px;
        transform: translateX(-50%) translateX(var(--field-x-offset, 0px));
        transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 12;
        border: 0;
        padding: 0;
        background: transparent;
        pointer-events: none;
      }

      body[data-screen="game"] .hud {
        left: calc(var(--game-safe-left) + 10px);
      }

      body[data-screen="game"] .ping-badge {
        left: calc(var(--game-safe-left) + 10px);
      }

      .main-menu-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 12px;
        background:
          radial-gradient(circle at 20% 0%, rgba(96, 165, 250, 0.16), transparent 36%),
          rgba(15, 23, 42, 0.72);
        padding: 8px;
        color: #dbeafe;
        font-size: 0.72rem;
        font-weight: 950;
      }

      .menu-stats-social-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 32px;
        border: 1px solid rgba(6, 182, 212, 0.3);
        border-radius: 9px;
        background: rgba(6, 182, 212, 0.12);
        color: #22d3ee;
        font-size: 0.72rem;
        font-weight: 950;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        text-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
      }

      .menu-stats-social-btn:hover {
        background: rgba(6, 182, 212, 0.22);
        border-color: rgba(6, 182, 212, 0.5);
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
      }

      .menu-stats-info-chip {
        cursor: pointer;
      }

      .main-menu-stats > span:not(.menu-stats-social-btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 32px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 9px;
        background: rgba(2, 6, 23, 0.28);
        white-space: nowrap;
      }

      .inventory-summary {
        display: grid;
        gap: 8px;
      }

      .inventory-section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        color: #f8fafc;
        font-size: 0.86rem;
        font-weight: 950;
      }

      .inventory-card-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
        gap: 8px;
      }

      .inventory-owned-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
        gap: 8px;
      }

      .inventory-owned-card {
        min-height: 116px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(30,41,59,0.82), rgba(15,23,42,0.92));
        padding: 8px;
        display: grid;
        gap: 6px;
        align-content: start;
      }

      .inventory-owned-card .market-visual {
        min-height: 44px;
        max-height: 54px;
      }

      .inventory-owned-card button {
        min-height: 34px;
        font-size: 0.72rem;
        padding: 6px 8px;
      }

      .inventory-empty-slots {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 4px;
        opacity: 0.72;
      }

      .inventory-empty-slot {
        min-height: 22px;
        border: 1px dashed rgba(148, 163, 184, 0.2);
        border-radius: 6px;
        background: rgba(15, 23, 42, 0.38);
      }

      @media (max-width: 560px) {
        .inventory-card-row,
        .inventory-owned-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .inventory-empty-slots {
          grid-template-columns: repeat(6, minmax(0, 1fr));
        }
      }

      .screen-loading,
      .screen-empty-state {
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.72);
        padding: 14px;
        color: var(--muted);
        font-weight: 800;
        text-align: center;
      }

      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        .team-lobby-overlay.show {
          display: flex !important;
          align-items: stretch !important;
          justify-content: center !important;
          padding: max(6px, env(safe-area-inset-top)) max(42px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(42px, env(safe-area-inset-left)) !important;
          overflow: hidden !important;
        }

        .team-lobby-card {
          width: min(94vw, 980px) !important;
          height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
          max-height: none !important;
          display: flex !important;
          flex-direction: column !important;
          overflow-y: auto !important;
          overscroll-behavior: contain !important;
          padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
          gap: 7px !important;
        }

        .team-lobby-head,
        .team-lobby-grid,
        .team-lobby-ai-panel,
        .team-lobby-settings-panel,
        .team-lobby-friends-panel {
          flex: 0 0 auto !important;
        }

        .team-lobby-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
          gap: 6px !important;
        }

        .team-column {
          grid-template-rows: 30px auto !important;
        }

        .team-list {
          overflow: visible !important;
          max-height: none !important;
        }

        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          position: sticky !important;
          bottom: 0 !important;
          z-index: 5 !important;
          flex: 0 0 auto !important;
          display: grid !important;
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
          gap: 6px !important;
          padding: 7px 0 max(8px, env(safe-area-inset-bottom)) !important;
          margin-top: 2px !important;
          background: linear-gradient(180deg, rgba(20,24,29,0.84), rgba(20,24,29,0.98) 42%) !important;
          box-shadow: 0 -10px 22px rgba(0,0,0,0.24) !important;
        }

        .team-lobby-actions button {
          min-height: 42px !important;
          height: 42px !important;
          padding: 4px 6px !important;
          font-size: clamp(0.54rem, 1.35vw, 0.74rem) !important;
          line-height: 1.05 !important;
          white-space: normal !important;
        }

        .lobby-friend-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }

      @media (max-width: 560px) {
        .team-lobby-overlay.show {
          padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        }

        .team-lobby-card {
          width: calc(100vw - 16px) !important;
          height: calc(100dvh - 16px) !important;
        }

        .team-lobby-grid {
          grid-template-columns: 1fr !important;
        }

        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .lobby-friend-strip {
          grid-template-columns: 1fr !important;
        }
      }

      /* Main menu mobile fit hotfix: logo removed, controls fit landscape screens. */
      #screenMainMenu {
        width: min(720px, calc(100vw - 112px)) !important;
        max-height: calc(100dvh - 16px) !important;
        overflow-y: auto !important;
        padding: 12px !important;
      }

      #screenMainMenu .main-menu-logo {
        display: none !important;
      }

      #screenMainMenu .main-menu-grid {
        gap: 8px !important;
      }

      #screenMainMenu .main-menu-accountbar {
        gap: 6px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
      }

      #screenMainMenu .main-menu-account {
        min-height: 44px !important;
        padding: 5px 7px !important;
        min-width: 120px !important;
        flex: 1.1 !important;
      }

      #screenMainMenu .main-menu-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
      }

      #screenMainMenu .main-menu-player-name {
        font-size: 0.8rem !important;
      }

      #screenMainMenu .main-menu-player-status {
        font-size: 0.6rem !important;
      }

      #screenMainMenu .main-menu-vip-level-card {
        min-width: 48px !important;
        padding: 5px 6px !important;
        min-height: 44px !important;
        flex: 0 0 auto !important;
      }

      #screenMainMenu .main-menu-wallet {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        min-width: 132px !important;
        flex: 1.1 !important;
      }

      #screenMainMenu .main-menu-energy {
        min-height: 44px !important;
        padding: 5px 7px !important;
        gap: 3px !important;
        display: grid;
        flex: 1.6 !important;
        min-width: 170px !important;
      }

      #screenMainMenu .energy-segments {
        min-height: 7px !important;
        gap: 1.5px !important;
      }

      #screenMainMenu .energy-segment {
        height: 7px !important;
      }

      #screenMainMenu .energy-foot {
        font-size: 0.52rem !important;
      }

      #screenMainMenu .energy-foot button {
        min-height: 20px !important;
        padding: 2px 4px !important;
        font-size: 0.52rem !important;
      }

      #screenMainMenu .wallet-chip {
        min-height: 44px !important;
        padding: 5px 7px !important;
        display: grid !important;
        place-items: center !important;
        align-content: center !important;
      }

      #screenMainMenu .wallet-chip span {
        font-size: 0.58rem !important;
        margin-bottom: 0 !important;
      }

      #screenMainMenu .wallet-chip strong {
        font-size: 1rem !important;
        line-height: 1 !important;
      }

      #screenMainMenu .menu-hero-btn {
        min-height: 58px !important;
        border-radius: 9px !important;
        font-size: 1.08rem !important;
        letter-spacing: 0 !important;
      }

      #screenMainMenu .menu-icon-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 7px !important;
      }

      #screenMainMenu .menu-icon-btn.wide-menu-btn {
        grid-column: span 2 !important;
      }

      #screenMainMenu .menu-icon-btn {
        min-height: 58px !important;
        border-radius: 8px !important;
        padding: 6px 5px !important;
        font-size: 0.7rem !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        gap: 3px !important;
      }

      #screenMainMenu .menu-icon-btn .menu-icon {
        display: inline-flex !important;
        width: 18px !important;
        height: 18px !important;
      }

      @media (max-height: 480px), (orientation: landscape) and (max-width: 980px) {
        #screenMainMenu {
          width: min(700px, calc(100vw - 116px)) !important;
          padding: 10px !important;
        }

        #screenMainMenu .main-menu-grid {
          gap: 7px !important;
        }

        #screenMainMenu .wallet-chip {
          min-height: 40px !important;
          padding: 4px 6px !important;
        }

        #screenMainMenu .main-menu-avatar {
          width: 32px !important;
          height: 32px !important;
        }

        #screenMainMenu .main-menu-player-status {
          display: block !important;
          font-size: 0.56rem !important;
          line-height: 1.05 !important;
        }

        #screenMainMenu .menu-hero-btn {
          min-height: 54px !important;
          font-size: 1rem !important;
        }

        #screenMainMenu .menu-icon-grid {
          gap: 6px !important;
        }

        #screenMainMenu .menu-icon-btn {
          min-height: 56px !important;
          font-size: 0.62rem !important;
          padding: 5px 4px !important;
          gap: 2px !important;
        }

        #screenMainMenu .menu-icon-btn .menu-icon {
          width: 17px !important;
          height: 17px !important;
        }
      }

      @media (max-width: 560px) {
        #screenMainMenu {
          width: calc(100vw - 20px) !important;
          max-height: calc(100dvh - 20px) !important;
        }

        #screenMainMenu .menu-icon-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        #screenMainMenu .menu-icon-btn.wide-menu-btn {
          grid-column: span 2 !important;
        }

        #screenMainMenu .main-menu-accountbar {
          grid-template-columns: 1fr !important;
        }

        #screenMainMenu .main-menu-wallet {
          min-width: 0 !important;
        }

        #screenMainMenu .menu-icon-btn {
          min-height: 62px !important;
          font-size: 0.76rem !important;
        }

        #screenMainMenu .menu-icon-btn .menu-icon {
          width: 20px !important;
          height: 20px !important;
        }
      }

      .team-lobby-overlay.host .team-lobby-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      }

      @media (max-width: 920px), (max-height: 560px), (hover: none) and (pointer: coarse) {
        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        }

        .team-lobby-settings-panel {
          padding: 8px !important;
        }

        .team-lobby-popup {
          inset: max(8px, env(safe-area-inset-top)) max(44px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left)) !important;
          padding: 4px !important;
        }

        .team-lobby-popup-card {
          width: min(94vw, 680px) !important;
          max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
          padding: 8px !important;
          gap: 8px !important;
        }

        .room-settings-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 7px !important;
        }

        .room-settings-choice-grid button {
          min-height: 30px !important;
          font-size: 0.62rem !important;
          padding: 4px 5px !important;
        }
      }

      @media (max-width: 560px) {
        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .room-settings-grid {
          grid-template-columns: 1fr !important;
        }

        .team-lobby-popup {
          inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        }
      }

      /* === SahaX Mobile-First UI Refactor 2026-05-30 === */
      :root {
        --sx-bg: #07111f;
        --sx-surface: rgba(11, 18, 34, 0.92);
        --sx-surface-2: rgba(17, 27, 48, 0.92);
        --sx-surface-3: rgba(28, 42, 68, 0.9);
        --sx-line: rgba(148, 163, 184, 0.22);
        --sx-line-strong: rgba(125, 211, 252, 0.34);
        --sx-text: #f8fafc;
        --sx-muted: #aebbd0;
        --sx-blue: #4f7cff;
        --sx-blue-2: #1d4ed8;
        --sx-cyan: #22d3ee;
        --sx-green: #58d26b;
        --sx-yellow: #f5d547;
        --sx-red: #fb7185;
        --sx-purple: #a78bfa;
        --sx-radius-xs: 8px;
        --sx-radius-sm: 10px;
        --sx-radius-md: 12px;
        --sx-radius-lg: 16px;
        --sx-gap: clamp(7px, 1.4vh, 12px);
        --sx-touch: clamp(42px, 9vh, 58px);
        --sx-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
        --sx-glow-blue: 0 0 0 1px rgba(96, 165, 250, 0.2), 0 0 22px rgba(37, 99, 235, 0.24);
        --sx-glow-green: 0 0 0 1px rgba(74, 222, 128, 0.18), 0 0 22px rgba(34, 197, 94, 0.18);
      }

      html,
      body {
        background:
          radial-gradient(circle at 22% 12%, rgba(34, 197, 94, 0.14), transparent 30%),
          radial-gradient(circle at 78% 88%, rgba(34, 211, 238, 0.11), transparent 32%),
          var(--sx-bg) !important;
      }

      #flow {
        background:
          linear-gradient(180deg, rgba(2, 8, 23, 0.34), rgba(2, 8, 23, 0.76)),
          radial-gradient(circle at center, rgba(22, 163, 74, 0.15), transparent 48%) !important;
        padding:
          max(10px, env(safe-area-inset-top))
          max(10px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(10px, env(safe-area-inset-left)) !important;
      }

      .flow-card,
      .team-lobby-card,
      .team-lobby-popup-card,
      .confirm-card,
      .match-end-card,
      .mobile-popup-card,
      .friend-invite-toast {
        background:
          linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(13, 24, 44, 0.94)),
          radial-gradient(circle at top left, rgba(96, 165, 250, 0.14), transparent 36%) !important;
        border: 1px solid var(--sx-line) !important;
        border-radius: var(--sx-radius-lg) !important;
        box-shadow: var(--sx-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        color: var(--sx-text) !important;
      }

      .flow-card {
        width: min(980px, calc(var(--app-vw) - 24px)) !important;
        max-height: calc(var(--app-vh) - 22px) !important;
        padding: clamp(12px, 2.8vh, 22px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin;
      }

      .flow-card h2,
      .team-lobby-head h2,
      .team-lobby-popup-head h3 {
        letter-spacing: 0 !important;
        color: #f8fafc !important;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
      }

      .flow-card p,
      .mini,
      .team-lobby-meta {
        color: var(--sx-muted) !important;
      }

      #flow button,
      .team-lobby-overlay button,
      .mobile-popup button,
      .confirm-modal button,
      .match-end-panel button,
      .friend-invite-toast button {
        min-height: var(--sx-touch) !important;
        border-radius: var(--sx-radius-sm) !important;
        border: 1px solid rgba(148, 163, 184, 0.24) !important;
        background: linear-gradient(180deg, rgba(35, 48, 75, 0.98), rgba(20, 30, 50, 0.98)) !important;
        color: var(--sx-text) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.14) !important;
        font-weight: 850 !important;
        letter-spacing: 0 !important;
        touch-action: manipulation;
      }

      #flow button:hover,
      .team-lobby-overlay button:hover,
      .mobile-popup button:hover,
      .confirm-modal button:hover {
        border-color: var(--sx-line-strong) !important;
      }

      #flow button:active,
      .team-lobby-overlay button:active,
      .mobile-popup button:active,
      .confirm-modal button:active {
        transform: translateY(1px) scale(0.99);
        filter: brightness(1.08);
      }

      #flow button:disabled,
      .team-lobby-overlay button:disabled,
      .mobile-popup button:disabled {
        opacity: 0.48 !important;
        filter: saturate(0.7);
      }

      #flow .blue-btn,
      #flow .menu-hero-btn,
      #playSetupStartButton,
      #teamLobbyStartButton.blue-btn,
      .confirm-modal .blue-btn {
        border-color: rgba(147, 197, 253, 0.42) !important;
        background: linear-gradient(135deg, #4f7cff, #2745d8 58%, #1e40af) !important;
        color: #fff !important;
        box-shadow: var(--sx-glow-blue) !important;
      }

      #flow .yellow-btn {
        border-color: rgba(250, 204, 21, 0.42) !important;
        background: linear-gradient(135deg, #f7d84a, #b98905) !important;
        color: #172033 !important;
      }

      #flow .danger,
      #flow .danger-btn,
      .team-lobby-overlay .danger,
      .team-lobby-overlay .danger-btn,
      .confirm-modal .danger {
        border-color: rgba(251, 113, 133, 0.42) !important;
        background: linear-gradient(135deg, #fb7185, #be123c) !important;
        color: #fff !important;
      }

      #flow .ready,
      #teamLobbyReadyButton,
      #readyButton,
      #readyMobileButton {
        border-color: rgba(74, 222, 128, 0.34) !important;
        background: linear-gradient(135deg, rgba(22, 163, 74, 0.96), rgba(21, 128, 61, 0.96)) !important;
        color: #ecfdf5 !important;
        box-shadow: var(--sx-glow-green) !important;
      }

      input,
      select,
      textarea {
        border: 1px solid rgba(148, 163, 184, 0.22) !important;
        background: rgba(7, 15, 29, 0.78) !important;
        color: var(--sx-text) !important;
        border-radius: var(--sx-radius-sm) !important;
        min-height: 42px;
      }

      input:focus,
      select:focus,
      textarea:focus {
        outline: 2px solid rgba(34, 211, 238, 0.32);
        border-color: rgba(34, 211, 238, 0.56) !important;
      }

      .auth-tabs,
      .mode-tabs,
      .leaderboard-filters,
      .inventory-pages,
      .play-option-grid,
      .room-settings-choice-grid,
      .ai-bot-choice-grid {
        gap: var(--sx-gap) !important;
      }

      .auth-tabs button,
      .tab-button,
      .play-choice,
      .room-settings-choice-grid button,
      .ai-bot-choice-grid button,
      .inventory-pages button {
        min-height: clamp(38px, 8vh, 52px) !important;
        border-radius: var(--sx-radius-sm) !important;
      }

      .auth-tabs button.active,
      .play-choice.active,
      .inventory-pages button.active,
      .room-settings-choice-grid button.active,
      .ai-bot-choice-grid button.active {
        border-color: rgba(34, 211, 238, 0.62) !important;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.96), rgba(14, 165, 233, 0.84)) !important;
        color: #fff !important;
      }

      #screenMainMenu {
        width: min(940px, calc(var(--app-vw) - 26px)) !important;
      }

      #screenMainMenu .main-menu-grid {
        display: grid !important;
        gap: var(--sx-gap) !important;
      }

      #screenMainMenu .main-menu-accountbar {
        grid-template-columns: minmax(174px, 0.95fr) minmax(280px, 1.4fr) minmax(164px, 0.72fr) !important;
        gap: var(--sx-gap) !important;
      }

      #screenMainMenu .main-menu-account,
      #screenMainMenu .main-menu-energy,
      #screenMainMenu .wallet-chip,
      .main-menu-stats > span:not(.menu-stats-social-btn) {
        background: linear-gradient(180deg, rgba(20, 30, 50, 0.96), rgba(13, 24, 44, 0.96)) !important;
        border: 1px solid rgba(148, 163, 184, 0.22) !important;
        border-radius: var(--sx-radius-md) !important;
      }

      #screenMainMenu .main-menu-account {
        min-height: clamp(56px, 11vh, 72px) !important;
      }

      #screenMainMenu .main-menu-avatar {
        width: clamp(40px, 9vh, 52px) !important;
        height: clamp(40px, 9vh, 52px) !important;
        border: 2px solid rgba(125, 211, 252, 0.62);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.2);
      }

      #screenMainMenu .main-menu-player-name {
        font-size: clamp(0.9rem, 2.8vh, 1.15rem) !important;
      }

      #screenMainMenu .menu-hero-btn {
        min-height: clamp(62px, 13vh, 86px) !important;
        border-radius: var(--sx-radius-md) !important;
        font-size: clamp(1.2rem, 4.6vh, 2rem) !important;
      }

      #screenMainMenu .menu-icon-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: var(--sx-gap) !important;
      }

      #screenMainMenu .menu-icon-btn {
        min-height: clamp(58px, 12vh, 82px) !important;
        gap: 6px !important;
        font-size: clamp(0.72rem, 2.4vh, 0.95rem) !important;
        line-height: 1.12 !important;
      }

      #screenMainMenu .menu-icon-btn.wide-menu-btn {
        grid-column: span 2 !important;
      }

      #screenMainMenu .main-menu-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--sx-gap) !important;
      }

      #screenMainMenu .main-menu-stats > span:not(.menu-stats-social-btn) {
        min-height: 44px !important;
        display: grid !important;
        place-items: center !important;
        font-weight: 850 !important;
        color: #dbeafe !important;
      }

      #screenMainMenu .main-menu-stats .menu-stats-social-btn {
        min-height: 44px !important;
        display: grid !important;
        place-items: center !important;
        font-weight: 850 !important;
        color: #22d3ee !important;
        background: rgba(6, 182, 212, 0.12) !important;
        border: 1px solid rgba(6, 182, 212, 0.3) !important;
        border-radius: var(--sx-radius-md) !important;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        text-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
      }

      #screenMainMenu .main-menu-stats .menu-stats-info-chip {
        cursor: default;
      }
      
      #screenMainMenu .main-menu-stats .menu-stats-social-btn:hover {
        background: rgba(6, 182, 212, 0.22) !important;
        border-color: rgba(6, 182, 212, 0.5) !important;
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.25) !important;
      }

      .play-setup-grid,
      .market-layout,
      .inventory-screen,
      .friends-screen,
      .profile-screen,
      .leaderboard-screen {
        gap: var(--sx-gap) !important;
      }

      .play-section,
      .setting,
      .inventory-owned-card,
      .market-item-card,
      .friend-card,
      .leaderboard-card,
      .profile-card,
      .level-reward-card,
      .room-card,
      .section {
        background: linear-gradient(180deg, rgba(17, 27, 48, 0.9), rgba(11, 18, 34, 0.9)) !important;
        border: 1px solid rgba(148, 163, 184, 0.18) !important;
        border-radius: var(--sx-radius-md) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
      }

      .inventory-grid {
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important;
        gap: var(--sx-gap) !important;
      }

      .inventory-owned-card {
        min-height: 124px !important;
        padding: 10px !important;
      }

      .market-category-tabs,
      .leaderboard-filter-row,
      .leaderboard-period-row {
        display: flex !important;
        gap: var(--sx-gap) !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none;
      }

      .market-category-tabs::-webkit-scrollbar,
      .leaderboard-filter-row::-webkit-scrollbar,
      .leaderboard-period-row::-webkit-scrollbar {
        display: none;
      }

      .profile-screen > button[data-flow-back="main"],
      .leaderboard-screen > button[data-flow-back="main"],
      .market-screen > button[data-flow-back="main"],
      .friends-screen > button[data-flow-back="main"],
      .inventory-screen > button[data-flow-back="main"] {
        width: min(420px, 100%) !important;
        margin: 10px auto 0 !important;
        display: flex !important;
        justify-content: center !important;
      }

      .screen-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 12px !important;
        margin-bottom: 16px !important;
        position: sticky !important;
        top: -20px !important;
        background: rgba(16, 24, 39, 0.98) !important;
        z-index: 100 !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
      }

      .screen-header h2 {
        margin: 0 !important;
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        background: linear-gradient(135deg, #00d2ff 0%, #00e5ff 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }

      .btn-close {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #94a3b8 !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        cursor: pointer !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        outline: none !important;
        padding: 0 !important;
        line-height: 1 !important;
      }

      .btn-close:hover {
        background: rgba(239, 68, 68, 0.2) !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
        color: #f87171 !important;
        transform: rotate(90deg) !important;
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
      }

      .btn-close:active {
        transform: rotate(90deg) scale(0.95) !important;
      }

      .settings-collapse {
        background: rgba(17, 27, 48, 0.74) !important;
        border-color: rgba(148, 163, 184, 0.18) !important;
        border-radius: var(--sx-radius-md) !important;
        overflow: hidden;
      }

      .settings-collapse summary {
        min-height: 48px !important;
        padding: 10px 12px !important;
        color: #f8fafc !important;
      }

      .team-lobby-overlay {
        background: rgba(2, 6, 23, 0.66) !important;
        backdrop-filter: blur(8px);
        padding:
          max(10px, env(safe-area-inset-top))
          max(78px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(12px, env(safe-area-inset-left)) !important;
      }

      .team-lobby-card {
        width: min(1060px, calc(var(--app-vw) - 110px)) !important;
        height: min(620px, calc(var(--app-vh) - 22px)) !important;
        max-height: calc(var(--app-vh) - 22px) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        align-content: stretch !important;
        gap: var(--sx-gap) !important;
        padding: clamp(10px, 2.2vh, 18px) !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
      }

      .team-lobby-grid {
        min-height: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
        align-items: stretch !important;
        gap: var(--sx-gap) !important;
      }

      .team-column {
        background: linear-gradient(180deg, rgba(17, 27, 48, 0.9), rgba(8, 16, 30, 0.9)) !important;
        border-radius: var(--sx-radius-md) !important;
        border-color: rgba(148, 163, 184, 0.18) !important;
        min-height: 0 !important;
        height: 100% !important;
        align-self: stretch !important;
        display: grid !important;
        grid-template-rows: minmax(30px, auto) minmax(0, 1fr) !important;
        overflow: hidden !important;
      }

      .team-list {
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
      }

      .team-lobby-actions,
      .team-lobby-overlay.host .team-lobby-actions {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
        gap: var(--sx-gap) !important;
        position: relative !important;
        bottom: auto !important;
        z-index: 2 !important;
      }

      .team-lobby-actions button {
        min-height: clamp(42px, 8.6vh, 58px) !important;
        font-size: clamp(0.62rem, 2.1vh, 0.82rem) !important;
        white-space: normal !important;
      }

      body[data-screen="game"] {
        --game-right-rail: clamp(58px, 5vw, 70px) !important;
        --game-nav-width: clamp(46px, 4.5vw, 54px) !important;
        --game-safe-right: max(3px, env(safe-area-inset-right)) !important;
      }

      body[data-screen="game"] .layout {
        grid-template-columns: 1fr !important;
      }

      body[data-screen="game"] .mobile-nav-right {
        padding: 7px 5px !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, rgba(10, 20, 40, 0.95), rgba(5, 10, 25, 0.98)) !important;
        border: 1.5px solid rgba(148, 163, 184, 0.25) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
      }

      body[data-screen="game"] .mobile-nav-right button {
        width: calc(var(--game-nav-width) - 8px) !important;
        height: clamp(36px, 8.3vh, 46px) !important;
        min-height: 36px !important;
        border-radius: 12px !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        color: #e2e8f0 !important;
        font-weight: 700 !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }

      body[data-screen="game"] .mobile-nav-right button:active {
        background: rgba(30, 41, 59, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.35) !important;
        color: #3b82f6 !important;
      }

      body[data-screen="game"] .field-head {
        top: max(3px, env(safe-area-inset-top)) !important;
      }

      .pass-request-button,
      .dribble-button,
      .radial-emoji-button,
      .speech-chat-button,
      .voice-talk-button {
        border-radius: 50% !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }

      .pass-request-button {
        box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.28), 0 12px 28px rgba(0, 0, 0, 0.22) !important;
      }

      .dribble-button {
        box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.24), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
      }

      .radial-emoji-button,
      .speech-chat-button {
        border-radius: 50% !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: grid !important;
        place-items: center !important;
        width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        font-size: 1.5rem !important;
        cursor: pointer;
        z-index: 16 !important;
        transition: transform 0.15s ease, background-color 0.15s ease;
      }
      .radial-emoji-button {
        background: radial-gradient(circle, rgba(245, 158, 11, 0.85) 0%, rgba(217, 119, 6, 0.9) 100%) !important;
        box-shadow: 0 0 12px rgba(245, 158, 11, 0.4), 0 8px 20px rgba(0,0,0,0.3) !important;
      }
      .radial-emoji-button:active {
        transform: scale(0.92) !important;
        background: radial-gradient(circle, rgba(217, 119, 6, 0.95) 0%, rgba(180, 83, 9, 1) 100%) !important;
      }
      .speech-chat-button {
        background: radial-gradient(circle, rgba(239, 68, 68, 0.85) 0%, rgba(220, 38, 38, 0.9) 100%) !important;
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.4), 0 8px 20px rgba(0,0,0,0.3) !important;
      }
      .speech-chat-button.recording {
        background: radial-gradient(circle, rgba(220, 38, 38, 0.95) 0%, rgba(185, 28, 28, 1) 100%) !important;
        border-color: #fff !important;
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.8), 0 8px 20px rgba(0,0,0,0.3) !important;
        animation: recordingPulse 1s infinite alternate;
      }
      @keyframes recordingPulse {
        from { transform: scale(1); }
        to { transform: scale(1.12); }
      }

      /* Radial Emoji Dial overlay */
      .radial-emoji-dial-overlay {
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--emoji-dial-size, 200px);
        height: var(--emoji-dial-size, 200px);
        margin-left: calc(var(--emoji-dial-size, 200px) / -2);
        margin-top: calc(var(--emoji-dial-size, 200px) / -2);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(15, 23, 42, 0.96) 30%, rgba(8, 12, 24, 0.98) 100%);
        border: 4px solid rgba(245, 158, 11, 0.6);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 15px rgba(255,255,255,0.05);
        z-index: 9999;
        display: none;
        pointer-events: none;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.15s ease, transform 0.15s ease;
      }
      .radial-emoji-dial-overlay.show,
      .radial-emoji-dial-overlay.active {
        display: block;
        opacity: 1;
        transform: scale(1);
      }
      .radial-emoji-dial-center {
        position: absolute;
        left: 50%;
        top: 50%;
        width: calc(var(--emoji-dial-size, 200px) * 0.32);
        height: calc(var(--emoji-dial-size, 200px) * 0.32);
        margin-left: calc(var(--emoji-dial-size, 200px) * -0.16);
        margin-top: calc(var(--emoji-dial-size, 200px) * -0.16);
        background: #080d19;
        border-radius: 50%;
        border: 2px solid rgba(245, 158, 11, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        z-index: 3;
      }
      .radial-emoji-dial-center-icon {
        font-size: calc(var(--emoji-dial-size, 200px) * 0.011rem);
        animation: centerIconPop 0.15s ease-out;
      }
      @keyframes centerIconPop {
        0% { transform: scale(0.6); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
      }
      .radial-emoji-segment {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
      }
      .radial-emoji-segment-inner {
        position: absolute;
        left: 50%;
        top: calc(var(--emoji-dial-size, 200px) * 0.04);
        width: calc(var(--emoji-dial-size, 200px) * 0.24);
        height: calc(var(--emoji-dial-size, 200px) * 0.24);
        margin-left: calc(var(--emoji-dial-size, 200px) * -0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(var(--emoji-dial-size, 200px) * 0.011rem);
        border-radius: 50%;
        transition: transform 0.15s ease, background 0.15s ease;
      }
      .radial-emoji-segment.selected .radial-emoji-segment-inner {
        background: rgba(245, 158, 11, 0.24);
        border: 2px solid rgba(245, 158, 11, 0.8);
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
        transform: scale(1.22);
      }
      .radial-emoji-dial-indicator {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: calc(var(--emoji-dial-size, 200px) / 2 - 10px);
        margin-left: -2px;
        margin-top: calc(var(--emoji-dial-size, 200px) / -2 + 10px);
        background: linear-gradient(to top, transparent, rgba(245, 158, 11, 0.85));
        transform-origin: bottom center;
        pointer-events: none;
        z-index: 2;
        display: none;
      }
      .radial-emoji-dial-indicator.show,
      .radial-emoji-dial-indicator.active {
        display: block;
      }

      .mobile-popup.show,
      .confirm-modal:not(.hidden),
      .match-end-panel.show {
        backdrop-filter: blur(8px);
      }

      @media (max-height: 480px), (orientation: landscape) and (max-width: 980px), (hover: none) and (pointer: coarse) {
        .flow-card {
          width: min(920px, calc(var(--app-vw) - 96px)) !important;
          max-height: calc(var(--app-vh) - 14px) !important;
          padding: 10px !important;
        }

        #screenMainMenu {
          width: min(900px, calc(var(--app-vw) - 96px)) !important;
          padding: 10px !important;
        }

        #screenMainMenu .main-menu-accountbar {
          grid-template-columns: minmax(160px, 0.9fr) minmax(260px, 1.35fr) minmax(150px, 0.72fr) !important;
        }

        #screenMainMenu .main-menu-account,
        #screenMainMenu .main-menu-energy,
        #screenMainMenu .wallet-chip {
          min-height: 48px !important;
        }

        #screenMainMenu .menu-hero-btn {
          min-height: 58px !important;
        }

        #screenMainMenu .menu-icon-btn {
          min-height: 58px !important;
        }

        .team-lobby-card {
          width: min(1000px, calc(var(--app-vw) - 110px)) !important;
          padding: 10px !important;
        }

        .team-lobby-actions button {
          min-height: 40px !important;
        }
      }

      @media (max-width: 560px), (orientation: portrait) {
        .flow-card,
        #screenMainMenu {
          width: calc(var(--app-vw) - 18px) !important;
          max-height: calc(var(--app-vh) - 18px) !important;
        }

        #screenMainMenu .main-menu-accountbar {
          grid-template-columns: 1fr !important;
        }

        #screenMainMenu .menu-icon-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        .team-lobby-card {
          width: calc(var(--app-vw) - 18px) !important;
        }
      }

      /* === Final mobile game stage + movable action buttons === */
      :root {
        --sx-action-lane-w: clamp(96px, 11vw, 138px);
      }

      body[data-screen="game"] .field-card {
        overflow: visible !important;
      }

      body[data-screen="game"] .canvas-wrap {
        width: 100% !important;
        height: var(--app-vh) !important;
        overflow: hidden !important;
        border-radius: 0 !important;
      }

      body[data-screen="game"] .field-head {
        position: absolute !important;
        left: 0 !important;
        right: var(--sx-action-lane-w) !important;
        top: max(4px, env(safe-area-inset-top)) !important;
        width: auto !important;
        transform: none !important;
        z-index: 18 !important;
      }

      body[data-screen="game"] .pass-request-button,
      body[data-screen="game"] .dribble-button {
        width: clamp(56px, 7.4vw, 86px) !important;
        height: clamp(56px, 7.4vw, 86px) !important;
        left: calc(100% - (var(--sx-action-lane-w) / 2) - (clamp(56px, 7.4vw, 86px) / 2) - env(safe-area-inset-right));
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 16 !important;
        will-change: left, top;
      }

      body[data-screen="game"] .pass-request-button {
        top: 20%;
      }

      body[data-screen="game"] .dribble-button {
        top: 40%;
      }

      .action-button-edit-panel {
        position: absolute;
        left: 50%;
        bottom: max(10px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        z-index: 30;
        display: none;
        align-items: center;
        gap: 8px;
        padding: 8px;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, 0.24);
        background: rgba(8, 13, 25, 0.88);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(10px);
      }

      .action-button-edit-panel.show {
        display: flex;
      }

      .action-button-edit-panel span {
        max-width: min(42vw, 360px);
        color: #dbeafe;
        font-size: clamp(0.68rem, 1.5vw, 0.86rem);
        font-weight: 850;
        line-height: 1.25;
      }

      .action-button-edit-panel button {
        min-height: 38px;
        padding: 8px 12px;
        border-radius: 10px;
        font-size: clamp(0.66rem, 1.35vw, 0.82rem);
      }

      .field-switch-group {
        display: flex;
        gap: 4px;
        padding: 3px;
        background: rgba(15, 23, 42, 0.6);
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.15);
        margin: 0 6px;
      }

      .field-preview-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        color: #94a3b8 !important;
        font-weight: 800 !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: none !important;
      }

      .field-preview-btn:hover:not(.active) {
        background: rgba(148, 163, 184, 0.12) !important;
        color: #f8fafc !important;
      }

      .field-preview-btn.active {
        background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
        color: #080d19 !important;
        font-weight: 900 !important;
        box-shadow: 0 0 12px rgba(251, 191, 36, 0.4) !important;
        transform: scale(1.05);
      }

      body.action-button-editing .pass-request-button,
      body.action-button-editing .dribble-button,
      body.action-button-editing .radial-emoji-button,
      body.action-button-editing .speech-chat-button {
        display: grid !important;
        cursor: grab;
        outline: 3px solid rgba(34, 197, 94, 0.5);
        outline-offset: 4px;
        animation: actionEditPulse 1.15s ease-in-out infinite;
      }

      body.action-button-editing .field-head.layout-editing-active {
        pointer-events: auto !important;
        cursor: ew-resize;
      }
      body.action-button-editing .field-head.layout-editing-active * {
        pointer-events: auto !important;
      }

      body.action-button-editing .pass-request-button:active,
      body.action-button-editing .dribble-button:active,
      body.action-button-editing .radial-emoji-button:active,
      body.action-button-editing .speech-chat-button:active {
        cursor: grabbing;
      }

      /* Zoom butonu düzenleme modunda: taşınabilir göstergesi (display:flex korunur) */
      body.action-button-editing .zoom-toggle-button {
        cursor: grab;
        outline: 3px solid rgba(34, 197, 94, 0.5);
        outline-offset: 4px;
        animation: actionEditPulse 1.15s ease-in-out infinite;
      }
      body.action-button-editing .zoom-toggle-button:active {
        cursor: grabbing;
      }

      @keyframes actionEditPulse {
        0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22), 0 14px 30px rgba(0, 0, 0, 0.28); }
        50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.12), 0 14px 30px rgba(0, 0, 0, 0.28); }
      }

      .control-layout-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .control-layout-actions button {
        min-height: 44px;
      }

      .control-layout-note {
        color: var(--muted);
        font-size: 0.82rem;
        line-height: 1.35;
      }

      /* Team lobby final mobile flow: player columns first, action buttons after the roster. */
      .team-lobby-card {
        display: flex !important;
        flex-direction: column !important;
        align-content: stretch !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
      }

      .team-lobby-grid {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        align-items: stretch !important;
      }

      .team-column {
        height: auto !important;
        min-height: clamp(118px, 34vh, 270px) !important;
        align-self: stretch !important;
        grid-template-rows: minmax(30px, auto) auto !important;
        overflow: visible !important;
      }

      .team-list {
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 8px !important;
      }

      .team-lobby-actions,
      .team-lobby-overlay.host .team-lobby-actions {
        flex: 0 0 auto !important;
        position: relative !important;
        inset: auto !important;
        z-index: 1 !important;
        margin-top: clamp(8px, 1.6vh, 14px) !important;
        padding-top: clamp(8px, 1.5vh, 12px) !important;
        border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.32)) !important;
        grid-template-columns: repeat(auto-fit, minmax(106px, 1fr)) !important;
      }

      .team-lobby-actions button {
        border: 1px solid rgba(148, 163, 184, 0.24) !important;
        background: linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(30, 41, 59, 0.96)) !important;
        color: #f8fafc !important;
        transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
      }

      .team-lobby-actions button:active,
      .team-lobby-actions button.is-pressed {
        transform: translateY(1px) scale(0.985) !important;
        filter: brightness(1.18) saturate(1.12) !important;
        border-color: rgba(250, 204, 21, 0.9) !important;
        box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.18), 0 12px 22px rgba(0, 0, 0, 0.26) !important;
      }

      .team-lobby-actions .action-green,
      #teamLobbyStartButton.action-green {
        background: linear-gradient(180deg, #4ade80, #16a34a) !important;
        color: #04120a !important;
        border-color: rgba(134, 239, 172, 0.72) !important;
      }

      .team-lobby-actions .action-yellow,
      #teamLobbyStartButton.action-yellow,
      #teamLobbyReadyButton.is-ready {
        background: linear-gradient(180deg, #fde68a, #facc15) !important;
        color: #1f1300 !important;
        border-color: rgba(254, 240, 138, 0.86) !important;
        box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.16), 0 12px 26px rgba(250, 204, 21, 0.12) !important;
      }

      .team-lobby-actions .danger,
      #teamLobbyRestartButton {
        background: linear-gradient(180deg, #fb7185, #dc2626) !important;
        color: #fff !important;
        border-color: rgba(254, 202, 202, 0.55) !important;
      }

      /* Mobil yatay kilit + yesil secili UI hotfix. */
      body.orientation-blocked .app,
      body.orientation-blocked .flow,
      body.orientation-blocked .field-card,
      body.orientation-blocked .mobile-nav,
      body.orientation-blocked .mobile-nav-right,
      body.orientation-blocked .mobile-popup,
      body.orientation-blocked .team-lobby-overlay,
      body.orientation-blocked .confirm-modal,
      body.orientation-blocked .match-end-panel {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
      }

      body.orientation-blocked .rotate-overlay {
        pointer-events: auto !important;
      }

      .play-choice.selected,
      .play-choice[aria-pressed="true"],
      .play-choice[data-selected="true"],
      .room-settings-choice-grid button.selected,
      .room-settings-choice-grid button.active,
      .room-settings-choice-grid button[aria-pressed="true"],
      .room-settings-choice-grid button[data-selected="true"],
      .ai-bot-choice-grid button.selected,
      .ai-bot-choice-grid button.active,
      .ai-bot-choice-grid button[aria-pressed="true"],
      .ai-bot-choice-grid button[data-selected="true"],
      .leader-filter-group button.selected,
      .leader-filter-group button[aria-pressed="true"],
      .leader-filter-group button[data-selected="true"],
      .team-card.selected,
      .room-card-choice.selected,
      .room-card-choice[aria-pressed="true"],
      .room-card-choice[data-selected="true"],
      .filter-chip.active,
      .tab-button.active,
      .social-hub-tab.active,
      .market-category-menu button.active,
      .inventory-pages button.active {
        border-color: rgba(134, 239, 172, 0.9) !important;
        background: linear-gradient(180deg, #4ade80, #16a34a) !important;
        color: #04120a !important;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 12px 24px rgba(34, 197, 94, 0.18) !important;
      }

      .play-choice.selected::before,
      .play-choice[aria-pressed="true"]::before,
      .play-choice[data-selected="true"]::before {
        content: none !important;
        display: none !important;
      }

      #flow .menu-hero-btn.resume-match,
      #flow #resumeMatchButton {
        background: linear-gradient(135deg, #f7d84a, #b98905) !important;
        color: #172033 !important;
        border-color: rgba(250, 204, 21, 0.42) !important;
        box-shadow: 0 12px 34px rgba(250, 204, 21, 0.42) !important;
      }
      #flow .menu-hero-btn.resume-match:hover,
      #flow #resumeMatchButton:hover {
        background: linear-gradient(135deg, #fbe068, #d9a008) !important;
        box-shadow: 0 18px 48px rgba(250, 204, 21, 0.65) !important;
      }

      .profile-ranked-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      }

      .market-visual .preview-icon {
        display: grid;
        place-items: center;
        gap: 3px;
      }

      .market-visual .preview-icon .market-preview-svg {
        width: 30px;
        height: 30px;
        color: currentColor;
      }

      .market-visual .preview-icon .market-preview-svg svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
        filter: drop-shadow(0 3px 8px rgba(34, 211, 238, 0.28));
      }

      .market-visual .preview-icon small {
        font-size: 0.62rem;
        font-weight: 950;
        line-height: 1;
        letter-spacing: 0.02em;
      }

      @media (max-height: 430px) and (orientation: landscape) {
        .team-lobby-card {
          height: calc(var(--app-vh) - 18px) !important;
          max-height: calc(var(--app-vh) - 18px) !important;
        }

        .team-column {
          min-height: clamp(108px, 32vh, 210px) !important;
        }

        .team-lobby-actions,
        .team-lobby-overlay.host .team-lobby-actions {
          grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
        }

        .team-lobby-actions button {
          min-height: 40px !important;
        }
      }

      /* Premium Payment Modals & Keyframes */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }
      @keyframes scaleUp {
        from { transform: scale(0.85); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @keyframes slideDownBounce {
        0% { transform: translate(-50%, -150%) scale(0.9); }
        70% { transform: translate(-50%, -40%) scale(1.05); }
        100% { transform: translate(-50%, -50%) scale(1); }
      }

      .premium-modal-overlay {
        animation: fadeIn 0.25s ease-out;
      }
      .premium-modal-card {
        animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .purchase-btn:active, .pay-submit-btn:active {
        transform: scale(0.97) translateY(0) !important;
        filter: brightness(0.9);
      }
      .checkout-form input:focus {
        border-color: #00e5ff !important;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
      }

      /* Premium Animated Visual Previews */
      @keyframes rotateLines {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @keyframes neonHueCycle {
        0% { filter: hue-rotate(0deg); }
        100% { filter: hue-rotate(360deg); }
      }
      @keyframes pulseGold {
        0%, 100% { box-shadow: 0 0 8px #ffd700, inset 0 0 4px #ffd700; }
        50% { box-shadow: 0 0 18px #ffd700, inset 0 0 8px #ffd700; }
      }
      @keyframes expandAura {
        0% { transform: scale(0.7); opacity: 0.8; }
        100% { transform: scale(1.6); opacity: 0; }
      }
      @keyframes expandShockwave {
        0% { width: 4px; height: 4px; opacity: 1; }
        100% { width: 68px; height: 68px; opacity: 0; }
      }
      @keyframes trailNodeMove {
        0% { left: 0%; }
        50% { left: 85%; }
        100% { left: 0%; }
      }
      @keyframes floatHeart1 {
        0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
        25% { opacity: 1; }
        100% { transform: translate(-25px, -35px) scale(1.4); opacity: 0; }
      }
      @keyframes floatHeart2 {
        0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
        25% { opacity: 1; }
        100% { transform: translate(25px, -30px) scale(1.3); opacity: 0; }
      }
      @keyframes floatHeart3 {
        0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
        25% { opacity: 1; }
        100% { transform: translate(-10px, -45px) scale(1.5); opacity: 0; }
      }
      @keyframes floatHeart4 {
        0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
        25% { opacity: 1; }
        100% { transform: translate(15px, -40px) scale(1.2); opacity: 0; }
      }
      @keyframes fallConfetti {
        0% { top: -10px; transform: rotate(0deg) translateX(0); opacity: 1; }
        50% { transform: rotate(180deg) translateX(8px); }
        100% { top: 90px; transform: rotate(360deg) translateX(-4px); opacity: 0; }
      }
      @keyframes fireworkSpark1 {
        0% { transform: translate(0, 0) scale(1); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translate(-30px, -20px) scale(0.2); opacity: 0; }
      }
      @keyframes fireworkSpark2 {
        0% { transform: translate(0, 0) scale(1); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translate(30px, -20px) scale(0.2); opacity: 0; }
      }
      @keyframes fireworkSpark3 {
        0% { transform: translate(0, 0) scale(1); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translate(-15px, 25px) scale(0.2); opacity: 0; }
      }
      @keyframes fireworkSpark4 {
        0% { transform: translate(0, 0) scale(1); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translate(15px, 25px) scale(0.2); opacity: 0; }
      }
      @keyframes framePulse {
        0%, 100% { transform: scale(1); opacity: 0.95; }
        50% { transform: scale(1.05); opacity: 1; }
      }

      /* ==========================================================================
         PREMIUM LEADERBOARD & TOURNEY PODIUM ACTIONS
         ========================================================================== */

      /* Glassmorphic Leaderboard Filter Buttons */
      .leaderboard-screen .leader-filter-group {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 6px !important;
        border-radius: 12px !important;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .leaderboard-screen .leader-filter-group::-webkit-scrollbar {
        display: none;
      }
      .leaderboard-screen .leader-filter-group button {
        background: transparent !important;
        color: #94a3b8 !important;
        border: 1px solid transparent !important;
        padding: 8px 16px !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        white-space: nowrap;
        box-shadow: none !important;
      }
      .leaderboard-screen .leader-filter-group button:hover {
        background: rgba(255, 255, 255, 0.04) !important;
        color: #fff !important;
      }
      /* Active Glowing States for Filters */
      .leaderboard-screen .leader-filter-group button.selected[data-leader-filter="kind"][data-value="ranked"] {
        background: linear-gradient(135deg, #ffd700, #ff9900) !important;
        color: #0b0f19 !important;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.35) !important;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2) !important;
      }
      .leaderboard-screen .leader-filter-group button.selected[data-leader-filter="kind"][data-value="classic"] {
        background: linear-gradient(135deg, #00d2ff, #0066ff) !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.35) !important;
      }
      .leaderboard-screen .leader-filter-group button.selected[data-leader-filter="period"],
      .leaderboard-screen .leader-filter-group button.selected[data-leader-filter="mode"] {
        background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
      }

      .leaderboard-screen .leader-filter-group button.selected[data-leader-filter="layer"] {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
      }

      .leaderboard-screen .leader-filter-group button.selected[data-leader-filter="orderBy"] {
        background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
        color: #fff !important;
        box-shadow: 0 0 15px rgba(168, 85, 247, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
      }

      .leaderboard-screen .filter-separator {
        width: 1px;
        height: 18px;
        background: rgba(255, 255, 255, 0.12) !important;
        align-self: center;
        margin: 0 8px !important;
        display: inline-block;
        flex-shrink: 0;
      }

      /* Region & Location info/prompt panels */
      .leaderboard-location-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(16, 185, 129, 0.05) !important;
        border: 1px solid rgba(16, 185, 129, 0.15) !important;
        padding: 10px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        font-size: 13px !important;
        color: #e2e8f0 !important;
        box-sizing: border-box;
      }
      .leaderboard-location-info strong {
        color: #10b981 !important;
      }
      .location-refresh-btn {
        background: rgba(16, 185, 129, 0.15) !important;
        color: #10b981 !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
        padding: 4px 12px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        border-radius: 6px !important;
        cursor: pointer;
        transition: all 0.2s ease !important;
      }
      .location-refresh-btn:hover {
        background: rgba(16, 185, 129, 0.25) !important;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.25) !important;
      }

      .leaderboard-location-inline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px !important;
        color: #e2e8f0 !important;
        white-space: nowrap;
        vertical-align: middle;
      }
      .leaderboard-location-inline strong {
        color: #10b981 !important;
      }
      .leaderboard-location-inline .location-refresh-btn {
        padding: 3px 8px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
        margin-left: 4px !important;
      }
      .location-request-btn-inline {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: #fff !important;
        border: none !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
        font-weight: bold !important;
        border-radius: 6px !important;
        cursor: pointer;
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.25) !important;
        white-space: nowrap;
        transition: all 0.2s ease !important;
        display: inline-block;
        vertical-align: middle;
      }
      .location-request-btn-inline:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
      }

      .profile-mid-section {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        flex: 1 !important;
        width: 100% !important;
      }
      
      .profile-ranks-showcase {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 8px 14px !important;
        border-radius: 12px !important;
        backdrop-filter: blur(8px);
      }
      
      .profile-rank-card {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
      }
      
      .profile-rank-icon {
        font-size: 18px !important;
        filter: drop-shadow(0 0 4px rgba(255,255,255,0.1));
      }
      
      .profile-rank-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
      }
      
      .profile-rank-title {
        font-size: 10px !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        letter-spacing: 0.5px !important;
        font-weight: bold !important;
      }
      
      .profile-rank-value {
        font-size: 13px !important;
        font-weight: 850 !important;
        color: #facc15 !important;
        text-shadow: 0 0 8px rgba(250, 204, 21, 0.25) !important;
      }
      
      .leaderboard-location-prompt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px dashed rgba(255, 255, 255, 0.1) !important;
        padding: 16px 20px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        text-align: center;
        color: #94a3b8 !important;
        box-sizing: border-box;
      }
      .leaderboard-location-prompt p {
        margin: 0 !important;
        font-size: 13px !important;
      }
      .location-request-btn {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: #fff !important;
        border: none !important;
        padding: 8px 18px !important;
        font-size: 13px !important;
        font-weight: bold !important;
        border-radius: 8px !important;
        cursor: pointer;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
        transition: all 0.2s ease !important;
      }
      .location-request-btn:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
      }

      /* Premium Landscape 3D Tournament Podium Layout */
      .leaderboard-podium {
        display: grid;
        grid-template-columns: 1fr 1.15fr 1fr;
        align-items: flex-end;
        gap: 16px;
        margin: 20px 0 24px 0;
        perspective: 1000px;
      }
      
      .podium-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        transition: transform 0.3s;
      }
      .podium-column:hover {
        transform: translateY(-5px) scale(1.02);
      }
      
      .podium-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 17, 31, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 20px 14px 16px 14px;
        backdrop-filter: blur(16px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        position: relative;
      }
      
      /* 1st Place Podium (Crown / Gold) */
      .podium-column.first .podium-card {
        border-color: rgba(255, 215, 0, 0.4);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.5);
        background: linear-gradient(180deg, rgba(255, 215, 0, 0.05) 0%, rgba(8, 17, 31, 0.95) 100%);
        padding-top: 26px;
      }
      .podium-column.first .podium-avatar-wrapper {
        border: 4px solid #ffd700;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
      }
      .podium-column.first .podium-rank-badge {
        background: linear-gradient(135deg, #ffd700, #ffaa00);
        color: #000;
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
      }
      
      /* 2nd Place Podium (Silver) */
      .podium-column.second .podium-card {
        border-color: rgba(148, 163, 184, 0.4);
        box-shadow: 0 0 20px rgba(148, 163, 184, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5);
        background: linear-gradient(180deg, rgba(148, 163, 184, 0.03) 0%, rgba(8, 17, 31, 0.95) 100%);
      }
      .podium-column.second .podium-avatar-wrapper {
        border: 3.5px solid #cbd5e1;
        box-shadow: 0 0 12px rgba(148, 163, 184, 0.3);
      }
      .podium-column.second .podium-rank-badge {
        background: linear-gradient(135deg, #e2e8f0, #94a3b8);
        color: #0f172a;
        box-shadow: 0 0 8px rgba(148, 163, 184, 0.4);
      }
      
      /* 3rd Place Podium (Bronze) */
      .podium-column.third .podium-card {
        border-color: rgba(205, 127, 50, 0.4);
        box-shadow: 0 0 15px rgba(205, 127, 50, 0.08), 0 10px 30px rgba(0, 0, 0, 0.5);
        background: linear-gradient(180deg, rgba(205, 127, 50, 0.02) 0%, rgba(8, 17, 31, 0.95) 100%);
      }
      .podium-column.third .podium-avatar-wrapper {
        border: 3px solid #cd7f32;
        box-shadow: 0 0 10px rgba(205, 127, 50, 0.25);
      }
      .podium-column.third .podium-rank-badge {
        background: linear-gradient(135deg, #f59e0b, #b45309);
        color: #fff;
        box-shadow: 0 0 8px rgba(205, 127, 50, 0.3);
      }
      
      .podium-avatar-wrapper {
        position: relative;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 12px;
      }
      .podium-avatar-wrapper .podium-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        display: grid;
        place-items: center;
        font-weight: 950;
        font-size: 20px;
      }
      
      .podium-crown {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 24px;
        animation: crownPulse 2s infinite ease-in-out;
        z-index: 15 !important;
      }

      /* Esports-Grade Crown Themes using advanced CSS Filters */
      .podium-crown.rank-1 {
        filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.65)) !important;
      }
      .podium-crown.rank-2 {
        filter: grayscale(100%) brightness(1.25) contrast(1.1) drop-shadow(0 2px 8px rgba(255, 255, 255, 0.5)) !important;
      }
      .podium-crown.rank-3 {
        filter: sepia(1) saturate(1.8) hue-rotate(-25deg) brightness(0.7) contrast(1.15) drop-shadow(0 2px 8px rgba(205, 127, 50, 0.5)) !important;
      }
      
      @keyframes crownPulse {
        0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
        50% { transform: translateX(-50%) translateY(-3px) scale(1.05); }
      }
      
      .podium-rank-badge {
        position: absolute;
        top: -15px; /* Floats beautifully on the top center edge of the avatar, under the crown! */
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-weight: 950;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10 !important; /* Forces badge on top of avatars and profile frames */
        border: 1.5px solid rgba(255, 255, 255, 0.85) !important; /* Premium stadium glowing border */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
      }
      
      .podium-name {
        font-weight: 800;
        font-size: 14px;
        color: #fff;
        margin-bottom: 2px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .podium-level {
        font-size: 10px;
        color: #64748b;
        margin-bottom: 8px;
        font-weight: 600;
      }
      
      .podium-score {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        padding: 4px 10px;
        border-radius: 8px;
        font-weight: 800;
        font-size: 11px;
        color: #00e5ff;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
      .podium-column.first .podium-score {
        background: rgba(255, 215, 0, 0.08);
        border-color: rgba(255, 215, 0, 0.15);
        color: #ffd700;
      }
      
      .podium-action {
        margin-top: 10px;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 6px !important;
        padding: 5px 12px !important;
        font-size: 11px !important;
        color: #e2e8f0 !important;
        font-weight: bold !important;
        cursor: pointer;
        transition: all 0.2s;
        width: 85%;
        height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .podium-action:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
      }

      /* Premium List Ranks (4th and below) */
      .leaderboard-list {
        display: grid;
        gap: 8px;
        margin-top: 12px;
      }
      
      .leaderboard-card {
        display: grid;
        grid-template-columns: 36px 42px minmax(0, 1fr) 90px 85px !important;
        align-items: center;
        gap: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        background: rgba(15, 23, 42, 0.45) !important;
        padding: 10px 14px !important;
        transition: all 0.25s ease;
        backdrop-filter: blur(10px);
        position: relative;
      }
      .leaderboard-card:hover {
        border-color: rgba(255, 255, 255, 0.1) !important;
        background: rgba(15, 23, 42, 0.65) !important;
        transform: translateX(3px);
      }
      
      /* Self Player Glow Accent */
      .leaderboard-card.self {
        border-color: rgba(34, 197, 94, 0.4) !important;
        background: rgba(22, 101, 52, 0.12) !important;
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.08) !important;
      }
      .leaderboard-card.self::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 65%;
        background: #22c55e;
        border-radius: 2px;
        box-shadow: 0 0 8px #22c55e;
      }

      .leader-rank {
        font-weight: 900;
        font-size: 14px;
        color: #64748b;
        text-align: center;
      }
      /* Ranks 4-10 custom colors */
      .leaderboard-list .leaderboard-card:nth-child(-n+7) .leader-rank {
        color: #cbd5e1;
      }
      
      .leader-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background-size: cover;
        background-position: center;
        font-weight: 950;
        font-size: 14px;
        color: #fff;
      }
      
      .leader-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
      }
      .leader-main strong {
        font-weight: 700;
        font-size: 14px;
        color: #f8fafc;
      }
      .leader-main span {
        color: #94a3b8;
        font-size: 11px;
        font-weight: 500;
      }
      
      .leader-points {
        font-weight: 800;
        font-size: 14px;
        color: #00e5ff;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
      .leader-points small {
        color: #64748b;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      .leaderboard-card [data-view-profile] {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        color: #e2e8f0 !important;
        cursor: pointer;
        transition: all 0.2s;
        height: 34px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }
      .leaderboard-card [data-view-profile]:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
      }

      /* Premium Clicked Public Profile Card */
      .public-profile-card {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(8, 17, 31, 0.99) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
        border-radius: 16px !important;
        padding: 18px !important;
        margin: 15px 0 !important;
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        gap: 14px;
        animation: cardFadeIn 0.3s ease-out;
      }
      
      @keyframes cardFadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
      }
      
      .public-profile-header {
        display: flex;
        align-items: center;
        gap: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 12px;
      }
      
      .public-profile-stats-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 12px;
      }
      
      .public-profile-stat-box h4 {
        margin: 0 0 8px 0;
        font-size: 12px;
        font-weight: 700;
        color: #94a3b8;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      /* ==========================================================================
         PREMIUM FRIENDS SCREEN & ACTIONS
         ========================================================================== */
      #friendsBody {
        display: grid;
        gap: 16px !important;
      }
      
      .friend-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(8, 17, 31, 0.7) 100%) !important;
        backdrop-filter: blur(16px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
      }
      
      .friend-section h3 {
        font-size: 13px !important;
        font-weight: 850 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 0 0 4px 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        border-left: 3px solid #6366f1;
        padding-left: 8px;
      }
      
      .friend-code-row,
      .friend-add-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
        align-items: center;
      }
      
      .friend-code {
        min-height: 44px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(99, 102, 241, 0.25) !important;
        background: rgba(2, 6, 23, 0.6) !important;
        font-size: 1.15rem !important;
        font-weight: 900 !important;
        color: #00e5ff !important;
        letter-spacing: 1.5px !important;
        box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.05) !important;
      }
      
      .friend-add-row input {
        min-height: 44px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(2, 6, 23, 0.6) !important;
        color: #fff !important;
        padding: 0 14px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        transition: all 0.25s ease !important;
      }
      .friend-add-row input:focus {
        border-color: #6366f1 !important;
        box-shadow: 0 0 12px rgba(99, 102, 241, 0.25) !important;
        outline: none !important;
      }
      
      .friend-list {
        display: grid;
        gap: 10px !important;
      }
      
      /* Redesigned Glassmorphic Friend Cards */
      .friend-pill {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center;
        gap: 12px !important;
        min-height: 60px !important;
        padding: 10px 14px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        background: rgba(15, 23, 42, 0.4) !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        backdrop-filter: blur(10px);
        position: relative;
      }
      .friend-pill:hover {
        border-color: rgba(255, 255, 255, 0.12) !important;
        background: rgba(15, 23, 42, 0.6) !important;
        transform: translateX(3px) scale(1.005);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
      }
      
      /* Active Glowing Status Indicators */
      .friend-pill.is-online {
        border-color: rgba(34, 197, 94, 0.25) !important;
        background: rgba(22, 101, 52, 0.06) !important;
      }
      .friend-pill.is-online::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 60%;
        background: #22c55e;
        border-radius: 2px;
        box-shadow: 0 0 8px #22c55e;
      }
      
      .friend-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        text-align: left;
      }
      
      .friend-name {
        font-weight: 800 !important;
        font-size: 14px !important;
        color: #f8fafc !important;
      }
      
      .friend-status {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
      }
      .friend-status.online {
        color: #4ade80 !important;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .friend-status.online::before {
        content: "";
        width: 5px;
        height: 5px;
        background: #22c55e;
        border-radius: 50%;
        display: inline-block;
        box-shadow: 0 0 6px #22c55e;
        animation: friendDotPulse 1.8s infinite ease-in-out;
      }
      
      @keyframes friendDotPulse {
        0%, 100% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.3); opacity: 1; }
      }
      
      .friend-actions {
        display: flex;
        gap: 8px !important;
      }
      
      .friend-actions button {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        font-weight: bold !important;
        color: #e2e8f0 !important;
        cursor: pointer;
        transition: all 0.2s;
        height: 34px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }
      .friend-actions button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
      }
      
      /* Accept Request Premium Theme Button */
      .friend-actions button[data-friend-accept] {
        background: rgba(34, 197, 94, 0.1) !important;
        border-color: rgba(34, 197, 94, 0.2) !important;
        color: #4ade80 !important;
      }
      .friend-actions button[data-friend-accept]:hover {
        background: rgba(34, 197, 94, 0.2) !important;
        border-color: rgba(34, 197, 94, 0.4) !important;
        color: #fff !important;
      }
      
      /* Decline Request Premium Theme Button */
      .friend-actions button[data-friend-decline],
      .friend-actions button[data-remove-friend] {
        background: rgba(244, 63, 94, 0.06) !important;
        border-color: rgba(244, 63, 94, 0.15) !important;
        color: #f43f5e !important;
      }
      .friend-actions button[data-friend-decline]:hover,
      .friend-actions button[data-remove-friend]:hover {
        background: rgba(244, 63, 94, 0.15) !important;
        border-color: rgba(244, 63, 94, 0.3) !important;
        color: #fff !important;
      }
      
      @media (max-width: 720px) {
        .friend-pill {
          border-radius: 14px !important;
          grid-template-columns: auto minmax(0, 1fr) !important;
          gap: 10px !important;
          padding: 12px 14px !important;
        }
        
        .friend-actions {
          grid-column: 1 / -1;
          display: grid !important;
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 6px !important;
          width: 100% !important;
          margin-top: 4px !important;
        }
      }

      /* ==========================================================================
         PREMIUM PROFILE SCREEN & ACTIONS
         ========================================================================== */
      .profile-screen {
        display: grid;
        gap: 16px !important;
        padding: 10px 0 !important;
      }
      
      .profile-screen .profile-top {
        display: grid;
        grid-template-columns: auto 1fr auto !important;
        align-items: center;
        gap: 18px !important;
        padding: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(8, 17, 31, 0.7) 100%) !important;
        backdrop-filter: blur(16px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
      }
      
      .profile-screen .profile-avatar {
        width: 68px !important;
        height: 68px !important;
        border-radius: 50% !important;
        border: 3.5px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.05) !important;
        font-size: 26px !important;
        font-weight: 950 !important;
      }
      
      .profile-screen .profile-name {
        font-size: 18px !important;
        font-weight: 850 !important;
        color: #fff !important;
        text-align: left;
      }
      
      .profile-screen .profile-account-rank {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: #00e5ff;
        background: rgba(0, 229, 255, 0.12);
        padding: 4px 10px;
        border-radius: 8px;
        font-weight: 800;
        margin-top: 6px;
        border: 1px solid rgba(0, 229, 255, 0.2);
      }
      
      /* Profile Level Progress Panel */
      .profile-screen .profile-level-panel {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(8, 17, 31, 0.7) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding: 16px !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
      }
      
      .profile-screen .profile-level-head {
        display: flex;
        justify-content: space-between;
        font-size: 13px !important;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
      }
      .profile-screen .profile-level-head strong {
        color: #ffd700;
        font-size: 14px;
        font-weight: 850;
      }
      .profile-screen .profile-level-head span {
        color: #94a3b8;
      }
      
      .profile-screen .profile-xp-bar {
        height: 8px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 4px !important;
        overflow: hidden;
      }
      
      .profile-screen .profile-xp-fill {
        height: 100% !important;
        background: linear-gradient(90deg, #6366f1, #00e5ff) !important;
        border-radius: 4px !important;
      }
      
      /* Level Rewards Card styling */
      .profile-level-rewards {
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(8, 17, 31, 0.7) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
      }
      
      .level-reward-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
      }
      .level-reward-head h3 {
        font-size: 13px !important;
        font-weight: 850 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 0 0 2px 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .level-reward-head span {
        font-size: 11px;
        color: #cbd5e1;
      }
      
      .level-reward-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      
      .level-reward-chip {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 10px !important;
        padding: 10px 6px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #94a3b8;
      }
      .level-reward-chip strong {
        font-size: 14px;
        color: #fff;
        font-weight: 850;
      }
      .level-reward-chip.muted-chip {
        opacity: 0.65;
      }
      
      /* Profile Settings Panel */
      .profile-settings-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.5) 0%, rgba(8, 17, 31, 0.7) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
      }
      
      .profile-settings-panel h3 {
        font-size: 13px !important;
        font-weight: 850 !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        border-left: 3px solid #6366f1;
        padding-left: 8px;
        text-align: left;
      }
      
      /* Coins & Diamonds widgets */
      .profile-economy {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }
      
      .wallet-chip {
        background: rgba(15, 23, 42, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 14px !important;
        padding: 12px 16px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        backdrop-filter: blur(10px);
        transition: transform 0.2s;
      }
      .wallet-chip:hover {
        transform: translateY(-2px);
      }
      .wallet-chip.wallet-action {
        cursor: pointer;
      }
      .wallet-chip.wallet-action:focus-visible {
        outline: 2px solid rgba(34, 211, 238, 0.8);
        outline-offset: 2px;
      }
      .wallet-chip span {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #94a3b8;
        font-weight: 650;
      }
      .wallet-chip strong {
        font-size: 16px;
        font-weight: 900;
        color: #fff;
      }
      
      .profile-screen h3 {
        font-size: 13px !important;
        font-weight: 850 !important;
        color: #cbd5e1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        margin: 8px 0 0 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        border-left: 3px solid #6366f1;
        padding-left: 8px;
        text-align: left;
      }
      
      .profile-screen .profile-feedback-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
      }
      
      .profile-screen .profile-feedback-item {
        background: rgba(15, 23, 42, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        padding: 10px 6px !important;
        text-align: center;
        font-size: 9px !important;
        color: #64748b !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        backdrop-filter: blur(8px);
      }
      
      .profile-screen .profile-feedback-item strong {
        display: block;
        font-size: 16px !important;
        color: #facc15;
        font-weight: 900;
        margin-bottom: 2px;
        text-transform: none;
      }
      
      .profile-screen .profile-feedback-item:nth-child(n+2) strong {
        color: #f43f5e;
      }
      
      .profile-screen .profile-stat-header {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        color: #64748b !important;
        text-transform: uppercase;
        padding: 4px 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-align: left;
      }
      
      .profile-screen .profile-stat-table {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
      }
      
      .profile-screen .profile-stat-row {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
        background: rgba(15, 23, 42, 0.4) !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        align-items: center;
        text-align: left;
        backdrop-filter: blur(8px);
        transition: all 0.2s;
      }
      .profile-screen .profile-stat-row:hover {
        border-color: rgba(255, 255, 255, 0.1) !important;
        transform: translateX(2px);
      }
      
      .profile-screen .profile-stat-row strong {
        color: #fff !important;
        font-weight: 700;
      }
      .profile-screen .profile-stat-row span {
        color: #cbd5e1 !important;
      }
      .profile-screen .profile-stat-row span:nth-child(3) {
        color: #4ade80 !important;
        font-weight: 700;
      }
      .profile-screen .profile-stat-row span:nth-child(4) {
        color: #f43f5e !important;
      }
      
      @media (max-width: 720px) {
        .profile-screen .profile-top {
          padding: 14px !important;
          gap: 12px !important;
        }
        .profile-screen .profile-avatar {
          width: 56px !important;
          height: 56px !important;
          font-size: 20px !important;
        }
        .profile-screen .profile-name {
          font-size: 16px !important;
        }
        .profile-screen .profile-feedback-grid {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 8px !important;
        }
      }
      
      .profile-economy-header {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-end;
      }
      
      @media (max-width: 520px) {
        .profile-screen .profile-top {
          grid-template-columns: auto 1fr !important;
          grid-template-rows: auto auto !important;
          gap: 12px !important;
        }
        .profile-economy-header {
          grid-column: 1 / -1;
          flex-direction: row !important;
          justify-content: flex-start !important;
          gap: 10px !important;
          margin-top: 4px;
        }
      }

      /* ==========================================================================
         PREMIUM CENTERED FLOW CARD HEADERS
         ========================================================================== */
      .flow-card h2 {
        text-align: center !important;
        font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        background: linear-gradient(135deg, #ffffff 40%, #cbd5e1 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        margin: 0 auto 20px auto !important;
        padding-bottom: 12px !important;
        position: relative !important;
        width: fit-content !important;
        display: block !important;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.05) !important;
      }
      
      .flow-card h2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, transparent, #6366f1, #00e5ff, #6366f1, transparent);
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
        animation: titleLinePulse 3s infinite ease-in-out;
      }
      
      @keyframes titleLinePulse {
        0%, 100% { width: 50px; opacity: 0.7; }
        50% { width: 90px; opacity: 1; }
      }

      /* ==========================================================================
         HEMEN OYNA (QUICK PLAY) & PLAY SETUP REFACTOR
         ========================================================================== */      #screenQuickPlay {
        width: min(820px, calc(var(--app-vw) - 24px)) !important;
        max-width: 820px !important;
        background: radial-gradient(circle at top center, rgba(16, 24, 48, 0.98) 0%, rgba(8, 12, 28, 0.99) 100%) !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        padding: 20px 24px !important;
        box-sizing: border-box !important;
      }

      .quick-play-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        max-width: 740px !important;
        margin: 12px auto 24px auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      @media (max-width: 768px) {
        .quick-play-grid {
          grid-template-columns: 1fr !important;
          gap: 12px !important;
        }
      }

      /* Premium Mode Card */
      .mode-card {
        position: relative !important;
        background: rgba(15, 23, 42, 0.55) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        padding: 16px 12px !important;
        text-align: left !important;
        cursor: pointer !important;
        overflow: hidden !important;
        transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: 215px !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25) !important;
      }

      .mode-card-glow {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 50% 0%, var(--card-glow-color, rgba(99, 102, 241, 0.15)) 0%, transparent 70%) !important;
        opacity: 0.5 !important;
        pointer-events: none !important;
        transition: opacity 0.35s ease !important;
      }

      /* Color Themes for Modes */
      .ai-mode-card {
        --card-glow-color: rgba(34, 197, 94, 0.2);
        --theme-color: #22c55e;
        --theme-border: rgba(34, 197, 94, 0.25);
        --theme-shadow: rgba(34, 197, 94, 0.15);
      }

      .pvp-mode-card {
        --card-glow-color: rgba(6, 182, 212, 0.2);
        --theme-color: #06b6d4;
        --theme-border: rgba(6, 182, 212, 0.25);
        --theme-shadow: rgba(6, 182, 212, 0.15);
      }

      .ranked-mode-card {
        --card-glow-color: rgba(245, 158, 11, 0.2);
        --theme-color: #f59e0b;
        --theme-border: rgba(245, 158, 11, 0.25);
        --theme-shadow: rgba(245, 158, 11, 0.15);
      }

      .mode-card:hover {
        transform: translateY(-6px) scale(1.02) !important;
        border-color: var(--theme-color) !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--theme-shadow) !important;
        background: rgba(15, 23, 42, 0.8) !important;
      }

      .mode-card:hover .mode-card-glow {
        opacity: 1 !important;
      }

      .mode-card:active {
        transform: translateY(-2px) scale(0.99) !important;
        transition: all 0.1s ease !important;
      }

      /* Header inside card */
      .mode-card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 12px !important;
        width: 100% !important;
      }

      .mode-card-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: grid !important;
        place-items: center !important;
        color: var(--theme-color) !important;
        padding: 8px !important;
        transition: all 0.3s ease !important;
        box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.05) !important;
      }

      .mode-card-icon svg {
        width: 100% !important;
        height: 100% !important;
        fill: currentColor !important;
        filter: drop-shadow(0 0 4px var(--theme-shadow)) !important;
      }

      .mode-card:hover .mode-card-icon {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: var(--theme-color) !important;
        transform: rotate(-3deg) scale(1.05) !important;
      }

      .mode-card-badge {
        font-size: 0.65rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        padding: 3px 8px !important;
        border-radius: 20px !important;
        background: rgba(34, 197, 94, 0.1) !important;
        border: 1px solid rgba(34, 197, 94, 0.25) !important;
        color: #4ade80 !important;
        text-shadow: 0 0 5px rgba(74, 222, 128, 0.3) !important;
      }

      .mode-card-badge.pvp {
        background: rgba(6, 182, 212, 0.1) !important;
        border: 1px solid rgba(6, 182, 212, 0.25) !important;
        color: #22d3ee !important;
        text-shadow: 0 0 5px rgba(34, 211, 238, 0.3) !important;
      }

      .mode-card-badge.ranked {
        background: rgba(245, 158, 11, 0.1) !important;
        border: 1px solid rgba(245, 158, 11, 0.25) !important;
        color: #fbbf24 !important;
        text-shadow: 0 0 5px rgba(251, 191, 36, 0.3) !important;
      }

      /* Body */
      .mode-card-body {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
      }

      .mode-card-body h3 {
        margin: 0 !important;
        font-size: 0.95rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.8px !important;
        color: #f8fafc !important;
        text-transform: uppercase !important;
      }

      .mode-card-subtitle {
        margin: 0 !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        color: var(--theme-color) !important;
        opacity: 0.9 !important;
        letter-spacing: 0.2px !important;
      }

      .mode-card-desc {
        margin: 5px 0 0 0 !important;
        font-size: 0.70rem !important;
        line-height: 1.32 !important;
        color: #94a3b8 !important;
        font-weight: 500 !important;
      }

      .mode-card:hover .mode-card-desc {
        color: #cbd5e1 !important;
      }

      /* Footer */
      .mode-card-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding-top: 10px !important;
        width: 100% !important;
      }

      .mode-card-footer > span {
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        color: #f8fafc !important;
        letter-spacing: 0.5px !important;
        display: flex !important;
        align-items: center !important;
        transition: transform 0.3s ease !important;
      }

      .mode-card:hover .mode-card-footer > span {
        color: var(--theme-color) !important;
        transform: translateX(4px) !important;
      }

      .mode-card-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
      }

      .mode-card-tags span {
        font-size: 0.62rem !important;
        color: #64748b !important;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        font-weight: 600 !important;
      }

      .mode-card:hover .mode-card-tags span {
        color: #94a3b8 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
      }

      /* Actions panel */
      .quick-play-actions {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin-top: 10px !important;
      }

      .flow-back-btn {
        width: min(240px, 100%) !important;
        min-height: 44px !important;
        background: linear-gradient(180deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        color: #e2e8f0 !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
      }

      .flow-back-btn:hover {
        background: linear-gradient(180deg, rgba(51, 65, 85, 0.9), rgba(30, 41, 59, 0.95)) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
        transform: translateY(-1px) !important;
      }

      .flow-back-btn:active {
        transform: translateY(1px) !important;
      }
      /* ==========================================================================
         AI SETUP MODE - ROBUST COMPACT VERTICAL LAYOUT WITH AUTO SCROLLBARS
         ========================================================================== */

      /* Set a highly balanced, centered console settings card for AI Mode */
      /* Set a highly balanced, centered console settings card for All Modes */
      #screenPlaySetup {
        width: min(540px, 100%) !important;
        max-width: 540px !important;
        max-height: calc(var(--app-vh) - 20px) !important;
        overflow-y: auto !important; /* ALWAYS scrollable, never blocks! */
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 20px !important;
        scrollbar-width: thin;
        box-sizing: border-box !important;
      }

      /* Custom premium neon webkit scrollbars */
      #screenPlaySetup::-webkit-scrollbar {
        width: 6px !important;
      }
      #screenPlaySetup::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 3px !important;
      }
      #screenPlaySetup::-webkit-scrollbar-thumb {
        background: rgba(0, 229, 255, 0.3) !important;
        border-radius: 3px !important;
      }
      #screenPlaySetup.ai-setup-mode::-webkit-scrollbar-thumb {
        background: rgba(34, 197, 94, 0.3) !important;
      }

      /* Glowing green training borders for AI mode specifically */
      #screenPlaySetup.ai-setup-mode {
        border: 1px solid rgba(34, 197, 94, 0.25) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(34, 197, 94, 0.15) !important;
        background: radial-gradient(circle at top center, rgba(16, 24, 48, 0.98) 0%, rgba(8, 12, 28, 0.99) 100%) !important;
      }

      /* Keep a clean, single-column stack that behaves perfectly and logically */
      #screenPlaySetup .play-setup-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 !important;
        margin-top: 5px !important;
        box-sizing: border-box !important;
      }

      /* Compact settings cards */
      .ai-setup-mode .play-section {
        padding: 12px 16px !important;
        background: rgba(15, 23, 42, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 10px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
      }

      .ai-setup-mode .play-section-title {
        margin: 0 !important;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
      }

      /* Training sub-options and field size selector as clean horizontal grids */
      .ai-setup-mode #playAiTrainingOptions {
        display: grid !important;
        grid-template-columns: 120px 1fr !important;
        align-items: center !important;
        gap: 12px 10px !important;
      }

      /* Saha boyutu kaldirildi: AI paneli tam satira yayilsin (yatay duzen) */
      .ai-setup-mode #playAiTrainingOptions { grid-column: 1 / -1 !important; }
      #screenPlaySetup.ai-setup-mode #playFieldSizeSection { display: none !important; }

      /* Compact row grids */
      .ai-setup-mode .play-option-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin: 0 !important;
      }

      /* AI Sayısı displays as a perfect single-row of 6 columns */
      .ai-setup-mode #playAiTrainingOptions div:nth-of-type(3) {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 4px !important;
      }

      /* Tighter choice buttons */
      .ai-setup-mode .play-choice {
        min-height: 32px !important;
        font-size: 0.76rem !important;
        padding: 4px 6px !important;
        border-radius: 6px !important;
      }

      /* Actions panel */
      .ai-setup-mode .play-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding-top: 10px !important;
        margin-top: 4px !important;
      }

      .ai-setup-mode .play-actions button {
        min-height: 36px !important;
        font-size: 0.82rem !important;
        text-transform: uppercase !important;
        font-weight: 800 !important;
        border-radius: 6px !important;
      }

      /* Glowing start buttons in training green */
      .ai-setup-mode #playSetupStartButton {
        background: linear-gradient(180deg, #22c55e, #15803d) !important;
        border-color: rgba(34, 197, 94, 0.4) !important;
        color: #04120a !important;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2) !important;
      }

      .ai-setup-mode #playSetupStartButton:hover {
        background: linear-gradient(180deg, #4ade80, #16a34a) !important;
        box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important;
      }

      /* ==========================================================================
         Premium Categorized Settings Styling
         ========================================================================== */
      .settings-sub-tabs {
        display: flex !important;
        gap: 6px !important;
        margin-bottom: 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-bottom: 10px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
      }
      .settings-sub-tabs::-webkit-scrollbar {
        display: none !important;
      }
      .settings-sub-tab {
        flex: 1 !important;
        min-width: 62px !important;
        min-height: 32px !important;
        padding: 4px 6px !important;
        font-size: 0.72rem !important;
        font-weight: 850 !important;
        text-transform: uppercase !important;
        background: rgba(8, 17, 31, 0.5) !important;
        color: #94a3b8 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 6px !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        cursor: pointer !important;
        -webkit-user-select: none !important;
        user-select: none !important;
      }
      .settings-sub-tab:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
      }
      .settings-sub-tab.active {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.2)) !important;
        color: #a78bfa !important;
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 12px rgba(139, 92, 246, 0.35) !important;
      }
      .settings-sub-tab.active .btn-icon {
        filter: drop-shadow(0 0 4px #8b5cf6) !important;
      }
      .settings-group {
        display: grid !important;
        gap: 10px !important;
        animation: settingsFadeIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      @keyframes settingsFadeIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .setting {
        background: rgba(15, 23, 42, 0.38) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        padding: 9px 11px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
        transition: border-color 0.2s, background 0.2s !important;
      }
      .setting:hover {
        border-color: rgba(139, 92, 246, 0.25) !important;
        background: rgba(15, 23, 42, 0.5) !important;
      }
      .setting label {
        font-size: 0.78rem !important;
        color: #cbd5e1 !important;
        font-weight: 750 !important;
        margin-bottom: 5px !important;
      }
      .setting label span {
        color: #a78bfa !important;
        font-weight: 850 !important;
      }
      .setting select {
        width: 100% !important;
        background: rgba(8, 17, 31, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 6px !important;
        color: #fff !important;
        padding: 7px 9px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        outline: none !important;
        transition: all 0.2s !important;
      }
      .setting select:focus {
        border-color: #8b5cf6 !important;
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.25) !important;
      }
      .lock-btn {
        background: rgba(8, 17, 31, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #94a3b8 !important;
        border-radius: 6px !important;
        transition: all 0.2s !important;
      }
      .lock-btn:hover {
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
      }
      .lock-btn.locked {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15)) !important;
        border-color: #ef4444 !important;
        color: #fca5a5 !important;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.25) !important;
      }

      /* ==========================================================================
         Highly Refined, Responsive Esports Team Lobby Styling
         ========================================================================== */
      .team-lobby-overlay {
        background: radial-gradient(circle at center, rgba(13, 18, 23, 0.96), rgba(8, 11, 15, 0.99)) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
      }

      .team-lobby-card {
        background: transparent !important;
      }

      .team-lobby-head h2 {
        font-family: 'Outfit', sans-serif !important;
        font-size: 1.15rem !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.15) !important;
      }

      .team-lobby-meta {
        font-size: 0.72rem !important;
        color: #94a3b8 !important;
        font-weight: 700 !important;
        margin-top: 2px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
      }
      .team-lobby-meta::before {
        content: "" !important;
        display: inline-block !important;
        width: 7px !important;
        height: 7px !important;
        border-radius: 50% !important;
        background: #22c55e !important;
        box-shadow: 0 0 6px #22c55e !important;
        animation: metaPulse 2s infinite ease-in-out !important;
      }
      @keyframes metaPulse {
        0%, 100% { opacity: 0.5; transform: scale(0.95); }
        50% { opacity: 1; transform: scale(1.1); }
      }

      #teamLobbyCloseButton {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #cbd5e1 !important;
        border-radius: 6px !important;
        transition: all 0.2s ease !important;
      }
      #teamLobbyCloseButton:hover {
        background: rgba(239, 68, 68, 0.15) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
        color: #ef4444 !important;
      }

      /* Cybernetic Team Columns */
      .team-column {
        background: rgba(15, 23, 42, 0.45) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.22s ease !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.01), 0 4px 16px rgba(0, 0, 0, 0.15) !important;
      }

      .team-column.blue {
        border-color: rgba(59, 130, 246, 0.2) !important;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.03), transparent) rgba(15, 23, 42, 0.45) !important;
      }
      .team-column.blue:hover {
        border-color: rgba(59, 130, 246, 0.4) !important;
        box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.03), 0 0 10px rgba(59, 130, 246, 0.05) !important;
      }

      .team-column.red {
        border-color: rgba(239, 68, 68, 0.2) !important;
        background: linear-gradient(180deg, rgba(239, 68, 68, 0.03), transparent) rgba(15, 23, 42, 0.45) !important;
      }
      .team-column.red:hover {
        border-color: rgba(239, 68, 68, 0.4) !important;
        box-shadow: inset 0 0 15px rgba(239, 68, 68, 0.03), 0 0 10px rgba(239, 68, 68, 0.05) !important;
      }

      .team-column.spectator {
        border-color: rgba(148, 163, 184, 0.15) !important;
        background: linear-gradient(180deg, rgba(148, 163, 184, 0.02), transparent) rgba(15, 23, 42, 0.35) !important;
      }
      .team-column.spectator:hover {
        border-color: rgba(148, 163, 184, 0.3) !important;
      }

      /* Glowing Header Badges */
      .team-column-title {
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 clamp(8px, 1.5vw, 16px) !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.8rem !important;
        font-weight: 850 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
      }

      .team-column.blue .team-column-title {
        background: linear-gradient(90deg, #1e40af, #3b82f6) !important;
        border-color: rgba(59, 130, 246, 0.3) !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
      }
      .team-column.red .team-column-title {
        background: linear-gradient(90deg, #991b1b, #ef4444) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
      }
      .team-column.spectator .team-column-title {
        background: linear-gradient(90deg, #475569, #64748b) !important;
        border-color: rgba(148, 163, 184, 0.25) !important;
      }

      .team-column-title .team-count {
        position: static !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        background: rgba(0, 0, 0, 0.25) !important;
        padding: 1px 6px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
      }

      /* List & Players Content */
      .team-player {
        display: block !important;
        background: rgba(15, 23, 42, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.03) !important;
        border-radius: 6px !important;
        padding: clamp(6px, 1.2vh, 10px) 8px !important;
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        transition: all 0.2s ease !important;
        text-align: left !important;
      }
      .team-player-name {
        display: block !important;
        font-weight: 850 !important;
        font-size: 0.82rem !important;
        margin-bottom: 2px !important;
      }
      .team-player-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        align-items: center !important;
        margin-bottom: 4px !important;
      }
      .team-player:hover {
        background: rgba(255, 255, 255, 0.015) !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
      }

      .team-column.blue .team-player {
        color: #e2e8f0 !important;
      }
      .team-column.red .team-player {
        color: #e2e8f0 !important;
      }
      .team-column.spectator .team-player {
        color: #94a3b8 !important;
      }

      .team-player.self {
        background: linear-gradient(90deg, rgba(234, 179, 8, 0.06), transparent) !important;
        border-color: rgba(234, 179, 8, 0.35) !important;
        color: #facc15 !important;
        box-shadow: 0 0 8px rgba(234, 179, 8, 0.03) !important;
      }

      /* Position Badges */
      .owner-badge {
        background: rgba(234, 179, 8, 0.12) !important;
        border-color: rgba(234, 179, 8, 0.3) !important;
        color: #facc15 !important;
      }

      .team-player .ready-badge {
        background: rgba(34, 197, 94, 0.12) !important;
        border-color: rgba(34, 197, 94, 0.3) !important;
        color: #4ade80 !important;
      }

      .bot-badge {
        background: rgba(139, 92, 246, 0.12) !important;
        border-color: rgba(139, 92, 246, 0.3) !important;
        color: #c084fc !important;
      }

      .bot-difficulty-badge {
        background: rgba(56, 189, 248, 0.12) !important;
        border-color: rgba(56, 189, 248, 0.3) !important;
        color: #38bdf8 !important;
      }

      .team-empty {
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.76rem !important;
        color: #475569 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        border: 1px dashed rgba(255, 255, 255, 0.06) !important;
        border-radius: 6px !important;
        padding: clamp(6px, 1.2vh, 14px) 8px !important;
        transition: all 0.2s ease !important;
      }
      .team-column:hover .team-empty {
        border-color: rgba(255, 255, 255, 0.2) !important;
        color: #cbd5e1 !important;
        background: rgba(255, 255, 255, 0.01) !important;
      }

      /* Cybernetic Bot Action buttons */
      .team-bot-actions {
        display: flex !important;
        gap: 6px !important;
        margin-top: 6px !important;
      }
      .team-bot-actions button {
        min-height: 24px !important;
        width: auto !important;
        height: auto !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #cbd5e1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        font-size: 0.65rem !important;
        font-weight: 850 !important;
        white-space: nowrap !important;
        transition: all 0.15s ease !important;
      }
      .team-bot-actions button span:last-child {
        display: inline-block !important;
      }
      .team-bot-actions button .button-icon-content {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
      }
      .team-bot-actions button .btn-icon {
        margin: 0 !important;
        transform: none !important;
        display: inline-block !important;
      }
      .team-bot-actions button:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
      }
      .team-bot-actions button.danger:hover {
        background: rgba(239, 68, 68, 0.15) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
        color: #f87171 !important;
      }

      /* Premium Cyber Action Buttons */
      .team-lobby-actions button {
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 6px !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 900 !important;
        letter-spacing: 0.5px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }
      .team-lobby-actions button:active {
        transform: scale(0.96) !important;
      }

      /* Elegant gradients & neon flows */
      #teamLobbyReadyButton {
        background: linear-gradient(180deg, #ca8a04, #854d0e) !important;
        border-color: #eab308 !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
      }
      #teamLobbyReadyButton:hover {
        box-shadow: 0 0 12px rgba(234, 179, 8, 0.35) !important;
      }
      #teamLobbyReadyButton.is-ready {
        background: linear-gradient(180deg, #16a34a, #14532d) !important;
        border-color: #22c55e !important;
      }
      #teamLobbyReadyButton.is-ready:hover {
        box-shadow: 0 0 12px rgba(34, 197, 94, 0.35) !important;
      }

      #teamLobbyStartButton {
        background: linear-gradient(180deg, #2563eb, #1e3a8a) !important;
        border-color: #3b82f6 !important;
        color: #ffffff !important;
      }
      #teamLobbyStartButton:hover {
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.35) !important;
      }

      #teamLobbyRestartButton {
        background: linear-gradient(180deg, #dc2626, #7f1d1d) !important;
        border-color: #ef4444 !important;
        color: #ffffff !important;
      }
      #teamLobbyRestartButton:hover {
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.35) !important;
      }

      #teamLobbyLeaveButton {
        background: linear-gradient(180deg, #991b1b, #7f1d1d) !important;
        border-color: #ef4444 !important;
        color: #ffffff !important;
      }
      #teamLobbyLeaveButton:hover {
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
      }



      /* Premium Popups */
      .team-lobby-popup {
        background: rgba(2, 6, 23, 0.58) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
      }
      .team-lobby-popup-card {
        background: rgba(15, 23, 42, 0.96) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 10px !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
      }
      .team-lobby-popup-head h3 {
        font-family: 'Outfit', sans-serif !important;
        font-weight: 850 !important;
        color: #fff !important;
      }

      /* Premium Cyber Lobby Action Buttons Restructuring */
      .team-lobby-actions,
      .team-lobby-overlay.host .team-lobby-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: clamp(6px, 1.2vh, 10px) !important;
        width: 100% !important;
        height: auto !important;
      }

      .team-lobby-actions button {
        display: flex;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        text-align: center !important;
      }

      /* Force vertical stacking alignment: Icon on TOP, Text at the BOTTOM */
      .team-lobby-actions button .button-icon-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(2px, 0.5vh, 4px) !important;
        width: 100% !important;
        height: 100% !important;
      }

      .team-lobby-actions button .btn-icon {
        width: clamp(14px, 2vh, 16px) !important;
        height: clamp(14px, 2vh, 16px) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
      }

      .team-lobby-actions button span:last-child {
        white-space: normal !important;
        word-break: keep-all !important;
        line-height: 1.1 !important;
        display: inline-block !important;
        text-align: center !important;
      }

      /* Secondary Buttons (Top Row) - Taller for vertical layout */
      #teamLobbyRandomSelfButton,
      #teamLobbyShuffleButton,
      #teamLobbySettingsButton,
      #teamLobbyBotButton,
      #teamLobbyFriendsButton,
      #teamLobbyBackButton,
      #teamLobbyRestartButton {
        order: 1 !important;
        flex: 1 1 125px !important;
        min-width: 105px !important;
        max-width: 180px !important;
        height: clamp(48px, 8vh, 56px) !important;
        min-height: 48px !important;
        font-size: clamp(0.62rem, 1.15vw, 0.74rem) !important;
        padding: 4px 6px !important;
        margin: 0 !important;
      }

      /* Core Buttons (Bottom Row - Taller & centered) */
      #teamLobbyReadyButton,
      #teamLobbyStartButton,
      #teamLobbyLeaveButton {
        order: 2 !important;
        flex: 1 1 200px !important;
        min-width: 160px !important;
        max-width: 330px !important;
        height: clamp(54px, 9vh, 64px) !important;
        min-height: 54px !important;
        font-size: clamp(0.72rem, 1.35vw, 0.84rem) !important;
        padding: 6px 12px !important;
        margin: 0 !important;
      }

      /* Premium Settings Popup Layout (Landscape Mobile Friendly) */
      .mobile-popup-card.settings-popup-card {
        width: min(780px, 95vw) !important;
        max-height: min(450px, 92vh) !important;
        padding: clamp(10px, 2.5vh, 18px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
      }

      .settings-popup-container {
        display: grid !important;
        grid-template-columns: 140px minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        flex: 1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }

      .settings-popup-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-right: 12px !important;
        height: 100% !important;
        overflow-y: auto !important;
      }

      .popup-settings-tab {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 6px 10px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        color: #94a3b8 !important;
        font-family: 'Outfit', sans-serif !important;
        font-weight: 800 !important;
        font-size: 0.76rem !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
      }

      .popup-settings-tab:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
      }

      .popup-settings-tab.active {
        background: rgba(139, 92, 246, 0.2) !important;
        border-color: #8b5cf6 !important;
        color: #ffffff !important;
        box-shadow: 0 0 12px rgba(139, 92, 246, 0.25) !important;
      }

      .settings-popup-content-area {
        height: 100% !important;
        overflow-y: auto !important;
        padding-right: 6px !important;
        box-sizing: border-box !important;
      }

      .settings-popup-panel {
        display: grid !important;
        gap: 12px !important;
        animation: settingsFadeIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }

      .settings-popup-panel.hidden {
        display: none !important;
      }

      /* Premium subheaders inside panels */
      .settings-popup-panel h3 {
        margin: 0 0 4px 0 !important;
        font-size: 0.88rem !important;
        font-weight: 850 !important;
        color: #fff !important;
        font-family: 'Outfit', sans-serif !important;
        border-left: 3px solid #8b5cf6 !important;
        padding-left: 8px !important;
      }

      /* Custom Premium Scrollbar for Settings Popup */
      .settings-popup-sidebar::-webkit-scrollbar,
      .settings-popup-content-area::-webkit-scrollbar,
      .settings-rules::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
      }
      .settings-popup-sidebar::-webkit-scrollbar-thumb,
      .settings-popup-content-area::-webkit-scrollbar-thumb,
      .settings-rules::-webkit-scrollbar-thumb {
        background: rgba(139, 92, 246, 0.3) !important;
        border-radius: 10px !important;
      }
      .settings-popup-sidebar::-webkit-scrollbar-thumb:hover,
      .settings-popup-content-area::-webkit-scrollbar-thumb:hover,
      .settings-rules::-webkit-scrollbar-thumb:hover {
        background: rgba(139, 92, 246, 0.6) !important;
      }

      /* Responsive adjustment for portrait or smaller screens */
      @media (max-width: 580px) {
        .mobile-popup-card.settings-popup-card {
          max-height: 85vh !important;
        }
        .settings-popup-container {
          grid-template-columns: 1fr !important;
          grid-template-rows: auto 1fr !important;
          height: auto !important;
        }
        .settings-popup-sidebar {
          flex-direction: row !important;
          border-right: 0 !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
          padding-right: 0 !important;
          padding-bottom: 8px !important;
          height: auto !important;
          overflow-x: auto !important;
          overflow-y: hidden !important;
        }
        .popup-settings-tab {
          flex-shrink: 0 !important;
          width: auto !important;
        }
      }
      .play-choice.vip-choice {
        background: linear-gradient(135deg, rgba(8, 17, 31, 0.88), rgba(20, 16, 8, 0.94)) !important;
        border: 1px solid rgba(250, 204, 21, 0.35) !important;
        color: #fef08a !important;
        font-weight: 850 !important;
      }
      .play-choice.vip-choice:hover {
        background: linear-gradient(135deg, rgba(16, 28, 48, 0.92), rgba(36, 28, 12, 0.98)) !important;
        border-color: rgba(250, 204, 21, 0.6) !important;
        box-shadow: 0 4px 14px rgba(250, 204, 21, 0.12) !important;
      }
      .play-choice.vip-choice.selected {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(64, 48, 16, 0.98)) !important;
        border-color: #facc15 !important;
        color: #ffffff !important;
        box-shadow: 0 8px 24px rgba(250, 204, 21, 0.22) !important;
      }

      /* Premium Neon Green & Red buttons inside inventory cards */
      .green-btn {
        background: rgba(0, 255, 135, 0.15) !important;
        border: 1.5px solid #00ff87 !important;
        color: #00ff87 !important;
        box-shadow: 0 0 10px rgba(0, 255, 135, 0.2) !important;
        text-shadow: 0 0 4px rgba(0, 255, 135, 0.3) !important;
        transition: all 0.2s ease-in-out !important;
      }
      .green-btn:hover {
        background: rgba(0, 255, 135, 0.3) !important;
        box-shadow: 0 0 14px rgba(0, 255, 135, 0.4) !important;
      }
      .red-btn {
        background: rgba(255, 65, 108, 0.12) !important;
        border: 1.5px solid #ff416c !important;
        color: #ff416c !important;
        transition: all 0.2s ease-in-out !important;
      }
      .red-btn:hover {
        background: rgba(255, 65, 108, 0.25) !important;
        box-shadow: 0 0 12px rgba(255, 65, 108, 0.35) !important;
      }

      /* --- Match History ("Geçmiş Maçlarım") & Details Dialog Styles --- */
      .profile-match-history-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
        width: 100%;
      }

      .profile-match-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
      }

      .profile-match-row:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        transform: translateY(-1px);
      }

      .profile-match-row:active {
        transform: translateY(0);
      }

      .profile-match-type {
        font-size: 13px;
        font-weight: 700;
        color: #f1f5f9;
        font-family: 'Rajdhani', 'Outfit', sans-serif;
      }

      .profile-match-date {
        font-size: 11px;
        color: #64748b;
        margin-left: 8px;
        font-weight: 400;
      }

      .profile-match-score {
        font-size: 15px;
        font-weight: 900;
        color: #fff;
        font-family: 'Rajdhani', 'Orbitron', monospace;
        letter-spacing: 0.5px;
        margin: 0 10px;
      }

      .profile-match-status-badge {
        font-size: 11px;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 90px;
        text-align: center;
      }

      .profile-match-status-win {
        background: rgba(34, 197, 94, 0.12) !important;
        border: 1px solid rgba(34, 197, 94, 0.4) !important;
        color: #4ade80 !important;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.15) !important;
      }

      .profile-match-status-loss {
        background: rgba(239, 68, 68, 0.12) !important;
        border: 1px solid rgba(239, 68, 68, 0.4) !important;
        color: #f43f5e !important;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.15) !important;
      }

      .profile-match-status-draw {
        background: rgba(234, 179, 8, 0.12) !important;
        border: 1px solid rgba(234, 179, 8, 0.4) !important;
        color: #facc15 !important;
        box-shadow: 0 0 8px rgba(234, 179, 8, 0.15) !important;
      }

      /* Match Detail Modal Layout */
      .match-detail-card {
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        background: rgba(8, 14, 25, 0.98) !important;
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(0, 229, 255, 0.05) !important;
        backdrop-filter: blur(12px);
      }

      .match-detail-teams-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 15px;
        margin-bottom: 15px;
      }

      .match-detail-team-column {
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: rgba(255, 255, 255, 0.015);
        border-radius: 8px;
        padding: 10px;
      }

      .match-detail-team-column.blue {
        border-left: 3px solid #00d2ff !important;
        background: linear-gradient(90deg, rgba(0, 210, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
      }

      .match-detail-team-column.red {
        border-right: 3px solid #ff416c !important;
        background: linear-gradient(270deg, rgba(255, 65, 108, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
        text-align: right;
      }

      .match-detail-team-header {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        margin-bottom: 4px;
        font-family: 'Rajdhani', sans-serif;
      }

      .match-detail-team-header.blue {
        color: #00d2ff !important;
      }

      .match-detail-team-header.red {
        color: #ff416c !important;
      }

      .match-detail-player-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 13px;
      }

      .match-detail-team-column.red .match-detail-player-row {
        flex-direction: row-reverse;
      }

      .match-detail-player-name {
        color: #f1f5f9;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 110px;
      }

      .match-detail-player-info {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .match-detail-team-column.red .match-detail-player-info {
        flex-direction: row-reverse;
      }

      .match-detail-goals-badge {
        font-size: 10px;
        background: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 700;
      }

      .match-detail-goals-badge.has-goals {
        background: rgba(34, 197, 94, 0.15) !important;
        color: #4ade80 !important;
        border: 1.2px solid rgba(34, 197, 94, 0.3) !important;
      }

      .match-detail-add-friend-btn {
        background: rgba(0, 229, 255, 0.12) !important;
        border: 1px solid rgba(0, 229, 255, 0.35) !important;
        color: #00e5ff !important;
        border-radius: 4px !important;
        padding: 3px 8px !important;
        font-size: 10px !important;
        font-weight: 750 !important;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .match-detail-add-friend-btn:hover {
        background: #00e5ff !important;
        color: #000 !important;
        box-shadow: 0 0 6px rgba(0, 229, 255, 0.4) !important;
      }

      .match-detail-add-friend-btn.requested {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #64748b !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
      }

      .match-detail-goals-list {
        background: rgba(255, 255, 255, 0.015);
        border: 1px solid rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding: 10px;
        margin-top: 12px;
        font-size: 12px;
      }

      .match-detail-goal-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
      }

      .match-detail-goal-item:last-child {
        border-bottom: none;
      }

/* --- VIP Membership & VIP Special Set Styles --- */
.main-menu-vip-privileges {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.75), rgba(40, 30, 10, 0.8)) !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15), inset 0 0 10px rgba(212, 175, 55, 0.05) !important;
}

@media (orientation: landscape) and (max-height: 560px) {
  .market-layout {
    grid-template-columns: clamp(108px, 15vw, 132px) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .market-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    align-content: start !important;
    gap: 10px !important;
  }

  .market-item {
    min-height: 170px !important;
    padding: 10px 12px !important;
  }

  .market-item .market-visual.jerseys,
  .inventory-owned-card .market-visual.jerseys {
    width: 124px !important;
    max-width: 124px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 4px 6px !important;
    margin: 0 auto 8px auto !important;
  }

  .market-visual.jerseys > div {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  .market-visual.jerseys .market-player-canvas {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    flex: 0 0 52px !important;
  }

  .inventory-set-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .inventory-set-grid .inventory-owned-card {
    min-height: auto !important;
    padding: 12px !important;
  }

  .inventory-emoji-card {
    min-height: 190px !important;
  }

  .inventory-emoji-actions {
    flex-wrap: wrap !important;
  }
}

.menu-vip-btn {
  background: linear-gradient(135deg, #d4af37, #facc15) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #000000 !important;
  font-family: 'Orbitron', 'Outfit', sans-serif !important;
  font-weight: 950 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
  animation: vipBtnPulse 2.5s infinite ease-in-out !important;
  transition: all 0.2s ease !important;
}

.menu-vip-btn:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6) !important;
}

@keyframes vipBtnPulse {
  0% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 0 18px rgba(212, 175, 55, 0.6); filter: brightness(1.05); }
  100% { box-shadow: 0 0 8px rgba(212, 175, 55, 0.3); }
}

/* VIP Badge */
.vip-badge {
  background: linear-gradient(135deg, #d4af37, #eab308) !important;
  color: #000 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 900 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.25) !important;
}

/* Locked items (VIP required) */
.play-choice.locked-vip {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  border: 1px dashed rgba(212, 175, 55, 0.3) !important;
  position: relative !important;
}
.play-choice.locked-vip::after {
  content: "👑" !important;
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  font-size: 11px !important;
  filter: drop-shadow(0 0 4px #000);
}

/* VIP Tag for inventory */
.vip-duration-badge {
  position: absolute !important;
  bottom: 6px !important;
  left: 6px !important;
  right: 6px !important;
  background: linear-gradient(90deg, rgba(212,175,55,0.9), rgba(138,109,28,0.95)) !important;
  color: #000000 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 9px !important;
  text-align: center !important;
  border-radius: 4px !important;
  padding: 2px 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
  letter-spacing: 0.3px !important;
}

/* VIP Room card chooser style */
.vip-room-card-selected-btn {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.9), rgba(40, 32, 12, 0.95)) !important;
  border: 2px solid #d4af37 !important;
  box-shadow: 0 0 15px rgba(212,175,55,0.2) !important;
}

/* --- Shot Control Simulator Animations --- */
#shotControlPreviewContainer.sim-mode-classic .sim-group-advanced { display: none !important; }
#shotControlPreviewContainer.sim-mode-classic .sim-group-classic { display: block !important; }
#shotControlPreviewContainer.sim-mode-advanced .sim-group-classic { display: none !important; }
#shotControlPreviewContainer.sim-mode-advanced .sim-group-advanced { display: block !important; }

@keyframes classicPlayerWalk {
  0% { cx: 80px; cy: 80px; }
  35% { cx: 120px; cy: 80px; }
  50% { cx: 122px; cy: 80px; }
  100% { cx: 80px; cy: 80px; }
}
.sim-player-classic { animation: classicPlayerWalk 4s infinite linear; }

@keyframes classicKnob {
  0% { cx: 45px; cy: 115px; }
  35% { cx: 53px; cy: 115px; }
  50% { cx: 53px; cy: 115px; }
  100% { cx: 45px; cy: 115px; }
}
.sim-knob-classic { animation: classicKnob 4s infinite linear; }

@keyframes classicBall {
  0% { cx: 130px; cy: 80px; opacity: 1; }
  34% { cx: 130px; cy: 80px; }
  35% { cx: 132px; cy: 80px; }
  55% { cx: 280px; cy: 80px; opacity: 0; }
  60% { cx: 130px; cy: 80px; opacity: 0; }
  100% { cx: 130px; cy: 80px; opacity: 1; }
}
.sim-ball-classic { animation: classicBall 4s infinite linear; }

@keyframes classicButtonPress {
  0%, 30% { transform: scale(1); transform-origin: 275px 115px; filter: brightness(1); }
  35%, 45% { transform: scale(0.9); transform-origin: 275px 115px; filter: brightness(1.25); }
  50%, 100% { transform: scale(1); transform-origin: 275px 115px; filter: brightness(1); }
}
.sim-btn-classic { animation: classicButtonPress 4s infinite linear; }

@keyframes advancedPlayerWalk {
  0% { cx: 80px; cy: 80px; }
  25% { cx: 100px; cy: 80px; }
  60% { cx: 100px; cy: 80px; }
  100% { cx: 80px; cy: 80px; }
}
.sim-player-advanced { animation: advancedPlayerWalk 4s infinite linear; }

@keyframes advancedKnobLeft {
  0% { cx: 45px; cy: 115px; }
  25% { cx: 51px; cy: 115px; }
  60% { cx: 51px; cy: 115px; }
  100% { cx: 45px; cy: 115px; }
}
.sim-knob-left-advanced { animation: advancedKnobLeft 4s infinite linear; }

@keyframes advancedArrowShow {
  0%, 25% { opacity: 0; transform: scale(0.5); transform-origin: 100px 80px; }
  30%, 55% { opacity: 1; transform: scale(1); transform-origin: 100px 80px; }
  60%, 100% { opacity: 0; transform: scale(0.5); transform-origin: 100px 80px; }
}
.sim-arrow-advanced { animation: advancedArrowShow 4s infinite linear; }

@keyframes advancedKnobRight {
  0%, 25% { cx: 275px; cy: 115px; }
  30%, 55% { cx: 287px; cy: 109px; }
  60%, 100% { cx: 275px; cy: 115px; }
}
.sim-knob-right-advanced { animation: advancedKnobRight 4s infinite linear; }

@keyframes advancedBall {
  0% { cx: 110px; cy: 80px; opacity: 1; }
  59% { cx: 110px; cy: 80px; }
  60% { cx: 110px; cy: 80px; }
  80% { cx: 260px; cy: 23px; opacity: 0; }
  85% { cx: 110px; cy: 80px; opacity: 0; }
  100% { cx: 110px; cy: 80px; opacity: 1; }
}
.sim-ball-advanced { animation: advancedBall 4s infinite linear; }

/* --- Controls Tab Layout --- */
.controls-tab-layout {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}
.controls-left-col {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}
#shotControlPreviewContainer {
  flex: 1.25 !important;
  box-sizing: border-box !important;
}
@media (max-width: 580px) {
  .controls-tab-layout {
    flex-direction: column !important;
    gap: 12px !important;
  }
  #shotControlPreviewContainer {
    flex: none !important;
    width: 100% !important;
  }
}

/* --- Emoji Showroom and Gameplay Animations --- */
.market-emoji-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
  user-select: none;
  pointer-events: none;
}

/* 1. Kışkırtıcı & Alaycı Animations */
.emoji-scalePulse { animation: emojiScalePulse 1.5s infinite ease-in-out; }
.emoji-yawing { animation: emojiYawing 2.5s infinite ease-in-out; }
.emoji-wobble { animation: emojiWobble 1.8s infinite ease-in-out; }
.emoji-eyesShift { animation: emojiEyesShift 3s infinite steps(1); }
.emoji-wave { animation: emojiWave 1s infinite ease-in-out; transform-origin: bottom right; }
.emoji-verticalShudder { animation: emojiShudder 0.2s infinite linear; }
.emoji-shrug { animation: emojiShrug 2s infinite ease-in-out; }
.emoji-bounce { animation: emojiBounce 1.4s infinite ease-in-out; }
.emoji-float { animation: emojiFloat 2s infinite ease-in-out; }
.emoji-flash { animation: emojiFlash 1s infinite steps(1); }

/* 2. Genel & Reaksiyon Animations */
.emoji-firePulse { animation: emojiFirePulse 1.2s infinite ease-in-out; }
.emoji-lightning { animation: emojiLightning 1.5s infinite linear; }
.emoji-glassGlow { animation: emojiGlassGlow 2.5s infinite ease-in-out; }
.emoji-shocked { animation: emojiShocked 1.8s infinite ease-in-out; }
.emoji-applause { animation: emojiApplause 0.8s infinite ease-in-out; }
.emoji-handshake { animation: emojiHandshake 2s infinite ease-in-out; }
.emoji-heartbeat { animation: emojiHeartbeat 1s infinite ease-in-out; }
.emoji-target { animation: emojiTarget 2s infinite ease-in-out; }

/* 3. Eğlenceli & Hareketli Animations */
.emoji-rocketFly { animation: emojiRocketFly 1.8s infinite ease-in-out; }
.emoji-brickWall { animation: emojiBrickWall 2s infinite ease-in-out; }
.emoji-bomb { animation: emojiBomb 1.2s infinite ease-in-out; }
.emoji-ghost { animation: emojiGhost 3s infinite ease-in-out; }
.emoji-spin { animation: emojiSpin 2s infinite linear; }
.emoji-drift { animation: emojiDrift 2.5s infinite ease-in-out; }
.emoji-money { animation: emojiMoney 2.2s infinite ease-in-out; }
.emoji-unicorn { animation: emojiUnicorn 3s infinite ease-in-out; }
.emoji-pizza { animation: emojiPizza 2.5s infinite linear; }
.emoji-ice { animation: emojiIce 2s infinite ease-in-out; }

@keyframes emojiScalePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255,255,255,0.4)); }
}
@keyframes emojiYawing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}
@keyframes emojiWobble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-3px, -2px) rotate(-3deg); }
  50% { transform: translate(3px, 2px) rotate(3deg); }
  75% { transform: translate(-2px, 3px) rotate(-2deg); }
}
@keyframes emojiEyesShift {
  0%, 45%, 100% { transform: scaleX(1); }
  50%, 95% { transform: scaleX(-1); }
}
@keyframes emojiWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}
@keyframes emojiShudder {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, 1px); }
}
@keyframes emojiShrug {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px) scale(1.05); }
}
@keyframes emojiBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
@keyframes emojiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes emojiFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes emojiFirePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px #ff5722); }
  50% { transform: scale(1.18); filter: drop-shadow(0 0 18px #ff7043); }
}
@keyframes emojiLightning {
  0%, 90%, 100% { opacity: 1; filter: none; }
  92%, 96% { opacity: 0.6; filter: drop-shadow(0 0 15px #ffeb3b) invert(0.1); }
}
@keyframes emojiGlassGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.2)); }
  50% { filter: drop-shadow(0 0 12px #00e5ff); }
}
@keyframes emojiShocked {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}
@keyframes emojiApplause {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) rotate(4deg); }
}
@keyframes emojiHandshake {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05) translateX(3px); }
}
@keyframes emojiHeartbeat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.15); }
  45% { transform: scale(1.05); }
  60% { transform: scale(1.2); }
}
@keyframes emojiTarget {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.2) drop-shadow(0 0 8px #4caf50); }
}
@keyframes emojiRocketFly {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-40px) scale(0.6); opacity: 0; }
  55% { transform: translateY(40px) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes emojiBrickWall {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.1) drop-shadow(0 0 10px #795548); }
}
@keyframes emojiBomb {
  0%, 100% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.1) rotate(-6deg); }
  30% { transform: scale(0.95) rotate(6deg); }
  45% { transform: scale(1.05) rotate(-3deg); }
  60% { transform: scale(0.98) rotate(3deg); }
}
@keyframes emojiGhost {
  0%, 100% { opacity: 0.9; transform: translateY(0); }
  50% { opacity: 0.15; transform: translateY(-6px); }
}
@keyframes emojiSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes emojiDrift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-10px, -4px); }
  66% { transform: translate(8px, 4px); }
}
@keyframes emojiMoney {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  50% { transform: translateY(15px) rotate(15deg); opacity: 0.8; }
  100% { transform: translateY(30px) rotate(-15deg); opacity: 0; }
}
@keyframes emojiUnicorn {
  0%, 100% { transform: translate(0,0) rotate(0deg); filter: hue-rotate(0deg); }
  50% { transform: translate(2px, -8px) rotate(8deg); filter: hue-rotate(180deg); }
}
@keyframes emojiPizza {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes emojiIce {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #bbdefb); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 12px #90caf9); }
}

/* Radial Emoji Button */
.radial-emoji-button {
  position: absolute;
  top: 13%;
  left: 4.7%;
  width: var(--emoji-btn-size, clamp(56px, 7.4vw, 86px));
  height: var(--emoji-btn-size, clamp(56px, 7.4vw, 86px));
  min-height: 0;
  border-radius: 50%;
  border: 2px solid var(--emoji-btn-border-color, rgba(168, 85, 247, 0.7));
  background: var(--emoji-btn-bg, rgba(168, 85, 247, 0.08));
  color: var(--emoji-btn-color, #f3e8ff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  z-index: 5;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
  opacity: var(--emoji-btn-opacity, 0.8);
}

.radial-emoji-button:active,
.radial-emoji-button.active {
  background: rgba(168, 85, 247, 0.24) !important;
  border-color: rgba(192, 132, 252, 1) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.4) !important;
}

.radial-emoji-button.hidden {
  display: none;
}

/* Voice Talk Button */
.voice-talk-button {
  position: absolute;
  bottom: 13%;
  right: 4.7%;
  width: var(--voice-btn-size, clamp(56px, 7.4vw, 86px));
  height: var(--voice-btn-size, clamp(56px, 7.4vw, 86px));
  min-height: 0;
  border-radius: 50%;
  border: 2px solid var(--voice-btn-border-color, rgba(59, 130, 246, 0.7));
  background: var(--voice-btn-bg, rgba(59, 130, 246, 0.08));
  color: var(--voice-btn-color, #dbeafe);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  z-index: 5;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(4px);
  opacity: var(--voice-btn-opacity, 0.8);
}

.voice-talk-button:active,
.voice-talk-button.active {
  background: rgba(59, 130, 246, 0.24) !important;
  border-color: rgba(96, 165, 250, 1) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.4) !important;
}

.voice-talk-button.recording {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 1) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
  animation: pulseRecording 1.2s infinite ease-in-out;
}

@keyframes pulseRecording {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.voice-talk-button.hidden {
  display: none;
}

.voice-scope-canvas {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.14s ease;
  z-index: 17;
}
.voice-scope-canvas.show { opacity: 1; }

.voice-scope-hint {
  position: absolute;
  right: 4.7%;
  bottom: calc(13% + clamp(64px, 9vw, 98px));
  transform: translateX(28%);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: 0.6px;
  color: #fff;
  background: rgba(2, 6, 23, 0.82);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.42);
  z-index: 17;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
}
.voice-scope-hint.show { opacity: 1; }
.voice-scope-hint.team { border-color: rgba(34, 197, 94, 0.9); background: rgba(5, 46, 22, 0.92); }
.voice-scope-hint.all { border-color: rgba(249, 115, 22, 0.95); background: rgba(67, 20, 7, 0.92); }

/* Radial Emoji Dial */
.radial-emoji-dial {
  position: absolute;
  z-index: 1000;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  display: none;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.15s ease;
}

.radial-emoji-dial.show {
  display: flex;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.radial-emoji-dial .dial-center {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  z-index: 10;
}

.radial-emoji-dial .dial-emoji-slot {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 5;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.radial-emoji-dial .dial-emoji-slot.selected {
  transform: scale(1.22);
  background: rgba(0, 229, 255, 0.25);
  border-color: rgba(0, 229, 255, 1);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.6);
  z-index: 8;
}

/* --- Emoji Editor Split Layout & Circular Dial styling --- */
.emoji-editor-split-layout {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .emoji-editor-split-layout {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

.emoji-dial-left-column {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 260px;
}

.emoji-dial-right-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 260px;
  text-align: left;
}

.radial-emoji-config-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.emoji-dial-visualization-wrapper {
  position: relative;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(30, 41, 59, 0.15) 0%, rgba(15, 23, 42, 0.55) 100%);
  border: 2px dashed rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  margin: 10px auto;
  box-sizing: border-box;
}

/* Concentric ring tracks for circular dial styles */
.emoji-dial-visualization-wrapper.classic-8::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.emoji-dial-visualization-wrapper.dynamic-16::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 184px;
  height: 184px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.emoji-dial-visualization-wrapper.multi-ring::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 190px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.emoji-dial-visualization-wrapper.multi-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.emoji-dial-center-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  z-index: 2;
  box-sizing: border-box;
}

.emoji-slot-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 38px;
  z-index: 5;
  box-sizing: border-box;
  text-align: center;
}

.emoji-slot-btn {
  width: 32px;
  height: 32px;
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.emoji-slot-btn:hover {
  border-color: rgba(250, 204, 21, 0.5);
  transform: scale(1.08);
}

.emoji-slot-btn.active {
  border-color: #facc15;
  background: rgba(250, 204, 21, 0.1);
  box-shadow: 0 0 12px #facc15;
  transform: scale(1.12);
}

.emoji-slot-inner {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.emoji-slot-num {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 800;
}

.emoji-slot-label {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.emoji-slot-container.active .emoji-slot-label {
  color: #facc15;
}

.emoji-slot-clear-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ef4444;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}

.emoji-slot-clear-btn:hover {
  transform: scale(1.15);
  background: #dc2626;
}

.emoji-style-buttons-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.style-select-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  flex: 1;
}

.style-select-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.style-select-btn.active {
  background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
  border: none;
  color: #0f172a;
  box-shadow: 0 4px 10px rgba(250, 204, 21, 0.25);
}

.team-screen {
  width: min(1120px, calc(100vw - 28px));
  max-height: min(86vh, 760px);
  overflow: auto;
}

.team-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.team-tabs button,
.team-jersey-choice,
.team-hub-card,
.team-mine-card,
.team-list-card,
.team-header-card,
.team-section,
.team-detail-head,
.team-manage-row,
.team-warning,
.team-create-panel {
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.72);
  color: inherit;
}

.team-tabs button {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

.team-tabs button.selected,
.team-jersey-choice.selected {
  border-color: rgba(96, 165, 250, 0.8);
  background: rgba(37, 99, 235, 0.24);
}

.team-hub-grid,
.team-mine-grid,
.team-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.team-hub-card,
.team-mine-card {
  min-height: 132px;
  border-radius: 8px;
  padding: 18px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
  cursor: pointer;
}

.team-hub-card strong {
  font-size: 1.08rem;
}

.team-mine-card em {
  font-style: normal;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.14);
  color: #bfdbfe;
  font-size: 0.8rem;
  font-weight: 800;
}

.team-hub-card span:last-child,
.team-mine-card span,
.team-muted,
.team-member-row span,
.team-schedule-row span,
.team-match-row span,
.team-match-row small {
  color: rgba(226, 232, 240, 0.72);
}

.team-hub-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #93c5fd;
}

.team-create-panel,
.team-warning,
.team-section,
.team-detail-head,
.team-manage-row,
.team-header-card,
.team-list-card {
  border-radius: 8px;
  padding: 14px;
}

.team-field-label {
  display: block;
  margin: 0 0 7px;
  font-weight: 800;
  color: #e5e7eb;
}

.team-text-input,
.team-chat-form input,
.team-schedule-form input,
.team-schedule-form select {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(2, 6, 23, 0.54);
  color: #f8fafc;
  padding: 0 12px;
  font: inherit;
}

.team-jersey-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.team-jersey-choice {
  min-height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
}

.team-jersey-swatch {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(135deg, var(--jersey-a) 0 50%, var(--jersey-b) 50% 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.team-jersey-swatch.large {
  width: 48px;
  height: 48px;
}

.team-form-actions,
.team-chat-form,
.team-schedule-form,
.team-request-row,
.team-schedule-row,
.team-training-active,
.team-detail-head,
.team-member-actions,
.team-manage-player {
  display: flex;
  gap: 8px;
  align-items: center;
}

.team-detail-head {
  justify-content: center;
  position: relative;
  margin-bottom: 12px;
}

.team-detail-head button {
  position: absolute;
  left: 14px;
}

.team-detail-head h3 {
  margin: 0;
  font-size: 1.18rem;
}

.team-form-actions button,
.team-request-row button,
.team-chat-form button,
.team-schedule-form button,
.team-detail-head button,
.team-member-actions button,
.team-manage-row button,
.team-training-box button,
.team-list-card button {
  min-height: 40px;
  border-radius: 8px;
}

.team-list-card {
  display: grid;
  gap: 12px;
}

.team-list-main,
.team-header-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-list-main h3,
.team-header-card h3,
.team-section h3 {
  margin: 0;
}

.team-stat-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.team-stat-strip span {
  min-width: 72px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.2);
  text-align: center;
  font-weight: 800;
}

.team-warning {
  display: grid;
  gap: 10px;
}

.team-member-list,
.team-chat-log,
.team-schedule-list {
  display: grid;
  gap: 8px;
}

.team-member-row,
.team-chat-message,
.team-schedule-row,
.team-match-row {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.38);
  border-radius: 8px;
  padding: 10px;
}

.team-member-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.team-member-actions-row {
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
}

.team-member-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.team-manage-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 190px) minmax(220px, 1.3fr) auto;
  gap: 10px;
  align-items: center;
}

.team-manage-row select {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(2, 6, 23, 0.54);
  color: #f8fafc;
  padding: 0 10px;
  font: inherit;
}

.team-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.team-permission-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.34);
  color: rgba(226, 232, 240, 0.84);
  font-size: 0.82rem;
  font-weight: 800;
}

.profile-mini-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  color: white;
  font-weight: 900;
  background-size: cover;
  background-position: center;
}

.team-member-row em {
  font-style: normal;
  color: #86efac;
  font-size: 0.82rem;
}

.team-section {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.team-request-row,
.team-schedule-row,
.team-training-active {
  justify-content: space-between;
}

.team-chat-log {
  max-height: 220px;
  overflow: auto;
}

.team-chat-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.team-chat-tabs button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
  color: inherit;
  font-weight: 800;
}

.team-chat-tabs button.selected {
  border-color: rgba(96, 165, 250, 0.8);
  background: rgba(37, 99, 235, 0.28);
}

.team-chat-message strong {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #f8fafc;
}

.team-chat-message strong span {
  color: #93c5fd;
  font-size: 0.78rem;
}

.team-chat-message p {
  margin: 5px 0 0;
  color: #e5e7eb;
}

.team-schedule-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) minmax(120px, 1fr) auto;
}

.team-match-row {
  display: grid;
  gap: 4px;
}

.team-host-transfer-list {
  display: grid;
  gap: 8px;
}

@media (max-width: 760px) {
  .team-tabs,
  .team-hub-grid,
  .team-mine-grid,
  .team-list-grid,
  .team-jersey-grid,
  .team-schedule-form,
  .team-manage-row,
  .team-permission-grid,
  .team-member-actions-row {
    grid-template-columns: 1fr;
  }

  .team-header-card,
  .team-detail-head,
  .team-request-row,
  .team-schedule-row,
  .team-training-active,
  .team-chat-form,
  .team-member-actions,
  .team-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .team-detail-head button {
    position: static;
  }

  .team-stat-strip {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================================================
   SAHAX PREMIUM TEAMS PANEL REDESIGN STYLES
   ========================================================================== */

/* General Glassmorphism Elements */
.team-screen .premium-glass {
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), 
              0 0 1px 1px rgba(255, 255, 255, 0.1) inset;
}

.team-screen .premium-header {
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border-bottom: 2px solid rgba(6, 182, 212, 0.3);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12px 12px 0 0;
}

.team-screen .premium-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
  margin: 0;
}

.team-screen .back-btn {
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.team-screen .back-btn:hover {
  transform: translateX(-4px);
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Team Header Card Glows */
.team-header-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px !important;
  margin-bottom: 20px;
  border-radius: 12px !important;
}

.team-header-jersey-container {
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.team-name-glow {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
  text-shadow: 0 0 12px rgba(6, 182, 212, 0.6), 0 0 24px rgba(6, 182, 212, 0.2);
}

.team-captain-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #facc15;
  font-size: 0.85rem;
  font-weight: 700;
}

/* Stat Badges */
.team-stat-strip {
  display: flex;
  gap: 10px;
}
.stat-badge {
  font-size: 0.85rem;
  font-weight: 800;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
.badge-rank {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(202, 138, 4, 0.25)) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
  color: #fde047 !important;
}
.badge-points {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.25)) !important;
  border-color: rgba(6, 182, 212, 0.35) !important;
  color: #67e8f9 !important;
}
.badge-capacity {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.25)) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #6ee7b7 !important;
}

/* Premium Row Lists */
.premium-row {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-left: 4px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.premium-row:hover {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-left-color: #06b6d4 !important;
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.15), 0 4px 10px rgba(0, 0, 0, 0.3);
}

.premium-list-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 6px;
}
.premium-list-container::-webkit-scrollbar {
  width: 6px;
}
.premium-list-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.premium-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.premium-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.premium-empty {
  padding: 40px !important;
  text-align: center;
  color: #94a3b8 !important;
  font-size: 0.95rem;
  background: rgba(15, 23, 42, 0.3) !important;
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px;
}

/* Premium Hub Grid & Mine Cards */
.premium-grid {
  gap: 16px !important;
}

.premium-mine-btn {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.premium-mine-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.premium-mine-btn:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.25), 0 4px 10px rgba(0, 0, 0, 0.3);
}
.premium-mine-btn:hover::before {
  opacity: 1;
}

.team-mine-icon-wrapper {
  background: rgba(6, 182, 212, 0.1);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(6, 182, 212, 0.2);
  transition: all 0.25s ease;
}
.premium-mine-btn:hover .team-mine-icon-wrapper {
  background: #06b6d4;
  color: #fff;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
  border-color: #06b6d4;
  transform: scale(1.05);
}

.team-mine-content strong {
  font-size: 1.1rem !important;
  color: #fff;
  display: block;
  margin-bottom: 4px;
}
.team-mine-content span {
  font-size: 0.8rem;
  color: #94a3b8 !important;
}

.team-mine-meta {
  font-style: normal;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px !important;
  border-radius: 99px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}
.premium-mine-btn:hover .team-mine-meta {
  border-color: rgba(6, 182, 212, 0.3) !important;
}

/* Animations & Pulses */
.active-badge-pulse {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
  animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 10px 2px rgba(16, 185, 129, 0.3);
  }
}

/* Buttons Styling */
.team-screen .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.85rem;
  min-height: 38px;
}

.team-screen .btn-cyan {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25);
}
.team-screen .btn-cyan:hover {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  box-shadow: 0 6px 15px rgba(6, 182, 212, 0.4);
  transform: translateY(-1px);
}

.team-screen .btn-emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}
.team-screen .btn-emerald:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 15px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.team-screen .btn-red {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff;
  box-shadow: 0 4px 10px rgba(244, 63, 94, 0.25);
}
.team-screen .btn-red:hover {
  background: linear-gradient(135deg, #e11d48, #be123c);
  box-shadow: 0 6px 15px rgba(244, 63, 94, 0.4);
  transform: translateY(-1px);
}

.team-screen .btn-secondary {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}
.team-screen .btn-secondary:hover {
  background: rgba(51, 65, 85, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.team-screen .btn-disabled {
  background: rgba(30, 41, 59, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #64748b !important;
  cursor: not-allowed !important;
}

.team-screen .btn-success-light {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  cursor: default !important;
}

.team-screen .btn-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}
.team-screen .btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.team-screen .btn-lg {
  padding: 12px 24px;
  font-size: 0.95rem;
  border-radius: 10px;
}
.team-screen .btn-sm {
  padding: 4px 10px;
  font-size: 0.78rem;
  min-height: 28px;
}
.team-screen .btn-block {
  width: 100%;
}

/* Role Badges */
.role-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  border: 1px solid transparent;
}
.role-captain {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.3);
  color: #fbbf24;
}
.role-assistant {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
  color: #22d3ee;
}
.role-player {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}

/* Online Indicator wrap */
.online-indicator-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.indicator-dot.online {
  background-color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}
.indicator-dot.offline {
  background-color: #64748b;
}
.status-text {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
}
.online .status-text { color: #34d399; }
.offline .status-text { color: #94a3b8; }

/* Premium Card & Sections */
.premium-card-sec {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 16px !important;
}

.sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.sec-title .icon {
  font-size: 1.25rem;
}

.sub-sec-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #cbd5e1;
  margin: 16px 0 10px 0;
}

/* Select & Inputs */
.premium-select, .premium-input, .premium-chat-input {
  width: 100%;
  background: rgba(2, 6, 23, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
  font-size: 0.88rem !important;
}
.premium-select:focus, .premium-input:focus, .premium-chat-input:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
  outline: none;
  background: rgba(2, 6, 23, 0.8) !important;
}

.premium-checkbox {
  cursor: pointer;
  user-select: none;
}
.premium-checkbox input[type="checkbox"] {
  accent-color: #06b6d4;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Training Lobby styles */
.active-lobby-glowing {
  background: rgba(16, 185, 129, 0.04) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 12px;
  padding: 20px;
  animation: activePulse 3s infinite ease-in-out;
}

@keyframes activePulse {
  0%, 100% {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }
  50% {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
  }
}

.active-badge-pulse-large {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
  animation: badgePulseLarge 1.5s infinite ease-in-out;
}

@keyframes badgePulseLarge {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 16px rgba(16, 185, 129, 1); }
  100% { transform: scale(0.9); opacity: 0.6; }
}

.team-info-alert {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.team-info-alert .alert-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.team-info-alert .alert-content strong {
  display: block;
  color: #fff;
  margin-bottom: 4px;
  font-size: 0.95rem;
}
.team-info-alert .alert-content span {
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.4;
  display: block;
}

.premium-card-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.premium-card-btn {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px;
  padding: 16px !important;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.premium-card-btn:hover:not(:disabled) {
  border-color: #06b6d4 !important;
  background: rgba(15, 23, 42, 0.8) !important;
  transform: translateY(-2px);
}
.premium-card-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.premium-card-btn .card-icon {
  font-size: 1.5rem;
}
.premium-card-btn strong {
  font-size: 0.88rem;
  color: #fff;
}
.premium-card-btn .badge-count {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 99px;
  color: #94a3b8;
}

/* Premium Chat styles */
.chat-full-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 480px;
}

.premium-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 10px;
}

.premium-tabs button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #94a3b8 !important;
  padding: 8px 16px !important;
  font-weight: 700;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}
.premium-tabs button:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.premium-tabs button.selected {
  background: rgba(6, 182, 212, 0.1) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  color: #22d3ee !important;
}

.premium-chat-box {
  flex: 1;
  background: rgba(2, 6, 23, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px;
  padding: 16px !important;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-chat-message-bubble {
  display: flex;
  gap: 10px;
  max-width: 75%;
  align-items: flex-start;
  margin-bottom: 2px;
  animation: chatFadeIn 0.2s ease-out;
}

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

.team-chat-message-bubble.message-self {
  margin-left: auto;
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.message-content-wrapper {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  border-radius: 4px 12px 12px 12px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.message-self .message-content-wrapper {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.15));
  border-color: rgba(6, 182, 212, 0.3);
  border-radius: 12px 4px 12px 12px;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.1);
}

.team-chat-message-bubble.captain .message-content-wrapper {
  border-color: rgba(234, 179, 8, 0.25);
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.05);
}

.team-chat-message-bubble.assistant .message-content-wrapper {
  border-color: rgba(34, 211, 238, 0.25);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.05);
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.sender-name {
  color: #cbd5e1;
  font-weight: 700;
  font-size: 0.8rem;
}
.message-self .sender-name {
  color: #67e8f9;
}
.sender-role {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.role-captain {
  color: #fbbf24;
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.3);
}
.role-assistant {
  color: #22d3ee;
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.3);
}

.message-body {
  margin: 0 !important;
  color: #f1f5f9 !important;
  word-break: break-word;
  font-size: 0.88rem;
}

.message-time {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 4px;
}
.message-self .message-time {
  color: rgba(6, 182, 212, 0.6);
}

/* Quick Tactics Bar */
.quick-tactics-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px 0;
  scrollbar-width: none;
}
.quick-tactics-bar::-webkit-scrollbar {
  display: none;
}
.tactic-chip {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tactic-chip:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: #06b6d4;
  color: #fff;
  transform: translateY(-1px);
}

.premium-input-bar {
  display: flex;
  gap: 10px;
}
.premium-chat-input {
  flex: 1;
}

/* VS Fikstür / Schedules Styling */
.premium-glass-form {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}

.premium-glass-form .form-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.premium-glass-form .form-lbl {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}

.form-action-btn {
  display: flex;
  align-items: flex-end;
}

.schedule-vs {
  width: 100%;
}
.teams-names {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 6px;
}
.vs-divider {
  color: #ef4444;
  font-style: italic;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  font-size: 0.9rem;
}
.team-home-lbl { color: #60a5fa; }
.team-away-lbl { color: #f87171; }

.schedule-meta-details {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.schedule-time {
  font-size: 0.8rem;
  color: #94a3b8;
}

.schedule-status-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.schedule-status-badge.status-pending {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.25);
}
.schedule-status-badge.status-accepted {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.schedule-status-badge.status-declined {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.25);
}

.schedule-note {
  font-size: 0.8rem;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.03);
  padding: 2px 8px;
  border-radius: 4px;
}

.schedule-respond-btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* Match Records Styling */
.match-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.match-opponent {
  font-size: 0.95rem;
  color: #fff;
}
.match-date {
  font-size: 0.78rem;
  color: #94a3b8;
}

.match-score-board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 1.5rem;
  font-weight: 900;
  margin: 10px 0;
}
.team-score {
  min-width: 32px;
  text-align: center;
  border-radius: 6px;
  padding: 2px 6px;
}
.blue-score {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.red-score {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.score-dash {
  color: #475569;
}

.match-players-list {
  display: flex;
  gap: 6px;
  font-size: 0.78rem;
}
.match-players-list .label {
  color: #64748b;
  font-weight: 700;
}
.match-players-list .players {
  color: #cbd5e1;
}

/* Responsive Overrides */
@media (max-width: 760px) {
  .team-screen .team-manage-row {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .team-screen .premium-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .team-screen .premium-row:hover {
    transform: none !important;
  }
  .team-screen .online-indicator-wrap {
    margin-left: 0;
  }
  .team-screen .schedule-respond-btns {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  .team-screen .team-header-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Social Hub Screen Styles */
.social-hub-screen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: calc(100dvh - 42px);
  max-height: calc(100dvh - 42px);
  overflow: hidden;
}

.social-hub-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px;
  border-radius: 12px;
}

.social-hub-tab {
  min-height: 38px;
  background: transparent;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 850;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
}

.social-hub-tab:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.04);
}

.social-hub-tab.active,
.has-custom-bg .social-hub-tab.active {
  color: #04120a !important;
  background: linear-gradient(180deg, #4ade80, #16a34a) !important;
  border-color: rgba(134, 239, 172, 0.9) !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25) !important;
  text-shadow: none !important;
}

.social-hub-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 8px;
  overflow: hidden;
}

/* Mailbox styling */
.mailbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.mailbox-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.mailbox-card:hover {
  border-color: rgba(6, 182, 212, 0.3);
  background: rgba(15, 23, 42, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.mailbox-card.unread {
  border-color: rgba(6, 182, 212, 0.5);
  background: radial-gradient(circle at 0% 0%, rgba(6, 182, 212, 0.08), transparent 45%), rgba(15, 23, 42, 0.8);
}

.mailbox-card-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}

.mailbox-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mailbox-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

.mailbox-card.unread .mailbox-dot {
  background: #22d3ee;
  box-shadow: 0 0 8px #22d3ee;
}

.mailbox-title {
  font-size: 0.84rem;
  font-weight: 850;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailbox-time {
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.mailbox-card-body {
  max-height: 0;
  opacity: 0;
  padding: 0 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #cbd5e1;
  border-top: 1px solid transparent;
}

.mailbox-card.expanded .mailbox-card-body {
  max-height: 300px;
  opacity: 1;
  padding: 12px 14px;
  border-top-color: rgba(255, 255, 255, 0.05);
}

/* Chat Containers */
.social-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 10px;
}

.social-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.chat-msg-wrapper {
  display: flex;
  width: 100%;
}

.chat-msg-wrapper.msg-self {
  justify-content: flex-end;
}

.chat-msg-wrapper.msg-other {
  justify-content: flex-start;
}

.chat-msg-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 12px;
  position: relative;
  font-size: 0.78rem;
  line-height: 1.4;
}

.msg-self .chat-msg-bubble {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-bottom-right-radius: 2px;
  color: #f0fdfa;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1);
}

.msg-other .chat-msg-bubble {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 2px;
  color: #f1f5f9;
}

.chat-msg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.68rem;
}

.chat-msg-sender {
  color: #38bdf8;
  font-weight: 850;
}

.chat-msg-team {
  color: #a78bfa;
  font-weight: 800;
}

.chat-msg-role {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 900;
  text-transform: uppercase;
}

.chat-msg-role.role-captain {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.32);
}

.chat-msg-role.role-assistant {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.32);
}

.chat-msg-text {
  word-break: break-word;
  white-space: pre-wrap;
}

.chat-msg-time {
  display: block;
  text-align: right;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
  font-weight: 700;
}

.social-chat-input-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px;
}

.social-chat-input-bar input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #f8fafc;
  font-size: 0.8rem;
  padding: 6px 10px;
}

.social-chat-input-bar button {
  min-height: 36px;
  padding: 0 16px;
  font-weight: 850;
  font-size: 0.76rem;
}

/* Captains chat theme adjustments */
.captains-chat-theme .social-chat-messages {
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.03), transparent 70%);
}

/* Friends Layout inside Hub */
.social-friends-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 1fr;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.social-friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-right: 10px;
  min-width: 0;
  min-height: 0;
}

.social-friends-list h3 {
  margin: 0 0 4px 0;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.social-friends-list-inner {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.friend-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 0;
}

.friend-list-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.friend-list-item.active {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

.friend-item-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.friend-item-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #10b981);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.friend-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.friend-item-name {
  font-size: 0.78rem;
  font-weight: 850;
  color: #f1f5f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-item-status-text {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 750;
}

.friend-item-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.friend-item-status-dot.online {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.friend-item-status-dot.offline {
  background: #64748b;
}

.social-dm-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.social-dm-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  text-align: center;
}

.dm-placeholder-icon {
  font-size: 2.2rem;
  opacity: 0.45;
  animation: float 3s ease-in-out infinite;
}

.social-dm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
  font-size: 0.86rem;
  font-weight: 850;
  color: #f1f5f9;
}

.social-dm-messages {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Helpers */
.social-hub-loading,
.social-hub-error,
.social-empty-state,
.chat-empty-state,
.friends-list-empty,
.social-access-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  flex: 1;
}

.social-access-denied {
  color: #ef4444;
}

.social-access-denied h3 {
  margin: 10px 0 4px 0;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  font-weight: 950;
}

.lock-icon {
  font-size: 2.4rem;
  animation: pulseLock 2s infinite;
}

.empty-icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* Menu Unread Badge styling */
.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 950;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid #0f172a;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  min-width: 14px;
  text-align: center;
}

.unread-badge.hidden {
  display: none;
}

@keyframes pulseLock {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 16px rgba(239, 68, 68, 0.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 640px) {
  .social-friends-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
  }
  
  .social-friends-list {
    border-right: 0;
    padding-right: 0;
    height: 120px;
    max-height: 120px;
    min-height: 0;
  }

  .social-dm-pane {
    height: 100%;
    min-height: 0;
  }
}

.online-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.online-player-row:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.25);
  transform: translateY(-1px);
}
.player-row-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.player-row-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-list-team-tag {
  font-size: 0.65rem;
  font-weight: 850;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- VIRTUAL KEYBOARD --- */
.virtual-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: rgba(10, 15, 28, var(--vk-opacity, 0.50)); /* %50 opacity */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 4px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.virtual-keyboard.active {
  transform: translateY(0);
}

.virtual-keyboard.match-end-keyboard {
  z-index: 100500 !important;
}

.vk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 4px 8px;
}

.vk-header-title {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vk-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #f8fafc;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}

.vk-display-container {
  padding: 0 10px 12px 10px;
  width: 100%;
}

.vk-display {
  width: 100%;
  height: 42px;
  background: rgba(255, 255, 255, 0.12); /* Koyu gri şeffaf arka plan */
  border-radius: 12px; /* iOS tarzı yuvarlak hatlar */
  color: #fff;
  font-size: 1.1rem;
  padding: 0 16px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  border: none;
}

.vk-display::before {
  content: '💬';
  margin-right: 12px;
  font-size: 1.1rem;
  opacity: 0.7;
}

.vk-display:empty::before {
  content: '💬 Mesaj yaz...';
  color: rgba(255, 255, 255, 0.5);
}

.vk-display::after {
  content: '|';
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  color: #fff;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#vkKeysContainer {
  display: flex;
  flex-direction: column;
  gap: var(--vk-row-gap, 8px); /* Satırlar arası boşluk */
  width: 100%;
}

.vk-row {
  display: flex;
  justify-content: center;
  gap: var(--vk-key-gap, 4px); /* Harfler arası boşluk */
  width: 100%;
}

.vk-key {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #f8fafc;
  border-radius: 8px;
  height: calc(52px * var(--vk-height-scale, 1.0)); /* 46px -> 52px (Daha rahat basım) */
  min-width: 0;
  flex: 1;
  max-width: calc(80px * var(--vk-width-scale, 1.0)); /* 44px -> 80px (Yatayda çok daha geniş) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: var(--vk-font-size, 1.25rem); /* Harfleri biraz daha büyüttük */
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: background 0.1s, transform 0.1s;
}

.vk-key:active, .vk-key.pressed {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.92);
}

.vk-key.special {
  background: rgba(30, 41, 59, 0.8);
  flex: 1.5;
  max-width: 60px;
  font-size: 0.85rem;
  font-weight: 700;
}

.vk-key.space {
  flex: 4;
  max-width: 180px;
}

.vk-key.send {
  background: #00f0ff;
  color: #000;
  font-weight: 800;
  flex: 1.5;
  max-width: 70px;
  text-shadow: none;
}

.friend-unread-badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 950;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 14px;
  text-align: center;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  margin-left: auto;
}

.toast.visible.dm-toast {
  opacity: 0.6 !important;
}

/* Custom Menu Background Button/Element Opacity Config */
.has-custom-bg button,
.has-custom-bg .mode-card,
.has-custom-bg .play-choice,
.has-custom-bg .settings-sub-tab,
.has-custom-bg .tab-button,
.has-custom-bg .social-hub-tab,
.has-custom-bg input,
.has-custom-bg select,
.has-custom-bg textarea {
  transition: all 0.2s ease, transform 0.2s ease !important;
}

/* 1. Base / Generic Buttons & Elements */
.has-custom-bg button {
  background: rgba(51, 65, 85, var(--menu-btn-bg-opacity, 1)) !important;
  color: rgba(255, 255, 255, var(--menu-btn-content-opacity, 1)) !important;
  border: 1px solid rgba(255, 255, 255, calc(0.08 * var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg button:hover,
.has-custom-bg button:focus {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 2. Gradient / Primary Styled Buttons */
.has-custom-bg .btn-cyan,
.has-custom-bg .btn-primary {
  background: linear-gradient(135deg, rgba(6, 182, 212, var(--menu-btn-bg-opacity, 1)), rgba(8, 145, 178, var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg .btn-cyan:hover,
.has-custom-bg .btn-primary:hover {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
}

.has-custom-bg .btn-emerald,
.has-custom-bg .btn-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, var(--menu-btn-bg-opacity, 1)), rgba(5, 150, 105, var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg .btn-emerald:hover,
.has-custom-bg .btn-success:hover {
  background: linear-gradient(135deg, #10b981, #059669) !important;
}

.has-custom-bg .btn-red,
.has-custom-bg .btn-danger {
  background: linear-gradient(135deg, rgba(244, 63, 94, var(--menu-btn-bg-opacity, 1)), rgba(225, 29, 72, var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg .btn-red:hover,
.has-custom-bg .btn-danger:hover {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
}

.has-custom-bg .btn-secondary {
  background: rgba(71, 85, 105, var(--menu-btn-bg-opacity, 1)) !important;
}
.has-custom-bg .btn-secondary:hover {
  background: rgba(71, 85, 105, 0.95) !important;
}

/* 3. Tab Buttons */
.has-custom-bg .tab-button {
  background: rgba(8, 17, 31, var(--menu-btn-bg-opacity, 0.72)) !important;
  color: rgba(203, 213, 225, var(--menu-btn-content-opacity, 1)) !important;
  border-color: rgba(255, 255, 255, calc(0.1 * var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg .tab-button.active {
  background: linear-gradient(180deg, #4ade80, #16a34a) !important;
  border-color: rgba(134, 239, 172, 0.9) !important;
  color: #04120a !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 12px 24px rgba(34, 197, 94, 0.18) !important;
}
.has-custom-bg .tab-button:hover {
  background: rgba(8, 17, 31, 0.85) !important;
  color: #fff !important;
}
.has-custom-bg .tab-button.active:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
}

/* 4. Play Choice Elements */
.has-custom-bg .play-choice {
  background: rgba(8, 17, 31, var(--menu-btn-bg-opacity, 0.68)) !important;
  color: rgba(226, 232, 240, var(--menu-btn-content-opacity, 1)) !important;
  border-color: rgba(255, 255, 255, calc(0.13 * var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg .play-choice.selected {
  background: rgba(30, 41, 59, var(--menu-btn-bg-opacity, 0.96)) !important;
  color: rgba(255, 255, 255, var(--menu-btn-content-opacity, 1)) !important;
  border-color: rgba(250, 204, 21, calc(0.78 * var(--menu-btn-bg-opacity, 1))) !important;
  box-shadow: 0 8px 22px rgba(250, 204, 21, calc(0.16 * var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg .play-choice:hover {
  background: rgba(8, 17, 31, 0.85) !important;
  color: #fff !important;
}
.has-custom-bg .play-choice.selected:hover {
  background: rgba(30, 41, 59, 0.96) !important;
  color: #fff !important;
}

/* 5. Inputs, Selects, and Textareas */
.has-custom-bg input,
.has-custom-bg select,
.has-custom-bg textarea {
  background: rgba(8, 17, 31, var(--menu-btn-bg-opacity, 0.68)) !important;
  color: rgba(255, 255, 255, var(--menu-btn-content-opacity, 1)) !important;
  border-color: rgba(255, 255, 255, calc(0.12 * var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg input:focus,
.has-custom-bg select:focus,
.has-custom-bg textarea:focus {
  background: rgba(8, 17, 31, 0.9) !important;
  border-color: var(--neon-cyan) !important;
}

/* 6. Mode Cards (Özel Oda / Oyun Modu Seçimi) */
.has-custom-bg .mode-card {
  background: rgba(15, 23, 42, var(--menu-btn-bg-opacity, 0.55)) !important;
  border: 1px solid rgba(255, 255, 255, calc(0.12 * var(--menu-btn-bg-opacity, 1))) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, calc(0.25 * var(--menu-btn-bg-opacity, 1))) !important;
}
.has-custom-bg .mode-card > *:not(.mode-card-glow) {
  opacity: var(--menu-btn-content-opacity, 1) !important;
  transition: opacity 0.2s ease !important;
}
.has-custom-bg .mode-card-glow {
  opacity: var(--menu-btn-glow-opacity, 0.5) !important;
}
.has-custom-bg .mode-card:hover {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.45), 0 0 20px var(--theme-shadow) !important;
}
.has-custom-bg .mode-card:hover > *:not(.mode-card-glow) {
  opacity: 1 !important;
}
.has-custom-bg .mode-card:hover .mode-card-glow {
  opacity: 1 !important;
}

/* ==========================================================================
   UI REDESIGN WORKER - GLASSMORPHISM / NEON GLOW / LANDSCAPE MOBILE OVERHAUL
   ========================================================================== */

/* Typography Overhaul */
h1, h2, h3, h4, h5, h6, .score, .match-clock, #playSetupTitle, #teamLobbyTitle, .mode-card h3 {
    font-family: 'Outfit', sans-serif !important;
}
html, body, button, input, select, textarea, .sub, .mini, .pill, .vk-key, .action-btn-label {
    font-family: 'Inter', sans-serif !important;
}

/* Universal button transitions and scales for touch targets */
button, [role="button"], .play-choice, .social-hub-tab, .settings-sub-tab, .vk-key, .tab-button {
    min-height: 48px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
button:active:not(:disabled), [role="button"]:active, .play-choice:active, .vk-key:active {
    transform: scale(0.96) !important;
}

/* Premium Dark Glassmorphism Theme on all panels, forms, cards, and modals */
.flow-card,
aside.side,
.confirm-card,
.team-lobby-card,
.team-lobby-popup-card,
.virtual-keyboard,
.social-hub-screen,
#splash {
    background: rgba(16, 24, 39, 0.85) !important;
    backdrop-filter: blur(10.5px) !important;
    -webkit-backdrop-filter: blur(10.5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Glowing Borders & Text Shadows on Hover / Active States */
button:hover:not(:disabled),
.play-choice:hover,
.mode-card:hover,
.social-hub-tab:hover,
.settings-sub-tab:hover,
.tab-button:hover {
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.5) !important;
    border-color: #3b82f6 !important;
    text-shadow: 0 0 4px rgba(59, 130, 246, 0.4) !important;
}

/* Specific color-coded buttons with premium palettes */
/* Blue Buttons */
.blue-btn, .btn-cyan, .menu-hero-btn, #startMatchButton, #authSubmitButton {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25) !important;
}
.blue-btn:hover:not(:disabled), .btn-cyan:hover:not(:disabled), .menu-hero-btn:hover:not(:disabled), #startMatchButton:hover:not(:disabled) {
    background: linear-gradient(135deg, #00f5ff, #3b82f6) !important;
    border-color: #00f5ff !important;
    box-shadow: 0 0 16px rgba(0, 245, 255, 0.7) !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
}

/* Green Buttons (Success/Ready) */
.ready, .green-btn, #readyButton, #readyMobileButton, #teamLobbyReadyButton {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25) !important;
    color: #ffffff !important;
}
.ready:hover:not(:disabled), .green-btn:hover:not(:disabled), #readyButton:hover:not(:disabled), #readyMobileButton:hover:not(:disabled), #teamLobbyReadyButton:hover:not(:disabled) {
    background: linear-gradient(135deg, #39ff14, #22c55e) !important;
    border-color: #39ff14 !important;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.7) !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
}
/* Ready Active / Is Ready State */
.ready.is-ready, #readyMobileButton.is-ready, #teamLobbyReadyButton.is-ready {
    background: linear-gradient(135deg, #39ff14, #15803d) !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.8) !important;
}

/* Red Buttons (Danger/Exit) */
.danger, .danger-btn, #leaveButton, #teamLobbyLeaveButton, #exitConfirmYes, #deleteRoomConfirmYes {
    background: linear-gradient(135deg, #ef4444, #991b1b) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25) !important;
    color: #ffffff !important;
}
.danger:hover:not(:disabled), .danger-btn:hover:not(:disabled), #leaveButton:hover:not(:disabled), #teamLobbyLeaveButton:hover:not(:disabled), #exitConfirmYes:hover:not(:disabled), #deleteRoomConfirmYes:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff007f, #ef4444) !important;
    border-color: #ff007f !important;
    box-shadow: 0 0 16px rgba(255, 0, 127, 0.7) !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
}

/* Gold Buttons / Ranked Card (Awards/Ranked) */
.yellow-btn, .ranked-mode-card, #menuVipLevelCard, #menuVipPrivilegesButton {
    background: linear-gradient(135deg, #ffd700, #b45309) !important;
    border: 1px solid rgba(250, 204, 21, 0.4) !important;
    box-shadow: 0 4px 14px rgba(250, 204, 21, 0.25) !important;
    color: #111827 !important;
}
.yellow-btn:hover:not(:disabled), #menuVipLevelCard:hover, #menuVipPrivilegesButton:hover {
    background: linear-gradient(135deg, #ffd700, #facc15) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.7) !important;
    text-shadow: 0 0 5px rgba(17, 24, 39, 0.8) !important;
}

/* Media Queries for Landscape Mobile Viewports (R2 & R3) */
@media (orientation: landscape) and (max-height: 520px) {
    /* Login and Registration compact/2-column layout */
    .auth-card:not(.hidden) {
        max-width: 820px !important;
        width: 95% !important;
        padding: 10px 18px !important;
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 6px 14px !important;
    }
    .auth-card h2 {
        grid-column: span 3 !important;
        margin: 0 !important;
        font-size: 1.25rem !important;
    }
    .auth-card p {
        grid-column: span 3 !important;
        margin: 0 !important;
        font-size: 0.8rem !important;
    }
    .auth-card .auth-tabs {
        grid-column: span 3 !important;
        margin-bottom: 2px !important;
    }

    .auth-card #authError {
        grid-column: span 3 !important;
    }
    .auth-card .auth-form:nth-of-type(1) {
        grid-column: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    .auth-card .auth-divider {
        grid-column: 2 !important;
        align-self: center !important;
        margin: 0 !important;
        writing-mode: vertical-lr !important;
        text-orientation: upright !important;
        font-size: 0.75rem !important;
        color: rgba(255,255,255,0.4) !important;
    }
    .auth-card .auth-form:nth-of-type(2) {
        grid-column: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    .auth-card input, .auth-card button {
        min-height: 36px !important;
        height: 36px !important;
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }
    .auth-card .auth-remember-row {
        margin: 0 !important;
        font-size: 0.75rem !important;
    }

    /* Main Menu Layout: profiling, VIP, coin/diamond, energy bars horizontal/grid */
    #screenMainMenu {
        max-width: 92vw !important;
        width: 95% !important;
        padding: 10px 14px !important;
    }
    #screenMainMenu .main-menu-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    #screenMainMenu .main-menu-accountbar {
        display: grid !important;
        grid-template-columns: 1.2fr 0.8fr 1.2fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    #screenMainMenu .main-menu-account {
        grid-column: span 1 !important;
        min-height: 48px !important;
        padding: 4px 8px !important;
        margin: 0 !important;
    }
    #screenMainMenu .main-menu-vip-level-card,
    #screenMainMenu .main-menu-vip-privileges {
        grid-column: span 1 !important;
        min-height: 48px !important;
        margin: 0 !important;
    }
    #screenMainMenu .main-menu-energy {
        grid-column: span 1 !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 4px 8px !important;
    }
    #screenMainMenu .main-menu-wallet {
        grid-column: span 1 !important;
        min-height: 48px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    #screenMainMenu .wallet-chip {
        min-height: 22px !important;
        padding: 2px 6px !important;
    }
    
    /* Game mode cards stretch horizontally */
    .quick-play-grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }
    .quick-play-grid .mode-card {
        flex: 1 1 0% !important;
        min-width: 190px !important;
        height: auto !important;
        padding: 10px !important;
    }

    /* Settings / Play Setup screen side-by-side columns */
    #screenPlaySetup {
        max-width: 90vw !important;
        width: 95% !important;
        max-height: 95dvh !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
    #screenPlaySetup .play-setup-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 14px !important;
    }
    #screenPlaySetup .play-actions {
        grid-column: span 2 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        justify-content: flex-end !important;
    }
    #screenPlaySetup .play-section {
        padding: 6px 12px !important;
        margin: 0 !important;
    }
    #screenPlaySetup .play-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
    #screenPlaySetup .play-choice {
        min-height: 38px !important;
        padding: 4px 6px !important;
        font-size: 0.8rem !important;
    }

    /* Lobby Room overlay card and grid */
    .team-lobby-overlay {
        padding: 8px !important;
    }
    .team-lobby-card {
        max-height: 98dvh !important;
        padding: 8px 12px !important;
        gap: 6px !important;
    }
    .team-lobby-grid {
        grid-template-columns: 1fr 0.7fr 1fr !important;
        gap: 8px !important;
    }
    .team-column {
        min-height: 120px !important;
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .team-column-title {
        font-size: 0.8rem !important;
        padding-bottom: 2px !important;
    }
    .team-list {
        gap: 3px !important;
    }
    .team-lobby-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
    .team-lobby-actions button {
        min-height: 38px !important;
        height: 38px !important;
        font-size: 0.72rem !important;
        padding: 4px 6px !important;
    }

    /* Side Panel Collapsible behavior to preserve canvas workspace */
    .layout {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }
    aside.side {
        width: 290px !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        padding: 8px !important;
        gap: 8px !important;
        transition: width 0.3s ease !important;
    }
    aside.side .section {
        padding: 6px 10px !important;
        margin-bottom: 4px !important;
    }
    aside.side .row {
        gap: 6px !important;
    }
    
    /* Grid layouts for sub-screens in landscape */
    .inventory-screen, .market-screen, .friends-screen, .leaderboard-screen, .social-hub-screen {
        max-width: 95vw !important;
        width: 98% !important;
        max-height: 96dvh !important;
        padding: 12px !important;
    }

    .inventory-screen, .market-screen {
        overflow: hidden !important; /* Prevent double scrollbars on the card level */
    }

    .friends-screen, .leaderboard-screen, .social-hub-screen {
        overflow-y: auto !important;
    }

    .social-hub-screen {
        height: 96dvh !important;
    }

    #friendsBody {
        display: block !important;
    }

    .scrollable-friend-list {
        max-height: none !important;
    }



    .friends-landscape-layout {
        gap: 8px !important;
    }

    #inventoryBody, #marketBody {
        display: block !important;
        height: calc(100% - 50px) !important;
    }

    .market-layout {
        display: grid !important;
        grid-template-columns: 140px 1fr !important;
        gap: 12px !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .market-category-menu {
        grid-column: 1 !important;
        order: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        overflow-y: auto !important;
        max-height: 100% !important;
        position: static !important;
        scrollbar-width: none !important;
        padding-right: 2px !important;
    }

    .market-category-menu::-webkit-scrollbar {
        display: none !important;
    }

    .market-category-menu button {
        min-height: 36px !important;
        padding: 4px 6px !important;
        font-size: 0.72rem !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .market-grid {
        grid-column: 2 !important;
        order: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
        gap: 8px !important;
        overflow-y: auto !important;
        max-height: 100% !important;
        padding-right: 6px !important;
    }

    .market-grid > .inventory-summary,
    .market-grid > .radial-emoji-config-panel {
        grid-column: 1 / -1 !important;
    }

    .inventory-summary {
        padding: 12px !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .inventory-summary:first-of-type {
        margin-top: 0 !important;
    }

    .inventory-owned-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 10px !important;
    }

    .inventory-owned-card {
        min-height: 180px !important;
        padding: 10px !important;
    }

    .inventory-owned-card .bag-slot-title {
        font-size: 12px !important;
    }

    .inventory-owned-card .bag-slot-desc {
        display: none !important;
    }

    .market-item {
        padding: 8px !important;
        min-height: 150px !important;
    }

    .market-item-title {
        font-size: 12px !important;
    }

    .market-item-desc {
        display: none !important;
    }

    .market-item img,
    .market-item .market-visual,
    .inventory-owned-card img,
    .inventory-owned-card .market-visual,
    .room-card-chip .market-visual {
        max-width: 50px !important;
        height: 50px !important;
        margin: 0 auto 4px auto !important;
    }

    .market-visual > div {
        width: 85% !important;
        height: 85% !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    .market-visual svg {
        width: 100% !important;
        height: 100% !important;
    }

    .market-visual span,
    .market-visual .market-emoji-preview {
        font-size: 26px !important;
    }

    .room-card-chip {
        padding: 6px 10px !important;
        gap: 8px !important;
        flex: 1 1 140px !important;
    }

    .room-card-chip .market-visual {
        margin: 0 !important;
    }

    .emoji-editor-split-layout {
        flex-direction: row !important;
        padding: 12px !important;
        gap: 16px !important;
        margin-bottom: 8px !important;
        align-items: flex-start !important;
    }

    .emoji-dial-left-column {
        min-width: 200px !important;
    }

    .emoji-dial-visualization-wrapper {
        transform: scale(0.72) !important;
        transform-origin: center top !important;
        margin: 0 auto -50px auto !important;
    }

    .emoji-dial-right-column {
        min-width: 200px !important;
        gap: 8px !important;
    }

    .emoji-dial-right-column .radial-emoji-help {
        padding: 6px !important;
        font-size: 10px !important;
    }

    .emoji-style-buttons-row button {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }

    .inventory-screen .screen-header,
    .market-screen .screen-header {
        top: -12px !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 12px !important;
    }
}

/* Safe Area Support */
.app, .flow, .rotate-overlay, .splash, .countdown-overlay, .match-end-panel, .team-lobby-overlay, .confirm-modal, .virtual-keyboard {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
}
.pass-request-button {
    right: calc(4.7% + env(safe-area-inset-right)) !important;
}
.dribble-button {
    right: calc(5.2% + env(safe-area-inset-right)) !important;
}
.voice-talk-button {
    right: calc(5.2% + env(safe-area-inset-right)) !important;
}
#leftJoystick:not(.active) {
    left: calc(16px + env(safe-area-inset-left)) !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}
#rightJoystick:not(.active) {
    right: calc(16px + env(safe-area-inset-right)) !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

/* Premium Stadium Scoreboard Overhaul */
.match-bar {
    background: linear-gradient(135deg, rgba(16, 24, 39, 0.95), rgba(10, 15, 28, 0.98)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-bottom: 3px solid #3b82f6 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 18px rgba(59, 130, 246, 0.45) !important;
    border-radius: 10px !important;
    padding: 4px 11px !important;
    gap: 6px !important;
}
.score {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    font-size: 1.12rem !important;
    border-radius: 4px !important;
    background: rgba(2, 6, 23, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 7px !important;
    height: 29px !important;
    min-height: 29px !important;
    min-width: 40px !important;
}
.score.blue {
    color: #00f5ff !important;
    text-shadow: 0 0 8px rgba(0, 245, 255, 0.6) !important;
    border-color: rgba(0, 245, 255, 0.3) !important;
}
.score.red {
    color: #ff007f !important;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6) !important;
    border-color: rgba(255, 0, 127, 0.3) !important;
}
.match-clock {
    height: 29px !important;
    min-height: 29px !important;
    min-width: 60px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 900 !important;
    font-size: 0.98rem !important;
    background: rgba(15, 23, 42, 0.95) !important;
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 4px !important;
    padding: 1px 8px !important;
}
.match-meta {
    background: linear-gradient(135deg, rgba(16, 24, 39, 0.92), rgba(10, 15, 28, 0.95)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

/* Modern Glowing Joystick Controls */
.mobile-joystick {
    border: 2px solid rgba(0, 245, 255, 0.35) !important;
    background: radial-gradient(circle at center, rgba(16, 24, 39, 0.45) 0%, rgba(2, 6, 23, 0.75) 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.25), inset 0 0 20px rgba(0, 245, 255, 0.1) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mobile-joystick.active {
    border-color: rgba(0, 245, 255, 0.7) !important;
    box-shadow: 0 0 25px rgba(0, 245, 255, 0.5), inset 0 0 25px rgba(0, 245, 255, 0.2) !important;
    z-index: 11 !important;
}
.joystick-knob {
    background: radial-gradient(circle, rgba(0, 245, 255, 0.95) 0%, rgba(37, 99, 235, 0.85) 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.8), 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}
.mobile-joystick.active .joystick-knob {
    background: radial-gradient(circle, rgba(57, 255, 20, 0.95) 0%, rgba(34, 197, 94, 0.85) 100%) !important;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.9), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border-color: #ffffff !important;
}

/* Sub-screens visual polish & high contrast */
.inventory-screen, .market-screen, .friends-screen, .leaderboard-screen, .social-hub-screen, .profile-screen {
    color: #f8fafc !important;
}
.inventory-screen .muted, .market-screen .muted, .friends-screen .muted, .leaderboard-screen .muted, .social-hub-screen .muted, .profile-screen .muted,
.inventory-screen .sub, .market-screen .sub, .friends-screen .sub, .leaderboard-screen .sub, .social-hub-screen .sub, .profile-screen .sub {
    color: #e2e8f0 !important;
}
.inventory-screen button, .market-screen button, .friends-screen button, .leaderboard-screen button, .social-hub-screen button {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.inventory-screen::-webkit-scrollbar,
.market-screen::-webkit-scrollbar,
.friends-screen::-webkit-scrollbar,
.leaderboard-screen::-webkit-scrollbar,
.social-hub-screen::-webkit-scrollbar {
    width: 6px;
}
.inventory-screen::-webkit-scrollbar-thumb,
.market-screen::-webkit-scrollbar-thumb,
.friends-screen::-webkit-scrollbar-thumb,
.leaderboard-screen::-webkit-scrollbar-thumb,
.social-hub-screen::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Global touch scroll optimizations for mobile devices */
.confirm-body,
#onlinePlayersList,
#spectatorRoomList,
.room-list,
.chat-log,
.flow-list {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

.confirm-card {
    touch-action: pan-y !important;
}

/* Modals landscape mobile & small screen height optimizations */
@media (max-height: 580px) {
    .confirm-modal:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }
    .confirm-card {
        max-height: 92dvh !important;
        max-height: 92vh !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .confirm-head {
        flex-shrink: 0 !important;
        padding-bottom: 8px !important;
    }
    .confirm-body {
        max-height: none !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        padding-right: 6px !important;
    }
    .vip-status-header {
        padding: 10px !important;
        margin-bottom: 10px !important;
    }
}

@media (max-height: 520px) {
  .virtual-keyboard {
    padding: 3px 4px 8px 4px !important;
    gap: 4px !important;
  }
  .vk-header {
    padding: 0 8px 2px 8px !important;
  }
  .vk-display-container {
    padding: 0 10px 4px 10px !important;
  }
  .vk-display {
    height: 32px !important;
    font-size: 0.95rem !important;
  }
  .vk-display::before {
    font-size: 0.95rem !important;
    margin-right: 8px !important;
  }
  .vk-key {
    height: 36px !important;
    font-size: 1rem !important;
  }
  .vk-close-btn {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 0.85rem !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .market-layout {
    grid-template-columns: clamp(108px, 15vw, 132px) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .market-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    align-content: start !important;
    gap: 10px !important;
  }

  .market-item {
    min-height: 170px !important;
    padding: 10px 12px !important;
  }

  .market-item .market-visual.jerseys,
  .inventory-owned-card .market-visual.jerseys {
    width: 124px !important;
    max-width: 124px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 4px 6px !important;
    margin: 0 auto 8px auto !important;
  }

  .market-visual.jerseys > div {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  .market-visual.jerseys .market-player-canvas {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    flex: 0 0 52px !important;
  }

  .inventory-set-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .inventory-set-grid .inventory-owned-card {
    min-height: auto !important;
    padding: 12px !important;
  }

  .inventory-emoji-card {
    min-height: 190px !important;
  }

  .inventory-emoji-actions {
    flex-wrap: wrap !important;
  }
}

/* Takim lobisi: Ev Sahibi cyan, Deplasman magenta (kesin override) */
.team-column.blue .team-column-title { background: linear-gradient(135deg,#00E5FF,#00b8d4) !important; color:#04232b !important; }
.team-column.red .team-column-title { background: linear-gradient(135deg,#FF2BD6,#c0148f) !important; color:#ffffff !important; }

/* Sohbet mesaj baglam menusu (uzun-bas / sag-tik) */
.chat-context-menu { position: fixed; z-index: 99999; background: #0f1830; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.chat-context-menu button { background: none; border: none; color: #e2e8f0; text-align: left; padding: 10px 14px; border-radius: 7px; font-size: 14px; cursor: pointer; min-height: 40px; white-space: nowrap; }
.chat-context-menu button:hover, .chat-context-menu button:active { background: rgba(255,255,255,0.08); }
.chat-context-menu .cm-danger { color: #ff6b6b; }
.chat-msg-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* WhatsApp tarzi cevapla */
.chat-reply-banner { display: flex; align-items: center; gap: 8px; background: rgba(0,229,255,0.08); border-left: 3px solid #00e5ff; border-radius: 8px; padding: 6px 10px; margin: 0 0 6px 0; }
.chat-reply-banner .crb-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-reply-banner .crb-nick { color: #00e5ff; font-size: 12px; font-weight: 700; }
.chat-reply-banner .crb-text { color: #cbd5e1; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-banner .crb-cancel { background: none; border: none; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 2px 6px; }
.chat-reply-quote { border-left: 3px solid rgba(0,229,255,0.6); background: rgba(255,255,255,0.05); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 1px; }
.chat-reply-quote .crq-nick { color: #00e5ff; font-size: 11px; font-weight: 700; }
.chat-reply-quote .crq-text { color: #b6c2d4; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ==========================================================================
   POLISH & FINALIZE UPDATES (Transitions, Glassmorphism, Ripple, Landscape)
   ========================================================================== */

/* Screen Transitions */
.flow-card {
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.flow-card.screen-entering {
    opacity: 0 !important;
    transform: translateY(12px) scale(0.985) !important;
}

/* Glassmorphism Uniform Theme */
.flow-card, .mobile-popup-card, .confirm-modal {
    background: rgba(16, 24, 39, 0.82) !important;
    backdrop-filter: blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

/* Button tactile active visual glows */
button:active:not(:disabled), .play-choice:active, .vk-key:active {
    transform: scale(0.94) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15) !important;
}

/* Click ripple effect container & animation */
.sahax-click-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0);
    animation: sahax-ripple-anim 0.32s linear;
    pointer-events: none;
    z-index: 99999;
}

@keyframes sahax-ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Landscape mobile vertical overflow & scrollbar optimization */
@media (orientation: landscape) and (max-height: 600px) {
    .flow-card {
        max-height: 94vh !important;
        overflow-y: auto !important;
        padding: 12px 18px !important;
    }
    
    /* Elegant thin custom scrollbar for dark layout */
    .flow-card::-webkit-scrollbar {
        width: 5px;
    }
    .flow-card::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }
    .flow-card::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 99px;
    }
    .flow-card::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* ==========================================================================
   R2 MODERNIZATION: FONTS, GLASSMORPHISM, BUTTON ANIMATIONS, OAUTH SIGN IN
   ========================================================================== */

/* 1. Strictly assign fonts to correct selectors */
body, p, label, input, select, textarea, .chat-log, .chat-reply-quote, .settings-group label, .setting label {
    font-family: var(--font-inter) !important;
}

h1, h2, h3, h4, .score, .match-clock, .countdown-number, #menuVipLevelCard span, .main-menu-player-name, #statCurrentOnline, .stat-item strong {
    font-family: var(--font-orbitron) !important;
}

button, .tab-button, .play-choice, .vk-key, .mode-card h3, .quick-play-grid h3, .play-section-title, .social-hub-tab, .social-hub-tabs button {
    font-family: var(--font-outfit) !important;
}

/* 2. Glassmorphism Panels, Overlays & Confirm modals */
.flow-card, .mobile-popup-card, .confirm-modal, .team-column, .menu-vip-level-card, .side, .team-lobby-card, .team-lobby-popup-card, .confirm-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

/* 3. OAuth Buttons Modernization (#googleSignInButton, #appleSignInButton, #guestSignInButton) */
#googleSignInButton, #appleSignInButton, #guestSignInButton {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-main) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#googleSignInButton:hover, #appleSignInButton:hover, #guestSignInButton:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--glass-border-focus) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.25) !important;
}

/* 4. Hover states (translate up, pulse glow) and click transitions (scale down to 0.96) to buttons and selectors */
button, .tab-button, .play-choice, .vk-key, .social-hub-tab, .mobile-panel-tabs button {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

button:hover:not(:disabled), .tab-button:hover, .play-choice:hover, .vk-key:hover, .social-hub-tab:hover, .mobile-panel-tabs button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.35) !important;
}

button:active:not(:disabled), .tab-button:active, .play-choice:active, .vk-key:active, .social-hub-tab:active, .mobile-panel-tabs button:active {
    transform: translateY(0) scale(0.96) !important;
    box-shadow: 0 0 5px rgba(0, 240, 255, 0.15) !important;
}

/* Ensure the SVG icon styles look clean */
.pico svg.provider-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* ---------- Premade Parti (Arkadaşlarınla Oyna) ---------- */
.team-lobby-party-panel {
  display: grid;
  gap: 8px;
}
.team-lobby-party-panel.hidden {
  display: none;
}
.party-panel {
  display: grid;
  gap: 12px;
}
.party-panel-hint {
  font-size: 0.74rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.4;
}
.party-slot-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}
.party-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  min-height: 104px;
  justify-content: center;
}
.party-slot.filled {
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.08);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.12);
}
.party-slot.filled.self {
  border-color: rgba(34, 197, 94, 0.8);
}
.party-slot-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}
.party-slot.filled .party-slot-avatar {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  color: #04120a;
  border-color: rgba(134, 239, 172, 0.9);
}
.party-slot-name {
  font-size: 0.74rem;
  font-weight: 850;
  color: #e2e8f0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.party-slot.empty .party-slot-name {
  color: #64748b;
}
.party-slot-tag {
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #4ade80;
}
.party-slot-tag.muted {
  color: #64748b;
}
.party-wait-note {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #94a3b8;
  padding: 10px;
}
.party-panel-actions {
  display: grid;
  gap: 8px;
}
.party-queue-btn {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: 0.4px;
  border: 1px solid rgba(134, 239, 172, 0.9) !important;
  background: linear-gradient(180deg, #4ade80, #16a34a) !important;
  color: #04120a !important;
  cursor: pointer;
}
.party-queue-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.5);
}
.party-cancel-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
  cursor: pointer;
}
.team-lobby-party-panel .lobby-friend-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: 200px;
  overflow-y: auto;
}

.zoom-toggle-button {
  position: absolute;
  /* Sabit konum (Safari/WebKit uyumlu). JS (place) bunu inline left/top ile devralır;
     env()+max() Safari'de butonu ekran dışına atıyordu, kaldırıldı. */
  top: 12px;
  right: 12px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* Görünürlük: koyu zemin + neon yeşil kenar + glow → sahada belirgin */
  background: rgba(12, 20, 36, 0.86) !important;
  border: 2px solid #00ff87 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1200;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 14px rgba(0, 255, 135, 0.55);
  padding: 0;
}
.zoom-toggle-button:hover {
  background: rgba(12, 20, 36, 0.95) !important;
  border-color: #5cffb0 !important;
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 135, 0.8);
}
.zoom-toggle-button:active {
  transform: scale(0.95);
}
.zoom-toggle-button.active {
  background: rgba(16, 185, 129, 0.92) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3), 0 0 18px rgba(16, 185, 129, 0.85);
}
.zoom-toggle-button.hidden {
  display: none !important;
}
.zoom-toggle-button svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}