/* ABESATUVERSE 3.0 • Original playful block-world interface • mobile first • no font downloads */
:root{color-scheme:dark;--ink:#111c31;--navy:#0c1427;--panel:#172744;--blue:#4d91ff;--yellow:#ffdb58;--mint:#68e5ad;--white:#f8fbff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100%;background:#0e182c;color:var(--white);font-family:Inter,ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}body.in-game{overflow:hidden;touch-action:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button,a{-webkit-tap-highlight-color:transparent}a{text-decoration:none;color:inherit}button{touch-action:manipulation}[hidden]{display:none!important}
#game{position:fixed;inset:0;z-index:0;pointer-events:none}body.in-game #game{pointer-events:auto}#game canvas{display:block;width:100%;height:100%;touch-action:none}
/* Home */
.landing-screen{position:relative;z-index:5;min-height:100vh;overflow:hidden;background:radial-gradient(ellipse 58% 39% at 78% 20%,#233d70 0%,transparent 87%),radial-gradient(ellipse 39% 28% at 4% 70%,#172b52 0%,transparent 90%),#0e182c}
.landing-screen:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#adc8f8 1px,transparent 1px);background-size:54px 54px;opacity:.11;pointer-events:none}
.site-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;max-width:1250px;margin:auto;padding:27px 28px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand img{border-radius:13px;filter:drop-shadow(0 5px 7px #030e2c77)}.brand strong{display:block;letter-spacing:-.9px;font-size:20px;font-weight:950}.brand-accent{color:#76ccff}.brand small{display:block;font-weight:800;font-size:9px;letter-spacing:2px;color:#95adc9;margin-top:1px}
.site-nav nav{display:flex;align-items:center;gap:36px}.site-nav nav a{color:#bcc9df;font-size:13px;font-weight:800}.site-nav nav a:hover{color:#fff}.btn{appearance:none;border:0;border-radius:14px;font-weight:950;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 22px;letter-spacing:.3px;transition:transform .16s,box-shadow .16s,background .16s}.btn:hover{transform:translateY(-3px)}.btn-nav{font-size:12px;padding:12px 20px;background:#283b60;color:#fff;border:1px solid #4d6081}.btn-nav:hover{background:#354c76}.btn-play{background:#ffdf5c;color:#18213b;box-shadow:0 6px 0 #ba9236,0 13px 25px #0005;font-size:14px}.btn-play:hover{box-shadow:0 8px 0 #ba9236,0 17px 25px #0005}.btn-play:active{transform:translateY(5px);box-shadow:0 2px 0 #ba9236}.btn-outline{background:#fff0;border:1.5px solid #71809e;color:#eef5ff;font-size:13px}.btn-outline:hover{background:#ffffff12}.play-triangle{display:grid;place-items:center;border-radius:9px;background:#18213b;color:#ffdf5c;width:27px;height:27px;font-size:12px}
.hero-layout{position:relative;max-width:1250px;margin:auto;min-height:605px;padding:65px 28px 42px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:0}.hero-content{position:relative;z-index:2}.eyebrow{font-size:11px;letter-spacing:1.3px;font-weight:950;display:inline-flex;align-items:center;gap:9px;color:#9cdbff;border:1px solid #34517b;background:#1a3052b0;border-radius:50px;padding:9px 13px}.pulse-dot,.online-dot{height:8px;width:8px;border-radius:99px;display:inline-block;background:#69e8af;box-shadow:0 0 0 4px #52cb9060;flex:0 0 auto}.hero-content h1{font-size:clamp(65px,7.1vw,107px);line-height:.97;letter-spacing:-5px;font-weight:1000;margin:25px 0 20px;color:#fff;text-shadow:0 6px 0 #192841}.headline-yellow{color:#ffda63}.headline-blue{color:#74c4ff}.hero-lead{color:#bbcde3;max-width:540px;font-size:15px;line-height:1.8;margin:0 0 29px}.hero-cta{display:flex;flex-wrap:wrap;gap:15px;align-items:center}.hero-benefits{display:flex;flex-wrap:wrap;gap:18px;margin-top:27px;color:#9fc4d4;font-weight:750;font-size:11px}.hero-metrics{display:flex;gap:22px;align-items:center;margin-top:42px}.hero-metrics>div{display:flex;flex-direction:column;gap:2px}.hero-metrics b{font-size:28px;letter-spacing:-.8px}.hero-metrics small{font-size:9px;letter-spacing:1.4px;font-weight:900;color:#879dbb}.hero-metrics i{width:1px;height:35px;background:#364c69}
.hero-visual{height:520px;position:relative;display:grid;place-items:center;isolation:isolate}.visual-light{position:absolute;width:470px;height:470px;border-radius:50%;background:radial-gradient(circle,#4293e76d,transparent 70%);z-index:-1;filter:blur(22px)}.world-illustration{display:block;max-width:123%;width:700px;filter:drop-shadow(0 27px 27px #030d2e9d);transform:translate(6px,14px);animation:floatWorld 6s ease-in-out infinite}.world-sticker{position:absolute;display:flex;align-items:center;gap:9px;background:#fff;color:#1b2d4c;padding:10px 15px;border-radius:13px;box-shadow:0 7px 0 #91a9c8,0 16px 30px #0006;transform:rotate(-8deg);font-size:13px}.world-sticker span{font-size:25px}.sticker-top{top:69px;right:5%;transform:rotate(9deg)}.sticker-bottom{bottom:70px;left:3%;transform:rotate(-9deg)}.world-caption{position:absolute;bottom:13px;right:10%;font-size:10px;letter-spacing:1.5px;font-weight:900;color:#c0e8ff;display:flex;align-items:center;gap:11px}
@keyframes floatWorld{0%,100%{transform:translate(6px,14px)}50%{transform:translate(6px,2px)}}
.home-bottom{position:relative;background:#f3f7ff;color:#18223b;padding:47px max(25px,calc((100vw - 1194px)/2)) 58px}.section-top{text-align:center;margin-bottom:28px}.eyebrow-small{background:#e7e3ff;border:0;color:#7153c5}.section-top h2{font-size:clamp(23px,3vw,34px);margin:14px 0;letter-spacing:-1px}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.feature-card{padding:23px 17px;border-radius:18px;display:flex;align-items:center;gap:12px;box-shadow:0 6px 0 #0c142710;min-height:116px}.feature-card b,.feature-card small{display:block}.feature-card b{font-size:14px}.feature-card small{font-size:11px;margin-top:5px;line-height:1.4;color:#3a4965}.feature-icon{font-size:31px;flex-shrink:0}.feature-card.purple{background:#e7e2ff}.feature-card.coral{background:#ffe9de}.feature-card.green{background:#dff9ee}.feature-card.blue{background:#dceeff}.howto{position:relative;display:flex;gap:27px;align-items:center;justify-content:center;flex-wrap:wrap;padding:28px 20px;background:#182943;color:#cfe3ff;font-size:13px;font-weight:750}.howto b{color:#ffe08c}.site-footer{position:relative;background:#0c1427;padding:20px 30px;font-size:11px;color:#879aba;text-align:center}.site-footer span{display:block;margin-top:5px;color:#557094}
/* Game */
#game-ui{position:fixed;inset:0;z-index:4;pointer-events:none}#game-ui button,#game-ui .joystick{pointer-events:auto}#hud{position:absolute;top:14px;left:17px;right:17px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.hud-profile{display:flex;align-items:center;gap:10px;padding:8px 15px 8px 8px;background:#16243ce8;border:1px solid #ffffff38;border-radius:16px;box-shadow:0 7px 23px #0a132a55;min-width:205px;backdrop-filter:blur(14px)}.profile-avatar{background:linear-gradient(145deg,#ffe8a7,#f7a957);width:43px;height:45px;border-radius:11px;display:grid;place-items:center;font-size:24px;border:2px solid #ffffffb5}.profile-copy{min-width:0;flex:1}.profile-copy b{display:block;font-size:12px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy small{font-size:10px;color:#d1dcf4}.xp-bar{margin-top:5px;background:#354963;height:5px;overflow:hidden;border-radius:4px}.xp-bar>div{background:linear-gradient(90deg,#65e9bb,#a9f9bc);width:0;height:100%;border-radius:4px;transition:width .3s}.hud-right{display:flex;gap:9px;align-items:center}.world-pill,.coin-pill,.hud-round{background:#16243ce8;backdrop-filter:blur(14px);border:1px solid #ffffff38;color:#fff;border-radius:13px;box-shadow:0 6px 20px #07142b4a;font-weight:900;height:44px}.world-pill,.coin-pill{display:flex;align-items:center;gap:10px;padding:0 14px;font-size:11px;letter-spacing:.6px}.coin-pill{font-size:15px;color:#ffe595}.hud-round{width:44px;font-size:23px;display:grid;place-items:center}.hud-round:hover{background:#344a6c}
.mission-card{position:absolute;left:17px;top:90px;background:#18263eea;border:1px solid #ffffff37;box-shadow:0 9px 20px #0a19355c;color:white;border-radius:15px;display:flex;gap:9px;align-items:center;text-align:left;max-width:285px;padding:11px 13px;backdrop-filter:blur(10px)}.mission-card:hover{background:#213956}.mission-flag{background:#e59e3e2e;padding:6px;border-radius:9px;font-size:22px}.mission-card span:nth-child(2){display:flex;flex-direction:column;gap:3px}.mission-card small{font-size:9px;font-weight:950;letter-spacing:1.2px;color:#ffdb75}.mission-card b{font-size:11px}.mission-card em{font-size:10px;color:#9ddbbb;font-style:normal}.mission-arrow{font-size:25px;color:#b0c1da}
#toolbar{position:absolute;top:90px;right:17px;display:grid;gap:9px}#toolbar button{background:#17253fdd;border:1px solid #ffffff44;box-shadow:0 6px 15px #0a13294a;border-radius:13px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:61px;height:58px;backdrop-filter:blur(12px)}#toolbar button:hover{background:#3f679d}#toolbar button span{font-size:22px}#toolbar button small{font-size:9px;font-weight:950}
.zone-label{position:absolute;left:50%;top:16px;transform:translateX(-50%);white-space:nowrap;background:#17314cbf;border:1px solid #ffffff44;border-radius:40px;padding:9px 14px;font-size:10px;font-weight:900;letter-spacing:1.2px;box-shadow:0 4px 17px #102b4988}
.joystick{position:absolute;bottom:37px;left:30px;width:142px;height:142px;display:grid;place-items:center;background:radial-gradient(circle,#14253d52,#152b4d91);border:3px solid #f3f7ff8c;border-radius:50%;touch-action:none;box-shadow:0 6px 15px #0a153559,inset 0 0 25px #ffffff21;user-select:none}.joystick-cross{font-size:35px;color:#ffffff35}.joystick-knob{position:absolute;left:50%;top:50%;margin-left:-32px;margin-top:-32px;width:64px;height:64px;border-radius:50%;background:linear-gradient(145deg,#fff,#bed9f8);box-shadow:0 5px 12px #12335488;border:3px solid #a9d5ff;transform:translate(0,0)}.mobile-actions{position:absolute;bottom:44px;right:31px;display:flex;gap:13px;align-items:end}.mobile-actions button{border-radius:50%;border:3px solid #ffffffa1;color:white;box-shadow:0 6px 0 #204677,0 14px 22px #05152c70;background:#347ce7;font-size:31px;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.mobile-actions button small{font-size:9px;font-weight:950;letter-spacing:.7px}.mobile-actions #jump{width:92px;height:92px}.mobile-actions #sprint{width:64px;height:64px;background:#5b52b7;font-size:22px;box-shadow:0 6px 0 #2d2869,0 14px 22px #05152c70}.mobile-actions button:active{transform:translateY(4px)}.interact-btn{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);background:linear-gradient(100deg,#ffe16e,#f5b93e);color:#32270d;box-shadow:0 6px 0 #ad7725,0 14px 22px #0b1d3d88;padding:13px 16px;font-weight:950;font-size:13px;border:2px solid #fff3c9;border-radius:14px;max-width:78%;white-space:nowrap}.interact-btn span{display:inline-grid;place-items:center;background:#634517;color:#fff;width:21px;height:21px;border-radius:5px;margin-left:9px}.controls-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#ecf6ff;text-shadow:0 2px 7px #092544;font-weight:700}.controls-hint b{color:#ffdf72;margin:0 5px}.loading-game{position:absolute;inset:0;background:#09162ce8;display:grid;align-content:center;justify-items:center;gap:12px;pointer-events:auto}.loading-game h2{font-size:22px;margin:0}.loading-game small{font-size:12px;color:#b1c7e5}.load-icon{font-size:64px;animation:floatWorld 2s infinite}.loading-track{width:240px;height:9px;background:#324769;border-radius:9px;overflow:hidden}.loading-track>span{display:block;width:40%;height:100%;background:#ffda6f;border-radius:9px;animation:loadingSlide 1.5s infinite ease-in-out}@keyframes loadingSlide{0%{transform:translateX(-100%)}100%{transform:translateX(650%)}}
/* Dialogs */
.overlay{position:fixed;z-index:40;inset:0;display:grid;place-items:center;background:#071121b9;backdrop-filter:blur(9px);padding:17px;overflow:auto;overscroll-behavior:contain}.modal{width:min(570px,100%);max-height:min(91dvh,850px);overflow:auto;background:#18243a;color:#f2f6ff;border:1px solid #7587aa69;border-radius:23px;padding:26px;box-shadow:0 18px 0 #0711228a,0 30px 80px #0008}.modal h2{font-size:clamp(19px,3.5vw,26px);letter-spacing:-.55px;margin:0 0 16px}.modal h3{margin:20px 0 8px;font-size:15px}.modal p{line-height:1.65;color:#c7d5e9;font-size:13px}.modal .muted{font-size:11px;color:#94a7c2}.modal button{background:#324563;color:#fff;border:1px solid #ffffff18;border-radius:10px;padding:11px 15px;margin:5px 5px 5px 0;font-size:12px;font-weight:850;min-height:40px}.modal button:hover{background:#455d82}.modal button.primary{background:#ffdb5f;color:#292c3c;border-color:#ffdf80;box-shadow:0 4px 0 #b49031}.modal button.primary:hover{background:#ffe99d}.modal .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.modal label{display:block;margin:13px 0;color:#e8f1ff;font-size:12px;font-weight:900}.modal input,.modal select,.modal textarea{display:block;width:100%;margin-top:7px;background:#0c182d;color:#fff;border:1px solid #5b759e;border-radius:11px;padding:13px 12px;font-size:15px;outline:none}.modal textarea{min-height:100px;resize:vertical}.modal input:focus,.modal select:focus{border-color:#ffde78}.modal .options{display:grid;grid-template-columns:1fr;gap:8px;margin:20px 0}.modal .options button{margin:0;text-align:left;background:#2a4064;border:1px solid #546d97;border-radius:12px;padding:15px;font-size:14px;min-height:52px}.modal .options button:hover{border-color:#ffd968;background:#355681}.modal .progress{height:8px;border-radius:30px;background:#354762;overflow:hidden;margin:12px 0 15px}.modal .progress>div{height:100%;background:linear-gradient(90deg,#76f1b6,#ffe075)}.modal .hero{background:linear-gradient(135deg,#2d5c94,#5d59be);border-radius:16px;padding:20px;text-align:center;font-size:50px;font-weight:950}.modal .question-list{max-height:230px;overflow:auto}.modal .question-list p{padding:10px 12px;background:#ffffff0e;border-radius:10px;margin:8px 0}.modal .question-list button{padding:6px;font-size:11px}.modal .table-wrap{max-height:220px;overflow:auto}table{width:100%;border-collapse:collapse;min-width:430px;font-size:12px}th,td{padding:10px;text-align:left;border-bottom:1px solid #ffffff25}th{color:#ffe18a}.modal .map-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.map-location{border:1px solid #ffffff27;border-radius:11px;padding:12px;background:#ffffff0a;font-size:12px}.map-location b{display:block;margin:5px 0}.modal .quiz-pill{display:inline-block;padding:6px 10px;background:#314b6c;color:#ffda68;font-size:11px;border-radius:20px;font-weight:950}.modal .quiz-counter{font-size:11px;color:#b1c5e3}.modal .result-meta{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}.modal .result-meta span{background:#ffffff15;padding:9px 13px;border-radius:12px;font-size:14px;font-weight:900}.modal .color-options{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.modal .color-options button{width:46px;height:46px;border-radius:12px;border:3px solid #ffffff4b;margin:0;transition:transform .16s}.modal .color-options button.selected{outline:3px solid #ffdf77;transform:translateY(-3px)}.modal .modal-kicker{font-size:10px;font-weight:900;color:#8fc6ff;letter-spacing:1.5px;margin:0 0 5px}.modal .profile-summary{text-align:center;background:#253955;border-radius:14px;padding:15px;margin-bottom:16px}.modal .profile-summary .emoji-avatar{font-size:45px}.modal .profile-summary b{display:block;margin:7px}.modal .setting-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.modal .setting-choices button{margin:0}.modal .setting-choices button.active{background:#ffd75a;color:#212a45}.modal .keyboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}.modal .keyboard-grid div{background:#ffffff0b;padding:12px;border-radius:10px;font-size:12px}.modal .keyboard-grid b{color:#ffdf72}.modal hr{border:0;border-top:1px solid #ffffff20;margin:19px 0}.modal .modal-footer{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
#toast{position:fixed;z-index:60;display:none;left:50%;bottom:25px;transform:translateX(-50%);max-width:min(90vw,440px);background:#142a45f5;border:1px solid #8ae9c8;color:#fff;padding:12px 18px;text-align:center;border-radius:13px;font-weight:900;font-size:12px;box-shadow:0 10px 30px #06162d8c}
@media(max-width:1020px){.hero-layout{grid-template-columns:1.1fr .9fr;min-height:540px;padding-top:25px}.hero-content h1{font-size:clamp(55px,8vw,83px)}.hero-visual{height:450px}.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.site-nav{padding:18px 17px}.brand strong{font-size:16px}.brand small{font-size:7px;letter-spacing:1px}.brand img{width:37px;height:37px}.site-nav nav{gap:8px}.site-nav nav a{display:none}.site-nav .btn-nav{padding:10px 14px}.hero-layout{display:flex;flex-direction:column;gap:2px;text-align:center;padding:38px 19px 39px}.hero-content h1{font-size:clamp(61px,14.5vw,91px);line-height:.95;letter-spacing:-3.5px;margin:19px 0}.hero-lead{margin:0 auto 24px;font-size:13px;line-height:1.7;max-width:450px}.hero-cta{justify-content:center}.hero-benefits{justify-content:center;gap:12px;font-size:10px}.hero-metrics{justify-content:center;margin-top:27px}.hero-metrics b{font-size:23px}.hero-metrics small{font-size:8px}.hero-visual{height:375px;width:min(100%,560px);margin-top:10px}.world-illustration{width:590px;max-width:115%}.world-sticker{font-size:10px;padding:6px 9px}.world-sticker span{font-size:17px}.sticker-top{top:48px;right:0}.sticker-bottom{bottom:65px;left:3%}.world-caption{bottom:15px;right:50%;transform:translateX(50%);white-space:nowrap;font-size:8px}.home-bottom{padding:42px 17px}.feature-grid{gap:11px}.feature-card{padding:14px 11px;min-height:98px}.feature-card b{font-size:12px}.feature-card small{font-size:10px}.feature-icon{font-size:25px}.howto{gap:11px;font-size:11px}#hud{top:10px;left:10px;right:10px}.hud-profile{min-width:150px;padding:6px 9px 6px 6px;gap:6px}.profile-avatar{width:34px;height:35px;font-size:20px}.profile-copy b{font-size:11px;max-width:93px}.profile-copy small{font-size:8px}.hud-right{gap:5px}.world-pill{display:none}.coin-pill{padding:0 10px;height:38px;font-size:12px}.hud-round{width:38px;height:38px;font-size:19px}.zone-label{top:61px;font-size:8px}.mission-card{top:102px;left:10px;padding:8px;max-width:205px}.mission-flag{font-size:15px}.mission-card small{font-size:8px}.mission-card b{font-size:9px}.mission-card em{font-size:8px}#toolbar{top:102px;right:10px;gap:7px}#toolbar button{width:46px;height:45px;gap:0;border-radius:11px}#toolbar button span{font-size:19px}#toolbar button small{font-size:7px}.joystick{width:125px;height:125px;left:16px;bottom:33px}.joystick-knob{width:58px;height:58px;margin-left:-29px;margin-top:-29px}.mobile-actions{right:14px;bottom:47px;gap:9px}.mobile-actions #jump{width:76px;height:76px;font-size:26px}.mobile-actions #sprint{width:55px;height:55px;font-size:19px}.interact-btn{bottom:151px;font-size:11px;padding:11px 12px}.controls-hint{display:none}.modal{padding:17px;border-radius:18px}.modal .map-grid{grid-template-columns:1fr}}
@media(max-width:375px){.site-nav .btn-nav{font-size:10px}.brand strong{font-size:14px}.hero-content h1{font-size:56px}.btn-play,.btn-outline{font-size:11px;padding:12px 16px}.hero-visual{height:310px}.hero-metrics{gap:13px}.hero-metrics small{letter-spacing:.5px}.feature-grid{grid-template-columns:1fr 1fr}.feature-card{flex-direction:column;align-items:start}.mission-card{max-width:180px}}
@media(max-height:600px) and (orientation:landscape){#hud{top:6px}.mission-card{top:65px}#toolbar{top:60px;grid-template-columns:repeat(3,1fr)}#toolbar button{width:46px;height:40px}.joystick{width:106px;height:106px;bottom:12px}.mobile-actions{bottom:22px}.zone-label{top:59px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}