/* Pinkpong Styles */
:root{
  --bg:#0b0b12;
  --table:#1a1a2b;
  --table-edge:#11111c;
  --line:#ffffff99;
  --hud:#e6e6f0;
  --accent:#ff4fe0;
}

*{box-sizing:border-box;-webkit-tap-highlight-color: transparent;}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#111018,#09080f 70%);color:var(--hud);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';}
header{padding:8px 10px 0;}
.logo3d{
  font-size: clamp(28px, 8vw, 72px);
  text-align:center;
  margin:6px auto 8px;
  font-weight:900;
  letter-spacing:2px;
  color:#ffe6fb;
  text-shadow: 0 2px 0 #ff00b3, 0 4px 0 #e700a6, 0 6px 0 #ca0090, 0 8px 0 #a10074,
               0 10px 15px rgba(255,0,200,.6), 0 0 30px rgba(255,98,228,.5);
}

.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:1100px;margin:0 auto 6px;padding:4px 6px;}
.hud .hud-col{display:flex;flex-direction:column;gap:4px;background:#0f0f18aa;border:1px solid #24243b;border-radius:10px;padding:6px 10px;min-width:160px}
.hud .right{text-align:right;}
.hud-center{display:flex;align-items:center;gap:8px;}
.btn{background:linear-gradient(180deg,#ff66ee,#ff2ed6);border:none;color:#fff;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;box-shadow:0 6px 15px rgba(255,80,220,.25);}
.btn:active{transform:translateY(1px)}
.hidden{display:none}

main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px}
#gameContainer{position:relative;width: min(96vw, 900px);aspect-ratio: 4/3;border-radius:16px;padding:10px;background: radial-gradient(100% 100% at 50% 0%, #1a182a, #0d0c18 70%);
  box-shadow: inset 0 0 0 1px #24243b, 0 20px 60px rgba(0,0,0,.55);}
#game{width:100%;height:100%;display:block;image-rendering: optimizeSpeed;}

.hint{opacity:.8;font-size:.9rem;margin:0 8px;text-align:center}
footer{padding:10px;text-align:center;color:#bdbdd2}
footer a{color:#ff8ff1;text-decoration:none}
.copy{opacity:.8}

/* Small touch helpers */
@media (max-width:420px){
  .hud .hud-col{min-width:auto}
  .hud{gap:4px}
}