*{box-sizing:border-box}body{color:#e8ddc8;background:radial-gradient(circle at 50% 20%,#2f2a3d 0%,#1a1722 70%);place-items:center;min-height:100vh;margin:0;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;display:grid}.frame{line-height:0;position:relative}canvas{image-rendering:pixelated;cursor:pointer;background:#1a1722;border-radius:10px;display:block;box-shadow:0 24px 60px #0000008c}.hud{text-shadow:0 2px 4px #000c;pointer-events:none;flex-direction:column;line-height:1.5;display:flex;position:absolute;bottom:14px;left:16px}.hud strong{letter-spacing:.08em;font-size:15px}.hud span{opacity:.65;font-size:11px}.card{background:#1c1826f0;border:1px solid #f0c87859;border-radius:10px;width:260px;padding:14px 16px 16px;line-height:1.5;position:absolute;bottom:14px;right:16px;box-shadow:0 12px 32px #00000080}.card[hidden]{display:none}.card h2{letter-spacing:.06em;color:#f4d79b;margin:0 0 6px;font-size:15px}.card p{opacity:.8;margin:0;font-size:11.5px}.card-close{color:#e8ddc8;opacity:.5;cursor:pointer;background:0 0;border:0;border-radius:4px;width:20px;height:20px;padding:0;font-size:16px;line-height:1;position:absolute;top:8px;right:8px}.card-close:hover{opacity:1;background:#ffffff14}@media (width<=700px),(height<=620px){body{align-items:start;padding:8px}.frame{width:100%}canvas{max-width:100%}.hud{max-width:100%;padding:8px 10px 0;line-height:1.4;position:static}.hud strong{font-size:13px}.hud span{font-size:10px}.card{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:12px;width:auto;max-height:min(34vh,220px);padding:12px 40px 12px 14px;line-height:1.4;position:fixed;bottom:10px;left:10px;right:10px;overflow-y:auto}.card h2{margin-bottom:4px;font-size:14px}.card p{font-size:11px}}