/* =====================================================================
   Campus – stil
   css/ks-campus.css   (campus.php)

   Scenen (canvasen) har fasta färger. Panelerna följer temat: mörka
   glaspaneler som förval (Rymd/Hav), ljusa i de ljusa temana.
   ===================================================================== */
.cp-sida {
    --cp-panel: rgba(22, 26, 58, .92); --cp-kant: rgba(255, 255, 255, .16); --cp-text: #f4f6ff; --cp-text2: #b9c0e6;
    --cp-knapp: rgba(255, 255, 255, .1); --cp-knapp-kant: rgba(255, 255, 255, .22); --cp-gul: #ffc83d; --cp-skugga: 0 10px 34px rgba(0, 0, 0, .35);
    margin: 0; overflow: hidden; background: #8fcf63; font-family: Nunito, 'Exo 2', system-ui, sans-serif; color: var(--cp-text);
    touch-action: none; -webkit-tap-highlight-color: transparent;
}
[data-theme="ljus"] .cp-sida {
    --cp-panel: rgba(255, 255, 255, .95); --cp-kant: rgba(40, 50, 90, .14); --cp-text: #23284a; --cp-text2: #5b6282;
    --cp-knapp: #f3f5ff; --cp-knapp-kant: rgba(40, 50, 90, .18); --cp-skugga: 0 10px 30px rgba(40, 50, 90, .18);
}
.cp-sida *, .cp-sida *::before, .cp-sida *::after { box-sizing: border-box; }
.cp-sida [hidden] { display: none !important; }
.cp-scen { position: fixed; inset: 0; display: block; outline: none; cursor: pointer; }
.cp-sida :focus-visible { outline: 3px solid var(--cp-gul); outline-offset: 2px; }

/* ── Överst ── */
.cp-topp {
    position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px; pointer-events: none;
}
.cp-topp > * { pointer-events: auto; }
.cp-vaxel { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cp-panel); border: 1px solid var(--cp-kant); box-shadow: var(--cp-skugga); }
.cp-vaxel-val { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: var(--cp-text); text-decoration: none; font-weight: 800; font-size: .9rem; }
.cp-vaxel-val:hover { background: var(--cp-knapp); }
.cp-vaxel-val.aktiv { background: var(--cp-gul); color: #2b2f4a; }
.cp-saldo { display: flex; gap: 6px; margin-left: auto; }
.cp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 999px; background: var(--cp-panel); border: 1px solid var(--cp-kant); font-weight: 700; box-shadow: var(--cp-skugga); }
.cp-chip b { font-family: 'Fredoka One', Nunito, sans-serif; font-weight: 400; font-size: 1.1rem; }
.cp-knappar { display: flex; gap: 6px; }
.cp-knapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 14px; border-radius: 14px; cursor: pointer;
    background: var(--cp-panel); color: var(--cp-text); border: 1px solid var(--cp-knapp-kant); font: 800 .92rem Nunito, sans-serif; text-decoration: none; box-shadow: var(--cp-skugga);
}
.cp-panel .cp-knapp { background: var(--cp-knapp); box-shadow: none; }
.cp-knapp:hover { border-color: var(--cp-gul); }
.cp-knapp.rund { width: 40px; padding: 0; border-radius: 50%; font-family: 'Fredoka One', sans-serif; font-size: 1.1rem; }
.cp-knapp.stor { min-height: 48px; padding: 10px 18px; font-size: 1rem; flex: 1; }
.cp-knapp.gul, .cp-panel .cp-knapp.gul { background: var(--cp-gul); color: #2b2f4a; border-color: #e0a800; }
.cp-knapp[disabled] { opacity: .5; cursor: default; }

/* ── Paneler ── */
.cp-panel { position: fixed; z-index: 6; background: var(--cp-panel); color: var(--cp-text); border: 1px solid var(--cp-kant); border-radius: 22px; box-shadow: var(--cp-skugga); padding: 16px 18px; }
.cp-panel h2 { margin: 0; font: 400 1.3rem 'Fredoka One', Nunito, sans-serif; letter-spacing: .01em; }
.cp-panel h3 { margin: 10px 0 6px; font: 800 .8rem Nunito, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-text2); }
.cp-litet { font-size: .88rem; color: var(--cp-text2); margin: 8px 0; }
.cp-rad { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cp-hus-topp { display: flex; align-items: center; gap: 12px; }
.cp-hus-topp > div { flex: 1; min-width: 0; }
.cp-x { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cp-knapp-kant); background: var(--cp-knapp); color: var(--cp-text); cursor: pointer; font-size: 1rem; }
.cp-logga { flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 4px solid #ccc; display: grid; place-items: center; overflow: hidden; font-size: 1.8rem; }
.cp-logga img { width: 84%; height: 84%; object-fit: contain; }
.cp-logga.liten { flex-basis: 40px; width: 40px; height: 40px; border-width: 3px; font-size: 1.25rem; }
.cp-nivastjarnor { color: var(--cp-gul); font-weight: 800; letter-spacing: .06em; margin-top: 2px; }
.cp-matare { height: 12px; border-radius: 999px; background: var(--cp-knapp); border: 1px solid var(--cp-kant); overflow: hidden; margin-top: 12px; }
.cp-matare > div { height: 100%; width: 0; border-radius: 999px; transition: width .6s ease; }

.cp-huspanel { left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(460px, calc(100vw - 24px)); max-height: 60vh; overflow: auto; animation: cp-upp .25s ease; }
.cp-barn { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cp-barnlank { padding: 8px 10px; border-radius: 12px; background: var(--cp-knapp); border: 1px solid var(--cp-kant); color: var(--cp-text); text-decoration: none; font-weight: 700; font-size: .9rem; }
.cp-barnlank:hover { border-color: var(--cp-gul); }
.cp-sidopanel { top: 74px; right: 14px; width: min(400px, calc(100vw - 28px)); max-height: calc(100vh - 100px); overflow: auto; animation: cp-in .22s ease; }
.cp-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cp-lista li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--cp-knapp); border: 1px solid var(--cp-kant); }
.cp-lista-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-lista-text small { color: var(--cp-text2); }
.cp-lista .cp-knapp { min-height: 36px; padding: 5px 10px; }
.cp-butik { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.cp-vara { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 16px; cursor: pointer; background: var(--cp-knapp); border: 2px solid var(--cp-kant); color: var(--cp-text); font: 700 .85rem Nunito, sans-serif; text-align: center; }
.cp-vara:hover:not([disabled]) { border-color: var(--cp-gul); transform: translateY(-2px); }
.cp-vara[disabled] { opacity: .45; cursor: default; }
.cp-vara canvas { width: 76px; height: 76px; border-radius: 12px; background: #a6dc76; }
.cp-vara b { color: var(--cp-gul); }
[data-theme="ljus"] .cp-vara b { color: #b07d00; }

.cp-placera { position: fixed; z-index: 6; left: 50%; top: 76px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 10px 8px 16px; border-radius: 999px; background: var(--cp-panel); border: 2px solid var(--cp-gul); font-weight: 800; box-shadow: var(--cp-skugga); max-width: calc(100vw - 24px); }
.cp-besked { position: fixed; z-index: 7; left: 50%; top: 80px; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: 999px; background: var(--cp-gul); color: #2b2f4a; font-weight: 800; box-shadow: var(--cp-skugga); transition: .3s ease; max-width: calc(100vw - 24px); text-align: center; }
.cp-besked.syns { opacity: 1; transform: translate(-50%, 0); }

.cp-demo { left: 14px; bottom: 14px; width: min(320px, calc(100vw - 28px)); font-size: .9rem; }
.cp-demo summary { cursor: pointer; list-style: none; }
.cp-demo summary::-webkit-details-marker { display: none; }
.cp-demo summary h2 { display: inline; font-size: 1.05rem; }
.cp-demo summary::after { content: ' ▾'; color: var(--cp-text2); }
.cp-demo:not([open]) { padding: 10px 16px; }
.cp-demo label { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cp-demo select { flex: 1; min-width: 0; padding: 6px; border-radius: 10px; background: var(--cp-knapp); color: var(--cp-text); border: 1px solid var(--cp-kant); }
.cp-demo input[type=range] { flex: 1; accent-color: var(--cp-gul); }

@keyframes cp-upp { from { transform: translate(-50%, 20px); opacity: 0; } }
@keyframes cp-in { from { transform: translateX(20px); opacity: 0; } }
@media (max-width: 700px) {
    .cp-knappar .cp-knapp span, .cp-dold { display: none; }
    .cp-vaxel-val { padding: 6px 9px; font-size: .8rem; }
    .cp-saldo { margin-left: 0; }
    .cp-sidopanel { top: auto; bottom: 10px; right: 10px; left: 10px; width: auto; max-height: 70vh; }
    .cp-demo { left: 10px; bottom: 10px; width: auto; max-width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce) { .cp-panel, .cp-besked { animation: none; transition: none; } }

/* ── Lekfull stil (version 2): tjocka, runda "leksaksknappar" ──
   Knapparna har en mörkare kant nedtill som trycks ihop när man
   trycker – som en riktig knapp. */
.cp-sida { --cp-gul: #ffc23c; --cp-rosa: #ff6fa3; --cp-gron: #38c486; background: #7ccfff; font-family: Nunito, system-ui, sans-serif; }
.cp-panel, .cp-chip, .cp-vaxel { border-radius: 26px; border-width: 3px; }
.cp-panel h2, .cp-vaxel-val, .cp-knapp, .cp-chip b { font-family: 'Fredoka One', Nunito, sans-serif; font-weight: 400; letter-spacing: .01em; }
.cp-knapp {
    border-radius: 18px; border: 3px solid rgba(0, 0, 0, .12); box-shadow: 0 5px 0 rgba(0, 0, 0, .22);
    transition: transform .08s ease, box-shadow .08s ease;
}
.cp-knapp:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
.cp-panel .cp-knapp { box-shadow: 0 4px 0 rgba(0, 0, 0, .14); }
.cp-knapp.gul, .cp-panel .cp-knapp.gul { background: var(--cp-gul); color: #3a2a00; border-color: #e09e00; box-shadow: 0 5px 0 #c98a00; }
.cp-knapp.gron, .cp-panel .cp-knapp.gron { background: var(--cp-gron); color: #fff; border-color: #24a06b; box-shadow: 0 5px 0 #1d8a5b; }
.cp-knapp.rosa { background: var(--cp-rosa); color: #fff; border-color: #e0558a; box-shadow: 0 5px 0 #c94677; }
.cp-vaxel-val.aktiv { background: var(--cp-rosa); color: #fff; }
.cp-logga { border-width: 5px; }
.cp-matare { height: 16px; border-width: 3px; }

/* Smycka huset */
.cp-val { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-valknapp {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 82px; padding: 6px 8px 8px; cursor: pointer;
    border-radius: 18px; background: var(--cp-knapp); color: var(--cp-text); border: 3px solid var(--cp-kant);
    font: 700 .82rem Nunito, sans-serif; box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
}
.cp-valknapp canvas { width: 64px; height: 44px; border-radius: 10px; background: #e9f7ff; }
.cp-valknapp small { color: var(--cp-text2); font-weight: 800; }
.cp-valknapp.vald { border-color: var(--cp-rosa); background: rgba(255, 111, 163, .16); }
.cp-valknapp.vald small { color: var(--cp-rosa); }
.cp-valknapp:hover:not([disabled]):not(.vald) { border-color: var(--cp-gul); transform: translateY(-2px); }
.cp-valknapp[disabled] { opacity: .45; cursor: default; }
#cpSmycka { width: min(460px, calc(100vw - 28px)); }
.cp-lista a.cp-lista-text { color: var(--cp-text); text-decoration: none; font-weight: 800; }
.cp-lista a.cp-lista-text:hover { text-decoration: underline; }
.cp-vara canvas { background: linear-gradient(#bfe8ff 0 70%, #86d35a 70%); }

/* Min figur */
#cpFigur { width: min(480px, calc(100vw - 28px)); }
/* Förhandsfiguren och flikarna står still, bara valen skrollar. */
#cpFigur:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
#cpFigurDelar { overflow: auto; min-height: 0; flex: 1; padding: 0 4px 6px; margin: 0 -4px; }
.cp-figur-topp { display: flex; gap: 14px; align-items: center; margin: 6px 0 10px; }
.cp-figur-prov {
    width: 150px; height: 183px; flex: none; cursor: pointer; border-radius: 22px;
    background: radial-gradient(circle at 50% 85%, #c9f2d8 0 30%, transparent 31%), linear-gradient(#e6f6ff, #fff6fb);
    border: 3px solid var(--cp-kant);
}
.cp-figur-sida { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cp-flikar { display: flex; gap: 6px; margin: 4px 0 6px; flex-wrap: wrap; }
.cp-flik {
    flex: 1; padding: 8px 10px; border-radius: 16px; cursor: pointer; border: 3px solid var(--cp-kant);
    background: var(--cp-knapp); color: var(--cp-text); font: 400 .95rem 'Fredoka One', Nunito, sans-serif;
}
.cp-flik.vald { background: var(--cp-rosa); border-color: #e0558a; color: #fff; }
.cp-fargrad { gap: 10px; }
.cp-fargknapp {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0;
    background: var(--prov); border: 3px solid rgba(0, 0, 0, .14); box-shadow: 0 3px 0 rgba(0, 0, 0, .15), inset 0 -4px 0 rgba(0, 0, 0, .08);
    transition: transform .08s ease;
}
.cp-fargknapp:hover { transform: translateY(-2px); }
.cp-fargknapp.vald { outline: 4px solid var(--cp-rosa); outline-offset: 2px; transform: scale(1.08); }
.cp-fargknapp:focus-visible, .cp-flik:focus-visible { outline: 4px solid var(--cp-gul); outline-offset: 2px; }
#cpFigur .cp-valknapp { min-width: 74px; }
@media (max-width: 600px) {
    .cp-figur-prov { width: 110px; height: 134px; }
}

/* ── Högermenyn (php/sidebar.php) ─────────────────────────────────────
   Sidan har inget vanligt sidhuvud som ligger ovanpå panelen, så panelen
   lägger sig överst och börjar nästan i överkanten. Den stängs med sitt
   eget ✖ eller med ☰-knappen. */
body.cp-sida #sidebar-right { z-index: 100002; padding-top: 4.2rem; }
body.cp-sida #sidebar-right .close-button-sidebar { top: .9rem; }
body.cp-sida #sidebar-right > h2 { margin-top: .2rem; }
body.cp-sida.sidebar-open header { z-index: 5 !important; }
@media (max-width: 48em) {
    body.cp-sida #sidebar-right { padding-top: 4.2rem; }
    body.cp-sida #sidebar-right .close-button-sidebar { top: .9rem; }
}

/* Testläget för admin */
.cp-testchip { background: #fff4c2; color: #6b4a00; border-color: #ffc23c; }

/* Zoomknapparna nere till vänster */
.cp-zoom { position: fixed; z-index: 5; left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; }
.cp-zoom[hidden] { display: none; }
.cp-zoom .cp-knapp.rund { font-size: 1.3rem; line-height: 1; }
.cp-zoom .cp-knapp[aria-pressed="true"] { background: var(--cp-rosa); color: #fff; border-color: #e0558a; }
@media (max-width: 700px) { .cp-zoom { bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; } }