/* Zelcar Games Creators — design system (Direction A "Premium Magic Fruit World", approved 19 Sep 2026) Multi-game inside: game accents via data-game on or on a card. */ :root{ --navy-950:#070b1f; --navy-900:#0b1230; --navy-800:#101a44; --navy-700:#172457; --navy-600:#22336f; --ink:#f5f7ff; --ink-2:#c9d2f2; --ink-3:#8f9bc7; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --orange:#ff8a1f; --orange-2:#ff6a00; --gold:#ffc93c; --gold-2:#ffb300; --blue:#3f8cff; --blue-2:#2b6fe0; --green:#4ade80; --red:#ff5c7a; --purple:#9b6dff; --accent:var(--orange); --accent-2:var(--orange-2); --card:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); --card-solid:#111b45; --shadow:0 18px 50px rgba(0,0,0,.45); --r:22px; --r-sm:14px; --font:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif; } [data-game="mfw"]{--accent:#ff8a1f;--accent-2:#ff6a00} [data-game="sf"]{--accent:#3ecf6b;--accent-2:#1fa956} [data-game="xera"]{--accent:#a06bff;--accent-2:#7a45e6} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--navy-900);line-height:1.5;-webkit-font-smoothing:antialiased; background-image:radial-gradient(1200px 600px at 80% -10%,rgba(63,140,255,.16),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(255,138,31,.10),transparent 60%);} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{margin:0;line-height:1.12;font-weight:900;letter-spacing:-.01em} h1{font-size:clamp(34px,5vw,60px)} h2{font-size:clamp(26px,3.4vw,40px)} h3{font-size:20px} h4{font-size:16px} p{margin:0} .muted{color:var(--ink-3)} .soft{color:var(--ink-2)} .hl{color:var(--accent)} .hl-gold{color:var(--gold)} .hl-blue{color:#79b4ff} .wrap{width:min(1200px,calc(100% - 40px));margin:0 auto} .stack>*+*{margin-top:14px} .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .between{justify-content:space-between} .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g6{grid-template-columns:repeat(6,1fr)} @media (max-width:980px){.g3,.g4,.g6{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.g2,.g3,.g4,.g6{grid-template-columns:1fr}} .sr{position:absolute;left:-9999px} .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;border:1px solid var(--line-2);background:rgba(255,255,255,.06)} .tag.orange{background:rgba(255,138,31,.16);border-color:rgba(255,138,31,.4);color:#ffc08a} .tag.gold{background:rgba(255,201,60,.14);border-color:rgba(255,201,60,.45);color:var(--gold)} .tag.green{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.4);color:var(--green)} .tag.blue{background:rgba(63,140,255,.16);border-color:rgba(63,140,255,.4);color:#9cc3ff} .tag.red{background:rgba(255,92,122,.14);border-color:rgba(255,92,122,.4);color:#ff9fb3} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:14px;font-weight:900;font-size:16px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s,background .2s;white-space:nowrap;font-family:inherit;color:var(--ink)} .btn:active{transform:translateY(1px)} .btn-primary{background:linear-gradient(180deg,#ff9a3a,#ff6a00);color:#1a0a00;box-shadow:0 10px 30px rgba(255,122,0,.35),inset 0 1px 0 rgba(255,255,255,.35)} .btn-primary:hover{box-shadow:0 14px 36px rgba(255,122,0,.5)} .btn-ghost{background:rgba(255,255,255,.06);border-color:var(--line-2)} .btn-ghost:hover{background:rgba(255,255,255,.1)} .btn-blue{background:linear-gradient(180deg,#4d97ff,#2b6fe0);box-shadow:0 10px 26px rgba(43,111,224,.35)} .btn-sm{padding:9px 14px;font-size:14px;border-radius:11px} .btn-xs{padding:6px 10px;font-size:13px;border-radius:9px} .btn[disabled]{opacity:.5;cursor:not-allowed} /* Cards */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 1px 0 rgba(255,255,255,.04) inset} .card.solid{background:var(--card-solid)} .card.glow{border-color:rgba(255,201,60,.45);box-shadow:0 0 0 1px rgba(255,201,60,.15),0 20px 50px rgba(255,160,0,.12)} .card h3{margin-bottom:6px} .kpi{display:flex;flex-direction:column;gap:6px;padding:18px;text-align:center;align-items:center} .kpi img{width:64px;height:56px;object-fit:cover;border-radius:12px} .kpi .v{font-size:28px;font-weight:900;line-height:1} .kpi .l{font-size:13px;color:var(--ink-2);font-weight:800} .kpi .d{font-size:12px;color:var(--ink-3)} .kpi .up{color:var(--green)} .kpi .down{color:var(--red)} .kpi.gold{border-color:rgba(255,201,60,.45);background:linear-gradient(180deg,rgba(255,201,60,.12),rgba(255,201,60,.03))} /* Top nav (public) */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(11,18,48,.75);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:22px;height:72px} .nav .brand{display:flex;align-items:center;gap:12px;font-weight:900} .nav .brand img{height:44px} .nav .brand .by{font-size:11px;color:var(--ink-3);font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1} .nav .brand .by b{display:block;color:var(--ink);font-size:14px;letter-spacing:0;text-transform:none} .nav .links{display:flex;gap:22px;margin-left:10px;font-weight:800;color:var(--ink-2)} .nav .links a:hover{color:#fff} .nav .spacer{flex:1} .nav .lang{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:800;font-size:14px;padding:8px 10px;border-radius:10px;border:1px solid transparent} .nav .lang:hover{border-color:var(--line-2)} .burger{display:none;background:none;border:1px solid var(--line-2);color:#fff;border-radius:10px;width:42px;height:42px;font-size:20px} @media (max-width:900px){.nav .links,.nav .lang{display:none}.burger{display:inline-flex;align-items:center;justify-content:center}.nav .brand .by{display:none}} .mobile-menu{display:none;position:fixed;inset:72px 0 0 0;background:rgba(7,11,31,.97);z-index:49;padding:24px;flex-direction:column;gap:18px;font-size:20px;font-weight:900} .mobile-menu.open{display:flex} /* Hero */ .hero{padding:56px 0 30px;position:relative;overflow:hidden} .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center} @media (max-width:980px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:28px}} .hero h1 span{display:block} .hero .sub{font-size:18px;color:var(--ink-2);margin-top:18px;font-weight:700} .hero .cta{margin-top:26px} .hero .art{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)} .hero .art img{width:100%;height:auto} .hero .art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,48,.55),transparent 22%),linear-gradient(0deg,rgba(11,18,48,.5),transparent 25%)} .stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:center} .stores img{height:40px;width:auto;opacity:.95} .stores .note{font-size:12px;color:var(--ink-3);font-weight:800} .section{padding:56px 0} .section-title{text-align:center;margin-bottom:28px} .section-title h2 .leaf{color:var(--orange);font-size:.7em;vertical-align:middle;margin:0 10px} .section-title p{margin-top:8px;color:var(--ink-2);font-size:17px;max-width:720px;margin-left:auto;margin-right:auto} .step{display:flex;gap:16px;align-items:center} .step img{width:88px;height:84px;object-fit:cover;border-radius:16px;flex:none} .step .n{width:34px;height:34px;border-radius:50%;background:rgba(255,138,31,.16);border:2px solid var(--orange);color:var(--orange);display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:none} .step h3{font-size:19px} .step p{color:var(--ink-2);font-size:14px} .tiers{display:grid;grid-template-columns:1fr 1fr .8fr;gap:18px} @media (max-width:980px){.tiers{grid-template-columns:1fr}} .tier{display:flex;gap:18px;align-items:center;padding:22px} .tier img{width:120px;height:auto;flex:none;border-radius:16px} .tier .pct{font-size:54px;font-weight:900;line-height:1} .tier .name{font-size:22px;font-weight:900} .tier .desc{font-size:14px;color:var(--ink-2)} .tier.partner .pct{color:#79b4ff} .tier.elite .pct{color:var(--orange)} .tier.bonus{flex-direction:column;text-align:center;gap:8px;border-color:rgba(255,201,60,.5)} .tier.bonus img{width:160px} .tier.bonus .pct{color:var(--gold)} .calc{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media (max-width:900px){.calc{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:8px} .field label{font-weight:800;font-size:14px;color:var(--ink-2);display:flex;justify-content:space-between} .field label output{color:#fff} input[type=range]{width:100%;accent-color:var(--orange)} input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:700;outline:none} input:focus,select:focus,textarea:focus{border-color:var(--orange)} select option{color:#111} .result{display:grid;grid-template-columns:1fr 1fr;gap:14px} .result .box{padding:16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)} .result .box .v{font-size:30px;font-weight:900} .result .box .l{font-size:12px;color:var(--ink-3);font-weight:800;text-transform:uppercase;letter-spacing:.06em} .faq details{border:1px solid var(--line);border-radius:16px;padding:16px 20px;background:rgba(255,255,255,.04)} .faq details+details{margin-top:10px} .faq summary{cursor:pointer;font-weight:900;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center} .faq summary::after{content:"+";font-size:24px;color:var(--orange)} .faq details[open] summary::after{content:"–"} .faq details p{margin-top:10px;color:var(--ink-2)} .games{display:grid;grid-template-columns:1.2fr .8fr;gap:18px} @media (max-width:900px){.games{grid-template-columns:1fr}} .game-card{position:relative;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border-radius:var(--r);border:1px solid var(--line)} .game-card .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;z-index:0;opacity:.9} .game-card .fade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,11,31,.95) 20%,rgba(7,11,31,.2));z-index:1} .game-card>*:not(.bg):not(.fade){position:relative;z-index:2} .game-card .logo{height:70px;width:auto;margin-bottom:10px} footer{border-top:1px solid var(--line);padding:34px 0 40px;margin-top:40px;color:var(--ink-3);font-size:14px} footer .wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between} footer .flinks{display:flex;gap:18px;flex-wrap:wrap;font-weight:800;color:var(--ink-2)} footer img{height:34px;opacity:.9} /* Toast */ .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#0f1a46;border:1px solid var(--line-2);padding:12px 18px;border-radius:14px;font-weight:800;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:200} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* App shell */ .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh} .side{background:linear-gradient(180deg,#0d1640,#0a1030);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto} .side .logo{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:14px} .side .logo img{height:64px} .side .logo .creators{font-size:12px;letter-spacing:.24em;font-weight:900;color:var(--gold);text-transform:uppercase} .side .logo .by{font-size:11px;color:var(--ink-3);font-weight:800} .side a.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-weight:800;color:var(--ink-2);border:1px solid transparent} .side a.item .ic{width:26px;text-align:center;font-size:17px} .side a.item:hover{background:rgba(255,255,255,.05);color:#fff} .side a.item.active{background:linear-gradient(180deg,rgba(63,140,255,.35),rgba(43,111,224,.25));border-color:rgba(255,138,31,.6);color:#fff;box-shadow:0 0 0 1px rgba(255,138,31,.25)} .side .mascot{margin-top:auto;text-align:center;padding-top:10px} .side .mascot img{width:150px;margin:0 auto} .side .mascot .n{font-weight:900;margin-top:4px} .side .mascot .s{font-size:12px;color:#79b4ff;font-weight:800} .main{padding:22px 26px 60px;min-width:0} .topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap} .topbar h2{font-size:26px} .topbar .spacer{flex:1} .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ff8a1f,#ffc93c);display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#1a0a00} .user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.05)} .user-chip .who{line-height:1.1}.user-chip .who b{display:block;font-size:14px}.user-chip .who span{font-size:12px;color:var(--ink-3)} .game-switch{display:none} .game-switch.visible{display:inline-flex} @media (max-width:900px){.app{grid-template-columns:1fr}.side{position:fixed;left:-280px;width:260px;z-index:60;transition:.2s}.side.open{left:0}.main{padding:16px}.side .mascot{display:none}.side-toggle{display:inline-flex!important}} .side-toggle{display:none;background:none;border:1px solid var(--line-2);color:#fff;border-radius:10px;width:40px;height:40px;font-size:18px;align-items:center;justify-content:center} .view{display:none}.view.active{display:block} /* Tables */ .table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px} .table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:900;padding:10px 12px;border-bottom:1px solid var(--line-2)} .table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle} .table tr:last-child td{border-bottom:0} .table .num{text-align:right;font-variant-numeric:tabular-nums} .table .money{color:var(--green);font-weight:900} .table .win{background:rgba(74,222,128,.06)} .table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line)} .code{font-family:ui-monospace,Consolas,monospace;background:rgba(0,0,0,.35);padding:3px 8px;border-radius:8px;font-size:13px;border:1px solid var(--line)} pre.code{padding:14px;overflow:auto;white-space:pre;font-size:13px;line-height:1.5} .progress{height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--line)} .progress i{display:block;height:100%;background:linear-gradient(90deg,#ff6a00,#ffc93c);border-radius:999px} .mini{font-size:12px;color:var(--ink-3);font-weight:800} .qr-box{background:#fff;padding:8px;border-radius:12px;display:inline-block;line-height:0} .qr-box canvas,.qr-box svg{display:block} .modal{position:fixed;inset:0;background:rgba(4,7,20,.72);display:none;align-items:center;justify-content:center;z-index:100;padding:20px} .modal.open{display:flex} .modal .box{width:min(560px,100%);max-height:90vh;overflow:auto} .notice{padding:12px 16px;border-radius:14px;border:1px solid rgba(255,201,60,.4);background:rgba(255,201,60,.1);font-size:14px;font-weight:700} .notice.blue{border-color:rgba(63,140,255,.4);background:rgba(63,140,255,.1)} .notice.red{border-color:rgba(255,92,122,.4);background:rgba(255,92,122,.1)} .chart{width:100%;height:auto;display:block} .legend{display:flex;gap:16px;font-size:13px;font-weight:800;color:var(--ink-2)} .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px} .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap} .tabs button{background:none;border:0;color:var(--ink-2);font:inherit;font-weight:900;padding:10px 14px;border-bottom:2px solid transparent;cursor:pointer} .tabs button.active{color:#fff;border-color:var(--orange)} .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} .media{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04)} .media .th{aspect-ratio:16/10;background:#0a1030;display:flex;align-items:center;justify-content:center;overflow:hidden} .media .th img{width:100%;height:100%;object-fit:cover} .media .th.v{aspect-ratio:16/10} .media .b{padding:10px 12px;font-size:13px} .media .b b{display:block;font-size:14px} .media .b .m{color:var(--ink-3);font-size:12px} .doc{max-width:860px;margin:0 auto;padding:40px 0 60px} .doc h1{font-size:36px;margin-bottom:6px} .doc h2{font-size:24px;margin:34px 0 10px} .doc h3{font-size:18px;margin:22px 0 8px} .doc p,.doc li{color:var(--ink-2);font-size:16px} .doc ul,.doc ol{padding-left:22px} .doc li+li{margin-top:6px} .doc table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px} .doc th,.doc td{border:1px solid var(--line-2);padding:8px 10px;text-align:left} .doc th{background:rgba(255,255,255,.06)} .doc .meta{color:var(--ink-3);font-weight:800;font-size:14px;margin-bottom:24px} .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)} .check input{margin-top:4px;accent-color:var(--orange);width:18px;height:18px} .split{display:grid;grid-template-columns:1.2fr .8fr;gap:18px} @media (max-width:980px){.split{grid-template-columns:1fr}} .sparkle{position:absolute;pointer-events:none;opacity:.5} @media print{.nav,.side,.topbar,footer,.btn{display:none!important}.app{display:block}body{background:#fff;color:#000}}