/* Barnhörnan (/Barn) – egen fullskärmssida utan sajtens meny. Bas som artifact-skelettet gav prototypen. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
img { max-width: 100%; }
/* Layout: en skärm i taget (start → spel), stora tryckytor för barnhänder, gymgolvets svarta gummi som scen.
   Medvetet ett enda ljust tema: en lekfull, färgstark värld oavsett telefonens inställning. */
:root {
  color-scheme: light;
  --navy: #101820;      /* gymmets mörka profilfärg */
  --cyan: #3CCBDA;      /* profilens cyan */
  --orange: #EA733D;    /* profilens orange */
  --red: #E5554F;
  --sun: #FFC93C;       /* barnhörnans extra: gul */
  --leaf: #5BBF6A;
  --sky: #EAF7F9;       /* bakgrund: ljus, lätt cyan-tonad */
  --card: #FFFFFF;
  --ink: #101820;
  --muted: #55636E;
  --rubber: #232B33;    /* gymgolvet */
  --rubber-line: #2E3842;
  --f-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --f-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --f-brand: 'Oswald', 'Arial Narrow', sans-serif;
  --r: 22px;
}
html, body { height: 100%; }
[hidden] { display: none !important; }
body { background: var(--sky); color: var(--ink); font-family: var(--f-body); font-size: 17px; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 12px; }
.app { max-width: 760px; margin: 0 auto; padding-inline: 16px; padding-block: 12px 40px; min-height: 100%; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Topp ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-grid; font-family: var(--f-brand); font-weight: 700; text-transform: uppercase; line-height: .95; letter-spacing: .02em; font-size: 15px; color: var(--navy); }
.brand span:nth-child(2) { color: var(--cyan); }
.pillbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border-radius: 999px; padding: 9px 16px; font-weight: 800; box-shadow: 0 2px 0 rgba(16,24,32,.12); }
.pillbtn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.back { font-size: 16px; }

/* ---------- Startsidan ---------- */
.hero { position: relative; overflow: hidden; border-radius: var(--r); background: var(--navy); color: #fff; padding: 22px 20px 20px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 12px; background: repeating-linear-gradient(45deg, var(--cyan) 0 10px, var(--navy) 10px 20px); }
.hero h1 { font-family: var(--f-display); font-size: clamp(30px, 8vw, 46px); line-height: 1; text-wrap: balance; margin: 8px 0 6px; }
.hero p { color: #C9D6DD; max-width: 30ch; margin: 0; }
.hero svg { width: clamp(90px, 24vw, 140px); height: auto; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; text-align: left; border-radius: var(--r); padding: 16px 16px 18px; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; color: var(--navy); box-shadow: 0 5px 0 rgba(16,24,32,.18); transition: transform .12s; }
.tile:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(16,24,32,.18); }
.tile h2 { font-family: var(--f-display); font-size: clamp(21px, 6vw, 25px); hyphens: manual; line-height: 1.05; margin: 0; text-wrap: balance; }
.tile p { margin: 4px 0 0; font-weight: 700; font-size: 14px; opacity: .85; }
.tile .art { width: 66px; height: 66px; }
.tile .age { position: absolute; top: 14px; right: 14px; font-family: var(--f-brand); font-size: 13px; background: rgba(255,255,255,.75); padding: 2px 9px; border-radius: 999px; }
.t-move { background: var(--sun); }
.t-build { background: var(--cyan); } /* Roddtävlingen */
.t-memory { background: #F7B7A3; }
.t-run { background: var(--orange); color: #fff; }
.t-run .age { color: var(--navy); }
.parents { background: var(--card); border-radius: var(--r); padding: 14px 16px; font-size: 14px; color: var(--muted); display: grid; gap: 4px; }
.parents strong { color: var(--ink); }
@media (max-width: 380px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 130px; } }

/* ---------- Gemensamt för spelen ---------- */
.screen { display: flex; flex-direction: column; gap: 14px; }
.gtitle { font-family: var(--f-display); font-size: 28px; line-height: 1; margin: 0; }
.panel { background: var(--card); border-radius: var(--r); padding: 18px; box-shadow: 0 3px 0 rgba(16,24,32,.08); }
.bigbtn { font-family: var(--f-display); font-size: 26px; font-weight: 800; padding: 14px 28px; border-radius: 999px; background: var(--leaf); color: #fff; box-shadow: 0 5px 0 #3E9A4C; min-width: 200px; }
.bigbtn:active { transform: translateY(3px); box-shadow: 0 2px 0 #3E9A4C; }
.bigbtn.alt { background: var(--cyan); color: var(--navy); box-shadow: 0 5px 0 #23A3B1; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.stars { display: flex; gap: 6px; justify-content: center; }
.star { width: 30px; height: 30px; }
.star path { fill: #D7DEE3; transition: fill .3s; }
.star.on path { fill: var(--sun); }

/* ---------- 1. Lyft skivstången ---------- */
.lift-card { display: grid; justify-items: center; text-align: center; gap: 12px; }
.lift-head { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.kg { font-family: var(--f-display); font-size: 34px; font-weight: 800; line-height: 1; background: var(--navy); color: #fff; padding: 6px 18px; border-radius: 14px; font-variant-numeric: tabular-nums; }
.try { font-weight: 800; color: var(--muted); }
.lights { display: flex; gap: 10px; }
.lights i { width: 22px; height: 22px; border-radius: 50%; background: #DCE3E7; box-shadow: inset 0 -3px 0 rgba(16,24,32,.12); transition: background .2s; }
.lights i.ok { background: #fff; box-shadow: 0 0 0 3px var(--navy), 0 0 14px rgba(255,201,60,.9); }
.lights i.no { background: var(--red); }
.lifter { width: min(300px, 78vw); height: auto; overflow: visible; }
.lifter .bar { transform: translateY(150px); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.lifter .arm { transform-box: fill-box; transform-origin: 50% 6%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.lifter.up .bar { transform: translateY(38px); }
.lifter.up .arm { transform: rotate(180deg); }
.lifter.fail .bar { animation: wobble-drop .9s ease-in forwards; }
@keyframes wobble-drop { 0% { transform: translateY(150px) } 20% { transform: translateY(118px) rotate(-3deg) } 40% { transform: translateY(124px) rotate(3deg) } 100% { transform: translateY(196px) } }
.meter { position: relative; width: 100%; max-width: 420px; height: 34px; border-radius: 999px; background: #E3EEF1; box-shadow: inset 0 3px 0 rgba(16,24,32,.08); cursor: pointer; }
.meter .zone { position: absolute; top: 0; bottom: 0; background: var(--leaf); border-radius: 999px; }
.meter .needle { position: absolute; top: -10px; width: 0; height: 0; transform: translateX(-12px); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 18px solid var(--navy); }
.lift-btn { background: var(--orange); box-shadow: 0 5px 0 #B9542A; font-size: 32px; letter-spacing: .04em; }
.lift-btn:active { box-shadow: 0 2px 0 #B9542A; }
.lift-btn:disabled { opacity: .55; }
.hint { color: var(--muted); font-weight: 700; font-size: 15px; margin: 0; }
/* Atleten – figuren som visar övningarna */
.atlet { width: 78%; height: auto; overflow: visible; }
.atlet .p { transform-box: fill-box; }
.atlet .arm-l { transform-origin: 100% 8%; } .atlet .arm-r { transform-origin: 0% 8%; }
.atlet .leg-l { transform-origin: 70% 4%; } .atlet .leg-r { transform-origin: 30% 4%; }
.atlet .all { transform-box: view-box; transform-origin: 100px 190px; }
@keyframes a-jump { 0%,100% { transform: translateY(0) } 45% { transform: translateY(-34px) } 60% { transform: translateY(-30px) } }
@keyframes a-jacks-arm-l { 0%,100% { transform: rotate(0) } 50% { transform: rotate(150deg) } }
@keyframes a-jacks-arm-r { 0%,100% { transform: rotate(0) } 50% { transform: rotate(-150deg) } }
@keyframes a-jacks-leg-l { 0%,100% { transform: rotate(0) } 50% { transform: rotate(22deg) } }
@keyframes a-jacks-leg-r { 0%,100% { transform: rotate(0) } 50% { transform: rotate(-22deg) } }
@keyframes a-squat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(26px) } }
@keyframes a-squat-leg { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.62) } }
@keyframes a-arms-front { 0%,100% { transform: rotate(0) } 50% { transform: rotate(80deg) } }
@keyframes a-arms-front-r { 0%,100% { transform: rotate(0) } 50% { transform: rotate(-80deg) } }
@keyframes a-wobble { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) } }
@keyframes a-run-l { 0%,100% { transform: rotate(-28deg) } 50% { transform: rotate(28deg) } }
@keyframes a-run-r { 0%,100% { transform: rotate(28deg) } 50% { transform: rotate(-28deg) } }
@keyframes a-circle { to { transform: rotate(360deg) } }
@keyframes a-circle-r { to { transform: rotate(-360deg) } }
@keyframes a-stretch { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes a-spin { to { transform: rotateY(360deg) } }
@keyframes a-bear { 0%,100% { transform: rotate(60deg) translateX(0) } 50% { transform: rotate(60deg) translateX(10px) } }
@keyframes a-clap-l { 0%,100% { transform: rotate(150deg) } 50% { transform: rotate(178deg) } }
@keyframes a-clap-r { 0%,100% { transform: rotate(-150deg) } 50% { transform: rotate(-178deg) } }
.m-jump .all { animation: a-jump .8s ease-in-out infinite; }
.m-jacks .arm-l { animation: a-jacks-arm-l .8s ease-in-out infinite; } .m-jacks .arm-r { animation: a-jacks-arm-r .8s ease-in-out infinite; }
.m-jacks .leg-l { animation: a-jacks-leg-l .8s ease-in-out infinite; } .m-jacks .leg-r { animation: a-jacks-leg-r .8s ease-in-out infinite; }
.m-squat .upper { animation: a-squat 1.4s ease-in-out infinite; } .m-squat .leg-l, .m-squat .leg-r { animation: a-squat-leg 1.4s ease-in-out infinite; }
.m-squat .arm-l { animation: a-arms-front 1.4s ease-in-out infinite; } .m-squat .arm-r { animation: a-arms-front-r 1.4s ease-in-out infinite; }
.m-balance .all { animation: a-wobble 1.6s ease-in-out infinite; } .m-balance .leg-r { transform: rotate(-80deg); }
.m-balance .arm-l { transform: rotate(80deg); } .m-balance .arm-r { transform: rotate(-80deg); }
.m-plane .all { animation: a-wobble 2s ease-in-out infinite; } .m-plane .arm-l { transform: rotate(90deg); } .m-plane .arm-r { transform: rotate(-90deg); } .m-plane .leg-r { transform: rotate(-60deg); }
.m-run .leg-l { animation: a-run-l .45s linear infinite; } .m-run .leg-r { animation: a-run-r .45s linear infinite; }
.m-run .arm-l { animation: a-run-r .45s linear infinite; } .m-run .arm-r { animation: a-run-l .45s linear infinite; }
.m-circles .arm-l { animation: a-circle 1.1s linear infinite; } .m-circles .arm-r { animation: a-circle-r 1.1s linear infinite; }
.m-stretch .all { animation: a-stretch 1.6s ease-in-out infinite; } .m-stretch .arm-l { transform: rotate(170deg); } .m-stretch .arm-r { transform: rotate(-170deg); }
.m-spin .all { animation: a-spin 1.8s ease-in-out infinite; }
.m-bear .all { animation: a-bear 1.2s ease-in-out infinite; } .m-bear .arm-l { transform: rotate(30deg); } .m-bear .arm-r { transform: rotate(-30deg); }
.m-clap .arm-l { animation: a-clap-l .5s ease-in-out infinite; } .m-clap .arm-r { animation: a-clap-r .5s ease-in-out infinite; }
.m-freeze .arm-l { transform: rotate(130deg); } .m-freeze .leg-l { transform: rotate(18deg); }
.m-swing .upper { animation: a-squat 1.1s ease-in-out infinite; } .m-swing .arm-l { animation: a-arms-front 1.1s ease-in-out infinite; } .m-swing .arm-r { animation: a-arms-front-r 1.1s ease-in-out infinite; }
.done-burst { font-family: var(--f-display); font-size: 44px; line-height: 1; margin: 0; }

/* ---------- 3. Roddtävlingen ---------- */
.row-card { display: grid; justify-items: center; text-align: center; gap: 14px; }
.monitor { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: #1B2A22; border: 5px solid var(--navy); border-radius: 14px; padding: 10px 8px; color: #B8F5C4; }
.monitor div { display: grid; }
.monitor b { font-family: var(--f-brand); font-size: clamp(22px, 6vw, 30px); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.monitor span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7FC892; font-weight: 800; }
.lanes { --track: 0.78; position: relative; width: 100%; display: grid; gap: 6px; padding: 8px 0; border-radius: 14px; background: repeating-linear-gradient(0deg, #4FB3D9 0 14px, #5CC0E4 14px 28px); overflow: hidden; }
.lane { position: relative; height: 52px; border-bottom: 3px dashed rgba(255,255,255,.55); }
.lane:last-of-type { border-bottom: 0; }
.lname { position: absolute; left: 8px; top: 2px; font-size: 11px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .06em; z-index: 1; }
.boat { position: absolute; left: 0; top: 10px; width: 22%; }
.boat svg { width: 100%; height: auto; display: block; }
.boat.pull .oar { animation: oar .35s ease-out; transform-box: fill-box; transform-origin: 100% 0; }
@keyframes oar { 50% { transform: rotate(-14deg) } }
.finish { position: absolute; top: 0; bottom: 0; right: 4%; width: 10px; background: repeating-linear-gradient(0deg, #fff 0 8px, var(--navy) 8px 16px); }
.row-meter .mlabel { position: absolute; top: 40px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.row-meter .mlabel.l { left: 0; } .row-meter .mlabel.r { right: 0; }
.row-meter { margin-bottom: 14px; }
.row-btn { background: var(--cyan); color: var(--navy); box-shadow: 0 5px 0 #23A3B1; font-size: 32px; min-width: 220px; }
.row-btn:active { box-shadow: 0 2px 0 #23A3B1; }
.medal { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFE59A, #FFC93C 55%, #D99A12); border: 5px solid #fff; box-shadow: 0 0 0 3px var(--navy); }
.medal.silver { background: radial-gradient(circle at 35% 30%, #fff, #C9D1D6 55%, #8E9AA3); }
.medal span { font-family: var(--f-display); font-size: 40px; font-weight: 800; color: var(--navy); }
.seg button:disabled { opacity: .5; }

/* ---------- 4. Memory ---------- */
.mem { display: grid; gap: 8px; }
.mcard { aspect-ratio: 3 / 4; perspective: 600px; }
.mcard .in { position: relative; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.mcard.open .in, .mcard.got .in { transform: rotateY(180deg); }
.mcard .face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(16,24,32,.15); }
.mcard .back { background: repeating-linear-gradient(45deg, var(--navy) 0 9px, #1B2731 9px 18px); border: 3px solid var(--cyan); }
.mcard .back b { font-family: var(--f-brand); color: var(--cyan); font-size: 15px; letter-spacing: .05em; }
.mcard .front { background: #fff; transform: rotateY(180deg); padding: 10%; }
.mcard .front svg { width: 100%; height: 100%; }
.mcard.got .front { background: #E6F7EA; }
.seg { display: inline-flex; background: var(--card); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { padding: 7px 14px; border-radius: 999px; font-weight: 800; }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.score { font-weight: 800; color: var(--muted); }

/* ---------- 5. Hinderbanan ---------- */
.runwrap { position: relative; border-radius: var(--r); overflow: hidden; background: var(--navy); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.runwrap canvas { display: block; width: 100%; height: auto; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: rgba(16,24,32,.55); color: #fff; padding: 16px; }
.overlay h3 { font-family: var(--f-display); font-size: clamp(28px, 7vw, 40px); margin: 0; line-height: 1; }
.overlay p { margin: 6px 0 14px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .atlet *, .atlet .all, .boat .oar, .mcard .in { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- 5. Måla ---------- */
.t-paint { background: #C9B6F5; }
.t-shapes { background: #A8E0B0; }
.motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.motif { background: var(--card); border-radius: var(--r); padding: 10px 10px 12px; display: grid; gap: 6px; justify-items: center; font-family: var(--f-display); font-size: 19px; font-weight: 800; box-shadow: 0 4px 0 rgba(16,24,32,.12); }
.motif svg { width: 100%; height: auto; border-radius: 12px; }
.motif:active { transform: translateY(2px); }
.paintwrap { background: var(--card); border-radius: var(--r); padding: 10px; box-shadow: 0 3px 0 rgba(16,24,32,.08); }
.paintwrap svg { width: 100%; height: auto; display: block; border-radius: 12px; touch-action: manipulation; }
.paintwrap .reg { cursor: pointer; transition: fill .15s; }
.paintwrap .reg.splash { animation: splash .3s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes splash { 50% { transform: scale(1.04) } }
.paintwrap.finished { box-shadow: 0 0 0 5px var(--sun), 0 3px 0 rgba(16,24,32,.08); }
.nums text { font-family: var(--f-display); font-weight: 800; fill: #101820; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 2.5px; }
.palette-c { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pc { width: 50px; height: 50px; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 0 0 2px rgba(16,24,32,.18), 0 3px 0 rgba(16,24,32,.15); display: grid; place-items: center; }
.pc b { font-family: var(--f-display); font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.pc[aria-checked="true"] { transform: scale(1.15); box-shadow: 0 0 0 4px var(--navy), 0 3px 0 rgba(16,24,32,.15); }
.pc-erase { background: #fff; } .pc-erase b { color: var(--navy); text-shadow: none; }
.numtoggle { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; }
.numtoggle input { width: 22px; height: 22px; }

/* ---------- 6. Former ---------- */
.sboard { display: grid; gap: 10px; background: var(--card); border-radius: var(--r); padding: 12px; box-shadow: 0 3px 0 rgba(16,24,32,.08); }
.slot { position: relative; aspect-ratio: 1; border-radius: 16px; background: #F1F6F8; border: 3px dashed #C5D0D6; display: grid; place-items: center; padding: 10%; }
.slot svg { width: 100%; height: 100%; }
.slot .ghost g { stroke: #B4C0C7; stroke-dasharray: 6 5; }
.slot.filled { border-style: solid; border-color: var(--leaf); background: #EAF8EC; animation: pop .3s ease-out; }
.slot.nope { animation: nope .35s; }
.sname { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 13px; }
@keyframes nope { 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
@keyframes pop { 0% { transform: scale(.85) } 70% { transform: scale(1.05) } 100% { transform: scale(1) } }
.stray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 90px; }
.shape { width: 84px; height: 84px; padding: 8px; border-radius: 18px; background: var(--card); box-shadow: 0 4px 0 rgba(16,24,32,.15); touch-action: none; }
.shape svg { width: 100%; height: 100%; pointer-events: none; }
.shape.picked { outline: 4px solid var(--navy); transform: scale(1.08); }
.shape.lifted { opacity: .3; }
.shape.done { visibility: hidden; }
.shape.dragging { position: fixed; z-index: 50; pointer-events: none; transform: scale(1.12); box-shadow: 0 12px 24px rgba(16,24,32,.25); }
@media (max-width: 380px) { .shape { width: 70px; height: 70px; } .pc { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .slot, .paintwrap .reg { animation: none !important; } }

/* ---------- 7. Lasta stången ---------- */
.t-load { background: #9FD3F5; }
.t-pattern { background: #FFD6A5; }
.t-code { background: #BFD7FF; }
.load-card { display: grid; justify-items: center; text-align: center; gap: 12px; }
.load-goal { display: grid; justify-items: center; gap: 4px; min-height: 64px; }
.goal-lbl { font-weight: 800; color: var(--muted); }
.goal-kg { font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: 1; background: var(--navy); color: #fff; padding: 6px 18px; border-radius: 14px; font-variant-numeric: tabular-nums; }
.goal-sub { font-size: 13px; color: var(--muted); font-weight: 700; }
.dots { display: flex; gap: 10px; }
.dots i { width: 30px; height: 30px; border-radius: 50%; border: 4px solid #5BBF6A; background: #fff; transition: background .2s; }
.dots i.on { background: #5BBF6A; }
.loadwrap { width: 100%; max-width: 440px; cursor: pointer; }
.loadbar { width: 100%; height: auto; display: block; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.loadbar.lifted { transform: translateY(-14px) scale(1.04); }
.load-now { margin: 0; font-size: 18px; font-weight: 700; min-height: 1.4em; }
.load-now b { font-family: var(--f-display); font-size: 24px; }
.platerow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.platebtn { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; }
.platebtn svg { width: 100%; height: 100%; }
.platebtn b { position: absolute; bottom: 2px; right: -2px; background: var(--navy); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 13px; font-family: var(--f-display); }
.platebtn:active { transform: scale(.94); }

/* ---------- 8. Mönsterkedjan ---------- */
.pat-card { display: grid; justify-items: center; gap: 14px; text-align: center; }
.chain { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 10px; background: #F1F6F8; border-radius: 16px; width: 100%; }
.link { width: 48px; height: 48px; display: grid; place-items: center; }
.link svg { width: 100%; height: 100%; }
.link.ask { border: 3px dashed #9AA6B0; border-radius: 50%; font-family: var(--f-display); font-size: 26px; font-weight: 800; color: var(--muted); }
.link.filled { animation: pop .35s ease-out; }
.popts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.popt { width: 92px; height: 92px; border-radius: 22px; background: var(--card); box-shadow: 0 4px 0 rgba(16,24,32,.15); padding: 8px; border: 3px solid #E3EEF1; }
.popt svg { width: 100%; height: 100%; }
.popt.right { border-color: var(--leaf); background: #EAF8EC; }
.popt.dim { opacity: .4; }
.popt.nope { animation: nope .35s; }

/* ---------- 9. Programmera Coachen ---------- */
.cboard { position: relative; display: grid; gap: 4px; background: var(--rubber); padding: 4px; border-radius: 16px; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 1; }
.ccell { border-radius: 8px; background: var(--rubber-line); display: grid; place-items: center; padding: 14%; }
.ccell svg { width: 100%; height: 100%; }
.coach { position: absolute; transition: left .35s ease, top .35s ease; display: grid; place-items: center; pointer-events: none; }
.coach svg { width: 86%; height: 86%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.coach.bump { animation: nope .35s; }
.coach.cheer svg { animation: a-jump .6s ease-in-out 3; }
.prog { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 52px; background: var(--card); border-radius: 16px; padding: 8px; align-items: center; }
.prog .card { width: 40px; height: 40px; border-radius: 10px; background: #E3EEF1; color: var(--navy); padding: 6px; }
.prog .card.on { background: var(--sun); transform: scale(1.12); }
.prog .card svg { width: 100%; height: 100%; }
.prog-empty { color: var(--muted); font-weight: 700; }
.arrows { display: flex; gap: 10px; justify-content: center; }
.abtn { width: 70px; height: 70px; border-radius: 20px; background: var(--navy); color: #fff; padding: 12px; box-shadow: 0 4px 0 #000; }
.abtn svg { width: 100%; height: 100%; }
.abtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
@media (max-width: 380px) { .abtn { width: 60px; height: 60px; } .popt { width: 80px; height: 80px; } .platebtn { width: 64px; height: 64px; } }