.hp-shell{--hp-ink:#39354c;--hp-muted:#706979;--hp-purple:#7862a6;--hp-line:#e7e0eb;color:var(--hp-ink);background:linear-gradient(140deg,#fff8ee,#f8f2ff 65%,#eff9f5);min-height:100vh;padding:24px 24px 48px;font-family:inherit;word-break:keep-all}
.hp-shell *{box-sizing:border-box}.hp-shell [hidden]{display:none!important}.hp-wrap{max-width:900px;margin:auto}.hp-back{display:inline-block;font-weight:700;color:#6f627f;text-decoration:none;min-height:44px;padding:10px 0}
.hp-shell button,.hp-shell select,.hp-shell input{font:inherit}.hp-shell button{min-height:46px;border:1px solid var(--hp-line);border-radius:13px;background:white;color:var(--hp-ink);padding:10px 16px;font-weight:700;cursor:pointer;touch-action:manipulation;white-space:nowrap}.hp-shell button:hover:not(:disabled){background:#f5f0fc;border-color:#b8a1ce}.hp-shell button:disabled{opacity:.4;cursor:default}.hp-shell :focus-visible{outline:3px solid #7862a6;outline-offset:3px}.hp-shell .hp-primary{background:var(--hp-purple);border-color:var(--hp-purple);color:white}.hp-shell .hp-primary:hover:not(:disabled){background:#66508f}
.hp-cover{text-align:center;max-width:640px;margin:8px auto 24px}.hp-cover img{display:block;width:min(100%,640px,78svh);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:30px;margin-inline:auto}.hp-cover h1{font-size:clamp(2.1rem,5vw,3rem);font-weight:850;letter-spacing:-.05em;margin:20px 0 10px}.hp-cover p{font-size:1.1rem;margin:0 0 24px}.hp-cover>button{min-width:220px;max-width:100%;min-height:58px;font-size:1.25rem}
.hp-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:8px 0 18px}.hp-header h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:850;margin:0 0 8px;letter-spacing:-.04em}#hp-header-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.hp-header #hp-choose-open{font-size:.9rem;padding:8px 12px;white-space:normal;text-align:left}
.hp-panel{background:#ffffffed;border:1px solid #eee4ec;border-radius:25px;box-shadow:0 9px 30px #7b60840a;padding:22px}.hp-board-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}.hp-board-head p{font-weight:700;margin:0;font-size:1.05rem}.hp-badge{background:#e3f5f0;color:#246f63;border-radius:100px;padding:8px 13px;white-space:nowrap;font-size:.9rem;font-weight:750}
.hp-board{position:relative;width:100%;max-width:520px;margin:0 auto 20px;isolation:isolate}.hp-shell .hp-cell{position:absolute;width:var(--hp-cell-w);height:var(--hp-cell-h);min-height:0;padding:0;border:0;background:transparent;border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);touch-action:manipulation}.hp-cell svg{width:100%;height:100%;display:block;overflow:visible}.hp-tile-base{fill:#f7f2ee;stroke:#ded4e3;stroke-width:1.7}.hp-pipe{fill:#9aaab3;stroke:#9aaab3;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;transition:stroke .14s,fill .14s}.hp-pipe circle{stroke-width:0}.hp-pipe.hp-water{fill:#42a99a;stroke:#42a99a}.hp-cell:hover .hp-tile-base{fill:#f0e8f8}.hp-cell.is-selected .hp-tile-base,.hp-cell:focus-visible .hp-tile-base{stroke:#8060a5;stroke-width:5;fill:#f3ebfc}.hp-cell:focus-visible{outline:none!important}.hp-cell.is-locked .hp-tile-base{fill:#e2e2f0;stroke:#a9a0bb;stroke-dasharray:4 3}.hp-cell.is-hint .hp-tile-base{fill:#fff0c7;stroke:#b48a31;stroke-width:4}.hp-cell.is-cycle .hp-pipe{stroke:#ac6684;fill:#ac6684}.hp-lock-symbol{position:absolute;top:17%;left:38%;font-size:clamp(10px,1.8vw,15px);color:#54446b;pointer-events:none}.hp-source-symbol{position:absolute;left:38%;top:38%;font-size:clamp(12px,2vw,21px);color:white;pointer-events:none}.hp-mode-tools,.hp-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.hp-mode-tools{margin:16px 0 12px}.hp-shell [aria-pressed=true]{background:#efe6fa;border-color:#b19acc;color:#634d82}.hp-feedback{margin:18px auto 12px;text-align:center;min-height:48px;max-width:600px;line-height:1.65;font-size:1rem}.hp-bottom{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.85rem;color:var(--hp-muted)}.hp-bottom button{font-size:.85rem}.hp-storage{text-align:center;font-size:.85rem;color:var(--hp-muted);line-height:1.6;margin:14px 0}.hp-source{font-size:.8rem;color:var(--hp-muted);max-width:640px;margin:22px auto 0}.hp-source summary{cursor:pointer;padding:10px 0}.hp-source a{text-decoration:underline;color:#66518a}.hp-source p{line-height:1.65}
.hp-shell dialog:not(.pg-dialog){width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #dfd4e8;border-radius:24px;padding:24px;color:var(--hp-ink);background:#fffdfb;box-shadow:0 20px 80px #33263c33}.hp-shell dialog::backdrop{background:#30233d66}.hp-dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.hp-shell dialog h2{font-size:1.35rem;font-weight:800;margin:0 0 12px;line-height:1.5}.hp-dialog-head h2{margin:0!important}.hp-shell dialog p{line-height:1.7}.hp-tiers{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.hp-tiers button{flex:1;font-size:.9rem;padding:10px 8px}.hp-shell dialog select,.hp-shell dialog input{display:block;width:100%;min-height:48px;border:1px solid #d8ccdf;border-radius:12px;background:white;color:var(--hp-ink);padding:10px;margin:8px 0 18px;min-width:0}.hp-shell dialog>button.hp-primary{display:block;width:100%;max-width:400px;margin:14px auto 10px}#hp-qr{display:block;max-width:100%;height:auto;margin:auto}#hp-win{text-align:center}.hp-win-drop{font-size:3.2rem;animation:hp-arrive .3s ease-out}.hp-board.is-won .hp-pipe{fill:#269c88;stroke:#269c88}.hp-shell:fullscreen{overflow:auto}.hp-source,.hp-storage{overflow-wrap:anywhere}.hp-shell .cg-guide-entry{display:none}
.pg-board.pg-hexapipes{display:block!important;position:relative;width:min(100%,320px)!important;grid-template-columns:none!important}.pg-hexapipes .hp-cell{position:absolute!important;border:0!important;border-radius:0!important;padding:0!important;min-height:0!important;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:transparent!important}.pg-hexapipes .hp-cell svg{width:100%;height:100%}.pg-hexapipes .hp-cell.pg-focus .hp-tile-base{fill:#fff0c7;stroke:#b48a31;stroke-width:4}
@keyframes hp-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.hp-shell{padding:12px 10px 30px}.hp-panel{padding:16px 10px;border-radius:20px}.hp-header{align-items:flex-start}.hp-header #hp-header-tools{max-width:132px}.hp-header #hp-header-tools button{font-size:.83rem;padding:8px 10px}.hp-board-head{align-items:flex-start;gap:8px;margin-bottom:14px}.hp-board-head p{font-size:.95rem}.hp-badge{font-size:.8rem;padding:7px 10px}.hp-shell button{padding:10px 12px}.hp-mode-tools{gap:6px}.hp-mode-tools button{font-size:.88rem;padding:10px}.hp-actions{gap:6px}.hp-actions>button{flex:1;padding:10px 7px;font-size:.87rem}.hp-cover img{max-height:260px}.hp-cover>button{min-height:56px}.hp-feedback{font-size:.95rem}.hp-cover p{font-size:1rem}.hp-cover h1{margin-top:14px}.hp-tiers{flex-direction:column}.hp-bottom{gap:10px}.hp-source{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.hp-shell *{animation:none!important;transition:none!important}}