@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:wght@300;400;600;700&display=swap');

:root {
  --bg:       #0a0c0f;
  --bg2:      #11141a;
  --bg3:      #181d25;
  --border:   #1e2530;
  --amber:    #d4843a;
  --amber2:   #f0a050;
  --green:    #4a9e6b;
  --green2:   #6dc98a;
  --red:      #c0392b;
  --red2:     #e74c3c;
  --muted:    #4a5568;
  --text:     #c8d0dc;
  --text2:    #8899aa;
  --mono:     'Share Tech Mono', monospace;
  --sans:     'Barlow', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; overflow-x: hidden; }

/* ── LAYOUT ── */
#app { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: 52px 1fr; height: 100vh; }
#topbar { grid-column: 1 / -1; background: var(--bg2); border-bottom: 1px solid var(--border);
          display: flex; align-items: center; padding: 0 20px; gap: 16px; }
#sidebar { background: var(--bg2); border-right: 1px solid var(--border);
           overflow-y: auto; display: flex; flex-direction: column; }
#main { overflow-y: auto; padding: 20px; }

/* ── TOPBAR ── */
.logo { font-family: var(--mono); font-size: 18px; color: var(--amber); letter-spacing: 3px;
        text-transform: uppercase; background: transparent; border: none; cursor: pointer;
        padding: 0; }
.logo:hover { color: var(--amber2); }
.world-stat { font-family: var(--mono); font-size: 11px; color: var(--text2);
              border-left: 1px solid var(--border); padding-left: 14px; }
.world-stat span { color: var(--amber2); }
.spacer { flex: 1; }
.tick-btns { display: flex; gap: 6px; }
.tick-btn { font-family: var(--mono); font-size: 12px; background: var(--bg3); color: var(--amber);
            border: 1px solid var(--amber); padding: 5px 12px; cursor: pointer; letter-spacing: 1px;
            transition: all .15s; }
.tick-btn:hover { background: var(--amber); color: var(--bg); }
.tick-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tick-btn.running { background: var(--amber); color: var(--bg); animation: pulse .7s infinite alternate; }
@keyframes pulse { to { opacity: .6; } }

/* ── SIDEBAR ── */
.sb-section { border-bottom: 1px solid var(--border); }
.sb-header { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 2px; user-select: none;
             padding: 10px 14px 6px; text-transform: uppercase; }
.tick-item { padding: 8px 14px; cursor: pointer; border-left: 2px solid transparent;
             transition: all .1s; }
.tick-item:hover { background: var(--bg3); }
.tick-item.active { border-left-color: var(--amber); background: var(--bg3); }
.tick-item .tick-num { font-family: var(--mono); font-size: 11px; color: var(--amber); }
.tick-item .tick-summary { font-size: 12px; color: var(--text2); margin-top: 2px;
                           line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
                           -webkit-box-orient: vertical; overflow: hidden; }
.tick-item .tick-hl { font-size: 10px; color: var(--green); margin-top: 2px; font-family: var(--mono); }
.sb-group { padding: 6px 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-radius: 3px; transition: background .1s; }
.sb-group:hover { background: var(--bg3); }
.sb-load-more { padding: 10px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted);
                cursor: pointer; text-align: center; }
.sb-load-more:hover { color: var(--amber); }

/* ── MAIN PANELS ── */
.panel { background: var(--bg2); border: 1px solid var(--border); margin-bottom: 16px; }
.panel-hdr { background: var(--bg3); padding: 10px 16px; font-family: var(--mono); font-size: 12px;
             color: var(--amber); letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.panel-hdr .sub { color: var(--text2); font-size: 11px; }
.panel-body { padding: 14px 16px; }

/* ── DASHBOARD ── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-box { background: var(--bg3); border: 1px solid var(--border); padding: 10px 14px; }
.stat-box .label { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.stat-box .value { font-family: var(--mono); font-size: 22px; color: var(--amber2); margin-top: 2px; }
.stat-box .value.bad { color: var(--red2); }
.stat-box .value.good { color: var(--green2); }

/* ── EVENTS LIST ── */
.event-list { display: flex; flex-direction: column; gap: 1px; }
.event-item { padding: 8px 12px; background: var(--bg3); border-left: 3px solid var(--border);
              display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; align-items: start; }
.event-item.sev-critical  { border-left-color: var(--red2); }
.event-item.sev-important { border-left-color: var(--amber); }
.event-item.sev-info      { border-left-color: var(--green); }
.event-item.sev-debug     { border-left-color: var(--muted); opacity: .5; }
.event-type { font-family: var(--mono); font-size: 10px; color: var(--muted); padding-top: 1px; }
.event-text { font-size: 13px; color: var(--text); line-height: 1.5; }
.event-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tag { font-family: var(--mono); font-size: 9px; background: var(--bg2); color: var(--muted);
       padding: 1px 5px; border: 1px solid var(--border); cursor: pointer; }
.tag:hover { color: var(--amber); border-color: var(--amber); }

/* ── GROUP CARD ── */
.group-card { background: var(--bg3); border: 1px solid var(--border); padding: 12px 14px;
              cursor: pointer; transition: border-color .15s; margin-bottom: 6px; }
.group-card:hover { border-color: var(--amber); }
.group-card.dead { opacity: .4; }
.group-name { font-weight: 600; font-size: 14px; color: var(--amber2); }
.group-name .leader-tag { font-size: 11px; color: var(--text2); font-weight: 300; }
.group-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.gm-stat { font-family: var(--mono); font-size: 11px; color: var(--text2); }
.gm-stat .v { color: var(--text); }
.gm-stat .v.warn { color: var(--amber2); }
.gm-stat .v.danger { color: var(--red2); }
.bar-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bar-label { font-family: var(--mono); font-size: 9px; color: var(--muted); width: 55px; text-align: right; }
.bar { flex: 1; height: 4px; background: var(--border); }
.bar-fill { height: 100%; transition: width .3s; }
.bar-fill.hunger  { background: var(--amber); }
.bar-fill.infection { background: var(--red2); }
.bar-fill.morale  { background: var(--green2); }
.bar-fill.fatigue { background: var(--muted); }
.trait-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.trait-pill { font-family: var(--mono); font-size: 9px; border: 1px solid var(--border);
              color: var(--text2); padding: 1px 6px; }
.skill-pill { font-family: var(--mono); font-size: 9px; border: 1px solid var(--green);
              color: var(--green2); padding: 1px 6px; }
.inv-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.inv-item { font-family: var(--mono); font-size: 10px; color: var(--text2); }
.inv-item .qty { color: var(--text); }

/* ── GROUPS GRID ── */
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

/* ── FILTER BAR ── */
.filter-bar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-chip { font-family: var(--mono); font-size: 11px; background: var(--bg3); color: var(--text2);
               border: 1px solid var(--border); padding: 4px 10px; cursor: pointer; transition: all .15s; }
.filter-chip:hover, .filter-chip.active { background: var(--amber); color: var(--bg); border-color: var(--amber); }

/* ── NAV BREADCRUMB ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
              font-family: var(--mono); font-size: 11px; color: var(--muted); }
.breadcrumb a { color: var(--amber); cursor: pointer; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--border); }

/* ── TOOLTIP/LOADING ── */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border);
           border-top-color: var(--amber); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 30px; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 12px; }

/* ── ZONE BADGE ── */
.zone-badge { display: inline-block; font-family: var(--mono); font-size: 9px; background: var(--bg);
              border: 1px solid var(--border); color: var(--text2); padding: 1px 6px; cursor: pointer; }
.zone-badge:hover { border-color: var(--green); color: var(--green2); }

/* ── HIGHLIGHT BOX ── */
.highlight-box { background: linear-gradient(135deg, rgba(212,132,58,.08), rgba(74,158,107,.04));
                 border: 1px solid rgba(212,132,58,.3); padding: 14px 16px; margin-bottom: 16px; }
.highlight-box .day-label { font-family: var(--mono); font-size: 11px; color: var(--amber); margin-bottom: 8px; }
.highlight-box .hl-text { font-size: 14px; color: var(--text); line-height: 1.7; }
.highlight-box .hl-text .critical { color: var(--red2); font-weight: 600; }


/* ── LIVE FEED ── */
#live-feed-panel { position: fixed; bottom: 0; left: 280px; right: 0; background: var(--bg2);
  border-top: 2px solid var(--amber); max-height: 220px; overflow: hidden;
  transition: max-height .3s ease; z-index: 100; }
#live-feed-panel.collapsed { max-height: 32px; }
#live-feed-header { display: flex; align-items: center; gap: 10px; padding: 6px 16px;
  background: var(--bg3); cursor: pointer; border-bottom: 1px solid var(--border); }
#live-feed-header .lf-title { font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: 1px; }
#live-feed-header .lf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
#live-feed-header .lf-dot.live { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse .8s infinite alternate; }
#live-feed-body { display: flex; flex-direction: column-reverse; overflow-y: auto; max-height: 180px; padding: 8px 16px; gap: 4px; }
.lf-item { font-size: 12px; padding: 4px 8px; border-left: 2px solid var(--border); animation: fadeIn .3s ease; }
.lf-item.sev-critical { border-left-color: var(--red2); }
.lf-item.sev-important { border-left-color: var(--amber); }
.lf-item .lf-sem { font-family: var(--mono); font-size: 10px; color: var(--amber2); margin-right: 6px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#main { padding-bottom: 240px; }

/* ── SKILLS GUIDE ── */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.skill-card { background: var(--bg3); border: 1px solid var(--border); padding: 12px 14px; }
.skill-card .sk-name { font-family: var(--mono); font-size: 12px; color: var(--amber2); margin-bottom: 4px; letter-spacing: 1px; }
.skill-card .sk-type { font-size: 10px; font-family: var(--mono); color: var(--green2); margin-bottom: 6px; }
.skill-card .sk-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }

/* ── TIER BADGE SUBTLE ── */
.tier-plus      { color: #4A9E6B; font-weight: 700; }
.tier-rare      { color: #3B82F6; font-weight: 700; }
.tier-unique    { color: #A855F7; font-weight: 700; }
.tier-legendary { color: #F59E0B; font-weight: 700; }


/* ── DIARY MODAL ── */
#diary-modal { display:none; position:fixed; inset:0; z-index:1000;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(3px); }
#diary-modal.open { display:flex; flex-direction:column; }
#diary-modal-bar { display:flex; align-items:center; padding:10px 20px; gap:12px;
  background: var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; }
#diary-modal-bar .dm-title { font-family:var(--mono); font-size:12px; color:var(--amber);
  letter-spacing:1px; flex:1; }
#diary-close { font-family:var(--mono); font-size:12px; background:var(--bg3);
  color:var(--red2); border:1px solid var(--red2); padding:4px 12px; cursor:pointer;
  transition: all .15s; }
#diary-close:hover { background:var(--red2); color:var(--bg); }
#diary-frame { flex:1; border:none; background: #0A0C0F; }

/* ── JUDGMENT DAY MODAL ── */
#judgment-overlay {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,0.97);
  flex-direction:column; align-items:center; justify-content:center;
}
#judgment-overlay.open { display:flex; animation: jd-fade 1.4s ease; }
@keyframes jd-fade { from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} }
#judgment-box {
  max-width:640px; width:90%; text-align:center;
  padding:52px 44px; position:relative;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(5,5,8,0.98);
}
#judgment-box.divino  { border-color:rgba(180,160,80,0.4); box-shadow:0 0 80px rgba(180,160,80,0.1),inset 0 0 40px rgba(180,160,80,0.03); }
#judgment-box.punitivo { border-color:rgba(180,40,40,0.4); box-shadow:0 0 80px rgba(180,40,40,0.1),inset 0 0 40px rgba(180,40,40,0.03); }
.jd-sigil { font-size:52px; margin-bottom:20px; }
.jd-label { font-family:var(--mono); font-size:10px; letter-spacing:5px;
  text-transform:uppercase; opacity:0.35; margin-bottom:10px; }
.jd-verdict { font-size:14px; margin-bottom:28px; line-height:1.6; opacity:0.75; }
.jd-verdict-title { font-size:28px; font-weight:700; margin-bottom:12px; letter-spacing:1px; }
.jd-verdict-title.divino  { color:#D4B86A; }
.jd-verdict-title.punitivo { color:#C04040; }
.jd-verdict-title.segunda_oportunidad { color:#9B8AD4; }
.jd-columns { display:grid; grid-template-columns:1fr 1fr; gap:28px; text-align:left; margin-bottom:28px; }
.jd-col-title { font-family:var(--mono); font-size:10px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:12px; padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,0.08); }
.jd-col-title.buena { color:#5DBD7A; }
.jd-col-title.mala  { color:#C04040; }
.jd-item { font-size:12px; margin-bottom:9px; padding-left:14px;
  position:relative; line-height:1.5; }
.jd-item::before { content:''; position:absolute; left:0; top:7px;
  width:4px; height:4px; border-radius:50%; }
.jd-item.buena { color:rgba(110,195,135,0.75); }
.jd-item.buena::before { background:#5DBD7A; }
.jd-item.mala  { color:rgba(200,90,90,0.75); }
.jd-item.mala::before  { background:#C04040; }
.jd-scores { font-family:var(--mono); font-size:11px; margin-bottom:20px; line-height:1.8; }
.jd-score-line { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.jd-score-label { opacity:0.5; font-size:10px; }
.jd-score-val.buena { color:#5DBD7A; font-weight:600; }
.jd-score-val.mala  { color:#C04040; font-weight:600; }
.jd-score-total { margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; font-size:12px; }
.jd-score-total .total-buena { color:#5DBD7A; }
.jd-score-total .total-mala  { color:#C04040; }
.jd-sep { width:60px; height:1px; background:rgba(255,255,255,0.08); margin:0 auto 24px; }
.jd-footer { font-family:var(--mono); font-size:10px; opacity:0.2; letter-spacing:3px; text-transform:uppercase; margin-bottom:24px; }
.jd-btn {
  font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  padding:10px 28px; cursor:pointer; border:1px solid; transition:all .2s;
  background:transparent;
}
.jd-btn.divino  { color:#D4B86A; border-color:#D4B86A; }
.jd-btn.divino:hover  { background:#D4B86A; color:#000; }
.jd-btn.punitivo { color:#C04040; border-color:#C04040; }
.jd-btn.punitivo:hover { background:#C04040; color:#fff; }
.jd-btn.segunda  { color:#9B8AD4; border-color:#9B8AD4; }
.jd-btn.segunda:hover  { background:#9B8AD4; color:#000; }
#judgment-box.segunda_oportunidad { border-color:rgba(155,138,212,0.5); box-shadow:0 0 80px rgba(155,138,212,0.1); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── ADMIN-ONLY BUTTONS (hidden for non-admins) ── */
.admin-only { display: none; }
.is-admin .admin-only { display: inline-flex; }

/* ── LOGIN OVERLAY ── */
#login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 32px;
}
#login-overlay.hidden { display: none; }
.login-logo { font-family: var(--mono); font-size: 42px; color: var(--amber); letter-spacing: 6px; }
.login-sub  { font-family: var(--mono); font-size: 13px; color: var(--text2); letter-spacing: 2px; }
.login-box  { display: flex; flex-direction: column; align-items: center; gap: 20px;
              background: var(--bg2); border: 1px solid var(--border); padding: 40px 48px; }
.login-desc { font-size: 13px; color: var(--text2); text-align: center; max-width: 320px; line-height: 1.6; }
.login-error { font-family: var(--mono); font-size: 11px; color: var(--red2); display: none; }
.login-error.visible { display: block; }
#google-signin-btn { min-width: 240px; min-height: 44px; }
.logout-btn { font-family: var(--mono); font-size: 10px; background: transparent;
              border: 1px solid var(--muted); color: var(--text2); padding: 4px 10px;
              cursor: pointer; letter-spacing: 1px; }
.logout-btn:hover { border-color: var(--red2); color: var(--red2); }

/* ── EXPORT PICKER ── */
#export-picker { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
                 z-index: 1100; align-items: center; justify-content: center; }
#export-picker.visible { display: flex; }
#export-picker-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
                     padding: 28px 24px; max-width: 320px; width: 90%;
                     display: flex; flex-direction: column; gap: 10px; }
.ep-title { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; color: var(--amber); text-align: center; }
.ep-desc  { font-size: 12px; color: var(--text2); text-align: center; }
.ep-btn-full { font-family: var(--mono); font-size: 11px; background: var(--bg3); border: 1px solid var(--border);
               color: var(--text); padding: 10px; border-radius: 4px; cursor: pointer; text-align: left; }
.ep-btn-full:hover  { border-color: var(--amber); color: var(--amber); }
.ep-divider { font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: center; }
.ep-select  { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
              font-family: var(--mono); font-size: 11px; padding: 8px; border-radius: 4px; outline: none; }
.ep-select:focus { border-color: var(--amber); }
.ep-btn-group  { font-family: var(--mono); font-size: 11px; background: var(--amber); color: #000;
                 border: none; padding: 9px; border-radius: 4px; cursor: pointer; letter-spacing: 1px; }
.ep-btn-group:hover { background: var(--amber2); }
.ep-btn-cancel { font-family: var(--mono); font-size: 10px; background: transparent; color: var(--muted);
                 border: 1px solid var(--border); padding: 6px 14px; border-radius: 4px; cursor: pointer; }
.ep-btn-cancel:hover { color: var(--text2); border-color: var(--text2); }

/* ── FOG CONFIRM MODAL ── */
#fog-confirm { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
               z-index: 1200; align-items: center; justify-content: center; }
#fog-confirm.visible { display: flex; }

/* ── NICK MODAL ── */
#nick-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85);
              z-index: 1100; align-items: center; justify-content: center; }
#nick-modal.visible { display: flex; }
#nick-modal-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
                  padding: 32px 28px; max-width: 360px; width: 90%; }
.nm-title { font-family: var(--mono); font-size: 14px; letter-spacing: 2px; color: var(--amber);
            text-align: center; margin-bottom: 12px; }
.nm-desc { font-size: 12px; color: var(--text2); text-align: center; margin-bottom: 20px; line-height: 1.5; }
.nm-input { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
            color: var(--text); font-family: var(--mono); font-size: 14px; padding: 10px 14px;
            margin-bottom: 8px; outline: none; letter-spacing: 1px; }
.nm-input:focus { border-color: var(--amber); }
.nm-error { font-size: 11px; color: var(--red2); min-height: 16px; margin-bottom: 12px; text-align: center; }
.nm-btns { display: flex; gap: 10px; justify-content: flex-end; }
.nm-btn-primary { font-family: var(--mono); font-size: 11px; background: var(--amber); color: #000;
                  border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; letter-spacing: 1px; }
.nm-btn-primary:hover { background: var(--amber2); }
.nm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.nm-btn-cancel { font-family: var(--mono); font-size: 11px; background: transparent; color: var(--muted);
                 border: 1px solid var(--border); padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.nm-btn-cancel:hover { color: var(--text2); border-color: var(--text2); }

/* ── MOBILE NAV (hidden on desktop) ── */
#mob-nav { display: none; }

/* ── MOBILE ADMIN DROPDOWN (toggle button hidden on desktop, injected only for admins) ── */
.mob-show { display: none; }
.mob-admin-dropdown {
  display: none;
  position: fixed;
  top: 46px; right: 0;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: none;
  padding: 8px;
  gap: 6px;
  flex-direction: column;
  z-index: 200;
  min-width: 130px;
}
.mob-admin-dropdown.open { display: flex; }

/* ══ MOBILE LAYOUT (≤ 700px) ══ */
@media (max-width: 700px) {

  /* Grid: una sola columna, sidebar sale del flujo */
  #app { grid-template-columns: 1fr; grid-template-rows: 46px 1fr; }

  /* Sidebar: panel flotante full-screen, oculto por defecto */
  #sidebar {
    display: none;
    position: fixed;
    top: 46px; bottom: 52px; left: 0; right: 0;
    z-index: 50;
    overflow-y: auto;
    flex-direction: column;
    background: var(--bg2);
  }
  #sidebar.mob-open { display: flex; }
  /* Solo muestra la sección activa */
  #sidebar .sb-section { display: none; }
  #sidebar .sb-section.mob-show { display: flex; flex: 1; flex-direction: column; }

  /* Main: ocupa todo el ancho, padding abajo para tabs + live feed */
  #main { padding: 12px; padding-bottom: 110px; }

  /* Live feed: sin margen izquierdo de sidebar, arriba de los tabs */
  #live-feed-panel { left: 0; bottom: 52px; }

  /* Topbar más compacto */
  #topbar { padding: 0 12px; gap: 10px; height: 46px; overflow: hidden; }
  .logo { font-size: 15px; letter-spacing: 2px; }
  .world-stat { font-size: 10px; padding-left: 10px; }

  /* Ocultar stats POV y seed en topbar — se ven en el contenido */
  #stat-world, #stat-s1, #stat-s2, #stat-s3, #stat-s4, #stat-seed { display: none !important; }

  /* Botones topbar más chicos */
  .tick-btn { font-size: 10px; padding: 3px 8px; letter-spacing: 0; }
  .mob-hide { display: none !important; }
  /* En mobile ocultar Excel/Diary del topbar (power tools de desktop) */
  #btn-excel, #btn-diary { display: none !important; }
  /* Nick label: truncar con ellipsis, no ocultar */
  #player-nick-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Botón editar nick más visible en mobile */
  #player-nick-area button[onclick="openEditNick()"] { font-size: 14px !important; color: var(--text2) !important; padding: 4px 6px !important; }
  /* mob-show: elements hidden on desktop, shown on mobile (e.g. admin ⚙ ▾ toggle) */
  .mob-show { display: inline-flex !important; }

  /* Stats del dashboard en 2 columnas en mobile */
  .stats-row { grid-template-columns: 1fr 1fr; }

  /* Cards de grupo: 1 columna */
  .groups-grid { grid-template-columns: 1fr; }

  /* Eventos: sin columna de tags en mobile (muy angosto) */
  .event-item { grid-template-columns: 70px 1fr; }
  .event-tags { display: none; }

  /* Skills grid: 1 columna */
  .skill-grid { grid-template-columns: 1fr; }

  /* ── TAB BAR ── */
  #mob-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 52px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 200;
  }
  .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color .15s;
    padding: 0;
  }
  .mob-tab-icon { font-size: 17px; line-height: 1; }
  .mob-tab.mob-tab-active { color: var(--amber); }
  .mob-tab:active { color: var(--amber2); }
}