/* High-quality image rendering for Pi logo and game assets */
img {
  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: crisp-edges;
  /* Prevent image degradation on scaling */
  -ms-interpolation-mode: bicubic;
  /* Hardware acceleration for smooth rendering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Prevent blurry images */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Specific high-quality rendering for the Pi character logo */
img[src*="pi_run_original.png"], 
img[src*="pi_run.png"] {
  image-rendering: high-quality !important;
  image-rendering: -webkit-optimize-contrast !important;
  /* Ensure crisp edges for pixel art style */
  image-rendering: pixelated !important;
  /* Force high quality on Safari */
  -webkit-image-rendering: high-quality !important;
  /* Prevent browser compression */
  image-resolution: from-image;
}

/* Fake fullscreen mode for non-Android mobile devices */
body.fake-fullscreen {
  margin: 0 !important;
  padding: 0 !important;
  overflow: auto !important; /* Allow scrolling instead of hidden */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  margin-top: calc(-50vw) !important;
  margin-left: calc(-50vh) !important;
  background: black !important;
  transform: rotate(90deg) !important;
  transform-origin: center center !important;
  /* Enable smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch !important;
}

/* Ensure all content fills the fake fullscreen properly */
body.fake-fullscreen * {
  box-sizing: border-box;
}

/* Canvas scaling in fake fullscreen */
body.fake-fullscreen canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  object-fit: contain !important;
}

/* All overlays and screens in fake fullscreen EXCEPT progress overlay */
body.fake-fullscreen #menu-screen,
body.fake-fullscreen #revive-overlay,
body.fake-fullscreen #pause-menu,
body.fake-fullscreen #game-over-screen,
body.fake-fullscreen #level-complete-screen,
body.fake-fullscreen #how-to-play-screen,
body.fake-fullscreen #mainmenu-overlay {
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 30px !important;
  box-sizing: border-box !important;
  /* Enable HORIZONTAL scrolling for rotated view - this becomes vertical scrolling for user */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important; /* Allow horizontal panning */
  /* Start content from left instead of center for better mobile UX */
  justify-content: flex-start !important;
}

/* Progress overlay in fake fullscreen - NO counter-rotation so it scrolls landscape */
body.fake-fullscreen #progress-overlay {
  /* Do NOT counter-rotate - let it inherit the body's 90deg rotation */
  /* This makes it scroll horizontally in rotated view = up/down in landscape */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 5px !important; /* Much smaller padding for progress overlay */
  box-sizing: border-box !important;
  /* Enable horizontal scrolling which becomes vertical in landscape */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important; /* Allow horizontal panning */
  /* Start content from left instead of center */
  justify-content: flex-start !important;
}

/* Warning messages inside overlays in fake fullscreen - force landscape orientation */
body.fake-fullscreen .warning {
  /* Completely reset any positioning that might conflict */
  all: unset !important;
  /* Restore only the essential warning styles */
  display: block !important;
  color: #e74c3c !important;
  font-weight: bold !important;
  margin: 15px 0 !important;
  padding: 15px !important;
  background: rgba(231, 76, 60, 0.1) !important;
  border: 1px solid #e74c3c !important;
  border-radius: 10px !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: inherit !important;
  /* Ensure it flows naturally in the landscape overlay */
  width: auto !important;
  box-sizing: border-box !important;
}

/* Custom alert overlays in fake fullscreen should work properly */
body.fake-fullscreen > div[style*="position: fixed"][style*="z-index: 99999"] {
  /* Custom alerts should inherit the body rotation and work correctly */
  transform: none !important;
  /* Ensure proper positioning within rotated context */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Hide fullscreen button completely in fake fullscreen mode */
body.fake-fullscreen #fs-btn {
  display: none !important;
}

/* Hide fullscreen button completely when How to Play screen is active */
#how-to-play-screen ~ #fs-btn,
body:has(#how-to-play-screen[style*="flex"]) #fs-btn,
body:has(#how-to-play-screen[style*="block"]) #fs-btn {
  display: none !important;
}

/* Keep pause button accessible in fake fullscreen */
body.fake-fullscreen #pause-btn {
  position: fixed !important;
  top: 20px !important;        /* Even higher - 10px closer to top */
  left: 20px !important;       /* Moved to left side */
  z-index: 1000000 !important;
  transform: scale(0.9) !important; /* Slightly smaller in fullscreen */
  font-size: 12px !important;  /* Smaller font */
  padding: 2px 3px !important; /* Much smaller padding to reduce box size */
  background: rgba(0, 0, 0, 0.9) !important; /* Dark background for visibility */
  color: white !important;     /* White text */
  border: 2px solid rgba(255, 255, 255, 0.4) !important; /* Visible border */
  border-radius: 4px !important; /* Smaller border radius to match smaller padding */
  min-width: 35px !important;  /* Much smaller minimum width */
  font-weight: bold !important; /* Bold text */
}

/* Keep pause button accessible in real fullscreen - same position as fake fullscreen */
html:fullscreen #pause-btn,
html:-webkit-full-screen #pause-btn,
html:-moz-full-screen #pause-btn {
  position: fixed !important;
  top: 5px !important;         /* Much closer to corner - almost at edge */
  left: 5px !important;        /* Much closer to corner - almost at edge */
  z-index: 1000000 !important;
  transform: scale(0.5) !important; /* Much smaller - same size as fake fullscreen */
  font-size: 8px !important;   /* Even smaller font to match fake fullscreen scale */
  padding: 1px 2px !important; /* Minimal padding to match fake fullscreen */
  background: rgba(0, 0, 0, 0.9) !important; /* Dark background for visibility */
  color: white !important;     /* White text */
  border: 1px solid rgba(255, 255, 255, 0.4) !important; /* Thinner border */
  border-radius: 2px !important; /* Smaller border radius for compact size */
  min-width: 25px !important;  /* Smaller minimum width to match fake fullscreen */
  font-weight: bold !important; /* Bold text */
}

/* Preserve Pi Network payment elements in fake fullscreen */
body.fake-fullscreen iframe[src*="minepi.com"],
body.fake-fullscreen [id*="pi-"]:not(#revive-pi-btn),
body.fake-fullscreen [class*="pi-"]:not(.revive-button),
body.fake-fullscreen script[src*="minepi.com"] {
  /* No counter-rotation needed since body is already rotated */
  transform: none !important;
  /* Ensure they stay in a reasonable position */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1000001 !important;
}

/* Special handling for Pi SDK elements that might be dynamically created */
body.fake-fullscreen [data-pi-sdk],
body.fake-fullscreen [id^="pi-"]:not(#revive-pi-btn),
body.fake-fullscreen [class^="pi-"]:not(.revive-button) {
  transform: none !important;
}

/* Specific iOS Safari fixes for fake fullscreen scrolling */
body.fake-fullscreen {
  /* Prevent elastic bounce scrolling on iOS */
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  /* Ensure momentum scrolling works */
  -webkit-overflow-scrolling: touch !important;
}

/* Fix for scrollable content within fake fullscreen overlays on iOS */
body.fake-fullscreen .level-grid,
body.fake-fullscreen #progress-overlay > *,
body.fake-fullscreen #revive-overlay > * {
  /* Enable hardware acceleration for smoother scrolling */
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  /* Ensure touch events work properly */
  touch-action: pan-y !important;
}

/* Ensure progress overlay content can scroll on iOS */
body.fake-fullscreen #progress-overlay {
  /* Set up proper scroll container */
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

html {
  /* Prevent iOS zoom on input focus */
  -webkit-text-size-adjust: 100%;
  /* Prevent iOS bounce scrolling */
  -webkit-overflow-scrolling: touch;
  /* Fix for Safari rendering issues */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html, body {
  margin: 0;
  padding: 0;
  background: black;
  overflow: hidden;
  /* Enhanced touch handling for Safari */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Fix for Safari mobile viewport issues */
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Safari canvas optimizations */
canvas {
  display: block;
  /* Prevent Safari from applying filters */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Hardware acceleration for Safari */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Prevent Safari selection issues */
  -webkit-user-select: none;
  user-select: none;
  /* Touch action for better mobile performance */
  touch-action: manipulation;
}

/* Enhanced button styling for Safari */
button {
  font-size: 24px;
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  background-color: #8a2be2;
  color: white;
  transition: background 0.2s;
  /* Safari-specific button fixes */
  -webkit-appearance: none;
  appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Prevent double-tap zoom on Safari */
  touch-action: manipulation;
}

button:hover, button:focus {
  background-color: #5e2ca5;
  /* Remove Safari outline */
  outline: none;
}

/* Safari-specific input and touch fixes */
button:active {
  background-color: #4a1f7a;
  /* Prevent Safari highlight */
  -webkit-tap-highlight-color: transparent;
}

canvas {
  display: block;
}
#menu-screen,
#game-over-screen,
#level-complete-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: sans-serif;
  z-index: 10;
  margin-top: -10vh;
}
h1 {
  font-size: 64px;
  margin-bottom: 20px;
  text-align: center;
}
#gratulasjon {
  font-size: 36px;
  margin-bottom: 24px;
  text-align: center;
  white-space: pre-line;
}

#pause-menu {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: sans-serif;
  z-index: 11; /* høyere enn de andre skjermene */
}

/* Added overlay styles */
#progress-overlay,#revive-overlay{
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(12px);
  position:fixed;inset:0;background:#000a;z-index:15;
  display:none;flex-direction:column;align-items:center;
  gap:18px;color:#fff;font-family:sans-serif;
  /* Mobile-friendly scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 10px;
  box-sizing: border-box;
  /* Start from top instead of center for mobile */
  justify-content: flex-start;
  /* Prevent excessive scrolling beyond content */
  min-height: 0; /* Allow content to determine natural height */
}

/* Specific styling for revive overlay to center buttons properly */
#revive-overlay {
  justify-content: center; /* Center content vertically for revive overlay */
  align-items: center;     /* Center content horizontally */
  gap: 20px;               /* Consistent spacing between buttons */
}

#revive-overlay button {
  /* Ensure proper button ordering and spacing */
  margin: 8px 0;           /* Vertical spacing between buttons */
  min-width: 280px;        /* Consistent button width */
  padding: 12px 20px;      /* Better padding for mobile */
  font-size: 16px;         /* Readable font size */
  order: unset;            /* Reset any order that might be applied */
}

/* Specific button ordering for revive overlay */
#revive-daily-btn { order: 1; }  /* Use daily revive - top */
#revive-coin-btn { order: 2; }   /* 10 (pi coin) - second */
#revive-pi-btn { order: 3; }     /* 0.1 pi pi browser only - third */
#revive-restart-btn { order: 4; } /* Main menu - bottom */

/* Hide pause button when overlays are visible */
body:has(#game-over-screen[style*="flex"]) #pause-btn,
body:has(#revive-overlay[style*="flex"]) #pause-btn,
body:has(#progress-overlay[style*="flex"]) #pause-btn,
body:has(#level-complete-screen[style*="flex"]) #pause-btn,
body:has(#pause-menu[style*="block"]) #pause-btn {
  display: none !important;
}

/* Mobile landscape specific adjustments */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #progress-overlay,#revive-overlay {
    padding: 10px 5px;
    gap: 10px;
    font-size: 14px;
  }
  
  .level-grid {
    gap: 8px !important;
  }
  
  .level-grid div {
    padding: 8px 4px !important;
    font-size: 12px !important;
  }
  
  .pagination-container {
    margin: 10px 0 !important;
  }
}

/* Mobile portrait adjustments */
@media screen and (max-width: 600px) {
  #progress-overlay,#revive-overlay {
    padding: 15px 8px;
  }
}

/* Special mobile scrolling fixes for fake fullscreen */
body.fake-fullscreen #progress-overlay,
body.fake-fullscreen #revive-overlay {
  /* Ensure proper scrolling behavior on mobile */
  height: 100vh !important;
  max-height: 100vh !important;
  /* CORRECT: Use horizontal scrolling which becomes vertical in rotated view */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important; /* Allow horizontal panning */
  /* Ensure content starts from left for proper horizontal flow */
  justify-content: flex-start !important;
  align-items: center !important;
  /* Add some padding for better touch targets */
  padding: 30px 20px !important;
  /* Enable momentum scrolling on iOS */
  scroll-behavior: smooth !important;
}

/* ULTRA-compact revive overlay for fake fullscreen - allow scrolling if needed */
body.fake-fullscreen #revive-overlay {
  justify-content: center !important; /* Center the revive buttons vertically */
  align-items: center !important;     /* Center content horizontally */
  /* Absolute minimal padding */
  padding: 2px 8px !important;
  /* CORRECT: Use horizontal scrolling which becomes vertical in rotated view */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important; /* Allow horizontal panning */
  /* Ensure no extra spacing whatsoever */
  gap: 2px !important; /* Minimal gap between elements */
  /* Ensure content fits without scrolling */
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}

/* ULTRA-compact revive overlay buttons for fake fullscreen */
body.fake-fullscreen #revive-overlay button {
  /* Ultra-compact button sizing */
  min-width: 200px !important;        /* Smaller width for better fit */
  min-height: 32px !important;        /* Much smaller height */
  margin: 1px 0 !important;           /* Minimal vertical spacing */
  padding: 4px 8px !important;        /* Ultra-small padding */
  font-size: 11px !important;         /* Smaller font for compactness */
  line-height: 1.1 !important;        /* Tight line spacing */
  /* Ensure proper touch handling */
  touch-action: manipulation !important;
  /* Ensure buttons are clickable */
  pointer-events: auto !important;
  /* Remove extra spacing */
  border: 1px solid rgba(255,255,255,0.2) !important; /* Thinner border */
}

/* ULTRA-compact revive overlay text elements */
body.fake-fullscreen #revive-overlay h1,
body.fake-fullscreen #revive-overlay h3,
body.fake-fullscreen #revive-overlay p,
body.fake-fullscreen #revive-overlay div {
  margin: 0 0 2px 0 !important; /* Ultra-minimal margin */
  padding: 0 !important;        /* No padding at all */
  font-size: 12px !important;   /* Smaller font for compactness */
  line-height: 1.0 !important;  /* Tightest possible line spacing */
  text-align: center !important;
}

/* Make "Game Over!" h2 text bigger in fake fullscreen */
body.fake-fullscreen #revive-overlay h2 {
  margin: 0 0 4px 0 !important; /* Slightly more margin for the bigger text */
  padding: 0 !important;        
  font-size: 24px !important;   /* Bigger font for "Game Over!" */
  line-height: 1.1 !important;  /* Slightly more line spacing for readability */
  text-align: center !important;
}

/* Fix button ordering for fake fullscreen - new order: Daily, Coin, Pi, Main Menu */
body.fake-fullscreen #revive-daily-btn { order: 1 !important; }      /* Daily revive at top */
body.fake-fullscreen #revive-coin-btn { order: 2 !important; }       /* 10 coin second */
body.fake-fullscreen #revive-pi-btn { order: 3 !important; }         /* Pi button third */
body.fake-fullscreen #revive-restart-btn { order: 4 !important; }    /* Main menu at bottom */

/* Fix level grid layout in fake fullscreen mobile */
body.fake-fullscreen .level-grid {
  /* Ensure the grid can be touched and scrolled properly */
  touch-action: manipulation !important;
  pointer-events: auto !important;
  /* Much smaller margin for fake fullscreen to reduce empty space */
  margin: 5px 0 !important;
  /* Ensure grid items are properly sized for touch */
  min-height: auto !important;
}

body.fake-fullscreen .level-grid div {
  /* Better touch targets in fake fullscreen */
  min-height: 60px !important;
  min-width: 60px !important;
  touch-action: manipulation !important;
  /* Ensure proper text visibility */
  line-height: 1.3 !important;
}

/* Fake fullscreen progress overlay spacing optimizations */
body.fake-fullscreen #progress-overlay h1,
body.fake-fullscreen #progress-overlay h2,
body.fake-fullscreen #progress-overlay h3 {
  margin: 2px 0 !important; /* Even smaller margins for headings */
  padding: 0 !important;
  line-height: 1.1 !important; /* Tighter line height */
  font-size: 0.9em !important; /* Slightly smaller font size */
}

body.fake-fullscreen #progress-overlay p {
  margin: 1px 0 !important; /* Even smaller margins for paragraphs */
  padding: 0 !important;
  line-height: 1.2 !important; /* Tighter line height */
  font-size: 0.95em !important; /* Slightly smaller font size */
}

body.fake-fullscreen #progress-overlay .grid-container {
  margin: 3px 0 !important; /* Further reduce spacing between grid sections */
}

body.fake-fullscreen #progress-overlay .pagination-container {
  margin: 3px 0 !important; /* Further reduce pagination spacing */
  gap: 5px !important; /* Even smaller gap between pagination buttons */
}

body.fake-fullscreen #progress-overlay .level-section {
  margin: 4px 0 !important; /* Further reduce spacing between level sections */
}

body.fake-fullscreen #progress-overlay .progress-stats {
  margin: 2px 0 !important; /* Further reduce stats section spacing */
}

body.fake-fullscreen #progress-overlay .coins-display {
  margin: 1px 0 !important; /* Further reduce coin display spacing */
}

/* Reduce the main gap between progress overlay elements in fake fullscreen */
body.fake-fullscreen #progress-overlay {
  gap: 8px !important; /* Much smaller gap between main sections */
  max-height: 100% !important; /* Prevent scrolling beyond viewport */
  /* CORRECT: Use horizontal scrolling which becomes vertical in rotated view */
  overflow-x: auto !important; /* Allow horizontal scrolling which becomes vertical */
  overflow-y: hidden !important; /* No vertical scroll in rotated view */
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important; /* Allow horizontal panning */
  /* Better content fitting */
  height: 100% !important; /* Take full height */
  justify-content: flex-start !important; /* Start from left for horizontal flow */
  align-content: flex-start !important; /* Pack content at start */
}

/* Reduce button spacing in progress overlay for fake fullscreen */
body.fake-fullscreen #progress-overlay button {
  margin: 2px 0 !important; /* Smaller margins for buttons */
  padding: 8px 12px !important; /* Slightly smaller button padding */
}

/* Prevent scrolling beyond content in fake fullscreen progress overlay */
body.fake-fullscreen #progress-overlay > * {
  flex-shrink: 0 !important; /* Prevent content from shrinking */
}

/* Constrain scroll area to content in fake fullscreen */
body.fake-fullscreen #progress-overlay {
  /* Set scroll behavior to not allow scrolling past content */
  scroll-behavior: smooth !important;
  /* Ensure the overlay doesn't create extra space */
  overscroll-behavior: contain !important;
}

/* Farger og (u)klikkbarhet på levels unlocked*/
.level-grid{display:grid;grid-template-columns:repeat(5,auto);gap:8px;text-align:center} /* Smaller gap between level boxes */
.level-grid .done{color:#0f0}
.level-grid .open{color:#fff}
.level-grid .locked{color:#888; pointer-events: none; cursor: default;}

/* Further reduce level grid spacing in fake fullscreen */
body.fake-fullscreen .level-grid {
  gap: 6px !important; /* Even smaller gap between level boxes in fake fullscreen */
}

/* Fullscreen-specific adjustments for better spacing */
html:fullscreen .level-grid,
html:-webkit-full-screen .level-grid,
html:-moz-full-screen .level-grid,
body.fake-fullscreen .level-grid {
  gap: 15px !important; /* Increase gap in fullscreen */
  /* For fullscreen: 5x2 grid layout (5 columns, 2 rows) */
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: auto auto !important; /* Auto-sized rows instead of 1fr 1fr */
  grid-auto-flow: row !important; /* Ensure items flow row by row */
  max-width: 100% !important; /* Use full width for 5 columns */
  min-height: 160px !important; /* Minimum height instead of fixed height */
  justify-content: center !important;
  align-content: start !important; /* Align to start instead of space-between */
  margin: 0 auto; /* Center the grid */
  padding: 0 20px; /* Add side padding */
  /* Force grid to wrap after 5 items */
  justify-items: stretch !important;
  align-items: stretch !important;
}

/* Android-specific fullscreen grid fixes */
body.android-fullscreen .level-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: repeat(2, minmax(55px, auto)) !important; /* Smaller minimum height */
  grid-auto-flow: row !important;
  gap: 12px !important; /* Smaller gap */
  width: 100% !important;
  max-width: 85vw !important; /* Narrower grid */
  height: auto !important;
  min-height: 130px !important; /* Smaller minimum height */
  padding: 15px !important;
  margin: 15px auto !important;
  box-sizing: border-box !important;
  justify-content: space-evenly !important;
  align-content: start !important;
  justify-items: center !important;
  align-items: center !important;
}

/* Android fullscreen: reduce spacing around grid container */
body.android-fullscreen .grid-container {
  margin: 8px 0 !important; /* Reduced spacing */
}

/* Android fullscreen: tighter spacing for progress overlay elements */
body.android-fullscreen #progress-overlay p {
  margin: 8px 0 !important;
  padding: 0 !important;
}

/* Fallback for Android devices in fullscreen without the class (media query approach) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  html:fullscreen .level-grid,
  html:-webkit-full-screen .level-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: repeat(2, minmax(70px, auto)) !important;
    grid-auto-flow: row !important;
    gap: 15px !important;
    max-width: 95vw !important;
    height: auto !important;
    min-height: 160px !important;
  }
}

/* Android-specific fullscreen grid item fixes */
body.android-fullscreen .level-grid div {
  width: 100% !important;
  min-width: 45px !important;
  max-width: 80px !important;
  min-height: 50px !important;
  max-height: 60px !important;
  padding: 4px !important;
  margin: 0 !important;
  font-size: 11px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  border-radius: 3px !important;
}

html:fullscreen .level-grid div,
html:-webkit-full-screen .level-grid div,
html:-moz-full-screen .level-grid div,
body.fake-fullscreen .level-grid div {
  margin: 4px; /* Add extra margin around each level box in fullscreen */
  min-width: auto; /* Let grid control width */
  min-height: 70px; /* Ensure consistent height */
  padding: 10px !important; /* More padding for better touch targets */
  font-size: 14px !important; /* Slightly smaller font for 5 columns */
  text-align: center !important; /* Center text in boxes */
}

/* Additional fullscreen spacing for progress overlay */
html:fullscreen #progress-overlay,
html:-webkit-full-screen #progress-overlay,
html:-moz-full-screen #progress-overlay,
body.fake-fullscreen #progress-overlay {
  padding: 20px !important; /* More padding in fullscreen */
}

/* Specific fix for level-complete-screen margin in Android real fullscreen only */
html:fullscreen body.android-fullscreen #level-complete-screen,
html:-webkit-full-screen body.android-fullscreen #level-complete-screen {
  margin-top: 0 !important; /* Override the -10vh margin that causes positioning issues */
}

/* Warning messages in fullscreen need proper positioning */
html:fullscreen .warning,
html:-webkit-full-screen .warning,
html:-moz-full-screen .warning {
  margin: 15px 0 !important;
  padding: 15px !important;
  width: auto !important;
  position: relative !important;
  transform: none !important;
}


/* Skjul alle overlegg ved page-load */
#pause-menu,
#game-over-screen,
#level-complete-screen {
  display: none;
}

/* legg nederst i style.css – disse «vinner» over nyere regler */
#pause-btn{
  position:absolute;   /* ← var fixed */
  top:60px;           /* Moved higher - was 140px, now 100px for better desktop positioning */
  left:20px;           /* Moved to left side */
  padding:3px 8px;    /* Smaller padding */
  border:none;
  border-radius:8px;  /* Smaller border radius */
  font-size:14px;     /* Smaller font */
  background:rgba(0, 0, 0, 0.8); /* Darker, more visible background */
  color: white;       /* White text for contrast */
  border: 2px solid rgba(255, 255, 255, 0.3); /* Subtle border for visibility */
  z-index:12;
  display:none;        /* skjult til vi trenger den */
  min-width: 60px;    /* Ensure minimum width */
  font-weight: bold;  /* Make text bolder */
}

#fs-btn{
  position: fixed !important;   /* Use fixed positioning with !important */
  bottom: 30px !important;      /* Give space from bottom */
  left: 50% !important;         /* Center horizontally */
  right: auto !important;       /* Remove any right positioning */
  transform: translateX(-50%) !important; /* Perfect centering */
  margin: 0 !important;         /* Remove any margins */
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(52, 152, 219, 0.9);
  color: white;
  z-index: 15000;    /* Higher z-index to be above everything */
  display: none;     /* Hidden by default, shown by script */
  min-height: 44px;  /* Minimum touch target size for mobile */
  min-width: 140px;
  /* Mobile touch improvements */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Ensure it doesn't interfere with menu */
  margin-bottom: env(safe-area-inset-bottom, 0);
}

#fs-btn:hover {
  background: rgba(41, 128, 185, 0.9);
  transform: translateX(-50%) translateY(-2px);
}

#fs-btn:active {
  transform: translateX(-50%) translateY(0);
}

/* Gameplay positioning for fullscreen button - bottom center below game view */
#fs-btn.gameplay-position {
  position: fixed !important;
  bottom: 10px !important;
  left: 50% !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  background: rgba(52, 152, 219, 0.9) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  z-index: 15000 !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
  min-width: 120px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#fs-btn.gameplay-position:hover {
  background: rgba(41, 128, 185, 0.9) !important;
  transform: translateX(-50%) translateY(-2px) !important;
}

#fs-btn.gameplay-position:active {
  transform: translateX(-50%) translateY(0) !important;
}

/* Mobile landscape adjustments for gameplay position */
@media screen and (max-height: 600px) and (orientation: landscape) {
  #fs-btn.gameplay-position {
    bottom: 5px !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    min-width: 100px !important;
  }
}

@media screen and (max-height: 600px) {
  #fs-btn {
    bottom: 15px !important;
    font-size: 11px;
    padding: 8px 12px;
    /* Maintain perfect centering */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }
}

/* Fix button interactions in fake fullscreen scrollable environment */
body.fake-fullscreen button,
body.fake-fullscreen .level-grid div {
  /* Ensure buttons work properly with touch in rotated view */
  touch-action: manipulation !important;
  pointer-events: auto !important;
  /* Prevent selection issues on iOS */
  -webkit-user-select: none !important;
  user-select: none !important;
  /* Ensure proper z-index for interactions */
  position: relative !important;
  z-index: 10 !important;
}

/* Specific fixes for overlay buttons in fake fullscreen */
body.fake-fullscreen #progress-overlay button,
body.fake-fullscreen #revive-overlay button,
body.fake-fullscreen #pause-menu button,
body.fake-fullscreen #level-complete-screen button,
body.fake-fullscreen #menu-screen button {
  /* Ensure proper button functionality in scrollable overlays */
  touch-action: manipulation !important;
  cursor: pointer !important;
  /* Better button spacing for mobile touch */
  margin: 8px 4px !important;
  min-height: 44px !important; /* Minimum touch target size */
  min-width: 120px !important;
}

/* Ensure fullscreen button doesn't interfere with menu layout */
#menu-screen {
  padding-bottom: 80px; /* Give space for fullscreen button */
}

.overlay-hint {
  position: absolute;
  bottom: 32px;           /* avstand fra bunnen – juster etter smak */
  font-size: 18px;
  color: #fff;
  opacity: 0.7;
  pointer-events: none;   /* teksten stopper ikke klikk-for-å-lukk */
  user-select: none;
}

.level-grid div {                /* felles stil */
  padding: 14px 0;
  width: 70px;
  border-radius: 10px;
  background: #fff2;             /* svak bakgrunn */
}

.level-grid .open:hover,
.level-grid .done:hover {        /* bare klikker på åpne fullførte */
  background: #fff4;
  transform: scale(1.05);
  transition: 0.15s;
}

.level-grid .locked {            /* låste ser “grået ut” */
  opacity: 0.8;
}

.level-grid .locked {
  color: #888;          /* du har denne fra før */
  pointer-events: none; /* ikke klikkbar */
}

/* Retry button styling */
#retry-level-btn, #pause-retry-btn {
  background-color: #27ae60;
  font-size: 20px;
  margin: 10px;
}

#retry-level-btn:hover, #pause-retry-btn:hover {
  background-color: #2ecc71;
}

/* Level completion screen improvements */
#level-complete-screen button {
  margin: 8px;
  min-width: 200px;
}

/* Pause menu button improvements */
#pause-menu button {
  margin: 8px;
  min-width: 200px;
}

/* Level state indicators */
.level-dead {
  background-color: #e74c3c !important;
  color: white;
}

.level-locked {
  background-color: #95a5a6 !important;
  color: #7f8c8d;
  cursor: not-allowed;
}

.level-completed {
  background-color: #27ae60 !important;
  color: white;
}

/* Level state styling in progress overlay */
.level-grid .dead {
  background-color: #e74c3c !important;
  color: white;
  border: 2px solid #c0392b;
}

.level-grid .done {
  background-color: #27ae60 !important;
  color: white;
  border: 2px solid #219a52;
}

.level-grid .open {
  background-color: #f39c12 !important;
  color: white;
  border: 2px solid #d68910;
}

.level-grid .locked {
  background-color: #95a5a6 !important;
  color: #7f8c8d;
  cursor: not-allowed !important;
}

.level-grid .blocked-by-death {
  background-color: #e67e22 !important; /* Orange-red to distinguish from death level */
  color: white;
  border: 2px solid #d35400;
  cursor: pointer !important; /* Show as clickable since it redirects to revive page */
}

.level-grid .dead:hover {
  background-color: #c0392b !important;
  transform: scale(1.05);
}

.level-grid .done:hover {
  background-color: #219a52 !important;
  transform: scale(1.05);
}

.level-grid .open:hover {
  background-color: #d68910 !important;
  transform: scale(1.05);
}

.level-grid .locked:hover {
  background-color: #7f8c8d !important;
  transform: scale(1.05);
}

.level-grid .blocked-by-death:hover {
  background-color: #d35400 !important;
  transform: scale(1.05);
}

/* Warning messages */
.warning {
  color: #e74c3c;
  font-weight: bold;
  margin: 20px 0;
  padding: 10px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 10px;
  text-align: center;
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid #e74c3c;
  border-radius: 10px;
  padding: 15px;
  margin: 15px 0;
  color: #e74c3c;
  font-weight: bold;
  text-align: center;
}

/* iOS Safari optimizations */
.ios-safari-optimized body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.ios-safari-optimized canvas {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Loading screen */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #1a1a2e, #16213e);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  font-family: Arial, sans-serif;
  color: white;
}

#loading-screen h2 {
  margin-bottom: 20px;
}

#loading-progress-bar {
  width: 300px;
  height: 20px;
  background: #333;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

#loading-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  width: 0%;
  transition: width 0.3s ease;
}

/* Error messages */
.game-error {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f44336;
  color: white;
  padding: 20px;
  border-radius: 10px;
  z-index: 20000;
  text-align: center;
  font-family: Arial, sans-serif;
}

/* Progress page pagination styling */
.pagination-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 15px 0;
}

.pagination-btn {
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, opacity 0.3s;
  min-width: 50px;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #2980b9;
}

.pagination-btn:disabled {
  background-color: #7f8c8d;
  cursor: not-allowed;
  opacity: 0.5;
}

.page-info {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  min-width: 150px;
  text-align: center;
  line-height: 1.3;
}

.page-info small {
  font-size: 12px;
  opacity: 0.8;
  font-weight: normal;
}

.grid-container {
  margin: 15px 0;
}

/* Adjust level grid for better pagination layout */
.level-grid {
  display: grid;
  grid-template-columns: repeat(5, auto); /* 5 columns instead of 4 for better layout with 20 items */
  gap: 12px;
  text-align: center;
  max-width: 600px;
}

/* Responsive adjustments for level grid */
@media (max-width: 768px) {
  .level-grid {
    grid-template-columns: repeat(4, auto); /* 4 columns on smaller screens */
    gap: 10px;
  }
  
  .level-grid div {
    width: 60px;
    padding: 12px 0;
    font-size: 14px;
  }
  
  .pagination-btn {
    padding: 8px 12px;
    font-size: 16px;
  }
  
  .page-info {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .level-grid {
    grid-template-columns: repeat(3, auto); /* 3 columns on very small screens */
    gap: 8px;
  }
  
  .level-grid div {
    width: 50px;
    padding: 10px 0;
    font-size: 12px;
  }
  
  .pagination-container {
    gap: 15px;
  }
}

/* Enhanced Safari and iOS mobile fixes */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
  /* Safari mobile viewport fixes */
  html, body {
    position: fixed;
    overflow: hidden;
    /* Safari-specific viewport height fix */
    height: 100vh;
    height: -webkit-fill-available;
    /* Prevent iOS zoom */
    -webkit-text-size-adjust: 100%;
  }
  
  /* Enhanced overlay styling for mobile Safari */
  #progress-overlay, #revive-overlay, #pause-menu, 
  #game-over-screen, #level-complete-screen {
    /* Safari-safe scrolling */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    /* Safari position fix */
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Alternative height for Safari */
    height: -webkit-fill-available;
    max-height: 100vh;
    /* Prevent Safari bounce */
    overscroll-behavior: none;
    -webkit-overscroll-behavior: none;
    /* Hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Enhanced touch targets for Safari */
  button {
    min-height: 44px; /* Apple's recommended minimum touch target */
    min-width: 44px;
    /* Better touch handling for Safari */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
    /* Prevent Safari double-tap zoom */
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Enhanced grid for mobile Safari */
  .level-grid {
    /* Safari grid fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Better spacing for touch */
    padding: 20px;
    gap: 12px;
  }
  
  .level-grid span {
    /* Enhanced touch targets */
    min-height: 44px;
    min-width: 60px;
    /* Safari touch improvements */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
    /* Better text handling */
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Landscape orientation fixes for Safari */
@media (orientation: landscape) and (max-height: 480px) {
  /* Safari landscape viewport fixes */
  html, body {
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  #progress-overlay, #revive-overlay {
    /* Better landscape handling */
    padding: 10px;
    font-size: 14px;
  }
  
  h1 {
    font-size: 32px;
    margin: 10px 0;
  }
  
  h2 {
    font-size: 20px;
    margin: 10px 0;
  }
  
  button {
    font-size: 16px;
    padding: 8px 16px;
    margin: 5px;
  }
  
  .level-grid {
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 8px;
    padding: 10px;
  }
  
  .level-grid span {
    padding: 8px 4px;
    font-size: 12px;
    min-height: 36px;
  }
}

/* Ensure proper button ordering in game over screen */
#game-over-mainmenu-btn {
  order: 1;
}

#game-over-progress-btn {
  order: 2;
}

#game-over-revive-btn {
  order: 3;
}

/* Mobile-specific button spacing */
@media (max-width: 768px) {
  #game-over-screen button {
    margin: 10px 0;
    min-width: 200px;
  }
}

/* Safari-specific performance optimizations */
@supports (-webkit-appearance: none) {
  /* Hardware acceleration for all interactive elements */
  button, .level-grid span, #fs-btn {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Safari scrolling optimization */
  #progress-overlay, #revive-overlay {
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

/* CRITICAL: Android fullscreen grid layout fix - highest specificity */
html:fullscreen body.android-fullscreen .level-grid,
html:-webkit-full-screen body.android-fullscreen .level-grid,
body.fake-fullscreen.android-fullscreen .level-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 10px !important;
  width: 90% !important;
  max-width: 85vw !important;
  height: 140px !important; /* Smaller fixed height */
  padding: 10px !important;
  margin: 10px auto !important;
  justify-content: center !important;
  align-content: center !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* Android fullscreen: reduce spacing between elements */
html:fullscreen body.android-fullscreen .grid-container,
html:-webkit-full-screen body.android-fullscreen .grid-container,
body.fake-fullscreen.android-fullscreen .grid-container {
  margin: 2px 0 !important; /* Reduced from 15px to 2px */
}

/* Android fullscreen: reduce spacing for stats paragraph */
html:fullscreen body.android-fullscreen #progress-overlay p,
html:-webkit-full-screen body.android-fullscreen #progress-overlay p,
body.fake-fullscreen.android-fullscreen #progress-overlay p {
  margin: 2px 0 !important; /* Reduced margin for stats */
  padding: 0 !important;
}

html:fullscreen body.android-fullscreen .level-grid div,
html:-webkit-full-screen body.android-fullscreen .level-grid div,
body.fake-fullscreen.android-fullscreen .level-grid div {
  width: 100% !important;
  height: 100% !important;
  min-height: 50px !important;
  max-height: 60px !important;
  padding: 4px !important;
  margin: 0 !important;
  font-size: 10px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* How to Play Screen Styles */
#how-to-play-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  overflow-y: auto;
  z-index: 10000;
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
}

.tutorial-content {
  flex: 1;
  padding: 20px;
  max-width: 90vw; /* Changed from 800px to responsive width */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.tutorial-content h1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 30px;
  color: #ffd700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.tutorial-section {
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tutorial-section h2 {
  color: #ffd700;
  font-size: 1.5em;
  margin-bottom: 15px;
  border-bottom: 2px solid #ffd700;
  padding-bottom: 5px;
}

.tutorial-section p, .tutorial-section li {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 10px;
}

.control-item, .revive-option {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0;
  border-left: 4px solid #ffd700;
}

.game-element {
  display: flex;
  align-items: center;
  margin: 15px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 15px;
}

.element-icon {
  font-size: 2em;
  margin-right: 15px;
  min-width: 50px;
  text-align: center;
}

.tutorial-section ul {
  padding-left: 20px;
}

.tutorial-section ul li {
  margin-bottom: 8px;
}

/* Donation Section */
.donation-section {
  background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
  border: 2px solid #ffd700;
  border-radius: 20px;
  padding: 25px;
  margin-top: 20px;
  text-align: center;
}

.donation-section h2 {
  color: #ffd700;
  font-size: 2em;
  margin-bottom: 15px;
}

.donation-section p {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 20px;
}

.donation-amounts {
  margin: 20px 0;
}

.donation-amounts h3 {
  color: #ffd700;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.donation-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 10px auto;
  padding: 15px 20px;
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #1e3c72;
  border: none;
  border-radius: 25px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.donation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
  background: linear-gradient(45deg, #ffed4e, #ffd700);
}

.custom-donation {
  margin-top: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

.custom-donation label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #ffd700;
}

.custom-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
}

.custom-input-group input {
  width: 100px;
  padding: 10px;
  border: 2px solid #ffd700;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #1e3c72;
  font-size: 1.1em;
  text-align: center;
}

.custom-input-group span {
  font-size: 1.2em;
  font-weight: bold;
  color: #ffd700;
}

#custom-donation-btn {
  padding: 10px 20px;
  background: #ffd700;
  color: #1e3c72;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

#custom-donation-btn:hover {
  background: #ffed4e;
  transform: translateY(-1px);
}

.donation-note {
  font-size: 0.9em;
  font-style: italic;
  color: #ccc;
  margin-top: 15px;
}

/* Tutorial Buttons */
.tutorial-buttons {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.tutorial-buttons button {
  flex: 1;
  padding: 15px 25px;
  font-size: 1.2em;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#tutorial-back-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

#tutorial-back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

#tutorial-start-btn {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #1e3c72;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

#tutorial-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .tutorial-content {
    padding: 15px;
  }
  
  .tutorial-content h1 {
    font-size: 2em;
  }
  
  .tutorial-section {
    padding: 15px;
  }
  
  .game-element {
    flex-direction: column;
    text-align: center;
  }
  
  .element-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .custom-input-group {
    flex-direction: column;
    gap: 10px;
  }
  
  .tutorial-buttons {
    flex-direction: column;
  }
}

/* Fake Fullscreen for Tutorial */
body.fake-fullscreen #how-to-play-screen {
  font-size: 12px !important;
  padding: 10px !important;
  /* Use same scrolling pattern as other overlays - horizontal scroll becomes vertical in rotated view */
  overflow-x: auto !important; /* Horizontal scroll becomes vertical in rotated view */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important; /* Allow horizontal panning */
}

body.fake-fullscreen #how-to-play-screen .tutorial-content {
  padding: 10px !important;
  /* Force content to be wide enough to require horizontal scrolling */
  min-width: 150vw !important; /* Force horizontal scrolling which becomes vertical for user in rotated view */
  width: 150vw !important;
  height: auto !important;
}

body.fake-fullscreen #how-to-play-screen h1 {
  font-size: 18px !important;
  margin-bottom: 15px !important;
}

body.fake-fullscreen #how-to-play-screen h2 {
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

body.fake-fullscreen #how-to-play-screen .tutorial-section {
  padding: 8px !important;
  margin-bottom: 10px !important;
}

body.fake-fullscreen #how-to-play-screen .donation-btn {
  padding: 8px 12px !important;
  font-size: 10px !important;
  margin: 5px auto !important;
}

body.fake-fullscreen #how-to-play-screen .tutorial-buttons button {
  padding: 8px 15px !important;
  font-size: 10px !important;
}

/* Move initial splash screen slightly higher */
#mainmenu-overlay {
  margin-top: -10vh !important;
}

/* Fake fullscreen text sizing - similar to real fullscreen */
body.fake-fullscreen h1 {
  font-size: 32px !important; /* Much smaller than default 64px, same as landscape orientation */
  margin: 10px 0 !important; /* Smaller margins to match fullscreen compact layout */
}

body.fake-fullscreen h2 {
  font-size: 20px !important; /* Smaller h2 text for fake fullscreen */
  margin: 8px 0 !important; /* Smaller margins */
}

body.fake-fullscreen #gratulasjon {
  font-size: 18px !important; /* Much smaller than default 36px for better fit */
  margin-bottom: 12px !important; /* Smaller bottom margin */
}