:root{--pp-bg:#17102f;--pp-panel:#241845;--pp-line:#553e86;--pp-text:#f8f5ff;--pp-muted:#b8aad8;--pp-pink:#ff6fae}.puyo-page{min-height:calc(100vh - 67px);padding:30px 16px 50px;background:radial-gradient(circle at 20% 0,#4b246b 0,transparent 43%),linear-gradient(135deg,#17102f,#0c1737 70%,#102a4c);color:var(--pp-text);font-family:system-ui,sans-serif}.puyo-page *{box-sizing:border-box}.puyo-wrap{width:min(900px,100%);margin:auto}.puyo-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.puyo-eyebrow{color:#ffd166;font-size:10px;font-weight:900;letter-spacing:.2em}.puyo-header h1{margin:5px 0;color:#fff;font-size:clamp(30px,7vw,48px);letter-spacing:.08em}.puyo-header p{margin:0;color:var(--pp-muted);font-size:13px}.puyo-back{margin-top:7px;color:#e4dafd;font-size:12px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.puyo-layout{display:grid;grid-template-columns:minmax(300px,620px) 220px;gap:18px;align-items:start}.puyo-play,.puyo-panel{border:1px solid var(--pp-line);border-radius:8px;background:#21163ee8;box-shadow:0 18px 55px #06001666}.puyo-play{padding:clamp(12px,3vw,24px)}.puyo-score-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:13px}.puyo-score-row div{padding:8px;border-radius:8px;background:#120d29;text-align:center}.puyo-score-row span{display:block;color:var(--pp-muted);font-size:10px}.puyo-score-row strong{display:block;margin-top:2px;color:#ffd166;font-size:22px}.puyo-board-wrap{position:relative;width:min(100%,390px);margin:auto;padding:9px;border:1px solid #6c4a9e;border-radius:8px;background:#0c1028;box-shadow:inset 0 0 24px #0008}.puyo-board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(12,1fr);gap:4px;aspect-ratio:1/2;background:#111836}.puyo-cell{position:relative;display:grid;place-items:center;min-width:0;border-radius:8px;background:#1a2345}.puyo-cell.falling{z-index:2}.puyo-ball{width:82%;height:82%;border-radius:50%;background:var(--ball);box-shadow:inset -5px -6px 7px #0005,inset 5px 4px 4px #fff8,0 3px 5px #0006;animation:pop-in .18s cubic-bezier(.2,1.4,.4,1)}.puyo-cell.new .puyo-ball{outline:3px solid #fff6;outline-offset:-3px}.puyo-cell.chain .puyo-ball{animation:chain-pulse .28s ease-in-out infinite alternate;box-shadow:0 0 15px var(--ball),inset -4px -4px 5px #0004}.puyo-red{--ball:#ff668f}.puyo-blue{--ball:#59b9ff}.puyo-yellow{--ball:#ffd34d}.puyo-green{--ball:#73e39b}.puyo-purple{--ball:#c58aff}@keyframes pop-in{from{transform:scale(.3);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes chain-pulse{to{transform:scale(1.12);filter:brightness(1.3)}}.puyo-overlay{position:absolute;inset:9px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;background:#120d29dc;text-align:center}.puyo-overlay[hidden]{display:none}.puyo-overlay h2{margin:0;color:#fff;font-size:clamp(25px,7vw,39px)}.puyo-overlay p{max-width:275px;margin:0;color:#ddd1f4;font-size:12px;line-height:1.8}.puyo-button{min-height:39px;border:1px solid #6b5698;border-radius:8px;padding:8px 11px;background:#302353;color:var(--pp-text);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.puyo-button:hover,.puyo-button:focus-visible{border-color:#ffd166;outline:2px solid #ffd16655;outline-offset:2px}.puyo-primary{border-color:#ffd166;background:#ffd166;color:#281638}.puyo-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin:10px 0 0;color:var(--pp-muted);font-size:10px}.puyo-legend span{display:inline-flex;align-items:center;gap:5px}.puyo-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}.legend-new{background:#ffb3cf;outline:2px solid #fff6;outline-offset:-2px}.legend-chain{background:#ffd166;box-shadow:0 0 8px #ffd166}.puyo-touch{display:none;grid-template-columns:repeat(3,1fr);gap:7px;margin:11px auto 0;width:min(100%,390px)}.puyo-touch button{min-height:42px;border:1px solid var(--pp-line);border-radius:8px;background:#2c2050;color:var(--pp-text);font:inherit;font-weight:800;touch-action:manipulation}.puyo-touch button:nth-child(4){grid-column:1/2}.puyo-touch button:nth-child(5){grid-column:3}.puyo-message{min-height:1.5em;margin:12px 0 0;color:#d3c4ef;font-size:11px;text-align:center}.puyo-side{display:flex;flex-direction:column;gap:10px}.puyo-panel{padding:13px}.puyo-panel h2{margin:0 0 9px;color:var(--pp-muted);font-size:11px;letter-spacing:.13em}.puyo-next{text-align:center}.next-pair{display:flex;justify-content:center;align-items:center;gap:5px;height:68px}.next-pair i{display:block;width:35px;height:35px;border-radius:50%;background:var(--ball);box-shadow:inset -4px -5px 6px #0005,inset 4px 3px 3px #fff8}.puyo-actions{display:grid;gap:8px}.puyo-sound>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.puyo-sound .puyo-button{padding:6px 3px}.puyo-sound label{display:grid;gap:4px;margin-top:10px;color:var(--pp-muted);font-size:11px}.puyo-sound input{width:100%;accent-color:#ffd166}.puyo-help ol{margin:0;padding-left:19px;color:#ddd1f4;font-size:11px;line-height:1.7}.puyo-help p{margin:8px 0 0;color:var(--pp-muted);font-size:10px;line-height:1.65}.puyo-help b{color:#fff}.puyo-note{margin:14px 0 0;color:#9e91bf;font-size:10px;text-align:center}@media(max-width:720px){.puyo-page{padding:21px 10px 38px}.puyo-header{margin-bottom:14px}.puyo-layout{display:block}.puyo-side{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}.puyo-next,.puyo-help{grid-column:1/-1}.puyo-touch{display:grid}}@media(max-width:420px){.puyo-board{gap:3px}.puyo-board-wrap{padding:6px}.puyo-overlay{inset:6px}.puyo-score-row strong{font-size:18px}}