@font-face{font-family:GameSans;src:url('./assets/fonts/DejaVuSans.ttf') format('truetype');font-display:swap}
@font-face{font-family:Creator;src:url('./assets/fonts/Chomsky.otf') format('opentype');font-display:swap}
@font-face{font-family:NightHandwriting;src:url('./assets/fonts/Caveat.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{color-scheme:dark;--scale:1;font-family:GameSans,Arial,sans-serif;background:#06111c;color:white}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible{outline:6px solid #fff1cf;outline-offset:6px}button::-moz-focus-inner{border:0}button img{pointer-events:none} [hidden]{display:none!important}
#game{position:fixed;inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}
#stage{position:absolute;width:1080px;height:1920px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;overflow:hidden;background:#06111c}
.scene-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}.scene-background.cover-art{object-fit:contain}
.creator-signature{position:absolute;left:567.618557px;top:255.865979px;width:406.824742px;height:47.752577px;margin:0;display:block;pointer-events:none;user-select:none}
.panel{border:5px solid #58cfe2db;border-radius:48px;background:#101827ed;padding:22px 45px 24px;color:#fff;overflow-wrap:anywhere}
.story-card{position:absolute;font-size:38px;line-height:1.24;text-shadow:0 2px 1px #0008;max-height:900px;overflow:auto;white-space:pre-line}
.story-card p{margin:0}.story-card.centered{text-align:center}.story-card.bottom-anchor{transform:translateY(-100%)}
.lead-card{position:absolute;background:#0b3040f7;border:5px solid #f0d78b;border-radius:38px;min-height:116px;padding:22px 34px;text-align:center;font-size:32px;line-height:1.24;font-weight:bold;color:#fff8de;text-shadow:0 2px 2px #06141ccc;overflow-wrap:anywhere}
.story-header{position:absolute;left:240px;top:38px;width:600px;height:76px;display:flex;align-items:center;justify-content:center;background:#0a1725db;border:3px solid #d7c484;border-radius:34px;padding:10px 22px;font-size:28px;color:#fff6d5;text-align:center;line-height:1.12}
.nav-button{border:4px solid #54c9dc;border-radius:38px;background:#102235f0;min-height:86px;padding:12px 20px;font-size:30px;line-height:1.1;color:white;text-align:center}
.nav-button:hover:not(:disabled){background:#167d99fa;border-color:#9deaf4}.nav-button:disabled{background:#101820a3;border-color:#81909a73;color:#fff6}
.previous,.next{position:absolute;top:1782px;width:250px;min-height:max(86px,calc(42px / var(--scale)))}.previous{left:48px}.next{right:48px}
.change-character{position:absolute;left:20px;top:38px;width:205px;height:76px;font-size:23px;font-weight:bold;padding:8px 10px}
.music-toggle{position:absolute;left:850px;top:38px;width:210px;height:76px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:22px;font-weight:bold;padding:8px 12px}.music-toggle img{width:82px;height:42px}.cover-music{left:60px;top:234px}
.start-button{position:absolute;left:255px;top:1197px;width:570px;height:126px;border:5px solid #ffe2a5;border-radius:42px;background:#17364ef7;box-shadow:inset 0 0 0 9px #17364e,inset 0 0 0 10px #ff8f7466;font-size:54px;letter-spacing:4px;font-weight:bold;color:#fff1cf}.start-button:hover{background:#ad5046;color:#fff}
.replay-button{position:absolute;left:255px;top:1355px;width:570px;height:126px;border:3px solid #fff7e1;border-radius:38px;background:rgb(255 246 225 / 82%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#17364e;font-size:38px;font-weight:bold;letter-spacing:1.6px;box-shadow:0 6px 20px #0003}.replay-button:hover{background:#fff2d4}
.hero-card{position:absolute;width:410px;height:608px;display:flex;flex-direction:column;align-items:center;gap:12px;background:transparent}
.hero-portrait{position:relative;flex:0 0 500px;width:410px;overflow:hidden;background:transparent}
.hero-portrait img{position:absolute;left:50%;top:0;transform:translateX(-50%);display:block;width:auto;height:var(--portrait-height);max-width:none;user-select:none;pointer-events:none}
.hero-card button{flex:0 0 96px;width:320px;min-height:96px;border-color:#f4deb0;background:#17364ee8;color:#fff1cf;font-weight:bold}
.speech-card{position:absolute;min-height:160px;border:6px solid #32aec8;border-radius:48px;background:#fcfbf6f7;color:#172431;padding:48px 38px 24px;overflow-wrap:anywhere;box-shadow:0 6px 20px #0001}.speech-card.correct{border:10px solid #55e37c;background:#f5fff7fa}
.speech-content{max-height:630px;overflow:auto}.speech-card p{margin:0;white-space:pre-line}.speech-card .tr{font-size:32px;line-height:1.22}.speech-card .ru{font-size:24px;color:#53616c;line-height:1.25;margin-top:12px}
.name-label{display:flex;align-items:center;justify-content:center;width:315px;min-height:78px;padding:8px 18px;background:#299fbe;border:4px solid #7fe1ee;border-radius:39px;color:#fff;font-size:34px;font-weight:bold;line-height:1.1;text-align:center;text-shadow:0 1px 1px #075b70aa}
.speech-card>.name-label{position:absolute;top:-48px;left:29px}.speech-card.name-right>.name-label{left:auto;right:29px}.speech-card.correct>.name-label{background:#24984a;border-color:#8bffaa}.speech-tail{position:absolute;width:68px;height:94px;left:-68px;top:65px;pointer-events:none}
.choice-group{position:absolute;display:flex;flex-direction:column;gap:0}.choice-label{position:absolute;top:-90px;left:35px;min-height:72px;width:340px}.choice-label.right{left:auto;right:35px}.choice-label.center{left:50%;transform:translateX(-50%)}
.choices{position:relative;display:flex;flex-direction:column;gap:18px;overflow-y:auto;overflow-x:hidden;padding:20px 26px 20px 18px;scrollbar-width:thin;scrollbar-color:#7fe1ee #10223566;overscroll-behavior:contain;touch-action:pan-y}
.choice-button{flex-shrink:0;width:100%;min-height:max(112px,calc(42px / var(--scale)));padding:20px 38px;border:5px solid #e8d79b;border-radius:48px;background:#178da8f7;color:white;font-size:30px;line-height:1.24;text-align:center;overflow-wrap:anywhere}.choice-button .tr{display:block;white-space:pre-line;text-shadow:0 1px 1px #075b70aa}.choice-button .ru{display:block;margin-top:7px;font-size:23px;line-height:1.25;color:#e5faff;white-space:pre-line}.choice-button:hover:not(:disabled){background:#29b4cdfc;border-color:#fff0b8}.choice-button.selected{border:10px solid #58e582;background:#178da8fa}.choice-button.wrong{background:#a93f50fc;border-color:#ffd0d5;animation:wrong-shake .35s ease-in-out 2}.choice-button.wrong .tr{text-decoration:line-through}
.plain-story{position:absolute;transform:translateX(-50%);font-family:GameSans,sans-serif;letter-spacing:2px;white-space:pre-line;text-align:center;max-width:1020px;text-shadow:0 4px 3px #0a0503cc;animation:plain-appear 1.2s ease both}
.plain-story.night-handwriting{width:990px;max-width:990px;font-family:NightHandwriting,cursive;font-weight:600;line-height:1.15;letter-spacing:0;white-space:nowrap;text-shadow:0 3px 12px #060607cc,0 1px 3px #060607;}
#stage[data-task="d3_t07"]>.speech-card{padding:42px 36px 20px;min-height:0}
#stage[data-task="d3_t07"] .speech-content{max-height:none;overflow:visible}
#stage[data-task="d3_t07"] .speech-card .ru{margin-top:8px}
#stage[data-task="d3_t07"] .choice-button{padding:14px 28px;min-height:112px}
#stage[data-task="d3_t07"] .choices{padding:14px 26px 14px 18px}
.intro-shade{position:absolute;inset:0;background:#06121e66}.lead-intro .lead-card{animation:lead-attention 2s both;transform-origin:center}
.wrong-exchange{position:absolute;display:flex;flex-direction:column;gap:22px;overflow:auto;padding:0 0 10px;overscroll-behavior:contain}.wrong-card{flex-shrink:0}.wrong-card>.name-label{margin-left:28px;min-height:66px}.wrong-card.question>.name-label{margin-left:auto;margin-right:28px}.wrong-card .speech-card{position:relative;width:100%;padding:22px 34px 24px;min-height:150px}.wrong-card.question .speech-card{border-color:#e67c80}.wrong-card .tr{font-size:31px}.wrong-card .ru{font-size:25px}.retry{position:absolute;left:375px;top:1745px;width:330px;min-height:max(86px,calc(42px / var(--scale)))}
.confirmation{position:absolute;inset:0;z-index:10;background:#06111cdd;display:flex;align-items:center;justify-content:center}.confirmation-panel{width:870px;padding:50px 55px;text-align:center}.confirmation h2{font-size:43px;line-height:1.25;margin:0 0 38px}.confirmation p{font-size:31px;line-height:1.35;color:#ddf8fc;margin:0 0 38px}.confirmation-actions{display:flex;justify-content:center;gap:42px}.confirmation-actions button{width:310px;min-height:96px}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;font-size:68px;text-align:center;color:#fff1cf}.loading span{font-size:32px}.load-error{display:flex;flex-direction:column;gap:30px;padding:100px;font-size:38px;text-align:center}.load-error button{font-size:38px}.load-error p{margin:20px}
#toast{position:fixed;z-index:120;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(90vw,520px);border:1px solid #f0d78b88;border-radius:12px;background:#0b3040f2;color:#fff8de;padding:12px 18px;font:14px/1.4 GameSans,sans-serif;text-align:center;pointer-events:none}
@keyframes wrong-shake{0%,100%{transform:translateX(0)}14.2857%{transform:translateX(-16px)}28.5714%{transform:translateX(16px)}42.8571%{transform:translateX(-12px)}57.1429%{transform:translateX(12px)}71.4286%{transform:translateX(-7px)}85.7143%{transform:translateX(7px)}}
.choice-button.wrong{animation:wrong-shake .56s linear both}
.wrong-scene-enter{animation:scene-fade-in .45s ease both}
.scene-dissolve{position:absolute;inset:0;z-index:8;pointer-events:none;user-select:none;animation:scene-fade-out var(--dissolve-time) linear both}
.scene-dissolve *{animation:none!important}
@keyframes scene-fade-in{from{opacity:0}to{opacity:1}}
@keyframes scene-fade-out{from{opacity:1}to{opacity:0}}
.choice-button.correct-celebrate{animation:correct-choice-soft .52s both;transform-origin:center}
@keyframes correct-choice-soft{0%{transform:scale(1);animation-timing-function:ease-out}42.3077%{transform:scale(1.035);animation-timing-function:ease-in}100%{transform:scale(1)}}
.answer-confetti{position:absolute;inset:0;z-index:6;pointer-events:none;user-select:none;overflow:visible}
.confetti-piece{position:absolute;line-height:1;animation:confetti-travel .85s ease-out both}
.confetti-piece i{display:block;font-style:normal;animation:confetti-pop .15s ease-out both,confetti-fade .9s linear both}
@keyframes confetti-travel{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}}
@keyframes confetti-pop{from{transform:scale(.3)}to{transform:scale(1)}}
@keyframes confetti-fade{0%{opacity:0;animation-timing-function:ease-out}16.6667%{opacity:1;animation-timing-function:linear}100%{opacity:0}}
@keyframes plain-appear{from{opacity:0;transform:translate(-50%,18px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes lead-attention{0%{opacity:0;transform:translateY(-42px) scale(.82);animation-timing-function:ease-out}17.5%{opacity:1;transform:translateY(0) scale(1.08);animation-timing-function:ease-in}30%,57.5%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:ease-out}67.5%{opacity:1;transform:translateY(0) scale(1.04);animation-timing-function:ease-in}80%,100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
