:root{--bg:#000;--bg-dark:#08080f;--bg-mid:#0f0f0f;--border:#2a2a2a;--dim:#787878;--text-dim:#aaa;--text:#fff;--accent:#62d59b;--accent-press:#4ab87e;--interactive:#c9dbf7;--positive:#62d59b;--error:red;--brand-charcoal:#2e2f45;--brand-mint:#62d59b;--font:"Jersey 15", 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{grid-template-rows:auto 1fr auto;height:100dvh;padding:0;display:grid;overflow:hidden}header{background:var(--brand-charcoal);justify-content:space-between;align-items:center;gap:var(--space-3);border-bottom:1px solid #ffffff12;flex-shrink:0;height:54px;padding:0 1.25rem;display:flex}.header-left{flex-shrink:0;align-items:center;gap:.6rem;display:flex}.header-ghost-icon{flex-shrink:0;width:26px;height:31px}.header-brand{flex-direction:column;gap:2px;display:flex}.header-title{color:var(--brand-mint);letter-spacing:-.01em;font-family:Inter Tight,sans-serif;font-size:.95rem;font-weight:700;line-height:1}.header-meta{align-items:center;gap:.35rem;display:flex}.header-badge{letter-spacing:.14em;color:var(--brand-mint);text-transform:uppercase;background:#62d59b2e;border:1px solid #62d59b61;border-radius:3px;padding:.12rem .4rem;font-family:Inter Tight,sans-serif;font-size:.48rem;font-weight:700}.header-mode{color:#ffffff59;letter-spacing:.06em;font-family:Inter Tight,sans-serif;font-size:.5rem}pong-hud{flex:1;justify-content:flex-end}.header-controls{flex-shrink:0;align-items:center;gap:.2rem;display:flex}.icon-btn{color:#ffffff73;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.4rem;line-height:1;transition:color .12s,background .12s;display:flex}.icon-btn:hover{color:var(--brand-mint);background:#ffffff12}.icon-btn:active{background:#ffffff1f}main{min-height:0;padding:0 var(--space-5);grid-area:2/1;grid-template-rows:1fr;grid-template-columns:1fr;display:grid}pong-canvas,pong-scoreboard{grid-area:1/1;min-height:0;position:relative}pong-scoreboard[hidden]{display:none!important}#game-tip-bar{background:var(--bg-dark);border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;padding:.45rem 1.25rem;display:flex}.tip-pill{background:var(--brand-charcoal);color:var(--brand-mint);font-family:var(--font);letter-spacing:.06em;white-space:nowrap;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:.35rem;padding:.3rem .8rem;font-size:.45rem;font-weight:400;display:inline-flex}.tip-social{flex-shrink:0;align-items:center;gap:.4rem;display:flex}.tip-social a{color:var(--text-dim);font-size:var(--fs-2xs);letter-spacing:.04em;text-decoration:none;transition:color .1s}.tip-social a:hover{color:var(--brand-mint)}.tip-dot{color:var(--dim);font-size:var(--fs-2xs)}#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}header{gap:var(--space-2);height:38px;padding:0 .5rem}.header-ghost-icon{width:18px;height:22px}.header-title{font-size:.75rem}.header-meta,.header-badge,.header-mode{display:none}main{padding:0 var(--space-2)}#game-tip-bar{display:none}}:root{--brand-bg:#eceae4;--brand-bg-soft:#f6f6f3;--brand-bg-right:#e4e1d9;--brand-ink:#111;--brand-charcoal:#2e2f45;--brand-mint:#62d59b;--brand-mustard:#b08a2e;--brand-electric:#c9dbf7;--font-logo:"Fredoka", sans-serif;--font-heading:"Fredoka", sans-serif;--font-btn:"Fredoka", sans-serif;--font-nav:"Inter Tight", sans-serif;--ui-font:"Nunito Sans", sans-serif;--font-badge:"Space Grotesk", sans-serif;--font-score:"Jersey 15", monospace;--ui-pill:999px;--ui-card-r:14px;--ui-shadow:6px 6px 0 var(--brand-ink);--ui-shadow-sm:3px 3px 0 var(--brand-ink);--ui-border:2px solid var(--brand-ink);--ui-ease:.12s ease}#ui-overlay{z-index:100;background:var(--brand-bg);font-family:var(--ui-font);color:var(--brand-ink);display:none;position:fixed;inset:0;overflow-y:auto}#ui-overlay.visible{align-items:stretch;display:flex}#ui-overlay.mode-pause{-webkit-backdrop-filter:blur(8px);background:#111111d1;justify-content:center;align-items:center}.ui-screen{justify-content:center;align-items:center;width:100%;min-height:100svh;padding:2.5rem 1.25rem;display:none}.ui-screen.active{display:flex}#screen-menu{align-items:stretch;padding:0}.screen-content{flex-direction:column;gap:1.75rem;width:100%;max-width:480px;display:flex}.screen-compact{max-width:360px}.menu-split{grid-template-columns:min(540px,52%) 1fr;min-height:100svh;display:grid;overflow:hidden}.menu-left{background:var(--brand-bg);flex-direction:column;justify-content:center;gap:2.2rem;padding:3rem 4rem 3rem 4.5rem;display:flex;position:relative}.menu-left:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#00000009);width:48px;position:absolute;top:0;bottom:0;right:0}.menu-right{background:var(--brand-bg-right);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.hero-svg{width:100%;height:100%;max-height:100svh}.menu-brand-row{align-items:center;gap:.75rem;display:flex}.ghost-logo-icon{filter:drop-shadow(2px 2px #00000026);flex-shrink:0;width:38px;height:46px}.menu-brand-text{flex-direction:column;gap:1px;display:flex}.menu-brand-name{font-family:var(--font-logo);color:var(--brand-ink);font-size:1.25rem;font-weight:700;line-height:1}.menu-brand-byline{font-family:var(--font-nav);color:#888;letter-spacing:.06em;font-size:.65rem;font-weight:500}.menu-content{flex-direction:column;gap:1.6rem;display:flex}.menu-arcade-badge{background:var(--brand-mint);color:var(--brand-ink);font-family:var(--font-badge);letter-spacing:.12em;text-transform:uppercase;border-radius:var(--ui-pill);border:var(--ui-border);width:fit-content;box-shadow:var(--ui-shadow-sm);padding:.22rem .75rem;font-size:.67rem;font-weight:600;display:inline-block}.menu-title{font-family:var(--font-heading);letter-spacing:-.01em;color:var(--brand-ink);margin:0;font-size:clamp(2.8rem,8vw,4.5rem);font-weight:700;line-height:.95}.title-scribble{width:min(300px,90%);height:16px;margin-top:-.6rem;margin-bottom:-.25rem;display:block}.menu-tagline{font-family:var(--ui-font);color:#666;margin:0;font-size:1.05rem;font-weight:500}.highscore-bar{background:var(--brand-bg-soft);border:var(--ui-border);border-radius:var(--ui-pill);width:fit-content;box-shadow:var(--ui-shadow-sm);align-items:center;gap:.4rem;padding:.4rem 1rem;font-size:.875rem;font-weight:600;display:inline-flex}.highscore-bar span{color:var(--brand-charcoal);font-size:1rem;font-weight:700}.menu-buttons{flex-direction:column;gap:.65rem;display:flex}.btn-primary{font-family:var(--font-btn);background:var(--brand-mint);color:var(--brand-ink);border:var(--ui-border);border-radius:var(--ui-pill);cursor:pointer;box-shadow:5px 5px 0 var(--brand-ink);text-align:center;letter-spacing:.02em;width:100%;padding:1rem 2rem;font-size:1.2rem;font-weight:600;transition:transform .1s,box-shadow .1s;position:relative}.btn-primary:hover{box-shadow:8px 8px 0 var(--brand-ink);background:#74dfa7;transform:translate(-3px,-3px)}.btn-primary:active{box-shadow:2px 2px 0 var(--brand-ink);transform:translate(2px,2px)}.pvp-cta-link{font-family:var(--font-btn);color:var(--brand-ink);border:var(--ui-border);border-radius:var(--ui-pill);background:var(--brand-bg-soft);box-shadow:var(--ui-shadow-sm);transition:background var(--ui-ease), transform var(--ui-ease);letter-spacing:.01em;justify-content:center;align-items:center;gap:7px;width:100%;padding:.55rem 1.1rem;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex}.pvp-cta-link:hover{background:var(--brand-charcoal);color:var(--brand-mint);transform:translate(-1px,-1px)}.pvp-cta-link .pvp-soon{background:var(--brand-charcoal);color:var(--brand-bg);letter-spacing:.05em;border-radius:4px;padding:2px 6px;font-size:.6rem;font-weight:800}.pvp-cta-link:hover .pvp-soon{background:var(--brand-mint);color:var(--brand-ink)}.btn-ghost{font-family:var(--font-btn);color:var(--brand-ink);border:var(--ui-border);border-radius:var(--ui-pill);cursor:pointer;transition:background var(--ui-ease), color var(--ui-ease);text-align:center;background:0 0;width:100%;padding:.75rem 2rem;font-size:1.05rem;font-weight:600}.btn-ghost:hover{background:var(--brand-ink);color:var(--brand-bg)}.btn-ghost:active{opacity:.75}.btn-with-icon{justify-content:center;align-items:center;gap:.5rem;display:flex}.btn-icon{opacity:.7;flex-shrink:0;width:18px;height:18px}#ui-overlay.mode-pause .btn-ghost{color:#fff;border-color:#ffffffa6}#ui-overlay.mode-pause .btn-ghost:hover{color:var(--brand-ink);background:#fff;border-color:#fff}.btn-back{font-family:var(--font-nav);color:var(--brand-ink);cursor:pointer;opacity:.5;transition:opacity var(--ui-ease);text-align:left;background:0 0;border:none;width:fit-content;padding:0;font-size:.85rem;font-weight:600}.btn-back:hover{opacity:1}.screen-header{flex-direction:column;gap:.6rem;display:flex}.screen-header h2{font-family:var(--font-heading);letter-spacing:-.01em;font-size:clamp(1.9rem,7vw,2.6rem);font-weight:700;line-height:1}.screen-title-center{font-family:var(--font-heading);letter-spacing:-.01em;text-align:center;color:#fff;font-size:2.2rem;font-weight:700}.howto-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.howto-item{background:var(--brand-bg-soft);border:var(--ui-border);border-radius:var(--ui-card-r);flex-direction:column;gap:.5rem;padding:1rem;display:flex}.howto-icon{font-size:1.4rem}.howto-item strong{margin-bottom:.2rem;font-size:.875rem;font-weight:700;display:block}.howto-item p{color:#555;font-size:.8rem;line-height:1.45}.howto-rules{background:var(--brand-bg-soft);border:var(--ui-border);border-radius:var(--ui-card-r);padding:1.1rem 1.25rem}.howto-rules h3{text-transform:uppercase;letter-spacing:.1em;color:#888;margin-bottom:.75rem;font-size:.7rem;font-weight:700}.howto-rules ul{flex-direction:column;gap:.5rem;list-style:none;display:flex}.howto-rules ul li{color:#444;padding-left:1.25rem;font-size:.875rem;line-height:1.4;position:relative}.howto-rules ul li:before{content:"→";color:var(--brand-mint);font-weight:700;position:absolute;left:0}.settings-list{flex-direction:column;gap:.75rem;display:flex}.setting-row{background:var(--brand-bg-soft);border:var(--ui-border);border-radius:var(--ui-card-r);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.setting-row label{flex-shrink:0;font-size:1rem;font-weight:600}.toggle-btn{font-family:var(--font-btn);background:var(--brand-mint);color:var(--brand-ink);border:var(--ui-border);border-radius:var(--ui-pill);cursor:pointer;min-width:64px;transition:background var(--ui-ease);padding:.35rem 1rem;font-size:.88rem;font-weight:600}.toggle-btn.off{background:var(--brand-bg);color:#999}.btn-group{gap:.4rem;display:flex}.btn-option{font-family:var(--font-btn);color:var(--brand-ink);border:var(--ui-border);border-radius:var(--ui-pill);cursor:pointer;transition:background var(--ui-ease), color var(--ui-ease), border-color var(--ui-ease);background:0 0;padding:.35rem .8rem;font-size:.82rem;font-weight:600}.btn-option.active{background:var(--brand-charcoal);color:#fff;border-color:var(--brand-charcoal)}.btn-option:hover:not(.active){background:var(--brand-ink);color:var(--brand-bg);border-color:var(--brand-ink)}.settings-note{color:#999;text-align:center;font-size:.78rem}.about-content{flex-direction:column;gap:1rem;display:flex}.about-content p{color:#444;font-size:.95rem;line-height:1.65}.social-links{flex-wrap:wrap;gap:.75rem;margin-top:.25rem;display:flex}.social-links a{color:var(--brand-ink);background:var(--brand-bg-soft);border:var(--ui-border);border-radius:var(--ui-pill);box-shadow:var(--ui-shadow-sm);transition:background var(--ui-ease), transform var(--ui-ease);align-items:center;gap:.3rem;padding:.45rem 1rem;font-size:.875rem;font-weight:600;text-decoration:none;display:inline-flex}.social-links a:hover{background:var(--brand-mint);transform:translate(-1px,-1px)}.coming-soon-block{flex-direction:column;gap:.65rem;display:flex}.cs-label{font-family:var(--font-badge);text-transform:uppercase;letter-spacing:.12em;color:#999;font-size:.7rem;font-weight:600}.cs-tags{flex-wrap:wrap;gap:.5rem;display:flex}.tag{font-family:var(--font-badge);background:var(--brand-charcoal);color:#fff9;border-radius:var(--ui-pill);letter-spacing:.02em;padding:.32rem .85rem;font-size:.8rem;font-weight:600}.menu-social{align-items:center;gap:.5rem;padding-top:.25rem;display:flex}.menu-social-link{font-family:var(--font-nav);color:#555;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;text-decoration:none;transition:color .12s;display:inline-flex}.menu-social-link:hover{color:#111}.menu-social-dot{color:#bbb;font-size:.9rem;line-height:1}.score-display{border-radius:var(--ui-card-r);background:#f6f6f314;border:2px solid #fff3;overflow:hidden}.score-row{color:#fff;justify-content:space-between;align-items:center;padding:1rem 1.25rem;font-size:1rem;font-weight:600;display:flex}.score-row+.score-row{border-top:1px solid #ffffff1f}.score-row span:last-child{font-variant-numeric:tabular-nums;font-size:1.75rem;font-weight:700}.new-record-banner{text-align:center;color:var(--brand-mint);border:2px solid var(--brand-mint);border-radius:var(--ui-pill);background:#62d59b1f;padding:.6rem 1rem;font-size:1rem;font-weight:700}.new-record-banner[hidden]{display:none}#screen-gameover .screen-title-center,#screen-gameover .score-row{color:#fff}@media (width<=820px){.menu-split{grid-template-columns:1fr}.menu-right{display:none}.menu-left{border-right:none;padding:2.5rem 1.75rem}}@media (width<=480px){.howto-grid{grid-template-columns:1fr}.btn-group{flex-wrap:wrap}.screen-content{gap:1.25rem}.menu-title{font-size:2.75rem}}@media (height<=600px) and (orientation:landscape){.ui-screen:not(#screen-menu){align-items:flex-start;padding:1rem 1.25rem}.screen-content{gap:1rem}.menu-buttons{gap:.5rem}.btn-primary,.btn-ghost{padding:.6rem 1.5rem;font-size:.9rem}.menu-title{font-size:2rem}.menu-left{border-radius:16px;padding:1rem 1.5rem}}