*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#101316;color:#fff3d8;font:15px/1.45 system-ui,sans-serif}
#stage{position:relative;height:100%;height:100dvh;min-height:260px;overflow:hidden;isolation:isolate;background:#101316}
canvas,.hud{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{pointer-events:none;background:linear-gradient(0deg,#0c1015ee,transparent 26%,transparent 78%,#0c10158a)}
button,summary{cursor:pointer;pointer-events:auto;background:#161b20ef;border:1px solid #998366;border-radius:4px;color:inherit;padding:8px 14px;font:inherit}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,summary:focus-visible{outline:3px solid #ffdc87}
header{position:absolute;inset:3% 3% auto;display:flex;justify-content:space-between;align-items:start}
header small{font:italic 800 22px Georgia;color:#f0bb73}h1{font-size:clamp(22px,3vw,43px);margin:0}header strong{font-size:14px;color:#f5d599}
summary{list-style:none;text-align:center}summary::-webkit-details-marker{display:none}
details{position:relative;z-index:6;pointer-events:auto}.pop{display:grid;gap:4px;margin-top:6px;background:#10151bf5;padding:6px;border:1px solid #675a48;min-width:104px}
.pop button{padding:7px 11px}.on{border-color:#ffd290;color:#ffd290}
aside{position:absolute;right:3%;top:23%;width:116px;display:grid;gap:4px}aside span{color:#f0c795;font-size:12px}aside b{display:flex;justify-content:space-between;background:#141a20e5;padding:8px;border-left:3px solid #635b51}aside em{font-style:normal;color:#bdb7a9}.lit{border-color:#ffc26b;background:#503520}aside .lit em{color:#ffe3b0}
.table{position:absolute;bottom:max(10px,2%);left:50%;transform:translateX(-50%);text-align:center}
h2{font-size:15px;margin:0 0 6px;text-shadow:0 2px 4px #000}
#actions{display:flex;justify-content:center;gap:8px}.card{width:clamp(99px,11vw,146px);padding:0 0 7px;overflow:hidden;border-color:#c19a60;background:#241f19;box-shadow:0 3px 14px #0008;transition:transform .15s;text-align:left}.card span,.card strong{display:block;margin:0 8px}.card span{color:#ecd1a4;font-size:11px}.card img{display:block;width:100%;height:clamp(34px,6vh,65px);object-fit:cover;pointer-events:none}.card:hover,.card.chosen,.card:focus-visible{transform:translateY(-5px);border-color:#ffdb90}.advance,#play{background:#eabf7c;color:#241b10;font-weight:bold}
.observe{position:absolute;left:3%;bottom:3%;z-index:5}.observe .pop{position:absolute;bottom:calc(100% + 4px);left:0;grid-template-columns:repeat(2,max-content)}
#preview{position:absolute;bottom:calc(2% + clamp(34px,6vh,65px) + 82px);left:50%;transform:translateX(-50%);background:#151b21f5;border:1px solid #cb9d5e;padding:9px 14px;text-align:center;pointer-events:auto;min-width:215px}#preview p{margin:3px 0 7px;font-size:13px}#preview button{padding:5px 12px} [hidden]{display:none!important}
@media(max-width:650px){header small{font-size:16px}aside{width:74px;top:17%;right:2%}aside b{font-size:12px;padding:5px}header strong{font-size:12px}.observe{bottom:auto;top:3%;right:calc(3% + 60px);left:auto}.observe summary,header summary{padding:6px 8px;font-size:13px}.observe .pop{top:100%;bottom:auto;left:auto;right:0}.table{bottom:2%}.card{width:107px}.card img{height:49px}#preview{bottom:calc(2% + 134px)}}
@media(max-height:480px){aside{top:27%}.card img{height:25px}.card{width:114px}.table h2{font-size:12px}#preview{bottom:22%;left:75%}}
#scoreboard,#sheet,dialog,.pile{pointer-events:auto}
#scoreboard{position:absolute;left:3%;top:24%;width:145px;display:grid;gap:7px;background:#10151ded;padding:12px;border-left:3px solid #cb9562}#scoreboard b{font-size:22px}meter{width:100%;height:12px;accent-color:#e7ac5a}#scoreboard span{color:#f4ce98}#end{font-size:13px}
aside{width:130px;top:20%}aside b{font-size:13px;display:grid;grid-template-columns:1fr auto;padding:5px 9px}aside small{grid-column:1/-1;color:#c9b89d;font-weight:400}aside .strain{color:#ffc181}
.table{width:min(78%,900px);bottom:2%}#actions{pointer-events:auto;overflow-x:auto;justify-content:safe center;padding:6px 3px;scrollbar-width:thin}.card{flex:0 0 clamp(94px,9vw,128px)}.card .art{height:clamp(38px,7vh,70px);margin:0;background-image:url(deck.jpg);background-size:400% 400%}.card[aria-disabled=true]{filter:saturate(.45);opacity:.76}.card strong{font-size:14px}.card small{display:block;margin:0 8px;color:#d5c1a6}
.pile{position:absolute;bottom:3%;font-size:12px}.draw{left:2%}.discard{right:2%}.observe{bottom:14%}#notice{font-size:13px;color:#ffdda7;text-shadow:0 2px 4px #000}
#sheet{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);background:#161b22f5;border:1px solid #735e43;padding:14px 18px;width:min(850px,88%);max-height:49%;overflow:auto}#sheet h2,dialog h2{font-size:20px;text-align:left}#sheet p{margin:4px 0 10px;color:#d3c7b4}.choices{display:flex;gap:8px;flex-wrap:wrap}.choices button{flex:1;text-align:left}.choices small{display:block;color:#e5cba4}.shoprow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:8px 0}select{padding:7px;background:#252c32;color:white}dialog{background:#182028;color:#f7e6cb;border:1px solid #b99d73;max-height:70vh;min-width:215px}dialog::backdrop{background:#080b10b3}#pileList{margin:12px 0}#preview{z-index:4;bottom:calc(2% + clamp(38px,7vh,70px) + 108px)}
@media(max-width:650px){#scoreboard{top:18%;left:2%;width:91px;padding:6px;gap:2px;font-size:11px}#scoreboard b{font-size:15px}#end{padding:4px;font-size:11px}aside{top:18%;width:76px}aside b{font-size:11px;padding:3px}aside small{font-size:9px}.table{width:96%;bottom:6%}.card{flex-basis:85px}.card strong{font-size:12px}.card small{font-size:10px}.pile{bottom:1%;padding:4px 8px}.observe{bottom:auto;right:calc(3% + 85px)}#preview{bottom:calc(6% + 132px)}#sheet{width:96%;max-height:44%;padding:10px}.choices{gap:4px}.choices button{padding:5px;font-size:13px}}
#preview{width:min(380px,92vw);min-width:0;box-sizing:border-box}
.preview-actions{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:12px}
#preview .preview-actions button{min-height:44px;padding:8px 16px}
@media(max-height:480px){#preview{left:50%}}

.music-volume{display:grid;gap:4px;padding:6px 10px;color:#f4ce98;font-size:13px}.music-volume input{width:110px;margin:0;accent-color:#eabf7c}

.tour-line{margin:8px 0;color:#eac693;font-size:13px}.tour-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.tour-tools button{font-size:13px}#tourExtra input{box-sizing:border-box;width:100%;padding:8px;margin-bottom:8px}#supply{font-size:12px;border-color:#85ac9a}dialog{width:min(390px,85vw)}#tourExtra p{font-size:14px}

.tour-line a,.tour-tools a{color:#ffe1aa;text-underline-offset:3px}.drop-ready{outline:3px dashed #e8b968;outline-offset:-16px}

#rivalPace{font-size:12px;color:#9ed8ca}.meet-recap{margin:8px 0}.meet-recap summary{text-align:left;width:fit-content;font-size:13px}.meet-recap ol{padding-left:25px}.meet-recap b{color:#f1c58c}

#boot{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 22%,#38403b,#101619 65%);color:#f4e3c7}#boot strong{font:bold italic clamp(40px,9vw,80px) Georgia;color:#f4cb88}#bootProgress{width:min(230px,75vw);accent-color:#eabf7c;height:8px}#bootRetry{min-height:44px}

#physiqueCue {position:absolute;top:13%;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;text-align:center}
#physiqueLabel {background:#172024ef;padding:5px 12px;border-bottom:2px solid #edbf7f;color:#ffdda7}
#stage.show-physique #sheet,#stage.show-physique .observe,#stage.show-physique aside {visibility:hidden}
#arena {transition:transform .24s ease-out;transform-origin:50% 37%}
.flex-camera #arena {transform:scale(1.16)}
.card .combo-hint {color:#ffe2a1;font-weight:700}
.card:has(.combo-hint) {border-color:#ffe2a1}
@media(prefers-reduced-motion:reduce){#arena{transition:none}}

#signature{font-size:.82em;line-height:1.25;padding:.45em;text-align:left}#signature[aria-pressed=true],.finish-line{color:#ffe5a6}#signature[aria-pressed=true]{border-color:#ffc96e}

#stageLights {display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.award #stageLights {display:block;background:radial-gradient(ellipse at 50% 78%,transparent 25%,#080b1488 95%)}
#stageLights i {position:absolute;top:-12%;left:9%;width:34%;height:110%;transform-origin:50% 0;clip-path:polygon(48% 0,52% 0,99% 100%,0 100%);background:linear-gradient(180deg,#ffdba150,transparent 96%);animation:lamp-in 1.25s ease-out both}
#stageLights i+i {left:auto;right:9%;background:linear-gradient(180deg,#b8d6ff44,transparent 96%);animation-name:lamp-right}
@keyframes lamp-in {from{transform:rotate(12deg);opacity:0}to{transform:rotate(-21deg);opacity:1}}
@keyframes lamp-right {from{transform:rotate(-12deg);opacity:0}to{transform:rotate(21deg);opacity:1}}
#resultBand {position:absolute;bottom:4%;left:50%;transform:translateX(-50%);display:grid;justify-items:center;text-align:center;width:max-content;max-width:94%;padding:9px 26px 12px;background:linear-gradient(90deg,transparent,#0b1119ed 18% 82%,transparent);text-shadow:0 2px 6px #000}
#resultBand small {font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#ffd594}
#resultBand strong {font:italic 700 clamp(29px,5.8vh,60px)/1.05 Georgia,serif}
#resultBand span {font-size:clamp(11px,1.9vh,16px)}
.award #physiqueCue {top:4%}
.award header {visibility:hidden}
.award #physiqueCue {top:4%;left:3%;transform:none;justify-items:start}
#stageLights i {mask-image:linear-gradient(90deg,transparent 5%,#000 45%,#000 55%,transparent 95%);opacity:.65}
@media(max-width:550px){.award #physiqueCue {top:2%;left:2%;font-size:10px}.award #skipReveal {font-size:11px;padding:5px 8px}}
#crowd {pointer-events:none;position:absolute;inset:0;width:100%;height:100%}
#pileDialog.scouting {position:absolute;inset:auto 0 2%;margin:0 auto;width:min(620px,94%);max-height:37%;padding:10px 16px;overflow:auto}
.scouting #pileList {display:none}.scouting #tourExtra p {margin:3px 0}.scouting #tourExtra nav {display:flex;gap:6px;flex-wrap:wrap;margin:5px 0}
.scouting nav button[aria-pressed=true]{background:#e2b985;color:#201809}
#pileDialog.scouting::backdrop{background:transparent}
.scout-stage .hud > :not(dialog){visibility:hidden}
@media(min-aspect-ratio:5/4){#pileDialog.scouting{margin:0;inset:auto 3% 12% auto;width:38%;max-height:70%}}
#tourField{display:flex;gap:5px;margin:6px 0}
#tourField button{flex:1 1 0;text-align:left;background:linear-gradient(115deg,#22332e,#13191c);border-top:2px solid #75bba3;padding:5px 8px}
#tourField button:nth-child(2){background:linear-gradient(115deg,#3c2736,#17181e);border-top-color:#c289b1}
#tourField button:nth-child(3){background:linear-gradient(115deg,#3d3325,#17181e);border-top-color:#d1ad66}
#tourField button small,#tourField button b{display:block}#tourField button small{font-size:11px}#tourField button b{font:italic bold clamp(13px,1.7vw,20px) Georgia}
#tourField button img{float:left;width:clamp(32px,5vw,62px);height:clamp(40px,6vw,72px);object-fit:cover;margin-right:8px;border-radius:2px}
@media(max-width:650px){#tourField button img{float:none;width:100%;height:42px;object-position:50% 24%;margin:0}}

.lesson .observe{display:none}.lesson #actions{align-items:center}.lesson .table{width:94%}
.journal-entry{display:flex;gap:12px;align-items:center;margin:12px 0;padding-top:12px;border-top:1px solid #78654b}
.journal-entry img{width:72px;height:96px;object-fit:cover}.journal-entry a,#tourExtra>a{color:#ffe1aa}
.journal-entry button{margin:4px 8px}#sheet table{border-spacing:12px 3px;text-align:left}
.rematch{border-left:3px solid #f4be70;padding:4px 12px 8px;margin-bottom:12px}.rematch small{color:#ffcf8a}.rematch button{background:#e4b773;color:#171c22;font-weight:700}
.lineup #physiqueCue{top:auto;bottom:5%;width:min(92%,640px)}.lineup #muscles,.lineup header{visibility:hidden}

/* Keep the weigh-in controls above the draw pile when the rival has a long call. */
#rivalPace { max-height: 4.8em; overflow-y: auto; }
#scoreboard { max-height: 58%; overflow-y: auto; }
#prepChoices:not([hidden]) { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:.65rem 0; }
#stage.judging .hud > :not(#physiqueCue):not(#stageLights),#stage.verdict .hud > :not(#physiqueCue):not(#resultBand):not(#stageLights){display:none}
#stage.judging #physiqueCue,#stage.verdict #physiqueCue{top:auto;bottom:2%;pointer-events:auto}
#stage.judging #physiqueCue::before{content:'YOU     /     ROAN';font-weight:700;letter-spacing:.18em;color:white;text-shadow:0 1px 5px black}
#stage.verdict #resultBand{top:3%;bottom:auto}