/* ========================================================================== KGame — mobile-first app shell Palette carried over from Juicy Royale so the lobby and the game feel like one product: midnight plum, hot magenta, sunset amber, royal gold. ========================================================================== */ :root{ --plum:#12051F; --plum-1:#1B0830; --plum-2:#2C0F4A; --plum-3:#3A1163; --magenta:#E0407A; --amber:#FF9B3D; --gold:#FFC93C; --gold-dk:#C77E14; --lime:#8BE04A; --cream:#FFF3D6; --ink:#0B0313; --text:#FFF3D6; --text-dim:rgba(255,243,214,.62); --text-faint:rgba(255,243,214,.38); --panel:rgba(30,10,58,.72); --panel-2:rgba(44,15,74,.55); --line:rgba(255,201,60,.16); --line-soft:rgba(255,243,214,.10); --ok:#43C67A; --warn:#FFC93C; --bad:#FF5A78; --disp:'Lilita One','Arial Black',sans-serif; --body:'Nunito','Segoe UI',system-ui,sans-serif; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --r-sm:10px; --r-md:14px; --r-lg:20px; --tab-h:62px; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%} body{ font-family:var(--body); font-weight:700; color:var(--text); background:#000; min-height:100dvh; } /* ---------- the phone ---------- */ /* Desktop gets the same layout, just framed. No separate desktop design. Everything outside the max-width column is pure black — the gradient backdrop lives only inside .phone, never on . */ .phone{ position:relative; width:100%; max-width:480px; min-height:100dvh; margin:0 auto; display:flex; flex-direction:column; background: radial-gradient(130% 44% at 50% 0%, rgba(58,17,99,.9) 0%, transparent 60%), linear-gradient(180deg,#170627 0%, #1B0830 40%, #12051F 100%); } @media (min-width:520px){ body{padding:0} .phone{ box-shadow:0 0 0 1px rgba(255,201,60,.14), 0 30px 90px rgba(0,0,0,.6); } } /* ---------- top bar ---------- */ .topbar{ position:sticky;top:0;z-index:40; display:flex;align-items:center;justify-content:space-between;gap:10px; padding:calc(var(--sat) + 10px) 14px 10px; background:linear-gradient(180deg, rgba(18,5,31,.96), rgba(18,5,31,.78)); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .brand{display:flex;align-items:center;text-decoration:none} .brand-logo{height:42px;width:auto;display:block} .purse{ display:flex;align-items:center;gap:6px; padding:6px 6px 6px 12px;border-radius:999px; text-decoration:none;color:var(--cream); background:rgba(11,3,19,.7); border:1px solid var(--line); } .purse-amt{font-family:var(--disp);font-size:15px;letter-spacing:.3px} .purse-cur{font-size:10px;color:var(--text-faint);letter-spacing:.6px} .purse-plus{ width:22px;height:22px;border-radius:50%; display:grid;place-items:center; font-family:var(--disp);font-size:15px;color:var(--ink); background:linear-gradient(160deg,var(--lime),#5FBF2E); box-shadow:0 2px 0 #3E8A1E; } .topbar-auth{display:flex;gap:7px} /* ---------- screen ---------- */ .screen{ flex:1; padding:14px 14px calc(var(--tab-h) + var(--sab) + 22px); } .screen.bare{padding:0} /* ---------- tab bar ---------- */ .tabbar{ position:fixed;bottom:0;left:50%;transform:translateX(-50%); z-index:50; width:100%;max-width:480px; display:grid;grid-template-columns:repeat(5,1fr); padding-bottom:var(--sab); background:linear-gradient(180deg, rgba(18,5,31,.88), rgba(11,3,19,.99)); backdrop-filter:blur(14px); border-top:1px solid var(--line); } .tab{ height:var(--tab-h); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; text-decoration:none;color:var(--text-faint); font-size:10px;font-weight:800;letter-spacing:.3px; transition:color .16s ease; } .tab-ico{font-size:19px;line-height:1;filter:grayscale(1) opacity(.65);transition:filter .16s ease} .tab.on{color:var(--gold)} .tab.on .tab-ico{filter:none} .tab.on::before{ content:"";position:absolute;margin-top:-24px; width:26px;height:3px;border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--amber),var(--gold)); } /* ---------- typography ---------- */ h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:.3px;line-height:1.1} h1{font-size:26px} h2{font-size:19px} h3{font-size:15px} p{line-height:1.5;color:var(--text-dim);font-weight:600} a{color:var(--gold)} .eyebrow{ font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase; color:var(--amber); } .section{margin:22px 0 0} .section-head{ display:flex;align-items:baseline;justify-content:space-between; margin-bottom:11px; } .section-head a{font-size:11px;font-weight:800;text-decoration:none;color:var(--text-faint)} .muted{color:var(--text-dim)} .faint{color:var(--text-faint)} .tiny{font-size:11px} .center{text-align:center} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:13px 20px;border:0;border-radius:var(--r-md); font-family:var(--body);font-size:14px;font-weight:900;letter-spacing:.3px; text-decoration:none;cursor:pointer; transition:transform .1s ease, filter .16s ease; } .btn:active{transform:translateY(2px)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .btn-sm{padding:8px 13px;font-size:12px;border-radius:var(--r-sm)} .btn-block{display:flex;width:100%} .btn-gold{ color:var(--ink); background:linear-gradient(170deg,#FFE79A,var(--gold) 42%,var(--amber)); box-shadow:0 4px 0 var(--gold-dk), 0 10px 22px rgba(255,155,61,.28); } .btn-gold:active{box-shadow:0 2px 0 var(--gold-dk)} .btn-lime{ color:#06230C; background:linear-gradient(170deg,#C6F58F,var(--lime) 45%,#5FBF2E); box-shadow:0 4px 0 #3E8A1E; } .btn-lime:active{box-shadow:0 2px 0 #3E8A1E} .btn-magenta{ color:#fff; background:linear-gradient(170deg,#FF7AA6,var(--magenta) 45%,#B02458); box-shadow:0 4px 0 #8E1B45; } .btn-magenta:active{box-shadow:0 2px 0 #8E1B45} .btn-ghost{ color:var(--cream); background:rgba(255,243,214,.07); border:1px solid var(--line-soft); } .btn-danger{color:#fff;background:rgba(255,90,120,.16);border:1px solid rgba(255,90,120,.4)} /* ---------- cards & panels ---------- */ .card{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:16px; } .card + .card{margin-top:12px} .card-tight{padding:13px} .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .stat{ background:var(--panel-2); border:1px solid var(--line-soft); border-radius:var(--r-md); padding:12px 10px;text-align:center; } .stat-val{font-family:var(--disp);font-size:19px;color:var(--gold);line-height:1.15} .stat-lbl{font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--text-faint);margin-top:3px} /* ---------- banner carousel ---------- */ .banners{ display:flex;gap:11px; overflow-x:auto;scroll-snap-type:x mandatory; margin:0 -14px;padding:2px 14px 8px; scrollbar-width:none; } .banners::-webkit-scrollbar{display:none} .banner{ position:relative;flex:0 0 88%;scroll-snap-align:center; min-height:132px;border-radius:var(--r-lg); padding:16px 15px; display:flex;flex-direction:column;justify-content:center; text-decoration:none;color:#fff;overflow:hidden; box-shadow:0 10px 28px rgba(0,0,0,.42); } .banner::after{ /* single slow shine sweep — the one bit of ambient motion in the shell */ content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 62%); transform:translateX(-120%); animation:sweep 5.5s ease-in-out infinite; } @keyframes sweep{0%,62%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}} .banner-glyph{ position:absolute;right:-6px;bottom:-16px; font-size:82px;opacity:.24;transform:rotate(-12deg);pointer-events:none; } .banner .eyebrow{color:rgba(255,255,255,.78)} .banner h2{margin:4px 0 3px;font-size:23px;text-shadow:0 2px 10px rgba(0,0,0,.35)} .banner p{font-size:12px;color:rgba(255,255,255,.85);max-width:74%} .banner-cta{ align-self:flex-start;margin-top:10px; padding:6px 13px;border-radius:999px; font-size:11px;font-weight:900;letter-spacing:.4px; color:var(--ink);background:var(--cream); } /* ---------- game grid ---------- */ .chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{ flex:0 0 auto;padding:7px 14px;border-radius:999px; font-size:12px;font-weight:800;text-decoration:none; color:var(--text-dim); background:rgba(255,243,214,.06); border:1px solid var(--line-soft); cursor:pointer; } .chip.on{ color:var(--ink); background:linear-gradient(160deg,var(--gold),var(--amber)); border-color:transparent; } .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tile{ position:relative; display:block;text-decoration:none; border-radius:var(--r-md);overflow:hidden; aspect-ratio:1/1.12; box-shadow:0 6px 16px rgba(0,0,0,.36); transition:transform .12s ease; } .tile:active{transform:scale(.96)} .tile-art{ position:absolute;inset:0; display:grid;place-items:center; font-size:38px; } .tile-art::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 44%,rgba(0,0,0,.72) 100%); } .tile-glyph{position:relative;z-index:0;line-height:1} .tile-img{ position:absolute;inset:0;z-index:1; width:100%;height:100%;object-fit:cover; } .tile-name{ position:absolute;left:0;right:0;bottom:0; padding:7px 8px; font-size:10.5px;font-weight:900;color:#fff;line-height:1.2; text-shadow:0 1px 4px rgba(0,0,0,.7); } .tile.has-image .tile-name{display:none} .tile.has-image .tile-art::after{display:none} .tile-badge{ position:absolute;top:6px;left:6px;z-index:2; padding:2px 7px;border-radius:999px; font-size:8.5px;font-weight:900;letter-spacing:.7px; color:var(--ink);background:var(--gold); } .tile.locked .tile-art{filter:grayscale(.7) brightness(.62)} .tile-lock{ position:absolute;top:6px;right:6px;z-index:2; font-size:12px;opacity:.85; } /* ---------- forms ---------- */ .field{margin-bottom:13px} .field label{ display:block;margin-bottom:6px; font-size:11px;font-weight:900;letter-spacing:.6px;text-transform:uppercase; color:var(--text-faint); } .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field select, .field textarea{ width:100%; padding:14px 14px; font-family:var(--body);font-size:15px;font-weight:700; color:var(--cream); background:rgba(11,3,19,.6); border:1px solid var(--line-soft); border-radius:var(--r-md); outline:none; transition:border-color .16s ease, box-shadow .16s ease; } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,201,60,.16); } .field input::placeholder{color:var(--text-faint);font-weight:600} .field .help{margin-top:5px;font-size:11px;color:var(--text-faint);font-weight:600} .field .err{margin-top:5px;font-size:11.5px;color:var(--bad);font-weight:800} .field.has-err input{border-color:var(--bad)} .amount-field{position:relative} .amount-field .cur{ position:absolute;left:14px;top:50%;transform:translateY(-50%); font-family:var(--disp);font-size:16px;color:var(--text-faint); } .amount-field input{padding-left:44px;font-family:var(--disp);font-size:22px} .quick-amounts{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px} .quick-amounts button{ flex:1 1 26%;padding:9px 4px;border:0;border-radius:var(--r-sm); font-family:var(--body);font-size:13px;font-weight:900;cursor:pointer; color:var(--cream);background:rgba(255,243,214,.07); border:1px solid var(--line-soft); } .quick-amounts button:active{background:rgba(255,201,60,.18)} /* method picker (radio cards) */ .methods{display:flex;flex-direction:column;gap:9px} .method{ display:flex;align-items:center;gap:12px; padding:13px;border-radius:var(--r-md);cursor:pointer; background:rgba(11,3,19,.5); border:1.5px solid var(--line-soft); transition:border-color .16s ease, background .16s ease; } .method input{position:absolute;opacity:0;pointer-events:none} .method:has(input:checked){ border-color:var(--gold); background:rgba(255,201,60,.10); } .method-ico{ width:40px;height:40px;border-radius:11px;flex:0 0 auto; display:grid;place-items:center;font-size:19px; background:rgba(255,255,255,.08); } .method-body{flex:1;min-width:0} .method-name{font-size:14px;font-weight:900} .method-meta{font-size:11px;color:var(--text-faint);font-weight:700;margin-top:2px} .method-tick{ width:20px;height:20px;border-radius:50%;flex:0 0 auto; border:2px solid var(--line-soft); display:grid;place-items:center; font-size:11px;color:var(--ink); } .method:has(input:checked) .method-tick{ background:var(--gold);border-color:var(--gold); } .method:has(input:checked) .method-tick::after{content:"✓";font-weight:900} /* ---------- lists ---------- */ .list{display:flex;flex-direction:column} .row{ display:flex;align-items:center;gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft); text-decoration:none;color:inherit; } .row:last-child{border-bottom:0} .row-ico{ width:36px;height:36px;border-radius:11px;flex:0 0 auto; display:grid;place-items:center;font-size:16px; background:rgba(255,243,214,.07); } .row-body{flex:1;min-width:0;display:flex;flex-direction:column;min-width:0} .row-title{display:block;font-size:13.5px;font-weight:800} .row-sub{display:block;font-size:11px;color:var(--text-faint);font-weight:700;margin-top:2px} .row-amt{font-family:var(--disp);font-size:15px;text-align:right;white-space:nowrap} .row-amt.pos{color:var(--lime)} .row-amt.neg{color:var(--bad)} .row-chev{color:var(--text-faint);font-size:15px} .pill{ display:inline-block;padding:2px 9px;border-radius:999px; font-size:9.5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase; } .pill-pending{background:rgba(255,201,60,.18);color:var(--gold)} .pill-completed{background:rgba(67,198,122,.18);color:var(--ok)} .pill-rejected{background:rgba(255,90,120,.18);color:var(--bad)} .pill-failed{background:rgba(255,243,214,.12);color:var(--text-dim)} /* ---------- referral code block ---------- */ .code-box{ display:flex;align-items:center;gap:10px; padding:14px;border-radius:var(--r-md); background:rgba(11,3,19,.6); border:1px dashed rgba(255,201,60,.4); } .code-val{ flex:1;font-family:var(--disp);font-size:25px;letter-spacing:3px;color:var(--gold); } /* ---------- flashes ---------- */ .flashes{display:flex;flex-direction:column;gap:8px;margin-bottom:13px} .flash{ padding:12px 14px;border-radius:var(--r-md); font-size:13px;font-weight:800; border:1px solid var(--line-soft); background:var(--panel); } .flash-success{border-color:rgba(67,198,122,.45);background:rgba(67,198,122,.12);color:#B8F0CE} .flash-error{border-color:rgba(255,90,120,.45);background:rgba(255,90,120,.12);color:#FFC9D3} .flash-warning{border-color:rgba(255,201,60,.45);background:rgba(255,201,60,.12);color:#FFE9AE} /* ---------- auth screens ---------- */ .auth{ min-height:calc(100dvh - var(--tab-h)); display:flex;flex-direction:column;justify-content:center; padding:20px 4px; } .auth-head{text-align:center;margin-bottom:22px} .auth-head h1{font-size:29px;color:var(--cream)} .auth-head p{margin-top:6px;font-size:13px} .auth-alt{margin-top:18px;text-align:center;font-size:13px;color:var(--text-dim);font-weight:700} .auth-alt a{font-weight:900;text-decoration:none} /* ---------- empty state ---------- */ .empty{padding:34px 18px;text-align:center} .empty-glyph{font-size:38px;opacity:.45;margin-bottom:10px} .empty h3{margin-bottom:5px} .empty p{font-size:12.5px;margin-bottom:14px} /* ---------- toast ---------- */ .toast{ position:fixed;left:50%;bottom:calc(var(--tab-h) + var(--sab) + 16px); transform:translate(-50%,14px); z-index:80; padding:11px 18px;border-radius:999px; font-size:12.5px;font-weight:800; color:var(--ink);background:var(--cream); box-shadow:0 8px 24px rgba(0,0,0,.42); opacity:0;pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .toast.on{opacity:1;transform:translate(-50%,0)} /* ---------- misc ---------- */ .divider{height:1px;background:var(--line-soft);margin:16px 0} .spread{display:flex;align-items:center;justify-content:space-between;gap:10px} .stack{display:flex;flex-direction:column;gap:10px} .back-link{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:800;text-decoration:none;color:var(--text-faint); margin-bottom:12px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} } :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}