/* ================= 番外 生日扭蛋机 ================= */
#ch-gacha { padding: calc(var(--vh) * 12) 0 calc(var(--vh) * 10); }
.gc-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gc-machine { position: relative; width: min(78vw, 300px); display: flex; flex-direction: column; align-items: center; padding-bottom: 64px; }
.gc-dome { position: relative; z-index: 2; width: 88%; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--ink); overflow: hidden;
  background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .5), rgba(210, 228, 255, .32) 60%, rgba(160, 190, 255, .4)); box-shadow: inset 0 -10px 0 rgba(42, 26, 18, .1); }
.gc-balls { position: absolute; inset: 0; }
.gc-ball { position: absolute; width: 21%; aspect-ratio: 1; margin: -10.5% 0 0 -10.5%; border-radius: 50%; border: 2.5px solid var(--ink); transform: rotate(var(--rot));
  background: linear-gradient(180deg, var(--c) 0 50%, #fffaf2 50% 100%); box-shadow: inset -4px -4px 0 rgba(42, 26, 18, .12); }
.gc-ball::after { content: ''; position: absolute; left: 18%; top: 14%; width: 26%; height: 18%; border-radius: 50%; background: rgba(255, 255, 255, .7); transform: rotate(-30deg); }
.gc-balls.shake .gc-ball { animation: gc-jiggle .8s ease-in-out var(--d); }
@keyframes gc-jiggle { 0%, 100% { transform: rotate(var(--rot)) translate(0, 0); } 20% { transform: rotate(calc(var(--rot) + 40deg)) translate(4px, -14px); } 45% { transform: rotate(calc(var(--rot) - 30deg)) translate(-5px, -6px); } 70% { transform: rotate(calc(var(--rot) + 15deg)) translate(3px, -9px); } }
.gc-glass { position: absolute; left: 14%; top: 10%; width: 22%; height: 34%; border-radius: 50%; background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); transform: rotate(24deg); pointer-events: none; }
.gc-neck { position: relative; z-index: 1; width: 52%; height: 16px; margin-top: -10px; border: 3.5px solid var(--ink); border-radius: 6px; background: #ffd36b url(../assets/art/strokes.webp) center / 120px; }
.gc-base { position: relative; z-index: 1; width: 100%; height: 166px; margin-top: -3px; border: 4px solid var(--ink); border-radius: 22px 22px 18px 18px; background: #ff8fb8 url(../assets/art/strokes.webp) center / 170px; box-shadow: 0 6px 0 rgba(42, 26, 18, .35), 0 16px 34px rgba(8, 6, 40, .35); }
.gc-plate { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); font-size: 15px; color: var(--ink); background: #fff6e8; border: 2.5px solid var(--ink); border-radius: 10px; padding: 1px 12px; white-space: nowrap; }
.gc-knob { position: absolute; left: 12%; top: 50px; width: 68px; height: 68px; border-radius: 50%; border: 3.5px solid var(--ink); background: radial-gradient(circle at 40% 35%, #fff1a8, #f5b43a 70%); box-shadow: 0 4px 0 var(--ink); transition: transform .9s cubic-bezier(.4, 0, .2, 1); cursor: pointer; }
/* the crank: a bar across the knob with round grips, and a hub in the middle */
.gc-handle { position: absolute; left: -10px; right: -10px; top: 50%; height: 18px; margin-top: -9px; border-radius: 9px; border: 3px solid var(--ink); background: #fff6e8; }
.gc-handle::before, .gc-handle::after { content: ''; position: absolute; top: -6px; width: 20px; height: 24px; border-radius: 50%; border: 3px solid var(--ink); background: #ff9ec4; }
.gc-handle::before { left: -8px; } .gc-handle::after { right: -8px; }
.gc-knob::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 1; width: 16px; height: 16px; margin: -8px; border-radius: 50%; border: 3px solid var(--ink); background: #ffd36b; }
.gc-knob::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2.5px dashed rgba(255, 246, 232, .8); animation: gc-hint 2.4s linear infinite; pointer-events: none; }
@keyframes gc-hint { to { transform: rotate(360deg); } }
.gc-mouth { position: absolute; right: 13%; top: 56px; width: 72px; height: 54px; border-radius: 14px 14px 10px 10px; border: 3.5px solid var(--ink); background: #3a2a4e; overflow: hidden; }
.gc-mouth i { position: absolute; left: 6px; right: 6px; top: 6px; height: 22px; border-radius: 8px; background: rgba(255, 255, 255, .18); }
.gc-price { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 13px; color: #fff6e8; text-shadow: 0 1px 0 var(--ink), 0 0 8px rgba(42, 26, 18, .5); }
.gc-tray { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; justify-content: center; align-items: flex-end; }
.gc-cap { position: relative; width: 62px; height: 62px; opacity: 0; pointer-events: none; transform: translate(70px, -150px) scale(.6); }
.gc-cap.out { animation: gc-out 1s cubic-bezier(.3, .6, .4, 1) forwards; pointer-events: auto; }
@keyframes gc-out { 0% { opacity: 1; transform: translate(62px, -112px) scale(.55) rotate(0); } 45% { transform: translate(28px, 0) scale(1) rotate(-200deg); } 62% { transform: translate(14px, -22px) rotate(-280deg); } 80% { transform: translate(5px, 0) rotate(-340deg); } 90% { transform: translate(2px, -6px) rotate(-356deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(-360deg); } }
.gc-cap.nudge { animation: gc-nudge .5s ease-in-out; opacity: 1; transform: none; pointer-events: auto; }
@keyframes gc-nudge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.gc-top, .gc-bot { position: absolute; left: 0; right: 0; height: 50%; border: 3px solid var(--ink); }
.gc-top { top: 0; border-radius: 31px 31px 0 0; border-bottom-width: 1.5px; background: var(--c, #ff9ec4); transition: transform .45s var(--ease-pop), opacity .45s; transform-origin: 85% 100%; }
.gc-top::after { content: ''; position: absolute; left: 18%; top: 22%; width: 26%; height: 30%; border-radius: 50%; background: rgba(255, 255, 255, .7); transform: rotate(-30deg); }
.gc-bot { bottom: 0; border-radius: 0 0 31px 31px; border-top-width: 1.5px; background: #fffaf2; }
.gc-cap.open .gc-top { transform: translate(18px, -34px) rotate(52deg); opacity: 0; }
.gc-rays { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px; border-radius: 50%; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255, 236, 160, .55) 0 10deg, rgba(255, 236, 160, 0) 10deg 30deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); }
.gc-cap.out[data-r='SSR'] .gc-rays, .gc-cap.out[data-r='隐藏款'] .gc-rays { animation: gc-rays 2.4s linear infinite; opacity: 1; }
.gc-cap.out[data-r='SR'] .gc-rays { animation: gc-rays 3s linear infinite; opacity: .55; filter: hue-rotate(220deg); }
@keyframes gc-rays { to { transform: rotate(360deg); } }
.gc-tip { font-size: 16px; color: var(--txt); transition: color .3s; margin-top: -4px; }
.gc-tip.hot { color: #fff2c4; animation: tapb 1.4s ease-in-out infinite; }
.gc-book { width: min(100%, 420px); padding: 14px 16px 16px; }
.gb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.gb-head b { font-weight: normal; font-size: 18px; }
.gb-cnt { font-size: 14px; color: var(--ink2); }
.gb-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 7px; }
.gb-it { position: relative; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(42, 26, 18, .35); }
.gb-it i { position: absolute; inset: 2px; border-radius: 50%; }
.gb-it.got { border: 2px solid var(--ink); background: linear-gradient(180deg, var(--c) 0 50%, #fffaf2 50%); }
.gb-hidden { border-color: rgba(216, 52, 79, .5); }
.gb-hidden:not(.got)::after { content: '?'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-size: 12px; color: rgba(42, 26, 18, .5); }
@media (max-width: 380px) { .gb-grid { grid-template-columns: repeat(8, 1fr); } }
/* the note */
.m-gacha .modal-box { background: none; box-shadow: none; overflow: visible; text-align: center; width: min(100%, 380px); }
.m-gacha .modal-box::after { display: none; }
.gc-note { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gn-rays { position: absolute; left: 50%; top: 36%; width: 520px; height: 520px; margin: -260px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255, 230, 150, .45) 0 9deg, transparent 9deg 24deg); background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 55%, transparent) 0 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 66%); mask: radial-gradient(circle, #000 15%, transparent 66%); animation: gc-rays 9s linear infinite; opacity: .8; }
.gc-note[data-r='N'] .gn-rays, .gc-note[data-r='R'] .gn-rays { opacity: .35; }
.gn-card { position: relative; width: 100%; padding: 26px 22px 16px; color: var(--ink); background: linear-gradient(160deg, var(--c2), #fffaf2 60%); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 rgba(42, 26, 18, .35), 0 0 0 6px var(--c1), 0 0 40px var(--c1); animation: gn-in .6s var(--ease-pop); }
@keyframes gn-in { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.gn-rar { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: 18px; letter-spacing: .12em; padding: 2px 16px; border-radius: 99px; border: 2.5px solid var(--ink); background: var(--c1); color: var(--ink); white-space: nowrap; }
.gc-note[data-r='SSR'] .gn-rar { background: linear-gradient(90deg, #ffd36b, #ff9ec4, #ffd36b); background-size: 200% 100%; animation: dd-shine 2s linear infinite; }
.gn-card h3 { font-size: clamp(24px, 7vw, 30px); line-height: 1.3; margin: 6px 0 8px; }
.gn-card p { font-size: 16.5px; line-height: 1.7; color: #4a3020; }
.gn-foot { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 8px; border-top: 2px dashed rgba(42, 26, 18, .3); font-size: 12px; color: var(--ink2); }
.gn-new { position: relative; font-size: 14.5px; color: #fff2c4; min-height: 1.4em; }
@media (min-width: 900px) { .gc-machine { width: 330px; } }