/* CUSTOM STYLES FOR REPUBLIK NOL */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=JetBrains+Mono:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

h1, h2, h3, .font-heading {
  font-family: 'Cinzel', serif;
}

.font-mono {
  font-family: 'JetBrains+Mono', monospace;
}

/* PAPERCUT DIORAMA & SHADOWBOX LIGHTBOX STYLES */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=JetBrains+Mono:wght@400;600;700&family=Cinzel:wght@700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #2a2521; /* Rich dark museum shadowbox casing tone */
}

h1, h2, h3, .font-heading {
  font-family: 'Comfortaa', cursive, sans-serif;
}

.font-cinzel {
  font-family: 'Cinzel', serif;
}

.font-mono {
  font-family: 'JetBrains+Mono', monospace;
}

/* PHYSICAL SHADOWBOX FRAME EFFECT */
.shadowbox-casing {
  box-shadow: 
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    inset 0 0 15px rgba(20, 15, 10, 0.6),
    0 20px 40px rgba(0, 0, 0, 0.35);
  position: relative;
}

/* Ambient Top Gallery Spotlight */
.shadowbox-spotlight {
  background: radial-gradient(circle at 50% -10%, rgba(254, 240, 138, 0.22) 0%, rgba(254, 240, 138, 0.05) 50%, transparent 80%);
  pointer-events: none;
}

/* Papercut Layer Effect */
.paper-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 0 #d9cdb8, 0 8px 18px rgba(100, 80, 50, 0.12);
  border: 1.5px solid #ece4d4;
}

.paper-btn {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  transition: all 0.12s ease;
}

.paper-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.paper-dashed {
  border: 2px dashed #d6c8b0;
}

/* Gold Foil Emboss */
.gold-foil {
  background: linear-gradient(135deg, #fef08a 0%, #d97706 50%, #b45309 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border: 1px solid #fde047;
}

/* Laser Die-Cut Paper Effect */
.laser-diecut {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

/* Custom Scrollbar */
.hidden {
  display: none !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f4eee2;
}

::-webkit-scrollbar-thumb {
  background: #d6cbba;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b5a48e;
}

/* Tabs */
.tab-btn.active {
  background-color: #ffffff;
  border-bottom: 3px solid #f59e0b;
  color: #b45309;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(100, 80, 50, 0.08);
}

/* Riot Glitch FX */
.riot-shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both infinite;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Breaking news glowing border */
.breaking-glow {
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
}

/* Isometric Canvas styling */
#gameCanvas {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile Safe Area & Dynamic Viewport Height (iOS Safari Fix) */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

html, body {
  height: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  width: 100vw;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#mobileBottomDock {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  pointer-events: auto;
}

.floating-zoom-controls {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

.safe-top-inset {
  padding-top: max(0.25rem, env(safe-area-inset-top, 0.25rem));
}

.safe-bottom-inset {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0.5rem));
}

/* Suppress Netlify Collaborative Preview Badge / Drawer if injected */
iframe[src*="netlify"],
[data-netlify-deploy-preview-badge],
.netlify-badge,
#netlify-drawer-container,
.netlify-feedback-drawer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Extra safe padding for drawer footer */
.drawer-admin-footer {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}