* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; background: #000; color: #fff; font-family: Inter, system-ui, sans-serif; }
body { overflow-x: hidden; }
.page-shell { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 12px 16px 24px; }
.community-banner { width: min(100%, 1040px); margin: 0 auto 16px; padding: 12px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: #e5e7eb; line-height: 1.5; }
.community-banner a { color: #7dd3fc; }
.back-row { margin-top: 8px; }
.back-row a { color: #86efac; }
.game-shell { width: 100%; flex: 1; display: flex; justify-content: center; align-items: flex-start; }
canvas { display: block; width: min(88vw, 860px); max-height: calc(100vh - 150px); aspect-ratio: 7 / 9; background: #000; touch-action: manipulation; }
.mobile-hint { display:none; width:min(100%,1040px); margin:8px auto 0; padding:10px 14px; background:rgba(125,211,252,.10); border:1px solid rgba(125,211,252,.18); border-radius:12px; color:#dbeafe; font-size:.92rem; }
@media (max-width: 900px) { .page-shell { padding: 10px 12px 20px; } .community-banner { margin-bottom: 12px; font-size: 0.95rem; } canvas { width: min(100vw - 24px, 680px); max-height: none; } }
@media (max-width: 640px) { .page-shell { padding: 8px 8px 16px; } .community-banner { padding: 10px 12px; font-size: 0.9rem; line-height: 1.45; } .mobile-hint { display:block; font-size:.86rem; } canvas { width: min(100vw - 12px, 520px); } }
@media (max-width: 480px) { .community-banner { padding: 9px 10px; font-size: 0.84rem; } .mobile-hint { padding:8px 10px; } canvas { width: min(100vw - 8px, 420px); } }