/* ================= RESET & BASE ================= */
:root {
  --pepe-green: #0b0604;
  --pepe-dark: #1e1008;
  --pepe-yellow: #ff7a00;
  --pepe-orange: #e05300;
  --pepe-amber: #ffa64d;
  --comic-black: #0a0402;
  --white: #ffffff;
  --gray: #cccccc;
}

* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family: 'Comic Neue', cursive, sans-serif;
}

body, html { 
  width:100%; 
  height:100%; 
  height:100dvh;
  overflow:hidden; 
  background: var(--pepe-green); 
  color:#fff;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><text y="20" font-size="20">⚽</text></svg>'), auto;
}

/* ================= LAUNCH PAGE ================= */
#launchPage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow: hidden;
}

/* Stadium night background — pure CSS, no image required */
.launch-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Stadium floodlight beams from four corners */
        radial-gradient(ellipse 60% 55% at 8%  0%, rgba(255,255,200,0.30) 0%, transparent 100%),
        radial-gradient(ellipse 60% 55% at 92% 0%, rgba(255,255,200,0.30) 0%, transparent 100%),
        radial-gradient(ellipse 40% 30% at 50% 0%, rgba(255,255,210,0.18) 0%, transparent 100%),
        /* Pitch emerald glow at bottom-centre */
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(10,120,20,0.85) 0%, rgba(5,70,8,0.6) 50%, transparent 100%),
        /* Crowd / upper stands silhouette band */
        linear-gradient(to bottom,
            #04071a  0%,
            #06112e 18%,
            #0c1a42 30%,
            #0e2a16 48%,
            #0d3a0c 65%,
            #0a2d09 82%,
            #071e06 100%);
    animation: backgroundPulse 18s ease-in-out infinite alternate;
}

@keyframes backgroundPulse {
    0%   { filter: brightness(0.90) saturate(1.0); }
    50%  { filter: brightness(1.05) saturate(1.15); }
    100% { filter: brightness(0.95) saturate(1.05); }
}

/* Grass stripe pattern overlay for the pitch portion */
.launch-background::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 42%;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 60px,
        transparent 60px,
        transparent 120px
    );
    pointer-events: none;
}

/* Subtle vignette overlay */
.launch-background::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}



/* Logo container */
.logo-container {
    margin-bottom: 3rem;
    position: relative;
}

/* 3D Football logo */
.logo-circle {
    width: 140px;
    height: 140px;
    margin: 0 auto 2rem;
    background: linear-gradient(145deg, var(--pepe-yellow), var(--pepe-orange));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid white;
    box-shadow: 
        0 0 40px rgba(255, 122, 0, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 5px 15px rgba(255, 255, 255, 0.3);
    transform-style: preserve-3d;
    animation: ballRotate 20s linear infinite;
    position: relative;
    overflow: hidden;
}

.logo-circle::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    animation: shine 3s linear infinite;
}

@keyframes ballRotate {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.logo-circle i {
    font-size: 5rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

h1 {
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: 'Bangers', cursive;
    text-shadow: 
        5px 5px 0px rgba(0, 0, 0, 1),
        0 0 30px rgba(255, 122, 0, 0.4);
    position: relative;
}

#launchPage h1::before {
    content: 'OWN GOAL ARCADE';
    position: absolute;
    top: 2px;
    left: 2px;
    color: rgba(255, 255, 255, 0.08);
    z-index: -1;
}

.subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--pepe-yellow);
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 1.5rem;
    font-family: 'Permanent Marker', cursive;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 122, 0, 0.5);
    position: relative;
    display: inline-block;
    padding: 0 20px;
}

.subtitle::before,
.subtitle::after {
    content: '⚽';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: 0.7;
}

.subtitle::before {
    left: -10px;
}

.subtitle::after {
    right: -10px;
}

.title-line {
    width: 200px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pepe-yellow), transparent);
    margin: 2rem auto;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(255, 122, 0, 0.5);
}

.launch-actions {
    margin: 3rem 0;
}

.launch-button {
    padding: 20px 50px;
    font-size: 1.5rem;
    font-weight: 700;
    color: black;
    background: var(--pepe-yellow);
    border: 4px solid var(--comic-black);
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.9);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 2rem;
    font-family: 'Bangers', cursive;
}

.launch-button:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px rgba(0, 0, 0, 0.9);
    background: white;
}

.launch-button:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

.button-text {
    margin-right: 15px;
    text-shadow: none;
}

.button-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: buttonShine 3s infinite;
}

@keyframes buttonShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Launch features */
.launch-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    cursor: pointer;
    color: white;
    font-family: 'Comic Neue', cursive;
    font-size: inherit;
}

.feature:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature i {
    color: #ffd700;
    font-size: 1.2rem;
}

.feature span {
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Launch footer */
.launch-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.launch-footer p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.launch-footer i {
    color: #ffd700;
}

.launch-footer kbd {
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: monospace;
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Particle effect for realism */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.particles::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: particleFloat 10s infinite alternate;
}

@keyframes particleFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(1deg); }
}

/* Stadium lights effect */
.stadium-lights {
    position: absolute;
    top: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    animation: lightsFade 3s infinite alternate;
}

@keyframes lightsFade {
    0% { opacity: 0.5; }
    100% { opacity: 0.8; }
}

/* ================= HOME MENU ================= */
#homeMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: none;
  z-index: 900;
}

.menu-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(11, 6, 4, 0.9), rgba(11, 6, 4, 0.95)), 
              url('resources/ground.jpg') center/cover no-repeat;
}

.menu-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 122, 0, 0.05), rgba(224, 83, 0, 0.05));
}

.field-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.menu-container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 40px;
  backdrop-filter: blur(10px);
  border-bottom: 4px solid var(--comic-black);
  background: rgba(11, 6, 4, 0.5);
}

.menu-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 24px;
  font-weight: 700;
  color: white;
  font-family: 'Bangers', cursive;
  letter-spacing: 2px;
}

.menu-logo i {
  color: var(--pepe-yellow);
  font-size: 28px;
}

.player-avatar {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--pepe-yellow), var(--pepe-orange));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  border: 2px solid white;
  box-shadow: 0 0 20px rgba(255, 122, 0, 0.5);
}

.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.menu-title {
  font-size: 48px;
  margin-bottom: 40px;
  font-family: 'Bangers', cursive;
  letter-spacing: 3px;
  color: white;
  text-shadow: 4px 4px 0px var(--comic-black);
}

.menu-buttons {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 50px;
}

.menuButton {
  padding: 20px 30px;
  background: white;
  color: var(--comic-black);
  border: 4px solid var(--comic-black);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.9);
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.menuButton:hover {
  background: var(--pepe-yellow);
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0px rgba(0, 0, 0, 0.9);
}

.menuButton::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.menuButton:hover::before {
  left: 100%;
}

.button-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--pepe-yellow), var(--pepe-orange));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  border: 2px solid var(--comic-black);
}

.button-content {
  flex: 1;
  text-align: left;
}

.button-title {
  display: block;
  font-size: 1.4rem;
  font-family: 'Bangers', cursive;
  margin-bottom: 2px;
  letter-spacing: 1px;
}

.button-subtitle {
  display: block;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: bold;
}

.button-arrow {
  color: var(--comic-black);
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.menuButton:hover .button-arrow {
  transform: translateX(5px);
}

.menu-stats {
  display: flex;
  gap: 30px;
  margin-top: 40px;
}

.stat-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  background: var(--pepe-dark);
  border-radius: 12px;
  border: 3px solid var(--comic-black);
  box-shadow: 4px 4px 0px rgba(0,0,0,0.9);
  min-width: 150px;
}

.stat-box i {
  font-size: 24px;
  color: var(--pepe-yellow);
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================= PANELS ================= */
#settingsPanel, #highScoresPanel, #characterPanel, #matchOverPanel, #controlsPanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
}

.panel-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(11, 6, 4, 0.85);
  backdrop-filter: blur(10px);
}

.panel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: var(--comic-black);
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  border: 5px solid var(--comic-black);
  box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.9);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 3px dashed var(--comic-black);
}

.panel-header h2 {
  font-size: 2rem;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  color: var(--pepe-orange);
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-header h2 i {
  color: var(--pepe-yellow);
}

.panel-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eaeaea;
  border: 3px solid var(--comic-black);
  color: var(--comic-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.panel-close:hover {
  background: var(--pepe-orange);
  color: white;
  transform: rotate(90deg);
}

.setting-group {
  margin-bottom: 25px;
}

.setting-group h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  color: var(--pepe-orange);
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-group h3 i {
  color: var(--pepe-yellow);
}

.setting-label {
  display: block;
  margin-bottom: 8px;
  color: var(--comic-black);
  font-weight: bold;
}

.slider {
  width: 100%;
  height: 12px;
  background: #eaeaea;
  border: 3px solid var(--comic-black);
  border-radius: 6px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 10px 0 20px 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pepe-yellow);
  border: 3px solid var(--comic-black);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pepe-yellow);
  border: 3px solid var(--comic-black);
  cursor: pointer;
}

.select-container {
  position: relative;
  margin-bottom: 20px;
}

.select-container select {
  width: 100%;
  padding: 12px 15px;
  background: #fbf6f0;
  border: 3px solid var(--comic-black);
  border-radius: 8px;
  color: var(--comic-black);
  font-size: 16px;
  appearance: none;
  cursor: pointer;
  font-weight: bold;
}

.select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--comic-black);
}

.panel-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 3px dashed var(--comic-black);
  text-align: right;
}

.panel-button {
  padding: 12px 30px;
  background: var(--pepe-yellow);
  color: black;
  border: 3px solid var(--comic-black);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.9);
  border-radius: 8px;
  font-weight: bold;
  font-family: 'Bangers', cursive;
  font-size: 1.3rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 5px;
}

.panel-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.9);
  background: white;
}

.panel-button:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

.scores-list {
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 10px;
  margin-top: 10px;
}

.scores-list li {
  padding: 12px 15px;
  margin-bottom: 8px;
  background: #fbf6f0;
  border-radius: 8px;
  border: 3px solid var(--comic-black);
  box-shadow: 3px 3px 0px rgba(0,0,0,0.9);
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.scores-list li:hover {
  background: var(--pepe-amber);
  transform: translateX(5px);
}

/* ================= CHARACTER PANEL ================= */
.character-section {
  margin-bottom: 30px;
}

.character-section h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  color: var(--pepe-orange);
  display: flex;
  align-items: center;
  gap: 10px;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.character-card {
  background: #fbf6f0;
  border: 3px solid var(--comic-black);
  border-radius: 15px;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.9);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.character-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px rgba(0,0,0,0.9);
  background: white;
}

.character-card.selected {
  border-color: var(--pepe-yellow);
  background: var(--pepe-amber);
  box-shadow: 5px 5px 0px rgba(0,0,0,0.9);
}

.character-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--comic-black);
  background: white;
}

.character-name {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  font-size: 1.2rem;
}

/* ================= PAUSE PANEL ================= */
#pausePanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pause-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
}

.pause-content {
  position: relative;
  background: white;
  color: var(--comic-black);
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  min-width: 400px;
  border: 5px solid var(--comic-black);
  box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.9);
}

.pause-content h1 {
  font-size: 3.5rem;
  margin-bottom: 30px;
  font-family: 'Bangers', cursive;
  letter-spacing: 2px;
  color: var(--pepe-orange);
  text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.pause-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pause-buttons button {
  padding: 15px 30px;
  border: 3px solid var(--comic-black);
  box-shadow: 4px 4px 0px rgba(0,0,0,0.9);
  border-radius: 12px;
  color: black;
  font-size: 1.5rem;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pause-buttons button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px rgba(0,0,0,0.9);
  background: white;
}

#resumeBtn {
  background: #4caf50;
  color: white;
}

#resumeBtn:hover {
  background: #66bb6a;
}

#restartBtn {
  background: var(--pepe-yellow);
}

#restartBtn:hover {
  background: var(--pepe-amber);
}

#pauseMainMenuBtn {
  background: var(--pepe-orange);
  color: white;
}

#pauseMainMenuBtn:hover {
  background: #f0681a;
}

/* ================= GAME ================= */
#gameContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #0a3d0a;
  display: none;
  overflow: hidden;
}

.game-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #0a3d0a 0%, #1a5a1a 100%);
}

.stadium-lights-game {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 10%, rgba(255, 255, 200, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 10%, rgba(255, 255, 200, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(255, 255, 200, 0.2) 0%, transparent 50%);
}

.crowd-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.05)"/></svg>') repeat;
  animation: crowdMove 20s linear infinite;
}

@keyframes crowdMove {
  0% { background-position: 0 0; }
  100% { background-position: 100px 100px; }
}

.game-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  display: block;
  background: linear-gradient(to bottom, #0a3d0a 0%, #1a5a1a 100%);
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 50px rgba(0, 100, 0, 0.5);
  position: relative;
  z-index: 1;
  /* Fill viewport maintaining 16:9 aspect ratio */
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
}

/* ================= SCOREBOARD ================= */
.modern-scoreboard {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  background: white;
  color: var(--comic-black);
  border: 4px solid var(--comic-black);
  border-radius: 15px;
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.9);
}

.teamScore {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.player-team {
  justify-content: flex-start;
}

.opponent-team {
  justify-content: flex-end;
}

.team-badge {
  width: 50px;
  height: 50px;
  background: var(--pepe-yellow);
  border: 3px solid var(--comic-black);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: black;
}

.opponent-team .team-badge {
  background: var(--pepe-orange);
  color: white;
}

.team-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.teamName {
  font-size: 1.1rem;
  color: var(--comic-black);
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.score {
  font-size: 36px;
  font-weight: bold;
  color: var(--comic-black);
  font-family: 'Bangers', cursive;
  transition: all 0.3s ease;
}

.score.update {
  transform: scale(1.3);
  color: var(--pepe-orange);
}

.team-possession {
  width: 80px;
  height: 8px;
  background: #eaeaea;
  border: 2px solid var(--comic-black);
  border-radius: 4px;
  overflow: hidden;
}

.possession-bar {
  height: 100%;
  background: var(--pepe-yellow);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.opponent-team .possession-bar {
  background: var(--pepe-orange);
}

.matchInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  flex-shrink: 0;
}

.time-container {
  text-align: center;
}

.time-label {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.time {
  font-size: 26px;
  font-weight: bold;
  color: var(--comic-black);
  font-family: 'Bangers', cursive;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.time-progress {
  width: 150px;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.hud-pause-btn {
  margin-top: 5px;
  background: var(--pepe-yellow);
  color: black;
  border: 3px solid var(--comic-black);
  border-radius: 8px;
  width: 44px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.9);
  font-size: 14px;
  transition: all 0.15s ease;
  z-index: 20;
}

.hud-pause-btn:hover {
  background: white;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(0,0,0,0.9);
}

.hud-pause-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px rgba(0,0,0,0.9);
}

.progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #4caf50, #8bc34a);
  border-radius: 2px;
  animation: timeProgress 180s linear forwards;
}

@keyframes timeProgress {
  0% { width: 100%; }
  100% { width: 0%; }
}

.match-stats {
  display: flex;
  gap: 15px;
}

.stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: bold;
  color: var(--comic-black);
  background: rgba(255, 122, 0, 0.12);
  padding: 6px 12px;
  border-radius: 15px;
  border: 1px solid rgba(255, 122, 0, 0.3);
}

.stat i {
  color: #ffd700;
  font-size: 16px;
  flex-shrink: 0;
}

.stat span,
.stat strong {
  color: var(--comic-black);
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
}

/* ================= SPECIAL SHOTS HUD ================= */
#specialHUD {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 3px solid var(--comic-black);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.85);
  min-width: 130px;
}

#specialHUD .fa-bolt {
  font-size: 22px;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,200,0,0.6);
  flex-shrink: 0;
}

.special-hud-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.special-hud-label {
  font-family: 'Bangers', cursive;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(0,0,0,0.5);
  line-height: 1;
}

.special-hud-count {
  font-family: 'Bangers', cursive;
  font-size: 28px;
  line-height: 1;
  color: var(--comic-black);
}

.special-hud-count strong {
  color: var(--pepe-yellow);
  font-size: 34px;
  transition: color .3s, transform .3s;
  display: inline-block;
}

.special-hud-count span {
  color: rgba(0,0,0,0.4);
  font-size: 20px;
}

/* ================= HIGH SCORE CARD ================= */
.high-score-display {
  position: absolute;
  top: 105px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pepe-yellow);
  border-radius: 10px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 10;
  border: 3px solid var(--comic-black);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.9);
}

.high-score-display i {
  font-size: 24px;
  color: black;
}

.high-score-content {
  display: flex;
  flex-direction: column;
}

.high-score-label {
  font-size: 0.9rem;
  font-weight: bold;
  color: black;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
}

.high-score-value {
  font-size: 22px;
  font-weight: bold;
  color: white;
  font-family: 'Bangers', cursive;
  text-shadow: 2px 2px 0px black;
}

.high-score-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: bannerShine 3s infinite;
}

@keyframes bannerShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ================= GAME CONTROLS ================= */
.game-controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}

.control-item kbd {
  background: rgba(255, 255, 255, 0.2);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 12px;
  min-width: 40px;
  text-align: center;
}

.control-item span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

/* ================= MATCH OVER PANEL ================= */
#matchOverPanel {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.match-over-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(5px);
  animation: fadeInBg 0.8s ease forwards;
}

@keyframes fadeInBg {
  from { opacity: 0; }
  to { opacity: 1; }
}

.match-over-content {
  position: relative;
  text-align: center;
  background: white;
  color: var(--comic-black);
  padding: 40px 60px;
  border-radius: 20px;
  border: 5px solid var(--comic-black);
  box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.9);
  animation: popIn 0.8s ease forwards;
}

@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.match-over-content h1 {
  font-size: 4.5rem;
  margin-bottom: 30px;
  color: var(--pepe-yellow);
  font-family: 'Bangers', cursive;
  letter-spacing: 2px;
  text-shadow: 4px 4px 0px black;
}

.scores {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
  gap: 20px;
}

.scores div {
  background: white;
  color: black;
  border: 4px solid var(--comic-black);
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
  padding: 20px 40px;
  border-radius: 15px;
}

.scores h2 {
  font-family: 'Bangers', cursive;
  font-size: 1.8rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.scores span {
  font-size: 42px;
  font-weight: bold;
  font-family: 'Bangers', cursive;
  color: var(--pepe-orange);
  text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

.buttons button {
  background: var(--pepe-yellow);
  border: 4px solid var(--comic-black);
  box-shadow: 5px 5px 0px rgba(0,0,0,0.9);
  padding: 15px 30px;
  margin: 10px;
  font-size: 1.8rem;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  color: black;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.buttons button:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px rgba(0,0,0,0.9);
  background: white;
}

/* ===============================================================
   RESPONSIVE — menus & panels (phones in any orientation)
   =============================================================== */
@media (max-width: 768px), (max-height: 500px) {
  .game-title   { font-size: 42px; }
  .menu-title   { font-size: 24px !important; margin-bottom: 20px !important; }
  .menu-buttons { width: 95%; gap: 10px !important; margin-bottom: 25px !important; }
  .menu-stats   { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; margin-top: 15px !important; }
  .stat-box     { padding: 8px 12px !important; min-width: 110px !important; gap: 8px !important; }
  .stat-value   { font-size: 18px !important; }
  .stat-label   { font-size: 10px !important; }
  
  .character-grid { grid-template-columns: repeat(2, 1fr); }
  .pause-content  { min-width: 280px; padding: 20px; }
  .pause-content h1 { font-size: 2.2rem; }
  .pause-buttons button { padding: 10px 20px; font-size: 1.1rem; }
  .match-over-content { padding: 20px; }
  .match-over-content h1 { font-size: 2.2rem; }
  .scores div { padding: 12px 20px; }
  .scores span { font-size: 28px; }
  .buttons button { padding: 10px 20px; font-size: 1.2rem; }

  /* Launch Page Mobile overrides */
  #launchPage {
    overflow-y: auto !important;
    align-items: flex-start !important;
    padding: 30px 10px !important;
  }
  #launchPage h1 {
    font-size: 2.5rem !important;
    letter-spacing: 2px !important;
  }
  #launchPage .subtitle {
    font-size: 1.0rem !important;
    letter-spacing: 3px !important;
    margin-bottom: 1rem !important;
  }
  .logo-circle {
    width: 90px !important;
    height: 90px !important;
    margin-bottom: 1rem !important;
  }
  .logo-circle i {
    font-size: 3.2rem !important;
  }
  .launch-actions {
    margin: 1.5rem 0 !important;
  }
  .launch-button {
    padding: 14px 30px !important;
    font-size: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  .launch-features {
    gap: 15px !important;
    margin-top: 1rem !important;
  }
  .feature {
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
  }
  .launch-footer {
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
  }

  /* Scrollable menus & forms for landscape/small screens */
  #authPage, #homeMenu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start !important;
    padding: 20px 10px;
  }
  .menu-container {
    max-height: none !important;
    height: auto !important;
  }
  .menu-header {
    padding: 8px 12px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .menu-logo {
    font-size: 14px !important;
    gap: 6px !important;
  }
  .menu-logo i {
    font-size: 16px !important;
  }
  .menu-player {
    font-size: 13px !important;
    gap: 6px !important;
  }
  #loggedInUsername {
    font-size: 0.95rem !important;
    max-width: 75px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  #logoutBtn, .menu-player .panel-button {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
  }
  .menu-content {
    padding: 20px 10px !important;
  }
  .menuButton {
    padding: 12px 20px !important;
    border-radius: 10px !important;
  }
  .button-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .button-title {
    font-size: 1.1rem !important;
  }
  .button-subtitle {
    font-size: 11px !important;
  }

  /* Auth forms mobile responsive */
  .auth-container {
    padding: 20px 15px !important;
    max-height: none !important;
    margin: 20px auto !important;
  }
  .authOptionButton {
    padding: 12px 15px !important;
  }
  .authOptionButton .button-title {
    font-size: 1.2rem !important;
  }
  .authOptionButton .button-subtitle {
    font-size: 0.85rem !important;
  }
  .auth-form h3 {
    font-size: 1.3rem !important;
  }
  .input-group label {
    font-size: 0.9rem !important;
  }
  .panel-content {
    max-height: 90dvh !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  .match-over-content, .pause-content {
    max-height: 95dvh !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
    padding: 20px 15px !important;
  }
}

/* ===============================================================
   TOUCH CONTROLS — base styles (hidden by default on desktop)
   =============================================================== */
.mobile-controls {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  z-index: 20;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mob-left,
.mob-right {
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

.mob-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.08s;
  -webkit-tap-highlight-color: transparent;
}

.mob-btn.active,
.mob-btn:active {
  background: rgba(255, 122, 0, 0.72);
  transform: scale(0.91);
}

.mob-kick {
  width: 64px; height: 64px;
  font-size: 12px;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  background: rgba(255, 122, 0, 0.55);
  border-color: #ff7a00;
}

.mob-special {
  width: 60px; height: 60px;
  background: rgba(110, 0, 200, 0.55);
  border-color: #a033ff;
  font-size: 22px;
}

.mob-jump {
  background: rgba(20, 90, 200, 0.55);
  border-color: #3399ff;
}

/* ---------------------------------------------------------------
   COMPACT SCOREBOARD — shared by portrait & landscape mobile
   --------------------------------------------------------------- */
.compact-scoreboard {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  gap: 5px;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid var(--comic-black);
  box-shadow: none;
}

/* ===============================================================
   PORTRAIT PHONE
   The entire #gameContainer is rotated -90° so the landscape
   game fills the portrait screen without any layout fighting.

   CSS coordinate proof (vw=390, vh=844 example):
     Container: width=100vh(844), height=100vw(390), left=100vw(390), top=0
     After rotate(-90deg) around transform-origin=top-left=(390,0):
       container top-left  (390,0)   → stays (390,0)
       container top-right (1234,0)  → (390, 844)
       container btm-right (1234,390)→ (0, 844)
       container btm-left  (390,390) → (0, 0)
     Result: fills portrait 0,0→390,844 exactly ✓

   HUD/controls: padding in container coords maps to portrait:
     padding-top:48px   = portrait RIGHT strip → scoreboard
     padding-bottom:72px = portrait LEFT strip → touch controls
     canvas gets calc(100vw - 120px) height, 16:9 width → centred
   =============================================================== */
@media (orientation: portrait) and (max-width: 900px) {

  #landscapePrompt { display: none !important; }

  #gameContainer {
    width:  100vh !important;
    height: 100vw !important;
    top:  50%     !important;
    left: 50%     !important;
    transform: translate(-50%, -50%) rotate(-90deg) !important;
    overflow: hidden !important;
    background: #0a0a0a;
  }

  /* game-wrapper: padding carves out HUD (portrait-right) and
     controls (portrait-left) zones so canvas is not hidden behind them */
  .game-wrapper {
    padding-top:    48px !important;
    padding-bottom: 90px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Canvas: explicit height fills the padded content strip;
     aspect-ratio drives the width so 16:9 is preserved */
  canvas {
    height: calc(100dvw - 138px);  /* 100dvw = container height = portrait width */
    height: calc(100vw - 138px);
    width: auto;
    aspect-ratio: 16 / 9 !important;
    max-width: 100dvh;   /* 100dvh = container width = portrait height */
    max-width: 100vh;
    flex-shrink: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  /* Compact scoreboard — sits at container top → portrait RIGHT strip */
  .modern-scoreboard {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 8px !important;
    gap: 5px;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid var(--comic-black) !important;
    box-shadow: none !important;
  }

  .teamScore  { flex: 1; gap: 4px; }
  .team-badge { width: 24px; height: 24px; font-size: 10px; border-width: 2px; }
  .team-info  { flex-direction: row; gap: 4px; align-items: center; }
  .teamName {
    font-size: 0.65rem;
    margin: 0;
    max-width: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .score      { font-size: 17px; }
  .team-possession { display: none !important; }
  .time-label      { display: none !important; }
  .time-progress   { display: none !important; }
  .time  { font-size: 14px; margin: 0; }
  .matchInfo {
    min-width: 0;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .hud-pause-btn {
    margin-top: 0 !important;
    width: 36px !important;
    height: 28px !important;
    font-size: 11px !important;
    border-width: 2px !important;
  }

  .special-mini {
    display: flex !important;
    align-items: center; gap: 3px;
    font-family: 'Bangers', cursive; font-size: 12px;
    color: var(--comic-black);
    background: rgba(255,122,0,0.15);
    border: 1px solid rgba(255,122,0,0.4);
    border-radius: 6px; padding: 1px 5px;
  }
  .special-mini i { color: #ffd700; font-size: 10px; }

  #specialHUD    { display: none !important; }
  #highScoreCard { display: none !important; }
  .game-controls { display: none !important; }

  /* Touch controls — sits at container bottom → portrait LEFT strip */
  .mobile-controls {
    display: flex !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 90px !important;
    background: rgba(0, 0, 0, 0.50) !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(6px) !important;
  }

  /* Buttons are upright relative to container (no rotation) */
  .mob-btn {
    transform: none !important;
    width: 70px !important;
    height: 70px !important;
    font-size: 20px !important;
  }
  .mob-btn.active,
  .mob-btn:active { transform: scale(0.91) !important; }

  .mob-kick {
    width: 95px !important;
    height: 70px !important;
    font-size: 14px !important;
    border-radius: 35px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mob-special {
    width: 70px !important;
    height: 70px !important;
    font-size: 24px !important;
    border-radius: 50% !important;
  }
}

/* ===============================================================
   LANDSCAPE PHONE  (height ≤ 500 px, orientation: landscape)
   Uses game-wrapper padding to carve out HUD + controls zones.
   JS (fitCanvasMobile) sizes the canvas precisely.
   =============================================================== */
@media (max-height: 500px) and (orientation: landscape) {

  .game-wrapper {
    padding-top: 48px !important;
    padding-bottom: 90px !important;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  canvas {
    /* JS provides precise px; CSS is the fallback */
    width: auto;
    height: calc(100dvh - 138px);
    height: calc(100vh - 138px);
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-left: none; border-right: none;
    box-shadow: none;
  }

  .modern-scoreboard {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px;
    flex-direction: row !important;
    align-items: center;
    padding: 0 8px; gap: 5px;
    border-radius: 0;
    border-top: none; border-left: none; border-right: none;
    border-bottom: 2px solid var(--comic-black);
    box-shadow: none;
  }

  .teamScore  { flex: 1; gap: 5px; }
  .team-badge { width: 26px; height: 26px; font-size: 11px; border-width: 2px; }
  .team-info  { flex-direction: row; gap: 4px; align-items: center; }
  .teamName {
    font-size: 0.65rem;
    margin: 0;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .score      { font-size: 18px; }
  .team-possession { display: none; }
  .time-label      { display: none; }
  .time-progress   { display: none; }
  .time { font-size: 15px; margin: 0; }
  .matchInfo {
    min-width: 0;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
  }
  .hud-pause-btn {
    margin-top: 0 !important;
    width: 36px !important;
    height: 28px !important;
    font-size: 11px !important;
    border-width: 2px !important;
  }

  .special-mini {
    display: flex !important;
    align-items: center; gap: 3px;
    font-family: 'Bangers', cursive; font-size: 13px;
    color: var(--comic-black);
    background: rgba(255,122,0,0.15);
    border: 1px solid rgba(255,122,0,0.4);
    border-radius: 7px; padding: 1px 6px;
  }
  .special-mini i { color: #ffd700; font-size: 10px; }

  #specialHUD    { display: none !important; }
  #highScoreCard { display: none !important; }
  .game-controls { display: none !important; }

  .mobile-controls {
    display: flex !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 90px !important;
  }

  .mobile-controls .mob-btn {
    width: 70px !important;
    height: 70px !important;
    font-size: 20px !important;
  }
  .mobile-controls .mob-kick {
    width: 95px !important;
    height: 70px !important;
    font-size: 14px !important;
    border-radius: 35px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-controls .mob-special {
    width: 70px !important;
    height: 70px !important;
    font-size: 24px !important;
    border-radius: 50% !important;
  }
}

/* ================= AUTH PAGE & FORMS ================= */
#authPage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 950;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(11, 6, 4, 0.9), rgba(30, 16, 8, 0.95)), 
              url('resources/ground.jpg') center/cover no-repeat;
}

.auth-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(224, 83, 0, 0.05);
}

.auth-container {
  position: relative;
  z-index: 2;
  background: white;
  color: var(--comic-black);
  border: 5px solid var(--comic-black);
  box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.9);
  border-radius: 20px;
  padding: 30px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.auth-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.authOptionButton {
  padding: 20px;
  background: var(--pepe-yellow);
  color: black;
  border: 4px solid var(--comic-black);
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.9);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.authOptionButton:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.9);
  background: white;
}

.authOptionButton:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.9);
}

.authOptionButton .button-title {
  font-family: 'Bangers', cursive;
  font-size: 1.6rem;
  letter-spacing: 1px;
}

.authOptionButton .button-subtitle {
  font-size: 0.95rem;
  font-family: 'Comic Neue', cursive;
  opacity: 0.8;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
  margin-top: 15px;
}

.auth-form h3 {
  font-family: 'Bangers', cursive;
  font-size: 1.8rem;
  color: var(--pepe-orange);
  text-align: center;
  border-bottom: 3px dashed var(--comic-black);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-group label {
  font-family: 'Permanent Marker', cursive;
  font-size: 1.1rem;
  color: var(--comic-black);
}

.input-group input {
  padding: 12px;
  border: 3px solid var(--comic-black);
  border-radius: 8px;
  font-size: 1.1rem;
  background: #fbf6f0;
  outline: none;
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
}

.input-group input:focus {
  background: white;
  border-color: var(--pepe-yellow);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
}

.btn-secondary {
  background: #eaeaea !important;
  color: black !important;
}

.btn-secondary:hover {
  background: white !important;
}

.auth-error {
  color: #d32f2f;
  font-weight: bold;
  font-size: 1rem;
  margin-top: 10px;
  text-align: center;
  font-family: 'Comic Neue', cursive;
}

/* ================= LAUNCH HERO ================= */
.launch-hero {
  position: relative;
  width: 240px;
  height: 180px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}

/* Mini goal post on the left side — player kicked ball into own net */
.hero-goal-post {
  width: 18px;
  height: 120px;
  background: white;
  border: 3px solid #111;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(255,255,255,0.6);
}

.hero-goal-post::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -3px;
  width: 100px;
  height: 14px;
  background: white;
  border: 3px solid #111;
  border-radius: 4px;
}

.hero-ball {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
  animation: ballSpin 1.5s linear infinite;
  position: relative;
  z-index: 2;
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* Player faces LEFT (toward own goal) — hence scaleX(-1) */
.hero-player {
  width: 110px;
  height: 160px;
  object-fit: contain;
  transform: scaleX(-1);
  filter: drop-shadow(0 0 18px rgba(255,122,0,0.9));
  animation: heroFloat 2.8s ease-in-out infinite alternate;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

.hero-label {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--pepe-orange);
  color: white;
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  letter-spacing: 2px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #111;
  animation: labelPop 1.5s ease-in-out infinite alternate;
  transform-origin: bottom right;
}

@keyframes heroFloat {
  0% { transform: scaleX(-1) translateY(0); }
  100% { transform: scaleX(-1) translateY(-8px); }
}

@keyframes ballSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes labelPop {
  0% { transform: rotate(-3deg) scale(1); }
  100% { transform: rotate(3deg) scale(1.08); }
}

/* ================= SPECIAL SHOT RELOAD BAR ================= */
.special-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 90px;
}

.reload-bar-bg {
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
  overflow: hidden;
}

.reload-bar-fill {
  height: 100%;
  width: 100%;
  background: #ff7a00;
  border-radius: 3px;
  transition: width 0.1s linear, background 0.3s;
}

/* ================= CONTROLS TABLE ================= */
.controls-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-bottom: 20px;
}

.controls-table tr { border-radius: 8px; }

.ctrl-key {
  padding: 10px 15px;
  text-align: center;
  width: 120px;
}

.ctrl-key kbd {
  background: var(--comic-black);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 1rem;
  font-weight: bold;
  border-bottom: 3px solid rgba(255,255,255,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.ctrl-desc {
  padding: 10px 15px;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--comic-black);
  border-bottom: 2px dashed rgba(0,0,0,0.1);
}

.controls-tip {
  background: rgba(255,122,0,0.1);
  border: 2px solid var(--pepe-orange);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--comic-black);
  margin-top: 10px;
  line-height: 1.5;
}