@font-face{font-family:Onest;src:url('./fonts/Onest.ttf') format('truetype');font-weight:100 900;font-display:swap}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{font-family:Onest,Arial,sans-serif;background:#103762;color:#f0f4ee}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f4ca78;outline-offset:3px}button:disabled{cursor:default}[hidden]{display:none!important}.game{height:100dvh;max-width:1680px;margin:auto;padding:20px 32px 12px;display:grid;grid-template-rows:44px 86px minmax(0,1fr) 28px;gap:14px}.topbar{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.brand-mark{position:relative;font-weight:900;font-size:42px;line-height:1;letter-spacing:-5px;color:#FFCB04}.brand-mark>span{font-size:24px;position:relative;top:-14px;left:4px}.brand-copy{font-size:10px;letter-spacing:2.5px;margin-left:8px;font-weight:800}.brand-copy small{display:block;font-size:8px;letter-spacing:1.4px;margin-top:6px;color:#8eacb8}.shift{display:flex;gap:10px;align-items:center;color:#c3cfd5;font-size:12px}.shift b{padding:7px 12px;background:#225485;border-radius:8px;margin-left:16px;color:#FFCB04;letter-spacing:2px}.shift i{font-style:normal;color:#8296a6}.live-dot{display:inline-block;width:6px;height:6px;background:#92c7a8;border-radius:50%}.icon-button{background:#225485;border:1px solid #457ba5;border-radius:50%;color:#cddbe1;width:33px;height:33px;font-size:22px}.hud{display:flex;align-items:center;gap:32px;padding:10px 24px 10px 12px;border:1px solid #396b97;background:#174775;border-radius:18px}.agent-info{display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:240px}.agent-portrait{position:relative;width:62px;height:62px;border:2px solid #FFCB04;border-radius:50%;padding:3px}.agent-portrait svg{display:block;width:100%;height:100%;border-radius:50%}.agent-emote{position:absolute;bottom:-3px;right:-5px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#FFCB04;color:#334653;font-size:13px}.agent-caption small{font-size:9px;letter-spacing:1.6px;color:#92a8b9}.agent-caption b{display:block;font-size:13px;font-weight:500;margin-top:5px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;flex:1;min-width:0}.stat{display:grid;grid-template-columns:1fr auto;gap:8px 5px}.stat>span{font-size:12px;color:var(--stat);white-space:nowrap}.stat i{font-size:10px;color:#b4c2cc;font-style:normal;margin-left:4px}.stat>b{font-size:12px;font-weight:600;white-space:nowrap}.stat>div{height:4px;background:#37688f;border-radius:5px;grid-column:1/-1;overflow:hidden}.stat em{display:block;height:100%;background:var(--stat);border-radius:5px;transition:width .65s}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:26px;min-height:0}.scene-panel{position:relative;overflow:hidden;background:#e3eff7;border-radius:23px;color:#315e80;min-height:0}.scene-top{position:absolute;top:24px;left:26px;right:24px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.scene-kicker{font-size:9px;letter-spacing:1.8px;color:#6d92ae;font-weight:700}h1{margin:8px 0 0;font-size:clamp(22px,2.4vw,35px);letter-spacing:-1px;font-weight:800}.location-pill{padding:8px 11px;border:1px solid #aac8dc;border-radius:20px;font-size:9px;white-space:nowrap}.location-pill>span{font-size:15px;margin-right:5px}.scene-bottom{position:absolute;bottom:22px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.person-tag{font-size:12px;background:#f3f8fc;border:1px solid #c5d9e7;padding:10px 13px;border-radius:10px;box-shadow:0 3px 0 #c5d9e7}.person-tag .live-dot{background:#7fada0;margin-right:6px}.person-tag small{font-size:10px;color:#7b9091;margin-left:5px}.scene-note{color:#789ab0;font-size:9px}#scene{position:absolute;inset:50px 0 0}#scene canvas{display:block;width:100%;height:100%}.thought{position:absolute;width:110px;height:82px;pointer-events:none;transform:translate(-10%,-100%);filter:drop-shadow(0 3px 0 #bacbc44d)}.thought svg{width:100%;height:100%}.phone{height:100%;min-height:0;border:5px solid #0f1b28;border-radius:37px;background:#f3f7fb;box-shadow:0 0 0 1px #465766,0 9px 0 #10202d;overflow:hidden;display:flex;flex-direction:column;color:#30434c}.phone-hardware{height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:9px;font-weight:700;position:relative}.phone-island{width:70px;height:17px;border-radius:20px;background:#142230;position:absolute;left:50%;transform:translateX(-50%);top:3px}.phone-header{display:flex;align-items:center;gap:9px;padding:10px 17px;border-bottom:1px solid #cbdcea;flex-shrink:0;background:#e5eff8}.contact-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#bbd9eb;color:#326d94;font-size:15px;font-weight:700}.phone-header b{font-size:13px}.phone-header small{display:block;font-size:9px;color:#819490;margin-top:3px}.call-icon{margin-left:auto;border:1px solid #bccdc5;color:#6d8f83;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:16px}.phone-content{display:flex;flex-direction:column;gap:11px;padding:10px 15px 6px;min-height:0;flex:1}.chat-day{text-align:center;font-size:8px;letter-spacing:1.3px;color:#92a39e}.incoming{background:white;border:1px solid #dce8f1;border-radius:13px 13px 13px 3px;padding:12px 13px 6px;font-size:12px;line-height:1.5;box-shadow:0 2px 0 #dae7f1}.incoming p{margin:0 0 6px}.incoming>span{font-size:8px;color:#97a79e;text-align:right;display:block}.incoming strong{font-weight:700;color:#ac7037}.decision-head{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:auto;min-height:26px;flex-shrink:0}.decision-head>span:first-child{font-size:10px;font-weight:700;color:#7d8b87}.timer{display:flex;gap:4px;align-items:center;color:#356f99;padding:4px 7px;border-radius:8px;background:#e0edf8}.timer svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}.timer b{font-size:14px;font-variant-numeric:tabular-nums}.timer small{font-size:9px}.timer.urgent{background:#fbe0d8;color:#b7473b}.answers{display:grid;gap:7px}.answer{border:1px solid #c7dbeb;background:#e7f1f9;border-radius:11px;display:flex;align-items:center;text-align:left;gap:9px;min-height:57px;padding:9px 10px;color:#305c7e;transition:background .15s,transform .15s,border-color .15s}.answer>span{font-size:9px;color:#86998d}.answer p{font-size:11px;line-height:1.35;font-weight:650;margin:0;flex:1}.answer small{display:block;font-size:10px;font-weight:400;color:#66849b;margin-top:3px}.answer i{font-size:14px;font-style:normal;color:#86998d}.answer:hover:not(:disabled){background:#d5eafa;border-color:#76acd0;transform:translateX(-2px)}.answer:disabled{opacity:.55}.primary{border:0;border-radius:10px;background:#FFCB04;color:#39433b;min-height:39px;width:100%;font-weight:700;font-size:11px;padding:10px}.primary:hover{background:#F7A712}.primary:disabled{opacity:.55}.phone-footnote{text-align:center;font-size:8px;color:#95a095;line-height:1.3}.phone-home{width:88px;height:4px;flex-shrink:0;border-radius:8px;background:#174775;margin:7px auto}.footer{display:flex;justify-content:space-between;align-items:center;color:#7f99aa;font-size:9px;letter-spacing:.6px}.footer i{font-style:normal;color:#b9d5e9;margin:0 8px}.footer button{background:none;border:0;padding:5px;color:#b9d5e9;font-size:10px}.footer button>span{margin-left:6px}.feedback{border-radius:14px;background:#e1f1f8;padding:13px;min-height:0}.feedback>span{font-size:8px;letter-spacing:1.5px;color:#4884a4}.feedback h2{font-size:19px;line-height:1.1;margin:9px 0;color:#246b94}.feedback p{font-size:11px;line-height:1.5;margin:0 0 10px}.feedback.risk{background:#f5e5dc}.feedback.risk h2{color:#a65b47}.feedback.acceptable{background:#f3ecda}.feedback.acceptable h2{color:#8f7949}#feedbackDelta{font-size:9px;line-height:1.5;margin-bottom:12px;color:#708575}.feedback.risk #feedbackDelta{color:#9d665c}.feedback .primary{font-size:10px}.phone.has-feedback .incoming{font-size:10px;padding:8px 10px}.phone.has-feedback .incoming p{margin-bottom:4px}.phone.has-feedback .decision-head{margin-top:0}.timeout-overlay{position:fixed;inset:0;background:linear-gradient(0deg,#621a26e8,#a43139b5 48%,#501825da);z-index:100;display:grid;place-items:center;backdrop-filter:saturate(.15) blur(3px);animation:red-in .28s ease-out}.timeout-content{text-align:center;width:100%;padding:28px;background:linear-gradient(90deg,transparent,#300c2055 25%,#300c2055 75%,transparent)}.timeout-code{font-size:10px;font-weight:700;letter-spacing:4px;color:#edb7af}.timeout-content h2{font-weight:950;font-size:clamp(38px,8.4vw,110px);letter-spacing:-2px;color:#fff0d9;margin:16px 0 8px;text-shadow:0 5px 0 #64282a}.timeout-content p{color:#f1cfc6;font-size:15px;margin:0 0 22px}.timeout-penalty{display:block;font-size:10px;letter-spacing:2px;color:#e6a89e}.timeout-content button{display:inline-flex;gap:32px;align-items:center;margin-top:32px;border:1px solid #eab9a68c;background:#fff0d9;color:#813b39;border-radius:9px;padding:14px 22px;font-size:12px;font-weight:700}.timeout-content button span{font-size:19px}.agent-portrait[data-mood=happy]{border-color:#a3d7ac}.agent-portrait[data-mood=sad]{border-color:#ed9694}.agent-portrait[data-mood=sad] .agent-emote{background:#ed9694}.agent-portrait[data-mood=happy] .agent-emote{background:#a3d7ac}#sceneError{position:absolute;inset:40% 20px auto;text-align:center;background:#fff4d8;padding:20px;border-radius:12px;font-size:13px}.portrait-eyes{transform-origin:40px 40px;animation:blink 5.7s infinite}@keyframes blink{0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.08)}}@keyframes red-in{from{opacity:0}to{opacity:1}}
@media(min-width:1000px) and (max-height:800px){.game{padding-top:10px;gap:9px;grid-template-rows:34px 68px minmax(0,1fr) 23px}.agent-portrait{width:50px;height:50px}.phone-content{gap:7px;padding-top:7px}.phone-header{padding:6px 14px}.phone-hardware{height:23px}.incoming{font-size:11px;line-height:1.4;padding:8px 11px 5px}.answer{min-height:48px;padding:7px 9px}.phone-home{margin:5px auto}.phone-footnote{font-size:7px}.primary{min-height:32px;padding:8px}.scene-top{top:20px}.feedback h2{font-size:17px;margin:6px 0}.feedback p{font-size:10px}.feedback{padding:10px}}
@media(max-width:1050px){.game{padding-left:18px;padding-right:18px}.hud{gap:15px}.stats{gap:16px}.agent-info{min-width:180px}.agent-caption b{font-size:11px}.stat i{font-size:9px}.play-layout{gap:18px;grid-template-columns:minmax(0,1fr) 320px}.location-pill,.scene-note{display:none}}
@media(max-width:700px) and (orientation:portrait){.game{padding:8px 10px max(5px,env(safe-area-inset-bottom));gap:7px;grid-template-rows:28px 56px minmax(0,1fr) 18px}.topbar{padding:0 3px}.brand-mark{font-size:28px}.brand-mark>span{font-size:16px;top:-9px}.brand-copy{font-size:8px;letter-spacing:1.3px;margin-left:3px}.brand-copy small{display:none}.shift{font-size:9px;gap:6px}.shift b{padding:5px 7px;margin-left:2px;font-size:9px}.icon-button{width:27px;height:27px;font-size:19px}.hud{padding:5px 9px 5px 5px;gap:12px;border-radius:13px}.agent-info{min-width:0}.agent-portrait{width:43px;height:43px;padding:2px}.agent-emote{width:17px;height:17px;font-size:10px}.agent-caption{display:none}.stats{gap:10px}.stat{grid-template-columns:1fr;gap:3px}.stat>span{font-size:9px}.stat i{font-size:7px;margin-left:2px}.stat>b{font-size:10px}.stat>div{height:3px}.play-layout{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(145px,.7fr) minmax(0,1.3fr);gap:7px}.scene-panel{border-radius:15px}.scene-top{top:10px;left:14px;right:14px}.scene-kicker{font-size:7px;letter-spacing:1px}h1{font-size:20px;margin-top:4px;letter-spacing:-.6px}.scene-bottom{left:12px;bottom:9px;right:12px}.person-tag{font-size:9px;padding:5px 7px;border-radius:6px;box-shadow:none}.person-tag small{font-size:8px}.scene-bottom .live-dot{width:4px;height:4px;margin-right:3px}#scene{inset:16px -12px -10px}.thought{width:74px;height:58px}.phone{border-width:3px;border-radius:19px;box-shadow:none}.phone-hardware,.phone-home{display:none}.phone-header{padding:5px 11px;gap:7px}.contact-avatar{width:24px;height:24px;font-size:11px;border-radius:8px}.phone-header b{font-size:11px}.phone-header small{font-size:8px;display:inline;margin-left:7px}.call-icon{width:22px;height:22px;font-size:12px}.phone-content{padding:7px 10px 6px;gap:6px}.chat-day{display:none}.incoming{font-size:11px;line-height:1.3;padding:8px 10px 5px;flex-shrink:0}.incoming p{display:inline;margin:0}.incoming p+p:before{content:' '}.incoming>span{display:none}.decision-head{min-height:21px;margin-top:auto}.decision-head>span:first-child{font-size:9px}.timer{padding:3px 6px}.timer b{font-size:12px}.timer small{font-size:8px}.timer svg{width:12px;height:12px}.answers{gap:5px}.answer{min-height:38px;padding:6px 9px;border-radius:8px;gap:8px}.answer p{font-size:10px}.answer small{font-size:9px;display:inline;margin-left:4px;margin-top:0}.answer>span{font-size:8px}.answer i{font-size:11px}.primary{min-height:29px;font-size:10px;padding:7px;border-radius:8px}.phone-footnote{font-size:7px}.footer{font-size:7px;letter-spacing:0}.footer button{font-size:8px;padding:2px}.footer i{margin:0 3px}.feedback{padding:9px 11px}.feedback h2{font-size:17px;margin:5px 0}.feedback p{font-size:10px;margin-bottom:6px;line-height:1.4}.feedback>span{font-size:7px}.feedback #feedbackDelta{font-size:8px;margin-bottom:6px}.phone.has-feedback .incoming{font-size:10px;padding:6px 9px}.timeout-content{padding:20px 12px}.timeout-code{font-size:8px;letter-spacing:2px}.timeout-content h2{letter-spacing:-1.5px}.timeout-content p{font-size:12px}}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){.game{grid-template-rows:24px 48px minmax(0,1fr) 15px;gap:5px;padding-top:5px}.agent-portrait{width:37px;height:37px}.play-layout{grid-template-rows:minmax(125px,.57fr) minmax(0,1.43fr);gap:5px}.phone-content{gap:4px;padding:5px 8px}.incoming{font-size:10px;padding:6px 8px}.answer{min-height:34px;padding:5px 7px}.answer p{font-size:9px}.answer small{font-size:8px}.phone-header{padding:4px 9px}.phone-footnote{font-size:6px}.primary{min-height:26px;padding:6px}.decision-head{min-height:20px}.scene-kicker{font-size:6px}h1{font-size:17px}.scene-top{top:8px}.thought{width:65px;height:50px}}
@media(orientation:landscape) and (max-height:550px){.game{padding:6px 12px;gap:5px;grid-template-rows:43px minmax(0,1fr) 15px}.topbar{display:none}.hud{padding:3px 10px;gap:12px;border-radius:11px}.agent-info{min-width:120px;gap:7px}.agent-portrait{width:34px;height:34px;padding:2px}.agent-caption small{font-size:6px}.agent-caption b{font-size:8px;margin-top:3px}.agent-emote{width:14px;height:14px;font-size:9px}.stats{gap:18px}.stat{gap:4px}.stat>span,.stat>b{font-size:9px}.stat i{font-size:7px}.play-layout{grid-template-columns:minmax(0,1fr) 330px;gap:10px}.scene-panel{border-radius:14px}.scene-top{top:11px;left:15px}.scene-kicker{font-size:7px}h1{font-size:21px;margin-top:4px}.scene-bottom{bottom:10px;left:14px}.person-tag{font-size:9px;padding:6px}.person-tag small{font-size:8px}#scene{inset:18px 0 -10px}.thought{width:73px;height:55px}.phone{border-radius:16px;border-width:3px;box-shadow:none}.phone-hardware,.phone-home,.chat-day,.phone-footnote{display:none}.phone-header{padding:4px 10px}.phone-header b{font-size:10px}.phone-header small{display:inline;font-size:8px;margin-left:8px}.contact-avatar{width:23px;height:23px;font-size:11px;border-radius:7px}.call-icon{width:20px;height:20px}.phone-content{padding:5px 9px;gap:4px}.incoming{font-size:9px;line-height:1.3;padding:6px 8px}.incoming p{display:inline}.incoming p+p:before{content:' '}.incoming>span{display:none}.decision-head{margin-top:auto;min-height:21px}.decision-head>span:first-child{font-size:8px}.timer{padding:2px 5px}.timer b{font-size:11px}.timer small{font-size:7px}.timer svg{width:12px;height:12px}.answers{gap:4px}.answer{min-height:31px;padding:5px 7px;border-radius:7px}.answer p{font-size:9px}.answer small{font-size:8px;display:inline;margin-left:3px}.answer>span{font-size:8px}.primary{min-height:25px;padding:6px;font-size:9px}.footer,.footer button{font-size:7px}.feedback{padding:8px 10px}.feedback h2{font-size:15px;margin:4px 0}.feedback p{font-size:9px;line-height:1.3;margin-bottom:5px}.feedback>span{font-size:7px}.feedback #feedbackDelta{font-size:8px;margin-bottom:6px}.phone.has-feedback .incoming{font-size:9px}}
@media(max-width:700px) and (orientation:portrait) and (min-height:741px){.answer{min-height:46px}.answer p{font-size:11px}.answer small{font-size:10px}.incoming{font-size:12px;line-height:1.4}.primary{min-height:34px;font-size:11px}.phone-content{gap:8px}.phone-footnote{font-size:8px}.decision-head>span:first-child{font-size:10px}}
@font-face{font-family:Handjet;src:url('./fonts/Handjet.ttf') format('truetype');font-weight:100 900;font-display:swap}
h1{font-family:Handjet,Onest,sans-serif;font-weight:700;font-variation-settings:'ELGR' 2,'ELSH' 2;font-size:clamp(30px,3.2vw,48px);letter-spacing:.3px}
@media(max-width:700px) and (orientation:portrait){h1{font-size:28px}}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){h1{font-size:24px}}
@media(orientation:landscape) and (max-height:550px){h1{font-size:27px}}
.thought{width:154px;height:114px}
@media(max-width:700px) and (orientation:portrait){.thought{width:105px;height:80px}}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){.thought{width:92px;height:70px}}
@media(orientation:landscape) and (max-height:550px){.thought{width:100px;height:76px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Phone is the primary reading and decision area; scene stays muted. */
.phone{background:#F3F9FF;color:#313140;border-color:#074793;box-shadow:0 0 0 1px #3CBFEB,0 9px 0 #082e57}
.phone-header{background:#074793;border-bottom-color:#0079BF;color:white}
.phone-header small{color:#fff}.call-icon{color:white;border-color:#3CBFEB}
.contact-avatar{border-radius:50%;overflow:hidden;flex-shrink:0;background:#D8EAFE}
.contact-avatar img{width:100%;height:100%;object-fit:cover;object-position:center}
.chat-day,.phone-footnote{color:#52657a}.incoming{background:#fff;border-color:#0079BF;box-shadow:0 2px 0 #D8EAFE;color:#313140}
.incoming strong{color:#074793;background:#FFE666;border-radius:3px;padding:0 2px}.incoming>span{color:#52657a}
.decision-head>span:first-child{color:#074793}.timer{background:#FFCB04;color:#313140}
.answer{background:#074793;border-color:#074793;color:#fff}.answer small,.answer>span,.answer i{color:#fff}
.answer:hover:not(:disabled){background:#0079BF;border-color:#0079BF}.answer:disabled{opacity:1;background:#D8EAFE;border-color:#0079BF;color:#074793}
.answer:disabled small,.answer:disabled>span,.answer:disabled i{color:#074793}
.answer:focus-visible{outline:3px solid #F7A712;outline-offset:2px}.primary{color:#313140}

.agent-portrait{cursor:pointer}.agent-portrait:focus-visible{outline:3px solid #FFCB04;outline-offset:4px}
.agent-setup{width:min(430px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:2px solid #3CBFEB;border-radius:24px;background:#F3F9FF;color:#313140;padding:28px;font-family:Onest,Arial,sans-serif}
.agent-setup::backdrop{background:#082e57c9;backdrop-filter:blur(5px)}.agent-setup form{display:grid;gap:10px}.setup-kicker{font-size:10px;letter-spacing:1.5px;color:#074793;font-weight:700}.agent-setup h2{margin:3px 0;font-size:27px;color:#074793}.agent-setup p{font-size:13px;margin:0 0 8px}.agent-setup label,.avatar-label{font-size:12px;font-weight:650}.agent-setup input,.agent-setup select{font:16px Onest,Arial,sans-serif;width:100%;border:1px solid #0079BF;border-radius:9px;padding:10px;background:white;color:#313140}.avatar-choices{display:flex;gap:16px;margin:0 0 8px}.avatar-option{border:3px solid transparent;padding:3px;border-radius:50%;background:#D8EAFE;width:78px;height:78px}.avatar-option svg{display:block;width:100%;height:100%;border-radius:50%}.avatar-option[aria-pressed=true]{border-color:#074793;background:#FFCB04}.agent-setup small{font-size:10px;color:#52657a;text-align:center}.agent-setup .primary{font-size:13px}.agent-caption small{display:block;max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:1051px) and (min-height:801px){.incoming{font-size:14px}.answer p{font-size:13px}.answer small{font-size:12px}.phone-header b{font-size:15px}.phone-header small{font-size:11px}.decision-head>span:first-child{font-size:12px}.answer{min-height:62px}}
@media(max-height:600px){.agent-setup{padding:16px}.agent-setup form{gap:6px}.agent-setup h2{font-size:21px}.avatar-option{width:52px;height:52px}.agent-setup p{margin:0}.agent-setup input,.agent-setup select{padding:6px}.avatar-choices{margin:0;gap:12px}}
/* White phone shell, dark display, bright conversation and answer cards. */
.phone{border-color:#fff;background:#102c4c;color:white;box-shadow:0 0 0 1px #ffffff66,0 9px 0 #082644}
.phone-hardware,.phone-header{background:#102c4c;color:#fff}.phone-header{border-bottom-color:#315b82}.phone-island{background:#071b31}.phone-home{background:#fff;margin:7px auto 10px}
.chat-day,.phone-footnote{color:#c1d5e8}.decision-head>span:first-child{color:#fff}
.answer,.answer:disabled{background:#D8EAFE;border-color:#3CBFEB;color:#074793;opacity:1}
.answer small,.answer>span,.answer i,.answer:disabled small,.answer:disabled>span,.answer:disabled i{color:#074793}
.answer:hover:not(:disabled){background:#fff;border-color:#FFCB04}.feedback{color:#313140}
.stat{position:relative;cursor:pointer}.stat:focus-visible{outline:2px solid #FFCB04;outline-offset:5px}.stat-phrase{grid-column:1/-1;color:#d2e3f3;font-size:9px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
.stat-help{position:fixed;z-index:50;width:min(290px,calc(100vw - 24px));padding:14px 16px;border:1px solid #3CBFEB;border-radius:12px;background:#fff;color:#313140;box-shadow:0 8px 30px #071b3144;font-size:12px;line-height:1.45}.stat-help b{display:block;color:#074793;font-size:14px;margin-bottom:5px}.stat-help p{margin:0}.stat-help small{display:block;margin-top:8px;color:#52657a}
@media(max-width:1050px){.stat-phrase{display:none}}
@media(min-width:1000px) and (max-height:800px){.stat{gap:5px}.stat-phrase{font-size:8px}}

@font-face{font-family:Tiny5;src:url("./fonts/Tiny5-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
/* Bright answer buttons; the submitted answer remains visible as a white card. */
.answer,.answer:disabled{background:#236DFA;border-color:#236DFA;color:#fff}
.answer small,.answer>span,.answer i,.answer:disabled small,.answer:disabled>span,.answer:disabled i{color:#fff}
.answer:hover:not(:disabled){background:#0079BF;border-color:#3CBFEB}
.answer.selected:disabled{background:#fff;border-color:#fff;color:#074793}
.answer.selected:disabled small,.answer.selected:disabled>span,.answer.selected:disabled i{color:#074793}
.phone.has-feedback .answers{flex-shrink:0}
@media(max-width:700px) and (orientation:portrait) and (max-height:740px){.phone.has-feedback .incoming{display:none}}
@media(orientation:landscape) and (max-height:550px){.phone.has-feedback .incoming{display:none}}
/* Result lives above the game, independently of the phone layout. */
#feedback{position:fixed;width:min(490px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;margin:auto;border:2px solid #3CBFEB;border-radius:22px;padding:30px;color:#313140;background:#F3F9FF;box-shadow:0 16px 60px #071b3166}
#feedback::backdrop{background:#0826449e}
#feedback h2{font-family:Onest,Arial,sans-serif;font-size:25px;line-height:1.2;margin:14px 0;color:#074793;padding-right:10px}
#feedback>span{font-size:10px;font-weight:700;letter-spacing:1.2px}#feedback p{font-size:15px;line-height:1.55;margin:0 0 18px}#feedbackDelta{font-size:12px;margin-bottom:20px}#feedback .primary{font-size:13px;min-height:42px}
#feedback.risk{background:#FFF6D4;border-color:#F7A712}#feedback.risk h2{color:#89491c}#feedback.acceptable{background:#F3F9FF}
.feedback-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#074793;font-size:26px;padding:0 8px}
.phone.has-feedback .incoming{display:block;font-size:inherit}.phone.has-feedback .incoming{font-size:12px}.phone.has-feedback .decision-head{margin-top:auto}
@media(max-height:500px){#feedback{padding:18px 24px}#feedback h2{font-size:21px;margin:8px 0}#feedback p{font-size:13px;margin-bottom:10px}#feedbackDelta{margin-bottom:12px}}
@media(max-width:700px){#reviewAnswer{font-size:7px}.phone.has-feedback .incoming{font-size:10px}}

#feedback .next-step{border-left:3px solid #0079BF;padding:10px 12px;background:#D8EAFE;margin:0 0 18px;border-radius:0 8px 8px 0}#feedback .next-step b{font-size:12px;color:#074793}#feedback .next-step p{font-size:12px;line-height:1.5;margin:5px 0 0}
@media(max-height:700px){#feedback{padding:20px}#feedback h2{font-size:21px;margin:10px 0}#feedback p{font-size:13px;margin-bottom:12px}#feedback .next-step{padding:8px 10px;margin-bottom:12px}}

.incoming{box-shadow:none}

@media(orientation:landscape) and (max-height:500px){#feedback{width:min(620px,calc(100vw - 28px));padding:16px 22px}#feedback .next-step{margin-bottom:10px}#feedback h2{margin:7px 0}}
.phone{position:relative}.phone.countdown-critical:after{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;background:#FB4242;animation:phone-countdown-flash 1s steps(1,end) infinite}
@keyframes phone-countdown-flash{0%,24%{opacity:.25}25%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.phone.countdown-critical:after{animation:none!important;opacity:.12}}

.scene-panel{container-type:inline-size}.scene-panel .timeout-overlay{position:absolute;inset:0;z-index:10;border-radius:inherit}
.scene-panel .timeout-content{padding:18px 12px}.scene-panel .timeout-content h2{font-size:clamp(24px,8cqw,82px);letter-spacing:-1px;margin:14px 0 10px}.scene-panel .timeout-code{font-size:clamp(7px,1.1cqw,10px);letter-spacing:2px}.scene-panel .timeout-content p{font-size:clamp(10px,1.8cqw,15px);margin-bottom:14px}.scene-panel .timeout-content button{margin-top:20px;padding:11px 18px}.scene-panel .timeout-penalty{font-size:9px}
@media(max-width:700px) and (orientation:portrait){.scene-panel .timeout-content{padding:8px}.scene-panel .timeout-content h2{font-size:28px;margin:6px 0;text-shadow:0 2px 0 #64282a}.scene-panel .timeout-content p{margin:0 0 6px;font-size:10px}.scene-panel .timeout-content button{margin-top:8px;padding:5px 12px;font-size:10px}.scene-panel .timeout-content button span{font-size:13px}.scene-panel .timeout-penalty{font-size:7px;letter-spacing:1px}.scene-panel .timeout-code{font-size:6px}}

/* Feedback is confined to the tourist scene, never the browser top layer. */
.scene-panel #feedback{position:absolute;inset:14px;margin:auto;width:calc(100% - 28px);max-width:570px;height:fit-content;max-height:calc(100% - 28px);z-index:9;overflow:auto;box-shadow:0 8px 30px #08264433}
@media(max-width:700px) and (orientation:portrait){.scene-panel:has(#feedback:not([hidden])) .scene-top,.scene-panel:has(#feedback:not([hidden])) .scene-bottom{visibility:hidden}.scene-panel #feedback{inset:5px;width:calc(100% - 10px);max-height:calc(100% - 10px);padding:12px;border-radius:12px}.scene-panel #feedback>span{font-size:8px;letter-spacing:.5px}.scene-panel #feedback h2{font-size:17px;margin:5px 16px 6px 0}.scene-panel #feedback p{font-size:11px;line-height:1.4;margin-bottom:8px}.scene-panel #feedbackDelta{font-size:10px;margin-bottom:8px}.scene-panel #feedback .next-step{padding:7px 9px;margin-bottom:8px}.scene-panel #feedback .next-step b,.scene-panel #feedback .next-step p{font-size:10px}.scene-panel #feedback .primary{font-size:11px;min-height:30px;padding:7px}}

.sent-reply{align-self:flex-end;width:94%;background:#fff;color:#074793;border-radius:13px 13px 3px 13px;padding:12px 13px;flex-shrink:0}.sent-message{font-size:13px;font-weight:650;line-height:1.4}.sent-message small{display:block;font:inherit;font-weight:400;margin-top:3px}.sent-receipt{display:block;text-align:right;font-size:9px;color:#52657a;margin-top:8px}#nextSituation{margin-top:auto;flex-shrink:0}
@media(max-width:700px), (max-height:550px){.sent-reply{padding:8px 10px}.sent-message{font-size:11px}.sent-receipt{font-size:8px;margin-top:5px}}

#feedback #againButton{min-height:56px;font-size:17px;padding:15px 20px;font-weight:750}#nextSituation{min-height:48px;font-size:15px;font-weight:750}.editable-agent-face{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:cover;border-radius:50%;background:#D8EAFE}.agent-emote{z-index:2}
@media(max-height:550px){#feedback #againButton{min-height:44px;font-size:15px;padding:11px}#nextSituation{min-height:38px;font-size:13px}}

.editable-agent-face{object-fit:contain}

/* Result text at left; a closer view of the tourist at right. */
.scene-panel:has(#feedback:not([hidden])) #scene{left:59%;right:0;top:100px;bottom:0}
.scene-panel:has(#feedback:not([hidden])) #feedback{left:20px;right:auto;top:110px;bottom:20px;width:calc(57% - 20px);max-width:none;max-height:calc(100% - 130px);margin:auto 0;padding:22px}
.scene-panel:has(#feedback:not([hidden])) #feedback h2{font-size:clamp(18px,2.6cqw,27px);padding-right:14px}
.scene-panel:has(#feedback:not([hidden])) #feedback p{font-size:14px}
@media(max-width:700px) and (orientation:portrait){.scene-panel:has(#feedback:not([hidden])) #scene{left:66%;top:0}.scene-panel:has(#feedback:not([hidden])) #feedback{left:5px;top:5px;bottom:5px;width:calc(65% - 5px);max-height:calc(100% - 10px);padding:10px}.scene-panel:has(#feedback:not([hidden])) #feedback h2{font-size:15px;margin:4px 10px 7px 0}.scene-panel:has(#feedback:not([hidden])) #feedback p{font-size:11px}.scene-panel:has(#feedback:not([hidden])) #againButton{min-height:42px;padding:9px;font-size:12px}.scene-panel:has(#feedback:not([hidden])) .thought{width:68px;height:52px}}
@media(orientation:landscape) and (max-height:550px){.scene-panel:has(#feedback:not([hidden])) #scene{left:65%;top:0}.scene-panel:has(#feedback:not([hidden])) #feedback{left:5px;top:5px;bottom:5px;width:calc(64% - 5px);max-height:calc(100% - 10px);padding:10px}.scene-panel:has(#feedback:not([hidden])) .scene-top{visibility:hidden}}
.stat-help{padding-right:34px}.stat-help-close{position:absolute;right:6px;top:5px;border:0;background:transparent;color:#074793;font-size:23px;line-height:1;padding:3px 6px}
.stat>.stat-change{position:absolute;right:0;top:-17px;z-index:5;padding:3px 7px;border-radius:7px;font:750 13px Onest,Arial,sans-serif;line-height:1.1;pointer-events:none;box-shadow:0 2px 8px #08264444;animation:stat-delta 2s ease-out forwards}
.stat>.stat-change.gain{background:#bce8cb;color:#155c35}.stat>.stat-change.loss{background:#ffc3b5;color:#872d27}
@keyframes stat-delta{0%{opacity:0;transform:translateY(9px) scale(.85)}12%,70%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-9px)}}
@media(max-width:700px){.stat>.stat-change{top:-8px;font-size:10px;padding:3px 4px}}

/* Flat pixel timeout treatment, matching the game art. */
.scene-panel .timeout-overlay{background:rgb(164 39 48 / 78%);backdrop-filter:none;box-shadow:none}
.scene-panel .timeout-content{background:transparent;box-shadow:none}
.scene-panel .timeout-content h2{font-family:Tiny5,monospace;font-weight:400;font-synthesis:none;letter-spacing:1px;text-shadow:none;color:#fff;font-size:clamp(26px,9cqw,92px)}
.scene-panel .timeout-code,.scene-panel .timeout-content p,.scene-panel .timeout-penalty{color:#fff;text-shadow:none}
@media(max-width:700px) and (orientation:portrait){.scene-panel .timeout-content h2{font-size:clamp(26px,9cqw,38px);text-shadow:none}}
.thought{height:auto!important;aspect-ratio:124/105;filter:none}.thought svg{display:block}

.phone.message-pending .incoming{display:none}.typing-indicator{display:flex;align-items:center;gap:5px;background:#D8EAFE;border-radius:12px 12px 12px 3px;width:58px;height:34px;padding:10px 13px;flex-shrink:0}.typing-indicator i{width:6px;height:6px;background:#074793;border-radius:50%;animation:typing-dot 1s ease-in-out infinite}.typing-indicator i:nth-child(2){animation-delay:.16s}.typing-indicator i:nth-child(3){animation-delay:.32s}
.message-arrived{animation:message-arrival .4s ease-out both}.answers-arrived{animation:message-arrival .3s ease-out both}
@keyframes message-arrival{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes typing-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Faceted result panel: shallow cut corners, independent of thought-bubble geometry. */
.scene-panel #feedback{--panel-edge:#3CBFEB;--panel-light:#DFF5FF;--panel-low:#B7E4F5;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:polygon(18px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 20px),calc(100% - 20px) 100%,10px 100%,0 calc(100% - 10px),0 18px);isolation:isolate}
.scene-panel #feedback::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:var(--panel-light);clip-path:polygon(18px 0,calc(100% - 10px) 0,100% 10px,23px 10px,10px 23px,10px calc(100% - 10px),0 calc(100% - 10px),0 18px)}
.scene-panel #feedback::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:var(--panel-low);clip-path:polygon(100% 10px,100% calc(100% - 20px),calc(100% - 20px) 100%,10px 100%,0 calc(100% - 10px),calc(100% - 24px) calc(100% - 10px),calc(100% - 8px) calc(100% - 26px),calc(100% - 8px) 10px)}
.scene-panel #feedback.risk{--panel-light:#FFF0B2;--panel-low:#FFD36F}
.scene-panel #feedback .feedback-close{top:12px;right:12px}
#feedbackDelta{display:flex;flex-wrap:wrap;gap:7px}#feedbackDelta .impact-pill{display:inline-block;border-radius:20px;padding:6px 10px;font-size:12px;font-weight:650;line-height:1.3}.impact-pill.positive{background:#D1F1DC;color:#17653B}.impact-pill.negative{background:#FFE0DB;color:#A22D28}
#feedback .growth-block{border-left:3px solid #3CBFEB;padding:8px 12px;margin-bottom:18px;background:#E4F4FC}#feedback .growth-block b{font-size:11px;color:#074793}#feedback .growth-block p,#feedback #impactExplanation{font-size:12px;line-height:1.45;margin:6px 0 0}#feedback #impactExplanation{margin:0 0 12px}

.answers-arrived{animation:none}
.answers-arrived>.answer{animation:answer-cascade .3s ease-out both}
.answers-arrived>.answer:nth-child(2){animation-delay:.14s}
.answers-arrived>.answer:nth-child(3){animation-delay:.28s}
@keyframes answer-cascade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.scene-panel #feedback[data-answer="0"]:not(.risk):not(.acceptable) #feedbackTitle{display:table;background:#D1F1DC;color:#17653B;border-radius:12px;padding:9px 14px;margin-top:10px;max-width:calc(100% - 28px)}
/* Results contain explanations only; navigation stays in the phone. */
.scene-panel:has(#feedback:not([hidden])) #feedback{padding:20px}
.scene-panel:has(#feedback:not([hidden])) #feedback h2{font-size:22px;margin:8px 28px 12px 0}
.scene-panel:has(#feedback:not([hidden])) #feedback p{font-size:12px;line-height:1.45;margin-bottom:12px}
.scene-panel #feedback #feedbackDelta{margin-bottom:12px;gap:6px}.scene-panel #feedback .impact-pill{font-size:11px;padding:5px 9px}
.scene-panel #feedback .growth-block{padding:8px 10px;margin-bottom:0}.scene-panel #feedback .growth-block p{font-size:11px;margin:5px 0 0}.scene-panel #feedback #impactExplanation{font-size:11px;margin-bottom:12px}
@media(max-width:700px) and (orientation:portrait){.scene-panel:has(#feedback:not([hidden])) #feedback{padding:10px}.scene-panel:has(#feedback:not([hidden])) #feedback h2{font-size:15px}.scene-panel:has(#feedback:not([hidden])) #feedback p{font-size:11px}}