:root{
  /* animated background theme sampled from the capsule artwork:
     deep plum -> dark magenta -> warm orange */
  --panel:#231223;
  --accent:#ff9f1c;
  --muted:#d6c0a0;
  --fg:#e6eef6;
}

/* Base */
@font-face{
  font-family: 'Terminus';
  src: url('/TerminusTTF-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box;font-family:'Terminus', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
html,body{height:100%;margin:0;color:var(--fg);overflow:hidden}

/* Animated gradient: three layered gradients with a glowing, pulsing capsule */
body{
  background:
    /* faint glowing capsule center that pulses */
    radial-gradient(700px 300px at 30% 35%, rgba(255,159,28,0.12), transparent 18%),
    radial-gradient(1200px 600px at 10% 20%, rgba(255,159,28,0.06), transparent 10%),
    radial-gradient(900px 500px at 80% 80%, rgba(47,22,48,0.14), transparent 10%),
    linear-gradient(180deg, #1b0f1a 0%, #2f1630 55%, #ff9f1c 100%);
  background-size: 140% 140%, 200% 200%, 180% 180%, 100% 100%;
  animation: capsulePulse 6s ease-in-out infinite, slowShift 16s linear infinite, softDrift 28s ease-in-out infinite;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* subtle moving light overlay to add 'cool' motion and a faint glow */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(600px 200px at 20% 10%, rgba(255,159,28,0.12), transparent 20%),
    radial-gradient(500px 180px at 85% 30%, rgba(255,255,255,0.05), transparent 20%);
  mix-blend-mode:screen;
  opacity:0.95;
  transform:translateZ(0);
  filter: blur(8px) saturate(1.1);
  animation: overlayFloat 10s ease-in-out infinite;
}

/* small drifting vignette for depth */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(70% 60% at 50% 45%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.22) 100%);
  mix-blend-mode:multiply;
}

/* particle canvas sits behind content */
#particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  display:block;
  opacity:0.7;
}

/* layout */
#app{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;height:100%;padding:18px;position:relative;z-index:1}
.btn{
  background:var(--panel);
  color:var(--accent);
  border:1px solid rgba(255,255,255,0.03);
  padding:12px 16px;
  border-radius:8px;
  font-weight:600;
  min-width:200px;
  position:relative;
  overflow:visible;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease, color 160ms ease;
  will-change: transform, box-shadow;
  -webkit-tap-highlight-color: transparent;
}

/* subtle animated underline / glow */
.btn::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,159,28,0.0), rgba(255,159,28,0.18), rgba(255,159,28,0.0));
  transform-origin: center;
  transform: scaleX(0.6) translateY(6px);
  opacity: 0.65;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  pointer-events: none;
  filter: blur(6px);
}

/* hover / focus state: pop and glow */
.btn:hover,
.btn:focus{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 30px rgba(255,159,28,0.10), 0 2px 6px rgba(0,0,0,0.45) inset;
  color: #fff;
  outline: none;
}

.btn:hover::after,
.btn:focus::after{
  transform: scaleX(1) translateY(0);
  opacity: 1;
}

/* active (press) state */
.btn:active{
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(255,159,28,0.06);
}

/* Respect reduced motion: reduce hover animations */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after { transition: none !important; transform: none !important; box-shadow: none !important; }
}

/* Header/title - bumped up size and subtle glow */
#title{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px;text-align:center}
#title .main{
  /* much larger, responsive title */
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.6px;
  text-shadow: 0 10px 40px rgba(255,159,28,0.08), 0 1px 0 rgba(0,0,0,0.6);
  line-height: 0.9;
}
#title .sub{font-size:12px;color:var(--muted)}

/* Popup */
#popupRoot{width:260px;height:260px;background:linear-gradient(180deg,#0d0f10 0%, #131516 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;border-radius:10px;color:#fff}
#frameBox{width:96px;height:96px;background:#000;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#frameImg{image-rendering:pixelated;max-width:100%;max-height:100%}
#info{font-size:13px;color:var(--muted);display:none;gap:10px;justify-content:space-between;width:100%}

/* Popup minimal styling override: when popup.html is loaded as a standalone window,
   make body show only the image without extra padding or background chrome. */
body.popup{
  margin:0;
  padding:0;
  background:#000;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Make popup image a compact, pixel-accurate game scale */
body > img#frameImg{
  display:block;
  width:96px;
  height:96px;
  object-fit:contain;
  image-rendering: pixelated;
  background: #000;
}

/* Settings styles (moved from popup) for index page controls */
.settings-toggle{
  position: absolute;
  top:10px;
  right:10px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--fg);
  padding:8px 10px;
  min-width:48px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  z-index: 60;
}

/* Centered modal-style settings panel (enlarged for better visibility & touch)
   Now oriented as a vertical modal so the title sits above the controls and the panel is larger. */
.settings-panel{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 600px;
  max-width: calc(100% - 32px);
  /* slightly increased height for a roomier settings panel while preventing overflow on small screens */
  height: 560px;
  max-height: calc(100% - 40px);
  background: linear-gradient(180deg, rgba(10,10,12,0.98), rgba(6,6,8,0.94));
  border-radius:16px;
  padding:24px;
  color:var(--fg);
  backdrop-filter: blur(10px) saturate(1.05);
  font-size:15px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  justify-content:flex-start;
  box-shadow: 0 24px 80px rgba(0,0,0,0.75);
  z-index: 50;
}

/* Close button inside the modal */
.settings-close{
  position:absolute;
  top:10px;
  right:12px;
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}
.settings-close:hover{ color:var(--fg); background: rgba(255,255,255,0.03); }

/* Modal title styling */
.settings-panel .settings-title{
  width:100%;
  font-size:22px;
  font-weight:800;
  color:var(--fg);
  letter-spacing:0.6px;
  margin:4px 0 14px 0;
  text-align:left;
}

.settings-panel select{
  /* darker, more tactile dropdown */
  background: rgba(8,8,10,0.65);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.06);
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  min-width:160px;
  -webkit-appearance: none;
  appearance: none;
  backdrop-filter: blur(6px);
}

/* ensure the smaller inline select uses the same dark treatment */
#soundSelect {
  background: rgba(8,8,10,0.65) !important;
  color: var(--fg) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* focus state for accessibility */
.settings-panel select:focus, #soundSelect:focus {
  outline: 2px solid rgba(255,159,28,0.12);
  box-shadow: 0 6px 24px rgba(255,159,28,0.04) inset;
}
.settings-panel label{
  display:flex;
  gap:10px;
  align-items:center;
}
.visually-hidden{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* When hidden attribute is set, hide visually (keeps DOM but hidden) */
.settings-panel[hidden]{ display: none !important; }

/* Keyframe animations */
@keyframes capsulePulse {
  0% { background-position: 28% 36%, 0% 0%, 0% 0%, 0% 0%; filter:brightness(1) saturate(1) }
  50% { background-position: 32% 34%, 10% 6%, 20% 12%, 0% 0%; filter:brightness(1.12) saturate(1.08) }
  100% { background-position: 28% 36%, 0% 0%, 0% 0%, 0% 0%; filter:brightness(1) saturate(1) }
}

@keyframes slowShift {
  0%{ background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0% }
  50%{ background-position: 50% 100%, 30% 40%, 10% 10%, 0% 0% }
  100%{ background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0% }
}

@keyframes softDrift {
  0%{ transform: scale(1) rotate(0.01deg) }
  50%{ transform: scale(1.02) rotate(-0.2deg) }
  100%{ transform: scale(1) rotate(0.01deg) }
}

@keyframes overlayFloat {
  0%{ transform: translateY(-6%) translateX(-4%) }
  50%{ transform: translateY(6%) translateX(4%) }
  100%{ transform: translateY(-6%) translateX(-4%) }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body, body::before { animation: none !important; transition: none !important; }
  #particles { display:none; }
}