/* One palette and a bounded layout. Character/model pixels are unmodified. */
.selection-design-active #overlay{--select-pink:#dc4e92;--select-lime:#c5eb78;--select-purple:#65429b;--select-sky:#75d1e3;--select-ink:#382b52;--select-paper:#fffdf3;--select-u:1vh}
.selection-design-active #overlay .front-wrap.box{position:fixed;left:var(--select-left,0px);top:var(--select-top,0px);width:var(--select-size,100vh);height:var(--select-size,100vh);max-width:none;max-height:none;margin:0;padding:calc(var(--select-u)*3) calc(var(--select-u)*4);gap:calc(var(--select-u)*1.1);overflow:hidden}
.selection-design-active #overlay .front-top{min-height:calc(var(--select-u)*3.5);gap:8px;flex:none}
.selection-design-active #overlay .front-wordmark{font-size:clamp(11px,calc(var(--select-u)*2),21px);letter-spacing:-.03em;color:var(--select-purple)}
.selection-design-active #overlay .front-wordmark span{font-size:clamp(8px,calc(var(--select-u)*1.3),13px);letter-spacing:.18em}
.selection-design-active #overlay .front-steps{padding:calc(var(--select-u)*.8) calc(var(--select-u)*1.4);gap:calc(var(--select-u)*.7);font-size:clamp(6px,calc(var(--select-u)*1),10px);letter-spacing:.08em;background:var(--select-paper);box-shadow:0 2px 0 #65429b22}
.selection-design-active #overlay .front-steps i{width:calc(var(--select-u)*1.7);background:#65429b44}
.selection-design-active #overlay .front-steps .current{color:#a72b69}
.selection-design-active #overlay .front-content{min-height:0;align-items:stretch}
.selection-design-active #overlay .front-content>section{height:100%;min-height:0;max-height:none}
.selection-design-active #overlay .front-bottom{min-height:calc(var(--select-u)*6.2);gap:calc(var(--select-u)*1.2);flex:none}
.selection-design-active #overlay .front-back{min-height:36px;padding:calc(var(--select-u)*1) calc(var(--select-u)*1.5);font-size:clamp(10px,calc(var(--select-u)*1.4),14px);color:var(--select-purple);border-color:var(--select-purple);background:var(--select-paper)}
.selection-design-active #overlay #start.front-primary{min-width:0;min-height:38px;padding:calc(var(--select-u)*1.2) calc(var(--select-u)*2.2);font:900 clamp(11px,calc(var(--select-u)*1.7),19px)/1.2 KartSelection,sans-serif;background:var(--select-purple);color:white;border:2px solid var(--select-purple);box-shadow:0 4px 0 #382b52,0 0 0 2px var(--select-lime);border-radius:12px;justify-content:center;gap:0;margin-left:auto}
.selection-design-active #overlay .front-nav-hint{font-size:clamp(8px,calc(var(--select-u)*1.1),11px);color:var(--select-purple);margin-left:auto;display:block}
.selection-design-active #overlay button:focus-visible{outline:3px solid var(--select-sky);outline-offset:3px}
.selection-design-active #overlay .front-loading{flex:none;padding:0;font-size:10px}
.selection-design-active #overlay .front-loading-line p{font-size:9px!important}
.selection-design-active #overlay .front-foot{display:none}
.course-select-active #overlay .front-vignette{background:linear-gradient(90deg,#fffbe9b8,transparent 30%,transparent 70%,#fffbe9b8)}
#overlay .front-course-layout.course-gallery{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:calc(var(--select-u)*1.4);padding:0;border:0;background:none;box-shadow:none;align-items:stretch}
.course-gallery-heading{text-align:center}
#overlay .course-gallery-heading .front-kicker{font:800 clamp(7px,calc(var(--select-u)*1),11px)/1.2 KartSelection,sans-serif;letter-spacing:.2em;color:#a72b69;margin:0 0 calc(var(--select-u)*.25)}
#overlay #frontCourseHeading{font:900 clamp(15px,calc(var(--select-u)*2.7),29px)/1.3 KartSelection,'Yu Gothic',sans-serif;color:var(--select-purple);margin:0;text-shadow:0 2px 0 white}
.course-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(var(--select-u)*1.8);min-width:0;min-height:0;align-items:stretch}
#overlay .course-slot{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:0;padding:0;overflow:hidden;border:3px solid #bcb7bf;border-radius:calc(var(--select-u)*2);background:#fffdf3;color:var(--select-purple);text-align:center;font-family:KartSelection,sans-serif;box-shadow:none}
#overlay .course-slot.selected{border-color:var(--select-pink);background:var(--select-paper);box-shadow:0 3px 0 #a72b6933}
.course-card-visual{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-height:0;overflow:hidden;background:linear-gradient(145deg,#fffef6,#f5f1d9)}
.course-preview-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#overlay .course-preview-status{position:relative;padding:calc(var(--select-u)*1.5);color:#74675c;font:700 clamp(9px,calc(var(--select-u)*1.4),15px)/1.5 KartSelection,sans-serif;text-align:center;letter-spacing:.025em}
.course-preview-status[hidden]{display:none}
#overlay .course-card-title{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;min-height:calc(var(--select-u)*6.8);padding:calc(var(--select-u)*.6) calc(var(--select-u)*.7);background:#fffdf3;border-top:1px solid #dccec8;font:900 clamp(10px,calc(var(--select-u)*2),22px)/1.25 KartSelection,'Yu Gothic',sans-serif;letter-spacing:0;color:var(--select-purple)}
.course-title-prefix{font-size:.76em;color:#a72b69;white-space:nowrap}
.course-title-main{white-space:nowrap}
#overlay .course-slot.course-slot-locked{cursor:pointer;opacity:1;border-color:#bbb9bf;background:#e3e1e5;color:#8d8993;box-shadow:none}
#overlay .course-slot.course-slot-locked .course-card-visual{background:linear-gradient(145deg,#e9e7eb,#dbd9df)}
#overlay .course-slot.course-slot-locked .course-card-title{background:#e5e3e8;color:#918c98;border-color:#c9c6ce}
#overlay .course-slot.course-slot-locked.selected{border-color:var(--select-pink);box-shadow:0 0 0 2px white,0 3px 0 #a72b6933}
#overlay .course-gallery-footer #frontCourseStatus.course-notice{color:#a72b69!important;font-weight:900}
.course-unknown-icon{display:grid;place-items:center;width:calc(var(--select-u)*10);height:calc(var(--select-u)*10);border:3px solid #c8c4ce;border-radius:50%;font:900 clamp(22px,calc(var(--select-u)*7),74px)/1 KartSelection,sans-serif;color:#aaa5b1;background:#d6d3dc}
.course-gallery-footer{text-align:center}
.course-title-meta{display:flex;align-items:center;justify-content:center;gap:calc(var(--select-u)*2);font:700 clamp(7px,calc(var(--select-u)*1.1),12px)/1.3 KartSelection,sans-serif;color:#665675}
.course-title-meta b{font-size:1.15em;color:var(--select-purple)}
#overlay .course-gallery-footer #frontCourseStatus{font-size:clamp(8px,calc(var(--select-u)*1.1),12px);line-height:1.4;margin:calc(var(--select-u)*.4) 0 0!important;color:#5a6543!important}
.character-select-active.selection-design-active #overlay .front-vignette{background:linear-gradient(#fffdf342,transparent 50%,#fffdf38a)}
.selection-design-active #overlay .front-character-layout{height:100%;min-height:0!important;max-height:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:calc(var(--select-u)*1)}
.selection-design-active #overlay .front-character-layout .front-section-heading{margin:0;display:block;text-align:center}
.selection-design-active #overlay .front-character-layout .front-kicker{display:block;color:#a72b69;font-size:clamp(6px,calc(var(--select-u)*.9),10px);margin:0 0 2px;letter-spacing:.23em}
.selection-design-active #overlay #frontCharacterHeading{font-size:clamp(16px,calc(var(--select-u)*3.1),32px)!important;line-height:1.4;letter-spacing:.035em;color:var(--select-purple);transform:none;text-shadow:0 2px 0 white;margin:0}
.selection-design-active #overlay .front-character-layout .front-preview{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:calc(var(--select-u)*.7);width:100%;height:100%;min-height:0;margin:0;padding:0;align-items:stretch}
.selection-design-active #overlay .front-character-layout #frontStage{grid-row:1;width:100%;height:100%;max-height:none;min-height:0;border:0;background:transparent;box-shadow:none;border-radius:calc(var(--select-u)*2)}
.selection-design-active #overlay .front-preview-caption{position:static;grid-row:2;justify-self:center;display:flex;align-items:center;justify-content:center;max-width:100%;padding:calc(var(--select-u)*1) calc(var(--select-u)*3.2);border:2px solid var(--select-purple);border-bottom:4px solid var(--select-lime);border-radius:calc(var(--select-u)*1.7);background:var(--select-paper);box-shadow:0 3px 0 #65429b22}
.selection-design-active #overlay #frontName{font:900 clamp(22px,calc(var(--select-u)*4.7),48px)/1.35 KartSelection,'Yu Gothic',sans-serif;letter-spacing:.055em;color:var(--select-purple);margin:0;text-shadow:0 2px 0 white;white-space:nowrap}
.selection-design-active #overlay .front-character-layout .front-roster{grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:1fr;gap:calc(var(--select-u)*.65);min-height:0;max-height:none;overflow:visible;padding:3px 2px 5px;align-items:stretch}
.selection-design-active #overlay .front-cast{min-width:0;min-height:0;padding:0;border:2px solid #baa9d0;border-radius:calc(var(--select-u)*1.1);background:var(--select-paper);box-shadow:0 3px 0 #65429b22}
.selection-design-active #overlay .front-cast .front-face{aspect-ratio:1.22;height:auto;background:none;flex:none}
.selection-design-active #overlay .front-cast img{width:210%;transform:translate(-50%,-14%)}
.selection-design-active #overlay .front-cast span{padding:4px 0;background:#f1ebf8;color:#4b366b;font:800 clamp(7px,calc(var(--select-u)*1.3),13px)/1.2 KartSelection,sans-serif;letter-spacing:-.04em}
.selection-design-active #overlay .front-cast small{font-size:clamp(5px,calc(var(--select-u)*.8),9px);left:4px;top:4px;color:var(--select-purple);text-shadow:0 1px white}
.selection-design-active #overlay .front-cast.selected{border:3px solid var(--select-pink);background:#fff1f8;box-shadow:0 0 0 2px white,0 3px 0 var(--select-sky)}
.selection-design-active #overlay .front-cast.selected span{color:#782456;background:#ffe4f1}
@media(max-height:430px){.selection-design-active #overlay .front-steps{padding:4px 7px}.selection-design-active #overlay .front-nav-hint{display:none}.selection-design-active #overlay .front-preview-caption{padding:5px 12px}.selection-design-active #overlay #frontName{font-size:22px}.selection-design-active #overlay .front-cast span{padding:2px 0}.selection-design-active #overlay .front-character-layout .front-kicker{display:none}}
@media(prefers-reduced-motion:reduce){.selection-design-active #overlay *{transition:none!important}}