/* AniHoshi — Community hub (board, post, create, My Zone, Super X + shared bits for shop/live).
   Token-only colours (see hoshi.css / cinema.css), 4px corners, compact controls.
   Hooks kept for community.min.js / comments.js live in the Blade overrides. */

/* ============ base ============ */
body.hc-body { --hc-r: 4px; }
.hc { padding-bottom: 64px; }
.hc [hidden], body.hc-body [hidden] { display: none !important; }
.hc p { margin: 0; }
.hc .text-muted { color: var(--hs-tx-4); }
.hc .small { font-size: 12px; }

/* tag hues (identity colours); text tints are mixed with --hs-tx so they read in dark + light */
.t-blue, .zt-blue { --tg: #4DA6FF; }
.t-yellow, .zt-yellow { --tg: #F5B83D; }
.t-green, .zt-green { --tg: #3FCF7A; }
.t-purple, .zt-purple { --tg: #B784F5; }
.t-cyan, .zt-cyan { --tg: #2EC5E8; }
.t-orange, .zt-orange { --tg: #FF8A4C; }
.t-pink, .zt-pink { --tg: #F472C8; }
.t-red, .zt-red { --tg: #FF5C7A; }
.t-sky, .zt-sky { --tg: #5CB8FF; }
.t-lime, .zt-lime { --tg: #9ACD32; }
.t-coral, .zt-coral { --tg: #FF7F6E; }
.t-white, .zt-white { --tg: #94A3B8; }
.hc [class*="zt-"] { color: color-mix(in srgb, var(--tg, var(--hs-tx-3)) 62%, var(--hs-tx)); font-weight: 700; }

/* ============ buttons ============ */
.hc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--hc-r, 4px); border: 1px solid var(--hs-line-2); background: var(--hs-bg-2); color: var(--hs-tx-2); font: 700 12.5px/1 var(--hs-f-body); white-space: nowrap; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.hc-btn i { font-size: 12px; }
body.hc-body .hc-btn:hover { border-color: var(--hs-ac); color: var(--hs-tx); }
.hc-btn-p { background: var(--hs-ac-fill); border-color: var(--hs-ac-fill); color: #fff !important; }
body.hc-body .hc-btn-p:hover { background: var(--hs-ac-fill-h); border-color: var(--hs-ac-fill-h); color: #fff !important; }
.hc-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.hc-btn:disabled, .hc-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.hc-btn .mr-2 { margin: 0; }

/* icon squares + widget headings */
.hc-hi { width: 24px; height: 24px; border-radius: var(--hc-r); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--hs-ac-soft); color: var(--hs-ac); font-size: 11px; }
.hc-hi.is-gold { background: color-mix(in srgb, var(--hs-star) 14%, transparent); color: var(--hs-star); }
.hc-hi.is-hot { background: color-mix(in srgb, #FF7A4C 15%, transparent); color: color-mix(in srgb, #FF7A4C 80%, var(--hs-tx)); }
.hc-hi.is-ok { background: color-mix(in srgb, var(--hs-ok, #3EE08F) 14%, transparent); color: var(--hs-ok, #3EE08F); }
.hc-wh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hs-line); }
.hc-wh h3 { margin: 0; display: flex; align-items: center; gap: 9px; font: 700 12px var(--hs-f-body); letter-spacing: .13em; text-transform: uppercase; color: var(--hs-tx); }
.hc-card { background: var(--hs-bg-2); border: 1px solid var(--hs-line); border-radius: var(--hc-r); }

/* Mana coin */
.hc .mana-icon, body.hc-body .mana-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; background: var(--hs-ac-fill); color: #fff; font: 800 9px/1 var(--hs-f-body); font-style: normal; vertical-align: -2px; box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 22%, transparent); }
.hc .mana-icon::before, body.hc-body .mana-icon::before { content: "M"; }

/* ============ hub bar ============ */
.hc-nav { background: var(--hs-bg-2); border-bottom: 1px solid var(--hs-line); }
.hc-nav-in { display: flex; align-items: center; gap: 18px; height: 50px; }
.hc-brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font: 600 14px var(--hs-f-head); color: var(--hs-tx-2); white-space: nowrap; }
.hc-brand b { font-weight: 800; color: var(--hs-tx); }
.hc-brand-ic { width: 26px; height: 26px; border-radius: var(--hc-r); display: inline-flex; align-items: center; justify-content: center; background: var(--hs-ac-fill); color: #fff; font-size: 11px; }
.hc-nav-sep { width: 1px; height: 22px; background: var(--hs-line-2); flex-shrink: 0; }
.hc-tabs { display: flex; align-items: stretch; align-self: stretch; gap: 2px; min-width: 0; overflow-x: auto; }
.hc-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font: 700 13px var(--hs-f-body); color: var(--hs-tx-3); white-space: nowrap; }
.hc-tab i { font-size: 12px; color: var(--hs-tx-4); transition: color .15s; }
.hc-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
body.hc-body .hc-tab:hover { color: var(--hs-tx); }
.hc-tab.active { color: var(--hs-tx); }
.hc-tab.active i { color: var(--hs-ac); }
.hc-tab.active::after { background: var(--hs-ac); }
.hc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #FF5C5C; box-shadow: 0 0 0 0 rgba(255, 92, 92, .6); animation: hcPulse 1.8s infinite; }
@keyframes hcPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 92, .55); } 70% { box-shadow: 0 0 0 6px rgba(255, 92, 92, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 92, 92, 0); } }
.hc-nav-act { margin-left: auto; flex-shrink: 0; }

/* ============ page head ============ */
.hc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 28px 0 22px; }
.hc-head-tx { min-width: 0; max-width: 720px; }
.hc-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px !important; font: 700 11.5px var(--hs-f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--hs-ac); }
.hc-kicker-bar { width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.hc-back { display: inline-flex; align-items: center; gap: 8px; color: var(--hs-tx-3); letter-spacing: .12em; }
.hc-title { margin: 0; font: 800 30px/1.12 var(--hs-f-head); letter-spacing: -.02em; color: var(--hs-tx); }
.hc-title-tag { color: var(--tg); margin-right: 2px; }
.hc-sub { margin-top: 8px !important; font-size: 14px; line-height: 1.55; color: var(--hs-tx-3); }
.hc-head-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============ shared bits ============ */
.hc-tdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; background: var(--tg, var(--hs-tx-4)); }
.hc-tdot.is-all { background: linear-gradient(135deg, var(--hs-ac) 0 50%, var(--hs-dub) 50% 100%); }
.hc-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; background: color-mix(in srgb, var(--tg, var(--hs-tx-4)) 13%, transparent); color: color-mix(in srgb, var(--tg, var(--hs-tx-3)) 62%, var(--hs-tx)) !important; }
body.hc-body a.hc-tag:hover { background: color-mix(in srgb, var(--tg, var(--hs-tx-4)) 22%, transparent); }
.hc-pin, .hc-kind { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hc-pin { background: color-mix(in srgb, var(--hs-dub) 15%, transparent); color: var(--hs-dub-tx); }
.hc-pin i { font-size: 9px; }
.hc-kind { background: var(--hs-raise); color: var(--hs-tx-3); }
.hc-kind i { font-size: 10px; color: var(--hs-tx-4); }
.hc-rank { display: inline-flex; align-items: center; height: 17px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--hs-line-2); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hs-tx-4); white-space: nowrap; }
.hc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hs-tx-5, var(--hs-tx-4)); flex-shrink: 0; }
.hc-none { display: flex; align-items: center; gap: 10px; padding: 18px 14px; color: var(--hs-tx-4); font-size: 13px; }
.hc-none i { color: var(--hs-tx-5, var(--hs-tx-4)); }
.hc-none a { color: var(--hs-ac); font-weight: 700; }
.hc-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px; color: var(--hs-tx-4); font-size: 13px; font-weight: 600; }
.hc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hs-line-2); border-top-color: var(--hs-ac); animation: hcSpin .7s linear infinite; }
@keyframes hcSpin { to { transform: rotate(360deg); } }
.hc-bar { height: 6px; border-radius: 3px; background: var(--hs-raise); overflow: hidden; }
.hc-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--hs-ac); transition: width .3s; }
.hc-bar.is-ok > span { background: var(--hs-ok, #3EE08F); }
.hc-cta { position: relative; padding: 16px; overflow: hidden; }
.hc-cta::before { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--hs-ac-soft), transparent 70%); pointer-events: none; }
.hc-cta-ic { width: 34px; height: 34px; border-radius: var(--hc-r); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; background: var(--hs-ac-soft); color: var(--hs-ac); font-size: 14px; }
.hc-cta h3 { margin: 0 0 6px; font: 800 15px var(--hs-f-head); color: var(--hs-tx); }
.hc-cta p { margin: 0 0 14px !important; font-size: 13px; line-height: 1.55; color: var(--hs-tx-3); }
.hc-cta p b { display: inline-flex; align-items: center; gap: 4px; color: var(--hs-tx); }
.hc-cta code { padding: 1px 5px; border-radius: 3px; background: var(--hs-raise); color: var(--hs-tx-2); font-size: 12px; }
.hc-cta .hc-btn { width: 100%; }

/* dropdown look inside the hub */
body.hc-body .hc .dropdown-menu { border-radius: var(--hc-r); padding: 4px; min-width: 180px; }
body.hc-body .hc .dropdown-menu .dropdown-item { border-radius: 3px; padding: 8px 10px; font-size: 13px; }
body.hc-body .hc .dropdown-item.cm-post-delete { color: var(--hs-danger, #FF8F8F); }
.hc .hc-check { display: none; margin-left: auto; color: var(--hs-ac) !important; }
.hc .dropdown-item.active .hc-check { display: inline-block; }

/* modals (report post + anime picker) */
body.hc-body .modal-content { border-radius: var(--hc-r); }
body.hc-body .modal-title { display: flex; align-items: center; gap: 10px; font-size: 16px; }
body.hc-body .modal .close { border-radius: var(--hc-r); width: 32px; height: 32px; }
body.hc-body .modal-footer .btn { border-radius: var(--hc-r); }
.hc-label { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font: 700 13px var(--hs-f-body); color: var(--hs-tx); }
.hc-input, body.hc-body #cm-post-report-reason, body.hc-body #tl-search-input { width: 100%; min-height: 38px; padding: 9px 12px; border-radius: var(--hc-r); border: 1px solid var(--hs-line-2); background: var(--hs-field); color: var(--hs-tx); font: 600 14px var(--hs-f-body); outline: 0; transition: border-color .15s; }
.hc-input:focus, body.hc-body #cm-post-report-reason:focus, body.hc-body #tl-search-input:focus { border-color: var(--hs-ac); }
.hc-input::placeholder, body.hc-body #tl-search-input::placeholder, body.hc-body #cm-post-report-reason::placeholder { color: var(--hs-tx-4); }
.hc-count { margin-top: 6px; text-align: right; font-size: 12px; color: var(--hs-tx-4); }
body.hc-body #tl-search-modal .modal-dialog { max-width: 560px; }
body.hc-body .tl-search-results { max-height: 52vh; overflow-y: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
body.hc-body .tl-search-hint { padding: 12px 4px; font-size: 13px; color: var(--hs-tx-4); }
body.hc-body .tl-search-item { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--hc-r); color: var(--hs-tx) !important; transition: background .12s; }
body.hc-body .tl-search-item:hover { background: var(--hs-hover); }
body.hc-body .tl-search-item img { width: 36px; height: 50px; object-fit: cover; border-radius: 3px; flex-shrink: 0; background: var(--hs-raise); }
body.hc-body .tl-search-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.hc-body .tl-search-name em { font-style: normal; font-weight: 500; color: var(--hs-tx-4); }
body.hc-body .tl-search-state { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 3px; background: var(--hs-ac-soft); color: var(--hs-ac); font-size: 11px; font-weight: 800; }
body.hc-body .tl-search-item.is-added { opacity: .5; pointer-events: none; }
body.hc-body .tl-search-item.is-added .tl-search-state { background: color-mix(in srgb, var(--hs-ok, #3EE08F) 14%, transparent); color: var(--hs-ok, #3EE08F); }

/* toast fallback (community.min.js when showToast is missing) */
.ak-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100000; transform: translateX(-50%) translateY(12px); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: min(92vw, 420px); padding: 11px 16px; border-radius: var(--hc-r, 4px); font: 700 13.5px/1.4 var(--hs-f-body); background: var(--hs-bg-2); color: var(--hs-tx); border: 1px solid var(--hs-line-2); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.ak-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ak-toast-success { border-left: 3px solid var(--hs-ok, #3EE08F); }
.ak-toast-error { border-left: 3px solid var(--hs-danger, #FF8F8F); }

/* ============ BOARD ============ */
.hc-board-grid { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; align-items: start; }
.hc-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.hc .nc-cate { display: flex; flex-direction: column; gap: 1px; padding: 6px; }
.hc .nc-cate .item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: 3px; color: var(--hs-tx-2); font-size: 13.5px; font-weight: 600; transition: background .12s, color .12s; }
body.hc-body .hc .nc-cate .item:hover { background: var(--hs-hover); color: var(--hs-tx); }
.hc .nc-cate .item.active { background: var(--hs-ac-soft); color: var(--hs-tx); font-weight: 700; }
.hc .nc-cate .item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: var(--hs-ac); }
.hc .nc-cate .hc-tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc .nc-cate .number { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--hs-tx-4); font-variant-numeric: tabular-nums; }
.hc .nc-cate .item.active .number { color: var(--hs-ac); }

.hc-toolbar { margin-bottom: 14px; }
.hc-toolbar-in { display: flex; align-items: center; gap: 8px; }
.hc-search { position: relative; flex: 1 1 auto; min-width: 0; margin: 0; }
.hc-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--hs-tx-4); pointer-events: none; }
.hc-search input { width: 100%; height: 36px; padding: 0 12px 0 33px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); color: var(--hs-tx); font: 600 13.5px var(--hs-f-body); outline: 0; transition: border-color .15s; }
.hc-search input::placeholder { color: var(--hs-tx-4); }
.hc-search input:focus { border-color: var(--hs-ac); }
.hc-search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; cursor: pointer; }
.hc-dd { position: relative; flex-shrink: 0; }
.hc-ddbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); color: var(--hs-tx-2); font: 700 13px var(--hs-f-body); white-space: nowrap; cursor: pointer; }
.hc-ddbtn i { font-size: 12px; color: var(--hs-tx-4); }
body.hc-body .hc-ddbtn:hover, .hc-dd.show .hc-ddbtn { border-color: var(--hs-line-2); color: var(--hs-tx); }
.hc-dd.show .hc-ddbtn { border-color: var(--hs-ac); }
.hc-caret { font-size: 10px !important; margin-left: 2px; }
.hc-dd-topic { display: none; }
.hc .hc-ddmenu .dropdown-item { gap: 10px; }
.hc .hc-ddmenu .dropdown-item .hc-tdot { width: 8px; }

.hc-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--hc-r); border: 1px solid var(--hs-line-ac, var(--hs-line-2)); background: var(--hs-ac-soft); color: var(--hs-tx-2); font-size: 13px; }
.hc-note i { margin-right: 8px; color: var(--hs-ac); }
.hc-note a { color: var(--hs-ac); font-weight: 700; }

.hc .post-list, .hc .pin-group { display: flex; flex-direction: column; gap: 10px; }
.hc .pin-group { padding-bottom: 10px; margin-bottom: 0; border-bottom: 1px dashed var(--hs-line-2); }

/* post card */
.hc-post { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px 16px 12px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); transition: border-color .15s, background .15s; }
.hc-post:hover { border-color: var(--hs-line-2); }
.hc-post.is-pinned { border-color: color-mix(in srgb, var(--hs-dub) 35%, var(--hs-line)); background: linear-gradient(90deg, color-mix(in srgb, var(--hs-dub) 7%, var(--hs-bg-2)), var(--hs-bg-2) 40%); }
.hc-post.is-pinned::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; border-radius: var(--hc-r) 0 0 var(--hc-r); background: var(--hs-dub); }
.hc-post-av { display: block; width: 38px; height: 38px; }
.hc-post-av .profile-avatar, .hc-owner-av .profile-avatar { position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--hs-raise); }
.hc-post-av .profile-avatar > img, .hc-owner-av .profile-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hc-post-main { min-width: 0; }
.hc-post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding-right: 30px; font-size: 12.5px; color: var(--hs-tx-4); line-height: 20px; }
.hc .user-name { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; color: var(--hs-tx-2); font-weight: 700; }
.hc .user-name .hc-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.hc-body .hc a.user-name:hover { color: var(--hs-ac); }
/* "Comment as <name>": inline-flex drops the trailing space of the text node. */
.hc .comment-input .user-name { gap: 0.3em; }
.hc-post-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.hc-post-tags:empty { display: none; }
.hc-post-title { margin: 7px 0 0 !important; font: 700 16.5px/1.35 var(--hs-f-head); letter-spacing: -.005em; }
.hc-post-title a { color: var(--hs-tx); overflow-wrap: anywhere; }
.hc-post-ex { margin-top: 5px !important; font-size: 13.5px; line-height: 1.55; color: var(--hs-tx-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hc-teaser { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 10px; padding: 7px 12px 7px 8px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-3); color: var(--hs-tx-2) !important; transition: border-color .15s; }
body.hc-body .hc-teaser:hover { border-color: var(--hs-ac); }
.tl-preview-posters { display: flex; flex-shrink: 0; }
.tl-preview-posters img { width: 30px; height: 42px; margin-left: -9px; object-fit: cover; border-radius: 3px; border: 2px solid var(--hs-bg-3); background: var(--hs-raise); }
.tl-preview-posters img:first-child { margin-left: 0; }
.tl-preview-meta { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--hs-tx-4); line-height: 1.35; }
.tl-preview-meta b { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--hs-tx); }
.tl-preview-meta b i { color: var(--hs-ac); font-size: 11px; }
.hc-teaser-go { font-size: 11px; color: var(--hs-tx-4); margin-left: 4px; }
.hc-post-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.hc-vote { display: inline-flex; align-items: center; height: 28px; border: 1px solid var(--hs-line); border-radius: var(--hc-r); overflow: hidden; background: var(--hs-bg-3); }
.hc-vote > a, .hc-vote > span { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; color: var(--hs-tx-3); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-vote > * + * { border-left: 1px solid var(--hs-line); }
.hc-vote i { font-size: 12px; }
body.hc-body .hc-vote > a:hover { background: var(--hs-hover); color: var(--hs-tx); }
.hc-vote .is-up.active { background: var(--hs-ac-soft); color: var(--hs-ac); }
.hc-vote .is-down.active { background: color-mix(in srgb, var(--hs-danger, #FF8F8F) 14%, transparent); color: var(--hs-danger, #FF8F8F); }
.hc-vote .active i { font-weight: 900; }
.hc-foot-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--hc-r); color: var(--hs-tx-3); font-size: 12px; font-weight: 700; }
body.hc-body .hc-foot-btn:hover { background: var(--hs-hover); color: var(--hs-tx); }
.hc-foot-read { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--hs-tx-4); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.hc-foot-read i { font-size: 10px; }
.hc-post:hover .hc-foot-read { opacity: 1; transform: none; color: var(--hs-ac); }
.hc .hc-post-more { position: absolute; top: 10px; right: 10px; z-index: 3; }
.hc-post-more .is-more-btn, .hc-post-more .cd-more-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--hc-r); color: var(--hs-tx-4); }
body.hc-body .hc-post-more .is-more-btn:hover, body.hc-body .hc-post-more .cd-more-btn:hover, .hc-post-more.show .is-more-btn, .hc-post-more.show .cd-more-btn { background: var(--hs-hover); color: var(--hs-tx); }
.hc-post-more .dropdown-menu { top: calc(100% + 4px); }

.hc-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 20px; border: 1px dashed var(--hs-line-2); border-radius: var(--hc-r); text-align: center; color: var(--hs-tx-4); font-size: 13.5px; }
.hc-empty strong { font: 800 16px var(--hs-f-head); color: var(--hs-tx); }
.hc-empty-ic { width: 46px; height: 46px; margin-bottom: 6px; border-radius: var(--hc-r); display: inline-flex; align-items: center; justify-content: center; background: var(--hs-ac-soft); color: var(--hs-ac); font-size: 19px; }
.hc-empty .hc-btn { margin-top: 10px; }
.hc-more { display: flex; justify-content: center; padding: 6px 0 0; }
.hc-more .hc-btn { min-width: 210px; height: 36px; }

/* ============ POST ============ */
.hc-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 18px 0 16px; font-size: 13px; font-weight: 600; color: var(--hs-tx-4); }
.hc-crumbs a { display: inline-flex; align-items: center; gap: 7px; color: var(--hs-tx-3); white-space: nowrap; }
.hc-crumbs a i { font-size: 11px; }
.hc-crumbs .sep { color: var(--hs-line-2); }
.hc-crumbs .cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hs-tx-4); }
.hc-read-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.hc-read-main { min-width: 0; }
.hc-article { position: relative; padding: 24px 26px 18px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); }
.hc-art-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-art-title { margin: 12px 0 0 !important; font: 800 28px/1.2 var(--hs-f-head); letter-spacing: -.02em; color: var(--hs-tx); overflow-wrap: anywhere; }
.hc-art-by { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--hs-line); }
.hc-owner { display: flex; align-items: center; gap: 11px; min-width: 0; }
.hc-owner-av { display: block; width: 40px; height: 40px; flex-shrink: 0; }
.hc-owner-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hc-owner-tx .user-name { font-size: 14px; color: var(--hs-tx); }
.hc-owner-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--hs-tx-4); }
.hc .hc-art-by .hc-post-more { position: relative; top: auto; right: auto; }
.hc-art-by .cd-more-btn { width: 32px; height: 32px; border: 1px solid var(--hs-line); }
.hc-format { margin-top: 20px; }
.hc-prose { margin-top: 20px; font-size: 15.5px; line-height: 1.75; color: var(--hs-tx-2); overflow-wrap: anywhere; }
.hc-prose p { margin: 0 0 1em; }
.hc-prose h1, .hc-prose h2, .hc-prose h3, .hc-prose h4 { margin: 1.4em 0 .5em; font-family: var(--hs-f-head); font-weight: 800; color: var(--hs-tx); line-height: 1.3; }
.hc-prose h3 { font-size: 19px; }
.hc-prose a { color: var(--hs-ac); text-decoration: underline; text-underline-offset: 2px; }
.hc-prose ul, .hc-prose ol { margin: 0 0 1em; padding-left: 22px; }
.hc-prose li { margin: 3px 0; }
.hc-prose blockquote { margin: 0 0 1em; padding: 8px 14px; border-left: 3px solid var(--hs-ac); border-radius: 0 var(--hc-r) var(--hc-r) 0; background: var(--hs-bg-3); color: var(--hs-tx-3); }
.hc-prose img { max-width: 100%; height: auto; border-radius: var(--hc-r); }
.hc-prose code { padding: 1px 5px; border-radius: 3px; background: var(--hs-raise); font-size: .9em; }
.hc-prose del, .hc-prose s { color: var(--hs-tx-4); }
.hc-prose .spoiler, .hc-prose .cm-spoil, .hc-prose [class*="spoil"] { padding: 0 4px; border-radius: 3px; background: var(--hs-raise); }
.hc-art-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hs-line); }
.hc-actbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hc-vote-lg { height: 32px; }
.hc-vote-lg > a, .hc-vote-lg > span { padding: 0 12px; font-size: 13px; }
.hc-score { color: var(--hs-tx) !important; font-weight: 800 !important; min-width: 40px; justify-content: center; }
.hc-actbar .hc-btn.active { color: var(--hs-dub-tx); border-color: color-mix(in srgb, var(--hs-dub) 50%, var(--hs-line-2)); }
.hc-share { margin-top: 12px; padding: 12px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-3); }
.hc-comments-wrap { margin-top: 18px; padding: 18px 22px 8px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); }
.hc-sec-h h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 18px var(--hs-f-head); color: var(--hs-tx); }
.hc-sec-h small { padding: 2px 7px; border-radius: 3px; background: var(--hs-raise); font: 800 12px var(--hs-f-body); color: var(--hs-tx-3); }
.hc-read-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.hc-author { overflow: hidden; }
.hc-author-band { height: 54px; background: linear-gradient(120deg, var(--hs-ac-soft), color-mix(in srgb, var(--hs-dub) 14%, transparent)), var(--hs-bg-3); border-bottom: 1px solid var(--hs-line); }
.hc-author-bd { padding: 0 16px 16px; margin-top: -26px; display: flex; flex-direction: column; align-items: flex-start; }
.hc-author-av { display: block; width: 52px; height: 52px; }
.hc-author-av .profile-avatar { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--hs-bg-2); background: var(--hs-raise); }
.hc-author-av .profile-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.hc-author-av .profile-avatar.has-cosmetics { border: 0; }
.hc-author-nm { margin-top: 8px; font: 800 15px var(--hs-f-head); color: var(--hs-tx) !important; }
.hc-author-rk { margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--hs-tx-4); }
.hc-author-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.hc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--hs-line); }
.hc-stats > div { padding: 12px 14px; background: var(--hs-bg-2); }
.hc-stats dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hs-tx-4); }
.hc-stats dd { margin: 3px 0 0; font: 800 17px var(--hs-f-head); color: var(--hs-tx); font-variant-numeric: tabular-nums; }
.hc-stats > div:last-child { border-radius: 0 0 var(--hc-r) 0; }
.hc-stats > div:nth-last-child(2) { border-radius: 0 0 0 var(--hc-r); }

/* comments.css retint (community thread) */
.hc #community-comments.block_area-comment { --cm-body: var(--hs-bg-2); --cm-text: var(--hs-tx); --cm-mute: var(--hs-tx-3); --cm-mute-2: var(--hs-tx-4); --cm-line: var(--hs-line); --cm-line-strong: var(--hs-line-2); --cm-soft: color-mix(in srgb, var(--hs-tx) 4%, transparent); --cm-soft-hov: var(--hs-hover); --cm-acc: var(--hs-ac); --cm-acc2: var(--hs-ac); --cm-acc-rgb: 46, 197, 232; --cm-acc2-rgb: 46, 197, 232; padding: 6px 0 12px !important; margin: 0; max-width: none; color: var(--hs-tx); }
.hc #community-comments, .hc #community-comments *:not(i):not([class*="fa-"]) { font-family: var(--hs-f-body) !important; }
.hc #community-comments .block_area-header { display: none; }
.hc #community-comments textarea, .hc #community-comments .form-control { background: var(--hs-field) !important; border-color: var(--hs-line-2) !important; color: var(--hs-tx) !important; border-radius: var(--hc-r) !important; }
.hc #community-comments .btn-primary, .hc #community-comments button[type=submit] { background: var(--hs-ac-fill) !important; border-color: var(--hs-ac-fill) !important; color: #fff !important; border-radius: var(--hc-r) !important; font-weight: 700 !important; }
.hc #community-comments .cm-sort.active { color: var(--hs-tx) !important; }
.hc #community-comments .cw_l-line .ihead .user-name, .hc #community-comments .block_area-header .cat-heading, .hc #community-comments .cm-fmt-btn:focus, .hc #community-comments .cm-fmt-btn.is-active, .hc #community-comments .sc-header .btn[aria-expanded="true"], .hc #community-comments .cw_l-line .ibottom .ib-li .btn:hover, .hc #community-comments .rep-more.rep-in .cm-btn-show-rep:hover, .hc #community-comments #cm-view-more:hover, .hc #community-comments .dropdown-menu-model .dropdown-item:focus, .hc #community-comments .dropdown-menu-model .dropdown-item.active { color: var(--hs-tx) !important; }
.hc #community-comments .ci-buttons .btn-primary { color: #fff !important; }

/* ============ format blocks (poll / matchup / seasonal / recs / tier list) ============ */
.hc .cm-poll, .hc .cm-matchup, .hc .cm-seasonal, .hc .cm-rec { padding: 14px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-3); }
.hc .cm-poll-head { display: flex; align-items: center; gap: 2px; margin-bottom: 12px; font: 800 11.5px var(--hs-f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--hs-ac); }
.hc .cm-poll-head i { margin-right: 6px; }
.hc .cm-poll-options { display: flex; flex-direction: column; gap: 6px; }
.hc .cm-poll-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); color: var(--hs-tx); text-align: left; font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.hc .cm-poll-opt:hover:not(:disabled) { border-color: var(--hs-ac); background: var(--hs-ac-soft); }
.hc .cm-poll-opt.is-mine { border-color: var(--hs-ac); box-shadow: inset 2px 0 0 var(--hs-ac); }
.hc .cm-poll-opt:disabled { cursor: default; }
.hc .cm-poll-poster img { display: block; width: 44px; height: 62px; object-fit: cover; border-radius: 3px; }
.hc .cm-poll-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc .cm-poll-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc .cm-poll-bar { display: block; height: 6px; border-radius: 3px; background: var(--hs-raise); overflow: hidden; }
.hc .cm-poll-bar > span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--hs-ac); transition: width .3s; }
.hc .cm-poll-opt.is-mine .cm-poll-bar > span { background: var(--hs-dub); }
.hc .cm-poll-meta { font-size: 11.5px; font-weight: 600; color: var(--hs-tx-4); }
.hc .cm-poll-link { display: none; }
.hc .cm-matchup-row { display: flex; align-items: stretch; gap: 12px; }
.hc .cm-matchup-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); color: var(--hs-tx); font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.hc .cm-matchup-card:hover:not(:disabled) { border-color: var(--hs-ac); background: var(--hs-ac-soft); }
.hc .cm-matchup-card.is-mine { border-color: var(--hs-dub); box-shadow: inset 0 -2px 0 var(--hs-dub); }
.hc .cm-matchup-card img { width: 100%; max-width: 160px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 3px; }
.hc .cm-matchup-title { font-size: 13.5px; font-weight: 800; line-height: 1.3; text-align: center; }
.hc .cm-matchup-pct { font: 800 24px var(--hs-f-head); color: var(--hs-ac); }
.hc .cm-matchup-card.is-mine .cm-matchup-pct { color: var(--hs-dub); }
.hc .cm-matchup-votes, .hc .cm-matchup-cta { font-size: 11.5px; font-weight: 600; color: var(--hs-tx-4); }
.hc .cm-matchup-vs { align-self: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--hc-r); background: var(--hs-raise); font: 800 13px var(--hs-f-head); letter-spacing: .06em; color: var(--hs-tx-2); }
.hc .cm-seasonal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hc .cm-seasonal-list li { display: flex; align-items: center; gap: 12px; padding: 5px 6px; border-radius: var(--hc-r); }
.hc .cm-seasonal-list li:nth-child(-n+3) .cm-seasonal-rank { color: var(--hs-dub); }
.hc .cm-seasonal-rank { width: 30px; flex-shrink: 0; font: 800 14px var(--hs-f-head); color: var(--hs-tx-4); }
.hc .cm-seasonal-list a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--hs-tx); }
.hc .cm-seasonal-list img { width: 36px; height: 50px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.hc .cm-seasonal-list span { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc .cm-rec-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.hc .cm-rec-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--hs-tx); }
.hc .cm-rec-item img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 3px; }
.hc .cm-rec-item span { font-size: 12px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-c-red { background: #FF7F7E; } .tl-c-orange { background: #FFBF7F; } .tl-c-amber { background: #FFDF80; } .tl-c-yellow { background: #FEFF7F; } .tl-c-green { background: #7EFF80; }
.tl-c-teal { background: #7FFFFF; } .tl-c-blue { background: #7F9FFF; } .tl-c-purple { background: #BF9FF7; } .tl-c-pink { background: #FF9FF3; } .tl-c-gray { background: #B3B3B3; }
.hc .tl-view { display: flex; flex-direction: column; gap: 3px; border-radius: var(--hc-r); overflow: hidden; border: 1px solid var(--hs-line); }
.hc .tl-view .tl-row { display: flex; align-items: stretch; min-height: 92px; background: var(--hs-bg-3); }
.hc .tl-view .tl-label { flex: 0 0 88px; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; color: #10151C; font: 800 16px/1.2 var(--hs-f-head); overflow-wrap: anywhere; }
.hc .tl-view .tl-items { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 6px; }
.hc .tl-view .tl-empty { align-self: center; padding: 0 8px; font-size: 12px; }
.hc .tl-view .tl-item { position: relative; display: block; width: 58px; height: 80px; border-radius: 3px; overflow: hidden; background: var(--hs-raise); }
.hc .tl-view .tl-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc .tl-view .tl-item-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 3px; font-size: 9.5px; line-height: 1.2; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); opacity: 0; transition: opacity .15s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc .tl-view .tl-item:hover .tl-item-name { opacity: 1; }

/* ============ CREATE ============ */
.hc-create-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
.hc-form-card { padding: 22px 22px 18px; }
.hc-field { margin-bottom: 22px; }
.hc-label-row { justify-content: space-between; flex-wrap: wrap; }
.hc-label-row > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.hc-step { width: 22px; height: 22px; border-radius: var(--hc-r); display: inline-flex; align-items: center; justify-content: center; background: var(--hs-ac-soft); color: var(--hs-ac); font: 800 11.5px var(--hs-f-body); }
.hc-step i { font-size: 10px; }
.hc-hint { font-size: 12px; font-weight: 600; color: var(--hs-tx-4); }
.hc-err { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--hs-danger, #FF8F8F); }
.hc .is-invalid { border-color: var(--hs-danger, #FF8F8F) !important; }
.hc-tagpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.hc-tagpick .cp-tag { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 10px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-3); cursor: pointer; transition: border-color .15s, background .15s; }
.hc-tagpick .cp-tag:hover { border-color: var(--hs-line-2); }
.hc-tagpick .cp-tag input { position: absolute; opacity: 0; pointer-events: none; }
.hc-tagpick .cp-tag.is-on { border-color: var(--tg, var(--hs-ac)); background: color-mix(in srgb, var(--tg, var(--hs-ac)) 10%, var(--hs-bg-3)); }
.hc-tagpick .cp-tag:has(input:focus-visible) { outline: 2px solid var(--hs-ac); outline-offset: 1px; }
.hc-tagpick .cp-tag:has(.t-blue) { --tg: #4DA6FF; } .hc-tagpick .cp-tag:has(.t-yellow) { --tg: #F5B83D; } .hc-tagpick .cp-tag:has(.t-green) { --tg: #3FCF7A; }
.hc-tagpick .cp-tag:has(.t-purple) { --tg: #B784F5; } .hc-tagpick .cp-tag:has(.t-cyan) { --tg: #2EC5E8; } .hc-tagpick .cp-tag:has(.t-orange) { --tg: #FF8A4C; }
.hc-tagpick .cp-tag:has(.t-pink) { --tg: #F472C8; } .hc-tagpick .cp-tag:has(.t-red) { --tg: #FF5C7A; } .hc-tagpick .cp-tag:has(.t-sky) { --tg: #5CB8FF; }
.hc-tagpick .cp-tag:has(.t-lime) { --tg: #9ACD32; } .hc-tagpick .cp-tag:has(.t-coral) { --tg: #FF7F6E; }
.hc-tagpick-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hc-tagpick-tx b { font-size: 13px; font-weight: 700; color: var(--hs-tx); }
.hc-tagpick-tx small { font-size: 11px; font-weight: 600; color: var(--hs-tx-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-editor { border: 1px solid var(--hs-line-2); border-radius: var(--hc-r); background: var(--hs-field); overflow: hidden; transition: border-color .15s; }
.hc-editor:focus-within { border-color: var(--hs-ac); }
.hc .cp-fmt-bar { display: flex; align-items: center; gap: 2px; padding: 5px 6px; border-bottom: 1px solid var(--hs-line); background: var(--hs-bg-3); }
.hc .cp-fmt-btn { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 3px; background: transparent; color: var(--hs-tx-3); font-size: 12px; cursor: pointer; }
.hc .cp-fmt-btn:hover { background: var(--hs-hover); color: var(--hs-tx); }
.hc .cp-fmt-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--hs-line-2); }
.hc .cp-hint { margin-left: auto; padding-right: 4px; font-size: 11.5px; font-weight: 600; color: var(--hs-tx-4); }
.hc .cp-textarea { display: block; width: 100%; min-height: 260px; padding: 14px; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--hs-tx); font: 500 15px/1.65 var(--hs-f-body); }
.hc .cp-textarea::placeholder { color: var(--hs-tx-4); }
.hc-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--hs-line); }
.hc-reward { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hs-tx-3); }
.hc-reward b { color: var(--hs-tx); }
.hc-reward > i:not(.mana-icon) { color: var(--hs-tx-4); }
.hc-form-btns { display: flex; gap: 8px; }
.hc-form-btns .hc-btn { height: 36px; padding: 0 16px; }
.hc-create-side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.hc-cheat { list-style: none; margin: 0; padding: 6px 0; }
.hc-cheat li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; font-size: 12.5px; color: var(--hs-tx-4); }
.hc-cheat code { padding: 2px 6px; border-radius: 3px; background: var(--hs-raise); color: var(--hs-tx-2); font-size: 12px; }
.hc-tips { list-style: none; margin: 0; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.hc-tips li { display: flex; gap: 9px; font-size: 13px; line-height: 1.45; color: var(--hs-tx-3); }
.hc-tips i { margin-top: 3px; font-size: 10px; color: var(--hs-ok, #3EE08F); }
/* tier list builder */
.hc .tl-builder, .hc .poll-builder { padding: 8px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-3); }
.hc .tl-rows { display: flex; flex-direction: column; gap: 4px; }
.hc .tl-brow { display: flex; align-items: stretch; min-height: 76px; border-radius: 3px; overflow: hidden; background: var(--hs-bg-2); border: 1px solid var(--hs-line); }
.hc .tl-brow .tl-label { flex: 0 0 80px; display: flex; align-items: center; justify-content: center; padding: 4px; }
.hc .tl-brow .tl-label-input { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; text-align: center; color: #10151C; font: 800 15px var(--hs-f-head); }
.hc .tl-brow .tl-bitems { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 5px; padding: 6px; }
.hc .tl-bitem { position: relative; display: block; flex: 0 0 auto; width: 46px; height: 64px; border-radius: 3px; overflow: hidden; background: var(--hs-raise); }
.hc .tl-bitem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc .tl-bitem-ph { display: block; width: 100%; height: 100%; background: var(--hs-raise); }
.hc .tl-bitem-x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 2px; background: rgba(0, 0, 0, .75); color: #fff !important; font-size: 12px; line-height: 1; }
.hc .tl-bitem-x:hover { background: #E5484D; }
.hc .tl-add-item { flex: 0 0 auto; width: 46px; height: 64px; border: 1px dashed var(--hs-line-2); border-radius: 3px; background: transparent; color: var(--hs-tx-4); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.hc .tl-add-item:hover { border-color: var(--hs-ac); color: var(--hs-ac); }
.hc .tl-rowtools { flex: 0 0 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 2px; border-left: 1px solid var(--hs-line); background: var(--hs-bg-3); }
.hc .tl-tool { display: flex; align-items: center; justify-content: center; width: 24px; height: 20px; border-radius: 3px; color: var(--hs-tx-4) !important; font-size: 10.5px; }
.hc .tl-tool:hover { background: var(--hs-hover); color: var(--hs-tx) !important; }
.hc .tl-tool.is-off { opacity: .25; pointer-events: none; }
.hc .tl-tool.tl-remove-row:hover { color: var(--hs-danger, #FF8F8F) !important; }
.hc .tl-toolbar, .hc .poll-toolbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* poll builder */
.hc .poll-season-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.hc .poll-season-bar .hc-input { width: auto; min-width: 120px; max-width: 150px; min-height: 30px; height: 30px; padding: 0 10px; font-size: 13px; }
.hc .poll-options { display: flex; flex-direction: column; gap: 4px; min-height: 36px; }
.hc .poll-empty { padding: 8px 4px; font-size: 12.5px; color: var(--hs-tx-4); }
.hc .poll-opt { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 3px; border: 1px solid var(--hs-line); background: var(--hs-bg-2); }
.hc .poll-opt img, .hc .poll-opt-ph { width: 36px; height: 50px; flex-shrink: 0; object-fit: cover; border-radius: 3px; background: var(--hs-raise); }
.hc .poll-opt-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--hs-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc .poll-opt-tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.hc .poll-opt-tools a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 3px; color: var(--hs-tx-4); font-size: 11px; }
.hc .poll-opt-tools a:hover { background: var(--hs-hover); color: var(--hs-tx); }
.hc .poll-opt-tools .poll-opt-x { font-size: 16px; }
.hc .poll-rank { width: 26px; flex-shrink: 0; font: 800 12.5px var(--hs-f-head); color: var(--hs-ac); text-align: center; }
.hc .poll-type-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hc .poll-type-switch .btn { height: 28px; padding: 0 10px; border-radius: 3px; border: 1px solid var(--hs-line-2); background: var(--hs-bg-2); color: var(--hs-tx-2); font: 700 12px var(--hs-f-body); cursor: pointer; }
.hc .poll-type-switch .btn-primary { background: var(--hs-ac-fill); border-color: var(--hs-ac-fill); color: #fff; }

/* ============ MY ZONE ============ */
.hc-zone { padding-top: 24px; }
.hc-hero { position: relative; overflow: hidden; }
.hc-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(115deg, var(--hs-ac-soft), transparent 55%), linear-gradient(245deg, color-mix(in srgb, var(--hs-dub) 10%, transparent), transparent 45%); pointer-events: none; }
.hc-hero-main { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 300px; gap: 20px; align-items: center; padding: 22px; }
.hc-hero-av { position: relative; width: 88px; height: 88px; border-radius: 50%; background: var(--hs-raise); box-shadow: 0 0 0 3px var(--hs-bg-2), 0 0 0 4px var(--hs-line-2); }
.hc-hero-av > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.hc-hero-av.has-cosmetics { box-shadow: none; }
.hc-hero-id { min-width: 0; }
.hc-hero-id .hc-kicker { margin-bottom: 4px !important; }
.hc-hero-name { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font: 800 26px/1.15 var(--hs-f-head); letter-spacing: -.015em; color: var(--hs-tx); overflow-wrap: anywhere; }
.hc-hero-name .ak-title-eq { font-size: 11px; }
.hc-hero-rank { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--hs-tx-2); }
.hc-hero-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hc-hero-mana { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-3); }
.hc-hero-lbl { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hs-tx-4); }
.hc-hero-lbl i { font-size: 9px; color: var(--hs-ok, #3EE08F); }
.hc-hero-mana .ph-mana { display: flex; align-items: center; gap: 9px; font: 800 30px/1 var(--hs-f-head); color: var(--hs-tx); font-variant-numeric: tabular-nums; }
.hc-hero-mana .ph-mana .mana-icon { width: 22px; height: 22px; font-size: 12px; vertical-align: 0; }
.hc-hero-next { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--hs-tx-3); }
.hc-hero-next b { color: var(--hs-tx); }
.hc-hero-mana .hc-btn { margin-top: 4px; }
.hc-hero-strip { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); border-top: 1px solid var(--hs-line); }
.hc-watch { display: flex; flex-direction: column; gap: 8px; padding: 16px 22px; border-right: 1px solid var(--hs-line); }
.hc-watch-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mz-watch-nums { font-size: 12.5px; color: var(--hs-tx-4); font-variant-numeric: tabular-nums; }
.mz-watch-nums b { color: var(--hs-tx); }
.mz-watch-meta { font-size: 12px; color: var(--hs-tx-4); }
.hc-path { position: relative; min-width: 0; padding: 14px 18px 12px; }
.hc-path-track { position: absolute; left: 44px; right: 44px; top: 32px; height: 2px; background: var(--hs-line-2); }
.hc-path-track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--hs-ac), var(--hs-dub)); }
.hc-path-nodes { position: relative; display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.hc-path-nodes li { flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; opacity: .5; }
.hc-path-nodes li.is-reached { opacity: 1; }
.hc-path-ic { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--hs-line-2); background: var(--hs-bg-2); margin-bottom: 3px; }
.hc-path-nodes li.is-reached .hc-path-ic { border-color: var(--hs-ac); }
.hc-path-ic img { width: 20px; height: 20px; object-fit: contain; }
.hc-path-nodes b { font-size: 11.5px; font-weight: 800; color: var(--hs-tx); white-space: nowrap; }
.hc-path-nodes small { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--hs-tx-4); white-space: nowrap; }
.hc-path-nodes small .mana-icon { width: 11px; height: 11px; font-size: 7px; }
.hc-zone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.hc-rows { display: flex; flex-direction: column; padding: 4px 0; }
.hc-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hs-line); }
.hc-row:last-child { border-bottom: 0; }
.hc-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hc-row-main strong { font-size: 13.5px; font-weight: 700; color: var(--hs-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.hc-body .hc-row-main:hover strong { color: var(--hs-ac); }
.hc-row-meta { font-size: 11.5px; color: var(--hs-tx-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-row-act { display: flex; gap: 4px; flex-shrink: 0; }
.hc-row-act .hc-btn { padding: 0 8px; }
.hc-row-act .hc-btn span { display: none; }
.hc-row-more { margin: 4px 14px 14px; }
.hc-ledger { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hs-line); }
.hc-ledger:last-child { border-bottom: 0; }
.hc-ledger-ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--hc-r); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--hs-ok, #3EE08F) 12%, transparent); color: var(--hs-ok, #3EE08F); font-size: 11px; }
.hc-ledger-ic.is-neg { background: color-mix(in srgb, var(--hs-danger, #FF8F8F) 12%, transparent); color: var(--hs-danger, #FF8F8F); }
.hc-ledger-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hc-ledger-tx span { font-size: 13px; font-weight: 600; color: var(--hs-tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-ledger-tx small { font-size: 11.5px; color: var(--hs-tx-4); }
.hc-ledger .amt { font: 800 14px var(--hs-f-head); color: var(--hs-ok, #3EE08F); font-variant-numeric: tabular-nums; }
.hc-ledger .amt.neg { color: var(--hs-danger, #FF8F8F); }

/* ============ SUPER X ============ */
.hc-x { color: var(--hs-ac); }
.hc-sx-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-sx-legend span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 3px; border: 1px solid var(--hs-line); background: var(--hs-bg-2); font-size: 12px; font-weight: 600; color: var(--hs-tx-3); }
.hc-sx-legend i:not(.mana-icon) { font-size: 11px; color: var(--hs-tx-4); }
.hc-sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.hc-board-col { border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-2); min-width: 0; }
.hc-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--hs-line); }
.hc-col-head h2 { margin: 0; display: flex; align-items: center; gap: 9px; font: 700 12px var(--hs-f-body); letter-spacing: .13em; text-transform: uppercase; color: var(--hs-tx); white-space: nowrap; }
.hc-seg { display: inline-flex; gap: 2px; margin: 0; padding: 2px; list-style: none; border-radius: var(--hc-r); border: 1px solid var(--hs-line); background: var(--hs-bg-3); }
.hc-seg .nav-item { display: block; }
.hc-seg .nav-link, .hc-seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 3px; color: var(--hs-tx-3); font-size: 12px; font-weight: 700; white-space: nowrap; }
body.hc-body .hc-seg .nav-link:hover, body.hc-body .hc-seg-btn:hover { color: var(--hs-tx); }
.hc-seg .nav-link.active, .hc-seg-btn.active { background: var(--hs-ac-fill); color: #fff !important; }
.hc .tab-content > .tab-pane { display: none; }
.hc .tab-content > .tab-pane.active { display: block; }
.hc .wv-ul { display: flex; flex-direction: column; }
.hc .wv-ul:not(.expand) > .item:nth-child(n+5) { display: none; }
.hc .wv-loadmore { padding: 8px 12px 12px; }
.hc .wv-loadmore .hc-btn { width: 100%; }
.hc-lb { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--hs-line); }
.hc .wv-ul > .hc-lb:last-child, .hc .wv-ul:not(.expand) > .hc-lb:nth-child(4) { border-bottom: 0; }
.hc-lb-n { flex: 0 0 34px; font: 800 24px/1 var(--hs-f-head); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--hs-tx-4); text-align: center; font-variant-numeric: tabular-nums; }
.hc-lb.is-top-1 .hc-lb-n { -webkit-text-stroke: 0; color: var(--hs-star); }
.hc-lb.is-top-2 .hc-lb-n { -webkit-text-stroke: 0; color: var(--hs-tx-2); }
.hc-lb.is-top-3 .hc-lb-n { -webkit-text-stroke: 0; color: color-mix(in srgb, #E08A4A 80%, var(--hs-tx)); }
.hc-lb.is-top-1 { background: linear-gradient(90deg, color-mix(in srgb, var(--hs-star) 8%, transparent), transparent 70%); }
.hc-lb-av { display: block; width: 40px; height: 40px; flex-shrink: 0; }
.hc-lb-av.is-sm { width: 22px; height: 22px; }
.hc-lb-av .profile-avatar { position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--hs-raise); }
.hc-lb-av .profile-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.hc-lb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-lb-tx .user-name { font-size: 13.5px; color: var(--hs-tx); }
.hc-lb-sub { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--hs-tx-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-lb-sub i { font-size: 10px; }
.hc-lb-val { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font: 800 14px var(--hs-f-head); color: var(--hs-tx); font-variant-numeric: tabular-nums; }
.hc-lb-cm { align-items: flex-start; }
.hc-lb-cm .hc-lb-n { padding-top: 2px; }
.hc-lb-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hc-lb-who .user-name { font-size: 13px; }
.hc-lb-quote { margin: 4px 0 2px !important; padding: 7px 10px; border-left: 2px solid var(--hs-line-2); border-radius: 0 3px 3px 0; background: var(--hs-bg-3); font-size: 13px; line-height: 1.5; color: var(--hs-tx-2); overflow-wrap: anywhere; }
.hc-lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.hc-lb-foot .anime-name { min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--hs-ac); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-lb-foot .anime-name i { font-size: 10px; }
.hc-lb-stats { display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--hs-tx-4); font-variant-numeric: tabular-nums; }
.hc-lb-stats span { display: inline-flex; align-items: center; gap: 4px; }
.hc-lb-stats i { font-size: 10px; }
.hc-lb-stats .is-star { color: var(--hs-star); }
.hc-lb-poster { display: block; width: 44px; height: 62px; flex-shrink: 0; border-radius: 3px; overflow: hidden; background: var(--hs-raise); }
.hc-lb-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-lb-an .item-name { margin: 0; font: 700 13.5px/1.3 var(--hs-f-head); }
.hc-lb-an .item-name a { color: var(--hs-tx); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-lb-an .hc-lb-stats { margin-top: 3px; }

/* ============ cosmetics (badges, decorations, title chips) ============ */
.hc .profile-avatar, .hc .ph-avatar { position: relative; }
.avatar-clip { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50%; overflow: hidden; z-index: 1; background: transparent; }
.avatar-clip img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; border-radius: 50%; display: block; }
.avatar-decoration, .avatar-frame-overlay { position: absolute !important; top: -10% !important; left: -10% !important; width: 120% !important; height: 120% !important; max-width: none !important; z-index: 2; pointer-events: none; user-select: none; object-fit: contain !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
.profile-avatar.has-cosmetics, .ph-avatar.has-cosmetics { overflow: visible !important; background: transparent !important; }
.ak-title-eq { --tc: #B39DDB; display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 6px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); background: color-mix(in srgb, var(--tc) 15%, transparent); color: color-mix(in srgb, var(--tc) 55%, var(--hs-tx)); font: 700 10.5px/1.2 var(--hs-f-body); vertical-align: middle; white-space: nowrap; }
.ak-title-eq i { font-size: .62rem; opacity: .9; }
.ak-tc-crimson { --tc: #FF6B7A; } .ak-tc-coral { --tc: #FF8A65; } .ak-tc-amber { --tc: #FFB74D; } .ak-tc-gold { --tc: #FFD54F; } .ak-tc-lime { --tc: #AED581; }
.ak-tc-mint { --tc: #69F0AE; } .ak-tc-teal { --tc: #4DD0E1; } .ak-tc-sky { --tc: #4FC3F7; } .ak-tc-azure { --tc: #64B5F6; } .ak-tc-indigo { --tc: #7986CB; }
.ak-tc-violet { --tc: #B39DDB; } .ak-tc-orchid { --tc: #CE93D8; } .ak-tc-pink { --tc: #F48FB1; } .ak-tc-rose { --tc: #EF9A9A; } .ak-tc-salmon { --tc: #FFAB91; }
.ak-tc-peach { --tc: #FFCC80; } .ak-tc-sand { --tc: #FFE082; } .ak-tc-slate { --tc: #90A4AE; } .ak-tc-silver { --tc: #CFD8DC; } .ak-tc-ice { --tc: #B2EBF2; }
.user-name .ak-title-eq { margin-left: 7px; }

/* ============ responsive ============ */
@media (max-width: 1180px) {
    .hc-sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-hero-main { grid-template-columns: auto minmax(0, 1fr); }
    .hc-hero-mana { grid-column: 1 / -1; }
    .hc-read-grid { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 960px) {
    .hc-board-grid, .hc-read-grid, .hc-create-grid { grid-template-columns: minmax(0, 1fr); }
    .hc-side { display: none; }
    .hc-dd-topic { display: block; }
    .hc-read-side, .hc-create-side { position: static; }
    .hc-read-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc-read-side .hc-cta { display: none; }
    .hc-hero-strip { grid-template-columns: minmax(0, 1fr); }
    .hc-watch { border-right: 0; border-bottom: 1px solid var(--hs-line); }
}
@media (max-width: 760px) {
    .hc-nav-in { height: 46px; gap: 0; }
    .hc-brand, .hc-nav-sep, .hc-nav-act { display: none; }
    body.hc-body .hc-nav .hc-nav-in { padding-left: 0; padding-right: 0; }
    .hc-tabs { padding: 0 8px; }
    .hc-tab { padding: 0 10px; font-size: 12.5px; }
    .hc-head { padding: 20px 0 16px; }
    .hc-title { font-size: 24px; }
    .hc-sub { font-size: 13.5px; }
    .hc-head-act { width: 100%; }
    .hc-head-act .hc-btn { flex: 1; }
    .hc-toolbar-in { flex-wrap: wrap; }
    .hc-search { order: -1; flex-basis: 100%; }
    .hc-dd-topic { flex: 1; }
    .hc-dd-topic .hc-ddbtn { width: 100%; }
    .hc-dd-topic .hc-caret { margin-left: auto; }
    .hc-post { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; gap: 0; }
    .hc-post-av { display: none; }
    .hc-post-title { font-size: 15.5px; }
    .hc-foot-read { display: none; }
    .hc-foot-lbl { display: none; }
    .hc-article { padding: 18px 16px 14px; }
    .hc-art-title { font-size: 22px; }
    .hc-prose { font-size: 15px; }
    .hc-comments-wrap { padding: 14px 14px 6px; }
    .hc-read-side { grid-template-columns: minmax(0, 1fr); }
    .hc-crumbs .cur { display: none; }
    .hc-form-card { padding: 16px 14px; }
    .hc-tagpick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hc .cp-hint { display: none; }
    .hc-form-btns { width: 100%; }
    .hc-form-btns .hc-btn { flex: 1; }
    .hc .tl-brow .tl-label { flex-basis: 58px; }
    .hc .tl-view .tl-label { flex-basis: 60px; font-size: 14px; }
    .hc .cm-matchup-row { gap: 8px; }
    .hc .cm-matchup-vs { width: 28px; height: 28px; font-size: 11px; }
    .hc-sx-grid, .hc-zone-grid { grid-template-columns: minmax(0, 1fr); }
    .hc-hero-main { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 14px; }
    .hc-hero-av { width: 72px; height: 72px; }
    .hc-hero-name { font-size: 22px; }
    .hc-watch { padding: 14px 16px; }
    .hc-path { padding: 14px 12px 12px; }
    .hc-path-track { display: none; }
    .hc-path-nodes { justify-content: flex-start; }
}

/* ============ Mana rank badges + aura FX (ported verbatim from the legacy community stylesheet) ============ */
.badg-level{display:inline-block;width:16px;height:16px;min-width:16px;min-height:16px;margin-right:5px;vertical-align:middle;flex-shrink:0;padding:0;border:0;border-radius:0;object-fit:contain;background:transparent}
img.badg-level{font-size:inherit;line-height:normal;color:inherit;overflow:visible}
.badg-level.level-admin{width:28px;height:28px;min-width:28px;min-height:28px;margin-right:6px}
.badg-level.level-custom{
  width:22px;height:22px;min-width:22px;min-height:22px;margin-right:6px;
  border:0!important;border-radius:4px;padding:0!important;background:transparent!important;
  box-shadow:none;object-fit:contain;
}

/* Custom badge FX — effects sit outside the icon; no box/border chrome */
.badg-aura{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin-right:6px;vertical-align:middle;
  position:relative;flex-shrink:0;overflow:visible;
  border:0!important;padding:0!important;background:transparent!important;
  box-shadow:none!important;border-radius:0!important;text-transform:none!important;
  font-size:0!important;line-height:0!important;letter-spacing:0!important;color:inherit!important;
}
.badg-aura .badg-level{margin-right:0!important;position:relative;z-index:2;border-radius:4px}
.badg-aura::before,
.badg-aura::after{
  content:"";position:absolute;pointer-events:none;z-index:1;
  border-style:solid;box-sizing:border-box;
}

@keyframes badg-slash-a{
  0%{transform:translate(-14px,10px) rotate(-38deg) scaleX(.2);opacity:0}
  35%{opacity:1}
  100%{transform:translate(14px,-10px) rotate(-38deg) scaleX(1.1);opacity:0}
}
@keyframes badg-slash-b{
  0%{transform:translate(12px,12px) rotate(42deg) scaleX(.15);opacity:0}
  40%{opacity:1}
  100%{transform:translate(-12px,-12px) rotate(42deg) scaleX(1);opacity:0}
}
@keyframes badg-sweep{
  0%{transform:translateX(-120%) skewX(-18deg);opacity:0}
  30%{opacity:1}
  100%{transform:translateX(120%) skewX(-18deg);opacity:0}
}
@keyframes badg-orbit{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes badg-rise{
  0%{transform:translateY(6px) scaleY(.4);opacity:0}
  40%{opacity:1}
  100%{transform:translateY(-10px) scaleY(1.1);opacity:0}
}
@keyframes badg-flash{
  0%,100%{opacity:.25}
  50%{opacity:1}
}
@keyframes badg-spin-slow{to{transform:rotate(360deg)}}
@keyframes badg-pulse-frame{
  0%,100%{opacity:.55;transform:scale(.92) rotate(0deg)}
  50%{opacity:1;transform:scale(1.08) rotate(3deg)}
}
@keyframes badg-spark-twinkle{
  0%,100%{opacity:.2;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.2)}
}
@keyframes badg-wave{
  0%{clip-path:polygon(0 60%,20% 45%,40% 62%,60% 40%,80% 58%,100% 42%,100% 100%,0 100%);opacity:.3}
  50%{clip-path:polygon(0 45%,20% 60%,40% 40%,60% 58%,80% 38%,100% 55%,100% 100%,0 100%);opacity:.85}
  100%{clip-path:polygon(0 55%,20% 38%,40% 58%,60% 42%,80% 60%,100% 40%,100% 100%,0 100%);opacity:.3}
}

/* 1 Soft glow — outer bloom (no frame box) */
.badg-aura--soft-glow::before{
  inset:-6px;border-radius:50%;border:0;
  background:radial-gradient(circle,rgba(147,197,253,.55) 0%,transparent 68%);
  animation:badg-pulse-frame 2.4s ease-in-out infinite;
}
/* 2 Neon glow */
.badg-aura--neon-glow::before{
  inset:-5px;border-radius:6px;border:0;
  box-shadow:0 0 8px 2px #22d3ee,0 0 14px 1px #a855f7;
  animation:badg-flash 1.4s ease-in-out infinite;
}
.badg-aura--neon-glow::after{
  inset:-2px;border-radius:4px;border:0;
  box-shadow:0 0 6px 1px #e879f9;opacity:.7;
  animation:badg-flash 1.4s ease-in-out infinite .35s;
}
/* 3 Magical energy — orbiting sparks */
.badg-aura--magical-energy::before{
  width:4px;height:4px;left:50%;top:50%;margin:-2px 0 0 -2px;border-radius:50%;border:0;
  background:#c084fc;box-shadow:12px 0 0 #60a5fa,-12px 0 0 #f472b6,0 12px 0 #34d399,0 -12px 0 #fbbf24;
  animation:badg-orbit 2.2s linear infinite;
}
.badg-aura--magical-energy::after{
  width:3px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -1.5px;border-radius:50%;border:0;
  background:#fff;box-shadow:8px 8px 0 #a78bfa,-8px -8px 0 #38bdf8,8px -8px 0 #fb7185,-8px 8px 0 #4ade80;
  animation:badg-orbit 1.6s linear infinite reverse;
}
/* 4 Pulsing glow */
.badg-aura--pulsing-glow::before{
  inset:-6px;border-radius:50%;border:0;
  box-shadow:0 0 0 2px rgba(96,165,250,.35),0 0 12px rgba(96,165,250,.55);
  animation:badg-pulse-frame 1.5s ease-in-out infinite;
}
/* 5 Breathing light — vertical light pillars */
.badg-aura--breathing-light::before,
.badg-aura--breathing-light::after{
  width:2px;height:26px;top:50%;left:50%;margin-top:-13px;border:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.95),transparent);
  filter:blur(.4px);
}
.badg-aura--breathing-light::before{margin-left:-14px;animation:badg-flash 2.2s ease-in-out infinite}
.badg-aura--breathing-light::after{margin-left:12px;animation:badg-flash 2.2s ease-in-out infinite .4s}
/* 6 Divine aura — cross rays */
.badg-aura--divine-aura::before{
  width:30px;height:2px;left:50%;top:50%;margin:-1px 0 0 -15px;border:0;
  background:linear-gradient(90deg,transparent,#fde68a,#fff,#fde68a,transparent);
  box-shadow:0 0 6px #fbbf24;animation:badg-flash 2s ease-in-out infinite;
}
.badg-aura--divine-aura::after{
  width:2px;height:30px;left:50%;top:50%;margin:-15px 0 0 -1px;border:0;
  background:linear-gradient(180deg,transparent,#fde68a,#fff,#fde68a,transparent);
  box-shadow:0 0 6px #fbbf24;animation:badg-flash 2s ease-in-out infinite .25s;
}
/* 7 Dark shadow — corner claws */
.badg-aura--dark-shadow::before{
  width:10px;height:10px;left:-4px;top:-4px;border:0;
  border-top:2px solid #111;border-left:2px solid #111;
  box-shadow:-2px -2px 6px rgba(0,0,0,.8);animation:badg-pulse-frame 2s ease-in-out infinite;
}
.badg-aura--dark-shadow::after{
  width:10px;height:10px;right:-4px;bottom:-4px;border:0;
  border-bottom:2px solid #111;border-right:2px solid #111;
  box-shadow:2px 2px 6px rgba(0,0,0,.8);animation:badg-pulse-frame 2s ease-in-out infinite .3s;
}
/* 8 Holy light — ascending beams */
.badg-aura--holy-light::before,
.badg-aura--holy-light::after{
  width:3px;bottom:2px;left:50%;
  background:linear-gradient(180deg,rgba(255,255,240,.95),transparent);
  filter:blur(.5px);
}
.badg-aura--holy-light::before{height:16px;margin-left:-8px;transform:rotate(-18deg);animation:badg-rise 1.8s ease-out infinite}
.badg-aura--holy-light::after{height:18px;margin-left:5px;transform:rotate(16deg);animation:badg-rise 1.8s ease-out infinite .35s}
/* 9 Infernal flames — rising flame tongues */
.badg-aura--infernal-flames::before,
.badg-aura--infernal-flames::after{
  width:5px;bottom:0;left:50%;border-radius:40% 40% 20% 20%;
  background:linear-gradient(180deg,#fbbf24,#ef4444 55%,transparent);
}
.badg-aura--infernal-flames::before{height:14px;margin-left:-9px;animation:badg-rise 1.1s ease-out infinite}
.badg-aura--infernal-flames::after{height:16px;margin-left:4px;animation:badg-rise 1.1s ease-out infinite .25s}
/* 10 Arcane energy — soft violet bloom + spin tint */
.badg-aura--arcane-energy::before{
  inset:-7px;border:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(167,139,250,.55),transparent 40%,rgba(196,181,253,.45),transparent 75%,rgba(167,139,250,.55));
  filter:blur(2px);animation:badg-spin-slow 4s linear infinite;
}
.badg-aura--arcane-energy::after{
  inset:-3px;border:0;border-radius:50%;
  box-shadow:0 0 10px rgba(139,92,246,.65);animation:badg-pulse-frame 2s ease-in-out infinite;
}
/* 11 Ice frost — crystal shards */
.badg-aura--ice-frost::before{
  width:8px;height:8px;left:-5px;top:2px;
  background:linear-gradient(135deg,rgba(224,242,254,.95),rgba(56,189,248,.4));
  clip-path:polygon(50% 0%,100% 100%,0% 100%);animation:badg-spark-twinkle 1.6s ease-in-out infinite;
}
.badg-aura--ice-frost::after{
  width:7px;height:7px;right:-4px;bottom:1px;
  background:linear-gradient(225deg,rgba(186,230,253,.95),rgba(14,165,233,.35));
  clip-path:polygon(50% 0%,100% 100%,0% 100%);transform:rotate(180deg);
  animation:badg-spark-twinkle 1.6s ease-in-out infinite .4s;
}
/* 12 Electric spark — lightning bolts */
.badg-aura--electric-spark::before{
  width:14px;height:14px;left:-6px;top:-2px;
  background:linear-gradient(135deg,transparent 40%,#fde047 42%,#38bdf8 55%,transparent 57%);
  clip-path:polygon(40% 0%,70% 0%,45% 40%,75% 40%,30% 100%,40% 55%,15% 55%);
  filter:drop-shadow(0 0 3px #38bdf8);animation:badg-flash .45s steps(2,end) infinite;
}
.badg-aura--electric-spark::after{
  width:12px;height:12px;right:-5px;bottom:-1px;
  background:#7dd3fc;
  clip-path:polygon(55% 0%,80% 0%,50% 45%,85% 45%,25% 100%,40% 55%,10% 55%);
  opacity:.75;animation:badg-flash .45s steps(2,end) infinite .2s;
}
/* 13 Poison mist — drifting blobs */
.badg-aura--poison-mist::before{
  width:10px;height:7px;left:-6px;top:4px;border-radius:60% 40% 50% 50%;
  background:rgba(74,222,128,.55);filter:blur(1.5px);animation:badg-sweep 2.8s ease-in-out infinite;
}
.badg-aura--poison-mist::after{
  width:8px;height:6px;right:-5px;bottom:3px;border-radius:50% 60% 40% 50%;
  background:rgba(21,128,61,.5);filter:blur(1.5px);animation:badg-sweep 2.8s ease-in-out infinite .6s reverse;
}
/* 14 Golden radiance — crown tips + sweep */
.badg-aura--golden-radiance::before{
  width:18px;height:6px;left:50%;top:-5px;margin-left:-9px;
  background:linear-gradient(90deg,transparent,#f59e0b,#fde68a,#f59e0b,transparent);
  clip-path:polygon(0 100%,20% 0,40% 100%,50% 20%,60% 100%,80% 0,100% 100%);
  animation:badg-flash 1.8s ease-in-out infinite;
}
.badg-aura--golden-radiance::after{
  width:120%;height:140%;left:-10%;top:-20%;
  background:linear-gradient(105deg,transparent 40%,rgba(253,230,138,.85) 50%,transparent 60%);
  animation:badg-sweep 2.2s ease-in-out infinite;
}
/* 15 Cosmic shimmer — corner stars */
.badg-aura--cosmic-shimmer::before{
  width:6px;height:6px;left:-5px;top:-4px;background:#e879f9;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-spark-twinkle 1.3s ease-in-out infinite;
}
.badg-aura--cosmic-shimmer::after{
  width:5px;height:5px;right:-4px;bottom:-3px;background:#22d3ee;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-spark-twinkle 1.3s ease-in-out infinite .45s;
}
/* 16 Blood crimson — diagonal slash */
.badg-aura--blood-crimson::before{
  width:28px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -14px;
  background:linear-gradient(90deg,transparent,#7f1d1d,#ef4444,#7f1d1d,transparent);
  transform-origin:center;animation:badg-slash-a 1.5s ease-in-out infinite;
}
.badg-aura--blood-crimson::after{
  width:22px;height:2px;left:50%;top:50%;margin:-1px 0 0 -11px;
  background:linear-gradient(90deg,transparent,#991b1b,#fca5a5,transparent);
  animation:badg-slash-b 1.5s ease-in-out infinite .2s;
}
/* 17 Emerald pulse */
.badg-aura--emerald-pulse::before{
  inset:-6px;border:0;border-radius:50%;
  box-shadow:0 0 0 2px rgba(52,211,153,.4),0 0 12px rgba(16,185,129,.55);
  animation:badg-pulse-frame 1.7s ease-in-out infinite;
}
/* 18 Void ripple — water slash / wave */
.badg-aura--void-ripple::before{
  left:-8px;right:-8px;bottom:-4px;height:12px;
  background:linear-gradient(180deg,rgba(56,189,248,.55),transparent);
  animation:badg-wave 1.4s ease-in-out infinite;
}
.badg-aura--void-ripple::after{
  width:26px;height:2.5px;left:50%;top:40%;margin-left:-13px;
  background:linear-gradient(90deg,transparent,#67e8f9,#fff,#67e8f9,transparent);
  animation:badg-slash-a 1.8s ease-out infinite;
}
/* 19 Storm crackle — X slash bolts */
.badg-aura--storm-crackle::before{
  width:26px;height:2px;left:50%;top:50%;margin:-1px 0 0 -13px;
  background:linear-gradient(90deg,transparent,#e2e8f0,#38bdf8,#e2e8f0,transparent);
  animation:badg-slash-a 1.1s linear infinite;
}
.badg-aura--storm-crackle::after{
  width:26px;height:2px;left:50%;top:50%;margin:-1px 0 0 -13px;
  background:linear-gradient(90deg,transparent,#fde047,#fff,transparent);
  animation:badg-slash-b 1.1s linear infinite .15s;
}
/* 20 Celestial shimmer — wing sweeps */
.badg-aura--celestial-shimmer::before,
.badg-aura--celestial-shimmer::after{
  width:10px;height:14px;top:50%;margin-top:-7px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(196,181,253,.35),transparent);
  filter:blur(.3px);
}
.badg-aura--celestial-shimmer::before{
  left:-8px;clip-path:polygon(100% 50%,0 0,20% 50%,0 100%);
  animation:badg-flash 2s ease-in-out infinite;
}
.badg-aura--celestial-shimmer::after{
  right:-8px;clip-path:polygon(0 50%,100% 0,80% 50%,100% 100%);
  animation:badg-flash 2s ease-in-out infinite .3s;
}

@keyframes badg-fall{
  0%{transform:translate(0,-8px) rotate(0deg);opacity:0}
  20%{opacity:1}
  100%{transform:translate(4px,14px) rotate(40deg);opacity:0}
}
@keyframes badg-fall-b{
  0%{transform:translate(0,-6px) rotate(0deg);opacity:0}
  25%{opacity:1}
  100%{transform:translate(-5px,12px) rotate(-35deg);opacity:0}
}
@keyframes badg-arc-slash{
  0%{transform:rotate(-50deg) scaleX(.2);opacity:0}
  40%{opacity:1}
  100%{transform:rotate(40deg) scaleX(1.05);opacity:0}
}
@keyframes badg-rift{
  0%,100%{transform:scaleY(.35);opacity:.35}
  50%{transform:scaleY(1.15);opacity:1}
}
@keyframes badg-ribbon{
  0%{transform:translateX(-100%) skewX(-12deg);opacity:0}
  40%{opacity:.9}
  100%{transform:translateX(100%) skewX(-12deg);opacity:0}
}
@keyframes badg-step{
  0%{opacity:0;transform:translate(6px,0)}
  30%{opacity:.7}
  100%{opacity:0;transform:translate(-8px,0)}
}

/* 21 Sakura petal fall */
.badg-aura--sakura-petals::before{
  width:7px;height:5px;left:2px;top:-6px;border-radius:60% 0 60% 0;
  background:linear-gradient(135deg,#fda4af,#fb7185);animation:badg-fall 1.8s ease-in infinite;
}
.badg-aura--sakura-petals::after{
  width:6px;height:4px;right:1px;top:-4px;border-radius:0 60% 0 60%;
  background:linear-gradient(225deg,#fecdd3,#f472b6);animation:badg-fall-b 1.8s ease-in infinite .45s;
}
/* 22 Blade arc slash */
.badg-aura--blade-arc::before{
  width:28px;height:28px;left:50%;top:50%;margin:-14px 0 0 -14px;
  border:2px solid transparent;border-top-color:#e2e8f0;border-right-color:rgba(148,163,184,.7);
  border-radius:50%;transform-origin:center;animation:badg-arc-slash 1.4s ease-out infinite;
  box-shadow:0 0 4px rgba(226,232,240,.5);
}
.badg-aura--blade-arc::after{
  width:22px;height:2px;left:50%;top:50%;margin:-1px 0 0 -11px;
  background:linear-gradient(90deg,transparent,#94a3b8,#fff,transparent);
  animation:badg-slash-a 1.4s ease-out infinite .15s;
}
/* 23 Phoenix ember rise */
.badg-aura--phoenix-ember::before{
  width:4px;height:4px;left:2px;bottom:0;border-radius:50%;
  background:#fb923c;box-shadow:0 0 4px #f97316;animation:badg-rise 1.3s ease-out infinite;
}
.badg-aura--phoenix-ember::after{
  width:3px;height:3px;right:3px;bottom:1px;border-radius:50%;
  background:#fde047;box-shadow:0 0 4px #ef4444;animation:badg-rise 1.3s ease-out infinite .35s;
}
/* 24 Abyss vertical rift */
.badg-aura--abyss-rift::before{
  width:2px;height:26px;left:50%;top:50%;margin:-13px 0 0 -1px;
  background:linear-gradient(180deg,transparent,#7c3aed,#c084fc,#7c3aed,transparent);
  box-shadow:0 0 6px #6d28d9;animation:badg-rift 1.6s ease-in-out infinite;
}
.badg-aura--abyss-rift::after{
  width:8px;height:26px;left:50%;top:50%;margin:-13px 0 0 -4px;
  background:linear-gradient(90deg,transparent,rgba(76,29,149,.45),transparent);
  animation:badg-rift 1.6s ease-in-out infinite .2s;
}
/* 25 Lunar crescent */
.badg-aura--lunar-crescent::before{
  width:18px;height:18px;left:50%;top:50%;margin:-9px 0 0 -9px;border-radius:50%;
  box-shadow:4px -2px 0 1px #e2e8f0;animation:badg-flash 2.4s ease-in-out infinite;
}
.badg-aura--lunar-crescent::after{
  width:3px;height:3px;right:-2px;top:2px;border-radius:50%;background:#f8fafc;
  box-shadow:0 0 4px #fff;animation:badg-spark-twinkle 1.5s ease-in-out infinite;
}
/* 26 Solar flare beams */
.badg-aura--solar-flare::before{
  width:30px;height:2px;left:50%;top:50%;margin:-1px 0 0 -15px;
  background:linear-gradient(90deg,transparent,#fbbf24,#fff7ed,#fbbf24,transparent);
  transform:rotate(-28deg);animation:badg-flash 1.2s ease-in-out infinite;
}
.badg-aura--solar-flare::after{
  width:24px;height:2px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:linear-gradient(90deg,transparent,#f59e0b,#fde68a,transparent);
  transform:rotate(32deg);animation:badg-flash 1.2s ease-in-out infinite .25s;
}
/* 27 Dragon scale tips */
.badg-aura--dragon-scale::before{
  width:9px;height:8px;left:-5px;top:4px;
  background:linear-gradient(180deg,#4ade80,#166534);clip-path:polygon(50% 0%,100% 40%,80% 100%,20% 100%,0 40%);
  animation:badg-pulse-frame 2s ease-in-out infinite;
}
.badg-aura--dragon-scale::after{
  width:8px;height:7px;right:-4px;bottom:3px;
  background:linear-gradient(180deg,#86efac,#14532d);clip-path:polygon(50% 0%,100% 40%,80% 100%,20% 100%,0 40%);
  animation:badg-pulse-frame 2s ease-in-out infinite .35s;
}
/* 28 Spectral aftertrail */
.badg-aura--spectral-trail::before{
  width:22px;height:22px;left:6px;top:3px;border:0;border-radius:4px;
  background:rgba(167,139,250,.25);animation:badg-step 1.5s ease-out infinite;
}
.badg-aura--spectral-trail::after{
  width:22px;height:22px;left:10px;top:3px;border:0;border-radius:4px;
  background:rgba(196,181,253,.15);animation:badg-step 1.5s ease-out infinite .25s;
}
/* 29 Quartz prism shards */
.badg-aura--quartz-prism::before{
  width:9px;height:10px;left:-6px;top:-2px;
  background:linear-gradient(135deg,#e0e7ff,#a5b4fc 50%,#6366f1);
  clip-path:polygon(50% 0%,100% 100%,0 100%);animation:badg-spark-twinkle 1.7s ease-in-out infinite;
}
.badg-aura--quartz-prism::after{
  width:8px;height:9px;right:-5px;bottom:-1px;
  background:linear-gradient(225deg,#fae8ff,#e879f9 50%,#a21caf);
  clip-path:polygon(0 0,100% 0,50% 100%);animation:badg-spark-twinkle 1.7s ease-in-out infinite .4s;
}
/* 30 Cherry dual slash */
.badg-aura--cherry-blade::before{
  width:28px;height:2.5px;left:50%;top:50%;margin:-1px 0 0 -14px;
  background:linear-gradient(90deg,transparent,#be123c,#fb7185,#be123c,transparent);
  animation:badg-slash-a 1.3s ease-in-out infinite;
}
.badg-aura--cherry-blade::after{
  width:24px;height:2px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:linear-gradient(90deg,transparent,#9f1239,#fda4af,transparent);
  animation:badg-slash-b 1.3s ease-in-out infinite .18s;
}
/* 31 Tsunami crest */
.badg-aura--tsunami-crest::before{
  left:-10px;right:-10px;top:-6px;height:14px;
  background:linear-gradient(180deg,rgba(56,189,248,.7),transparent);
  clip-path:polygon(0 80%,15% 30%,30% 70%,50% 10%,70% 65%,85% 25%,100% 75%,100% 100%,0 100%);
  animation:badg-wave 1.5s ease-in-out infinite;
}
.badg-aura--tsunami-crest::after{
  width:20px;height:2px;left:50%;bottom:0;margin-left:-10px;
  background:linear-gradient(90deg,transparent,#67e8f9,#fff,transparent);
  animation:badg-sweep 2s ease-in-out infinite;
}
/* 32 Magma ground rift */
.badg-aura--magma-rift::before{
  left:-6px;right:-6px;bottom:-3px;height:8px;
  background:linear-gradient(90deg,#7f1d1d,#f97316,#fbbf24,#ef4444,#7f1d1d);
  clip-path:polygon(0 100%,10% 40%,25% 90%,40% 20%,55% 85%,70% 30%,85% 95%,100% 50%,100% 100%);
  animation:badg-flicker-lite 1.1s ease-in-out infinite;
}
.badg-aura--magma-rift::after{
  width:3px;height:10px;left:50%;bottom:2px;margin-left:-1px;
  background:linear-gradient(180deg,#fde047,#ef4444,transparent);animation:badg-rise 1.2s ease-out infinite;
}
@keyframes badg-flicker-lite{0%,100%{opacity:.55;filter:brightness(1)}40%{opacity:1;filter:brightness(1.3)}70%{opacity:.7}}
/* 33 Aurora ribbon flow */
.badg-aura--aurora-ribbon::before{
  width:140%;height:5px;left:-20%;top:2px;
  background:linear-gradient(90deg,transparent,#34d399,#22d3ee,#a78bfa,transparent);
  filter:blur(1px);animation:badg-ribbon 2.4s ease-in-out infinite;
}
.badg-aura--aurora-ribbon::after{
  width:140%;height:4px;left:-20%;bottom:2px;
  background:linear-gradient(90deg,transparent,#c084fc,#38bdf8,#4ade80,transparent);
  filter:blur(1px);animation:badg-ribbon 2.4s ease-in-out infinite .5s reverse;
}
/* 34 Shadow step afterimage */
.badg-aura--shadow-step::before{
  width:16px;height:16px;left:8px;top:4px;border-radius:2px;
  background:rgba(15,15,20,.55);animation:badg-step 1.2s ease-out infinite;
}
.badg-aura--shadow-step::after{
  width:16px;height:16px;left:12px;top:4px;border-radius:2px;
  background:rgba(15,15,20,.3);animation:badg-step 1.2s ease-out infinite .2s;
}
/* 35 Crystal lattice corners */
.badg-aura--crystal-lattice::before{
  width:8px;height:8px;left:-4px;top:-4px;
  border-top:1.5px solid #67e8f9;border-left:1.5px solid #67e8f9;
  box-shadow:-1px -1px 0 #a5f3fc;animation:badg-pulse-frame 1.8s ease-in-out infinite;
}
.badg-aura--crystal-lattice::after{
  width:8px;height:8px;right:-4px;bottom:-4px;
  border-bottom:1.5px solid #67e8f9;border-right:1.5px solid #67e8f9;
  box-shadow:1px 1px 0 #a5f3fc;animation:badg-pulse-frame 1.8s ease-in-out infinite .3s;
}
/* 36 Wind multi-cut */
.badg-aura--wind-slash::before{
  width:30px;height:1.5px;left:50%;top:40%;margin-left:-15px;
  background:linear-gradient(90deg,transparent,#cbd5e1,#fff,transparent);
  animation:badg-sweep 1.1s ease-out infinite;
}
.badg-aura--wind-slash::after{
  width:26px;height:1.5px;left:50%;top:58%;margin-left:-13px;
  background:linear-gradient(90deg,transparent,#94a3b8,#e2e8f0,transparent);
  animation:badg-sweep 1.1s ease-out infinite .2s;
}
/* 37 Royal crest crown */
.badg-aura--royal-crest::before{
  width:22px;height:7px;left:50%;top:-7px;margin-left:-11px;border:0;
  background:linear-gradient(180deg,#fde68a,#b45309);
  clip-path:polygon(0 100%,12% 35%,25% 100%,37% 0,50% 100%,63% 0,75% 100%,88% 35%,100% 100%);
  animation:badg-flash 2s ease-in-out infinite;
}
.badg-aura--royal-crest::after{
  inset:-4px;border:0;border-radius:50%;
  box-shadow:0 0 10px rgba(251,191,36,.45);
  animation:badg-pulse-frame 2.2s ease-in-out infinite;
}
/* 38 Nebula dust orbit */
.badg-aura--nebula-dust::before{
  width:3px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -1.5px;border-radius:50%;
  background:#f0abfc;box-shadow:11px 0 0 #818cf8,-8px 6px 0 #22d3ee,5px -9px 0 #fb7185,-6px -7px 0 #a3e635;
  animation:badg-orbit 3s linear infinite;
}
.badg-aura--nebula-dust::after{
  width:2px;height:2px;left:50%;top:50%;margin:-1px 0 0 -1px;border-radius:50%;
  background:#fff;box-shadow:8px 5px 0 #c084fc,-9px -3px 0 #38bdf8,0 10px 0 #e879f9;
  animation:badg-orbit 2.2s linear infinite reverse;
}
/* 39 Frost blade slash */
.badg-aura--frost-blade::before{
  width:28px;height:3px;left:50%;top:50%;margin:-1.5px 0 0 -14px;
  background:linear-gradient(90deg,transparent,#bae6fd,#fff,#7dd3fc,transparent);
  animation:badg-slash-a 1.4s ease-out infinite;
}
.badg-aura--frost-blade::after{
  width:6px;height:6px;right:-3px;top:0;
  background:#e0f2fe;clip-path:polygon(50% 0%,100% 100%,0 100%);
  animation:badg-spark-twinkle 1.4s ease-in-out infinite .2s;
}
/* 40 Venom fang tips */
.badg-aura--venom-fang::before{
  width:7px;height:10px;left:0;top:-5px;
  background:linear-gradient(180deg,#86efac,#166534);clip-path:polygon(50% 100%,0 0,100% 0);
  animation:badg-pulse-frame 1.5s ease-in-out infinite;
}
.badg-aura--venom-fang::after{
  width:7px;height:10px;right:0;top:-5px;
  background:linear-gradient(180deg,#4ade80,#14532d);clip-path:polygon(50% 100%,0 0,100% 0);
  animation:badg-pulse-frame 1.5s ease-in-out infinite .25s;
}
/* 41 Thunder flash */
.badg-aura--thunder-ring::before{
  inset:-6px;border:0;border-radius:50%;
  box-shadow:0 0 8px 2px #fde047,0 0 14px #38bdf8;
  animation:badg-flash .55s steps(2,end) infinite;
}
.badg-aura--thunder-ring::after{
  width:10px;height:10px;left:50%;top:-4px;margin-left:-5px;background:#fef08a;border:0;
  clip-path:polygon(40% 0%,70% 0%,45% 40%,80% 40%,25% 100%,35% 55%,10% 55%);
  animation:badg-flash .55s steps(2,end) infinite .15s;
}
/* 42 Spirit orbit rings */
.badg-aura--spirit-orbits::before{
  inset:-8px;border:1.5px solid rgba(167,139,250,.55);border-radius:50%;
  border-bottom-color:transparent;border-left-color:transparent;
  animation:badg-spin-slow 2.5s linear infinite;
}
.badg-aura--spirit-orbits::after{
  inset:-5px;border:1.5px solid rgba(56,189,248,.5);border-radius:50%;
  border-top-color:transparent;border-right-color:transparent;
  animation:badg-spin-slow 1.8s linear infinite reverse;
}
/* 43 Ash fall drift */
.badg-aura--ash-fall::before{
  width:3px;height:3px;left:4px;top:-6px;border-radius:50%;background:#a8a29e;
  box-shadow:6px -2px 0 #78716c,-2px 2px 0 #57534e;animation:badg-fall 2s linear infinite;
}
.badg-aura--ash-fall::after{
  width:2px;height:2px;right:3px;top:-4px;border-radius:50%;background:#d6d3d1;
  animation:badg-fall-b 2s linear infinite .5s;
}
/* 44 Moonlight veil sweep */
.badg-aura--moonlight-veil::before{
  width:8px;height:28px;left:50%;top:50%;margin:-14px 0 0 -4px;
  background:linear-gradient(90deg,transparent,rgba(226,232,240,.85),transparent);
  filter:blur(.6px);animation:badg-ribbon 2.8s ease-in-out infinite;
}
.badg-aura--moonlight-veil::after{
  width:4px;height:20px;left:50%;top:50%;margin:-10px 0 0 -2px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.7),transparent);
  animation:badg-flash 2.8s ease-in-out infinite .4s;
}
/* 45 Crimson X-mark */
.badg-aura--crimson-mark::before{
  width:24px;height:2.5px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:#dc2626;transform:rotate(45deg);box-shadow:0 0 4px #991b1b;
  animation:badg-flash 1.6s ease-in-out infinite;
}
.badg-aura--crimson-mark::after{
  width:24px;height:2.5px;left:50%;top:50%;margin:-1px 0 0 -12px;
  background:#b91c1c;transform:rotate(-45deg);box-shadow:0 0 4px #7f1d1d;
  animation:badg-flash 1.6s ease-in-out infinite .2s;
}
/* 46 Jade corner brackets */
.badg-aura--jade-brackets::before{
  width:9px;height:9px;left:-5px;top:-5px;
  border-top:2px solid #34d399;border-left:2px solid #34d399;
  animation:badg-pulse-frame 2.1s ease-in-out infinite;
}
.badg-aura--jade-brackets::after{
  width:9px;height:9px;right:-5px;bottom:-5px;
  border-bottom:2px solid #10b981;border-right:2px solid #10b981;
  animation:badg-pulse-frame 2.1s ease-in-out infinite .35s;
}
/* 47 Starfall rain */
.badg-aura--starfall-rain::before{
  width:5px;height:5px;left:3px;top:-8px;background:#fde68a;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-fall 1.6s linear infinite;
}
.badg-aura--starfall-rain::after{
  width:4px;height:4px;right:2px;top:-6px;background:#e0e7ff;
  clip-path:polygon(50% 0%,61% 35%,100% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,0 35%,39% 35%);
  animation:badg-fall-b 1.6s linear infinite .4s;
}
/* 48 Void diagonal tear */
.badg-aura--void-tear::before{
  width:3px;height:28px;left:50%;top:50%;margin:-14px 0 0 -1.5px;
  background:linear-gradient(180deg,transparent,#4c1d95,#c084fc,#2e1065,transparent);
  transform:rotate(-28deg);box-shadow:0 0 8px #6d28d9;animation:badg-rift 1.4s ease-in-out infinite;
}
.badg-aura--void-tear::after{
  width:22px;height:22px;left:50%;top:50%;margin:-11px 0 0 -11px;
  background:radial-gradient(circle,rgba(76,29,149,.35) 0%,transparent 70%);
  clip-path:polygon(0 45%,100% 20%,100% 55%,0 80%);animation:badg-flash 1.4s ease-in-out infinite;
}
/* 49 Mirror glass shards */
.badg-aura--mirror-shard::before{
  width:8px;height:10px;left:-5px;top:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(148,163,184,.4));
  clip-path:polygon(20% 0%,100% 15%,70% 100%,0 80%);animation:badg-spark-twinkle 1.5s ease-in-out infinite;
}
.badg-aura--mirror-shard::after{
  width:7px;height:9px;right:-4px;bottom:0;
  background:linear-gradient(225deg,rgba(226,232,240,.95),rgba(100,116,139,.35));
  clip-path:polygon(0 20%,90% 0,100% 90%,30% 100%);animation:badg-spark-twinkle 1.5s ease-in-out infinite .35s;
}
/* 50 Elite sigil */
.badg-aura--elite-sigil::before{
  inset:-7px;border:0;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(251,191,36,.55),0 0 12px rgba(245,158,11,.45);
  animation:badg-spin-slow 5s linear infinite;
}
.badg-aura--elite-sigil::after{
  width:16px;height:16px;left:50%;top:50%;margin:-8px 0 0 -8px;border:0;
  background:radial-gradient(circle,rgba(253,230,138,.35) 0%,transparent 70%);
  animation:badg-pulse-frame 2s ease-in-out infinite;
}