/* Paket konto: eigene Styles, nutzt die Tokens aus style.css */

/* ===== Willkommen: Sheet über dem abgedunkelten Spiel ===== */
.kdim{position:fixed;inset:0;z-index:42;display:flex;align-items:flex-end;justify-content:center;background:var(--dim)}
.kdim:not(.hidden){animation:fadein .2s ease-out}
.kdim:not(.hidden) .sheet{animation:hoch .22s ease-out}
.kwelcome{max-height:calc(100dvh - var(--safe-top));overflow-y:auto}
.kico{display:flex;align-items:center;gap:12px;min-width:0}
.kico svg{flex:none}
.kzwei{display:flex;flex-direction:column;gap:2px;padding:8px 0}
.kmeta{font-size:11.5px;font-weight:400;color:var(--muted-3)}
.kmeta-ok{color:var(--green)}
.kwnote{margin-bottom:12px}

/* ===== Volle Seiten (laufen unter der Statusleiste, Kopf sitzt direkt darunter) ===== */
.kscr{position:fixed;inset:0;z-index:43;display:flex;justify-content:center;background:var(--bg);overflow:hidden}
.kscr:not(.hidden){animation:fadein .2s ease-out}
.kscr-hoch{z-index:44}
.kscr-hoch2{z-index:46}
.kscr-hoch3{z-index:47}
.kform{width:100%;max-width:430px;height:100%;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding:var(--safe-top) 0 var(--safe-bottom);background:var(--panel);color:var(--text-2)}
@media (min-width:520px){.kform{border-inline:1px solid var(--line)}}
.kform .head{flex:none}
.kform .btns{flex:none}
.kmitte{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:2px 20px 4px}
.kleise{font-size:12px;color:var(--muted-3)}
.ksatz{font-size:14px;line-height:1.5;color:var(--muted);text-align:center;margin:0}
.klink{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:none;border:0;border-radius:10px;font-size:12.5px;color:var(--copper-text);cursor:pointer}
.klink:hover{background:var(--copper-row)}

/* Felder */
.kfld{flex:none;display:flex;flex-direction:column;gap:7px;padding:8px 20px}
.kfld label{font:400 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.kfld input{display:block;width:100%;height:52px;padding:0 14px;background:var(--input-bg);border:1px solid var(--line-3);border-radius:10px;color:var(--text);font:400 17px var(--f-text);outline:none}
.kfld input:focus{border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-halo)}
.kfld input.schlecht{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,90,79,.15)}
.kfld input:disabled{opacity:.5}
.khint{display:flex;align-items:center;gap:6px;margin-top:-2px;font-size:13px;color:var(--muted)}
.khint svg{flex:none}
.kpw{position:relative}
.kpw input{padding-right:52px}
.kauge{position:absolute;right:2px;top:2px}
.kauge .kslash{display:none}
.kauge[aria-pressed="true"]{color:var(--copper-text)}
.kauge[aria-pressed="true"] .kslash{display:block}
.kstatus{flex:none;display:flex;align-items:center;gap:6px;min-height:20px;padding:0 20px 2px;font:400 12px var(--f-mono);color:var(--muted-3)}
.kstatus.bad{color:var(--red-2)}
.kstatus.ok{color:var(--green)}
.kfehler{flex:none;min-height:0;padding:4px 20px 0;font-size:13.5px;font-weight:500;color:var(--red-2)}
.kfehler:empty{display:none}

/* Drei durchgestrichene Dinge */
.kdrei{display:flex;justify-content:center;align-items:flex-start;gap:20px;padding:6px 0 4px}
.kdrei-i{display:flex;flex-direction:column;align-items:center;gap:6px}
.kdrei-i .cond{font-weight:700;font-size:17px;color:var(--text);white-space:nowrap}

/* Eltern */
.kpunkte{flex:1 0 auto}
.kpi{display:flex;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line)}
.kpi svg{flex:0 0 26px;margin-top:2px}
.kpi h2{margin:0 0 4px;font:700 18px/1.2 var(--f-cond);color:var(--text)}
.kpi p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}

/* Name gesichert */
.kgesch{align-items:center;text-align:center;padding-left:28px;padding-right:28px}
.kgesch-mitte{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:12px 0}
.kled{display:flex;align-items:center;gap:10px}
.kled .mono{font-size:12px;letter-spacing:.06em;color:var(--green)}
.kgross{margin:0;font-weight:700;font-size:40px;line-height:1.05;color:var(--text);overflow-wrap:anywhere}
.kabsatz{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.kabsatz.kheller{font-size:14px;color:var(--text-3)}
.kavwrap{position:relative;margin-top:6px}
.kavwrap svg{display:block}
.kwuerfel{position:absolute;right:-8px;bottom:-4px;width:48px;height:48px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:24px;border:2px solid var(--panel);background:var(--copper);color:var(--copper-ink);cursor:pointer}
.kwuerfel:active{transform:scale(.94)}
.kgesch-btns{width:100%;padding-left:0;padding-right:0}

/* Avatar-Baukasten */
.kvorschau{flex:none;display:flex;align-items:center;justify-content:center;padding:0 20px 10px}
.kreihe{display:flex;flex-direction:column;gap:6px;padding:7px 20px 2px}
.kreihe-k{font:400 11px var(--f-mono);color:var(--muted)}
.kraster7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px 0;justify-items:center}
.kraster4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ksw{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:22px;cursor:pointer}
.ksw span{display:block;width:32px;height:32px;border-radius:50%;box-sizing:border-box;border:1px solid var(--line-3)}
.ksw[aria-pressed="true"] span{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--copper)}
.ksw .keine{background:linear-gradient(135deg,transparent 45%,var(--muted-2) 45%,var(--muted-2) 55%,transparent 55%);border:2px solid var(--line-3)}
.kchip{height:44px;padding:0 6px;white-space:nowrap;border-radius:20px;border:1px solid var(--line-3);background:var(--input-bg);color:var(--muted);font:500 14px var(--f-text);cursor:pointer}
.kchip[aria-pressed="true"]{background:var(--copper);border-color:var(--copper);color:var(--copper-ink);font-weight:600}
.kform-fix{overflow:hidden}
.kscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.kfuss{border-top:1px solid var(--line);background:var(--panel)}
.kbtnrow{flex-direction:row}
.kbtnrow .btn:first-child{flex:0 0 120px}

#regForm .note{margin-bottom:4px}