/* ===========================
   BASE & FONTS
   =========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', sans-serif;
  background: #1a1a2e;
  min-height: 100vh;
  overflow-x: hidden;
}

.hidden { display: none !important; }

/* ===========================
   BEDROOM CONTAINER
   =========================== */
#app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#bedroom-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#bedroom-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================
   SVG CLICKABLE ZONES
   =========================== */
.clickable-zone {
  cursor: pointer;
  transition: filter 0.2s ease;
}

.clickable-zone:hover {
  filter: drop-shadow(0 0 10px rgba(255, 230, 100, 0.85)) brightness(1.12);
}

.zone-label {
  font-size: 13px;
  font-weight: 700;
  fill: #5C3D1E;
  pointer-events: none;
  font-family: 'Nunito', sans-serif;
}

/* ===========================
   TOOLTIP
   =========================== */
#tooltip {
  position: fixed;
  background: rgba(0,0,0,0.82);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  transform: translate(-50%, -110%);
  transition: opacity 0.15s;
}

/* ===========================
   MODAL OVERLAY & PANEL
   =========================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  backdrop-filter: blur(4px);
}

.modal-panel {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.modal-enter { animation: modalIn 0.28s ease-out; }
.modal-exit { animation: modalOut 0.22s ease-in forwards; }

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.93); }
}

.modal-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
}

#modal-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.modal-close {
  background: rgba(255,255,255,0.25);
  border: none;
  color: white;
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.modal-close:hover { background: rgba(255,255,255,0.4); }

.modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

/* ===========================
   MODULE CONTENT BASE
   =========================== */
.module-content {
  padding: 20px;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #2d3748;
  margin: 24px 0 8px;
  padding-bottom: 6px;
  border-bottom: 3px solid #4ECDC4;
}
.world-title { border-bottom-color: #A8A4FF; }

.section-desc {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.5;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ===========================
   PROGRESS BARS & BADGES
   =========================== */
.progress-section {
  margin-bottom: 12px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
  color: #2d3748;
  margin-bottom: 4px;
}

.progress-count {
  color: #4ECDC4;
  font-weight: 900;
}

.progress-bar-track {
  height: 14px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ECDC4, #2ECC71);
  border-radius: 99px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.badge-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.badge-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  transition: all 0.3s;
}

.badge-earned {
  background: linear-gradient(135deg, #FFE66D, #FF6B6B);
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(255,230,100,0.4);
}

.badge-locked {
  background: #e2e8f0;
  color: #999;
}

.badge-chip-emoji { font-size: 1rem; }
.badge-chip-name { font-weight: 800; }
.badge-chip-lock { opacity: 0.4; }

/* ===========================
   BADGE NOTIFICATION POPUP
   =========================== */
.badge-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #FFE66D, #FF6B6B);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 8px 30px rgba(255,100,100,0.4);
  z-index: 9990;
  max-width: 280px;
}

.badge-popup-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-popup .badge-emoji {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.badge-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1a1a1a;
}

.badge-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #1a1a1a;
}

.badge-animate {
  animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes badgePop {
  from { opacity: 0; transform: scale(0.5) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===========================
   SHARED CARD STYLES
   =========================== */
.btn-primary {
  background: linear-gradient(135deg, #4ECDC4, #2ECC71);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Nunito', sans-serif;
}
.btn-primary:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(78,205,196,0.4); }
.btn-big { padding: 12px 28px; font-size: 1.05rem; }

.read-badge {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
}

.detail-row {
  margin-bottom: 6px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #4a5568;
}

.detail-label {
  font-weight: 700;
  color: #2d3748;
}

.fun-fact {
  background: linear-gradient(135deg, #fff9e6, #fff3cc);
  border-left: 4px solid #FFE66D;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4a4a00;
}

/* ===========================
   SNAKE ENCYCLOPEDIA
   =========================== */
.snake-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  transition: all 0.3s;
}
.snake-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.snake-card-read { background: #f0fff4; border-color: #68d391; }
.world-card { border-color: #A8A4FF; }
.locked-card { opacity: 0.7; position: relative; overflow: hidden; }
.locked-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #666;
  text-align: center;
  padding: 20px;
  border-radius: 14px;
  z-index: 2;
}

.snake-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.snake-emoji { font-size: 2.5rem; flex-shrink: 0; line-height: 1; }

.snake-name { font-size: 1.05rem; font-weight: 800; color: #2d3748; }
.snake-scientific { font-size: 0.82rem; color: #718096; margin: 2px 0; }

.venomous-tag {
  display: inline-block;
  background: #fff0f0;
  color: #e53e3e;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #fc8181;
}

.harmless-tag {
  display: inline-block;
  background: #f0fff4;
  color: #276749;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #68d391;
}

.region-tag {
  display: inline-block;
  background: #f0f0ff;
  color: #553c9a;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-right: 4px;
}

.snake-details { margin-bottom: 12px; }
.card-action { margin-top: 10px; }

/* ===========================
   FISHING TRACKER
   =========================== */
.fishing-hero {
  background: linear-gradient(135deg, #1A4A6E, #2980b9);
  color: white;
  padding: 20px;
  border-radius: 14px;
  margin-bottom: 16px;
  text-align: center;
}
.fishing-title { font-size: 1.6rem; font-weight: 900; }
.fishing-subtitle { font-size: 0.95rem; opacity: 0.85; margin-top: 4px; }

.dual-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }

.fish-card {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  transition: all 0.3s;
}
.fish-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.fish-card-learned { background: #f0f7ff; border-color: #63b3ed; }

.fish-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.fish-emoji { font-size: 2.2rem; flex-shrink: 0; }
.fish-title-area { flex: 1; }
.fish-name { font-size: 1rem; font-weight: 800; color: #2d3748; }
.fish-difficulty { font-size: 0.82rem; color: #718096; margin: 2px 0; }
.fish-target { font-size: 0.82rem; color: #805ad5; font-weight: 700; }
.fish-status-area { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.status-badge {
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
}
.status-badge.learned { background: #ebf8ff; color: #2b6cb0; }
.status-badge.caught { background: #fef3c7; color: #92400e; }

.fish-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.btn-catch {
  background: linear-gradient(135deg, #FFE66D, #FFA500);
  color: #1a1a1a;
  border: none;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Nunito', sans-serif;
}
.btn-catch:hover { transform: scale(1.05); }

.caught-badge {
  background: #fef3c7;
  color: #92400e;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
}

.fishing-badge-shelf { gap: 8px; margin-bottom: 16px; }

/* ===========================
   WORLD MAP MODULE
   =========================== */
.world-map-hero {
  text-align: center;
  margin-bottom: 16px;
}
.world-map-title { font-size: 1.6rem; font-weight: 900; color: #2d3748; }
.world-map-subtitle { font-size: 0.95rem; color: #718096; margin-top: 4px; }

.map-container {
  background: #B0D8F0;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}

.world-svg { display: block; width: 100%; height: auto; }

.map-region {
  transition: filter 0.2s, opacity 0.2s;
}
.map-region:hover { filter: brightness(1.2) drop-shadow(0 0 5px rgba(255,220,50,0.7)); }

.region-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

.region-btn {
  border: none;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Nunito', sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.region-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

.region-info-panel {
  background: #f7fafc;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
}
.region-prompt { padding: 30px; text-align: center; color: #a0aec0; font-size: 1rem; }

.region-panel-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}
.region-panel-name { font-size: 1.3rem; font-weight: 900; color: #1a1a1a; }
.region-snake-highlight { font-size: 0.88rem; font-weight: 700; color: #2d3748; margin-top: 2px; }

.region-facts { padding: 16px 20px; }
.region-fact {
  background: white;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 4px solid #4ECDC4;
}

.placeholder-video {
  padding: 24px 20px;
  text-align: center;
  background: #fff9e6;
  border-top: 2px solid #FFE66D;
  color: #856404;
  font-weight: 700;
  font-size: 1rem;
}

/* ===========================
   SOCCER MODULE
   =========================== */
.soccer-hero { text-align: center; margin-bottom: 20px; }
.soccer-title { font-size: 1.6rem; font-weight: 900; color: #2d3748; }
.soccer-subtitle { font-size: 0.95rem; color: #718096; margin-top: 4px; }
.fav-display { margin-top: 8px; font-size: 1rem; color: #553c9a; font-weight: 700; }

.flip-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.flip-card {
  height: 360px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

.flip-card-front {
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.player-number { font-size: 3rem; font-weight: 900; opacity: 0.3; position: absolute; top: 4px; right: 12px; }
.player-emoji { font-size: 2.5rem; margin-bottom: 6px; }
.player-flag { font-size: 2rem; margin-bottom: 8px; }
.player-name-front { font-size: 1rem; font-weight: 900; text-align: center; color: white; }
.player-club-front { font-size: 0.8rem; opacity: 0.85; margin-top: 4px; }
.flip-hint { font-size: 0.72rem; opacity: 0.7; margin-top: 8px; }

.flip-card-back {
  background: #f7fafc;
  transform: rotateY(180deg);
  color: #2d3748;
  justify-content: flex-start;
  overflow-y: auto;
}

.player-back-header { font-size: 0.95rem; font-weight: 900; margin-bottom: 4px; }
.player-pos { font-size: 0.8rem; color: #718096; margin-bottom: 4px; }
.player-born { font-size: 0.8rem; color: #718096; margin-bottom: 8px; }
.player-stats-box { background: #e8f4fd; border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; font-weight: 600; margin-bottom: 8px; color: #1a4a6e; width: 100%; }
.player-achievements { width: 100%; margin-bottom: 8px; }
.achievement { font-size: 0.75rem; margin-bottom: 3px; }
.player-fun-fact { font-size: 0.75rem; color: #4a4a00; background: #fff9e6; border-radius: 8px; padding: 6px 10px; width: 100%; margin-bottom: 8px; line-height: 1.4; }

.fav-btn {
  background: #e2e8f0;
  color: #4a5568;
  border: none;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: all 0.2s;
  width: 100%;
  margin-top: auto;
}
.fav-btn:hover { background: #fef3c7; }
.fav-btn.fav-active { background: linear-gradient(135deg, #FFE66D, #FFA500); color: #1a1a1a; }

.world-cup-section {
  background: linear-gradient(135deg, #0D4F1C, #155724);
  color: white;
  border-radius: 20px;
  padding: 24px;
  margin-top: 20px;
}
.wc-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.wc-title { font-size: 1.4rem; font-weight: 900; }
.wc-hosts { font-size: 0.9rem; opacity: 0.85; margin-top: 4px; }
.wc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.wc-date-item { background: rgba(255,255,255,0.15); border-radius: 10px; padding: 8px 12px; font-size: 0.88rem; }
.wc-facts { margin-bottom: 16px; }
.wc-fact { background: rgba(255,255,255,0.1); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; font-size: 0.88rem; line-height: 1.4; }
.wc-venues .venue-item { font-size: 0.85rem; margin-bottom: 4px; opacity: 0.9; }
.wc-venues strong { font-size: 0.9rem; display: block; margin-bottom: 6px; }

/* ===========================
   MEDIA PLAYER (Music + Anatoly)
   =========================== */
.media-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  color: white;
}
.media-title { font-size: 1.4rem; font-weight: 900; }
.media-subtitle { font-size: 0.9rem; opacity: 0.8; margin-top: 4px; }

.youtube-wrapper { position: relative; padding-top: 4px; }
.youtube-wrapper iframe {
  width: 100%;
  height: 380px;
  display: block;
}

.timer-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 8px 14px;
  border-radius: 12px;
  text-align: center;
  pointer-events: none;
  transition: background 0.5s;
}
.timer-display { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.timer-label { font-size: 0.72rem; opacity: 0.8; }

.time-up-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 8px;
}
.timeup-icon { font-size: 4rem; margin-bottom: 12px; }
.timeup-text { font-size: 2rem; font-weight: 900; }
.timeup-sub { font-size: 1rem; opacity: 0.8; margin-top: 8px; }

.video-placeholder {
  text-align: center;
  padding: 40px 24px;
  background: #fff9e6;
  margin: 16px;
  border-radius: 16px;
  border: 2px dashed #FFE66D;
}
.placeholder-icon { font-size: 3rem; margin-bottom: 12px; }
.placeholder-text { font-size: 1.1rem; font-weight: 800; color: #856404; margin-bottom: 12px; }
.placeholder-instructions { font-size: 0.88rem; color: #666; line-height: 1.6; }
.placeholder-instructions code { background: #e2e8f0; padding: 2px 6px; border-radius: 4px; font-family: monospace; }

.fun-facts-strip { padding: 12px 20px; background: #1e2a3a; }
.strength-fact { background: rgba(255,215,0,0.1); border-left: 3px solid #FFD700; padding: 8px 12px; margin-bottom: 8px; font-size: 0.88rem; color: #e0e0e0; border-radius: 0 8px 8px 0; }

/* ===========================
   BEDTIME STORIES
   =========================== */
.stories-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #5C3D1E, #8B6914);
  color: white;
  flex-wrap: wrap;
}
.goodnight-btn {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 2px solid rgba(255,255,255,0.4);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: all 0.2s;
  margin-left: auto;
}
.goodnight-btn:hover { background: rgba(255,255,255,0.35); }

.story-list { padding: 16px; }
.story-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.story-item:hover { background: #f0fff4; border-color: #68d391; transform: translateX(4px); }
.story-thumb { font-size: 2.5rem; }
.story-info { flex: 1; }
.story-title { font-size: 1rem; font-weight: 800; color: #2d3748; }
.story-meta { font-size: 0.85rem; color: #718096; margin-top: 3px; }
.story-arrow { font-size: 1.2rem; color: #4ECDC4; }

.story-reader {
  padding: 20px;
  overflow-y: auto;
}
.back-btn {
  background: none;
  border: 2px solid #4ECDC4;
  color: #4ECDC4;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  margin-bottom: 20px;
}
.back-btn:hover { background: #4ECDC4; color: white; }

.story-header { text-align: center; margin-bottom: 24px; }
.story-emoji-big { font-size: 4rem; display: block; margin-bottom: 10px; }
.story-title-big { font-size: 1.5rem; font-weight: 900; color: #2d3748; margin-bottom: 6px; }
.story-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2d3748;
  max-width: 640px;
  margin: 0 auto;
}
.story-text p { margin-bottom: 14px; }

/* ===========================
   JOKES MODULE
   =========================== */
.jokes-module { text-align: center; }
.jokes-hero { margin-bottom: 20px; }
.jokes-title { font-size: 1.8rem; font-weight: 900; color: #FF6B6B; }
.jokes-counter { font-size: 0.9rem; color: #718096; margin-top: 6px; }

.joke-card {
  background: #fff;
  border: 4px solid #FF6B6B;
  border-radius: 22px;
  padding: 34px 26px;
  margin-bottom: 20px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
  box-shadow: 0 6px 22px rgba(255,107,107,0.22);
}

.joke-question {
  font-size: 1.55rem;
  font-weight: 900;
  color: #1a202c;
  margin-bottom: 18px;
  line-height: 1.35;
}

.joke-answer {
  font-size: 1.45rem;
  font-weight: 900;
  color: #e53e3e;
  line-height: 1.35;
  background: #fff5f5;
  border-radius: 12px;
  padding: 12px 16px;
}

.reveal-btn {
  background: linear-gradient(135deg, #FF6B6B, #FFB347);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 99px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: all 0.2s;
  margin-top: 10px;
}
.reveal-btn:hover { transform: scale(1.05); }

.joke-controls { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }

.btn-fav {
  background: #fef3c7;
  color: #92400e;
  border: 2px solid #FFA500;
  padding: 10px 20px;
  border-radius: 99px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: all 0.2s;
}
.btn-fav:hover:not(:disabled) { background: #FFE66D; }
.btn-fav:disabled { opacity: 0.5; cursor: not-allowed; }

.favorites-list { text-align: left; }
.fav-joke { background: #fff9e6; border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; border-left: 4px solid #FFE66D; }
.fav-q { font-weight: 700; color: #2d3748; margin-bottom: 4px; }
.fav-a { color: #FF6B6B; font-weight: 600; }

/* ===========================
   GAMES MODULE
   =========================== */
.games-hero { text-align: center; margin-bottom: 16px; }
.games-title { font-size: 1.6rem; font-weight: 900; color: #2d3748; }
.games-subtitle { font-size: 0.9rem; color: #718096; margin-top: 4px; }

.games-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: #f7fafc;
  padding: 6px;
  border-radius: 12px;
}

.game-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  color: #718096;
  transition: all 0.2s;
}
.game-tab.active { background: white; color: #2d3748; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.game-panel { }

/* Snake Game */
.snake-game-container { position: relative; display: flex; flex-direction: column; align-items: center; }
.snake-game-info { display: flex; gap: 20px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }
.snake-score-display { font-size: 1rem; font-weight: 700; color: #2d3748; }
.snake-controls-hint { font-size: 0.85rem; color: #718096; }

.game-canvas {
  border: 4px solid #1a1a4e;
  border-radius: 12px;
  display: block;
  max-width: 100%;
  height: auto;
}

.game-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,46,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.overlay-content { text-align: center; color: white; padding: 20px; }
.overlay-icon { font-size: 3rem; margin-bottom: 10px; }
.overlay-title { font-size: 1.8rem; font-weight: 900; margin-bottom: 8px; }
.overlay-sub { font-size: 0.9rem; opacity: 0.8; margin-bottom: 20px; }

/* Memory Game */
.memory-game-container { display: flex; flex-direction: column; align-items: center; }
.memory-info {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #4a5568;
  flex-wrap: wrap;
  justify-content: center;
}
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 380px;
  width: 100%;
}

.mem-card {
  height: 80px;
  cursor: pointer;
  border-radius: 12px;
  perspective: 600px;
}
.mem-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s;
  border-radius: 12px;
}
.mem-card.flipped .mem-card-inner,
.mem-card.matched .mem-card-inner { transform: rotateY(180deg); }
.mem-card.matched .mem-card-inner { }

.mem-card-front, .mem-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
}
.mem-card-front {
  background: linear-gradient(135deg, #4ECDC4, #2ECC71);
  color: white;
  border: 3px solid #3AB5AD;
}
.mem-card-back {
  background: white;
  border: 3px solid #e2e8f0;
  transform: rotateY(180deg);
  font-size: 2rem;
}
.mem-card.matched .mem-card-back { background: #f0fff4; border-color: #68d391; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 640px) {
  .modal-panel { border-radius: 16px 16px 0 0; max-height: 92vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .card-grid { grid-template-columns: 1fr; }
  .flip-card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .flip-card { height: 320px; }
  .dual-progress { grid-template-columns: 1fr; }
  .wc-dates { grid-template-columns: 1fr; }
  .game-canvas { width: 100%; height: auto; }
  .mem-grid { max-width: 100%; }
  #modal-title { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .module-content { padding: 14px; }
  .mem-card { height: 66px; }
  .mem-card-back { font-size: 1.5rem; }
}

/* ===========================
   VIDEO THUMBS & ACCORDION
   =========================== */

.video-accordion-section {
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
}

.accordion-header {
  width: 100%;
  background: linear-gradient(135deg, #2d3748, #4a5568);
  color: white;
  border: none;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  transition: background 0.2s;
}
.accordion-header:hover { background: linear-gradient(135deg, #1a2236, #384155); }
.accordion-header .acc-chevron { transition: transform 0.3s; font-style: normal; }
.accordion-header.open .acc-chevron { transform: rotate(180deg); }

.accordion-body {
  display: none;
  background: #f7fafc;
  padding: 14px;
}
.accordion-body.open { display: block; }

.video-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.video-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.video-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

.video-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  opacity: 0.92;
  transition: opacity 0.2s;
}
.video-thumb:hover img { opacity: 1; }

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  width: 40px;
  height: 40px;
  background: rgba(255,0,0,0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.video-meta {
  padding: 7px 8px 8px;
  background: white;
}
.video-title { font-size: 0.78rem; font-weight: 800; color: #1a202c; line-height: 1.3; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-channel { font-size: 0.7rem; color: #718096; }
.video-runtime { font-size: 0.7rem; color: #a0aec0; float: right; }

.video-iframe-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}
.video-iframe-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
}

.video-module-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #1a2236, #2d3748);
  color: white;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.video-module-hero .hero-icon { font-size: 2.5rem; }
.video-module-hero .hero-title { font-size: 1.3rem; font-weight: 900; }
.video-module-hero .hero-sub { font-size: 0.85rem; opacity: 0.8; margin-top: 4px; }

.video-timer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 14px;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Soccer video tab */
.soccer-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.soccer-tab {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  background: #e2e8f0;
  color: #4a5568;
  transition: all 0.2s;
}
.soccer-tab.active { background: linear-gradient(135deg, #0D4F1C, #1a7a30); color: white; }

/* Snake deeper info */
.snake-expand-btn {
  background: none;
  border: none;
  color: #2b6cb0;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  display: block;
  margin-top: 6px;
}
.snake-expand-btn:hover { text-decoration: underline; }

.snake-extra {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.snake-extra.open { display: block; }

.extra-row { font-size: 0.8rem; margin-bottom: 6px; line-height: 1.5; }
.extra-row .extra-label { font-weight: 800; color: #2d3748; }
.confused-chip { display: inline-block; background: #fff3cd; border-radius: 6px; padding: 2px 7px; font-size: 0.72rem; font-weight: 700; margin: 2px 3px 2px 0; color: #7a5200; }
.tip-item { padding-left: 12px; position: relative; }
.tip-item::before { content: '✓'; position: absolute; left: 0; color: #38a169; font-weight: 900; }

/* Mobile game d-pad */
.dpad {
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 12px;
  gap: 4px;
  user-select: none;
}
@media (pointer: coarse) { .dpad { display: flex; } }
.dpad-row { display: flex; gap: 4px; }
.dpad-btn {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #4a5568, #2d3748);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}
.dpad-btn:active { transform: scale(0.92); }
.dpad-center { width: 52px; height: 52px; }

/* Math Blitz game */
.math-game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
}
.math-problem {
  font-size: 2.8rem;
  font-weight: 900;
  color: #2d3748;
  text-align: center;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.math-answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}
.math-answer-btn {
  padding: 16px;
  border: none;
  border-radius: 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #ebf4ff, #dbeafe);
  color: #1a365d;
  transition: all 0.15s;
  touch-action: manipulation;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.math-answer-btn:active { transform: scale(0.95); }
.math-answer-btn.correct { background: linear-gradient(135deg, #c6f6d5, #9ae6b4); color: #1a4731; }
.math-answer-btn.wrong { background: linear-gradient(135deg, #fed7d7, #feb2b2); color: #742a2a; }
.math-timer-bar {
  width: 100%;
  max-width: 320px;
  height: 12px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}
.math-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #48bb78, #f6ad55, #fc8181);
  border-radius: 99px;
  transition: width 0.25s linear;
}
.math-score-display { font-size: 1.2rem; font-weight: 900; color: #2d3748; }
.math-streak { font-size: 1rem; color: #e53e3e; font-weight: 800; min-height: 24px; }

/* Reaction Tap game */
.reaction-game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.reaction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.reaction-cell {
  height: 90px;
  border-radius: 14px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  touch-action: manipulation;
  user-select: none;
}
.reaction-cell.active {
  background: linear-gradient(135deg, #fef9c3, #fde68a);
  animation: reactionPulse 0.3s ease;
  box-shadow: 0 0 0 3px #f59e0b;
}
.reaction-cell:active { transform: scale(0.93); }
@keyframes reactionPulse { 0%{transform:scale(0.85)} 60%{transform:scale(1.05)} 100%{transform:scale(1)} }
.reaction-missed { background: linear-gradient(135deg, #fed7d7, #feb2b2) !important; }
.reaction-info { font-size: 1rem; font-weight: 800; color: #2d3748; text-align: center; }
.reaction-round { font-size: 0.9rem; color: #718096; font-weight: 700; }
.reaction-avg { font-size: 0.85rem; color: #38a169; font-weight: 700; }

/* ====================/* ===========================
   WORLD CUP 2026 MODULE
   =========================== */
.tab-intro { font-size: 0.86rem; color: #4a5568; line-height: 1.5; margin-bottom: 14px; background: #f0f7ff; border-radius: 10px; padding: 10px 14px; border-left: 4px solid #2563A8; }

/* scrollable tab bar (mobile-friendly) */
.scroll-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  gap: 6px;
  padding-bottom: 4px;
}
.scroll-tabs .soccer-tab { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; }

.wc-h { font-size: 1.1rem; font-weight: 900; color: #0D4F1C; margin: 18px 0 10px; padding-bottom: 5px; border-bottom: 3px solid #1a7a30; }

/* groups */
.wc-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wc-group-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 14px; padding: 10px; }
.wc-group-label { font-weight: 900; color: #0D4F1C; font-size: 1rem; margin-bottom: 8px; padding: 4px 8px; background: linear-gradient(135deg, #0D4F1C, #1a7a30); color: #fff; border-radius: 8px; display: inline-block; }
.wc-team-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #f7fafc; border: none; border-radius: 8px; padding: 8px 10px; margin-top: 5px;
  cursor: pointer; font-family: 'Nunito', sans-serif; transition: background 0.15s;
}
.wc-team-row:hover { background: #edf2f7; }
.wc-team-row.active { background: #e6f6ec; }
.wc-team-flag { font-size: 1.3rem; }
.wc-team-name { flex: 1; font-weight: 800; color: #2d3748; font-size: 0.9rem; }
.wc-seed { color: #d69e2e; }
.wc-conf { color: #fff; font-size: 0.6rem; font-weight: 800; padding: 2px 6px; border-radius: 99px; letter-spacing: 0.02em; }
.wc-team-detail { display: none; padding: 8px 12px; font-size: 0.8rem; line-height: 1.5; color: #4a5568; background: #fffbea; border-radius: 8px; margin: 4px 4px 2px; }
.wc-team-detail.open { display: block; }
.wc-team-note { font-style: italic; color: #805500; margin-top: 3px; }

/* standings */
.wc-grp-picker { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.wc-grp-btn {
  width: 38px; height: 38px; border: 2px solid #cbd5e0; background: #fff; color: #2d3748;
  border-radius: 9px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 0.95rem; cursor: pointer; transition: all 0.15s;
}
.wc-grp-btn:hover { border-color: #1a7a30; }
.wc-grp-btn.active { background: linear-gradient(135deg, #0D4F1C, #1a7a30); color: #fff; border-color: #0D4F1C; }

.wc-table-wrap { overflow-x: auto; border-radius: 12px; border: 2px solid #e2e8f0; }
.wc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 420px; }
.wc-table th { background: #0D4F1C; color: #fff; padding: 8px 6px; font-weight: 800; text-align: center; }
.wc-table th.ta-l, .wc-table td.ta-l { text-align: left; padding-left: 10px; }
.wc-table td { padding: 8px 6px; text-align: center; border-top: 1px solid #edf2f7; font-weight: 700; color: #2d3748; }
.wc-table td.pts { font-weight: 900; color: #0D4F1C; }
.wc-table tr.qualify { background: #e6f6ec; }
.wc-table tr.maybe { background: #fffbea; }
.wc-table .pos { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: #cbd5e0; color: #2d3748; border-radius: 50%; font-size: 0.7rem; font-weight: 900; margin-right: 4px; }
.wc-table tr.qualify .pos { background: #2ECC71; color: #fff; }

.wc-fixtures-head { font-weight: 900; color: #2d3748; margin: 16px 0 8px; }
.wc-fixtures { display: flex; flex-direction: column; gap: 7px; }
.wc-fixture { display: flex; align-items: center; gap: 6px; background: #f7fafc; border-radius: 10px; padding: 8px 10px; }
.wc-fx-team { flex: 1; font-size: 0.82rem; font-weight: 800; color: #2d3748; }
.wc-fx-team.right { text-align: right; }
.wc-fx-team.left { text-align: left; }
.wc-score {
  width: 42px; height: 38px; text-align: center; border: 2px solid #cbd5e0; border-radius: 8px;
  font-family: 'Nunito', sans-serif; font-size: 1.1rem; font-weight: 900; color: #0D4F1C; background: #fff;
}
.wc-score:focus { outline: none; border-color: #1a7a30; box-shadow: 0 0 0 3px rgba(26,122,48,0.18); }
.wc-vs { color: #a0aec0; font-weight: 900; }
.wc-reset { margin-top: 14px; }

/* schedule */
.wc-banner { background: linear-gradient(135deg, #0D4F1C, #155724); color: #fff; border-radius: 14px; padding: 14px 16px; font-size: 0.9rem; line-height: 1.7; margin-bottom: 8px; }
.wc-sched { display: flex; flex-direction: column; gap: 8px; }
.wc-sched-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.wc-sched-icon { font-size: 1.6rem; flex-shrink: 0; }
.wc-sched-main { flex: 1; }
.wc-sched-round { font-weight: 900; color: #2d3748; font-size: 0.95rem; }
.wc-sched-detail { font-size: 0.78rem; color: #718096; }
.wc-sched-dates { font-size: 0.82rem; font-weight: 800; color: #0D4F1C; text-align: right; flex-shrink: 0; }
.wc-venues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.wc-venue { background: #f7fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.wc-venue-city { font-weight: 900; color: #2d3748; font-size: 0.92rem; }
.wc-venue-stad { font-size: 0.78rem; color: #4a5568; margin: 2px 0; }
.wc-venue-note { font-size: 0.74rem; color: #1a7a30; font-weight: 700; }

/* history */
.wc-titles { display: flex; flex-direction: column; gap: 6px; }
.wc-title-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; flex-wrap: wrap; }
.wc-title-flag { font-size: 1.4rem; }
.wc-title-team { font-weight: 900; color: #2d3748; min-width: 90px; }
.wc-title-cups { font-size: 0.85rem; }
.wc-title-years { font-size: 0.72rem; color: #718096; flex: 1; text-align: right; }
.wc-records { display: flex; flex-direction: column; gap: 6px; }
.wc-record { background: #fff9e6; border-left: 4px solid #FFD700; border-radius: 0 8px 8px 0; padding: 9px 12px; font-size: 0.84rem; line-height: 1.5; color: #5a4a00; }
.wc-champs { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; border: 2px solid #e2e8f0; border-radius: 12px; padding: 8px; }
.wc-champ-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 0.84rem; }
.wc-champ-row:nth-child(odd) { background: #f7fafc; }
.wc-champ-year { font-weight: 900; color: #0D4F1C; width: 42px; flex-shrink: 0; }
.wc-champ-win { min-width: 120px; }
.wc-champ-meta { font-size: 0.74rem; color: #718096; flex: 1; text-align: right; }

/* ===========================
   SLIDE-OUT SIDEBAR NAV
   =========================== */
.nav-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1200;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: transform 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}
.nav-toggle:hover { transform: scale(1.06); background: #fff; }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: #2d3748;
  transition: transform 0.3s, opacity 0.2s;
}
.sidebar-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sidebar-open .nav-toggle span:nth-child(2) { opacity: 0; }
.sidebar-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 290px;
  max-width: 84vw;
  background: linear-gradient(180deg, #1a2236, #243049);
  box-shadow: 4px 0 30px rgba(0,0,0,0.35);
  z-index: 1150;
  transform: translateX(-105%);
  transition: transform 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  overflow-y: auto;
}
.sidebar-open .sidebar { transform: translateX(0); }

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 12px;
}
.sidebar-logo { font-size: 2.2rem; }
.sidebar-title { font-size: 1.2rem; font-weight: 900; color: #fff; }
.sidebar-sub { font-size: 0.78rem; color: #9fb3d1; }

.sidebar-links { display: flex; flex-direction: column; gap: 7px; flex: 1; }

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  border-left: 4px solid var(--accent, #4ECDC4);
  background: rgba(255,255,255,0.06);
  color: #eaf0fa;
  font-family: 'Nunito', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 12px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.sidebar-link:hover { background: rgba(255,255,255,0.16); transform: translateX(3px); }
.sidebar-link:active { transform: scale(0.98); }
.sidebar-link-arrow { color: var(--accent, #4ECDC4); font-size: 1.3rem; font-weight: 900; }

.sidebar-foot {
  text-align: center;
  color: #7f93b3;
  font-size: 0.8rem;
  font-weight: 700;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 8px;
}

.sidebar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10,15,28,0.55);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(2px);
}
.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }

/* nudge the room down a touch so the hamburger never overlaps content on phones */
@media (max-width: 640px) {
  #bedroom-container { margin-top: 4px; }
}