/* The gacha hall "อัญเชิญ" (js/gacha.js, 2026-10-13): its button on the main screen and the hall of capsule machines.
   Art by Codex: assets/ui_book/gacha (tools/run_codex_gacha_hub.sh). */

/* ---- the button on the main screen: the HUD's own slot frame (as the world-event icon beside it) ---- */
#gachabtn { position: fixed; z-index: 880; width: 58px; height: 58px; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center;
  background: url(../assets/ui_book/hud_item_slot.png) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); transition: transform 0.12s; }
#gachabtn img { width: 50px; height: 50px; object-fit: contain; pointer-events: none; animation: gcBtnBob 2.4s ease-in-out infinite; }
#gachabtn b { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 800 12px/16px 'Mali', sans-serif; color: #ffe7a6; background: #1d1410; border: 1px solid #b8893a; }
#gachabtn::before { content: ''; position: absolute; inset: -5px; border-radius: 14px; pointer-events: none; background: radial-gradient(circle, rgba(255, 190, 230, 0.5), transparent 68%); opacity: 0; animation: gcBtnShine 2.4s ease-in-out infinite; }
#gachabtn:hover { transform: scale(1.08); }
#gachabtn.has::after { content: ''; position: absolute; right: -2px; top: -2px; width: 11px; height: 11px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 0 2px #2a1408, 0 0 8px #ff7a5a; }
@keyframes gcBtnBob { 50% { transform: translateY(-2px) scale(1.04); } }
@keyframes gcBtnShine { 50% { opacity: 1; } }

/* ---- the hall ---- */
#gacha { position: fixed; inset: 0; z-index: 940; overflow: hidden; font-family: 'Mali', sans-serif; color: #f2ead6; animation: gcIn 0.35s ease-out both; user-select: none; }
@keyframes gcIn { from { opacity: 0; } }
#gacha .gc-back { position: absolute; inset: 0; background: #1a1430 center / cover no-repeat; filter: blur(6px) brightness(0.7); transform: scale(1.06); }
#gacha .gc-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
#gacha .gc-stage > * { position: absolute; }
#gacha .gc-bgi { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#gacha button { padding: 0; border: 0; background: none; cursor: pointer; font-family: 'Mali', sans-serif; }
#gacha .gc-title { left: 560px; top: 22px; width: 800px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#gacha .gc-title b { font: 800 66px/1 'Mali', sans-serif; color: #ffe7a6; text-shadow: 3px 0 0 #4a2410, -3px 0 0 #4a2410, 0 3px 0 #4a2410, 0 -3px 0 #4a2410, 0 6px 0 #2a1208; letter-spacing: 2px; }
#gacha .gc-title small { margin-top: 8px; font: 700 22px 'Mali', sans-serif; color: #fff4d6; text-shadow: 2px 0 0 #3a2412, -2px 0 0 #3a2412, 0 2px 0 #3a2412, 0 -2px 0 #3a2412; }
#gacha .gc-rbtn { width: 76px; height: 76px; transition: transform 0.12s, filter 0.12s; }
#gacha .gc-rbtn img { width: 100%; height: 100%; display: block; }
#gacha .gc-rbtn:hover { transform: scale(1.08); filter: brightness(1.12); }

/* a machine: the floor glow, the machine (a button), its sign, its button */
#gacha .gc-m { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#gacha .gc-m > * { position: absolute; pointer-events: auto; }
#gacha .gc-glow { pointer-events: none !important; opacity: 0.85; animation: gcGlow 2.6s ease-in-out infinite; }
@keyframes gcGlow { 50% { opacity: 1; transform: scale(1.05); } }
#gacha .gc-mach { transition: transform 0.18s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.18s; transform-origin: 50% 100%; }
#gacha .gc-mach img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); pointer-events: none; }
#gacha .gc-plab { position: absolute; display: grid; place-items: center; pointer-events: none; font-family: 'Mali', sans-serif; font-weight: 800; color: #ffe7a6; white-space: nowrap;
  text-shadow: 2px 0 0 #2a1608, -2px 0 0 #2a1608, 0 2px 0 #2a1608, 0 -2px 0 #2a1608; }   /* (the short name on the machine's own blank panel) */
#gacha .gc-mach:hover { transform: translateY(-8px) scale(1.02); filter: brightness(1.08) drop-shadow(0 0 18px rgba(255, 220, 140, 0.55)); }
/* (2026-10-18: a click on the machine opens its room; the pill over the globe says which, on hover) */
#gacha .gc-room { position: absolute; transform: translate(-50%, -50%) translateY(8px); padding: 7px 18px; border-radius: 999px; pointer-events: none; white-space: nowrap; opacity: 0;
  font: 800 22px 'Mali', sans-serif; color: #fff4d6; background: linear-gradient(180deg, rgba(74, 44, 108, 0.94), rgba(36, 20, 58, 0.94)); border: 2px solid #e8c27a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); transition: opacity 0.15s, transform 0.15s; }
#gacha .gc-mach:hover .gc-room, #gacha .gc-mach:focus-visible .gc-room { opacity: 1; transform: translate(-50%, -50%); }
#gacha .gc-m.lock .gc-room, #gacha .gc-m.soon .gc-room { display: none; }
#gacha .gc-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: center / 100% 100% no-repeat; pointer-events: none !important; }
#gacha .gc-sign b { font: 800 24px/1.1 'Mali', sans-serif; color: #fff4d6; text-shadow: 2px 0 0 #2a1608, -2px 0 0 #2a1608, 0 2px 0 #2a1608, 0 -2px 0 #2a1608; white-space: nowrap; }
#gacha .gc-sign small { display: flex; align-items: center; gap: 6px; font: 700 16px 'Mali', sans-serif; color: #ffe2a0; text-shadow: 1px 0 0 #2a1608, -1px 0 0 #2a1608, 0 1px 0 #2a1608, 0 -1px 0 #2a1608; white-space: nowrap; }
#gacha .gc-sign small img { width: 26px; height: 26px; object-fit: contain; }
#gacha .gc-go { border-radius: 999px; display: grid; place-items: center; font: 800 24px 'Mali', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, #ffb3dc, #f25fa8 55%, #b8337a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #7a1f52, 0 8px 14px rgba(0, 0, 0, 0.4); transition: transform 0.12s, filter 0.12s; }
#gacha .gc-go.pet { background: linear-gradient(180deg, #b9f5c8, #4fcf7f 55%, #23905a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #17603b, 0 8px 14px rgba(0, 0, 0, 0.4); }
#gacha .gc-go:hover { transform: translateY(-2px); filter: brightness(1.08); }
#gacha .gc-go:active { transform: translateY(3px); }
#gacha .gc-m.soon .gc-mach img { filter: grayscale(0.55) brightness(0.72) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); }
#gacha .gc-m.soon .gc-mach:hover { transform: none; filter: none; }
#gacha .gc-m.soon .gc-go, #gacha .gc-m.lock .gc-go, #gacha .gc-m.empty .gc-go { background: linear-gradient(180deg, #8d8597, #5d566a 55%, #3d3848); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 5px 0 #24202c, 0 8px 14px rgba(0, 0, 0, 0.4); color: #e8e2f0; }
#gacha .gc-m.lock .gc-mach img { filter: grayscale(0.7) brightness(0.65) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)); }
#gacha .gc-m.soon .gc-glow, #gacha .gc-m.lock .gc-glow { opacity: 0.3; animation: none; }
#gacha .gc-m.nope .gc-mach { animation: gcNope 0.42s ease-out; }
@keyframes gcNope { 20% { transform: translateX(-10px) rotate(-1.5deg); } 45% { transform: translateX(9px) rotate(1.2deg); } 70% { transform: translateX(-5px); } }
#gacha .gc-m.turn .gc-mach { animation: gcTurn 0.62s ease-in-out; }
@keyframes gcTurn { 15% { transform: rotate(-2.2deg) translateY(-4px); } 35% { transform: rotate(2deg); } 55% { transform: rotate(-1.6deg) translateY(-3px); } 75% { transform: rotate(1deg); } }
#gacha .gc-tip { width: 460px; padding: 10px 16px; border-radius: 16px; text-align: center; pointer-events: none; font: 700 17px/1.4 'Mali', sans-serif; color: #fff4d6;
  background: rgba(26, 16, 34, 0.9); box-shadow: 0 0 0 2px rgba(217, 168, 90, 0.75), 0 8px 18px rgba(0, 0, 0, 0.45); }

/* the odds */
#gacha .gc-over { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(10, 6, 20, 0.6); }
#gacha .gc-over[hidden] { display: none; }
#gacha .gc-info-in { width: min(640px, 92vw); max-height: 86vh; overflow: auto; padding: 22px 26px; border-radius: 18px; background: rgba(26, 16, 34, 0.96); box-shadow: 0 0 0 2px #c9974e, 0 14px 30px rgba(0, 0, 0, 0.55); font-size: 15px; line-height: 1.5; }
#gacha .gc-info-in h4 { margin: 0 0 10px; font-size: 22px; color: #ffe7a6; text-align: center; }
#gacha .gc-info-in h5 { margin: 14px 0 6px; font-size: 16px; color: #ffe7a6; }
#gacha .gc-info-in p { margin: 6px 0; }
#gacha .gc-info-in p b { color: #ffd98a; }
#gacha .gc-info-in table { width: 100%; border-collapse: collapse; text-align: center; }
#gacha .gc-info-in th, #gacha .gc-info-in td { padding: 6px 4px; border-bottom: 1px solid rgba(217, 168, 90, 0.3); }
#gacha .gc-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 14px auto 0; padding: 10px 22px; border-radius: 999px; font: 800 18px 'Mali', sans-serif; color: #fff4d6;
  background: linear-gradient(180deg, #5a4a6e, #3a2e4a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #1f1828; }
#gacha .gc-info-in .gc-btn { display: flex; }
#gacha .gc-btn small { font-size: 13px; font-weight: 700; color: #ffe8f4; }
#gacha .gc-btn kbd { padding: 0 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.3); font: 700 11px 'Mali', sans-serif; }
#gacha .gc-btn.hot { background: linear-gradient(180deg, #b9f5c8, #4fcf7f 55%, #23905a); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 4px 0 #17603b; }
#gacha .gc-btn:disabled { opacity: 0.45; cursor: default; }

/* ---- a pet draw: the capsule (its two halves), the glow behind it, the burst, the card ---- */
#gacha .gc-draw { left: 0; top: 0; width: 1920px; height: 1080px; z-index: 2; pointer-events: auto; }
#gacha .gc-draw[hidden] { display: none; }
#gacha .gc-draw::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 44%, rgba(20, 10, 30, 0.5), rgba(12, 6, 22, 0.82) 75%); opacity: 0; transition: opacity 0.5s; }   /* (the hall steps back behind the capsule and the card) */
#gacha .gc-draw.on::before { opacity: 1; }
#gacha .gc-aura { position: absolute; width: 620px; height: 620px; border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, color-mix(in srgb, var(--cc, #fff) 85%, white) 0%, color-mix(in srgb, var(--cc, #fff) 55%, transparent) 28%, transparent 66%); }
#gacha .gc-cap { position: absolute; left: 0; top: 0; width: 240px; height: 240px; transform-origin: 120px 120px; opacity: 0; pointer-events: none; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45)); }
#gacha .gc-cap img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.55s; }
#gacha .gc-draw.lift .gc-cap { animation: gcLift 0.5s ease-out; }
@keyframes gcLift { 0% { filter: brightness(2.4) drop-shadow(0 0 30px #fff); } 100% { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45)); } }
#gacha .gc-draw.open .gc-cap .t { transform: translate(-70px, -190px) rotate(-38deg); opacity: 0; }
#gacha .gc-draw.open .gc-cap .b { transform: translate(40px, 150px) rotate(18deg); opacity: 0; }
#gacha .gc-pop, #gacha .gc-star { left: 660px; top: 170px; width: 600px; height: 600px; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
#gacha .gc-draw.open .gc-pop { animation: gcPop 1.1s ease-out both; }
#gacha .gc-draw.open .gc-star { animation: gcStar 0.8s ease-out both; }
@keyframes gcPop { 0% { opacity: 0; transform: scale(0.3); } 18% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes gcStar { 0% { opacity: 1; transform: scale(0.4) rotate(0deg); } 100% { opacity: 0; transform: scale(2.2) rotate(40deg); } }
#gacha .gc-res { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#gacha .gc-draw.done .gc-res { pointer-events: auto; }
#gacha .gc-card { position: absolute; left: 790px; top: 150px; width: 340px; height: 453px; background: center / 100% 100% no-repeat; isolation: isolate; animation: gcCard 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--gc) 70%, transparent)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5)); }
@keyframes gcCard { 0% { opacity: 0; transform: scale(0.4) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
#gacha .gc-plate { position: absolute; inset: 7% 8%; z-index: -1; border-radius: 6%; background: center / cover no-repeat; filter: brightness(0.85); }
#gacha .gc-card img { position: absolute; left: 6%; top: 18%; width: 88%; height: auto; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px var(--gc)); animation: gcPetBob 2.4s ease-in-out infinite; }
@keyframes gcPetBob { 50% { transform: translateY(-8px); } }
#gacha .gc-card .new { position: absolute; right: 8%; top: 6%; padding: 2px 10px; border-radius: 999px; font: 800 17px 'Mali', sans-serif; font-style: normal; color: #fff; background: #ff4d6d; box-shadow: 0 0 10px rgba(255, 77, 109, 0.8); }
#gacha .gc-rtext { position: absolute; left: 560px; top: 618px; width: 800px; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: gcIn 0.4s 0.15s ease-out both; }
#gacha .gc-rtext small { font: 800 24px 'Mali', sans-serif; text-shadow: 2px 0 0 #2a1608, -2px 0 0 #2a1608, 0 2px 0 #2a1608, 0 -2px 0 #2a1608; }
#gacha .gc-rtext b { font: 800 44px/1.1 'Mali', sans-serif; color: #fff; text-shadow: 3px 0 0 #2a1608, -3px 0 0 #2a1608, 0 3px 0 #2a1608, 0 -3px 0 #2a1608; }
#gacha .gc-rtext span { font: 700 22px 'Mali', sans-serif; color: #ffe2a0; text-shadow: 2px 0 0 #2a1608, -2px 0 0 #2a1608, 0 2px 0 #2a1608, 0 -2px 0 #2a1608; }
#gacha .gc-rbtns { position: absolute; left: 460px; top: 770px; width: 1000px; display: flex; justify-content: center; gap: 18px; animation: gcIn 0.4s 0.25s ease-out both; }
#gacha .gc-rbtns .gc-btn { margin: 0; min-width: 210px; font-size: 22px; }
@media (prefers-reduced-motion: reduce) { #gachabtn img, #gachabtn::before, #gacha .gc-glow, #gacha .gc-card img { animation: none; } }

/* ---- the hall's life (2026-10-13, "ทำให้น่าดึงดูดมากกว่านี้" -> "เอาใหม่": nothing over the painting): the light layers,
   the machines bouncing in and breathing, the machine under the mouse lit and the others dimmed ---- */
#gacha .gc-fxb, #gacha .gc-fxf { left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#gacha .gc-m .gc-mach { animation: gcLand 0.7s cubic-bezier(0.25, 1.6, 0.45, 1) both; }
#gacha .gc-m[data-gm="pet"] .gc-mach { animation-delay: 0.08s; }
#gacha .gc-m[data-gm="mount"] .gc-mach { animation-delay: 0.24s; }
#gacha .gc-m[data-gm="fashion"] .gc-mach { animation-delay: 0.4s; }
@keyframes gcLand { 0% { opacity: 0; transform: translateY(-120px) scale(0.7, 1.15); } 60% { opacity: 1; transform: translateY(0) scale(1.08, 0.9); } 100% { transform: none; } }
#gacha .gc-mach img { animation: gcBreathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
#gacha .gc-m[data-gm="mount"] .gc-mach img { animation-delay: -1.1s; }
#gacha .gc-m[data-gm="fashion"] .gc-mach img { animation-delay: -2.2s; }
@keyframes gcBreathe { 50% { transform: scale(1.012, 0.992); } }
#gacha .gc-m.soon .gc-mach img, #gacha .gc-m.lock .gc-mach img { animation: none; }
#gacha .gc-stage.hov .gc-m:not(.hot) .gc-mach { filter: brightness(0.72) saturate(0.85); }
#gacha .gc-m.hot:not(.soon):not(.lock) .gc-mach { transform: translateY(-10px) scale(1.03); filter: brightness(1.1) drop-shadow(0 0 22px rgba(255, 225, 150, 0.7)); }
#gacha .gc-m.hot .gc-sign { filter: brightness(1.15); }
#gacha .gc-mach { transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.25s; }
#gacha .gc-mach:hover { transform: none; filter: none; }
#gacha .gc-sign, #gacha .gc-go { animation: gcIn 0.4s 0.55s ease-out both; }
#gacha .gc-title { animation: gcTitle 0.6s cubic-bezier(0.25, 1.5, 0.45, 1) both; }
@keyframes gcTitle { 0% { opacity: 0; transform: translateY(-40px) scale(0.8); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #gacha .gc-m .gc-mach, #gacha .gc-mach img, #gacha .gc-title { animation: none; } }


/* the fashion machine's prize (js/gacha.js fashionResult): the outfit worn, or a pair of wings */
#gacha .gc-card.fz img { left: 14%; top: 8%; width: 72%; filter: drop-shadow(0 0 8px var(--gc)); }
#gacha .gc-card.fz.wing img { left: 9%; top: 26%; width: 82%; }
#gacha .gc-rbtns .gc-btn:disabled { opacity: 0.55; cursor: default; }

/* the fashion machine's ten-at-once and auto buttons, under its main one (js/gacha.js) */
#gacha .gc-go2 { position: absolute; border: 2px solid #5a2a66; border-radius: 999px; padding: 0; background: linear-gradient(180deg, #f6c8ff, #c88be6 60%, #9a5cc4); color: #2e1238; font: 800 16px 'Mali', sans-serif; cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55); transition: transform 0.12s, filter 0.12s; }
#gacha .gc-go2:hover { transform: translateY(-2px); filter: brightness(1.08); }
#gacha .gc-m.lock .gc-go2 { display: none; }

/* the machines' controls v2 (2026-10-17, the user's picks 1-4 + A-C): ×1 and ×10 side by side, each with its cost; a
   button without enough turns grey "ไม่พอ · หาเพิ่ม" (it opens where the item comes from); the sign says how many you have
   with a + to find more and a bar to the guarantee; ⚟ fusion beside ⟳ auto */
#gacha .gc-go { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 6px; font-size: 21px; line-height: 1.05; }
#gacha .gc-go b { font: inherit; white-space: nowrap; }
#gacha .gc-go small { display: flex; align-items: center; gap: 3px; font: 800 14px Fredoka, 'Mali', sans-serif; color: #fff8e8; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }
#gacha .gc-go small img { width: 20px; height: 20px; object-fit: contain; }
#gacha .gc-go.fashion { background: linear-gradient(180deg, #e8c8ff, #b07ae6 55%, #7a45b8); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #4a2478, 0 8px 14px rgba(0, 0, 0, 0.4); }
#gacha .gc-go.n10 { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 5px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 226, 122, 0.85), 0 8px 14px rgba(0, 0, 0, 0.4); }
#gacha .gc-go.short { background: linear-gradient(180deg, #8d8597, #5d566a 55%, #3d3848) !important; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 5px 0 #24202c, 0 8px 14px rgba(0, 0, 0, 0.4) !important; color: #f1ecf7; font-size: 17px; }
#gacha .gc-go.short small { opacity: 0.85; }
#gacha .gc-sign small em { font: 800 17px Fredoka, sans-serif; font-style: normal; color: #fff; }
#gacha .gc-pity { display: flex; flex-direction: column; align-items: center; gap: 2px; font-style: normal; }
#gacha .gc-pity span { font: 700 12px 'Mali', sans-serif; color: #ffe9b0; text-shadow: 1px 0 0 #2a1608, -1px 0 0 #2a1608, 0 1px 0 #2a1608, 0 -1px 0 #2a1608; white-space: nowrap; }
#gacha .gc-pity b { color: #ffb340; font-size: 13px; }
#gacha .gc-pity u { display: block; width: 170px; height: 5px; border-radius: 3px; background: rgba(30, 16, 8, 0.7); overflow: hidden; }
#gacha .gc-pity s { display: block; height: 100%; text-decoration: none; background: linear-gradient(90deg, #ffd56a, #ffb340); }
#gacha .gc-plus { position: absolute; z-index: 5; width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer; pointer-events: auto;
  background: radial-gradient(circle at 40% 30%, #fff1b0, #f2b53a 55%, #b0761a); border: 2px solid #3a2208; color: #3a2208; font: 900 24px/28px Fredoka, sans-serif; box-shadow: 0 3px 0 #3a2208; }
#gacha .gc-plus:hover { filter: brightness(1.12); transform: translateY(-1px); }
#gacha .gc-m.lock .gc-plus, #gacha .gc-m.lock .gc-fuse { display: none; }
#gacha .gc-go2 { font-size: 15px; }
#gacha .gc-sign { gap: 0; padding-bottom: 8px; }
#gacha .gc-sign b { font-size: 22px; }
#gacha .gc-sign small { font-size: 15px; }
#gacha .gc-pity u { width: 150px; height: 4px; }


/* ---- the gacha hall D-F (2026-10-17): the skip switch, 🎁 the prizes, 📜 the history (js/gacha.js) ---- */
#gacha .gc-pill { position: absolute; z-index: 4; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #4a3566, #2a1c3e); border: 2px solid #d9a85a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 0 #1a1026, 0 8px 14px rgba(0, 0, 0, 0.35); transition: transform 0.12s, filter 0.12s; }
#gacha .gc-pill b { font: 800 20px 'Mali', sans-serif; color: #fff4d6; white-space: nowrap; }
#gacha .gc-pill:hover { transform: translateY(-2px); filter: brightness(1.12); }
#gacha .gc-fast i { font: 800 15px 'Mali', sans-serif; font-style: normal; min-width: 50px; padding: 3px 10px; border-radius: 999px; background: #5d566a; color: #e8e2f0; }
#gacha .gc-fast.on { border-color: #7de89c; }
#gacha .gc-fast.on i { background: #2fb866; color: #fff; }
#gacha .gc-gift { position: absolute; z-index: 5; width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer; pointer-events: auto; font: 18px/30px sans-serif;
  background: radial-gradient(circle at 40% 30%, #ffe0f0, #f27ab8 55%, #a83a78); border: 2px solid #3a2208; box-shadow: 0 3px 0 #3a2208; }
#gacha .gc-gift:hover { filter: brightness(1.12); transform: translateY(-1px); }

#gacha .gp-in { width: min(1180px, 94vw); height: min(880px, 90vh); max-height: none; display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; overflow: hidden; }
#gacha .gp-head { display: flex; align-items: center; gap: 12px; }
#gacha .gp-head h4 { margin: 0; flex: 1; text-align: left; font-size: 28px; }
#gacha .gp-sw, #gacha .gp-x { height: 44px; padding: 0 18px; border-radius: 999px; font: 800 17px 'Mali', sans-serif; color: #fff4d6; background: linear-gradient(180deg, #5a4a6e, #3a2e4a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 0 #1f1828; }
#gacha .gp-x { width: 44px; padding: 0; font-size: 20px; }
#gacha .gp-sw:hover, #gacha .gp-x:hover { filter: brightness(1.15); }
#gacha .gp-tabs { display: flex; gap: 10px; }
#gacha .gp-tab { flex: 1; height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; font: 800 19px 'Mali', sans-serif; color: #d9ccff;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(217, 168, 90, 0.35); }
#gacha .gp-tab img { width: 30px; height: 30px; object-fit: contain; }
#gacha .gp-tab.on { color: #2a1608; background: linear-gradient(180deg, #ffe7a6, #e8b04e); border-color: #ffe7a6; }
#gacha .gp-tab:not(.on):hover { background: rgba(255, 255, 255, 0.12); }
#gacha .gp-body { flex: 1; min-height: 0; overflow: auto; padding-right: 6px; }
#gacha .gp-sum { font: 700 16px/1.5 'Mali', sans-serif; color: #f2ead6; margin-bottom: 8px; }
#gacha .gp-sum b { color: #ffd98a; }
#gacha .gp-cnt { display: inline-block; margin: 2px 4px; padding: 1px 10px; border-radius: 999px; font-style: normal; font-weight: 800; color: var(--gc); border: 1px solid var(--gc); background: rgba(0, 0, 0, 0.25); }
/* a prize's details: stays in view while the list scrolls */
#gacha .gp-detbox { position: sticky; top: 0; z-index: 2; padding-bottom: 8px; background: rgb(26, 16, 34); }
#gacha .gp-detbox:empty { display: none; }
#gacha .gp-det { display: flex; gap: 16px; align-items: center; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--gc); background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 22%, #1a1022), #1a1022 70%); }
#gacha .gp-dpic { flex: none; width: 150px; height: 150px; border-radius: 14px; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 45%, #2a1c3e), #140c1c 75%); border: 2px solid color-mix(in srgb, var(--gc) 70%, #000); }
#gacha .gp-dpic img { max-width: 138px; max-height: 138px; object-fit: contain; }
#gacha .gp-dtx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#gacha .gp-dtx small { font: 800 17px 'Mali', sans-serif; }
#gacha .gp-dtx b { font: 800 28px/1.15 'Mali', sans-serif; color: #fff; }
#gacha .gp-dtx span { font: 700 17px/1.4 'Mali', sans-serif; color: #ffe2a0; }
#gacha .gp-dtx p { margin: 0; font: 700 16px/1.4 'Mali', sans-serif; color: #e0d4ff; }
#gacha .gp-dtx em { align-self: flex-start; margin-top: 2px; padding: 2px 12px; border-radius: 999px; font: 800 15px 'Mali', sans-serif; font-style: normal; color: #e8e2f0; background: #4a4058; }
#gacha .gp-dtx em.own { color: #fff; background: #2fb866; }
/* the tiers */
#gacha .gp-tier { margin-top: 12px; }
#gacha .gp-th { display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-radius: 10px; border-left: 6px solid var(--gc); background: rgba(255, 255, 255, 0.05); }
#gacha .gp-th b { font: 800 22px 'Mali', sans-serif; color: var(--gc); min-width: 90px; }
#gacha .gp-th span { font: 700 16px 'Mali', sans-serif; color: #fff4d6; }
#gacha .gp-th em { font: 700 15px 'Mali', sans-serif; font-style: normal; color: #cfc4e0; }
#gacha .gp-more { margin-left: auto; height: 36px; padding: 0 16px; border-radius: 999px; font: 800 15px 'Mali', sans-serif; color: #2a1608; background: linear-gradient(180deg, #ffe7a6, #e8b04e); }
#gacha .gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin-top: 8px; }
#gacha .gp-tile { position: relative; height: 134px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 6px 4px; border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--gc) 65%, #000); background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 28%, #20152c), #170f20); }
#gacha .gp-tile img { width: 92px; height: 92px; object-fit: contain; }
#gacha .gp-tile:not(.own) img { filter: brightness(0.7) saturate(0.6); }
#gacha .gp-tile span { width: 100%; font: 700 13px/1.15 'Mali', sans-serif; color: #f2ead6; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#gacha .gp-tile i { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; font: 900 14px/22px sans-serif; font-style: normal; color: #fff; background: #2fb866; }
#gacha .gp-tile:hover { filter: brightness(1.15); }
#gacha .gp-tile.sel, #gacha .gp-row.sel { outline: 3px solid #ffe7a6; outline-offset: 1px; }
/* the history */
#gacha .gp-log { display: flex; flex-direction: column; gap: 4px; }
#gacha .gp-row { display: grid; grid-template-columns: 118px 48px 86px 1fr auto; align-items: center; gap: 10px; min-height: 54px; padding: 3px 12px; border-radius: 10px; text-align: left;
  border-left: 5px solid var(--gc); background: rgba(255, 255, 255, 0.05); }
#gacha .gp-row:hover { background: rgba(255, 255, 255, 0.1); }
#gacha .gp-row em { font: 700 14px Fredoka, 'Mali', sans-serif; font-style: normal; color: #cfc4e0; }
#gacha .gp-row img { width: 46px; height: 46px; object-fit: contain; }
#gacha .gp-row small { font: 800 15px 'Mali', sans-serif; color: var(--gc); }
#gacha .gp-row b { font: 800 18px 'Mali', sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gacha .gp-row u { padding: 2px 10px; border-radius: 999px; text-decoration: none; font: 800 14px 'Mali', sans-serif; color: #e8e2f0; background: #4a4058; white-space: nowrap; }
#gacha .gp-row u.new { color: #fff; background: #ff4d6d; }
#gacha .gp-row u.fz { color: #fff; background: #8a52d6; }