:root{--navy:#072568;--purple:#7b20ce;--gold:#ffcf25;--pink:#f044a2;--cyan:#00c5e8;--blue:#006bfb;--green:#00c86d;--ink:#142451}*{box-sizing:border-box}html{min-height:100%;background:#09246a}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#fff;min-height:100vh;overflow-x:hidden;background:linear-gradient(180deg,#0797ee 0%,#2bbdf9 29%,#6ce2fa 48%,#0e69c9 77%,#09235d 100%)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #ffdc55;outline-offset:3px}.landscape{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 51% 11%,#fff6a3 0%,#b9f6ff 14%,transparent 36%)}.cloud{position:absolute;background:#fff;border-radius:80px;width:210px;height:55px;filter:drop-shadow(0 7px 0 #a8e5fb);opacity:.92}.cloud:before,.cloud:after{content:"";position:absolute;background:white;border-radius:50%}.cloud:before{width:100px;height:95px;left:34px;bottom:12px}.cloud:after{width:130px;height:70px;right:14px;bottom:5px}.c1{top:14%;left:7%;transform:scale(.85)}.c2{top:19%;right:9%;transform:scale(.75)}.c3{top:40%;left:47%;transform:scale(.6);opacity:.6}.hills{position:absolute;bottom:3%;left:-15%;width:130%;height:42%;background:radial-gradient(ellipse at 12% 100%,#048d4c 0 19%,transparent 19.5%),radial-gradient(ellipse at 82% 100%,#0b9b57 0 22%,transparent 22.5%),radial-gradient(ellipse at 52% 100%,#21b46c 0 17%,transparent 17.5%)}.ground{position:absolute;bottom:0;left:0;right:0;height:10%;background:linear-gradient(#1fbb63,#056b57)}.castle{position:absolute;top:27%;font-size:250px;opacity:.3;color:#ffba73;text-shadow:7px 9px #9055a7}.left-castle{left:-2%}.right-castle{right:-2%;transform:scaleX(-1)}.topbar{height:76px;max-width:1180px;margin:auto;padding:8px 22px;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(180deg,#063ca7ef,#032d83e8);border:2px solid #3a90f4;border-top:0;border-radius:0 0 28px 28px;box-shadow:0 9px 0 #052a76,0 14px 22px #061c5570}.brand{border:0;background:none;padding:0;width:145px;height:63px;display:flex;align-items:center}.brand img{width:100%;max-height:100%;object-fit:contain}.topbar nav{display:flex;gap:7px}.topbar nav button,.nav-signin{border:0;border-radius:30px;background:transparent;color:white;font-weight:850;padding:11px 17px;text-shadow:0 2px #10377a}.topbar nav button.active,.topbar nav button:hover{background:linear-gradient(#ffdf4c,#ff9f0a);color:#542500;text-shadow:none;box-shadow:inset 0 2px #fff9b0,0 4px #ba6200}.nav-signin{background:linear-gradient(#d34af5,#7b17bb);border:2px solid #e6a1ff;box-shadow:0 5px #490b83}main{position:relative;z-index:2;min-height:calc(100vh - 126px);padding:20px 20px 28px}.page{display:none;max-width:1050px;margin:auto;animation:arrive .3s ease}.page.visible{display:block}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero{text-align:center;position:relative;max-width:960px;margin:auto;padding:0 20px 20px}.hero-logo{width:min(550px,82vw);height:260px;margin:0 auto -6px;position:relative;filter:drop-shadow(0 15px 3px #05347977)}.hero-logo img{width:100%;height:100%;object-fit:contain}.red-ribbon{position:absolute;bottom:13px;left:50%;transform:translateX(-50%) rotate(-2deg);background:linear-gradient(#ff7847,#d92240 65%,#a70736);border:3px solid #ffd66a;border-radius:9px;padding:7px 35px;white-space:nowrap;font-size:18px;font-weight:1000;letter-spacing:2px;box-shadow:0 6px #71062b;text-shadow:0 2px #9e152c}.hero h1{font-size:clamp(28px,4vw,49px);margin:12px auto 9px;line-height:1.16;font-weight:1000;text-shadow:0 5px #0b3585,0 7px 13px #001b5c}.hero h1 span{color:#ffdd3b}.hero p{font-size:clamp(14px,1.7vw,18px);font-weight:650;max-width:640px;margin:10px auto 22px;line-height:1.5;text-shadow:0 2px 5px #003c87}.heroes{display:flex;justify-content:space-between;position:absolute;inset:120px -35px auto;z-index:-1}.heroes img{width:210px;height:210px;object-fit:contain;filter:drop-shadow(0 8px 1px #0437767d)}.heroes img:first-child{transform:rotate(-8deg)}.heroes img:last-child{transform:rotate(8deg)}.float-letter{position:absolute;font-weight:1000;color:#a43414;font-size:28px;background:linear-gradient(#fffef0,#ffd57b);padding:9px 17px;border:4px solid #fff;box-shadow:0 8px #d88a28,0 12px 15px #00397777;border-radius:12px;transform:rotate(-18deg)}.l1{left:16%;top:46px}.l2{right:16%;top:60px;transform:rotate(15deg)}.l3{right:7%;top:190px;transform:rotate(-11deg)}.game-btn{border:3px solid #fff5bc;color:#fff;font-size:17px;font-weight:1000;letter-spacing:.2px;text-shadow:0 2px 1px #0005;border-radius:18px;min-height:58px;padding:11px 25px;box-shadow:inset 0 3px 0 #ffffff99,inset 0 -4px 0 #0002,0 7px 0 #082e74,0 10px 14px #001d6070;transition:transform .12s,filter .12s;display:inline-flex;align-items:center;justify-content:center;gap:13px}.game-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.game-btn:active{transform:translateY(4px);box-shadow:inset 0 3px 0 #ffffff99,0 2px 0 #082e74}.game-btn.gold{background:linear-gradient(#ffed5c 0%,#ffc315 55%,#ff8d04 100%);color:#572000;text-shadow:0 1px #fff5a2;border-color:#fff6a7;box-shadow:inset 0 3px #ffffffa8,0 7px #a94b0b,0 12px 20px #00346c55}.game-btn.purple{background:linear-gradient(#d64cfd,#9322df 57%,#6613a8);border-color:#e9b0ff;box-shadow:inset 0 3px #ffffff88,0 7px #4c0a87,0 12px 20px #00346c55}.game-btn.blue{background:linear-gradient(#1cddff,#0079ff 52%,#0051ca);border-color:#a1f3ff;box-shadow:inset 0 3px #ffffff88,0 7px #003a9c,0 12px 20px #00346c55}.game-btn.green{background:linear-gradient(#63fa63,#00cc54 52%,#009b46);border-color:#c5ffc6;box-shadow:inset 0 3px #ffffff88,0 7px #006738,0 12px 20px #00346c55}.game-btn.orange{background:linear-gradient(#ffe86a,#ff9a08 55%,#ef6000);border-color:#fff3b5}.game-btn.primary{min-width:280px;font-size:22px;min-height:72px}.btn-icon{font-size:24px}.feature-row{display:flex;justify-content:center;gap:34px;margin-top:35px}.feature-row>div{display:flex;align-items:center;flex-direction:column;gap:7px;font-weight:900;text-shadow:0 2px #002c71;font-size:13px}.bubble{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;font-size:29px;border:3px solid #bffaff;box-shadow:0 6px #00376c,0 9px 13px #002a6880}.bubble.purple{background:linear-gradient(#e46afa,#7e17c5)}.bubble.green{background:linear-gradient(#5afad3,#009a72)}.bubble.blue{background:linear-gradient(#59ddff,#0075e7)}.bubble.orange{background:linear-gradient(#ffcb51,#ed5a08)}.screen-title{text-align:center;margin:0 auto 20px}.screen-title img{width:200px;height:115px;object-fit:contain;display:block;margin:auto}.screen-title p{font-weight:800;text-shadow:0 2px #033e82}.title-ribbon{background:linear-gradient(#d75afa 0%,#8e22c6 40%,#4e0b8a 100%);border:3px solid #f1b3ff;box-shadow:0 6px #3b087b,0 11px 18px #06205d55;max-width:440px;border-radius:12px;color:white;text-align:center;font-size:clamp(23px,4vw,31px);font-weight:1000;letter-spacing:.5px;text-shadow:0 3px #4e167f;padding:12px 24px;margin:0 auto 20px}.play-actions{display:grid;gap:17px;max-width:470px;margin:0 auto}.play-actions .game-btn{min-height:84px;justify-content:flex-start;text-align:left;font-size:30px}.play-actions .game-btn span{display:flex;flex-direction:column;gap:4px;font-size:20px}.play-actions .game-btn small{font-size:13px;font-weight:650}.mini-grid{display:flex;gap:12px;justify-content:center;margin:31px auto}.mini-grid button{width:132px;min-height:86px;border:2px solid #8eeaff;border-radius:17px;background:linear-gradient(#063f9e,#07215f);color:white;font-weight:900;box-shadow:0 5px #02133c}.mini-grid span{display:block;font-size:26px;margin-bottom:5px}.panel{max-width:460px;margin:18px auto 30px;padding:24px 27px 28px;border:5px solid #fff;border-radius:28px;background:linear-gradient(180deg,#fff,#eaf4ff);box-shadow:0 10px 0 #00468e,0 16px 30px #0227637d;color:var(--ink)}.panel.wide{max-width:620px}.panel>p{text-align:center;font-weight:700;margin:4px 0 19px}.panel .title-ribbon{margin:-38px auto 22px}.panel label{display:block;font-weight:850;margin:14px 0;color:#142451;font-size:14px}.panel input,.panel select,.arena-panel input{display:block;width:100%;margin-top:7px;padding:12px 14px;border:2px solid #b8cce8;border-radius:11px;background:#fff;color:#182a57;font-weight:600;min-height:47px}.game-btn.full{width:100%;margin-top:13px}.notice{font-size:12px!important;line-height:1.5;color:#566a8e;font-weight:600!important;margin:18px 0 0!important}.tabs{display:flex;gap:6px;background:#e5eafa;border-radius:13px;padding:5px;margin:15px 0}.tabs button{flex:1;border:0;border-radius:9px;background:transparent;padding:10px 6px;color:#27406d;font-weight:900}.tabs button.chosen{background:linear-gradient(#208cff,#004ae2);color:white;box-shadow:0 3px #002d97}.ranking{display:grid;gap:9px}.rank-row{display:flex;align-items:center;gap:13px;padding:10px;border-radius:13px;background:#f0f5ff;border:1px solid #d4e4ff;color:#142451;font-weight:900}.rank-row:first-child{background:linear-gradient(90deg,#fff3ae,#fffbdd);border:2px solid #ffd64a}.rank-row img{width:40px;height:40px;object-fit:contain}.rank-row strong{margin-left:auto}.rank-medal{font-size:24px;width:34px;text-align:center}.account-avatars{display:flex;justify-content:center}.account-avatars img{width:84px;height:84px;object-fit:contain;margin:0 -6px}.arena{max-width:680px;margin:20px auto}.arena-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.avatar-chip{display:flex;align-items:center;gap:5px;background:linear-gradient(#0b54c4,#073383);padding:8px;border-radius:13px;border:2px solid #60d6ff;font-weight:850}.avatar-chip img{width:39px;height:39px;object-fit:contain}.clock{background:linear-gradient(#fa4eb0,#a8117b);border:3px solid #ffd3fa;border-radius:30px;padding:9px 19px;font-size:26px;font-weight:1000;box-shadow:0 5px #640e64}.arena-panel{background:linear-gradient(#fff,#e8f4ff);border:5px solid white;border-radius:26px;padding:25px;color:#182a57;text-align:center;box-shadow:0 8px #0253a7}.turn-ribbon{background:linear-gradient(#178aff,#063a9c);color:white;border-radius:15px;padding:12px;font-size:23px;font-weight:1000}.arena-panel p{font-weight:750}.letters{display:flex;justify-content:center;gap:9px;margin:22px 0}.letters span{display:grid;place-items:center;width:64px;height:74px;background:linear-gradient(#fff9e4,#ffd67c);border:3px solid white;border-radius:12px;color:#3e2a33;font-size:35px;font-weight:1000;box-shadow:0 5px #d58d29}.game-bottom{display:flex;justify-content:center;gap:15px;margin:22px}.demo-feedback{color:#5b6882;font-size:13px}.results-panel{max-width:470px;text-align:center;margin:20px auto;padding:25px;border:4px solid #ffdd66;border-radius:28px;background:linear-gradient(#5f2cce,#21137b);box-shadow:0 10px #071a63}.trophy{font-size:80px}.winner-title{font-size:clamp(45px,8vw,75px);font-weight:1000;color:#ffd641;text-shadow:0 5px #ac4d04,0 8px #49176b}.winner-avatar{width:110px;height:110px;object-fit:contain}.results-panel h2{margin:0}.score-ribbon{background:linear-gradient(#fff7a8,#ffae1b);border-radius:13px;padding:12px;color:#713700;font-weight:1000;font-size:22px;margin:15px auto}.results-list{text-align:left;margin-bottom:20px}.results-list div{background:#fff;color:#1b3272;border-radius:10px;margin:7px 0;padding:11px}.results-list strong{float:right}.rules-list{display:grid;gap:13px;margin:20px 0}.rules-list>div{display:flex;gap:15px;align-items:center;padding:10px;border-bottom:1px solid #dbe5f3}.rules-list b{width:43px;height:43px;flex-shrink:0;border-radius:50%;background:linear-gradient(#26a8ff,#0050db);color:#fff;border:2px solid white;display:grid;place-items:center;font-size:23px;box-shadow:0 3px #00459d}.rules-list span{display:grid;gap:3px}.rules-list small{font-size:13px;color:#52668a}footer{position:relative;z-index:3;max-width:1180px;margin:auto;padding:14px 24px 18px;display:flex;justify-content:space-between;gap:10px;color:#f5faff;font-size:12px;font-weight:700;text-shadow:0 2px #003271}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#082765;border:2px solid #74dbff;color:white;padding:13px 20px;border-radius:14px;z-index:30;display:none;max-width:90vw;text-align:center;font-weight:750;box-shadow:0 8px 25px #0007}@media(max-width:780px){.topbar{height:70px;padding:7px 10px;border-radius:0 0 15px 15px;gap:5px}.brand{width:100px;min-width:90px}.topbar nav{gap:1px}.topbar nav button{padding:9px 7px;font-size:11px}.nav-signin{font-size:11px;padding:9px 10px}main{padding:15px 10px}.hero-logo{height:225px;margin-bottom:-7px}.heroes{inset:155px -5px auto}.heroes img{width:130px;height:130px}.hero h1{margin-top:12px;max-width:500px}.hero p{max-width:430px}.float-letter{font-size:19px;padding:5px 10px}.l1{left:4%;top:40px}.l2{right:4%;top:40px}.l3{right:0;top:165px}.feature-row{gap:15px}.bubble{width:48px;height:48px;font-size:23px}.feature-row>div{font-size:11px}.castle{font-size:130px;top:37%}}@media(max-width:480px){.topbar{flex-wrap:wrap;height:auto;justify-content:space-between;padding:4px 9px 9px}.brand{width:110px;height:47px}.nav-signin{order:2}.topbar nav{order:3;width:100%;justify-content:space-around}.topbar nav button{padding:7px 11px}.hero{padding:0 3px 15px}.hero-logo{height:215px;width:96vw;margin:0 auto -5px}.red-ribbon{bottom:14px;font-size:12px;padding:5px 21px}.heroes{inset:166px 0 auto}.heroes img{width:100px;height:100px}.hero h1{margin-top:12px;font-size:30px;line-height:1.18}.hero p{font-size:13px;padding:0 6px}.hero .game-btn.primary{min-height:65px;min-width:245px}.feature-row{gap:7px;justify-content:space-between;margin-top:26px}.feature-row>div{width:24%;font-size:10px}.bubble{width:46px;height:46px}.float-letter{display:none}.panel{padding:21px 15px 23px;margin-top:25px}.panel .title-ribbon{margin-top:-34px}.arena-top{gap:5px}.avatar-chip{font-size:10px;padding:4px}.avatar-chip img{width:28px;height:28px}.clock{font-size:18px;padding:8px}.arena-panel{padding:14px}.letters span{width:55px;height:64px;font-size:30px}.game-bottom .game-btn{padding:10px;font-size:13px}footer{font-size:10px;flex-direction:column;text-align:center}.play-actions .game-btn{min-height:78px}}