@charset "UTF-8";
/* spelrutan: allt inuti .sf får Snabbfilens egna stilar (sf/css/style.css) */
.frame {
  background: repeating-conic-gradient(#100e15 0 25%, #151221 0 50%) 0 0 / 8px 8px;
  border: 2px solid #000; padding: 8px; display: flex; justify-content: center; overflow: hidden;
}
.frame canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; max-width: 100%; }
/* ---------- spelrutan: allt inuti .sf får Snabbfilens egna stilar (sf/css/style.css) ---------- */
.sf .stage { position: relative; container-type: inline-size; max-width: 100%; }
.sf .stage canvas { display: block; touch-action: manipulation; }
.sf #sk-pill { position: absolute; top: 1.6%; left: 1.2%; z-index: 4; display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--gold); border: 3px solid #000; padding: 3px 8px; font-size: var(--f1); line-height: 1; pointer-events: none; }
.sf #sk-pill .w { color: #fff; letter-spacing: 1px; }
.sf #sk-pill .kr { color: #cfc7ba; }
.sf .sk-star { display: inline-block; width: 1em; height: 1em; background: var(--gold); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); vertical-align: -.1em; }
.sf #skolpanel.dlg { position: absolute; left: 2%; right: 2%; bottom: 3%; width: auto; max-height: 54%; box-shadow: 6px 6px 0 var(--ink); z-index: 5; }
.sf #skolpanel .dlg-head { padding: 5px 10px; }
.sf #skolpanel .dlg-head h2 { font-size: var(--f2); }
.sf #skolpanel .dlg-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.sf .sp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sf .sp-spacer { flex: 1 1 auto; }
.sf .sp-topic { font-size: var(--f1); color: var(--muted); margin-left: 4px; }
.sf .sp-answers .btn { font-size: var(--f2); text-align: left; }
.sf .sp-answers .btn small { display: block; font-size: var(--f1); opacity: .8; margin-top: 3px; }
.sf .sp-fb { margin: 0; min-height: 1.1em; font-size: var(--f1); line-height: 1.25; }
.sf .sp-fb b.ok { color: var(--green); }
.sf .sp-fb b.no { color: var(--red2); }
.sf .sp-dots { margin-left: auto; display: inline-flex; gap: 4px; }
.sf .sp-dots i { width: 12px; height: 12px; border: 2px solid #fff; }
.sf .sp-dots i.cur { background: rgba(255, 255, 255, .45); }
.sf .sp-dots i.star { background: var(--gold); }
.sf .sp-dots i.ok { background: var(--green2); }
.sf .stage #decor-panel { position: absolute; right: 1.5%; top: 12%; bottom: auto; width: 32%; max-height: 72%; z-index: 5; }
.sf .stage #decor-panel .dp-foot small { font-size: var(--f1); color: var(--muted); }
.sf .dp-item canvas { max-width: 48px; max-height: 40px; width: auto; height: auto; }
/* liten bild (mobil liggande): rutan stannar i bilden men blir tätare */
@container (max-width: 760px) {
  .sf #skolpanel.dlg { left: 1%; right: 1%; bottom: 2%; max-height: 64%; box-shadow: 3px 3px 0 var(--ink); border-width: 3px; }
  .sf #skolpanel .dlg-head { padding: 2px 8px; }
  .sf #skolpanel .dlg-head h2 { font-size: var(--f1); }
  .sf #skolpanel .dlg-body { padding: 4px 6px 5px; gap: 4px; }
  .sf #skolpanel .sp-row { gap: 4px; }
  .sf #skolpanel .btn-small { font-size: var(--f1); padding: 1px 6px; }
  .sf .sp-answers .btn { font-size: var(--f1); padding: 5px 10px; }
  .sf .sp-pad { gap: 3px; } .sf .sp-pad .btn { font-size: var(--f1); padding: 3px 0; }
  .sf .dr-q, .sf .dr-typed { font-size: var(--f2); }
  .sf .sp-fb { font-size: var(--f1); min-height: 0; }
  .sf #sk-pill { font-size: 10px; padding: 2px 5px; border-width: 2px; }
}
/* smal bild (mobil stående): rutan under bilden */
@container (max-width: 480px) {
  .sf #skolpanel.dlg { position: static; margin-top: 8px; max-height: none; }
  .sf .stage #decor-panel { position: static; width: auto; margin-top: 8px; }
  .sf #sk-pill .kr { display: none; }
}
.sf #sk-below { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.sf #sk-below p { flex: 1 1 340px; margin: 0; font-size: var(--f2); line-height: 1.05; color: var(--ink); }
.sf .sk-bbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.sf .sk-big { font-size: var(--f3); line-height: 1; margin: 0 0 6px; }
.sf .who p { margin: 0 0 6px; font-size: var(--f2); line-height: 1.05; }
.sf .who .sp { color: var(--muted); font-size: var(--f1); }
.sf .who canvas.sk-furn { width: auto; height: auto; background: #d8cdb8; padding: 6px; image-rendering: pixelated; }
.sf .sk-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sf .sk-lbl { font: var(--f2) var(--head); color: var(--red); text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 6px; }
.sf .sk-class { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.sf .sk-kid { display: flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border: 3px solid var(--ink); padding: 6px; min-width: 0; }
.sf .sk-por canvas { display: block; width: 60px; height: 72px; border: 3px solid var(--ink); image-rendering: pixelated; }
.sf .sk-kid input { font: var(--f2) var(--font); width: 100%; text-align: center; border: 3px solid var(--ink); background: #fffbe8; padding: 2px 4px; min-width: 0; }
.sf .sk-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sf .dlg-body > .sp { color: var(--muted); font-size: var(--f2); line-height: 1.05; margin: 0 0 4px; }
.sf .sk-klass { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.sf .sk-klass input { font: var(--f3) var(--font); width: 4.6em; text-align: center; text-transform: uppercase; border: 3px solid var(--ink); background: #fffbe8; color: var(--ink); padding: 2px 6px; }
.sf .sk-klass .sp { flex: 1 1 260px; color: var(--muted); font-size: var(--f2); line-height: 1.05; }
.sf .sk-lbl:first-child { margin-top: 0; }
/* nivåkartan: numrerade nivåer med 0–3 stjärnor */
.sf .sk-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sf .sk-lv { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 6px 8px; min-width: 0; }
.sf .sk-lv b { font: var(--f2) var(--head); color: var(--red); line-height: 1; }
.sf .sk-lv span { font-size: var(--f1); line-height: 1.1; }
.sf .sk-lv.on { background: #fff4c7; outline: 3px solid var(--gold); outline-offset: -3px; }
.sf .lv-stars { display: inline-flex; gap: 2px; vertical-align: -.05em; }
.sf .lv-stars i { display: inline-block; width: .9em; height: .9em; min-width: 10px; min-height: 10px; background: #b9b2a4; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.sf .lv-stars i.on { background: var(--gold); }
.sf .dlg-head .lv-stars i { background: rgba(255,255,255,.35); } .sf .dlg-head .lv-stars i.on { background: #ffd23f; }
/* Gånger: tabellvalet, sifferknapparna i huvudräkningen och försöken A–F */
.sf .sp-tab .btn-small { min-width: 2.2em; }
.sf .sp-light { color: #f4e6c8; margin-left: auto; font-size: var(--f1); }
.sf .dr-q { font: var(--f3) var(--font); }
.sf .dr-typed { font: var(--f3) var(--font); min-width: 3.2em; text-align: center; background: #fffbe8; border: 3px solid var(--ink); padding: 0 6px; }
.sf .sp-pad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sf .sp-pad .btn { font-size: var(--f2); padding: 6px 0; }
/* skriva svaret på tavlan: siffror (och : för klockslag) på en rad, bokstäverna i tre rader, gröna Klar */
.sf .sp-kb { display: flex; flex-direction: column; gap: 5px; }
.sf .sp-keys { display: flex; gap: 5px; }
.sf .sp-keys .btn { flex: 1 1 0; min-width: 0; padding: 8px 0; font-size: var(--f2); text-align: center; }
.sf .sp-keys .sp-del { flex: 1.4 1 0; }
.sf .sp-keys .sp-ok { flex: 2.6 1 0; }
/* årskursen och din figur */
.sf .sp-keys .sp-arrow { flex: 1 1 0; }
.sf .sk-pay { font-size: var(--f1); line-height: 1; background: #f0d048; border: 2px solid var(--ink); padding: 1px 4px 0; }
.sf .sk-pay.low { background: #f4d8c8; color: var(--muted); }
.sf .sk-grade { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; }
.sf .sk-gr { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; padding: 14px 22px; }
.sf .sk-gr b { font: var(--f4) var(--head); color: var(--red); line-height: 1; }
.sf .sk-gr span { font-size: var(--f2); }
.sf .sk-grade-s { margin: 0 0 4px; gap: 8px; }
.sf .sk-me { display: flex; gap: 12px; align-items: center; background: #fff; border: 3px solid var(--ink); padding: 8px 10px; margin: 0 0 6px; }
.sf .sk-me .sk-lbl { margin-top: 0; }
.sf .sk-me .sk-big { margin: 0 0 6px; }
.sf .sk-me .sk-btns { justify-content: flex-start; }
/* BLING BLING (bling.js): korten i montrarna (klick = klädaffärens provdialog), ateljén med provfiguren, närbilden och priset, spegeln */
.sf .bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sf .bl-card { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 6px 4px; text-align: center; font: inherit; color: inherit; cursor: pointer; }
.sf .bl-card:hover, .sf .bl-card:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); outline: none; }
.sf .bl-card.on { background: #fde7f1; border-color: #b83a78; }
.sf .bl-card b { font-size: var(--f2); line-height: 1; hyphens: manual; overflow-wrap: anywhere; }
.sf .bl-tag { font-size: var(--f2); line-height: 1; background: #f0d048; border: 2px solid var(--ink); padding: 1px 5px 0; }
.sf .bl-card.own .bl-tag { background: #45b964; color: #fff; }
.sf .bl-card.on .bl-tag { background: #f07ab0; color: #fff; }
.sf .bl-pre canvas { display: block; max-width: 100%; image-rendering: pixelated; background: linear-gradient(#fbe6ef, #f3cfe0); border: 2px solid var(--ink); }
.sf .dlg.bl-wide { width: min(1000px, 100%); }
.sf .bl-design { display: grid; grid-template-columns: auto minmax(0, 288px) minmax(0, 1fr); gap: 12px; align-items: start; }
.sf .bl-try, .sf .bl-show { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; }
.sf .bl-stage { display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 10px 12px 0; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: linear-gradient(#fbe6ef 0 72%, #e8b84a 72% 73%, #f3cfe0 73% 100%); }
.sf .bl-fig { display: flex; flex-direction: column; align-items: center; }
.sf .bl-fig canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.sf .bl-fig small { font-size: var(--f1); line-height: 1; background: var(--ink); color: #fff; padding: 2px 6px 1px; margin-bottom: 6px; white-space: nowrap; }
.sf .bl-arrow { font-size: var(--f2); padding-bottom: 40px; }
.sf .bl-turn { display: flex; gap: 6px; align-items: center; justify-content: center; }
.sf .bl-view { font-size: var(--f1); min-width: 74px; text-align: center; }
.sf .bl-canvas canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 34vh; image-rendering: pixelated; border: 3px solid var(--ink); }
.sf .bl-sum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: #2a1a2e; color: #ffd23f; padding: 4px 8px; border: 3px solid var(--ink); }
.sf .bl-sum b { font: var(--f3) var(--head); line-height: 1; }
.sf .bl-sum .sp { color: #f3cfe0; margin: 0; }
.sf .bl-list { list-style: none; margin: 0; padding: 0; font-size: var(--f1); }
.sf .bl-list li { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dashed var(--paper2); padding: 1px 0; }
.sf .bl-pick { min-width: 0; }
.sf .bl-grp .sk-lbl { margin: 6px 0 4px; }
.sf .bl-grp:first-child .sk-lbl { margin-top: 0; }
.sf .bl-opts, .sf .bl-mine { display: flex; flex-wrap: wrap; gap: 5px; }
.sf .bl-opts .btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.sf .bl-opts .btn small { font-size: var(--f1); opacity: .75; }
.sf .bl-opts .btn i { display: block; width: 14px; height: 8px; border: 2px solid var(--ink); }
.sf .bl-mine { margin-bottom: 4px; }
.sf .bl-mirror { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.sf .bl-mir-r { flex: 1 1 220px; min-width: 0; }
.sf .bl-mir-r .sp:first-child { margin-top: 0; }
.sf .dl-canvas canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 38vh; image-rendering: pixelated; border: 3px solid var(--ink); touch-action: none; cursor: pointer; }
.sf .dl-tools, .sf .dl-areas, .sf .dl-cats { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sf .dl-tools .sp { margin: 0; }
.sf .dl-cats { margin-bottom: 6px; }
.sf .dl-tip { margin: 0 0 6px; }
.sf .dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.sf .dl-patch, .sf .dl-bead { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; background: #fff; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: inherit; color: inherit; cursor: pointer; }
.sf .dl-patch:hover, .sf .dl-bead:hover, .sf .dl-patch:focus-visible, .sf .dl-bead:focus-visible { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); outline: none; background: #fde7f1; }
.sf .dl-patch canvas, .sf .dl-bead canvas { display: block; image-rendering: pixelated; }
.sf .dl-patch b { font-size: var(--f1); line-height: 1; text-align: center; }
.sf .dl-patch small, .sf .dl-bead small { font-size: var(--f1); line-height: 1; background: #f0d048; border: 2px solid var(--ink); padding: 1px 4px 0; }
.sf .dl-sws { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.sf .dl-sw { width: 26px; height: 26px; padding: 0; border: 3px solid var(--ink); background: var(--c); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.sf .dl-sw.on { outline: 3px solid #ffd23f; outline-offset: 1px; transform: translate(-1px, -1px); }
.sf .bl-pick .sk-lbl small { font: var(--f1) var(--font); color: var(--muted); text-transform: none; letter-spacing: 0; }
.sf .dl-beads { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 5px; }
@media (max-height: 520px) { .sf .bl-list { display: none; } .sf .bl-sum b { font-size: var(--f2); } .sf .bl-canvas canvas, .sf .dl-canvas canvas { max-height: 30vh; } .sf .dl-tip { display: none; } .sf .bl-stage { padding-top: 6px; } .sf .bl-arrow { padding-bottom: 24px; } }
.sf .bl-show .dl-phone canvas { max-height: 58vh; }
@media (max-height: 520px) { .sf .bl-show .dl-phone canvas { max-height: 50vh; } }
@container (max-width: 760px) { .sf .bl-design { grid-template-columns: auto minmax(0, 1fr); } .sf .bl-show { grid-column: 1; position: static; } .sf .bl-pick { grid-column: 2; grid-row: 1 / span 2; } .sf .bl-canvas canvas { max-height: 24vh; } }
@container (max-width: 760px) { .sf .sp-kb, .sf .sp-keys { gap: 3px; } .sf .sp-keys .btn { font-size: var(--f1); padding: 4px 0; } }
.sf .sk-hist { border-collapse: collapse; margin: 8px 0; font-size: var(--f2); }
.sf .sk-hist th, .sf .sk-hist td { border: 2px solid var(--ink); padding: 2px 8px; text-align: left; }
.sf .sk-hist th { background: var(--paper2); font-weight: 400; }
.sf, .sf button, .sf canvas { touch-action: manipulation; }