:root{--font:Tahoma,Verdana,sans-serif;--fs:14px;--w:960px;--r:4px;
--bg:linear-gradient(#69aee8,#bfe0f6 380px,#e6f2fa);--page:#f6fafd;--ink:#14263a;--line:#9db9d4;--panel:#e9f2fa;--stripe:#f0f6fb;--link:#0b4fb3;
--bar1:#5fa8ee;--bar2:#2a6ec2;--b1:#fdfefe;--b2:#d3dfec;--bline:#5f83a8;--go1:#7bd774;--go2:#2a9a2a;--muted:#4f6781}
[data-theme=pink]{--bg:linear-gradient(#f08cbd,#f9cfe3 380px,#fdeaf3);--page:#fff7fb;--ink:#3a1428;--line:#dba9c4;--panel:#fbe9f2;--stripe:#fdf1f7;--link:#b0155f;--bar1:#ee7fb5;--bar2:#c2307c;--b1:#fffafd;--b2:#f1d3e2;--bline:#b0678a;--muted:#7a4d65}
[data-theme=luna]{--bg:#3a6ea5;--page:#ece9d8;--ink:#111;--line:#aca899;--panel:#f6f4ea;--stripe:#f1efe2;--link:#0033cc;--bar1:#2f78e8;--bar2:#0a3fc4;--b1:#fff;--b2:#e3dfce;--bline:#003c74;--muted:#555}
[data-theme=classic]{--bg:#dfe6d0;--page:#fbfdf6;--ink:#1b2217;--line:#b4c0a2;--panel:#eef2e3;--stripe:#f4f7ec;--link:#1a4fa0;--bar1:#2f5a1e;--bar2:#203b14;--b1:#eef2e3;--b2:#e3e9d3;--bline:#7d8a6a;--go1:#4a7a36;--go2:#203b14;--muted:#4a5640;--r:0px}
[data-theme=night]{--bg:#0d1a2b;--page:#16263b;--ink:#dbe7f5;--line:#35506f;--panel:#1c2f48;--stripe:#1a2c44;--link:#7fb8ff;--bar1:#2b5c99;--bar2:#17375f;--b1:#2a4566;--b2:#1d324c;--bline:#4d6d93;--muted:#9bb0c8}
[data-size=s]{--fs:13px}[data-size=l]{--fs:16px}
[data-width=n]{--w:760px}[data-width=w]{--w:1200px}
[data-corners=sq]{--r:0px}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;font:var(--fs)/1.5 var(--font);color:var(--ink);background:var(--bg) fixed}
a{color:var(--link)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--link);outline-offset:2px}
#page{max-width:var(--w);margin:14px auto;background:var(--page);border:1px solid var(--bline);border-radius:calc(var(--r) * 2);box-shadow:0 3px 12px rgba(0,30,70,.3);overflow:hidden}
header{padding:12px 16px 8px}
.logo{margin:0;font:bold 28px/1.1 Georgia,serif}
.logo a{color:var(--ink);text-decoration:none}.logo small{font-size:13px;font-weight:normal;color:var(--muted)}
.blurb{margin:2px 0 0;color:var(--muted)}
nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:4px 8px;background:linear-gradient(var(--bar1),var(--bar2));border-top:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(0,0,0,.35)}
nav a{color:#fff;font-weight:bold;text-decoration:none;padding:3px 12px;border-radius:var(--r);text-shadow:0 1px 1px rgba(0,0,0,.4)}
nav a:hover{background:rgba(255,255,255,.22)}
nav a.start{background:linear-gradient(var(--go1),var(--go2));border:1px solid rgba(0,60,0,.6)}
main{margin:14px 16px;padding:0 10px 10px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);overflow:hidden}
main.bare{padding:0;border:0;background:none;overflow:visible}
main>h1:first-child,.setting-section>h2{margin:0 -10px 10px;padding:4px 10px;font:bold 13px var(--font);color:#fff;background:linear-gradient(var(--bar1),var(--bar2));text-shadow:0 1px 1px rgba(0,0,0,.45);align-self:stretch}
.setting-section>h2{margin-top:0}
.setting-section{margin:0 0 12px;padding:0 10px 10px;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);overflow:hidden}
main p{margin:8px 0}.desc{margin:6px 0}
h2{font-size:14px;margin:10px 0 6px}
button,.btn{display:inline-block;text-decoration:none;font:inherit;font-size:12px;padding:3px 12px;color:var(--ink);cursor:pointer;border:1px solid var(--bline);border-radius:var(--r);background:linear-gradient(var(--b1),var(--b2));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
button:hover,.btn:hover{filter:brightness(1.06)}button:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
button.go{color:#fff;font-weight:bold;border-color:#1f6a1f;background:linear-gradient(var(--go1),var(--go2));text-shadow:0 1px 1px rgba(0,0,0,.4)}
select,input[type=text],input[type=search]{font:inherit;padding:2px 6px;border:1px solid var(--bline);border-radius:var(--r);background:#fff;color:#111}
img{border-radius:var(--r)}
.setting-row,.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}.row label:first-child{min-width:140px}
#panic-key{width:3em;text-align:center}#panic-url{width:100%;max-width:380px}
#cloak-preview{display:flex;gap:8px;align-items:center;max-width:320px;padding:6px 10px;background:#1e1e1e;color:#fff;border-radius:6px 6px 0 0;font-size:12px}
#cloak-preview img{width:16px;height:16px;border-radius:0}
#settings-status{min-height:1.5em;color:var(--link)}
/* home */
#homestuff{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:16px}
.search-container{display:flex;gap:8px;width:100%;max-width:560px}.search-container input{flex:1}
.button-container{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.button-container button{width:56px;height:56px;padding:8px}.button-container img{width:36px;height:36px}
/* game and tool grids */
.search-bar-container{display:flex;justify-content:center;margin:8px 0}.search-bar{width:100%;max-width:420px}
#game-buttons,#tool-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:8px}
#game-buttons .button,#tool-buttons .button{position:relative;display:block;width:100%;padding:6px;margin:0;text-align:center;border:1px solid var(--line);background:var(--page);border-radius:var(--r);box-shadow:none}
#game-buttons .button:hover,#tool-buttons .button:hover{border-color:var(--link);filter:none}
#game-buttons .button img,#tool-buttons .button img{margin:0 auto;display:block}
.tile-label{display:block;margin-top:4px;font-size:12px;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fav-star{position:absolute;top:8px;right:8px;width:28px;height:28px;line-height:26px;text-align:center;font-size:16px;color:var(--muted);cursor:pointer;user-select:none;border:1px solid var(--bline);border-radius:var(--r);background:linear-gradient(var(--b1),var(--b2))}
.fav-star.on{color:#c98a00;border-color:#c98a00}
#recent h2{margin:4px 0}#recent-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.recent-thumb{width:120px;height:120px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.game-section-divider{height:1px;margin:12px 0;background:var(--line)}
.empty{margin:12px 0;padding:12px;text-align:center;border:1px solid var(--line);background:var(--page);border-radius:var(--r)}
/* search browser */
body.app{height:100vh;overflow:hidden}
body.app #page{max-width:none;height:calc(100vh - 28px);display:flex;flex-direction:column}
body.app header,body.app footer{display:none}
.container{display:flex;flex-direction:column;flex:1;min-height:0}
.toolbar{display:flex;gap:6px;align-items:center;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.nav-buttons{display:flex;gap:4px}.toolbar input{flex:1}
#frameWrap{position:relative;display:flex;flex:1;min-height:0}
#browserFrame{flex:1;width:100%;border:0;background:#fff}
#blocked{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;background:rgba(20,38,58,.45)}
.blocked-card{max-width:420px;padding:1rem 1.4rem;border:1px solid var(--line);background:var(--page);border-radius:var(--r);box-shadow:0 3px 12px rgba(0,30,70,.3)}
.blocked-card h2{margin:0 0 .5rem}
/* iframe start page inside search */
body.sh{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}
body.sh #clock{font:bold 56px/1 Georgia,serif;letter-spacing:2px}
body.sh #home-search{display:flex;width:100%;max-width:560px}body.sh #home-search input{flex:1;padding:6px 10px}
footer{border-top:1px solid var(--line);padding:8px 16px;font-size:12px;color:var(--muted)}footer p{margin:0}
@media (max-width:720px){#cols{flex-direction:column}}