/* Pattern Portal. Every rule is scoped under .ppg so it cannot disturb the other games. */
.ppg{max-width:560px;margin-inline:auto;padding-block:8px 40px;display:flex;flex-direction:column;gap:18px}
.ppg .note{border:2px dashed var(--night-3);border-radius:16px;padding:12px 14px;color:var(--ink-soft);font-size:.95rem}
.ppg .note b{color:var(--ink)}
.ppg .pad-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ppg .pad-head h1{font-size:1.6rem}
.ppg .levels{display:flex;gap:6px;align-items:center}
.ppg .lv{font-family:var(--display);font-size:1rem;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;background:var(--night-3);color:var(--ink)}
.ppg .lv[aria-pressed="true"]{background:var(--sun);color:#2a1c00}
.ppg .dots{display:flex;gap:6px;flex-wrap:wrap;min-height:16px}
.ppg .dot{width:16px;height:16px;border-radius:50%;background:var(--night-3)}
.ppg .dot.on{background:var(--lime);box-shadow:0 0 10px var(--lime)}

.ppg .stage{display:block;height:300px;perspective:none;
  background:
    linear-gradient(to bottom, transparent 0 86%, var(--cyan) 86% 87%, #10244a 87% 100%),
    radial-gradient(20rem 12rem at 80% 22%, rgba(255,62,165,.22), transparent 70%),
    linear-gradient(#0c0628,#12305a)}
.ppg .row{position:absolute;left:10px;right:10px;top:34px;height:34%;display:flex;align-items:center;justify-content:center;gap:2%}
.ppg .tile{flex:1 1 0;max-width:58px;aspect-ratio:1;display:grid;place-items:center;animation:pp-in .45s cubic-bezier(.2,.9,.3,1.3) both}
.ppg .tile svg,.ppg .choice svg,.ppg .portal svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 7px var(--glow,#fff))}
.ppg .tile.big{max-width:76px;flex:1.3 1 0}
.ppg .portal{position:relative;flex:1.45 1 0;max-width:86px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:2rem;color:var(--ink)}
.ppg .portal::before{content:"";position:absolute;inset:0;border-radius:50%;padding:7px;
  background:conic-gradient(var(--pink),var(--cyan),var(--lime),var(--sun),var(--pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:pp-spin 5s linear infinite}
.ppg .portal svg{width:62%;height:62%}
.ppg .portal.open{animation:pp-open .6s ease-out}
.ppg .portal.open::before{animation:pp-spin .8s linear infinite;filter:drop-shadow(0 0 10px var(--lime))}
.ppg .rule{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:1.05rem;line-height:1.05;padding:8px 12px;border-radius:14px;background:var(--ink);color:#1b1038;animation:pp-in .45s both}
.ppg .rule svg{width:30px;height:30px;flex:none}
.ppg .rule.flash{animation:pp-flash .7s ease-out 2}
.ppg .arrow{flex:0 0 auto;font-family:var(--display);font-size:1.4rem;color:var(--ink-soft)}
@keyframes pp-in{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes pp-spin{to{transform:rotate(360deg)}}
@keyframes pp-open{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes pp-flash{0%,100%{box-shadow:0 0 0 0 var(--sun)}50%{box-shadow:0 0 0 8px var(--sun)}}

.ppg .echo{position:absolute;left:4%;bottom:2.5%;height:50%;margin:0;animation:pp-idle 2.4s ease-in-out infinite}
.ppg .echo .e-pose{inset:auto;left:50%;width:auto;transform:translateX(-50%)}
.ppg .echo .e-stomp{bottom:1.8%;height:87.6%}
.ppg .echo .e-clap{bottom:-4%;height:105%}
.ppg .echo:not(.jump):not(.clap):not(.stomp) .e-stand,.ppg .echo.jump .e-jump,.ppg .echo.clap .e-clap,.ppg .echo.stomp .e-stomp{visibility:visible}
.ppg .echo.jump{animation:pp-hop .7s ease-out}
.ppg .echo.clap{animation:pp-clap .7s ease-in-out;transform-origin:50% 100%}
.ppg .echo.stomp{animation:pp-stomp .7s ease-in}
@keyframes pp-clap{0%,50%,100%{transform:scale(1)}25%,75%{transform:scale(1.05)}}
@keyframes pp-stomp{0%{transform:translateY(0)}35%{transform:translateY(-8%)}55%{transform:translateY(0) scaleY(.92)}75%{transform:scaleY(1.03)}100%{transform:none}}
@keyframes pp-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
@keyframes pp-hop{0%,100%{transform:translateY(6%)}50%{transform:translateY(-12%)}}
.ppg .says{position:absolute;left:36%;right:4%;bottom:17%;background:var(--ink);color:#1b1038;border-radius:18px 18px 18px 4px;padding:9px 14px;font-family:var(--display);font-size:1.05rem;line-height:1.15}
.ppg .sound{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:0;background:rgba(21,10,46,.8);color:var(--ink);cursor:pointer;z-index:2}
.ppg .card{position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,6,40,.92);padding:18px;text-align:center;z-index:3}
.ppg .card > div{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:28ch}
.ppg .card h2{font-size:1.7rem;color:var(--sun)}

.ppg .choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ppg .choice{aspect-ratio:1.35;border:0;border-radius:20px;background:var(--night-3);cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .12s, opacity .12s}
.ppg .choice svg{width:auto;height:66%;aspect-ratio:1}
.ppg .choice:disabled{cursor:default;opacity:.45}
.ppg .choice.live:hover{transform:translateY(-3px)}
.ppg .choice.nope{animation:pp-nope .5s ease both}
.ppg .choice.hint{box-shadow:0 0 0 4px var(--lime), 0 0 24px var(--lime);opacity:1}
.ppg .choice.right{box-shadow:0 0 0 4px var(--lime);opacity:1}
.ppg .choice.charge{box-shadow:0 0 0 4px var(--lime), 0 0 26px var(--lime);opacity:1;animation:pp-charge .3s ease-in-out infinite alternate}
@keyframes pp-charge{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.08) rotate(3deg)}}
@keyframes pp-nope{0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}100%{transform:none;opacity:.25}}

.ppg .pad-msg{flex:1 1 200px}

@media (max-width:480px){
  .ppg .echo{height:44%;left:2%}
  .ppg .says{left:40%;right:3%;font-size:.95rem}
  .ppg .rule{font-size:.9rem;padding:6px 9px}
  .ppg .rule svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .ppg .tile,.ppg .rule,.ppg .portal::before,.ppg .portal.open,.ppg .portal.open::before,.ppg .echo,.ppg .echo.jump,.ppg .echo.clap,.ppg .echo.stomp,.ppg .choice.nope,.ppg .choice.charge{animation:none}
  .ppg .choice.nope{opacity:.25}
}