/*
Theme Name: Space Escape Arcade
Theme URI: https://mahnooraftab.com/
Author: Mahnoor Aftab
Description: A responsive neon space arcade game theme built for a web development portfolio.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: space-escape
*/

:root {
  --space-0: #050714;
  --space-1: #090d25;
  --space-2: #13193f;
  --cyan: #45e9ff;
  --cyan-soft: rgba(69, 233, 255, 0.18);
  --violet: #8b5cf6;
  --magenta: #ff4ecd;
  --gold: #ffd45c;
  --danger: #ff5f7a;
  --text: #f5f7ff;
  --muted: #aeb7d8;
  --glass: rgba(15, 22, 55, 0.72);
  --line: rgba(132, 160, 255, 0.22);
  --shadow: 0 28px 80px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--space-0); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 15%, rgba(139,92,246,.23), transparent 27%),
    radial-gradient(circle at 82% 17%, rgba(69,233,255,.18), transparent 24%),
    radial-gradient(circle at 50% 90%, rgba(255,78,205,.12), transparent 28%),
    linear-gradient(155deg, #040610 0%, #090d25 48%, #11163b 100%);
}
button { font: inherit; }

.space-app {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  padding: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.space-app::before,
.space-app::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
}
.space-app::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(69,233,255,.72) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
  background-size: 70px 70px, 115px 115px, 165px 165px;
  background-position: 4px 9px, 38px 61px, 80px 20px;
  opacity: .58;
  animation: starDrift 28s linear infinite;
}
.space-app::after {
  background: conic-gradient(from 220deg at 50% 50%, transparent, rgba(139,92,246,.08), transparent, rgba(69,233,255,.06), transparent);
  filter: blur(22px);
  animation: nebulaTurn 24s linear infinite;
}

@keyframes starDrift { to { transform: translate3d(-90px, 120px, 0); } }
@keyframes nebulaTurn { to { transform: rotate(360deg) scale(1.05); } }

.game-shell {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 305px;
  gap: 18px;
  align-items: stretch;
}

.game-card,
.side-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16,23,58,.80), rgba(8,12,34,.86));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
}

.game-card { border-radius: 28px; overflow: hidden; }
.side-card { border-radius: 24px; padding: 22px; }

.game-header {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(69,233,255,.07), rgba(139,92,246,.08), rgba(255,78,205,.07));
}

.brand { display: flex; gap: 13px; align-items: center; min-width: 0; }
.brand-orbit {
  width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid rgba(69,233,255,.45);
  background: radial-gradient(circle at 35% 30%, #fff 0 2px, #45e9ff 3px 10%, #3648b7 31%, #111636 66%);
  box-shadow: 0 0 32px rgba(69,233,255,.24);
  position: relative;
}
.brand-orbit::after {
  content: "";
  position: absolute;
  width: 61px; height: 15px;
  border: 2px solid rgba(255,78,205,.75);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 16px rgba(255,78,205,.25);
}
.eyebrow { margin: 0 0 3px; color: var(--cyan); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 800; }
h1 { margin: 0; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.04em; line-height: 1; }

.hud { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hud-chip {
  min-width: 84px; padding: 9px 12px; border-radius: 14px;
  border: 1px solid rgba(132,160,255,.20);
  background: rgba(5,9,28,.58);
  text-align: center;
}
.hud-chip span { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 9px; font-weight: 800; }
.hud-chip strong { display: block; margin-top: 2px; font-size: 18px; }
.hud-chip.time strong { color: var(--cyan); }
.hud-chip.lives strong { color: #ff8095; letter-spacing: 2px; }

.game-stage-wrap { padding: 14px; }
.game-stage {
  position: relative;
  width: 100%;
  height: min(68vh, 650px);
  min-height: 520px;
  border-radius: 22px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  background:
    radial-gradient(circle at 70% 20%, rgba(139,92,246,.18), transparent 27%),
    radial-gradient(circle at 28% 70%, rgba(69,233,255,.11), transparent 25%),
    linear-gradient(180deg, #030513, #070b25 55%, #0b1233);
  box-shadow: inset 0 0 60px rgba(0,0,0,.65), inset 0 0 0 1px rgba(121,149,255,.14);
}
.game-stage::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.76;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(111,230,255,.9) 0 1px, transparent 1.4px);
  background-size: 58px 58px, 101px 101px;
  background-position: 7px 11px, 47px 37px;
  animation: stageStars 8s linear infinite;
}
.game-stage::after {
  content:""; position:absolute; inset:auto -5% -22% -5%; height:48%; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(103,75,255,.23), transparent 60%);
  filter: blur(8px);
}
@keyframes stageStars { to { background-position: 7px 111px, 47px 188px; } }

.planet {
  position:absolute; border-radius:50%; pointer-events:none; opacity:.85; filter:saturate(1.2);
}
.planet.one { width: 92px; height:92px; right:7%; top:10%; background: radial-gradient(circle at 34% 28%, #ffd8ff, #a666f7 22%, #4b257b 54%, #16112c 73%); box-shadow:0 0 50px rgba(155,93,229,.22); }
.planet.one::after { content:""; position:absolute; width:130px; height:24px; border:5px solid rgba(255,183,250,.4); border-radius:50%; left:-21px; top:34px; transform:rotate(-15deg); }
.planet.two { width:46px; height:46px; left:8%; top:22%; background:radial-gradient(circle at 35% 30%, #d9ffff, #32b7d4 35%, #0c4e79 74%); box-shadow:0 0 32px rgba(69,233,255,.25); }

.ship {
  --ship-x: 50%;
  position: absolute;
  left: var(--ship-x);
  bottom: 25px;
  width: 72px;
  height: 86px;
  transform: translateX(-50%);
  z-index: 8;
  filter: drop-shadow(0 0 17px rgba(69,233,255,.40));
  transition: filter .15s;
}
.ship.invincible { animation: invincible .16s linear infinite alternate; }
@keyframes invincible { from { opacity:.35; } to { opacity:1; } }
.ship-body {
  position:absolute; left:20px; top:0; width:32px; height:62px;
  border-radius: 55% 55% 36% 36% / 75% 75% 25% 25%;
  background: linear-gradient(90deg, #a4b9ff, #fff 46%, #8cf5ff 62%, #5a6db9);
  border:1px solid rgba(255,255,255,.62);
  box-shadow: inset -6px -7px 9px rgba(36,49,113,.38), 0 0 22px rgba(69,233,255,.26);
}
.ship-body::before {
  content:""; position:absolute; left:8px; top:18px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #dffeff, #48d8ff 48%, #4256c8 70%);
  border:2px solid #243168; box-shadow:0 0 10px rgba(69,233,255,.7);
}
.ship-wing { position:absolute; top:39px; width:24px; height:31px; background:linear-gradient(180deg,#9958ff,#5436b8); }
.ship-wing.left { left:4px; clip-path: polygon(100% 0, 100% 100%, 0 84%, 35% 28%); }
.ship-wing.right { right:4px; clip-path: polygon(0 0, 100% 84%, 0 100%, 0 0); }
.ship-flame {
  position:absolute; left:28px; top:59px; width:16px; height:28px;
  background:linear-gradient(180deg,#fff 0 12%,#45e9ff 22%,#8b5cf6 58%,rgba(255,78,205,0) 100%);
  clip-path:polygon(50% 100%,0 0,100% 0);
  filter:drop-shadow(0 0 9px #45e9ff);
  animation: flame .16s ease-in-out infinite alternate;
}
@keyframes flame { to { transform:scaleY(.68); opacity:.72; } }

.falling {
  position:absolute;
  top:0;
  left:0;
  z-index:6;
  will-change:transform, rotate;
  pointer-events:none;
  transform-origin:center;
}
.star-pickup {
  width:32px; height:32px;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);
  background:radial-gradient(circle at 45% 38%, #fff 0 9%, #fff3b2 14%, #ffd45c 46%, #f29c31 100%);
  filter:drop-shadow(0 0 10px rgba(255,212,92,.75));
  animation:starGlow 1.15s ease-in-out infinite alternate;
}
@keyframes starGlow {
  to { filter:drop-shadow(0 0 17px rgba(255,212,92,.95)) brightness(1.12); }
}
.asteroid {
  width:50px; height:50px; border-radius:46% 54% 42% 58%;
  background:
    radial-gradient(circle at 30% 32%, #586176 0 6%, transparent 7%),
    radial-gradient(circle at 67% 61%, #363c4d 0 10%, transparent 11%),
    radial-gradient(circle at 52% 20%, #71788b 0 5%, transparent 6%),
    radial-gradient(circle at 38% 37%, #767f91, #454b5d 53%, #242a39 78%);
  box-shadow: inset -8px -9px 9px rgba(0,0,0,.28), 0 0 17px rgba(255,95,122,.10);
}
.asteroid.big { width:66px; height:66px; }

.shield-pickup {
  width:40px; height:40px; border-radius:50%;
  border:2px solid rgba(69,233,255,.92);
  background:radial-gradient(circle, rgba(69,233,255,.3), rgba(139,92,246,.12));
  box-shadow:0 0 20px rgba(69,233,255,.5), inset 0 0 12px rgba(69,233,255,.35);
  display:grid; place-items:center; color:#dfffff; font-weight:900; font-size:19px;
  animation:shieldGlow 1s ease-in-out infinite alternate;
}
@keyframes shieldGlow {
  to { box-shadow:0 0 30px rgba(69,233,255,.7), inset 0 0 18px rgba(69,233,255,.42); filter:brightness(1.12); }
}

.shield-ring {
  display:none; position:absolute; left:50%; top:50%; width:96px; height:96px; transform:translate(-50%,-50%);
  border-radius:50%; border:2px solid rgba(69,233,255,.75);
  box-shadow:0 0 25px rgba(69,233,255,.45), inset 0 0 25px rgba(69,233,255,.12);
}
.ship.shielded .shield-ring { display:block; animation:shieldPulse .75s ease-in-out infinite alternate; }
@keyframes shieldPulse { to { scale:1.08; opacity:.62; } }

.fx { position:absolute; z-index:14; pointer-events:none; font-weight:900; font-size:17px; text-shadow:0 0 12px currentColor; animation:floatFx .65s ease-out forwards; }
.fx.good { color:var(--gold); }
.fx.bad { color:var(--danger); }
.fx.shield { color:var(--cyan); }
@keyframes floatFx { from{ transform:translateY(0) scale(.7); opacity:0;} 25%{opacity:1;} to{transform:translateY(-42px) scale(1.15); opacity:0;} }

.overlay {
  position:absolute; inset:0; z-index:30;
  display:grid; place-items:center; padding:20px;
  background:linear-gradient(180deg,rgba(3,5,19,.65),rgba(3,5,19,.88));
  backdrop-filter:blur(5px);
  transition:.22s ease;
}
.overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.panel {
  width:min(490px,100%); padding:30px; text-align:center; border-radius:26px;
  border:1px solid rgba(111,152,255,.28);
  background:linear-gradient(180deg,rgba(20,29,69,.94),rgba(9,13,37,.96));
  box-shadow:0 26px 70px rgba(0,0,0,.48),0 0 45px rgba(139,92,246,.12);
}
.panel-kicker { color:var(--cyan); text-transform:uppercase; letter-spacing:.18em; font-weight:900; font-size:11px; }
.panel h2 { margin:8px 0 10px; font-size:clamp(34px,6vw,54px); letter-spacing:-.055em; line-height:.96; }
.gradient-text { background:linear-gradient(90deg,var(--cyan),#bba6ff 48%,var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.panel p { margin:0 auto 22px; max-width:390px; color:var(--muted); line-height:1.65; font-size:14px; }
.mission-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:20px 0 24px; }
.mission-item { padding:11px 8px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid rgba(133,158,255,.13); }
.mission-item strong { display:block; font-size:17px; }
.mission-item span { display:block; margin-top:2px; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

.btn {
  border:0; border-radius:14px; padding:13px 18px; cursor:pointer; font-weight:900; letter-spacing:.01em;
  color:#081024; background:linear-gradient(90deg,var(--cyan),#8bf8ff);
  box-shadow:0 10px 28px rgba(69,233,255,.21), inset 0 1px 0 rgba(255,255,255,.7);
  transition:.18s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(69,233,255,.29); }
.btn:active { transform:translateY(0); }
.btn.secondary { color:var(--text); background:rgba(255,255,255,.06); border:1px solid rgba(133,158,255,.22); box-shadow:none; }

.control-strip {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px 18px;
}
.control-help { color:var(--muted); font-size:12px; }
.control-actions { display:flex; gap:8px; }
.icon-btn { width:42px; height:42px; border-radius:13px; border:1px solid rgba(133,158,255,.19); background:rgba(255,255,255,.05); color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:16px; }
.icon-btn:hover { background:rgba(69,233,255,.09); border-color:rgba(69,233,255,.3); }

.side-stack { display:grid; gap:18px; align-content:start; }
.side-card h3 { margin:0 0 13px; font-size:18px; }
.side-card p { margin:0; color:var(--muted); line-height:1.6; font-size:13px; }
.best-score { font-size:42px; font-weight:950; letter-spacing:-.06em; margin:5px 0 2px; background:linear-gradient(90deg,var(--gold),#fff4bb); -webkit-background-clip:text; background-clip:text; color:transparent; }
.legend { display:grid; gap:10px; margin-top:14px; }
.legend-row { display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; padding:9px 10px; border-radius:13px; background:rgba(255,255,255,.035); border:1px solid rgba(133,158,255,.11); }
.legend-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.06); }
.legend-row strong { font-size:12px; }
.legend-row small { color:var(--muted); font-size:10px; }
.points { color:var(--cyan); font-size:11px; font-weight:900; }
.tip { margin-top:14px !important; padding-top:14px; border-top:1px solid var(--line); }

.mobile-controls { display:none; grid-template-columns:1fr 1fr; gap:12px; padding:0 18px 18px; }
.move-btn {
  height:54px; border-radius:16px; border:1px solid rgba(69,233,255,.22);
  color:var(--cyan); background:rgba(69,233,255,.06); font-size:22px; font-weight:900;
  touch-action:none; user-select:none;
}

.screen-flash { position:absolute; inset:0; pointer-events:none; z-index:20; opacity:0; }
.screen-flash.hit { animation:flashHit .22s ease; background:rgba(255,53,100,.28); }
.screen-flash.shield { animation:flashShield .25s ease; background:rgba(69,233,255,.18); }
@keyframes flashHit { 40%{opacity:1} to{opacity:0} }
@keyframes flashShield { 40%{opacity:1} to{opacity:0} }

.countdown { position:absolute; inset:0; z-index:26; display:none; place-items:center; pointer-events:none; font-size:clamp(70px,18vw,150px); font-weight:950; text-shadow:0 0 35px rgba(69,233,255,.55); }
.countdown.show { display:grid; }
.countdown.pop { animation:countPop .78s ease; }
@keyframes countPop { from{ transform:scale(.55); opacity:0;} 25%{opacity:1;} to{transform:scale(1.2); opacity:0;} }

@media (max-width: 900px) {
  .space-app { padding:12px; }
  .game-shell { grid-template-columns:1fr; }
  .side-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .side-card:last-child { grid-column:1/-1; }
  .game-stage { height:60vh; min-height:500px; }
}
@media (max-width: 640px) {
  .space-app { padding:8px; display:block; }
  .game-card { border-radius:20px; }
  .game-header { align-items:flex-start; padding:14px; }
  .brand-orbit { width:40px; height:40px; }
  .brand-orbit::after { width:50px; height:13px; left:-7px; top:14px; }
  .eyebrow { font-size:8px; }
  h1 { font-size:21px; }
  .hud { gap:5px; }
  .hud-chip { min-width:61px; padding:7px 7px; border-radius:11px; }
  .hud-chip span { font-size:7px; }
  .hud-chip strong { font-size:15px; }
  .game-stage-wrap { padding:8px; }
  .game-stage { min-height:0; height:62vh; border-radius:16px; }
  .planet.one { width:62px; height:62px; }
  .planet.one::after { width:86px; left:-12px; top:23px; }
  .panel { padding:23px 18px; }
  .panel h2 { font-size:38px; }
  .mission-row { grid-template-columns:1fr; }
  .mission-item { display:flex; align-items:center; justify-content:space-between; }
  .control-help { display:none; }
  .control-strip { padding:0 10px 10px; justify-content:flex-end; }
  .mobile-controls { display:grid; padding:0 10px 12px; }
  .side-stack { grid-template-columns:1fr; margin:10px 0 20px; }
  .side-card:last-child { grid-column:auto; }
  .side-card { border-radius:18px; padding:18px; }
  .ship { bottom:18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}