:root{
  --card: rgba(0,0,0,.38);
  --card2: rgba(0,0,0,.26);
  --shadow: 0 18px 60px rgba(0,0,0,.38);
  --muted: rgba(255,255,255,.78);
  --radius: 22px;
}

*{ box-sizing: border-box; }
body{
  margin:0; overflow:hidden;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff; background:#000;
}

/* Live photo background */
#bg{
  position:fixed; inset:0;
  background:#000;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: kenburns 18s ease-in-out infinite alternate;
  filter: saturate(1.04) contrast(1.02) brightness(0.98);
}
@keyframes kenburns{
  0%{ transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  100%{ transform: scale(1.12) translate3d(1.2%, 0.9%, 0); }
}
#bg::before, #bg::after{ content:""; position:absolute; inset:-20%; pointer-events:none; }
#bg::before{
  background: radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
  mix-blend-mode: overlay;
  animation: glowdrift 14s ease-in-out infinite alternate;
  filter: blur(10px);
}
#bg::after{
  background:
    linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    radial-gradient(closest-side, rgba(255,255,255,.04), rgba(255,255,255,0) 70%);
  opacity: .75;
  animation: fog 22s linear infinite;
  filter: blur(22px);
}
@keyframes glowdrift{
  0%{ transform: translate3d(-2%, -1%, 0) rotate(-2deg); opacity:.55; }
  100%{ transform: translate3d(2%, 1%, 0) rotate(2deg); opacity:.75; }
}
@keyframes fog{ 0%{ transform: translate3d(-6%,0,0);} 100%{ transform: translate3d(6%,0,0);} }

.screen{
  position:fixed; inset:0;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) 16px;
}
.hidden{ display:none !important; }

.hero{ text-align:center; padding-top: 10px; }
h1{ margin: 10px 0 6px; font-size: 34px; text-shadow: 0 10px 40px rgba(0,0,0,.45); }
.sub{ margin: 0 auto; max-width: 720px; color: var(--muted); font-size: 14.5px; line-height: 1.45; text-shadow: 0 10px 40px rgba(0,0,0,.45); }

.top-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top: 14px; }
.pill{
  border:none; cursor:pointer; color:#fff; background: var(--card);
  padding: 10px 12px; border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  font-size: 13.5px;
}

.arenaBar{ position:absolute; left:0; right:0; bottom: max(16px, env(safe-area-inset-bottom)); display:flex; justify-content:center; }
.arenaStrip{
  width:min(980px, calc(100vw - 20px));
  display:flex; gap:10px;
  padding: 12px; border-radius: 999px;
  background: var(--card2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow:auto;
}
.arenaBtn{
  flex:0 0 auto; border:none; cursor:pointer;
  padding: 12px 14px; border-radius: 999px;
  background: rgba(255,255,255,.12); color:#fff;
  font-size: 14px; white-space: nowrap;
}
.arenaBtn.active{ background: rgba(255,255,255,.24); }
.footer-hint{
  position:absolute; left:0; right:0; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 78px);
  text-align:center; font-size: 12px; color: rgba(255,255,255,.70);
}

/* HUD */
#hud{
  position:fixed; left:12px; right:12px;
  top: max(12px, env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  z-index:10;
}
.chip{
  border:none; cursor:pointer; color:#fff; background: var(--card);
  padding: 10px 12px; border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  font-size: 14px;
}
.score{
  font-size: 14px; color: rgba(255,255,255,.92);
  background: var(--card);
  padding: 10px 12px; border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  white-space:nowrap;
}

/* Canvas */
#gameCanvas{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* Sound drawer */
#soundDrawer{ position:fixed; left:12px; right:12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index:11; }
.soundPanel{
  width:min(640px, calc(100vw - 24px));
  margin:0 auto;
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.row label{ font-size: 13px; color: rgba(255,255,255,.88); }
input[type="range"]{ width: 220px; }
.toggles{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.toggleBtn{
  border:none; cursor:pointer; padding: 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,.12); color:#fff; font-size: 13px;
}
.toggleBtn.on{ background: rgba(255,255,255,.26); }
.tiny{ font-size: 12px; color: rgba(255,255,255,.72); line-height: 1.35; margin-top: 6px; }

/* Quote modal */
#quoteModal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding: 18px; z-index: 20;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.quoteCard{
  width:min(680px, 100%);
  border-radius: 26px;
  background: rgba(0,0,0,.55);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
}
#quoteText{ font-size: 17px; line-height: 1.5; margin: 0 0 10px; }
#quoteFrom{ margin:0 0 14px; color: rgba(255,255,255,.78); font-size: 13px; }
#quoteClose{
  width:100%; border:none; cursor:pointer;
  padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,.14); color:#fff; font-size: 14px;
}

/* Loader */
#loader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:30; background: rgba(0,0,0,.50);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.loaderCard{
  width:min(520px, calc(100vw - 28px));
  background: rgba(0,0,0,.55);
  border-radius: 24px;
  padding: 16px 16px 14px;
  box-shadow: var(--shadow);
}
.loaderTitle{ font-size: 16px; margin-bottom: 6px; }
.loaderSub{ font-size: 12px; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.bar{ width:100%; height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow:hidden; }
.barFill{ height:100%; width: 0%; background: rgba(255,255,255,.38); }