/*
 * Nirucon Runor – stylesheet
 * Version: 1.0.9
 */

/* ── Variabler ────────────────────────────────────────────────────────────
   Accentfärgen följer temats årstid automatiskt.
   Nav och mörka ytor använder fasta värden så kontrasten alltid håller.
   ──────────────────────────────────────────────────────────────────────── */
.nr-runor {
  --nr-accent:     var(--accent, #B82A1A);
  --nr-parchment:  var(--color-parchment, #F4EFE4);
  --nr-surface:    var(--bg-surface, #EDE6D6);
  --nr-snow:       var(--color-snow, #D4C9B4);
  --nr-muted:      var(--color-muted, #8C8279);
  --nr-bark:       var(--color-bark, #6B4226);
  --nr-border:     var(--border, #C8B8A8);

  /* Nav-färger är alltid fasta – aldrig temaberoende */
  --nr-nav-bg:     #1A1008;
  --nr-nav-hover:  #2A1E10;
  --nr-nav-active: #2E2010;

  --nr-radius:     8px;
  --nr-font-body:  var(--font-body, 'Jost', sans-serif);
  --nr-font-disp:  var(--font-display, 'Cormorant Garamond', Georgia, serif);
  --nr-dur:        0.22s;

  font-family: var(--nr-font-body);
  background: var(--nr-parchment);
  color: #1A1008;
  border: 1px solid var(--nr-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto 2.5rem;
}

/* ── Tabbnavigation ── */
.nr-tabs {
  display: flex;
  background: var(--nr-nav-bg);
  border-bottom: 3px solid var(--nr-accent);
}

.nr-tab {
  flex: 1;
  padding: 14px 10px;
  text-align: center;
  font-family: var(--nr-font-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C8B8A8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--nr-dur), color var(--nr-dur);
  white-space: nowrap;
}

.nr-tab:hover {
  background: var(--nr-nav-hover);
  color: #F4EFE4;
}

.nr-tab--active,
.nr-tab[aria-selected="true"] {
  background: var(--nr-nav-active);
  color: #F4EFE4;
  box-shadow: inset 0 -3px 0 var(--nr-accent);
}

/* ── Panel ── */
.nr-panel {
  padding: 20px;
}

/* ── Runegrid ── */
.nr-rune-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.nr-rune-btn {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #F4EFE4;
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius);
  cursor: pointer;
  transition: background var(--nr-dur), border-color var(--nr-dur), transform 0.15s;
  padding: 8px 4px;
}

.nr-rune-btn:hover {
  background: var(--nr-nav-bg);
  border-color: var(--nr-accent);
  transform: translateY(-2px);
}

.nr-rune-btn--active {
  background: var(--nr-nav-bg);
  border-color: var(--nr-accent);
}

.nr-rune-btn__sym {
  font-family: var(--nr-font-disp);
  font-size: clamp(22px, 3vw, 32px);
  color: #1A1008;
  line-height: 1;
  transition: color var(--nr-dur);
  font-weight: 400;
}

.nr-rune-btn:hover .nr-rune-btn__sym,
.nr-rune-btn--active .nr-rune-btn__sym {
  color: #F4EFE4;
}

.nr-rune-btn__name {
  font-family: var(--nr-font-body);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3A2010;
  transition: color var(--nr-dur);
  line-height: 1.2;
}

.nr-rune-btn:hover .nr-rune-btn__name,
.nr-rune-btn--active .nr-rune-btn__name {
  color: #E0D4C0;
}

/* ── Platshållare ── */
.nr-placeholder {
  text-align: center;
  padding: 28px 16px;
  color: #8C8279;
  font-size: 0.9rem;
  line-height: 1.65;
}

.nr-placeholder__rune {
  display: block;
  font-family: var(--nr-font-disp);
  font-size: 52px;
  color: #C8B8A8;
  margin-bottom: 10px;
  line-height: 1;
}

/* ── Runa-detaljkort ── */
.nr-detail {
  display: grid;
  grid-template-columns: 170px 1fr;
  background: #F4EFE4;
  border: 1px solid #C8B8A8;
  border-radius: 10px;
  overflow: hidden;
  animation: nr-fadein 0.3s ease both;
}

@keyframes nr-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nr-detail__left {
  background: var(--nr-nav-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
  gap: 7px;
}

.nr-detail__sym {
  font-family: var(--nr-font-disp);
  font-size: 68px;
  color: #F4EFE4;
  line-height: 1;
}

.nr-detail__name {
  font-family: var(--nr-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E0A878;
}

.nr-detail__sound {
  font-size: 0.82rem;
  color: #C8BEA8;
  font-family: var(--nr-font-body);
}

.nr-detail__aett {
  font-size: 0.65rem;
  color: #A09888;
  font-family: var(--nr-font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
  text-align: center;
  line-height: 1.4;
}

.nr-detail__right {
  padding: 18px 20px;
  background: #F4EFE4;
}

/* Lagerflikar */
.nr-layer-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.nr-layer-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--nr-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid #7A6050;
  background: transparent;
  color: #1A0E04;
  cursor: pointer;
  transition: all var(--nr-dur);
  font-weight: 500;
}

.nr-layer-btn:hover {
  border-color: var(--nr-accent);
  color: var(--nr-accent);
  background: rgba(184,42,26,0.06);
}

.nr-layer-btn--active {
  background: var(--nr-accent);
  border-color: var(--nr-accent);
  color: #F4EFE4;
}

/* Lagertext */
.nr-layer-content {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #1A1008 !important;
  animation: nr-fadein 0.2s ease both;
}

/* Galdr-box */
.nr-galdr-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--nr-nav-bg);
  border-radius: var(--nr-radius);
  padding: 14px 16px;
  margin-top: 14px;
}

.nr-galdr-box__sym {
  font-family: var(--nr-font-disp);
  font-size: 30px;
  color: #D4956A;
  flex-shrink: 0;
}

.nr-galdr-box__text {
  font-size: 0.85rem;
  color: #D4C9B4;
  font-family: var(--nr-font-body);
  line-height: 1.6;
}

.nr-galdr-box__text em {
  color: #D4956A;
  font-style: italic;
}

/* ── Quiz resultat ── */
.nr-quiz-result {
  text-align: center;
  padding: var(--nr-space-lg) var(--nr-space-md);
  animation: nr-fadein 0.4s ease both;
}

.nr-quiz-result__score {
  font-family: var(--nr-font-disp);
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--nr-accent);
  margin-bottom: 0.5em;
  letter-spacing: 0.04em;
}

.nr-quiz-result__msg {
  font-size: 1rem;
  line-height: 1.7;
  color: #3A2810;
  max-width: 440px;
  margin: 0 auto 1.6em;
  font-style: italic;
}

.nr-quiz-result__btn {
  background: var(--nr-accent);
  color: #F4EFE4;
  border: none;
  border-radius: 24px;
  padding: 10px 28px;
  font-family: var(--nr-font-body);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}

.nr-quiz-result__btn:hover {
  opacity: 0.85;
}

/* ── Quiz ── */
.nr-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nr-border);
}

.nr-quiz-modes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.nr-mode-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--nr-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid #B0A090;
  background: transparent;
  color: #4A3020;
  cursor: pointer;
  transition: all var(--nr-dur);
}

.nr-mode-btn:hover {
  border-color: var(--nr-accent);
  color: var(--nr-accent);
}

.nr-mode-btn--active {
  background: var(--nr-nav-bg);
  border-color: var(--nr-nav-bg);
  color: #F4EFE4;
}

.nr-quiz-score {
  font-family: var(--nr-font-body);
  font-size: 0.85rem;
  color: #8C8279;
}

.nr-quiz-score strong {
  color: var(--nr-accent);
  font-size: 1.25rem;
}

.nr-quiz-question {
  text-align: center;
  margin-bottom: 24px;
}

.nr-quiz-rune {
  display: block;
  font-family: var(--nr-font-disp);
  font-size: clamp(64px, 14vw, 96px);
  color: #1A1008;
  line-height: 1;
  margin-bottom: 10px;
  animation: nr-fadein 0.25s ease both;
}

.nr-quiz-label {
  font-family: var(--nr-font-body);
  font-size: 0.72rem;
  color: #8C8279;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nr-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

.nr-quiz-opt {
  padding: 14px 10px;
  background: #F4EFE4 !important;
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius);
  cursor: pointer;
  font-family: var(--nr-font-disp);
  font-size: 1.05rem;
  text-align: center;
  color: #1A1008;
  transition: border-color var(--nr-dur), color var(--nr-dur), background var(--nr-dur);
}

.nr-quiz-opt:hover:not(:disabled) {
  border-color: var(--nr-accent);
  color: var(--nr-accent);
  background: #EDE6D6;
  font-weight: 500;
}

.nr-quiz-opt--correct {
  background: #1a3a0e !important;
  border-color: #4a8830 !important;
  color: #b8e890 !important;
}

.nr-quiz-opt--wrong {
  background: #3a0e0e !important;
  border-color: #882820 !important;
  color: #e89090 !important;
}

/* ── Spådom ── */
.nr-draw-intro {
  text-align: center;
  padding: 6px 0 24px;
}

.nr-draw-intro p {
  font-size: 0.95rem;
  color: #3A2810;
  line-height: 1.75;
  max-width: 500px;
  margin: 0 auto 22px;
}

.nr-spa-btn,
.nr-draw-btn {
  padding: 14px 40px;
  background: var(--nr-nav-bg);
  border: 1px solid var(--nr-accent);
  border-radius: 30px;
  color: #F4EFE4;
  font-family: var(--nr-font-disp);
  font-size: 1rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--nr-dur), transform 0.15s;
}

.nr-spa-btn:hover,
.nr-draw-btn:hover {
  background: var(--nr-accent);
}

.nr-spa-btn:active,
.nr-draw-btn:active {
  transform: scale(0.97);
}

/* Draw result */
.nr-draw-result {
  display: grid;
  grid-template-columns: 160px 1fr;
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
  animation: nr-fadein 0.4s ease both;
}

.nr-spa-result {
  display: grid;
  grid-template-columns: 140px 1fr;
  background: var(--nr-surface);
  border: 1px solid var(--nr-border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
  animation: nr-fadein 0.4s ease both;
}

.nr-spa-result__left,
.nr-draw-result__left {
  background: var(--nr-nav-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 12px;
  gap: 8px;
}

.nr-spa-result__sym,
.nr-draw-result__sym {
  font-family: var(--nr-font-disp);
  font-size: 64px;
  color: #F4EFE4;
  line-height: 1;
}

.nr-spa-result__name,
.nr-draw-result__name {
  font-family: var(--nr-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E0A878;
}

.nr-draw-result__sound {
  font-size: 0.8rem;
  color: #C8BEA8;
  font-family: var(--nr-font-body);
}

.nr-draw-result__aett {
  font-size: 0.6rem;
  color: #A09888;
  font-family: var(--nr-font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.4;
}

.nr-spa-result__right,
.nr-draw-result__right {
  padding: 22px 24px;
  overflow-y: auto;
}

.nr-draw-section {
  margin-bottom: 18px;
}

.nr-draw-section:last-child {
  margin-bottom: 0;
}

.nr-draw-section__title {
  font-family: var(--nr-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nr-accent);
  margin: 0 0 6px;
  font-weight: 600;
}

.nr-draw-section__text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #1A1008;
  margin: 0;
}

.nr-spa-section-title {
  font-family: var(--nr-font-body);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nr-accent);
  margin: 14px 0 5px;
}

.nr-spa-section-title:first-child {
  margin-top: 0;
}

.nr-spa-section-text {
  font-size: 0.9rem;
  line-height: 1.72;
  color: #1A1008;
}

/* ── Footer ── */
.nr-footer {
  padding: 13px 20px;
  background: var(--nr-nav-bg);
  text-align: center;
  font-family: var(--nr-font-body);
  font-size: 0.72rem;
  color: #A89880;
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.nr-footer__link {
  color: #A89880;
  text-decoration: none;
  transition: color var(--nr-dur);
}

.nr-footer__link:hover {
  color: var(--nr-accent);
}

/* ════════════════════════════════════
   RESPONSIVT
   ════════════════════════════════════ */

/* Tablet – 4 kolumner */
@media (max-width: 720px) {
  .nr-rune-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .nr-rune-btn__sym { font-size: clamp(18px, 4vw, 26px); }
  .nr-rune-btn__name { font-size: 9px; }

  .nr-detail {
    grid-template-columns: 130px 1fr;
  }

  .nr-detail__sym { font-size: 50px; }
  .nr-panel { padding: 16px; }
}

/* Mobil – 3 kolumner, namn kvar men lite mindre */
@media (max-width: 540px) {

  .nr-tabs {
    flex-wrap: nowrap;
  }

  .nr-tab {
    font-size: 0.56rem;
    padding: 11px 4px;
    letter-spacing: 0.06em;
  }

  .nr-rune-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .nr-rune-btn__sym  { font-size: clamp(20px, 7vw, 28px); }
  .nr-rune-btn__name { font-size: 8px; display: block; }

  /* Detaljkort – stapla vertikalt */
  .nr-detail {
    grid-template-columns: 1fr;
  }

  .nr-detail__left {
    flex-direction: row;
    justify-content: flex-start;
    padding: 14px 16px;
    gap: 14px;
  }

  .nr-detail__sym   { font-size: 44px; }
  .nr-detail__aett  { text-align: left; }

  .nr-layer-btn {
    font-size: 0.6rem;
    padding: 4px 9px;
  }

  .nr-quiz-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .nr-quiz-options {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .nr-quiz-rune { font-size: clamp(56px, 18vw, 80px); }

  .nr-spa-result {
    grid-template-columns: 1fr;
  }

  .nr-spa-result__left {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 16px;
  }

  .nr-spa-result__sym { font-size: 40px; }
}

/* Mycket smal – 2 kolumner i quiz, 3 i grid */
@media (max-width: 360px) {
  .nr-quiz-options {
    grid-template-columns: 1fr;
  }

  .nr-rune-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .nr-rune-btn__name { font-size: 7px; }
}