*{box-sizing:border-box}
:root{--bg:#050505;--fg:#f2f2f2;--muted:#777;--line:#202020;--accent:#e8ff47;--danger:#ff3b30}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;overflow:hidden}
body{min-height:100dvh}
button{font:inherit;color:inherit}
.screen{display:none;position:relative;width:100%;height:100dvh;min-height:560px;padding:clamp(24px,6vw,80px);align-items:center;justify-content:center;flex-direction:column;text-align:center}
.screen.active{display:flex}
#screen-home{align-items:flex-start;text-align:left;max-width:1000px;margin:auto}
.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--muted);margin-bottom:24px}
h1{font-size:clamp(70px,15vw,170px);line-height:.78;letter-spacing:-.09em;margin:0 0 36px;font-weight:900}
h1 span{color:var(--accent)}
h2{font-size:clamp(38px,7vw,76px);line-height:.95;letter-spacing:-.06em;margin:0 0 20px}
.lede{font-size:clamp(14px,2vw,19px);color:#aaa;max-width:520px;line-height:1.6;margin:0 0 38px}
.primary,.secondary{border:0;padding:16px 22px;cursor:pointer;transition:.18s transform,.18s opacity;letter-spacing:.08em;font-size:12px;font-weight:800}
.primary{background:var(--accent);color:#050505}
.primary:hover,.secondary:hover{transform:translateY(-2px)}
.secondary{background:#151515;border:1px solid #292929}
.text-btn{border:0;background:none;color:#777;padding:15px 0;cursor:pointer;font-size:11px;letter-spacing:.14em}
.text-btn:hover{color:#fff}
.privacy{font-size:10px;color:#555;line-height:1.5;margin-top:30px;max-width:500px}
.progress{position:absolute;top:25px;left:50%;transform:translateX(-50%);width:min(420px,70vw);height:2px;background:#151515}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .5s}
.cal-dot{width:28px;height:28px;background:#fff;border-radius:50%;margin:55px 0;box-shadow:0 0 40px rgba(255,255,255,.45)}
.instruction{height:18px;color:#aaa;font-size:12px;letter-spacing:.1em}
.game-screen{padding:0}
.hud{position:absolute;z-index:5;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;color:#666;font-size:10px;letter-spacing:.14em}
.game-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:default}
#game-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.dot{width:34px;height:34px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 0 35px rgba(255,255,255,.35)}
.dot.small{width:18px;height:18px}
.click-word{font-size:clamp(20px,4vw,40px);font-weight:900;letter-spacing:.1em;cursor:pointer}
.mini{font-size:11px;color:#777;letter-spacing:.15em}
.red-stage{background:#b80000;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.red-stage .click-word{color:#fff}
.timer{font-size:clamp(80px,18vw,190px);font-weight:900;letter-spacing:-.08em}
.bait{position:absolute;border:1px solid #333;background:#0b0b0b;padding:15px 20px;color:#bbb;cursor:pointer}
.cursor-note{font-size:12px;color:#777;max-width:330px;line-height:1.7}
.warning{border:1px solid #3b3b3b;padding:30px;max-width:520px;text-align:left;background:#090909}
.warning .bar{height:3px;background:var(--danger);width:55%;margin-bottom:22px}
.warning strong{color:#fff;display:block;margin-bottom:12px}
.warning p{font-size:11px;line-height:1.8;color:#777}
.analysis-box{width:min(650px,90vw);border:1px solid #222;padding:30px;text-align:left;position:relative;overflow:hidden}
.scan-line{height:1px;background:var(--accent);position:absolute;left:0;right:0;top:0;box-shadow:0 0 15px var(--accent);animation:scan 1.5s linear infinite}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(170px)}}
#analysis-line{font-size:12px;color:#aaa}
.fake-bars{display:flex;gap:5px;height:80px;align-items:flex-end}
.fake-bars span{width:15px;background:#444;animation:pulse .7s infinite alternate}
.fake-bars span:nth-child(2){height:60%}.fake-bars span:nth-child(1){height:30%}.fake-bars span:nth-child(3){height:90%}.fake-bars span:nth-child(4){height:45%}.fake-bars span:nth-child(5){height:75%}
@keyframes pulse{to{opacity:.3;transform:scaleY(.5)}}
.result-kicker{font-size:10px;letter-spacing:.2em;color:#666;margin:0 0 5px}
.score{font-size:clamp(100px,22vw,220px);line-height:.85;font-weight:900;letter-spacing:-.1em;color:var(--accent)}
.rating{font-size:12px;letter-spacing:.25em;margin:18px 0 30px}
.stats{display:flex;border:1px solid #202020;margin-bottom:28px}
.stats div{padding:16px 25px;min-width:110px;border-right:1px solid #202020}
.stats div:last-child{border-right:0}
.stats span{display:block;font-size:19px;font-weight:800}.stats small{font-size:8px;color:#555;letter-spacing:.1em}
.challenge{font-size:10px;color:#555;margin-bottom:15px}
.share-status{height:16px;font-size:10px;color:var(--accent);margin:5px 0}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#eee;color:#050505;padding:10px 14px;font-size:10px;opacity:0;pointer-events:none;transition:.2s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}
.shake{animation:shake .18s linear 2}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.flash{animation:flash .18s linear}
@keyframes flash{50%{filter:brightness(3)}}
@media(max-width:600px){
 .screen{padding:25px 20px}
 h1{font-size:21vw}
 .stats div{padding:12px 8px;min-width:90px}
 .stats span{font-size:16px}
 .primary,.secondary{width:min(340px,90vw)}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}