*{box-sizing:border-box}
:root{
  --bg:#07111f;--panel:#101a31;--panel2:#162345;--text:#f4fbff;--muted:#9fb2d6;
  --cyan:#64ecff;--gold:#ffd76b;--pink:#ff6fd5;--green:#8dff9b;--purple:#b48cff;--red:#ff7a7a;
  --border:rgba(255,255,255,.12);--shadow:0 24px 70px rgba(0,0,0,.34)
}
html,body{margin:0;width:100%;height:100%;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}
body{
  background:
    radial-gradient(900px 500px at 8% -14%,rgba(100,236,255,.24),transparent 60%),
    radial-gradient(760px 460px at 100% 0%,rgba(255,111,213,.17),transparent 58%),
    radial-gradient(680px 360px at 50% 112%,rgba(255,215,107,.12),transparent 60%),
    #07111f;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(30deg,transparent 47%,rgba(255,255,255,.11) 48%,rgba(255,255,255,.11) 52%,transparent 53%);background-size:42px 72px}
button,a{font:inherit}
button{color:inherit}
.hpp-shell{width:min(1320px,calc(100vw - 16px));height:100dvh;max-height:100dvh;margin:0 auto;padding:6px 0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:6px;overflow:hidden}
.hpp-top,.hpp-hud article,.hpp-game-card,.hpp-panel,.hpp-modal{
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),rgba(8,16,35,.82);
  box-shadow:var(--shadow);backdrop-filter:blur(12px)
}
.hpp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:18px}
.hpp-brand{display:flex;align-items:center;gap:10px;min-width:0}
.hpp-mark{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#07111f;font-weight:1000;box-shadow:0 0 24px rgba(100,236,255,.28)}
.hpp-brand p,.hpp-kicker{margin:0;color:var(--cyan);font-size:.68rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase}
.hpp-brand h1{margin:0;font-size:clamp(1.25rem,3vw,2.05rem);letter-spacing:-.04em}
.hpp-actions{display:flex;gap:8px;align-items:center}
.hpp-ghost,.hpp-icon,.hpp-primary{border:0;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-weight:950;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.hpp-ghost{min-height:38px;padding:8px 13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--text)}
.hpp-icon{width:38px;height:38px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.hpp-primary{min-height:42px;padding:9px 16px;background:linear-gradient(135deg,var(--gold),var(--cyan));color:#06111f;box-shadow:0 14px 34px rgba(100,236,255,.14)}
button:hover:not(:disabled),a:hover{transform:translateY(-1px);filter:brightness(1.06)}
button:disabled{opacity:.52;cursor:not-allowed;transform:none}
.hpp-hud{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.hpp-hud article{border-radius:14px;padding:6px 9px;min-height:44px}
.hpp-hud span{display:block;color:var(--muted);font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.10em}
.hpp-hud strong{display:block;margin-top:2px;font-size:1.08rem}
.hpp-game-card{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:10px;border-radius:24px;padding:8px;min-height:0;height:100%;overflow:hidden}
.hpp-canvas-wrap{position:relative;min-height:0;height:100%;border:1px solid rgba(255,255,255,.09);border-radius:22px;overflow:hidden;background:
  radial-gradient(600px 360px at 50% 50%,rgba(100,236,255,.12),transparent 68%),
  rgba(0,0,0,.18)}
#gameCanvas{display:block;width:100%;height:100%;min-height:0;touch-action:none;background:transparent}
.hpp-overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;padding:20px;background:radial-gradient(440px 260px at 50% 50%,rgba(8,16,35,.92),rgba(8,16,35,.55),rgba(8,16,35,.25));z-index:5}
.hpp-overlay.hidden{display:none}
.hpp-overlay h2{margin:4px 0 8px;font-size:clamp(2rem,6vw,4.4rem);line-height:.94;letter-spacing:-.06em}
.hpp-overlay p:not(.hpp-kicker){max-width:52ch;color:#d4e4ff;line-height:1.45}
.hpp-side{display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:8px;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:2px}
.hpp-panel{border-radius:16px;padding:10px}
.hpp-panel .hpp-kicker{margin-bottom:8px}
.hpp-power-list{display:grid;gap:7px}
.hpp-power-list span{min-height:34px;display:flex;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:7px 8px;background:rgba(255,255,255,.035);font-weight:850;color:#dfe9ff}
.hpp-log{min-height:60px;color:var(--muted);line-height:1.35}
.hpp-mobile-controls{align-content:start;gap:8px;display:grid}
.hpp-bottom-controls{display:none;grid-template-columns:1fr 1fr 1fr;gap:7px}
.hpp-dialog{border:0;background:transparent;color:inherit;padding:0}
.hpp-dialog::backdrop{background:rgba(2,6,14,.76);backdrop-filter:blur(7px)}
.hpp-modal{width:min(720px,calc(100vw - 22px));padding:18px;border-radius:26px}
.hpp-modal h2{margin:2px 0 8px;font-size:clamp(1.7rem,5vw,2.7rem);letter-spacing:-.045em}
.hpp-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.hpp-guide-grid article{padding:12px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.hpp-guide-grid span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--cyan));color:#08111e;font-weight:1000}
.hpp-guide-grid strong{display:block;margin:8px 0 4px}
.hpp-guide-grid p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.35}
.hpp-result{text-align:center}
#finalScore{display:block;color:var(--gold);font-size:clamp(2.6rem,8vw,5rem);line-height:1;text-shadow:0 0 24px rgba(255,215,107,.25)}
#resultSummary{color:var(--muted)}
.hpp-result-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
@media(max-width:980px){
  .hpp-game-card{grid-template-columns:1fr}
  .hpp-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .hpp-mobile-controls{display:none}
  .hpp-bottom-controls{display:grid}
  .hpp-canvas-wrap,#gameCanvas{min-height:0;height:100%}
}
@media(max-width:680px){
  .hpp-shell{width:min(100vw - 8px,680px);gap:5px;padding-top:4px}
  .hpp-top{padding:7px 8px;border-radius:16px}
  .hpp-mark{width:34px;height:34px;border-radius:12px}
  .hpp-brand p{display:none}
  .hpp-brand h1{font-size:1.08rem}
  .hpp-actions{gap:5px}
  .hpp-ghost,.hpp-primary{min-height:34px;padding:7px 10px;font-size:.82rem}
  .hpp-icon{width:34px;height:34px}
  .hpp-hud{grid-template-columns:repeat(6,1fr);gap:4px}
  .hpp-hud article{padding:5px 4px;min-height:38px;border-radius:11px}
  .hpp-hud span{font-size:.45rem;letter-spacing:.04em}
  .hpp-hud strong{font-size:.78rem}
  .hpp-game-card{padding:6px;border-radius:16px}
  .hpp-canvas-wrap{border-radius:14px;min-height:calc(100dvh - 190px)}
  #gameCanvas{min-height:calc(100dvh - 190px)}
  .hpp-side{display:none}
  .hpp-bottom-controls{display:grid}
  .hpp-bottom-controls .hpp-ghost,.hpp-bottom-controls .hpp-primary{font-size:.75rem}
  .hpp-overlay h2{font-size:2.25rem}
  .hpp-overlay p:not(.hpp-kicker){font-size:.9rem}
  .hpp-guide-grid{grid-template-columns:1fr}
}
@media(max-height:560px) and (orientation:landscape){
  .hpp-shell{width:min(100vw - 8px,1120px)}
  .hpp-top{display:none}
  .hpp-hud{grid-template-columns:repeat(6,1fr)}
  .hpp-hud article{min-height:34px;padding:4px 7px}
  .hpp-hud span{font-size:.46rem}
  .hpp-hud strong{font-size:.78rem}
  .hpp-game-card{grid-template-columns:minmax(0,1fr) 210px;padding:6px}
  .hpp-canvas-wrap,#gameCanvas{min-height:calc(100dvh - 82px)}
  .hpp-panel{padding:8px;border-radius:13px}
  .hpp-power-list span{min-height:28px;font-size:.72rem}
  .hpp-log{min-height:56px;font-size:.72rem}
  .hpp-mobile-controls{display:grid}
  .hpp-bottom-controls{display:none}
}


.hpp-items-panel .hpp-power-list{
  grid-template-columns:1fr;
}
.hpp-items-panel .hpp-power-list span{
  min-height:30px;
  font-size:.80rem;
}
@media(max-height:560px) and (orientation:landscape){
  .hpp-items-panel .hpp-power-list span{
    min-height:24px;
    font-size:.68rem;
    padding:5px 6px;
  }
}

/* Hex Pulse Pong v4 tuning */
.hpp-items-panel .hpp-power-list span{
  min-height:28px;
  font-size:.76rem;
  padding:6px 7px;
}
@media(max-width:680px){
  .hpp-hud article{
    min-height:35px;
  }
  .hpp-hud strong{
    font-size:.74rem;
  }
  .hpp-bottom-controls{
    gap:5px;
  }
  .hpp-bottom-controls .hpp-ghost,
  .hpp-bottom-controls .hpp-primary{
    min-height:32px;
    padding:6px 7px;
  }
}
@media(max-height:560px) and (orientation:landscape){
  .hpp-game-card{
    grid-template-columns:minmax(0,1fr) 190px;
  }
  .hpp-items-panel .hpp-power-list span{
    min-height:22px;
    font-size:.63rem;
  }
  .hpp-panel{
    padding:7px;
  }
}


/* Hex Pulse Pong v5: collectibles + ball vault */
.hpp-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.hpp-modal-copy{
  margin:4px 0 0;
  color:var(--muted);
  max-width:56ch;
  line-height:1.35;
}
.hpp-skin-modal{
  width:min(860px,calc(100vw - 22px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
}
.hpp-skin-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.hpp-skin-card{
  display:grid;
  gap:6px;
  justify-items:center;
  min-height:136px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  cursor:pointer;
}
.hpp-skin-card.locked{
  opacity:.48;
  cursor:not-allowed;
  filter:grayscale(.4);
}
.hpp-skin-card.selected{
  border-color:rgba(255,215,107,.55);
  box-shadow:0 0 24px rgba(255,215,107,.14);
}
.hpp-skin-preview{
  --skin:#64ecff;
  --skin2:#dffbff;
  --glow:#64ecff;
  width:52px;
  height:52px;
  display:block;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(180deg,var(--skin2),var(--skin));
  box-shadow:0 0 22px color-mix(in srgb,var(--glow) 55%,transparent);
}
.hpp-skin-card strong{
  text-align:center;
  font-size:.86rem;
  line-height:1.1;
}
.hpp-skin-card small{
  color:var(--muted);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
@media(max-width:720px){
  .hpp-top{
    align-items:flex-start;
  }
  .hpp-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .hpp-skin-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:420px){
  .hpp-ghost{
    padding-left:8px;
    padding-right:8px;
  }
  .hpp-skin-card{
    min-height:124px;
  }
}


/* Hex Pulse Pong v7: charged Pulse Cannon projectile */
.hpp-primary.pulse-ready{
  background:linear-gradient(135deg,#ffd76b,#ff6fd5,#67e8f9);
  box-shadow:0 0 24px rgba(255,215,107,.30),0 14px 34px rgba(100,236,255,.18);
  animation:pulseCannonReadyV7 1.05s ease-in-out infinite;
}
@keyframes pulseCannonReadyV7{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.16)}
}


/* Hex Pulse Pong v8: Pulse Cannon control clarity */
.hpp-control-hint{
  display:block;
  margin-top:9px;
  color:#dbeafe;
  font-size:.82rem;
  font-weight:900;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.hpp-primary.pulse-ready::after{
  content:"";
  width:6px;
  height:6px;
  margin-left:7px;
  border-radius:50%;
  background:#07111f;
  box-shadow:0 0 0 2px rgba(7,17,31,.18),0 0 10px rgba(255,255,255,.65);
}
@media(max-width:680px){
  .hpp-control-hint{
    font-size:.76rem;
    max-width:34ch;
    line-height:1.25;
  }
}


/* Hex Pulse Pong v9 mobile thumb-space tuning */
@media(max-width:680px){
  .hpp-canvas-wrap{
    min-height:calc(100dvh - 176px);
  }
  #gameCanvas{
    min-height:calc(100dvh - 176px);
  }
  .hpp-bottom-controls{
    gap:4px;
  }
  .hpp-bottom-controls .hpp-ghost,
  .hpp-bottom-controls .hpp-primary{
    min-height:30px;
    padding:6px 7px;
    font-size:.70rem;
  }
}
@media(max-width:420px){
  .hpp-canvas-wrap{
    min-height:calc(100dvh - 168px);
  }
  #gameCanvas{
    min-height:calc(100dvh - 168px);
  }
}


/* Hex Pulse Pong v10: mobile screen-space tuning */
@media(max-width:680px){
  .hpp-shell{
    gap:3px;
    padding-top:2px;
  }
  .hpp-top{
    min-height:30px;
    padding:4px 6px;
    border-radius:12px;
  }
  .hpp-mark{
    display:none;
  }
  .hpp-brand h1{
    font-size:.96rem;
  }
  .hpp-actions{
    gap:3px;
  }
  .hpp-actions .hpp-ghost,
  .hpp-actions .hpp-icon{
    min-height:28px;
    height:28px;
    padding:4px 7px;
    font-size:.68rem;
  }
  .hpp-actions .hpp-icon{
    width:28px;
  }
  .hpp-hud{
    display:none;
  }
  .hpp-game-card{
    padding:4px;
    border-radius:14px;
  }
  .hpp-canvas-wrap{
    min-height:calc(100dvh - 112px) !important;
  }
  #gameCanvas{
    min-height:calc(100dvh - 112px) !important;
  }
  .hpp-bottom-controls{
    gap:4px;
  }
  .hpp-bottom-controls .hpp-ghost,
  .hpp-bottom-controls .hpp-primary{
    min-height:29px;
    padding:5px 6px;
    font-size:.68rem;
  }
  .hpp-overlay{
    padding:14px;
  }
  .hpp-overlay h2{
    font-size:2rem;
  }
  .hpp-overlay p:not(.hpp-kicker){
    font-size:.82rem;
    line-height:1.32;
  }
}
@media(max-width:420px){
  .hpp-canvas-wrap{
    min-height:calc(100dvh - 104px) !important;
  }
  #gameCanvas{
    min-height:calc(100dvh - 104px) !important;
  }
  .hpp-brand h1{
    font-size:.88rem;
  }
}


/* Hex Pulse Pong v11: viewport fit + no-scroll arena */
@media(min-width:681px){
  .hpp-bottom-controls{
    display:none !important;
  }
  .hpp-overlay{
    padding:14px;
  }
  .hpp-overlay h2{
    font-size:clamp(1.75rem,5vw,3.8rem);
  }
}
@media(max-width:980px) and (min-width:681px){
  .hpp-shell{
    width:min(100vw - 10px,980px);
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }
  .hpp-game-card{
    grid-template-columns:1fr;
  }
  .hpp-side{
    display:none;
  }
  .hpp-bottom-controls{
    display:grid !important;
  }
}
@media(max-width:680px){
  .hpp-shell{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    padding:2px 3px;
    grid-template-rows:auto minmax(0,1fr) auto;
    overflow:hidden;
  }
  .hpp-top{
    min-height:28px;
  }
  .hpp-game-card{
    min-height:0;
    height:100%;
  }
  .hpp-canvas-wrap{
    height:100% !important;
    min-height:0 !important;
  }
  #gameCanvas{
    height:100% !important;
    min-height:0 !important;
  }
}
@media(max-height:640px) and (min-width:681px){
  .hpp-brand p{
    display:none;
  }
  .hpp-mark{
    width:34px;
    height:34px;
    border-radius:12px;
  }
  .hpp-brand h1{
    font-size:1.15rem;
  }
  .hpp-hud article{
    min-height:36px;
    padding:4px 7px;
  }
  .hpp-hud span{
    font-size:.50rem;
  }
  .hpp-hud strong{
    font-size:.86rem;
  }
}