:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0b1716;color:#f3f7f4}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at top,#25483c,#0b1716 70%)}#intro{max-width:700px;margin:auto;padding:calc(env(safe-area-inset-top) + 24px) 24px 30px;text-align:center}header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:30px}header strong{font-size:25px}header span{font-size:11px;letter-spacing:2px;color:#bbd6c7}h1{font-weight:500;font-size:clamp(30px,7vw,44px);margin:12px 0}p{color:#bed0c8}#intro img{height:min(38dvh,350px);width:auto;max-width:100%;object-fit:contain;border-radius:12px;margin-top:10px;box-shadow:0 12px 50px #0005}.caption{font-size:13px}button{font:700 15px system-ui;border:1px solid #b8d6c155;border-radius:32px;padding:18px 24px;cursor:pointer;background:#dcff87;color:#0a2017;touch-action:manipulation}button:disabled{opacity:1;cursor:wait}#start{display:block;width:min(100%,360px);margin:22px auto}small{display:block;max-width:380px;margin:auto;line-height:1.6;color:#aec1b8}#status{text-align:center;padding:12px 24px;font-size:14px;min-height:40px}#camera{position:fixed;inset:0;width:100%;height:100dvh}.active #intro{display:none}.active #status{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 65px);left:20px;right:20px;border-radius:22px;background:#091a14d9;color:white;pointer-events:none}.active #status:empty{display:none}#close,#sound{position:fixed;z-index:3;background:#0d201bea;color:white}#close{top:calc(env(safe-area-inset-top) + 15px);left:15px;font-size:21px}#sound{bottom:calc(env(safe-area-inset-bottom) + 20px);right:20px}[hidden]{display:none!important}

#intro{max-width:920px;text-align:left;padding:calc(env(safe-area-inset-top) + 20px) 20px 30px}header{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-bottom:30px}#intro .brand{width:74px;height:74px;margin:0;box-shadow:none;border-radius:16px}header .glass{background:transparent;color:#ecf2ee;border-color:#ffffff30;padding:14px 18px;font-size:13px}#menu{justify-self:end}h1{font-size:clamp(24px,4vw,32px);color:#dfff81;margin:0 0 10px}#intro>p{font-size:15px;margin:0 0 24px}#characters-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:3px}.character{display:flex;flex-direction:column;align-items:center;aspect-ratio:1;min-width:0;padding:14px;gap:12px;border-radius:22px;background:linear-gradient(145deg,#223a30,#17271f);border:1px solid #ffffff30;overflow:hidden;color:#ecf2ee}.character:hover,.character:focus-visible{border-color:#dfff81;background:#294536}#intro .character img{width:100%;height:calc(100% - 30px);min-height:0;object-fit:contain;margin:0;box-shadow:none;border-radius:12px}.character span{font-size:13px;line-height:18px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dialog{max-width:min(90vw,450px);background:#13251e;color:#ecf2ee;border:1px solid #ffffff30;border-radius:22px;padding:24px}dialog::backdrop{background:#0009}dialog li{margin:14px 0}dialog>button:first-child{float:right;padding:5px 14px;font-size:26px;background:transparent;color:white}#status:empty{display:none}@media(max-width:380px){header{gap:7px}header .glass{padding:12px 10px;font-size:11px}#intro .brand{width:58px;height:58px}#characters-list{gap:12px}.character{padding:10px}}

#start{display:block;margin:24px auto;padding:18px 32px;border:1px solid #b9d670;border-radius:32px;background:#1c3027;color:white;font:700 17px system-ui}#start:disabled{opacity:.4}.character[aria-pressed="true"]{outline:3px solid #c4e467}.brand{object-fit:contain}
#calibration{position:fixed;z-index:4;bottom:env(safe-area-inset-bottom,0px);left:0;right:0;background:#10231fed;padding:12px 18px;border-top:1px solid #b3d88255;font-size:13px}#calibration p{margin:7px 0;line-height:1.35}#calibration button{padding:12px 20px;width:100%}#calibration button:disabled{opacity:.4;cursor:default}body[data-calibrate].active #status{bottom:210px}a{color:#dcff87}

body[data-calibrate].active,body[data-calibrate].active *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#gesture-surface{position:fixed;inset:0;z-index:2;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:transparent}body[data-calibrate].active{overscroll-behavior:none;overflow:hidden}

#cal-login input{display:block;width:100%;padding:14px;margin:12px 0;font:16px system-ui;-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}#cal-login button{margin:5px;padding:12px 18px}#cal-login p{line-height:1.5}