/* ═══════════════════════════════════════════
   CSS Custom Properties — Dark (default)
═══════════════════════════════════════════ */
:root {
  --bg:             #0d1922;
  --text:           #E6D8C6;
  --text-muted:     #7898B4;
  --border:         #5A8AA8;
  --canvas-border:  #5A8AA8;
  --canvas-glow:    rgba(90,138,168,0.15);
  --select-bg:      #14202E;
  --icon-bg:        rgba(90,138,168,0.10);
  --icon-border:    rgba(90,138,168,0.38);

  /* gradient title */
  --grad-a:         #A8D0E2;
  --grad-b:         #EAD6BC;

  /* scores / inline colour hints */
  --c-p1:           #A8D0E2;
  --c-p2:           #EAD6BC;
  --c-accent:       #E6D8C6;

  /* mode & CTA buttons */
  --btn1-c:   #A8D0E2;  --btn1-bg: #A8D0E2;  --btn1-fg: #0d1922;
  --btn2-c:   #78A8C6;  --btn2-bg: #78A8C6;  --btn2-fg: #0d1922;
  --btn3-c:   #C4AC98;  --btn3-bg: #C4AC98;  --btn3-fg: #0d1922;

  /* D-pad P1 */
  --d1c:  #A8D0E2;
  --d1b:  rgba(168,208,226,0.42);
  --d1bg: rgba(168,208,226,0.08);
  --d1a:  rgba(168,208,226,0.26);

  /* D-pad P2 */
  --d2c:  #EAD6BC;
  --d2b:  rgba(234,214,188,0.42);
  --d2bg: rgba(234,214,188,0.08);
  --d2a:  rgba(234,214,188,0.26);
}

/* ═══════════════════════════════════════════
   Light theme overrides
═══════════════════════════════════════════ */
body.light {
  --bg:             #EDE5D2;
  --text:           #18303E;
  --text-muted:     #3E5E72;
  --border:         #3A6080;
  --canvas-border:  #3A6080;
  --canvas-glow:    rgba(58,96,128,0.13);
  --select-bg:      #D2C8B2;
  --icon-bg:        rgba(58,96,128,0.08);
  --icon-border:    rgba(58,96,128,0.32);

  --grad-a:         #1A5472;
  --grad-b:         #6A3618;

  --c-p1:           #1A5472;
  --c-p2:           #6A3618;
  --c-accent:       #18303E;

  --btn1-c:   #1A5472;  --btn1-bg: #1A5472;  --btn1-fg: #EDE5D2;
  --btn2-c:   #286A8C;  --btn2-bg: #286A8C;  --btn2-fg: #EDE5D2;
  --btn3-c:   #6A3618;  --btn3-bg: #6A3618;  --btn3-fg: #EDE5D2;

  --d1c:  #1A5472;
  --d1b:  rgba(26,84,114,0.38);
  --d1bg: rgba(26,84,114,0.07);
  --d1a:  rgba(26,84,114,0.20);

  --d2c:  #6A3618;
  --d2b:  rgba(106,54,24,0.38);
  --d2bg: rgba(106,54,24,0.07);
  --d2a:  rgba(106,54,24,0.20);
}

/* ═══════════════════════════════════════════
   Base
═══════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* Prevent text selection / long-press callout on every element */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  touch-action: none;
  transition: background 0.25s, color 0.25s;
}

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

.c-p1     { color: var(--c-p1); }
.c-p2     { color: var(--c-p2); }
.c-accent { color: var(--c-accent); }

/* ═══════════════════════════════════════════
   Buttons — mode / CTA
═══════════════════════════════════════════ */
.btn {
  padding: 10px 20px;
  border: 2px solid;
  background: transparent;
  font-family: inherit;
  font-size: clamp(0.70rem, 2.8vw, 0.92rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}

.btn-1 { border-color: var(--btn1-c); color: var(--btn1-c); }
.btn-1:hover, .btn-1.active { background: var(--btn1-bg); color: var(--btn1-fg); }

.btn-2 { border-color: var(--btn2-c); color: var(--btn2-c); }
.btn-2:hover, .btn-2.active { background: var(--btn2-bg); color: var(--btn2-fg); }

.btn-3 { border-color: var(--btn3-c); color: var(--btn3-c); }
.btn-3:hover, .btn-3.active { background: var(--btn3-bg); color: var(--btn3-fg); }

/* ═══════════════════════════════════════════
   Icon buttons (pause / back / theme)
═══════════════════════════════════════════ */
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--icon-border);
  background: var(--icon-bg);
  color: var(--text-muted);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.icon-btn:hover, .icon-btn:active {
  background: var(--icon-border);
  color: var(--text);
}

/* ═══════════════════════════════════════════
   Menu screen
═══════════════════════════════════════════ */
#menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  max-height: 100dvh;
  overflow-y: auto;
  width: 100%;
  max-width: 480px;
}

#menu-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  position: relative;
}

/* Theme toggle — far right */
#menu-topbar .icon-btn {
  position: absolute;
  right: 0;
}

/* Language selector — far left */
#lang-select {
  position: absolute;
  left: 0;
  padding: 4px 6px;
  font-size: clamp(0.62rem, 2.4vw, 0.76rem);
  letter-spacing: 0;
  min-width: 0;
}

h1 {
  font-size: clamp(1.1rem, 5vw, 2rem);
  letter-spacing: 4px;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mode-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.speed-select {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: clamp(0.70rem, 2.8vw, 0.84rem);
  color: var(--text-muted);
}

.speed-select label { letter-spacing: 1px; }

select {
  background: var(--select-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-family: inherit;
  font-size: clamp(0.70rem, 2.8vw, 0.84rem);
  touch-action: manipulation;
  cursor: pointer;
  transition: background 0.25s;
}

.controls-hint {
  font-size: clamp(0.60rem, 2.3vw, 0.74rem);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.9;
}

/* ── Menu option rows (wall-wrap, food count) ── */
.menu-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 300px;
}

.menu-option-label {
  font-size: clamp(0.70rem, 2.8vw, 0.84rem);
  color: var(--text-muted);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Food counter */
.counter {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--btn2-c);
  border-radius: 6px;
  overflow: hidden;
}

.counter-btn {
  width: 36px;
  height: 34px;
  background: transparent;
  border: none;
  color: var(--btn2-c);
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.counter-btn:hover:not(:disabled) { background: var(--btn2-bg); }
.counter-btn:disabled { opacity: 0.30; cursor: default; }

.counter-val {
  min-width: 28px;
  text-align: center;
  font-size: clamp(0.80rem, 3vw, 0.95rem);
  color: var(--text);
  border-left: 1px solid var(--btn2-c);
  border-right: 1px solid var(--btn2-c);
  padding: 0 4px;
  line-height: 34px;
}

/* ═══════════════════════════════════════════
   Game screen
═══════════════════════════════════════════ */
#game-container {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
  /* Claim all touch gestures so the browser won't scroll/zoom under a swipe */
  touch-action: none;
}

/* pvp touch layout: fill the full viewport so touchpads can flex-grow */
#game-container.pvp-touch {
  min-height: 100dvh;
  min-height: 100vh;
  justify-content: flex-start;
}

/* In pvp-touch mode, hide the regular topbar (pvp-bar-top replaces it) */
#game-container.pvp-touch #game-topbar { display: none; }

/* Touchpad zones flex-grow to fill all remaining space equally */
#game-container.pvp-touch .dpad-zone {
  flex: 1;
  min-height: 70px;
  padding: 6px 10px;
}

/* ── PVP score bars ── */
.pvp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 12px;
  height: 40px;
  flex-shrink: 0;
}

/* Bottom bar is rotated so P2 (sitting at the bottom) can read it right-side up */
.pvp-bar-flip {
  transform: rotate(180deg);
}

.pvp-bar-scores {
  display: flex;
  gap: 20px;
  font-size: clamp(0.74rem, 3.2vw, 0.94rem);
  letter-spacing: 2px;
}

.pvp-bar-btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Top bar: scoreboard + action buttons */
#game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 12px;
  height: 48px;
  flex-shrink: 0;
}

#scoreboard {
  display: flex;
  gap: 24px;
  font-size: clamp(0.76rem, 3.2vw, 0.98rem);
  letter-spacing: 2px;
}

.score-p1 { color: var(--c-p1); }
.score-p2 { color: var(--c-p2); }

#game-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

#canvas {
  border: 2px solid var(--canvas-border);
  display: block;
  touch-action: none;
  box-shadow: 0 0 28px var(--canvas-glow);
  flex-shrink: 0;
  transition: border-color 0.25s, box-shadow 0.25s;
}

#status {
  font-size: clamp(0.58rem, 2.0vw, 0.78rem);
  color: var(--text-muted);
  letter-spacing: 1px;
  text-align: center;
  padding: 4px 0;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   Touchpad zones (pvp: two swipe strips)
═══════════════════════════════════════════ */
.dpad-zone {
  display: none;    /* shown via pointer:coarse */
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 4px 10px 6px;
  flex-shrink: 0;
}

.touchpad-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
}

.dpad-label {
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Swipe strip — fills the full flex zone in pvp-touch mode */
.touchpad {
  width: 100%;
  height: 66px;      /* fallback for non-pvp-touch */
  flex: 1;           /* fills .touchpad-wrap height when dpad-zone has flex:1 */
  border-radius: 12px;
  border: 1.5px solid var(--d1b);
  background: var(--d1bg);
  touch-action: none;
  position: relative;
  overflow: hidden;
}

.touchpad.p2 {
  border-color: var(--d2b);
  background:   var(--d2bg);
}

/* Subtle directional hint drawn with CSS */
.touchpad::after {
  content: '↑\A←   →\A↓';
  white-space: pre;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 1.35;
  font-size: 0.82rem;
  color: var(--d1c);
  opacity: 0.18;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.touchpad.p2::after {
  color: var(--d2c);
}

/* ═══════════════════════════════════════════
   Overlay (game over / pause screen)
═══════════════════════════════════════════ */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,25,34,0.92);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 10;
  padding: 16px;
  transition: background 0.25s;
}

body.light #overlay { background: rgba(237,229,210,0.94); }

#overlay.visible { display: flex; }

#overlay h2 {
  font-size: clamp(1.2rem, 5vw, 2rem);
  letter-spacing: 4px;
  color: var(--text);
  text-align: center;
}

#overlay p {
  color: var(--text-muted);
  letter-spacing: 2px;
  font-size: clamp(0.70rem, 2.8vw, 0.92rem);
  text-align: center;
}

/* ═══════════════════════════════════════════
   Touch device: show D-pads
═══════════════════════════════════════════ */
@media (pointer: coarse) {
  .dpad-zone { display: flex; }
  #status    { display: none; }
}

/* ═══════════════════════════════════════════
   Portrait lock — rotate hint overlay
   Shown on touch devices in landscape orientation
═══════════════════════════════════════════ */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
}

#rotate-icon {
  font-size: 3rem;
  animation: tilt 1.4s ease-in-out infinite alternate;
}

@keyframes tilt {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(20deg);  }
}

#rotate-hint p {
  font-size: clamp(0.9rem, 4vw, 1.2rem);
  color: var(--text-muted);
  letter-spacing: 2px;
}

/* ═══════════════════════════════════════════
   Back-to-menu confirmation dialog
═══════════════════════════════════════════ */
#back-confirm {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(13,25,34,0.86);
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: background 0.25s;
}

body.light #back-confirm { background: rgba(237,229,210,0.88); }

#back-confirm.visible { display: flex; }

#back-confirm-box {
  background: var(--select-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 280px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

#back-confirm-box p {
  font-size: clamp(0.82rem, 3.5vw, 1rem);
  color: var(--text);
  letter-spacing: 1.5px;
  text-align: center;
}

#back-confirm-btns {
  display: flex;
  gap: 12px;
}

/* Show the hint whenever a touch device is held landscape */
@media (pointer: coarse) and (orientation: landscape) {
  #rotate-hint { display: flex; }
}

/* Extra-small phones */
@media (max-width: 360px) {
  .touchpad { height: 54px; }
  .btn      { padding: 8px 12px; }
}