/* Hanzi Gacha — Inkbound / original responsive game UI */
:root{--hg-ink:#152b38;--hg-muted:#56707c;--hg-paper:#f4f0e7;--hg-line:#d9dacd;--hg-gold:#e5a94c;--hg-teal:#277f78}
body.hg-page{background:#f0ede3;color:var(--hg-ink)}
.hg-page .top{background:#f7f5ec;border-bottom:1px solid #dfded3}
.hg-shell{max-width:1180px;margin:0 auto;padding:35px 20px 75px}
.hg-hero{text-align:center;max-width:790px;margin:0 auto 28px}
.hg-hero .hg-eyebrow{display:inline-flex;align-items:center;gap:9px;letter-spacing:.19em;color:#846a40;font-size:11px;font-weight:900;background:#efe4cb;padding:9px 17px;border-radius:99px}
.hg-hero h1{font-family:Georgia,serif;letter-spacing:-.055em;font-size:clamp(43px,6vw,74px);line-height:1.03;margin:20px 0 15px;color:#203947}
.hg-hero h1 em{font-weight:400;color:#af793b}
.hg-hero>p{font-size:17px;line-height:1.65;color:#54707b;margin:0 auto;max-width:610px}
#hg-app{border:1px solid #d8d9cf;border-radius:22px;background:#fffefa;box-shadow:0 20px 70px rgba(33,60,54,.1);overflow:hidden}
.hg-topline{background:#172c38;color:#f8ead0;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 28px}
.hg-game-name{display:flex;align-items:center;gap:12px}
.hg-mark{font-size:32px;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;background:#dca459;color:#1e343d;border-radius:13px;width:48px;height:48px;display:grid;place-items:center}
.hg-game-name>div:last-child{display:grid;gap:3px}
.hg-game-name span{font-size:10px;letter-spacing:.22em;opacity:.64;font-weight:800}
.hg-game-name strong{font-family:Georgia,serif;font-size:23px;letter-spacing:-.03em}
.hg-meta{display:flex;gap:22px;align-items:center}
.hg-meta>div{display:grid;gap:4px;text-align:right}
.hg-meta span{font-size:10px;color:#a6b6ba;letter-spacing:.08em;text-transform:uppercase}
.hg-meta strong{font-size:19px;color:#eec17e}
.hg-tabs{padding:11px 22px;background:#f8f6ef;border-bottom:1px solid var(--hg-line);display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hg-tabs button{background:transparent;border:1px solid transparent;color:#627482;font:700 14px system-ui;cursor:pointer;border-radius:10px;padding:13px 12px;transition:background .2s,color .2s}
.hg-tabs button span{font-size:18px;margin-right:7px}
.hg-tabs button.active{background:#183644;color:#ffe7bc;box-shadow:0 3px 9px #142e3920}
.hg-tabs button:hover:not(.active){background:#eaece3}
.hg-content{padding:30px;min-height:450px}
.hg-section-head{text-align:center;max-width:650px;margin:0 auto 28px}
.hg-overline{font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#a16e34}
.hg-section-head h2,.hg-story h2{font-family:Georgia,serif;font-size:clamp(30px,3.8vw,43px);margin:9px 0 13px;line-height:1.14;letter-spacing:-.04em}
.hg-section-head p,.hg-story p{font-size:15px;color:var(--hg-muted);line-height:1.7;margin:0}
#hg-app button{font:inherit;cursor:pointer}
#hg-app button:disabled{opacity:.4;cursor:not-allowed}
#hg-app button:focus-visible{outline:3px solid #e0a85e;outline-offset:3px}
.hg-primary,#hg-app .hg-primary{display:inline-flex;justify-content:center;align-items:center;border:none;background:#b77837;color:#fffaf0;font-weight:900;border-radius:11px;padding:13px 22px;box-shadow:0 5px 0 #84542a;transition:transform .16s,box-shadow .16s}
#hg-app .hg-primary:hover:not(:disabled){background:#9c642d;transform:translateY(2px);box-shadow:0 3px 0 #84542a}
.hg-story{border-radius:17px;background:linear-gradient(128deg,#edf2e8,#f5e8d6);padding:25px 30px;margin-bottom:20px}
.hg-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hg-chapter{background:#fff;border:1px solid #dbdcd3;border-radius:17px;padding:18px;display:flex;flex-direction:column;gap:12px;min-height:286px;box-shadow:0 8px 18px #16394707}
.hg-chapter.locked{filter:grayscale(.85);opacity:.72;background:#f4f5f0}
.hg-chapter-no{font-weight:900;font-size:14px;color:#956c3e;display:flex;justify-content:space-between}
.hg-chapter-no span{letter-spacing:.1em;font-size:10px}
.hg-chapter-glyph{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;font-size:67px;color:#3a7066;line-height:1}
.hg-chapter h3{font-family:Georgia,serif;font-size:20px;line-height:1.15;margin:0 0 7px}
.hg-chapter p{font-size:13px;line-height:1.55;color:#587079;margin:0 0 8px}
.hg-chapter small{font-size:11px;color:#977749}
.hg-chapter button{background:#213d49;color:#fff;border:none;border-radius:9px;padding:11px 14px;font-weight:800;margin-top:auto;align-self:stretch}
.hg-chapter button:hover:not(:disabled){background:#34766d}
.hg-hint{border-radius:12px;padding:17px 19px;margin-top:22px;color:#59707a;background:#eef3ef;font-size:14px;line-height:1.6;border-left:4px solid #79b4a0}
.hg-hint strong{color:#1a5a51}
.hg-battle{max-width:1000px;margin:0 auto}
.hg-arena{min-height:234px;border-radius:20px;color:#f8eacd;background:radial-gradient(circle at 17% 45%,#386e64,#203e4b 60%,#172936);padding:25px;display:flex;gap:27px;align-items:center;box-shadow:inset 0 0 0 1px #ffffff1a;position:relative;overflow:hidden}
.hg-arena:before{content:"✦ ✧ ✧ ✦";position:absolute;top:-32px;right:8%;opacity:.12;font-size:160px;white-space:nowrap}
.hg-boss-portrait{width:165px;height:165px;flex:0 0 auto;border:2px solid #d2b07699;background:radial-gradient(circle,#456b58,#1c3844);border-radius:25px;display:grid;place-items:center;position:relative;transform:rotate(-2deg);box-shadow:0 12px 25px #07191f70}
.hg-boss-portrait span{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;font-size:104px;line-height:1;color:#f0c782;filter:drop-shadow(0 5px 8px #07191f)}
.hg-boss-portrait i{position:absolute;font-size:29px;top:8px;right:13px;color:#eec67c}
.hg-boss-side{flex:1;min-width:0;position:relative;z-index:1}
.hg-boss-side .hg-overline{color:#eac58f}
.hg-boss-side h2{font-family:Georgia,serif;font-size:clamp(24px,3vw,35px);margin:9px 0 20px;line-height:1.13}
.hg-stat-line strong{display:block;font-size:12px;margin-bottom:9px}
.hg-bar{height:11px;background:#172b3440;border-radius:99px;overflow:hidden}
.hg-bar span{display:block;height:100%;background:linear-gradient(90deg,#e5a14e,#f4d387);border-radius:99px;transition:width .25s}
.hg-intent{background:#264e50;border:1px solid #76a09b;display:inline-flex;border-radius:9px;padding:9px 12px;margin-top:13px;font-size:13px;font-weight:700;color:#d4f2e9}
.hg-intent.danger{background:#613d36;border-color:#d59979;color:#ffe0c2}
.hg-player-hud{display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center;border:1px solid #d7dfd8;border-radius:13px;background:#f1f5ef;margin:15px 0 26px;padding:15px 20px}
.hg-player-stat{font-size:12px;font-weight:900;color:#4f6c68}
.hg-player-stat>strong{font-size:15px;color:#1c5550;display:block;margin:6px 0}
.hg-player-stat .hg-bar{height:8px}
.hg-player-stat .hg-bar span{background:linear-gradient(90deg,#54a997,#95cbb2)}
.hg-player-stat:last-child{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hg-player-stat:last-child strong{color:#2f6960}
.hg-hand-head{text-align:center}
.hg-hand-head h3{font-family:Georgia,serif;margin:0 0 5px;font-size:25px}
.hg-hand-head p{font-size:13px;color:var(--hg-muted);margin:0 0 20px}
.hg-hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.hg-card-button{border:0;background:transparent;padding:0;text-align:inherit;min-width:0;border-radius:15px}
.hg-card-button:hover:not(:disabled) .hg-card{transform:translateY(-6px);box-shadow:0 18px 32px #18374435}
.hg-card{background:#f7f5e9;border:2px solid #c8c3b1;border-radius:14px;min-height:206px;padding:13px;position:relative;display:flex;flex-direction:column;align-items:center;overflow:hidden;box-shadow:0 7px 18px #16334415;transition:transform .2s,box-shadow .2s}
.hg-card:before{content:"";width:160px;height:160px;border:1px solid currentColor;opacity:.11;border-radius:50%;position:absolute;top:28px;left:50%;transform:translateX(-50%)}
.hg-card.hg-wood{--el:#3a7f62;color:#3a7f62;background:#eef5e9;border-color:#a3c6aa}
.hg-card.hg-fire{--el:#ac5f43;color:#ac5f43;background:#fff0e6;border-color:#dba489}
.hg-card.hg-water{--el:#347ba3;color:#347ba3;background:#e8f2fa;border-color:#a4c8e0}
.hg-card.hg-light{--el:#9e803b;color:#9e803b;background:#fbf4dc;border-color:#dfca86}
.hg-card.hg-spirit{--el:#785c9d;color:#785c9d;background:#f3ecf9;border-color:#c7b4d9}
.hg-card.hg-earth{--el:#88724d;color:#88724d;background:#f2efe6;border-color:#c7b899}
.hg-card.hg-rare{border-width:3px;box-shadow:0 4px 15px #b1813930}
.hg-card-top{width:100%;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.11em;font-size:9px;font-weight:900;color:var(--el);position:relative}
.hg-glyph{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;font-size:82px;line-height:1.2;font-weight:600;z-index:1}
.hg-card-name{color:#293d43;font-size:14px;font-weight:900;margin-top:4px}
.hg-card-sub{color:#526a6d;font-size:11px;line-height:1.45;text-align:center;min-height:30px;margin-top:5px}
.hg-mastery{font-size:10px;border-radius:20px;background:#ffffff99;padding:4px 7px;font-weight:800;margin-top:auto}
.hg-battle-actions{display:flex;justify-content:center;gap:12px;margin:22px 0 0;flex-wrap:wrap}
.hg-battle-actions>button:not(.hg-primary),.hg-actions>button:not(.hg-primary){border:1px solid #b8c7c1;background:#fff;border-radius:10px;padding:12px 19px;font-weight:800;color:#3e6762}
.hg-question{margin:0 auto;padding:15px 0 9px;max-width:640px;text-align:center}
.hg-question-char{width:125px;height:125px;display:grid;place-items:center;margin:12px auto;border-radius:19px;border:2px solid #d4b87d;background:#faf2de}
.hg-question-char .hg-glyph{font-size:83px;color:#2c5b58}
.hg-question h3{font-family:Georgia,serif;font-size:26px;margin:10px 0 17px}
.hg-answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hg-answer-grid button{background:#eef4ef;color:#1b4d4a;border:1px solid #b6cbbf;border-radius:10px;padding:20px 8px;font-size:17px!important;font-weight:900!important;min-height:68px}
.hg-answer-grid button:hover{background:#deebe2}
.hg-answer-grid small{display:inline-flex;align-items:center;justify-content:center;background:#cfdfd2;width:22px;height:22px;border-radius:6px;font-size:11px;margin-right:10px}
.hg-question>p{font-size:12px;color:#607578;margin:17px auto}
.hg-pack-scene{display:flex;justify-content:center;align-items:center;gap:40px;background:radial-gradient(circle at 18% 45%,#456e68,#172f3e);color:#f7e6c3;padding:40px;border-radius:19px;min-height:292px}
.hg-pack-graphic{width:205px;height:260px;flex:0 0 auto;border:3px solid #d6a45d;border-radius:13px;background:repeating-linear-gradient(135deg,#21444b,#21444b 16px,#234a4d 16px,#234a4d 18px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:11px 14px 0 #142a35,0 20px 40px #071a24;transform:rotate(-6deg);position:relative}
.hg-pack-graphic:after{content:"";position:absolute;inset:9px;border:1px solid #d9b66e80;border-radius:6px}
.hg-pack-seal{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;font-size:68px;color:#f2c179}
.hg-pack-title{font-family:Georgia,serif;font-size:24px;line-height:1.1;text-align:center;letter-spacing:.04em}
.hg-pack-graphic>span{font-size:10px;letter-spacing:.16em;margin-top:19px}
.hg-pack-copy{max-width:350px}
.hg-pack-copy .hg-overline{color:#e7be82}
.hg-pack-copy h3{font:34px Georgia,serif;line-height:1.17;margin:12px 0}
.hg-pack-copy p{line-height:1.6;color:#c4d1cd}
.hg-pack-copy button{margin-top:12px}
.hg-small{font-size:12px!important}
.hg-reveal{margin:28px 0 0;text-align:center;animation:hg-rise .4s ease-out}
.hg-reveal h3{font:27px Georgia,serif}
.hg-reveal-cards{display:grid;grid-template-columns:repeat(3,minmax(0,185px));justify-content:center;gap:18px;margin:22px auto}
.hg-new{display:inline-block;font-size:10px;letter-spacing:.1em;font-weight:900;color:#267c6a;margin-bottom:8px}
.hg-recipe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hg-recipe{border:1px solid #d8dbce;border-radius:14px;padding:18px;background:#fbfaf5;min-width:0}
.hg-recipe.ready{border:2px solid #b5a064;background:#fff9e8}
.hg-recipe-formula{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.hg-recipe-formula span{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;font-size:37px;font-weight:700;color:#315f59}
.hg-recipe-formula b{font-size:18px;color:#aa8c59}
.hg-recipe-formula .hg-silhouette{color:#b3b4aa}
.hg-recipe h3{margin:0 0 8px;font-size:18px}
.hg-recipe p{font-size:13px;line-height:1.6;min-height:45px;color:#64767c;margin:0 0 16px}
.hg-recipe-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hg-recipe-foot small{font-size:10px;color:#7f826e;font-weight:900;letter-spacing:.07em}
.hg-recipe-foot button{border:none;background:#1f645b;color:#fff;border-radius:8px;padding:9px 12px;font-size:12px!important;font-weight:800!important}
.hg-codex-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.hg-codex-unknown{text-align:center;padding:25px;color:#849097;font-size:13px}
.hg-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:18px 0}
.hg-outcome{border-radius:20px;padding:25px;text-align:center;background:#eaf4eb;border:1px solid #b8d5ba;margin:0 0 25px}
.hg-outcome.lose{background:#f9eee8;border-color:#e2c1b1}
.hg-outcome-icon{font-size:42px;color:#b98743}
.hg-outcome h2{font:32px Georgia,serif;margin:8px 0}
.hg-outcome p{max-width:600px;color:#516975;margin:0 auto 10px;line-height:1.6}
.hg-outcome .hg-reward{font-weight:900;color:#9e712a}
.hg-toast{margin:0 0 17px;border:1px solid #bed4ca;background:#eaf4ed;border-radius:10px;padding:12px 16px;color:#315d55;font-size:14px;font-weight:700}
.hg-toast.warn{background:#fff0df;color:#8c5527;border-color:#ecd0af}
.hg-bottom{border-top:1px solid #e2e4da;background:#f9faf5;padding:14px 27px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#728183;font-size:12px}
.hg-bottom button{border:none;background:transparent;text-decoration:underline;text-underline-offset:3px;color:#506f6c;font-size:12px!important}
.hg-help{background:#fbf7ea;padding:23px 34px;border-top:1px solid #ded9be}
.hg-help h3{font:25px Georgia,serif;margin:0 0 8px}
.hg-help li{line-height:1.8;padding-left:4px}
.hg-help p{line-height:1.5}
.hg-after{max-width:780px;margin:38px auto 0;color:#5c7177;line-height:1.7}
.hg-after h2{font:29px Georgia,serif;color:#233c46}
.hg-after a{text-decoration:underline;color:#296d67}
@keyframes hg-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.hg-topline{flex-direction:column;align-items:stretch}.hg-meta{justify-content:space-around;gap:12px}.hg-meta>div{text-align:center}.hg-chapters,.hg-recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hg-codex-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:590px){.hg-shell{padding:22px 10px 50px}.hg-hero h1{font-size:43px}.hg-hero>p{font-size:14px}.hg-content{padding:17px 12px}.hg-topline{padding:14px}.hg-tabs{gap:3px;padding:8px}.hg-tabs button{font-size:11px!important;padding:10px 3px}.hg-tabs button span{font-size:15px;margin-right:2px}.hg-game-name strong{font-size:20px}.hg-meta strong{font-size:17px}.hg-chapters{grid-template-columns:1fr}.hg-chapter{min-height:auto;display:grid;grid-template-columns:80px 1fr;gap:9px}.hg-chapter-no{grid-column:1/-1}.hg-chapter-glyph{font-size:67px;grid-row:2}.hg-chapter>div:nth-of-type(3){grid-column:2;grid-row:2}.hg-chapter button{grid-column:1/-1}.hg-arena{padding:15px;gap:13px;min-height:164px}.hg-boss-portrait{width:86px;height:105px;border-radius:14px}.hg-boss-portrait span{font-size:65px}.hg-boss-side h2{font-size:22px;margin:7px 0 10px}.hg-overline{font-size:9px}.hg-intent{font-size:11px;padding:7px;margin-top:10px}.hg-player-hud{grid-template-columns:1fr;gap:8px;padding:12px}.hg-player-stat:last-child{justify-content:space-between;gap:8px;font-size:11px}.hg-hand{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.hg-card{min-height:166px;padding:10px}.hg-glyph{font-size:66px}.hg-card-sub{font-size:10px}.hg-card-name{font-size:12px}.hg-answer-grid{grid-template-columns:1fr;gap:9px}.hg-answer-grid button{min-height:54px;padding:12px;font-size:17px!important}.hg-question-char{height:95px;width:95px}.hg-question-char .hg-glyph{font-size:62px}.hg-question h3{font-size:21px}.hg-pack-scene{padding:28px 13px;flex-direction:column;gap:28px}.hg-pack-graphic{width:169px;height:199px}.hg-pack-title{font-size:20px}.hg-pack-copy{text-align:center}.hg-pack-copy h3{font-size:28px}.hg-reveal-cards{gap:5px;grid-template-columns:repeat(3,minmax(0,1fr))}.hg-reveal-cards .hg-card{min-height:155px;padding:5px}.hg-reveal-cards .hg-glyph{font-size:54px}.hg-reveal-cards .hg-card-sub{font-size:9px}.hg-reveal-cards .hg-card-top{font-size:8px}.hg-recipe-grid{grid-template-columns:1fr}.hg-recipe p{min-height:0}.hg-codex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hg-bottom{padding:12px;flex-wrap:wrap;justify-content:center}.hg-bottom span{order:3;width:100%;text-align:center}.hg-story{padding:18px}.hg-story h2{font-size:30px}.hg-battle-actions{gap:8px}.hg-battle-actions button{flex:1}}
@media(prefers-reduced-motion:reduce){.hg-card,.hg-primary{animation:none!important;transition:none!important}.hg-reveal{animation:none}}

.hg-boss-effect{margin-top:7px;background:#f7e7b61c;border:1px solid #bfb88588;color:#f4ddb2;padding:7px 10px;border-radius:9px;font-size:12px;display:inline-flex;gap:6px;align-items:center;margin-right:8px}
.hg-mechanic{font-size:12px!important;background:#f6f0da;border-left:3px solid #bda36f;padding:9px 10px;margin:8px 0!important;border-radius:5px;color:#6d644e!important}
.hg-deck-count{display:inline-block;font-weight:900;color:#286860!important;background:#e8f3ed;padding:8px 14px;border-radius:99px;margin-top:15px!important;font-size:13px!important}
.hg-deck-tag{display:block;text-align:center;color:#526e71;background:#e9ecde;border:1px solid #d0d8ca;padding:7px 6px;border-radius:0 0 11px 11px;font-size:12px;font-weight:800}
.hg-deck-tag.selected{background:#266a60;color:#fff;border-color:#266a60}
.hg-codex-grid .hg-card-button{display:block}
.hg-codex-grid .hg-card-button .hg-card{border-radius:12px 12px 0 0}


/* Words Gacha v2: collection-first style, simplified-Chinese typeface. */
.hg-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.hg-homepanel{border-radius:19px;background:radial-gradient(circle at 25% 38%,#416c64,#203b4a 66%,#192d3a);padding:30px;color:#f5e9d2;text-align:center}
.hg-homepanel .hg-overline{color:#edd196}
.hg-homepanel h2{font-family:Georgia,serif;color:#fff4dc;font-size:39px;margin:9px 0 5px;letter-spacing:-.04em}
.hg-homepanel>p{max-width:620px;margin:0 auto;color:#e4e3d2;line-height:1.6}
.hg-wordpack{display:flex;align-items:center;justify-content:center;gap:45px;padding:31px 0 10px}
.hg-wpack-art{width:200px;height:260px;flex:none;background:repeating-linear-gradient(135deg,#18383c,#18383c 18px,#24504b 19px,#24504b 22px);border:3px solid #e5bb6d;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transform:rotate(-7deg);box-shadow:12px 11px 0 #0b2830,15px 18px 32px #081f2bbb}
.hg-wpack-art:after{content:"";border:1px solid #eac78b99;position:absolute;inset:10px;border-radius:8px;pointer-events:none}
.hg-wpack-art span{font-size:80px;line-height:1.15;color:#edc07a;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif}
.hg-wpack-art strong{font:27px/1.09 Georgia,serif;letter-spacing:.09em;color:#ffead0}
.hg-wpack-art small{letter-spacing:.15em;font-size:9px;margin-top:18px;color:#e9cd95}
.hg-wpack-actions{max-width:350px;text-align:left}
.hg-pack-count{font:bold 29px Georgia,serif;margin-bottom:17px;color:#ffe3aa}
.hg-wpack-actions p{font-size:13px;line-height:1.7;color:#bdcfc7;margin:18px 0}
.hg-wpack-actions .hg-overline{font-size:10px}
.hg-revealed{margin:29px 0 0;text-align:center;animation:hg-rise .35s ease-out}
.hg-revealed h2{font:32px Georgia,serif;margin:7px 0 17px}
.hg-word-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;align-items:stretch}
.hg-wcard{background:var(--card-bg,#f5f3e9);color:#203f43;border:2px solid var(--card-border,#c0cfc9);border-radius:15px;min-width:0;min-height:232px;padding:11px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;box-shadow:0 5px 14px #1c384517;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.hg-wcard:before{content:"";width:150px;height:150px;position:absolute;top:33px;left:50%;transform:translateX(-50%);border:1px solid currentColor;opacity:.09;border-radius:50%;pointer-events:none}
.hg-wcard:hover{transform:translateY(-4px);box-shadow:0 12px 26px #163b3a36}
.hg-wcard.hg-tier-C{--card-bg:#f1f3ee;--card-border:#b7c3b6}
.hg-wcard.hg-tier-UC{--card-bg:#e8f2ec;--card-border:#83b9a0}
.hg-wcard.hg-tier-R{--card-bg:#e8eef8;--card-border:#80a7db}
.hg-wcard.hg-tier-SR{--card-bg:#eee8f8;--card-border:#ac86d2}
.hg-wcard.hg-tier-SSR{--card-bg:#faf0d9;--card-border:#ddae59}
.hg-wcard.hg-tier-UR{--card-bg:#f6e5e8;--card-border:#ce839a}
.hg-wcard.hg-tier-LR{--card-bg:linear-gradient(135deg,#f5e5b8,#f2ddf7,#deedf5);--card-border:#c6954b;background:linear-gradient(135deg,#f6e6b6,#f1e1f4,#d9eff3)}
.hg-wcard-top{width:100%;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:900;color:#4c6a6b}
.hg-wcard-top small{font-size:9px;letter-spacing:0;font-weight:800}
.hg-tier-SR .hg-wcard-top{color:#7e4eb1}
.hg-tier-SSR .hg-wcard-top{color:#9e6e23}
.hg-tier-UR .hg-wcard-top{color:#a74c68}
.hg-tier-LR .hg-wcard-top{color:#91672a}
.hg-wglyph{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;font-weight:750;font-size:clamp(23px,3vw,40px);line-height:1.2;letter-spacing:.02em;flex:1;min-height:57px;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;word-break:break-word;margin:7px 0 3px;color:#1e5252}
.hg-wpron{color:#557070;font-size:11px;min-height:18px;line-height:1.4}
.hg-wmeaning{color:#496066;font-size:11px;line-height:1.42;min-height:32px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;overflow-wrap:anywhere}
.hg-wcopies{position:absolute;top:29px;right:7px;font-size:9px;color:#475f52;background:#ffffffb5;border-radius:12px;padding:2px 6px}
.hg-pack-found>span{font-size:10px;letter-spacing:.1em;color:#187661;font-weight:900}
.hg-pack-found .hg-wcard{margin-top:7px;width:100%}
.hg-missions{margin:28px auto 0;border-radius:14px;padding:24px;background:#f6f6f0;border:1px solid #e0e5d8}
.hg-missions h3{font:25px Georgia,serif;margin:0 0 14px}
.hg-missions h3 small{font:12px system-ui;color:#75867c}
.hg-mission-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hg-mission-list>div{border:1px solid #d4ded4;background:#fff;border-radius:11px;padding:13px;display:flex;flex-direction:column;gap:9px}
.hg-mission-list>div>div{display:flex;flex-direction:column;gap:5px}
.hg-mission-list strong{font-size:13px}
.hg-mission-list small{color:#80908b}
.hg-mission-list button{border:0;border-radius:7px;background:#245d52;color:#fff;font-size:12px!important;font-weight:800!important;padding:9px}
.hg-collection-tools{display:flex;gap:10px;align-items:center;margin:0 0 14px}
.hg-collection-tools label{font-size:12px;font-weight:800;white-space:nowrap}
.hg-collection-tools input{flex:1;min-width:40px;padding:12px 15px;border-radius:10px;border:1px solid #b6c9bf;font-size:14px}
.hg-collection-tools span{font-size:12px;color:#799084}
.hg-team-summary{padding:12px 16px;background:#e6f0e7;border-radius:11px;font-size:13px;color:#3e665c;margin-bottom:15px}
.hg-team-summary span{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;margin:2px 4px;font-size:17px;color:#1f6157;font-weight:800}
.hg-battle-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.hg-battle-modes article{border:1px solid #cddad1;border-radius:14px;padding:19px;background:#edf3ed;min-height:201px;display:flex;flex-direction:column}
.hg-battle-modes strong{font-size:16px;color:#245249}
.hg-battle-modes p{font-size:13px;color:#5d7371;line-height:1.5;flex:1}
.hg-battle-modes button,.hg-battle-roster button,.hg-detail-info button{border:0;background:#235c52;color:#fff;padding:12px;border-radius:9px;font-weight:800!important}
.hg-battle-roster{margin-top:28px}
.hg-battle-roster h3{font:26px Georgia,serif}
.hg-battle-roster small{font:12px system-ui;color:#8a998d}
.hg-battle-result{padding:22px;margin:22px 0 0;border:2px solid #d5bd81;border-radius:15px;background:#fbf4de;text-align:center}
.hg-battle-result h2{font:35px Georgia,serif;margin:9px 0}
.hg-battle-result p{color:#66756f;line-height:1.6}
.hg-round-results{display:grid;gap:7px}
.hg-round-results>div{border-bottom:1px solid #e9dcb4;padding:9px;display:grid;grid-template-columns:1fr 1fr 1fr 52px;gap:8px;align-items:center;font-size:13px}
.hg-round-results strong{color:#277b65}
.hg-pagination,.hg-empty{text-align:center;margin:20px;color:#738380;font-size:13px}
.hg-overlay{position:fixed;inset:0;z-index:500;background:#081b26b9;display:flex;align-items:center;justify-content:center;padding:17px}
.hg-detail{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr);gap:25px;align-items:center;padding:30px;max-width:670px;max-height:90vh;overflow:auto;background:#fffdf5;border-radius:22px;box-shadow:0 25px 70px #061a25aa;width:100%}
.hg-detail-x{position:absolute;right:14px;top:10px;border:none;background:transparent;color:#254d4e;font-size:28px!important;padding:3px 8px}
.hg-wcard-large{pointer-events:none;max-width:205px;width:100%}
.hg-wcard-large .hg-wglyph{font-size:38px}
.hg-detail-info{min-width:0}
.hg-detail-info h2{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:32px;margin:0 0 10px;overflow-wrap:anywhere}
.hg-detail-info p{font-size:13px;color:#607874;line-height:1.6}
.hg-detail-info .hg-meaning{font-size:17px;color:#304951}
.hg-detail-metrics{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}
.hg-detail-metrics span{border-radius:20px;padding:5px 9px;background:#eaf0e9;color:#37645b;font-size:11px;font-weight:800}
.hg-dictionary-link{display:block;text-decoration:none;padding:13px;background:#c0904e;border-radius:9px;color:#fff!important;font-weight:900;font-size:13px;text-align:center;margin-bottom:9px}
.hg-detail-info button{width:100%}
.hg-load-error{text-align:center;padding:50px 20px}
@media(max-width:760px){.hg-word-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hg-mission-list{grid-template-columns:1fr}.hg-battle-modes{grid-template-columns:1fr}.hg-battle-modes article{min-height:0}.hg-battle-modes p{flex:auto}.hg-wordpack{gap:22px}.hg-detail{grid-template-columns:175px 1fr}}
@media(max-width:510px){.hg-word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hg-wordpack{flex-direction:column;padding:30px 0 0}.hg-wpack-art{width:164px;height:206px}.hg-wpack-art span{font-size:59px}.hg-wpack-art strong{font-size:22px}.hg-wpack-actions{text-align:center}.hg-homepanel{padding:25px 16px}.hg-homepanel h2{font-size:32px}.hg-word-grid.hg-reveal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hg-wcard{min-height:207px}.hg-wglyph{font-size:30px}.hg-detail{grid-template-columns:1fr;gap:16px;padding:28px 20px;justify-items:center}.hg-wcard-large{min-height:198px}.hg-detail-info{width:100%}.hg-collection-tools{flex-wrap:wrap}.hg-collection-tools input{order:3;flex-basis:100%}.hg-round-results>div{grid-template-columns:1fr 1fr;gap:4px}.hg-hero>p{font-size:14px}.hg-tabs button{font-size:12px!important}.hg-topline .hg-game-name strong{font-size:18px}}


/* Collection-to-battle 360-degree UX review, Nov 2026 */
.hg-compact-hero{padding-bottom:19px}
.hg-compact-hero .hg-wordpack{padding-top:21px;padding-bottom:8px}
.hg-compact-hero .hg-homepanel{margin:0}
.hg-compact-hero .hg-pack-next{margin-top:12px;font-size:12px;color:#edd3a8}
.hg-compact-hero .hg-pack-next strong{font-size:15px;color:#fff4c1}
.hg-compact-hero .hg-primary{min-height:54px;width:100%;font-size:16px!important;font-weight:900!important}
.hg-last-pack{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eaf3eb;border:1px solid #cadae0;border-radius:14px;padding:13px 16px;margin:18px 0}
.hg-last-pack p{font-size:12px;margin:5px 0 0;color:#627d77}
.hg-last-words{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.hg-last-words button{border:1px solid #b9d0c2;border-radius:8px;padding:8px 10px;background:#fff;color:#29675c;font:700 15px "Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif}
.hg-last-words button small{font:700 9px system-ui;color:#8d997f}
.hg-tight-head{margin-bottom:18px;max-width:750px}
.hg-tight-head h2{margin:6px 0}
.hg-tight-head p{font-size:13px;line-height:1.55}
.hg-collection-stat{border-radius:13px;background:#eaf0e6;border:1px solid #d4dfcd;padding:14px 17px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:12px;font-weight:850;color:#577164;margin-bottom:17px}
.hg-collection-stat strong{color:#1c6553;font-size:17px}
.hg-collection-stat>div{grid-column:1/-1;height:10px;background:#cbdccc;border-radius:10px;overflow:hidden}
.hg-collection-stat>div i{display:block;background:#4b9a7e;height:100%;border-radius:10px}
.hg-rarity-overview{border:1px solid #d8e0d5;border-radius:14px;background:#f6f8f3;padding:14px;margin-bottom:18px}
.hg-rarity-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:#375a53}
.hg-rarity-title button{background:transparent;color:#376e60;border:0;text-decoration:underline;font-weight:700;font-size:12px}
.hg-tier-metrics{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hg-tier-metric{min-width:0;background:#fff;border:1px solid #dae3db;border-radius:9px;padding:9px 6px;text-align:center;display:flex;flex-direction:column;align-items:stretch;gap:5px;color:#477163;cursor:pointer}
.hg-tier-metric.selected{outline:2px solid #397d67;background:#e5f2e7}
.hg-tier-metric strong{font-size:12px;color:#4c6b62}
.hg-tier-metric span{font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hg-tier-metric i{height:5px;border-radius:4px;background:#dce7df;overflow:hidden}
.hg-tier-metric i b{display:block;height:100%;border-radius:4px;background:#4f9682}
.hg-advanced-tools{margin-bottom:9px}
.hg-select-row{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:7px}
.hg-select-row label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:850;color:#5c746b}
.hg-select-row select{min-width:0;max-width:205px;border:1px solid #c2d3c7;background:#fff;border-radius:9px;padding:10px;color:#3d6559;font-size:12px}
.hg-collection-meta{display:flex;justify-content:space-between;align-items:center;color:#809088;font-size:11px;margin:13px 0 10px}
.hg-collection-grid{min-height:0}
.hg-wcard.hg-wcard-tile .hg-wcard-top{min-height:20px}
.hg-page-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0}
.hg-page-nav button,.hg-empty-collection button{border:1px solid #b8d2c4;background:#eff5ef;color:#2e6d5d;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:800}
.hg-page-nav button:disabled{opacity:.38;cursor:not-allowed}
.hg-page-nav span{font-size:12px;color:#6d8277}
.hg-empty-collection{text-align:center;background:#edf4ec;border:1px solid #cbdccf;border-radius:12px;padding:20px;color:#526b60;margin:16px 0}
.hg-empty-collection h3{margin:0;font:24px Georgia,serif}
.hg-empty-collection p{font-size:13px;line-height:1.6}
.hg-data-backup{display:flex;justify-content:space-between;align-items:center;gap:17px;border:1px solid #d8e2d4;border-radius:13px;margin:26px 0 0;padding:19px;background:#f6f8f3}
.hg-data-backup strong{font-size:14px;color:#3e6357}
.hg-data-backup p{margin:7px 0 0;font-size:12px;line-height:1.5;color:#789083}
.hg-data-buttons{display:flex;gap:6px;flex:none}
.hg-data-buttons button{border:1px solid #b8cec2;background:#fff;color:#3b6a5d;border-radius:9px;padding:11px 12px;font-size:12px;font-weight:800}
.hg-learning-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}
.hg-learning-actions button{border:1px solid #bdd0c6!important;background:#eef4e9!important;color:#315f54!important;padding:11px 7px!important;border-radius:10px!important;font-size:12px!important}
.hg-learning-actions button[aria-pressed=true]{background:#fff0c9!important;color:#806031!important}
.hg-detail-info .hg-dictionary-link{margin-bottom:8px}
.hg-equip-button{background:#206a55!important;font-size:13px!important}
.hg-dialog-tip{font-size:11px;color:#a06b35;line-height:1.5}
.hg-team-panel{display:flex;gap:13px;align-items:center;justify-content:space-between;background:#eaf2e9;border:1px solid #c7dccc;border-radius:13px;padding:15px 18px;margin:15px 0}
.hg-team-panel strong{color:#285f4e;font-size:14px}
.hg-team-panel p{font-size:12px;color:#6b8477;margin:5px 0 0}
.hg-team-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.hg-team-actions button{background:#fff;border:1px solid #b4ccbf;border-radius:9px;padding:11px 12px;color:#356957;font-size:12px;font-weight:850}
.hg-team-actions button:first-child{background:#2a6a57;color:#fff}
.hg-team-actions button:disabled{opacity:.5}
.hg-battle-lineup{margin:15px 0 24px}
.hg-battle-mode-heading{display:flex;align-items:center;justify-content:space-between;margin:23px 0 12px;gap:10px}
.hg-battle-mode-heading strong{font:24px Georgia,serif;color:#285b50}
.hg-battle-mode-heading span{font-size:12px;color:#789082}
.hg-battle-modes article{min-height:194px}
.hg-battle-modes article button{min-height:49px;font-size:13px!important}
.hg-last-battle{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 0;color:#6b817a;font-size:12px}
.hg-last-battle b{color:#336d59}
.hg-last-battle button{border:0;background:transparent;color:#2e735a;text-decoration:underline;font-size:12px}
.hg-toast{position:sticky;top:4px;z-index:20;margin:8px 22px 0;box-shadow:0 4px 16px #142f3510}
@media(max-width:760px){.hg-tier-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.hg-team-panel{align-items:stretch;flex-direction:column}.hg-team-actions{justify-content:stretch}.hg-team-actions button{flex:1}.hg-data-backup{flex-direction:column;align-items:stretch}.hg-data-buttons button{flex:1}}
@media(max-width:510px){.hg-shell{padding-top:11px}.hg-hero{margin-bottom:12px}.hg-hero .hg-eyebrow{font-size:9px;padding:6px 10px;letter-spacing:.08em}.hg-hero h1{font-size:35px!important;margin:8px 0 5px;line-height:1.04}.hg-hero p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px!important;line-height:1.5}.hg-compact-hero h2{font-size:25px}.hg-compact-hero .hg-wordpack{padding-top:11px;gap:13px}.hg-compact-hero .hg-wpack-art{width:108px;height:138px;box-shadow:5px 6px 0 #0b2830}.hg-compact-hero .hg-wpack-art span{font-size:36px}.hg-compact-hero .hg-wpack-art strong{font-size:13px}.hg-compact-hero .hg-wpack-art small{font-size:7px}.hg-compact-hero .hg-wpack-actions{width:100%}.hg-compact-hero .hg-pack-count{font-size:22px;margin:0 0 8px}.hg-compact-hero .hg-wpack-actions p{margin:9px 0 2px;font-size:11px}.hg-compact-hero .hg-pack-next{font-size:11px;margin-top:7px}.hg-last-pack{flex-direction:column;text-align:center}.hg-last-words{justify-content:center}.hg-collection-tools input{font-size:16px}.hg-select-row{flex-direction:column;align-items:stretch}.hg-select-row label{justify-content:space-between}.hg-select-row select{max-width:75%;width:70%;font-size:12px}.hg-tier-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.hg-tier-metric{padding:9px 3px}.hg-data-buttons{flex-wrap:wrap}.hg-learning-actions button{font-size:11px!important}.hg-team-actions{flex-direction:column}.hg-battle-mode-heading{flex-direction:column;align-items:flex-start;gap:4px}.hg-battle-lineup{grid-template-columns:repeat(2,minmax(0,1fr))}.hg-toast{margin:8px 10px 0}}

/* Contextual feedback remains visible after actions even when scrolled. */
.hg-toast{position:fixed!important;top:auto!important;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 32px));margin:0!important;z-index:2000;box-shadow:0 12px 34px #071d2940;pointer-events:none;animation:hg-toast-hide 4s ease forwards}
@keyframes hg-toast-hide{0%,65%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.hg-toast{animation:none}}

/* The pack itself is the primary tactile action, matching the collector mental model. */
.hg-wpack-tap{cursor:pointer!important;color:#f8e1b1!important;appearance:none;transition:transform .2s ease,box-shadow .2s ease!important}
.hg-wpack-tap:hover:not(:disabled){transform:rotate(-4deg) translateY(-5px);box-shadow:12px 16px 0 #0b2830,18px 24px 30px #081f2b77}
.hg-wpack-tap:active:not(:disabled){transform:rotate(-3deg) translateY(-1px) scale(.98)}
.hg-wpack-tap.gold{border-color:#fbe19e;background:repeating-linear-gradient(135deg,#70532e,#70532e 18px,#927235 19px,#927235 22px);box-shadow:0 0 0 4px #f7d57e50,12px 11px 0 #0b2830,0 14px 30px #d6a24b77}
.hg-wpack-tap:disabled{opacity:.6;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.hg-wpack-tap{transition:none!important}}


/* Three pack themes: wide tap targets and visible selected pack (mobile horizontal safe). */
.hg-themed-chooser{display:flex;justify-content:center;gap:9px;margin:18px auto 3px;max-width:720px}
.hg-themed-chooser button{flex:1;min-width:0;border:1px solid #93aa9e;background:#204c50;color:#f0e8d4;padding:13px 9px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:background .15s,border-color .15s}
.hg-themed-chooser button strong{font-size:11px;letter-spacing:.06em;line-height:1.4}
.hg-themed-chooser button small{font-size:10px;color:#b9d0be}
.hg-themed-chooser button.active{border-color:#f1c079;background:#dcb77a;color:#223b40;box-shadow:0 0 0 2px #f1c07944}
.hg-themed-chooser button.active small{color:#3c6358}
.hg-themed-chooser button:focus-visible{outline:3px solid #fff7de;outline-offset:2px}
@media(max-width:510px){.hg-themed-chooser{gap:6px;margin-top:11px;margin-bottom:7px}.hg-themed-chooser button{padding:10px 5px;min-height:57px}.hg-themed-chooser button strong{font-size:9px;letter-spacing:0}.hg-themed-chooser button small{font-size:9px}.hg-compact-hero .hg-wordpack{padding-top:8px}}
@media(prefers-reduced-motion:reduce){.hg-themed-chooser button{transition:none}}


/* Album milestones & bilingual usage context — UX loop v3 */
.hg-album-teaser{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 2px;padding:14px 17px;border-radius:13px;background:#edf3ec;border:1px solid #cbded0}
.hg-album-teaser>div{display:flex;flex-direction:column;gap:4px}
.hg-album-teaser strong{font-size:14px;color:#275e50}
.hg-album-teaser span{color:#6b8378;font-size:12px}
.hg-album-teaser button{flex:none;background:#fff;border:1px solid #a9c5b4;border-radius:9px;padding:11px 13px;color:#28634e;font-size:12px;font-weight:800;cursor:pointer}
.hg-albums{margin:22px 0 24px}
.hg-album-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}
.hg-album-heading h3{font:27px Georgia,serif;color:#285b50;letter-spacing:-.025em;margin:5px 0 5px}
.hg-album-heading p{color:#71877a;font-size:12px;line-height:1.45;margin:0}
.hg-album-heading>strong{white-space:nowrap;border:1px solid #c2d5c8;border-radius:11px;padding:9px 12px;font-variant-numeric:tabular-nums;color:#486f5d;background:#eef5ed;font-size:12px}
.hg-album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hg-album-card{min-width:0;border:1px solid #d4ddd3;background:#fbfbf6;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:11px}
.hg-album-top{display:flex;align-items:flex-start;gap:9px}
.hg-album-emblem{display:grid;flex:none;place-items:center;width:46px;height:52px;border-radius:12px;border:1px solid #b7cfc3;background:#e4f0e5;color:#2b6859;font:750 27px "Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif}
.hg-album-idiom .hg-album-emblem{background:#f6edde;border-color:#d7c3a2;color:#96632e}
.hg-album-slang .hg-album-emblem{background:#f0ebf8;border-color:#d0bde3;color:#7754a3}
.hg-album-top h4{font:750 14px system-ui,-apple-system,sans-serif;margin:2px 0 4px;color:#345c52}
.hg-album-top p{font:11px/1.45 system-ui,-apple-system,sans-serif;margin:0;color:#788c81}
.hg-album-total{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hg-album-total strong{font-size:19px;color:#315e50;font-variant-numeric:tabular-nums}
.hg-album-total span{font-size:10px;color:#819085}
.hg-album-milestones{display:flex;gap:5px}
.hg-album-milestones span{border-radius:30px;background:#edf0e9;padding:6px 9px;color:#89998d;font-size:11px;font-weight:850}
.hg-album-milestones span.claimed{background:#d9eade;color:#28634d}
.hg-album-milestones span.ready{background:#f8e2b2;color:#90621e}
.hg-album-goal{display:flex;flex-direction:column;gap:6px}
.hg-album-goal span{font-size:10px;color:#657c70}
.hg-album-goal>div{height:7px;border-radius:9px;background:#e1e9df;overflow:hidden}
.hg-album-goal i{display:block;height:100%;background:#65a084;border-radius:9px}
.hg-album-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto}
.hg-album-actions button{min-height:38px;border-radius:9px;padding:9px 10px;font-size:11px;font-weight:850;cursor:pointer}
.hg-album-claim{border:0;background:#2e765d;color:white}
.hg-album-browse{border:1px solid #bfd1c1;background:white;color:#316b56}
.hg-album-notready,.hg-album-finished{display:block;text-align:center;padding:8px 6px;color:#7b8f81;font-size:11px}
.hg-album-finished{color:#38785f}
.hg-usage-note{border:1px solid #d9ddce;background:#f8f9ee;border-radius:13px;padding:14px;margin:13px 0 12px}
.hg-usage-title{display:flex;gap:8px;justify-content:space-between;align-items:center;color:#607f66;font-size:10px;font-weight:900;letter-spacing:.05em}
.hg-usage-title span:last-child{font-weight:650;letter-spacing:0;color:#8b9b81}
.hg-usage-zh{font:650 17px/1.65 "Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif!important;color:#285e50!important;margin:11px 0 5px!important}
.hg-usage-en{font-size:13px!important;color:#4b655d!important;line-height:1.55!important;margin:0 0 9px!important}
.hg-usage-tip{font-size:12px!important;color:#8a6b42!important;margin:7px 0!important}
.hg-usage-story{border-top:1px solid #dae1d5;margin-top:11px;padding-top:10px}
.hg-usage-story b{font-size:11px;color:#3b6d58}
.hg-usage-story p{font-size:12px!important;line-height:1.55!important;color:#617467!important;margin:5px 0 10px!important}
.hg-usage-note button{background:#fff!important;border:1px solid #b7d0bd!important;border-radius:9px!important;color:#316f56!important;font-size:12px!important;padding:10px!important;width:100%}
@media(max-width:760px){.hg-album-grid{grid-template-columns:1fr;gap:8px}.hg-album-card{flex-direction:row;flex-wrap:wrap;align-items:center;gap:9px}.hg-album-top{flex:1 1 170px}.hg-album-total{flex:0 1 130px;flex-direction:column;gap:1px}.hg-album-milestones{flex:1 1 110px}.hg-album-goal{flex:1 1 130px}.hg-album-actions{flex:1 1 140px}.hg-album-claim{min-height:40px}}
@media(max-width:510px){.hg-album-heading{align-items:flex-start}.hg-album-heading h3{font-size:22px}.hg-album-heading>strong{font-size:10px;padding:8px}.hg-album-card{display:grid;grid-template-columns:1fr 1fr;gap:9px}.hg-album-top{grid-column:1/-1}.hg-album-total{flex-direction:column;align-items:flex-start}.hg-album-milestones{justify-content:flex-end;align-items:center}.hg-album-goal{grid-column:1/-1}.hg-album-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7px}.hg-album-notready,.hg-album-finished{font-size:10px}.hg-album-teaser{padding:12px;align-items:center}.hg-album-teaser strong{font-size:12px}.hg-album-teaser span{font-size:10px}.hg-album-teaser button{font-size:11px;padding:10px 8px}.hg-usage-note{padding:11px}}