.pyoko-part{display:inline-flex;position:relative;align-items:center;justify-content:center;width:var(--pyoko-size);height:var(--pyoko-size);vertical-align:middle;color:var(--h-ink)}
.pyoko-art{display:flex;position:relative;align-items:center;justify-content:center;width:100%;height:100%;transform-origin:50% 85%}
.pyoko-art .h-pyoko{max-width:100%;max-height:100%;object-fit:contain}
.pyoko-egg-placeholder{position:relative;display:block;max-width:100%;aspect-ratio:128/148}
.pyoko-egg-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 5px var(--h-line-2))}
.pyoko-egg-fill{fill:var(--h-cream-2);stroke:var(--h-egg-color);stroke-width:4}
.pyoko-cracks{fill:none;stroke:var(--h-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pyoko-v1{--h-egg-color:var(--h-green)}.pyoko-v2{--h-egg-color:var(--h-yellow)}.pyoko-v3{--h-egg-color:var(--h-green-2)}
.pyoko-temp{position:absolute;right:0;bottom:0;padding:1px 5px;border-radius:var(--h-r-8);background:var(--h-cream-2);color:var(--h-deep-text);box-shadow:0 0 0 var(--h-hair) var(--h-line),var(--h-shadow-1);font-size:11px;font-weight:800;line-height:1.3}
.pyoko-part.is-live.pyoko-stage-egg .pyoko-art,.pyoko-part.is-live.pyoko-stage-crack1 .pyoko-art,.pyoko-part.is-live.pyoko-stage-crack2 .pyoko-art{animation:pyoko-wiggle 4.2s ease-in-out infinite}
.pyoko-part.is-hatching .pyoko-art,.pyoko-part.is-cracking .pyoko-art{animation:pyoko-shiver .28s ease-in-out 2}
.pyoko-cracks{transform-origin:50% 50%}
.pyoko-part.is-opening .pyoko-cracks{transform:scaleX(1.35);transition:transform .5s ease-out}
.pyoko-part.is-opening .pyoko-art{transform:scale(1.13);opacity:0;transition:transform .5s ease-out,opacity .5s ease-out}
.pyoko-part.is-revealing .pyoko-art{animation:pyoko-pop .55s ease-out both}
@keyframes pyoko-wiggle{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-4deg)}91%{transform:rotate(4deg)}96%{transform:rotate(-2deg)}}
@keyframes pyoko-shiver{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-3px) rotate(-6deg)}75%{transform:translateX(3px) rotate(6deg)}}
@keyframes pyoko-pop{0%{opacity:0;transform:scale(.6) translateY(12px)}70%{opacity:1;transform:scale(1.12) translateY(-3px)}100%{transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){.pyoko-part.is-live .pyoko-art,.pyoko-part.is-hatching .pyoko-art,.pyoko-part.is-cracking .pyoko-art,.pyoko-part.is-revealing .pyoko-art{animation:none}.pyoko-part.is-opening .pyoko-art,.pyoko-part.is-opening .pyoko-cracks{transition:none}}

/* 選択画面とスタイルガイドの見本 */
.pyoko-picker-wrap{width:min(390px,100%);margin:0 auto;padding:calc(20px + var(--h-safe-t)) 16px calc(24px + var(--h-safe-b))}
.pyoko-picker-card{padding:20px 14px}
.pyoko-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0}
.pyoko-choice{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;width:100%;padding:10px 2px;border:0;border-radius:var(--h-r-16);background:var(--h-cream-2);color:var(--h-ink);box-shadow:0 0 0 var(--h-hair) var(--h-line),var(--h-inset-light-soft),var(--h-shadow-1);cursor:pointer}
.pyoko-choice[aria-pressed="true"]{box-shadow:0 0 0 2px var(--h-green),var(--h-inset-light-soft),var(--h-shadow-2)}
.pyoko-choice:focus-visible{outline:2px solid var(--h-deep-text);outline-offset:3px}
.pyoko-choice-name{font-weight:800;font-size:13px;white-space:nowrap}
.pyoko-choice-small{font-size:11px;color:var(--h-muted)}
.pyoko-picker-action{width:100%}
.pyoko-picker-action:disabled{cursor:default;background:var(--h-mint);color:var(--h-deep-text);box-shadow:0 0 0 var(--h-hair) var(--h-line),var(--h-inset-light-soft)}
.pyoko-picker-status{min-height:1.5em;margin:10px 0 0;color:var(--h-muted);font-size:13px;text-align:center}
.pyoko-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pyoko-gallery-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:10px 4px;text-align:center}
.pyoko-gallery-cell span{font-size:12px;color:var(--h-muted)}