/* ===== Star Shooter (Galaga-lite) ===== */

.ss-wrap{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.ss-world{
  position:relative;
  width:min(420px, 96vw);
  aspect-ratio: 3 / 4;
  background:radial-gradient(circle at 50% 10%,#0f172a,#020617 70%);
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}

/* Player ship */

.ss-player{
  position:absolute;
  bottom:8%;
  left:50%;
  width:26px;
  height:26px;
  transform:translateX(-50%);
  border-radius:6px;
  background:linear-gradient(180deg,#e5e7eb,#38bdf8);
  box-shadow:0 0 16px rgba(56,189,248,.8);
}
.ss-player::before{
  content:'';
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:12px;
  border-radius:8px 8px 2px 2px;
  background:#f97316;
}

/* Bullets & enemies containers */

.ss-bullets,
.ss-enemies{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.ss-bullet{
  position:absolute;
  width:4px;
  height:10px;
  background:#facc15;
  border-radius:999px;
  box-shadow:0 0 10px rgba(250,204,21,.8);
}

.ss-enemy{
  position:absolute;
  width:24px;
  height:24px;
  border-radius:6px;
  background:#f97316;
  box-shadow:0 0 12px rgba(248,113,113,.7);
}
.ss-enemy::before{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:4px;
  border:1px solid #7f1d1d;
}

.ss-tap-hint{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:14px;
  color:var(--muted);
  text-shadow:0 4px 16px rgba(0,0,0,.8);
  pointer-events:none;
}

/* Thumbnail for home */

.shot-shooter{
  position:relative;
  width:80%;
  aspect-ratio:3/4;
  border-radius:8px;
  background:#020617;
  border:1px solid rgba(148,163,184,.5);
  overflow:hidden;
}
.shot-ship{
  position:absolute;
  bottom:12%;
  left:50%;
  width:18%;
  height:18%;
  transform:translateX(-50%);
  border-radius:6px;
  background:linear-gradient(180deg,#e5e7eb,#38bdf8);
}
.shot-bullet{
  position:absolute;
  bottom:32%;
  left:50%;
  width:4%;
  height:14%;
  transform:translateX(-50%);
  border-radius:999px;
  background:#facc15;
}
.shot-enemy{
  position:absolute;
  width:16%;
  height:16%;
  border-radius:4px;
  background:#f97316;
}
.shot-enemy.e1{
  top:14%;
  left:18%;
}
.shot-enemy.e2{
  top:24%;
  right:18%;
}

/* Bigger, tanky enemies (2 hits) */
.ss-enemy.big{
  width:32px;
  height:32px;
  background:#a855f7;
  box-shadow:0 0 18px rgba(168,85,247,.9);
}

/* Small hit feedback */
.ss-enemy.hit{
  transform:scale(1.08);
  opacity:0.9;
}

/* --- Shooter Neon Look --- */

#ss-world {
  background: transparent;
}

/* Enemies */
.ss-enemy {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--neon-green);
  box-shadow: 0 0 14px rgba(34,197,94,.75);
}

/* Tank enemies (2 hits) */
.ss-enemy.big {
  width: 30px;
  height: 30px;
  background: var(--neon-purple);
  box-shadow: 0 0 20px rgba(168,85,247,.9);
}

/* Hit feedback (class applied in JS) */
.ss-enemy.hit {
  transform: scale(1.08);
  opacity: .9;
}

/* Bullets */
.ss-bullet {
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--neon-yellow);
  box-shadow: 0 0 10px rgba(250,204,21,.9);
}

/* --- Space decor: stars, planets, comets --- */

.ss-star,
.ss-star-big,
.ss-comet {
  position: absolute;
  pointer-events: none;
}

/* Tiny distant stars */
.ss-star {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #e5e7eb;
  box-shadow: 0 0 8px rgba(248,250,252,.9);
  opacity: .8;
}

/* Larger glowing planet with rings */
.ss-star-big {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 25%, #f9fafb, transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(56,189,248,1), rgba(15,23,42,1));
  box-shadow:
    0 0 12px rgba(56,189,248,.9),
    0 0 22px rgba(168,85,247,.7);
}

/* Planet rings */
.ss-star-big::before,
.ss-star-big::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(148,163,184,.7);
  border-top-color: rgba(148,163,184,.2);
  transform: translate(-50%, -50%) rotate(-18deg);
  opacity: .75;
}

.ss-star-big::after {
  transform: translate(-50%, -50%) rotate(18deg);
  opacity: .4;
}

/* Comet with trail */
.ss-comet {
  width: 4px;
  height: 14px;
  border-radius: 999px;
  transform-origin: 50% 50%;
  background: #facc15;
  box-shadow:
    0 0 10px rgba(250,204,21,1),
    0 0 26px rgba(250,204,21,.9);
}

.ss-comet::before {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 4px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    rgba(250,204,21,.7),
    transparent
  );
  transform: translateX(-50%);
  opacity: .9;
}