#class-screen,#prepare-screen{position:relative;gap:0}#play{top:30px;height:calc(100% - 30px)}#play .selection-heading{position:absolute;top:-48px;left:205px;z-index:2}#play .selection-heading>.eyebrow,#play .selection-heading>p{display:none}#play .selection-heading h1{background:repeating-linear-gradient(135deg,#ef8062 0 10px,#f28c6e 10px 20px);border:3px solid #ffc7a1;border-radius:11px;box-shadow:0 4px 0 #9d69562b;padding:9px 18px;font-size:23px;line-height:1.1;letter-spacing:0;transform:skew(-4deg);margin:0;color:#fff;text-shadow:0 2px 0 #b6614f44}#play .selection-heading h1 small{font-size:9px;color:#fff0d8;margin-left:12px;letter-spacing:0}.class-selection-grid{grid-template-columns:minmax(0,1.85fr) minmax(350px,.95fr);gap:18px}.roster-panel{grid-column:2;grid-row:1;padding:20px 22px;background:#f7f3fcf5}.roster-header h2{font-size:19px}.roster-header>span{font-size:8px;padding:5px 9px}#class-filters{margin:15px 0}#class-filters button{padding:6px 10px;font-size:9px}#classes{gap:12px}.class-card{min-height:174px;padding:16px 8px}.class-card img{width:85px;height:95px}.class-card-name{font-size:21px}.class-card>small{font-size:8px}.roster-tip{padding:15px;margin-top:20px}.roster-tip p{font-size:10px}.roster-tip img{width:28px;height:33px}#class-sheet{--class-accent:#c99a58;--class-pale:#fff0d4;grid-column:1;grid-row:1;display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;min-height:0}#class-sheet[data-class="1"]{--class-accent:#7b9c56;--class-pale:#edf4d5}#class-sheet[data-class="2"]{--class-accent:#ba7fa6;--class-pale:#f6e6f2}#class-sheet[data-class="3"]{--class-accent:#be796b;--class-pale:#f8e4d8}#class-sheet>*{flex-shrink:0}.class-overview{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px;background:#f6f2faf5;border-bottom:2px solid #e4dae9}.class-preview-wrap{height:200px;min-height:200px;margin:0;border:3px solid #fff6e7;border-radius:13px;overflow:hidden;background:repeating-conic-gradient(from 0deg at 50% 80%,var(--class-pale) 0 12deg,#ffffff44 12deg 24deg),var(--class-accent);box-shadow:0 3px 0 #ddced9}.preview-shadow{bottom:20px;border:2px solid #fff9dc77;background:#fff6d033;filter:none;width:110px;height:23px}.class-identity{display:flex;flex-direction:column;gap:15px;justify-content:center;min-width:0}.sheet-top{align-items:flex-start;gap:10px}#hero-name{font-size:35px;line-height:1.05;margin-top:7px}#hero-role{color:#9c7da6;font-size:8px;letter-spacing:1px}#class-element{margin-top:9px;background:var(--class-pale);color:var(--class-accent);border:1px solid #e4d5c1;font-size:7px;white-space:nowrap}.class-stats>div{background:#fffdf8;border-color:#e6ddeb;padding:10px 4px}.class-stats b{font-size:19px}.class-stats small{font-size:8px}.class-stats img{width:17px;height:18px}.class-records{margin-top:10px;font-size:9px!important;text-align:left}.class-build{flex:1!important;overflow:auto;min-height:0;background:#fffbf7;padding:16px 20px;display:flex;flex-direction:column;gap:14px}.passive-box{padding:12px 15px;margin:0;background:var(--class-pale);border-color:#e5d7c3;flex-shrink:0}.passive-box>small{color:var(--class-accent);font-size:8px}#hero-passive{font-size:11px;color:#827283;margin:6px 0 0}.kit-heading{display:flex;align-items:center;gap:8px;background:repeating-linear-gradient(135deg,var(--class-accent) 0 10px,color-mix(in srgb,var(--class-accent),white 15%) 10px 20px);padding:10px 12px;border-radius:10px 10px 0 0;color:white}.kit-heading>img{width:22px;height:23px;object-fit:contain}.kit-heading b{font-size:13px;font-weight:1000}.kit-heading>small{margin-left:auto;color:#fffae6;font-size:8px}.class-kit-details{display:grid;grid-template-columns:1fr 1fr;gap:11px;border:2px solid #e8ddeb;border-top:0;padding:13px;border-radius:0 0 12px 12px;background:#fffdf8}.kit-card{display:flex;gap:12px;align-items:flex-start;border:1px solid #e8d8c9;border-radius:11px;background:#fff8ec;padding:13px}.kit-card>img{width:35px;height:35px;object-fit:contain;flex-shrink:0;margin-top:10px;background:#f1e6d1;border:1px solid #d9c6a4;border-radius:8px}.kit-card>div{min-width:0;flex:1}.kit-kind{float:right;background:#d7cce5;color:#7e6194;font-size:6px;padding:3px 5px;border-radius:6px;margin:0 0 4px 5px;font-weight:1000}.kit-kind.starter{background:#70bc7d;color:white}.kit-kind.ultimate{background:#e69d68;color:white}.kit-card h3{font-size:12px;margin:0 0 7px;color:#675070;font-weight:1000}.kit-card p{font-size:10px;line-height:1.5;margin:0 0 8px;color:#918096;clear:both}.kit-stats{display:flex;flex-wrap:wrap;gap:5px}.kit-stats>span{font-size:8px;background:#eee7f3;color:#99859f;padding:3px 5px;border-radius:4px}.kit-stats b{color:#6f587d}.class-sheet-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;border-top:2px solid #e5dce9;background:#f9f5fc}.class-sheet-footer>span{font-size:9px;color:#a28cab;line-height:1.7}.class-sheet-footer>span b{font-size:10px;color:#86708e}#choose-hero{width:260px;margin:0;min-height:45px;font-size:14px;flex-shrink:0}.region-grid{margin-top:20px}.preparation-grid{height:100%}#expedition>*{flex-shrink:0}
@media(max-height:820px) and (min-width:601px){.class-overview{padding:16px;gap:16px;grid-template-columns:155px 1fr}.class-preview-wrap{height:155px;min-height:155px}.class-identity{gap:12px}#hero-name{font-size:30px}.class-stats b{font-size:17px}.class-stats>div{padding:8px 4px}.class-build{padding:13px 16px;gap:12px}.class-card{min-height:145px;padding:12px}.class-card img{height:76px;width:70px}.class-card-name{font-size:19px}.kit-card{padding:10px;gap:9px}.class-kit-details{padding:10px}.class-sheet-footer{padding:12px 16px}}
@media(max-width:1100px){.class-selection-grid{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}.roster-panel{padding:18px 15px}.class-overview{grid-template-columns:140px 1fr;padding:16px;gap:15px}.class-preview-wrap{height:170px;min-height:170px}.class-stats{gap:4px}.class-stats img{display:none}.class-stats small{font-size:7px}#hero-name{font-size:29px}.sheet-top{flex-direction:column;gap:0}#class-element{margin-top:5px}.class-identity{gap:10px}.kit-card{display:block}.kit-card>img{float:left;margin:0 7px 5px 0;width:27px;height:27px}.kit-card h3{font-size:11px}.kit-card p{font-size:9px}.kit-heading>small{display:none}.class-sheet-footer>span{display:none}#choose-hero{width:100%}#play .selection-heading h1{font-size:20px}}
@media(max-width:600px){#play{top:0;height:auto}#play .selection-heading{position:static;left:auto;top:auto;margin:5px 0 20px}#play .selection-heading h1{display:inline-block;font-size:22px;padding:11px 16px;transform:skew(-3deg)}#play .selection-heading h1 small{font-size:8px;margin-left:8px}.class-selection-grid{display:flex}.roster-panel{padding:18px 14px}.class-card{min-height:145px;padding:13px 8px}.class-card img{width:77px;height:86px}.class-card-name{font-size:19px}.class-card>small{font-size:8px}.class-selection-grid #class-sheet{padding:0;gap:0;overflow:visible}.class-overview{grid-template-columns:125px 1fr;padding:15px 12px;gap:13px}.class-preview-wrap{height:175px;min-height:175px}#hero-name{font-size:27px}#hero-role{font-size:6px;letter-spacing:.5px}.class-stats{gap:4px}.class-stats>div{padding:8px 2px}.class-stats b{font-size:15px}.class-stats small{font-size:6px}.class-records{font-size:7px!important;line-height:1.7}.sheet-top{gap:2px}#class-element{font-size:6px}.class-build{overflow:visible;padding:15px 12px;gap:12px}.class-kit-details{grid-template-columns:1fr;padding:10px;gap:9px}.kit-card{display:flex;gap:11px;padding:13px}.kit-card>img{float:none;width:34px;height:34px;margin-top:9px}.kit-card h3{font-size:12px}.kit-card p{font-size:10px}.kit-kind{font-size:6px}.kit-heading b{font-size:12px}.class-sheet-footer{padding:15px}.class-sheet-footer>span{display:none}#choose-hero{font-size:14px}.passive-box{padding:12px}#hero-passive{font-size:10px}.region-grid{margin-top:18px}.preparation-grid{height:auto}#expedition .hint{flex-shrink:0}}