/* =====================================================================
   ESAGAMES — Topic view (v2). Clean, premium, no nested backgrounds.
   Created by ESAGAMES HOSTING SHIELD SRL
   ===================================================================== */

.breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--text-mute); margin-bottom:18px; }
.breadcrumbs a{ color:var(--text-dim); } .breadcrumbs a:hover{ color:var(--primary-2); }
.breadcrumbs .sep{ opacity:.4; }

/* ---- Topic hero ---- */
.topic-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;
    background:linear-gradient(120deg, rgba(var(--primary-rgb),.12), transparent 60%), var(--surface);
    border:1px solid var(--border); border-radius:18px; padding:24px 26px; margin-bottom:18px; }
.topic-hero h1{ font-size:25px; letter-spacing:-.03em; margin:0 0 12px; line-height:1.25; }
.topic-hero h1 .prefix{ font-size:13px; padding:3px 11px; border-radius:8px; vertical-align:middle; margin-right:9px; font-weight:700; }
.topic-hero-meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:13px; color:var(--text-mute); }
.topic-hero-meta .thm{ display:inline-flex; align-items:center; gap:6px; }
.topic-hero-meta .thm a{ color:var(--text-dim); font-weight:600; } .topic-hero-meta .thm a:hover{ color:var(--primary-2); }
.topic-hero-meta .avatar.sm{ width:22px; height:22px; }
.topic-hero-meta .badge{ padding:3px 10px; border-radius:20px; font-weight:700; font-size:12px; }
.topic-hero-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.topic-hero-actions{ display:flex; gap:8px; flex-shrink:0; }

/* ---- Mod bar ---- */
.mod-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:rgba(255,77,109,.06); border:1px solid rgba(255,77,109,.2); border-radius:14px; padding:12px 16px; margin-bottom:18px; }
.mod-bar-label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--red); margin-right:4px; }
.mod-bar form{ display:inline; }
.mod-subform{ display:none !important; width:100%; gap:8px; align-items:center; margin-top:8px; }
.mod-subform.show{ display:flex !important; }
.mod-subform label{ font-size:13px; color:var(--text-dim); }
.mod-subform .input{ width:130px; }

/* ---- Poll ---- */
.poll-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 22px; margin-bottom:18px; }
.poll-head{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--text-mute); margin-bottom:8px; display:flex; justify-content:space-between; }
.poll-status{ color:var(--amber); }
.poll-q{ font-size:18px; margin:0 0 16px; }
.poll-res{ margin-bottom:13px; }
.poll-res-top{ display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.poll-res-top .poll-mine{ color:var(--green); font-weight:700; }
.poll-res-top b{ color:var(--text-mute); font-weight:700; font-size:13px; }
.poll-bar-wrap{ height:9px; background:var(--bg-1); border-radius:20px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--border); }
.poll-bar{ height:100%; border-radius:20px; background:var(--grad-primary); transition:width .5s ease; }
.poll-total{ font-size:12.5px; color:var(--text-mute); margin-top:10px; }
.poll-vote{ display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--border); border-radius:11px; margin-bottom:8px; cursor:pointer; font-size:14px; transition:border-color .15s,background .15s; }
.poll-vote:hover{ border-color:var(--primary); background:var(--surface-2); }

/* ---- Posts ---- */
.posts-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:22px; }
.post{ display:grid; grid-template-columns:210px minmax(0,1fr); background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.post-cols{ display:contents; }
.best-banner{ grid-column:1 / -1; }
.post.is-op{ border-color:rgba(var(--primary-rgb),.4); box-shadow:0 0 0 1px rgba(var(--primary-rgb),.18); }
.post.is-best{ border-color:rgba(46,230,166,.5); box-shadow:0 0 0 1px rgba(46,230,166,.25); }
.post.post-flash{ animation: postFlash 1.6s ease; }
@keyframes postFlash{ 0%{ box-shadow:0 0 0 2px var(--primary); } 100%{ box-shadow:none; } }
.best-banner{ background:linear-gradient(90deg, rgba(46,230,166,.18), transparent); color:var(--green); font-weight:800; font-size:12px; padding:7px 16px; letter-spacing:.04em; border-bottom:1px solid rgba(46,230,166,.2); }

/* author column — distinct darker panel, accent from group color */
.post-author{ background:var(--bg-1); border-right:1px solid var(--border); padding:22px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; position:relative; }
.post-author::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gc,var(--primary)); opacity:.7; }
.pa-avatar{ display:block; }
.pa-avatar .avatar{ width:80px; height:80px; border-radius:18px; box-shadow:0 0 0 3px var(--gc,var(--primary))55, 0 6px 16px rgba(0,0,0,.4); object-fit:cover; }
.pa-name{ font-weight:800; font-size:15px; color:#fff; } .pa-name:hover{ color:var(--primary-2); }
.pa-role{ font-size:11px; font-weight:800; padding:3px 11px; border-radius:20px; background:color-mix(in srgb, var(--gc) 18%, transparent); color:var(--gc); }
.pa-title{ font-size:12px; color:var(--text-mute); font-style:italic; }
.pa-level{ font-size:11.5px; font-weight:700; color:var(--amber); background:rgba(245,179,1,.12); padding:3px 10px; border-radius:20px; }
.pa-stats{ display:flex; gap:18px; margin-top:8px; padding-top:12px; border-top:1px solid var(--border); width:100%; justify-content:center; }
.pa-stats div{ display:flex; flex-direction:column; }
.pa-stats b{ color:#fff; font-size:15px; font-weight:800; } .pa-stats span{ font-size:11px; color:var(--text-mute); }
.pa-joined{ font-size:11px; color:var(--text-mute); }

/* body column */
.post-body{ padding:18px 22px; display:flex; flex-direction:column; min-width:0; }
.post-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--border-soft); }
.post-num{ font-size:12.5px; color:var(--text-mute); display:flex; align-items:center; gap:7px; }
.post-num a{ color:var(--text-mute); } .post-num a:hover{ color:var(--primary-2); }
.op-badge{ background:var(--grad-primary); color:#fff; font-weight:800; font-size:10px; padding:2px 7px; border-radius:6px; letter-spacing:.04em; }
.edited{ font-style:italic; }
.post-tools{ display:flex; gap:4px; align-items:center; }
.post-tools form{ display:inline; }
.ptool{ width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; font-size:13px; transition:all .15s; }
.ptool:hover{ border-color:var(--primary); color:#fff; }
.ptool-danger:hover{ border-color:var(--red); color:var(--red); }

.post-content{ font-size:15px; line-height:1.75; color:var(--text); flex:1; word-break:break-word; }
.post-content p{ margin:0 0 .8em; }
.post-content .post-image{ max-width:100%; border-radius:12px; margin:10px 0; }
.post-content .code-block{ background:var(--bg-0); border:1px solid var(--border); border-radius:10px; padding:14px; overflow-x:auto; font-family:'JetBrains Mono',monospace; font-size:13px; margin:10px 0; color:#cdd3e6; }
.post-content .post-quote{ background:var(--bg-1); border-left:3px solid var(--primary); border-radius:0 10px 10px 0; padding:10px 14px; margin:10px 0; color:var(--text-dim); }
.post-content .post-quote cite{ display:block; font-size:12px; color:var(--primary-2); margin-bottom:5px; font-style:normal; font-weight:700; }
.post-content .spoiler{ background:var(--bg-1); border:1px solid var(--border); border-radius:9px; padding:8px 14px; margin:8px 0; }
.post-content .mention{ color:var(--primary-2); font-weight:600; background:rgba(var(--primary-rgb),.12); padding:1px 6px; border-radius:6px; }
.post-content a{ color:var(--accent-2); }

.post-sig{ margin-top:16px; padding-top:11px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--text-mute); }
.post-sig a{ color:var(--text-dim); }

/* footer — clean reactions */
.post-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:13px; border-top:1px solid var(--border-soft); }
.reactions{ display:flex; align-items:center; gap:10px; }
.react-main{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; font-size:13px; font-weight:600; transition:all .15s; font-family:inherit; }
.react-main:hover{ border-color:var(--primary); color:#fff; }
.react-main.reacted{ background:rgba(var(--primary-rgb),.14); border-color:var(--primary); color:var(--primary-2); }
.react-main .rm-ico{ font-size:15px; }
.react-summary{ display:inline-flex; align-items:center; gap:3px; padding:5px 11px; border-radius:20px; background:var(--bg-1); border:1px solid var(--border); }
.react-summary .rs-emoji{ font-size:14px; margin-right:-3px; }
.react-summary .rs-count{ font-size:12.5px; font-weight:700; color:var(--text-dim); margin-left:6px; }
.report-form{ margin:0; }
.report-btn{ background:none; border:none; color:var(--text-mute); cursor:pointer; font-size:15px; padding:6px 8px; border-radius:8px; transition:color .15s; }
.report-btn:hover{ color:var(--red); }

/* ---- Editor ---- */
.esa-editor{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg-1); position:relative; }
.editor-toolbar{ display:flex; flex-wrap:wrap; gap:3px; padding:9px 11px; background:var(--surface-2); border-bottom:1px solid var(--border); align-items:center; }
.editor-toolbar button{ padding:6px 10px; background:none; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:13px; color:var(--text-dim); font-weight:600; transition:all .15s; font-family:inherit; }
.editor-toolbar button:hover{ background:var(--surface-3); color:#fff; }
.editor-toolbar .tb-sep{ width:1px; height:20px; background:var(--border); margin:0 4px; }
.esa-editor textarea{ border:none; background:transparent; padding:14px; width:100%; box-sizing:border-box; color:var(--text); font-size:15px; line-height:1.6; resize:vertical; min-height:150px; font-family:inherit; }
.esa-editor textarea:focus{ outline:none; }
.emoji-picker{ display:flex; flex-wrap:wrap; gap:4px; padding:10px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.emoji-picker span{ font-size:20px; cursor:pointer; padding:4px; border-radius:7px; transition:background .15s; }
.emoji-picker span:hover{ background:var(--surface-3); }
.emoji-picker.hidden{ display:none; }

/* reply card / notes */
.reply-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; }
.reply-card h3{ font-size:17px; margin:0 0 16px; }
.reply-actions{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.locked-note{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center; color:var(--text-dim); font-size:14.5px; }
.locked-note a{ color:var(--primary-2); font-weight:600; }

/* pagination */
.pagination{ display:flex; gap:5px; justify-content:center; margin:22px 0; flex-wrap:wrap; }
.pagination a,.pagination span{ min-width:38px; height:38px; padding:0 12px; display:grid; place-items:center; border-radius:10px; background:var(--surface); border:1px solid var(--border); color:var(--text-dim); font-size:14px; font-weight:600; }
.pagination a:hover{ border-color:var(--primary); color:#fff; }
.pagination .current{ background:var(--grad-primary); color:#fff; border-color:transparent; }
.pagination .dots{ border:none; background:none; }

@media (max-width:720px){
    .post{ grid-template-columns:1fr; }
    .post-author{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; text-align:left; border-right:none; border-bottom:1px solid var(--border); padding:14px 16px; gap:10px; }
    .post-author::before{ width:3px; right:auto; bottom:0; height:auto; }
    .pa-avatar .avatar{ width:46px; height:46px; border-radius:12px; }
    .pa-stats{ width:auto; border:none; padding:0; margin:0; }
    .pa-joined{ display:none; }
    .topic-hero{ padding:18px; }
}

/* =====================================================================
   v2 — reaction picker, best answer, viewers, attachments, follow, toast
   ===================================================================== */
/* Best answer highlight box */
.best-answer-box{ background:linear-gradient(120deg, rgba(46,230,166,.10), var(--surface)); border:1px solid rgba(46,230,166,.35); border-radius:16px; padding:18px 22px; margin-bottom:18px; }
.ba-head{ font-size:13px; font-weight:800; color:var(--green); margin-bottom:10px; }
.ba-head a{ color:#fff; } .ba-content{ color:var(--text-dim); font-size:14.5px; line-height:1.6; max-height:130px; overflow:hidden; }
.ba-jump{ display:inline-block; margin-top:10px; font-size:13px; color:var(--green); font-weight:600; }

/* Who's viewing */
.viewers-bar{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--text-mute); flex-wrap:wrap; }
.viewers-bar .vb-label{ font-weight:600; }
.viewers-bar .vb-list{ display:flex; gap:-6px; }
.viewers-bar .vb-list a img{ width:24px; height:24px; border-radius:50%; border:2px solid var(--surface); margin-left:-6px; object-fit:cover; }
.viewers-bar .vb-list a:first-child img{ margin-left:0; }
.viewers-bar .vb-count{ color:var(--text-dim); font-weight:600; }

/* Follow button */
.topic-follow.following{ border-color:var(--primary) !important; color:var(--primary-2) !important; background:rgba(var(--primary-rgb),.12) !important; }

/* Reaction picker */
.reactions{ position:relative; }
.react-wrap{ position:relative; display:inline-block; }
.react-picker{ position:absolute; bottom:calc(100% + 8px); left:0; display:flex; gap:4px; padding:7px 9px; background:var(--elev); border:1px solid var(--border); border-radius:30px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(8px) scale(.9); transform-origin:bottom left; transition:all .18s cubic-bezier(.2,.8,.2,1); z-index:20; }
.react-wrap:hover .react-picker{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.rp-btn{ font-size:22px; background:none; border:none; cursor:pointer; padding:3px; border-radius:8px; transition:transform .12s; line-height:1; }
.rp-btn:hover{ transform:scale(1.35) translateY(-2px); }
.react-summary{ cursor:pointer; }
.react-summary.empty{ display:none; }

/* Attachments */
.attach-btn{ }
.esa-editor.drag{ outline:2px dashed var(--primary); outline-offset:-4px; }
.attach-list{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 12px; }
.attach-list:empty{ padding:0; }
.att-chip{ font-size:12.5px; background:var(--surface-2); border:1px solid var(--border); padding:5px 11px; border-radius:8px; color:var(--text-dim); }

/* Toast */
.esa-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--elev); border:1px solid var(--border); color:#fff; padding:11px 20px; border-radius:12px; box-shadow:var(--shadow); z-index:9999; font-size:14px; font-weight:600; animation:toastIn .25s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }

@media (max-width:720px){
    .post-cols{ grid-template-columns:1fr; }
}

/* =====================================================================
   MOBILE RESPONSIVE — 320-768 px  (phones & tablets)
   Touch nothing above; these blocks only APPEND rules.
   ===================================================================== */

/* ---- Tablet: up to 768px ------------------------------------------ */
@media (max-width:768px){

    /* Breadcrumbs — already flex-wrap:wrap; just tighten gap */
    .breadcrumbs{ gap:4px; font-size:12px; }

    /* Topic hero — allow full stacking */
    .topic-hero{
        flex-direction:column;
        padding:16px;
        gap:14px;
    }
    .topic-hero h1{
        font-size:20px;
        margin-bottom:10px;
    }
    .topic-hero-meta{
        gap:8px;
        font-size:12.5px;
    }

    /* Action buttons — row, wrapping, full available width */
    .topic-hero-actions{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        width:100%;
        flex-shrink:unset;
    }
    .topic-hero-actions .btn{
        flex:1 1 auto;
        text-align:center;
        justify-content:center;
        min-width:90px;
    }

    /* Post grid → single column (already handled at 720 but ensure 768 too) */
    .post{
        grid-template-columns:1fr;
    }

    /* Author aside → compact horizontal bar */
    .post-author{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:flex-start;
        text-align:left;
        border-right:none;
        border-bottom:1px solid var(--border);
        padding:10px 14px;
        gap:8px;
    }
    .post-author::before{
        /* accent stripe: top bar instead of side stripe */
        width:100%;
        height:3px;
        right:0;
        bottom:auto;
        top:0;
        left:0;
    }
    .pa-avatar .avatar{
        width:40px;
        height:40px;
        border-radius:10px;
    }
    .pa-name{ font-size:13.5px; }
    .pa-role{ font-size:10.5px; }
    .pa-title{ display:none; }
    .pa-level{ font-size:11px; padding:2px 8px; }
    .pa-stats{
        width:auto;
        border:none;
        padding:0;
        margin:0;
        gap:12px;
    }
    .pa-stats b{ font-size:13px; }
    .pa-stats span{ font-size:10px; }
    .pa-joined{ display:none; }

    /* Post body */
    .post-body{ padding:14px; }
    .post-top{ flex-wrap:wrap; gap:6px; }
    .post-tools{ flex-wrap:wrap; }

    /* Post content — prevent overflow */
    .post-content{
        font-size:14px;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .post-content img{
        max-width:100% !important;
        height:auto !important;
        border-radius:8px;
    }
    .post-content .code-block{
        overflow-x:auto;
        max-width:100%;
        font-size:12px;
    }
    .post-content pre,
    .post-content code{
        overflow-x:auto;
        max-width:100%;
        white-space:pre;
        word-break:normal;
        overflow-wrap:normal;
    }
    .post-content a{
        overflow-wrap:anywhere;
        word-break:break-all;
    }
    .post-content .post-quote{
        padding:8px 10px;
    }

    /* Post footer reactions */
    .post-foot{
        flex-wrap:wrap;
        gap:8px;
    }
    /* Reaction picker — flip to open upward but avoid left-edge clip on narrow screens */
    .react-picker{
        left:0;
        right:auto;
    }

    /* Reply editor */
    .reply-card{ padding:16px; }
    .reply-card h3{ font-size:15px; }
    .esa-editor textarea{
        width:100%;
        box-sizing:border-box;
        font-size:14px;
        min-height:120px;
    }
    .editor-toolbar{
        padding:7px 8px;
        gap:3px;
    }
    .editor-toolbar button{
        padding:5px 8px;
        font-size:12.5px;
    }
    .reply-actions{
        flex-wrap:wrap;
        gap:8px;
    }
    .reply-actions .btn{
        width:100%;
        text-align:center;
        justify-content:center;
    }

    /* Mod bar */
    .mod-bar{
        padding:10px 12px;
        gap:6px;
    }
    .mod-subform .input{ width:110px; }

    /* Poll */
    .poll-card{ padding:16px; }
    .poll-q{ font-size:16px; }
    .poll-res-top{ flex-wrap:wrap; gap:4px; }

    /* Best answer box */
    .best-answer-box{ padding:14px 16px; }

    /* Viewers bar */
    .viewers-bar{ gap:6px; font-size:12px; }

    /* Pagination */
    .pagination a,
    .pagination span{ min-width:34px; height:34px; font-size:13px; }

    /* Lock / login note */
    .locked-note{ padding:16px; font-size:13.5px; }
}

/* ---- Phone: up to 480px ------------------------------------------ */
@media (max-width:480px){

    /* Breadcrumbs — truncate long items */
    .breadcrumbs{ font-size:11.5px; }

    /* Topic hero */
    .topic-hero{ padding:12px; border-radius:12px; }
    .topic-hero h1{ font-size:17px; line-height:1.3; }
    .topic-hero h1 .prefix{ font-size:11px; padding:2px 8px; }
    .topic-hero-meta{ gap:6px; font-size:12px; }

    /* Action buttons — each takes at least half width, stack on very narrow */
    .topic-hero-actions .btn{
        flex:1 1 calc(50% - 4px);
        min-width:0;
        font-size:12.5px;
        padding:6px 8px;
    }

    /* Author bar on phone — tighter */
    .post-author{ padding:8px 10px; gap:6px; }
    .pa-avatar .avatar{ width:34px; height:34px; border-radius:8px; }
    .pa-name{ font-size:12.5px; }
    .pa-role{ display:none; }
    .pa-level{ display:none; }
    .pa-stats{ gap:10px; }
    .pa-stats b{ font-size:12px; }

    /* Post body */
    .post-body{ padding:10px 12px; }
    .post-content{ font-size:13.5px; }
    .post-content .code-block{ font-size:11.5px; padding:10px; }

    /* Post tools — smaller touch targets are OK, but keep them accessible */
    .ptool{ width:28px; height:28px; font-size:12px; }

    /* Editor toolbar — very small screens, allow more wrapping */
    .editor-toolbar{ padding:6px; gap:2px; }
    .editor-toolbar button{ padding:4px 7px; font-size:12px; }
    .esa-editor textarea{ padding:10px; font-size:13.5px; }

    /* Reply actions — text hint hidden on very small */
    .reply-actions .text-mute{ display:none; }

    /* Poll */
    .poll-card{ padding:12px; border-radius:12px; }
    .poll-q{ font-size:14.5px; }

    /* React picker — ensure it doesn't clip off left edge */
    .react-picker{ left:0; right:auto; }

    /* Mod subform inputs narrower */
    .mod-subform .input{ width:90px; }

    /* Pagination — smaller on 320 */
    .pagination{ gap:3px; }
    .pagination a,
    .pagination span{ min-width:30px; height:30px; padding:0 6px; font-size:12px; }

    /* Best answer box */
    .best-answer-box{ padding:10px 12px; border-radius:12px; }

    /* No horizontal page scroll — catch-all */
    .topic-hero,
    .post,
    .reply-card,
    .poll-card,
    .mod-bar,
    .best-answer-box,
    .posts-list,
    .pagination{
        max-width:100%;
        overflow-x:hidden;
    }
}