/* ═══════════════════════════════════════════════════
   COMMI #6 — Platformer Speedrun (web.php only)
   ═══════════════════════════════════════════════════ */

/* ── Desktop only ── */
@media (max-width: 1023px) {
  #wb6Boss,
  .wb6-overlay,
  #wb6HUD,
  #wb6Canvas {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════
   BOSS TRIGGER — Hidden inside code terminal
   ══════════════════════════════════════════════════ */

/* The old visible button is display:none, the trigger is now .wb6-boss-line */
.wb6-boss-line {
  cursor: default;
  position: relative;
  transition: background 0.3s ease;
  border-radius: 4px;
  margin: 0 -8px;
  padding: 0 8px !important;
}

.wb6-boss-line.wb6-active {
  cursor: pointer;
}

.wb6-boss-line.wb6-active:hover {
  background: rgba(239, 68, 68, 0.06);
}

.wb6-boss-line.wb6-active:hover .wb6-boss-text {
  color: #ef4444 !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* Glitch character — the "C" occasionally flickers red */
.wb6-glitch-char {
  display: inline;
  position: relative;
}

.wb6-boss-line.wb6-active .wb6-glitch-char {
  animation: wb6GlitchFlicker 4s ease-in-out infinite;
}

@keyframes wb6GlitchFlicker {
  0%, 85%, 100% { color: inherit; text-shadow: none; }
  86% { color: #ef4444; text-shadow: 0 0 6px rgba(239, 68, 68, 0.8); }
  87% { color: inherit; text-shadow: none; }
  89% { color: #ef4444; text-shadow: 0 0 4px rgba(239, 68, 68, 0.5); transform: translateX(1px); }
  90% { color: inherit; text-shadow: none; transform: translateX(0); }
  93% { color: #ef4444; text-shadow: 0 0 3px rgba(239, 68, 68, 0.3); }
  94% { color: inherit; }
}

.wb6-boss-line.wb6-active:hover .wb6-glitch-char {
  color: #ef4444 !important;
  animation: none;
}

/* Collected state — turns gold */
.wb6-boss-line.wb6-collected .wb6-boss-text {
  color: #f59e0b !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
}
.wb6-boss-line.wb6-collected .wb6-glitch-char {
  color: #f59e0b !important;
  animation: none;
}
.wb6-boss-line.wb6-collected {
  cursor: default !important;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   CANVAS
   ══════════════════════════════════════════════════ */
#wb6Canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8700;
  display: none;
  cursor: crosshair;
  pointer-events: all;
}

/* ══════════════════════════════════════════════════
   HUD
   ══════════════════════════════════════════════════ */
#wb6HUD {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8800;
  display: none;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(10, 8, 22, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

#wb6HUD .wb6-hud-label {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

#wb6TimerEl {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  min-width: 64px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

#wb6AIStatus {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  align-items: center;
  transition: color 0.3s, text-shadow 0.3s;
}

#wb6MapName {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(239, 68, 68, 0.8);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: auto;
  margin-right: 8px;
}

#wb6QuitBtn {
  pointer-events: all;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 6px 16px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
}

#wb6QuitBtn:hover {
  color: #fff;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.15);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

/* ══════════════════════════════════════════════════
   OVERLAY BASE  (Modal + Win + Lose)
   ══════════════════════════════════════════════════ */
.wb6-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 3, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  padding: 24px 0;
}

.wb6-overlay.wb6-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Shared badge ── */
.wb6-badge {
  display: inline-block;
  background: linear-gradient(135deg, #991b1b, #ef4444);
  color: #fff;
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

/* ══════════════════════════════════════════════════
   MODAL CARD
   ══════════════════════════════════════════════════ */
.wb6-modal-card {
  position: relative;
  background: linear-gradient(160deg, #131126 0%, #1e1338 50%, #0d0a1b 100%);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 28px;
  padding: 48px 40px 40px;
  max-width: 580px;
  width: 94%;
  text-align: center;
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.9),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transform: translateY(40px) scale(0.92);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.wb6-overlay.wb6-open .wb6-modal-card {
  transform: translateY(0) scale(1);
}

.wb6-close-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.wb6-close-btn:hover {
  color: #fff;
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

.wb6-modal-icon {
  display: inline-block;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6));
  animation: wb6IconFloat 3s ease-in-out infinite alternate;
}

@keyframes wb6IconFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

.wb6-modal-card h2 {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  text-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

.wb6-modal-card > p {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 30px;
  line-height: 1.6;
}

/* ── Section labels ── */
.wb6-section-label {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 68, 68, 0.8);
  margin-bottom: 12px;
  margin-top: 24px;
  text-align: left;
}

/* ── Selection grids ── */
.wb6-sel-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}

.wb6-diff-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Selection cards ── */
.wb6-sel-card {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 16px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.wb6-sel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}

.wb6-sel-card:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.wb6-sel-card:hover::before {
  opacity: 1;
}

.wb6-sel-card.wb6-selected {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #fff;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.3);
  transform: translateY(-2px);
}

.wb6-sel-icon-svg {
  transition: transform 0.3s;
  color: #f87171;
  margin-bottom: 4px;
}

.wb6-sel-card:hover .wb6-sel-icon-svg {
  transform: scale(1.1);
  color: #fff;
}

.wb6-sel-card.wb6-selected .wb6-sel-icon-svg {
  color: #ef4444;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}

.wb6-sel-card strong {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.9rem;
  font-weight: 800;
}

.wb6-sel-card small {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
  text-align: center;
}

/* ── Start button ── */
.wb6-start-btn {
  width: 100%;
  margin-top: 30px;
  padding: 18px 0;
  background: linear-gradient(135deg, #991b1b, #ef4444, #991b1b);
  background-size: 200% auto;
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.25);
}

.wb6-start-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
  background: #333;
}

.wb6-start-btn:not(:disabled):hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(239, 68, 68, 0.5);
}

/* ══════════════════════════════════════════════════
   RESULT CARDS  (Win + Lose)
   ══════════════════════════════════════════════════ */
.wb6-result-card {
  position: relative;
  border-radius: 28px;
  padding: 60px 48px 50px;
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.95);
  transform: scale(0.9);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.wb6-overlay.wb6-open .wb6-result-card {
  transform: scale(1);
}

.wb6-win-card {
  background: linear-gradient(160deg, #1f1b0c 0%, #2f270a 50%, #151307 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.9), 0 0 80px rgba(245, 158, 11, 0.15);
}

.wb6-lose-card {
  background: linear-gradient(160deg, #1c0f0f 0%, #2b1111 50%, #110808 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.wb6-result-icon {
  display: inline-block;
  margin-bottom: 20px;
  animation: wb6IconDrop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes wb6IconDrop {
  0% { transform: scale(0) translateY(-100px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.wb6-result-card h2 {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.wb6-win-card h2 { text-shadow: 0 0 30px rgba(245, 158, 11, 0.6); }
.wb6-lose-card h2 { text-shadow: 0 0 30px rgba(239, 68, 68, 0.5); }

.wb6-result-card > p {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 30px;
}

.wb6-result-card > p strong {
  color: #fff;
  font-weight: 800;
}

.wb6-result-card .wb6-times {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  font-family: var(--font-family, 'Inter', sans-serif);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: space-around;
  gap: 16px;
}

.wb6-result-card .wb6-times span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wb6-result-card .wb6-times strong {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}

.wb6-result-card .wb6-times em {
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ── Buttons in result cards ── */
.wb6-claim-btn {
  width: 100%;
  padding: 16px 0;
  background: linear-gradient(135deg, #b45309, #f59e0b);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.3s;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.wb6-claim-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(245, 158, 11, 0.6);
}

.wb6-retry-btn {
  width: 100%;
  padding: 14px 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.wb6-retry-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

/* ══════════════════════════════════════════════════
   EFFECT ANIMATIONS  (injected via JS)
   ══════════════════════════════════════════════════ */
@keyframes wb6FloatUp {
  0%   { transform: translateY(0);    opacity: 1; text-shadow: 0 0 10px currentcolor; }
  100% { transform: translateY(-80px) scale(1.1); opacity: 0; text-shadow: 0 0 20px currentcolor; }
}

@keyframes wb6PenaltyFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}