.name-input-with-keyboard{display:flex;align-items:stretch;gap:6px;min-width:0;width:100%;box-sizing:border-box}.name-input-with-keyboard>input,.name-input-with-keyboard>textarea{min-width:0;flex:1}.name-keyboard-toggle{flex:none;min-height:42px;width:46px;padding:4px;border:1px solid #d8cc9b66;border-radius:9px;background:#102f3b;color:#f8e8b8;font:600 22px system-ui;cursor:pointer}
.name-keyboard{box-sizing:border-box;grid-column:1/-1;order:-1;flex:none;width:100%;min-width:0;padding:12px;border:1px solid #cdd5b966;border-radius:16px;background:#061c27;overflow:hidden}.name-keyboard[hidden]{display:none}.name-keyboard-head{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin-bottom:8px}.name-keyboard-label{font:600 14px system-ui;grid-column:1}.name-keyboard-value{font:600 22px system-ui;color:#fff3c8;grid-column:1;grid-row:2;min-height:28px;overflow:hidden;text-overflow:ellipsis;white-space:pre}.name-keyboard-head button{grid-row:1/3;min-height:44px;padding:8px 14px;background:#d9c181;border:0;border-radius:9px;color:#14282b;font:600 15px system-ui}.name-keyboard-head [data-action='next']{grid-column:2}.name-keyboard-head [data-action='done']{grid-column:3}.name-key-row{display:grid;grid-template-columns:repeat(var(--keys,5),minmax(0,1fr));gap:5px;margin-bottom:5px}.name-key-controls{--keys:6;margin:0}.name-key{box-sizing:border-box;min-width:0;min-height:44px;padding:5px 1px;border:1px solid #b7c9c366;border-radius:8px;background:linear-gradient(#244956,#15313d);box-shadow:0 2px 0 #020d19;color:#fff0c5;font:600 22px/1.1 system-ui;touch-action:manipulation;cursor:pointer;white-space:nowrap}.name-key-controls .name-key{font-size:14px}.name-key:active{background:#446858;box-shadow:inset 0 0 0 2px #efd28a}.name-key:focus-visible,.name-keyboard-toggle:focus-visible{outline:3px solid #f3d688;outline-offset:2px}
.name-dialog{box-sizing:border-box;width:min(1050px,96vw);max-height:96svh;margin:auto;padding:20px;border:1px solid #d9c27a88;border-radius:20px;background:#0b2531;color:#f3e8c8;box-shadow:0 28px 120px #000b}.name-dialog::backdrop{background:#010c18bf;backdrop-filter:blur(5px)}.name-dialog[open]{display:flex;flex-direction:column;gap:12px;overflow:hidden}.name-edit-form{display:flex;flex-direction:column;gap:12px;min-height:0}.name-edit-form h2{margin:0;font:600 30px/1.2 Georgia,serif}.name-edit-form input{width:100%;min-height:50px;padding:10px 14px;border:1px solid #c6d5c277;border-radius:9px;background:#071e29;color:#fff0c5;font:600 24px system-ui}.name-edit-actions{display:flex;justify-content:flex-end;gap:10px}.name-edit-actions button{min-height:48px;padding:10px 22px;border:1px solid #c6d5c266;border-radius:12px;background:#173c47;color:#fff0c5;font:600 17px system-ui}.name-edit-actions .primary{background:#dfc482;color:#14262c}.class-create{grid-template-columns:minmax(180px,1fr) 150px 64px}.class-create[data-keyboard-open='true']{margin:12px auto}.class-create .name-keyboard{grid-row:1}.class-create .name-input-with-keyboard input{width:100%}.class-camp:has(.class-create[data-keyboard-open='true']){padding-top:14px}.class-camp:has(.class-create[data-keyboard-open='true'])>.class-heading{font-size:34px;margin-bottom:12px}
@media(max-height:620px){.name-keyboard{padding:8px}.name-key{min-height:35px;font-size:20px}.name-keyboard-value{font-size:19px;min-height:22px}.name-keyboard-head{margin-bottom:5px}.name-keyboard-head button{min-height:38px}.class-camp:has(.class-create[data-keyboard-open='true'])>.class-heading{display:none}}
@media(max-width:700px){.name-dialog{padding:12px}.name-keyboard{padding:7px}.name-key-row{gap:3px;margin-bottom:4px}.name-key{font-size:18px;min-height:38px}.name-key-controls .name-key{font-size:11px}.name-keyboard-head{gap:5px}.name-keyboard-head button{padding:7px 9px;font-size:12px}.name-keyboard-value{font-size:20px}.name-keyboard-label{font-size:12px}.class-create{grid-template-columns:minmax(0,1fr) 95px;gap:12px}.class-create-go{grid-column:1/-1;justify-self:center}.class-create[data-keyboard-open='true']{padding:8px}.class-create .name-keyboard{grid-row:1}}
.class-size-label{font:14px system-ui;color:#d3dfcf;display:grid;gap:4px}.class-create .class-size-label input{font:600 24px system-ui;width:100%;padding:10px}.class-opening-houses{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,70px);margin-top:7vh}.class-opening-houses>img{width:clamp(100px,14vw,190px);height:clamp(110px,15vw,210px);object-fit:contain;filter:drop-shadow(0 15px 30px #000b);animation:class-crest-arrival 1100ms ease-out both}.class-opening-houses>.class-heading{font-size:clamp(35px,4.6vw,68px);margin:0;max-width:400px}.class-camp:has(.class-opening-houses)::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(#03131ab8,#04172244 40%,#03131ac9),url('../spiel/../spiel/media/worlds-v2/blossom-terraces-a.webp') center/cover}.class-camp:has(.class-opening-houses){isolation:isolate}.class-camp:has(.class-create[data-keyboard-open='true']) .class-opening-houses{margin:0 0 15px}.class-camp:has(.class-create[data-keyboard-open='true']) .class-opening-houses>img{height:80px;width:75px}.class-camp:has(.class-create[data-keyboard-open='true']) .class-heading{font-size:32px}@keyframes class-crest-arrival{from{opacity:.4;transform:translateY(16px) scale(.91);filter:drop-shadow(0 0 35px #9dd9fd)}to{opacity:1;transform:none;filter:drop-shadow(0 15px 30px #000b)}}@media(max-height:620px){.class-opening-houses{margin-top:0}.class-opening-houses>img{width:95px;height:105px}.class-camp:has(.class-create[data-keyboard-open='true']) .class-opening-houses{display:none}}@media(max-width:700px){.class-opening-houses{gap:12px;margin-top:4vh}.class-opening-houses>img{width:75px;height:82px}.class-opening-houses>.class-heading{font-size:34px}.class-create{margin-top:24px}}@media(prefers-reduced-motion:reduce){.class-opening-houses>img{animation:none}}
@media(max-height:620px){.name-dialog[data-keyboard-open='true']{padding:12px}.name-dialog[data-keyboard-open='true'] .name-edit-form>h2,.name-dialog[data-keyboard-open='true'] .name-edit-form>label{display:none}.name-dialog[data-keyboard-open='true'] .name-edit-form{gap:8px}.name-dialog[data-keyboard-open='true'] .name-edit-form input{min-height:44px;padding:8px 12px}.name-dialog[data-keyboard-open='true'] .name-edit-actions button{min-height:44px;padding:8px 20px}}