:root { --bg: #141a3a; --card: #221d4a; --plum: #3a2463; --lime: #d4ff3a; --text: #f3f0ff; --dim: #b9b2d9 }
* { box-sizing: border-box }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.3 system-ui, -apple-system, sans-serif }
body { padding: 0 12px 24px; -webkit-tap-highlight-color: transparent }
header { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 4px }
header b { font-size: 20px }
header .u { padding: 4px 10px; border-radius: 99px; background: var(--plum); color: var(--lime); font-weight: 700 }
h1 { margin: 14px 4px 10px; font-size: 22px }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.card { display: flex; flex-direction: column; gap: 2px; padding: 0 0 10px; border: 0; border-radius: 16px; overflow: hidden;
        background: var(--card); color: var(--text); text-align: left; font: inherit; cursor: pointer }
.card:active { transform: scale(.97) }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--plum); margin-bottom: 6px }
.card b, .card small { padding: 0 10px }
.card b { font-size: 14px }
.card small { color: var(--dim); font-size: 12px }
.msg { padding: 40vh 20px 0; text-align: center; color: var(--dim) }
iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg) }
body.playing #app { display: none }