/* ──────────────────────────────────────────────────────────────────
   CLANS — redesigned UI styles
   Built on the existing PIXLAND palette:
   --gold #E7B84C, --gold-d #9B7A20, --win-border #8B6914
   --win-bg #1e1e28, --win-bg-d #15151f, --win-bg-dd #0e0e16
   Pixel-art look — Press Start 2P, sharp 1px shadows, gilded corners.
   ────────────────────────────────────────────────────────────────── */

:root{
  --gold:#E7B84C; --gold-l:#FCDF7A; --gold-d:#9B7A20;
  --bord:#8B6914; --bord-l:#B8922E;
  --bg0:#0e0e16; --bg1:#15151f; --bg2:#1e1e28; --bg3:#2a2a36;
  --slot:#13131d; --slot-bd:#5a4a20;
  --txt:#e0d8c8; --txt-dim:#8a8070; --txt-dark:#1a1a24;
  --red:#C84A3A; --red-d:#7a1f12;
  --green:#4ade80; --green-d:#1f5f25;
  --blue:#3b82f6; --purple:#9333ea; --orange:#ea580c;
  --honor:#fde68a; --shard:#a78bfa;

  /* Body / UI — sturdy humanist sans, full Cyrillic, reads firm at 11-13px */
  --pix: 'Rubik', 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Display — geometric game display, full Cyrillic, looks confident not MMO */
  --display: 'Unbounded', 'Rubik', system-ui, sans-serif;
  /* Numbers — tabular figures via Rubik */
  --num: 'Unbounded', 'Rubik', system-ui, sans-serif;
}

*{box-sizing:border-box}

/* ───── pixel-art shield helpers ───── */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ───── Phone frame (just to show context, not the whole TG) ───── */
.phone{
  width:100%; height:100%;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(231,184,76,0.06), transparent 55%),
    linear-gradient(180deg,#0a0a12 0%, #06060c 100%);
  font-family:var(--pix);
  color:var(--txt);
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
}

.phone-bg{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(147,51,234,.08), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(231,184,76,.08), transparent 45%);
  pointer-events:none;
}

/* ───── Window chrome ───── */
.win{
  margin:8px;
  background:linear-gradient(180deg,#1f1a14 0%, #15110d 100%);
  border:2px solid var(--bord);
  position:relative;
  flex:1;
  display:flex; flex-direction:column;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(231,184,76,.08),
    0 8px 22px rgba(0,0,0,.7);
  overflow:hidden;
  z-index:1;
}
.win::before{
  content:''; position:absolute; inset:3px;
  border:1px solid rgba(231,184,76,.12);
  pointer-events:none;
}
/* gilded corner ornaments */
.gild{ position:absolute; width:14px; height:14px; pointer-events:none; z-index:2;}
.gild.tl{ top:-2px; left:-2px;
  background:
    linear-gradient(45deg, var(--gold) 0 2px, transparent 2px) top left/100% 2px no-repeat,
    linear-gradient(45deg, var(--gold) 0 2px, transparent 2px) top left/2px 100% no-repeat;
}
.gild.tl,.gild.tr,.gild.bl,.gild.br{
  background:
    linear-gradient(var(--gold),var(--gold)) top left/100% 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) top left/2px 100% no-repeat;
}
.gild.tr{ top:-2px; right:-2px;
  background:
    linear-gradient(var(--gold),var(--gold)) top right/100% 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) top right/2px 100% no-repeat;
}
.gild.bl{ bottom:-2px; left:-2px;
  background:
    linear-gradient(var(--gold),var(--gold)) bottom left/100% 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom left/2px 100% no-repeat;
}
.gild.br{ bottom:-2px; right:-2px;
  background:
    linear-gradient(var(--gold),var(--gold)) bottom right/100% 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom right/2px 100% no-repeat;
}

/* ───── Top bar ───── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px 9px;
  background:
    linear-gradient(180deg, #4a3517 0%, #2e1f08 100%);
  border-bottom:2px solid var(--bord);
  position:relative;
}
.topbar::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:rgba(0,0,0,.6);
}
.topbar h1{
  margin:0; font-size:15px; line-height:1; letter-spacing:1px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  color:var(--gold-l);
  text-shadow:0 1px 0 #000, 0 2px 0 rgba(0,0,0,.7), 0 0 6px rgba(231,184,76,.4);
}
.topbar h1 .sub{
  display:block; font-size:9px; color:#c9a55a; margin-top:4px; letter-spacing:.8px; opacity:.85;
  font-family:var(--pix); font-weight:600; text-shadow:none; text-transform:uppercase;
}
.icon-btn{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#2a1f10,#15110d);
  border:1px solid var(--bord);
  color:var(--gold); cursor:pointer;
  font-size:13px;
  text-shadow:0 1px 0 #000;
}
.icon-btn:active{ transform:translateY(1px); }
.icon-btn.close{
  background:linear-gradient(180deg,#7a2316,#4a0f08);
  border-color:#a83020;
  color:#fde2dc;
}

/* ───── Tab bar (segmented, scrollable) ───── */
.tabs{
  display:flex; gap:0;
  background:#0e0a06;
  border-bottom:2px solid var(--bord);
  overflow-x:auto;
  scrollbar-width:none;
  padding:0;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto;
  padding:8px 10px 7px;
  font-family:var(--pix);
  font-size:7px; letter-spacing:.6px;
  color:#7a6748;
  background:transparent;
  border:none; border-right:1px solid #1c150b;
  cursor:pointer;
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:54px;
  text-shadow:0 1px 0 #000;
}
.tab .ti{ font-size:14px; line-height:1; }
.tab.active{
  color:var(--gold-l);
  background:linear-gradient(180deg,#3a2a10 0%, #1a120a 100%);
}
.tab.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-l) 50%, var(--gold) 70%, transparent);
  box-shadow:0 0 8px rgba(231,184,76,.6);
}
.tab .badge{
  position:absolute; top:3px; right:6px;
  min-width:13px; height:13px; padding:0 3px;
  background:#dc2626; color:#fff;
  border:1px solid #000;
  font-size:7px; line-height:11px;
  display:flex; align-items:center; justify-content:center;
}

/* ───── Body / scroll area ───── */
.body{
  flex:1; overflow-y:auto;
  padding:0 0 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(231,184,76,.04), transparent 50%),
    linear-gradient(180deg,#15110d 0%, #0c0a07 100%);
  scrollbar-width:thin;
}
.body::-webkit-scrollbar{ width:6px; }
.body::-webkit-scrollbar-thumb{ background:#3a2a10; }
.body::-webkit-scrollbar-track{ background:transparent; }

/* ───── Section header (banner) ───── */
.sec-head{
  display:flex; align-items:center; gap:8px;
  margin:14px 12px 8px;
  position:relative;
}
.sec-head .lr{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--bord) 30%, var(--bord) 70%, transparent);
}
.sec-head .label{
  font-size:10px; color:var(--gold-l); letter-spacing:1.5px;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  padding:3px 9px;
  background:linear-gradient(180deg,#3a2a10,#1a120a);
  border:1px solid var(--bord);
  text-shadow:0 1px 0 #000;
  white-space:nowrap;
}
.sec-head .label .dot{ color:var(--gold); margin:0 4px; }

/* ───── Card ───── */
.card{
  margin:0 12px 8px;
  background:
    linear-gradient(180deg, rgba(60,46,20,.18) 0%, rgba(0,0,0,.0) 60%),
    linear-gradient(180deg,#1a160f, #100c08);
  border:1px solid #3a2a10;
  position:relative;
  padding:10px;
}
.card.frame{
  border:2px solid var(--bord);
  box-shadow: inset 0 0 0 1px rgba(231,184,76,.08), 0 2px 6px rgba(0,0,0,.4);
}
.card .cgild{ position:absolute; width:8px; height:8px; }
.card .cgild.tl{ top:-1px; left:-1px;
  background:
    linear-gradient(var(--gold),var(--gold)) top left/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) top left/1px 100% no-repeat;
}
.card .cgild.tr{ top:-1px; right:-1px;
  background:
    linear-gradient(var(--gold),var(--gold)) top right/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) top right/1px 100% no-repeat;
}
.card .cgild.bl{ bottom:-1px; left:-1px;
  background:
    linear-gradient(var(--gold),var(--gold)) bottom left/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom left/1px 100% no-repeat;
}
.card .cgild.br{ bottom:-1px; right:-1px;
  background:
    linear-gradient(var(--gold),var(--gold)) bottom right/100% 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) bottom right/1px 100% no-repeat;
}

/* ───── Pixel buttons ───── */
.btn{
  font-family:var(--pix);
  font-size:8px; letter-spacing:.6px;
  padding:7px 12px;
  border:none; cursor:pointer;
  color:#1a1208;
  background:
    linear-gradient(180deg, #FCDF7A 0%, #E7B84C 35%, #B8922E 70%, #8B6914 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 2px 0 #4a3308,
    0 3px 4px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  white-space:nowrap;
  border-radius:0;
}
.btn:active{ transform:translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.4), 0 0 0 #4a3308; }
.btn.sec{
  color:var(--gold-l);
  background:linear-gradient(180deg,#3a2a10,#15110d);
  box-shadow:
    inset 0 1px 0 rgba(231,184,76,.2),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 2px 0 #000;
  text-shadow:0 1px 0 #000;
}
.btn.danger{
  color:#fff;
  background:linear-gradient(180deg,#e25252 0%, #c8392c 40%, #7a1f12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 2px 0 #3a0c08;
  text-shadow:0 1px 0 #3a0c08;
}
.btn.green{
  color:#fff;
  background:linear-gradient(180deg,#7be08a 0%, #4ade80 40%, #1f6b2e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 2px 0 #0e3a16;
  text-shadow:0 1px 0 #0e3a16;
}
.btn.lg{ padding:11px 16px; font-size:10px; letter-spacing:1px; }
.btn.full{ display:flex; width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.6); }

/* ───── Currency chip ───── */
.chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 6px 3px 4px;
  background:#0e0a06;
  border:1px solid var(--slot-bd);
  font-size:8px;
  color:var(--txt);
  text-shadow:0 1px 0 #000;
}
.chip img{ width:12px; height:12px; }
.chip.gold{ color:var(--gold-l); }
.chip.pur{ color:#c084fc; }
.chip.honor{ color:var(--honor); }

/* ───── Tag pill ───── */
.tagpill{
  display:inline-block; padding:2px 6px;
  background:linear-gradient(180deg,#3a2a10,#1a120a);
  border:1px solid var(--bord);
  color:var(--gold-l);
  font-size:7px; letter-spacing:1.2px;
  text-shadow:0 1px 0 #000;
  margin-right:5px;
}

/* ───── Role pill ───── */
.role{
  display:inline-block;
  padding:2px 5px;
  font-size:6px; letter-spacing:.6px;
  border:1px solid #000;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
  margin-left:4px;
  color:#fff;
  vertical-align:middle;
}
.role.leader{ background:linear-gradient(180deg,#fde68a,#dc7c1c); color:#3a0e00; text-shadow:0 1px 0 rgba(255,255,255,.3); }
.role.coleader{ background:linear-gradient(180deg,#f97316,#9a3812); }
.role.officer{ background:linear-gradient(180deg,#3b82f6,#1e3a8a); }
.role.member{ background:linear-gradient(180deg,#64748b,#334155); }

/* ───── HP / progress bars ───── */
.bar{
  position:relative;
  width:100%;
  height:14px;
  background:
    repeating-linear-gradient(90deg, #050402 0 4px, #0e0a06 4px 8px);
  border:2px solid #000;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.6), 0 0 0 1px var(--bord);
  overflow:hidden;
}
.bar-fill{
  height:100%;
  background:
    linear-gradient(180deg, #ffe27a 0%, #f0c040 40%, #b88a14 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.4);
  transition:width .3s;
  position:relative;
}
.bar-fill.xp{ background:linear-gradient(180deg,#7be08a 0%,#3aa84a 50%,#1f6b2e 100%); }
.bar-fill.hp{ background:linear-gradient(180deg,#ff7b6e 0%,#dc2626 50%,#7a1f12 100%); }
.bar-fill.boss-hp{
  background:
    linear-gradient(180deg,#ff8585 0%, #c8392c 35%, #7a1f12 100%);
}
.bar-fill::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.15) 5px 6px);
  mix-blend-mode:screen;
}
.bar-text{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:7px; color:#fff; text-shadow:0 1px 0 #000, 0 0 3px #000;
  letter-spacing:.5px;
  z-index:2;
}

.bar.tall{ height:18px; }
.bar.huge{ height:26px; }
.bar.huge .bar-text{ font-size:9px; letter-spacing:1px; }

/* ───── Stat tile ───── */
.stat-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:6px;
  padding:0 12px;
}
.stat-tile{
  background:
    linear-gradient(180deg, #1a160f 0%, #0c0907 100%);
  border:1px solid #3a2a10;
  padding:7px 4px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-align:center;
  position:relative;
}
.stat-tile .v{ font-size:11px; color:var(--gold-l); text-shadow:0 1px 0 #000; }
.stat-tile .l{ font-size:6px; color:var(--txt-dim); letter-spacing:.5px; }
.stat-tile .ic{ font-size:12px; }

/* ───── Hero (clan banner) ───── */
.hero{
  margin:10px 12px 0;
  position:relative;
  padding:14px 12px 12px 100px;
  min-height:108px;
  background:
    linear-gradient(135deg, rgba(20,12,4,0) 0%, rgba(20,12,4,.7) 100%),
    linear-gradient(180deg, #2a1f10 0%, #15110d 100%);
  border:2px solid var(--bord);
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px);
  pointer-events:none;
}
.hero-bg{
  position:absolute; inset:0; opacity:.18;
  background:
    radial-gradient(circle at 80% 30%, rgba(231,184,76,.6), transparent 40%),
    radial-gradient(circle at 30% 80%, rgba(147,51,234,.5), transparent 50%);
  pointer-events:none;
}
.hero-crest{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:78px; height:78px;
}
.hero-name{
  font-size:17px; color:var(--gold-l);
  font-family:var(--display); font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  text-shadow:0 1px 0 #000, 0 2px 0 rgba(0,0,0,.6), 0 0 6px rgba(231,184,76,.5);
  display:flex; align-items:center; gap:5px;
  line-height:1.1;
  margin-bottom:6px;
}
.hero-desc{
  font-size:7px; color:#c9b88a; line-height:1.5;
  margin:6px 0 8px;
  opacity:.9;
}
.hero-row{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:7px; color:var(--txt);
}
.hero-row b{ color:var(--gold-l); }

/* xp bar in hero */
.xp-bar-wrap{ margin-top:8px; }
.xp-bar-label{
  display:flex; justify-content:space-between;
  font-size:6px; color:var(--txt-dim);
  letter-spacing:.5px;
  margin-bottom:2px;
}
.xp-bar-label .lvl{ color:var(--gold-l); }

/* ───── Clan list row ───── */
.clan-row{
  margin:0 12px 6px;
  padding:8px;
  background:linear-gradient(180deg,#1a160f, #100c08);
  border:1px solid #3a2a10;
  display:flex; gap:10px; align-items:center;
  position:relative;
  cursor:pointer;
}
.clan-row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, transparent, var(--bord), transparent);
}
.clan-row:hover{ border-color:var(--bord); }
.clan-row .crest{ flex:0 0 48px; width:48px; height:48px; }
.clan-row .info{ flex:1; min-width:0; }
.clan-row .name{
  font-size:9px; color:var(--gold-l);
  text-shadow:0 1px 0 #000;
  display:flex; align-items:center; gap:4px; flex-wrap:nowrap;
  white-space:nowrap; overflow:hidden;
}
.clan-row .name .nm{ overflow:hidden; text-overflow:ellipsis; }
.clan-row .meta{
  margin-top:5px;
  display:flex; gap:8px; flex-wrap:wrap;
  font-size:6px; color:var(--txt-dim); letter-spacing:.4px;
}
.clan-row .meta b{ color:var(--txt); }
.clan-row .meta .ic{ color:var(--gold); margin-right:2px; }
.clan-row .joinbtn{ flex:0 0 auto; }

/* mode dot */
.mode-dot{
  display:inline-flex; align-items:center; gap:2px;
  font-size:6px; padding:1px 4px; border:1px solid #3a2a10;
  background:#0e0a06; color:#9a8260;
}
.mode-dot.open{ color:#7be08a; border-color:#1f5f25; }
.mode-dot.app{ color:#fde68a; border-color:#6b4f10; }
.mode-dot.closed{ color:#c084fc; border-color:#5c2a7a; }

/* ───── Search/filter row ───── */
.toolbar{
  display:flex; gap:6px; padding:10px 12px 6px; align-items:center;
}
.search{
  flex:1; position:relative;
}
.search input{
  width:100%;
  font-family:var(--pix);
  font-size:8px;
  padding:8px 8px 8px 26px;
  background:#0e0a06;
  border:1px solid var(--slot-bd);
  color:var(--txt);
  outline:none;
}
.search input:focus{ border-color:var(--bord); }
.search .si{
  position:absolute; left:7px; top:50%; transform:translateY(-50%);
  color:var(--gold); font-size:11px;
}
.sort-btn{
  font-family:var(--pix);
  font-size:7px;
  padding:8px 10px;
  background:#0e0a06;
  border:1px solid var(--slot-bd);
  color:var(--gold-l);
  cursor:pointer;
  display:flex; align-items:center; gap:4px;
}

/* filter chips */
.filter-row{
  display:flex; gap:5px; padding:0 12px 6px; overflow-x:auto;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{ display:none; }
.fchip{
  flex:0 0 auto;
  font-family:var(--pix);
  font-size:7px;
  padding:5px 9px;
  background:#0e0a06;
  border:1px solid #3a2a10;
  color:var(--txt-dim);
  cursor:pointer;
  letter-spacing:.5px;
}
.fchip.on{
  background:linear-gradient(180deg,#3a2a10,#1a120a);
  color:var(--gold-l);
  border-color:var(--bord);
  text-shadow:0 1px 0 #000;
}

/* ───── Member rows ───── */
.member{
  margin:0 12px 5px;
  padding:7px 8px;
  background:linear-gradient(90deg,#1a160f 0%, #110d08 100%);
  border:1px solid #2a2010;
  display:flex; align-items:center; gap:8px;
  position:relative;
}
.member.me{ border-color:var(--bord); background:linear-gradient(90deg, rgba(231,184,76,.08), rgba(0,0,0,0)); }
.member .av{
  width:34px; height:34px; flex:0 0 34px;
  background:#0e0a06;
  border:1px solid var(--slot-bd);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.member .av .online{
  position:absolute; right:-2px; bottom:-2px;
  width:9px; height:9px; background:#4ade80;
  border:1px solid #000;
  box-shadow:0 0 4px rgba(74,222,128,.7);
}
.member .av .offline{ position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; background:#475569; border:1px solid #000; }
.member .meminfo{ flex:1; min-width:0; }
.member .nm{ font-size:8px; color:var(--txt); display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.member .nm b{ color:var(--gold-l); text-shadow:0 1px 0 #000; }
.member .submeta{ margin-top:4px; font-size:6px; color:var(--txt-dim); letter-spacing:.4px; }
.member .submeta b{ color:var(--txt); }
.member .actions{ flex:0 0 auto; display:flex; gap:4px; }

/* ───── Buff cards ───── */
.buff-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;
  padding:0 12px;
}
.buff{
  position:relative;
  padding:8px 8px 8px 38px;
  background:linear-gradient(180deg,#1a160f, #110d08);
  border:1px solid #3a2a10;
  min-height:62px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.buff.active{
  border-color:#4ade80;
  box-shadow: inset 0 0 8px rgba(74,222,128,.18), 0 0 8px rgba(74,222,128,.18);
}
.buff .bicon{
  position:absolute; left:6px; top:7px;
  width:26px; height:26px;
  background:#0a0806;
  border:1px solid var(--slot-bd);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
}
.buff .bname{ font-size:7px; color:var(--gold-l); text-shadow:0 1px 0 #000; line-height:1.3; }
.buff .bcost{
  margin-top:5px;
  font-size:6px; color:var(--txt-dim); letter-spacing:.3px;
  display:flex; align-items:center; gap:3px;
}
.buff .bcost img{ width:8px; height:8px; }
.buff .bcost b{ color:var(--gold); }
.buff .btime{
  position:absolute; top:5px; right:5px;
  font-size:6px; color:#94a3b8;
  background:#000;
  padding:1px 3px;
  border:1px solid var(--slot-bd);
}
.buff.active .btime{ color:#4ade80; border-color:#1f6b2e; }
.buff .activate{
  margin-top:5px; align-self:stretch;
  font-family:var(--pix); font-size:7px; padding:4px 0;
  background:linear-gradient(180deg,#3a2a10,#1a120a);
  border:1px solid var(--bord);
  color:var(--gold-l);
  cursor:pointer;
}
.buff.active .activate{
  background:linear-gradient(180deg,#1f5f25,#0e3a16);
  border-color:#4ade80;
  color:#dcfce7;
}

/* ───── Treasury ───── */
.treasury{
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px;
  padding:0 12px;
}
.treasury .tr-cell{
  position:relative;
  padding:8px 10px 8px 42px;
  background:
    linear-gradient(135deg, rgba(231,184,76,.05), rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#1a160f,#0c0907);
  border:1px solid #3a2a10;
  min-height:48px;
}
.treasury .tr-icon{
  position:absolute; left:6px; top:7px;
  width:32px; height:32px;
  background:#0a0806; border:1px solid var(--slot-bd);
  display:flex; align-items:center; justify-content:center;
}
.treasury .tr-icon img{ width:22px; height:22px; }
.treasury .tr-name{ font-size:6px; color:var(--txt-dim); letter-spacing:.5px; }
.treasury .tr-val{ font-size:15px; font-family:var(--num); font-weight:700; color:var(--gold-l); text-shadow:0 1px 0 #000; line-height:1; margin-top:3px; letter-spacing:.3px; }
.treasury .tr-d{ font-size:6px; color:#4ade80; margin-top:2px; }

/* ───── Donate slider ───── */
.donate{ padding:0 12px; }
.donate-row{
  display:flex; align-items:center; gap:6px;
  margin-bottom:7px;
}
.donate input[type=range]{
  flex:1; -webkit-appearance:none; height:14px;
  background:transparent;
}
.donate input[type=range]::-webkit-slider-runnable-track{
  height:14px;
  background:
    repeating-linear-gradient(90deg, #050402 0 4px, #0e0a06 4px 8px);
  border:2px solid #000;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.6), 0 0 0 1px var(--bord);
}
.donate input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:18px;
  background:linear-gradient(180deg,#FCDF7A 0%, #E7B84C 50%, #B8922E 100%);
  border:1px solid #000;
  margin-top:-4px;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #4a3308;
}
.donate-amt{
  flex:0 0 78px;
  font-size:9px; color:var(--gold-l);
  text-align:right; padding:6px 8px;
  background:#0e0a06; border:1px solid var(--slot-bd);
  text-shadow:0 1px 0 #000;
  font-family:var(--pix);
}
/* compact 3-stat reward bar for FARM donation */
.donate-rewards{
  display:flex; align-items:stretch; gap:0;
  background:linear-gradient(180deg,#0e0a06,#080604);
  border:1px solid var(--bord); margin-bottom:8px;
  padding:6px 4px;
}
.donate-rewards .dr-cell{
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:11px; color:var(--gold-l); font-family:var(--num);
}
.donate-rewards .dr-cell .dr-ic{ width:14px; height:14px; }
.donate-rewards .dr-cell b{ font-weight:400; color:#7be08a; font-size:13px; }
.donate-rewards .dr-cell .dr-l{ color:var(--txt-dim); font-size:9px; letter-spacing:.5px; font-family:var(--pix); }
.donate-rewards .dr-sep{ width:1px; background:linear-gradient(180deg, transparent, var(--bord), transparent); margin:2px 0; }

/* Leader-only USDT/Season pool */
.pool{ padding:0 12px 4px; display:grid; gap:6px; }
.pool-cell{
  display:flex; align-items:center; gap:10px;
  padding:10px;
  background:
    linear-gradient(180deg, rgba(231,184,76,.06), transparent),
    linear-gradient(180deg,#1a1208,#0a0604);
  border:1px solid var(--bord);
  position:relative;
}
.pool-cell::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#FCDF7A,#9B7A20);
}
.pool-ic{ width:32px; height:32px; flex:0 0 32px; }
.pool-info{ flex:1; min-width:0; }
.pool-l{ font-size:9px; color:var(--txt-dim); letter-spacing:1px; font-family:var(--pix); }
.pool-v{ font-size:18px; color:var(--gold-l); font-family:var(--num); line-height:1.1; text-shadow:0 1px 0 #000; }
.pool-d{ font-size:9px; color:#7a6748; margin-top:1px; font-family:var(--pix); letter-spacing:.3px; }
.pool-act{ flex:0 0 auto; font-size:9px !important; padding:8px 10px !important; }

/* Distribute modal */
.dist-total{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:linear-gradient(180deg,#0e0a06,#080604);
  border:1px solid var(--bord);
  margin-bottom:10px;
}
.dist-total img{ width:36px; height:36px; }
.dist-total .dt-l{ font-size:9px; color:var(--txt-dim); letter-spacing:1px; }
.dist-total .dt-v{ font-size:22px; color:var(--gold-l); font-family:var(--num); line-height:1; }

.dist-modes{ display:grid; gap:5px; margin-bottom:10px; }
.dist-modes .dm{
  display:grid; grid-template-columns:32px 1fr; gap:4px 10px;
  padding:9px 10px;
  background:#0a0806; border:1px solid #3a2a10;
  text-align:left; cursor:pointer; font-family:var(--pix);
  color:var(--txt);
  position:relative;
}
.dist-modes .dm.on{
  border-color:var(--gold); background:linear-gradient(180deg, rgba(231,184,76,.08), transparent), #0e0a06;
  box-shadow:inset 0 0 0 1px rgba(231,184,76,.3);
}
.dist-modes .dm-ic{ grid-row:1/3; align-self:center; justify-self:center;
  font-size:20px; color:var(--gold-l);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:#000; border:1px solid var(--bord);
}
.dist-modes .dm.on .dm-ic{ background:linear-gradient(180deg,#3a2a10,#1a120a); }
.dist-modes .dm-t{ font-size:11px; color:var(--gold-l); letter-spacing:.8px; font-family:var(--display); }
.dist-modes .dm-d{ font-size:9px; color:var(--txt-dim); line-height:1.4; }

.dist-preview{
  border:1px solid #2a2010; padding:8px 10px;
  background:rgba(0,0,0,.3);
}
.dp-h{ font-size:9px; color:var(--gold-l); letter-spacing:1px; margin-bottom:6px; font-family:var(--pix); }
.dp-row{
  display:grid; grid-template-columns:80px 1fr 80px; gap:6px;
  align-items:center; font-size:10px; padding:3px 0;
}
.dp-nm{ color:var(--txt); font-family:var(--pix); }
.dp-bar{ height:5px; background:#0a0806; border:1px solid #2a2010; position:relative; }
.dp-bar > span{ display:block; height:100%; background:linear-gradient(90deg, var(--gold-d), var(--gold-l)); }
.dp-v{ text-align:right; color:var(--gold-l); font-family:var(--num); font-size:12px; }
.dp-foot{ font-size:9px; color:var(--txt-dim); text-align:center; margin-top:6px; font-style:italic; }

.donate-info{
  display:flex; flex-direction:column; gap:5px; font-size:10px; color:var(--txt-dim); margin-bottom:10px;
}
.donate-info .row-i{ display:flex; align-items:center; gap:6px; }
.donate-info img{ width:13px; height:13px; }
.donate-info svg.honor{ width:14px; height:14px; }
.donate-info b{ color:#fde68a; font-weight:800; }
.donate-info .l{ color:var(--txt-dim); margin-left:2px; font-weight:500; }

/* ── Settings modal ── */
.modal-bg{ position:absolute; inset:0; background:rgba(0,0,0,.78); z-index:50; display:flex; align-items:center; justify-content:center; padding:14px; backdrop-filter:blur(2px); }
.modal{ width:100%; max-width:340px; background:linear-gradient(180deg,#1f1a14 0%, #15110d 100%); border:2px solid var(--bord); position:relative; box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 12px 30px rgba(0,0,0,.7); }
.modal::before{ content:''; position:absolute; inset:3px; border:1px solid rgba(231,184,76,.12); pointer-events:none; }
.modal-head{ padding:11px 12px 9px; border-bottom:1px solid #3a2a10; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(231,184,76,.08), transparent); }
.modal-head h2{ margin:0; font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:1px; color:var(--gold-l); text-shadow:0 1px 0 #000; }
.modal-body{ padding:12px; display:flex; flex-direction:column; gap:8px; max-height:480px; overflow:auto; }
.set-row{ display:flex; align-items:center; gap:10px; padding:10px; background:#0e0a06; border:1px solid var(--slot-bd); }
.set-row.danger{ border-color:#7a1f12; background:linear-gradient(180deg, rgba(220,38,38,.08), transparent), #0e0a06; }
.set-row .ic{ width:34px; height:34px; flex:0 0 34px; background:linear-gradient(180deg, rgba(231,184,76,.1), transparent), #1a1208; border:1px solid var(--bord); display:flex; align-items:center; justify-content:center; color:var(--gold-l); font-size:18px; }
.set-row .ic.danger-ic{ background:linear-gradient(180deg, rgba(220,38,38,.18), transparent), #1a0606; border-color:#a83020; color:#fca5a5; }
.set-row .info{ flex:1; min-width:0; }
.set-row .nm{ font-size:11px; color:var(--gold-l); font-family:var(--display); font-weight:800; letter-spacing:.5px; }
.set-row .nm.dnm{ color:#fca5a5; }
.set-row .desc{ font-size:9px; color:var(--txt-dim); margin-top:3px; line-height:1.45; }
.set-row .cost{ display:inline-flex; align-items:center; gap:4px; padding:3px 7px; background:#0a0703; border:1px solid var(--bord); color:var(--gold-l); font-size:10px; font-weight:800; margin-top:6px; }
.set-row .cost img{ width:11px; height:11px; }
.set-row .go{ flex:0 0 auto; }

/* Crest gallery */
.crest-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-top:8px; }
.crest-cell{ aspect-ratio:1/1; padding:4px; background:#0e0a06; border:1px solid var(--slot-bd); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.crest-cell.on{ border-color:var(--gold); background:linear-gradient(180deg, rgba(231,184,76,.15), transparent), #1a1208; box-shadow:inset 0 0 0 1px var(--gold-l); }
.crest-cell .crest{ width:100%; height:100%; }

/* Disband warning */
.warn-box{ background:linear-gradient(180deg, rgba(220,38,38,.12), transparent), #1a0606; border:1px solid #7a1f12; padding:11px 12px; margin-top:4px; }
.warn-box .h{ font-family:var(--display); font-weight:800; color:#fca5a5; font-size:12px; letter-spacing:.8px; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.warn-box .b{ font-size:10.5px; color:#f5d0c5; line-height:1.55; }
.warn-list{ list-style:none; padding:0; margin:8px 0 0; font-size:10px; color:#f5d0c5; }
.warn-list li{ padding:3px 0 3px 18px; position:relative; line-height:1.5; }
.warn-list li::before{ content:'✕'; position:absolute; left:0; color:#dc2626; font-weight:700; }
.warn-confirm-row{ display:flex; gap:8px; align-items:center; padding:8px 10px; margin-top:10px; background:#0a0703; border:1px dashed #7a1f12; font-size:9px; color:var(--txt-dim); }
.warn-confirm-row label{ flex:0 0 auto; letter-spacing:.5px; }
.warn-confirm-row input{ flex:1; min-width:0; background:transparent; border:none; color:#fde68a; font-family:var(--pix); font-size:11px; font-weight:800; letter-spacing:1.5px; outline:none; padding:3px 0; text-transform:uppercase; }
.modal-foot{ display:flex; gap:8px; padding:10px 12px 12px; border-top:1px solid #3a2a10; }
.modal-foot .btn{ flex:1; padding:9px; font-size:10px; }

/* Honor SVG icon — visual cue (gold wings around a gem) */
.honor-svg{ display:inline-block; vertical-align:middle; }

/* ───── Boss ───── */
.boss-stage{
  margin:10px 12px;
  padding:14px 10px 12px;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(220,38,38,.18), transparent 60%),
    linear-gradient(180deg,#2a0c0c 0%, #15080a 100%);
  border:2px solid #7a1f12;
  position:relative;
  overflow:hidden;
}
.boss-stage::before{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,0,0,.04) 0 2px, transparent 2px 8px);
  pointer-events:none;
}
.boss-stage::after{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, #ff4040 30%, #ff8080 50%, #ff4040 70%, transparent);
  box-shadow:0 0 8px #ff4040;
}
.boss-portrait{
  width:124px; height:124px; margin:4px auto 8px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(220,38,38,.3), transparent 70%),
    repeating-linear-gradient(45deg, #1a0606 0 4px, #0a0303 4px 8px);
  border:2px solid #4a0808;
  filter:drop-shadow(0 0 10px rgba(255,40,40,.4));
}
.boss-lvl-pill{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,#fde68a,#dc7c1c);
  color:#3a0e00;
  padding:2px 8px;
  font-size:7px; letter-spacing:1px;
  border:1px solid #000;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  z-index:3;
}
.boss-name{
  text-align:center;
  font-size:16px; color:#ffd2c8;
  font-family:var(--display); font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  text-shadow:0 1px 0 #000, 0 0 6px rgba(255,80,80,.6);
  letter-spacing:1.5px;
  margin-bottom:8px;
}
.boss-attempts{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; font-size:7px; color:var(--txt-dim);
}
.boss-attempts .pips{ display:flex; gap:3px; }
.boss-attempts .pip{
  width:13px; height:13px;
  background:#0e0a06;
  border:1px solid #4a3818;
  display:flex; align-items:center; justify-content:center;
  font-size:9px;
}
.boss-attempts .pip.on{
  background:linear-gradient(180deg,#fde68a,#dc7c1c);
  border-color:#000;
  color:#3a0e00;
}

/* ───── Damage leaderboard ───── */
.dmg-row{
  display:flex; align-items:center; gap:8px;
  padding:5px 8px;
  margin:0 12px 4px;
  background:linear-gradient(90deg,#1a160f, #110d08);
  border:1px solid #2a2010;
  font-size:7px;
  position:relative;
}
.dmg-row .pos{
  flex:0 0 18px; text-align:center;
  font-size:9px; color:var(--txt-dim);
}
.dmg-row .pos.t1{ color:#fde68a; text-shadow:0 0 4px rgba(253,230,138,.5); }
.dmg-row .pos.t2{ color:#cbd5e1; }
.dmg-row .pos.t3{ color:#d97706; }
.dmg-row .av{
  width:22px; height:22px; flex:0 0 22px;
  background:#0e0a06; border:1px solid var(--slot-bd);
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.dmg-row .nm{ flex:1; color:var(--txt); }
.dmg-row .nm b{ color:var(--gold-l); }
.dmg-row .dmg{ color:#fb923c; font-size:8px; text-shadow:0 1px 0 #000; }
.dmg-row .at{ color:var(--txt-dim); font-size:6px; }

/* ───── Upgrade tree ───── */
.upgr-points{
  margin:10px 12px;
  padding:10px;
  background:
    linear-gradient(180deg, rgba(231,184,76,.08), rgba(0,0,0,0)),
    linear-gradient(180deg, #1a160f, #0e0a06);
  border:1px solid var(--bord);
  display:flex; align-items:center; justify-content:space-between;
}
.upgr-points .lab{ font-size:7px; color:var(--txt-dim); letter-spacing:.6px; }
.upgr-points .v{
  font-size:18px; color:var(--gold-l); text-shadow:0 1px 0 #000, 0 0 6px rgba(231,184,76,.5);
}

.upgr-list{
  padding:0 12px;
  display:flex; flex-direction:column; gap:5px;
}
.upgr{
  display:flex; align-items:center; gap:8px;
  padding:8px;
  background:linear-gradient(90deg,#1a160f 0%, #110d08 100%);
  border:1px solid #3a2a10;
  position:relative;
}
.upgr .uic{
  width:36px; height:36px;
  background:#0e0a06; border:1px solid var(--slot-bd);
  flex:0 0 36px;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  position:relative;
}
.upgr .uinfo{ flex:1; min-width:0; }
.upgr .uname{ font-size:8px; color:var(--gold-l); text-shadow:0 1px 0 #000; }
.upgr .udesc{ font-size:6px; color:var(--txt-dim); margin-top:3px; line-height:1.4; }
.upgr .pips{ display:flex; gap:3px; margin-top:4px; }
.upgr .pip{
  width:14px; height:6px; background:#0e0a06; border:1px solid #3a2a10;
}
.upgr .pip.on{
  background:linear-gradient(180deg,#FCDF7A,#9B7A20);
  border-color:#000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.upgr .ubuy{ flex:0 0 auto; }
.upgr.locked{ opacity:.55; filter:grayscale(.7); }
.upgr.locked .uic::after{
  content:'🔒'; position:absolute; right:-3px; top:-3px;
  font-size:10px; background:#000; padding:0 1px;
}
.upgr.maxed .ubuy{ display:none; }
.upgr.maxed .uname::after{
  content:' MAX';
  color:#4ade80; font-size:6px; margin-left:5px; letter-spacing:1px;
}

/* war upgrades section subtle lock */
.upgr-war{
  margin:14px 12px 0; padding:12px 8px;
  background:linear-gradient(180deg,#0e0a06, #050402);
  border:1px dashed #3a2a10;
  text-align:center;
  position:relative;
}
.upgr-war .ww{ font-size:8px; color:var(--purple); letter-spacing:1px; }
.upgr-war .wsub{ font-size:6px; color:#94a3b8; margin-top:5px; line-height:1.5; }

/* ───── Announcements ───── */
.ann{
  padding:6px 0;
  border-bottom:1px dashed #2a2010;
  font-size:7px; color:#c9b88a;
  line-height:1.55;
}
.ann:last-child{ border-bottom:none; }
.ann .au{ color:var(--gold-l); margin-right:4px; }
.ann .at{ color:var(--txt-dim); font-size:6px; margin-left:5px; }

/* ───── Log ───── */
.log{
  padding:5px 8px;
  margin:0 12px 3px;
  background:linear-gradient(90deg,#15110d, #0c0907);
  border-left:2px solid var(--bord);
  font-size:7px;
  display:flex; align-items:center; gap:6px;
  line-height:1.4;
}
.log .lic{ flex:0 0 14px; text-align:center; font-size:11px; }
.log .ltxt{ flex:1; color:#c9b88a; }
.log .ltxt b{ color:var(--gold-l); }
.log .ltime{ color:var(--txt-dim); font-size:6px; }
.log.gain{ border-left-color:#4ade80; }
.log.spend{ border-left-color:#dc2626; }
.log.boss{ border-left-color:#fb923c; }
.log.member{ border-left-color:#3b82f6; }
.log.upgrade{ border-left-color:#9333ea; }

/* ───── Application card ───── */
.app-card{
  margin:0 12px 6px;
  padding:8px;
  background:linear-gradient(180deg, rgba(59,130,246,.06), rgba(0,0,0,0)),
             linear-gradient(180deg,#1a160f,#100c08);
  border:1px solid #3b82f6;
  display:flex; gap:8px; align-items:center;
}
.app-card .av{
  width:36px; height:36px; flex:0 0 36px;
  background:#0e0a06; border:1px solid var(--slot-bd);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.app-card .ai{ flex:1; min-width:0; }
.app-card .anm{ font-size:8px; color:var(--gold-l); }
.app-card .am{ font-size:6px; color:#c9b88a; line-height:1.5; margin-top:4px; font-style:italic; opacity:.85; }
.app-card .ameta{ font-size:6px; color:var(--txt-dim); margin-top:3px; }
.app-card{ flex-direction:column; align-items:stretch; }
.app-card .top{ display:flex; gap:8px; align-items:center; }
.app-card .acts{ display:flex; flex-direction:row; gap:6px; margin-top:8px; padding-top:8px;
  border-top:1px dashed #3a2a10; }
.app-card .acts .btn{ flex:1; padding:7px 8px; font-size:10px; letter-spacing:.5px; }

/* ───── Pixel crest container ───── */
.crest{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.crest svg{ width:100%; height:100%; image-rendering:pixelated; }

/* ───── small utils ───── */
.row{ display:flex; align-items:center; gap:6px; }
.col{ display:flex; flex-direction:column; gap:6px; }
.spacer{ flex:1; }
.pad-h{ padding-left:12px; padding-right:12px; }
.mt-6{ margin-top:6px; } .mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; }
.mb-6{ margin-bottom:6px; } .mb-8{ margin-bottom:8px; }
.t-dim{ color:var(--txt-dim); }
.t-gold{ color:var(--gold-l); }
.t-green{ color:#4ade80; }
.t-red{ color:#f87171; }
.t-pur{ color:#c084fc; }
.fs-6{ font-size:6px; } .fs-7{ font-size:7px; } .fs-8{ font-size:8px; } .fs-9{ font-size:9px; } .fs-10{ font-size:10px; } .fs-11{ font-size:11px; }

/* tap pulse for active boss attack */
@keyframes attack-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.45), 0 2px 0 #3a0c08, 0 0 0 0 rgba(220,38,38,0); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.45), 0 2px 0 #3a0c08, 0 0 14px 4px rgba(255,80,60,.4); }
}
.btn.attack{ animation: attack-pulse 1.4s ease-in-out infinite; }

/* boss spinner — slowly rotating sigil behind boss */
@keyframes slow-spin { to { transform: rotate(360deg); } }
.boss-sigil{
  position:absolute; inset:0;
  background-image: radial-gradient(circle, transparent 35%, rgba(220,38,38,.18) 36%, transparent 38%);
  animation: slow-spin 14s linear infinite;
  pointer-events:none;
}

/* ──────────────────────────────────────────────────────────────────
   APP-WIDE EXTENSION
   ────────────────────────────────────────────────────────────────── */
.app-frame{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--pix);color:var(--txt);}
.app-player{position:absolute;top:8px;left:8px;display:flex;gap:8px;align-items:center;background:linear-gradient(180deg,#1f1a14,#15110d);border:2px solid var(--bord);padding:5px 10px 5px 5px;z-index:5;}
.ap-av{width:44px;height:44px;flex:0 0 44px;}
.ap-av-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid var(--bord);position:relative;}
.ap-av-img::after{content:'';position:absolute;inset:0;border:1px solid rgba(231,184,76,.2);}
.ap-nm{font-size:11px;color:var(--gold-l);font-family:var(--display);letter-spacing:.5px;}
.ap-nm .ap-lvl{color:var(--gold);font-size:9px;margin-left:4px;}
.ap-hp{width:130px;height:8px;margin-top:3px;background:#0a0806;border:1px solid var(--bord);position:relative;}
.ap-hp-fill{height:100%;background:linear-gradient(180deg,#dc2626,#7a1f12);}
.ap-hp-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fde68a;text-shadow:0 1px 0 #000;}
.ap-bm{font-size:9px;color:var(--txt-dim);margin-top:2px;letter-spacing:.3px;}
.ap-bm b{color:var(--gold-l);}
.app-hud{position:absolute;top:8px;right:8px;display:flex;gap:4px;align-items:center;z-index:5;}
.ahud-currency{display:flex;align-items:center;gap:5px;background:linear-gradient(180deg,#1f1a14,#15110d);border:2px solid var(--bord);padding:4px 8px;font-family:var(--num);font-size:13px;color:var(--gold-l);text-shadow:0 1px 0 #000;}
.ahud-currency img{width:16px;height:16px;}
.ahud-plus{width:16px;height:16px;padding:0;background:linear-gradient(180deg,#FCDF7A,#9B7A20);border:1px solid #000;color:#1a1a24;font-size:11px;font-weight:bold;cursor:pointer;margin-left:3px;font-family:var(--pix);}
.ahud-spacer{width:4px;}
.ahud-icon{width:30px;height:30px;background:#15110d;border:2px solid var(--bord);color:var(--gold-l);font-size:14px;cursor:pointer;font-family:var(--pix);}
.app-side{position:absolute;right:8px;top:60px;display:flex;flex-direction:column;gap:5px;z-index:5;}
.app-pill{width:54px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(180deg,#1f1a14,#15110d);border:2px solid var(--bord);cursor:pointer;font-family:var(--pix);}
.app-pill.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(231,184,76,.12),transparent),#15110d;}
.app-pill .api-ic{font-size:18px;}
.app-pill .api-l{font-size:8px;color:var(--gold-l);letter-spacing:.4px;}
.app-world{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#2a2a3a 0%,#0a0a14 70%);z-index:1;}
.app-world-bg{position:absolute;inset:0;}
.aw-floor{position:absolute;left:0;right:0;bottom:80px;height:200px;background:repeating-linear-gradient(0deg,#2a4a20 0 22px,#1f3a18 22px 44px),linear-gradient(180deg,transparent,rgba(0,0,0,.4));background-blend-mode:multiply;border-top:2px solid #4a5f30;}
.aw-char{position:absolute;left:50%;bottom:160px;transform:translateX(-50%);font-size:42px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.6));}
.aw-trees span{position:absolute;font-size:36px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6));}
.aw-toast{position:absolute;left:50%;top:90px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(122,15,8,.95),rgba(58,7,3,.95));border:2px solid #a83020;padding:8px 14px;font-family:var(--pix);text-align:center;}
.aw-toast .awt-h{font-size:11px;color:#fde68a;letter-spacing:1px;font-family:var(--display);}
.aw-toast .awt-d{font-size:9px;color:#fca5a5;margin-top:3px;}
.aw-toast .awt-d b{color:var(--gold-l);}
.app-xp-thin{position:absolute;left:0;right:0;bottom:62px;height:3px;background:#0a0806;border-top:1px solid #3a2a10;z-index:6;}
.app-xp-fill{height:100%;background:linear-gradient(90deg,#FCDF7A,#9B7A20);box-shadow:0 0 4px rgba(231,184,76,.6);}
.app-bottom{position:absolute;left:0;right:0;bottom:0;height:62px;z-index:6;display:grid;grid-template-columns:repeat(5,1fr);background:linear-gradient(180deg,#1f1a14,#0e0a06);border-top:2px solid var(--bord);}
.app-nav{background:transparent;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font-family:var(--pix);color:#7a6748;border-right:1px solid #2a2010;position:relative;}
.app-nav:last-child{border-right:0;}
.app-nav.on{color:var(--gold-l);background:linear-gradient(180deg,rgba(231,184,76,.12),transparent);}
.app-nav.on::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.app-nav .an-ic{font-size:20px;}
.app-nav .an-l{font-size:8px;letter-spacing:.5px;}
.mk-row{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid #2a2010;}
.mk-row:hover{background:rgba(231,184,76,.04);}
.mk-icon{width:52px;height:52px;background:linear-gradient(180deg,#1a1208,#0a0604);border:2px solid var(--bord);display:flex;align-items:center;justify-content:center;position:relative;}
.mk-icon::before{content:'';position:absolute;inset:1px;border:1px solid rgba(231,184,76,.15);}
.mk-icon-inner{font-size:26px;filter:drop-shadow(0 1px 0 #000);}
.mk-icon.r-rare{border-color:#3b82f6;box-shadow:inset 0 0 0 1px rgba(59,130,246,.3);}
.mk-icon.r-epic{border-color:#a78bfa;box-shadow:inset 0 0 0 1px rgba(167,139,250,.4);}
.mk-icon.r-legendary{border-color:#f59e0b;box-shadow:inset 0 0 0 1px rgba(245,158,11,.5),0 0 8px rgba(245,158,11,.3);}
.mk-info{min-width:0;}
.mk-name{display:flex;align-items:center;gap:6px;}
.mk-name b{font-size:11px;color:var(--gold-l);font-family:var(--display);letter-spacing:.4px;}
.mk-r{display:inline-block;font-size:8px;padding:1px 5px;background:#0a0806;border:1px solid var(--bord);color:var(--gold-l);letter-spacing:.5px;font-family:var(--pix);}
.mk-r.r-rare{color:#3b82f6;border-color:#3b82f6;}
.mk-r.r-epic{color:#a78bfa;border-color:#a78bfa;}
.mk-r.r-legendary{color:#f59e0b;border-color:#f59e0b;}
.mk-meta{font-size:9px;color:var(--txt-dim);margin-top:3px;display:flex;gap:5px;}
.mk-buy{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.mk-price{display:flex;align-items:center;gap:4px;font-family:var(--num);font-size:13px;color:var(--gold-l);}
.mk-price img{width:14px;height:14px;}
.mk-buy .btn{font-size:9px !important;padding:5px 10px !important;}

/* ── Clan apply / requirements (added 20260508i) ── */
.req-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.req-chip{display:inline-flex;align-items:center;gap:3px;font-size:9px;letter-spacing:.4px;
    color:var(--txt-dim);background:#120c06;border:1px solid var(--bord);
    padding:2px 6px;line-height:1.4;font-family:var(--pix);}
.req-chip b{color:var(--gold-l);font-family:var(--num);font-weight:400;}
.req-chip.gold{color:var(--gold-l);background:linear-gradient(180deg,rgba(231,184,76,.12),transparent),#120c06;}
.req-chip.ok{color:#7be08a;border-color:#3a5c3a;}
.btn.pending{background:linear-gradient(180deg,#251a08,#0e0a06);color:var(--gold-l);border-color:var(--bord);cursor:default;}
.btn.pending:hover{filter:none;}
.btn.xs{font-size:8px !important;padding:3px 8px !important;letter-spacing:.4px;}
.ann-head{display:flex;align-items:center;justify-content:space-between;
    padding:10px 12px 4px;gap:10px;}
.ann-head .sec-title{font-family:var(--display);font-size:9px;letter-spacing:1.5px;color:var(--gold-l);
    text-transform:uppercase;}

/* ── Clan list / detail rework (added 20260508j) ── */
.mode-mini{display:inline-block;font-size:7px;letter-spacing:.6px;
    padding:1px 5px;margin-left:6px;border:1px solid var(--bord);
    background:#0e0a06;color:var(--txt-dim);font-family:var(--pix);
    text-transform:uppercase;line-height:1.6;}
.mode-mini.open{color:#7be08a;border-color:#3a5c3a;}
.mode-mini.app{color:var(--gold-l);}
.mode-mini.closed{color:#a78bfa;border-color:#4a3a6a;}
.fee-caption{margin-top:5px;font-size:9px;letter-spacing:.4px;
    color:var(--gold-l);font-family:var(--pix);text-align:center;
    line-height:1.4;}
.fee-caption .lbl{color:var(--txt-dim);}
.fee-caption.ok,.fee-caption .ok{color:#7be08a;}
.pending-banner{margin:0 0 10px;padding:9px 11px;border:1px solid var(--bord);
    background:linear-gradient(180deg,rgba(231,184,76,.10),transparent),#0e0a06;
    color:var(--gold-l);text-align:center;font-size:11px;letter-spacing:.5px;
    font-family:var(--pix);}
.joinbtn{display:flex;flex-direction:column;align-items:stretch;
    min-width:90px;}