.shelf{gap:18px;display:grid}.shelf-tabs{scrollbar-width:none;gap:8px;padding:2px;display:flex;overflow-x:auto}.shelf-tabs::-webkit-scrollbar{display:none}.shelf-tabs button{border:1.5px solid var(--border);min-height:42px;color:var(--asobun-navy);cursor:pointer;background:#fff;border-radius:999px;flex:none;align-items:center;gap:7px;padding:8px 16px;font-size:14px;font-weight:700;display:inline-flex}.shelf-tabs button small{background:var(--secondary);min-width:22px;color:var(--secondary-foreground);border-radius:999px;padding:1px 7px;font-size:11px;font-weight:800}.shelf-tabs button.is-on{background:var(--asobun-navy);border-color:var(--asobun-navy);color:#fff}.shelf-tabs button.is-on small{color:#fff;background:#ffffff26}.shelf-tabs button:focus-visible{outline:3px solid var(--asobun-pink);outline-offset:2px}.shelf-card:focus-visible{outline:3px solid var(--asobun-pink);outline-offset:2px}.shelf-arrow:focus-visible{outline:3px solid var(--asobun-pink);outline-offset:2px}.shelf-demo:focus-visible{outline:3px solid var(--asobun-pink);outline-offset:2px}.shelf-rail{position:relative}.shelf-row{scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#cbb9df transparent;grid-auto-columns:minmax(150px,168px);grid-auto-flow:column;gap:12px;padding:6px 4px 14px;scroll-padding:0 4px;display:grid;overflow-x:auto}.shelf-card{scroll-snap-align:start;border:1.5px solid var(--border);text-align:left;min-height:176px;color:var(--asobun-navy);cursor:pointer;background:#fff;border-radius:18px;align-content:start;justify-items:start;gap:6px;padding:16px 14px;transition:transform .15s,border-color .15s,box-shadow .15s;display:grid}.shelf-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px #2113370f}.shelf-card.is-on{border-color:var(--asobun-violet);box-shadow:0 0 0 3px #7b5cf026}.shelf-card strong{margin-top:4px;font-size:15px;line-height:1.4}.shelf-card small{color:var(--muted-foreground);font-size:12px;line-height:1.5}.shelf-card em{background:var(--muted);color:var(--muted-foreground);border-radius:999px;margin-top:auto;padding:3px 9px;font-size:11px;font-style:normal;font-weight:700}.shelf-icon{width:44px;height:44px;color:var(--asobun-violet);background:#f2edff;border-radius:14px;place-items:center;display:grid}.is-hand .shelf-icon,.shelf-detail.is-hand .shelf-icon{color:#b0561b;background:#fff0e3}.is-play .shelf-icon,.shelf-detail.is-play .shelf-icon{color:#c13d61;background:#ffe6ed}.shelf-icon.is-big{border-radius:20px;width:64px;height:64px}.shelf-arrow{z-index:2;width:42px;height:42px;color:var(--asobun-navy);cursor:pointer;background:#fff;border:0;border-radius:50%;place-items:center;margin-top:-28px;display:grid;position:absolute;top:50%;box-shadow:0 6px 18px #21133726}.shelf-arrow.is-prev{left:-10px}.shelf-arrow.is-next{right:-10px}.shelf-arrow:disabled{opacity:0;pointer-events:none}.shelf-detail{border:1px solid var(--border);background:#fff;border-radius:22px;gap:14px;padding:24px;display:grid;box-shadow:0 12px 30px #2113370d}.shelf-detail-head{align-items:center;gap:14px;display:flex}.shelf-detail-head p{color:var(--muted-foreground);margin:0;font-size:12px;font-weight:700}.shelf-detail-head h3{color:var(--asobun-navy);margin:2px 0 0;font-family:Hiragino Mincho ProN,Yu Mincho,serif;font-size:24px;font-weight:600}.shelf-desc{color:var(--asobun-navy);margin:0;line-height:1.9}.shelf-detail dl{gap:10px;margin:0;display:grid}.shelf-detail dl div{background:var(--background);border-radius:12px;padding:12px 14px}.shelf-detail dt{color:var(--secondary-foreground);font-size:11px;font-weight:800}.shelf-detail dd{color:var(--muted-foreground);margin:4px 0 0;font-size:14px;line-height:1.8}.shelf-demo{background:var(--asobun-violet);color:#fff;border-radius:14px;justify-self:start;align-items:center;gap:6px;min-height:48px;padding:10px 22px;font-weight:800;text-decoration:none;display:inline-flex}.shelf-demo:hover{filter:brightness(1.06)}@media (min-width:760px){.shelf-detail{grid-template-columns:1fr 1fr;column-gap:28px}.shelf-detail-head,.shelf-desc{grid-column:1}.shelf-detail dl{grid-area:1/2/span 3}.shelf-demo{grid-column:1}}@media (max-width:560px){.shelf-arrow{display:none}.shelf-row{grid-auto-columns:minmax(140px,44%)}.shelf-detail{padding:20px}.shelf-demo{justify-content:center;justify-self:stretch}}@media (prefers-reduced-motion:reduce){.shelf-card{transition:none}}.shelf,.shelf>*,.shelf-rail,.shelf-row{min-width:0;max-width:100%}.pd-games{min-width:0}.shelf-mode{background:var(--secondary);border-radius:999px;justify-self:start;padding:4px;display:inline-flex}.shelf-mode button{min-height:38px;color:var(--secondary-foreground);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:6px 18px;font-size:14px;font-weight:800}.shelf-mode button[aria-pressed=true]{color:var(--asobun-navy);background:#fff;box-shadow:0 2px 8px #2113371a}.shelf-mode button:focus-visible{outline:3px solid var(--asobun-pink);outline-offset:2px}.shelf-hint{color:var(--muted-foreground);margin:-4px 0 0;font-size:13px}.shelf-card{position:relative}.shelf-pick{color:#fff;background:linear-gradient(135deg,#ff6b95,#ff9068);border-radius:999px;padding:2px 8px;font-size:10px;font-weight:800;position:absolute;top:10px;right:10px}.shelf-icon{position:relative;overflow:visible}.shelf-icon>svg{transform-origin:50% 60%;animation:none}.fx-drip>svg{animation-name:fx-tilt}.fx-drip:after{content:"";opacity:0;background:currentColor;border-radius:50%/60% 60% 40% 40%;width:5px;height:7px;margin-left:-2px;animation:2.4s ease-in infinite fx-drop;position:absolute;top:70%;left:50%}.fx-flicker>svg{animation-name:fx-flicker;animation-duration:1.2s}.fx-swipe>svg{animation-name:fx-swipe}.fx-twinkle>svg{animation-name:fx-pulse}.fx-twinkle:after{content:"";clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);background:currentColor;width:6px;height:6px;animation:2.4s ease-in-out infinite fx-sparkle;position:absolute;top:4px;right:4px}.fx-peek>svg{animation-name:fx-peek}.fx-bounce>svg{animation-name:fx-bounce;animation-duration:1.6s}.fx-spin>svg{animation:3.2s linear infinite fx-spin}.fx-tick>svg{animation:2.4s steps(6,end) infinite fx-tick}.fx-flip>svg{animation-name:fx-flip}.fx-nod>svg{animation-name:fx-nod}.fx-squash>svg{transform-origin:50% 100%;animation-name:fx-squash}.fx-slide>svg{animation-name:fx-slide}.fx-slideback>svg{animation-name:fx-slideback}.fx-wiggle>svg{animation-name:fx-wiggle}.fx-stretch>svg{animation-name:fx-stretch}.fx-chop>svg{animation-name:fx-chop;animation-duration:1.4s}.fx-pulse>svg{animation-name:fx-pulse}@media (hover:hover){.shelf-card:not(:hover):not(.is-on):not(:focus-visible) .shelf-icon>svg{animation-play-state:paused}.shelf-card:not(:hover):not(.is-on):not(:focus-visible) .shelf-icon:after{animation-play-state:paused}}@keyframes fx-tilt{0%,to{transform:rotate(0)}40%,70%{transform:rotate(-14deg)}}@keyframes fx-drop{0%,35%{opacity:0;transform:translateY(0)}45%{opacity:1}90%{opacity:1;transform:translateY(16px)}to{opacity:0;transform:translateY(18px)}}@keyframes fx-flicker{0%,to{transform:scale(1)}25%{transform:scale(1.08,1.12)}50%{transform:scale(.96,1.04)}75%{transform:scale(1.05,.98)}}@keyframes fx-swipe{0%,to{transform:translate(-4px)rotate(-8deg)}50%{transform:translate(4px)rotate(8deg)}}@keyframes fx-sparkle{0%,40%,to{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.2)}}@keyframes fx-peek{0%,to{transform:translate(-4px)}50%{transform:translate(4px)}}@keyframes fx-bounce{0%,to{transform:translateY(0)}35%{transform:translateY(-6px)}55%{transform:translateY(0)scale(1.06,.94)}70%{transform:translateY(-2px)}}@keyframes fx-spin{to{transform:rotate(360deg)}}@keyframes fx-tick{to{transform:rotate(360deg)}}@keyframes fx-flip{0%,20%{transform:rotateY(0)}50%,70%{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}@keyframes fx-nod{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}@keyframes fx-squash{0%,to{transform:scale(1)}40%{transform:scale(1.12,.84)}60%{transform:scale(.94,1.06)}}@keyframes fx-slide{0%,to{transform:translate(-3px)}50%{transform:translate(5px)}}@keyframes fx-slideback{0%,to{transform:translate(3px)}50%{transform:translate(-5px)}}@keyframes fx-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}@keyframes fx-stretch{0%,to{transform:scaleX(1)}50%{transform:scaleX(1.25)}}@keyframes fx-chop{0%,55%,to{transform:translateY(-4px)rotate(-6deg)}65%{transform:translateY(4px)rotate(4deg)}}@keyframes fx-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@media (prefers-reduced-motion:reduce){.shelf-icon>svg,.shelf-icon:after{animation:none!important}.shelf-icon:after{display:none}}