/* primary theme */ :root{--bg:#0b0f13;--panel:#0f1317;--muted:#9aa6b2;--accent:#f5c400} *{box-sizing:border-box} html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#f3f4f6} header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-bottom:1px solid rgba(255,255,255,0.03)} .brand{display:flex;align-items:center;gap:12px} .logo{width:36px;height:36px;border-radius:6px;background:linear-gradient(135deg,#111827,#1f2937);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent)} nav{display:flex;gap:8px} .nav-btn{background:#0b1220;border:1px solid rgba(255,255,255,0.03);padding:8px 12px;border-radius:12px;color:#e6e6e6;font-size:13px;text-decoration:none} .nav-btn.active{background:linear-gradient(90deg,#1f2937,#111827);box-shadow:0 6px 18px rgba(0,0,0,0.6)} .container{max-width:1280px;margin:18px auto;padding:0 18px} .controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .search{display:flex;gap:8px} .search input{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:inherit;min-width:260px} .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} @media (max-width:1200px){.grid{grid-template-columns:repeat(4,1fr)}} @media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:420px){.grid{grid-template-columns:1fr}} .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);border-radius:12px;overflow:hidden;padding:8px;display:flex;flex-direction:column;gap:8px;text-decoration:none} .thumb{width:100%;height:0;padding-bottom:56%;background:var(--panel);border-radius:8px;overflow:hidden;display:block;position:relative} .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .title{font-weight:700;color:#ffd369;text-align:center;background:transparent;padding:8px 6px;border-radius:6px;margin-top:auto} .caption{font-size:12px;color:var(--muted);text-align:center;margin-top:4px} footer{padding:18px;text-align:center;color:var(--muted);background:var(--panel);border-top:1px solid rgba(255,255,255,0.03)} /* --- additional UI styles (from the modern layout) --- */ .navbar{position:sticky;top:0;z-index:1;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid rgba(255,255,255,0.03)} .brand{display:flex;align-items:center;gap:12px} .brand h1{font-size:20px;color:#ffcc00;margin-right:6px} .nav-controls{display:flex;gap:8px} .nav-btn{background:#151521;border:1px solid rgba(255,204,0,0.06);color:#ffcc00;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700} .nav-btn.active{background:#3b82f6;color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(59,130,246,0.12)} #main{padding:18px;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:1300px;margin:0 auto} .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;width:100%} .game-card{background: var(--panel);border-radius:15px;overflow:hidden;cursor:pointer;transition: transform .18s, box-shadow .18s;text-align:center;border:1px solid rgba(255,255,255,0.03);position: relative;padding-bottom:10px} .game-card:hover{transform:scale(1.04);box-shadow:0 8px 30px rgba(0,0,0,0.6)} .game-card img{width:100%;height:140px;object-fit:cover;display:block;border-bottom:1px solid rgba(255,204,0,0.08)} .game-card h3{margin:10px 6px;font-size:1rem;color:#ffcc00} #game-view{display:none;flex-direction:column;align-items:center;width:100%} iframe{width:100%;max-width:1200px;height:640px;border:none;border-radius:12px;margin-top:8px;box-shadow:0 10px 40px rgba(0,0,0,0.6)} .controls{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .back-btn{padding:.6rem 1.2rem;background:#222244;color:#ffcc00;border:none;border-radius:8px;cursor:pointer;font-weight:bold} .back-btn:hover{background:#333366} .content-section{width:100%} .hidden{display:none} .apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px} .app-card{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;display:flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,0.03)} .unblocker-section{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);margin-bottom:12px} /* random text ticker (bottom) */ .random-text{width:100%;text-align:center;padding:12px 8px;color:#ffd369;font-weight:700;font-family:monospace;opacity:1;transition:opacity .6s} .random-text.fade-out{opacity:0} .random-text.fade-in{opacity:1} /* background bubbles canvas */ #bubbleCanvas{ position:fixed; inset:0; width:100%; height:100%; /* put the canvas above the page background but behind UI so bubbles are visible and won't block clicks */ z-index:0; pointer-events:none; display:block; } /* ensure main UI elements are above the canvas and use a consistent panel background */ .navbar, .container, .controls, footer, .random-text, .brand, .game-card, .card, .player-frame, .view, .content-section { position:relative; z-index:1; } /* normalize panel backgrounds so bubbles appear consistently behind them */ .game-card, .card, .player-frame, .app-card, .unblocker-section { background: var(--panel); border: 1px solid rgba(255,255,255,0.03); } @media (max-width:640px){iframe{height:520px}}