*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0b1020;--panel:#141b31;--panel2:#1b2440;--text:#f7f8ff;--muted:#aab3cc;--accent:#6c7cff;--accent2:#8f5cff;--good:#35d39a;--danger:#ff5577}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(circle at top,#1a2240 0,#0b1020 48%,#070b16 100%);color:var(--text);touch-action:manipulation}
button{font:inherit;color:inherit;border:0;cursor:pointer}
#app{max-width:1000px;margin:auto;min-height:100vh;padding-bottom:25px}
.topbar{height:72px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;background:rgba(11,16,32,.9);backdrop-filter:blur(14px);border-bottom:1px solid #29314c}
.brand{font-size:22px;font-weight:800}.subtitle{font-size:12px;color:var(--muted)}
.icon-btn,.secondary{background:var(--panel2);border:1px solid #303a5d;border-radius:12px;padding:9px 13px}
.screen{display:none;padding:22px 18px}.screen.active{display:block}
.hero{text-align:center;padding:24px 10px 18px}.hero h1{font-size:32px;margin:5px 0 7px}.hero p{color:var(--muted);margin:0}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.game-card{min-height:170px;padding:18px;border-radius:20px;background:linear-gradient(145deg,#19213a,#10172b);border:1px solid #303b5e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:.15s}
.game-card:active{transform:scale(.97)}.game-icon{font-size:48px}.game-card b{font-size:18px}.game-card small{color:var(--muted)}
.game-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}.game-head h2{flex:1;text-align:center;font-size:20px;margin:0}
#gameArea{background:rgba(20,27,49,.72);border:1px solid #303a5d;border-radius:20px;min-height:520px;padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}
canvas{display:block;max-width:100%;border-radius:14px;background:#090d18}
.statbar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}.stat{background:var(--panel2);padding:8px 14px;border-radius:10px;font-size:14px}.stat strong{color:#fff}
.big-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));padding:13px 22px;border-radius:13px;font-weight:700;margin:8px}
.msg{text-align:center;color:var(--muted);margin:8px}.controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}.ctrl{width:58px;height:48px;border-radius:12px;background:var(--panel2);border:1px solid #303a5d;font-size:22px}
.ttt{display:grid;grid-template-columns:repeat(3,92px);gap:8px}.ttt button{height:92px;background:var(--panel2);border:1px solid #394565;border-radius:14px;font-size:40px;font-weight:800}
.memory{display:grid;grid-template-columns:repeat(4,70px);gap:9px}.memory button{width:70px;height:70px;border-radius:12px;background:#252f50;font-size:0}.memory button.open,.memory button.matched{font-size:31px;background:#3a4770}.memory button.matched{outline:2px solid var(--good)}
.tapbox{width:min(360px,90vw);height:300px;border-radius:24px;background:linear-gradient(145deg,#202a4c,#11182d);display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:900;user-select:none}
@media(max-width:700px){.game-grid{grid-template-columns:repeat(2,1fr)}.game-card{min-height:145px}.hero h1{font-size:28px}.screen{padding:15px 12px}.game-head{gap:6px}.game-head h2{font-size:17px}.secondary{padding:8px 9px}.ttt{grid-template-columns:repeat(3,76px)}.ttt button{height:76px}.memory{grid-template-columns:repeat(4,62px)}.memory button{width:62px;height:62px}.memory button.open,.memory button.matched{font-size:27px}}
@media(max-width:380px){.game-grid{gap:9px}.game-card{padding:12px}.game-icon{font-size:40px}.memory{gap:6px}.memory button{width:58px;height:58px}}