* { box-sizing: border-box; }
:root{
  --bg:#f7f9fc;
  --text:#1d2939;
  --muted:#667085;
  --ok:#22c55e;
  --bad:#ef4444;
  --chip:#ffffff;
  --shadow: 0 6px 20px rgba(17,24,39,0.08);
  --radius: 16px;
  --brandA:#E3F2FD;
  --brandB:#FFF3E0;
  --brandC:#E8F5E9;
  --brandD:#F3E8FF;
}
html,body{ height:100%; }
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text); background:var(--bg);
  display:flex; flex-direction:column; gap:0;
}
.app-header{
  position:sticky; top:0; z-index:10;
  background:#fff; box-shadow: var(--shadow);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
}
.app-header h1{ margin:0; font-size: clamp(1.25rem, 1.2rem + 1vw, 1.8rem); }
.app-header .meta{ display:flex; align-items:center; gap:12px; }
.score{ font-weight:600; }
.btn{
  border:0; background:#111827; color:#fff; padding:10px 14px; border-radius:12px;
  cursor:pointer; box-shadow: var(--shadow);
}
.btn:hover{ filter:brightness(1.1); }
.app-main{ width: min(1100px, 96%); margin: 18px auto; display:flex; flex-direction:column; gap:16px; }
.instructions{ background:#fff; border-radius: var(--radius); box-shadow:var(--shadow); padding:12px 16px; color:var(--muted); }
.board{ display:grid; grid-template-columns: 1fr; gap:16px; }
.bank{
  background:#fff; border-radius: var(--radius); box-shadow:var(--shadow); padding:16px;
}
.bank h2{ margin:0 0 10px 0; }
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  background:var(--chip); border-radius: 14px; padding:10px 12px; font-weight:600;
  box-shadow: var(--shadow); cursor:grab; user-select:none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.chip:active{ cursor:grabbing; transform: scale(0.98); }
.chip.correct{ outline:3px solid var(--ok); }
.chip.wrong{ animation: shake .18s linear 2; outline:3px solid var(--bad); }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

.zones{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.zone{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding:12px; display:flex; flex-direction:column; gap:10px;
  min-height: 220px;
}
.zone:nth-child(1){ background: var(--brandA); }
.zone:nth-child(2){ background: var(--brandB); }
.zone:nth-child(3){ background: var(--brandC); }
.zone:nth-child(4){ background: var(--brandD); }
.zone-header h3{ margin:0; }
.zone-header small{ color:var(--muted); }
.zone-drop{
  background: rgba(255,255,255,0.6);
  border:2px dashed #cbd5e1; border-radius: 14px; padding:12px; min-height: 120px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start;
}
.zone-drop.highlight{ border-color:#111827; }

.app-footer{ text-align:center; color:var(--muted); padding:20px 0 28px; }

/* Responsiv 9:16 mobilvennlig */
@media (max-width: 860px){
  .zones{ grid-template-columns: 1fr; }
}