:root{--bg:#040608;--panel:#071116;--cyan:#18E2EF;--chalk:#0D3B35;--gold:#F7C948;--fg:#F6F6F1;--green:#A6FF3D;--muted:#94A3AA;--red:#FF443D;--orange:#FF9800;--line:rgba(24,226,239,.25)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}body{min-width:320px}
.app-shell{min-height:100svh;padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;place-items:center;position:relative;isolation:isolate;background:radial-gradient(circle at 50% 8%,rgba(24,226,239,.14),transparent 34%),radial-gradient(circle at 50% 82%,rgba(247,201,72,.11),transparent 34%),linear-gradient(180deg,#030506,#040608)}
.chalk-grid{position:fixed;inset:0;z-index:-2;background:linear-gradient(rgba(246,246,241,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(246,246,241,.028) 1px,transparent 1px),radial-gradient(circle at 18% 28%,rgba(247,201,72,.08),transparent 18%),radial-gradient(circle at 82% 62%,rgba(24,226,239,.075),transparent 20%);background-size:32px 32px,32px 32px,auto,auto;mask-image:radial-gradient(circle at 50% 45%,#000 0 72%,transparent 96%)}
.app-shell:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(246,246,241,.025) 0 1px,transparent 1px 8px);opacity:.24}
.console{width:min(900px,100%);border:1px solid rgba(24,226,239,.34);background:linear-gradient(180deg,rgba(7,17,22,.96),rgba(4,6,8,.98));box-shadow:0 0 0 1px rgba(247,201,72,.08),0 26px 90px rgba(0,0,0,.54),inset 0 0 45px rgba(13,59,53,.18);padding:clamp(14px,2.2vw,25px);position:relative;overflow:hidden}
.console:before{content:"";position:absolute;inset:9px;border:1px solid rgba(246,246,241,.055);pointer-events:none}.hero{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:start;gap:18px}.eyebrow{margin:0 0 6px;color:var(--gold);font:900 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.hero h1{margin:0;color:var(--fg);font-size:clamp(30px,7.1vw,66px);line-height:.92;letter-spacing:0}.server-status{display:grid;gap:7px;color:var(--muted);font:900 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;min-width:max-content}.server-status span{display:flex;gap:7px;align-items:center}.light{width:8px;height:8px;border-radius:50%;background:#3a4548}.is-online .light-server{background:var(--cyan);box-shadow:0 0 15px var(--cyan)}.is-unlocked .light-reward,.is-approved .light-reward{background:var(--green);box-shadow:0 0 15px var(--green)}
.mascot-zone{display:grid;place-items:center;margin:4px 0 8px}.mascot{width:min(300px,72vw);height:auto;overflow:visible}.server-body,.face,.pupil,.brow,.apple,.pointer,.lid,.hair,.mouth,.chalk{transform-box:fill-box;transform-origin:center}.phase-request .server-body{animation:wake .9s ease both}.phase-check .pupil{animation:watch .8s ease-in-out infinite}.phase-search .pupil{animation:scanRows .62s ease-in-out infinite}.is-unlocked .apple{animation:rewardPop .62s ease both}.is-unlocked .server-body{animation:unlockGlow .62s ease both}.phase-reaction .pupil,.is-approved .pupil{animation:eyeRoll 1.25s ease both}.phase-reaction .brow,.is-approved .brow{animation:browTired 1.25s ease both}.phase-reaction .lid,.is-approved .lid{animation:blink .9s ease both}.dot-a{fill:var(--cyan)}.dot-b{fill:var(--gold)}.dot-c{fill:var(--green)}.phase-check .dot,.phase-search .dot{animation:pulse .64s ease-in-out infinite}.dot-b{animation-delay:.12s}.dot-c{animation-delay:.24s}
.request-panel{position:relative;z-index:1;border:1px solid rgba(24,226,239,.24);background:rgba(13,59,53,.22);padding:clamp(12px,2vw,17px)}.phase-text{margin:0;color:var(--cyan);font:900 13px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}.connect-text{margin:8px 0 0;color:var(--fg);font:900 clamp(15px,3vw,22px)/1.15 ui-monospace,SFMono-Regular,Consolas,monospace}.connect-text:after{content:"";display:inline-block;width:8px;height:1em;background:var(--gold);margin-left:4px;vertical-align:-2px;animation:cursor .8s steps(2,end) infinite}.progress-row{display:grid;grid-template-columns:66px 1fr;gap:12px;align-items:center;margin-top:12px}.meter{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--cyan) var(--pct,0%),rgba(148,163,170,.2) 0);position:relative}.meter:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#050a0d}.meter span{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font:900 16px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.bar{height:10px;border:1px solid rgba(24,226,239,.28);background:rgba(246,246,241,.05);overflow:hidden}.bar span{display:block;width:var(--pct,0%);height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .24s ease}
.check-panel{display:none;position:relative;margin-top:12px;border:1px solid rgba(247,201,72,.26);background:rgba(247,201,72,.045);padding:12px}.phase-check .check-panel,.is-unlocked .check-panel,.phase-mode .check-panel,.phase-search .check-panel,.phase-result .check-panel,.phase-reaction .check-panel,.is-approved .check-panel{display:block}.check-panel dl{margin:0;display:grid;gap:7px}.check-panel div{display:flex;justify-content:space-between;gap:14px;font:900 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}.check-panel dt{color:var(--muted)}.check-panel dd{margin:0;color:var(--green);text-align:right}.reward-star{position:absolute;right:12px;top:-15px;color:var(--gold);font-size:32px;opacity:0;transform:scale(.4)}.is-unlocked .reward-star,.phase-mode .reward-star,.phase-search .reward-star,.phase-result .reward-star,.phase-reaction .reward-star,.is-approved .reward-star{opacity:1;transform:scale(1);animation:starPop .7s ease both}
.mode-panel{display:none;margin-top:12px;text-align:center;border:1px solid rgba(24,226,239,.24);padding:12px;background:rgba(4,6,8,.5)}.phase-mode .mode-panel,.phase-search .mode-panel,.phase-result .mode-panel,.phase-reaction .mode-panel,.is-approved .mode-panel{display:block}.mode-panel p{margin:0 0 6px;color:var(--muted);font:900 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.mode-panel strong{color:var(--cyan);font-size:clamp(17px,4vw,27px)}.mode-trend .mode-panel{border-color:rgba(247,201,72,.38)}.mode-trend .mode-panel strong{color:var(--gold)}
.joke-card{display:none;margin-top:12px;text-align:center;border:1px solid rgba(247,201,72,.5);background:linear-gradient(180deg,rgba(247,201,72,.1),rgba(13,59,53,.22));padding:clamp(15px,3vw,26px);box-shadow:inset 0 0 28px rgba(247,201,72,.055)}.phase-result .joke-card,.phase-reaction .joke-card,.is-approved .joke-card{display:block;animation:cardIn .28s ease both}.unlock-label{margin:0 0 6px;color:var(--green);font:900 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.one-joke{margin:0 0 14px;color:var(--muted);font:900 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em}.joke-setup{margin:0;color:var(--fg);font-size:clamp(21px,5.4vw,41px);line-height:1.04;font-weight:900;letter-spacing:0}.joke-punchline{margin:12px 0 0;color:var(--gold);font-size:clamp(25px,6.4vw,52px);line-height:1.02;font-weight:900;letter-spacing:0}
.reaction-panel{display:none;margin-top:12px;text-align:center}.phase-reaction .reaction-panel,.is-approved .reaction-panel{display:block}.reaction-panel p{margin:0 0 8px;color:var(--muted);font:900 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.reaction-icons{display:flex;justify-content:center;gap:8px}.reaction-icons span{width:33px;height:33px;display:grid;place-items:center;border:1px solid rgba(24,226,239,.25);background:rgba(4,6,8,.58);color:var(--fg);font-size:18px;animation:collectiveRoll 1.1s ease both}.reaction-icons span:nth-child(2){animation-delay:.06s}.reaction-icons span:nth-child(3){animation-delay:.12s}.reaction-icons span:nth-child(4){animation-delay:.18s}.reaction-icons span:nth-child(5){animation-delay:.24s}
.approval{display:none;text-align:center;margin-top:12px}.is-approved .approval{display:grid;gap:4px;animation:cardIn .32s ease both}.approval p{margin:0;color:var(--muted);font:900 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.approval strong{color:var(--green);font-size:clamp(18px,4.4vw,31px);line-height:1.05;font-weight:900}.actions{display:grid;justify-items:center;gap:14px;margin-top:14px}.assign-button,.buy-button{min-height:54px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font:900 13px/1 Arial,Helvetica,sans-serif;text-decoration:none;letter-spacing:.04em;cursor:pointer;transition:transform .2s ease,filter .2s ease,opacity .24s ease,visibility .24s ease,box-shadow .2s ease}.assign-button{border:1px solid rgba(24,226,239,.66);background:#071116;color:var(--fg);padding:0 22px;opacity:0;visibility:hidden;pointer-events:none}.buy-button{display:none;width:min(380px,100%);background:#FF9800;border:1px solid rgba(255,152,0,.92);color:#120b00;padding:0 24px;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 10px 24px rgba(255,152,0,.24),inset 0 1px 0 rgba(255,255,255,.24)}.is-approved .assign-button{opacity:1;visibility:visible;pointer-events:auto}.has-buy-link.is-approved .buy-button{display:inline-flex;opacity:1;visibility:visible;pointer-events:auto}.assign-button:hover,.buy-button:hover{transform:translateY(-2px);filter:brightness(1.08)}.assign-button:focus-visible,.buy-button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@keyframes cursor{50%{opacity:0}}@keyframes pulse{50%{opacity:.28}}@keyframes wake{0%{opacity:0;transform:translateY(12px) scale(.96)}100%{opacity:1;transform:none}}@keyframes watch{50%{transform:translateX(5px)}}@keyframes scanRows{30%{transform:translate(-6px,-2px)}70%{transform:translate(6px,3px)}}@keyframes rewardPop{50%{transform:translateY(-4px) scale(1.08)}100%{transform:none}}@keyframes unlockGlow{50%{filter:drop-shadow(0 0 14px rgba(247,201,72,.8))}}@keyframes starPop{0%{opacity:0;transform:scale(.35) rotate(-20deg)}60%{opacity:1;transform:scale(1.18) rotate(8deg)}100%{opacity:1;transform:scale(1)}}@keyframes eyeRoll{0%{transform:translate(0,0)}25%{transform:translate(0,-10px)}55%{transform:translate(6px,-9px)}80%{transform:translate(0,-9px)}100%{transform:translate(3px,-2px)}}@keyframes browTired{50%{transform:translateY(-5px)}100%{transform:translateY(-2px)}}@keyframes blink{0%,65%,100%{opacity:0}72%,84%{opacity:1}}@keyframes cardIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}@keyframes collectiveRoll{0%{transform:translateY(6px);opacity:.2}60%{transform:translateY(0) rotate(10deg);opacity:1}100%{transform:translateY(0);opacity:1}}
@media(max-width:700px){.app-shell{place-items:start center}.console{padding:12px}.hero{display:grid}.server-status{min-width:0}.mascot{width:min(255px,74vw)}.progress-row{grid-template-columns:62px 1fr}.meter{width:62px;height:62px}.joke-setup{font-size:clamp(21px,6.8vw,31px)}.joke-punchline{font-size:clamp(25px,8vw,38px)}.reaction-icons span{width:31px;height:31px}.buy-button,.assign-button{width:min(380px,100%)}}@media(min-width:1100px){.console{width:min(940px,88vw)}}@media(max-width:380px){.hero h1{font-size:29px}.joke-setup{font-size:21px}.joke-punchline{font-size:25px}.phase-text,.connect-text{word-break:normal}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.phase-reaction .pupil,.is-approved .pupil{transform:translate(3px,-2px)}}