/* おやつ遊び（リール直後）。既存セクションからスタイルを分離 */
.oyatsu{
  position:relative; z-index:2; isolation:isolate;
  padding:42px 20px 30px; background:#fff;
}
.oyatsu [hidden]{display:none !important}
.oyatsu__scene{
  display:grid; grid-template-columns:minmax(0,320px) 140px;
  align-items:end; justify-content:center; column-gap:28px; row-gap:8px;
  max-width:600px; margin:0 auto;
}
.oyatsu__host{grid-column:2; grid-row:1; position:relative; height:222px; margin-bottom:22px}
.oyatsu__bubble{
  position:absolute; z-index:2; top:0; right:0;
  display:grid; place-items:center; width:174px; min-height:58px;
  padding:12px 10px; border:2px solid var(--ink); border-radius:50%;
  background:var(--dc2); color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  font-size:16px; font-weight:900; line-height:1.5; text-align:center;
  white-space:nowrap; transform:rotate(5deg);
}
.oyatsu__bubble::after{
  content:""; position:absolute; bottom:-8px; right:46px;
  width:14px; height:14px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  background:var(--dc2); transform:skewY(15deg) rotate(35deg);
}
.oyatsu__stickers{position:absolute; right:0; bottom:0; width:126px; height:144px}
.oyatsu__sticker{width:100%; height:100%; object-fit:contain; object-position:center bottom}
.oyatsu__sticker--cheer{transform-origin:50% 95%}
.oyatsu__basket-wrap{grid-column:1; grid-row:1; position:relative; min-width:0; aspect-ratio:1}
.oyatsu__basket{
  display:block; width:100%; aspect-ratio:1; padding:0;
  border:0; border-radius:28px; background:transparent;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease; transform-origin:50% 85%;
}
.oyatsu__basket canvas{display:block; width:100%; height:auto; border-radius:inherit}
.oyatsu__basket:disabled{cursor:wait}
.oyatsu__basket[aria-disabled="true"]{cursor:default}
@media (hover:hover) and (pointer:fine){
  .oyatsu[data-state="ready"] .oyatsu__basket:hover{transform:rotate(2deg) scale(1.025)}
}
.oyatsu__basket:focus-visible{outline:3px dashed var(--ac2); outline-offset:3px}
/* かけらはカゴの揺れから独立させ、次のタップを遮らない */
.oyatsu__bite-effects{position:absolute; inset:0; z-index:1; pointer-events:none}
.oyatsu__bite-particle{position:absolute; display:block; opacity:0; pointer-events:none; will-change:transform,opacity}
.oyatsu__bite-particle--crumb{
  border:1px solid #82522d; border-radius:35% 24% 38% 22%;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(255,255,255,.9);
}
.oyatsu__bite-particle--star{
  background:url('../assets/oyatsu/celebration-atlas.png') left bottom / 200% 200% no-repeat;
  filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
.oyatsu__loading{
  position:absolute; top:50%; left:0; width:100%; padding:0 10px;
  text-align:center; font-size:12px; color:var(--sub); pointer-events:none;
}
.oyatsu__actions{
  grid-column:1; grid-row:2; display:flex; align-items:center; justify-content:center; gap:16px;
  min-height:44px;
}
.oyatsu__refill,.oyatsu__sound{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; font-size:12px; font-weight:700; color:var(--ink);
  touch-action:manipulation;
}
.oyatsu__refill{
  padding:0 15px; border:1px solid var(--ink); border-radius:999px;
  background:var(--dc2); box-shadow:2px 2px 0 var(--ink);
}
.oyatsu__refill span{font-size:20px; line-height:1}
.oyatsu__refill:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
.oyatsu__sound{width:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--sub)}
.oyatsu__sound svg{width:20px; height:20px; flex-shrink:0}
.oyatsu__sound-cross{display:none}
.oyatsu__sound[aria-pressed="false"] .oyatsu__sound-waves{display:none}
.oyatsu__sound[aria-pressed="false"] .oyatsu__sound-cross{display:block}
/* セクションの重なり順から独立させ、画面全体に広げるお祝い。 */
.oyatsu-celebration{position:fixed; z-index:1000; inset:0; width:100%; height:100%; pointer-events:none}
.oyatsu-celebration[hidden]{display:none}
.oyatsu__sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.oyatsu__noscript{text-align:center; font-size:12px; color:var(--sub)}
@media (max-width:540px){
  .oyatsu{padding:32px 16px 24px}
  .oyatsu__scene{grid-template-columns:minmax(0,250px) 86px; column-gap:10px; max-width:370px}
  .oyatsu__host{height:208px; margin-bottom:14px}
  .oyatsu__bubble{right:0; width:142px; min-height:50px; padding:10px 8px; font-size:13px}
  .oyatsu__bubble::after{right:28px}
  .oyatsu__stickers{right:0; width:84px; height:102px}
  .oyatsu__actions{grid-column:1 / -1; justify-content:flex-start; padding-left:10px}
}
@media (prefers-reduced-motion:reduce){
  .oyatsu__basket{transition:none}
  .oyatsu[data-state="ready"] .oyatsu__basket:hover{transform:none}
}