:root { color-scheme: dark; --radius: 8px; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, rgba(32,201,151,0.12), transparent 34%), linear-gradient(225deg, rgba(239,71,111,0.09), transparent 30%), var(--color-surface,#101115); }
.tw-inp:focus { border-color: var(--color-accent); }
.tw-inp::placeholder { color: color-mix(in srgb, var(--color-muted) 60%, transparent); }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-fade { animation: pageFadeIn 0.32s ease-out both; }
.game-card { position: relative; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; background: #000; }
.game-card a { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; }
.game-art { width: 100%; height: 100%; object-fit: contain; display: block; }
.game-card:hover .game-art { display: none; }
.game-video { display: none; width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; background: #000; }
.game-card:hover .game-video { display: block; }
.game-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: linear-gradient(transparent 50%, rgba(0,0,0,0.85)); opacity: 0; transition: opacity 0.2s; }
.game-card:hover .game-overlay { opacity: 1; }
.game-overlay .tag { width: fit-content; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 3px 8px; margin-bottom: 6px; font-size: 0.7rem; font-weight: 800; color: var(--color-accent); }
.game-overlay h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.game-fallback { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.35rem; font-weight: 900; color: rgba(8,10,12,0.74); }
.arcade { background: linear-gradient(135deg, var(--color-accent), #ffd166); }
.puzzle { background: linear-gradient(135deg, #ef476f, #4dabf7); }
.action { background: linear-gradient(135deg, #ff922b, #ef476f); }
.other { background: linear-gradient(135deg, #8ce99a, #69db7c); }
.filter-button { min-height: 36px; border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-panel,#171a21); color: var(--color-muted); cursor: pointer; font:inherit; font-weight: 800; padding: 0 14px; }
.filter-button:hover, .filter-button.active { border-color: var(--color-accent); color: var(--color-text,#f6f7fb); }
.tile { position: absolute; width: 82px; height: 82px; border-radius: var(--radius); box-shadow: 0 18px 48px rgba(0,0,0,0.24); }
.tile-a { top: 14%; left: 12%; background: var(--color-accent); }
.tile-b { top: 26%; right: 14%; background: #ef476f; }
.tile-c { bottom: 18%; left: 26%; background: #ffd166; }
.tile-d { right: 20%; bottom: 14%; background: #4dabf7; }
.tile-e { top: 47%; left: 43%; background: #f8f9fa; }
.section-label { margin: 0 0 4px; font-size: 0.7rem; font-weight: 800; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.05em; }
.tag { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: 999px; padding: 3px 10px; font-size: 0.7rem; font-weight: 800; color: var(--color-muted); white-space: nowrap; }
.tb-lbl { display: grid; gap: 2px; }
.tb-btns { display: flex; flex-wrap: wrap; gap: 6px; }