/* Koblinger – Stiglet-utseende (v2, 26.09.2026).
   Samme klassenavn som LRNify-versjonen, så app.js og content.js er urørt
   utenom ikonene. Designsystem: CLAUDE.md og docs/02_stiglet_designsystem.
   Bygget for skolepc: et helt brett får plass på 1366×768 uten scrolling. */

:root{
  --ink:#2b2118;
  --cream:#fff9f0;
  --coral:#fa5c66;
  --yellow:#facc15;
  --paper:#fffdf7;
  --surface:#ffffff;
  --muted:#6b5d50;
  --line:var(--ink);

  /* Gruppefarger når en kobling er funnet (content.js GRAD_FARGER) */
  --level-1:#fde68a;
  --level-2:#bbf7d0;
  --level-3:#bfdbfe;
  --level-4:#ddd6fe;

  /* Fagfarger, samme som Stiglet-katalogen */
  --language:#fa5c66;
  --math:#60a5fa;
  --science:#4ade80;
  --culture:#fb923c;

  --good:#22c55e;
  --good-soft:#dcfce7;
  --bad-soft:#ffe4e6;
  --warn-soft:#fef3c7;

  --border:3px solid var(--ink);
  --shadow:0 4px 0 var(--ink);
  --shadow-lg:0 6px 0 var(--ink);

  --font-display:'Chewy',cursive;
  --font-body:'Nunito',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-weight:600;
  color:var(--ink);
  background-color:var(--cream);
  background-image:radial-gradient(rgba(43,33,24,.07) 1.5px,transparent 1.6px);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ---------- Ramme og topplinje ---------- */

.app-shell{position:relative;max-width:1040px;margin:0 auto;padding:14px clamp(14px,3vw,28px) 24px}
.app-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-bottom:10px;min-height:48px}
/* Skallet viser allerede «Koblinger». Her står bare hvor du er. */
.brand-block{grid-column:2;justify-self:center}
.brand-mark,.brand-block h1{display:none}
.brand-block p{margin:0;font-family:var(--font-display);font-size:1.5rem;line-height:1}
.header-actions{justify-self:end;display:flex;gap:8px}
.back-link{justify-self:start;appearance:none;background:#fff;border:var(--border);border-radius:999px;font-weight:800;padding:8px 16px;cursor:pointer;box-shadow:var(--shadow)}
.back-link:active{transform:translateY(4px);box-shadow:none}
.icon-button{appearance:none;border:var(--border);background:#fff;border-radius:999px;width:44px;height:44px;padding:0;cursor:pointer;display:inline-grid;place-items:center;box-shadow:var(--shadow)}
.icon-button img{width:24px;height:24px}
.icon-button:active{transform:translateY(4px);box-shadow:none}
.icon-button[aria-pressed="false"]{background:var(--cream)}

.screen{animation:screenIn .22s ease both}@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.is-hidden{display:none!important}

/* ---------- Fag- og nivåvalg ---------- */

.screen-intro{margin:10px auto 16px;text-align:center}.screen-intro.compact{margin-top:0}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:.78rem;font-weight:800;margin:0 0 6px}
.screen-intro h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;margin:0}

.learning-strip{display:flex;justify-content:center;gap:10px;margin:14px 0 0}
.learning-stat{background:#fff;border:var(--border);border-radius:999px;padding:6px 16px;display:flex;align-items:baseline;gap:8px;box-shadow:var(--shadow)}
.learning-stat strong{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1}
.learning-stat span{color:var(--muted);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}

.subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.subject-card{position:relative;overflow:hidden;text-align:left;appearance:none;border:var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow);padding:0;min-height:0;cursor:pointer;display:flex;flex-direction:column;transition:transform .12s,box-shadow .12s}
.subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.subject-card:active{transform:translateY(4px);box-shadow:none}
.subject-card>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:16px 18px 10px;border-bottom:var(--border);background:var(--subject-color)}
.subject-card .emoji{grid-row:span 2;width:56px;height:56px;display:grid;place-items:center;background:#fff;border:var(--border);border-radius:16px}
.subject-card .emoji img{width:36px;height:36px}
.subject-card h3{font-family:var(--font-display);font-weight:400;font-size:1.8rem;line-height:1;margin:0}
.subject-card p{margin:2px 0 0;font-size:.95rem;line-height:1.3}
.subject-card>div:last-child,.subject-card>.card-meta{padding:12px 18px 14px}
.card-meta{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:4px 12px;font-weight:800;font-size:.8rem}
.stripe{height:8px;border:2px solid var(--ink);border-radius:999px;display:flex;overflow:hidden;margin-top:10px}.stripe i{flex:1}

/* ---------- Spillet ---------- */

.game-card{background:var(--paper);border:var(--border);border-radius:20px;box-shadow:var(--shadow-lg);padding:clamp(12px,2vh,20px) clamp(14px,2.4vw,24px)}
.game-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.game-topline .eyebrow{display:none}
.game-topline h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;margin:0}
.progress-row{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--muted);font-weight:800;font-size:.9rem}
.selection-meter{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-width:150px}
.selection-meter i{height:10px;border:2px solid var(--ink);border-radius:999px;background:#fff}
.selection-meter i.on{background:var(--yellow)}
.attempt-card{background:#fff;border:var(--border);border-radius:999px;padding:6px 14px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:.85rem;white-space:nowrap;box-shadow:var(--shadow)}
.attempt-dots{display:flex;gap:6px}
.dot{width:14px;height:14px;border:2px solid var(--ink);border-radius:99px;background:var(--coral);transition:transform .2s,background .2s}
.dot.used{background:#fff;transform:scale(.75)}

.tip-box{margin:0 0 10px;padding:8px 14px;border:2px dashed var(--ink);border-radius:14px;background:#fef9c3;font-size:.92rem;line-height:1.35}

.solved-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.solved-group{border:var(--border);border-radius:16px;padding:8px 14px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:10px;text-align:center;box-shadow:var(--shadow);animation:solvedIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes solvedIn{0%{opacity:0;transform:scale(.96) translateY(8px)}70%{transform:scale(1.02)}100%{opacity:1;transform:none}}
.solved-group strong{font-family:var(--font-display);font-weight:400;font-size:1.25rem;line-height:1.1}
.solved-group span{font-weight:800}
.solved-group small{flex-basis:100%;margin-top:2px;font-size:.85rem;line-height:1.3;opacity:.85}

.board-wrap{padding:0}
.tile-grid{display:grid;gap:10px}
.tile{appearance:none;border:var(--border);background:#fff;border-radius:16px;min-height:clamp(56px,9vh,78px);padding:8px 6px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;font-weight:800;font-size:clamp(.95rem,1.4vw,1.15rem);cursor:pointer;word-break:break-word;hyphens:auto;box-shadow:var(--shadow);transition:transform .1s,box-shadow .1s,background .12s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.tile.selected{background:var(--yellow);transform:translateY(4px);box-shadow:none}
.tile.shake{animation:shake .42s ease}
.tile.pop{animation:pop .34s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes pop{50%{transform:scale(1.07)}}
.fraction{display:inline-flex;flex-direction:column;align-items:center;line-height:1}.fraction .top,.fraction .bottom{padding:0 4px}.fraction .bar{width:100%;height:2px;background:currentColor;margin:2px 0}

/* Tilbakemelding og knapper på én rad på PC */
.feedback{margin:12px 0 10px;min-height:0;border:var(--border);background:#fff;border-radius:16px;padding:8px 14px;display:flex;align-items:center;gap:12px}
.feedback-icon{width:30px;height:30px;border:2px solid var(--ink);border-radius:999px;background:var(--cream);display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.feedback strong{display:block}
.feedback p{margin:1px 0 0;color:var(--muted);line-height:1.3;font-size:.92rem}
.feedback.good{background:var(--good-soft)}.feedback.good .feedback-icon{background:var(--good)}
.feedback.bad{background:var(--bad-soft)}.feedback.bad .feedback-icon{background:var(--coral);color:var(--cream)}
.feedback.warn{background:var(--warn-soft)}.feedback.warn .feedback-icon{background:var(--yellow)}

.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.button{appearance:none;border:var(--border);border-radius:12px;min-height:46px;padding:0 20px;font-weight:800;cursor:pointer;background:#fff;box-shadow:var(--shadow);transition:transform .08s,box-shadow .08s}
.button:active{transform:translateY(4px);box-shadow:none}
.button.primary{background:var(--coral);color:var(--cream)}
.button.primary:disabled{filter:grayscale(.6) opacity(.5);cursor:default}
.button.primary:disabled:active{transform:none;box-shadow:var(--shadow)}
.button.secondary{background:#fff}
.button.ghost{background:var(--cream)}

/* ---------- Resultat ---------- */

.overlay{position:fixed;inset:0;background:rgba(43,33,24,.7);display:grid;place-items:center;padding:20px;z-index:10;animation:screenIn .18s ease both}
.result-panel{width:min(440px,100%);background:var(--cream);border:var(--border);border-radius:20px;box-shadow:var(--shadow-lg);padding:26px;text-align:center;animation:panelIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes panelIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.result-emoji{display:none}
.result-panel h2{font-family:var(--font-display);font-weight:400;font-size:2.4rem;line-height:1;margin:4px 0 8px}
.result-panel p{margin:0 0 14px;line-height:1.45}
.lesson-note{margin:12px 0 0;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 14px;text-align:left;line-height:1.4}
.lesson-note strong{display:block;margin-bottom:3px}
.score-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.score-card>div{border:2px solid var(--ink);border-radius:14px;background:#fff;padding:10px}
.score-label{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:2px}
.score-card strong{font-family:var(--font-display);font-weight:400;font-size:1.6rem}
#panel-stjerner{color:#eab308;-webkit-text-stroke:1px var(--ink);letter-spacing:.08em}
.panel-actions{display:flex;flex-direction:column;gap:10px}
.next-action.is-hidden{display:none!important}

body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

/* ---------- PC: tilbakemelding og knapper side om side ---------- */

@media (min-width:900px){
  .game-card{display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center}
  .game-topline,.solved-list,.tip-box,.board-wrap{grid-column:1/-1}
  .feedback{grid-column:1;margin:12px 0 0}
  .controls{grid-column:2;margin-top:12px;flex-wrap:nowrap}
}

/* ---------- Mobil ---------- */

@media (max-width:720px){
  .app-header{grid-template-columns:auto 1fr auto}
  .brand-block{justify-self:start}
  .back-link{font-size:0;width:44px;height:44px;padding:0}
  .back-link::before{content:'←';font-size:1.1rem}
  .subject-grid{grid-template-columns:1fr}
  .learning-strip{flex-wrap:wrap}
  .game-topline{flex-direction:column;align-items:stretch}
  .attempt-card{justify-content:space-between}
  .tile-grid{gap:8px}
  .tile{min-height:58px;border-radius:13px;font-size:.9rem}
  .controls{position:sticky;bottom:10px;background:var(--cream);border:var(--border);border-radius:16px;padding:8px}
  .button{flex:1 1 auto;padding:0 12px}
  .screen-intro{text-align:left}
}
@media (max-width:430px){.tile{font-size:.8rem;min-height:54px}}