/* ===========================================================
   Tech Tinker Boss Battle — styles.css (Arcade v6.8+ Retro Booster)
   Retro CRT, matrix rain, scanlines, glow borders
   Two-column game; compact intro/dialogue; no weird overlaps
   =========================================================== */

/* ------ Base / Reset ------ */
:root{
  --bg: #0a0f1a;
  --panel: #121a2a;
  --panel-2: #0f1726;
  --ink: #dbe6ff;
  --ink-dim: #a7b0d0;
  --ink-muted:#8b96b8;
  --accent: #7bd3ff;
  --accent-2:#99f0d0;
  --danger: #ff5577;
  --good: #3de39b;
  --gold: #ffdf57;
  --outline: rgba(123,211,255,.35);
  --outline-strong: rgba(123,211,255,.7);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{
  background: radial-gradient(1200px 600px at 50% -200px, #1a2236 0%, #0a0f1a 45%, #060a12 100%) fixed;
}
body{
  margin:0; color:var(--ink);
  font-family: "VT323", ui-monospace, monospace;
  letter-spacing:.5px; font-size:20px;
}

.wrap{ max-width:1100px; margin:28px auto; padding:0 14px; }

/* ------ Header ------ */
header{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:14px;
  background: linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px var(--outline);
  margin-bottom:18px;
}
.brand{ font-size:28px; }
header .row{ margin-left:auto; display:flex; gap:10px; align-items:center; }

/* ------ UI atoms ------ */
.row{ display:flex; align-items:center; gap:10px; }
.spacer{ flex:1 1 auto; }
.small{ color:var(--ink-dim); }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; color:var(--ink);
  background: linear-gradient(180deg, #0f1a2b, #0c1525);
  box-shadow: inset 0 0 0 1px var(--outline);
  white-space:nowrap;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:16px; color:var(--ink-dim);
  background: linear-gradient(180deg,#0e1830,#0b1322);
  box-shadow: inset 0 0 0 1px var(--outline);
}
button{
  font: inherit; color:var(--ink);
  background: linear-gradient(180deg,#13203a,#0d1a30);
  padding:10px 16px; border:0; border-radius:12px; cursor:pointer;
  box-shadow: inset 0 0 0 1px var(--outline), 0 6px 18px rgba(0,0,0,.35);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
button:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--outline-strong), 0 10px 28px rgba(0,0,0,.5); }
button:active{ transform: translateY(0); }
button.ghost{ background: transparent; box-shadow: inset 0 0 0 1px var(--outline); }
button:disabled{ opacity:.55; cursor:not-allowed; }
.smallbtn{ padding:6px 12px; font-size:18px; }

/* Tiny shake on locked start click */
.shake-deny{ animation: deny .35s linear; }
@keyframes deny{
  0%,100%{ transform:none; }
  25%{ transform:translateX(-5px); }
  50%{ transform:translateX(5px); }
  75%{ transform:translateX(-3px); }
}

/* ------ Level cards ------ */
.grid.levels{ display:grid; gap:16px; grid-template-columns: 1fr; }
.card{
  background: linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  padding:16px; border-radius:14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px var(--outline);
}
.card h3{ margin:6px 0 6px; font-size:28px; }

/* ------ Stage (CRT screen) ------ */
.stage.panel{
  position:relative;
  height:420px; border-radius:16px; overflow:hidden;
  background: radial-gradient(1000px 440px at 50% 10%, #17223a 0%, #0c1220 45%, #0a0f1a 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px var(--outline);
  margin:16px 0 10px;
}

/* static star specks */
.starfield::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,.2) 50%, transparent 51%),
    radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(2px 2px at 30% 70%, rgba(255,255,255,.22) 50%, transparent 51%);
  opacity:.3;
}

/* matrix rain canvas (animated by JS) */
.matrix-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode: screen; /* gives that “phosphor add” look */
  opacity:.70;
  z-index:1; /* under sprites */
}

/* scanlines (subtle) */
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.15) 50%);
  background-size: 100% 2px; opacity:.07;
  z-index:3;
}

/* stage overlay for results */
.stage-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:auto; z-index:4;
}
.overlay-card{
  width:min(680px, 92%); max-height:90%; overflow:auto;
  background: linear-gradient(180deg,#121a2a,#0d1526);
  border-radius:14px; padding:16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px var(--outline);
}
.overlay-card h3{ margin:0 0 8px; font-size:28px; }
.overlay-card .meta{ color:var(--ink-dim); }

/* ---- Boss sprite & name ---- */
.boss-wrap{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
#bossSprite{
  width: 240px; height: 240px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 0 rgba(0,0,0,.45));
  transition: transform .12s ease, opacity .2s ease;
}
.boss-name{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  letter-spacing:2px; font-size:18px; color:var(--ink-dim);
}

/* ---- Boss FX states ---- */
.boss-bounce{ animation: bossBounce .32s cubic-bezier(.2,.8,.2,1); }
@keyframes bossBounce{
  0%{ transform: translate(var(--hitX,0), var(--hitY,0)) rotate(var(--hitR,0)); }
  85%{ transform: translate(0,0) rotate(0); }
  100%{ transform: none; }
}
.boss-lunge{ animation: bossLunge .28s cubic-bezier(.15,.9,.2,1); }
@keyframes bossLunge{
  0%{ transform: scale(1) translateY(0); }
  30%{ transform: scale(1.08) translateY(-6px); }
  100%{ transform: scale(1) translateY(0); }
}
.boss-roll-out{ animation: bossRoll 1.1s ease forwards; }
@keyframes bossRoll{
  0%{ transform: translate(0,0) rotate(0); opacity:1; }
  60%{ transform: translate(90vw,-40vh) rotate(420deg); opacity:.7; }
  100%{ transform: translate(120vw,-70vh) rotate(760deg); opacity:0; }
}

/* player hit FX */
.player-hit::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 220px at 50% 45%, rgba(255,60,60,.22), rgba(255,60,60,0));
  animation: flash .28s ease;
}
@keyframes flash{ 0%{opacity:1;} 100%{opacity:0;} }
.shake{ animation: shakeK .28s linear; }
@keyframes shakeK{
  0%,100%{ transform:none; }
  20%{ transform:translate(-3px, 1px); }
  40%{ transform:translate(3px,-1px); }
  60%{ transform:translate(-2px, 2px); }
  80%{ transform:translate(2px,-2px); }
}

/* ------ HUD ------ */
.hud{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:10px 12px; border-radius:14px;
  box-shadow: inset 0 0 0 1px var(--outline);
  margin: 6px 0 12px;
}
.hearts{ display:flex; gap:10px; align-items:center; }
.hearts svg{ width:22px; height:22px; display:block; }
.heart-fill{ fill:#ff5e7a; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.heart-off{ fill:#2c3348; }

/* Boss HP bar */
.hp-wrap{ flex: 1 1 360px; }
.hp-label{ display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--ink-dim); }
.bar{
  width:100%; height:10px; border-radius:999px; overflow:hidden;
  background: #0e1830; box-shadow: inset 0 0 0 1px var(--outline);
}
.fill{
  height:100%; width:100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 0 8px rgba(255,255,255,.15);
  transition: width .18s ease;
}
.fill.empty{ width:0%; }

/* Hint button state when locked */
button#useHint.hintlock{ opacity:.55; }

/* ------ Question panel ------ */
.panel{
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:16px; border-radius:14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px var(--outline);
}
#qpanel h2{ margin:6px 0 10px; font-size:28px; }
.qcode{
  white-space:pre; background:#0d1629; border-radius:10px; padding:10px; margin:8px 0;
  box-shadow: inset 0 0 0 1px var(--outline);
}

/* Multiple choice */
.options{ display:grid; gap:10px; }
.options button{
  width:100%; text-align:left; padding:12px 14px;
  border-radius:12px; position:relative;
}
.options button.good{ box-shadow: inset 0 0 0 2px rgba(61,227,155,.8); }
.options button.bad{ box-shadow: inset 0 0 0 2px rgba(255,85,119,.8); }
.answer-badge{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:#0e1830; border-radius:999px; padding:2px 8px; font-size:18px;
  box-shadow: inset 0 0 0 1px var(--outline);
}
.answer-badge.good{ color:#3de39b; }
.answer-badge.bad{ color:#ff5577; }

/* Drag & drop */
.drag-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.tiles,.buckets{ display:grid; gap:10px; }
.tile{
  padding:10px 12px; border-radius:12px;
  background: linear-gradient(180deg,#13203a,#0d1a30);
  box-shadow: inset 0 0 0 1px var(--outline);
  cursor:grab; user-select:none;
}
.bucket{
  padding:10px 12px; border-radius:12px;
  background: linear-gradient(180deg,#101a33,#0c1426);
  box-shadow: inset 0 0 0 1px var(--outline);
  min-height:58px; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.bucket .chosen{ color:var(--ink); }
.bucket.correct{ box-shadow: inset 0 0 0 2px rgba(61,227,155,.85); }
.bucket.wrong{ box-shadow: inset 0 0 0 2px rgba(255,85,119,.85); }
.bucket.locked{ opacity:.7; }

/* Callouts */
.callout{
  margin:10px 0; padding:10px 12px; border-radius:12px;
  background:#0e1830; box-shadow: inset 0 0 0 1px var(--outline);
}
.callout .title{ font-weight:700; margin-right:6px; }
.callout--good{ color:#b8ffdd; box-shadow: inset 0 0 0 1px rgba(61,227,155,.6); }
.callout--bad { color:#ffc6d0; box-shadow: inset 0 0 0 1px rgba(255,85,119,.6); }
.callout--hint{ color:#fff3b8; box-shadow: inset 0 0 0 1px rgba(255,223,87,.6); }
.callout-appear{ animation: pop .18s ease; }
@keyframes pop{ from{ transform:scale(.98); opacity:.2; } to{ transform:none; opacity:1; } }

/* Floaty +1 Hint */
.floaty{
  position:absolute; z-index:9; pointer-events:none;
  padding:6px 10px; border-radius:999px; font-size:18px;
  color:#0e162a; background:linear-gradient(180deg,#ffeaa0,#ffd25e);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  animation: floatUp .9s ease forwards;
}
@keyframes floatUp{
  0%{ transform: translateY(0); opacity:1; }
  100%{ transform: translateY(-26px); opacity:0; }
}

/* Toast */
.toast{
  position: fixed; left:50%; bottom:20px; transform: translateX(-50%) translateY(30px);
  background: linear-gradient(180deg,#13203a,#0d1a30);
  color:var(--ink); padding:8px 14px; border-radius:999px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 0 0 1px var(--outline);
  opacity:0; pointer-events:none; transition: transform .2s ease, opacity .2s ease;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* =========================
   Two-column game layout
   ========================= */
@media (min-width: 980px){
  #screen-game{
    display:grid;
    grid-template-columns: 52% 48%;
    grid-template-rows: auto auto;  /* stage, then hud under it (left) */
    gap:12px; align-items:start;
  }
  #stage{ grid-column:1; grid-row:1; margin:0; }
  .hud{ grid-column:1; grid-row:2; margin:0; }
  #qpanel{ grid-column:2; grid-row:1 / span 2; height: calc(420px + 90px); overflow:auto; }
}
@media (min-width:1300px){
  #stage{ height:460px; }
  #qpanel{ height: calc(460px + 100px); }
}
@media (max-width: 979px){
  #screen-game{ display:block; }
  #stage{ margin:16px 0 10px; }
  .hud{ position: sticky; top: 8px; z-index: 4; }
  #qpanel{ height: auto; overflow: visible; }
}

/* =========================
   Intro / dialogue screen
   ========================= */
#screen-intro .intro-card{
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:16px; border-radius:14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px var(--outline);
}
.intro-grid{
  display:grid; grid-template-columns: 220px 1fr; gap:16px; align-items:center;
}
.intro-portrait{
  width:180px; height:180px; object-fit:contain; image-rendering:pixelated;
  display:block; margin:0 auto; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35));
}
.intro-title{ margin:6px 0 6px; font-size:32px; }
.intro-tags{ margin:6px 0; }
.story{ font-size:24px; line-height:1.35; margin:10px 0 6px; }

.intro-bubbles{
  margin-top:14px; padding:16px; border-radius:14px;
  background: linear-gradient(180deg,#10182b,#0d1526);
  box-shadow: inset 0 0 0 1px var(--outline);
  display:grid; gap:12px;
}
.intro-bubbles .bubble{
  padding:12px 14px; border-radius:12px; line-height:1.35;
  background: linear-gradient(180deg,#0f192d,#0c1526);
  box-shadow: inset 0 0 0 1px var(--outline);
}
.intro-bubbles .boss{ border-left:3px solid var(--accent); }
.intro-bubbles .me{   border-left:3px solid var(--gold); }

.intro-actions{
  display:flex; align-items:center; gap:10px; margin-top:12px;
}

/* Mobile intro stack */
@media (max-width:700px){
  .intro-grid{ grid-template-columns: 1fr; }
  .intro-title{ text-align:center; }
  .intro-tags{ justify-content:center; }
  .intro-actions{ position:sticky; bottom:8px; background:transparent; }
}

/* Ensure layers are stacked correctly over the matrix */
.stage.panel { position: relative; }
.boss-wrap   { position:absolute; inset:0; z-index: 2; }
.scanlines   { position:absolute; inset:0; z-index: 3; }
.stage-overlay { z-index: 4; }

/* ===========================================================
   Retro Booster: CRT glow, curvature & vignette
   (adds polish without breaking layout or matrix)
   =========================================================== */
.stage.panel::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* slight convex curvature + soft vignette */
  background: radial-gradient(120% 90% at 50% 50%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.20) 75%,
    rgba(0,0,0,.38) 100%);
  mix-blend-mode: multiply;
}

.matrix-canvas {
  filter: brightness(1.1)
          contrast(1.05)
          saturate(1.05)
          drop-shadow(0 0 8px rgba(140,255,170,.25));
}

#bossSprite {
  /* subtle RGB fringe + base drop shadow */
  filter:
    drop-shadow(1px 0 0 rgba(0,255,180,.12))
    drop-shadow(-1px 0 0 rgba(0,120,255,.12))
    drop-shadow(0 8px 0 rgba(0,0,0,.45));
}

.stage.panel {
  perspective: 800px;
  transform: perspective(800px) rotateX(0.6deg);
  overflow:hidden;
}