:root{
color-scheme:dark;
--bg:#090a12;
--bg-2:#111321;
--panel:#161827;
--panel-2:#202337;
--panel-3:#292d45;
--line:#3a405d;
--text:#f8f4ff;
--muted:#b9bfd6;
--orange:#ff9a2f;
--purple:#a855ff;
--blue:#35b7ff;
--green:#52ff9d;
--red:#ff4f6f;
--shadow:0 14px 38px rgba(0,0,0,.34);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
font-family:Arial,Helvetica,sans-serif;
margin:0;
padding:22px;
background:
linear-gradient(180deg,rgba(168,85,255,.12),transparent 320px),
linear-gradient(90deg,rgba(255,154,47,.08),transparent 45%,rgba(53,183,255,.08)),
var(--bg);
color:var(--text);
line-height:1.5;
}
body:before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.2;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:24px 24px;
mask-image:linear-gradient(to bottom,#000,transparent 78%);
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
button,a{touch-action:manipulation;}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{
outline:3px solid var(--green);
outline-offset:3px;
}
.skip-link{
position:absolute;
left:16px;
top:10px;
z-index:20;
transform:translateY(-140%);
padding:10px 12px;
border:2px solid var(--green);
border-radius:6px;
background:#05070d;
color:var(--text);
font-weight:800;
}
.skip-link:focus{transform:translateY(0);}
.page{max-width:1120px;margin:0 auto;position:relative;}
.site-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;}
.eyebrow{margin:0 0 6px;color:var(--green);font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;}
h1,h2,h3{margin-top:0;line-height:1.15;}
h1{margin-bottom:0;font-size:clamp(34px,6vw,64px);}
.brand-title{
font-weight:900;
letter-spacing:0;
color:transparent;
background:linear-gradient(90deg,var(--orange),var(--purple) 48%,var(--blue));
-webkit-background-clip:text;
background-clip:text;
text-shadow:3px 3px 0 rgba(255,79,111,.24),0 0 28px rgba(53,183,255,.25);
}
h2{font-size:26px;}
.site-nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.site-nav a,.category-pills a{
border:1px solid var(--line);
background:rgba(22,24,39,.82);
border-radius:6px;
padding:8px 12px;
color:var(--text);
}
.site-nav a:hover,.category-pills a:hover{
border-color:var(--blue);
box-shadow:0 0 0 1px rgba(53,183,255,.2);
text-decoration:none;
}
.intro{max-width:780px;color:var(--muted);font-size:18px;margin:0 0 24px;}
.category-pills{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;}
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.card,.content-panel{
background:linear-gradient(180deg,rgba(32,35,55,.96),rgba(16,18,31,.96));
border:1px solid var(--line);
border-radius:8px;
padding:16px;
box-shadow:var(--shadow);
}
.game-card{
position:relative;
display:flex;
flex-direction:column;
min-height:100%;
overflow:hidden;
padding:12px;
}
.game-card:before{
content:"";
position:absolute;
inset:0;
border-radius:8px;
pointer-events:none;
box-shadow:inset 0 0 0 2px rgba(255,154,47,.14),inset 0 0 22px rgba(168,85,255,.16);
}
.game-art-link{
display:block;
position:relative;
z-index:1;
aspect-ratio:1;
margin-bottom:12px;
border:1px solid rgba(255,255,255,.14);
border-radius:6px;
overflow:hidden;
background:#070812;
}
.game-art{
display:block;
width:100%;
height:100%;
object-fit:cover;
image-rendering:auto;
}
.game-card h3{position:relative;z-index:1;margin:0 0 8px;font-size:22px;}
.game-card p{position:relative;z-index:1;color:var(--muted);margin:0 0 10px;}
.game-meta{font-size:14px;}
button{
padding:10px 14px;
cursor:pointer;
border:1px solid var(--line);
border-radius:7px;
background:var(--panel-2);
color:var(--text);
font-weight:800;
font-size:15px;
}
button:hover:not(:disabled){border-color:var(--green);background:#19362d;text-decoration:none;}
button:disabled{cursor:not-allowed;opacity:.45;}
.play-button,.primary-action{
background:linear-gradient(135deg,#203d31,#16344d 58%,#3a194e);
border-color:rgba(82,255,157,.62);
box-shadow:0 0 0 1px rgba(82,255,157,.12),0 0 18px rgba(82,255,157,.14);
}
.game-card .play-button{position:relative;z-index:1;margin-top:auto;width:100%;}
#topbar{
position:sticky;
top:0;
z-index:10;
max-width:1120px;
margin:0 auto 12px;
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
padding:10px 0;
background:linear-gradient(180deg,var(--bg),rgba(9,10,18,.86));
backdrop-filter:blur(8px);
}
#topbar button{min-height:42px;}
#score{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:8px 12px;
border:1px solid rgba(53,183,255,.44);
border-radius:7px;
background:rgba(32,35,55,.86);
color:var(--green);
font-weight:900;
}
#game-container{width:100%;max-width:1120px;margin:0 auto;}
.site-footer{
max-width:1120px;
margin:32px auto 0;
padding-top:16px;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:16px;
color:var(--muted);
font-size:14px;
}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.changelog-list{display:grid;gap:16px;}
.release{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;}
.release-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
.release h2{margin:0;font-size:20px;}
.release time{color:var(--muted);font-size:14px;}
.release ul{margin:0;padding-left:20px;color:#ddd;}
.release li{margin:6px 0;}
.game-shell{display:grid;gap:12px;}
.game-stage{
background:linear-gradient(180deg,rgba(22,24,39,.98),rgba(11,12,22,.98));
border:1px solid var(--line);
border-radius:8px;
padding:16px;
min-height:250px;
box-shadow:var(--shadow),inset 0 0 0 2px rgba(53,183,255,.08);
}
.game-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:24px;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.stat{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:12px;}
.stat strong{display:block;font-size:24px;color:var(--orange);}
.primary-action{width:100%;min-height:110px;font-size:24px;}
.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;}
.upgrade{display:grid;gap:6px;text-align:left;}
.status-line{min-height:28px;color:var(--muted);font-weight:700;}
.reaction-pad{display:grid;place-items:center;min-height:230px;border:1px solid var(--line);border-radius:8px;background:#171a27;text-align:center;padding:20px;}
.reaction-pad.ready{background:#173524;}
.reaction-pad.too-soon{background:#3a1822;}
.reaction-pad button{font-size:22px;min-width:180px;min-height:70px;}
.memory-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(56px,1fr));gap:10px;max-width:520px;margin:0 auto;}
.memory-card{aspect-ratio:1;border-radius:8px;font-size:28px;background:var(--panel-2);}
.memory-card.matched{background:#18362c;border-color:#32634f;}
.flood-board{display:grid;gap:4px;max-width:420px;margin:0 auto 16px;}
.flood-cell{aspect-ratio:1;border-radius:5px;border:1px solid rgba(255,255,255,.14);}
.color-picks{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.swatch{width:44px;height:44px;border-radius:50%;padding:0;font-size:0;}
.red{background:#e85b63;}
.blue{background:#4d8dff;}
.green{background:#58c487;}
.yellow{background:#e8c84f;}
.purple{background:#a876e8;}
.word-box{display:grid;gap:12px;max-width:520px;margin:0 auto;text-align:center;}
.scramble,.math-problem{font-size:clamp(34px,8vw,64px);font-weight:800;margin:12px 0;letter-spacing:.08em;}
.game-input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#0d0f19;color:var(--text);font-size:18px;}
.tile-board{display:grid;grid-template-columns:repeat(3,minmax(72px,120px));gap:10px;justify-content:center;margin:0 auto 14px;}
.tile{aspect-ratio:1;font-size:28px;background:var(--panel-2);}
.tile.empty{background:transparent;border-color:transparent;}
.aim-arena{position:relative;min-height:320px;border:1px solid var(--line);border-radius:8px;background:#10131f;overflow:hidden;}
.aim-target{position:absolute;width:58px;height:58px;border-radius:50%;padding:0;background:var(--green);color:#102016;border-color:#a4f0c9;}
.pulse-board{display:grid;grid-template-columns:repeat(2,minmax(110px,180px));gap:12px;justify-content:center;margin:0 auto 14px;}
.pulse{aspect-ratio:1;border-radius:8px;opacity:.55;font-size:0;}
.pulse.active,.pulse:active{opacity:1;filter:brightness(1.45);}
.seo-content{max-width:1120px;margin:28px auto 0;display:grid;gap:16px;}
.seo-content p,.seo-content li{color:var(--muted);}
.page-copy{display:grid;gap:16px;}
.page-copy p,.page-copy li{color:var(--muted);}
.contact-list{display:grid;gap:10px;margin:0;padding:0;list-style:none;}
.faq-list{display:grid;gap:12px;}
.faq-list details{background:rgba(22,24,39,.82);border:1px solid var(--line);border-radius:8px;padding:14px;}
.faq-list summary{cursor:pointer;font-weight:700;}
.category-list{display:grid;gap:12px;}
.related-games{display:grid;gap:12px;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;}
.related-grid a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;}
.related-grid a:hover{border-color:var(--purple);text-decoration:none;}
.related-grid strong{display:block;color:var(--text);margin-bottom:4px;}
.related-grid span{color:var(--muted);font-size:14px;}
.game-visual-card{
float:right;
width:min(34%,180px);
margin:0 0 12px 16px;
border:1px solid rgba(255,255,255,.14);
border-radius:6px;
overflow:hidden;
background:#070812;
box-shadow:0 0 0 2px rgba(168,85,255,.12);
}
.game-visual-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;}
.not-found{min-height:65vh;display:grid;align-content:center;}
.not-found-game{margin:18px 0;}
#lost-canvas{display:block;width:100%;max-width:640px;aspect-ratio:16/9;margin:0 auto 12px;border:1px solid var(--line);border-radius:8px;background:#08090d;}
@media (hover:hover){
.game-card:hover{transform:translateY(-2px);border-color:rgba(53,183,255,.72);}
.game-card:hover .game-art{filter:saturate(1.12) brightness(1.08);}
}
@media (prefers-reduced-motion:no-preference){
.game-card,.game-art,button,.site-nav a,.category-pills a{transition:transform .16s ease,border-color .16s ease,filter .16s ease,background .16s ease;}
}
@media (max-width:760px){
body{padding:12px;}
.site-header{align-items:flex-start;flex-direction:column;margin-bottom:18px;}
.site-nav{justify-content:flex-start;}
.intro{font-size:16px;margin-bottom:18px;}
.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.game-card{padding:9px;}
.game-card h3{font-size:17px;margin-bottom:6px;}
.game-card p{font-size:13px;margin-bottom:8px;}
.game-meta{display:none;}
.play-button{padding:9px 8px;font-size:13px;}
#topbar{padding:8px 0;margin-bottom:8px;}
#topbar button,#score{min-height:38px;font-size:14px;}
.game-stage{padding:12px;min-height:220px;}
.site-footer{align-items:flex-start;flex-direction:column;}
.footer-links{justify-content:flex-start;}
.primary-action{min-height:88px;font-size:21px;}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px;}
.stat{padding:9px;}
.stat strong{font-size:21px;}
.reaction-pad{min-height:200px;padding:14px;}
.memory-grid{gap:7px;}
.tile-board{grid-template-columns:repeat(3,minmax(64px,1fr));gap:8px;max-width:330px;}
.aim-arena{min-height:300px;}
.pulse-board{grid-template-columns:repeat(2,minmax(96px,1fr));gap:10px;max-width:340px;}
.game-visual-card{width:92px;margin:0 0 10px 12px;}
}
@media (max-width:420px){
body{padding:10px;}
h1{font-size:36px;}
h2{font-size:22px;}
.game-grid{gap:10px;}
.game-card{border-radius:7px;}
.category-pills a,.site-nav a{padding:7px 9px;font-size:14px;}
#topbar{gap:8px;}
#score{padding:7px 9px;min-width:0;}
.game-stage{padding:10px;}
.swatch{width:40px;height:40px;}
.scramble,.math-problem{font-size:34px;}
}
@media (max-width:340px){
.game-grid{grid-template-columns:1fr;}
.game-visual-card{display:none;}
}