/* Förena – spelspecifik stil. Bygger vidare på style.css och ärver temat
   via --papper, --papper-skugga, --guld, --guld-ljus, --bläck, --dis, --radie. */

body[data-sida="spel-forena"] .spelyta { max-width: 640px; margin-inline: auto; }

/* ---- Maskot (norsk skogskatt) + pratbubbla ---- */
.forena-katt { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; }
.forena-katt img {
  width: 84px; height: 84px; flex: 0 0 84px; object-fit: contain; border-radius: 14px;
}
.forena-prat {
  position: relative; flex: 1 1 auto; align-self: center;
  background: var(--papper); color: var(--bläck);
  border: 1px solid var(--papper-skugga); border-radius: 14px;
  padding: 12px 16px; font-size: 15px; line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.forena-prat::before {
  content: ""; position: absolute; left: -9px; top: 22px; width: 15px; height: 15px;
  background: var(--papper); border-left: 1px solid var(--papper-skugga);
  border-bottom: 1px solid var(--papper-skugga); transform: rotate(45deg);
}
@media (max-width: 480px) { .forena-katt img { width: 62px; height: 62px; flex-basis: 62px; } .forena-prat { font-size: 14px; } }

/* ---- Nivåtext ---- */
.forena-niva {
  text-align: center; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; font-size: .8rem; color: var(--dis); margin: 2px 0 14px;
}

/* ---- Tre cirklar ---- */
.forena-cirklar { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; }
.forena-pil { color: var(--dis); font-size: 1.4rem; flex: 0 0 auto; }
.forena-cirkel {
  width: clamp(88px, 26vw, 122px); height: clamp(88px, 26vw, 122px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: clamp(.85rem, 3.4vw, 1.05rem); text-transform: uppercase;
  color: var(--bläck); background: var(--papper); box-shadow: 0 3px 10px rgba(0,0,0,.10);
  padding: 4px; overflow-wrap: anywhere;
}
.forena-cirkel.vanster { border: 3px solid var(--guld-ljus); }
.forena-cirkel.hoger   { border: 3px solid var(--guld); }
.forena-cirkel.mitten  { border: 3px dashed var(--guld); color: var(--guld); background: transparent; font-size: 1.7rem; }

/* ---- Bokstavsrutor ---- */
.forena-rutor { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 18px; }
.forena-ruta {
  width: 26px; height: 30px; position: relative; border-bottom: 3px solid var(--dis);
}
.forena-ruta.avslojad { border-bottom-color: var(--guld); }
.forena-ruta b {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  font-size: 1.25rem; color: var(--guld); font-weight: 700; text-transform: uppercase;
}

/* ---- Svarsfält ---- */
.forena-svarrad { display: flex; gap: 8px; margin-bottom: 10px; }
.forena-svarrad input {
  flex: 1 1 auto; padding: 12px 14px; border-radius: var(--radie);
  border: 1px solid var(--papper-skugga); background: var(--papper); color: var(--bläck);
  font-size: 1rem; text-transform: uppercase;
}

/* ---- Husmus + liv ---- */
.forena-botten { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.forena-musknapp {
  background: none; border: none; padding: 0; cursor: pointer; transition: transform .08s;
}
.forena-musknapp:hover:not(:disabled) { transform: scale(1.05); }
.forena-musknapp:disabled { opacity: .55; cursor: default; }
.forena-musknapp img { width: 72px; height: 72px; object-fit: contain; display: block; }
.forena-liv { text-align: right; font-size: .85rem; color: var(--dis); }
.forena-hjartan { display: inline-flex; gap: 4px; margin-left: 4px; }
.forena-hjarta { font-size: 1.15rem; transition: color .2s; }
.forena-hjarta.liv { color: #d1495b; }
.forena-hjarta.tom { color: var(--papper-skugga); }

/* ---- Meddelande ---- */
.forena-melding { margin-top: 12px; font-weight: 600; min-height: 1.2em; }
.forena-melding.ratt { color: #2e9e5b; }
.forena-melding.fel  { color: #d1495b; }