/* ============================================================
   ROOT & RESET
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:          #08081e;
  --card:        rgba(14, 14, 38, 0.85);
  --border:      rgba(140, 120, 255, 0.2);
  --border-b:    rgba(170, 150, 255, 0.4);

  --accent:      #7c5af3;
  --accent-2:    #f35ab9;
  --text:        #f0eeff;
  --muted:       rgba(200, 190, 255, 0.5);
  --dim:         rgba(160, 150, 220, 0.35);

  /* Button colours */
  --red:         #e8455a;
  --red-glow:    rgba(232, 69, 90, 0.55);
  --red-flash:   #ff8fa0;

  --yellow:      #f5a623;
  --yellow-glow: rgba(245, 166, 35, 0.55);
  --yellow-flash:#ffd580;

  --green:       #2ec4a0;
  --green-glow:  rgba(46, 196, 160, 0.55);
  --green-flash: #80ffe0;

  --purple:      #8b6cf7;
  --purple-glow: rgba(139, 108, 247, 0.55);
  --purple-flash:#c0aaff;

  --board-size: min(380px, 88vw);
  --radius:      22px;
  --spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* ============================================================
   AMBIENT BACKGROUND
============================================================ */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}

.orb-1 {
  width: 55vw; height: 55vw;
  top: -20%; left: -15%;
  background: radial-gradient(circle, rgba(124,90,243,0.18) 0%, transparent 70%);
  animation: orb1 14s ease-in-out infinite alternate;
}

.orb-2 {
  width: 50vw; height: 50vw;
  bottom: -20%; right: -15%;
  background: radial-gradient(circle, rgba(243,90,185,0.14) 0%, transparent 70%);
  animation: orb2 17s ease-in-out infinite alternate;
}

@keyframes orb1 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(5vw, 6vh) scale(1.12); }
}
@keyframes orb2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-4vw, -5vh) scale(1.1); }
}

.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(130,110,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130,110,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 100%);
}

/* ============================================================
   LAYOUT
============================================================ */
.game-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 28px 16px;
  width: 100%;
  max-width: 480px;
}

/* ============================================================
   HEADER
============================================================ */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon { font-size: 1.6rem; animation: pulse 3s ease-in-out infinite; }

@keyframes pulse {
  0%,100% { filter: drop-shadow(0 0 8px rgba(124,90,243,0.7)); }
  50%      { filter: drop-shadow(0 0 18px rgba(243,90,185,0.9)); }
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 900;
  background: linear-gradient(135deg, #c4b0ff, #f35ab9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}

.best-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: #f5c23e;
  background: rgba(245,194,62,0.1);
  border: 1px solid rgba(245,194,62,0.3);
  padding: 5px 14px;
  border-radius: 100px;
  animation: slideIn 0.4s var(--spring);
}

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

/* ============================================================
   STATUS PANEL
============================================================ */
.status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 22px;
  backdrop-filter: blur(20px);
  min-height: 60px;
}

.status-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: all 0.3s ease;
  flex: 1;
}

.status-text.active { color: var(--text); }
.status-text.error  { color: #f55a5a; font-weight: 700; }
.status-text.success{ color: #3ef5a8; font-weight: 700; }

.level-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, rgba(124,90,243,0.2), rgba(243,90,185,0.15));
  border: 1px solid var(--border-b);
  border-radius: 12px;
  padding: 6px 16px;
  min-width: 64px;
}

.level-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--dim);
}

.level-num {
  font-size: 1.4rem;
  font-weight: 900;
  background: linear-gradient(135deg, #c4b0ff, #f35ab9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  transition: transform 0.3s var(--spring);
}

.level-num.bump { animation: bump 0.35s var(--spring); }

@keyframes bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ============================================================
   SIMON BOARD  (circular quadrant layout)
============================================================ */
.simon-board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.05),
    0 0 60px rgba(124, 90, 243, 0.2),
    0 30px 80px rgba(0,0,0,0.7);
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}

/* Four quadrant buttons */
.btn-quadrant {
  position: absolute;
  width: 50%;
  height: 50%;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

/* Position each quadrant */
.btn-quadrant.red    { top: 0;   left: 0;   border-radius: 100% 0 0 0; transform-origin: bottom right; }
.btn-quadrant.yellow { top: 0;   right: 0;  border-radius: 0 100% 0 0; transform-origin: bottom left;  }
.btn-quadrant.green  { bottom:0; left: 0;   border-radius: 0 0 0 100%; transform-origin: top right;    }
.btn-quadrant.purple { bottom:0; right: 0;  border-radius: 0 0 100% 0; transform-origin: top left;     }

/* Colours */
.btn-quadrant.red    { background: var(--red);    }
.btn-quadrant.yellow { background: var(--yellow); }
.btn-quadrant.green  { background: var(--green);  }
.btn-quadrant.purple { background: var(--purple); }

/* Hover: subtle brighten */
.btn-quadrant:hover { filter: brightness(1.2); }
.btn-quadrant:active { transform: scale(0.96); }

/* Game flash (Simon showing sequence) */
.btn-quadrant.flash {
  filter: brightness(2.2) saturate(1.4);
  box-shadow: inset 0 0 60px rgba(255,255,255,0.5);
  transition: filter 0.05s, box-shadow 0.05s;
}

/* User flash (player tapping) */
.btn-quadrant.userFlash {
  filter: brightness(1.6) saturate(1.2);
  transition: filter 0.05s;
}

/* Number labels on each quadrant */
.btn-quadrant::after {
  content: attr(data-num);
  position: absolute;
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
}

.btn-quadrant.red::after    { bottom: 16%; right: 16%; }
.btn-quadrant.yellow::after { bottom: 16%; left: 16%;  }
.btn-quadrant.green::after  { top: 16%;    right: 16%; }
.btn-quadrant.purple::after { top: 16%;    left: 16%;  }

/* Gap cross between quadrants */
.simon-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--bg) 0 0) center / 12px 100% no-repeat,
    linear-gradient(var(--bg) 0 0) center / 100% 12px no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ── Centre Hub ── */
.hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28%;
  height: 28%;
  background: var(--bg);
  border-radius: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.06),
    0 0 30px rgba(124,90,243,0.3);
  pointer-events: none;
  transition: all 0.3s ease;
}

.hub-icon {
  font-size: 1.2rem;
  color: var(--muted);
  transition: all 0.3s ease;
}

.hub-level {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dim);
  transition: all 0.3s ease;
}

.hub.active .hub-icon  { color: var(--text); }
.hub.active .hub-level { color: var(--accent); }

/* ============================================================
   START BUTTON
============================================================ */
.start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: var(--board-size);
  padding: 16px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.22s var(--ease-out);
  box-shadow: 0 4px 28px rgba(124,90,243,0.4);
}

.start-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(124,90,243,0.55);
}

.start-btn:active { transform: scale(0.97); }

.btn-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.start-btn:hover .btn-arrow { transform: translateX(4px); }

/* ============================================================
   SCORE STRIP
============================================================ */
.score-strip {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--board-size);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.strip-item {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
}

.strip-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--dim);
  margin-bottom: 3px;
}

.strip-val {
  font-size: 1.25rem;
  font-weight: 900;
  background: linear-gradient(135deg, #c4b0ff, #f35ab9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.2s var(--spring);
}

.strip-val.bump { animation: bump 0.35s var(--spring); }

.strip-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

/* ============================================================
   GAME-OVER FLASH (body)
============================================================ */
body.game-over-flash { background: #3a0a12; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 420px) {
  .logo-text  { font-size: 1.25rem; }
  .status-text{ font-size: 0.85rem; }
  .hub-icon   { font-size: 1rem; }
}

@media (max-height: 700px) {
  .game-wrapper { gap: 16px; padding: 16px; }
}