/* One quiet stage, fixed class positions, and two records for the chosen class. */
#start-screen{height:100dvh;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#203334 0,#111e24 32%,#090f16 73%);color:#e7e8df;display:grid;grid-template-rows:auto minmax(180px,1fr) auto;gap:0;padding:26px max(24px,calc((100vw - 1200px)/2)) 18px;isolation:isolate}
#start-screen:before{content:'';position:absolute;z-index:-1;width:64px;height:64px;top:18%;left:calc(50% - 32px);border-radius:50%;background:#d5ded4;opacity:.17;box-shadow:0 0 80px 30px #a8c7c41a;pointer-events:none}
#start-screen:after{content:'';position:absolute;z-index:-1;inset:40% 0 25%;background:radial-gradient(ellipse at 50% 75%,#74918b16,transparent 65%);pointer-events:none}
.selection-header{text-align:center}.selection-header .selection-kicker{font-size:12px;letter-spacing:.3em;color:#90a1a6;margin:0 0 5px}.selection-header h1{font:500 clamp(38px,5.4vh,58px) 'Noto Serif KR',serif;letter-spacing:.24em;text-indent:.24em;color:#e6e6d5}.selection-header .selection-tagline{font-size:16px;color:#b9c6c7;line-height:1.6;margin-top:8px}
.character-stage{position:relative;width:100%;max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;padding:0 6px 8px;min-height:0}
.class-choice{position:relative;height:100%;max-height:370px;min-width:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;padding:0 0 38px;color:#d4dddc;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:8px;outline-offset:-2px!important}
.class-choice[data-class-choice=archer],.class-choice[data-class-choice=fencer]{padding-bottom:72px}.class-choice[data-class-choice=mage],.class-choice[data-class-choice=illusionist]{padding-bottom:51px}.class-choice[data-class-choice=knight]{padding-bottom:26px}
.class-choice .figure-wrap{position:relative;width:100%;min-height:0;flex:1;max-height:310px;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.class-choice canvas{height:100%;max-height:310px;max-width:145%;width:auto;aspect-ratio:320/440;object-fit:contain;filter:brightness(.38) saturate(.38);transition:filter .2s;position:relative;z-index:2;pointer-events:none}
.class-choice.selected canvas{filter:none}.class-choice:hover:not(.selected) canvas{filter:brightness(.52) saturate(.45)}.class-choice .pedestal{position:absolute;bottom:5px;left:13%;width:74%;height:18px;background:linear-gradient(#354345,#1a292d 47%,#111d23 49%);border:1px solid #6478753a;border-radius:50%;box-shadow:0 9px 14px #0007;z-index:1}.class-choice.selected .pedestal{border-top-color:#bfddd9;box-shadow:0 -2px 12px #b8d9d724,0 9px 14px #0007}.class-choice .class-name{position:absolute;bottom:8px;font:500 18px 'Noto Serif KR',serif;letter-spacing:.12em;line-height:1.5;color:#b9c6c7}.class-choice[data-class-choice=archer] .class-name,.class-choice[data-class-choice=fencer] .class-name{bottom:49px}.class-choice[data-class-choice=mage] .class-name,.class-choice[data-class-choice=illusionist] .class-name{bottom:28px}.class-choice[data-class-choice=knight] .class-name{bottom:3px}.class-choice.selected .class-name{color:#eef0dc}.class-choice.selected .class-name:after{content:'';display:block;width:18px;height:1px;margin:5px auto 0;background:#bfd1c9}
.selection-panel{width:min(100%,950px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,1fr);column-gap:44px;row-gap:10px;padding:20px 0 0;border-top:1px solid #83949333;position:relative}
.selection-copy{align-self:center;padding-bottom:10px}.selection-copy h2{font:500 27px 'Noto Serif KR',serif;color:#e1e4d4;letter-spacing:.08em;margin-bottom:12px}.selection-copy p{font-size:16px;line-height:1.85;color:#b7c4c7;word-break:keep-all}.selection-copy p span{display:block}.record-section{min-width:0}.records-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#a9b7bb}.records-header h3{font-size:14px;font-weight:400}.record-tools{font-size:12px;color:#92a4ac;position:relative}.record-tools summary{cursor:pointer;list-style:none;padding:3px 0}.record-tools[open]>div{position:absolute;right:0;bottom:28px;z-index:5;min-width:230px;border:1px solid #52666c;background:#111d25;box-shadow:0 8px 24px #0008;padding:13px}.record-tools button{font-size:14px;line-height:1.6;display:block;padding:7px 0}.record-tools p{font-size:12px;line-height:1.7;color:#96a8ae;margin-top:8px}
#start-screen #slots{display:grid;grid-template-columns:1fr 1fr;gap:9px}.record-card{position:relative;min-width:0;border:1px solid #647a8038;background:#16242b88;border-radius:3px}.record-card.selected{border-color:#b0c6c28a;background:#22353b8a}.record-choice{display:block;text-align:left;width:100%;padding:10px 12px 12px;min-height:95px}.record-top{display:flex;justify-content:space-between;gap:3px;font-size:12px;color:#9aadb3}.record-top>span{color:#aebdb9}.record-choice strong{display:block;color:#d8e1da;font-size:16px;font-weight:500;margin:6px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-meta{display:block;font-size:12px;color:#9dabb2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-card:has(.record-reset) .record-choice{padding-bottom:30px}.record-reset{position:absolute;bottom:7px;right:10px;font-size:12px;color:#a0abb0;padding:2px}.record-reset:hover{color:#e2a79a}.record-reset:focus-visible{outline-offset:3px}
.start-action{grid-column:2;text-align:center}.start-context{font-size:12px;color:#a7b8bc;margin:1px 0 7px;min-height:18px}#game-start{width:100%;height:44px;border:1px solid #c8d5c188;border-radius:3px;background:linear-gradient(#c2cbb5,#a7bba9);color:#142326;font-size:16px;font-weight:600;letter-spacing:.13em}#game-start:hover{background:#d1d9c3}#game-start:disabled{opacity:.45}.selection-footer{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px;min-height:25px;font-size:12px;color:#788e98}.selection-footer #asset-loading{margin:0;font-size:12px;color:#91a4ad}.selection-footer #selection-status{color:#d5bc96}#legacy-records{position:relative;margin-top:7px;font-size:12px;color:#a7b9bc}#legacy-records summary{cursor:pointer;width:max-content}#legacy-list{position:absolute;z-index:6;right:0;bottom:25px;width:100%;max-height:260px;overflow:auto;background:#101b22;border:1px solid #526970;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px}#legacy-records p{padding:7px 0 0;color:#899ba4;line-height:1.5}
#reset-dialog{border:1px solid #6c7b80;background:#142028;width:min(480px,calc(100vw - 30px));color:#d5dddc;border-radius:4px;padding:26px}#reset-dialog h2{font:500 23px 'Noto Serif KR',serif;margin:0 0 18px}#reset-description{font-size:16px;line-height:1.8;word-break:keep-all}#reset-dialog .reset-warning{font-size:14px;line-height:1.8;color:#a9b6bd;margin:14px 0}#reset-dialog .reset-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}#reset-dialog button{font-size:15px;border:1px solid #688089;padding:10px 22px;border-radius:3px}#reset-cancel{background:#314852;color:#eff1e6}#reset-confirm{color:#e1afa2;border-color:#88685f!important}#reset-error{font-size:14px;color:#e9b099;line-height:1.6}
@media(min-width:761px) and (max-height:800px){#start-screen{padding-top:18px;padding-bottom:12px}.selection-header h1{font-size:42px}.selection-header .selection-tagline{margin-top:4px}.selection-panel{padding-top:14px;row-gap:6px}.selection-copy h2{margin-bottom:7px;font-size:25px}.record-choice{min-height:88px;padding-top:8px}.class-choice{max-height:290px}.class-choice canvas{max-height:255px}.selection-copy p{font-size:15px}.selection-footer{padding-top:0}}
@media(max-width:760px){#start-screen{padding:18px 18px 12px;grid-template-rows:auto minmax(140px,1fr) auto;min-height:620px;overflow-y:auto}.selection-header h1{font-size:38px}.selection-header .selection-tagline{font-size:14px;word-break:keep-all;max-width:310px;margin:6px auto 0}.selection-header .selection-kicker{font-size:12px}.character-stage{padding:0;max-height:280px}.class-choice{padding-bottom:22px!important;max-height:240px}.class-choice canvas{max-width:165%;max-height:210px}.class-choice .class-name{font-size:14px;bottom:1px!important;letter-spacing:0}.class-choice .pedestal{width:84%;left:8%;height:13px}.class-choice[data-class-choice=archer],.class-choice[data-class-choice=fencer]{transform:translateY(-14px)}.class-choice[data-class-choice=mage],.class-choice[data-class-choice=illusionist]{transform:translateY(-6px)}.selection-panel{grid-template-columns:1fr;gap:10px;padding-top:12px}.selection-copy{text-align:center;padding:0}.selection-copy h2{font-size:22px;margin-bottom:6px}.selection-copy p{font-size:14px;line-height:1.65;min-height:70px}.start-action{grid-column:1}.selection-footer{flex-direction:column;gap:3px;min-height:20px;text-align:center}.record-choice{min-height:85px;padding:8px 10px}.record-card:has(.record-reset) .record-choice{padding-bottom:25px}.record-choice strong{font-size:15px;margin:5px 0 2px}.record-reset{bottom:4px}.selection-footer #asset-loading{font-size:12px}#start-screen:before{top:18%;width:42px;height:42px;left:calc(50% - 21px)}#legacy-list{max-height:220px}}
@media(max-width:380px){#start-screen{padding-left:12px;padding-right:12px}.selection-copy p{font-size:14px;min-height:92px}.class-choice .class-name{font-size:13px}.record-top{font-size:12px}.record-meta{font-size:12px}}
@media(prefers-reduced-motion:reduce){.class-choice canvas{transition:none}}
@media(min-width:761px) and (max-height:600px){#start-screen{min-height:620px;overflow-y:auto}}

/* A single anatomical ruler for all five choices, independent of pedestal depth. */
.character-stage{--figure-height:clamp(190px,calc(100dvh - 460px),320px)}
.class-choice .figure-wrap{flex:none;height:var(--figure-height);max-height:none}
.class-choice canvas{height:var(--figure-height);max-height:none;aspect-ratio:320/360}
@media(max-width:760px){.character-stage{--figure-height:clamp(135px,calc(100dvh - 500px),185px)}.class-choice .figure-wrap{height:var(--figure-height)}.class-choice canvas{height:var(--figure-height);max-height:none}}

/* V76 restores the original serif/gold wordmark and its accompanying hanja. */
.selection-header h1{font:600 clamp(50px,5vw,75px) 'Noto Serif KR',serif;line-height:1.2;letter-spacing:13px;text-indent:0;color:#f0e3bf;white-space:nowrap}
.selection-header h1 span{font-size:21px;letter-spacing:5px;color:#a59b7b}
.selection-copy{display:grid;align-self:start}
.selection-copy-current,.selection-copy-reserve{grid-area:1/1;min-width:0}
.selection-copy-reserve{display:grid;visibility:hidden;pointer-events:none;user-select:none}
.selection-copy-sizer{grid-area:1/1;min-width:0}
.selection-copy h2{line-height:1.4}
.selection-copy p{min-height:0}
.character-stage{--figure-height:clamp(180px,calc(100dvh - 480px),320px);min-height:calc(var(--figure-height) + 74px)}
.class-choice{max-height:calc(var(--figure-height) + 74px)}
#title-volume-toggle{color:#b8c8c8;font-size:12px;min-height:32px;padding:5px 10px;border:1px solid #687f8055;border-radius:3px;white-space:nowrap}
#volume-panel{position:fixed;z-index:40;top:max(64px,calc(env(safe-area-inset-top) + 48px));right:max(14px,env(safe-area-inset-right));max-height:calc(100dvh - 100px);overflow:auto}
@media(min-width:761px) and (max-height:800px){.selection-header h1{font-size:50px}.character-stage{--figure-height:min(255px,clamp(180px,calc(100dvh - 492px),320px))}}
@media(max-width:760px){
 #start-screen{height:100dvh;min-height:0;grid-template-rows:auto auto auto;align-content:start;gap:20px;overflow-y:auto;overflow-x:hidden;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
 .selection-header h1{font-size:46px;letter-spacing:10px}.selection-header h1 span{font-size:17px;letter-spacing:4px}
 .character-stage{--figure-height:clamp(135px,calc(100dvh - 510px),185px);height:calc(var(--figure-height) + 48px);min-height:calc(var(--figure-height) + 48px);max-height:none;grid-template-rows:minmax(0,1fr)}
 .class-choice{height:100%;max-height:none;min-height:0;padding-bottom:30px!important}
 .class-choice .class-name{bottom:1px!important;line-height:20px;min-height:28px}
 .selection-panel{margin-top:0;padding-top:14px;gap:12px}
 .selection-copy{align-self:start}.selection-copy h2{margin:0 0 8px;line-height:1.4}.selection-copy p{min-height:0;font-size:14px;line-height:1.7}
 .selection-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;text-align:left;gap:4px 10px}.selection-footer #selection-status:empty{display:none}.selection-footer #selection-status{grid-column:1/-1;grid-row:2}#title-volume-toggle{min-height:38px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 #start-screen{height:100dvh;min-height:0;overflow:auto;grid-template-columns:minmax(0,1fr) minmax(285px,.95fr);grid-template-rows:auto 1fr;align-content:start;gap:12px 22px;padding:14px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .selection-header{grid-column:1;grid-row:1}.selection-header h1{font-size:42px;letter-spacing:10px}.selection-header h1 span{font-size:16px;letter-spacing:4px}.selection-header .selection-tagline{font-size:13px;line-height:1.5;margin:5px auto 0;max-width:340px}.selection-header .selection-kicker{font-size:10px}
 .character-stage{grid-column:1;grid-row:2;--figure-height:clamp(125px,calc(100dvh - 195px),235px);height:calc(var(--figure-height) + 38px);min-height:calc(var(--figure-height) + 38px);max-height:none;grid-template-rows:minmax(0,1fr);padding:0;align-self:start}
 .class-choice{height:100%;max-height:none;min-height:0;padding-bottom:28px!important;transform:none!important}.class-choice .class-name{bottom:0!important;font-size:13px;line-height:20px;letter-spacing:0}.class-choice canvas{max-width:165%}
 .selection-panel{grid-column:2;grid-row:1/3;grid-template-columns:minmax(0,1fr);gap:9px;padding:0;border-top:0;align-self:start}.selection-copy{text-align:center;padding:0;align-self:start}.selection-copy h2{font-size:21px;margin:0 0 6px}.selection-copy p{font-size:14px;line-height:1.65;min-height:0}.start-action{grid-column:1}.selection-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;text-align:left}.selection-footer #selection-status:empty{display:none}.selection-footer #selection-status{grid-column:1/-1;grid-row:2}.record-choice{min-height:90px;padding:8px 10px}.record-card:has(.record-reset) .record-choice{padding-bottom:28px}#game-start{height:44px}
}
/* Occupied/empty records and long titles share the same row budget. */
#start-screen .record-choice{height:108px;min-height:108px}
#start-context{height:18px;min-height:18px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* V77: the original crescent, with a quiet, always-reachable settings pair. */
#start-screen:before{display:none}
.selection-header .selection-kicker{display:flex;align-items:center;justify-content:center;gap:9px;font:500 20px/1.4 'Noto Serif KR',serif;letter-spacing:.2em;color:var(--gold);margin:0 0 6px}
.selection-header .selection-kicker .moon{display:inline-block;font-family:'Noto Sans KR',sans-serif;font-size:1.2em;font-weight:400;line-height:1;letter-spacing:0;color:var(--gold);transform:rotate(-20deg)}
.selection-header h1{letter-spacing:.2em;text-indent:.2em}
.character-stage:before{content:'';position:absolute;z-index:0;width:64px;height:64px;top:14px;left:calc(50% - 32px);border-radius:50%;background:#d5ded4;opacity:.17;box-shadow:0 0 80px 30px #a8c7c41a;pointer-events:none}
.title-controls{position:fixed;z-index:35;top:max(14px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;max-width:calc(100vw - max(18px,env(safe-area-inset-left)) - max(18px,env(safe-area-inset-right)))}
.title-controls .display-button,#title-volume-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;height:44px;padding:0 12px;border:1px solid #71828266;border-radius:3px;background:#14222bd9;color:#d3d9ce;font-size:14px;white-space:nowrap;touch-action:manipulation}
.title-controls .display-button:hover,.title-controls .display-button[aria-pressed="true"],.title-controls .display-button[aria-expanded="true"]{background:#293e45;border-color:#c5b68c}
.title-controls .display-button:disabled{opacity:.6;cursor:default}
#title-volume-toggle .mute-stroke{display:none}#title-volume-toggle.muted .mute-stroke{display:block}#title-volume-toggle.muted .sound-wave{display:none}
body #volume-panel{top:calc(max(14px,env(safe-area-inset-top)) + 52px);right:max(18px,env(safe-area-inset-right));max-width:calc(100vw - max(18px,env(safe-area-inset-left)) - max(18px,env(safe-area-inset-right)));max-height:calc(100dvh - max(14px,env(safe-area-inset-top)) - max(18px,env(safe-area-inset-bottom)) - 52px);overscroll-behavior:contain}
.volume-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-7px -7px 5px 0;font-size:14px;color:#e4ddbf}
#volume-close{width:44px;height:44px;min-width:44px;font-size:25px;line-height:1;border-radius:3px;touch-action:manipulation}
#volume-close:hover{background:#354432}
.selection-footer{grid-template-columns:minmax(0,1fr)}
@media(max-width:1100px){
 #start-screen{padding-top:calc(max(14px,env(safe-area-inset-top)) + 58px);overflow-y:auto}
 .title-controls{right:max(18px,env(safe-area-inset-right))}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 .character-stage{--figure-height:clamp(125px,calc(100dvh - 253px),235px)}
}

@media(max-width:760px){.selection-header .selection-kicker{font-size:18px;gap:7px;margin-bottom:5px}.character-stage:before{width:42px;height:42px;left:calc(50% - 21px)}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){.selection-header .selection-kicker{font-size:16px;gap:7px;margin-bottom:4px}.character-stage:before{width:42px;height:42px;left:calc(50% - 21px)}}

/* V79: anchor every record's text at the same top edge, with or without reset. */
#start-screen .record-choice{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
#start-screen .record-choice>span,#start-screen .record-choice>strong{flex:none}
/* The existing loading/help and live feedback stay directly beneath Start. */
.start-action .selection-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-height:0;padding-top:7px;text-align:center;line-height:18px;overflow-wrap:anywhere}
.start-action .selection-footer #selection-status:empty{display:none}

/* Keep record-file controls reachable on short/mobile screens. */
.record-tools[open]>div{bottom:calc(100% + 7px);max-width:calc(100vw - 32px);max-height:min(64vh,360px);overflow-y:auto;overscroll-behavior:contain}

/* Keep the accepted start action readable while preventing repeated clicks. */
#game-start[aria-busy="true"]{opacity:.85;cursor:progress}