:root{--bg:#000;--bg-dark:#050505;--bg-mid:#0f0f0f;--border:#2a2a2a;--dim:#787878;--text-dim:#aaa;--text:#fff;--accent:#ff0;--accent-press:#cc0;--interactive:#0ff;--positive:#0f0;--error:red;--font:"Press Start 2P", monospace;--fs-2xs:.55rem;--fs-xs:.625rem;--fs-sm:.75rem;--fs-lg:1.25rem;--fs-xl:1.5rem;--tracking:.08em;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);font-size:10px}#app{height:100dvh;padding:0 var(--space-5);grid-template-rows:auto 1fr auto;display:grid;overflow:hidden}header{padding:var(--space-4) 0;border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}#logo{align-items:flex-start;gap:var(--space-2);font-size:var(--fs-xl);letter-spacing:.04em;color:var(--accent);flex-shrink:0;line-height:1;display:flex}#logo img{image-rendering:pixelated;display:block}.logo-title{flex-direction:column;align-items:flex-end;line-height:1.2;display:flex}.logo-sub{font-size:var(--fs-xs);color:var(--text-dim);letter-spacing:var(--tracking)}pong-hud{flex:1;justify-content:flex-end}main{grid-area:2/1;grid-template-rows:1fr;grid-template-columns:1fr;min-height:0;display:grid}pong-canvas,pong-scoreboard{grid-area:1/1;min-height:0;position:relative}pong-scoreboard[hidden]{display:none!important}footer{padding:var(--space-3) 0;text-align:right;color:var(--dim);font-size:var(--fs-2xs);border-top:1px solid var(--border)}footer a{color:var(--text-dim);text-decoration:underline}footer a:hover{color:var(--text)}#rotate-overlay{z-index:200;background:var(--bg);justify-content:center;align-items:center;gap:var(--space-6);color:var(--text-dim);flex-direction:column;display:none;position:fixed;inset:0}#rotate-overlay p{font-size:var(--fs-sm);letter-spacing:.05em}@keyframes rotate-hint{0%,to{transform:rotate(0)}40%,60%{transform:rotate(90deg)}}#rotate-overlay .rotate-icon{transform-origin:50%;color:var(--accent);animation:2.5s ease-in-out infinite rotate-hint}@media (pointer:coarse) and (orientation:portrait){body.game-playing #rotate-overlay,body.play-pending #rotate-overlay{display:flex}}@media (height<=480px) and (orientation:landscape){#app{padding:0 var(--space-2)}header{gap:var(--space-2);z-index:30;border-bottom:none;padding:.2rem 0;position:relative}#logo{font-size:var(--fs-sm)}.logo-sub{font-size:.4rem}footer{display:none}}