:root { color-scheme: dark; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#0b0f19;
  color:#e8ecff;
  display:grid;
  place-items:center;
  height:100vh;
  overflow:hidden;
}

.wrap{
  position: relative;
  width: min(900px, 92vw);
}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  gap:10px;
  flex-wrap:wrap;
}

.inline{
  display:flex;
  align-items:center;
  gap:8px;
}

.pill{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  padding:8px 12px;
  border-radius:999px;
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

canvas#game{
  width:100%;
  height:auto;
  background:radial-gradient(1200px 600px at 50% 20%, #141b33, #080b14);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  display:block;
}

.help{
  opacity:0.85;
  font-size:0.95rem;
  line-height:1.35;
}

/* ✅ controller status */
.pad-status{
  opacity:0.85;
  margin-left:6px;
  white-space:nowrap;
}
.pad-status.is-connected{
  opacity:1;
  color:#7dff7a;
  text-shadow:0 0 18px rgba(125,255,122,0.25);
}

kbd{
  font:inherit;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  margin-left:4px;
}

select{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:#e8ecff;
  border-radius:10px;
  padding:4px 8px;
  outline:none;
}

option{ background:#0b0f19; }

/* Side panel floats right without pushing game */
.side-panel{
  position:absolute;
  left: calc(100% + 22px);
  top: 0;
  width: 260px;

  border:4px solid rgba(124,247,255,0.95);
  border-radius:16px;
  padding:18px 16px;
  background:rgba(255,255,255,0.03);
  box-shadow:0 18px 60px rgba(0,0,0,0.35);
  backdrop-filter:blur(6px);
}

.side-panel h2{
  margin:0 0 10px 0;
  font-size:18px;
  letter-spacing:0.2px;
}

.side-panel label{
  font-size:13px;
  opacity:0.85;
  display:block;
  margin-bottom:6px;
}

.side-panel select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
}

/* Shop row */
.shop-row{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
}

.shop-meta{
  flex:1;
  min-width:0;
}

.shop-name{
  font-weight:900;
  letter-spacing:0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.shop-cost{
  margin-top:3px;
  font-size:12px;
  opacity:0.78;
}

.shop-note{
  margin-top:10px;
  font-size:12.5px;
  opacity:0.8;
  line-height:1.35;
}

.hint{
  margin-top:10px;
  font-size:12.5px;
  opacity:0.75;
  line-height:1.35;
}

/* Preview */
.preview-wrap{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.25);
  display:grid;
  place-items:center;
  gap:8px;
}

.preview-title{
  font-size:12px;
  opacity:0.75;
  margin:0;
}

canvas#preview{
  width:120px;
  height:120px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:radial-gradient(220px 220px at 50% 35%, rgba(124,247,255,0.08), rgba(0,0,0,0));
  display:block;
}

/* Responsive */
@media (max-width: 980px){
  .side-panel{
    position: static;
    width: 100%;
    margin-top: 18px;
  }
}

/* Stage for overlays */
.game-stage{
  position: relative;
}

/* ---------- START UI ---------- */
.start-ui{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  pointer-events:none;
}

.start-ui::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  border-radius:14px;
}

.start-ui > *{
  position:relative;
  z-index:2;
}

.start-title{
  font-weight:900;
  font-size:58px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-family:"Segoe UI Black", Impact, system-ui, sans-serif;
  text-shadow:
    0 4px 0 rgba(0,0,0,0.4),
    0 10px 30px rgba(0,0,0,0.55);
}

.blocks-word{
  color:#ff4d4d;
  text-shadow:
    0 4px 0 rgba(0,0,0,0.45),
    0 10px 30px rgba(255,60,60,0.30);
}

.start-sub{
  font-size:18px;
  opacity:0.85;
}

/* Start button */
.start-btn{
  position: relative;
  pointer-events: auto;
  border: 0;
  border-radius: 18px;
  padding: 18px 54px;
  cursor: pointer;
  user-select: none;

  background: linear-gradient(180deg, #c9ff3a, #80ff00);
  box-shadow:
    0 14px 35px rgba(0,0,0,0.45),
    0 0 0 3px rgba(0,0,0,0.25) inset,
    0 0 0 2px rgba(255,255,255,0.10) inset,
    0 0 30px rgba(130,255,0,0.25);

  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.start-btn__text{
  position: relative;
  display: inline-block;
  font-weight: 900;
  font-size: 54px;
  letter-spacing: 0.5px;
  color: rgba(0,0,0,0.72);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

.start-btn__shine{
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 35%,
    rgba(255,255,255,0) 60%
  );
  transform: translateX(-60%);
  opacity: 0.8;
  mix-blend-mode: overlay;
  animation: startShine 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes startShine{
  0%   { transform: translateX(-70%); opacity: 0.35; }
  45%  { opacity: 0.85; }
  100% { transform: translateX(70%); opacity: 0.35; }
}

.start-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.start-btn:active{
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.98);
}

/* ---------- GAME OVER UI ---------- */
.gameover-ui{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  pointer-events:none;
}

.gameover-ui::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:
    radial-gradient(800px 400px at 50% 60%,
      rgba(255,0,0,0.35),
      rgba(120,0,0,0.25),
      rgba(0,0,0,0.70)
    );
  animation: deathPulse 2.4s ease-in-out infinite;
}

@keyframes deathPulse{
  0%   { filter:saturate(1); opacity:0.88; }
  50%  { filter:saturate(1.2); opacity:1; }
  100% { filter:saturate(1); opacity:0.88; }
}

.gameover-ui > *{ position:relative; z-index:2; }

.gameover-title{
  font-weight:900;
  font-size:56px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-family:"Segoe UI Black", Impact, system-ui, sans-serif;
  text-shadow:
    0 4px 0 rgba(0,0,0,0.45),
    0 10px 30px rgba(0,0,0,0.55);
}

.gameover-stats{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.stat{
  min-width:140px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 14px 35px rgba(0,0,0,0.35);
}

.stat__label{
  font-size:12px;
  opacity:0.75;
  letter-spacing:0.3px;
  text-transform:uppercase;
}

.stat__value{
  font-size:28px;
  font-weight:900;
  margin-top:4px;
}

.gameover-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  pointer-events:auto;
}

.gameover-hint{
  font-size:14px;
  opacity:0.85;
}

/* Buttons */
.ui-btn{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:#e8ecff;
  border-radius:14px;
  padding:12px 18px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:0.2px;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.ui-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.ui-btn:active{ transform: translateY(1px) scale(0.99); }

.ui-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
  transform:none;
}

.ui-btn--primary{
  border:0;
  background:linear-gradient(180deg, #ff5a78, #ff2f55);
  box-shadow:0 14px 35px rgba(0,0,0,0.45), 0 0 35px rgba(255,60,90,0.22);
}

.ui-btn--shop{
  border:0;
  background:linear-gradient(180deg, #7cf7ff, #3ad6ff);
  color:#061018;
  box-shadow:0 12px 30px rgba(0,0,0,0.45), 0 0 25px rgba(120,247,255,0.18);
}
/* ---------- Fullscreen box ---------- */
.fs-box{
  margin-top: 16px;
  border: 4px solid rgba(128,255,0,0.95);
  border-radius: 16px;
  padding: 14px 12px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.ui-btn--fs{
  width: 100%;
  border: 0;
  background: linear-gradient(180deg, #c9ff3a, #80ff00);
  color: rgba(0,0,0,0.72);
  box-shadow:
    0 14px 35px rgba(0,0,0,0.45),
    0 0 30px rgba(130,255,0,0.20);
}

.fs-hint{
  margin-top: 10px;
  font-size: 12.5px;
  opacity: 0.8;
  text-align: center;
}
/* =========================
   Fullscreen behaviour
   ========================= */

/* When the stage goes fullscreen, make it fill the screen */
.game-stage:fullscreen{
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: #0b0f19;
}

/* Canvas scales to fit the fullscreen stage nicely */
.game-stage:fullscreen canvas#game{
  width: min(100vw, calc(100vh * (900 / 520)));
  height: auto;
  max-height: 100vh;
  border-radius: 0;
}

/* =========================
   Fullscreen HUD look
   (if your JS creates #fsHud)
   ========================= */
#fsHud{
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 50;
  display: none;             /* JS will toggle to flex in fullscreen */
  pointer-events: none;
  gap: 12px;
  align-items: center;
}

/* Optional: if you later switch JS to use classes instead of inline styles */
#fsHud .hud-pill,
#fsHud .buff-chip{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
}

#fsHud .hud-pill{
  padding: 10px 14px;
  font: 600 14px system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
}

#fsHud .buff-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}

#fsHud .buff-chip img{
  width: 26px;
  height: 26px;
  object-fit: contain;
}

#fsHud .buff-chip .t{
  font: 700 13px system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: rgba(255,255,255,0.95);
  min-width: 18px;
}