/* Mobile-first Word Gacha pack-opening flow. Intentionally isolated from collection/grid styles. */
body.hgr-open{overflow:hidden;overscroll-behavior:none}
.hgr-overlay{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;align-items:center;padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.hgr-backdrop{position:absolute;inset:0;background:#071e29d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hgr-panel{isolation:isolate;position:relative;width:min(460px,100%);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #edd5a8;border-radius:23px;background:#f7f4ea;box-shadow:0 22px 80px #00172299}
.hgr-overlay button{cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.hgr-overlay button:focus-visible{outline:3px solid #b77a39;outline-offset:3px}
.hgr-overlay button:disabled{opacity:.38;cursor:not-allowed}
.hgr-top{display:flex;align-items:center;justify-content:space-between;flex:none;padding:13px 18px;background:#193946;color:#f2cc8d;min-height:47px;box-sizing:border-box}
.hgr-top>span{font-size:11px;letter-spacing:.16em;font-weight:900}
.hgr-top button{border:0;background:transparent;color:#f6e6c6;font-size:31px!important;line-height:1;padding:0 4px}
.hgr-stage{display:flex;flex-direction:column;align-items:center;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:20px 19px 22px;text-align:center;box-sizing:border-box}
.hgr-stage h2{font:700 clamp(25px,5vw,34px)/1.13 Georgia,serif;letter-spacing:-.04em;color:#223f46;margin:8px 0 7px}
.hgr-stage>p{font-size:13px;line-height:1.55;color:#698078;margin:0 0 12px}
.hgr-overline{font-size:10px;letter-spacing:.17em;font-weight:900;color:#b78748}
.hgr-packet{width:min(205px,60vw);height:clamp(205px,33dvh,270px);flex:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;margin:auto 0 8px;padding:20px 14px;background:repeating-linear-gradient(135deg,#183e43,#183e43 18px,#22504d 18px,#22504d 22px);border:3px solid #ddb779;border-radius:16px;box-shadow:10px 10px 0 #102c37,13px 17px 25px #102c3740;transform:rotate(-5deg);touch-action:none;user-select:none;color:#f8e1b1;transition:transform .16s,box-shadow .16s}
.hgr-packet:before{content:"";position:absolute;inset:10px;border:1px solid #f4d49e88;border-radius:8px;pointer-events:none}
.hgr-packet:active{transform:translateY(-9px) rotate(-3deg);box-shadow:9px 14px 0 #102c37,12px 19px 30px #102c3760}
.hgr-packet-stars{letter-spacing:.6em;font-size:14px}
.hgr-packet-hanzi{font:700 clamp(63px,17vw,90px)/1.1 "Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif}
.hgr-packet strong{font:700 clamp(19px,5vw,25px)/1.1 Georgia,serif;letter-spacing:.1em}
.hgr-packet-seam{width:calc(100% + 30px);margin:7px -15px 0;border-top:2px dashed #e7bd75}
.hgr-packet-instruction{font-size:9px;letter-spacing:.13em;font-weight:800}
.hgr-helper{font-size:12px;color:#849089;margin:12px 0 15px}
.hgr-actions{display:flex;gap:10px;width:100%;margin-top:auto;align-items:stretch;justify-content:center}
.hgr-actions button{min-height:50px;border-radius:12px;padding:12px 15px;font-size:14px!important;font-weight:850!important;transition:transform .13s ease,background .13s ease;box-shadow:none}
.hgr-actions button:active:not(:disabled){transform:scale(.98)}
.hgr-actions .hgr-main{border:0;background:#b77b3e;color:#fff8e8;flex:1}
.hgr-actions .hgr-main:hover:not(:disabled){background:#9e672f}
.hgr-actions .hgr-secondary{border:1px solid #bed1c6;background:#fffdf7;color:#315d53;flex:0 0 32%}
.hgr-progress{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;font-size:11px;font-weight:900;letter-spacing:.13em;color:#58706b;margin:0 0 9px}
.hgr-dots{display:flex;gap:5px}
.hgr-dots i{display:block;width:19px;height:5px;border-radius:9px;background:#d6dcd2}
.hgr-dots i.seen{background:#92b3a0}
.hgr-dots i.current{background:#b8834a}
.hgr-grade{font-size:11px;letter-spacing:.16em;font-weight:900;color:#557869;margin:5px auto 9px}
.hgr-grade.rare{color:#b37632;animation:hgr-glow .6s ease-out both}
.hgr-card{display:block;flex:none;width:min(260px,78vw);height:clamp(244px,45dvh,352px);border:0;background:transparent;padding:0;margin:auto 0 0;perspective:1000px;touch-action:pan-y;color:#203b46}
.hgr-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.8,.2,1);animation:hgr-pop .32s ease-out both}
.hgr-card.flipped .hgr-card-inner{transform:rotateY(180deg)}
.hgr-card-side{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px 17px;border:3px solid var(--hgr-border,#b4c4b6);border-radius:21px;background:var(--hgr-bg,#eaf2e9);box-shadow:0 12px 25px #143a4830;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-sizing:border-box}
.hgr-card-side:before{content:"";position:absolute;inset:16px;border:1px solid #6b887b55;border-radius:12px;pointer-events:none}
.hgr-card-side.back{transform:rotateY(180deg)}
.hgr-tier-C{--hgr-border:#b9c6b8;--hgr-bg:#f0f3ed}
.hgr-tier-UC{--hgr-border:#81b59a;--hgr-bg:#e5f1e9}
.hgr-tier-R{--hgr-border:#7ea8dc;--hgr-bg:#e6effa}
.hgr-tier-SR{--hgr-border:#af88d5;--hgr-bg:#f0e9f9}
.hgr-tier-SSR{--hgr-border:#e0b15d;--hgr-bg:#fcf1da}
.hgr-tier-UR{--hgr-border:#d17e9d;--hgr-bg:#fbe8ed}
.hgr-tier-LR{--hgr-border:#dfb254;--hgr-bg:linear-gradient(135deg,#ffefc0,#f8e5fa,#e4f2fd)}
.hgr-tier-LR .hgr-card-side{background:linear-gradient(135deg,#ffefc0,#f8e5fa,#e4f2fd);box-shadow:0 0 0 4px #e4bb6440,0 18px 33px #8a63364d}
.hgr-card-meta{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;gap:7px;color:#618075;font-size:13px;letter-spacing:.08em;font-weight:900}
.hgr-card-meta small{font-size:10px;letter-spacing:0}
.hgr-hanzi{position:relative;font:750 clamp(35px,10vw,49px)/1.22 "Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;color:#1c554f;word-break:break-word;overflow-wrap:anywhere}
.hgr-pinyin{font-size:15px;color:#54736c;line-height:1.5}
.hgr-turn-prompt{position:absolute;bottom:19px;font-size:11px;color:#7d8a83}
.hgr-hanzi-back{font:750 30px "Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;color:#255a52}
.hgr-english{font-size:clamp(14px,4vw,18px);font-weight:750;line-height:1.43;color:#3e5c60;max-height:48%;overflow:auto;overflow-wrap:anywhere}
.hgr-celebrate{font-size:40px;color:#d3a058;line-height:1}
.hgr-completed{padding-top:16px}
.hgr-completed h2{margin-top:1px}
.hgr-completed>p{margin-bottom:10px}
.hgr-results{display:flex;flex-direction:column;gap:6px;width:100%;min-height:0;overflow-y:auto;flex:1;margin:0 0 12px}
.hgr-result{display:grid;grid-template-columns:44px minmax(68px,auto) minmax(0,1fr) 39px;align-items:center;text-align:left;gap:8px;min-height:62px;padding:8px 9px;border:1px solid var(--hgr-border);background:var(--hgr-bg);border-radius:10px;width:100%}
.hgr-result b{font-size:11px;color:#987345}
.hgr-result strong{font:750 18px "Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;color:#2c5a51;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hgr-result span{min-width:0;color:#516d67;font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.hgr-result small{font-size:9px;font-weight:900;color:#9b784a;text-align:right}
.hgr-refill{margin-top:7px!important;font-size:11px!important}
@keyframes hgr-pop{from{opacity:.2;transform:translateY(25px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hgr-glow{0%{opacity:.2;transform:scale(.85)}80%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@media(max-width:420px){.hgr-overlay{padding:6px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}.hgr-panel{border-radius:19px;max-height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.hgr-stage{padding:16px 14px 18px}.hgr-packet{height:clamp(205px,34dvh,250px)}.hgr-card{height:clamp(252px,46dvh,350px)}.hgr-result{grid-template-columns:35px minmax(67px,auto) minmax(0,1fr) 28px;gap:6px;padding:7px 8px}.hgr-result strong{font-size:16px}.hgr-actions button{padding:12px 8px}}
@media(max-height:660px){.hgr-stage{padding-top:11px;padding-bottom:12px}.hgr-packet{height:205px}.hgr-card{height:250px}.hgr-helper{margin:7px 0}.hgr-opening h2{font-size:25px}.hgr-completed .hgr-result{min-height:51px}}
@media(prefers-reduced-motion:reduce){.hgr-packet,.hgr-card-inner,.hgr-grade,.hgr-actions button{animation:none!important;transition:none!important}}