* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #0a0a0a;
  min-height: 100vh;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background: radial-gradient(ellipse at center, #0d1a0d 0%, #050505 70%);
}

#tq {
  background: #000;
  font-family: 'Share Tech Mono', monospace;
  min-height: 640px;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px #39ff6644,
    0 0 40px #39ff6622,
    0 0 80px #39ff6611;
  /* NO 3D transform — it breaks click detection in some browsers */
}

/* ── CRT Effects — DISABLED to fix click/visibility issues ── */
#crt { display: none !important; }
#scan { display: none !important; }

#mxbg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none !important; z-index: 1; opacity: 0.12; }
#fwc  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none !important; z-index: 2; }

/* ── Screen Flash ── */
#screen-flash {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none !important; z-index: 55; opacity: 0;
  transition: opacity 0.08s ease-out;
}
#screen-flash.flash-green { background: #39ff66; opacity: 0.12; pointer-events: none !important; }
#screen-flash.flash-red   { background: #ff3333; opacity: 0.15; pointer-events: none !important; }

/* ── Screen Transition ── */
#screen-transition {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none !important; z-index: 65; opacity: 0;
  background: #000;
  transition: opacity 0.2s ease;
}
#screen-transition.active { opacity: 1; pointer-events: none !important; }

/* ── HUD ── */
#hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 16px; border-bottom: 1px solid #39ff6633;
  font-size: 12px; z-index: 52; background: #000a00; position: relative;
}
#h-level  { color: #39ff66; font-weight: bold; text-shadow: 0 0 6px #39ff66; }
#hud-mid  { display: flex; align-items: center; gap: 8px; }
#h-lives  { color: #ff5555; font-size: 13px; letter-spacing: 1px; text-shadow: 0 0 6px #ff5555; }
#timer-wrap { display: flex; align-items: center; gap: 4px; }
#tbar-bg  { width: 60px; height: 4px; background: #39ff6618; border-radius: 2px; overflow: hidden; }
#tbar     { height: 4px; background: #39ff66; border-radius: 2px; width: 100%; transition: width 0.3s ease; }
#ttxt     { color: #39ff66; font-size: 11px; min-width: 18px; text-shadow: 0 0 5px #39ff66; }
#h-combo  { font-size: 11px; font-weight: bold; min-width: 60px; text-align: center; display: none; }
#h-score  { color: #39ff66; text-shadow: 0 0 6px #39ff66; transition: transform 0.15s ease; }
#h-score.pop { transform: scale(1.3); }

/* ── Power-up Bar ── */
#powerup-bar {
  display: flex; justify-content: center; gap: 6px;
  padding: 4px 16px; border-bottom: 1px solid #39ff6622;
  background: #000800; z-index: 52; position: relative;
}
.pu-slot {
  display: flex; align-items: center; gap: 3px;
  padding: 2px 8px; border: 1px solid #39ff6622; border-radius: 4px;
  cursor: pointer; transition: all 0.15s ease; font-size: 12px;
  user-select: none; opacity: 0.4;
}
.pu-slot.available { opacity: 1; border-color: #39ff6666; }
.pu-slot.available:hover { background: #39ff6615; border-color: #39ff66; transform: scale(1.05); }
.pu-slot.active { border-color: #ffe94d; background: #ffe94d15; animation: pu-glow 1s ease-in-out infinite; }
.pu-icon { font-size: 14px; }
.pu-count { color: #39ff66; font-size: 11px; }
#pu-freeze .pu-icon { color: #5af0ff; }
#pu-shield .pu-icon { color: #ffe94d; }
#pu-double .pu-icon { color: #ff6ecf; }
#pu-reveal .pu-icon { color: #ffaa33; }
@keyframes pu-glow {
  0%, 100% { box-shadow: 0 0 4px currentColor; }
  50% { box-shadow: 0 0 12px currentColor; }
}

/* ── Screens ── */
.screen {
  display: flex; flex: 1; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 20px; text-align: center;
  position: relative; z-index: 52; min-height: 540px;
}

.game-title {
  font-size: 28px; color: #39ff66; letter-spacing: 3px;
  text-shadow: 0 0 12px #39ff6688, 0 0 30px #39ff6444, 0 0 60px #39ff6222;
  margin-bottom: 4px; animation: title-glow 3s ease-in-out infinite;
}
@keyframes title-glow {
  0%, 100% { text-shadow: 0 0 12px #39ff6688, 0 0 30px #39ff6444; filter: brightness(1); }
  50% { text-shadow: 0 0 20px #39ff66aa, 0 0 40px #39ff6666, 0 0 80px #39ff6433; filter: brightness(1.1); }
}
.game-subtitle { font-size: 11px; color: #39ff6666; letter-spacing: 3px; margin-bottom: 4px; }
.game-version  { font-size: 10px; color: #39ff6633; letter-spacing: 2px; margin-bottom: 14px; }
#save-info     { font-size: 13px; color: #e8ffe8; line-height: 2; margin-bottom: 12px; white-space: pre-line; }
.info-text     { font-size: 11px; color: #39ff6555; margin-bottom: 16px; line-height: 2; }
.btn-row       { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.start-footer  { margin-top: 16px; }
.key-hint      { font-size: 10px; color: #39ff6633; letter-spacing: 1px; }

/* ── Buttons ── */
.btn {
  background: #111 !important; font-family: 'Share Tech Mono', monospace;
  font-size: 15px; cursor: pointer; border-radius: 6px; padding: 12px 30px;
  transition: all 0.15s ease; position: relative; z-index: 100;
}
.btn:active { transform: scale(0.96); }
.btn-primary   { border: 3px solid #39ff66; color: #39ff66 !important; text-shadow: 0 0 10px #39ff66; box-shadow: 0 0 16px #39ff6666; font-size: 16px; }
.btn-primary:hover { background: #39ff6630 !important; box-shadow: 0 0 24px #39ff6688; }
.btn-secondary { border: 3px solid #39ff66; color: #39ff66 !important; text-shadow: 0 0 8px #39ff66; box-shadow: 0 0 12px #39ff6644; }
.btn-secondary:hover { background: #39ff6628 !important; box-shadow: 0 0 20px #39ff6666; }
.btn-danger    { border: 3px solid #ff5555; color: #ff5555 !important; text-shadow: 0 0 8px #ff5555; box-shadow: 0 0 12px #ff555544; }
.btn-danger:hover { background: #ff555520 !important; box-shadow: 0 0 20px #ff555566; }
.btn-dim       { border: 2px solid #39ff66; color: #39ff66 !important; background: #111 !important; font-size: 12px; padding: 6px 16px; box-shadow: 0 0 8px #39ff6633; }
.btn-dim:hover { background: #39ff6620 !important; }
.btn-skip      { border: 2px solid #ff5555; color: #ff5555 !important; background: #111 !important; font-size: 12px; padding: 8px 18px; margin-top: 10px; box-shadow: 0 0 8px #ff555533; }
.btn-skip:hover { background: #ff555520 !important; }

/* ── Question Area ── */
#m-badge { font-size: 11px; letter-spacing: 4px; margin-bottom: 5px; }
#m-title {
  font-size: 24px; margin-bottom: 4px; line-height: 1.3;
  transition: color 0.3s, text-shadow 0.3s;
}
#m-sub   { font-size: 11px; color: #39ff6677; margin-bottom: 12px; letter-spacing: 1px; }
#m-q     { font-size: 15px; color: #e8ffe8; margin-bottom: 14px; max-width: 540px; line-height: 1.9; font-weight: bold; min-height: 26px; }
#m-kbd   { font-size: 11px; color: #39ff6555; margin-bottom: 6px; letter-spacing: 1px; }
#m-choices { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 520px; }

.choice-btn {
  display: block; width: 100%;
  background: #050f05 !important; border: 2px solid #39ff6688;
  color: #ffffff !important; font-family: 'Share Tech Mono', monospace;
  font-size: 14px; padding: 12px 16px; text-align: left;
  cursor: pointer; border-radius: 6px; line-height: 1.5;
  transition: all 0.12s ease; position: relative;
  box-shadow: 0 0 6px #39ff6622;
}
.choice-btn:hover {
  background: #39ff6620 !important; border-color: #39ff66; color: #fff !important;
  transform: translateX(4px);
  box-shadow: -3px 0 0 #39ff66, 0 0 12px #39ff6644;
}
.choice-btn.correct {
  background: #39ff6222 !important; border-color: #39ff66; color: #fff !important;
  box-shadow: 0 0 12px #39ff6633;
  animation: correct-pulse 0.4s ease;
}
.choice-btn.wrong {
  background: #ff333318 !important; border-color: #ff5555; color: #ff8888 !important;
  animation: wrong-shake 0.3s ease;
}
.choice-btn.reveal {
  background: #39ff6215 !important; border-color: #39ff6677; color: #39ff66 !important;
}
@keyframes correct-pulse {
  0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); }
}
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ── Command Input ── */
#m-cmd, #m-vi { display: none; flex-direction: column; align-items: center; width: 100%; max-width: 520px; gap: 9px; }
#m-cq, #m-vq  { color: #e8ffe8; font-size: 15px; line-height: 1.8; font-weight: bold; }
#m-ch, #m-vh  { color: #39ff6544; font-size: 12px; }

.input-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid #39ff6444; border-radius: 4px; padding: 8px 12px; background: #050f05;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-row:focus-within { border-color: #39ff66; box-shadow: 0 0 8px #39ff6633; }
.input-row input, .vi-body input {
  background: transparent; border: none; outline: none;
  color: #e8ffe8; font-family: 'Share Tech Mono', monospace;
  font-size: 14px; flex: 1; caret-color: #39ff66; width: 100%;
}
/* Submit buttons for text inputs */
.btn-submit {
  background: transparent; border: 1px solid #39ff6644; border-radius: 4px;
  color: #39ff66; font-size: 14px; padding: 4px 10px; cursor: pointer;
  font-family: 'Share Tech Mono', monospace; transition: all 0.15s ease;
  flex-shrink: 0;
}
.btn-submit:hover { background: #39ff6618; border-color: #39ff66; box-shadow: 0 0 8px #39ff6633; }
.btn-submit-boss { border-color: #ff555544; color: #ff5555; }
.btn-submit-boss:hover { background: #ff555518; border-color: #ff5555; box-shadow: 0 0 8px #ff555533; }

.ps      { color: #39ff6677; font-size: 13px; }
.vi-box  { width: 100%; border: 1px solid #39ff6444; border-radius: 4px; overflow: hidden; }
.vi-hdr  { background: #050f05; padding: 4px 12px; font-size: 11px; color: #39ff6677; border-bottom: 1px solid #39ff6622; display: flex; justify-content: space-between; }
#m-vm    { color: #39ff66; }
.vi-body { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #050f05; }
#m-fb    { margin-top: 12px; font-size: 13px; max-width: 520px; line-height: 1.8; white-space: pre-line; min-height: 18px; color: #e8ffe8; transition: color 0.2s; }

/* ── Boss Screen ── */
#b-name    { font-size: 14px; letter-spacing: 2px; margin-bottom: 4px; }
#b-art     { font-size: 10px; line-height: 1.3; margin-bottom: 4px; white-space: pre; font-family: 'Share Tech Mono', monospace; transition: all 0.3s; }
#b-taunt   { font-size: 11px; color: #ff888888; margin-bottom: 6px; font-style: italic; min-height: 16px; }
.hp-label  { font-size: 10px; color: #ff555599; letter-spacing: 1px; margin-bottom: 2px; }
#b-hp-wrap { width: 280px; height: 14px; background: #1a0000; border: 1px solid #ff5555; border-radius: 3px; margin-bottom: 6px; overflow: hidden; position: relative; }
#b-hp      { height: 100%; background: linear-gradient(90deg, #ff3333, #ff5555); transition: width 0.3s; width: 100%; position: relative; }
#b-hp::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  animation: hp-shine 2s linear infinite;
}
@keyframes hp-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
#b-timer   { font-size: 12px; color: #ffaa33; margin-bottom: 10px; text-shadow: 0 0 5px #ffaa33; }
#b-seq     { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; max-width: 480px; }
.boss-hint { font-size: 11px; color: #ff555566; margin-bottom: 6px; }
.boss-input-row {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px;
  border: 1px solid #ff555544; border-radius: 4px; padding: 8px 12px; background: #0a0000;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.boss-input-row:focus-within { border-color: #ff5555; box-shadow: 0 0 8px #ff555533; }
.boss-input-row input { background: transparent; border: none; outline: none; color: #ff8888; font-family: 'Share Tech Mono', monospace; font-size: 14px; flex: 1; caret-color: #ff5555; width: 100%; }
.boss-ps   { color: #ff555577; font-size: 13px; }
#b-msg     { font-size: 13px; color: #ff8888; min-height: 18px; margin-top: 6px; text-align: center; }

/* ── Pong ── */
.bonus-title { font-size: 20px; color: #39ff66; letter-spacing: 2px; text-shadow: 0 0 10px #39ff66; }
.bonus-sub   { font-size: 13px; color: #ffe94d; letter-spacing: 1px; margin-bottom: 4px; }
.bonus-desc  { font-size: 12px; color: #e8ffe8; line-height: 2; max-width: 360px; margin-top: 8px; }
#pong-hud    { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 520px; padding: 4px 8px; font-size: 12px; margin-bottom: 4px; }
.pong-title  { color: #39ff66; font-size: 13px; letter-spacing: 2px; }
#p-caught    { color: #39ff66; }
#p-missed    { color: #ff5555; }
#p-canvas    { border: 1px solid #39ff6633; border-radius: 4px; cursor: none; touch-action: none; display: block; }
#p-msg       { font-size: 13px; color: #39ff66; min-height: 18px; margin-top: 6px; text-align: center; letter-spacing: 1px; }

/* ── Game Over ── */
.go-title {
  font-size: 36px; color: #ff5555; letter-spacing: 3px;
  text-shadow: 0 0 10px #ff5555, 0 0 30px #ff555566;
  animation: go-flicker 1.5s ease-in-out infinite;
}
@keyframes go-flicker {
  0%, 100% { opacity: 1; } 50% { opacity: 0.85; }
  52% { opacity: 1; } 54% { opacity: 0.9; }
}
#go-stats { color: #e8ffe8; font-size: 13px; line-height: 2.4; white-space: pre-line; }
#go-achievements { margin-top: 10px; font-size: 11px; color: #ffe94d; line-height: 2; }

/* ── Power-up Reward ── */
#pu-reward {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 68; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(2px);
}
.pu-reward-inner {
  text-align: center; animation: pu-appear 0.4s ease;
}
@keyframes pu-appear {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.pu-reward-title { font-size: 14px; letter-spacing: 3px; color: #ffe94d; margin-bottom: 8px; text-shadow: 0 0 10px #ffe94d; }
#pu-reward-icon  { font-size: 40px; margin-bottom: 6px; }
#pu-reward-name  { font-size: 18px; color: #fff; letter-spacing: 1px; margin-bottom: 4px; }
#pu-reward-desc  { font-size: 11px; color: #ffffff88; }

/* ── Rank Up ── */
#rankup {
  display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 70; flex-direction: column; align-items: center; justify-content: center;
  background: #000; text-align: center;
}
#ru-r { font-size: 48px; font-weight: bold; letter-spacing: 4px; margin-bottom: 10px; }
#ru-s { font-size: 14px; letter-spacing: 3px; opacity: 0.8; }

/* ── Combo Popup ── */
#combo-pop {
  display: none; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
  z-index: 60; text-align: center; pointer-events: none; width: 95%;
}
#cp-txt { font-size: 40px; font-weight: bold; letter-spacing: 3px; line-height: 1.2; }
#cp-sub { font-size: 13px; letter-spacing: 2px; margin-top: 4px; }

/* ── Learn More ── */
#m-learn {
  display: inline-block; margin-top: 10px; font-size: 12px; color: #5af0ff;
  text-decoration: none; letter-spacing: 1px; cursor: pointer;
  text-shadow: 0 0 6px #5af0ff66; transition: all 0.15s ease;
  font-family: 'Share Tech Mono', monospace;
}
#m-learn:hover { color: #fff; text-shadow: 0 0 12px #5af0ff; }

#learn-modal {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.92); backdrop-filter: blur(4px);
  animation: learn-fade-in 0.2s ease;
}
@keyframes learn-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

#learn-inner {
  background: #0a1a0a; border: 2px solid #5af0ff88; border-radius: 10px;
  padding: 24px 28px; max-width: 520px; width: 90%; max-height: 80vh;
  overflow-y: auto; text-align: left; position: relative;
  box-shadow: 0 0 30px #5af0ff22, inset 0 0 20px #5af0ff08;
  animation: learn-pop 0.3s ease;
}
@keyframes learn-pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

#learn-title {
  font-size: 18px; color: #5af0ff; font-weight: bold; letter-spacing: 1px;
  text-shadow: 0 0 10px #5af0ff66; margin-bottom: 14px; text-align: center;
  font-family: 'Share Tech Mono', monospace; border-bottom: 1px solid #5af0ff33;
  padding-bottom: 10px;
}

#learn-body {
  font-size: 13px; color: #d0ffd0; line-height: 1.8;
  font-family: 'Share Tech Mono', monospace; white-space: pre-wrap;
}
#learn-body .learn-section {
  margin-bottom: 14px;
}
#learn-body .learn-label {
  color: #5af0ff; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 4px; text-shadow: 0 0 6px #5af0ff44;
}
#learn-body .learn-text {
  color: #e8ffe8; font-size: 13px; line-height: 1.7;
}
#learn-body .learn-code {
  display: inline-block; background: #001a00; border: 1px solid #39ff6633;
  border-radius: 4px; padding: 2px 8px; margin: 2px 0; color: #39ff66;
  font-size: 12px; text-shadow: 0 0 4px #39ff6644;
}
#learn-body .learn-tip {
  color: #ffe94d; font-size: 12px; margin-top: 6px;
  padding: 8px 12px; border-left: 3px solid #ffe94d66; background: #1a1a0011;
}

#learn-close {
  display: block; margin: 18px auto 0; font-size: 13px; padding: 8px 28px;
}

/* ── Achievement Toast ── */
#achievement-toast {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  z-index: 72; display: flex; align-items: center; gap: 8px;
  background: #1a1a00; border: 1px solid #ffe94d66; border-radius: 6px;
  padding: 8px 16px; transition: top 0.4s ease;
  box-shadow: 0 0 16px #ffe94d33;
}
#achievement-toast.show { top: 50px; }
#ach-icon { font-size: 20px; }
#ach-text { color: #ffe94d; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }

/* ── Animations ── */
@keyframes hb     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes cur    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes glitch {
  0%,92%,100%{transform:none;filter:none}
  93%{transform:translateX(4px) skewX(1deg);filter:hue-rotate(90deg)}
  95%{transform:translateX(-3px);filter:brightness(1.5)}
  97%{transform:translateX(2px) skewX(-1deg);filter:hue-rotate(-90deg)}
}
@keyframes shk {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}
@keyframes flicker {
  0%{opacity:0.97} 5%{opacity:1} 10%{opacity:0.98} 15%{opacity:1}
  50%{opacity:0.99} 55%{opacity:0.97} 70%{opacity:1} 100%{opacity:0.98}
}
.pulse  { animation: hb 0.8s ease-in-out infinite; }
.glitch { animation: glitch 0.4s ease forwards; }
.shake  { animation: shk 0.3s ease; }

.bcmd-done    { font-size:12px;padding:4px 8px;border-radius:4px;border:1px solid #39ff66;color:#39ff66;background:#39ff6611;font-family:'Share Tech Mono',monospace;margin:2px;display:inline-block;transition:all 0.2s; }
.bcmd-current { font-size:12px;padding:4px 8px;border-radius:4px;border:1px solid #ffaa33;color:#ffaa33;background:#ffaa3311;text-shadow:0 0 5px #ffaa33;animation:hb 0.6s ease-in-out infinite;font-family:'Share Tech Mono',monospace;margin:2px;display:inline-block; }
.bcmd-pending { font-size:12px;padding:4px 8px;border-radius:4px;border:1px solid #ff555533;color:#ff555566;background:transparent;font-family:'Share Tech Mono',monospace;margin:2px;display:inline-block; }

/* ── Timer freeze effect ── */
#tbar.frozen { background: #5af0ff !important; box-shadow: 0 0 8px #5af0ff; }
#ttxt.frozen { color: #5af0ff !important; }

/* ── Shield active glow ── */
.shield-active {
  box-shadow: 0 0 0 2px #ffe94d44, 0 0 16px #ffe94d22 !important;
}

/* ── Double XP indicator ── */
#h-score.double-xp { color: #ff6ecf !important; text-shadow: 0 0 8px #ff6ecf !important; }

/* ── Topic Picker ── */
.pick-title { margin-bottom: 2px; }
.pick-screen { justify-content: flex-start; padding-top: 14px; overflow-y: auto; z-index: 52; }

.pick-section-label {
  font-size: 10px; letter-spacing: 3px; color: #39ff6688;
  margin-top: 10px; margin-bottom: 2px; text-align: center;
  font-weight: bold;
}
.pick-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; max-width: 540px; margin-top: 4px; position: relative; z-index: 52; }
.pick-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; width: 100%; max-width: 540px; margin-top: 4px; position: relative; z-index: 52; }

.pick-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 14px 8px; background: #0a1a0a !important;
  border: 2px solid; border-radius: 8px; cursor: pointer;
  transition: all 0.15s ease; font-family: 'Share Tech Mono', monospace;
  text-align: center; position: relative; overflow: hidden; z-index: 52;
}
.pick-btn:hover { transform: translateY(-2px); filter: brightness(1.3); }
.pick-btn:active { transform: scale(0.97); }
.pick-icon { font-size: 24px; line-height: 1; color: #ffffff; text-shadow: 0 0 14px currentColor; }
.pick-name { font-size: 14px; font-weight: bold; letter-spacing: 0.5px; color: #ffffff; text-shadow: 0 0 8px currentColor; }
.pick-count { font-size: 10px; letter-spacing: 0.5px; margin-top: 1px; color: #ffffffaa; }

/* Category colors — BRIGHT, full opacity borders + strong glow */
.cat-terminal { border-color: #39ff66; box-shadow: 0 0 12px #39ff6666, inset 0 0 15px #39ff6622; }
.cat-terminal:hover { background: #39ff6622 !important; box-shadow: 0 0 25px #39ff6688; }
.cat-terminal .pick-icon { color: #39ff66; }
.cat-terminal .pick-name { color: #39ff66; }
.cat-terminal .pick-count { color: #39ff66; }

.cat-git { border-color: #f05533; box-shadow: 0 0 12px #f0553366, inset 0 0 15px #f0553322; }
.cat-git:hover { background: #f0553322 !important; box-shadow: 0 0 25px #f0553388; }
.cat-git .pick-icon { color: #f05533; }
.cat-git .pick-name { color: #ff7755; }
.cat-git .pick-count { color: #ff7755; }

.cat-vi { border-color: #cc44ff; box-shadow: 0 0 12px #cc44ff66, inset 0 0 15px #cc44ff22; }
.cat-vi:hover { background: #cc44ff22 !important; box-shadow: 0 0 25px #cc44ff88; }
.cat-vi .pick-icon { color: #cc44ff; }
.cat-vi .pick-name { color: #dd77ff; }
.cat-vi .pick-count { color: #dd77ff; }

.cat-frontend { border-color: #ff9955; box-shadow: 0 0 12px #ff995566, inset 0 0 15px #ff995522; }
.cat-frontend:hover { background: #ff995522 !important; box-shadow: 0 0 25px #ff995588; }
.cat-frontend .pick-icon { color: #ff9955; }
.cat-frontend .pick-name { color: #ffbb77; }
.cat-frontend .pick-count { color: #ffbb77; }

.cat-typescript { border-color: #44a0ff; box-shadow: 0 0 12px #44a0ff66, inset 0 0 15px #44a0ff22; }
.cat-typescript:hover { background: #44a0ff22 !important; box-shadow: 0 0 25px #44a0ff88; }
.cat-typescript .pick-icon { color: #44a0ff; }
.cat-typescript .pick-name { color: #77bbff; }
.cat-typescript .pick-count { color: #77bbff; }

.cat-react { border-color: #66ddff; box-shadow: 0 0 12px #66ddff66, inset 0 0 15px #66ddff22; }
.cat-react:hover { background: #66ddff22 !important; box-shadow: 0 0 25px #66ddff88; }
.cat-react .pick-icon { color: #66ddff; }
.cat-react .pick-name { color: #88eeff; }
.cat-react .pick-count { color: #88eeff; }

.cat-vue { border-color: #55dd99; box-shadow: 0 0 12px #55dd9966, inset 0 0 15px #55dd9922; }
.cat-vue:hover { background: #55dd9922 !important; box-shadow: 0 0 25px #55dd9988; }
.cat-vue .pick-icon { color: #55dd99; }
.cat-vue .pick-name { color: #77eebb; }
.cat-vue .pick-count { color: #77eebb; }

.cat-nodejs { border-color: #77cc66; box-shadow: 0 0 12px #77cc6666, inset 0 0 15px #77cc6622; }
.cat-nodejs:hover { background: #77cc6622 !important; box-shadow: 0 0 25px #77cc6688; }
.cat-nodejs .pick-icon { color: #77cc66; }
.cat-nodejs .pick-name { color: #99ee88; }
.cat-nodejs .pick-count { color: #99ee88; }

.cat-express { border-color: #aaddaa; box-shadow: 0 0 12px #aaddaa66, inset 0 0 15px #aaddaa22; }
.cat-express:hover { background: #aaddaa22 !important; box-shadow: 0 0 25px #aaddaa88; }
.cat-express .pick-icon { color: #aaddaa; }
.cat-express .pick-name { color: #ccffcc; }
.cat-express .pick-count { color: #ccffcc; }

.cat-python { border-color: #ffdd44; box-shadow: 0 0 12px #ffdd4466, inset 0 0 15px #ffdd4422; }
.cat-python:hover { background: #ffdd4422 !important; box-shadow: 0 0 25px #ffdd4488; }
.cat-python .pick-icon { color: #ffdd44; }
.cat-python .pick-name { color: #ffee77; }
.cat-python .pick-count { color: #ffee77; }

.cat-sql { border-color: #eebb33; box-shadow: 0 0 12px #eebb3366, inset 0 0 15px #eebb3322; }
.cat-sql:hover { background: #eebb3322 !important; box-shadow: 0 0 25px #eebb3388; }
.cat-sql .pick-icon { color: #eebb33; }
.cat-sql .pick-name { color: #ffdd66; }
.cat-sql .pick-count { color: #ffdd66; }

.cat-java { border-color: #ff9933; box-shadow: 0 0 12px #ff993366, inset 0 0 15px #ff993322; }
.cat-java:hover { background: #ff993322 !important; box-shadow: 0 0 25px #ff993388; }
.cat-java .pick-icon { color: #ff9933; }
.cat-java .pick-name { color: #ffbb66; }
.cat-java .pick-count { color: #ffbb66; }

.cat-go_lang { border-color: #44ccdd; box-shadow: 0 0 12px #44ccdd66, inset 0 0 15px #44ccdd22; }
.cat-go_lang:hover { background: #44ccdd22 !important; box-shadow: 0 0 25px #44ccdd88; }
.cat-go_lang .pick-icon { color: #44ccdd; }
.cat-go_lang .pick-name { color: #77eeff; }
.cat-go_lang .pick-count { color: #77eeff; }

.cat-rust { border-color: #ff6644; box-shadow: 0 0 12px #ff664466, inset 0 0 15px #ff664422; }
.cat-rust:hover { background: #ff664422 !important; box-shadow: 0 0 25px #ff664488; }
.cat-rust .pick-icon { color: #ff6644; }
.cat-rust .pick-name { color: #ff8866; }
.cat-rust .pick-count { color: #ff8866; }

.cat-c_cpp { border-color: #6699dd; box-shadow: 0 0 12px #6699dd66, inset 0 0 15px #6699dd22; }
.cat-c_cpp:hover { background: #6699dd22 !important; box-shadow: 0 0 25px #6699dd88; }
.cat-c_cpp .pick-icon { color: #6699dd; }
.cat-c_cpp .pick-name { color: #88bbff; }
.cat-c_cpp .pick-count { color: #88bbff; }

.cat-ruby { border-color: #ff4444; box-shadow: 0 0 12px #ff444466, inset 0 0 15px #ff444422; }
.cat-ruby:hover { background: #ff444422 !important; box-shadow: 0 0 25px #ff444488; }
.cat-ruby .pick-icon { color: #ff4444; }
.cat-ruby .pick-name { color: #ff6666; }
.cat-ruby .pick-count { color: #ff6666; }

.cat-php { border-color: #9999cc; box-shadow: 0 0 12px #9999cc66, inset 0 0 15px #9999cc22; }
.cat-php:hover { background: #9999cc22 !important; box-shadow: 0 0 25px #9999cc88; }
.cat-php .pick-icon { color: #bbbbee; }
.cat-php .pick-name { color: #bbbbee; }
.cat-php .pick-count { color: #bbbbee; }

.cat-swift { border-color: #ff7744; box-shadow: 0 0 12px #ff774466, inset 0 0 15px #ff774422; }
.cat-swift:hover { background: #ff774422 !important; box-shadow: 0 0 25px #ff774488; }
.cat-swift .pick-icon { color: #ff7744; }
.cat-swift .pick-name { color: #ff9966; }
.cat-swift .pick-count { color: #ff9966; }

.cat-kotlin { border-color: #9966ff; box-shadow: 0 0 12px #9966ff66, inset 0 0 15px #9966ff22; }
.cat-kotlin:hover { background: #9966ff22 !important; box-shadow: 0 0 25px #9966ff88; }
.cat-kotlin .pick-icon { color: #bb88ff; }
.cat-kotlin .pick-name { color: #bb88ff; }
.cat-kotlin .pick-count { color: #bb88ff; }

.cat-csharp { border-color: #bb66dd; box-shadow: 0 0 12px #bb66dd66, inset 0 0 15px #bb66dd22; }
.cat-csharp:hover { background: #bb66dd22 !important; box-shadow: 0 0 25px #bb66dd88; }
.cat-csharp .pick-icon { color: #dd88ff; }
.cat-csharp .pick-name { color: #dd88ff; }
.cat-csharp .pick-count { color: #dd88ff; }

.cat-dart { border-color: #44aadd; box-shadow: 0 0 12px #44aadd66, inset 0 0 15px #44aadd22; }
.cat-dart:hover { background: #44aadd22 !important; box-shadow: 0 0 25px #44aadd88; }
.cat-dart .pick-icon { color: #66ccff; }
.cat-dart .pick-name { color: #66ccff; }
.cat-dart .pick-count { color: #66ccff; }

/* DevOps categories */
.cat-devops { border-color: #ff6633; box-shadow: 0 0 12px #ff663366, inset 0 0 15px #ff663322; }
.cat-devops:hover { background: #ff663322 !important; box-shadow: 0 0 25px #ff663388; }
.cat-devops .pick-icon { color: #ff6633; }
.cat-devops .pick-name { color: #ff8855; }
.cat-devops .pick-count { color: #ff8855; }

.cat-terraform { border-color: #9b62ff; box-shadow: 0 0 12px #9b62ff66, inset 0 0 15px #9b62ff22; }
.cat-terraform:hover { background: #9b62ff22 !important; box-shadow: 0 0 25px #9b62ff88; }
.cat-terraform .pick-icon { color: #bb88ff; }
.cat-terraform .pick-name { color: #bb88ff; }
.cat-terraform .pick-count { color: #bb88ff; }

.cat-kubernetes_mode { border-color: #5599ff; box-shadow: 0 0 12px #5599ff66, inset 0 0 15px #5599ff22; }
.cat-kubernetes_mode:hover { background: #5599ff22 !important; box-shadow: 0 0 25px #5599ff88; }
.cat-kubernetes_mode .pick-icon { color: #77bbff; }
.cat-kubernetes_mode .pick-name { color: #77bbff; }
.cat-kubernetes_mode .pick-count { color: #77bbff; }

.cat-angular { border-color: #dd0031; box-shadow: 0 0 12px #dd003166, inset 0 0 15px #dd003122; }
.cat-angular:hover { background: #dd003122 !important; box-shadow: 0 0 25px #dd003188; }
.cat-angular .pick-icon { color: #ff3355; }
.cat-angular .pick-name { color: #ff3355; }
.cat-angular .pick-count { color: #ff3355; }

.cat-django { border-color: #44b78b; box-shadow: 0 0 12px #44b78b66, inset 0 0 15px #44b78b22; }
.cat-django:hover { background: #44b78b22 !important; box-shadow: 0 0 25px #44b78b88; }
.cat-django .pick-icon { color: #66ddaa; }
.cat-django .pick-name { color: #66ddaa; }
.cat-django .pick-count { color: #66ddaa; }

.cat-scala { border-color: #dc322f; box-shadow: 0 0 12px #dc322f66, inset 0 0 15px #dc322f22; }
.cat-scala:hover { background: #dc322f22 !important; box-shadow: 0 0 25px #dc322f88; }
.cat-scala .pick-icon { color: #ff5555; }
.cat-scala .pick-name { color: #ff5555; }
.cat-scala .pick-count { color: #ff5555; }

.cat-r_lang { border-color: #276dc3; box-shadow: 0 0 12px #276dc366, inset 0 0 15px #276dc322; }
.cat-r_lang:hover { background: #276dc322 !important; box-shadow: 0 0 25px #276dc388; }
.cat-r_lang .pick-icon { color: #4499ee; }
.cat-r_lang .pick-name { color: #4499ee; }
.cat-r_lang .pick-count { color: #4499ee; }

.cat-perl { border-color: #39457e; box-shadow: 0 0 12px #39457e66, inset 0 0 15px #39457e22; }
.cat-perl:hover { background: #39457e22 !important; box-shadow: 0 0 25px #39457e88; }
.cat-perl .pick-icon { color: #6677bb; }
.cat-perl .pick-name { color: #6677bb; }
.cat-perl .pick-count { color: #6677bb; }

.cat-ai_ml { border-color: #ff6ef0; box-shadow: 0 0 12px #ff6ef066, inset 0 0 15px #ff6ef022; }
.cat-ai_ml:hover { background: #ff6ef022 !important; box-shadow: 0 0 25px #ff6ef088; }
.cat-ai_ml .pick-icon { color: #ff99f5; }
.cat-ai_ml .pick-name { color: #ff99f5; }
.cat-ai_ml .pick-count { color: #ff99f5; }

.cat-chatgpt { border-color: #10a37f; box-shadow: 0 0 12px #10a37f66, inset 0 0 15px #10a37f22; }
.cat-chatgpt:hover { background: #10a37f22 !important; box-shadow: 0 0 25px #10a37f88; }
.cat-chatgpt .pick-icon { color: #33ccaa; }
.cat-chatgpt .pick-name { color: #33ccaa; }
.cat-chatgpt .pick-count { color: #33ccaa; }

.cat-claude_ai { border-color: #d4a27f; box-shadow: 0 0 12px #d4a27f66, inset 0 0 15px #d4a27f22; }
.cat-claude_ai:hover { background: #d4a27f22 !important; box-shadow: 0 0 25px #d4a27f88; }
.cat-claude_ai .pick-icon { color: #eebb99; }
.cat-claude_ai .pick-name { color: #eebb99; }
.cat-claude_ai .pick-count { color: #eebb99; }

.cat-openai { border-color: #7755cc; box-shadow: 0 0 12px #7755cc66, inset 0 0 15px #7755cc22; }
.cat-openai:hover { background: #7755cc22 !important; box-shadow: 0 0 25px #7755cc88; }
.cat-openai .pick-icon { color: #9977ee; }
.cat-openai .pick-name { color: #9977ee; }
.cat-openai .pick-count { color: #9977ee; }

/* ── Progress Bar ── */
#progress-bar {
  display: none;
  position: relative;
  height: 18px;
  background: #080f08;
  border-bottom: 1px solid #39ff6622;
  z-index: 52;
  overflow: hidden;
}
#prog-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #39ff6622, #39ff6644);
  transition: width 0.5s ease;
  border-right: 2px solid #39ff6666;
}
#prog-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10px;
  letter-spacing: 1px;
  color: #39ff6688;
  text-shadow: 0 0 4px #39ff6633;
}

/* ── Responsive ── */
@media (max-width: 500px) {
  body { padding: 0; }
  #tq  { border-radius: 0; transform: none; min-height: 100vh; }
  .game-title { font-size: 20px; }
  #m-title    { font-size: 19px; }
  #powerup-bar { gap: 4px; padding: 3px 8px; }
  .pu-slot { padding: 2px 5px; font-size: 11px; }
  .pick-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .pick-grid-4 { grid-template-columns: 1fr 1fr 1fr; }
  .pick-btn { padding: 8px 4px; }
  .pick-icon { font-size: 16px; }
  .pick-name { font-size: 10px; }
}