/* Product presentation; artwork, motion and draw/audio engines are unchanged. */
main{max-width:1800px;padding:24px 40px 28px}
.product-header{min-height:48px;margin-bottom:24px;gap:20px}
.brand .eyebrow{font-size:11px;letter-spacing:1.3px}.brand h1{font-size:22px;letter-spacing:2.5px}
.header-actions{gap:12px;flex-shrink:0}.header-meta{font-size:12px;letter-spacing:0;margin-right:10px}
.header-actions button{min-height:40px;font-size:13px}
button{font-size:14px;min-height:42px}button:focus-visible,textarea:focus-visible{outline:2px solid #c2f0ff;outline-offset:3px}
[hidden]{display:none!important}.draw-buttons button:disabled{display:block}.draw-buttons #draw-prepare:disabled{display:none}
#setup-screen{min-height:0;grid-template-columns:minmax(430px,530px) 1fr;gap:40px}
.menu-intro .eyebrow{font-size:12px;letter-spacing:2px}.menu-intro h2{font-size:68px;margin:18px 0;letter-spacing:6px}
.menu-intro>p:last-child{font-size:15px;margin-bottom:24px;line-height:1.75}
.draw-panel{padding:24px;border-radius:12px}.draw-heading-row h2{font-size:21px}.draw-heading-row>span{font:12px/1.5 'Segoe UI','Malgun Gothic',sans-serif}
.draw-fields{gap:22px;grid-template-columns:minmax(0,1fr) 138px;margin-top:20px}.draw-fields label{font-size:14px}
.draw-fields textarea{height:190px;min-height:165px;font-size:15px;line-height:1.55;resize:vertical}
.draw-fields input{font-size:36px;height:76px}.draw-fields small,.draw-options .draw-help{font-size:12px;line-height:1.65}
.draw-help{margin:20px 0 0}.draw-buttons{margin-top:18px;flex-wrap:wrap}.draw-buttons button{font-size:14px;min-height:44px}
.draw-status{font-size:12px;line-height:1.7;margin-top:14px;color:#b5cedb}.menu-footnote{display:none}
.draw-errors li{font-size:13px;line-height:1.6;margin-bottom:5px}.menu-art-caption span{font-size:12px;letter-spacing:1px}
.menu-art-caption{margin-bottom:30px}.menu-art-caption p{font-size:18px}
/* Keep the stage and its controls together within a short desktop viewport. */
body[data-screen=game] main{padding:16px 24px 20px;--arena-height:calc(100dvh - 210px);--roster-width:232px}
body[data-screen=game] .product-header{margin-bottom:14px}
.workspace{width:min(100%,calc(var(--arena-height)*16/9 + var(--roster-width)));margin:0 auto;grid-template-columns:minmax(0,1fr) var(--roster-width);align-items:stretch}
.stage-wrap{align-self:start;aspect-ratio:16/9;border-right:1px solid #304753}
aside{padding:16px;min-height:0;max-height:var(--arena-height);overflow:auto}
.panel-heading .eyebrow{font-size:14px;letter-spacing:1px;color:#d4e9f2}
aside .rule{margin:14px 0}.counts strong{font-size:28px;line-height:1.2}.counts span{font-size:12px;letter-spacing:0}
.roster-heading{font-size:11px;letter-spacing:0;margin:0 0 8px}#roster li{height:auto;min-height:31px;font-size:13px;gap:8px;line-height:1.5}
#roster .class-marker{font-size:10px;font-variant-numeric:tabular-nums;width:18px;flex:0 0 18px;color:#8db0c3}
#roster .name{white-space:normal;overflow-wrap:anywhere;overflow:visible;font-size:13px;text-overflow:clip}#roster .action{font-size:11px;flex:none}
li.down .name{text-decoration:none;color:#ff6874}
.transport{width:min(100%,calc(var(--arena-height)*16/9 + var(--roster-width)));margin:14px auto 0;padding:13px 16px;border-radius:10px}
.control-row{gap:10px;flex-wrap:wrap}.control-row button{font-size:13px;min-height:42px}.control-row .spacer{min-width:0}
#round-progress-label{font-size:12px;color:#b0c7d5}#game-progress{height:4px;margin-top:12px}
#music-status,#recovery-notice,#scene-error{position:fixed;z-index:8;left:50%;bottom:16px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);margin:0;padding:12px 18px;border:1px solid #7294a8;border-radius:10px;background:#102432f5;box-shadow:0 8px 30px #0008;color:#e1eef5;font-size:13px;line-height:1.6}
#recovery-notice{pointer-events:none}#scene-error{bottom:76px}#music-status{bottom:20px}#music-retry{font-size:13px;min-height:34px}
/* Clear, equally weighted winner cards. */
#result-screen{min-height:0;padding:8px 0 20px;max-width:1080px}
#result-screen>.eyebrow{font-size:12px;letter-spacing:2px}.celebration-ornament{font-size:48px;margin-bottom:14px}
#result-title{font-size:34px;letter-spacing:1px;margin:14px 0 10px}.result-subtitle{font-size:14px;line-height:1.6;margin-bottom:22px}
#draw-result h3{font-size:15px;margin:12px 0 18px}.winner-list{gap:14px;margin-bottom:24px}.winner-list li{align-items:center;min-height:160px;padding:16px}
.winner-name{font-size:22px;line-height:1.4}.winner-list[data-count="1"] li,.winner-list[data-count="2"] li{min-height:250px}
.result-actions button{font-size:14px;min-height:44px;min-width:150px}.result-meaning{font-size:12px;line-height:1.6;margin:16px 0 0}
#result-screen:has(.winner-list li:nth-child(4)) .celebration-ornament{font-size:32px;margin-bottom:8px}
#result-screen:has(.winner-list li:nth-child(4)) #result-title{font-size:28px;margin:10px 0 8px}
#result-screen:has(.winner-list li:nth-child(4)) .result-subtitle{margin-bottom:12px}
#result-screen:has(.winner-list li:nth-child(4)) #draw-result h3{font-size:14px;margin:10px 0 14px}
.winner-list:has(li:nth-child(4)){gap:12px;margin-bottom:20px}.winner-list:has(li:nth-child(4)) li{min-height:118px;padding:10px 16px;gap:5px}
.winner-list:has(li:nth-child(4)) .winner-portrait{height:52px}.winner-list:has(li:nth-child(4)) .winner-name{font-size:18px}
@media(min-width:801px) and (max-height:800px){
 main{padding:18px 28px}.product-header{margin-bottom:18px}
 #setup-screen{grid-template-columns:minmax(430px,520px) 1fr}.menu-intro h2{font-size:52px;line-height:.95;margin:12px 0}
 .menu-intro .eyebrow{font-size:11px}.menu-intro>p:last-child{font-size:14px;margin-bottom:16px;line-height:1.6}
 .draw-panel{padding:20px 22px}.draw-fields{margin-top:16px}.draw-fields textarea{height:168px;min-height:150px}
 .draw-buttons{margin-top:14px}.draw-status{margin-top:10px}.menu-art-caption{margin-bottom:14px}
 #result-screen{padding:0}.result-subtitle{margin-bottom:16px}
 .winner-list:has(li:nth-child(4)) li{min-height:108px}.winner-list:has(li:nth-child(4)) .winner-portrait{height:44px}
}
@media(max-width:1100px) and (min-width:801px){
 body[data-screen=game] main{--roster-width:212px;padding:16px 20px}.header-meta{display:none}
 aside{padding:12px}#roster li{min-height:30px}.draw-fields{gap:18px}
}
@media(max-width:800px){
 main,body[data-screen=game] main{padding:18px}
 .product-header{margin-bottom:20px;gap:12px;flex-wrap:wrap}.brand{gap:9px}.brand h1{font-size:18px;letter-spacing:2px}.brand .eyebrow{font-size:10px;letter-spacing:1px}.brand .sigil{font-size:28px}
 .header-actions{gap:8px;margin-left:auto;flex-wrap:nowrap}.header-actions button{font-size:12px;min-height:38px;padding:8px 10px}#audio-toggle{font-size:12px;min-width:78px}
 #setup-screen{display:block}.menu-intro h2{font-size:52px;margin:16px 0}.menu-intro>p:last-child{font-size:14px}
 .draw-panel{padding:20px}.draw-fields{grid-template-columns:minmax(0,1fr) 112px;gap:14px}.draw-fields textarea{font-size:14px;height:190px}
 .draw-fields small,.draw-options .draw-help{font-size:12px}.draw-fields input{font-size:32px}.draw-buttons button{font-size:14px}
 #game-screen:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
 .workspace{display:contents}.stage-wrap{grid-row:1;border:1px solid #3b5362;border-radius:9px;width:100%}
 .transport{grid-row:2;width:100%;margin:0;padding:12px}.control-row{gap:8px}.control-row button{font-size:12px;padding:9px 12px;min-width:0}.control-row .primary{min-width:88px}
 #round-progress-label{font-size:12px}#game-progress{margin-top:12px}
 aside{display:block;grid-row:3;max-height:none;width:100%;border:1px solid #304753;border-radius:10px;padding:16px}
 aside .panel-heading{display:none}aside .counts{display:flex;gap:22px}aside .counts>div{display:flex;align-items:baseline;gap:6px}.counts strong{font-size:23px}.counts span{font-size:12px}
 aside .rule:first-of-type{display:none}aside .rule{margin:12px 0}.roster-heading{display:none}
 #roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}#roster li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);align-content:start;align-items:start;gap:0 5px;padding:4px 0;min-height:38px}
 #roster .name{font-size:13px;line-height:1.5}#roster .class-marker{padding-top:2px}#roster .action{grid-column:2;font-size:11px;color:#91afbd}
 #result-title{font-size:28px}.result-subtitle{font-size:13px}.winner-list{gap:10px}.winner-list li{padding:14px}
 .winner-list[data-count="1"] li,.winner-list[data-count="2"] li{min-height:210px}.winner-list[data-count="1"] .winner-portrait,.winner-list[data-count="2"] .winner-portrait{height:130px;width:180px}
 .winner-list[data-count="1"] .winner-name,.winner-list[data-count="2"] .winner-name{font-size:22px}
 .winner-list:has(li:nth-child(4)) .winner-name{font-size:16px;line-height:1.5}.winner-list:has(li:nth-child(4)) li{padding:12px;min-height:120px}
 .result-actions{gap:10px}.result-actions button{font-size:13px;min-width:140px}.result-meaning{font-size:12px}
}
@media(max-width:420px){
 .product-header{row-gap:12px}.brand{width:100%}.header-actions{width:100%;justify-content:flex-end}.header-actions button{flex:1}
 #roster{gap:8px 12px}aside{padding:14px}.control-row .spacer{display:none}#round-progress-label{width:100%;margin-top:2px}
 .draw-panel{padding:18px}.draw-heading-row h2{font-size:20px}.draw-fields{grid-template-columns:minmax(0,1fr) 105px;gap:12px}
 #result-screen>.eyebrow{font-size:11px}#result-title{font-size:26px}.result-actions button{flex:1;min-width:130px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(min-width:801px) and (max-height:800px){body[data-screen=result] main{padding-top:14px;padding-bottom:12px}.result-meaning{margin-top:10px}#result-screen:has(.winner-list li:nth-child(4)) .result-subtitle{margin-bottom:8px}}
#music-status,#recovery-notice,#scene-error{top:78px;bottom:auto;width:max-content;max-width:min(620px,calc(100vw - 32px))}#scene-error{top:142px}
@media(max-width:420px){#music-status,#recovery-notice{top:126px}#scene-error{top:206px}}

/* Compact functional copy: one name field, then count and primary action. */
.menu-intro h2{margin-top:12px;margin-bottom:22px}
#draw-form{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:16px}
.draw-fields{display:contents}.names-field{grid-column:1/-1;margin-top:18px}
.draw-options{grid-column:1;grid-row:3;align-self:end;margin-top:18px}
.draw-fields input{height:44px;font-size:24px}
.draw-buttons{grid-column:2;grid-row:3;align-self:end;margin:0;gap:8px}
.draw-buttons button{min-height:44px}.draw-buttons .primary{min-width:100px}
.draw-errors{grid-column:1/-1;grid-row:2;margin:12px 0 0}.draw-errors:empty{display:none}
#result-title{margin-top:10px;margin-bottom:14px}#draw-result h3{margin:0 0 18px}
@media(max-width:800px){#draw-form{grid-template-columns:105px minmax(0,1fr);column-gap:12px}.draw-buttons button{padding-inline:12px;font-size:13px}.draw-buttons .primary{min-width:88px}}
@media(max-width:420px){#draw-form{grid-template-columns:92px minmax(0,1fr)}.draw-fields textarea{height:190px}.draw-buttons button{font-size:13px}}

/* Overall volume is controlled after the existing music/effects mix. */
.volume-panel{position:fixed;z-index:20;width:min(280px,calc(100vw - 32px));padding:16px;border:1px solid #56768a;border-radius:12px;background:#102433;box-shadow:0 12px 36px #0008;color:#e2f0f5}
.volume-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.volume-heading h2{margin:0;font-size:16px;font-weight:600;letter-spacing:0}
#volume-close{font-size:12px;min-height:32px;padding:5px 10px}.volume-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}#volume-value{font-variant-numeric:tabular-nums;color:#c5e8f1}
#volume-range{display:block;width:100%;min-height:32px;margin:10px 0 0;accent-color:#b8e4f1;cursor:pointer}#volume-range:focus-visible{outline:2px solid #c2f0ff;outline-offset:3px;border-radius:4px}