:root {
   --bg-color: #0f172a;
   --glass-bg: rgba(255, 255, 255, 0.05);
   --glass-border: rgba(255, 255, 255, 0.1);
   --player1-color: #ff4757;
   --player1-glow: rgba(255, 71, 87, 0.6);
   --player2-color: #00d2d3;
   --player2-glow: rgba(0, 210, 211, 0.6);
   --player3-color: #fbc531;
   --player3-glow: rgba(251, 197, 49, 0.6);
   --player4-color: #e056fd;
   --player4-glow: rgba(224, 86, 253, 0.6);
   --text-primary: #f8fafc;
   --text-secondary: #94a3b8;
   --text-muted: #475569;
   --font-family: 'Outfit', 'Inter', system-ui, sans-serif;
   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --radius-full: 9999px;
   --space-1: .25rem;
   --space-2: .5rem;
   --space-3: .75rem;
   --space-4: 1rem;
   --space-5: 1.5rem;
   --space-6: 2rem;
   --z-topbar: 900;
   --z-modal: 6000;
   --z-toast: 7000;
   --neon-cyan: var(--player2-color);
   --neon-red: var(--player1-color);
   --neon-magenta: var(--player4-color);
   --neon-yellow: var(--player3-color);
   --accent-cyan: var(--player2-color);
   --accent-red: var(--player1-color);
   --bg-deep: var(--bg-color);
   --bg-glass: var(--glass-bg);
   --border-glass: var(--glass-border);
   --color-success: #4cd137;
   --color-error: #ff4757;
   --shadow-glass: 0 25px 50px -12px rgba(0, 0, 0, 0.5)
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent
}

html {
   scroll-behavior: smooth
}

body {
   background-color: var(--bg-color);
   color: var(--text-primary);
   font-family: var(--font-family);
   font-size: 1rem;
   line-height: 1.5;
   height: 100dvh;
   width: 100vw;
   overflow: hidden;
   overscroll-behavior: none;
   user-select: none;
   -webkit-user-select: none;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative
}

body::before {
   content: '';
   position: fixed;
   inset: 0;
   background: radial-gradient(ellipse at 20% 50%, rgba(255, 71, 87, 0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(0, 210, 211, 0.05) 0%, transparent 50%);
   pointer-events: none;
   z-index: -1
}

.bg-shape {
   position: absolute;
   border-radius: 50%;
   filter: blur(100px);
   z-index: 0;
   opacity: 0.5;
   animation: float 20s infinite ease-in-out alternate;
   will-change: transform;
   transform: translateZ(0)
}

.shape1 {
   width: 400px;
   height: 400px;
   background: var(--player1-glow);
   top: -100px;
   left: -100px
}

.shape2 {
   width: 500px;
   height: 500px;
   background: var(--player2-glow);
   bottom: -150px;
   right: -100px;
   animation-delay: -10s
}

@keyframes float {
   0% {
      transform: translate3d(0, 0, 0) scale(1)
   }

   100% {
      transform: translate3d(100px, 50px, 0) scale(1.2)
   }
}

#app {
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center
}

.screen {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   transition: opacity 0.4s ease, visibility 0.4s;
   padding: 1.5rem;
   overflow-y: auto
}

.screen.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   display: none !important
}

.screen.active {
   opacity: 1;
   visibility: visible;
   pointer-events: auto
}

.hidden {
   display: none !important
}

.glass-panel {
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
   border-radius: 24px;
   padding: 3rem;
   text-align: center;
   box-shadow: var(--shadow-glass)
}

.logo {
   font-size: 5rem;
   font-weight: 900;
   margin-bottom: 0.5rem;
   letter-spacing: -2px
}

.logo-small {
   font-size: 2rem;
   font-weight: 900;
   background: linear-gradient(135deg, var(--player1-color), var(--player2-color));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.glow-text {
   background: linear-gradient(to right, var(--player1-color), var(--player2-color));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
   font-weight: 900
}

.logo.glow-text {
   background: linear-gradient(90deg, var(--player1-color) 0%, #fff 40%, var(--player2-color) 60%, var(--player1-color) 100%);
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   animation: logoShimmer 4s linear infinite
}

.subtitle {
   color: var(--text-secondary);
   font-size: 1.2rem;
   margin-bottom: 2.5rem
}

@keyframes logoShimmer {
   0% {
      background-position: -200% center
   }

   100% {
      background-position: 200% center
   }
}

.animated-logo {
   background: linear-gradient(90deg, var(--player2-color) 0%, #fff 40%, var(--player1-color) 60%, var(--player2-color) 100%);
   background-size: 200% auto;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   animation: logoShimmer 4s linear infinite;
   display: inline-block;
   font-weight: 900
}

.logo-cyan {
   color: #00d2d3;
   -webkit-text-fill-color: #00d2d3
}

.logo-red {
   color: #ff4757;
   -webkit-text-fill-color: #ff4757
}

.btn {
   padding: 1rem 2rem;
   border-radius: 12px;
   font-size: 1.1rem;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease;
   border: none;
   outline: none;
   font-family: var(--font-family);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   touch-action: manipulation
}

.btn:active {
   transform: scale(0.95) !important
}

.btn.primary {
   background: linear-gradient(135deg, #f8fafc 0%, #d1d5db 100%);
   color: var(--bg-color);
   box-shadow: 0 4px 20px rgba(255, 255, 255, 0.12)
}

.btn.primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 28px rgba(255, 255, 255, 0.22)
}

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

.btn.secondary:hover {
   background: rgba(255, 255, 255, 0.07);
   border-color: rgba(255, 255, 255, 0.18)
}

.btn.small {
   padding: 0.5rem 1rem;
   font-size: 0.9rem
}

.btn-xl {
   padding: 1rem 1.5rem;
   font-size: 1.125rem
}

.btn.cyan {
   background: var(--player2-color);
   color: #000
}

.btn.cyan:hover {
   background: #00e6e7
}

.btn.yellow {
   background: var(--player3-color);
   color: #000
}

.btn.yellow:hover {
   background: #ffd032
}

.btn.magenta {
   background: var(--player4-color);
   color: #fff
}

.glass-btn {
   background: var(--glass-bg);
   backdrop-filter: blur(8px);
   border: 1px solid var(--glass-border)
}

.glass-btn:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15)
}

.btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   transform: none !important;
   pointer-events: none
}

.btn-group {
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 100%
}

.menu-actions {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   width: 100%;
   max-width: 300px;
   margin: 0 auto
}

.menu-grid {
   display: grid;
   gap: 1rem
}

.w-100 {
   width: 100%;
   margin-bottom: 1rem
}

.w-100:last-child {
   margin-bottom: 0
}

.input-field {
   width: 100%;
   padding: 0.9rem 1.1rem;
   margin-bottom: 1rem;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px;
   color: var(--text-primary);
   font-family: var(--font-family);
   font-size: 0.95rem;
   outline: none;
   transition: all 0.3s ease
}

.input-field:focus {
   background: rgba(255, 255, 255, 0.07);
   border-color: rgba(0, 210, 211, 0.5);
   box-shadow: 0 0 0 3px rgba(0, 210, 211, 0.12);
   outline: none
}

.input-field::placeholder {
   color: rgba(255, 255, 255, 0.5)
}

select.btn,
select.input-field {
   appearance: none;
   -webkit-appearance: none;
   text-align: left;
   cursor: pointer;
   font-size: 0.92rem;
   padding: 0.75rem 2.5rem 0.75rem 1rem;
   background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23f8fafc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
   background-repeat: no-repeat;
   background-position: right 1rem top 50%;
   background-size: 0.65rem auto
}

select.btn option {
   background-color: var(--bg-color);
   color: var(--text-primary)
}

.auth-form {
   display: flex;
   flex-direction: column;
   margin-top: -1rem;
   margin-bottom: 1.5rem
}

.auth-error {
   color: #ff4757;
   font-size: 0.9rem;
   margin-bottom: 1rem;
   text-align: center;
   display: none
}

.auth-error:not(:empty) {
   display: block;
   background: rgba(255, 71, 87, 0.1);
   border: 1px solid rgba(255, 71, 87, 0.2);
   border-radius: 8px;
   padding: 0.6rem 0.8rem;
   font-size: 0.85rem
}

.auth-link-container {
   margin-top: 1rem;
   margin-bottom: 0.5rem;
   display: flex;
   flex-direction: column;
   align-items: center
}

.auth-link {
   color: var(--text-secondary);
   font-size: 0.9rem;
   text-decoration: none;
   transition: color 0.2s, transform 0.15s;
   display: inline-block;
   padding: 0.3rem 0
}

.auth-link:hover {
   color: var(--player2-color);
   transform: translateX(3px);
   text-decoration: underline
}

.divider {
   display: flex;
   align-items: center;
   margin: 1.5rem 0;
   color: rgba(255, 255, 255, 0.25);
   font-size: 0.8rem;
   letter-spacing: 2px
}

.divider::before,
.divider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12), transparent)
}

.divider span {
   padding: 0 10px
}

/* TOP BAR */
.top-bar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 60px;
   padding: 0 1.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 900;
   background: rgba(15, 23, 42, 0.6);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.04)
}

.top-bar-logo {
   font-size: 1.25rem;
   font-weight: 900;
   letter-spacing: -1px;
   margin: 0
}

.top-bar-controls {
   display: flex;
   align-items: center;
   gap: 0.5rem
}

#btn-mute {
   position: relative;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: var(--text-primary);
   font-size: 1.1rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s, transform 0.15s;
   padding: 0;
   line-height: 1;
   flex-shrink: 0
}

#btn-mute:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: scale(1.1)
}

#btn-mute:active {
   transform: scale(0.9) !important
}

#btn-mute.muted {
   opacity: 0.45
}

/* GRID LAYOUT */
.wide-panel {
   max-width: 960px !important;
   width: 92% !important
}

.responsive-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.5rem;
   width: 100%
}

@media(min-width:768px) {
   .responsive-grid {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2rem
   }

   .wide-panel {
      padding: 3rem 3.5rem !important
   }
}

.grid-section {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   padding: 1.8rem 1.5rem;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   transition: all 0.2s ease
}

.grid-section:hover {
   border-color: rgba(255, 255, 255, 0.15);
   transform: translateY(-3px);
   background: rgba(255, 255, 255, 0.06);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2)
}

.grid-section h4 {
   color: var(--text-secondary);
   margin-bottom: 0.6rem;
   font-size: 0.8rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   text-align: center
}

.grid-section p {
   color: rgba(255, 255, 255, 0.45);
   font-size: 0.85rem;
   line-height: 1.5;
   text-align: center;
   margin-bottom: 2.2rem;
   flex-grow: 1
}

.divider-line {
   border: none;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   margin: 0.8rem 0 1.2rem
}

/* GAME HEADER */
.game-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   max-width: 680px;
   padding: 0.7rem 1.4rem;
   background: rgba(8, 12, 24, 0.75);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 14px;
   margin-bottom: 1rem;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
   flex-wrap: wrap;
   gap: 0.5rem
}

.header-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
   flex: 1
}

.round-indicator {
   font-size: 0.72rem;
   letter-spacing: 3px;
   color: var(--text-secondary);
   text-transform: uppercase
}

.turn-indicator {
   font-size: 1.05rem;
   font-weight: 500
}

.match-timer {
   font-family: 'Courier New', monospace;
   font-size: 1.2rem;
   font-weight: 700;
   background: rgba(0, 0, 0, 0.3);
   padding: 5px 14px;
   border-radius: 8px;
   color: var(--text-secondary);
   letter-spacing: 1px;
   border: 1px solid rgba(255, 255, 255, 0.08)
}

/* SCOREBOARD */
.scoreboard {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 1.5rem;
   width: 100%
}

.score-item {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.06);
   padding: 0.4rem 0.9rem;
   border-radius: 10px;
   font-size: 0.88rem;
   font-weight: 700;
   transition: all 0.3s ease;
   opacity: 0.5;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1px;
   min-width: 64px
}

.score-item.active {
   opacity: 1;
   transform: scale(1.12);
   border-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 0 16px rgba(255, 255, 255, 0.08)
}

.score-name {
   font-size: 0.65rem;
   font-weight: 600;
   opacity: 0.6;
   text-transform: uppercase;
   letter-spacing: 0.5px
}

.score-val {
   font-size: 1.1rem;
   font-weight: 900;
   line-height: 1
}

.score-item.player1 {
   color: var(--player1-color)
}

.score-item.player2 {
   color: var(--player2-color)
}

.score-item.player3 {
   color: var(--player3-color)
}

.score-item.player4 {
   color: var(--player4-color)
}

/* BOARD */
#game-ui {
   padding: 0.5rem;
   overflow-y: auto;
   justify-content: flex-start;
   padding-top: 1rem;
   gap: 0.8rem;
   display: flex;
   flex-direction: column;
   align-items: center
}

.board-container {
   padding: 20px;
   background: transparent;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.board {
   display: grid;
   gap: 6px;
   background: rgba(0, 0, 0, 0.25);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   padding: 8px;
   position: relative;
   width: min(88vw, 570px);
   height: min(88vw, 570px)
}

.cell {
   background: rgba(255, 255, 255, 0.03);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 10px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
   box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15);
   aspect-ratio: 1;
   transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s
}

.cell-hidden {
   opacity: 0 !important;
   pointer-events: none !important;
   visibility: hidden !important;
   background: transparent !important;
   border: none !important;
   box-shadow: none !important
}

.cell:not(.cell-hidden):hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.2);
   transform: scale(1.05)
}

/* PIECES */
.piece {
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 3.5rem;
   font-weight: 900;
   transform: scale(0);
   animation: pieceDrop 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards !important
}

.board.size-9 .piece {
   font-size: 2.5rem
}

.board.size-12 .piece {
   font-size: 1.8rem
}

.piece.player1 {
   color: var(--player1-color);
   text-shadow: 0 0 20px var(--player1-glow)
}

.piece.player1::after {
   content: "X"
}

.piece.player2 {
   color: var(--player2-color);
   text-shadow: 0 0 20px var(--player2-glow)
}

.piece.player2::after {
   content: "O"
}

.piece.player3 {
   color: var(--player3-color);
   text-shadow: 0 0 20px var(--player3-glow)
}

.piece.player3::after {
   content: "\25B3"
}

.piece.player4 {
   color: var(--player4-color);
   text-shadow: 0 0 20px var(--player4-glow)
}

.piece.player4::after {
   content: "\25C6"
}

.piece.winning {
   animation: pieceDrop 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards, pulseWinText 1.5s 0.42s infinite !important
}

@keyframes pieceDrop {
   0% {
      transform: translateY(-70px) scale(0.5);
      opacity: 0
   }

   60% {
      transform: translateY(5px) scale(1.1);
      opacity: 1
   }

   78% {
      transform: translateY(-3px) scale(0.97)
   }

   92% {
      transform: translateY(2px) scale(1.02)
   }

   100% {
      transform: translateY(0) scale(1);
      opacity: 1
   }
}

@keyframes popIn {
   0% {
      transform: scale(0)
   }

   100% {
      transform: scale(1)
   }
}

@keyframes pulseWinText {
   0% {
      transform: scale(1);
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      color: white
   }

   50% {
      transform: scale(1.2);
      text-shadow: 0 0 40px rgba(255, 255, 255, 0.8);
      color: white
   }

   100% {
      transform: scale(1);
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      color: white
   }
}

.player1-text {
   color: var(--player1-color);
   font-weight: 700;
   text-shadow: 0 0 10px var(--player1-glow)
}

.player2-text {
   color: var(--player2-color);
   font-weight: 700;
   text-shadow: 0 0 10px var(--player2-glow)
}

.player3-text {
   color: var(--player3-color);
   font-weight: 700;
   text-shadow: 0 0 10px var(--player3-glow)
}

.player4-text {
   color: var(--player4-color);
   font-weight: 700;
   text-shadow: 0 0 10px var(--player4-glow)
}

.vfx-particle {
   pointer-events: none;
   position: absolute;
   will-change: transform, opacity
}

/* BRATO OVERLAY */
.brato-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 100;
   pointer-events: none;
   background: rgba(15, 23, 42, 0.7);
   border-radius: 24px;
   backdrop-filter: blur(6px) brightness(0.55);
   animation: fadeIn 0.3s ease forwards
}

.brato-animation {
   font-size: 5rem !important;
   font-weight: 900;
   letter-spacing: -4px;
   animation: bratoPulse 1.5s infinite alternate;
   background: linear-gradient(90deg, #ff4757, #fbc531, #00d2d3, #e056fd, #ff4757) !important;
   background-size: 400% 400% !important;
   -webkit-background-clip: text !important;
   background-clip: text !important;
   color: transparent !important;
   -webkit-text-fill-color: transparent !important;
   text-shadow: 0 0 30px rgba(255, 255, 255, 0.8) !important
}

@keyframes bratoPulse {
   0% {
      transform: scale(1);
      background-position: 0% 50%
   }

   50% {
      transform: scale(1.15)
   }

   100% {
      transform: scale(1.3);
      background-position: 100% 50%
   }
}

@keyframes fadeIn {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

/* WINNER */
.winner-panel {
   padding: 2.5rem 3rem;
   border-radius: 28px;
   max-width: 440px;
   text-align: center;
   box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
   min-width: 320px
}

.winner-title {
   font-size: 0.78rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--text-secondary);
   font-weight: 600;
   margin-bottom: 0.4rem
}

.winner-name {
   font-size: 3.2rem;
   font-weight: 900;
   line-height: 1.1;
   margin-bottom: 1.5rem
}

.winner-name.player1 {
   color: var(--player1-color);
   text-shadow: 0 0 30px var(--player1-glow);
   -webkit-text-fill-color: var(--player1-color)
}

.winner-name.player2 {
   color: var(--player2-color);
   text-shadow: 0 0 30px var(--player2-glow);
   -webkit-text-fill-color: var(--player2-color)
}

.winner-name.player3 {
   color: var(--player3-color);
   text-shadow: 0 0 30px var(--player3-glow);
   -webkit-text-fill-color: var(--player3-color)
}

.winner-name.player4 {
   color: var(--player4-color);
   text-shadow: 0 0 30px var(--player4-glow);
   -webkit-text-fill-color: var(--player4-color)
}

.winner-name.draw-name {
   color: rgba(255, 255, 255, 0.6) !important;
   font-size: 2rem;
   text-shadow: none;
   filter: grayscale(1)
}

.round-score-container {
   margin-bottom: 1.5rem
}

.round-score-container.hidden,
.final-ranking.hidden {
   display: none !important
}

.round-points {
   font-size: 1.8rem;
   color: #4cd137;
   font-weight: 900;
   margin-bottom: 0.5rem
}

.total-points {
   font-size: 1.2rem;
   color: var(--text-secondary)
}

.final-ranking {
   width: 100%;
   margin-bottom: 2rem;
   text-align: left;
   background: rgba(0, 0, 0, 0.2);
   padding: 1rem;
   border-radius: 12px
}

.ranking-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--glass-border);
   font-size: 1.2rem;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.03);
   margin-bottom: 4px
}

.ranking-item:last-child {
   border-bottom: none
}

.winner-match-duration {
   font-family: 'Courier New', monospace;
   font-size: 0.95rem;
   color: var(--text-secondary);
   margin-top: 0.8rem;
   padding: 4px 12px;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   display: inline-block
}

@keyframes drawFlash {
   0% {
      filter: brightness(1) saturate(1)
   }

   20% {
      filter: brightness(1.4) saturate(0.2) hue-rotate(200deg)
   }

   40% {
      filter: brightness(0.8) saturate(0.1)
   }

   60% {
      filter: brightness(1.3) saturate(0.3) hue-rotate(180deg)
   }

   80% {
      filter: brightness(0.9) saturate(0.15)
   }

   100% {
      filter: brightness(1) saturate(1)
   }
}

.board-container.draw-flash {
   animation: drawFlash 1.2s ease forwards
}

.loader {
   width: 48px;
   height: 48px;
   border: 4px solid rgba(255, 255, 255, 0.1);
   border-top-color: var(--player2-color);
   border-radius: 50%;
   animation: spin 0.9s linear infinite;
   margin: 0 auto
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes screenShake {
   0% {
      transform: translate(0, 0) rotate(0deg)
   }

   10% {
      transform: translate(-7px, -5px) rotate(-1deg)
   }

   20% {
      transform: translate(7px, 5px) rotate(1deg)
   }

   30% {
      transform: translate(-5px, 3px) rotate(-0.6deg)
   }

   40% {
      transform: translate(5px, -3px) rotate(0.6deg)
   }

   50% {
      transform: translate(-3px, 4px) rotate(-0.3deg)
   }

   60% {
      transform: translate(3px, -4px) rotate(0.3deg)
   }

   70% {
      transform: translate(-2px, 2px) rotate(-0.2deg)
   }

   85% {
      transform: translate(1px, -1px) rotate(0.1deg)
   }

   100% {
      transform: translate(0, 0) rotate(0)
   }
}

.shake-board {
   animation: screenShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both
}

/* JUGAR PULSE */
@keyframes pulseGlow {

   0%,
   100% {
      transform: scale(1);
      box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15)
   }

   50% {
      transform: scale(1.03);
      box-shadow: 0 8px 40px rgba(255, 255, 255, 0.3)
   }
}

/* MODE CARD ENTRANCE */
@keyframes cardEntrance {
   from {
      opacity: 0;
      transform: translateY(24px) scale(0.96)
   }

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

.card-enter-1 {
   animation: cardEntrance 0.4s 0.05s cubic-bezier(0.4, 0, 0.2, 1) both
}

.card-enter-2 {
   animation: cardEntrance 0.4s 0.12s cubic-bezier(0.4, 0, 0.2, 1) both
}

.card-enter-3 {
   animation: cardEntrance 0.4s 0.19s cubic-bezier(0.4, 0, 0.2, 1) both
}

/* SCREENS */
#offline-lobby-screen h2 {
   color: var(--text-primary);
   font-size: 1.6rem;
   font-weight: 700;
   margin-bottom: 1.8rem;
   text-align: center
}

#online-lobby-screen h2 {
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   text-align: center
}

#online-status {
   border-radius: 10px;
   font-size: 0.9rem;
   padding: 0.7rem 1rem;
   border: 1px solid rgba(255, 71, 87, 0.2);
   background: rgba(255, 71, 87, 0.08)
}

.lobby-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem
}

#room-lobby-screen .glass-panel {
   border-radius: 20px;
   padding: 1.8rem
}

.room-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   padding-bottom: 1rem;
   margin-bottom: 1rem;
   flex-wrap: wrap;
   gap: 0.75rem
}

.room-code-badge {
   background: rgba(0, 0, 0, 0.4);
   padding: 6px 16px;
   border-radius: 8px;
   font-family: 'Courier New', monospace;
   font-size: 1rem;
   letter-spacing: 2px;
   border: 1px solid rgba(255, 255, 255, 0.08)
}

.room-code-badge span {
   color: var(--player3-color);
   font-weight: 700
}

.lobby-col {
   padding: 1rem;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(0, 0, 0, 0.2);
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow-y: auto
}

.lobby-col h3 {
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.5px;
   color: var(--text-secondary);
   text-transform: uppercase;
   margin-bottom: 0.8rem
}

.lobby-label {
   display: block;
   font-size: 0.85rem;
   color: var(--text-secondary);
   margin-bottom: 0.3rem;
   margin-top: 0.5rem
}

.lobby-player-card {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: rgba(255, 255, 255, 0.05);
   padding: 0.8rem;
   border-radius: 8px;
   border: 1px solid var(--glass-border);
   margin-bottom: 0.5rem;
   transition: all 0.3s
}

.lobby-player-card.ready {
   border-color: var(--player2-color);
   box-shadow: 0 0 10px rgba(0, 210, 211, 0.2)
}

.lobby-player-info {
   display: flex;
   flex-direction: column
}

.lobby-player-name {
   font-weight: 600
}

.lobby-player-status {
   font-size: 0.8rem;
   color: var(--text-secondary)
}

.lobby-player-status.ready-text {
   color: var(--player2-color)
}

#room-chat-box {
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.05);
   font-size: 0.85rem
}

.chat-msg {
   padding: 0.5rem;
   border-radius: 5px;
   background: rgba(255, 255, 255, 0.05);
   word-break: break-word
}

.chat-msg.system {
   color: var(--player3-color);
   font-style: italic;
   background: rgba(251, 197, 49, 0.1)
}

.chat-sender {
   font-weight: 600;
   color: var(--player2-color);
   margin-right: 5px
}

.chat-time {
   font-size: 0.7rem;
   color: var(--text-secondary);
   float: right
}

/* SERVER BROWSER */
#server-browser-screen .glass-panel {
   max-width: 600px;
   width: 92%;
   padding: 2.5rem;
   border-radius: 24px
}

#server-browser-list {
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.25)
}

.room-browser-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.8rem 1rem;
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 10px;
   margin-bottom: 6px;
   background: rgba(255, 255, 255, 0.02);
   transition: all 0.15s
}

.room-browser-item:hover {
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.1)
}

.room-browser-info {
   display: flex;
   flex-direction: column;
   gap: 2px
}

.room-browser-title {
   font-weight: 700;
   font-size: 0.92rem
}

.room-browser-host {
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.35)
}

.room-browser-right {
   display: flex;
   align-items: center;
   gap: 10px
}

.room-browser-count {
   font-size: 0.8rem;
   font-weight: 700;
   background: rgba(255, 255, 255, 0.07);
   padding: 2px 10px;
   border-radius: 20px
}

/* MATCHMAKING */
#matchmaking-overlay .glass-panel {
   max-width: 380px;
   width: 88%;
   padding: 2.5rem;
   border-radius: 24px;
   text-align: center
}

/* LEADERBOARD */
#leaderboard-screen .glass-panel {
   max-width: 500px;
   width: 92%;
   padding: 2.5rem;
   border-radius: 24px
}

#leaderboard-list {
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(0, 0, 0, 0.25)
}

.leaderboard-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.75rem 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   transition: background 0.15s
}

.leaderboard-row:hover {
   background: rgba(255, 255, 255, 0.03)
}

.lb-left {
   display: flex;
   align-items: center;
   gap: 0.7rem
}

.lb-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 2px
}

.lb-medal {
   font-size: 1.3rem
}

.lb-rank {
   font-weight: 700;
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.35);
   width: 28px;
   text-align: center
}

.lb-name {
   font-weight: 700;
   font-size: 0.95rem
}

.lb-elo {
   font-weight: 900;
   font-size: 0.95rem;
   color: var(--player2-color)
}

.lb-stats {
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.3)
}

/* RULES */
.rules-panel {
   max-width: 520px;
   text-align: left;
   padding: 2.5rem 2.8rem;
   border-radius: 24px
}

.rules-panel h2 {
   font-size: 1.5rem;
   margin-bottom: 1.8rem;
   text-align: center;
   background: linear-gradient(135deg, var(--text-primary), var(--player2-color));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.rules-panel ul {
   margin-bottom: 2rem;
   padding-left: 1.5rem;
   color: var(--text-secondary);
   line-height: 1.6;
   list-style: none
}

.rules-panel li {
   padding: 0.6rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   font-size: 0.92rem;
   color: rgba(255, 255, 255, 0.72)
}

.rules-panel li:last-child {
   border: none
}

/* TOURNAMENT */
#tournament-setup-screen .glass-panel {
   max-width: 580px;
   width: 92%;
   padding: 2.5rem;
   border-radius: 24px
}

#tournament-bracket-screen .glass-panel {
   border-radius: 20px;
   padding: 2rem
}

#tournament-bracket-container {
   padding: 1rem;
   gap: 2rem;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 12px
}

.bracket-col {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   position: relative
}

.bracket-match {
   width: 150px;
   background: rgba(0, 0, 0, 0.4);
   border-radius: 10px;
   padding: 12px 14px;
   text-align: center;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   transition: all 0.2s;
   position: relative;
   z-index: 2
}

.bracket-match.active {
   border-color: var(--player3-color);
   box-shadow: 0 0 15px var(--player3-color);
   transform: scale(1.05)
}

.bracket-match.locked {
   opacity: 0.5
}

/* ADMIN */
#admin-screen .glass-panel {
   border-radius: 24px;
   padding: 2.5rem
}

.admin-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 16px;
   padding: 1.5rem;
   transition: border-color 0.2s
}

.admin-card:hover {
   border-color: rgba(255, 255, 255, 0.12)
}

.admin-card h3 {
   font-size: 0.95rem;
   padding-bottom: 0.7rem;
   margin-bottom: 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   color: var(--player2-color)
}

.admin-stat-card {
   background: rgba(0, 0, 0, 0.25);
   padding: 1.2rem;
   border-radius: 12px;
   text-align: center;
   border: 1px solid rgba(255, 255, 255, 0.05)
}

.admin-stat-value {
   font-size: 2.2rem;
   font-weight: 900
}

.admin-stat-label {
   color: var(--text-secondary);
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 1px
}

.admin-user-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

/* CUSTOM MODALS */
#custom-alert-modal,
#custom-confirm-modal {
   z-index: 4000;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(4px)
}

#custom-alert-modal .glass-panel {
   border-color: rgba(224, 86, 253, 0.25);
   padding: 2rem 2.2rem;
   border-radius: 20px;
   max-width: 380px
}

#custom-confirm-modal .glass-panel {
   border-color: rgba(251, 197, 49, 0.25);
   padding: 2rem 2.2rem;
   border-radius: 20px;
   max-width: 380px
}

/* GLOBAL BANNER */
.global-banner {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background: var(--player1-color);
   color: white;
   text-align: center;
   padding: 1rem;
   font-weight: 700;
   z-index: 1000;
   box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
   transform: translateY(-100%);
   transition: transform 0.3s ease
}

.global-banner.visible {
   transform: translateY(0)
}

.social-notif-badge {
   background: var(--player1-color);
   color: #fff;
   font-size: 0.7rem;
   font-weight: 900;
   padding: 2px 6px;
   border-radius: 9999px;
   margin-left: 4px
}

.back-btn-container {
   max-width: 400px;
   margin: 0 auto;
   padding-top: 0.5rem
}

/* SOCIAL PANEL */
.social-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 5500;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s, visibility 0.3s
}

.social-overlay.visible,
.social-overlay.active {
   opacity: 1;
   visibility: visible
}

.social-panel {
   position: fixed;
   top: 0;
   right: 0;
   width: 360px;
   max-width: 95vw;
   height: 100vh;
   background: rgba(15, 23, 42, 0.92);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   z-index: 5600;
   display: flex;
   flex-direction: column;
   transform: translateX(100%);
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5)
}

.social-panel.open {
   transform: translateX(0)
}

.social-panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.5rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.social-panel-header h3 {
   font-size: 1.1rem;
   font-weight: 700;
   background: linear-gradient(to right, var(--player1-color), var(--player2-color));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.btn-close-panel {
   background: none;
   border: none;
   color: var(--text-secondary);
   font-size: 1.5rem;
   cursor: pointer;
   padding: 0.2rem 0.5rem;
   border-radius: 6px;
   transition: color 0.2s
}

.btn-close-panel:hover {
   color: var(--text-primary)
}

.social-tabs {
   display: flex;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08)
}

.social-tab-btn {
   flex: 1;
   padding: 0.8rem 0.5rem;
   background: none;
   border: none;
   color: var(--text-secondary);
   font-family: var(--font-family);
   font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.2s;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px
}

.social-tab-btn.active {
   color: var(--player2-color);
   border-bottom-color: var(--player2-color)
}

.tab-icon {
   font-size: 1.2rem
}

.tab-label {
   font-size: 0.7rem
}

.social-pane {
   flex: 1;
   overflow-y: auto;
   padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem
}

.social-empty {
   color: var(--text-secondary);
   font-size: 0.9rem;
   text-align: center;
   padding: 2rem 1rem
}

.social-search-bar {
   display: flex;
   gap: 8px;
   margin-bottom: 1rem
}

.social-search-bar .input-field {
   margin-bottom: 0;
   flex: 1
}

.friend-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.75rem 1rem;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 10px;
   transition: all 0.2s
}

.friend-item:hover {
   background: rgba(255, 255, 255, 0.07);
   border-color: rgba(255, 255, 255, 0.12)
}

.friend-info {
   display: flex;
   align-items: center;
   gap: 0.6rem;
   flex: 1;
   min-width: 0
}

.friend-name {
   font-weight: 600;
   font-size: 0.95rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

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

.friend-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 0.85rem;
   color: var(--text-secondary)
}

.friend-meta {
   display: flex;
   flex-direction: column;
   gap: 1px;
   flex: 1;
   min-width: 0
}

.presence-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #4b5563;
   transition: all 0.3s
}

.presence-dot.online {
   background: #4cd137;
   box-shadow: 0 0 8px rgba(76, 209, 55, 0.8);
   animation: presencePulse 2s infinite
}

.presence-dot.playing {
   background: var(--player3-color);
   box-shadow: 0 0 8px rgba(251, 197, 49, 0.8)
}

@keyframes presencePulse {

   0%,
   100% {
      box-shadow: 0 0 5px rgba(76, 209, 55, 0.6)
   }

   50% {
      box-shadow: 0 0 12px rgba(76, 209, 55, 1)
   }
}

.friend-badge {
   font-size: 0.7rem;
   font-weight: 700;
   padding: 2px 7px;
   border-radius: 20px
}

.friend-badge.online {
   background: rgba(76, 209, 55, 0.2);
   color: #4cd137
}

.friend-badge.playing {
   background: rgba(251, 197, 49, 0.2);
   color: var(--player3-color)
}

.social-action-btn {
   width: 30px;
   height: 30px;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.04);
   color: var(--text-secondary);
   font-size: 0.85rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.15s
}

.social-action-btn:hover {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-primary)
}

.social-action-btn.accept {
   border-color: rgba(76, 209, 55, 0.3);
   color: #4cd137
}

.social-action-btn.reject {
   border-color: rgba(255, 71, 87, 0.2);
   color: #ff4757
}

/* INVITE TOAST */
.invite-toast {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   width: 340px;
   max-width: 90vw;
   background: rgba(15, 23, 42, 0.95);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(0, 210, 211, 0.3);
   border-radius: 16px;
   padding: 1.2rem 1.4rem;
   z-index: 9999;
   display: none;
   flex-direction: column;
   gap: 1rem;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5)
}

.toast-enter {
   animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards
}

.toast-exit {
   animation: toastSlideOut 0.35s ease forwards
}

@keyframes toastSlideIn {
   from {
      opacity: 0;
      transform: translateY(30px) scale(0.95)
   }

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

@keyframes toastSlideOut {
   from {
      opacity: 1;
      transform: translateY(0) scale(1)
   }

   to {
      opacity: 0;
      transform: translateY(20px) scale(0.95)
   }
}

.toast-header {
   display: flex;
   align-items: center;
   gap: 10px
}

.toast-icon {
   font-size: 1.5rem
}

.toast-title {
   font-weight: 700;
   font-size: 0.95rem
}

.toast-from {
   font-size: 0.85rem;
   color: var(--player2-color);
   font-weight: 700
}

.toast-subtitle {
   font-size: 0.8rem;
   color: var(--text-secondary)
}

.toast-actions {
   display: flex;
   gap: 8px
}

/* FRIEND INVITE MODAL */
.friend-invite-modal {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
   z-index: 2000;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 1rem
}

.friend-invite-modal.visible {
   display: flex
}

.friend-invite-inner {
   background: rgba(15, 23, 42, 0.95);
   backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 20px;
   padding: 2rem;
   width: 100%;
   max-width: 400px;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
   gap: 1rem
}

.friend-invite-inner h3 {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--player2-color);
   display: flex;
   justify-content: space-between;
   align-items: center
}

.friend-invite-inner h3 button {
   background: none;
   border: none;
   color: var(--text-secondary);
   font-size: 1.2rem;
   cursor: pointer
}

#friend-invite-list {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 8px
}

/* SCROLLBAR */
::-webkit-scrollbar {
   width: 5px;
   height: 5px
}

::-webkit-scrollbar-track {
   background: transparent
}

::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.1);
   border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.2)
}

*:focus-visible {
   outline: 2px solid rgba(0, 210, 211, 0.5);
   outline-offset: 2px;
   border-radius: 4px
}

/* RESPONSIVE */
@media(max-width:900px) {
   #room-lobby-screen .glass-panel {
      height: 95vh !important;
      overflow-y: auto
   }

   #room-lobby-screen .glass-panel>div:nth-child(2) {
      display: flex !important;
      flex-direction: column !important;
      gap: 1rem !important
   }

   .lobby-col {
      height: auto !important;
      flex: none !important
   }

   #room-chat-box {
      min-height: 200px
   }
}

@media(max-width:768px) {
   .glass-panel {
      padding: 1.8rem 1.5rem;
      border-radius: 20px
   }

   .responsive-grid {
      gap: 1rem
   }

   .grid-section {
      padding: 1.4rem 1.2rem
   }

   .rules-panel {
      padding: 2rem
   }

   #admin-screen .glass-panel {
      padding: 1.5rem
   }

   .social-panel {
      width: 100% !important
   }
}

@media(max-width:600px) {
   .board {
      width: min(92vw, 360px);
      height: min(92vw, 360px);
      gap: 4px
   }

   .cell {
      border-radius: 7px
   }

   .brato-animation {
      font-size: 3.5rem !important
   }

   .winner-name {
      font-size: 2.4rem
   }

   .wide-panel {
      padding: 1.6rem !important
   }

   #btn-mute {
      width: 32px;
      height: 32px;
      font-size: 0.9rem
   }

   .game-header {
      padding: 0.6rem 1rem;
      border-radius: 10px
   }

   #game-ui {
      padding-top: 0.5rem;
      gap: 0.5rem
   }

   .scoreboard {
      gap: 5px
   }

   .score-item {
      min-width: 52px;
      padding: 0.3rem 0.6rem
   }
}

@media(max-width:480px) {
   .screen {
      padding: 0.8rem
   }

   .glass-panel {
      padding: 1.4rem 1.2rem;
      border-radius: 16px
   }

   .btn {
      padding: 0.8rem 1.5rem;
      font-size: 0.95rem
   }

   .btn.small {
      padding: 0.4rem 0.8rem;
      font-size: 0.82rem
   }
}

/* SCREEN ENTER */
@keyframes slideUpFade {
   from {
      opacity: 0;
      transform: translateY(14px)
   }

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

.screen.screen-enter .glass-panel,
.screen.screen-enter .game-header,
.screen.screen-enter .board-container,
.screen.screen-enter .scoreboard {
   animation: slideUpFade 0.35s cubic-bezier(0.22, 1, 0.36, 1) both
}

.screen.screen-enter .glass-panel:nth-child(2) {
   animation-delay: 0.05s
}

/* SCORE PULSE */
@keyframes scoreActivePulse {

   0%,
   100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.12)
   }

   50% {
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06)
   }
}

.score-item.active {
   animation: scoreActivePulse 2s ease infinite
}

/* SOCIAL PANEL OPEN ANIM */
@keyframes drawerSlideIn {
   from {
      transform: translateX(100%);
      opacity: 0
   }

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

.social-panel.open {
   animation: drawerSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both
}

/* SOCIAL EXTRAS */
.social-counter {
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.35);
   padding: 0 0.2rem 0.5rem;
   letter-spacing: 0.5px
}

.friend-group {
   margin-bottom: 0.8rem
}

.friend-group-label {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.65rem;
   font-weight: 700;
   letter-spacing: 1.5px;
   color: rgba(255, 255, 255, 0.3);
   text-transform: uppercase;
   padding: 0.4rem 0.2rem 0.5rem;
   margin-bottom: 2px
}

.friend-group-label .presence-dot {
   width: 6px;
   height: 6px
}

.req-avatar {
   border-color: rgba(0, 210, 211, 0.3);
   color: var(--player2-color)
}

.friend-status-label {
   font-size: 0.72rem;
   font-weight: 500
}

.friend-status-label.online {
   color: #4cd137
}

.friend-status-label.playing {
   color: var(--player3-color)
}

.friend-status-label.offline {
   color: rgba(255, 255, 255, 0.2)
}

.social-action-btn.remove {
   border-color: rgba(255, 71, 87, 0.2);
   color: #ff4757
}

.social-action-btn.accept:hover {
   background: rgba(76, 209, 55, 0.15)
}

.social-action-btn.reject:hover,
.social-action-btn.remove:hover {
   background: rgba(255, 71, 87, 0.12)
}

.req-item {
   border-color: rgba(0, 210, 211, 0.1);
   background: rgba(0, 210, 211, 0.03)
}

.req-incoming {
   color: var(--player2-color) !important
}

.req-outgoing {
   color: rgba(255, 255, 255, 0.35) !important
}

.social-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 3rem 1.5rem;
   text-align: center;
   gap: 0.3rem
}

.social-empty-icon {
   font-size: 2.5rem;
   margin-bottom: 0.5rem;
   opacity: 0.5
}

.social-empty-title {
   font-weight: 700;
   font-size: 1rem;
   color: var(--text-primary)
}

.social-empty-desc {
   font-size: 0.82rem;
   color: rgba(255, 255, 255, 0.35);
   line-height: 1.5
}

.search-result-card {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1.2rem;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   margin-top: 0.5rem
}

.search-result-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   flex-shrink: 0;
   background: linear-gradient(135deg, var(--player1-color), var(--player2-color));
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.4rem;
   font-weight: 900;
   color: #fff
}

.search-result-info {
   flex: 1;
   min-width: 0
}

.search-result-name {
   font-weight: 700;
   font-size: 1.1rem;
   margin-bottom: 4px
}

.search-result-details {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.5)
}

.search-result-elo {
   background: rgba(255, 255, 255, 0.06);
   padding: 1px 8px;
   border-radius: 20px;
   font-weight: 700;
   font-size: 0.72rem
}

.search-result-stats {
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.25);
   margin-top: 4px
}

.search-result-action {
   flex-shrink: 0
}

.search-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 2rem;
   color: var(--text-secondary);
   font-size: 0.9rem
}

.social-section-label {
   color: var(--text-secondary);
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 0.5rem
}

.social-tab-btn:hover:not(.active) {
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.04)
}

.friend-badge.pending {
   background: rgba(148, 163, 184, 0.15);
   color: var(--text-secondary)
}

/* AUTH SCREENS */
#login-screen .glass-panel,
#signup-screen .glass-panel {
   max-width: 420px;
   width: 92%;
   padding: 3rem 2.8rem;
   border-radius: 28px;
   box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05)
}

.signup-panel {
   border-color: rgba(0, 210, 211, 0.3);
   box-shadow: 0 25px 50px -12px rgba(0, 210, 211, 0.1)
}

.auth-buttons {
   display: flex;
   gap: 1rem;
   margin-bottom: 0.5rem
}

.auth-buttons .btn {
   flex: 1
}

#main-menu .logo {
   font-size: 5.5rem;
   margin-bottom: 0.2rem
}

#main-menu .subtitle {
   margin-bottom: 2.5rem
}

/* =========================================
   HERO SECTION & HUB SYSTEM
   ========================================= */
.hero-section {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   text-align: center;
   padding-top: 60px
}

.hero-branding {
   margin-bottom: 2.5rem
}

.hero-branding .logo {
   font-size: clamp(3.5rem, 10vw, 6rem);
   letter-spacing: -3px;
   line-height: 1
}

.hero-branding .subtitle {
   font-size: 1.1rem;
   margin-bottom: 0
}

.hub-panel {
   text-align: center;
   width: 100%;
   max-width: 600px;
   transition: opacity 0.4s ease, transform 0.4s ease;
   will-change: transform, opacity
}

.hub-modes-hidden {
   opacity: 0;
   visibility: hidden;
   transform: translateY(30px);
   display: none;
   position: relative
}

.hub-modes-visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   display: block
}

/* JUGAR BUTTON */
.btn-jugar {
   font-size: clamp(1.8rem, 5vw, 2.8rem);
   padding: 1.4rem 3rem;
   border-radius: var(--radius-full);
   animation: pulseGlow 3s infinite ease-in-out;
   margin-bottom: 2.5rem;
   width: 100%;
   max-width: 500px;
   letter-spacing: 2px;
   font-weight: 900
}

.hub-secondary-nav {
   display: flex;
   gap: 0.8rem;
   justify-content: center;
   flex-wrap: wrap
}

.btn-back-hub {
   margin-bottom: 1.5rem;
   align-self: flex-start
}

/* MODE CARDS */
.mode-cards-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
   width: 100%
}

.mode-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
   padding: 2rem 1.2rem;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all 0.25s ease;
   overflow: hidden;
   font-family: var(--font-family);
   color: var(--text-primary);
   min-height: 150px
}

.mode-card:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.18);
   transform: translateY(-4px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3)
}

.mode-card:active {
   transform: scale(0.97) !important
}

.mode-card-icon {
   font-size: 2.2rem;
   margin-bottom: 0.3rem;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3))
}

.mode-card-label {
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: 0.3px
}

.mode-card-desc {
   font-size: 0.75rem;
   color: var(--text-secondary);
   opacity: 0.7
}

.mode-card-accent {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   border-radius: 0 0 var(--radius-md) var(--radius-md);
   opacity: 0.7;
   transition: opacity 0.25s, height 0.25s
}

.mode-card:hover .mode-card-accent {
   opacity: 1;
   height: 4px
}

@media(max-width:600px) {
   .mode-cards-grid {
      grid-template-columns: 1fr;
      gap: 0.8rem
   }

   .mode-card {
      min-height: auto;
      padding: 1.4rem 1rem;
      flex-direction: row;
      gap: 1rem;
      justify-content: flex-start
   }

   .mode-card-icon {
      margin-bottom: 0;
      font-size: 1.8rem
   }

   .btn-jugar {
      padding: 1.2rem 2rem
   }
}

@media(max-width:480px) {
   .hero-branding .logo {
      letter-spacing: -2px
   }
}

.timer-warning {
   animation: pulse-warning 1s infinite alternate;
   color: #ff4757 !important;
   border-color: #ff4757 !important;
   box-shadow: 0 0 15px rgba(255, 71, 87, 0.5) !important;
}

@keyframes pulse-warning {
   from {
      opacity: 1;
   }

   to {
      opacity: 0.5;
      transform: scale(0.98);
   }
}