*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#070609;color:#fff}body{overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}.bg-glow{position:fixed;pointer-events:none;filter:blur(80px);opacity:.3;z-index:-1;border-radius:50%}.glow-a{width:420px;height:420px;background:#ff2f9d;top:-180px;left:-120px}.glow-b{width:460px;height:460px;background:#7d2cff;right:-220px;bottom:-220px}.header{height:72px;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:rgba(7,6,9,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.brand-mini{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em}.brand-dot{width:28px;height:28px;border-radius:9px;background:url('assets/jnoengamess-logo.png') center/cover;box-shadow:0 0 24px rgba(255,45,157,.35)}.header-right{display:flex;gap:22px;align-items:center;font-size:14px;color:#d7d2db}.header-right a{transition:.2s}.header-right a:hover,.active-link{color:#fff}.ai-link{color:#ff75be!important}
.home-main{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:30px}.home-center{width:min(820px,92vw);text-align:center;transform:translateY(-3vh)}.hero-logo-wrap{width:150px;height:150px;position:relative;margin:0 auto 12px;display:grid;place-items:center}.home-logo{width:104px;height:104px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 18px 32px rgba(255,35,145,.3));animation:heroFloat 4s ease-in-out infinite,heroPulse 3s ease-in-out infinite}.hero-orbit{position:absolute;border:1px solid rgba(255,92,184,.24);border-radius:50%;inset:8px;animation:spin 9s linear infinite}.orbit-two{inset:25px;border-color:rgba(147,73,255,.25);animation-direction:reverse;animation-duration:13s}.hero-wordmark{font-size:clamp(50px,8vw,88px);font-weight:950;line-height:.95;letter-spacing:-.075em;background:linear-gradient(110deg,#fff 5%,#ffb9dd 38%,#ff4fa9 58%,#9e67ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(255,63,164,.13);animation:titleGlow 3.5s ease-in-out infinite}.home-sub{color:#aaa2af;margin:18px 0 28px;font-size:16px}.search{height:58px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);border-radius:18px;display:flex;align-items:center;padding:0 16px;box-shadow:0 16px 50px rgba(0,0,0,.3);transition:.2s}.search:focus-within{border-color:#ff4eac;box-shadow:0 0 0 4px rgba(255,60,170,.1),0 18px 60px rgba(0,0,0,.35)}.search span{font-size:24px;color:#9b94a1;margin-right:10px}.search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:16px}.search input::placeholder{color:#77717c}.search kbd{border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:3px 8px;color:#85808a;font-size:12px}.home-search{width:min(720px,100%);margin:auto}.quick-results{margin:12px auto 0;text-align:left;background:#111014;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;width:min(720px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3)}.quick-result{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.06)}.quick-result:last-child{border-bottom:0}.quick-result small{color:#817a86}.home-links{display:flex;justify-content:center;gap:24px;margin-top:20px;color:#a9a1ad;font-size:13px}.home-links a:hover{color:#ff76bd}
.page-main{max-width:1220px;margin:0 auto;padding:48px 28px}.games-page-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}.games-page-head>div:first-child{flex:1}.games-search{width:min(420px,100%)}.page-title{font-size:42px;letter-spacing:-.05em;margin:5px 0 7px}.page-note{color:#958e99;margin:0}.eyebrow{font-size:11px;letter-spacing:.16em;color:#ff62b4;font-weight:800}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.game-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:#101014;min-height:275px;transition:transform .22s,border-color .22s,box-shadow .22s;animation:cardIn .45s both}.game-card:hover{transform:translateY(-6px);border-color:rgba(255,71,171,.65);box-shadow:0 20px 50px rgba(0,0,0,.38),0 0 28px rgba(255,45,157,.12)}.game-thumb{height:185px;background:#17151b center/cover no-repeat;position:relative;overflow:hidden}.game-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65))}.thumb-initials{height:100%;display:grid;place-items:center;font-size:48px;font-weight:950;letter-spacing:-.08em;background:radial-gradient(circle at 40% 20%,#35153b,#111016 62%);color:#ffd1ea}.game-body{padding:15px}.game-name{font-weight:800;font-size:17px;margin-bottom:12px}.play-btn,.primary,.secondary{display:inline-block;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;transition:.2s}.play-btn,.primary{background:#ff3d9f;color:#fff}.play-btn:hover,.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.secondary{background:#1d1a21;color:#ddd5df;border:1px solid rgba(255,255,255,.1)}.empty{padding:40px;text-align:center;color:#827b87}.settings-main,.ai-main{max-width:900px;margin:0 auto;padding:60px 24px}.settings-card,.ai-card{background:rgba(17,15,20,.9);border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.35)}.settings-card h1,.ai-card h1{font-size:38px;letter-spacing:-.05em;margin:7px 0}.settings-note{color:#908995}.settings-card label{display:block;margin:22px 0 0;color:#c8c1cb;font-size:14px}.settings-card input[type=text],.settings-card input[type=password],.settings-card input[type=file]{display:block;width:100%;margin-top:8px;padding:13px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0c0b0e;color:#fff}.label-note{color:#756e79;font-size:12px}.settings-help{color:#77717d;font-size:12px;line-height:1.55;margin-top:9px}.icon-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}.icon-preset{min-height:78px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0c0b0e;color:#fff;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}.icon-preset:hover{transform:translateY(-1px);border-color:rgba(255,71,171,.55);background:#141116}.icon-preset.selected{border-color:#ff3d9f;box-shadow:0 0 0 2px rgba(255,61,159,.16) inset,0 0 18px rgba(255,61,159,.14);background:#151016}.icon-preset img{width:36px;height:36px;object-fit:contain;border-radius:8px;background:#fff}.icon-preset span{font-size:10px;font-weight:700;text-align:center;color:#d8d1dc}
.settings-actions{display:flex;gap:10px;margin-top:22px}.status{margin-top:12px;color:#ff7cbd;font-size:13px}.chat-log{height:430px;overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#0b0a0d;padding:16px}.msg{max-width:85%;padding:11px 13px;border-radius:14px;margin:0 0 12px;line-height:1.45;white-space:pre-wrap}.msg.user{margin-left:auto;background:#ff3d9f}.msg.bot{background:#1a171d;color:#eee}.chat-form{display:flex;gap:10px;margin-top:12px}.chat-form input{flex:1;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0b0a0d;color:#fff;padding:13px;outline:0}.ai-status{min-height:20px;color:#817a86;font-size:12px;margin-top:8px}.ai-locked{margin-top:22px}.ad-box{padding:30px;border:1px dashed rgba(255,255,255,.15);border-radius:18px;text-align:center;background:#0b0a0d}.ad-box span{display:block;font-size:10px;color:#777;letter-spacing:.15em;margin-bottom:8px}.ad-box strong{display:block;font-size:20px}.ad-box small{display:block;color:#817a85;margin:8px 0 18px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.82);display:grid;place-items:center;z-index:100}.ad-modal{width:min(440px,90vw);background:#121015;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:20px}.ad-top{display:flex;justify-content:space-between;color:#777;font-size:11px;letter-spacing:.12em}.fake-ad{min-height:220px;display:grid;place-items:center;text-align:center}.fake-ad h2{margin:0}.fake-ad p{color:#888;max-width:330px}.ad-orb{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#ff4ca8 30%,#6c1cff 70%);filter:blur(.2px);box-shadow:0 0 50px #ff3d9f55}.game-shell{min-height:100vh;background:#050505;padding:18px}.game-top{max-width:1500px;margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.game-top h1{font-size:18px;margin:0}.game-actions{display:flex;gap:8px}.game-stage{max-width:1500px;margin:auto;height:calc(100vh - 84px);min-height:500px;border:4px solid #ff3d9f;border-radius:26px;padding:7px;background:linear-gradient(135deg,#ff3d9f,#ff79c3,#8c2dff,#ff3d9f);box-shadow:0 0 45px rgba(255,61,159,.25)}.game-frame{width:100%;height:100%;border:0;border-radius:18px;background:#000;display:block}.cursor-dot,.cursor-ring{position:fixed;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);mix-blend-mode:screen}.cursor-dot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px #ff3d9f}.cursor-ring{width:28px;height:28px;border:2px solid #ff4da9;border-radius:50%;background:rgba(255,255,255,.08);backdrop-filter:blur(4px);transition:width .15s,height .15s,border-color .15s}.cursor-ring.click{animation:click .35s ease-out}.no-cursor,.no-cursor *{cursor:none!important}@keyframes click{0%{width:28px;height:28px;opacity:1}50%{width:52px;height:52px;opacity:.25}100%{width:28px;height:28px;opacity:1}}@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}@keyframes heroPulse{50%{filter:drop-shadow(0 22px 44px rgba(255,35,145,.5))}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes titleGlow{50%{filter:drop-shadow(0 0 20px rgba(255,72,171,.28))}}@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(max-width:850px){.icon-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.games-page-head{align-items:stretch;flex-direction:column}.games-search{width:100%}}@media(max-width:560px){.header{padding:12px 16px}.header-right{gap:12px}.home-main{padding:20px}.hero-logo-wrap{width:125px;height:125px}.home-logo{width:88px;height:88px}.hero-wordmark{font-size:52px}.home-links{flex-direction:column;gap:10px}.page-main{padding:36px 16px}.game-grid{grid-template-columns:1fr;gap:14px}.game-card{min-height:245px}.game-thumb{height:155px}.game-shell{padding:8px}.game-stage{height:calc(100vh - 62px);min-height:360px;border-width:3px}}

/* Doodle Jump uses a vertical 9:16 game viewport. */
.doodle-vertical .game-stage{width:min(56.25vh,100%);height:min(calc(100vh - 84px),177.7778vw);aspect-ratio:9 / 16;margin-left:auto;margin-right:auto;}
@media(max-width:560px){.doodle-vertical .game-stage{width:min(56.25vh,100%);height:min(calc(100vh - 62px),177.7778vw);}}

.settings-actions .primary,.settings-actions .secondary{padding:8px 12px;border-radius:10px;font-size:13px}.settings-card input[type=text],.settings-card input[type=file]{padding:10px;border-radius:10px}.settings-card label{margin-top:16px}


/* ---------- Color themes + falling pink balls ---------- */
:root{
  --theme-bg:#070609;
  --theme-surface:#101014;
  --theme-surface-2:#17151b;
  --theme-surface-3:#1d1a21;
  --theme-input:#0c0b0e;
  --theme-text:#ffffff;
  --theme-muted:#a9a1ad;
  --theme-dim:#77717d;
  --theme-border:rgba(255,255,255,.10);
  --theme-border-strong:rgba(255,255,255,.16);
  --theme-accent:#ff3d9f;
  --theme-accent-soft:#ff76bd;
  --theme-accent-2:#8c2dff;
  --theme-glow-a:#ff2f9d;
  --theme-glow-b:#7d2cff;
  --theme-header-rgb:7,6,9;
}
html[data-theme="purple"]{
  --theme-bg:#090711;--theme-surface:#13101b;--theme-surface-2:#1b1625;--theme-surface-3:#241d31;--theme-input:#0e0b15;
  --theme-muted:#b2a7c0;--theme-dim:#7e728c;--theme-border:rgba(220,192,255,.12);--theme-border-strong:rgba(220,192,255,.20);
  --theme-accent:#a86bff;--theme-accent-soft:#c394ff;--theme-accent-2:#6231ff;--theme-glow-a:#9a48ff;--theme-glow-b:#4322ff;--theme-header-rgb:9,7,17;
}
html[data-theme="blue"]{
  --theme-bg:#061018;--theme-surface:#0d1721;--theme-surface-2:#12202c;--theme-surface-3:#192936;--theme-input:#08121a;
  --theme-muted:#a4b8c8;--theme-dim:#718695;--theme-border:rgba(174,222,255,.12);--theme-border-strong:rgba(174,222,255,.20);
  --theme-accent:#39a8ff;--theme-accent-soft:#73c2ff;--theme-accent-2:#4169ff;--theme-glow-a:#259dff;--theme-glow-b:#304dff;--theme-header-rgb:6,16,24;
}
html[data-theme="green"]{
  --theme-bg:#06110b;--theme-surface:#0d1711;--theme-surface-2:#122019;--theme-surface-3:#1a2a20;--theme-input:#08120c;
  --theme-muted:#a8c4af;--theme-dim:#718b78;--theme-border:rgba(176,255,198,.12);--theme-border-strong:rgba(176,255,198,.20);
  --theme-accent:#36d48b;--theme-accent-soft:#72efb0;--theme-accent-2:#20a86a;--theme-glow-a:#24d584;--theme-glow-b:#1e8f67;--theme-header-rgb:6,17,11;
}
html[data-theme="orange"]{
  --theme-bg:#120a05;--theme-surface:#1a100a;--theme-surface-2:#24160d;--theme-surface-3:#302017;--theme-input:#0e0906;
  --theme-muted:#cfb3a2;--theme-dim:#8d7263;--theme-border:rgba(255,215,191,.12);--theme-border-strong:rgba(255,215,191,.20);
  --theme-accent:#ff8a2a;--theme-accent-soft:#ffb269;--theme-accent-2:#f0522b;--theme-glow-a:#ff7a2e;--theme-glow-b:#db3f2c;--theme-header-rgb:18,10,5;
}
html[data-theme="mono"]{
  --theme-bg:#0a0a0a;--theme-surface:#151515;--theme-surface-2:#1d1d1d;--theme-surface-3:#262626;--theme-input:#101010;
  --theme-muted:#b9b9b9;--theme-dim:#777;--theme-border:rgba(255,255,255,.10);--theme-border-strong:rgba(255,255,255,.18);
  --theme-accent:#e7e7e7;--theme-accent-soft:#ffffff;--theme-accent-2:#a7a7a7;--theme-glow-a:#bdbdbd;--theme-glow-b:#626262;--theme-header-rgb:10,10,10;
}
html,body{background:var(--theme-bg)!important;color:var(--theme-text)!important}
body{transition:background-color .35s ease,color .35s ease}
.header{background:rgba(var(--theme-header-rgb),.84)!important;border-bottom-color:var(--theme-border)!important}
.brand-dot{box-shadow:0 0 24px color-mix(in srgb,var(--theme-accent) 40%,transparent)!important}
.header-right{color:var(--theme-muted)!important}.header-right a:hover,.active-link{color:var(--theme-text)!important}
.ai-link{color:var(--theme-accent-soft)!important}
.bg-glow{opacity:.28}.glow-a{background:var(--theme-glow-a)!important}.glow-b{background:var(--theme-glow-b)!important}
.hero-wordmark{background:linear-gradient(110deg,#fff 5%,var(--theme-accent-soft) 38%,var(--theme-accent) 58%,var(--theme-accent-2) 90%);-webkit-background-clip:text;background-clip:text}
.home-sub,.page-note,.settings-note{color:var(--theme-muted)!important}
.home-links,.home-links a{color:var(--theme-muted)}.home-links a:hover{color:var(--theme-accent-soft)!important}
.hero-orbit{border-color:color-mix(in srgb,var(--theme-accent-soft) 24%,transparent)!important}.orbit-two{border-color:color-mix(in srgb,var(--theme-accent-2) 28%,transparent)!important}
.search{border-color:var(--theme-border-strong)!important;background:color-mix(in srgb,var(--theme-surface) 78%,transparent)!important}.search:focus-within{border-color:var(--theme-accent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--theme-accent) 12%,transparent),0 18px 60px rgba(0,0,0,.35)!important}
.search input,.settings-card input[type=text],.settings-card input[type=password],.settings-card input[type=file],.chat-form input{color:var(--theme-text)!important}.search input::placeholder{color:var(--theme-dim)!important}
.quick-results{background:var(--theme-surface)!important;border-color:var(--theme-border)!important}.quick-result{border-bottom-color:var(--theme-border)!important}.quick-result small{color:var(--theme-dim)!important}
.eyebrow{color:var(--theme-accent-soft)!important}.game-card{background:var(--theme-surface)!important;border-color:var(--theme-border)!important}.game-card:hover{border-color:color-mix(in srgb,var(--theme-accent) 68%,transparent)!important;box-shadow:0 20px 50px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--theme-accent) 14%,transparent)!important}.game-thumb{background-color:var(--theme-surface-2)!important}
.thumb-initials{background:radial-gradient(circle at 40% 20%,color-mix(in srgb,var(--theme-accent-2) 26%,var(--theme-surface-2)),var(--theme-input) 62%)!important;color:color-mix(in srgb,var(--theme-accent-soft) 90%,#fff)!important}.play-btn,.primary{background:var(--theme-accent)!important;color:#fff!important}.play-btn:hover,.primary:hover{filter:brightness(1.08)}
.secondary{background:var(--theme-surface-3)!important;color:var(--theme-text)!important;border-color:var(--theme-border)!important}
.settings-card,.ai-card{background:color-mix(in srgb,var(--theme-surface) 92%,transparent)!important;border-color:var(--theme-border)!important}.settings-card input[type=text],.settings-card input[type=password],.settings-card input[type=file]{background:var(--theme-input)!important;border-color:var(--theme-border-strong)!important}.label-note,.settings-help,.ai-status{color:var(--theme-dim)!important}
.icon-preset{background:var(--theme-input)!important;border-color:var(--theme-border)!important;color:var(--theme-text)!important}.icon-preset:hover{border-color:color-mix(in srgb,var(--theme-accent) 55%,transparent)!important;background:var(--theme-surface-2)!important}.icon-preset.selected{border-color:var(--theme-accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 16%,transparent) inset,0 0 18px color-mix(in srgb,var(--theme-accent) 15%,transparent)!important;background:var(--theme-surface-2)!important}
.settings-actions .primary{background:var(--theme-accent)!important}.status{color:var(--theme-accent-soft)!important}
.chat-log{background:var(--theme-input)!important;border-color:var(--theme-border)!important}.msg.user{background:var(--theme-accent)!important}.msg.bot{background:var(--theme-surface-2)!important}
.ad-box{background:var(--theme-input)!important;border-color:var(--theme-border-strong)!important}.ad-box span,.ad-box small{color:var(--theme-dim)!important}
.game-shell{background:transparent!important}.game-stage{border-color:var(--theme-accent)!important;background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-soft),var(--theme-accent-2),var(--theme-accent))!important;box-shadow:0 0 45px color-mix(in srgb,var(--theme-accent) 25%,transparent)!important}
.cursor-dot{box-shadow:0 0 14px var(--theme-accent)!important}.cursor-ring{border-color:var(--theme-accent-soft)!important}

/* YouTube's logo is a wide mark, so don't force it into a square box. */
.icon-preset[data-tab-name="YouTube"] img{width:48px;height:30px;object-fit:contain;background:transparent;border-radius:0;padding:0}

/* Theme controls */
.theme-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:8px}
.theme-preset{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:9px 11px;border:1px solid var(--theme-border);border-radius:13px;background:var(--theme-input);color:var(--theme-text);cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s,background .16s;text-align:left}
.theme-preset:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--theme-accent) 55%,transparent);background:var(--theme-surface-2)}
.theme-preset.selected{border-color:var(--theme-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 15%,transparent) inset,0 0 18px color-mix(in srgb,var(--theme-accent) 10%,transparent);}
.theme-swatch{width:32px;height:32px;border-radius:10px;flex:0 0 32px;border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08)}
.theme-preset[data-theme-choice="pink"] .theme-swatch{background:linear-gradient(135deg,#ff3d9f,#8c2dff)}
.theme-preset[data-theme-choice="purple"] .theme-swatch{background:linear-gradient(135deg,#a86bff,#6231ff)}
.theme-preset[data-theme-choice="blue"] .theme-swatch{background:linear-gradient(135deg,#39a8ff,#4169ff)}
.theme-preset[data-theme-choice="green"] .theme-swatch{background:linear-gradient(135deg,#36d48b,#20a86a)}
.theme-preset[data-theme-choice="orange"] .theme-swatch{background:linear-gradient(135deg,#ff8a2a,#f0522b)}
.theme-preset[data-theme-choice="mono"] .theme-swatch{background:linear-gradient(135deg,#ececec,#666)}
.theme-preset span{font-size:12px;font-weight:800;letter-spacing:.01em}

/* Falling pink balls */
.falling-balls{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.falling-ball{position:absolute;top:-60px;left:calc(var(--x) * 1%);width:calc(var(--size) * 1px);height:calc(var(--size) * 1px);border-radius:50%;opacity:var(--opacity);filter:blur(calc(var(--blur) * 1px));background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.96) 0 9%,#ffb2da 18%,#ff58ae 52%,#d51e7d 100%);box-shadow:0 0 18px rgba(255,66,166,.42);animation:ballFall var(--duration) linear var(--delay) infinite}
.header,.home-main,.page-main,.settings-main,.game-shell{position:relative;z-index:1}
@keyframes ballFall{0%{transform:translate3d(0,-70px,0) rotate(0deg)}22%{transform:translate3d(var(--drift-a),24vh,0) rotate(80deg)}52%{transform:translate3d(var(--drift-b),58vh,0) rotate(190deg)}78%{transform:translate3d(var(--drift-c),88vh,0) rotate(275deg)}100%{transform:translate3d(var(--drift-d),116vh,0) rotate(360deg)}}
@media (max-width:760px){.theme-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.falling-ball:nth-child(n+18){display:none}}


/* Glossy browser-style site tabs */
.browser-nav-wrap{position:sticky;top:10px;z-index:80;display:flex;justify-content:center;padding:0 18px;margin:0 auto 6px;pointer-events:none}
.browser-nav{pointer-events:auto;width:min(980px,calc(100vw - 28px));height:76px;padding:9px 10px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.055)),linear-gradient(135deg,rgba(25,20,31,.92),rgba(10,9,13,.90));box-shadow:0 18px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.5);backdrop-filter:blur(22px) saturate(140%);position:relative;overflow:hidden}
.browser-nav::before{content:"";position:absolute;inset:-60% -20% auto;height:95px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transform:rotate(-6deg);animation:navSheen 7s ease-in-out infinite;pointer-events:none}
.browser-window-dots{display:flex;flex:0 0 auto;gap:6px;padding:0 6px;z-index:1}.browser-window-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
.browser-window-dots i:nth-child(1){background:#ff6b9d}.browser-window-dots i:nth-child(2){background:#ffcd6b}.browser-window-dots i:nth-child(3){background:#69e69e}
.browser-tabs{display:flex;align-items:end;gap:5px;min-width:0;flex:1;height:100%;z-index:1}
.browser-tab{position:relative;display:flex;align-items:center;gap:9px;min-width:0;height:45px;padding:0 17px;border:1px solid transparent;border-radius:15px 15px 12px 12px;color:var(--theme-muted);font-size:13px;font-weight:850;letter-spacing:-.01em;white-space:nowrap;transition:transform .22s ease,color .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.browser-tab::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;background:var(--theme-accent);transform:scaleX(0);transition:transform .25s ease;opacity:.85}
.browser-tab:hover{transform:translateY(-2px);color:var(--theme-text);background:rgba(255,255,255,.06)}
.browser-tab.active{color:var(--theme-text);background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.055));border-color:rgba(255,255,255,.11);box-shadow:0 7px 20px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.11)}
.browser-tab.active::after{transform:scaleX(1)}
.tab-favicon{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.06);font-size:13px;overflow:hidden;flex:none}.tab-favicon img{width:100%;height:100%;object-fit:contain}.mini-play{color:#fff;filter:drop-shadow(0 1px 6px color-mix(in srgb,var(--theme-accent) 45%,transparent))}
.browser-address{margin-left:auto;width:170px;height:34px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.075);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--theme-muted);font-size:11px;box-shadow:inset 0 1px 2px rgba(255,255,255,.05);z-index:1}.address-lock{font-size:13px;color:var(--theme-accent-soft)}.address-text{font-weight:800;letter-spacing:.02em}.address-dot{margin-left:auto;color:var(--theme-accent)}
.browser-pill{margin-left:auto;width:90px;height:34px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 2px rgba(255,255,255,.05);z-index:1}
@keyframes navSheen{0%,55%{transform:translateX(-70%) rotate(-6deg);opacity:0}65%{opacity:1}90%,100%{transform:translateX(135%) rotate(-6deg);opacity:0}}

/* Center-logo transition between site tabs */
.tab-transition{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(5,4,7,.0);backdrop-filter:blur(0);pointer-events:none;opacity:0;transition:opacity .18s ease,background .3s ease,backdrop-filter .3s ease}
.tab-transition.show{opacity:1;background:rgba(5,4,7,.88);backdrop-filter:blur(15px);pointer-events:auto}
.tab-transition img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 16px 35px color-mix(in srgb,var(--theme-accent) 35%,transparent));transform:scale(.65) rotate(-8deg);opacity:0;transition:transform .5s cubic-bezier(.2,.85,.2,1),opacity .25s ease}
.tab-transition.show img{transform:scale(1) rotate(0deg);opacity:1}
.transition-orb{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent) 38%,transparent),transparent 68%);filter:blur(4px);opacity:0;transform:scale(.6);transition:transform .55s ease,opacity .3s ease}.tab-transition.show .transition-orb{opacity:1;transform:scale(1.15)}
.transition-name{position:absolute;transform:translateY(92px);font-weight:900;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .35s ease .12s}.tab-transition.show .transition-name{opacity:.78}

/* Animated game cards / mouse-following icon tilt */
.game-card{--card-rx:0deg;--card-ry:0deg;transform:perspective(1000px) rotateY(var(--card-rx)) rotateX(var(--card-ry));transform-style:preserve-3d;will-change:transform;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.game-card:hover{transform:perspective(1000px) translateY(-7px) rotateY(var(--card-rx)) rotateX(var(--card-ry));}
.game-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--theme-accent) 25%,transparent),transparent 34%);opacity:0;transition:opacity .2s ease;z-index:3}
.game-card:hover::before{opacity:1}
.game-thumb{perspective:900px;--mx:50%;--my:50%}
.game-thumb-img{display:block;width:100%;height:100%;object-fit:cover;transform:perspective(800px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)) scale(1);transition:transform .12s ease-out,filter .25s ease;will-change:transform;filter:saturate(1.04)}
.game-card:hover .game-thumb-img{filter:saturate(1.12) brightness(1.06)}
.thumb-shine{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 26%);mix-blend-mode:screen;opacity:0;transition:opacity .16s ease;pointer-events:none;z-index:2}
.game-card:hover .thumb-shine{opacity:1}
.play-btn{position:relative;overflow:hidden;box-shadow:0 7px 18px color-mix(in srgb,var(--theme-accent) 22%,transparent)}
.play-btn::before,.primary::before,.secondary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.24) 50%,transparent 80%);transform:translateX(-130%);transition:transform .5s ease;pointer-events:none}
.play-btn:hover::before,.primary:hover::before,.secondary:hover::before{transform:translateX(130%)}
.play-btn,.primary,.secondary{position:relative;overflow:hidden}
.play-btn:hover{transform:translateY(-3px) scale(1.035)}
.random-card .game-thumb{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--theme-accent) 24%,var(--theme-surface-2)),var(--theme-input) 65%)}
.random-card .game-thumb-img{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 12px 22px color-mix(in srgb,var(--theme-accent) 25%,transparent));transform:perspective(800px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)) scale(1)}
.random-card:hover .game-thumb-img{transform:perspective(800px) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)) scale(1.12);}

/* Player pages now use the same tabbed chrome */
.game-shell{padding:0 22px 22px;min-height:calc(100vh - 10px)}
.game-page-title{max-width:1220px;margin:4px auto 12px;padding:0 4px;display:flex;align-items:center;justify-content:space-between;gap:15px}.game-page-title h1{margin:0;font-size:24px;letter-spacing:-.04em}.game-page-chip{font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--theme-accent-soft)}.game-actions{max-width:1220px;margin:0 auto 12px;display:flex;justify-content:flex-end;gap:8px}.game-actions .secondary,.game-actions .primary{padding:9px 13px}
@media(max-width:760px){.browser-nav{height:60px;border-radius:18px}.browser-window-dots,.browser-pill{display:none}.browser-tabs{gap:3px}.browser-tab{flex:1;justify-content:center;padding:0 8px;font-size:12px}.tab-favicon{display:none}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.game-thumb{height:160px}.game-shell{padding:0 12px 12px}.game-page-title h1{font-size:20px}}
@media(max-width:500px){.browser-nav-wrap{padding:0 10px}.browser-nav{width:calc(100vw - 20px)}.browser-tab{font-size:11px}.game-grid{grid-template-columns:1fr}.game-thumb{height:200px}}
@media(prefers-reduced-motion:reduce){.browser-nav::before,.game-card,.game-thumb-img,.tab-transition img,.falling-ball{animation:none!important;transition:none!important}.tab-transition{transition:none!important}}

/* Static browser bar is part of every page, not injected only after load. */
.browser-nav-wrap[data-static-nav="1"]{visibility:visible;opacity:1}
.thumb-fallback{display:none;height:100%;place-items:center;font-size:48px;font-weight:950;letter-spacing:-.08em;background:radial-gradient(circle at 40% 20%,#35153b,#111016 62%);color:#ffd1ea}
.random-card .random-mark{position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2));font-weight:950;box-shadow:0 8px 22px color-mix(in srgb,var(--theme-accent) 30%,transparent);z-index:3}
.random-card .game-thumb-img{opacity:.72}
.browser-address{flex:0 0 170px}
@media(max-width:760px){.browser-address{display:none}.browser-nav{width:calc(100vw - 20px);height:62px}.browser-nav-wrap{top:8px}.browser-tab{height:42px}}