:root { --orange:#ff8a13; --reply-border:#e59961; } * { box-sizing:border-box; } body { margin:0; min-width:1120px; color:#171717; font-family:"Microsoft YaHei","Noto Sans SC",sans-serif; background-color:#252526; background-image:url("assets/web_bg.png"),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-position:center top,center top,center top; background-size:max(1920px,100vw) auto,60px 60px,60px 60px; background-repeat:no-repeat,repeat,repeat; background-attachment:fixed; } a { color:inherit; text-decoration:none; }.community-shell { min-height:100vh; overflow:hidden; }.topbar { height:92px; display:grid; grid-template-columns:360px 1fr 268px; align-items:stretch; color:#f7f7f7; background:rgba(20,15,16,.96); border-bottom:2px solid rgba(255,255,255,.07); }.brand { display:grid; place-items:center start; padding-left:20px; }.brand img { width:175px; height:65px; object-fit:contain; } .topbar > nav { display:flex; justify-content:space-around; align-items:stretch; } .topbar > nav > a { min-width:180px; display:grid; place-items:center; position:relative; font-size:29px; font-weight:bold; letter-spacing:5px; } .topbar > nav > a:hover,.topbar > nav > a.is-active { color:var(--orange); } .topbar > nav > a.is-active::after { content:""; position:absolute; bottom:0; width:182px; height:6px; background:var(--orange); }.download { background:url("assets/web_download_btn.png") center / 268px 91px no-repeat; }.community-bar { height:73px; padding:0 max(78px,calc((100vw - 1740px)/2)); display:flex; align-items:center; justify-content:flex-end; gap:12px; color:#f4f4f4; font-size:22px; background:rgba(0,0,0,.3); }.community-bar .bell { font-size:29px; color:#fff; }.community-bar b { padding:2px 8px; color:#0d3110; border-radius:15px; background:#8df442; font-size:17px; }.community-bar i { height:37px; border-left:1px solid #eee; margin:0 8px; }.community-bar .logout { margin-left:70px; color:#1fbaff; }
.post-layout { width:min(1738px,calc(100vw - 182px)); margin:0 auto; }.post-card,.reply-box,.comments { margin-bottom:12px; padding:24px 70px; background:rgba(249,249,249,.96); }.author { display:flex; align-items:center; gap:20px; }.avatar { width:88px; height:88px; flex:0 0 88px; display:grid; place-items:center; color:rgba(255,255,255,.9); border-radius:3px; font-size:30px; font-weight:bold; transition:transform .15s,box-shadow .15s; }.avatar-purple { background:radial-gradient(circle at 30% 25%,#efbaff,#643e9d 55%,#1e174e); }.avatar-gold { background:radial-gradient(circle at 65% 20%,#f6d284,#9b5c1d 62%,#302111); }.profile-avatar-link { flex:0 0 auto; }.profile-avatar-link:hover .avatar { transform:scale(1.04); box-shadow:0 0 0 3px #ff8a13; }.profile-name-link { display:inline-block; }.profile-name-link:hover { color:#df813e; }.author strong { display:block; font-size:24px; }.author small { display:block; margin-top:12px; font-size:16px; }.post-card h1 { display:flex; align-items:center; gap:16px; margin:15px 0 22px; font-size:23px; }.post-card h1>span:first-child { padding:5px 16px; color:#111; background:#ff3942; font-size:20px; }.post-card>p { margin:0 0 20px; font-size:22px; line-height:1.65; }.post-image-placeholder { height:440px; display:grid; place-items:center; color:#ddd; background:linear-gradient(130deg,#192118,#6a5628 48%,#1b1b1b); font-size:28px; letter-spacing:6px; }.post-card time { display:block; margin-top:36px; color:#555; font-size:18px; }
.post-actions { margin:24px 0 0; display:flex; justify-content:flex-end; gap:14px; }.post-actions[hidden] { display:none; }.post-actions a,.post-actions button { min-width:116px; padding:10px 18px; border:1px solid #d88448; background:#fff; color:#b75d1d; text-align:center; cursor:pointer; font:16px "Microsoft YaHei",sans-serif; }.post-actions button { color:#c53030; border-color:#d67a7a; }.post-actions a:hover { color:#fff; background:#df813e; }.post-actions button:hover { color:#fff; background:#c73c3c; }.post-card #postContent img:not(.bbs-emote),.post-card #postContent video { display:block; max-width:100%; max-height:720px; margin:18px auto; object-fit:contain; }.post-card #postContent img.bbs-emote { width:36px; height:36px; display:inline-block; margin:0 3px; vertical-align:middle; object-fit:contain; }
.reply-box { padding:20px 28px 24px; }.reply-box textarea { width:100%; height:245px; resize:vertical; padding:22px; border:1px solid var(--reply-border); font:20px "Microsoft YaHei",sans-serif; outline-color:var(--orange); }.reply-tools { display:flex; align-items:center; justify-content:flex-start; margin-top:20px; color:#aaa; font-size:17px; }.reply-tools button { border:0; cursor:pointer; }.reply-tools .reply-quota { margin-left:auto; margin-right:60px; white-space:nowrap; text-align:right; }.emoji-wrap { position:relative; width:63px; height:41px; flex:0 0 63px; }.emoji { display:block; width:63px; height:41px; padding:0; background:transparent url("assets/web_emo1.png") left 2px center / 36px 36px no-repeat; }.emoji:hover,.emoji[aria-expanded="true"] { background-image:url("assets/web_emo2.png"); background-position:left center; background-size:63px 41px; }.emoji-panel { position:absolute; z-index:6; top:41px; left:0; width:435px; padding:18px 23px; display:grid; grid-template-columns:repeat(4,60px); gap:14px 43px; border:1px solid var(--reply-border); border-radius:0 0 18px 0; background:#fff; box-shadow:0 10px 22px rgba(60,40,25,.15); }.emoji-panel[hidden] { display:none; }.emoji-option { width:60px; height:60px; padding:0; background:transparent; transition:transform .12s ease; }.emoji-option:hover { transform:scale(1.1); }.emoji-option img { display:block; width:60px; height:60px; }.reply-tools #publishReply { min-width:208px; padding:12px 40px; color:white; background:#df853e; font-size:24px; font-weight:bold; transition:background .15s ease; }.reply-tools #publishReply:hover { background:#ffa25d; }
.bbs-emote-picker { position:fixed; z-index:1000; display:none; width:min(306px,calc(100vw - 24px)); max-height:min(360px,calc(100vh - 24px)); box-sizing:border-box; overflow:hidden; padding:10px; border:1px solid #e2e5ea; border-radius:8px; background:#fff; box-shadow:0 16px 36px rgba(30,40,55,.2); }.bbs-emote-picker.is-open { display:flex; flex-direction:column; gap:8px; }.bbs-emote-picker-header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; }.bbs-emote-picker-title { color:#333; font-size:14px; font-weight:600; }.bbs-emote-close { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid #d8dde4; border-radius:6px; background:#f6f7f8; color:#555; font-size:18px; line-height:1; cursor:pointer; }.bbs-emote-pack-tabs { display:flex; flex-wrap:wrap; gap:6px; padding-top:8px; border-top:1px solid #e2e5ea; }.bbs-emote-pack-tab { min-height:28px; padding:0 10px; border:1px solid #d8dde4; border-radius:6px; background:#f6f7f8; color:#555; cursor:pointer; }.bbs-emote-pack-tab.active { color:#b75d1d; border-color:#e59961; background:#fff4eb; }.bbs-emote-grid { display:grid; grid-template-columns:repeat(4,60px); gap:8px; align-content:start; justify-content:start; max-height:240px; overflow-x:hidden; overflow-y:auto; padding-right:2px; }.bbs-emote-choice { width:60px; height:60px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:6px; background:transparent; cursor:pointer; transition:transform .12s ease; }.bbs-emote-choice:hover { transform:scale(1.1); }.bbs-emote-choice img { display:block; width:60px; height:60px; object-fit:contain; }
.bbs-emote-picker.is-post-detail-picker { position:absolute; z-index:6; top:41px!important; left:0!important; width:435px!important; max-height:none; padding:18px 23px; overflow:visible; border:1px solid var(--reply-border); border-radius:0 0 18px 0; background:#fff; box-shadow:0 10px 22px rgba(60,40,25,.15); }.bbs-emote-picker.is-post-detail-picker.is-open { display:block; }.bbs-emote-picker.is-post-detail-picker .bbs-emote-picker-header,.bbs-emote-picker.is-post-detail-picker .bbs-emote-pack-tabs { display:none; }.bbs-emote-picker.is-post-detail-picker .bbs-emote-grid { grid-template-columns:repeat(4,60px); gap:14px 43px; max-height:none; overflow:visible; padding:0; }.bbs-emote-picker.is-post-detail-picker .bbs-emote-choice { border-radius:0; }
.reply-box .reply-editor { width:100%; min-height:245px; padding:22px; color:#171717; border:1px solid var(--reply-border); background:#fff; outline:0; font:20px "Microsoft YaHei",sans-serif; line-height:1.55; white-space:pre-wrap; overflow:auto; }.reply-box .reply-editor:focus { border-color:var(--orange); box-shadow:0 0 0 1px rgba(255,138,19,.15); }.reply-editor:empty::before { content:attr(data-placeholder); color:#aaa; pointer-events:none; }.reply-editor .composer-emoji { width:36px; height:36px; margin:0 3px; vertical-align:middle; object-fit:contain; }.reply-box textarea[hidden] { display:none; }.reply-tools .emoji-wrap { width:38px; height:36px; flex:0 0 38px; }.reply-tools .emoji { width:38px; height:36px; background-image:url("assets/web_emo1.png"); background-position:center; background-size:30px 30px; background-repeat:no-repeat; }.reply-tools .emoji:hover,.reply-tools .emoji:focus-visible,.reply-tools .emoji[aria-expanded="true"],.inline-emoji-button:hover,.inline-emoji-button:focus-visible,.inline-emoji-button[aria-expanded="true"] { border-radius:18px; background-image:url("assets/web_emo1.png"); background-position:center; background-size:30px 30px; box-shadow:inset 0 0 0 1px #ff8a13; filter:brightness(0) saturate(100%) invert(58%) sepia(93%) saturate(1157%) hue-rotate(347deg) brightness(102%) contrast(102%); transform:none; }
.reply-tools .gameweb-publish-link.is-disabled { opacity:.55; cursor:not-allowed; }
.comments { padding-top:20px; min-height:520px; }.comments h2 { margin:0; padding-bottom:25px; border-bottom:1px solid #d1d1d1; font-size:28px; }.comment { display:flex; gap:20px; padding:34px 8px; }.comment .avatar { width:66px; height:66px; flex-basis:66px; font-size:20px; }.comment-body { min-width:0; flex:1; }.comment strong { font-size:20px; }.comment-pin-badge { margin-left:10px; padding:2px 9px; color:#9b190f; border:1px solid #ff8a7e; border-radius:12px; background:#ffe1de; font-size:14px; font-weight:700; }.comment p { margin:12px 0 18px; font-size:17px; }.comment-meta { display:flex; align-items:center; gap:60px; color:#555; font-size:16px; }.comment-meta time { margin:0; color:#555; font-size:16px; }.comment-reply { display:inline-flex; align-items:center; padding:0; color:#555; border:0; background:transparent; font:16px "Microsoft YaHei",sans-serif; cursor:pointer; }.comment-reply:hover { color:#2876d0; }.comment-reply img { width:30px; height:31px; margin-right:9px; object-fit:contain; }.nested-replies { margin-top:24px; }.nested-reply { position:relative; display:flex; gap:16px; padding:0 0 26px 52px; }.nested-reply::before { content:""; position:absolute; top:5px; left:19px; bottom:0; border-left:1px solid #d8d8d8; }.nested-reply:last-child::before { bottom:28px; }.nested-reply .avatar { position:relative; z-index:1; width:54px; height:54px; flex-basis:54px; font-size:16px; }.nested-reply p { margin:8px 0 12px; }.nested-reply .comment-meta { gap:26px; font-size:14px; }.nested-reply .comment-meta time,.nested-reply .comment-reply { font-size:14px; }.nested-reply .comment-reply img { width:30px; height:31px; margin-right:7px; }.expand-replies { margin-top:0; padding:0; color:#2876d0; border:0; background:transparent; font:16px "Microsoft YaHei",sans-serif; cursor:pointer; }.expand-replies:hover { color:#ff8a13; text-decoration:underline; }
.inline-emoji { width:32px; height:32px; margin:0 3px; vertical-align:middle; object-fit:contain; }.inline-reply-box { margin-top:20px; padding:15px 18px 12px; border:1px solid #e2e5ea; border-radius:5px; background:#fff; }.inline-reply-box textarea { width:100%; height:48px; padding:0 0 10px; resize:vertical; color:#333; border:0; border-bottom:1px solid #edf0f3; outline:0; font:18px "Microsoft YaHei",sans-serif; }.inline-reply-actions { display:flex; align-items:center; gap:14px; padding-top:12px; }.inline-emoji-wrap { position:relative; width:38px; height:36px; }.inline-emoji-button { display:block; width:38px; height:36px; padding:0; border:0; background:transparent url("assets/web_emo1.png") center / 30px 30px no-repeat; cursor:pointer; }.inline-emoji-button:hover,.inline-emoji-button[aria-expanded="true"] { background-image:url("assets/web_emo2.png"); background-size:55px 36px; background-position:left center; }.inline-emoji-panel { position:absolute; z-index:8; top:38px; left:0; width:388px; padding:16px 20px; display:grid; grid-template-columns:repeat(4,52px); gap:10px 39px; border:1px solid #e2e5ea; border-radius:5px; background:#fff; box-shadow:0 10px 22px rgba(30,40,55,.18); }.inline-emoji-panel[hidden] { display:none; }.inline-emoji-option { width:52px; height:52px; padding:0; border:0; background:transparent; cursor:pointer; }.inline-emoji-option img { width:52px; height:52px; }.inline-publish { min-width:92px; margin-left:auto; padding:8px 24px; color:#fff; border:0; border-radius:4px; background:#df853e; font:18px "Microsoft YaHei",sans-serif; font-weight:bold; cursor:pointer; }.inline-publish:hover { background:#ffa25d; } @media (max-width:1350px) { .topbar { grid-template-columns:270px 1fr 210px; } .topbar > nav > a { min-width:110px; }.post-layout { width:calc(100vw - 120px); }.community-bar { padding-left:60px; padding-right:60px; }.post-card,.reply-box,.comments { padding-left:40px; padding-right:40px; } }

/* Comment reply composer: mirrors the supplied community artwork. */
.comment-meta { display:block; }
.gameweb-inline-reply { width:100%; }
.gameweb-inline-reply > summary.comment-reply { width:max-content; display:flex; align-items:center; gap:68px; list-style:none; outline:0; }
.gameweb-inline-reply > summary.comment-reply::-webkit-details-marker { display:none; }
.comment-reply-label { display:inline-flex; align-items:center; }
.gameweb-inline-reply > summary time { color:#4f4f4f; font-size:16px; font-weight:400; }
.inline-reply-box { width:100%; margin:18px 0 0; padding:14px 16px 12px; border:1px solid #dfe3e8; border-radius:5px; background:#fff; }
.inline-reply-box textarea[hidden] { display:none; }
.inline-reply-editor { width:100%; min-height:53px; max-height:180px; padding:11px 18px; overflow:auto; color:#222; border:2px solid #ff7f00; border-radius:5px; background:#fff; outline:0; font:17px/27px "Microsoft YaHei","Noto Sans SC",sans-serif; white-space:pre-wrap; }
.inline-reply-editor:focus { border-color:#ff7f00; box-shadow:0 0 0 1px rgba(255,127,0,.08); }
.inline-reply-editor:empty::before { content:attr(data-placeholder); color:#a8b1bc; pointer-events:none; }
.inline-reply-editor .composer-emoji { width:32px; height:32px; margin:0 3px; vertical-align:middle; object-fit:contain; }
.inline-reply-actions { display:flex; align-items:center; justify-content:space-between; min-height:50px; padding-top:8px; }
.inline-emoji-wrap { position:relative; width:38px; height:36px; flex:0 0 38px; }
.inline-emoji-button,.inline-emoji-button:hover,.inline-emoji-button:focus-visible,.inline-emoji-button[aria-expanded="true"] { display:block; width:38px; height:36px; padding:0; border:0; border-radius:18px; background-color:transparent; background-image:url("assets/web_emo1.png"); background-position:center; background-size:30px 30px; background-repeat:no-repeat; cursor:pointer; transform:none; }
.inline-emoji-button:hover,.inline-emoji-button:focus-visible,.inline-emoji-button[aria-expanded="true"] { box-shadow:inset 0 0 0 1px #ff8a13; filter:brightness(0) saturate(100%) invert(58%) sepia(93%) saturate(1157%) hue-rotate(347deg) brightness(102%) contrast(102%); }
.inline-publish { width:92px; min-width:92px; height:40px; margin-left:auto; padding:0; color:#fff; border:0; border-radius:4px; background:#df813e; font:700 18px/40px "Microsoft YaHei","Noto Sans SC",sans-serif; text-align:center; cursor:pointer; }
.inline-publish:hover { background:#ed9149; }
.nested-replies-disclosure { margin-top:24px; }
.nested-replies-disclosure > summary { width:max-content; display:flex; align-items:center; gap:0; padding:0; color:#2876d0; list-style:none; background:transparent; font:16px "Microsoft YaHei","Noto Sans SC",sans-serif; cursor:pointer; }
.nested-replies-disclosure > summary::-webkit-details-marker { display:none; }
.nested-replies-disclosure > summary:hover { color:#ff8a13; }
.nested-replies-disclosure > summary b { margin:0 12px; font-weight:400; }
.nested-replies-disclosure .collapse-label { display:none; }
.nested-replies-disclosure[open] > summary .expand-label { display:none; }
.nested-replies-disclosure[open] > summary .collapse-label { display:inline; }
.nested-replies-disclosure > .nested-replies { margin-top:24px; }

/* Expanded reply thread: one flat visual rail, matching the supplied artwork. */
.nested-replies-disclosure[open] > summary { display:none; }
.nested-replies-disclosure > .nested-replies { margin:0; padding:0; }
.nested-replies > .nested-reply { position:relative; min-height:125px; display:flex; gap:18px; padding:20px 0 20px 49px; }
.nested-replies > .nested-reply::before { content:""; position:absolute; top:24px; bottom:4px; left:20px; border-left:1px solid #d4d6d8; }
.nested-replies > .nested-reply:last-child::before { bottom:4px; }
.nested-replies > .nested-reply .avatar { width:44px; height:44px; flex:0 0 44px; border-radius:3px; font-size:16px; }
.nested-replies > .nested-reply .comment-body { min-width:0; flex:1; }
.nested-replies > .nested-reply strong { font-size:20px; line-height:24px; }
.nested-replies > .nested-reply p { margin:6px 0 9px; font-size:16px; line-height:1.6; }
.nested-replies > .nested-reply .reply-prefix { margin-right:10px; color:#666; }
.nested-replies > .nested-reply .gameweb-inline-reply > summary.comment-reply { gap:26px; }
.nested-replies > .nested-reply .comment-reply-label { font-size:16px; }
.nested-replies > .nested-reply .comment-reply img { width:30px; height:31px; margin-right:7px; }
.nested-replies > .nested-reply .gameweb-inline-reply > summary time { color:#555; font-size:16px; }
.nested-replies:not(.show-all) > .nested-reply-extra { display:none; }
.nested-more-replies { margin:4px 0 0; padding:0; color:#2876d0; border:0; background:transparent; font:16px "Microsoft YaHei","Noto Sans SC",sans-serif; cursor:pointer; }
.nested-more-replies:hover { color:#ff8a13; text-decoration:underline; }
.bbs-reply-result { margin:10px 0 0; padding:9px 12px; color:#236b31; border:1px solid #acd9b5; border-radius:4px; background:#edf8ef; font-size:15px; line-height:1.5; }
.bbs-reply-result.is-error { color:#a52828; border-color:#e7b0b0; background:#fff0f0; }
.inline-publish:disabled,.reply-tools #publishReply:disabled { opacity:.62; cursor:wait; }
.comment:target,.nested-reply:target { background:linear-gradient(90deg,rgba(255,138,19,.1),transparent 72%); }