/* ============ Base Reset & Theme ============ */
:root {
  --bg: #0a0f18;
  --bg-alt: #111b2b;
  --panel: #162235cc;
  --panel-border: #29415f;
  --accent: #4af2a1;
  --accent-glow: 174 100% 50%;
  --danger: #ff365e;
  --warn: #ffcf40;
  --text: #e4eef7;
  --text-dim: #94a9c9;
  --grid-border: #26435f66;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --font-ui: 'Outfit', system-ui, sans-serif;
  --font-display: 'Orbitron', 'Outfit', system-ui, sans-serif;
  --transition: 150ms cubic-bezier(.4,.14,.3,1);
  --shadow-soft: 0 4px 12px -2px rgba(0,0,0,.5), 0 0 0 1px #1c2e42;
  --grad-accent: linear-gradient(135deg,#41d8bf 0%,#6f6df4 45%,#b14cff 100%);
  --grad-panel: linear-gradient(165deg,#192a40 0%,#131f30 60%,#0d1623 100%);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: radial-gradient(circle at 30% 20%, #142437 0%, #0a0f18 70%) fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before { /* subtle vignette */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.07), transparent 60%);
  mix-blend-mode: overlay;
}

/* Background decorative orbs */
.bg-effects { position: fixed; inset: 0; overflow: hidden; z-index: -2; }
.orb { position: absolute; width: 600px; height: 600px; filter: blur(120px) saturate(140%); opacity: .25; }
.orb1 { top: -150px; left: -150px; background: #6f6df4; animation: float1 16s ease-in-out infinite; }
.orb2 { bottom: -200px; right: -160px; background: #41d8bf; animation: float2 18s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translateY(0) scale(1);} 50% { transform: translateY(60px) scale(1.1);} }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1);} 50% { transform: translate(-40px,40px) scale(1.08);} }

.scanlines { position: absolute; inset:0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; opacity:.25; }

/* ============ Layout ============ */
.layout { width: min(1600px, 100% - 3rem); margin: 0 auto; display: grid; grid-template-columns: minmax(640px, 1fr) 380px; gap: 2.5rem; padding: 2.5rem 0 4rem; }
@media (max-width: 1200px) { .layout { grid-template-columns: 1fr; } .side-panel { order: 2; } }

header.site-header { text-align: center; padding-top: 1.5rem; }
.tagline { margin-top: .5rem; font-weight: 300; letter-spacing: .5px; color: var(--text-dim); }

h1#gameTitle { font-family: var(--font-display); font-size: clamp(2.8rem,6vw,4.5rem); letter-spacing: 3px; margin:0; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; }

/* Glitch effect (accessible) */
.glitch::after { content: attr(data-text); position: absolute; inset:0; left:2px; text-shadow:-2px 0 #ff005c; clip-path: polygon(0 0,100% 0,100% 45%,0 55%); opacity:.6; animation: glitch 3s infinite linear alternate-reverse; }
@keyframes glitch { 0% { transform: translate(0);} 20% { transform: translate(-2px,-1px);} 40% { transform: translate(1px,1px);} 60% { transform: translate(-1px,1px);} 80% { transform: translate(2px,-1px);} 100% { transform: translate(0);} }

.game-shell { position: relative; background: var(--grad-panel); border: 1px solid var(--panel-border); border-radius: var(--radius-l); padding: 1.25rem 1.5rem 1.75rem; box-shadow: var(--shadow-soft); backdrop-filter: blur(14px) saturate(150%); }

.hud-bar { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; font-size: .9rem; font-weight: 500; letter-spacing:.5px; }
.hud-item { background: #0f1824aa; padding: .65rem .9rem; border-radius: var(--radius-s); display: flex; flex-direction: column; min-width: 110px; position: relative; overflow: hidden; }
.hud-item::before { content:''; position:absolute; inset:0; background: linear-gradient(130deg, rgba(255,255,255,.08), transparent); mix-blend-mode: overlay; pointer-events:none; }
.hud-item .label { text-transform: uppercase; font-size: .65rem; color: var(--text-dim); margin-bottom: 2px; }
.hud-item .value { font-family: var(--font-display); font-weight: 600; font-size: .85rem; }

.game-area { position: relative; width: fit-content; margin: 0 auto; border: 2px solid var(--grid-border); background: #0d1724; border-radius: 16px; padding: 12px; box-shadow: inset 0 0 0 1px #1d3146, 0 6px 18px -4px rgba(0,0,0,.7); }

/* Overlay (pause/game over future) */
.overlay { position:absolute; inset:12px; background: #08111bde; display:flex; align-items:center; justify-content:center; border-radius:12px; backdrop-filter: blur(6px) saturate(140%); border:1px solid #1d3044; transition: opacity var(--transition); }
.overlay.hidden { opacity:0; visibility:hidden; }
.overlay-inner { text-align:center; }
.overlay-title { font-family: var(--font-display); font-size: 2.2rem; margin:0 0 .5rem; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.overlay-hint { margin:0; font-size:.9rem; color: var(--text-dim); }

.controls-row { margin-top: 1.3rem; display:flex; gap: .9rem; justify-content:center; flex-wrap:wrap; }

.btn { --btn-bg: #1d2d42; --btn-bg-hover:#273c59; --btn-bg-active:#314b6d; position:relative; border:1px solid #2d4560; background: linear-gradient(var(--btn-bg), #162434); color: var(--text); font-family: var(--font-ui); font-weight:600; letter-spacing:.5px; padding:.75rem 1.3rem; font-size:.8rem; text-transform:uppercase; border-radius: 12px; cursor:pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: 0 2px 6px -2px #000, 0 0 0 1px #203548; }
.btn.primary { --btn-bg: #264c53; background: linear-gradient(135deg,#2d7a87,#264c53); border-color:#2c8fa1; box-shadow: 0 4px 10px -2px rgba(10,180,255,.3), 0 0 0 1px #1f5d66; }
.btn.secondary { --btn-bg: #4a2c4c; background: linear-gradient(135deg,#6b4a7a,#4a2c4c); border-color:#7a5a8f; box-shadow: 0 4px 10px -2px rgba(138,43,226,.2), 0 0 0 1px #3d2540; color: #e4c7ff; }
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,255,255,.1),transparent 60%); border-radius:inherit; mix-blend-mode: overlay; pointer-events:none; }
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); }
.btn.primary:hover { filter: brightness(1.1); }
.btn.secondary:hover { filter: brightness(1.15); }
.btn:active { background: var(--btn-bg-active); transform: translateY(0); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.side-panel { display:flex; flex-direction:column; gap:1.6rem; }
.panel-section { background: var(--panel); border:1px solid var(--panel-border); padding:1.1rem 1.25rem 1.25rem; border-radius: var(--radius-m); position:relative; overflow:hidden; box-shadow: var(--shadow-soft); backdrop-filter: blur(10px) saturate(160%); }
.panel-section::before { content:''; position:absolute; inset:0; background: linear-gradient(130deg, rgba(255,255,255,.06), transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.panel-title { margin:0 0 .65rem; font-family: var(--font-display); font-weight:600; letter-spacing:1px; font-size:1.05rem; color: var(--accent); }
.idea-list { margin:0; padding-left:1.1rem; display:grid; gap:.45rem; font-size:.85rem; }
.idea-list li { line-height:1.3; }
.credits { font-size:.75rem; color: var(--text-dim); }
.small { font-size:.7rem; letter-spacing:.5px; color: var(--text-dim); }

footer.site-footer { text-align:center; padding: 1rem 0 2rem; font-size:.65rem; color: var(--text-dim); }

/* Responsive tweaks */
@media (max-width: 720px) {
  .layout { width: 100%; padding: 1.5rem 1rem 3rem; gap:1.75rem; }
  .game-shell { padding: 1rem 1rem 1.5rem; }
  .hud-bar { justify-content:center; }
  .hud-item { flex:1 1 120px; }
}

/* Focus styles for accessibility */
#gameArea:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }

/* ===== Preserve Original Game Element Styling (Adapted) ===== */
/* Enhanced visible cyan grid lines */
#gameArea table { border-collapse: collapse; }
table tr td { border: 2px solid #00ffff; border-spacing: 0; position: relative; box-shadow: 0 0 4px rgba(0,255,255,.65), inset 0 0 4px rgba(0,255,255,.4); }
/* Reduce visual intensity on small screens */
@media (max-width:720px){ table tr td { border-width:1px; box-shadow: 0 0 3px rgba(0,255,255,.55), inset 0 0 3px rgba(0,255,255,.35);} }
table td { padding:0; margin:0; }
td div { width: 40px; height: 40px; }

/* ===== Realistic Fruit Styling ===== */
.apple, .lemon { position: relative; width: 40px; height: 40px; border-radius: 50%; display: block; margin: 0; }

.apple {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 70% 75%, rgba(120,0,0,.55) 0%, rgba(120,0,0,0) 65%),
    linear-gradient(145deg,#ff3b2f 0%,#d80000 55%,#a80000 100%) !important;
  box-shadow:
    inset 0 0 4px 1px rgba(255,255,255,.25),
    inset 0 -6px 10px -4px rgba(80,0,0,.55),
    0 2px 4px -1px rgba(0,0,0,.6),
    0 0 8px 2px rgba(255,0,40,.45);
  border: 1px solid #820000AA;
  animation: fruitPulse 3.5s ease-in-out infinite;
}

.apple::before { /* stem */
  content:""; position:absolute; top:-6px; left:50%; width:6px; height:14px; background: linear-gradient(#4b2d0d,#2b1a07); border-radius: 4px; transform: translateX(-50%) rotate(10deg); box-shadow: 0 0 2px rgba(0,0,0,.4); }
.apple::after { /* leaf */
  content:""; position:absolute; top:-2px; left:52%; width:18px; height:12px; background: linear-gradient(130deg,#29d67d,#058a3f); border-radius: 20px 0 20px 0; transform: translateX(-50%) rotate(-28deg); box-shadow: 0 0 4px -1px rgba(0,0,0,.5), inset 0 0 3px rgba(255,255,255,.3); }

.lemon {
  border-radius: 52% 48% 50% 50% / 55% 55% 45% 45%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 80% 70%, rgba(255,140,0,.55) 0%, rgba(255,140,0,0) 65%),
    linear-gradient(145deg,#fff07d 0%,#ffd52d 50%,#ffbf00 100%) !important;
  box-shadow:
    inset 0 0 3px 1px rgba(255,255,255,.3),
    inset 0 -8px 10px -6px rgba(140,90,0,.5),
    0 2px 4px -1px rgba(0,0,0,.55),
    0 0 8px 2px rgba(255,220,0,.4);
  border: 1px solid #c9a300AA;
  animation: fruitPulse 3.5s ease-in-out infinite reverse;
}

.lemon::before { /* nub left */
  content:""; position:absolute; left:-4px; top:50%; width:10px; height:14px; background: linear-gradient(90deg,#ffe56d,#ffd028); border-radius: 60% 40% 40% 60%; transform: translateY(-50%) scale(.55); filter: brightness(.95); }
.lemon::after { /* nub right */
  content:""; position:absolute; right:-4px; top:50%; width:10px; height:14px; background: linear-gradient(90deg,#ffcf2e,#ffb600); border-radius: 40% 60% 60% 40%; transform: translateY(-50%) scale(.55); filter: brightness(1.05); }

@keyframes fruitPulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.04);} }

.snakehead { background-image: url("../images/SnakeSpriteSheet.png"); background-repeat: no-repeat; background-position: -1px -1px; animation-name: MOVE-BG; animation-duration: 0.5s; animation-timing-function: step-start; animation-iteration-count: infinite; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(74,242,161,.5)); }
@keyframes MOVE-BG { 0% { background-position: -1px -1px; } 33% { background-position: -1px -43px; } 66% { background-position: -1px -85px; } }
.snakehead.right { transform: rotate(270deg); }
.snakehead.left { transform: rotate(90deg); }
.snakehead.up { transform: rotate(180deg); }

.snakebodycurve { background-image: url(../images/SnakeSpriteSheet.png); background-repeat: no-repeat; background-position: -43px -1px; }
.snakebodycurve.curve2 { transform: rotate(90deg); }
.snakebodycurve.curve3 { transform: rotate(270deg); }
.snakebodycurve.curve4 { transform: rotate(180deg); }

.snakebody { background-image: url("../images/SnakeSpriteSheet.png"); background-repeat: no-repeat; background-position: -85px -86px; }
.snakebody.right { transform: rotate(90deg); }
.snakebody.left { transform: rotate(270deg); }
.snakebody.down { transform: rotate(180deg); }

.snaketail { background-image: url("../images/SnakeSpriteSheet.png"); background-repeat: no-repeat; background-position: -43px -86px; }
.snaketail.right { transform: rotate(90deg); }
.snaketail.left { transform: rotate(270deg); }
.snaketail.down { transform: rotate(180deg); }

/* Female Snake Styles - Pink/Purple theme */
.femalesnakehead { 
  background-image: url("../images/SnakeSpriteSheet.png"); 
  background-repeat: no-repeat; 
  background-position: -1px -1px; 
  animation-name: MOVE-BG; 
  animation-duration: 0.5s; 
  animation-timing-function: step-start; 
  animation-iteration-count: infinite; 
  image-rendering: pixelated; 
  filter: hue-rotate(280deg) saturate(150%) brightness(1.1) drop-shadow(0 0 4px rgba(255,105,180,.6)); 
}
.femalesnakehead.right { transform: rotate(270deg); }
.femalesnakehead.left { transform: rotate(90deg); }
.femalesnakehead.up { transform: rotate(180deg); }

.femalesnakebodycurve { 
  background-image: url(../images/SnakeSpriteSheet.png); 
  background-repeat: no-repeat; 
  background-position: -43px -1px; 
  filter: hue-rotate(280deg) saturate(150%) brightness(1.1); 
}
.femalesnakebodycurve.curve2 { transform: rotate(90deg); }
.femalesnakebodycurve.curve3 { transform: rotate(270deg); }
.femalesnakebodycurve.curve4 { transform: rotate(180deg); }

.femalesnakebody { 
  background-image: url("../images/SnakeSpriteSheet.png"); 
  background-repeat: no-repeat; 
  background-position: -85px -86px; 
  filter: hue-rotate(280deg) saturate(150%) brightness(1.1); 
}
.femalesnakebody.right { transform: rotate(90deg); }
.femalesnakebody.left { transform: rotate(270deg); }
.femalesnakebody.down { transform: rotate(180deg); }

.femalesnaketal { 
  background-image: url("../images/SnakeSpriteSheet.png"); 
  background-repeat: no-repeat; 
  background-position: -43px -86px; 
  filter: hue-rotate(280deg) saturate(150%) brightness(1.1); 
}
.femalesnaketal.right { transform: rotate(90deg); }
.femalesnaketal.left { transform: rotate(270deg); }
.femalesnaketal.down { transform: rotate(180deg); }

.dead { filter: grayscale(100%) brightness(.55); }

#highScore { color: var(--accent); }
#appleCount { color: var(--danger); }

/* legacy restartButton hover (if script still targets this id directly) */
#restartButton:hover { filter: brightness(1.15); }

/* Utility */
.hidden { display:none !important; }

/* Scrollbar styling (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0c151f; }
::-webkit-scrollbar-thumb { background:#233447; border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background:#2f455d; }
/* (Removed legacy duplicate styling block that was overriding modern styles) */