/* =========================================================
   ORDREJSEN  –  Words of Wonders-stil krydsordsspil
   ========================================================= */

/* ── Tema-variabler (sættes fra JS per niveau) ─────────────── */
:root {
  --or-bg:     #1a3a5c;
  --or-accent: #c8102e;
}

/* ── Topbar (tema + point) ─────────────────────────────────── */
.or-topbar {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 16px;
}

#or-tema {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--or-accent);
  letter-spacing: 1px;
}

#or-point {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--yellow);
}

/* ── Hoved-layout ──────────────────────────────────────────── */
.or-main {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* ── Status-linje ──────────────────────────────────────────── */
#or-status {
  font-size: 0.8rem;
  color: var(--subtext);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Gitter ────────────────────────────────────────────────── */
#or-gitter {
  display: grid;
  gap: 4px;
}

.or-celle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 6px;
  /* størrelse sættes fra JS */
}

.or-celle--tom {
  background: transparent;
  border: none;
  pointer-events: none;
}

.or-celle--aktiv {
  background: var(--surface);
  border: 2px solid var(--border);
  color: transparent;
}

.or-celle--fundet {
  background: var(--or-bg);
  border: 2px solid var(--or-accent);
  color: #fff;
}

.or-celle--pop {
  animation: or-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes or-pop {
  from { transform: scale(0.5); opacity: 0.4; }
  to   { transform: scale(1);   opacity: 1;   }
}

/* ── Ord-display (under gitter, over cirkel) ───────────────── */
#or-ord-display {
  height: 34px;
  line-height: 34px;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 5px;
  color: var(--or-accent);
  text-align: center;
  min-width: 80px;
}

/* ── Cirkel-wrapper ────────────────────────────────────────── */
.or-cirkel-wrapper {
  position: relative;
  width: min(288px, calc(100vw - 48px));
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  touch-action: none;   /* forhindrer iOS i at overtage touch-events */
}

/* ── SVG-streglag ──────────────────────────────────────────── */
#or-linje-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.or-linje {
  stroke: var(--or-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
}

.or-linje--aktiv {
  opacity: 0.3;
  stroke-dasharray: 6 5;
}

/* ── Cirkel (baggrundsring) ─────────────────────────────────── */
#or-cirkel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--surface) 60%, var(--bg) 100%);
  border: 2px solid var(--border);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

/* ── Bogstav-tiles ─────────────────────────────────────────── */
.or-bogstav {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  background: var(--gray);
  border: 2px solid var(--border);
  color: var(--text);
  z-index: 3;
  transition: background 0.08s, border-color 0.08s, transform 0.08s;
}

.or-bogstav--valgt {
  background: var(--or-accent);
  border-color: var(--or-accent);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.18);
}

/* ── Ryste-animation ved fejl ──────────────────────────────── */
.or-ryst {
  animation: or-ryst 0.38s ease;
}

@keyframes or-ryst {
  0%, 100% { transform: translateX(0); }
  18%       { transform: translateX(-9px); }
  36%       { transform: translateX(9px); }
  54%       { transform: translateX(-6px); }
  72%       { transform: translateX(6px); }
}

/* ── Statusbesked ──────────────────────────────────────────── */
.or-besked {
  height: 28px;
  line-height: 28px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  transition: opacity 0.18s;
  opacity: 0;
}

.or-besked:not(:empty)     { opacity: 1; }
.or-besked--rigtigt        { color: var(--green); }
.or-besked--bonus          { color: var(--yellow); }
.or-besked--fejl           { color: #e63946; }
.or-besked--info           { color: var(--subtext); }

/* ── Sejrs-modal ───────────────────────────────────────────── */
.or-sejr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.or-sejr-modal.hidden { display: none; }

.or-sejr-boks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px 28px;
  text-align: center;
  width: min(340px, 90vw);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}

.or-sejr-boks h2 {
  font-size: 1.8rem;
  margin-bottom: 4px;
}

.or-sejr-meta {
  color: var(--subtext);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.or-sejr-point-stor {
  font-size: 3rem;
  font-weight: 800;
  color: var(--yellow);
  display: block;
  line-height: 1;
  margin: 6px 0 4px;
}

.or-sejr-point-label {
  color: var(--subtext);
  font-size: 0.85rem;
  margin-bottom: 18px;
}

.or-sejr-score-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.or-sejr-score-form input {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1rem;
  padding: 10px 14px;
  text-align: center;
  font-family: inherit;
  width: 100%;
}

.or-sejr-score-form input:focus {
  outline: none;
  border-color: var(--or-accent);
}

.or-sejr-knapper {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Knapper (genbruger btn-primary fra style.css) ──────────── */
.btn-secondary {
  background: var(--gray);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.btn-secondary:hover { opacity: 0.8; }