Arcadia

Welcome to Arcadia

Play fun browser games — click Play to load a game inside the site. (No proxies — host only games you have permission to use.)

:root{ --glass: rgba(255,255,255,0.04); --card: rgba(255,255,255,0.03); --accent: #62e0ff; --muted: #9db0c4; --text: #eaf6ff; --radius: 12px; } *{box-sizing:border-box} html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--text);background:transparent} .bg-canvas{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%} .topbar{display:flex;align-items:center;gap:1rem;padding:12px clamp(12px,4vw,48px);backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)} .brand{display:flex;gap:12px;align-items:center} .brand h1{margin:0;font-size:1.15rem;letter-spacing:0.6px} .controls{margin-left:auto} .controls input{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.3);color:var(--text);min-width:220px} main{padding:2rem clamp(12px,4vw,48px)} .intro h2{margin:0 0 6px 0} .intro p{margin:0 0 18px 0;color:var(--muted)} .game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:row;gap:12px;align-items:center} .thumb{width:64px;height:64px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#6b8aff);display:flex;align-items:center;justify-content:center;font-weight:800;color:#033;font-size:1.5rem;flex:0 0 64px} .meta{flex:1} .meta h3{margin:0;font-size:1.05rem} .meta .tag{margin:4px 0 0;color:var(--muted);font-size:0.85rem} .card-controls{display:flex;flex-direction:column;gap:8px} .card-controls .play{background:var(--accent);border:0;padding:8px 12px;border-radius:8px;color:#002;cursor:pointer;font-weight:700} .card-controls .open{padding:8px 10px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);text-decoration:none;text-align:center} footer{padding:18px;text-align:center;color:var(--muted);font-size:0.85rem} /* Modal */ .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6));z-index:100} .modal[aria-hidden="false"]{display:flex} .modal-content{width:92%;max-width:1100px;height:78vh;background:#031023;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,0.04);box-shadow:0 10px 40px rgba(2,6,23,0.6)} .close{position:absolute;right:18px;top:18px;background:transparent;border:0;color:var(--text); font-size:1.2rem;cursor:pointer} .player-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)} .player-header h2{margin:0;font-size:1rem} .player-header .open-new{color:var(--accent);text-decoration:none} iframe#playerFrame{flex:1;width:100%;border:0;background:#000} @media (max-width:720px){ .card{flex-direction:column;align-items:flex-start} .card-controls{flex-direction:row;width:100%;justify-content:space-between} .thumb{width:48px;height:48px} } // Simple player controls for the iframe modal const modal = document.getElementById('playerModal'); const frame = document.getElementById('playerFrame'); const titleEl = document.getElementById('playerTitle'); const openNew = document.getElementById('openNew'); const closeBtn = document.getElementById('closeBtn'); function openPlayer(name, url){ titleEl.textContent = name; openNew.href = url; // set iframe src (some sites may block embedding via headers; if blocked, use openNew) frame.src = url; modal.setAttribute('aria-hidden','false'); // prevent body scroll document.body.style.overflow = 'hidden'; } function closePlayer(){ modal.setAttribute('aria-hidden','true'); // unload game try { frame.src = 'about:blank'; } catch(e){} document.body.style.overflow = ''; } closeBtn.addEventListener('click', closePlayer); modal.addEventListener('click', (e) => { if (e.target === modal) closePlayer(); }); // expose to global so index.js can call openPlayer window.openPlayer = openPlayer;