/* ring0x // global design system v2 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg-base:       #050505;
    --bg-panel:      #080808;
    --bg-hover:      #111111;
    --border-dim:    #1c1c1c;
    --border-mid:    #262626;
    --border-active: #3d3d3d;
    --text-main:     #f0f0f0;
    --text-sub:      #a0a0b0;
    --text-muted:    #808090;
    --text-dark:     #3a3a3a;
    --green:         #ff8c00;
    --green-dim:     rgba(255,140,0,0.07);
    --red:           #ff3b50;
    --red-dim:       rgba(255,59,80,0.08);
    --amber:         #ffb300;
    --amber-dim:     rgba(255,179,0,0.08);
    --blue:          #7a7a8a;
    --corner-color:  #333344;   /* crosshair corner color — change this to adjust all corners */
    --font-mono: 'JetBrains Mono','Fira Code',monospace;
    --font-sans: 'Inter',system-ui,sans-serif;
    --nav-w: 260px;
    --chat-w: 290px;
    --hdr-h: 64px;
    --nav-logo-h: 112px;
    --fs-2xs: 14px;
    --fs-xs: 15px;
    --fs-sm: 17px;
    --fs-md: 18px;
    --fs-lg: 21px;
    --fs-xl: 26px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{background:var(--bg-base);color:var(--text-main);font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
body.scrollable{overflow:auto}
body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.grid-bg{background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:24px 24px}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-mid)}::-webkit-scrollbar-thumb:hover{background:var(--border-active)}

#app-shell{display:flex;height:100vh;width:100vw;overflow:hidden}

/* NAV */
#nav-pane{width:var(--nav-w);height:100%;background:var(--bg-panel);border-right:1px solid var(--border-dim);display:flex;flex-direction:column;flex-shrink:0;z-index:20}
.nav-logo{height:var(--nav-logo-h);border-bottom:1px solid var(--border-dim);display:flex;align-items:center;justify-content:center;padding:0 18px;flex-shrink:0;text-decoration:none}
.nav-logo img{height:112px;width:auto;object-fit:contain}
.nav-logo:hover{opacity:.85}
.nav-section-label{padding:16px 18px 5px;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.14em;color:var(--text-dark)}
nav{flex:1;overflow-y:auto;padding:4px 0}
.nav-link{display:flex;align-items:center;gap:11px;padding:9px 18px;color:var(--text-muted);font-size:var(--fs-xs);border-left:2px solid transparent;transition:all .15s;cursor:pointer;text-decoration:none}
.nav-link:hover{color:var(--text-main);background:var(--bg-hover);opacity:1}
.nav-link.active{color:var(--text-main);border-left-color:var(--green);background:linear-gradient(90deg,var(--green-dim),transparent)}
.nav-link svg{flex-shrink:0;opacity:.6}
.nav-link.active svg,.nav-link:hover svg{opacity:1}
.nav-link.active svg{color:var(--green)}
.nav-badge{margin-left:auto;font-size:11px;background:var(--border-dim);color:var(--text-sub);padding:1px 5px;border-radius:2px}
.nav-badge.live{background:var(--red-dim);color:var(--red);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.nav-user{border-top:1px solid var(--border-dim);padding:10px 12px;background:var(--bg-base);flex-shrink:0}
.nav-user-row{display:flex;align-items:center;gap:10px;padding:6px 4px;cursor:pointer;border-radius:2px;transition:background .15s}
.nav-user-row:hover{background:var(--bg-hover)}
.nav-user-name{font-size:var(--fs-xs);font-weight:600}
.nav-user-sub{font-size:var(--fs-2xs);color:var(--text-muted)}
.nav-invite-bar{display:flex;justify-content:space-between;align-items:center;background:var(--bg-panel);border:1px solid var(--border-dim);padding:5px 8px;margin-top:6px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}

/* AVATAR */
.avatar{background:var(--border-mid);border:1px solid var(--border-active);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green);flex-shrink:0;overflow:hidden;border-radius:2px}
.avatar img{width:100%;height:100%;object-fit:cover}
.av-sm{width:28px;height:28px;font-size:10px}
.av-md{width:34px;height:34px;font-size:12px}
.av-lg{width:52px;height:52px;font-size:18px}

/* HEADER */
#page-header{height:var(--hdr-h);border-bottom:1px solid var(--border-dim);background:rgba(5,5,5,.88);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex-shrink:0;position:sticky;top:0;z-index:10}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs)}
.bc-root{color:var(--text-muted)}.bc-sep{color:var(--border-active)}.bc-cur{color:var(--text-main)}
.header-right{display:flex;align-items:center;gap:14px}
.search-wrap{position:relative}
.search-wrap svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.search-input{background:var(--bg-panel);border:1px solid var(--border-dim);color:var(--text-main);font-family:var(--font-mono);font-size:var(--fs-xs);padding:5px 10px 5px 28px;outline:none;width:200px;transition:border-color .15s}
.search-input:focus{border-color:var(--green)}
.search-input::placeholder{color:var(--text-dark)}
.icon-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .15s;position:relative}
.icon-btn:hover{color:var(--text-main)}
.notif-dot{position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;background:var(--red);border:1px solid var(--bg-base)}

/* MAIN */
#main-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#page-content{flex:1;overflow-y:auto;padding:22px;font-size:var(--fs-sm)}
#page-content p{line-height:1.7}
#page-content h1{font-size:var(--fs-xl);font-weight:600}
#page-content h2{font-size:var(--fs-lg);font-weight:600}
#page-content h3{font-size:var(--fs-md);font-weight:600}

/* CHAT PANE */
#chat-pane{width:var(--chat-w);height:100%;background:var(--bg-panel);border-left:1px solid var(--border-dim);display:flex;flex-direction:column;flex-shrink:0;z-index:20;box-shadow:-6px 0 20px rgba(0,0,0,.4)}
.chat-tab-bar{display:flex;border-bottom:1px solid var(--border-dim);height:var(--hdr-h);flex-shrink:0}
.chat-tab{flex:1;display:flex;align-items:center;justify-content:center;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.chat-tab.active{color:var(--text-main);border-bottom-color:var(--green);background:var(--bg-base)}
.chat-tab:hover:not(.active){color:var(--text-sub)}
.chat-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.chat-input-area{padding:10px 12px;border-top:1px solid var(--border-dim);background:var(--bg-base);flex-shrink:0}
.chat-input-box{display:flex;align-items:flex-end;border:1px solid var(--border-dim);background:var(--bg-panel);transition:border-color .15s}
.chat-input-box:focus-within{border-color:var(--border-active)}
.chat-input-box textarea{flex:1;background:transparent;border:none;color:var(--text-main);font-family:var(--font-sans);font-size:12px;padding:8px 10px;outline:none;resize:none;min-height:36px;max-height:100px}
.chat-input-box textarea::placeholder{color:var(--text-dark)}
.chat-send-btn{background:none;border:none;color:var(--text-dark);cursor:pointer;padding:8px 10px;transition:color .15s}
.chat-send-btn:hover{color:var(--green)}
.chat-msg{display:flex;gap:8px}
.chat-msg-body{flex:1;min-width:0}
.chat-msg-header{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.chat-msg-user{font-size:var(--fs-xs);font-weight:700}
.chat-msg-user.role-admin{color:var(--red)}
.chat-msg-user.role-moderator{color:var(--blue)}
.chat-msg-user.role-member{color:#e0e0e0}
.chat-msg-time{font-size:9px;color:var(--text-dark)}
.chat-msg-text{font-size:var(--fs-xs);color:var(--text-sub);line-height:1.5;word-break:break-word;font-family:var(--font-sans)}
.chat-sys-msg{text-align:center;font-size:9px;color:var(--text-dark);text-transform:uppercase;letter-spacing:.08em;padding:2px 0}

/* CARD */
.sys-card{background:var(--bg-panel);border:1px solid var(--border-dim);position:relative;transition:border-color .2s;overflow:visible}
.sys-card:hover{border-color:var(--border-mid)}

.card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border-dim)}
.card-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}
.card-action{font-size:var(--fs-2xs);color:var(--text-muted);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.card-action:hover{color:var(--text-main);opacity:1}
.card-body{padding:14px;}

/* DOTS */
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot-green{background:var(--green);box-shadow:0 0 6px var(--green)}
.dot-red{background:var(--red);box-shadow:0 0 6px var(--red);animation:blink 2s infinite}
.dot-amber{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.dot-dim{background:var(--border-active)}

/* PILLS */
.pill{font-size:12px;padding:2px 6px;border:1px solid var(--border-dim);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-family:var(--font-mono)}
.pill-green{border-color:rgba(255,140,0,.3);color:var(--green);background:var(--green-dim)}
.pill-red{border-color:rgba(255,59,80,.3);color:var(--red);background:var(--red-dim)}
.pill-amber{border-color:rgba(255,179,0,.3);color:var(--amber);background:var(--amber-dim)}

/* BUTTONS */
.btn{font-family:var(--font-mono);font-size:var(--fs-2xs);padding:6px 12px;border:1px solid;background:transparent;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;transition:all .15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn-primary{border-color:var(--green);color:var(--green)}
.btn-primary:hover{background:var(--green);color:#000;opacity:1}
.btn-ghost{border-color:var(--border-dim);color:var(--text-muted)}
.btn-ghost:hover{border-color:var(--border-active);color:var(--text-main);opacity:1}
.btn-danger{border-color:rgba(255,59,80,.4);color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red);opacity:1}
.btn-sm{padding:3px 8px;font-size:10px}

/* FORMS */
.field{margin-bottom:14px}
.field-label{display:block;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=datetime-local],textarea,select{width:100%;background:var(--bg-base);border:1px solid var(--border-dim);color:var(--text-main);font-family:var(--font-mono);font-size:var(--fs-xs);padding:7px 10px;outline:none;transition:border-color .15s;appearance:none;border-radius:0}
textarea{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
input:focus,textarea:focus,select:focus{border-color:var(--green)}
input::placeholder,textarea::placeholder{color:var(--text-dark)}
select option{background:var(--bg-panel)}

/* TABLES */
table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
th{text-align:left;padding:7px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);border-bottom:1px solid var(--border-dim);font-weight:400}
td{padding:8px 12px;border-bottom:1px solid var(--border-dim);color:var(--text-sub);font-size:var(--fs-xs)}
tr:hover td{background:var(--bg-hover)}
tr:last-child td{border-bottom:none}

@keyframes pulse-border-red{0%,100%{border-color:rgba(255,59,80,.2)}50%{border-color:rgba(255,59,80,.7)}}
.animate-urgent{animation:pulse-border-red 2s infinite}


/* ─── Corner crosshairs ──────────────────────────────────────────────────────
   Property name: --corner-color
   Change --corner-color in :root to adjust brightness of ALL corner marks. */
.ch { position:absolute; width:7px; height:7px; border-color:var(--corner-color); pointer-events:none; z-index:3; }
.ch-tl { top:-1px;    left:-1px;   border-left:1px solid;  border-top:1px solid;    }
.ch-tr { top:-1px;    right:-1px;  border-right:1px solid; border-top:1px solid;    }
.ch-bl { bottom:-1px; left:-1px;   border-left:1px solid;  border-bottom:1px solid; }
.ch-br { bottom:-1px; right:-1px;  border-right:1px solid; border-bottom:1px solid; }

/* TOAST */
#ring0x-toast{position:fixed;bottom:20px;right:20px;z-index:9999;background:var(--bg-panel);border:1px solid var(--border-mid);padding:10px 14px;font-size:var(--fs-sm);max-width:280px;animation:fadeIn .2s ease}
#ring0x-toast.ok{border-left:3px solid var(--green);color:var(--green)}
#ring0x-toast.error{border-left:3px solid var(--red);color:var(--red)}

/* MODAL */
#ring0x-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:flex;align-items:center;justify-content:center}
.modal-box{background:var(--bg-panel);border:1px solid var(--border-mid);padding:26px;width:90%;max-width:460px}
.modal-title{font-size:var(--fs-md);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.modal-actions{display:flex;gap:10px;margin-top:18px}

@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .2s ease forwards}

hr{border:none;border-top:1px solid var(--border-dim);margin:16px 0}
a{color:var(--green);text-decoration:none;transition:opacity .15s}
a:hover{opacity:.75}
#page-content p,#page-content div,#page-content span,#page-content a,#page-content td,#page-content th{overflow-wrap:anywhere;word-break:break-word}

/* Upscale tiny inline font-size values used across pages */
[style*="font-size:8px"],[style*="font-size: 8px"]{font-size:13px !important}
[style*="font-size:9px"],[style*="font-size: 9px"]{font-size:14px !important}
[style*="font-size:10px"],[style*="font-size: 10px"]{font-size:15px !important}
[style*="font-size:11px"],[style*="font-size: 11px"]{font-size:16px !important}
[style*="font-size:12px"],[style*="font-size: 12px"]{font-size:17px !important}
[style*="font-size:13px"],[style*="font-size: 13px"]{font-size:18px !important}
[style*="font-size:14px"],[style*="font-size: 14px"]{font-size:19px !important}

@media(max-width:1100px){#chat-pane{display:none}}


/* pane-toggle: see bottom of file */

/* ── Crosshairs on ALL sys-card (auto, no hover) ───────────────────────────── */
.sys-card{overflow:visible}

/* bottom corners via data-card wrapper */
.card-wrap{position:relative}
.card-wrap::before,.card-wrap::after{content:'';position:absolute;width:7px;height:7px;border-color:var(--corner-color);pointer-events:none;z-index:2}
.card-wrap::before{bottom:-1px;left:-1px;border-left:1px solid;border-bottom:1px solid}
.card-wrap::after{bottom:-1px;right:-1px;border-right:1px solid;border-bottom:1px solid}

/* Universal .box-corners class for any box that needs all 4 corners */
.box-corners{position:relative;overflow:visible}
.box-corners .ch-tl,.box-corners .ch-tr,.box-corners .ch-bl,.box-corners .ch-br{position:absolute;width:7px;height:7px;border-color:var(--corner-color);pointer-events:none;z-index:2}
.box-corners .ch-tl{top:-1px;left:-1px;border-left:1px solid;border-top:1px solid}
.box-corners .ch-tr{top:-1px;right:-1px;border-right:1px solid;border-top:1px solid}
.box-corners .ch-bl{bottom:-1px;left:-1px;border-left:1px solid;border-bottom:1px solid}
.box-corners .ch-br{bottom:-1px;right:-1px;border-right:1px solid;border-bottom:1px solid}

/* ── Ring0x global roadmap ─────────────────────────────────────────────────── */
.epoch-block{margin-bottom:40px;padding-left:20px;border-left:2px solid var(--border-dim);position:relative}
.epoch-block.completed{border-color:var(--green)}
.epoch-block.in-progress{border-color:var(--amber)}
.epoch-status{display:inline-block;padding:2px 8px;font-size:9px;border:1px solid;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}

/* ── Remove all green/blue color from chat member colors ───────────────────── */
.chat-msg-user.role-member{color:var(--text-main)}
.chat-msg-user.role-moderator{color:var(--text-sub)}
.chat-msg-user.role-admin{color:var(--red)}

/* ── Scrollbar — themed and polished ───────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-base);border-left:1px solid var(--border-dim)}
::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--border-active)}
::-webkit-scrollbar-corner{background:var(--bg-base)}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:var(--border-mid) var(--bg-base)}


/* ── Pane collapse toggles ────────────────────────────────────────────────────
   Buttons are rendered by panes.js and appended to document.body (not inside
   the pane) so they stay visible when the pane collapses to width:0.
   They use position:fixed so the full-width bar problem cannot happen.        */
.pane-toggle {
    position: fixed;
    top: calc(var(--hdr-h) + 10px);
    transform: none;
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px 3px;
    font-size: 12px;
    z-index: 500;
    line-height: 1;
    font-family: var(--font-mono);
    width: 18px;
    height: 56px;
    text-align: center;
    transition: color .15s, border-color .15s;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pane-toggle:hover { color: var(--text-main); border-color: var(--border-active); }
/* initial positions — updated by panes.js on toggle */
#nav-collapse-btn  { left: var(--nav-w); border-left: none; border-radius: 0 2px 2px 0; }
#chat-collapse-btn { right: var(--chat-w); border-right: none; border-radius: 2px 0 0 2px; }
/* pane animation */
#nav-pane  { transition: width .2s ease; overflow: hidden; }
#chat-pane { transition: width .2s ease; overflow: hidden; }
#nav-pane.collapsed  { width: 0 !important; min-width: 0; border: none; }
#chat-pane.collapsed { width: 0 !important; min-width: 0; border: none; }
/* When chat pane is hidden by media query, hide its toggle too */
@media (max-width: 1100px) { #chat-collapse-btn { display: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   ═══════════════════════════════════════════════════════════════════════════

   Breakpoints:
     ≥1280px  desktop-large  — nav + content + chat all visible
     1100px   desktop        — nav + content, chat hidden (pane toggle available)
     900px    tablet-land    — nav + content, narrower nav
     768px    tablet-port    — hamburger nav (collapsed by default), full-width content
     480px    phone          — single column, stacked everything
*/

/* ── Desktop large (default) — everything visible ─────────────────────────── */
:root {
    --nav-w:  260px;
    --chat-w: 290px;
    --hdr-h:  64px;
    --nav-logo-h: 112px;
}

/* ── Hide chat pane below 1100px ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    #chat-pane { display: none !important; }
    #chat-collapse-btn { display: none !important; }
    :root { --chat-w: 0px; }
}

/* ── Narrow nav at tablet landscape ──────────────────────────────────────────*/
@media (max-width: 960px) {
    :root { --nav-w: 220px; }
    .nav-link { padding: 8px 14px; font-size: var(--fs-2xs); }
    #page-content { padding: 16px; }
    .search-input { width: 160px; }
}

/* ── Tablet portrait: collapse nav by default, content full-width ───────────*/
@media (max-width: 768px) {
    :root { --nav-w: 0px; --hdr-h: 48px; }

    body { overflow: auto; }
    #app-shell { height: auto; min-height: 100vh; }

    /* Nav becomes an overlay drawer — hidden by default */
    #nav-pane {
        position: fixed !important;
        left: 0; top: 0; bottom: 0;
        width: 220px !important;
        z-index: 400;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,.6);
    }
    #nav-pane.mobile-open {
        transform: translateX(0);
    }

    /* Nav toggle becomes a hamburger in header */
    #nav-collapse-btn {
        left: 12px !important;
        top: 50vh !important;
        transform: translateY(-50%) !important;
        border: 1px solid var(--border-dim) !important;
        border-radius: 2px !important;
        font-size: 13px !important;
        width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
    }
    /* When nav is open, hamburger goes to header area */
    #nav-pane.mobile-open ~ * #nav-collapse-btn,
    body.nav-open #nav-collapse-btn {
        top: calc(var(--hdr-h) / 2) !important;
        transform: translateY(-50%) !important;
    }

    #main-area { width: 100%; min-width: 0; }
    #page-content { padding: 12px; }

    /* Header: compact */
    #page-header { padding: 0 12px 0 50px; }
    .search-input { width: 130px; font-size: 11px; }
    .breadcrumb { font-size: 11px; }

    /* Cards: full bleed */
    .sys-card { border-left: none; border-right: none; }

    /* Tables: horizontal scroll */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 500px; }
}

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root { --hdr-h: 42px; }

    #page-content { padding: 8px; }
    #page-header { padding: 0 8px 0 46px; }

    .search-wrap { display: none; } /* hide search on tiny screens */

    /* Stack two-column grids */
    .two-col { grid-template-columns: 1fr !important; }
    .article-grid { grid-template-columns: 1fr !important; }
    .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Buttons: more touch-friendly */
    .btn { padding: 8px 12px; font-size: 11px; }
    .btn-sm { padding: 6px 9px; font-size: 10px; }

    /* Battle hero: stack vertically and fix button */
    .battle-hero { flex-direction: column !important; }
    .battle-info { border-right: none !important; border-bottom: 1px solid var(--border-dim); }
    .battle-timer-side { 
        width: 100% !important; 
        min-width: 100% !important;
        padding: 16px !important; 
        flex-direction: row !important; 
        gap: 16px !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .spectate-btn { 
        font-size: 9px !important; 
        padding: 6px 14px !important; 
        letter-spacing: .04em !important; 
        white-space: nowrap !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Nav section labels visible again */
    .nav-section-label { display: block; }

    /* Modal: full width */
    .modal-box { width: 96%; padding: 16px; }

    /* Forms */
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr !important; }
}

/* ── Battle hero: fix "Enter Arena" button at all sizes ─────────────────────*/
.battle-timer-side {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
}
.spectate-btn {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    min-width: 150px;
    font-size: 13px;
    padding: 6px 12px;
    letter-spacing: .05em;
    text-align: center;
    display: inline-block;
}

/* ── Arena challenges.html responsive ────────────────────────────────────── */
@media (max-width: 700px) {
    .arena-layout { grid-template-columns: 1fr !important; height: auto !important; }
    .arena-sidebar { max-height: 200px; overflow-y: auto; border-right: none !important; border-bottom: 1px solid var(--border-dim); }
    .arena-main { overflow-y: visible; }
    .view { padding: 14px !important; }
    .vs-display { flex-direction: column !important; }
    .vs-sep { width: 100% !important; height: 32px; border-top: none !important; border-bottom: none !important; border-left: 1px solid var(--border-dim); border-right: 1px solid var(--border-dim); justify-content: center; }
    .countdown-strip { gap: 8px !important; }
    .cd-num { font-size: 16px !important; }
}

/* ── Projects / clans responsive ────────────────────────────────────────── */
@media (max-width: 700px) {
    .clans-layout { grid-template-columns: 1fr !important; }
    .clan-card { border-left: none; border-right: none; }
}

/* ── Chat page responsive ────────────────────────────────────────────────── */
@media (max-width: 700px) {
    #chat-outer { flex-direction: column !important; }
    #room-tabs { overflow-x: auto; }
}

/* ── Events responsive ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ev-card { grid-template-columns: 60px 1fr !important; }
    .ev-right { display: none; }
    .ev-day { font-size: 16px !important; }
}

/* ── Mobile nav overlay backdrop ────────────────────────────────────────── */
#nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 399;
}
#nav-overlay.visible { display: block; }