.topic-page{--topic-accent:#66d9ef;--topic-soft:#143a4a;--topic-ring:#3c6a79;background:#090d14;color:#f3f7fb;font-family:Inter,Arial,sans-serif}
.topic-page *{box-sizing:border-box}
.topic-page :focus-visible{outline:2px solid var(--topic-accent);outline-offset:3px}
.topic-page.topic-ffxiv{--topic-accent:#79dce9;--topic-soft:#142e49;--topic-ring:#365e7a;background:radial-gradient(ellipse at 50% -8%,#182b4d 0,transparent 45%),#090e1a}
.topic-page.topic-gacha{--topic-accent:#e9c377;--topic-soft:#392f2a;--topic-ring:#77603d}
.topic-page.topic-genshin{--topic-accent:#c6dfb1;--topic-soft:#18383a;--topic-ring:#4c796f}
.topic-page.topic-hsr{--topic-accent:#b5a5ff;--topic-soft:#242449;--topic-ring:#6558a0}
.topic-page.topic-zzz{--topic-accent:#e7e645;--topic-soft:#34351c;--topic-ring:#888842}
.topic-page.topic-endfield{--topic-accent:#e5a365;--topic-soft:#39261d;--topic-ring:#8b5d3b}
.topic-page.topic-nte{--topic-accent:#77e2e6;--topic-soft:#273b4c;--topic-ring:#4a8aa2}
.topic-page .top-game-item.is-active{background:var(--topic-soft);box-shadow:inset 0 -2px var(--topic-accent)}
.topic-shell{width:min(1540px,calc(100% - 52px));margin:auto;padding-bottom:84px;min-width:0}
.topic-wrap{width:min(1540px,calc(100% - 52px));margin:auto}
.topic-breadcrumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:25px 0 20px;font-size:12px;color:#8295a9}
.topic-breadcrumb a{color:#9fb8cb;text-decoration:none}.topic-breadcrumb a:hover{color:var(--topic-accent)}
.topic-hero{position:relative;min-height:360px;overflow:hidden;border:1px solid #2b4056;border-radius:20px;background:#112134;display:flex;align-items:end;isolation:isolate}
.topic-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.topic-ffxiv .topic-hero img{filter:hue-rotate(172deg) saturate(.65)}
.topic-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,11,25,.95),rgba(5,11,25,.64) 55%,rgba(5,11,25,.12)),linear-gradient(0deg,rgba(5,11,25,.72),transparent 65%);z-index:-1}
.topic-hero-copy{max-width:820px;padding:48px clamp(24px,4vw,58px)}
.topic-kicker,.topic-eyebrow{color:var(--topic-accent);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.topic-hero h1{font-size:clamp(38px,4.5vw,70px);line-height:1.04;letter-spacing:-.045em;margin:16px 0}
.topic-hero p{max-width:730px;color:#d2deeb;line-height:1.62;font-size:clamp(15px,1.25vw,18px);margin:0}
.topic-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.topic-badges span{border:1px solid var(--topic-ring);background:var(--topic-soft);padding:8px 11px;border-radius:99px;color:#e7f7ff;font-size:11px;font-weight:800;letter-spacing:.08em}
.topic-section{margin-top:54px;scroll-margin-top:90px}.topic-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;border-bottom:1px solid #273749;padding-bottom:18px;margin-bottom:19px}
.topic-section-head h2{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.035em;margin:6px 0 0}.topic-section-head p{color:#9cacbc;font-size:13px;line-height:1.5;margin:0;max-width:590px}
.topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.topic-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic-card,.topic-info,.topic-update,.topic-banner,.topic-game{border:1px solid #27394a;border-radius:12px;background:#111923;min-width:0}
.topic-card{display:flex;flex-direction:column;padding:20px;text-decoration:none;color:inherit;transition:background .15s,border-color .15s}.topic-card:hover,.topic-game:hover{background:#172330;border-color:var(--topic-ring)}
.topic-card small,.topic-update small,.topic-banner small{color:var(--topic-accent);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.topic-card h3{font-size:17px;line-height:1.25;margin:10px 0 8px}.topic-card p,.topic-info p{font-size:13px;line-height:1.58;color:#a8b9c9;margin:0}.topic-card .topic-arrow{color:var(--topic-accent);font-weight:800;margin-top:auto;padding-top:20px;font-size:12px}
.topic-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px;background:linear-gradient(115deg,#142d48,#151b37 52%,#171d2f);border:1px solid #395d75;border-radius:18px;padding:clamp(20px,3vw,38px)}
.topic-feature h2{font-size:clamp(30px,3vw,48px);margin:8px 0 12px;letter-spacing:-.04em}.topic-feature p{color:#bfcede;line-height:1.65}.topic-feature img{width:74px;height:74px;object-fit:contain}
.topic-feature-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topic-feature-list a{padding:12px 14px;background:#0d1b2bbd;border:1px solid #38526a;border-radius:8px;text-decoration:none;color:#e2f3fa;font-size:13px;font-weight:700}.topic-feature-list a:hover{border-color:var(--topic-accent)}
.topic-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.topic-info{padding:19px;scroll-margin-top:90px}.topic-info h3{font-size:16px;margin:0 0 9px}
.topic-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:8px;margin:0 0 18px;scrollbar-width:thin}.topic-tabs button{white-space:nowrap;padding:10px 14px;border-radius:8px;border:1px solid #30475b;background:#101a29;color:#aebfd1;font:700 12px Inter,Arial,sans-serif;cursor:pointer}.topic-tabs button[aria-selected=true]{background:var(--topic-soft);border-color:var(--topic-accent);color:#fff}
.topic-role-group{margin:24px 0}.topic-role-group[hidden]{display:none}.topic-role-group h3{font-size:13px;letter-spacing:.12em;color:var(--topic-accent);text-transform:uppercase}
.topic-job-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.topic-job{border:1px solid #293d52;background:#101a29;border-radius:10px;scroll-margin-top:90px;min-width:0}.topic-job summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;padding:14px}.topic-job summary::-webkit-details-marker{display:none}.topic-job img{width:42px;height:42px;object-fit:contain;flex:none}.topic-job strong{display:block;font-size:13px}.topic-job small{display:block;color:#99afc1;margin-top:4px;font-size:11px}.topic-job p{padding:0 14px 14px;color:#b1c0ce;font-size:12px;line-height:1.5;margin:0}.topic-job[open]{border-color:var(--topic-accent)}
.topic-link-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.topic-link-panel{border:1px solid #27394a;border-radius:12px;padding:18px;background:#111923}.topic-link-panel h3{font-size:14px;color:var(--topic-accent);margin:0 0 11px;text-transform:uppercase;letter-spacing:.08em}.topic-link-panel a{display:block;padding:10px 0;color:#d9e6ef;text-decoration:none;border-top:1px solid #273444;font-size:13px}.topic-link-panel a:hover{color:var(--topic-accent)}
.topic-source{font-size:11px;color:#879bad;line-height:1.5;margin:17px 0}.topic-source a{color:#8ccde4}.topic-update{padding:15px}.topic-update strong{display:block;font-size:13px;margin:8px 0}.topic-update time{font-size:11px;color:#8da0b3}
.topic-game{overflow:hidden;color:inherit;text-decoration:none;display:block;transition:background .15s,border-color .15s}.topic-game img{width:100%;height:190px;object-fit:cover;display:block}.topic-game-copy{padding:17px}.topic-game h3{font-size:20px;margin:5px 0 9px}.topic-game p{font-size:12px;color:#adbbc9;line-height:1.5;margin:5px 0}.topic-game b{font-size:11px;color:var(--topic-accent)}
.topic-banner{padding:20px;scroll-margin-top:90px}.topic-banner h3{font-size:20px;margin:10px 0}.topic-banner p{color:#bdcbd8;font-size:13px;line-height:1.5;margin:6px 0}.topic-banner strong{color:#f5f5e7}.topic-banner a{display:inline-block;color:var(--topic-accent);font-size:12px;font-weight:800;margin-top:8px}
.topic-topic details{border:1px solid #2b4055;background:#111923;border-radius:10px;margin:8px 0;scroll-margin-top:90px}.topic-topic summary{cursor:pointer;padding:17px 18px;font-weight:800;font-size:14px}.topic-topic p{padding:0 18px 18px;color:#aabacc;line-height:1.62;font-size:13px;margin:0}.topic-topic details[open]{border-color:var(--topic-ring)}
.topic-status{font-size:12px;color:#8da6b9;line-height:1.6}.topic-footer{border-top:1px solid #253546;padding:25px 0;color:#8697a8;font-size:12px}.topic-footer .topic-wrap{display:flex;justify-content:space-between;gap:12px}.topic-footer a{color:#dbeef5;text-decoration:none}
@media(max-width:1150px){.topic-grid,.topic-job-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.topic-game img{height:155px}}
@media(max-width:820px){.topic-grid,.topic-grid.three,.topic-grid.two,.topic-job-grid,.topic-link-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.topic-feature{grid-template-columns:1fr}.topic-section-head{display:block}.topic-section-head p{margin-top:7px}}
@media(max-width:520px){.topic-shell,.topic-wrap{width:calc(100% - 28px)}.topic-breadcrumb{margin:15px 0}.topic-hero{min-height:320px}.topic-hero-copy{padding:27px 21px}.topic-hero h1{font-size:36px}.topic-grid,.topic-grid.two,.topic-grid.three,.topic-job-grid,.topic-link-columns,.topic-detail-grid,.topic-feature-list{grid-template-columns:1fr}.topic-section{margin-top:39px}.topic-card{padding:17px}.topic-game img{height:190px}.topic-footer .topic-wrap{display:block}.topic-footer span{display:block;margin-top:8px}}