/* Pusselperrongen – spelspecifik stil. Färgerna hämtas ur Ordkuls temavariabler
   (--saolblå, --papper, --bläck, --guld …) så klossar och bräde speglar temat. */

.pp-yta { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#ppSpel { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.pp-radbryt { }
@media (max-width: 480px) { .pp-radbryt { display: block; } }

/* Maskoten Mikael + pratbubbla (samma upplägg som Förenas katt) */
.pp-katt { display: flex; align-items: flex-start; gap: 12px; max-width: 560px; width: 100%; }
.pp-katt img { width: 84px; height: 84px; object-fit: contain; flex: none; }
.pp-prat {
  position: relative; background: var(--papper, #fff); border: 2px solid var(--saolblå, #1E3A6E);
  color: var(--bläck, #1a1a1a); border-radius: 14px; padding: 12px 14px; font-size: .98rem; line-height: 1.4;
  box-shadow: 0 3px 0 var(--papper-skugga, rgba(0,0,0,.12));
}
.pp-prat::before {
  content: ""; position: absolute; left: -10px; top: 22px; width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 10px solid var(--saolblå, #1E3A6E);
}

/* Framstegsmätare – samma klasser som Ordoku (.mätare/.mätarfyllning/.matar-avatar/.van-markor) */
.pp-framsteg { width: 100%; max-width: 560px; }

/* Brädet: 3×3 rutor à 2×2 celler */
.pp-brade {
  --g: 8px; width: min(92vw, 460px); aspect-ratio: 1/1;
  background: var(--papper-skugga, #dcdcdc); border: 2px solid var(--bläck, #222); border-radius: 16px;
  padding: var(--g); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: var(--g);
  box-shadow: 0 6px 0 var(--papper-skugga, rgba(0,0,0,.12)); touch-action: none;
}
.pp-slot {
  background: var(--papper, #f4f4f4); border: 1.5px dashed var(--saolblå-ljus, #4466aa); border-radius: 10px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden; min-height: 0; min-width: 0;
}
.pp-slot.fylld { border-style: solid; border-color: var(--saolblå, #1E3A6E); cursor: grab; }
.pp-slot.mål { outline: 3px solid var(--guld, #E6C75A); outline-offset: 2px; }

.pp-cell {
  display: flex; align-items: center; justify-content: center; font-weight: 800; line-height: 1; min-height: 0; min-width: 0;
  font-size: clamp(20px, 8vw, 34px); color: var(--papper, #fff);
  background: var(--saolblå, #1E3A6E); border: 1px solid rgba(0,0,0,.18);
}
.pp-cell.tom { background: var(--papper-skugga, #e6e6e6); color: transparent; border-color: rgba(0,0,0,.08); }
.pp-cell.rätt { background: var(--saolblå-ljus, #2C5CA8) !important; }
.pp-cell.fel  { background: #B24B3A !important; }

/* Brickfältet med klossar att dra */
.pp-bricka {
  width: min(92vw, 460px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; touch-action: none;
}
.pp-tile {
  aspect-ratio: 1/1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden;
  border-radius: 10px; border: 2px solid var(--saolblå, #1E3A6E); cursor: grab;
  box-shadow: 0 3px 0 var(--papper-skugga, rgba(0,0,0,.16)); touch-action: none;
}
.pp-tile .pp-cell { font-size: clamp(16px, 5.4vw, 26px); }
.pp-tile.placerad { visibility: hidden; }
.pp-tile.drar, .pp-slot.drar { opacity: .35; }

/* Ghost som följer pekaren under drag */
.pp-ghost {
  position: fixed; z-index: 999; width: 64px; height: 64px; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg); box-shadow: 0 8px 18px rgba(0,0,0,.3); opacity: .95;
}

/* Knapprad */
.pp-knappar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pp-ledtrad-info { font-size: .8rem; color: var(--dis, #777); text-align: center; margin-top: 4px; }

/* Klart-panel */
.pp-klart { width: 100%; max-width: 560px; text-align: center; }
.pp-klart-knappar { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.pp-delakvitto { font-size: .85rem; color: var(--saolblå, #1E3A6E); }
.pp-ordlista { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.pp-ordknapp {
  background: var(--papper, #fff); border: 1.5px solid var(--saolblå-ljus, #4466aa); color: var(--bläck, #1a1a1a);
  border-radius: 20px; padding: 4px 12px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.pp-ordknapp:hover { background: var(--papper-skugga, #eee); }

/* Definitionsruta (samma stil som övriga spel; klasser stängDef/källa finns i style.css) */
.pp-def { margin-top: 12px; text-align: left; background: var(--papper, #fff); border: 1px solid var(--saolblå-ljus, #4466aa); border-radius: 12px; padding: 12px 14px; position: relative; }

@media (prefers-reduced-motion: reduce) { .pp-ghost { transform: translate(-50%, -50%); } * { transition: none !important; } }