/* Gangetavle – stilark. Bare Stiglet-tokens (/skall/stiglet.css), Chewy og Nunito. */
:root {
  --gt-ink: var(--ink, #2b2118);
  --gt-krem: var(--cream, #fff9f0);
  --gt-gul: var(--yellow, #facc15);
  /* Tabellfargene tildeles i rekkefølgen tabellene velges */
  --gt-farge-1: var(--tint-blue, #93c5fd);
  --gt-farge-2: var(--tint-green, #86efac);
  --gt-farge-3: var(--tint-orange, #fdba74);
  --gt-farge-4: var(--tint-purple, #c4b5fd);
  --gt-mellom: 7px;
  /* Brettet er et fysisk spillebrett: varm flate under hevede brikker */
  --gt-brettflate: #f4e7d2;
  --gt-loft: 3px;
  /* Brettet: min(78vh, 90vw), men aldri større enn flaten som er igjen mellom kontrollene (container-enheter) */
  --gt-side: min(78vh, 90vw, calc(100cqh - 8px), 100cqw);
  --gt-rute: calc((var(--gt-side) - 9 * var(--gt-mellom) - 2 * 14px - 8px) / 10);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background-color: var(--gt-krem); color: var(--gt-ink);
  /* svakt prikkmønster, som en rutete tavle */
  background-image: radial-gradient(rgba(43, 33, 24, 0.09) 1.5px, transparent 1.6px); background-size: 26px 26px; font-family: "Nunito", sans-serif; font-weight: 600; overflow: hidden; }

.gt { height: calc(100dvh - var(--stiglet-hode-hoyde, 76px)); display: flex; flex-direction: column; align-items: center; padding: 0.9rem 1.25rem 0.6rem; gap: 0.8rem; }
.gt-tones { transition: opacity 300ms; }
body.gt-rolig .gt-tones { opacity: 0; pointer-events: none; }

.gt-rad { width: 100%; max-width: 1400px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.gt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gt-fyll { flex: 1 1 auto; }
.gt-handlinger { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gt-rad--tabeller { justify-content: center; }

/* Brettvelgeren: én pille med tre valg, aktivt valg gult */
.gt-moduser { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 3px solid var(--gt-ink); border-radius: 999px; box-shadow: 0 4px 0 var(--gt-ink); }
.gt-modus { font: 800 20px/1 "Nunito", sans-serif; color: var(--gt-ink); background: none; border: 0; border-radius: 999px; padding: 0.55rem 1.05rem; cursor: pointer; transition: background-color 150ms; }
.gt-modus:hover { background: var(--gt-krem); }
.gt-modus[aria-pressed="true"] { background: var(--gt-gul); box-shadow: inset 0 0 0 2px var(--gt-ink); }
.gt-modus:focus-visible { outline: 4px solid var(--gt-gul); outline-offset: 3px; }
.gt-chip {
  font: 800 22px/1 "Nunito", sans-serif; color: var(--gt-ink); background: #fff; border: 3px solid var(--gt-ink); border-radius: 999px;
  padding: 0.45rem 0.85rem; min-width: 3.1rem; box-shadow: 0 4px 0 var(--gt-ink); cursor: pointer; transition: background-color 150ms;
}
.gt-chip:active { transform: translateY(4px); box-shadow: none; }
.gt-chip:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: 0 4px 0 var(--gt-ink); }
.gt-cta { background: var(--coral, #fa5c66); color: var(--gt-krem); }
.gt-chip[aria-pressed="true"] { background: var(--gt-chip-farge, var(--gt-gul)); }
#stykker[aria-pressed="true"] { background: var(--gt-gul); }
.gt-chip.rist, .gt-rute.rist { animation: gt-rist 300ms linear; }
@keyframes gt-rist { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 50% { translate: 4px 0; } 75% { translate: -4px 0; } }
.gt-chip:focus-visible, .gt-rute:focus-visible, .gt-hjorne button:focus-visible { outline: 4px solid var(--gt-gul); outline-offset: 3px; }

.gt-flate { flex: 1 1 0; min-height: 0; width: 100%; container-type: size; display: flex; justify-content: center; align-items: center; }
.gt-brett {
  width: var(--gt-side); height: var(--gt-side); flex: 0 0 auto; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
  gap: var(--gt-mellom); padding: 14px; background: var(--gt-brettflate); border: 4px solid var(--gt-ink); border-radius: 26px; box-shadow: 0 8px 0 var(--gt-ink);
}
.gt-rute {
  position: relative; min-width: 0; min-height: 0; padding: 0; border: 2.5px solid var(--gt-ink); border-radius: 12px; background: #fff; color: var(--gt-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; font: inherit;
  box-shadow: 0 var(--gt-loft) 0 var(--gt-ink); translate: 0 calc(var(--gt-loft) * -0.5);
  transition: background-color 150ms, color 150ms, box-shadow 120ms, translate 120ms;
}
.gt-rute:hover { background-color: var(--gt-krem); }
.gt-rute:active { box-shadow: 0 0 0 var(--gt-ink); translate: 0 calc(var(--gt-loft) * 0.5); }
.gt-tall { font: 400 min(clamp(22px, 4.4vh, 54px), calc(var(--gt-rute) * 0.54))/1 "Chewy", cursive; }
.gt-stykker { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.gt-stykke { font: 800 min(clamp(11px, 1.6vh, 18px), calc(var(--gt-rute) * 0.2))/1.1 "Nunito", sans-serif; white-space: nowrap; }
.gt-rute.har-stykker .gt-tall { font-size: min(clamp(22px, 4vh, 48px), calc(var(--gt-rute) * 0.38)); }
.gt-rute[data-farge="1"] { background-color: var(--gt-farge-1); }
.gt-rute[data-farge="2"] { background-color: var(--gt-farge-2); }
.gt-rute[data-farge="3"] { background-color: var(--gt-farge-3); }
.gt-rute[data-farge="4"] { background-color: var(--gt-farge-4); }
/* Felles multiplum: mørk brikke med gule tall */
.gt-rute.felles { background-color: var(--gt-ink); color: var(--gt-gul); }
/* Skjult: krem med stiplet kant; tabellfargen beholdes som en ring innenfor kanten */
/* Skjult: brikken er trykket ned i brettet */
.gt-rute.skjult { background-color: var(--gt-brettflate); border-style: dashed; translate: 0 calc(var(--gt-loft) * 0.5); }
.gt-rute.skjult .gt-tall, .gt-rute.skjult .gt-stykker { visibility: hidden; }
.gt-rute.skjult[data-farge="1"] { box-shadow: inset 0 0 0 5px var(--gt-farge-1); }
.gt-rute.skjult[data-farge="2"] { box-shadow: inset 0 0 0 5px var(--gt-farge-2); }
.gt-rute.skjult[data-farge="3"] { box-shadow: inset 0 0 0 5px var(--gt-farge-3); }
.gt-rute.skjult[data-farge="4"] { box-shadow: inset 0 0 0 5px var(--gt-farge-4); }
.gt-rute.skjult.felles { box-shadow: inset 0 0 0 5px var(--gt-ink); }
.gt-rute.skjult:not([data-farge]):not(.felles) { box-shadow: none; }

/* Infolinja er en etikett under brettet, ikke en knapp: ingen skygge */
.gt-info { margin: 0.35rem 0 0; max-width: min(1200px, 96vw); text-align: center; font: 700 20px/1.35 "Nunito", sans-serif; color: var(--gt-ink); background: #fff; border: 3px solid var(--gt-ink); border-radius: 18px; padding: 0.45rem 1.2rem; }

.gt-bunn { width: 100%; display: flex; justify-content: flex-end; margin-top: auto; }
.gt-hjorne { display: flex; gap: 0.25rem; }
.gt-hjorne button { font: 800 14px/1 "Nunito", sans-serif; background: none; border: 0; padding: 0.45rem 0.5rem; color: var(--gt-ink); text-decoration: underline; text-decoration-thickness: 2px; cursor: pointer; }
.gt-hjorne button:hover { color: var(--coral, #fa5c66); }

.gt-melding { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem); background: var(--gt-ink); color: var(--gt-krem); font: 800 1.1rem/1 "Nunito", sans-serif; padding: 0.8rem 1.4rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms; z-index: 60; }
.gt-melding.vis { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Gangebrett: 1–10 i kanten, gangestykke eller svar i rutene ---------- */
.gt-brett--gange {
  grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
  --gt-rute-g: calc((var(--gt-side) - 10 * var(--gt-mellom) - 2 * 14px - 8px) / 11);
}
.gt-hjornerute { display: block; }
.gt-kant {
  min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--gt-ink); cursor: pointer;
  font: 400 calc(var(--gt-rute-g) * 0.56)/1 "Chewy", cursive; transition: background-color 150ms, box-shadow 150ms;
}
.gt-kant:hover, .gt-kant.lys { background: var(--gt-gul); box-shadow: inset 0 0 0 2.5px var(--gt-ink); }
.gt-kant:focus-visible, .gt-gange:focus-visible { outline: 4px solid var(--gt-gul); outline-offset: 2px; }
.gt-gange {
  min-width: 0; min-height: 0; padding: 0; border: 2.5px solid var(--gt-ink); border-radius: 12px; background: #fff; color: var(--gt-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 var(--gt-loft) 0 var(--gt-ink); translate: 0 calc(var(--gt-loft) * -0.5); transition: background-color 150ms, box-shadow 120ms, translate 120ms;
}
.gt-gange:hover { background: var(--gt-krem); }
.gt-gange:active { box-shadow: 0 0 0 var(--gt-ink); translate: 0 calc(var(--gt-loft) * 0.5); }
.gt-gange .gt-side { font: 800 calc(var(--gt-rute-g) * 0.28)/1 "Nunito", sans-serif; letter-spacing: -0.02em; white-space: nowrap; }
.gt-gange.svar .gt-side { font: 400 calc(var(--gt-rute-g) * 0.46)/1 "Chewy", cursive; }
.gt-gange.vist, .gt-gange.vist:hover { background: var(--gt-farge-1); }
.gt-gange.vend { animation: gt-vend 280ms ease-in-out var(--gt-vent, 0ms) both; }
@keyframes gt-vend { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0); } }

/* ---------- Eratostenes' sil: strøkne tall får fargen til primtallet, primtallene gule ---------- */
.gt-silrute { transition: background-color 220ms var(--gt-vent, 0ms), border-color 220ms var(--gt-vent, 0ms), transform 220ms var(--gt-vent, 0ms), box-shadow 220ms var(--gt-vent, 0ms), translate 220ms var(--gt-vent, 0ms); }
.gt-silrute .gt-tall { transition: opacity 220ms var(--gt-vent, 0ms); }
.gt-silrute::after {
  content: ""; position: absolute; left: 16%; right: 16%; top: calc(50% - 2px); height: 4px; border-radius: 4px; background: var(--gt-ink);
  transform: rotate(-38deg) scaleX(0); transition: transform 220ms var(--gt-vent, 0ms);
}
.gt-silrute.stroket { box-shadow: 0 0 0 var(--gt-ink); translate: 0 calc(var(--gt-loft) * 0.5); }
.gt-silrute.stroket .gt-tall { opacity: 0.4; }
.gt-silrute.stroket::after { transform: rotate(-38deg) scaleX(1); }
.gt-silrute.en { border-style: dashed; background-color: var(--gt-brettflate); box-shadow: none; translate: 0 calc(var(--gt-loft) * 0.5); }
.gt-silrute.en .gt-tall { opacity: 0.4; }
.gt-silrute.primtall { background-color: var(--gt-gul); border-width: 3px; box-shadow: 0 calc(var(--gt-loft) + 1px) 0 var(--gt-ink); }
.gt-silrute.aktiv { transform: scale(1.1); box-shadow: 0 0 0 4px var(--gt-ink), 0 calc(var(--gt-loft) + 5px) 0 var(--gt-ink); z-index: 1; }
.gt-silrute.uten-overgang, .gt-silrute.uten-overgang::after, .gt-silrute.uten-overgang .gt-tall { transition: none; }

/* iPad og smale skjermer: én kontrollrad */
@media (max-width: 1100px) {
  .gt-chip { font-size: 18px; padding: 0.4rem 0.6rem; min-width: 2.6rem; }
  .gt-chips { gap: 0.35rem; }
  .gt-modus { font-size: 17px; padding: 0.5rem 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-rute, .gt-gange, .gt-chip, .gt-tones { transition: none; }
  .gt-chip.rist, .gt-rute.rist { animation: none; }
  .gt-gange.vend { animation: none; }
  .gt-silrute, .gt-silrute::after, .gt-silrute .gt-tall { transition: none; }
}