/* ==========================================================================
   Design System & Variables
   ========================================================================== */
:root {
  --color-sky-start: hsl(265, 55%, 15%);
  --color-sky-mid: hsl(340, 65%, 35%);
  --color-sky-end: hsl(20, 85%, 55%);
  --color-sun: hsl(40, 95%, 70%);
  
  --color-far-city: hsl(265, 40%, 12%);
  --color-near-city: hsl(280, 30%, 10%);
  --color-road: hsl(280, 20%, 8%);
  --color-road-line: hsl(45, 95%, 60%);

  /* UI Palette */
  --bg-glass: rgba(25, 15, 35, 0.55);
  --border-glass: rgba(255, 255, 255, 0.12);
  --color-text: hsl(0, 0%, 96%);
  --color-text-dim: hsl(280, 15%, 75%);
  --color-accent: hsl(36, 100%, 65%); /* Gold / Orange Accent */
  --color-accent-glow: hsla(36, 100%, 65%, 0.4);
  --color-danger: hsl(355, 85%, 60%);
  --color-success: hsl(150, 70%, 50%);
  --color-shield: hsl(190, 95%, 60%);
  
  /* Fonts */
  --font-display: 'Fredoka', 'Segoe UI', sans-serif;
  --font-body: 'Outfit', 'Segoe UI', sans-serif;
  
  /* Layout */
  --game-width: 800px;
  --game-height: 450px;
}

/* ==========================================================================
   Resets & Base Layout
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: var(--font-body);
  background-color: hsl(265, 45%, 8%);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  perspective: 1000px;
}

#app-container {
  width: var(--game-width);
  height: var(--game-height);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 
              0 0 40px hsla(280, 50%, 15%, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background-color: var(--color-sky-start);
}

/* ==========================================================================
   Game Container & Parallax
   ========================================================================== */
#game-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Base Parallax Layout */
.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* Extra width for seamless scrolling */
  height: 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Sky Background Layer (Linear Gradients) */
.parallax-layer.sky {
  width: 100%;
  background: linear-gradient(to bottom, 
              var(--color-sky-start) 0%, 
              var(--color-sky-mid) 45%, 
              var(--color-sky-end) 90%, 
              var(--color-sun) 100%);
  z-index: 1;
}

/* Stars & Clouds Layer */
.parallax-layer.stars-clouds {
  z-index: 2;
  opacity: 0.85;
  background-image: 
    radial-gradient(1px 1px at 40px 60px, #fff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 150px 120px, #ffdfa9, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 280px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 420px 150px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 560px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 700px 50px, #ffd1d1, rgba(0,0,0,0));
  background-size: 800px 300px;
}

/* Far City Layer (Silhouette skyline) */
.parallax-layer.city-far {
  z-index: 3;
  height: 320px;
  top: auto;
  bottom: 60px;
  opacity: 0.45;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 150"><path fill="%23190f23" d="M0 150 L0 100 L25 100 L25 80 L35 80 L35 110 L60 110 L60 60 L80 60 L80 120 L100 120 L100 90 L115 90 L115 70 L130 70 L130 115 L160 115 L160 50 L180 50 L180 120 L210 120 L210 85 L230 85 L230 100 L255 100 L255 75 L270 75 L270 125 L290 125 L290 55 L315 55 L315 110 L340 110 L340 95 L360 95 L360 70 L375 70 L375 130 L400 130 L400 150 Z"/></svg>');
  background-size: 400px 150px;
}

/* Near City Layer (Houses, storefronts) */
.parallax-layer.city-near {
  z-index: 4;
  height: 220px;
  top: auto;
  bottom: 60px;
  opacity: 0.8;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120"><path fill="%230f0617" d="M0 120 L0 80 L15 65 L30 80 L30 90 L55 90 L55 60 L80 60 L80 95 L110 95 L110 50 L125 35 L140 50 L140 100 L170 100 L170 80 L195 80 L195 70 L215 70 L215 90 L240 90 L240 55 L260 40 L280 55 L280 105 L310 105 L310 75 L335 75 L335 90 L360 90 L360 65 L380 50 L400 65 L400 120 Z"/></svg>');
  background-size: 400px 120px;
}

/* Streetlights Layer (Details passing by on street side) */
.parallax-layer.streetlights {
  z-index: 5;
  height: 180px;
  top: auto;
  bottom: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180"><g fill="%232c1c3f"><rect x="30" y="20" width="4" height="160"/><path d="M28 20 Q 32 10 42 12 Q 40 18 32 20 Z"/><circle cx="42" cy="14" r="5" fill="%23ffdf7e"/><rect x="230" y="20" width="4" height="160"/><path d="M228 20 Q 232 10 242 12 Q 240 18 232 20 Z"/><circle cx="242" cy="14" r="5" fill="%23ffdf7e"/></g></svg>');
  background-size: 400px 180px;
}

/* Road / Street Layer */
.parallax-layer.road {
  z-index: 6;
  height: 60px;
  top: auto;
  bottom: 0;
  background: var(--color-road);
  border-top: 4px solid hsl(280, 20%, 15%);
}

.road-line {
  position: absolute;
  top: 26px;
  left: 0;
  width: 200%;
  height: 6px;
  background: repeating-linear-gradient(
    to right,
    var(--color-road-line) 0px,
    var(--color-road-line) 40px,
    transparent 40px,
    transparent 80px
  );
  animation: scrollRoad 1s linear infinite;
  will-change: transform;
}

@keyframes scrollRoad {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-80px, 0, 0); }
}

/* ==========================================================================
   Entities & Player
   ========================================================================== */
#entities-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

#player, #player-remote {
  position: absolute;
  left: 100px;
  bottom: 45px; /* Sits on road (road is 60px, offset is adjusted dynamically in JS) */
  width: 100px;
  height: 80px;
  transform-origin: bottom center;
  z-index: 20;
  transition: transform 0.05s ease;
  will-change: transform, bottom;
}

#player svg, #player-remote svg {
  width: 100%;
  height: 100%;
}

/* Shield bubble styling */
#shield-effect {
  position: absolute;
  top: -10px;
  left: 0px;
  width: 110px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--color-shield);
  box-shadow: 0 0 15px var(--color-shield), inset 0 0 15px var(--color-shield);
  background: rgba(81, 236, 236, 0.15);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  z-index: 25;
}

/* Active Shield State */
#player.shielded #shield-effect,
#player-remote.shielded #shield-effect {
  opacity: 1;
  transform: scale(1.1);
  animation: pulseShield 1.5s infinite alternate;
}

@keyframes pulseShield {
  0% { box-shadow: 0 0 10px var(--color-shield), inset 0 0 10px var(--color-shield); }
  100% { box-shadow: 0 0 25px var(--color-shield), inset 0 0 20px var(--color-shield); }
}

/* ==========================================================================
   SVG Cat Animations
   ========================================================================== */

/* Running Legs Motion */
.player-run #leg-back-left {
  animation: runLegBack 0.5s infinite linear;
  transform-origin: 30px 52px;
}
.player-run #leg-front-left {
  animation: runLegFront 0.5s infinite linear;
  animation-delay: 0.25s;
  transform-origin: 70px 52px;
}
.player-run #leg-back-right {
  animation: runLegFront 0.5s infinite linear;
  transform-origin: 35px 52px;
}
.player-run #leg-front-right {
  animation: runLegBack 0.5s infinite linear;
  animation-delay: 0.25s;
  transform-origin: 65px 52px;
}

/* Running Tail Motion */
.player-run #cat-tail {
  animation: runTail 0.5s infinite ease-in-out;
  transform-origin: 15px 50px;
}

/* Running Body bobbing */
.player-run #cat-body {
  animation: runBody 0.25s infinite alternate ease-in-out;
}
.player-run #cat-head {
  animation: runHead 0.25s infinite alternate ease-in-out;
  transform-origin: 80px 30px;
}

/* Leg Run Keyframes */
@keyframes runLegBack {
  0% { transform: rotate(-25deg); }
  50% { transform: rotate(25deg); }
  100% { transform: rotate(-25deg); }
}
@keyframes runLegFront {
  0% { transform: rotate(25deg); }
  50% { transform: rotate(-25deg); }
  100% { transform: rotate(25deg); }
}
@keyframes runTail {
  0% { transform: rotate(-5deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes runBody {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -2px, 0); }
}
@keyframes runHead {
  0% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  100% { transform: translate3d(0, -1px, 0) rotate(2deg); }
}

/* Jumping Pose */
.player-jump #leg-back-left,
.player-jump #leg-back-right {
  transform: rotate(-35deg) translate3d(-3px, -3px, 0);
  transition: transform 0.2s ease;
}
.player-jump #leg-front-left,
.player-jump #leg-front-right {
  transform: rotate(35deg) translate3d(3px, -3px, 0);
  transition: transform 0.2s ease;
}
.player-jump #cat-tail {
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  transform-origin: 15px 50px;
}

/* Sliding Pose */
.player-slide {
  transform: scaleY(0.55) scaleX(1.15) translate3d(-10px, 15px, 0) !important;
}
.player-slide #leg-back-left,
.player-slide #leg-back-right,
.player-slide #leg-front-left,
.player-slide #leg-front-right {
  transform: rotate(70deg) translate3d(0, -10px, 0);
}
.player-slide #cat-tail {
  transform: rotate(-30deg);
}

/* Hurt / Tumbling Pose */
.player-hurt {
  animation: tumble 0.4s linear infinite;
}

@keyframes tumble {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Sitting Pose (when dead and waiting in multiplayer) */
.player-sitting #leg-back-left,
.player-sitting #leg-back-right {
  transform: rotate(-70deg) translate3d(5px, -5px, 0) !important;
  transform-origin: 30px 52px;
}
.player-sitting #leg-front-left,
.player-sitting #leg-front-right {
  transform: rotate(-15deg) translate3d(0, -3px, 0) !important;
  transform-origin: 70px 52px;
}
.player-sitting #cat-body {
  transform: translate3d(0, 6px, 0) !important;
}
.player-sitting #cat-tail {
  transform: rotate(-45deg) !important;
  transform-origin: 15px 50px;
}

/* ==========================================================================
   Obstacles, Collectibles, Particles
   ========================================================================== */
.obstacle, .collectible {
  position: absolute;
  bottom: 45px;
  will-change: left;
}

/* Obstacle Styles */
.obstacle.cardboard-box {
  width: 45px;
  height: 45px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect x="2" y="2" width="36" height="36" rx="4" fill="%23d3a27f" stroke="%23b07d57" stroke-width="2"/><line x1="2" y1="15" x2="38" y2="15" stroke="%23b07d57" stroke-width="2"/><line x1="20" y1="15" x2="20" y2="38" stroke="%23b07d57" stroke-width="2"/><path d="M6 6 L14 10 L6 14 Z" fill="%23b07d57"/></svg>');
  background-size: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.obstacle.trash-bin {
  width: 40px;
  height: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 50"><rect x="3" y="10" width="29" height="38" rx="2" fill="%237f8c8d" stroke="%235a6465" stroke-width="2"/><rect x="1" y="4" width="33" height="6" rx="1" fill="%2395a5a6"/><rect x="15" y="1" width="5" height="3" fill="%237f8c8d"/><line x1="9" y1="14" x2="9" y2="44" stroke="%235a6465" stroke-width="1.5"/><line x1="17.5" y1="14" x2="17.5" y2="44" stroke="%235a6465" stroke-width="1.5"/><line x1="26" y1="14" x2="26" y2="44" stroke="%235a6465" stroke-width="1.5"/></svg>');
  background-size: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.obstacle.fire-hydrant {
  width: 32px;
  height: 50px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 50"><rect x="6" y="10" width="18" height="35" fill="%23e74c3c" stroke="%23c0392b" stroke-width="2"/><circle cx="15" cy="22" r="6" fill="%23e74c3c" stroke="%23c0392b" stroke-width="2"/><circle cx="15" cy="6" r="5" fill="%23e74c3c"/><rect x="3" y="18" width="24" height="4" fill="%2395a5a6"/><rect x="12" y="43" width="6" height="7" fill="%2395a5a6"/><circle cx="15" cy="22" r="2" fill="%2395a5a6"/></svg>');
  background-size: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

/* Slide obstacles (Low Branch / Bird) */
.obstacle.low-branch {
  width: 60px;
  height: 35px;
  bottom: 120px; /* Suspended mid-air */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 35"><path d="M 0 5 L 45 10 Q 55 12 50 18 L 30 14" stroke="%235c3d24" stroke-width="5" fill="none" stroke-linecap="round"/><path d="M 35 11 Q 40 2 48 5 Q 45 12 35 11 Z" fill="%2327ae60"/><path d="M 15 7 Q 18 -2 25 1 Q 22 8 15 7 Z" fill="%232e7d32"/><path d="M 42 12 Q 48 18 52 14 Q 50 8 42 12 Z" fill="%232e7d32"/></svg>');
  background-size: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}

.obstacle.pigeon {
  width: 45px;
  height: 35px;
  bottom: 90px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40"><path d="M 5 22 L 0 24 L 2 28 L 8 25 Z" fill="%234a4340" /><path d="M 10 20 C 15 10, 30 10, 35 15 C 39 12, 43 14, 45 17 C 45 20, 42 22, 38 23 C 32 30, 20 30, 15 28 Z" fill="%235d534e" /><path d="M 25 14 C 33 14, 41 18, 41 23 C 41 28, 30 31, 25 31 C 20 31, 18 25, 25 14 Z" fill="%23ff793f" /><path d="M 15 27 C 20 28, 25 31, 23 33 C 18 33, 14 30, 15 27 Z" fill="%23f1f2f6" /><polygon points="45,17 49,18 44,20" fill="%23f1c40f" /><circle cx="39" cy="15.5" r="1.3" fill="%23000000" /><circle cx="38.6" cy="15" r="0.4" fill="%23ffffff" /><path id="wing" d="M 22 17 C 22 5, 12 8, 15 20 Z" fill="%234a4340" transform-origin="22px 17px"><animateTransform attributeName="transform" type="rotate" values="-15;30;-15" dur="0.25s" repeatCount="indefinite"/></path></svg>');
  background-size: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}

/* Collectible Styles */
.collectible.fish-bone {
  width: 35px;
  height: 25px;
  bottom: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 30"><path d="M 10 15 C 10 9, 19 9, 23 14 C 27 9, 36 9, 36 15 C 36 21, 27 21, 23 16 C 19 21, 10 21, 10 15 Z" fill="%23e5c185" stroke="%23966a38" stroke-width="1.5" /><path d="M 23 14 L 23 16" stroke="%23966a38" stroke-width="1.5" /><path d="M 14 13 Q 17 14 14 17" stroke="%23c09660" stroke-width="1" fill="none" /><path d="M 32 13 Q 29 14 32 17" stroke="%23c09660" stroke-width="1" fill="none" /></svg>');
  background-size: contain;
  animation: floatCollect 1.2s infinite alternate ease-in-out;
  filter: drop-shadow(0 2px 5px rgba(229, 193, 133, 0.4));
}

.collectible.yarn-ball {
  width: 32px;
  height: 32px;
  bottom: 80px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23ff7675" stroke="%23d63031" stroke-width="1"/><path d="M 4 10 C 12 12, 20 8, 28 10 M 6 22 C 14 18, 22 22, 26 18 M 10 4 C 12 12, 8 20, 10 28 M 22 6 C 18 14, 22 22, 18 26" stroke="%23d63031" stroke-width="2" fill="none"/><path d="M 24 24 Q 28 32 31 29" stroke="%23ff7675" stroke-width="2.5" fill="none"/></svg>');
  background-size: contain;
  animation: floatCollect 1s infinite alternate ease-in-out, spin 3s infinite linear;
  filter: drop-shadow(0 2px 6px rgba(255, 118, 117, 0.5));
}

.collectible.golden-fish {
  width: 40px;
  height: 30px;
  bottom: 90px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 30"><path d="M 10 15 C 10 9, 19 9, 23 14 C 27 9, 36 9, 36 15 C 36 21, 27 21, 23 16 C 19 21, 10 21, 10 15 Z" fill="%23ffd32c" stroke="%23d97706" stroke-width="1.8" /><path d="M 23 14 L 23 16" stroke="%23d97706" stroke-width="1.8" /><path d="M 14 13 Q 17 14 14 17" stroke="%23f59e0b" stroke-width="1" fill="none" /><path d="M 32 13 Q 29 14 32 17" stroke="%23f59e0b" stroke-width="1" fill="none" /></svg>');
  background-size: contain;
  animation: floatCollect 0.8s infinite alternate ease-in-out;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9));
}

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

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

/* Particles styling */
.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 15;
  will-change: transform, opacity;
}

/* ==========================================================================
   HUD Layout (Glassmorphism Header)
   ========================================================================== */
#hud {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  pointer-events: none;
}

.hud-item {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  padding: 8px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.hud-item .label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-text-dim);
  margin-bottom: 2px;
}

.hud-item .value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 5px;
}

.score-box {
  min-width: 120px;
  position: relative;
}

.score-box .multiplier {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-accent);
  color: hsl(280, 45%, 8%);
  font-weight: 800;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 0 8px var(--color-accent-glow);
  transition: transform 0.15s ease;
}

.score-box .multiplier.active {
  animation: pulseScale 0.6s infinite alternate;
}

@keyframes pulseScale {
  0% { transform: translateY(-50%) scale(1); }
  100% { transform: translateY(-50%) scale(1.15); }
}

.lives-box {
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

#lives-container {
  display: flex;
  gap: 3px;
}

#lives-container .heart {
  font-size: 18px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#lives-container .heart.lost {
  transform: scale(0);
  opacity: 0.3;
  filter: grayscale(1);
}

/* Power-up HUD badge */
#powerup-badge {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  padding: 6px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 140px;
  animation: slideIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideIn {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#powerup-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

#powerup-badge .progress-bar {
  flex-grow: 1;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}

#powerup-bar-fill {
  height: 100%;
  background: var(--color-shield);
  width: 100%;
  border-radius: 2px;
  transition: width 0.1s linear;
}

.hud-pause-btn {
  position: absolute;
  top: 85px;
  left: 70px;
  z-index: 200;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  color: var(--color-text);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.hud-fullscreen-btn {
  position: absolute;
  top: 85px;
  left: 20px;
  z-index: 200;
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  color: var(--color-text);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.hud-pause-btn:hover, .hud-fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.hud-pause-btn:active, .hud-fullscreen-btn:active {
  transform: scale(0.95);
}

/* ==========================================================================
   UI Screens & Glassmorphism
   ========================================================================== */
.ui-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(
    circle at center,
    rgba(32, 18, 48, 0.6) 0%,
    rgba(15, 6, 23, 0.85) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ui-screen.hidden {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

#screen-start {
  overflow-y: auto;
  justify-content: flex-start;
  padding: 30px 10px;
}

#screen-start::-webkit-scrollbar {
  width: 6px;
}
#screen-start::-webkit-scrollbar-track {
  background: transparent;
}
#screen-start::-webkit-scrollbar-thumb {
  background: var(--border-glass);
  border-radius: 3px;
}

/* Typography styles */
.game-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 5px;
  text-shadow: 0 0 20px rgba(255, 159, 67, 0.4);
  letter-spacing: -0.5px;
  animation: floatTitle 3s infinite alternate ease-in-out;
}

@keyframes floatTitle {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-5px); }
}

.accent-text {
  color: var(--color-accent);
  background: linear-gradient(135deg, #ffd35c, #ff7675);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.game-subtitle {
  color: var(--color-text-dim);
  font-size: 14px;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

/* Customization Showcase */
.customization-container {
  display: flex;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 8px 12px;
  gap: 15px;
  margin-bottom: 6px;
  width: 80%;
  align-items: center;
}

.cat-preview-box {
  width: 110px;
  height: 70px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.cat-preview-box #preview-cat {
  position: absolute;
  bottom: 5px;
  left: 10px;
}

.customization-controls {
  flex-grow: 1;
  text-align: left;
}

.customization-controls h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-text-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
}

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

.color-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--color-text);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.color-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}

.color-btn.active {
  background: var(--color-accent);
  color: hsl(280, 45%, 8%);
  border-color: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-glow);
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
}

.color-dot.orange { background: linear-gradient(135deg, #ff9f43, #ee5253); }
.color-dot.black { background: linear-gradient(135deg, #4b5563, #111827); }
.color-dot.white { background: linear-gradient(135deg, #f8fafc, #94a3b8); }
.color-dot.calico { background: linear-gradient(135deg, #ee5253, #111827 50%, #f8fafc); }

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

.music-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--color-text);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.music-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}

.music-btn.active {
  background: var(--color-accent);
  color: hsl(280, 45%, 8%);
  border-color: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent-glow);
}

/* Buttons & Navigation */
.menu-actions {
  display: flex;
  gap: 15px;
}

.menu-actions.vertical {
  flex-direction: column;
  width: 220px;
}

.btn-primary {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffb03a, #ff6b6b);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 25px rgba(255, 107, 107, 0.45);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-secondary {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: var(--color-text);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 12px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

.btn-secondary:active {
  transform: scale(0.98);
}

.high-score-display {
  margin-top: 25px;
  font-size: 13px;
  color: var(--color-text-dim);
  background: rgba(255,255,255,0.02);
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.04);
}

.high-score-display strong {
  color: var(--color-accent);
}

/* ==========================================================================
   Pause & GameOver Specific Styles
   ========================================================================== */
.pause-quote {
  font-style: italic;
  color: var(--color-text-dim);
  margin-bottom: 25px;
}

.sound-controls {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.2);
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

.sound-controls label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-dim);
}

.sound-controls input[type="range"] {
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
  cursor: pointer;
}

.btn-icon {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-icon:hover {
  transform: scale(1.1);
}

/* Stats panel for GameOver screen */
.stats-panel {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  padding: 20px;
  width: 320px;
  margin-bottom: 25px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  color: var(--color-text-dim);
  font-size: 14px;
  font-weight: 600;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

.new-badge {
  background: linear-gradient(135deg, #ffd32c, #f9ca24);
  color: hsl(280, 45%, 8%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 6px;
  border-radius: 8px;
  margin-top: 12px;
  box-shadow: 0 0 12px rgba(249, 202, 36, 0.5);
  animation: pulseScale 0.8s infinite alternate;
}

/* ==========================================================================
   How To Play Modal
   ========================================================================== */
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 6, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  background: radial-gradient(circle at center, #2e1e3f 0%, #15091f 100%);
  border: 1px solid var(--border-glass);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  padding: 30px;
  width: 85%;
  max-width: 520px;
  text-align: center;
}

.modal-content h2 {
  font-family: var(--font-display);
  margin-bottom: 20px;
}

.instruction-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.instruction-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.control-key {
  background: #f8fafc;
  color: #1e293b;
  border-radius: 6px;
  padding: 4px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 0 #cbd5e1;
  display: inline-block;
  min-width: 40px;
  text-align: center;
}

.item-icon {
  font-size: 20px;
  line-height: 24px;
}

.instruction-item p {
  font-size: 12px;
  color: var(--color-text-dim);
  line-height: 1.4;
}

.instruction-item strong {
  color: var(--color-text);
}

/* ==========================================================================
   Mobile Touch Controls & Responsive adjustments
   ========================================================================== */
.touch-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 50;
  display: none; /* Active via JS check or Media query */
}

#touch-jump-zone {
  left: 0;
}

#touch-slide-zone {
  right: 0;
}

@media (max-width: 800px) {
  :root {
    --game-width: 100vw;
    --game-height: 56.25vw; /* Maintain 16:9 ratio */
  }
  
  #app-container {
    border-radius: 0;
    border: none;
  }
}

/* ==========================================================================
   Multiplayer & WebRTC Voice Chat Styles
   ========================================================================== */
#player-remote {
  filter: drop-shadow(0 0 6px rgba(52, 152, 219, 0.45)); /* Blue-cyan glow for P2 */
}

/* Remote player HUD box styles */
.remote-box {
  border-color: rgba(52, 152, 219, 0.3) !important;
  box-shadow: 0 0 12px rgba(52, 152, 219, 0.15) !important;
}
#lives-container-remote .heart {
  font-size: 16px;
  transition: transform 0.3s ease;
}
#lives-container-remote .heart.lost {
  transform: scale(0);
  opacity: 0.3;
  filter: grayscale(1);
}

/* Voice Chat widget styles */
.voice-box {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  pointer-events: auto;
  width: 175px;
}
#voice-chat-widget {
  position: absolute;
  top: 75px;
  right: 205px;
  z-index: 100;
  pointer-events: auto;
}
#video-call-widget {
  position: absolute;
  top: 75px;
  right: 20px;
  z-index: 100;
  pointer-events: auto;
}
.voice-controls {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.btn-voice {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-grow: 1;
  text-align: center;
}
.btn-voice:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-voice:active {
  transform: scale(0.95);
}
/* Active recording / talking indicators */
.btn-voice.recording {
  background: var(--color-danger);
  border-color: var(--color-danger);
  animation: pulseMic 1s infinite alternate;
}
.btn-voice.streaming {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #000;
}

@keyframes pulseMic {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(231, 76, 60, 0.5); }
  100% { transform: scale(1.03); box-shadow: 0 0 12px rgba(231, 76, 60, 0.8); }
}

/* Multiplayer Lobby Panel Start Screen */
.multiplayer-panel {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  padding: 8px 12px;
  width: 80%;
  margin-bottom: 8px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.multiplayer-panel h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mp-actions-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.or-separator {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.join-box {
  display: flex;
  gap: 8px;
  flex-grow: 1;
  max-width: 320px;
}
.join-box input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  color: #fff;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  flex-grow: 1;
  transition: all 0.2s ease;
}
.join-box input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}
.join-box button {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
}
.mp-status-label {
  font-size: 11px;
  color: var(--color-text-dim);
  margin-top: 10px;
  font-weight: 600;
}
.mp-status-label.connected {
  color: var(--color-success);
}
.mp-status-label.connecting {
  color: var(--color-accent);
}
.room-info {
  margin-top: 12px;
  background: rgba(0,0,0,0.25);
  padding: 8px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.04);
}
.room-info strong {
  color: var(--color-accent);
  letter-spacing: 0.5px;
}
.room-info button {
  font-size: 12px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.room-info button:hover {
  background: rgba(255,255,255,0.12);
}

/* Victory Screen specific typography */
.finished-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 5px;
  background: linear-gradient(135deg, #2ecc71, #3498db, #9b59b6, #e74c3c, #f1c40f);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowText 6s infinite alternate, floatTitle 2s infinite alternate ease-in-out;
  text-shadow: 0 0 30px rgba(52, 152, 219, 0.25);
  letter-spacing: -0.5px;
}

@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.finished-subtitle {
  color: var(--color-text);
  font-size: 15px;
  margin-bottom: 25px;
  text-shadow: 0 0 10px rgba(255,255,255,0.1);
  font-weight: 600;
}

/* Pile Cat Emojis */
.pile-cat {
  position: absolute;
  width: 50px;
  height: 50px;
  font-size: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 0.1s ease;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

/* Difficulty selector picker styles */
.difficulty-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 5px;
}

.difficulty-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--color-text-dim);
  padding: 6px 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

.customization-row {
  width: 80%;
  margin-bottom: 6px;
}

.difficulty-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.difficulty-btn.active[data-diff="beginner"] {
  background: rgba(46, 204, 113, 0.2);
  border-color: #2ecc71;
  color: #2ecc71;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}

.difficulty-btn.active[data-diff="medium"] {
  background: rgba(241, 196, 15, 0.2);
  border-color: #f1c40f;
  color: #f1c40f;
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}

.difficulty-btn.active[data-diff="expert"] {
  background: rgba(231, 76, 60, 0.2);
  border-color: #e74c3c;
  color: #e74c3c;
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

/* Level Up Overlay Banner */
.level-up-banner {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 150;
  pointer-events: none;
  text-align: center;
  animation: levelUpPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes levelUpPop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.level-up-glow {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  background: linear-gradient(135deg, #ffd32c, #ff7675, #9b59b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(255, 118, 117, 0.4);
  letter-spacing: 2px;
}

.level-up-sub {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  margin-top: 4px;
}

/* Firework Cat Emojis */
.firework-cat {
  position: absolute;
  font-size: 32px;
  z-index: 18;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

/* Structured In-game Sidebar Panel (Webcams & Chat) - Floating Overlay */
.game-sidebar {
  position: absolute;
  top: 60px;
  right: 15px;
  width: 140px;
  height: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 250;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.game-sidebar.hidden {
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}

/* Webcam Card styling */
.webcam-card {
  position: relative;
  width: 100%;
  height: 85px;
  background: #1b0a2b;
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 5px var(--color-accent-glow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webcam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #15091f;
}

.webcam-video.hidden {
  display: none !important;
}

#local-video {
  transform: scaleX(-1); /* Mirror local webcam preview */
}

.webcam-label {
  position: absolute;
  bottom: 4px;
  left: 6px;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

/* Game Chat Box styling */
.game-chat-box {
  flex: 1;
  background: rgba(21, 9, 31, 0.85);
  border: 2px solid var(--color-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 8px var(--color-primary-glow);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chat-messages {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  line-height: 1.3;
}

.chat-system {
  color: #ff9f43;
  font-style: italic;
}

.chat-bubble {
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  word-break: break-all;
  text-align: left;
}

.chat-sender {
  font-weight: bold;
  color: var(--color-primary);
  margin-right: 4px;
}

.chat-text {
  color: var(--color-text);
}

.chat-input-row {
  display: flex;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  gap: 4px;
}

.chat-input-row input {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  outline: none;
}

.chat-input-row input:focus {
  border-color: var(--color-primary);
}

.btn-chat-send {
  background: var(--color-primary);
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  color: #000;
  font-weight: bold;
  font-size: 10px;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-chat-send:hover {
  background: #fff;
}

/* Responsive fallbacks if screen is too small - Disabled to maintain floating overlay */

/* Visible Mobile Thumb Controls */
.mobile-only-controls {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 100;
  pointer-events: none;
}

.mobile-ctrl-btn {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: rgba(255, 159, 67, 0.25);
  border: 4px solid #ff9f43;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 15px rgba(255, 159, 67, 0.4), inset 0 0 15px rgba(255, 159, 67, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  cursor: pointer;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mobile-ctrl-btn:active {
  transform: scale(0.9);
  background: rgba(255, 159, 67, 0.6);
  box-shadow: 0 0 25px #ff9f43, inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.mobile-ctrl-btn.slide-btn {
  border-color: #ffd32c;
  background: rgba(255, 211, 44, 0.25);
  box-shadow: 0 0 15px rgba(255, 211, 44, 0.4), inset 0 0 15px rgba(255, 211, 44, 0.2);
}

.mobile-ctrl-btn.slide-btn:active {
  background: rgba(255, 211, 44, 0.6);
  box-shadow: 0 0 25px #ffd32c;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-only-controls {
    display: none;
  }
}