html { height:100%; }
body { margin:0; }
/* Stabilize viewport scroll chaining & overscroll on mobile */
html, body { overscroll-behavior: contain; }

/* Android-specific fixes for touch behavior */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Global scenic background (image may be absent; gradients still give atmosphere) */
body { background:
	url('../african-bg.jpg') center/cover no-repeat fixed,
	radial-gradient(circle at 58% 34%, rgba(255,196,96,0.28), rgba(255,180,60,0) 45%),
	linear-gradient(120deg, #2a2d30 0%, #3a2d25 40%, #1e2126 85%),
	#1b1d1f; color:#e6e8ea; font-family: system-ui, sans-serif; }
.awale-container { max-width: 960px; margin: 3.5rem auto 2.5rem; padding: 0 1rem 2.5rem; position:relative; }
/* slight downward shift of top bar spacing */
header.topbar { margin-top:0; }
header { margin-bottom: 1rem; }
.status, .message, .winner { margin: .25rem 0; }
.board { display: grid; gap: .5rem; touch-action: manipulation; }
.row { display: flex; justify-content: space-between; }
.pit {
  width: 70px; height: 70px; border-radius: 12px; border: 2px solid #444;
  background:#222; color:#eee; display:flex; flex-direction:column;
  justify-content:center; align-items:center; font-size:14px;
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease, background .35s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pit.highlight { outline: 3px solid #4caf50; animation: pulse 1.8s infinite; position: relative; z-index: 10; }
.pit.last-move { box-shadow: 0 0 0 3px #ffb300; }
.pit.gain { animation: popGain 500ms ease; }
.pit.loss { animation: popLoss 500ms ease; }
.pit.captured { position:relative; }
.pit.captured::after, .pit.captured::before { content:""; position:absolute; inset:0; pointer-events:none; background:
	radial-gradient(circle at 20% 30%, #ffd54f, transparent 60%),
	radial-gradient(circle at 70% 40%, #fff9c4, transparent 55%),
	radial-gradient(circle at 40% 70%, #ffe082, transparent 60%);
	opacity:0; animation: sparkle 900ms ease forwards; mix-blend-mode:screen; }
.pit.captured::before { filter: blur(6px); }

/* Android-safe active states: Only apply :active transform on non-touch devices */
@media (hover: hover) and (pointer: fine) {
  .pit:not(:disabled):active { transform: scale(.9); }
}

/* On touch devices like Android, use a safer approach */
@media (hover: none) and (pointer: coarse) {
  .pit:not(:disabled).pressed {
    transform: scale(.95);
    transition: transform .1s ease;
  }
}

.pit:disabled { opacity: .45; }
.pit .seeds { font-size: 20px; font-weight: 600; }
/* pit index removed visually */
.pit .delta { position:absolute; top:-10px; font-size:11px; font-weight:700; color:#66bb6a; animation: rise 900ms ease forwards; text-shadow:0 1px 2px #0008; }
.pit.loss .delta { color:#ef5350; }
/* Seed visuals */
.pit .seeds-list { position:absolute; inset:6px 6px 14px 6px; display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px 4px; pointer-events:none; z-index: 1; }
.pit .seed {
	width:12px;
	height:12px;
	border-radius:50%;
	background: radial-gradient(circle at 30% 30%, #e9d39f, #9b7740);
	box-shadow:0 0 3px #000a;
	animation: seedPop .45s ease;
	position: relative;
	z-index: 1;
}

/* Enhanced seeds with SVG patterns for more realism */
.pit .seed:nth-child(1) { background: url('./graphics/seeds/seed-light-brown.svg') center/cover, radial-gradient(circle at 30% 30%, #f3e0b5, #b1874a); }
.pit .seed:nth-child(2) { background: url('./graphics/seeds/seed-medium-brown.svg') center/cover, radial-gradient(circle at 30% 30%, #e9d39f, #9b7740); }
.pit .seed:nth-child(3) { background: url('./graphics/seeds/seed-dark-brown.svg') center/cover, radial-gradient(circle at 30% 30%, #d4c194, #8b6f3f); }
.pit .seed:nth-child(4) { background: url('./graphics/seeds/seed-speckled-tan.svg') center/cover, radial-gradient(circle at 30% 30%, #f0e2b8, #a6854a); }
.pit .seed:nth-child(5n+1) { background: url('./graphics/seeds/seed-stone-gray.svg') center/cover, radial-gradient(circle at 30% 30%, #d8d0c0, #9b9189); }
.pit .seed:nth-child(7n+2) { background: url('./graphics/seeds/seed-light-brown.svg') center/cover, radial-gradient(circle at 30% 30%, #f3e0b5, #b1874a); }
.pit .seed:nth-child(11n+3) { background: url('./graphics/seeds/seed-medium-brown.svg') center/cover, radial-gradient(circle at 30% 30%, #e9d39f, #9b7740); }
.pit .seed.overflow { width:12px; height:12px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; background:#364; color:#fff; }
.pit .seeds-count { font-size:13px; font-weight:600; position:absolute; top:-10px; left:-6px; background:#14171bd9; padding:2px 6px; border-radius:10px; letter-spacing:.5px; box-shadow:0 2px 6px #000e; z-index:5; border:1px solid #2d3338; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.pit.empty { opacity:.55; }

@keyframes seedPop { 0% { transform:scale(.3) rotate(15deg); opacity:0; } 60% { transform:scale(1.15); opacity:1; } 100% { transform:scale(1); } }

/* Hand indicator positioned via CSS variables */
.hand { position:absolute; left:var(--hand-x,-9999px); top:var(--hand-y,-9999px); width:40px; height:40px; margin:-20px 0 0 -20px; font-size:30px; filter: drop-shadow(0 3px 6px #000d) drop-shadow(0 0 4px #ffc400aa); pointer-events:none; animation: handPulse 1.6s ease-in-out infinite; z-index:10; }
@keyframes handPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
.actions button { margin-right: .5rem; }
/* Removed .board-text (debug) */
@media (max-width:600px){ .pit { width:50px; height:50px; } }

/* New layout polish */
.topbar { display:flex; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.logo { margin:0; font-size:2rem; letter-spacing:.5px; }
.scorepanel { background:#1e1f22; padding:.7rem 1rem .75rem; border:1px solid #2e3136; border-radius:14px; display:flex; flex-direction:column; gap:.4rem; min-width:220px; box-shadow:0 4px 14px -6px #000a, 0 1px 0 #2a2d31 inset; }
.scores { display:flex; gap:.65rem; font-size:.8rem; font-weight:500; letter-spacing:.5px; }
.scores .score { background:#262a2f; padding:.25rem .55rem; border-radius:20px; display:flex; align-items:center; gap:.4rem; box-shadow:0 1px 2px #000a inset; }
.scores .score.you { color:#b9f6ca; }
.scores .score.ai { color:#ffe082; }
.scores .score strong { font-weight:600; font-size:1rem; color:#fff; }
.turn { font-size:.75rem; opacity:.85; letter-spacing:.5px; color:#d0d4da; }
.winner { font-weight:600; color:#ffec6b; text-shadow:0 0 6px #ffeb3b55; }
.msg { font-size:.75rem; color:#d6d9de; max-width:260px; line-height:1.25; transition: all 0.3s ease; }

/* Enhanced styling for success messages */
.msg.success {
  color: #4ade80 !important;
  font-weight: 500;
  animation: success-pulse 0.6s ease-out;
}

@keyframes success-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.code-display {
  font-size:.75rem;
  color:#ffb300;
  font-weight:600;
  margin-top:.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.code-display code {
  background:#1a1d20;
  padding:.25rem .5rem;
  border-radius:4px;
  font-family: 'Courier New', monospace;
}

/* Copy buttons container */
.copy-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.copy-invite {
  font-size: .7rem !important;
  padding: .375rem .6rem !important;
  background: #2d5a3d !important;
  border-color: #4a8c61 !important;
}
.copy-invite:hover:not(:disabled) {
  background: #35704a !important;
}

.copy-url {
  font-size: .7rem !important;
  padding: .375rem .6rem !important;
  background: #1e3a8a !important;
  border-color: #3b82f6 !important;
}
.copy-url:hover:not(:disabled) {
  background: #1d4ed8 !important;
}
.loading { text-align: center; padding: 2rem; color: #d6d9de; font-size: 1rem; }
.controls { display:flex; gap:.5rem; align-items:center; }
.btn { background:#2d2f33; color:#eee; border:1px solid #3d4147; padding:.5rem .9rem; border-radius:8px; font-size:.8rem; cursor:pointer; font-weight:500; letter-spacing:.5px; transition:background .25s, transform .15s, box-shadow .25s; }
.btn:hover:not(:disabled) { background:#3a3d42; }
.btn:active:not(:disabled) { transform:translateY(2px); }
.btn.mute { background:#1f2530; }
.btn.mute[data-state='off'] { background:#552222; color:#ffb3b3; }
.btn:focus-visible { outline:2px solid #ffb300; outline-offset:2px; }

.board-shell { position:relative; padding:1.2rem 1rem 1.5rem; background:linear-gradient(145deg,#1e2023,#24272b); border:1px solid #2f3439; border-radius:16px; box-shadow:0 6px 24px -8px #000d, 0 0 0 1px #262a2f inset; }
/* Ensure atmosphere canvas sits above decorative backgrounds but below UI overlays */
.visual-atmosphere-canvas { position:absolute !important; inset:0; z-index:6; pointer-events:none; }
.board { gap:1rem; }
.row { gap:1rem; }

/* Adjust pits for panel */
.pit { background:linear-gradient(155deg,#363c42,#2c3136 58%); border-color:#77818a; box-shadow:inset 0 2px 3px #0009, 0 2px 3px #000b, 0 0 0 1px #23272b; position:relative; }
.row.opponent .pit { background:linear-gradient(155deg,#40474e,#30363b 60%); border-color:#88939c; }
.row.opponent .pit::before { background:radial-gradient(circle at 30% 25%, #4b545c, #31373c 70%); }
.pit::before { content:""; position:absolute; inset:2px; border-radius:9px; background:radial-gradient(circle at 30% 25%, #40474e, #2b3034 70%); pointer-events:none; opacity:.9; z-index: -1; }
.pit.empty { background:linear-gradient(155deg,#3a3f44,#2d3033); }
.pit.empty::before { opacity:.5; }
/* Update toast */
.update-toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:#222b33e6; backdrop-filter:blur(4px); color:#fff; padding:.75rem 1rem; border:1px solid #2e3942; border-radius:12px; display:flex; align-items:center; gap:.75rem; font-size:.85rem; box-shadow:0 4px 14px -4px #000c,0 0 0 1px #1d252b; z-index:1000; animation: toastIn .35s ease; }
.update-toast button { background:#ffb300; color:#222; border:none; padding:.45rem .8rem; border-radius:8px; cursor:pointer; font-weight:600; font-size:.75rem; letter-spacing:.5px; box-shadow:0 2px 4px -1px #000a; }
.update-toast button:hover { background:#ffc233; }
@keyframes toastIn { 0% { transform:translate(-50%, 20px); opacity:0; } 100% { transform:translate(-50%, 0); opacity:1; } }
.pit.highlight { outline-color:#4caf50; }
.pit.last-move { box-shadow:0 0 0 3px #ffb300, 0 0 10px -2px #ffb300aa; }
.pit.captured::after, .pit.captured::before { filter:brightness(1.1); }

@media (max-width:600px){
	.topbar { flex-direction:column; align-items:stretch; }
	.controls { flex-wrap:wrap; }
	.board-shell { padding:.8rem .6rem 1rem; }
	.scores { gap:.6rem; }
}


/* Accessibility utility */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

/* Animations */
@keyframes pulse { 0% { box-shadow:0 0 0 0 #4caf50; } 70% { box-shadow:0 0 0 10px #4caf5000; } 100% { box-shadow:0 0 0 0 #4caf5000; } }
@keyframes popGain { 0% { transform:scale(.9); background:#1b3a1b; } 60% { transform:scale(1.08); background:#234f23; } 100% { transform:scale(1); background:#222; } }
@keyframes popLoss { 0% { transform:scale(1.05); background:#3d1212; } 60% { transform:scale(.92); background:#341010; } 100% { transform:scale(1); background:#222; } }
@keyframes rise { 0% { opacity:0; transform: translateY(4px); } 50% { opacity:1; } 100% { opacity:0; transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sparkle { 0% { opacity:0; transform:scale(.3) rotate(0deg); } 40% { opacity:1; transform:scale(1.05) rotate(25deg); } 70% { opacity:.9; } 100% { opacity:0; transform:scale(.4) rotate(60deg); } }

/* Wood Theme -------------------------------------------------------- */
.theme-wood .board-shell {
  /* Use relative path so GitHub Pages subpath works */
  /* path relative to built css location; base handled by Vite */
  --wood-img:url(../textures/wood.jpg);
  background:
    radial-gradient(circle at 65% 28%, rgba(255,240,190,0.18), rgba(0,0,0,0) 60%),
    var(--wood-img);
  background-size:140% 140%, cover;
  background-position:center;
  background-blend-mode:overlay, multiply;
  filter: sepia(.55) saturate(1.25) hue-rotate(-8deg) brightness(1.04);
  border:1px solid #6d4825;
  box-shadow:0 10px 30px -10px #000e, 0 0 0 1px #c08a52cc inset, 0 0 0 2px #0003 inset;
  position:relative;
}

/* Subtle rim light */
.theme-wood .board-shell::before {
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:
    linear-gradient(160deg, rgba(255,240,200,0.18), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.15), rgba(255,255,255,0) 60%);
  mix-blend-mode:overlay; opacity:.9;
}

/* Carved pit redesign: unified texture + layered concave shading */
.theme-wood .pit, .theme-wood .row.opponent .pit {
  --wood-img:url(../textures/wood.jpg);
  position:relative;
  border-radius:50% !important;
  border:2px solid #8d6035;
  background:
    radial-gradient(circle at 50% 56%, rgba(22,11,5,0.88) 0%, rgba(40,22,11,0.78) 28%, rgba(68,36,18,0.62) 50%, rgba(112,68,34,0.34) 70%, rgba(180,120,65,0.16) 82%, rgba(255,238,210,0.05) 95%), /* softened bowl, less harsh dark sector */
    var(--wood-img);
  background-size:160% 160%, cover;
  background-position:center;
  background-blend-mode:overlay, multiply;
  filter: sepia(.55) saturate(1.15) hue-rotate(-5deg) brightness(.93);
  box-shadow:
    inset 0 4px 6px -2px #000a,
    inset 0 -3px 6px -2px #3a1d0c,
    0 2px 4px #0009,
    0 0 0 1px #4a2b14,
    0 0 10px -4px #000c;
  color:#f8efe7;
}
/* Player (bottom) remains slightly warmer/lighter */
.theme-wood .pit { filter: sepia(.58) saturate(1.18) hue-rotate(-7deg) brightness(.98); }
/* Opponent pits: a touch darker + cooler for side distinction */
.theme-wood .row.opponent .pit { filter: sepia(.48) saturate(1.0) hue-rotate(-2deg) brightness(.82) contrast(1.03); border-color:#7a5030; }

/* Inner bowl + rim highlight */
.theme-wood .pit::before, .theme-wood .row.opponent .pit::before {
  content:""; position:absolute; inset:5px; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 62%, rgba(0,0,0,0.9) 0%, rgba(18,9,4,0.86) 34%, rgba(45,24,12,0.78) 55%, rgba(85,45,22,0.5) 72%, rgba(150,95,45,0.21) 84%, rgba(255,250,235,0.05) 96%),
    repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,0.02) 0deg 12deg, rgba(0,0,0,0) 12deg 36deg);
  mix-blend-mode:overlay;
  box-shadow: inset 0 3px 4px -2px #000d, inset 0 -6px 14px -6px #000d, inset 0 0 0 1px #5c361a55;
}
/* Directional rim highlight (light top-left, shadow bottom-right) */
.theme-wood .pit::after, .theme-wood .row.opponent .pit::after {
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 58%, rgba(0,0,0,0.34) 48%, rgba(0,0,0,0) 72%), /* softer inner shadow */
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.28), rgba(255,255,255,0) 52%), /* subtle top-left highlight */
    radial-gradient(circle at 72% 70%, rgba(255,228,190,0.14), rgba(255,228,190,0) 55%), /* added bottom-right lift to remove dark arc */
    linear-gradient(145deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.1) 42%, rgba(0,0,0,0.32) 72%, rgba(0,0,0,0.38) 90%); /* gentle directional shade */
  mix-blend-mode:overlay;
  opacity:.5;
  filter: blur(.2px); /* soften any residual banding */
}

/* Player pits (non-opponent row): slightly lighter interior while keeping rim depth */
.theme-wood .row:not(.opponent) .pit {
  background:
    radial-gradient(circle at 50% 60%, rgba(40,22,11,0.72) 0%, rgba(60,32,15,0.62) 28%, rgba(90,50,25,0.45) 54%, rgba(150,95,50,0.30) 74%, rgba(210,150,95,0.18) 86%, rgba(255,242,220,0.09) 95%),
    var(--wood-img);
  background-size:150% 150%, cover;
  filter: sepia(.55) saturate(1.15) hue-rotate(-6deg) brightness(1.10);
}
.theme-wood .row:not(.opponent) .pit::before {
  background:
    radial-gradient(circle at 50% 62%, rgba(20,10,5,0.82) 0%, rgba(38,20,10,0.74) 34%, rgba(60,32,16,0.58) 56%, rgba(95,55,28,0.42) 74%, rgba(155,100,55,0.22) 84%, rgba(255,245,225,0.07) 95%),
    repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,0.035) 0deg 12deg, rgba(0,0,0,0) 12deg 36deg);
}
.theme-wood .row:not(.opponent) .pit::after { opacity:.55; }
.theme-wood .row:not(.opponent) .pit::after {
  background:
    radial-gradient(circle at 50% 58%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0) 74%),
    radial-gradient(circle at 28% 26%, rgba(255,255,255,0.32), rgba(255,255,255,0) 54%),
    radial-gradient(circle at 72% 69%, rgba(255,232,200,0.18), rgba(255,232,200,0) 58%),
    linear-gradient(145deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.14) 40%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0.34) 90%);
  opacity:.48;
}

.theme-wood .pit.empty { filter: sepia(.52) saturate(1.05) hue-rotate(-5deg) brightness(.85); }
.theme-wood .pit.empty::before { opacity:.55; }

.theme-wood .pit.last-move { box-shadow:0 0 0 3px #ffcc5a, 0 0 10px -2px #ffcc5aaa, inset 0 3px 6px #0009; }
.theme-wood .pit.highlight { outline-color:#ffcc5a; box-shadow:0 0 0 3px #ffcc5a, inset 0 3px 6px #0009; z-index:10; }
.theme-wood .pit.captured::before { filter:brightness(1.15) saturate(1.15); }
.theme-wood .pit.captured::after { filter:brightness(1.1); }

/* Seeds contrast adjustments inside carved bowl */
.theme-wood .seed { background:radial-gradient(circle at 30% 30%, #f4e6c1, #b68a4f); }
.theme-wood .seeds-list { z-index:2; }
.theme-wood .seeds-count { background:#2e190cdd; border-color:#7a5330; color:#ffe9d1; }
.theme-wood .scores .score { background:#714b27; box-shadow:0 1px 2px #0009 inset, 0 0 0 1px #55371c; }
.theme-wood .scores .score.you { color:#d6ffdc; }
.theme-wood .scores .score.ai { color:#ffe8b2; }
.theme-wood .scorepanel { background:#5c3d1f; border-color:#704a26; box-shadow:0 4px 14px -6px #000d, 0 0 0 1px #714a26 inset; }
.theme-wood .btn { background:#6b4624; border-color:#7a522d; color:#f7eee7; }
.theme-wood .btn:hover:not(:disabled) { background:#7a532e; }
.theme-wood .btn.mute[data-state='off'] { background:#7a2f2f; color:#ffd1d1; }
.theme-wood .btn:focus-visible { outline-color:#ffc342; }
.theme-wood .copy-invite {
  background: #4a5c2d !important;
  border-color: #617a3f !important;
}
.theme-wood .copy-invite:hover:not(:disabled) {
  background: #5a7035 !important;
}
.theme-wood .logo { color:#ffe9d4; text-shadow:0 3px 8px #000c, 0 0 6px #ffcf8c55; letter-spacing:1px; }
.theme-wood .msg { color:#f2e2d5; }
.theme-wood .msg.success { color: #4ade80 !important; }
.theme-wood .turn { color:#ffe3c0; }
.theme-wood .winner { color:#ffe070; }

/* Maintain contrast for delta badges */
.theme-wood .pit .delta { text-shadow:0 1px 2px #2a1407; }

/* Wood theme now shares global body background; remove overlay */
.theme-wood { min-height:100dvh; min-height:100svh; min-height:100vh; position:relative; color:#f8efe8; }
/* Ensure dark theme root also stabilizes height */
.theme-dark { min-height:100dvh; min-height:100svh; min-height:100vh; position:relative; }
/* Dark theme logo contrast tweak */
.theme-dark .logo { color:#f0f3f5; text-shadow:0 2px 6px #000c; }
.theme-wood::before, .theme-dark::before { /* subtle vignette & horizon haze */
	content:""; position:fixed; inset:0; pointer-events:none;
	background:
		radial-gradient(circle at 50% 60%, rgba(255,207,120,0.08), rgba(255,190,90,0.02) 40%, rgba(0,0,0,0.4) 125%),
		linear-gradient(to top, rgba(52,27,18,0.55), rgba(52,27,18,0) 35%);
	mix-blend-mode:multiply; z-index:-1;
}
/* Optional repeating motif (tribal inspired) using a tiny SVG mask pattern */
.theme-wood::after, .theme-dark::after {
	content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
	background: repeating-linear-gradient(60deg, rgba(255,255,255,0.03) 0 22px, rgba(255,255,255,0.0) 22px 44px);
	mix-blend-mode:overlay; opacity:.35;
}

/* Slight darkening behind board for readability */
.theme-wood .board-shell { -webkit-backdrop-filter:blur(1px) brightness(.96); backdrop-filter:blur(1px) brightness(.96); }
.theme-dark .board-shell {
  --wood-img:url(../textures/wood.jpg);
  background:
    radial-gradient(circle at 50% 55%, rgba(255,255,255,0.05), rgba(0,0,0,0.55) 80%),
    var(--wood-img);
  background-size:130% 130%, cover;
  background-position:center;
  background-blend-mode:overlay, multiply;
  filter: sepia(.3) saturate(.55) brightness(.80) hue-rotate(10deg) contrast(1.05);
  border-color:#5f656c;
  box-shadow:0 6px 24px -8px #000b, 0 0 0 1px #5a6067 inset;
}

/* Footer */
footer.site-footer { text-align:center; font-size:.65rem; letter-spacing:.5px; opacity:.75; margin-top:1rem; padding:1rem 0 0; border-top:1px solid #ffffff12; }
footer.site-footer a { color:#ffc75d; text-decoration:none; }
footer.site-footer a:hover { text-decoration:underline; }

/* Mode Selector (high-contrast overlay) */
.mode-selector {
	max-width:640px;
	background:linear-gradient(145deg, #1c2126cc, #15191dd9);
	-webkit-backdrop-filter:blur(6px) brightness(.95);
	backdrop-filter:blur(6px) brightness(.95);
	padding:1.75rem 1.5rem 1.9rem;
	border:1px solid #2d3338;
	border-radius:18px;
	box-shadow:0 10px 28px -12px #000e, 0 4px 14px -4px #000c, 0 0 0 1px #262b2f inset;
	color:#f2f5f7;
}
.mode-selector h2 {
	margin:0 0 1.1rem;
	font-size:2rem;
	letter-spacing:.5px;
	color:#ffecbe;
	text-shadow:0 2px 6px #000c, 0 0 8px #ffb54055;
}
.mode-selector .modes { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center; }
.mode-selector .join-block { display:flex; gap:.55rem; align-items:center; }
.mode-selector .code-input {
	background:#21262b;
	border:1px solid #374047;
	padding:.55rem .75rem;
	border-radius:8px;
	color:#f8fafb;
	font-size:.85rem;
	min-width:120px;
	letter-spacing:.5px;
	box-shadow:0 1px 2px #000a inset;
}
.mode-selector .code-input:focus-visible { outline:2px solid #ffb300; outline-offset:2px; }
.mode-selector .note {
	margin:1.25rem 0 0;
	font-size:.7rem;
	letter-spacing:.6px;
	opacity:.85;
	max-width:400px;
	line-height:1.25;
	color:#d5d9dc;
}

.mode-selector .version-info {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 0.7rem;
	color: #9ca3af;
	font-family: monospace;
	background: rgba(0, 0, 0, 0.3);
	padding: 2px 6px;
	border-radius: 4px;
	opacity: 0.8;
}
.btn.primary {
	background:#ffb300;
	color:#221a00;
	border:1px solid #ffc341;
	box-shadow:0 2px 6px -1px #000b, 0 0 0 1px #ffcf6d inset;
	font-weight:600;
}
.btn.primary:hover:not(:disabled) { background:#ffc633; }
.btn.primary:active:not(:disabled) { background:#e6a600; }

@media (max-width:640px){
        .mode-selector { padding:1.25rem 1rem 1.4rem; }
        .mode-selector h2 { font-size:1.7rem; }
        .mode-selector .modes { flex-direction:column; align-items:stretch; }
        .mode-selector .join-block { width:100%; }
        .mode-selector .code-input { flex:1; }
}

/* ==============================================
   🎨 PROFILE SYSTEM STYLES
   ============================================== */

/* Profile Setup Modal */
.profile-setup-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: none !important;
  margin: 0 !important;
}

.profile-setup-page {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.profile-setup-content {
  background: rgba(26, 26, 26, 0.95);
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 90vw;
  max-height: 90vh;
  min-height: 500px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  transform: none !important;
  position: relative;
}

.profile-setup-content h2 {
  text-align: center;
  color: var(--text-color);
  margin: 0 0 18px 0;
  font-size: 1.4em;
}

/* Profile Form Fields */
.profile-field {
  margin-bottom: 16px;
}

.profile-field label {
  display: block;
  color: var(--text-color);
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.9em;
}

.profile-input {
  width: 100%;
  padding: 10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #222;
  font-size: 16px;
  box-sizing: border-box;
}

.profile-input:focus {
  outline: none;
  border-color: #4CAF50;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
}

.profile-input::placeholder {
  color: rgba(68, 68, 68, 0.7);
}

/* Avatar Selection Grid */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  max-width: 100%;
  margin: 12px 0;
}

.avatar-option {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 6px;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.avatar-option:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.avatar-option.selected {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.2);
}

/* Theme Selector */
.theme-selector {
  display: flex;
  gap: 12px;
}

.theme-option {
  flex: 1;
  padding: 12px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.theme-option.selected {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.2);
}

/* Preferences Checkboxes */
.preferences {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-color);
  font-size: 0.95em;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4CAF50;
}

/* Profile Actions */
.profile-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: flex-end;
  flex-direction: row;
}

.profile-actions .btn {
  min-width: 100px;
}

/* Profile Display Components */
.profile-display {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-avatar {
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.profile-name {
  font-weight: 600;
  color: var(--text-color);
  font-size: 1.1em;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 12px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.stat-value {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  font-size: 1.1em;
}

/* Mini Profile Component */
.mini-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 6px 12px;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9em;
}

.mini-profile:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.mini-avatar {
  font-size: 1.2em;
}

.mini-name {
  font-weight: 500;
}

/* Profile Bar in Mode Selector */
.mode-selector-profile {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

.mode-selector {
  position: relative;
}

/* Medium screens (tablets) */
@media (max-width: 768px) {
  .profile-setup-content {
    max-width: 500px;
    width: 95vw;
  }
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .profile-setup-modal {
    padding: 10px;
    align-items: flex-start;
    padding-top: 20px;
  }

  .profile-setup-content {
    padding: 16px;
    max-height: 85vh;
    margin: 0;
    width: 98vw;
    max-width: none;
  }

  .avatar-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .theme-selector {
    flex-direction: column;
  }

  .profile-actions {
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
    position: sticky;
    bottom: 0;
    background: rgba(26, 26, 26, 0.95);
    padding: 12px 0 0 0;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .profile-actions .btn {
    flex: 1;
    min-width: auto;
    padding: 12px;
  }

  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* iPhone and very small screens */
@media (max-width: 400px), (max-height: 700px) {
  .profile-setup-content {
    max-height: 80vh;
    padding: 12px;
  }

  .profile-actions {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .avatar-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }

  .avatar-option {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* ==============================================
   🌐 LOBBY SYSTEM STYLES
   ============================================== */

.lobby-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: var(--text-color);
}

/* Lobby Header */
.lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: rgba(30, 32, 35, 0.9);
  border-radius: 12px;
  border: 1px solid #2f3439;
  margin-bottom: 24px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.lobby-title {
  margin: 0;
  font-size: 1.8rem;
  color: #ffecbe;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.lobby-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.online-count {
  color: #4ade80;
  font-weight: 600;
  font-size: 0.9rem;
}

.lobby-exit {
  background: #374151;
  border-color: #4b5563;
}

.lobby-exit:hover {
  background: #4b5563;
}

/* Lobby Content Layout */
.lobby-content {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
  align-items: start;
}

/* Players Panel */
.lobby-players {
  background: rgba(30, 32, 35, 0.9);
  border-radius: 12px;
  border: 1px solid #2f3439;
  padding: 20px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.lobby-players h2 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 1.2rem;
}

.players-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}

.player-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.2s ease;
}

.player-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.player-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-avatar {
  font-size: 1.4em;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.player-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

.player-status {
  font-size: 0.8rem;
  font-weight: 500;
}

.player-status.available {
  color: #4ade80;
}

.player-status.in-game {
  color: #fbbf24;
}

.player-card.in-game {
  opacity: 0.7;
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.05);
}

.game-id {
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 400;
}

.player-status-indicator {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 500;
}

.player-status.away {
  color: #f59e0b;
}

.player-status.offline {
  color: #6b7280;
}

.btn-invite {
  background: #10b981;
  border-color: #059669;
  color: white;
  font-size: 0.8rem;
  padding: 6px 12px;
}

.btn-invite:hover {
  background: #059669;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.empty-state p {
  margin: 8px 0;
  font-size: 0.9rem;
}

/* Chat Panel */
.lobby-chat {
  background: rgba(30, 32, 35, 0.9);
  border-radius: 12px;
  border: 1px solid #2f3439;
  padding: 20px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
}

.lobby-chat h2 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 1.2rem;
}

.chat-messages {
  flex: 1;
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: 12px;
}

.chat-message {
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-message:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.chat-message.system {
  color: #9ca3af;
  font-style: italic;
  font-size: 0.85rem;
}

.message-author {
  color: #4ade80;
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 8px;
}

.message-content {
  color: #e5e7eb;
  font-size: 0.85rem;
}

.system-message {
  color: #9ca3af;
  font-style: italic;
  font-size: 0.8rem;
}

/* Chat Input */
.chat-input-form {
  display: flex;
  gap: 8px;
}

.chat-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-size: 0.85rem;
}

.chat-input:focus {
  outline: none;
  border-color: #4ade80;
  background: rgba(255, 255, 255, 0.15);
}

.chat-input::placeholder {
  color: #9ca3af;
}

.send-btn {
  background: #4ade80;
  border-color: #22c55e;
  color: white;
  font-size: 0.8rem;
  padding: 8px 16px;
}

.send-btn:hover:not(:disabled) {
  background: #22c55e;
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Invitations Panel */
.invitations-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 350px;
  background: rgba(30, 32, 35, 0.95);
  border: 1px solid #2f3439;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1000;
}

/* Urgent invitations at the top of lobby */
.invitations-panel.urgent {
  position: relative;
  bottom: auto;
  right: auto;
  max-width: 100%;
  width: 100%;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.15));
  border: 2px solid #10b981;
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 8px 32px rgba(16, 185, 129, 0.3),
    0 0 0 1px rgba(16, 185, 129, 0.2) inset;
  animation: urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% {
    border-color: #10b981;
    box-shadow:
      0 8px 32px rgba(16, 185, 129, 0.3),
      0 0 0 1px rgba(16, 185, 129, 0.2) inset;
  }
  50% {
    border-color: #06d6a0;
    box-shadow:
      0 8px 32px rgba(6, 214, 160, 0.4),
      0 0 0 2px rgba(6, 214, 160, 0.3) inset;
  }
}

.invitations-panel h3 {
  margin: 0 0 12px 0;
  color: #fff;
  font-size: 1rem;
}

.invitations-panel.urgent h3 {
  color: #10b981;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.invitation-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 8px;
}

.invitations-panel.urgent .invitation-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  margin-bottom: 12px;
}

.invitation-info {
  color: #e5e7eb;
  font-size: 0.85rem;
}

.invitations-panel.urgent .invitation-info {
  color: #fff;
  font-size: 1rem;
  text-align: center;
  font-weight: 500;
}

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

.invitations-panel.urgent .invitation-actions {
  gap: 12px;
  justify-content: center;
}

.btn-accept {
  background: #10b981;
  border-color: #059669;
  color: white;
  font-size: 0.8rem;
  padding: 6px 12px;
  flex: 1;
}

.invitations-panel.urgent .btn-accept {
  font-size: 1rem;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
}

.btn-accept:hover {
  background: #059669;
}

.invitations-panel.urgent .btn-accept:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn-decline {
  background: #ef4444;
  border-color: #dc2626;
  color: white;
  font-size: 0.8rem;
  padding: 6px 12px;
  flex: 1;
}

.invitations-panel.urgent .btn-decline {
  font-size: 1rem;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  transition: all 0.2s ease;
}

.btn-decline:hover {
  background: #dc2626;
}

.invitations-panel.urgent .btn-decline:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Invite Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: rgba(30, 32, 35, 0.95);
  border: 1px solid #2f3439;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90vw;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.invite-modal h3 {
  margin: 0 0 16px 0;
  color: #fff;
  font-size: 1.2rem;
}

.invite-modal p {
  margin: 0 0 20px 0;
  color: #e5e7eb;
  font-size: 0.9rem;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-primary {
  background: #4ade80;
  border-color: #22c55e;
  color: white;
}

.btn-primary:hover {
  background: #22c55e;
}

/* Loading State */
.lobby-view.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.loading-spinner {
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #4ade80;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

.loading-spinner p {
  color: #9ca3af;
  font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .lobby-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lobby-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .lobby-stats {
    justify-content: center;
  }

  .invitations-panel {
    position: relative;
    bottom: auto;
    right: auto;
    max-width: none;
    margin: 20px 0;
  }
}

/* 🌑 DARK THEME PIT OVERRIDES - BRIGHTER FOR SEED VISIBILITY */
.theme-dark .pit,
body.theme-dark .pit,
html.theme-dark .pit {
  position:relative;
  background:
    radial-gradient(circle at 50% 58%, #121213 0%, #1c1d1e 35%, #303234 60%, #44474a 78%, #575b5f 100%) !important;
  border: 2px solid #555b60 !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 4px 6px -2px #000c,
    inset 0 -5px 10px -4px #000c,
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 1px 3px rgba(0,0,0,0.6) !important;
}

.theme-dark .row.opponent .pit,
body.theme-dark .row.opponent .pit,
html.theme-dark .row.opponent .pit {
  position:relative;
  background:
    radial-gradient(circle at 50% 60%, #141516 0%, #202122 36%, #35373a 63%, #4d5155 82%, #5e6368 100%) !important;
  border: 2px solid #63696f !important;
  border-radius: 50% !important;
  box-shadow:
    inset 0 3px 6px -2px #000c,
    inset 0 -5px 12px -5px #000c,
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 1px 3px rgba(0,0,0,0.55) !important;
}

/* Dark theme inner bowl & rim for concave look */
.theme-dark .pit::before,
body.theme-dark .pit::before,
html.theme-dark .pit::before,
.theme-dark .row.opponent .pit::before,
body.theme-dark .row.opponent .pit::before,
html.theme-dark .row.opponent .pit::before {
  content:""; position:absolute; inset:5px; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 60%, rgba(0,0,0,0.82) 0%, rgba(20,20,22,0.78) 42%, rgba(60,62,66,0.45) 68%, rgba(120,125,130,0.12) 85%, rgba(255,255,255,0.05) 96%),
    conic-gradient(from 220deg at 50% 50%, rgba(255,255,255,0.35) 0deg, rgba(255,255,255,0.1) 60deg, rgba(0,0,0,0.55) 190deg, rgba(0,0,0,0.65) 240deg, rgba(255,255,255,0.25) 320deg, rgba(255,255,255,0) 360deg);
  mix-blend-mode:overlay;
  box-shadow: inset 0 2px 3px -1px #000c, inset 0 -5px 10px -5px #000c, inset 0 0 0 1px #4a4f55aa;
  opacity:.95;
}
.theme-dark .pit::after,
body.theme-dark .pit::after,
html.theme-dark .pit::after,
.theme-dark .row.opponent .pit::after,
body.theme-dark .row.opponent .pit::after,
html.theme-dark .row.opponent .pit::after {
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at 50% 55%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0) 74%);
  mix-blend-mode:overlay;
  opacity:.5;
}

/* Dark theme seed styling with fancy SVGs */
.theme-dark .seed {
	background: radial-gradient(circle at 30% 30%, #f5e6c1, #d4b582) !important;
	box-shadow: 0 0 4px rgba(0,0,0,0.8), 0 1px 2px rgba(255,255,255,0.3) !important;
}

/* Dark theme fancy SVG seeds - same pattern as global but with enhanced contrast */
.theme-dark .pit .seed:nth-child(1) {
	background: url('./graphics/seeds/seed-light-brown.svg') center/cover,
	            radial-gradient(circle at 30% 30%, #f7e8c3, #c8a274) !important;
}
.theme-dark .pit .seed:nth-child(2) {
	background: url('./graphics/seeds/seed-medium-brown.svg') center/cover,
	            radial-gradient(circle at 30% 30%, #f1e3a7, #b8894f) !important;
}
.theme-dark .pit .seed:nth-child(3) {
	background: url('./graphics/seeds/seed-dark-brown.svg') center/cover,
	            radial-gradient(circle at 30% 30%, #e6d39c, #a87f4e) !important;
}
.theme-dark .pit .seed:nth-child(4) {
	background: url('./graphics/seeds/seed-speckled-tan.svg') center/cover,
	            radial-gradient(circle at 30% 30%, #f2e4c0, #c39759) !important;
}
.theme-dark .pit .seed:nth-child(5n+1) {
	background: url('./graphics/seeds/seed-stone-gray.svg') center/cover,
	            radial-gradient(circle at 30% 30%, #e0d8c8, #b8ad98) !important;
}
.theme-dark .pit .seed:nth-child(7n+2) {
	background: url('./graphics/seeds/seed-light-brown.svg') center/cover,
	            radial-gradient(circle at 30% 30%, #f7e8c3, #c8a274) !important;
}
.theme-dark .pit .seed:nth-child(11n+3) {
	background: url('./graphics/seeds/seed-medium-brown.svg') center/cover,
	            radial-gradient(circle at 30% 30%, #f1e3a7, #b8894f) !important;
}

/* ==============================================
   🎵 AUDIO CONTROLS STYLES
   ============================================== */

/* Container for proper positioning */
.audio-container {
  position: relative;
  display: inline-block;
}

.audio-controls {
  background: rgba(45, 47, 51, 0.95);
  border: 1px solid rgba(61, 65, 71, 0.9);
  border-radius: 8px;
  padding: 1rem;
  max-width: 400px;
  color: #eee;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  z-index: 1000;
}

/* Wood theme for expanded panel */
.theme-wood .audio-controls {
  background: rgba(139, 69, 19, 0.95);
  border: 1px solid rgba(139, 69, 19, 0.9);
  color: #f7eee7;
}

/* Collapsed button state - matches main nav buttons */
.audio-controls-collapsed {
  background: #2d2f33;
  border: 1px solid #3d4147;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: background 0.25s, transform 0.15s;
  display: inline-block;
  color: #eee;
}

.audio-controls-collapsed:hover {
  background: #3a3d42;
}

.audio-controls-collapsed:active {
  transform: translateY(2px);
}

/* Wood theme for collapsed button */
.theme-wood .audio-controls-collapsed {
  background: #6b4624;
  border-color: #7a522d;
  color: #f7eee7;
}

.theme-wood .audio-controls-collapsed:hover {
  background: #7a532e;
}

.audio-controls-compact {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.audio-unavailable {
  color: #666;
  font-style: italic;
}

.audio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* Header styling for expanded state only */
.audio-controls .audio-header {
  padding: 0.25rem;
}

.audio-controls .audio-header:hover {
  background: rgba(139, 69, 19, 0.6);
}

/* Updated title styling for both states */
.audio-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.expand-button {
  font-size: 0.7rem;
  transition: transform 0.2s;
  color: #888;
}

.control-group {
  margin-bottom: 1rem;
}

.control-group:last-child {
  margin-bottom: 0;
}

.control-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #ccc;
}

.theme-wood .control-label {
  color: #e8d5c4;
}

.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.toggle-button {
  background: #2d5a3d;
  color: white;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.2s;
}

.toggle-button:hover {
  background: #35704a;
}

.toggle-button-enabled {
  background: #2d5a3d;
}

.toggle-button-disabled {
  background: #666;
}

.theme-wood .toggle-button-enabled {
  background: #4a5c2d;
}

.theme-wood .toggle-button-disabled {
  background: #5a4c3d;
}

.volume-slider {
  width: 120px;
  margin: 0 0.5rem;
}

.compact-volume-slider {
  width: 80px;
}

.test-button {
  background: #ff9800;
  color: white;
  border: none;
  padding: 0.375rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.7rem;
  transition: background 0.2s;
}

.test-button:hover {
  background: #fb8c00;
}

.test-button.testing {
  animation: pulse-orange 1s infinite;
}

@keyframes pulse-orange {
  0% { background: #ff9800; }
  50% { background: #ffb74d; }
  100% { background: #ff9800; }
}