/* Global design scoped under #app to minimize conflicts with games */
#app { 
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; 
  color: #2d3748; 
  background: #E0F9F4;
  background-attachment: fixed;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Dark mode */
#app.dark-mode { 
  color: #e2e8f0; 
  background: linear-gradient(135deg, #0f1115 0%, #1a1d29 50%, #0f1115 100%);
}

#app a { color: #0891b2; text-decoration: none; }
#app a:hover { color: #0e7490; }

#app.dark-mode a { color: #38bdf8; }
#app.dark-mode a:hover { color: #7dd3fc; }

/* Header */
#app .site-header { 
  background: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: sticky; 
  top: 0; 
  z-index: 10;
  padding: 0;
}

#app .site-header .header-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

#app .site-header h1 { 
  margin: 0; 
  font-size: 1.8rem; 
  font-weight: 700;
  color: white;
}

#app .site-header h1 a { 
  color: white; 
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Hovednavigasjon */
#app .main-nav ul { 
  display: flex; 
  gap: 0.5rem; 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  flex-wrap: wrap;
  align-items: center;
}

#app .main-nav > ul > li {
  position: relative;
}

#app .main-nav ul li a,
#app .main-nav ul li button {
  color: white;
  background: rgba(255,255,255,0.2);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: block;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

#app .main-nav ul li a:hover,
#app .main-nav ul li button:hover {
  background: rgba(255,255,255,0.3);
}

/* Dropdown styling */
#app .dropdown {
  position: relative;
}

#app .dropdown-toggle {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: inherit;
}

#app .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  min-width: 200px;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  display: none !important;
  visibility: hidden;
  opacity: 0;
  z-index: 1000;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

#app.dark-mode .dropdown-menu {
  background: #1e293b;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

#app .dropdown.active .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app .dropdown-menu li {
  margin: 0;
}

#app .dropdown-menu li a {
  color: #1e293b;
  background: transparent;
  padding: 0.7rem 1.2rem;
  border-radius: 0;
  font-size: 0.95rem;
  transition: background 0.15s ease;
}

#app.dark-mode .dropdown-menu li a {
  color: #e2e8f0;
}

#app .dropdown-menu li a:hover {
  background: #f1f5f9;
}

#app.dark-mode .dropdown-menu li a:hover {
  background: #2d3748;
}

/* 70% bredde layout - sentrert */
#app .site-main { 
  padding: 2rem 1.5rem; 
  max-width: 1100px; 
  margin: 0 auto;
  background: white;
  min-height: calc(100vh - 200px);
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* Intro container */
#app .intro-container {
  margin-bottom: 2.5rem;
}

#app .intro-box {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

#app .intro-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #0891b2 0%, #7c3aed 100%);
}

#app .intro-icon {
  font-size: 3rem;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  margin-left: 0.5rem;
}

#app .intro-content {
  flex: 1;
}

#app .intro-content h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

#app .intro-content p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
}

/* Dark mode */
#app.dark-mode .intro-box {
  background: linear-gradient(135deg, #1a1f2e 0%, #151a26 100%);
  border-color: #2d3748;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

#app.dark-mode .intro-box::before {
  background: linear-gradient(180deg, #38bdf8 0%, #8b5cf6 100%);
}

#app.dark-mode .intro-content h3 {
  color: #f1f5f9;
}

#app.dark-mode .intro-content p {
  color: #cbd5e1;
}

/* Responsiv */
@media (max-width: 768px) {
  #app .intro-box {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
  }
  
  #app .intro-icon {
    font-size: 2.5rem;
    margin-left: 0;
  }
  
  #app .intro-content h3 {
    font-size: 1.3rem;
  }
  
  #app .intro-content p {
    font-size: 1rem;
  }
}

#app .grid { 
  display:grid; 
  gap: 1.5rem; 
  grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); 
}

/* Kategori seksjoner på hovedsiden */
#app .category-section {
  margin-bottom: 3rem;
}

#app .category-section:last-of-type {
  margin-bottom: 1rem;
}

#app .category-section h2 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.5rem;
}

#app.dark-mode .category-section h2 {
  border-bottom-color: #2d3748;
}

/* Forbedrede kort med mer spacing */
#app .card { 
  border: 2px solid #e2e8f0; 
  border-radius: 14px; 
  padding: 1.26rem; 
  background: white; 
  transition: all .3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}

#app.dark-mode .card {
  border-color: #2d3748;
  background: #1a1f2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#app .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #0891b2, #7c3aed);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#app .card:hover::before {
  opacity: 1;
}

#app .card:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border-color: #cbd5e1;
}

#app .card h3 {
  color: #1e293b;
  font-weight: 600;
  margin: 0.35rem 0;
  font-size: 1.05rem;
}

#app.dark-mode .card h3 {
  color: #f1f5f9;
}

/* Større emojis */
#app .card .emoji {
  font-size: 2.45rem;
  margin-bottom: 0.35rem;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

#app .muted { 
  color: #64748b; 
  font-size: 0.75rem; 
  margin: 0;
}

#app.dark-mode .muted {
  color: #94a3b8;
}

#app h2 { 
  margin: 1rem 0 1.5rem; 
  color: #1e293b;
  font-weight: 700;
  font-size: 1.8rem;
}

#app.dark-mode h2 {
  color: #f1f5f9;
}

#app h2 .emoji { 
  font-size: 2.2rem; 
  vertical-align: middle; 
  margin-right: 0.3rem;
}

/* Kategorifarge-system - moderne og fargerike */
#app .card.cat-verb { 
  border-color: #3b82f6;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}
#app .card.cat-verb:hover { 
  border-color: #2563eb;
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.25);
}
#app .card.cat-verb::before {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

#app .card.cat-substantiv { 
  border-color: #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}
#app .card.cat-substantiv:hover { 
  border-color: #059669;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.25);
}
#app .card.cat-substantiv::before {
  background: linear-gradient(90deg, #10b981, #047857);
}

#app .card.cat-adjektiv { 
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
}
#app .card.cat-adjektiv:hover { 
  border-color: #7c3aed;
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.25);
}
#app .card.cat-adjektiv::before {
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
}

#app .card.cat-adverb { 
  border-color: #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}
#app .card.cat-adverb:hover { 
  border-color: #d97706;
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.25);
}
#app .card.cat-adverb::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

#app .card.cat-setningsbyggere { 
  border-color: #ec4899;
  background: linear-gradient(135deg, #ffffff 0%, #fdf2f8 100%);
}
#app .card.cat-setningsbyggere:hover { 
  border-color: #db2777;
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.25);
}
#app .card.cat-setningsbyggere::before {
  background: linear-gradient(90deg, #ec4899, #db2777);
}

#app .card.cat-ordklasser { 
  border-color: #14b8a6;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
}
#app .card.cat-ordklasser:hover { 
  border-color: #0d9488;
  box-shadow: 0 8px 30px rgba(20, 184, 166, 0.25);
}
#app .card.cat-ordklasser::before {
  background: linear-gradient(90deg, #14b8a6, #0d9488);
}

/* Nye kategorier */
#app .card.cat-tegnsetting { 
  border-color: #ef4444;
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}
#app .card.cat-tegnsetting:hover { 
  border-color: #dc2626;
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.25);
}
#app .card.cat-tegnsetting::before {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

#app .card.cat-tekstbygger { 
  border-color: #f59e0b;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
}
#app .card.cat-tekstbygger:hover { 
  border-color: #d97706;
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.25);
}
#app .card.cat-tekstbygger::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

#app .card.cat-diverse { 
  border-color: #6366f1;
  background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
}
#app .card.cat-diverse:hover { 
  border-color: #4f46e5;
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.25);
}
#app .card.cat-diverse::before {
  background: linear-gradient(90deg, #6366f1, #4f46e5);
}

/* Dark mode kategorifarger - mørkere versjoner */
#app.dark-mode .card.cat-verb {
  background: linear-gradient(135deg, #1e293b 0%, #1a2332 100%);
  border-color: #3b82f6;
}

#app.dark-mode .card.cat-substantiv {
  background: linear-gradient(135deg, #1e293b 0%, #1a2e26 100%);
  border-color: #10b981;
}

#app.dark-mode .card.cat-adjektiv {
  background: linear-gradient(135deg, #1e293b 0%, #2a1f32 100%);
  border-color: #8b5cf6;
}

#app.dark-mode .card.cat-adverb {
  background: linear-gradient(135deg, #1e293b 0%, #322519 100%);
  border-color: #f59e0b;
}

#app.dark-mode .card.cat-setningsbyggere {
  background: linear-gradient(135deg, #1e293b 0%, #321927 100%);
  border-color: #ec4899;
}

#app.dark-mode .card.cat-ordklasser {
  background: linear-gradient(135deg, #1e293b 0%, #19322e 100%);
  border-color: #14b8a6;
}

#app.dark-mode .card.cat-tegnsetting {
  background: linear-gradient(135deg, #1e293b 0%, #321919 100%);
  border-color: #ef4444;
}

#app.dark-mode .card.cat-tekstbygger {
  background: linear-gradient(135deg, #1e293b 0%, #322519 100%);
  border-color: #f59e0b;
}

#app.dark-mode .card.cat-diverse {
  background: linear-gradient(135deg, #1e293b 0%, #1f1f32 100%);
  border-color: #6366f1;
}

/* Game wrapper area */
#app #game-wrapper { 
  background: white; 
  border: 2px solid #e2e8f0; 
  border-radius: 20px; 
  padding: 1.5rem; 
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 1rem;
}

#app.dark-mode #game-wrapper {
  background: #1a1f2e;
  border-color: #2d3748;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#app #game-root { isolation: isolate; }

/* Footer */
#app .site-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  color: #64748b;
  margin-top: 3rem;
}

#app.dark-mode .site-footer {
  color: #94a3b8;
}

/* Tilbake-knapp forbedring */
#app .site-main > a[href="/"],
#app .site-main > a[href^="/"][href$="/"] {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #0891b2, #7c3aed);
  color: white;
  border-radius: 10px;
  font-weight: 500;
  margin-bottom: 1.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
}

#app .site-main > a[href="/"]:hover,
#app .site-main > a[href^="/"][href$="/"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);
}

/* Floating Dark mode toggle knapp - nederst til høyre */
#theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: linear-gradient(135deg, #0891b2 0%, #7c3aed 100%);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.8rem;
  box-shadow: 0 4px 20px rgba(8, 145, 178, 0.4);
  z-index: 100;
}

#theme-toggle:hover {
  transform: rotate(20deg) scale(1.1);
  box-shadow: 0 6px 30px rgba(8, 145, 178, 0.6);
}

#theme-toggle:active {
  transform: rotate(20deg) scale(0.95);
}

#theme-toggle .theme-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

@media (max-width: 768px) {
  #theme-toggle {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
  }
}