/* ========================================
   Indian Mummy: Chappal - Stylesheet
   Created by MISHMAY
======================================== */

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

body {
  overflow: hidden;
  background: #1a0a0a; /* Letterbox/pillarbox background */
  touch-action: none;
  font-family: "Open Sans", sans-serif;
  width: 100vw;
  height: 100vh;
  user-select: none;
  -webkit-user-select: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- GAME CONTAINER - 16:9 Wrapper --- */
#game-container {
  position: absolute;
  overflow: hidden;
  background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%);
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

/* --- UI LAYERS --- */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 248, 225, 0.95);
  z-index: 20;
  transition: opacity 0.3s;
}

.hidden {
  display: none !important;
}

/* Game HUD */
#ui-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
}

/* Typography */
.title-font {
  font-family: "Bangers", cursive;
  letter-spacing: 2px;
}

.main-title {
  font-size: max(8vw, 60px);
  color: #d32f2f;
  text-shadow: 4px 4px 0 #ffeb3b, 6px 6px 0 rgba(0, 0, 0, 0.2);
  line-height: 1;
  text-align: center;
  margin-bottom: 10px;
}

.creator-tag {
  font-size: max(2vw, 16px);
  color: #e65100;
  font-weight: 800;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

.level-title {
  font-size: max(4vw, 24px);
  color: #d32f2f;
  text-shadow: 2px 2px 0 #fff;
}

/* Buttons */
.btn {
  pointer-events: auto;
  background: #e64a19;
  border: 4px solid white;
  color: white;
  font-family: "Bangers", cursive;
  font-size: max(4vw, 24px);
  padding: 10px 40px;
  border-radius: 50px;
  box-shadow: 0 6px 0 #bf360c, 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s;
  cursor: pointer;
  margin: 10px;
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #bf360c;
}

.btn-small {
  padding: 5px 15px;
  font-size: max(2.5vw, 16px);
  box-shadow: 0 3px 0 #bf360c;
}

/* Level Grid */
.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 600px;
  width: 90%;
}

.lvl-btn {
  background: #ff9800;
  border: 2px solid white;
  color: white;
  font-weight: bold;
  padding: 15px 0;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 #e65100;
  font-family: "Bangers", cursive;
  font-size: 1.2rem;
  min-width: 50px;
}

.lvl-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e65100;
}

/* Mobile Landscape: Vertical Scroll for Level Selection (keeps grid) */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #level-screen {
    padding: 10px 20px;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  #level-screen h2 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    flex-shrink: 0;
  }
  
  .level-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    max-width: 100%;
    width: 100%;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: #ff9800 rgba(255,152,0,0.2);
  }
  
  .level-grid::-webkit-scrollbar {
    width: 6px;
  }
  
  .level-grid::-webkit-scrollbar-track {
    background: rgba(255,152,0,0.2);
    border-radius: 3px;
  }
  
  .level-grid::-webkit-scrollbar-thumb {
    background: #ff9800;
    border-radius: 3px;
  }
  
  .lvl-btn {
    padding: 10px 5px;
    font-size: 0.9rem;
    min-width: 40px;
  }
  
  #level-screen .btn-small {
    margin-top: 8px;
    font-size: 14px;
    padding: 6px 20px;
    flex-shrink: 0;
  }
}

/* Mummy Selection Grid */
.mummy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 700px;
  width: 95%;
  padding: 10px;
}

@media (max-width: 600px) {
  .mummy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mummy-card {
  background: linear-gradient(135deg, #fff 0%, #ffeee0 100%);
  border: 3px solid #e64a19;
  border-radius: 15px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.mummy-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(230, 74, 25, 0.3);
}

.mummy-card:active {
  transform: translateY(0) scale(0.98);
}

.mummy-card.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.4);
}

.mummy-preview {
  width: 60px;
  height: 80px;
  margin: 0 auto 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mummy-name {
  font-family: "Bangers", cursive;
  font-size: 14px;
  color: #d32f2f;
  margin-bottom: 2px;
}

.mummy-region {
  font-size: 11px;
  color: #e65100;
  font-weight: 600;
}

/* Chappal Selection Grid */
.chappal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 700px;
  width: 95%;
  padding: 10px;
}

@media (max-width: 600px) {
  .chappal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.chappal-card {
  background: linear-gradient(135deg, #fff 0%, #e3f2fd 100%);
  border: 3px solid #2196F3;
  border-radius: 15px;
  padding: 15px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.chappal-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(33, 150, 243, 0.3);
}

.chappal-card:active {
  transform: translateY(0) scale(0.98);
}

.chappal-card.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.4);
}

.chappal-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.chappal-name {
  font-family: "Bangers", cursive;
  font-size: 14px;
  color: #1565C0;
  margin-bottom: 4px;
}

.chappal-desc {
  font-size: 11px;
  color: #666;
  font-weight: 600;
}

/* Status & Modal */
.status-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Bangers", cursive;
  font-size: max(8vw, 40px);
  color: #d32f2f;
  text-shadow: 3px 3px 0 white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  width: 100%;
  text-align: center;
}

.status-text.visible {
  opacity: 1;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  border: 6px solid #e64a19;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  width: 400px;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Utility Classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.justify-between {
  justify-content: space-between;
}
.w-full {
  width: 100%;
}
.text-center {
  text-align: center;
}
.pointer-events-auto {
  pointer-events: auto;
}
.pointer-events-none {
  pointer-events: none;
}
.inline-block {
  display: inline-block;
}
.font-bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}

/* Fullscreen Mode */
:fullscreen body,
:-webkit-full-screen body,
:-moz-full-screen body,
:-ms-fullscreen body {
  width: 100vw;
  height: 100vh;
}

#fullscreen-btn {
  font-size: max(3vw, 20px);
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
  border-style: solid;
}
.border-orange-800 {
  border-color: #9a3412;
}

/* Color Classes */
.text-orange-800 {
  color: #9a3412;
}
.text-orange-900 {
  color: #7c2d12;
}
.text-red-600 {
  color: #dc2626;
}
.text-gray-700 {
  color: #374151;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

/* Background */
.bg-white\/70 {
  background-color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   COMIC STORYLINE SCREEN
======================================== */
#comic-screen {
  background: linear-gradient(135deg, #2c1810 0%, #1a0a05 100%);
  z-index: 25;
}

.comic-container {
  width: 95%;
  max-width: 800px;
  height: auto;
  max-height: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  overflow-y: auto;
  padding: 10px;
}

/* Comic Panel */
.comic-panel {
  background: linear-gradient(135deg, #fffef5 0%, #fff8e1 100%);
  border: 6px solid #1a1a1a;
  border-radius: 8px;
  box-shadow: 
    inset 0 0 0 3px white,
    8px 8px 0 rgba(0,0,0,0.3);
  width: 100%;
  max-width: 700px;
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
  /* overflow: hidden; Removed to allow title to pop out */
  animation: panelSlideIn 0.4s ease-out;
}

@keyframes panelSlideIn {
  from {
    transform: translateX(100%) rotate(5deg);
    opacity: 0;
  }
  to {
    transform: translateX(0) rotate(0);
    opacity: 1;
  }
}

/* Panel Header - Story Title */
.comic-title {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #d32f2f;
  color: white;
  font-family: "Bangers", cursive;
  font-size: clamp(16px, 3vw, 24px);
  padding: 5px 25px;
  border-radius: 20px;
  border: 3px solid white;
  box-shadow: 0 4px 0 #8b0000;
  white-space: nowrap;
  z-index: 10;
}

/* Panel Counter */
.panel-counter {
  position: absolute;
  top: 10px;
  right: 15px;
  font-family: "Bangers", cursive;
  font-size: 14px;
  color: #666;
  opacity: 0.7;
}

/* Narration Box */
.narration-box {
  background: linear-gradient(135deg, #fff9c4 0%, #fff176 100%);
  border: 2px solid #1a1a1a;
  padding: 10px 20px;
  margin: 30px 20px 15px;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(12px, 2vw, 16px);
  font-style: italic;
  color: #333;
  text-align: center;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

/* Scene Container */
.comic-scene {
  width: 100%;
  min-height: 120px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: relative;
}

#comic-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* Speech Bubble */
.speech-bubble {
  position: relative;
  background: white;
  border: 3px solid #1a1a1a;
  border-radius: 20px;
  padding: 15px 20px;
  margin: -15px 20px 20px; /* Pull up to overlap scene */
  position: relative;
  z-index: 5;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 600;
  color: #1a1a1a;
  max-width: 90%;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 30px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top-color: #1a1a1a;
  border-bottom: 0;
}

.speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 33px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: white;
  border-bottom: 0;
  z-index: 1;
}

/* Kid's speech bubble - right side tail */
.speech-bubble.kid-speech::after {
  left: auto;
  right: 30px;
}

.speech-bubble.kid-speech::before {
  left: auto;
  right: 33px;
}

/* Mummy's angry speech - red tint */
.speech-bubble.angry-speech {
  background: #ffebee;
  border-color: #d32f2f;
}

.speech-bubble.angry-speech::after {
  border-top-color: #d32f2f;
}

.speech-bubble.angry-speech::before {
  border-top-color: #ffebee;
}

/* Typewriter effect */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 0.8s steps(40, end);
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Comic Controls */
.comic-controls {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.comic-controls .btn {
  font-size: clamp(16px, 3vw, 22px);
  padding: 8px 30px;
}

/* Effect overlays */
.effect-anger {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(255,0,0,0.15) 100%);
  pointer-events: none;
  animation: angerPulse 0.5s ease-in-out infinite alternate;
}

@keyframes angerPulse {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.effect-dramatic {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* Chappal Ready indicator */
.chappal-ready {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-family: "Bangers", cursive;
  font-size: 14px;
  color: #d32f2f;
  animation: chappalBounce 0.5s ease-in-out infinite alternate;
}

@keyframes chappalBounce {
  from { transform: translateY(0) rotate(-5deg); }
  to { transform: translateY(-5px) rotate(5deg); }
}

/* Mobile responsive */
@media (max-width: 600px) {
  .comic-container {
    width: 100%;
    height: 100%;
    max-height: 100dvh; /* Dynamic viewport height for mobile */
    padding: 10px;
    padding-top: env(safe-area-inset-top, 10px);
    padding-bottom: env(safe-area-inset-bottom, 10px);
    gap: 10px;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .comic-panel {
    min-height: auto;
    max-height: calc(100dvh - 120px); /* Leave room for controls */
    border-width: 4px;
    box-shadow: 
      inset 0 0 0 2px white,
      4px 4px 0 rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
  }
  
  .comic-title {
    font-size: 12px;
    padding: 4px 12px;
    top: -12px;
    border-width: 2px;
  }

  .panel-counter {
    font-size: 12px;
    top: 8px;
    right: 10px;
  }

  .narration-box {
    padding: 8px 12px;
    margin: 20px 10px 8px;
    font-size: 11px;
  }

  .comic-scene {
    height: 120px;
    min-height: 100px;
    flex-shrink: 0;
    padding: 5px;
  }

  #comic-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  
  .speech-bubble {
    padding: 10px 12px;
    margin: -10px 10px 15px;
    font-size: 12px;
    max-width: 95%;
  }

  .speech-bubble::after {
    bottom: -12px;
    left: 20px;
    border-width: 12px;
  }

  .speech-bubble::before {
    bottom: -8px;
    left: 23px;
    border-width: 9px;
  }

  .comic-controls {
    gap: 10px;
    margin-top: 5px;
    flex-shrink: 0;
  }

  .comic-controls .btn {
    font-size: 14px;
    padding: 6px 20px;
  }
}

/* Mobile Landscape: Horizontal Comic Layout */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #comic-screen {
    padding: 8px;
  }
  
  .comic-container {
    flex-direction: row;
    gap: 10px;
    padding: 5px;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    justify-content: center;
    align-items: stretch;
  }

  .comic-panel {
    flex: 1;
    max-width: 65%;
    min-height: auto;
    border-width: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .comic-title {
    font-size: 14px;
    padding: 3px 15px;
    top: -10px;
  }
  
  .panel-counter {
    font-size: 11px;
    top: 5px;
    right: 8px;
  }
  
  .narration-box {
    padding: 4px 10px;
    margin: 15px 10px 5px;
    font-size: 10px;
    flex-shrink: 0;
  }

  .comic-scene {
    flex: 1;
    height: auto;
    min-height: 80px;
    max-height: 120px;
    padding: 5px;
  }
  
  #comic-canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }

  .speech-bubble {
    padding: 8px 12px;
    margin: 0 10px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  
  .speech-bubble::after {
    border-width: 10px;
    bottom: -10px;
    left: 25px;
  }
  
  .speech-bubble::before {
    border-width: 8px;
    bottom: -6px;
    left: 27px;
  }

  /* Controls on the right side */
  .comic-controls {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    min-width: 100px;
  }

  .comic-controls .btn {
    font-size: 12px;
    padding: 8px 16px;
    width: 100%;
  }
}

/* Extra small height (very short landscape) */
@media screen and (max-height: 380px) and (orientation: landscape) {
  .comic-panel {
    max-width: 70%;
  }
  
  .narration-box {
    padding: 3px 8px;
    margin: 12px 8px 4px;
    font-size: 9px;
  }
  
  .comic-scene {
    min-height: 60px;
    max-height: 90px;
  }
  
  .speech-bubble {
    padding: 5px 8px;
    font-size: 10px;
    margin: 0 8px 8px;
  }
  
  .comic-controls {
    min-width: 80px;
    gap: 8px;
  }
  
  .comic-controls .btn {
    font-size: 10px;
    padding: 6px 12px;
  }
}

/* ========================================
   ANIMATED WIN/LOSE MODAL STYLES
======================================== */

/* Modal Background Themes */
#game-modal {
  background: rgba(0, 0, 0, 0.85);
  transition: background 0.3s;
}

#game-modal.win-theme {
  background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

#game-modal.lose-theme {
  background: radial-gradient(ellipse at center, rgba(139, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.95) 100%);
}

/* Confetti Canvas */
#confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Modal Box Themes */
#modal-box {
  position: relative;
  z-index: 2;
  overflow: visible;
}

#modal-box.win-modal {
  border-color: #FFD700;
  background: linear-gradient(135deg, #fffef0 0%, #fff8dc 50%, #ffefd5 100%);
  box-shadow: 
    0 0 0 4px rgba(255, 215, 0, 0.5),
    0 20px 60px rgba(255, 215, 0, 0.3),
    0 0 100px rgba(255, 215, 0, 0.2);
  animation: winPulse 2s ease-in-out infinite;
}

#modal-box.lose-modal {
  border-color: #8B0000;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 50%, #ffd0d0 100%);
  box-shadow: 
    0 0 0 4px rgba(139, 0, 0, 0.4),
    0 20px 60px rgba(139, 0, 0, 0.3);
  animation: losePulse 0.5s ease-in-out, loseShake 0.4s ease-in-out;
}

@keyframes winPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.5), 0 20px 60px rgba(255, 215, 0, 0.3), 0 0 60px rgba(255, 215, 0, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(255, 215, 0, 0.6), 0 20px 80px rgba(255, 215, 0, 0.4), 0 0 100px rgba(255, 215, 0, 0.3); }
}

@keyframes losePulse {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes loseShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Modal Icon */
.modal-icon {
  font-size: 72px;
  margin-bottom: 10px;
  animation: iconBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-icon.win-icon {
  animation: iconBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), iconGlow 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
}

.modal-icon.lose-icon {
  animation: iconSad 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(139, 0, 0, 0.5));
}

@keyframes iconBounce {
  0% { transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.3) rotate(10deg); }
  80% { transform: scale(0.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes iconGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)); }
  50% { filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 40px rgba(255, 165, 0, 0.6)); }
}

@keyframes iconSad {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Modal Title */
.modal-title-text {
  font-size: 2.5rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.modal-title-text.win-title {
  color: #B8860B;
  text-shadow: 2px 2px 0 #FFD700, 4px 4px 8px rgba(184, 134, 11, 0.3);
  animation: titleShine 2s ease-in-out infinite;
}

.modal-title-text.lose-title {
  color: #8B0000;
  text-shadow: 2px 2px 0 #FF6B6B, 3px 3px 6px rgba(139, 0, 0, 0.3);
}

@keyframes titleShine {
  0%, 100% { text-shadow: 2px 2px 0 #FFD700, 4px 4px 8px rgba(184, 134, 11, 0.3); }
  50% { text-shadow: 2px 2px 0 #FFD700, 4px 4px 8px rgba(184, 134, 11, 0.3), 0 0 20px rgba(255, 215, 0, 0.6); }
}

/* Star Rating */
.modal-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 15px 0;
  min-height: 45px;
}

.modal-star {
  font-size: 36px;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  animation: starPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.modal-star.empty {
  filter: grayscale(100%) brightness(0.5);
}

.modal-star.filled {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

.modal-star:nth-child(1) { animation-delay: 0.2s; }
.modal-star:nth-child(2) { animation-delay: 0.4s; }
.modal-star:nth-child(3) { animation-delay: 0.6s; }

@keyframes starPop {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.4) rotate(15deg); }
  80% { transform: scale(0.9) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Modal Description */
.modal-desc-text {
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 20px;
  line-height: 1.4;
}

.modal-desc-text.win-desc {
  color: #8B7500;
}

.modal-desc-text.lose-desc {
  color: #8B0000;
}

/* Modal Button */
.modal-btn.win-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  box-shadow: 0 6px 0 #1B5E20, 0 0 20px rgba(76, 175, 80, 0.4);
  animation: btnShine 2s ease-in-out infinite;
}

.modal-btn.lose-btn {
  background: linear-gradient(135deg, #e64a19 0%, #bf360c 100%);
  box-shadow: 0 6px 0 #8B0000;
  animation: btnUrgent 1s ease-in-out infinite;
}

@keyframes btnShine {
  0%, 100% { box-shadow: 0 6px 0 #1B5E20, 0 0 20px rgba(76, 175, 80, 0.4); }
  50% { box-shadow: 0 6px 0 #1B5E20, 0 0 35px rgba(76, 175, 80, 0.6); }
}

@keyframes btnUrgent {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Special: All Cleared Crown Animation */
.modal-icon.crown-icon {
  animation: iconBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), crownFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
}

@keyframes crownFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* Encouragement Messages for Lose */
.encouragement {
  font-size: 0.85rem;
  color: #666;
  margin-top: 10px;
  opacity: 0.8;
}

/* ========================================
   ACHIEVEMENT POPUP STYLES
======================================== */
.achievement-popup {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 3px solid #FFD700;
  border-radius: 15px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 9999;
  box-shadow: 
    0 0 0 3px rgba(255, 215, 0, 0.3),
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(255, 215, 0, 0.2);
  animation: achievementSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 350px;
}

.achievement-popup.fade-out {
  animation: achievementFadeOut 0.5s ease-in forwards;
}

@keyframes achievementSlideIn {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes achievementFadeOut {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.achievement-icon {
  font-size: 48px;
  animation: achievementBounce 0.6s ease-in-out infinite alternate;
}

@keyframes achievementBounce {
  0% { transform: scale(1) rotate(-5deg); }
  100% { transform: scale(1.1) rotate(5deg); }
}

.achievement-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.achievement-title {
  font-family: "Bangers", cursive;
  font-size: 12px;
  color: #FFD700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.achievement-name {
  font-family: "Bangers", cursive;
  font-size: 18px;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.achievement-desc {
  font-size: 12px;
  color: #aaa;
  font-style: italic;
}

/* ========================================
   ORIENTATION LOCK
   ======================================== */
@media screen and (orientation: portrait) and (max-width: 768px) {
  #orientation-lock {
    display: flex !important;
  }
  #game-container {
    display: none !important;
  }
}

/* ========================================
   KID LAUNCH EFFECT - "Fly at Screen"
   ======================================== */
.flying-kid {
  filter: drop-shadow(0 0 20px rgba(255, 100, 0, 0.8));
  animation: kidPanic 0.1s ease-in-out infinite alternate;
}

@keyframes kidPanic {
  from { filter: drop-shadow(0 0 20px rgba(255, 100, 0, 0.8)) brightness(1); }
  to { filter: drop-shadow(0 0 30px rgba(255, 50, 0, 1)) brightness(1.2); }
}

.screen-crack-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease-out;
  background: 
    radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,0.3) 100%);
}

.screen-crack-overlay.visible {
  opacity: 1;
}

.screen-crack-overlay::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 100 L80 40 M100 100 L140 50 M100 100 L160 90 M100 100 L150 130 M100 100 L120 160 M100 100 L70 150 M100 100 L40 120 M100 100 L50 80 M100 100 L60 60 M100 100 L130 70' stroke='%23333' stroke-width='3' fill='none' opacity='0.8'/%3E%3Cpath d='M80 40 L70 10 M80 40 L50 30 M140 50 L170 30 M140 50 L150 20 M160 90 L190 85 M150 130 L180 150 M120 160 L130 190 M70 150 L50 180 M40 120 L10 130 M50 80 L20 70' stroke='%23333' stroke-width='2' fill='none' opacity='0.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: crackAppear 0.15s ease-out forwards;
}

@keyframes crackAppear {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.launch-shake {
  animation: launchShake 0.5s ease-out;
}

@keyframes launchShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-15px, 10px); }
  20% { transform: translate(15px, -10px); }
  30% { transform: translate(-10px, 15px); }
  40% { transform: translate(10px, -15px); }
  50% { transform: translate(-8px, 8px); }
  60% { transform: translate(8px, -5px); }
  70% { transform: translate(-5px, 5px); }
  80% { transform: translate(5px, -3px); }
  90% { transform: translate(-2px, 2px); }
}

/* ========================================
   LOONEY TUNES SPLAT EFFECT - Face Stick
   ======================================== */

/* Splat Face - Flattened against glass */
.splat-face {
  filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
}

.splat-face svg {
  width: 100%;
  height: 100%;
}

/* Dazed spiral eyes animation */
.splat-face .dazed-eye-left,
.splat-face .dazed-eye-right {
  animation: dazedSpin 0.5s linear infinite;
  transform-origin: center;
}

.splat-face .dazed-eye-right {
  animation-direction: reverse;
}

@keyframes dazedSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Impact stars twinkle */
.splat-face .impact-stars polygon {
  animation: starTwinkle 0.3s ease-in-out infinite alternate;
}

.splat-face .impact-stars polygon:nth-child(odd) {
  animation-delay: 0.15s;
}

@keyframes starTwinkle {
  from { opacity: 0.6; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.1); }
}

/* Drool animation on splat face */
.splat-face .drool {
  animation: droolDrip 0.8s ease-in infinite;
}

@keyframes droolDrip {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -20; }
}

/* Glass Smear Overlay - Greasy slide mark */
.glass-smear-overlay {
  position: absolute;
  top: 40%;
  left: 35%;
  width: 30%;
  height: 0%;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(200, 200, 200, 0.1) 0%,
    rgba(180, 180, 180, 0.2) 20%,
    rgba(160, 160, 160, 0.15) 50%,
    rgba(140, 140, 140, 0.1) 80%,
    transparent 100%
  );
  border-radius: 50% 50% 30% 30%;
  pointer-events: none;
  z-index: 180;
  filter: blur(2px);
  transition: height 1.8s ease-in, opacity 0.3s;
}

.glass-smear-overlay.visible {
  opacity: 1;
  height: 60%;
}

/* Drool Trails - Cartoon slime */
.drool-trail {
  background: linear-gradient(
    to bottom,
    rgba(135, 206, 235, 0.5) 0%,
    rgba(173, 216, 230, 0.4) 40%,
    rgba(135, 206, 235, 0.2) 80%,
    transparent 100%
  );
  border-left: 2px solid rgba(135, 206, 235, 0.3);
  border-right: 2px solid rgba(135, 206, 235, 0.3);
  filter: blur(1px);
  animation: droolWobble 0.5s ease-in-out infinite alternate;
}

.drool-trail:nth-child(odd) {
  animation-delay: 0.25s;
}

@keyframes droolWobble {
  from { transform: skewX(-2deg); }
  to { transform: skewX(2deg); }
}

/* Enhanced screen crack with glass shatter effect */
.screen-crack-overlay.visible::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(200, 200, 200, 0.1) 30%,
    transparent 60%
  );
  border-radius: 50%;
  animation: impactFlash 0.15s ease-out;
}

@keyframes impactFlash {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* Dynamic shake intensity via CSS variable */
.launch-shake {
  --shake-intensity: 15px;
  animation: launchShakeDynamic 0.5s ease-out;
}

@keyframes launchShakeDynamic {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(calc(var(--shake-intensity) * -1), calc(var(--shake-intensity) * 0.66)); }
  20% { transform: translate(var(--shake-intensity), calc(var(--shake-intensity) * -0.66)); }
  30% { transform: translate(calc(var(--shake-intensity) * -0.66), var(--shake-intensity)); }
  40% { transform: translate(calc(var(--shake-intensity) * 0.66), calc(var(--shake-intensity) * -1)); }
  50% { transform: translate(calc(var(--shake-intensity) * -0.5), calc(var(--shake-intensity) * 0.5)); }
  60% { transform: translate(calc(var(--shake-intensity) * 0.5), calc(var(--shake-intensity) * -0.33)); }
  70% { transform: translate(calc(var(--shake-intensity) * -0.33), calc(var(--shake-intensity) * 0.33)); }
  80% { transform: translate(calc(var(--shake-intensity) * 0.33), calc(var(--shake-intensity) * -0.2)); }
  90% { transform: translate(calc(var(--shake-intensity) * -0.13), calc(var(--shake-intensity) * 0.13)); }
}