@font-face{font-family:Corpid;src:url('../assets/My Collection/CorpidOffice Bold.ttf')}
@font-face{font-family:Matisse;src:url('../assets/My Collection/Fonts/MatissePro B.otf')}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#03101d;color:#fff}
body{font-family:Corpid,Arial,sans-serif;background:linear-gradient(#2b1722c7,#090711f2),url('../assets/My Collection/my_room_background_1.webp') center/cover fixed}
button,a{font:inherit}
.trial-shell{min-height:100vh;display:grid;grid-template-rows:90px 1fr 45px;padding:14px 28px}
header{display:grid;grid-template-columns:220px 1fr 250px;align-items:center;padding:9px 22px;background:linear-gradient(#f1f8fa,#a9c7d1 70%,#4b7182);border:2px solid #e9d27d;color:#123a55;box-shadow:0 8px 24px #0009}
header>a{justify-self:start;padding:12px 18px;background:linear-gradient(#1780ad,#084969);border:2px solid #d8f6fb;color:#fff;text-decoration:none}
header>div{text-align:center}
header small{color:#137fa6;letter-spacing:.25em}
header h1{margin:5px 0 0;font:32px Matisse,serif;letter-spacing:.06em}
header aside{justify-self:end;display:grid;grid-template-columns:52px 1fr;grid-template-rows:1fr 1fr;align-items:center;min-width:215px;padding:7px 13px;background:#eff7f8;border:2px solid #638ba0}
header aside img{grid-row:1/3;width:46px;height:46px;image-rendering:pixelated}
header aside span{font-size:9px;letter-spacing:.15em;color:#32738d}
header aside b{font-size:22px}
.trial-stage{position:relative;align-self:center;width:min(1320px,94vw);height:min(720px,calc(100vh - 175px));min-height:590px;margin:auto;display:grid;grid-template-columns:390px 1fr;gap:28px;padding:38px;background:linear-gradient(135deg,#392431ed,#17111bef);border:3px solid #e4cf82;box-shadow:0 18px 55px #000c,inset 0 0 60px #e29b8e24;overflow:hidden}
.trial-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 42%,#ffd3bb2b,transparent 31%),repeating-linear-gradient(90deg,transparent 0 79px,#f5c9ac0b 80px)}
.kiara-presence{position:relative;z-index:1;display:grid;place-items:center;align-content:center}
.host-portrait{position:relative;z-index:2;width:350px;height:350px;overflow:hidden;border:4px solid #e5d386;box-shadow:0 0 0 6px #704653,0 18px 35px #000b;background:linear-gradient(#fff4ea,#dba899)}
.host-portrait img{position:absolute;left:50%;top:-8px;width:720px;height:auto;max-width:none;transform:translateX(-50%)}
.portrait-ring{position:absolute;width:370px;height:370px;border:2px solid #ffc8ad;border-radius:50%;box-shadow:0 0 35px #ffb49fa8,inset 0 0 28px #ffd4c055;animation:ringTurn 11s linear infinite}
.portrait-ring::before,.portrait-ring::after{content:"";position:absolute;inset:18px;border:1px dashed #f5dc8e;border-radius:50%}.portrait-ring::after{inset:45px;border-color:#81dff0}
.kiara-presence strong{position:relative;z-index:3;margin-top:18px;color:#ffd3bc;letter-spacing:.25em;font-size:12px}
.kiara-presence span{position:relative;z-index:3;margin-top:5px;font:31px Matisse,serif}
.question-card{position:relative;z-index:2;align-self:center;min-height:500px;padding:31px 36px;background:linear-gradient(135deg,#eef6f8f5,#aec7d0ee);color:#133a53;border:3px solid #d8c277;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px)}
.progress-line{display:flex;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #7598a7;color:#067fa8;font-size:11px;letter-spacing:.22em}
.question-card h2{min-height:88px;margin:25px 0 20px;font:29px/1.3 Matisse,serif;color:#122f43}
.answers{display:grid;gap:10px}
.answers button{position:relative;min-height:54px;padding:11px 18px;text-align:left;border:2px solid #7299aa;background:linear-gradient(#fff,#cadde4);color:#153b52;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.answers button::before{content:attr(data-mark);display:inline-grid;place-items:center;width:25px;height:25px;margin-right:12px;background:#0b7da9;color:#fff}
.answers button:hover{border-color:#00aee6;transform:translateX(3px)}
.answers button.correct{background:linear-gradient(#d9fff1,#83d9b4);border-color:#218965}
.answers button.wrong{background:linear-gradient(#ffe1e7,#e996a8);border-color:#a72e53}
.answers button:disabled{cursor:default;transform:none}
.verdict{min-height:44px;margin:15px 0 0;color:#496b7d;font:15px/1.4 Georgia,serif}
.next-button,.intro-panel button,.result-panel button,.result-panel a{padding:12px 22px;border:2px solid #fff0a2;background:linear-gradient(135deg,#ffcc42,#e66032 50%,#8b164d);color:#fff;text-decoration:none;cursor:pointer}
.next-button{float:right}
.intro-panel,.result-panel{position:absolute;z-index:5;inset:0;display:grid;place-items:center;align-content:center;padding:50px;text-align:center;background:linear-gradient(#03111bd9,#020812f5);opacity:0;visibility:hidden;transition:.25s}
.intro-panel.visible,.result-panel.visible{opacity:1;visibility:visible}
.intro-panel small,.result-panel small{color:#84e9fb;letter-spacing:.32em}
.intro-panel h2,.result-panel h2{margin:13px 0;color:#fff2ba;font:44px Matisse,serif}
.intro-panel p,.result-panel p{max-width:650px;color:#c9e0e7;font:19px/1.6 Georgia,serif}
.intro-panel button{margin-top:16px;min-width:260px}
.result-panel .reward{display:grid;grid-template-columns:70px auto;grid-template-rows:1fr 1fr;align-items:center;margin:12px 0 25px;padding:10px 28px;background:#071827;border:2px solid #dfc76d}
.reward img{grid-row:1/3;width:62px;height:62px;image-rendering:pixelated}.reward span{font-size:30px;color:#ffe478}.reward b{font-size:10px;letter-spacing:.2em}
.result-panel>div:last-child{display:flex;gap:12px}
footer{display:flex;justify-content:space-between;align-items:end;color:#76a8ba;font-size:9px;letter-spacing:.16em}
@keyframes ringTurn{to{transform:rotate(360deg)}}
@media(max-width:850px){.trial-shell{padding:0;grid-template-rows:65px 1fr}.trial-shell footer{display:none}header{grid-template-columns:90px 1fr 110px;padding:5px 7px}header>a{padding:8px;font-size:9px}header h1{font-size:18px}header small{font-size:6px}header aside{min-width:0;grid-template-columns:34px 1fr;padding:3px 5px}header aside img{width:30px;height:30px}header aside span{font-size:6px}header aside b{font-size:14px}.trial-stage{width:100%;height:calc(100vh - 65px);min-height:0;grid-template-columns:1fr;padding:14px}.kiara-presence{display:none}.question-card{min-height:0;padding:20px}.question-card h2{font-size:22px;min-height:64px}.intro-panel,.result-panel{padding:25px}.intro-panel h2,.result-panel h2{font-size:30px}.intro-panel p,.result-panel p{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}