/* Full original wording, distinct outgoing bubble, and continuous full-canvas camera. */
.sent-reply{background:#C2E6FA;border:1px solid #83CFF0;color:#074793}
#feedback:focus{outline:none}
/* Numeric emphasis uses the local pixel font; all source text stays intact. */
.stat>b{font-family:Tiny5,monospace;font-size:21px;font-weight:400;line-height:1;color:#FFCB04;font-variant-numeric:tabular-nums}
.shift b{font-family:Tiny5,monospace;font-size:17px;font-weight:400}
.timer b{font-family:Tiny5,monospace;font-size:22px;font-weight:400;line-height:1;color:#074793}
.timer.urgent b{color:#a22d28}
.game-number{font-family:Tiny5,monospace;font-size:1.4em;font-weight:400;line-height:.8;white-space:nowrap;color:#074793;background:#FFE666;border-radius:3px;padding:0 2px}
.answer .game-number{color:#FFE666;background:transparent;padding:0}
.sent-receipt .game-number{color:#074793;background:transparent;font-size:1.4em;padding:0}
.impact-pill .game-number{color:inherit;background:transparent;padding:0}
#phoneClock{font-family:Tiny5,monospace;font-size:14px;font-weight:400;color:#FFCB04}
.result-score b{font-family:Tiny5,monospace;font-weight:400}
@media(max-width:700px) and (orientation:portrait){.stat>b{font-size:16px}.shift b{font-size:13px}.timer b{font-size:18px}}
@media(orientation:landscape) and (max-height:550px){.stat>b{font-size:15px}.timer b{font-size:17px}}
.phone-content .incoming,.phone.has-feedback .incoming,.phone-content .sent-message,.phone-content .answer p{font-size:var(--chat-font,11px);line-height:1.35;font-weight:400}
.phone-content .answer{min-height:0;padding:8px 9px;flex-shrink:0}
.phone-content .answers,.phone-content .incoming{flex-shrink:0}
.phone-content{gap:7px;overflow-y:auto;scrollbar-width:thin}
.answer>span,.answer i{flex-shrink:0}
.phone-content .incoming{padding:9px 10px 5px}
.phone-content .decision-head{margin-top:auto}
.scene-panel:has(#feedback:not([hidden])) #scene{inset:50px 0 0}
.scene-panel:has(#feedback:not([hidden])) #feedback{left:12px;top:100px;bottom:12px;width:calc(60% - 12px);max-height:calc(100% - 112px);padding:18px;overflow:visible;height:fit-content}
.scene-panel:has(#feedback:not([hidden])) #feedback h2{font-size:calc(var(--result-font,11px)*1.65);line-height:1.15;margin:0 0 10px;padding:0;max-width:100%}
.scene-panel:has(#feedback:not([hidden])) #feedback p{font-size:var(--result-font,11px);line-height:1.35;margin:0 0 9px}
.scene-panel #feedback #feedbackDelta{margin:0 0 9px;gap:5px}
.scene-panel #feedback .impact-pill{font-size:calc(var(--result-font,11px)*.95);padding:4px 7px}
.scene-panel #feedback .growth-block{padding:8px;margin:0}
.scene-panel #feedback .growth-block b{font-size:var(--result-font,11px);line-height:1.3;display:block}
.scene-panel:has(#feedback:not([hidden])) #feedback .growth-block p{margin:5px 0 0;font-size:var(--result-font,11px)}
.scene-panel #feedback:not(.risk):not(.acceptable) #feedbackTitle{display:table;background:#D1F1DC;color:#17653B;border-radius:10px;padding:7px 10px;margin:0 0 10px;max-width:100%}
.shift-result{position:fixed;inset:150px 30px 20px;z-index:20;overflow:auto;color:#313140;background:#E3EFF7;border-radius:22px;padding:25px}
.result-sheet{max-width:1050px;margin:auto}.result-sheet h1{color:#074793;font-size:36px}.result-sheet p,.result-sheet li{font-size:12px;line-height:1.5}.result-sheet h2{font-size:16px;color:#074793;margin:0 0 8px}.result-score{display:flex;gap:12px;align-items:baseline;color:#074793}.result-score b{font-size:52px}.result-counts{display:flex;gap:12px;margin:10px 0 20px}.result-counts span{background:#C2E6FA;padding:8px 12px;border-radius:20px;font-size:12px}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.result-grid section,.result-course{background:#F3F9FF;padding:16px;border-radius:12px}.result-grid ul{padding-left:18px;margin:0}.result-course{margin:20px 0}.result-course a{color:#074793}.result-sheet .primary{max-width:280px}
@media(min-width:1051px){.play-layout{grid-template-columns:minmax(0,1fr) 390px}}
@media(max-width:700px) and (orientation:portrait){
  .phone-content{gap:5px}.phone-content .answer{padding:5px 7px}.phone-content .incoming{padding:6px 8px}
  .play-layout:has(#feedback:not([hidden])){grid-template-rows:minmax(240px,1.3fr) minmax(0,1fr)}
  .scene-panel:has(#feedback:not([hidden])) #scene{inset:16px -12px -10px}
  .scene-panel:has(#feedback:not([hidden])) #feedback{left:5px;top:5px;bottom:5px;width:calc(72% - 5px);max-height:calc(100% - 10px);padding:12px}
  .scene-panel:has(#feedback:not([hidden])) #feedback h2{font-size:calc(var(--result-font,11px)*1.4);margin-bottom:7px}
  .scene-panel #feedback .growth-block{padding:6px}.scene-panel #feedback .impact-pill{padding:3px 5px}
  .scene-panel:has(#feedback:not([hidden])) .thought{width:60px}
  .shift-result{inset:100px 10px 10px;padding:16px}.result-grid{grid-template-columns:1fr;gap:10px}.result-sheet h1{font-size:29px}.result-counts{gap:5px}.result-counts span{font-size:10px;padding:7px}
  #nextSituation{min-height:32px;font-size:12px;padding:7px}
}
@media(orientation:landscape) and (max-height:550px){
  .scene-panel:has(#feedback:not([hidden])) #scene{inset:18px 0 -10px}
  .scene-panel:has(#feedback:not([hidden])) #feedback{left:5px;top:5px;bottom:5px;width:calc(74% - 5px);max-height:calc(100% - 10px);padding:11px}
  .scene-panel:has(#feedback:not([hidden])) .thought{width:55px}
  .phone-content .answer{padding:5px 6px}.phone-content{gap:4px}.shift-result{inset:58px 12px 8px;padding:16px}
}
/* Completed shift replaces the play HUD. */
.shift-result{inset:16px 24px;padding:22px 28px;scrollbar-width:thin}
.result-sheet{max-width:1180px;display:grid;gap:14px;min-height:100%;align-content:center}
.result-heading{display:grid;grid-template-columns:minmax(0,1fr) 140px;align-items:center;gap:28px}
.result-heading .setup-kicker{font-family:Handjet,Onest,sans-serif;font-size:27px;letter-spacing:.3px;text-transform:none;color:#074793}
.result-heading h1{font-size:34px;line-height:1.05;margin:7px 0 10px;letter-spacing:.2px}
#resultTitle:focus{outline:none}
/* Pixel numerals belong to metrics, not conversation text or countdown. */
.phone .game-number{font-family:Onest,Arial,sans-serif;font-size:1em;font-weight:650;line-height:inherit}
.phone .timer b{font-family:Onest,Arial,sans-serif;font-size:14px;font-weight:750}
.phone #phoneClock{font-family:Onest,Arial,sans-serif;font-size:10px;font-weight:700;color:#fff}
.result-heading p{margin:0;max-width:940px}
.result-avatar{width:140px;height:140px;object-fit:cover;object-position:top;border-radius:50%;background:#C2E6FA;border:4px solid #fff}
.result-totals{display:flex;align-items:center;gap:30px;margin-top:10px}
.result-score b{font-family:Tiny5,monospace;font-size:52px;font-weight:400;line-height:1}
.result-score span{font-size:13px}.result-counts{margin:0;gap:8px}.result-counts span{font-size:11px;padding:7px 11px}
.result-sheet p,.result-sheet li{font-size:11.5px;line-height:1.4}
.result-sheet h2{font-size:14px;line-height:1.25;margin:0 0 6px}
.result-grid{gap:12px}.result-grid section{padding:13px 15px}.result-grid p{margin:0}
.result-course{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:22px;background:#C2E6FA;border-left:4px solid #3CBFEB;margin:0;padding:13px 16px}
.result-course p{margin:0}.result-course a{text-align:center;padding:10px 12px;background:#074793;border-radius:8px;color:#fff;font-size:12px;font-weight:650;text-decoration:none}
.result-sheet #restartShift{justify-self:center;max-width:260px;font-size:12px;min-height:36px}
@media(max-width:700px){
  .shift-result{inset:8px;padding:15px}.result-sheet{gap:12px;align-content:start}
  .result-heading{grid-template-columns:minmax(0,1fr) 72px;gap:12px;align-items:start}
  .result-avatar{width:72px;height:72px;border-width:2px}
  .result-heading .setup-kicker{font-size:23px}.result-heading h1{font-size:27px;margin:6px 0 10px}
  .result-heading-copy{display:contents}.result-heading .setup-kicker,.result-heading h1{grid-column:1}
  .result-avatar{grid-column:2;grid-row:1/3}.result-heading p,.result-totals{grid-column:1/-1}
  .result-totals{gap:12px;flex-wrap:wrap;margin-top:0}.result-score b{font-size:46px}
  .result-counts{gap:5px}.result-counts span{padding:6px 8px;font-size:10px}
  .result-course{grid-template-columns:1fr;gap:10px;padding:12px}.result-course a{justify-self:start;min-width:175px}
  .result-sheet p,.result-sheet li{font-size:11px}.result-sheet h2{font-size:13px}
}
@media(min-width:701px) and (max-height:650px){
  .shift-result{inset:10px;padding:15px 20px}.result-sheet{gap:10px;align-content:start}
.result-heading{grid-template-columns:minmax(0,1fr) 100px}.result-avatar{width:100px;height:100px}
  .result-heading h1{font-size:29px}.result-heading .setup-kicker{font-size:23px}
  .result-grid section,.result-course{padding:10px 12px}.result-score b{font-size:43px}
}
/* Short result preview. Detailed diagnosis awaits the form integration. */
#resultDetails[hidden],#resultCounts{display:none}
#resultDetails:not([hidden]){display:grid;gap:14px}
#shiftResult .result-sheet{max-width:1000px;align-content:center}
#shiftResult .result-heading{display:flex;flex-direction:column;gap:22px;text-align:center}
#shiftResult .result-avatar{order:-1;width:124px;height:124px;flex-shrink:0}
#shiftResult .result-heading-copy{display:block;width:100%}
#shiftResult .setup-kicker{display:block;font-size:clamp(30px,3.2vw,42px);line-height:1.1}
#shiftResult .result-heading h1{font-size:clamp(36px,4.5vw,60px);line-height:1.08;margin:14px 0 20px;text-wrap:balance}
#shiftResult .result-heading p{max-width:820px;margin:0 auto;font-size:clamp(15px,1.6vw,20px);line-height:1.5;text-wrap:pretty}
#shiftResult .result-totals{justify-content:center;margin-top:26px}
#shiftResult .result-score b{font-size:clamp(60px,6vw,80px)}
#shiftResult .result-score span{font-size:18px}
@media(max-width:700px){
  #shiftResult .result-heading{gap:18px}
  #shiftResult .result-avatar{width:88px;height:88px}
  #shiftResult .result-heading h1{font-size:36px;margin:12px 0 16px}
  #shiftResult .result-totals{margin-top:20px}
}
@media(max-height:550px){
  #shiftResult .result-sheet{align-content:start}
  #shiftResult .result-avatar{width:68px;height:68px}
  #shiftResult .result-heading{gap:12px}
}
#shiftResult .result-heading{align-items:center}
/* Temporary review navigation, enabled only by ?scenes. */
.scene-review-nav{display:flex;align-items:center;gap:10px;flex-shrink:0;background:#E3EFF7;border-radius:10px;padding:8px 12px;color:#074793;font-size:12px}
.scene-review-nav label{font-weight:700;white-space:nowrap}
.scene-review-nav select{min-width:0;flex:1;padding:7px;border:1px solid #94c4e1;border-radius:6px;font:inherit;color:#074793;background:#fff}
.scene-review-nav button{border:0;border-radius:6px;background:#C2E6FA;color:#074793;padding:8px 12px;white-space:nowrap}
.scene-review .timer small,.scene-review .timer svg{display:none}
@media(max-width:700px){.scene-review-nav{flex-wrap:wrap;gap:6px;padding:7px}.scene-review-nav label{display:none}.scene-review-nav select{flex-basis:100%;width:100%}.scene-review-nav button{flex:1;padding:5px;font-size:11px}}
.scene-review .game{grid-template-rows:44px auto 86px minmax(0,1fr) 20px;gap:8px}
@media(max-width:700px){.scene-review .game{grid-template-rows:auto auto auto minmax(0,1fr) 16px;gap:6px}}
@media(orientation:landscape) and (max-height:550px){.scene-review .game{grid-template-rows:auto 43px minmax(0,1fr) 15px}}
/* Wide laptop conversation on the left; scene feedback stays beside it. */
.play-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px}
.laptop{grid-column:1;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:0 8px 9px;perspective:800px}
.play-layout>.scene-panel{grid-column:2;grid-row:1}
.laptop .phone{flex:1;min-height:0;width:100%;border:4px solid #c2e6fa;border-bottom-width:7px;border-radius:15px 15px 5px 5px;box-shadow:0 0 0 1px #7db6d4;overflow:hidden}
.laptop .phone-hardware{display:flex;height:18px;min-height:18px;padding:0 14px;align-items:center;position:relative}
.laptop .phone-island{position:absolute;width:5px;height:5px;border-radius:50%;left:50%;top:6px;background:#7197b0}
.laptop .phone-hardware>span:last-child{visibility:hidden}
.laptop .phone #phoneClock{font-size:9px}
.laptop .phone-header{padding:7px 14px}
.laptop .phone-content{padding:9px 12px;gap:7px}
.laptop .chat-day{display:none}
.laptop .answer{border-radius:10px;padding:9px 10px}
.laptop-base{height:78px;flex-shrink:0;margin:0 -8px;background:#b5cedf;border:1px solid #dff5ff;border-radius:3px 3px 13px 13px;box-shadow:0 6px 0 #7197b0,0 9px 0 #082644;transform:rotateX(24deg);transform-origin:top;display:flex;flex-direction:column;align-items:center;padding:6px 24px 5px;gap:5px}
.laptop-keys{width:94%;max-width:430px;display:grid;gap:3px;transform:perspective(400px) rotateX(8deg)}
.laptop-keys>div{display:flex;justify-content:center;gap:4px;height:9px}
.laptop-keys span{flex:1;max-width:36px;background:#e3eff7;color:#52738e;border-radius:2px;box-shadow:0 2px 0 #7197b0;font:6px/9px Onest,sans-serif;text-align:center}
.laptop-keys .laptop-space span:nth-child(2){max-width:160px;flex:5}
.laptop-trackpad{width:75px;height:13px;flex-shrink:0;border:1px solid #8cabc2;border-radius:3px;background:#c8ddeb}
@media(max-width:1050px) and (min-width:701px){.play-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.laptop-base{height:66px;padding-top:4px;gap:3px}.laptop-keys>div{height:7px}.laptop-keys span{line-height:7px}}
@media(max-width:700px) and (orientation:portrait){
  html,body{overflow:auto;height:auto;min-height:100%}
  .game,.scene-review .game{height:auto;min-height:100dvh;grid-template-rows:auto auto auto auto auto}
  .play-layout,.play-layout:has(#feedback:not([hidden])){grid-template-columns:1fr;grid-template-rows:auto 330px;gap:16px}
  .laptop{grid-column:1;grid-row:1;height:540px}
  .play-layout>.scene-panel{grid-column:1;grid-row:2;min-height:330px}
  .laptop-base{height:65px;padding:4px 18px;gap:3px}
  .laptop-keys>div{height:7px}.laptop-keys span{line-height:7px}
}
@media(orientation:landscape) and (max-height:550px){.play-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.laptop-base{height:42px;padding:3px 20px}.laptop-keys>div{height:5px;gap:3px}.laptop-keys span{font-size:0}.laptop-trackpad{display:none}.laptop .phone-hardware{display:none}.laptop .phone-content{padding:5px 8px;gap:4px}}
/* Clean scene preview keeps review controls out of the available screen height. */
.scene-review-clean .scene-review-nav{display:none}
.scene-review-clean .game{grid-template-rows:44px 86px minmax(0,1fr) 28px}
@media(min-width:1000px) and (max-height:800px){.scene-review-clean .game{grid-template-rows:34px 68px minmax(0,1fr) 23px}}
@media(max-width:700px) and (orientation:portrait){.scene-review-clean .game{grid-template-rows:auto auto auto auto}}
@media(orientation:landscape) and (max-height:550px){.scene-review-clean .game{grid-template-rows:43px minmax(0,1fr) 15px}}
/* Compact metrics leave more height for the laptop and location. */
.game{grid-template-rows:40px 58px minmax(0,1fr) 22px;gap:8px}
.scene-review .game{grid-template-rows:40px auto 58px minmax(0,1fr) 22px}
.scene-review-clean .game{grid-template-rows:40px 58px minmax(0,1fr) 22px}
.hud{padding:6px 16px 6px 10px;gap:22px;border-radius:15px}
.agent-portrait{width:40px;height:40px;padding:2px;flex-shrink:0}
.agent-emote{width:16px;height:16px;font-size:10px;bottom:-2px;right:-3px}
.agent-info{min-width:205px;gap:10px}
.agent-caption b{font-size:12px;margin-top:3px}
@media(max-width:1050px){.hud{gap:14px}.agent-info{min-width:160px}}
@media(max-width:700px) and (orientation:portrait){
  .game,.scene-review .game,.scene-review-clean .game{grid-template-rows:auto auto auto auto auto;height:auto}
  .hud{padding:5px 8px;min-height:48px;gap:10px}
  .agent-info{min-width:0}.agent-portrait{width:32px;height:32px}.agent-emote{width:13px;height:13px;font-size:8px}
}
@media(orientation:landscape) and (max-height:550px){
  .game,.scene-review-clean .game{grid-template-rows:43px minmax(0,1fr) 15px}
  .scene-review:not(.scene-review-clean) .game{grid-template-rows:auto 43px minmax(0,1fr) 15px}
  .agent-info{min-width:120px}.agent-portrait{width:30px;height:30px}.hud{padding:3px 8px}
}
/* Near-frontal keyboard with quiet key silhouettes. */
.laptop-base{transform:none;border-radius:3px 3px 10px 10px}
.laptop-keys{transform:none}
.laptop-keys span{font-size:0;color:transparent;box-shadow:0 1px 0 #7197b0;background:#dceaf3}
/* One compact status row instead of a separate branding header. */
.topbar{display:none}
.game,.scene-review-clean .game{grid-template-rows:58px minmax(0,1fr) 22px}
.scene-review:not(.scene-review-clean) .game{grid-template-rows:auto 58px minmax(0,1fr) 22px}
.agent-info{position:relative;padding-right:57px;min-width:220px}
.agent-info .shift{position:absolute;right:0;top:50%;transform:translateY(-50%);display:block}
.agent-info .shift>span{display:none}
.agent-info .shift b{display:block;margin:0;padding:5px 6px;font-size:12px;letter-spacing:1px}
@media(max-width:1050px){.agent-info{min-width:185px;padding-right:53px}}
@media(max-width:700px) and (orientation:portrait){
  .game,.scene-review-clean .game{grid-template-rows:auto auto auto;height:auto}
  .scene-review:not(.scene-review-clean) .game{grid-template-rows:auto auto auto auto;height:auto}
  .agent-info{min-width:0;padding-right:0;flex-direction:column;gap:3px}
  .agent-info .shift{position:static;transform:none}
  .agent-info .shift b{padding:1px 3px;font-size:10px;line-height:1}
}
@media(orientation:landscape) and (max-height:550px){
  .game,.scene-review-clean .game{grid-template-rows:43px minmax(0,1fr) 15px}
  .scene-review:not(.scene-review-clean) .game{grid-template-rows:auto 43px minmax(0,1fr) 15px}
  .agent-info{min-width:165px}
}
/* Foreshortened keyboard: restore perspective, reduce visible depth. */
.laptop-base{height:43px;padding:3px 24px 2px;gap:3px;transform:rotateX(24deg);transform-origin:top;border-radius:3px 3px 13px 13px}
.laptop-keys{transform:perspective(400px) rotateX(8deg);gap:2px}
.laptop-keys>div{height:5px;gap:4px}
.laptop-keys span{font-size:0;line-height:5px}
.laptop-trackpad{height:7px;width:65px}
@media(max-width:1050px){.laptop-base{height:38px;padding:3px 18px 2px;gap:2px}.laptop-keys>div{height:4px}.laptop-trackpad{height:6px}}
@media(orientation:landscape) and (max-height:550px){.laptop-base{height:29px;padding:2px 18px}.laptop-keys>div{height:4px}.laptop-trackpad{display:none}}
/* Episode progress belongs to the location, replacing its question title. */
.scene-kicker,.agent-info .shift{display:none}
.agent-info{padding-right:0}
@media(min-width:1051px){.agent-info{min-width:185px}}
@media(min-width:701px) and (max-width:1050px){.agent-info{min-width:145px}}
.scene-top h1{margin-top:0;font-size:clamp(17.333333px,1.766667vw,26.666667px);line-height:1.05;letter-spacing:.1px}
/* Supplied Academy mark in the right side of the laptop header. */
.laptop .phone-header .laptop-academy-logo{width:120px;height:38px;object-fit:contain;margin-left:auto;flex-shrink:0;border-radius:0}
@media(max-width:700px){.laptop .phone-header .laptop-academy-logo{width:86px;height:28px}}
/* Slightly deeper keyboard (+10%), preserving the approved perspective. */
.laptop-base{height:47.3px}
@media(max-width:1050px){.laptop-base{height:41.8px}}
@media(orientation:landscape) and (max-height:550px){.laptop-base{height:31.9px}}
/* Compact chat leading requested by Polya. */
.laptop .phone-content .incoming,.laptop .phone.has-feedback .incoming,.laptop .phone-content .sent-message,.laptop .phone-content .answer p{line-height:1.2}
.laptop .incoming p{margin:0 0 5px}
.laptop .incoming p:last-of-type{margin-bottom:3px}
/* Larger answer copy for clearer reading. */
.laptop .phone-content .answer p{font-size:var(--chat-font,15px)}
/* Incoming message follows the larger answer scale with tighter leading. */
.laptop .phone-content .incoming{font-size:var(--chat-font,15px);line-height:1.15}
.laptop .incoming p{margin:0 0 3px}
.laptop .incoming p:last-of-type{margin-bottom:2px}
/* Equal readable scale for incoming question and answer choices. */
.laptop .phone-content .incoming,.laptop .phone-content .answer p{font-size:var(--chat-font,14px);line-height:1.15}
/* Keep episode progress visible above the situation title. */
.scene-kicker{display:block!important;font-size:clamp(12px,1.1vw,17px);letter-spacing:1.8px;text-transform:none;color:#6d92ae;font-weight:700}
.agent-info .shift{display:none!important}
/* Avoid showing the fallback Vadim/old font during scene initialization. */
body:not(.scene-ready) .play-layout,body:not(.scene-ready) .hud,body:not(.scene-ready) .footer{visibility:hidden}
/* Fluid chat type: JS refines this value to the available laptop width. */
.laptop .phone-content .incoming,.laptop .phone-content .answer p,.laptop .phone-content .sent-message{font-size:clamp(12px,1.1vw,15.5px)}
/* Balanced two-column composition: laptop and scene each occupy half. */
.play-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media(max-width:1050px) and (min-width:701px){.play-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}}
.laptop .phone-content .incoming,.laptop .phone-content .answer p,.laptop .phone-content .sent-message{font-size:clamp(12px,1.1vw,14.5px)}
/* Fluid full-width stage: expands with any monitor and remains centered. */
.game{width:100%;max-width:none;margin:0 auto;padding-left:clamp(10px,2.35vw,48px);padding-right:clamp(10px,2.35vw,48px)}
.laptop .phone-content .incoming,.laptop .phone-content .answer p,.laptop .phone-content .sent-message{font-size:clamp(12px,1.1vw,18.5px)}
/* Outfit picker and regular-game overflow guard. */
.outfit-choices{display:grid;gap:6px;margin:6px 0 4px}
.outfit-option{border:1px solid #b7d5e6;border-radius:8px;background:#f3f9ff;color:#074793;padding:8px 10px;text-align:left;font-size:11px}
.outfit-option[aria-pressed=true]{border-color:#074793;background:#c2e6fa;box-shadow:inset 0 0 0 1px #074793}
@media(max-width:700px) and (orientation:portrait){
  html,body{overflow:hidden;height:100%;min-height:0}
  body.scene-review{overflow:auto;height:auto;min-height:100%}
  body:not(.scene-review) .game{height:100dvh;min-height:0}
}
/* Full character preview and visual outfit swatches in setup. */
.agent-setup-preview{height:94px;display:grid;place-items:end center;margin:-2px 0 2px}
.setup-agent{position:relative;width:76px;height:94px;display:flex;flex-direction:column;align-items:center;justify-content:end}
.setup-agent>svg{width:58px;height:58px;z-index:2}
.setup-agent-body{display:block;width:54px;height:38px;border-radius:18px 18px 8px 8px;background:#9fc9e5;box-shadow:inset 0 -8px 0 #355789;position:relative}
.setup-agent-body:after{content:'';position:absolute;left:8px;right:8px;bottom:-8px;height:9px;border-radius:8px;background:linear-gradient(90deg,#f4f4f4 0 38%,transparent 38% 62%,#f4f4f4 62%)}
.setup-agent-cat-kigurumi .setup-agent-body{background:#c8753f;box-shadow:inset 0 -8px 0 #a85d35}
.setup-agent-cat-kigurumi .setup-agent-body:before,.setup-agent-cat-kigurumi .setup-agent-body:after{ }
.setup-agent-hoodie-jeans .setup-agent-body{background:#f5f7f8;box-shadow:inset 0 -8px 0 #3c6fa3}
.outfit-choices{display:flex;gap:10px;margin:6px 0 4px}
.outfit-option{width:56px;height:48px;padding:4px;border:2px solid #b7d5e6;border-radius:9px;background:#f3f9ff;color:#074793;display:grid;place-items:center}
.outfit-option span{font-size:24px;line-height:1}
.outfit-option[aria-pressed=true]{border-color:#074793;background:#c2e6fa;box-shadow:inset 0 0 0 1px #074793}
@media(max-width:700px){.agent-setup-preview{height:82px}.setup-agent{transform:scale(.85);transform-origin:bottom}.outfit-option{width:52px;height:44px}}
.avatar-option{position:relative;display:grid;place-items:end center;width:74px;height:92px;padding:4px;border-radius:10px}
.avatar-option>svg{width:58px;height:58px;z-index:2}
.avatar-mini-body{width:42px;height:29px;border-radius:14px 14px 6px 6px;background:#9fc9e5;box-shadow:inset 0 -6px 0 #355789;margin-top:-10px}
.avatar-option[aria-pressed=true]{background:#c2e6fa;box-shadow:inset 0 0 0 2px #074793}
/* 3D setup preview replaces the temporary CSS mannequin. */
.agent-setup-preview{position:relative;overflow:hidden}
.agent-setup-preview canvas{display:block;width:100%;height:100%}
.agent-setup-preview .setup-agent{display:none}
/* Avatar choices stay as face portraits; full body lives in the 3D preview above. */
.avatar-option{display:grid;place-items:center;width:74px;height:74px;padding:4px;border-radius:50%}
.avatar-option>svg{width:64px;height:64px}
/* Wider setup dialog fits the full character and outfit row without desktop scroll. */
.agent-setup{width:min(700px,calc(100vw - 28px));padding:24px}
.agent-setup form{gap:8px}
@media(min-width:701px){.agent-setup{max-height:calc(100dvh - 28px);overflow:hidden}.agent-setup-preview{height:92px}}
@media(max-width:700px){.agent-setup{width:calc(100vw - 20px);padding:18px}.agent-setup form{gap:7px}}
/* Setup: full 3D agent on the left, controls on the right. */
@media(min-width:701px){
  .agent-setup{width:min(900px,calc(100vw - 28px));padding:26px}
  .agent-setup form{padding-left:310px;position:relative;min-height:520px}
  .agent-setup-preview{position:absolute;left:10px;top:95px;width:270px;height:330px;margin:0}
  .avatar-option{width:48px;height:48px;border-radius:50%;padding:0;background:#d8eafe!important}
  .avatar-option>svg{display:none}
  .avatar-option:nth-child(1){border-color:#e3bc68}.avatar-option:nth-child(2){border-color:#75513d}.avatar-option:nth-child(3){border-color:#bc7045}
  .avatar-option[aria-pressed=true]{box-shadow:inset 0 0 0 4px #074793!important}
  .outfit-option{width:74px;height:64px;border-radius:10px;padding:6px}
  .outfit-option span{display:block;width:100%;height:100%;font-size:0;border-radius:6px}
  .outfit-business span{background:linear-gradient(135deg,#9fc9e5 0 48%,#355789 49% 100%)}
  .outfit-cat-kigurumi span{background:#c8753f;clip-path:polygon(18% 28%,32% 8%,42% 24%,58% 24%,68% 8%,82% 28%,88% 88%,12% 88%)}
  .outfit-hoodie-jeans span{background:linear-gradient(#f5f7f8 0 56%,#3c6fa3 57%)}
}
@media(max-width:700px){.agent-setup-preview{height:100px}.outfit-option span{font-size:0}}
/* Hair swatches use their actual colors. */
.avatar-option:nth-child(1){background:#e3bc68!important}.avatar-option:nth-child(2){background:#75513d!important}.avatar-option:nth-child(3){background:#bc7045!important}
.avatar-option[aria-pressed=true]{box-shadow:inset 0 0 0 4px #074793!important}
/* Outfit thumbnails read as garments rather than abstract symbols. */
.outfit-business span{background:linear-gradient(120deg,#9fc9e5 0 43%,#fff 44% 50%,#355789 51%);position:relative}
.outfit-business span:after{content:'';position:absolute;left:42%;top:12%;width:16%;height:72%;background:#fff}
.outfit-cat-kigurumi span{background:#c8753f;clip-path:polygon(12% 24%,28% 2%,42% 20%,58% 20%,72% 2%,88% 24%,94% 94%,6% 94%)}
.outfit-hoodie-jeans span{background:linear-gradient(#f7f7f7 0 54%,#3c6fa3 55%);position:relative}
.outfit-hoodie-jeans span:after{content:'';position:absolute;left:44%;top:8%;height:42%;border-left:2px solid #d0d0d0}
@media(min-width:701px){.avatar-option{width:38px;height:38px;border-width:3px}.avatar-choices{gap:10px}}
.agent-setup-preview canvas{position:relative;z-index:5;background:transparent}
/* During setup, show only the setup dialog; reveal the game after confirmation. */
body.agent-setup-open .game> :not(#agentSetup){visibility:hidden!important}
body.agent-setup-open .game{background:#103762}
/* Setup behaves as the first screen, without a modal backdrop. */
body.agent-setup-open{background:#103762}
.agent-setup:not([open]){display:none}
/* Center the non-modal first screen and keep the entire agent in view. */
.agent-setup[open]{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100dvh - 28px)}
.outfit-label{font-size:12px;font-weight:650}
@media(min-width:701px){.agent-setup form{min-height:0}.agent-setup-preview{top:45px;height:340px}}
@media(max-width:700px){.agent-setup-preview{height:180px}.avatar-option{width:38px;height:38px;padding:0}.avatar-option>svg{display:none}.outfit-option span{display:block;width:100%;height:100%}}
/* Appearance controls belong to the full-body preview. */
.agent-setup{width:min(900px,calc(100vw - 28px));padding:28px;overflow:auto}
.agent-setup form{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-areas:'appearance intro' 'appearance fields' 'appearance start';gap:22px 32px;padding:0;min-height:0;align-content:center}
.setup-intro{grid-area:intro;align-self:end}.setup-intro h2{margin:14px 0 12px}.setup-intro p{margin:0}
.setup-fields{grid-area:fields;display:grid;gap:9px;align-self:center}.setup-fields>label:not(:first-child){margin-top:10px}
.agent-setup form>.primary{grid-area:start;align-self:start;margin-top:4px;min-height:44px}
.setup-appearance{grid-area:appearance;display:flex;flex-direction:column;align-items:center;gap:8px}
.setup-appearance .agent-setup-preview{position:relative;inset:auto;width:100%;height:310px;margin:0}
.setup-appearance .avatar-choices{margin:0 0 8px;gap:10px}
.setup-appearance .avatar-option{background:var(--hair-color)!important;border:3px solid transparent;width:36px;height:36px;padding:0}
.setup-appearance .avatar-option[aria-pressed=true]{border-color:#074793;box-shadow:inset 0 0 0 3px #f3f9ff!important}
.setup-appearance .avatar-option svg{display:none}
.setup-appearance .outfit-choices{margin:0;gap:10px}.setup-appearance .outfit-option{width:72px;height:78px;padding:4px;background:#173d61;border-color:#7696b1}
.setup-appearance .outfit-option[aria-pressed=true]{border-color:#074793;box-shadow:0 0 0 2px #074793,inset 0 0 0 2px #f3f9ff}
.outfit-option svg{display:block;width:100%;height:100%}
@media(max-width:700px){
  .agent-setup{padding:18px}.agent-setup form{grid-template-columns:1fr;grid-template-areas:'intro' 'fields' 'appearance' 'start';gap:16px}
  .setup-intro h2{font-size:25px;margin:8px 0}.setup-appearance .agent-setup-preview{height:210px}.setup-appearance .outfit-option{width:64px;height:66px}
}
/* Readable numbers in metrics, feedback and final score. */
.stat>b,.shift b,.timer b,#phoneClock,.game-number,.result-score b,.stat-delta{font-family:Onest,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:0}
.game-number,.impact-pill .game-number,.sent-receipt .game-number{font-size:1em;line-height:inherit}
.stat>b{font-size:18px}.impact-pill{line-height:1.4}
@media(max-width:700px){.stat>b{font-size:14px}}
/* The canvas pixel buffer must never determine its observed container size. */
#resultAgent3d{position:relative;width:180px;height:180px;flex:none;overflow:hidden;contain:size layout paint}
#resultAgent3d canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.round-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#103762;padding:24px;color:#074793}
.round-loader-card{width:min(420px,100%);padding:30px;border-radius:22px;background:#e3eff7;box-shadow:0 8px 0 #082748;text-align:center}
.round-loader h2{margin:0 0 12px;font-size:24px}.round-loader p{margin:0 0 22px;font-size:14px;line-height:1.5}
.round-load-track{display:flex;align-items:center;gap:12px}.round-load-track span{min-width:42px;font-size:13px;font-variant-numeric:tabular-nums}
.round-load-track progress{appearance:none;border:0;border-radius:8px;overflow:hidden;width:100%;height:12px;background:#b9d6e9}
.round-load-track progress::-webkit-progress-bar{background:#b9d6e9}.round-load-track progress::-webkit-progress-value{background:#0079bf;border-radius:8px}.round-load-track progress::-moz-progress-bar{background:#0079bf;border-radius:8px}
.round-loader .primary{margin-top:20px;width:100%}
/* In mobile scene review, keep the scene action above its feedback. */
.thought{transform:translate(-50%,-100%)}
.thought .thought-shell>path:nth-child(4),.thought .thought-shell>path:nth-child(5){transform:translateX(var(--thought-tail-shift,0px))}
/* Every episode assesses the response on the laptop screen. */
.laptop #feedback[data-placement="laptop"]{
  position:relative;inset:auto;transform:none;flex:0 0 auto;width:100%;height:auto;
  min-height:0;max-height:none;margin:5px 0 0;padding:14px 16px;border:1px solid #a9ccde;
  border-radius:12px;background:#effaf3;color:#254961;box-shadow:none;clip-path:none;
  overflow:visible;font-size:var(--result-font,13px);isolation:auto;
}
.laptop #feedback[data-placement="laptop"]::before,.laptop #feedback[data-placement="laptop"]::after{display:none}
.laptop #feedback[data-placement="laptop"]:not([hidden]){animation:laptop-feedback-enter 480ms cubic-bezier(.22,1,.36,1) both}
@keyframes laptop-feedback-enter{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .laptop #feedback[data-placement="laptop"]:not([hidden]){animation:none}
}
.laptop #feedback[data-placement="laptop"] h2{
  display:table;max-width:100%;margin:0 0 10px;padding:7px 10px;border-radius:7px;
  background:#ccefd9;color:#17613b;font-family:Onest,Arial,sans-serif;font-size:calc(var(--result-font,13px)*1.16);line-height:1.25;
}
.laptop #feedback[data-placement="laptop"].acceptable h2{background:#ffe9a1;color:#785000}
.laptop #feedback[data-placement="laptop"].risk h2{background:#ffd8d8;color:#a3303c}
.laptop #feedback[data-placement="laptop"].acceptable{background:#fff9e9}
.laptop #feedback[data-placement="laptop"].risk{background:#fff1f1}
.laptop #feedback[data-placement="laptop"] p{font-size:var(--result-font,13px);line-height:1.38;margin:0 0 10px}
.laptop #feedback[data-placement="laptop"] #feedbackDelta{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.laptop #feedback[data-placement="laptop"] .impact-pill{font-size:calc(var(--result-font,13px)*.92);padding:3px 7px;line-height:1.3}
.laptop #feedback[data-placement="laptop"] .growth-block{padding:9px 11px;margin:0;border:0;border-radius:7px;background:#e0eff8}
.laptop #feedback[data-placement="laptop"] .growth-block b{display:block;font-size:calc(var(--result-font,13px)*.92);line-height:1.3;color:#1d6088}
.laptop #feedback[data-placement="laptop"] .growth-block p{margin:5px 0 0;font-size:var(--result-font,13px)}
.feedback-in-laptop .phone-content>#nextSituation{margin-top:auto}
@media(min-width:701px) and (max-height:800px){
  .laptop #feedback[data-placement="laptop"]{padding:10px 13px;margin-top:1px}
  .laptop #feedback[data-placement="laptop"] h2{padding:6px 9px;margin-bottom:7px}
  .laptop #feedback[data-placement="laptop"] p,.laptop #feedback[data-placement="laptop"] #feedbackDelta{margin-bottom:7px}
  .laptop #feedback[data-placement="laptop"] .growth-block{padding:7px 9px}
  .laptop #feedback[data-placement="laptop"] .growth-block p{margin:4px 0 0}
  .feedback-in-laptop .phone-content>#nextSituation{min-height:40px}
}
@media(max-width:700px) and (orientation:portrait){
  .feedback-in-laptop .laptop:has(#feedback:not([hidden])){height:auto;min-height:540px}
  .feedback-in-laptop .laptop:has(#feedback:not([hidden])) .phone{flex:none;height:auto;min-height:475px}
  .feedback-in-laptop .laptop:has(#feedback:not([hidden])) .phone-content{flex:none;overflow:visible}
  .laptop #feedback[data-placement="laptop"]{padding:11px 12px;margin-top:3px}
  .laptop #feedback[data-placement="laptop"] h2{margin-bottom:8px;padding:6px 9px}
  .laptop #feedback[data-placement="laptop"] p{margin-bottom:8px}
  .feedback-in-laptop .phone-content>#nextSituation{margin-top:8px}
}
@media(max-width:700px) and (orientation:portrait){
  body.scene-review .play-layout:has(:is(.evening-bedroom,.payment-room,.passport-control,.scripted-scene) #feedback:not([hidden])){grid-template-rows:auto auto}
  body.scene-review :is(.evening-bedroom,.payment-room,.passport-control,.scripted-scene):has(#feedback:not([hidden])){min-height:660px;padding:365px 10px 12px;display:flex;flex-direction:column}
  body.scene-review :is(.evening-bedroom,.payment-room,.passport-control,.scripted-scene):has(#feedback:not([hidden])) #scene{inset:20px 0 auto;height:330px}
  body.scene-review :is(.evening-bedroom,.payment-room,.passport-control,.scripted-scene):has(#feedback:not([hidden])) #feedback{position:relative;inset:auto;transform:none;margin:0;width:100%;height:auto;max-height:none;padding:16px}
}
/* Compact conversation header and message copy; preserve the status node for JS. */
.laptop .phone-content .incoming,.laptop .phone.has-feedback .incoming,.laptop .phone-content .sent-message{
  font-size:clamp(12px,1vw,14px);line-height:1.25;
}
.laptop .phone-header{min-height:34px;padding:4px 12px;gap:7px}
.laptop .phone-header .contact-avatar{width:24px;height:24px;min-width:24px;flex:0 0 24px;border-radius:7px}
.laptop .phone-header .contact-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.laptop .phone-header b{font-size:12px;line-height:1.25}
.laptop .phone-header #contactStatus{display:none}
.laptop .phone-header .laptop-academy-logo{width:80px;height:25px}
.laptop .phone-header>div:nth-child(2){min-width:0;flex-shrink:1}
.laptop .phone-header>div:nth-child(2) b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.laptop-game-title{margin-left:auto;text-align:right;flex-shrink:0;line-height:1.05}
.laptop-game-title strong{display:block;font:400 22px/1 Tiny5,monospace;color:#ffcb04;letter-spacing:.5px}
.laptop-game-title span{display:block;margin-top:3px;font-size:9px;color:#c7e1ef}
.scene-top>div{width:100%;min-width:0}
.scene-heading-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.scene-academy-logo{width:80px;height:25px;object-fit:contain;flex-shrink:0}
.footer{display:none}
.game,.scene-review-clean .game{grid-template-rows:58px minmax(0,1fr)}
.scene-review:not(.scene-review-clean) .game{grid-template-rows:auto 58px minmax(0,1fr)}
@media(orientation:landscape) and (max-height:550px){
  .game,.scene-review-clean .game{grid-template-rows:43px minmax(0,1fr)}
  .scene-review:not(.scene-review-clean) .game{grid-template-rows:auto 43px minmax(0,1fr)}
}
/* This final rule wins over the later desktop grid, including before any answer. */
@media(max-width:700px) and (orientation:portrait){
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
  body:not(.scene-review) .game{height:auto;min-height:100dvh}
  .play-layout,.play-layout:has(#feedback:not([hidden])){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:16px}
  .play-layout>.laptop{grid-column:1;grid-row:1;min-width:0}
  .play-layout>.scene-panel{grid-column:1;grid-row:2;min-width:0;min-height:330px}
  .laptop .phone-header{min-height:28px;padding:3px 10px;gap:6px}
  .laptop .phone-header .contact-avatar{width:22px;height:22px;min-width:22px;flex-basis:22px;border-radius:6px}
  .laptop .phone-header .laptop-academy-logo{width:52px;height:20px}
  .laptop-game-title strong{font-size:17px}
  .laptop-game-title span{font-size:8px}
  .scene-top h1{font-size:16px}
  .scene-academy-logo{width:65px;height:21px}
  .game,.scene-review-clean .game{grid-template-rows:auto auto}
  .scene-review:not(.scene-review-clean) .game{grid-template-rows:auto auto auto}
  .laptop .phone-content .incoming,.laptop .phone.has-feedback .incoming,.laptop .phone-content .sent-message{font-size:12px;line-height:1.25}
}

/* Review v40: score and yellow stars share a blue result card. */
#shiftResult .result-totals{flex-direction:column;gap:16px}
#shiftResult .result-score-card{display:flex;align-items:center;justify-content:center;gap:30px;max-width:100%;box-sizing:border-box;padding:22px 32px;border-radius:22px;background:#0079BF}
#shiftResult .result-score{color:#fff;gap:12px}
#shiftResult .result-stars{color:#FFCB04;font-size:32px;line-height:1.2;letter-spacing:3px;white-space:nowrap}
@media(max-width:600px){
  #shiftResult .result-score-card{flex-direction:column;gap:12px;width:100%;padding:20px}
  #shiftResult .result-stars{font-size:30px}
}

/* Palette source: ../../colors/14.png and 16.png; approved Academy SVG. */
:root{--academy-blue:#074793;--academy-mid-blue:#0079BF;--academy-cyan:#3CBFEB;--academy-yellow:#FFCB04;--academy-light:#F3F9FF}
#shiftResult{background:var(--academy-light)}
.setup-academy-logo{display:block;width:180px;height:65px;object-fit:contain;object-position:left;margin:0 0 18px}
#shiftResult .result-academy-logo{display:block;width:184px;height:66px;object-fit:contain}
.agent-setup{background:var(--academy-light);border-color:var(--academy-cyan)}
@media(max-width:700px){.setup-academy-logo{width:145px;height:52px;margin-bottom:10px}#shiftResult .result-academy-logo{width:154px;height:55px}}

/* Review v42: conversation 60%, illustrated scene 40% on wide screens. */
@media(min-width:701px){
  .play-layout,.play-layout:has(#feedback:not([hidden])){grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
}

/* Equal side columns keep the game title centered in the whole header. */
.laptop .phone-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.laptop-contact{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden}
.laptop-contact>div:last-child{min-width:0}
.laptop .laptop-contact b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.laptop .phone-header .laptop-game-title{margin:0;text-align:center}
.laptop .phone-header .laptop-academy-logo{justify-self:end;margin:0;max-width:100%}

/* Academy yellow identifies the answer under the pointer or keyboard focus. */
.answer:is(:hover,:focus-visible):not(:disabled){background:#FFCB04;border-color:#FFCB04;color:#074793;box-shadow:inset 0 0 0 1px #FFCB04}
.answer:is(:hover,:focus-visible):not(:disabled) :is(p,small,span,i){color:#074793}
.answer:focus-visible:not(:disabled){outline:3px solid #FFCB04;outline-offset:2px}

/* The player chooses an identity only before starting a shift. */
#agentPortrait{cursor:default}
/* Key rows fill the wider computer while retaining their staggered silhouette. */
.laptop-keys{width:94%;max-width:none;justify-items:center}
.laptop-keys>div{width:100%}
.laptop-keys>div:nth-child(2){width:90%}
.laptop-keys>div:nth-child(3){width:76%}
.laptop-keys span{max-width:none}
.laptop-keys .laptop-space{width:64%}
.laptop-keys .laptop-space span:nth-child(2){max-width:none}

/* Native radio semantics with two colored choice tiles. */
.gender-choices{border:0;padding:0;margin:10px 0 0;min-width:0}
.gender-choices legend{padding:0;margin:0 0 9px;font-size:12px;font-weight:650}
.gender-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.setup-fields .gender-options .gender-option{position:relative;margin:0;cursor:pointer}
.agent-setup .gender-option input{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0}
.gender-option span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 12px;border:2px solid #b6ccdc;border-radius:10px;background:white;color:#313140;font-size:16px;font-weight:650;transition:background .15s,border-color .15s}
.gender-option input[value=female]:checked+span{background:#f9cadd;border-color:#df7fa3;color:#583347}
.gender-option input[value=male]:checked+span{background:#bde6f7;border-color:#3cbfeb;color:#074793}
.gender-option input:focus-visible+span{outline:3px solid #074793;outline-offset:3px}
.gender-option:hover span{border-color:#7898b1}

/* Shared title row: game on the left, Academy on the right. */
.agent-setup form{grid-template-areas:'brand brand' 'appearance intro' 'appearance fields' 'appearance start'}
.setup-brand{grid-area:brand;display:flex;align-items:center;justify-content:space-between;gap:20px}
.setup-brand h1{margin:0;color:#074793;font:750 clamp(32px,4vw,48px)/1.05 Onest,Arial,sans-serif;letter-spacing:-1.2px}
.setup-brand .setup-academy-logo{display:block;width:138px;max-width:25%;height:auto;margin:0;flex:none}
.gender-options{align-items:stretch}.setup-fields .gender-options .gender-option{margin:0;display:flex;align-items:stretch}
.gender-option span{width:100%;height:100%;box-sizing:border-box}
.round-loader.initial-load{background:#f3f9ff}
.initial-load .round-loader-card{width:min(620px,100%);padding:24px;background:transparent;box-shadow:none}
.initial-load #roundLoadTitle{font-size:clamp(38px,7vw,64px);line-height:1.05;font-weight:750;letter-spacing:-1.5px}
.loader-academy-logo{display:none}.initial-load .loader-academy-logo{display:block;width:130px;height:auto;margin:0 0 40px auto}
.initial-load .round-load-track{max-width:420px;margin:auto}.initial-load #roundLoadCaption{font-size:16px}
@media(max-width:700px){
 .agent-setup form{grid-template-areas:'brand' 'intro' 'fields' 'appearance' 'start'}
 .setup-brand{gap:12px}.setup-brand h1{font-size:clamp(26px,7.7vw,38px);letter-spacing:-.8px}
 .setup-brand .setup-academy-logo{width:90px;max-width:27%}
}

/* Shared feedback pills and the game's original pixel display face. */
.timeout-penalties{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:16px}
.timeout-penalties .impact-pill{display:inline-block;border-radius:20px;padding:6px 10px;font:650 clamp(11px,2.5cqw,18px)/1.3 Onest,Arial,sans-serif;letter-spacing:0;white-space:nowrap;text-shadow:none}
.setup-brand h1,.initial-load #roundLoadTitle{font-family:Tiny5,monospace;font-weight:400;font-synthesis:none;letter-spacing:.5px;text-transform:uppercase}

/* Compact help text and uppercase HUD metric labels. */
.stat-help{font-size:11px}.stat-help b{font-size:13px}
.stat>span>i{text-transform:uppercase}

/* Final result: large character at left, compact summary and useful next steps. */
#shiftResult .result-sheet{max-width:1040px;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-areas:'logo logo' 'agent summary' 'agent course' 'agent action';gap:20px 32px;align-content:center}
#shiftResult .result-heading{display:contents;text-align:left}
#shiftResult .result-academy-logo{grid-area:logo;justify-self:end;width:150px;height:54px}
#shiftResult #resultAgent3d{grid-area:agent;width:100%;height:440px;align-self:center}
#shiftResult .result-heading-copy{grid-area:summary;display:block;width:100%;text-align:left}
#shiftResult .setup-kicker{font-size:24px;line-height:1.1}
#shiftResult .result-heading h1{font-size:34px;line-height:1.1;margin:8px 0 12px;text-wrap:balance}
#shiftResult .result-heading p{font-size:14px;line-height:1.45;margin:0;max-width:none}
#shiftResult .result-totals{justify-content:flex-start;margin-top:18px}
#shiftResult .result-score-card{gap:22px;padding:14px 22px;border-radius:16px}
#shiftResult .result-score b{font-size:52px}#shiftResult .result-score span{font-size:14px}
#shiftResult .result-stars{font-size:26px;letter-spacing:2px}
#shiftResult .result-course{grid-area:course;grid-template-columns:minmax(0,1fr) auto;gap:18px;margin:0;background:#d8eafe;border:1px solid #9bcde8;border-radius:14px;padding:18px}
#shiftResult .course-kicker{display:block;margin-bottom:8px;font:650 11px/1.3 Onest,Arial,sans-serif;color:#477291}
#shiftResult .result-course h2{font:700 17px/1.25 Onest,Arial,sans-serif;margin:0 0 8px}
#shiftResult .result-course p{font-size:13px;line-height:1.45}
#shiftResult .result-course a{min-width:110px;font-size:14px;padding:12px 16px}
#shiftResult .report-action{grid-area:action;text-align:left}
#shiftResult #requestReport{max-width:none;width:100%;min-height:44px;font-size:14px}
#requestReport:disabled{opacity:.55}
@media(max-width:700px){
 #shiftResult .result-sheet{grid-template-columns:1fr;grid-template-areas:'logo' 'summary' 'agent' 'course' 'action';gap:16px;align-content:start}
 #shiftResult .result-academy-logo{width:120px;height:43px}
 #shiftResult .result-heading h1{font-size:29px}#shiftResult .setup-kicker{font-size:22px}
 #shiftResult .result-heading p{font-size:13px}
 #shiftResult #resultAgent3d{width:220px;height:270px;justify-self:center}
 #shiftResult .result-score-card{flex-direction:row;gap:16px;padding:15px;width:100%}
 #shiftResult .result-score b{font-size:42px}#shiftResult .result-stars{font-size:22px;letter-spacing:0}
 #shiftResult .result-course{grid-template-columns:1fr;padding:16px;gap:12px}
 #shiftResult .result-course a{justify-self:stretch}
}

/* Intro copy appears only on the first game loading screen. */
.initial-load-features{display:none}
.initial-load .initial-load-features{display:grid;gap:13px;width:fit-content;max-width:100%;padding:0;margin:28px auto 30px;list-style:none;text-align:left}
.initial-load-features li{display:flex;gap:12px;align-items:baseline;font:500 16px/1.4 Onest,Arial,sans-serif;color:#074793}
.initial-load-features li:before{content:'✓';flex:none;color:#3cbfeb;font-size:22px;line-height:1}
@media(max-width:700px){.initial-load-features li{font-size:13px;gap:9px}.initial-load .initial-load-features{gap:11px;margin:22px auto}.initial-load .round-loader-card{padding:12px}.initial-load .loader-academy-logo{margin-bottom:28px}}
@media(max-height:580px){.initial-load .loader-academy-logo{margin-bottom:12px}.initial-load #roundLoadTitle{font-size:38px}.initial-load .initial-load-features{gap:6px;margin:16px auto}.initial-load-features li{font-size:13px}}

/* Completion label and smaller Academy logo share the same row. */
#shiftResult .result-topline{grid-area:logo;display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%}
#shiftResult .result-topline .setup-kicker{margin:0}
#shiftResult .result-academy-logo{width:120px;height:43px;flex:none}
@media(max-width:700px){#shiftResult .result-academy-logo{width:92px;height:33px}#shiftResult .result-topline{gap:12px}#shiftResult .result-topline .setup-kicker{font-size:21px}}