/* =========================================================
   Кръгозор — вариант Б · „Нощен музей“
   Тъмна кинематографична зала: графит, мастилено зелено, месинг.
   ========================================================= */
:root{
  --bg:#0e1211; --bg2:#101614; --bg3:#141c19;
  --panel:rgba(30,42,37,.56);
  --ink:#ece5d3; --ink2:#ddd5c1; --muted:#98a69c;
  --line:rgba(236,229,211,.10); --line2:rgba(236,229,211,.16);
  --brass:#c9a227; --brass2:#d8b25a; --brassdim:rgba(201,162,39,.30);
  --serif:"Georgia","Times New Roman",serif;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 24px 60px -30px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.03) inset, 0 -40px 60px -50px rgba(201,162,39,.20) inset;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 8%, rgba(45,88,76,.20), transparent 65%),
    linear-gradient(180deg,#0f1513 0%, #0e1211 34%, #0c100f 100%);
  background-attachment:fixed;
  min-height:100vh;
}
/* grain overlay — SVG, no file */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size:200px 200px;
}
/* slow drifting warm light */
body::before{
  content:""; position:fixed; z-index:0; pointer-events:none;
  width:120vmax; height:120vmax; left:-20vmax; top:-60vmax;
  background:radial-gradient(closest-side, rgba(201,162,39,.085), rgba(201,162,39,.02) 45%, transparent 70%);
  animation:drift 44s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(-4%,0,0) scale(1)}
  to{transform:translate3d(14%,10%,0) scale(1.15)}
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.012em}
button{font-family:inherit; font-size:14px; cursor:pointer}
small{font-size:12px}
::selection{background:rgba(201,162,39,.32); color:#fff}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:#0b0f0e}
::-webkit-scrollbar-thumb{background:#2c3a34; border:3px solid #0b0f0e; border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#435649}
*{scrollbar-color:#2c3a34 #0b0f0e; scrollbar-width:thin}

/* ---------- header ---------- */
.top{
  display:flex; align-items:center; gap:24px; padding:16px 40px;
  border-bottom:1px solid var(--line);
  background:rgba(11,15,14,.97);
  position:sticky; top:0; z-index:20;
  -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
}
.top::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.45),transparent)}
.brand{display:flex; align-items:center; gap:12px; min-width:190px}
.mark{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-size:18px; color:var(--brass2);
  border:1px solid rgba(201,162,39,.45);
  background:radial-gradient(circle at 32% 28%, rgba(201,162,39,.20), rgba(201,162,39,0) 70%);
  box-shadow:0 0 22px -6px rgba(201,162,39,.35) inset;
}
.brand h1{font-size:22px; line-height:1; color:var(--ink)}
.tag{margin:3px 0 0; font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--muted)}
.nav{display:flex; gap:28px; margin:0 auto}
.tab{
  background:none; border:0; padding:7px 2px; color:var(--muted);
  border-bottom:1px solid transparent; font-size:13.5px; letter-spacing:.02em;
  transition:color .25s, border-color .25s;
}
.tab:hover{color:var(--ink2)}
.tab.active{color:var(--ink); border-color:var(--brass)}
.tab b{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:rgba(201,162,39,.16); color:var(--brass2);
  font-size:11px; margin-left:5px; border:1px solid rgba(201,162,39,.24);
}
.topright{min-width:190px; display:flex; justify-content:flex-end}
.ghost{
  background:none; border:1px solid var(--line2); border-radius:2px; padding:9px 16px;
  color:var(--ink2); transition:border-color .25s, color .25s, background .25s;
}
.ghost:hover{border-color:var(--brass); color:var(--brass2); background:rgba(201,162,39,.06)}

/* ---------- layout ---------- */
main{position:relative; z-index:2}
.wrap{max-width:1320px; margin:0 auto; padding:0 40px}
.view{display:none}
.view.active{display:block; animation:fade .45s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.eyebrow{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass2);
  margin:0 0 16px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--brass),transparent)}
.hero{font-size:58px; line-height:1.04; margin:0 0 16px; max-width:820px; color:#f3eddd}
.hero em{font-style:italic; color:var(--brass2)}
.hero.small{font-size:40px; margin-bottom:22px}
.sub{color:var(--muted); max-width:520px; margin:0 0 34px; font-size:15.5px}
.label{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.hint{color:var(--muted); font-size:13px; margin:14px 0 0}

/* ---------- hero ---------- */
.heroband{
  position:relative; height:auto; min-height:clamp(430px,56vh,620px); overflow:hidden;
  display:flex; align-items:flex-end; padding-top:26px;
}
.heroimg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%;
  filter:saturate(.55) contrast(1.05) brightness(.92);
  transform:scale(1.04); animation:heroPush 26s ease-out both;
}
@keyframes heroPush{from{transform:scale(1.10)}to{transform:scale(1.02)}}
.heroveil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,16,15,.88) 0%, rgba(12,16,15,.25) 26%, rgba(12,16,15,.42) 55%, rgba(14,18,17,.97) 96%),
    linear-gradient(90deg, rgba(12,16,15,.80) 0%, rgba(12,16,15,.20) 55%, rgba(12,16,15,.05) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(201,162,39,.16), transparent 55%);
}
.heroinner{position:relative; width:100%; padding-bottom:104px}
.heroinner .eyebrow{margin-bottom:20px; animation:riseIn .9s .05s both}
.heroinner .hero{animation:riseIn 1s .12s both; text-shadow:0 2px 40px rgba(0,0,0,.6)}
.heroinner .sub{animation:riseIn 1s .24s both; color:#c3c9c1; margin-bottom:0}
@keyframes riseIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.herocaption{
  position:absolute; left:0; right:0; bottom:26px; z-index:2;
  display:flex; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8b978e;
}
.herocaption span{color:var(--brass2)}
.herocaption::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line2),transparent)}

/* ---------- grid / panels ---------- */
section > .wrap{padding-top:44px; padding-bottom:80px}
.grid{display:grid; grid-template-columns:1.12fr .88fr; gap:28px; align-items:start}
.rightcol{display:flex; flex-direction:column; gap:26px}
.panel{
  position:relative; background:var(--panel);
  border:1px solid rgba(236,229,211,.17); border-radius:2px; padding:26px;
  -webkit-backdrop-filter:blur(16px) saturate(115%); backdrop-filter:blur(16px) saturate(115%);
  box-shadow:var(--shadow);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s, box-shadow .45s;
}
.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(160deg, rgba(255,255,255,.055), transparent 38%);
}
.panel:hover{transform:translateY(-3px); border-color:rgba(201,162,39,.34);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(201,162,39,.10) inset, 0 -40px 70px -50px rgba(201,162,39,.28) inset}
.panelhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.wheelpanel:hover,.statpanel:hover{transform:none}

/* ---------- wheel ---------- */
.wheelwrap{position:relative; aspect-ratio:1/1; margin:6px auto 6px; max-width:600px}
#wheel{width:100%; height:100%; transition:transform 4.2s cubic-bezier(.17,.67,.12,1); transform-origin:50% 50%;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.55))}
#wheel text{font-family:var(--sans); font-size:9px; font-weight:500; fill:#f1ebda; pointer-events:none; letter-spacing:.03em}
#wheel path{transition:filter .35s ease, opacity .35s}
#wheel path:hover{filter:brightness(1.5) drop-shadow(0 0 7px rgba(216,178,90,.75))}
.pointer{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;
  border-top:18px solid var(--brass2); z-index:3;
  filter:drop-shadow(0 0 8px rgba(201,162,39,.75)) drop-shadow(0 3px 4px rgba(0,0,0,.8));
}
.hub{
  position:absolute; inset:0; margin:auto; width:132px; height:132px; border-radius:50%;
  background:radial-gradient(circle at 40% 30%, #1b2621, #0d1210 72%);
  border:1px solid rgba(201,162,39,.42);
  display:grid; place-content:center; text-align:center;
  box-shadow:0 0 0 8px rgba(10,14,13,.55), 0 0 40px -8px rgba(201,162,39,.28), 0 18px 40px rgba(0,0,0,.6) inset;
}
.hub span{font-family:var(--serif); font-size:36px; line-height:1; display:block; color:var(--brass2)}
.hub small{font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.wheelcontrols{display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap}
.switch{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); white-space:nowrap; cursor:pointer}
.switch input{display:none}
.switch span{
  width:38px; height:21px; border-radius:11px; background:#22302a; position:relative;
  transition:.3s; flex:none; border:1px solid var(--line2);
}
.switch span::after{
  content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%;
  background:#7f8d84; transition:.3s;
}
.switch input:checked + span{background:rgba(201,162,39,.28); border-color:rgba(201,162,39,.55)}
.switch input:checked + span::after{transform:translateX(17px); background:var(--brass2)}
select.mini{
  border:1px solid var(--line2); background:rgba(12,17,15,.8); color:var(--ink2); border-radius:2px;
  padding:6px 10px; font-size:12px; font-family:inherit;
}
select.mini:focus{outline:1px solid var(--brassdim); border-color:var(--brass)}

/* ---------- buttons ---------- */
.primary{
  background:linear-gradient(180deg,#d8b25a,#b8901f); color:#12180f; border:0; border-radius:2px;
  padding:14px 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:13.5px; font-weight:600; letter-spacing:.03em;
  box-shadow:0 10px 26px -14px rgba(201,162,39,.85), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:filter .2s, transform .2s, box-shadow .2s;
}
.primary:hover{filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 16px 34px -14px rgba(201,162,39,.95), 0 1px 0 rgba(255,255,255,.4) inset}
.primary:active{transform:translateY(0)}
.primary:disabled{background:#26302b; color:#6d7a72; box-shadow:none; cursor:not-allowed; transform:none}
.primary.wide{width:100%; margin-top:auto}
.primary span{font-size:15px}

/* ---------- topic card ---------- */
.topiccard{display:flex; flex-direction:column; min-height:100%}
.topiccard .num{font-size:11px; color:var(--muted); letter-spacing:.1em}
.area{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--brass2);
  margin:0 0 12px; display:flex; align-items:center; gap:8px}
.area::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--brass); box-shadow:0 0 8px rgba(201,162,39,.8)}
.topiccard h3{font-size:34px; line-height:1.16; margin:0 0 16px; color:#f4eedd}
.teaser{color:#b9c1b8; font-size:14.5px; margin:0 0 20px; line-height:1.68}
.meta{display:flex; gap:18px; flex-wrap:wrap; font-size:11px; letter-spacing:.05em; color:var(--muted);
  margin-bottom:22px; padding-top:14px; border-top:1px solid var(--line)}
.topiccard.swap #topicTitle,.topiccard.swap .teaser,.topiccard.swap .area{animation:swapIn .55s ease both}
@keyframes swapIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* ---------- stats ---------- */
.statrow{display:flex; align-items:center; justify-content:space-between; margin:8px 0 4px}
.bignum{font-family:var(--serif); font-size:42px; line-height:1; color:#f3eddd}
.bignum small{font-family:var(--sans); font-size:12px; color:var(--muted)}
.ring{position:relative; width:60px; height:60px}
.ring svg{width:60px; height:60px; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:3}
.ring .bg{stroke:rgba(236,229,211,.12)}
.ring .fg{stroke:var(--brass2); stroke-linecap:round; stroke-dasharray:113; stroke-dashoffset:113;
  transition:stroke-dashoffset .6s ease; filter:drop-shadow(0 0 5px rgba(201,162,39,.6))}
.ring span{position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:var(--ink2)}

/* ---------- lists ---------- */
.search{
  width:100%; padding:15px 18px; border:1px solid var(--line2); border-radius:2px;
  background:rgba(16,23,20,.72); color:var(--ink); font-family:inherit; font-size:14px;
  margin-bottom:24px; transition:border-color .25s, box-shadow .25s;
}
.search::placeholder{color:#7c8a81}
.search:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(201,162,39,.12)}
.alllist{display:grid; gap:8px}
.row{
  background:rgba(22,30,27,.55); border:1px solid var(--line); border-radius:2px; padding:15px 18px;
  display:flex; align-items:center; gap:16px; text-align:left; width:100%; color:inherit;
  transition:background .25s, border-color .25s, transform .25s;
}
.row:hover{border-color:rgba(201,162,39,.4); background:rgba(30,41,36,.72); transform:translateX(3px)}
.row .idx{font-size:11px; color:var(--muted); min-width:40px; letter-spacing:.04em}
.row .t{font-family:var(--serif); font-size:17px; color:var(--ink2)}
.row .a{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#93a096; margin-left:auto; white-space:nowrap}
.row.done{background:rgba(201,162,39,.055); border-color:rgba(201,162,39,.22)}
.row.done .t::after{content:" ✓"; color:var(--brass2); font-size:13px}
.empty{color:var(--muted); font-size:14px; padding:34px 0; max-width:52ch}

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:28px; overflow:auto;
  background:rgba(6,9,8,.80);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:fade .3s ease;
}
.modal[hidden]{display:none}
.sheet{
  position:relative; width:100%; max-width:780px; border-radius:2px; overflow:auto; max-height:92vh;
  background:linear-gradient(180deg,#141c19,#101614 55%,#0e1311);
  border:1px solid rgba(236,229,211,.16);
  box-shadow:0 50px 120px -50px #000, 0 0 0 1px rgba(201,162,39,.12) inset, 0 1px 0 rgba(255,255,255,.06) inset;
  animation:sheetIn .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheetIn{from{opacity:0; transform:translateY(22px) scale(.985)}to{opacity:1; transform:none}}
.sheethero{position:relative; height:168px; overflow:hidden; border-bottom:1px solid rgba(201,162,39,.22)}
.sheethero img{width:100%; height:100%; object-fit:cover; filter:saturate(.5) brightness(.62) contrast(1.05)}
.sheethero i{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,19,17,.25),rgba(14,19,17,.72) 60%,#111715 100%)}
.sheetbody{padding:30px 46px 40px}
.sheet.narrow{max-width:400px; text-align:center; padding:34px 34px 30px}
.close{
  position:absolute; top:14px; right:16px; background:rgba(10,14,13,.55); border:1px solid var(--line2);
  color:var(--ink2); width:32px; height:32px; border-radius:50%; font-size:13px; z-index:4;
  transition:border-color .2s, color .2s, transform .2s;
}
.close:hover{border-color:var(--brass); color:var(--brass2); transform:rotate(90deg)}
.sheet h3{font-size:34px; line-height:1.16; margin:0 0 20px; color:#f5efdf; max-width:24ch}
/* тестът към темата — тих ред под заглавието; заглавието не се мести */
.topictest{margin:-6px 0 20px}
.topictest .ghost{
  padding:6px 13px; font-size:12.5px; letter-spacing:.03em;
  color:var(--brass2); border-color:rgba(201,162,39,.4);
  background:rgba(201,162,39,.045);
}
.topictest .ghost:hover{color:#f2dfa2; border-color:var(--brass); background:rgba(201,162,39,.11)}
.topictest .ghost span{margin-left:2px}
.prose{font-size:17px; line-height:1.86; color:var(--ink2); max-width:66ch}
.prose p{margin:0 0 18px}
.prose .lead{font-size:18.5px; line-height:1.8; color:#efe8d6}
.prose > p:first-child::first-letter{
  font-family:var(--serif); font-size:58px; line-height:.86; float:left;
  margin:6px 12px 0 0; color:var(--brass2);
  text-shadow:0 0 22px rgba(201,162,39,.45);
}
.chip{
  display:inline-block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass2); background:rgba(201,162,39,.09); border:1px solid rgba(201,162,39,.26);
  border-radius:2px; padding:4px 10px; margin:2px 0 16px;
}
.questions{margin:10px 0 26px; max-width:66ch}
.questions .label{display:block; margin-bottom:6px; color:var(--brass2)}
.questions ol{margin:0; padding:0; list-style:none; counter-reset:q}
.questions li{
  counter-increment:q; position:relative; padding:13px 0 13px 34px;
  border-bottom:1px solid rgba(236,229,211,.09); color:#c8cfc5; font-size:15px; line-height:1.65;
}
.questions li:first-child{border-top:1px solid rgba(236,229,211,.09)}
.questions li::before{
  content:counter(q); position:absolute; left:0; top:13px;
  font-family:var(--serif); font-size:12px; color:var(--brass2);
  width:20px; height:20px; border:1px solid rgba(201,162,39,.3); border-radius:50%;
  display:grid; place-items:center; line-height:1;
}
.task{
  background:linear-gradient(90deg,rgba(201,162,39,.10),rgba(201,162,39,.02));
  border-left:2px solid var(--brass); padding:16px 20px; margin:24px 0; border-radius:0 2px 2px 0;
  max-width:66ch;
}
.task .label{color:var(--brass2)}
.task p{margin:7px 0 0; font-size:15px; color:#d9d1be; line-height:1.7}
.writing{margin-top:10px; padding-top:24px; border-top:1px solid var(--line)}
.writing > .label{display:block; color:#a9b5ab; max-width:60ch; line-height:1.7}
textarea{
  width:100%; padding:16px; border:1px solid var(--line2); border-radius:2px;
  background:rgba(10,14,13,.65); color:var(--ink);
  font-family:var(--serif); font-size:15px; line-height:1.75; resize:vertical; margin-top:10px;
  transition:border-color .25s, box-shadow .25s;
}
textarea::placeholder{color:#6f7d74; font-style:italic}
textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(201,162,39,.10)}
.writeactions{display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap}
.saved{color:var(--brass2); font-size:13px; letter-spacing:.03em}

/* ---------- timer ---------- */
.timer{font-family:var(--serif); font-size:68px; line-height:1; margin:20px 0; color:var(--brass2);
  text-shadow:0 0 40px rgba(201,162,39,.35); letter-spacing:.02em}
.timerbtns{display:flex; gap:8px; justify-content:center; margin-bottom:18px}
.timerbtns .ghost{padding:7px 15px; font-size:13px; min-width:48px}
.sheet.narrow .label{color:var(--brass2)}
.sheet.narrow .hint{text-align:left; line-height:1.7; margin-top:20px}

@media(max-width:900px){
  .top{padding:13px 18px; gap:10px; flex-wrap:wrap}
  .nav{order:3; width:100%; margin:0; gap:18px; overflow:auto}
  .topright{min-width:0}
  .wrap{padding:0 18px}
  .heroband{height:auto; min-height:clamp(360px,52vh,460px)}
  .heroinner{padding-bottom:78px}
  .hero{font-size:36px}
  .hero.small{font-size:30px}
  .grid{grid-template-columns:1fr}
  .sheethero{height:120px}
  .sheetbody{padding:24px 20px 30px}
  .sheet h3{font-size:26px}
  .prose{font-size:16.5px}
  .topiccard h3{font-size:27px}
  .herocaption{font-size:9px; letter-spacing:.1em}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .heroimg{transform:none}
  body::before{display:none}
}

/* ---------- editorial quote band ---------- */
.quote-band{
  position:relative; margin:8px 0 0; height:340px; overflow:hidden;
  display:grid; place-items:center; border-top:1px solid var(--line);
  background:#0b0f0e;
}
.quote-band > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.6; filter:sepia(.25) saturate(.7) contrast(1.05) brightness(.95);
}
.quote-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,13,.75), rgba(10,14,13,.88) 55%, rgba(10,14,13,.96));
}
.quote-inner{
  position:relative; z-index:2; text-align:center; padding:36px 40px; max-width:820px;
  color:#f3eddd;
}
.quote-inner .label{color:var(--brass); }
.quote-inner blockquote{
  font-family:var(--serif); font-style:italic; font-size:clamp(24px,3.1vw,40px);
  line-height:1.22; letter-spacing:-.015em; margin:18px 0 16px;
}
.quote-inner cite{
  font-style:normal; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:#a9b5ab;
}
@media(max-width:900px){
  .quote-band{height:260px}
  .quote-inner{padding:26px 20px}
}

/* ---------- daily ritual panel ---------- */
.steps ol{
  margin:10px 0 0; padding-left:0; list-style:none; counter-reset:s;
}
.steps li{
  counter-increment:s; position:relative; padding:10px 0 12px 34px;
  border-bottom:1px solid var(--line); color:var(--ink2); font-size:14.5px; line-height:1.55;
}
.steps li:last-child{border-bottom:0}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:10px;
  width:22px; height:22px; border:1px solid var(--brassdim); border-radius:50%;
  display:grid; place-items:center; font-size:10.5px; color:var(--brass2);
}
.steps b{color:var(--ink); font-weight:600}

/* =========================================================
   ПРОФИЛИ И ФОРУМ
   ========================================================= */
.authbox{display:flex; align-items:center; gap:10px}
.ghost.auth{padding:8px 14px}
.userchip{
  display:flex; align-items:center; gap:10px; padding:5px 6px 5px 14px;
  border:1px solid var(--line2); border-radius:22px; background:rgba(30,42,37,.55);
}
.userchip b{font-weight:600; font-size:13.5px; color:var(--ink)}
.userchip .avatar{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--brassdim); color:var(--brass2); font-size:12px; font-weight:600;
}
.userchip button{
  background:none; border:0; color:var(--muted); font-size:12px; padding:4px 8px; cursor:pointer;
}
.userchip button:hover{color:var(--ink)}

.authsheet{text-align:left}
.authsheet h3{margin-bottom:18px}
.authtabs{display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line)}
.authtab{
  background:none; border:0; border-bottom:2px solid transparent; padding:8px 4px;
  color:var(--muted); font-size:13.5px; cursor:pointer;
}
.authtab.active{color:var(--ink); border-color:var(--brass)}
.field{display:block; margin-bottom:14px}
.field span{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.field input{
  width:100%; padding:12px 14px; border-radius:3px; font-family:inherit; font-size:15px;
  background:rgba(8,12,11,.55); border:1px solid var(--line2); color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(201,162,39,.13)}
.autherr{color:#e2846f; font-size:13px; min-height:18px; margin:2px 0 12px}

.threadlist{display:grid; gap:12px}
.threadrow{
  display:grid; grid-template-columns:56px 1fr auto; gap:18px; align-items:center;
  width:100%; text-align:left; padding:16px 20px; border-radius:4px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:inherit; font:inherit;
  transition:border-color .2s, transform .2s;
}
.threadrow:hover{border-color:var(--line2); transform:translateY(-1px)}
.threadrow .tnum{font-family:var(--serif); font-size:22px; color:var(--brass2)}
.threadrow .tmain{display:block; min-width:0; overflow:hidden}
.threadrow .tt{display:block; font-family:var(--serif); font-size:19px; color:var(--ink); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.threadrow .tsub{display:block; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.threadrow .tmeta{font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; line-height:1.5}
.threadrow .tmeta b{display:block; color:var(--ink2); font-size:13px}

.postlist{display:grid; gap:14px; margin:26px 0}
.post{
  background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:18px 22px;
  position:relative;
}
.post .who{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.post .avatar{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--brassdim); color:var(--brass2); font-size:12px; font-weight:600;
}
.post .name{font-size:13.5px; color:var(--ink); font-weight:600}
.post .when{font-size:11.5px; color:var(--muted); margin-left:auto}
.post .body{font-size:15.5px; line-height:1.7; color:var(--ink2); white-space:pre-wrap}
.post .del{
  position:absolute; top:12px; right:14px; background:none; border:0; color:var(--muted);
  font-size:11px; cursor:pointer; opacity:0; transition:opacity .2s;
}
.post:hover .del{opacity:1}
.post .del:hover{color:#e2846f}

.replybox{margin-top:8px}
.replybox textarea{
  width:100%; padding:14px; border-radius:4px; background:rgba(8,12,11,.5);
  border:1px solid var(--line2); color:var(--ink); font-family:inherit; font-size:15px;
  line-height:1.6; resize:vertical; margin-top:8px;
}
.replybox textarea:focus{outline:none; border-color:var(--brass)}
.back{margin-bottom:22px; padding:7px 14px}
.ghost.discuss{margin-top:16px; width:100%}
.locked{padding:16px 20px; border:1px dashed var(--line2); border-radius:4px; color:var(--muted); font-size:14px}
.locked button{background:none; border:0; color:var(--brass2); text-decoration:underline; cursor:pointer; font:inherit}
@media(max-width:900px){
  .threadrow{grid-template-columns:1fr; gap:8px}
  .threadrow .tmeta{text-align:left}
  .topright{flex-wrap:wrap; gap:8px}
}

/* ---------- нов разговор ---------- */
.newthread{margin:0 0 30px}
.newthread .search{
  width:100%; margin-top:4px; padding:13px 16px; border-radius:3px; font-family:inherit;
  font-size:15px; background:rgba(8,12,11,.5); border:1px solid var(--line2); color:var(--ink);
}
.newthread .search:focus{outline:none; border-color:var(--brass)}
.threadpick{display:grid; gap:2px; margin-top:12px}
.pickrow{
  display:grid; grid-template-columns:56px 1fr auto auto; gap:16px; align-items:center;
  padding:11px 10px; background:none; border:0; border-bottom:1px solid var(--line);
  color:inherit; font:inherit; text-align:left; cursor:pointer; border-radius:2px;
}
.pickrow:last-child{border-bottom:0}
.pickrow:hover{background:rgba(201,162,39,.07)}
.pickrow .pid{font-size:11.5px; color:var(--muted)}
.pickrow .ptt{font-family:var(--serif); font-size:17px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pickrow .par{font-size:11.5px; color:var(--muted); white-space:nowrap}
.pickrow .pact{font-size:12px; color:var(--brass2); white-space:nowrap}
@media(max-width:900px){
  .pickrow{grid-template-columns:1fr auto; gap:8px}
  .pickrow .pid,.pickrow .par{display:none}
}

/* ---------- reveal: темата изскача пред рулетката ---------- */
.wheelpanel{position:relative}
.wheelwrap{transition:opacity .4s ease, filter .4s ease}
.wheelwrap.dim{opacity:.42; filter:blur(2px) saturate(.5) brightness(.7)}
.reveal{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  justify-content:center; gap:8px; padding:34px 32px; text-align:center;
  overflow:auto; overscroll-behavior:contain;
  background:
    radial-gradient(58% 42% at 50% 46%, rgba(201,162,39,.10), transparent 72%),
    linear-gradient(180deg, rgba(12,17,15,.90), rgba(9,13,12,.945));
  -webkit-backdrop-filter:blur(4px) saturate(105%); backdrop-filter:blur(4px) saturate(105%);
  border:1px solid var(--line2); border-radius:3px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.92), 0 0 0 1px rgba(201,162,39,.10) inset,
             0 -60px 90px -70px rgba(201,162,39,.35) inset;
  transform-origin:50% 48%;
}
.reveal[hidden]{display:none}
.reveal.show{animation:revealIn .55s cubic-bezier(.2,.9,.2,1)}
@keyframes revealIn{
  0%{opacity:0; transform:scale(.72) translateY(26px); filter:blur(7px)}
  60%{opacity:1; transform:scale(1.035) translateY(0); filter:blur(0)}
  100%{opacity:1; transform:scale(1); filter:blur(0)}
}
.reveal::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.65),transparent);
}
.reveal .label{color:var(--brass2); margin:0 0 2px}
.reveal-num{
  font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass2); opacity:.9; display:block;
}
.reveal-area{
  margin:0; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.reveal h3{
  font-family:var(--serif); font-size:clamp(24px,2.9vw,37px); line-height:1.12;
  letter-spacing:-.015em; color:#f5efdf; margin:6px 0 4px;
  text-wrap:balance;
}
.reveal-meta{
  margin:0; font-size:12.5px; color:var(--muted); letter-spacing:.04em;
}
.reveal-actions{display:grid; gap:8px; margin-top:14px; max-width:340px; width:100%; margin-left:auto; margin-right:auto}
.reveal-actions .primary.wide{margin-top:0}
.reveal-again{
  background:none; border:1px solid var(--line2); border-radius:2px; color:var(--ink2);
  font:inherit; font-size:12.5px; padding:10px 16px; cursor:pointer; letter-spacing:.04em;
  transition:border-color .2s, color .2s, background .2s;
}
.reveal-again:hover{border-color:var(--brass); color:var(--brass2); background:rgba(201,162,39,.07)}
.reveal-close{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  background:rgba(8,12,11,.6); border:1px solid var(--line2); color:var(--muted);
  font:inherit; font-size:13px; line-height:1; cursor:pointer; z-index:2;
  display:grid; place-content:center; transition:color .2s, border-color .2s, transform .2s;
}
.reveal-close:hover{color:#f5efdf; border-color:var(--brass); transform:rotate(90deg)}
@media(max-width:640px){
  .reveal{padding:26px 20px; gap:6px}
  .reveal h3{font-size:clamp(21px,5.6vw,27px)}
}
@keyframes revealFade{0%{opacity:0} 100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .reveal.show{animation:revealFade .16s linear}
  .reveal{transform:none; filter:none}
  .wheelwrap{transition:opacity .16s linear}
  .wheelwrap.dim{filter:none}
}

/* hidden трябва да побеждава display:block на .field */
[hidden]{display:none !important}

/* ================= световни новини: странични ленти ================= */
.rail{display:none}

.rail-head{
  display:flex; align-items:center; gap:9px; margin:0 0 11px; padding:0 2px;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass2);
}
.rail-head::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(201,162,39,.45),transparent)}

.rail-card{
  position:relative; display:block; text-decoration:none; color:inherit;
  padding:11px 13px 10px; margin:0 0 9px; border-radius:2px;
  background:linear-gradient(163deg, rgba(38,50,44,.95), rgba(16,22,20,.97));
  border:1px solid rgba(236,229,211,.17);
  box-shadow:0 18px 36px -24px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.06) inset,
             0 -30px 40px -40px rgba(201,162,39,.35) inset;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms, box-shadow 220ms, background 220ms;
}
.rail-card::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px;
  background:linear-gradient(180deg, transparent, var(--c,var(--brass)), transparent);
  opacity:.55; transition:opacity 220ms;
}
.rail-card::after{
  content:""; position:absolute; left:11px; right:11px; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(236,229,211,.13),transparent);
}
.rail-card:hover,.rail-card:focus-visible{
  transform:translateY(-3px) rotate(.4deg);
  border-color:rgba(201,162,39,.55);
  background:linear-gradient(163deg, rgba(38,48,41,.97), rgba(18,24,21,.97));
  box-shadow:0 22px 44px -26px rgba(0,0,0,1), 0 0 0 1px rgba(201,162,39,.12) inset;
  outline:none;
}
.rail-card:hover::before{opacity:1}

.rail-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.rail-num{font-size:9px; letter-spacing:.16em; color:rgba(236,229,211,.40)}
.rail-cat{
  font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--c,var(--brass2));
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.rail-cat::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--c,var(--brass2)); box-shadow:0 0 7px var(--c,var(--brass))}
.rail-title{
  font-family:var(--serif); font-size:14.5px; line-height:1.3; letter-spacing:-.005em;
  color:#ece5d3; margin:6px 0 7px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.rail-foot{
  margin:0; font-size:9.5px; letter-spacing:.07em; color:rgba(236,229,211,.42);
  display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden;
}
.rail-foot .src{color:rgba(236,229,211,.62); letter-spacing:.09em; text-transform:uppercase; font-size:8.5px}
.rail-foot .dot{opacity:.45}
.rail-snippet{
  margin:0; max-height:0; opacity:0; overflow:hidden;
  font-size:11.5px; line-height:1.45; color:var(--muted); letter-spacing:.005em;
  transition:max-height 220ms ease, opacity 220ms ease, margin-top 220ms ease;
}
.rail-card:hover .rail-snippet,.rail-card:focus-visible .rail-snippet{max-height:80px; opacity:1; margin-top:7px}

@media(min-width:1500px){
  /* съдържанието се свива, за да не минават лентите върху него */
  .wrap{max-width:min(1320px, calc(100vw - 576px))}
  .rail{
    display:block; position:fixed; top:50%; width:232px; z-index:3;
    transform:translateY(-50%) rotate(-1.2deg);
  }
  .rail-left{left:24px}
  .rail-right{right:24px; transform:translateY(-50%) rotate(1.2deg)}
  /* избледняване само на списъка с карти, заглавието остава ясно */
  .rail-list{
    display:block; overflow:hidden; max-height:calc(100vh - 190px); padding-bottom:16px;
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 16px), transparent 100%);
            mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 16px), transparent 100%);
  }
  /* по-силно избледняване, когато списъкът е отрязан */
  .rail-list.is-clipped{
    -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  /* в таба „Новини“ лентите са излишни — съдържанието е същото */
  body.news-open .rail{display:none}
}

/* ---- мрежа за таба „Новини“ ---- */
.newsgrid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:6px}
@media(min-width:760px){.newsgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.newsgrid{grid-template-columns:repeat(3,1fr)}}

.news-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  padding:15px 17px 14px; border-radius:2px;
  background:linear-gradient(163deg, rgba(30,41,36,.72), rgba(14,19,17,.86));
  border:1px solid rgba(236,229,211,.13);
  box-shadow:0 18px 40px -30px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms, box-shadow 220ms, background 220ms;
}
.news-card::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:1px;
  background:linear-gradient(180deg, transparent, var(--c,var(--brass)), transparent); opacity:.55;
}
.news-card:hover,.news-card:focus-visible{
  transform:translateY(-3px) rotate(.4deg); border-color:rgba(201,162,39,.5);
  background:linear-gradient(163deg, rgba(38,48,41,.9), rgba(18,24,21,.95)); outline:none;
}
.news-card .rail-title{font-size:16px; -webkit-line-clamp:4; margin:8px 0 8px}
.news-card .rail-snippet{
  max-height:none; opacity:.92; margin-top:0; font-size:12.5px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  transition:none;
}
.news-card .rail-foot{margin-top:auto; padding-top:10px}

/* ---- reduced motion: без наклон и без анимации ---- */
@media(prefers-reduced-motion:reduce){
  .rail,.rail-left{transform:translateY(-50%)}
  .rail-right{transform:translateY(-50%)}
  .rail-card,.news-card{transition:none}
  .rail-card:hover,.rail-card:focus-visible,.news-card:hover,.news-card:focus-visible{transform:none}
  .rail-snippet{transition:none}
}

/* ---------- снимки към новините ---------- */
.rail-thumb{
  display:block; margin:-4px 0 10px; border-radius:2px; overflow:hidden;
  border:1px solid var(--line); background:#0b0f0e;
}
.rail-thumb img{
  display:block; width:100%; height:78px; object-fit:cover;
  filter:grayscale(.5) sepia(.16) brightness(.82) contrast(1.06);
  transition:filter .3s ease, transform .45s ease;
}
.rail-card:hover .rail-thumb img{filter:grayscale(.1) sepia(.05) brightness(1); transform:scale(1.05)}
.news-card .rail-thumb img{height:150px}
@media(max-width:900px){ .news-card .rail-thumb img{height:180px} }

/* ---------- редакция на бележки ---------- */
.noteactions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
.mini-btn{
  background:none; border:1px solid var(--line2); border-radius:14px; padding:5px 12px;
  font-size:12px; color:var(--muted); cursor:pointer; transition:color .2s, border-color .2s;
}
.mini-btn:hover{color:var(--ink); border-color:var(--brass)}
.notearea{
  width:100%; margin-top:6px; padding:12px 14px; border-radius:3px;
  background:rgba(8,12,11,.55); border:1px solid var(--brass); color:var(--ink);
  font-family:inherit; font-size:14.5px; line-height:1.65; resize:vertical;
}
.notearea:focus{outline:none; box-shadow:0 0 0 3px rgba(201,162,39,.13)}

/* действия под мненията */
.postacts{display:flex; gap:8px; margin-top:12px}
.post .del{position:static; opacity:1; border:1px solid var(--line2); border-radius:14px; padding:5px 12px; font-size:12px}
.post .del:hover{border-color:#e2846f; color:#e2846f}

/* =========================================================
   ПРОФИЛ: аватар, нива, описание
   ========================================================= */
.userchip{align-items:center}
.userchip .chipid{
  display:flex; align-items:center; gap:9px; background:none; border:0; padding:0;
  cursor:pointer; color:inherit; font:inherit;
}
.userchip .chipid:hover b{color:var(--brass2)}
.userchip .avatar, .post .avatar{overflow:hidden; padding:0}
.userchip .avatar img, .post .avatar img{
  width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}
.userchip .avatar.has-img{background:#0b100f}
.post .avatar.has-img{background:#0b100f}

/* модал „Моят профил“ */
.profsheet{
  max-width:560px; padding:34px 38px 30px; text-align:left;
  background:linear-gradient(180deg,rgba(24,33,29,.97),rgba(14,19,17,.98) 60%,rgba(12,16,14,.99));
  border:1px solid rgba(236,229,211,.16);
  box-shadow:0 50px 120px -50px #000, 0 0 0 1px rgba(201,162,39,.14) inset, 0 1px 0 rgba(255,255,255,.05) inset;
}
.profsheet .label{display:block; margin-bottom:6px}
.label.brass{color:var(--brass2)}
.profhead{display:flex; gap:22px; align-items:flex-start; margin:16px 0 24px}
.profavatar{
  position:relative; flex:0 0 96px; width:96px; height:96px; border-radius:50%;
  overflow:hidden; padding:0; cursor:pointer;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%,#3d4230,#1a221d 70%);
  border:1px solid rgba(201,162,39,.42);
  box-shadow:0 0 0 4px rgba(201,162,39,.06), 0 12px 30px -14px #000;
  color:var(--brass2); font-family:var(--serif); font-size:28px; letter-spacing:.03em;
  transition:border-color .2s, box-shadow .2s;
}
.profavatar:hover{border-color:var(--brass2); box-shadow:0 0 0 4px rgba(201,162,39,.13), 0 12px 30px -14px #000}
.profavatar img{width:100%; height:100%; object-fit:cover; display:block}
.profavatar-edit{
  position:absolute; right:2px; bottom:2px; width:25px; height:25px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-size:11px;
  background:rgba(8,12,11,.88); border:1px solid rgba(201,162,39,.45); color:var(--brass2);
}
.profid{flex:1; min-width:0}
.profid h3{
  margin:0 0 3px; font-size:27px; line-height:1.15; color:#f5efdf; max-width:none;
  overflow-wrap:anywhere;
}
.profsub{
  margin:0 0 13px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.levelbar{
  height:6px; border-radius:4px; overflow:hidden;
  background:rgba(236,229,211,.045); border:1px solid rgba(236,229,211,.10);
}
.levelbar i{
  display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#7d6417,var(--brass2));
  box-shadow:0 0 10px rgba(201,162,39,.45);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.proflvl{font-family:var(--serif); font-size:15px; color:var(--brass2); margin:9px 0 2px}
.profread{font-size:12px; color:var(--muted); margin:0; letter-spacing:.02em}
.profbody{margin-top:4px}
.profsheet .field{margin-bottom:16px}
.profsheet .field textarea{
  margin-top:0; font-family:var(--serif); font-size:15px; line-height:1.7;
  background:rgba(8,12,11,.55); border:1px solid var(--line2); border-radius:3px;
  color:var(--ink); padding:13px 14px; resize:vertical; min-height:110px;
}
.profsheet .field textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(201,162,39,.13)}
.profsheet .field input[type=number]{max-width:150px}
.biocount{text-align:right; font-size:11px; color:var(--muted); margin:-8px 2px 6px; letter-spacing:.04em}
.biocount.near{color:var(--brass2)}
.profsheet .autherr{min-height:0; margin:2px 0 4px}
.profactions{display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap}
.profsheet .hint{font-size:12px; line-height:1.65; color:var(--muted); margin-top:20px; max-width:46ch}
.profsheet .saved{font-size:12.5px}

/* badge за ниво до името във форума */
.lvlbadge{
  font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap;
  color:var(--brass2); background:rgba(201,162,39,.09);
  border:1px solid rgba(201,162,39,.28); border-radius:12px; padding:2px 9px;
  line-height:1.5;
}
.post .who{gap:10px; flex-wrap:wrap}
.post .when{margin-left:auto}
@media(max-width:640px){
  .post .lvlbadge{order:4; margin-left:0}
  .post .when{order:5}
}

@media(max-width:900px){
  .modal{padding:14px}
  .profsheet{padding:26px 20px 24px; max-height:94vh}
  .profhead{gap:16px; margin:14px 0 20px}
  .profavatar{flex-basis:78px; width:78px; height:78px; font-size:23px}
  .profid h3{font-size:22px}
  .proflvl{font-size:14px}
  .profsheet .field textarea{font-size:14.5px; min-height:96px}
}

.avatarpick{margin:10px 0 6px; font-size:12.5px; padding:6px 14px}

/* =========================================================
   ВИКТОРИНА
   ========================================================= */
.quizbtn{margin-top:10px}
.quizsheet{max-width:640px}
.quizstep{display:flex; align-items:center; gap:14px; margin:14px 0 20px}
.quizstep span{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.quizbar{flex:1; height:3px; background:var(--line); border-radius:2px; overflow:hidden}
.quizbar i{display:block; height:100%; background:var(--brass); transition:width .4s ease}
.quizq{font-family:var(--serif); font-size:23px; line-height:1.35; color:#f5efdf; margin:0 0 20px}
.quizopts{display:grid; gap:10px}
.quizopt{
  text-align:left; padding:14px 18px; border-radius:4px; cursor:pointer; font:inherit;
  font-size:15px; line-height:1.5; color:var(--ink2);
  background:rgba(8,12,11,.45); border:1px solid var(--line2); transition:border-color .2s, background .2s, transform .15s;
}
.quizopt:hover:not(:disabled){border-color:var(--brass); transform:translateY(-1px)}
.quizopt:disabled{cursor:default}
.quizopt.right{border-color:#5f9e6f; background:rgba(95,158,111,.13); color:#cfe8d4}
.quizopt.wrong{border-color:#c06a55; background:rgba(192,106,85,.12); color:#f0c6ba}
.quizwhy{margin-top:16px; padding:14px 18px; border-left:3px solid var(--brass); background:rgba(201,162,39,.07); font-size:14.5px; line-height:1.6; color:var(--ink2); border-radius:0 3px 3px 0}
.quizwhy b{color:var(--brass2)}
.quizfoot{margin-top:20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.quizresult{text-align:center; padding:18px 0}
.quizresult .big{font-family:var(--serif); font-size:38px; color:var(--brass2); margin:0 0 10px}
.muted{color:var(--muted); font-size:12.5px}

/* XP изскачане */
.xptoast{
  position:fixed; right:28px; bottom:28px; z-index:90;
  background:rgba(201,162,39,.14); border:1px solid var(--brass); color:var(--brass2);
  padding:12px 20px; border-radius:24px; font-size:14px; letter-spacing:.04em;
  opacity:0; transform:translateY(14px); transition:opacity .3s, transform .3s;
  backdrop-filter:blur(8px); pointer-events:none;
}
.xptoast.show{opacity:1; transform:none}

/* ---------- арена ---------- */
.arenagrid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:26px 0 8px}
.rankcard{
  text-align:left; padding:16px 16px 14px; border-radius:4px; cursor:pointer; font:inherit;
  background:var(--panel); border:1px solid var(--line); color:inherit;
  display:flex; flex-direction:column; gap:4px; min-height:118px;
  transition:border-color .2s, transform .2s, background .2s;
}
.rankcard:hover{transform:translateY(-2px); border-color:var(--line2)}
.rankcard .rn{font-family:var(--serif); font-size:26px; color:var(--brass2); line-height:1}
.rankcard .rname{font-family:var(--serif); font-size:17px; color:var(--ink)}
.rankcard .rnote{font-size:11.5px; color:var(--muted); line-height:1.35}
.rankcard .rstat{margin-top:auto; font-size:11px; letter-spacing:.04em; color:var(--muted)}
.rankcard.locked{opacity:.45; cursor:not-allowed}
.rankcard.locked:hover{transform:none; border-color:var(--line)}
.rankcard.passed{border-color:rgba(95,158,111,.45); background:rgba(95,158,111,.07)}
.rankcard.passed .rstat{color:#8fc79d}
.rankcard.open{border-color:var(--brassdim)}
@media(max-width:1100px){ .arenagrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){ .arenagrid{grid-template-columns:repeat(2,1fr)} }

/* логото е бутон към началото */
button.brand{
  background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-align:left; display:flex; align-items:center; gap:12px;
  transition:opacity .2s, transform .2s;
}
button.brand:hover{opacity:.85; transform:translateY(-1px)}
button.brand:focus-visible{outline:2px solid var(--brass); outline-offset:4px; border-radius:4px}

/* =========================================================
   ВИКТОРИНА/АРЕНА — нов прозорец: глава, скрол, фиксиран крак
   ========================================================= */
.quizsheet{
  max-width:760px; width:100%; padding:0; display:flex; flex-direction:column;
  max-height:min(90vh, 820px); overflow:hidden; border-radius:8px;
  background:linear-gradient(180deg,#151d19 0%,#0f1513 100%);
  border:1px solid rgba(236,229,211,.13);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(201,162,39,.05) inset;
}
.quizhead{padding:34px 40px 0; flex:0 0 auto}
.quizhead .label{margin:0 0 10px}
.quizhead h3{
  font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.3;
  color:#cdc4ae; margin:0 0 20px;
}
.quizstep{display:flex; align-items:center; gap:14px; margin:0 0 22px}
.quizstep span{font-size:11.5px; letter-spacing:.14em; color:var(--muted); white-space:nowrap}
.quizbar{flex:1; height:5px; border-radius:3px; background:rgba(236,229,211,.09); overflow:hidden}
.quizbar i{display:block; height:100%; border-radius:3px; transition:width .45s ease;
  background:linear-gradient(90deg,#7d6418,var(--brass2))}
.quizpct{font-size:11.5px; color:var(--brass2); min-width:36px; text-align:right; letter-spacing:.06em}

.quizscroll{overflow-y:auto; flex:1 1 auto; padding:0 40px 4px; scrollbar-width:thin}
.quizscroll::-webkit-scrollbar{width:8px}
.quizscroll::-webkit-scrollbar-thumb{background:rgba(236,229,211,.14); border-radius:4px}
.quizq{
  font-family:var(--serif); font-size:27px; line-height:1.32; color:#f7f2e4;
  margin:4px 0 24px; letter-spacing:-.012em;
}
.quizopts{display:grid; gap:12px; padding-bottom:10px}
.quizopt{
  position:relative; text-align:left; padding:17px 20px 17px 62px; min-height:60px;
  border-radius:6px; font:inherit; font-size:15.5px; line-height:1.45; color:var(--ink2);
  background:rgba(236,229,211,.035); border:1px solid rgba(236,229,211,.12);
  transition:border-color .18s, background .18s, transform .12s;
}
.quizopt::before{
  content:attr(data-l); position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font-size:11.5px; color:var(--muted); border:1px solid rgba(236,229,211,.18);
}
.quizopt:hover:not(:disabled){border-color:rgba(201,162,39,.55); background:rgba(201,162,39,.07); transform:translateX(2px)}
.quizopt:disabled{cursor:default}
.quizopt.right{border-color:#5f9e6f; background:rgba(95,158,111,.14); color:#d8f0dd}
.quizopt.right::before{border-color:#5f9e6f; color:#9ad3a8; content:"✓"; font-size:13px}
.quizopt.wrong{border-color:#c06a55; background:rgba(192,106,85,.13); color:#f6d3c8}
.quizopt.wrong::before{border-color:#c06a55; color:#e8917c; content:"✕"; font-size:13px}

.quizwhy{
  margin:18px 0 8px; padding:16px 20px; border-left:3px solid var(--brass);
  background:rgba(201,162,39,.08); border-radius:0 4px 4px 0;
  font-size:14.5px; line-height:1.65; color:var(--ink2);
}
.quizwhy b{
  display:block; margin-bottom:6px; color:var(--brass2);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.quizfoot{
  flex:0 0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:18px 40px 24px; border-top:1px solid rgba(236,229,211,.08);
  background:linear-gradient(180deg, rgba(10,14,13,.35), rgba(10,14,13,.75));
}
.quizfoot .primary{margin:0}
.quizresult{padding:14px 0 6px; text-align:center}
.quizresult .big{font-family:var(--serif); font-size:42px; color:var(--brass2); margin:0 0 12px}

@media(max-width:640px){
  .quizhead{padding:26px 20px 0}
  .quizscroll{padding:0 20px 4px}
  .quizfoot{padding:14px 20px 18px}
  .quizq{font-size:22px}
  .quizopt{padding:15px 16px 15px 56px; font-size:15px}
  .quizhead h3{font-size:18px}
}

.quizfoot.idle{display:none}
.quizfoot{justify-content:space-between}
.quizfoot .primary{margin-left:auto}

.quizfoot{justify-content:flex-end}
.quizfoot .hint{display:flex; align-items:center; gap:10px; flex:1 1 auto; margin:0; text-align:left}
.quizfoot .hint .primary{margin-left:auto}
.quizfoot .hint .ghost{margin-left:0}

/* ---------- арена: стълбица ---------- */
.arenagrid{display:block; margin:22px 0 10px}
.arhead{display:flex; align-items:center; gap:26px; margin-bottom:26px; flex-wrap:wrap}
.arsum{display:flex; align-items:baseline; gap:10px}
.arsum-big{font-family:var(--serif); font-size:44px; line-height:1; color:var(--brass2)}
.arsum-big span{font-size:18px; color:var(--muted); margin-left:2px}
.arsum-txt{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.arprogress{display:flex; gap:6px; flex:1; min-width:220px; max-width:520px}
.arprogress i{flex:1; height:7px; border-radius:4px; background:rgba(236,229,211,.08)}
.arprogress i.done{background:#5f9e6f}
.arprogress i.cur{background:var(--brass2); box-shadow:0 0 0 3px rgba(201,162,39,.15)}

.ladder{display:grid; gap:9px; max-width:880px}
.ladder-row{
  display:flex; align-items:center; gap:18px; width:100%; text-align:left;
  padding:15px 20px; border-radius:6px; font:inherit; color:inherit; cursor:pointer;
  background:rgba(236,229,211,.025); border:1px solid rgba(236,229,211,.09);
  transition:border-color .2s, background .2s, transform .15s;
}
.ladder-row:hover{border-color:rgba(201,162,39,.45); background:rgba(201,162,39,.05); transform:translateX(3px)}
.ladder-row .medal{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; color:var(--muted); border:1px solid rgba(236,229,211,.16);
  font-family:var(--serif);
}
.ladder-row .body{display:flex; flex-direction:column; gap:2px; min-width:0}
.ladder-row .name{font-family:var(--serif); font-size:19px; color:var(--ink); line-height:1.2}
.ladder-row .note{font-size:12px; color:var(--muted); letter-spacing:.01em}
.ladder-row .side{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right}
.ladder-row .stat{font-size:11px; letter-spacing:.09em; color:var(--muted)}
.ladder-row .cta{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass2)}
.ladder-row.passed{border-color:rgba(95,158,111,.4); background:rgba(95,158,111,.06)}
.ladder-row.passed .medal{border-color:#5f9e6f; color:#9ad3a8}
.ladder-row.passed .stat{color:#8fc79d}
.ladder-row.current{border-color:rgba(201,162,39,.65); background:rgba(201,162,39,.07)}
.ladder-row.current .medal{border-color:var(--brass2); color:var(--brass2); font-size:14px}
.ladder-row.current .name{color:#f7f2e4}
.ladder-row.locked{opacity:.42; cursor:not-allowed}
.ladder-row.locked:hover{transform:none; border-color:rgba(236,229,211,.09); background:rgba(236,229,211,.025)}
@media(max-width:640px){
  .ladder-row{padding:13px 14px; gap:12px}
  .ladder-row .name{font-size:16px}
  .ladder-row .medal{width:36px; height:36px; font-size:13px}
  .arsum-big{font-size:34px}
}

.ladder{max-width:800px}
.ladder-row.locked .medal{color:rgba(236,229,211,.3)}
.ladder-row.locked .stat{font-size:10.5px; letter-spacing:.05em}

/* ---------- арена: панел + стълбица ---------- */
.arwrap{display:grid; grid-template-columns:330px 1fr; gap:34px; align-items:start; margin-top:4px}
.ladder{max-width:none; display:grid; gap:8px}
.arnow{
  position:sticky; top:96px; padding:26px 26px 24px; border-radius:8px;
  border:1px solid rgba(201,162,39,.5); background:linear-gradient(180deg, rgba(201,162,39,.09), rgba(201,162,39,.02));
}
.arnow.done{border-color:rgba(95,158,111,.4); background:linear-gradient(180deg, rgba(95,158,111,.08), rgba(95,158,111,.02))}
.arnow .label{display:block; margin-bottom:12px}
.arnow-n{font-family:var(--serif); font-size:52px; line-height:.9; color:var(--brass2); margin:0 0 10px; letter-spacing:-.02em}
.arnow h3{font-family:var(--serif); font-weight:400; font-size:26px; color:#f7f2e4; margin:0 0 6px; line-height:1.2}
.arnow-note{font-size:13px; color:var(--muted); margin:0 0 18px}
.arnow-meta{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:7px}
.arnow-meta li{font-size:12.5px; color:var(--muted)}
.arnow-meta b{color:var(--ink2); font-weight:600}
.arnow-btn{width:100%; text-align:center; justify-content:center}
.arnow-hint{margin:12px 0 0; font-size:11.5px; color:var(--muted); text-align:center}
.ladder-row{padding:13px 18px}
.ladder-row .name{font-size:17.5px}
.ladder-row .side{margin-left:auto}
@media(max-width:1000px){
  .arwrap{grid-template-columns:1fr; gap:18px}
  .arnow{position:static}
  .arnow-n{font-size:40px}
  .arnow h3{font-size:22px}
}
.ladder-row.locked{opacity:.56}
.ladder-row.locked .name{color:#9d968a}

/* ---------- таймер за фокус ---------- */
.focus-sub{margin:-6px 0 22px; font-size:13.5px; color:var(--muted); text-align:center}
#focusModal .timerbtns{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 0 22px}
#focusModal .timerbtns .ghost{padding:11px 6px; font-size:12.5px; letter-spacing:.06em}
.focus-steps{
  list-style:none; counter-reset:f; margin:26px 0 0; padding:0;
  display:grid; gap:12px; border-top:1px solid rgba(236,229,211,.08); padding-top:22px;
}
.focus-steps li{position:relative; padding-left:34px; font-size:13.5px; line-height:1.6; color:var(--ink2)}
.focus-steps li::before{
  counter-increment:f; content:counter(f);
  position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; color:var(--brass2);
  border:1px solid rgba(201,162,39,.45);
}
.focus-note{margin:18px 0 0; padding:14px 16px; border-left:3px solid var(--brass);
  background:rgba(201,162,39,.07); border-radius:0 4px 4px 0; font-size:13px; line-height:1.6; color:var(--ink2)}

#focusModal .focus-steps li{text-align:left}
#focusModal .focus-note{text-align:left}
#focusModal .focus-steps{margin-left:0; margin-right:0}

.ladder-row .body{gap:0}
.ladder-row{padding:16px 18px}
.ladder-row .name{font-size:18px}
.arnow-note{display:none}

/* =========================================================
   А · ДНЕС  +  В · РЕЖИМИ, ЖОКЕРИ
   ========================================================= */
.dailyband{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 22px; padding:14px 18px; border-radius:6px;
  border:1px solid rgba(201,162,39,.35);
  background:linear-gradient(90deg, rgba(201,162,39,.10), rgba(201,162,39,.02));
}
.db-tag{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass2)}
.db-title{font-family:var(--serif); font-size:19px; color:#f7f2e4}
.db-sub{font-size:12.5px; color:var(--muted); letter-spacing:.02em}
.db-streak{font-size:12.5px; color:#e0a45f}
.db-btn{
  margin-left:auto; padding:9px 18px; border-radius:4px; cursor:pointer; font:inherit;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#12100a; background:var(--brass2); border:1px solid var(--brass2);
  transition:filter .2s, transform .15s;
}
.db-btn:hover{filter:brightness(1.1); transform:translateY(-1px)}

.arenaDaily .dcard{
  display:grid; grid-template-columns:1fr 300px; gap:26px;
  padding:22px 24px; margin:0 0 26px; border-radius:8px;
  border:1px solid rgba(201,162,39,.4);
  background:linear-gradient(135deg, rgba(201,162,39,.09), rgba(201,162,39,.02));
}
.dcard.done{border-color:rgba(95,158,111,.42); background:linear-gradient(135deg, rgba(95,158,111,.08), rgba(95,158,111,.02))}
.dcard .label{display:block; margin-bottom:8px}
.dcard h3{font-family:var(--serif); font-weight:400; font-size:27px; color:#f7f2e4; margin:0 0 6px}
.dcard-sub{font-size:13px; color:var(--muted); margin:0 0 16px; line-height:1.5}
.dcard-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.dcard-streak{font-size:12px; color:#e0a45f; letter-spacing:.03em}
.dcard-top .label{color:var(--muted)}
.dcard-top ol{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px}
.dcard-top li{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink2)}
.dcard-top .tp{width:18px; color:var(--brass2); font-family:var(--serif)}
.dcard-top .tn{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dcard-top .ts{color:var(--muted); font-size:11.5px}

/* режими */
.modes{display:grid; gap:7px; margin:0 0 16px}
.modebtn{
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  padding:10px 13px; border-radius:5px; font:inherit;
  border:1px solid rgba(236,229,211,.12); background:rgba(236,229,211,.03); color:inherit;
  transition:border-color .18s, background .18s;
}
.modebtn b{font-size:13px; color:var(--ink2); font-weight:600}
.modebtn span{font-size:11px; color:var(--muted)}
.modebtn:hover{border-color:rgba(201,162,39,.45)}
.modebtn.on{border-color:var(--brass2); background:rgba(201,162,39,.10)}
.modebtn.on b{color:var(--brass2)}

/* статистика в модала */
.runstat{display:flex; gap:12px; align-items:center; min-height:20px; margin-top:-8px}
.chip-combo{
  font-size:11.5px; letter-spacing:.06em; color:#f0b25c;
  padding:3px 10px; border-radius:20px; border:1px solid rgba(240,178,92,.45);
  background:rgba(240,178,92,.10);
}
.chip-lives{font-size:13px; letter-spacing:.16em; color:#c9736a}

/* жокери */
.jokerrow{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:12px 40px 0; border-top:1px solid rgba(236,229,211,.07);
}
.jokerrow .label{margin:0 6px 0 0; color:var(--muted)}
.jokerrow button{
  padding:7px 14px; border-radius:20px; cursor:pointer; font:inherit; font-size:12px;
  color:var(--ink2); background:rgba(236,229,211,.04);
  border:1px solid rgba(236,229,211,.16);
  transition:border-color .18s, background .18s, opacity .18s;
}
.jokerrow button:hover:not(:disabled){border-color:var(--brass2); color:var(--brass2)}
.jokerrow button:disabled{opacity:.35; cursor:default}
.jokerrow button.used{opacity:.3; text-decoration:line-through}

/* използвани жокери върху отговорите */
.quizopt.gone{opacity:.22; pointer-events:none}
.quizopt{position:relative}
.optpoll{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:11.5px; color:var(--brass2);
  padding:2px 8px; border-radius:10px; background:rgba(201,162,39,.12);
}

/* резултат */
.resbtns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}

/* дуел */
.duelbanner{
  max-width:1320px; margin:16px auto 0; padding:14px 20px; border-radius:6px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid rgba(201,162,39,.5); background:rgba(201,162,39,.08);
  font-size:14px; color:var(--ink2);
}
.duelbanner b{color:var(--brass2)}
.duelbanner .primary{margin-left:auto; padding:9px 18px; font-size:12.5px}

@media(max-width:900px){
  .arenaDaily .dcard{grid-template-columns:1fr}
  .dailyband{gap:10px}
  .db-btn{margin-left:0; width:100%; text-align:center}
  .jokerrow{padding:12px 20px 0}
}
/* ---------- жокери: лента с икони, състояния и анимации ---------- */
.quizsheet{position:relative}
.jokerrow{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 36px; margin:0;
  background:linear-gradient(180deg, rgba(236,229,211,.035), rgba(236,229,211,0));
  border-top:1px solid rgba(236,229,211,.08);
}
.joker-cap{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-right:8px; opacity:.75;
}
.joker{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px 9px 12px; border-radius:999px; cursor:pointer;
  font:inherit; font-size:12.5px; letter-spacing:.01em; color:var(--ink2);
  background:linear-gradient(180deg, rgba(236,229,211,.08), rgba(236,229,211,.02));
  border:1px solid rgba(236,229,211,.16);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), border-color .2s, color .2s,
             box-shadow .25s, background .2s, opacity .25s;
  animation:jokerIn .4s cubic-bezier(.2,.8,.3,1) both;
}
.joker:nth-of-type(1){animation-delay:.04s}
.joker:nth-of-type(2){animation-delay:.10s}
.joker:nth-of-type(3){animation-delay:.16s}
@keyframes jokerIn{from{opacity:0; transform:translateY(6px) scale(.94)}to{opacity:1; transform:none}}
.joker svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.joker em{
  font-style:normal; font-size:10px; color:var(--muted);
  border:1px solid rgba(236,229,211,.18); border-radius:6px; padding:1px 5px;
}
.joker:hover:not(:disabled){
  transform:translateY(-2px); color:#f6ecd3;
  border-color:rgba(201,162,39,.7);
  box-shadow:0 10px 24px -14px rgba(201,162,39,.9);
}
.joker:active:not(:disabled){transform:translateY(0) scale(.97)}
.joker:disabled{opacity:.32; cursor:default; transform:none; box-shadow:none}
.joker.used{opacity:.42}
.joker.used em{display:none}
.joker.used svg{opacity:.5}
.joker.used::after{
  content:"✓"; position:absolute; top:-6px; right:-6px;
  width:16px; height:16px; border-radius:50%; font-size:10px;
  display:grid; place-items:center; background:#5f9e6f; color:#0c1210;
}
.joker.firing{animation:jokerPulse .5s ease}
@keyframes jokerPulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.1); box-shadow:0 0 0 7px rgba(201,162,39,.16)}
  100%{transform:scale(1)}
}

/* реакции на полето */
.quizopt{transition:border-color .18s, background .18s, transform .12s,
  opacity .42s ease, filter .42s ease}
.quizopt.gone{
  opacity:0 !important; filter:blur(3px);
  transform:translateX(-10px) scale(.95); pointer-events:none;
}
.optpoll{animation:pollIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes pollIn{
  from{opacity:0; transform:translateY(-50%) scale(.7)}
  to{opacity:1; transform:translateY(-50%) scale(1)}
}
.quizq.flip{animation:qFlip .42s ease}
@keyframes qFlip{
  0%{opacity:1; transform:rotateX(0)}
  45%{opacity:0; transform:rotateX(-72deg)}
  55%{opacity:0; transform:rotateX(72deg)}
  100%{opacity:1; transform:rotateX(0)}
}

/* съобщение от жокера */
.jokertoast{
  position:absolute; left:50%; bottom:104px; z-index:6;
  transform:translateX(-50%) translateY(10px);
  padding:9px 18px; border-radius:999px; font-size:12.5px; white-space:nowrap;
  color:#f6ecd3; background:rgba(16,22,19,.96);
  border:1px solid rgba(201,162,39,.5);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.jokertoast.show{opacity:1; transform:translateX(-50%) translateY(0)}

@media(max-width:640px){
  .jokerrow{padding:12px 20px; gap:8px}
  .joker{font-size:11.5px; padding:8px 12px 8px 10px}
  .joker-cap{display:none}
}
.jokertoast{bottom:122px}

/* скритите отговори се свиват, за да не остава дупка */
.quizopt{overflow:hidden; max-height:160px;
  transition:border-color .18s, background .18s, transform .12s,
             opacity .42s ease, filter .42s ease,
             max-height .38s ease, padding .32s ease, margin .32s ease;}
.quizopt.gone{max-height:0 !important; padding-top:0; padding-bottom:0;
  margin-top:-6px; margin-bottom:-6px; border-color:transparent; opacity:0 !important}
.jokertoast{bottom:86px}
.quizopt.gone{min-height:0 !important}

/* съобщението от жокера живее в самата лента — не закрива отговорите */
.jokerrow .jokertoast{
  position:static; transform:none; margin-left:auto; max-width:0; opacity:0;
  padding:0; border:0; overflow:hidden; white-space:nowrap;
  border-radius:999px; font-size:12.5px; color:#f6ecd3;
  background:rgba(201,162,39,.12);
  transition:max-width .35s cubic-bezier(.2,.8,.3,1), opacity .25s, padding .3s, border-width .2s;
}
.jokerrow .jokertoast.show{
  max-width:420px; opacity:1; padding:9px 16px; border:1px solid rgba(201,162,39,.45);
  transform:none;
}
@media(max-width:640px){
  .jokerrow .jokertoast{display:none}
}

/* съобщението е на собствен ред в лентата — винаги четимо */
.jokerrow{flex-wrap:wrap}
.jokerrow .jokertoast{
  flex:0 0 100%; max-width:none; max-height:0; opacity:0; margin:0;
  padding:0 16px; overflow:hidden; border:0; border-radius:6px;
  white-space:normal; text-align:left;
  background:rgba(201,162,39,.09); color:#f3e6c4; font-size:12.5px;
  transition:max-height .3s ease, opacity .25s ease, padding .3s ease,
             margin .3s ease, border-width .2s ease;
}
.jokerrow .jokertoast.show{
  max-height:56px; opacity:1; padding:9px 16px; margin-top:10px;
  border:1px solid rgba(201,162,39,.35);
}
.jokerrow .jokertoast{order:-1}

/* съобщение от жокера — под обяснението, не пречи на нищо */
.jokermsg{
  margin:14px 0 8px; padding:10px 14px; border-radius:0 4px 4px 0;
  border-left:3px solid var(--brass); background:rgba(201,162,39,.08);
  font-size:12.5px; line-height:1.5; color:var(--ink2);
}
.jokermsg.in{animation:msgIn .32s cubic-bezier(.2,.8,.3,1)}
@keyframes msgIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.joker.used{opacity:.62}
.joker.used span{text-decoration:line-through; text-decoration-color:rgba(236,229,211,.45)}
/* =========================================================
   РУЛЕТКА: центърът е бутон, колелото расте, темата излиза с ефект
   ========================================================= */
.hub{
  cursor:pointer; font:inherit; color:inherit; padding:0; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .25s ease;
}
.hub:hover{
  transform:scale(1.045); border-color:var(--brass2);
  box-shadow:0 0 0 8px rgba(10,14,13,.55), 0 0 70px -8px rgba(201,162,39,.6),
             0 18px 40px rgba(0,0,0,.6) inset;
}
.hub:active{transform:scale(.97)}
.hub:focus-visible{outline:2px solid var(--brass2); outline-offset:6px}
.hub-icon{
  display:block; width:26px; height:26px; margin:0 auto 7px;
  stroke:var(--brass2); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .55s cubic-bezier(.2,.8,.3,1);
}
.hub:hover .hub-icon{transform:rotate(-90deg)}
.hub-label{
  display:block; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink2);
}
body.spinning .hub{pointer-events:none; opacity:.75}
body.spinning .hub-icon{animation:hubTurn 1.05s linear infinite}
.hub-icon{transform-origin:50% 50%}

.panelcount{
  margin-left:auto; margin-right:12px; font-size:11px;
  letter-spacing:.12em; color:var(--muted); white-space:nowrap;
}
.panelcount b{font-family:var(--serif); font-size:14px; color:var(--brass2); font-weight:400}

.spinagain{display:none; margin-left:auto}
body.spun .spinagain{display:inline-flex; align-items:center; gap:6px}
.spinagain span{transition:transform .4s ease}
.spinagain:hover span{transform:rotate(-180deg)}

/* колелото расте, околното притъмнява */
.wheelwrap{transition:transform .65s cubic-bezier(.2,.8,.3,1), opacity .45s ease, filter .45s ease}
body.spinning .wheelwrap{transform:scale(1.07)}
body.spinning .wheelpanel{position:relative; z-index:4}
body.spinning .heroband,
body.spinning .rightcol,
body.spinning .quote-band,
body.spinning aside.rail{opacity:.26; filter:saturate(.45) blur(1px); transition:opacity .5s ease, filter .5s ease}

/* печелившият сектор светва */
#wheel path{transition:filter .3s ease}
#wheel path.win{animation:winPulse 1.1s ease 2; filter:brightness(1.55) saturate(1.35)}
@keyframes winPulse{50%{filter:brightness(2) saturate(1.6)}}

/* искри + гонг при излизане на темата */
.sparks{position:absolute; inset:0; pointer-events:none; z-index:4}
.sparks i{
  position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--brass2); opacity:0;
  transform:translate(-50%,-50%);
}
body.burst .sparks i{animation:spark .95s cubic-bezier(.15,.7,.3,1) forwards; animation-delay:calc(var(--d,0) * 1ms)}
@keyframes spark{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.4)}
  18%{opacity:1}
  100%{opacity:0; transform:translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px))) scale(.25)}
}
body.burst .sparks::after{
  content:""; position:absolute; left:50%; top:50%; width:58%; aspect-ratio:1;
  margin:-29% 0 0 -29%; border-radius:50%;
  border:1px solid rgba(201,162,39,.65);
  animation:gong .85s cubic-bezier(.16,.8,.3,1) forwards;
}
@keyframes gong{0%{opacity:.9; transform:scale(.5)}100%{opacity:0; transform:scale(1.55)}}

/* картата на темата влиза драматично */
.reveal.show{animation:revealPop .62s cubic-bezier(.16,.9,.24,1) both}
@keyframes revealPop{
  0%{opacity:0; transform:scale(.9); filter:blur(10px)}
  55%{opacity:1; filter:blur(0)}
  100%{opacity:1; transform:scale(1)}
}
.reveal.show .reveal-num{animation:rUp .5s .06s both}
.reveal.show .reveal-area{animation:rUp .5s .13s both}
.reveal.show h3{animation:rUp .6s .2s both}
.reveal.show .reveal-actions{animation:rUp .6s .3s both}
@keyframes rUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

@media(prefers-reduced-motion:reduce){
  body.spinning .wheelwrap{transform:none}
  .reveal.show, .reveal.show > *{animation:revealFade .3s ease both !important}
  body.burst .sparks{display:none}
}

/* поправка: старият .hub span{36px} хваща етикета */
.hub span.hub-label{
  font-family:inherit; font-size:10.5px; letter-spacing:.18em; line-height:1;
  text-transform:uppercase; color:var(--ink2); white-space:nowrap;
}
.hub{width:146px; height:146px}
.hub-icon{width:24px; height:24px; margin-bottom:6px}
/* =========================================================
   СПИСЪК 1 · първи екран, мобилно четене
   ========================================================= */
.heroband{height:auto; min-height:clamp(320px,42vh,470px)}
.heroinner{padding-bottom:74px}
.hero{
  font-size:clamp(36px,4.6vw,76px); letter-spacing:-.028em; line-height:1.02;
  text-wrap:balance; max-width:15ch;
}
.herocta{display:flex; align-items:center; gap:18px; margin-top:26px; flex-wrap:wrap}
.herocta .primary{padding:14px 26px}
.herohint{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* музейна плочка под снимката */
.herocaption{
  display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap;
  border-top:1px solid rgba(236,229,211,.16); padding-top:10px;
  max-width:560px; text-transform:none; letter-spacing:0;
}
.plaque-no{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass2)}
.plaque-title{font-family:var(--serif); font-size:13px; color:var(--ink2); font-style:italic}
.plaque-meta{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-left:auto}
.herocaption::after{display:none}

/* =========================================================
   СПИСЪК 3 · окулус, прожектор, деления, въздух
   ========================================================= */
.quote-band > img{
  clip-path:circle(31% at 50% 46%);
  filter:saturate(.45) brightness(.82);
  transform:scale(1.03);
}
.quote-band::before{
  content:""; position:absolute; left:50%; top:46%; width:min(44vh,400px); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; z-index:2; pointer-events:none;
  border:1px solid rgba(201,162,39,.34);
  box-shadow:0 0 80px -20px rgba(201,162,39,.45) inset, 0 0 40px -12px rgba(201,162,39,.22);
}
.quote-band .quote-inner{position:relative; z-index:3}

/* рулетката като експонат: прожектор + деления */
/* -10%, не -16%: при 600px колело -16% дава 792px кръг, който стърчи
   извън 722px панела и вкарва 17px хоризонтален скрол при 768.
   -10% = 720px и се побира в резерва на панела. Виж a11y.css, Ф1. */
.wheelwrap::before{
  content:""; position:absolute; inset:-10%; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, rgba(201,162,39,.16), transparent 72%);
}
.wheelwrap::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:2; pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(201,162,39,.42) 0 .45deg, transparent .45deg 3deg);
  -webkit-mask:radial-gradient(closest-side, transparent 95.5%, #000 96.5%);
          mask:radial-gradient(closest-side, transparent 95.5%, #000 96.5%);
}
#wheel{position:relative; z-index:1}

/* повече въздух между залите */
section > .wrap{padding-top:72px; padding-bottom:96px}

/* пътеки */
.paths{display:grid; gap:2px; padding:20px 0 18px}
.paths .panelhead{padding:0 22px 12px}
.pathrow{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:11px 22px; background:none; border:0; border-top:1px solid rgba(236,229,211,.06);
  font:inherit; color:inherit; cursor:pointer;
  transition:background .2s ease, padding-left .2s ease;
}
.pathrow:first-of-type{border-top:0}
.pathrow:hover{background:rgba(201,162,39,.06); padding-left:26px}
.pathrow .pn{
  font-family:var(--serif); font-size:14px; color:var(--brass2); min-width:34px;
}
.pathrow .pb{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.pathrow .pb b{font-size:13.5px; font-weight:500; color:var(--ink2)}
.pathrow .pb small{font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pathrow .pa{color:var(--brass2); font-size:13px; opacity:.6; transition:transform .2s, opacity .2s}
.pathrow:hover .pa{transform:translateX(3px); opacity:1}

/* =========================================================
   леки анимации (one-shot, без безкрайни цикли)
   ========================================================= */
@keyframes panelIn{from{opacity:0; transform:translate3d(0,14px,0)}to{opacity:1; transform:none}}
body.boot .grid > .panel,
body.boot .rightcol > *{animation:panelIn .6s cubic-bezier(.2,.8,.2,1) backwards}
body.boot .rightcol > :nth-child(2){animation-delay:.08s}
body.boot .rightcol > :nth-child(3){animation-delay:.16s}
body.boot .rightcol > :nth-child(4){animation-delay:.24s}

.panel{position:relative; transition:transform .25s ease, border-color .25s ease}
.panel::after{
  content:""; position:absolute; inset:7px; pointer-events:none; opacity:0;
  transform:scale(1.03); transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  background:
    linear-gradient(var(--brass2),var(--brass2)) left top /14px 1px no-repeat,
    linear-gradient(var(--brass2),var(--brass2)) left top /1px 14px no-repeat,
    linear-gradient(var(--brass2),var(--brass2)) right top /14px 1px no-repeat,
    linear-gradient(var(--brass2),var(--brass2)) right top /1px 14px no-repeat,
    linear-gradient(var(--brass2),var(--brass2)) left bottom /14px 1px no-repeat,
    linear-gradient(var(--brass2),var(--brass2)) left bottom /1px 14px no-repeat,
    linear-gradient(var(--brass2),var(--brass2)) right bottom /14px 1px no-repeat,
    linear-gradient(var(--brass2),var(--brass2)) right bottom /1px 14px no-repeat;
}
.panel:hover::after{opacity:.55; transform:scale(1)}

.primary{position:relative; overflow:hidden; isolation:isolate}
.primary::after{
  content:""; position:absolute; inset:0; z-index:-1; transform:translate3d(-120%,0,0);
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
}
.primary:hover::after{animation:shine .62s ease-out 1}
@keyframes shine{to{transform:translate3d(120%,0,0)}}

.scrollrail{position:fixed; inset:0 0 auto 0; height:2px; z-index:30; pointer-events:none}
.scrollrail i{display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, rgba(201,162,39,.25), var(--brass2))}

/* =========================================================
   мобилно четене: долен лист
   ========================================================= */
@media(max-width:640px){
  .heroband{height:auto; min-height:clamp(270px,36vh,330px)}
  .heroinner{padding-bottom:30px}
  .hero{font-size:clamp(30px,8vw,40px); max-width:100%}
  .herocta{margin-top:18px; gap:12px}
  .herohint{display:none}
  .herocaption{display:none}
  .quote-band > img{clip-path:circle(42% at 50% 46%)}
  .quote-band::before{width:min(60vw,260px)}

  .modal{align-items:flex-end; padding:0}
  .modal .sheet{
    max-height:93vh; border-radius:16px 16px 0 0; border-bottom:0; width:100%;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .modal .close{width:44px; height:44px; display:grid; place-items:center}
  .prose{font-size:17px; line-height:1.7}
}

@media(prefers-reduced-motion:reduce){
  body.boot .grid > .panel, body.boot .rightcol > *{animation:none}
  .panel::after{transition:none}
}

/* плочката: без избутване надясно */
.herocaption{max-width:100%; gap:8px 14px}
.herocaption .plaque-meta{margin-left:0}
@media(min-width:900px){
  .herocaption{max-width:640px}
}

/* окулусът: по-малък кръг, за да не се реже и да не пречи на цитата */
.quote-band > img{clip-path:circle(20% at 50% 47%)}
.quote-band::before{width:min(34vh,300px)}
.quote-band::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 45%, rgba(11,15,14,.55), rgba(11,15,14,.86) 70%);
}
@media(max-width:640px){
  .quote-band > img{clip-path:circle(30% at 50% 47%)}
  .quote-band::before{width:min(46vw,200px)}
}
.quote-band::before{z-index:3}
.quote-band .quote-inner{z-index:4}

/* мобилен хедър: два реда вместо три */
@media(max-width:640px){
  .top{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 10px; padding:10px 14px}
  .top .brand{grid-column:1; grid-row:1}
  .top .topright{grid-column:2; grid-row:1; display:flex; gap:8px}
  .top .nav{grid-column:1/-1; grid-row:2; display:flex; justify-content:space-between; gap:4px}
  .top .tab{padding:6px 4px; font-size:12.5px}
  .top .tag{display:none}
  .dailyband{flex-wrap:nowrap; gap:10px; padding:9px 12px; margin-bottom:14px}
  .db-tag,.db-sub{display:none}
  .db-title{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .db-btn{margin-left:auto; width:auto; flex:none; padding:7px 12px; font-size:10.5px}
  .db-streak{font-size:11px}
}

/* центърът е бутонът за нова тема */
.hub{width:152px; height:152px}
.hub span.hub-label{font-size:10px; letter-spacing:.13em}
.hub::before{
  content:"↻"; position:absolute; inset:auto 0 18px; text-align:center;
  font-size:9px; color:var(--muted); opacity:0; transition:opacity .2s ease;
}
.hub:hover::before{opacity:0}
.hub-label{position:relative; z-index:1}
@media(max-width:640px){
  .hub{width:112px; height:112px}
  .hub span.hub-label{font-size:9px; letter-spacing:.1em}
  .hub-icon{width:18px; height:18px; margin-bottom:4px}
}
.hub::before{display:none}
.hub::after{
  content:"натисни"; position:absolute; left:0; right:0; bottom:22px;
  font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); opacity:0; transition:opacity .25s ease;
}
.hub:hover::after{opacity:.85}
@media(max-width:640px){ .hub::after{display:none} }

/* центърът: икона над текста */
.hub{display:grid; place-items:center}
.hub-in{display:flex; flex-direction:column; align-items:center; gap:6px}
.hub-icon{width:26px; height:26px; margin:0}

/* лента за Арената на началната */
.homearena{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 0 22px; padding:13px 18px; border-radius:6px;
  border:1px solid rgba(236,229,211,.14);
  background:linear-gradient(90deg, rgba(236,229,211,.045), rgba(236,229,211,.01));
}
.ha-tag{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass2)}
.ha-title{font-family:var(--serif); font-size:17px; color:#f3eee0}
.ha-dots{display:flex; gap:4px; align-items:center}
.ha-dots i{width:14px; height:4px; border-radius:2px; background:rgba(236,229,211,.14)}
.ha-dots i.done{background:#5f9e6f}
.ha-dots i.cur{background:var(--brass2)}
.ha-stat{font-size:11.5px; color:var(--muted); letter-spacing:.04em}
.ha-btn{
  margin-left:auto; padding:9px 16px; border-radius:4px; cursor:pointer; font:inherit;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#12100a; background:var(--brass2); border:1px solid var(--brass2);
  transition:filter .2s ease, transform .15s ease;
}
.ha-btn:hover{filter:brightness(1.08); transform:translateY(-1px)}
@media(max-width:640px){
  .homearena{gap:10px; padding:11px 13px}
  .ha-dots{display:none}
  .ha-btn{margin-left:0; width:100%; text-align:center}
}

/* центърът трябва да е НАД колелото */
#wheel{z-index:0}
.hub{z-index:3}
.sparks{z-index:2}
.pointer{z-index:4}

/* бутон „нова тема“ върху горния ръб на колелото */
.wheelwrap{--nt-h:44px}
.newtopic{
  position:absolute; left:50%; top:0; transform:translate(-50%,-50%); z-index:6;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:999px; cursor:pointer; font:inherit;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#12100a; background:linear-gradient(180deg,#e2c05a,var(--brass2));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 14px 30px -14px rgba(201,162,39,.9), 0 0 0 6px rgba(10,14,13,.55);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, filter .2s ease;
}
.newtopic svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .5s ease}
.newtopic:hover{transform:translate(-50%,-50%) scale(1.05); filter:brightness(1.06);
  box-shadow:0 18px 38px -14px rgba(201,162,39,1), 0 0 0 8px rgba(10,14,13,.5)}
.newtopic:hover svg{transform:rotate(-180deg)}
.newtopic:active{transform:translate(-50%,-50%) scale(.98)}
body.spinning .newtopic{opacity:.45; pointer-events:none}
.newtopic.wait{animation:ntPulse 1.6s ease-in-out 3}
@keyframes ntPulse{
  0%,100%{box-shadow:0 14px 30px -14px rgba(201,162,39,.9), 0 0 0 6px rgba(10,14,13,.55)}
  50%{box-shadow:0 14px 30px -14px rgba(201,162,39,1), 0 0 0 14px rgba(201,162,39,.16)}
}
@media(max-width:640px){
  .newtopic{padding:9px 15px; font-size:10px; letter-spacing:.12em; gap:7px}
  .newtopic svg{width:13px; height:13px}
}

/* по-малко застъпване на колелото */
.newtopic{top:-13px; padding:9px 18px; font-size:11px}
.newtopic:hover{transform:translate(-50%,-50%) scale(1.05)}

/* връщане: центърът отново е бутон, горната табелка се маха */
.newtopic{display:none !important}
.hub{width:152px; height:152px; display:grid; place-items:center; cursor:pointer}
.hub-in{display:flex; flex-direction:column; align-items:center; gap:6px}
.hub-icon{width:26px; height:26px; margin:0}
.hub span.hub-label{font-size:10px; letter-spacing:.13em}

/* центърът: голям надпис „дай ми тема“ */
.hub{width:196px; height:196px; border-width:1px}
.hub-in{gap:8px}
.hub-icon{width:26px; height:26px; margin:0 0 2px}
.hub span.hub-label{
  font-family:var(--serif); font-size:21px; line-height:1.06; letter-spacing:.02em;
  text-transform:uppercase; color:#f8f3e5; white-space:normal; text-align:center;
}
.hub:hover span.hub-label{color:#fff9e8}
@media(max-width:640px){
  .hub{width:136px; height:136px}
  .hub span.hub-label{font-size:15px}
  .hub-icon{width:18px; height:18px}
}

/* аватари в класацията */
.dcard-top li{display:flex; align-items:center; gap:10px}
.dcard-top .tav{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-size:10px; letter-spacing:.04em;
  color:var(--brass2); background:rgba(201,162,39,.12);
  border:1px solid rgba(236,229,211,.18);
}
.dcard-top .tav.has-img{padding:0; background:none}
.dcard-top .tav img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.dcard-top .tn em{font-style:normal; font-size:10.5px; color:#e0a45f; margin-left:4px}

/* топ 3: злато, сребро, бронз */
.dcard-top .tp{width:18px; text-align:center; font-family:var(--serif); color:var(--muted)}
.dcard-top .tp.m1{color:#e8c65a; text-shadow:0 0 12px rgba(232,198,90,.45)}
.dcard-top .tp.m2{color:#cfd6db; text-shadow:0 0 12px rgba(207,214,219,.35)}
.dcard-top .tp.m3{color:#d08a4a; text-shadow:0 0 12px rgba(208,138,74,.35)}
.dcard-top .tav.m1{border-color:#e8c65a; box-shadow:0 0 0 1px rgba(232,198,90,.35), 0 0 14px -4px rgba(232,198,90,.6)}
.dcard-top .tav.m2{border-color:#cfd6db; box-shadow:0 0 0 1px rgba(207,214,219,.3), 0 0 14px -4px rgba(207,214,219,.45)}
.dcard-top .tav.m3{border-color:#d08a4a; box-shadow:0 0 0 1px rgba(208,138,74,.3), 0 0 14px -4px rgba(208,138,74,.45)}
.dcard-top li.podium .tn{color:#f6f1e2}
.dcard-top li.podium .ts{color:var(--ink2)}

/* ============ ФИНАЛЕН ПАС: търсене, снимки, мобилно ============ */

/* picture не бива да чупи layout-а на снимките */
picture{display:contents}

/* ---------- overlay за търсене ---------- */
.findoverlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(6,10,9,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:9vh 18px 18px;
  animation:fade .18s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.findpanel{
  width:min(760px,100%);
  background:linear-gradient(180deg,#131c19,#0f1614);
  border:1px solid rgba(201,162,39,.28);
  border-radius:16px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  padding:16px;
  display:flex; flex-direction:column; gap:12px;
  max-height:80vh;
}
.findhead{display:flex; gap:10px; align-items:center}
.findhead .search{flex:1; margin:0}
.findhead .ghost{
  width:40px; height:40px; border-radius:10px; flex:none;
  background:rgba(236,229,211,.06); border:1px solid rgba(236,229,211,.12);
  color:var(--ink2); cursor:pointer;
}
.findfilters{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.findselect{
  background:#0f1614; color:var(--ink2);
  border:1px solid rgba(236,229,211,.14); border-radius:9px;
  padding:8px 10px; font:inherit; font-size:13px; max-width:240px;
}
.findcheck{display:flex; gap:7px; align-items:center; font-size:13px; color:var(--muted); cursor:pointer}
.findcheck input{accent-color:var(--brass)}
.findcount{margin-left:auto; font-size:11.5px; letter-spacing:.06em; color:var(--muted)}
.findlist{overflow:auto; padding-right:4px}
.findlist .row{width:100%; text-align:left; cursor:pointer; font:inherit}
.findlist .row .t{flex:1}
.findlist mark{
  background:rgba(201,162,39,.22); color:var(--ink);
  border-radius:3px; padding:0 2px;
}

/* ---------- мобилно: листът и хедърът да не се режат ---------- */
@media (max-width:640px){
  .top{padding-top:calc(8px + env(safe-area-inset-top))}
  .modal .sheet{max-height:93dvh; max-height:93vh}
  .sheetbody{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
  .findoverlay{padding:6vh 10px 10px}
  .findpanel{max-height:84vh; padding:12px}
  .prose{font-size:17.5px; line-height:1.75}
}
@supports (height:100dvh){
  @media (max-width:640px){ .modal .sheet{max-height:93dvh} }
}

/* дръжка на долния лист — показва, че се плъзга */
@media (max-width:640px){
  .modal .sheet::before{
    content:""; position:absolute; top:7px; left:50%;
    transform:translateX(-50%);
    width:42px; height:4px; border-radius:3px;
    background:rgba(236,229,211,.3); z-index:6; pointer-events:none;
  }
}

/* ---------- по-големи тъч цели ---------- */
@media (pointer:coarse){
  .tab{min-height:44px; padding:12px 6px}
  .mini-btn{min-height:40px; padding:9px 15px}
  .ghost{min-height:40px}
  .topright .ghost{min-width:40px}
  .row{min-height:48px}
  .tab:active,.mini-btn:active,.ghost:active{transform:scale(.97)}
}

/* ---------- празни състояния ---------- */
.notestarter{
  border:1px dashed rgba(201,162,39,.32);
  border-radius:14px; padding:18px 18px 14px;
  background:rgba(201,162,39,.04);
}
.notestarter h4{
  font-family:var(--serif); font-size:19px; margin:0 0 6px; color:var(--ink);
  font-weight:400;
}
.notestarter p{color:var(--muted); font-size:13.5px; margin:0 0 12px; line-height:1.6}
.notestarter .chips{display:flex; flex-wrap:wrap; gap:8px}
.notestarter .chip{
  font:inherit; font-size:12.5px; cursor:pointer;
  background:rgba(236,229,211,.05); color:var(--ink2);
  border:1px solid rgba(236,229,211,.14); border-radius:999px;
  padding:7px 13px;
}
.notestarter .chip:hover{border-color:rgba(201,162,39,.5); color:var(--ink)}
.findbtn{display:inline-flex; align-items:center; justify-content:center; width:38px; padding:0}
.findbtn svg{opacity:.82}
.findbtn:hover svg{opacity:1}

/* ---------- мобилен хедър: без пречупване и без отрязани табове ---------- */
@media (max-width:640px){
  .top{grid-template-columns:1fr auto; row-gap:6px; padding-bottom:6px}
  .topright{display:flex; align-items:center; gap:6px; flex-wrap:nowrap}
  .topright .ghost{padding:8px 10px; font-size:12px; min-height:38px}
  .topright .auth{padding:8px 12px}
  .nav{
    grid-column:1/-1; display:flex; justify-content:flex-start;
    gap:16px; overflow-x:auto; overflow-y:hidden;
    white-space:nowrap; padding:2px 0 4px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav .tab{flex:0 0 auto; padding:8px 2px; font-size:12.5px}
  .brand h1{font-size:19px}
}

/* панелът на рулетката да не се блъска на тесен екран */
@media (max-width:520px){
  .wheelpanel .panelhead, .panelhead{flex-wrap:wrap; row-gap:8px}
  #areaFilter{width:100%; max-width:none}
  .panelcount{margin-left:0}
}

/* ---------- действия под темата ---------- */
.topicactions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.topicactions .ghost{font-size:12.5px; padding:8px 12px}
.accountrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid rgba(236,229,211,.1)}
.accountrow .ghost{font-size:12px; padding:8px 12px; text-decoration:none; display:inline-flex; align-items:center}
.accountrow .danger{color:#e0837a; border-color:rgba(224,131,122,.3)}
.accountrow .danger:hover{background:rgba(224,131,122,.1)}

/* ---------- печатен лист ---------- */
#printSheet{display:none}
body.printing > *:not(#printSheet){display:none !important}
body.printing #printSheet{display:block !important}

@media print{
  html,body{background:#fff !important; color:#111 !important}
  #printSheet{
    display:block !important;
    color:#111;
    background:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:11.5pt;
    line-height:1.55;
    max-width:none;
    padding:0 4mm;
  }
  #printSheet .ps-head{
    display:flex; justify-content:space-between; align-items:baseline;
    border-bottom:1px solid #bbb; padding-bottom:6px; margin-bottom:14px;
    font-family:Helvetica,Arial,sans-serif; font-size:9pt; letter-spacing:.08em;
    text-transform:uppercase; color:#666;
  }
  #printSheet .ps-brand{color:#8a6d12; font-weight:700}
  #printSheet h1{font-size:19pt; line-height:1.25; margin:0 0 8px; color:#111}
  #printSheet h2{font-size:12pt; margin:18px 0 6px; color:#111; border-bottom:1px solid #ddd; padding-bottom:3px}
  #printSheet p{margin:0 0 8px; orphans:3; widows:3}
  #printSheet .ps-teaser{font-style:italic; color:#555}
  #printSheet ol,#printSheet ul{margin:0 0 10px 18px; padding:0}
  #printSheet li{margin-bottom:5px}
  #printSheet .ps-task{border-left:3px solid #c9a227; padding:6px 10px; background:#faf7ee}
  #printSheet .ps-lines{
    height:26mm; margin-top:6px;
    background-image:repeating-linear-gradient(to bottom, transparent 0 8mm, #ccc 8mm 8.2mm);
  }
  #printSheet .ps-foot{margin-top:14px; font-size:8.5pt; color:#888; text-align:right; font-family:Helvetica,Arial,sans-serif}
  #printSheet .ps-plan{width:100%; border-collapse:collapse; margin:6px 0 12px; font-size:10.5pt}
  #printSheet .ps-plan th{
    text-align:left; vertical-align:top; width:26mm; padding:6px 8px 6px 0;
    color:#8a6d12; font-family:Helvetica,Arial,sans-serif; font-size:9pt; white-space:nowrap;
    border-bottom:1px solid #eee;
  }
  #printSheet .ps-plan td{border-bottom:1px solid #eee; padding:6px 0}
  @page{margin:16mm 14mm}
}

/* свързани теми и „всички пътеки“ */
.related{margin-top:18px; padding-top:14px; border-top:1px solid rgba(236,229,211,.1)}
.related .label{margin-bottom:8px}
.related .chips{display:flex; flex-wrap:wrap; gap:8px}
.related .chip{
  font:inherit; font-size:12.5px; cursor:pointer; text-align:left;
  background:rgba(236,229,211,.05); color:var(--ink2);
  border:1px solid rgba(236,229,211,.14); border-radius:999px;
  padding:7px 13px; line-height:1.3;
}
.related .chip:hover{border-color:rgba(201,162,39,.5); color:var(--ink)}
.pathmore{
  width:100%; margin-top:6px; padding:8px; font:inherit; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  background:none; border:1px dashed rgba(236,229,211,.18); border-radius:9px;
  color:var(--muted);
}
.pathmore:hover{color:var(--ink2); border-color:rgba(201,162,39,.4)}

.findfoot{display:flex; gap:8px; flex-wrap:wrap; padding-top:10px; border-top:1px solid rgba(236,229,211,.1)}
.findfoot .ghost{
  font-size:12px; padding:9px 13px; border-radius:9px; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(236,229,211,.05); border:1px solid rgba(236,229,211,.14); color:var(--ink2);
  cursor:pointer; font-family:inherit;
}
.findfoot .ghost:hover{border-color:rgba(201,162,39,.45); color:var(--ink)}

/* цитатната лента: пълна снимка без кръг, както беше */
.quote-band > img{
  clip-path:none !important;
  transform:none !important;
  filter:sepia(.25) saturate(.7) contrast(1.05) brightness(.9) !important;
  opacity:.62;
}
.quote-band::before{display:none !important}
.quote-band::after{
  background:linear-gradient(180deg, rgba(10,14,13,.72), rgba(10,14,13,.86) 55%, rgba(10,14,13,.95)) !important;
}

/* лента към играта „Територии“ */
.gamebanner{display:flex;align-items:center;gap:10px;margin:14px 0 6px;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(201,162,39,.35);background:linear-gradient(180deg,rgba(201,162,39,.12),rgba(201,162,39,.04));
  color:var(--ink2);text-decoration:none;font-size:13.5px}
.gamebanner b{font-family:var(--serif);font-size:17px;color:var(--brass2);font-weight:400}
.gamebanner span{margin-left:auto;color:var(--brass)}
.gamebanner:hover{border-color:rgba(201,162,39,.6)}

/* „Територии“ — таб като останалите, но води към отделна страница */
.nav a.tab{display:inline-flex;align-items:center;text-decoration:none;font:inherit;
  font-size:13.5px;letter-spacing:.02em;color:var(--muted);background:none;border:0;
  border-bottom:1px solid transparent;padding:7px 2px;cursor:pointer}
.nav a.tab:hover{color:var(--ink2);border-bottom-color:rgba(201,162,39,.5)}
.nav a.gametab{color:var(--brass2)}
@media (max-width:640px){ .nav a.tab{padding:8px 2px;font-size:12.5px} }

/* точки в профила */
.profpts{margin:8px 0 4px;font-size:13px;color:#e8cf8b;font-variant-numeric:tabular-nums}
.ptsbar{height:7px;border-radius:5px;background:rgba(236,229,211,.1);overflow:hidden;margin:0 0 12px}
.ptsbar > i{display:block;height:100%;background:linear-gradient(90deg,#8a6f1f,#d8b25a);transition:width .4s}

/* =========================================================
   АНИМАЦИИ — 6 нови ефекта (scroll reveal, magnetic glow,
   tab indicator, counting numbers, page transitions, xp toast)
   ========================================================= */

/* 1. Scroll Reveal */
@keyframes scrollReveal{
  from{opacity:0; transform:translateY(18px) scale(.97)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.scroll-reveal{opacity:0; transform:translateY(18px) scale(.97)}
.scroll-reveal.revealed{animation:scrollReveal .55s cubic-bezier(.2,.8,.2,1) forwards}

/* 2. Magnetic Hover Glow */
.panel{--mx:50%; --my:50%}
.panel>.mag-glow{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; z-index:0;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(201,162,39,.14), transparent 65%);
  opacity:0; transition:opacity .35s ease;
}
.panel:hover>.mag-glow{opacity:1}

/* 3. Tab Indicator Slide */
.nav{position:relative}
.nav-indicator{
  position:absolute; bottom:0; left:0; height:2px; background:var(--brass2);
  border-radius:1px; transition:left .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none; box-shadow:0 0 10px rgba(201,162,39,.55);
}

/* 4. Counting Numbers — no extra CSS needed, JS handles it */

/* 5. Page View Transitions */
@keyframes viewEnter{
  from{opacity:0; transform:translateY(14px); filter:blur(4px)}
  to{opacity:1; transform:none; filter:none}
}
@keyframes viewExit{
  from{opacity:1; transform:none; filter:none}
  to{opacity:0; transform:translateY(-8px); filter:blur(3px)}
}
.view.entering{display:block; animation:viewEnter .5s cubic-bezier(.2,.8,.2,1) forwards}
.view.exiting{display:block; animation:viewExit .25s ease forwards}

/* 6. XP Toast Bounce */
@keyframes toastBounce{
  0%{opacity:0; transform:translateY(20px) scale(.85)}
  45%{opacity:1; transform:translateY(-6px) scale(1.04)}
  70%{transform:translateY(2px) scale(.98)}
  100%{opacity:1; transform:none; scale:1}
}
@keyframes coinFlip{
  from{transform:rotateY(0)}
  to{transform:rotateY(360deg)}
}
.xptoast.show{
  opacity:1; transform:none;
  animation:toastBounce .55s cubic-bezier(.2,.8,.2,1) forwards;
}
.xptoast.show .coin{
  display:inline-block;
  animation:coinFlip .6s ease .1s;
}

/* reduced motion: skip new animations */
@media(prefers-reduced-motion:reduce){
  .scroll-reveal{opacity:1; transform:none}
  .scroll-reveal.revealed{animation:none}
  .view.entering,.view.exiting{animation:none}
  .xptoast.show{animation:none}
  .xptoast.show .coin{animation:none}
  .nav-indicator{transition:none}
}

/* кой е на линия */
.onlinebadge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  border:1px solid rgba(236,229,211,.14);background:rgba(236,229,211,.04);
  font:600 12px/1 system-ui,sans-serif;color:#93a096;white-space:nowrap}
.onlinebadge i{width:7px;height:7px;border-radius:50%;background:#7fa887;box-shadow:0 0 8px #7fa887;
  animation:onlinePulse 2.4s ease-in-out infinite}
.onlinebadge b{color:#ece5d3;font-weight:700}
.onlinebadge[data-playing]:not([data-playing=""]){border-color:rgba(201,162,39,.4)}
@keyframes onlinePulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.onlinebadge i{animation:none}}
@media (max-width:640px){.onlinebadge{padding:4px 8px;font-size:11px}.onlinebadge b{font-size:11px}}

/* =========================================================
   АБОНАМЕНТ — екран за плащане, значка в навигацията
   ========================================================= */
.nav a.navplus{color:var(--brass2)}
.nav a.navplus b{font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  margin-left:5px;padding:1px 6px;border-radius:99px;border:1px solid var(--brassdim);color:var(--brass2);display:none}
.nav a.navplus b:not(:empty){display:inline-block}
.nav a.navplus.paid{color:var(--brass)}

.paywallsheet{max-width:520px}
.paywallsheet .pwlead{color:var(--muted);font-size:14.5px;line-height:1.65;margin:6px 0 18px}
.pwprices{display:flex;gap:8px;margin:0 0 18px}
.pwprices > div{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;background:rgba(20,28,25,.5)}
.pwprices b{display:block;font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:400}
.pwprices span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.pwnote{color:var(--muted);font-size:12px;line-height:1.55;margin:14px 0 0;text-align:center}

/* поканата в текста, когато пълният текст е заключен */
.pwinline{margin:22px 0 4px;padding:20px 18px;border:1px solid var(--brassdim);border-radius:14px;
  background:linear-gradient(180deg,rgba(201,162,39,.09),rgba(20,28,25,.55))}
.pwinline .label{color:var(--brass2);margin:0 0 6px}
.pwinline p{font-size:14.5px;color:var(--ink2);margin:0 0 14px}
.pwinline .primary.wide{display:block;text-align:center;text-decoration:none}
.pwinline .pwnote{margin-top:12px}

/* мобилен хедър: марката да не се застъпва с „онлайн“ */
@media (max-width:640px){
  .top .brand{min-width:0;flex:1 1 auto}
  .top .brand > div{min-width:0;overflow:hidden}
  .top .brand h1{font-size:18px;line-height:1.1;white-space:nowrap}
  .top .brand .tag{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .onlinebadge{display:none}
}
@media (max-width:380px){
  .top .brand .tag{display:none}
}
.paywallsheet a.primary{text-decoration:none}

/* ---------- тетрадка с грешки ---------- */
.mistakebox{margin:22px 0 26px}
.mkhead{border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;background:var(--panel)}
.mkhead h3{font-size:22px;margin:6px 0 8px}
.mkhead > p{color:var(--muted);font-size:14px;margin:0 0 14px;max-width:62ch}
.mkhead .label{color:var(--brass2)}
.mkcta{display:inline-block;text-decoration:none;border:1px solid var(--brassdim);color:var(--brass2);
  border-radius:10px;padding:10px 16px;font-size:13.5px;background:rgba(201,162,39,.08)}
.mkcta:hover{background:rgba(201,162,39,.16)}
.mkprev{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.mkprev li{font-size:13.5px;color:var(--ink2);border-left:2px solid var(--brassdim);padding-left:10px;opacity:.85}
.mklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mklist li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(16,22,20,.55);
  display:grid;gap:5px}
.mktopic{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.mkq{font-size:15px;color:var(--ink);font-weight:400;line-height:1.45}
.mkwhy{font-size:13.5px;color:var(--ink2);opacity:.9}
.mkacts{display:flex;gap:8px;margin-top:4px}

/* ── VIP значка ── */
.vip-badge{
  display:inline-block;margin-left:6px;padding:2px 6px;border-radius:3px;
  background:linear-gradient(180deg,#e2c063,#b98f24);color:#1a1408;
  font:700 8.5px/1 system-ui,sans-serif;letter-spacing:.14em;vertical-align:middle
}

/* ── приятели ── */
.fr-modal{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:18px;background:rgba(6,10,8,.74);backdrop-filter:blur(6px)}
.fr-modal[hidden]{display:none}
.fr-card{position:relative;width:min(430px,100%);max-height:86vh;overflow:auto;padding:22px;border-radius:4px;border:1px solid rgba(201,162,39,.4);background:linear-gradient(180deg,#161d17,#0d1210);box-shadow:0 40px 90px -50px #000}
.fr-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(201,162,39,.3);background:transparent;color:#a9a190;cursor:pointer}
.fr-kicker{margin:0;font:600 8.5px/1 system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#c9a227}
.fr-card h3{margin:6px 0 14px;font:600 20px/1.2 Georgia,serif;color:#f6efdc}
.fr-add{display:flex;gap:8px}
.fr-add input{flex:1;min-width:0;padding:10px 12px;border-radius:3px;border:1px solid rgba(201,162,39,.3);background:rgba(255,255,255,.04);color:#f6efdc;font:400 13px/1 system-ui,sans-serif}
.fr-add button{padding:10px 16px;border-radius:3px;border:1px solid rgba(226,192,99,.8);background:linear-gradient(180deg,#e2c063,#b98f24);color:#1a1408;font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;cursor:pointer}
.fr-msg{margin:8px 0 0;min-height:14px;font:400 11px/1.4 system-ui,sans-serif;color:#a9a190}
.fr-sec{margin-top:16px;padding-top:12px;border-top:1px solid rgba(201,162,39,.14)}
.fr-sec b{display:block;font:600 9px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8d8574;margin-bottom:8px}
.fr-sec ul{list-style:none;margin:0;padding:0}
.fr-sec li{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.fr-ava{width:28px;height:28px;border-radius:8px;border:1px solid rgba(201,162,39,.3);background-color:#1a211b;background-size:cover;background-position:center;display:grid;place-items:center;font:600 11px/1 Georgia,serif;color:#d8b25a;flex:0 0 auto}
.fr-name{flex:1;min-width:0;font:400 13px/1.2 Georgia,serif;color:#e9e2cf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-sec li button{padding:5px 9px;border-radius:3px;border:1px solid rgba(201,162,39,.35);background:transparent;color:#d8b25a;font:400 10px/1 system-ui,sans-serif;cursor:pointer}
.fr-sec li button:hover{background:rgba(201,162,39,.12)}
.fr-empty{font:italic 400 11px/1.5 Georgia,serif;color:#6f6a5d}
#friendsBtn.on{color:#e2c063;border-color:rgba(201,162,39,.5)}

/* ── аватарите навсякъде са квадратни със заоблени ъгли, не кръгове ── */
.profavatar{
  border-radius:16px !important;
  box-shadow:0 0 0 3px rgba(201,162,39,.12), 0 12px 30px -14px #000 !important;
}
.profavatar:hover{ box-shadow:0 0 0 3px rgba(201,162,39,.28), 0 12px 30px -14px #000 !important; }
.profavatar img{ border-radius:14px !important; }

.userchip .avatar{ border-radius:9px !important; }
.userchip .avatar img{ border-radius:9px !important; }

.post .avatar{ border-radius:10px !important; }
.post .avatar img{ border-radius:10px !important; }

/* ── дясната зона на хедъра: една височина, един радиус, един ритъм ── */
.topright{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  min-width:0;
}
.topright > *{ box-sizing:border-box; flex:0 0 auto }

.topright .onlinebadge,
.topright .ghost,
.topright .vt-pill,
.topright #findBtn{
  height:36px; border-radius:8px; padding:0 13px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:500 11.5px/1 system-ui,-apple-system,sans-serif; letter-spacing:.05em;
  border:1px solid var(--line2); background:none; color:var(--ink2);
  transition:border-color .2s, color .2s, background .2s;
}
.topright #findBtn{ width:36px; padding:0 }
.topright #findBtn svg{ width:16px; height:16px }
.topright .ghost:hover,
.topright .onlinebadge:hover,
.topright #findBtn:hover{ border-color:var(--brass); color:var(--brass2); background:rgba(201,162,39,.06) }

.topright .vt-pill{ padding:0 12px 0 9px; border-color:rgba(201,162,39,.4) }
.topright .onlinebadge i{
  width:6px; height:6px; border-radius:50%; background:#7fbf8a; box-shadow:0 0 0 3px rgba(127,191,138,.18)
}
.topright .onlinebadge b{ color:var(--brass2); font-weight:700 }

/* профилният чип — същата височина, но със златен кант */
.topright .chipid,
.topright .authbox .auth{
  height:36px; border-radius:8px; padding:0 12px 0 5px;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(201,162,39,.42); background:rgba(201,162,39,.05);
}
.topright .chipid .avatar{ width:26px; height:26px; border-radius:6px }
.topright .chipid b{ font:600 12px/1 Georgia,serif; color:#f5efdf }
.topright .chipid #logoutBtn{
  margin-left:6px; padding:0 0 0 8px; border:0; border-left:1px solid rgba(201,162,39,.25);
  background:none; color:var(--muted); font:500 10px/1 system-ui,sans-serif; letter-spacing:.08em;
  height:16px; display:inline-flex; align-items:center;
}
.topright .chipid #logoutBtn:hover{ color:#e0a1a1 }

@media (max-width:820px){
  .topright{ gap:6px }
  .topright .onlinebadge{ display:none }
  .topright .ghost,.topright .vt-pill,.topright #findBtn{ height:32px; padding:0 10px }
  .topright #findBtn{ width:32px }
}

/* приятел в мини профила от класацията */
.pm-add{
  margin-top:14px; width:100%; height:38px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(226,192,99,.75); color:#e2c063;
  background:linear-gradient(180deg,rgba(226,192,99,.16),rgba(185,143,36,.08));
  font:600 10.5px/1 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  transition:background .18s, color .18s;
}
.pm-add:hover{ background:linear-gradient(180deg,#e2c063,#b98f24); color:#1a1408 }
.pm-add[disabled]{ opacity:.6; cursor:default; background:transparent; color:#8d8574; border-color:rgba(201,162,39,.25) }
.pm-ava{ background-size:cover; background-position:center }

/* съгласие при регистрация */
.authconsent{display:flex;gap:9px;align-items:flex-start;margin:6px 0 2px;font:400 11.5px/1.45 system-ui,sans-serif;color:var(--muted,#a9a190);cursor:pointer}
.authconsent input{margin-top:1px;width:15px;height:15px;accent-color:#b98f24;flex:0 0 auto}
.authconsent a{color:var(--brass2,#d8b25a);text-decoration:underline;text-underline-offset:2px}
.authconsent a:hover{color:#f0d98e}

/* ── мобилен хедър с влязъл профил: да не се реже ── */
@media (max-width:700px){
  .top{flex-wrap:wrap; row-gap:8px}
  .top .brand{min-width:0; flex:1 1 auto}
  .top .brand h1{font-size:17px}
  .topright{flex-wrap:wrap; justify-content:flex-end; row-gap:6px; margin-left:auto}
  .topright #focusBtn{display:none}
  .topright .vt-pill{padding:0 9px 0 7px}
  .topright .chipid{padding:0 8px 0 5px; gap:6px}
  .topright .chipid b{max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .topright .chipid #logoutBtn{display:none}
  .topright .vip-badge{margin-left:4px}
  nav.tabs, .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  nav.tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar{display:none}
}
@media (max-width:420px){
  .topright #friendsBtn{font-size:10.5px; padding:0 9px}
  .topright .ghost{font-size:10.5px}
}

/* мобилен хедър: логото на свой ред, бутоните на втори — нищо не се реже */
@media (max-width:700px){
  .top{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .top .brand{flex:1 1 100%; min-width:0; grid-column:auto; grid-row:auto}
  .top .brand h1{font-size:18px}
  .topright{flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap; gap:6px; margin-left:0}
  .topright .chipid{order:-1}
}

/* новите режими в избора на Арената — водят в отделни игри, не в кръг */
.modebtn-extra{border-style:dashed; border-color:rgba(201,162,39,.38); color:#d9c9a4}
.modebtn-extra:hover{border-style:solid; border-color:var(--brass); color:var(--ink)}
.modebtn-extra.on{border-style:solid; background:rgba(201,162,39,.12)}

/* дивизията и седмичната лига под общата класация — в тясната дясна колона */
.arena-mods-aside{margin-top:18px}
.arena-mods-aside .am-league{background:transparent;border:0;padding:0}
.arena-mods-aside .am-league-head{display:none}
.arena-mods-aside .am-league-top{padding:0 0 12px}
.arena-mods-aside .am-league-div{font-size:22px}
.arena-mods-aside .am-league-bar{margin:10px 0 6px}
.arena-mods-aside .am-league-list{font-size:12.5px}
.arena-mods-aside .am-league-row{padding:6px 2px}
.arena-mods-aside .am-league-chest{margin-top:10px}
.arena-mods-aside .am-league-title{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#a89a83}
@media (max-width:900px){.arena-mods-aside{margin-top:24px}}

/* кутията за лигата да заема цялата ширина на дясната колона (иначе се смачква) */
.dc-board #arenaModsAside{display:block; width:100%; min-width:0; align-self:stretch; flex:0 0 auto}
#arenaModsAside .am-league,
#arenaModsAside .am-league *{min-width:0; max-width:100%}
#arenaModsAside .am-league{display:block; width:100%}
#arenaModsAside .am-league-top,
#arenaModsAside .am-league-board-head{flex-wrap:wrap; gap:6px}
#arenaModsAside .am-league-board{width:100%}
#arenaModsAside .am-league-row{display:flex; align-items:center; gap:8px; width:100%}
#arenaModsAside .am-league-row-name{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#arenaModsAside .am-league-row-ap{flex:0 0 auto}
#arenaModsAside .am-league-row-tag{display:none}

/* лентата на дивизията се сгъва на два реда в тясната колона */
#arenaModsAside .am-league-bar{grid-template-columns:auto minmax(0,1fr); align-items:start}
#arenaModsAside .am-league-next{grid-column:1 / -1; margin-top:6px}
#arenaModsAside .am-league-div{font-size:19px; white-space:normal}
#arenaModsAside .am-league-place{white-space:normal}
#arenaModsAside .am-league-chest{grid-template-columns:auto minmax(0,1fr)}

/* лигата в дясната колона — собствена карта, за да е четима върху винетката */
#arenaModsAside{position:relative; z-index:2; background:#141110; border:1px solid rgba(201,162,39,.18); border-radius:12px; padding:14px 14px 12px}
#arenaModsAside .am-league-row-name{color:#f2e9d8}
#arenaModsAside .am-league-row-ap{color:#c9a227}
#arenaModsAside .am-league-cap,#arenaModsAside .am-league-sub{color:#a89a83}

/* турнирите — в лявата колона на Арената, две карти една до друга */
.arena-mods-tourney{margin:18px 0 4px}
.arena-mods-tourney .am-tourney{width:100%}
@media (max-width:900px){.arena-mods-tourney{margin:14px 0}}

/* ── Арена: три колони на широк екран — турнири · кръгове · класация ── */
.dc-layout{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:24px; align-items:start}
.dc-left-side{display:none}
@media (min-width:1360px){
  .dc-layout{grid-template-columns:340px minmax(0,1fr) 330px; gap:20px}
  .dc-left-side{display:block; grid-column:1}
  .dc-zone{grid-column:2; min-width:0}
  .dc-board{grid-column:3}
  .arena-mods-tourney{margin:0; position:sticky; top:18px}
  .arena-mods-tourney .am-tourney{display:block}
  .arena-mods-tourney .am-tourney-cards{display:grid; grid-template-columns:1fr}
}
@media (max-width:1359px){
  .dc-left-side{display:block; grid-column:1 / -1; order:-1}
  .arena-mods-tourney{margin:0 0 16px}
}

/* линк към страницата с клановете от профила */
.prof-clans-link{margin:10px 0 2px}
.prof-clans-link a{color:#c9a227; text-decoration:none; font-size:13px; border-bottom:1px solid rgba(201,162,39,.35)}
.prof-clans-link a:hover{color:#fff; border-color:#c9a227}

/* ═══════════════ Профил 2.0 — елегантен, с иконки ═══════════════ */
.profile-2 { }
.profsheet.prof2 {
  max-width: 720px;
  padding: 26px 26px 22px;
  background: linear-gradient(180deg, #17130f 0%, #12100c 100%);
  border: 1px solid rgba(201, 162, 39, .26);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.prof2 .close { top: 14px; right: 14px; }

.p2-head {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(201, 162, 39, .14);
}
.p2-ava {
  position: relative;
  width: 88px; height: 88px;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(201, 162, 39, .45);
  background: #1b1712 center/cover no-repeat;
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font: 600 26px/1 Georgia, serif; color: #c9a227;
}
.p2-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2-ava-edit {
  position: absolute; right: 4px; bottom: 4px;
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 10, 8, .82); color: #e8d9b8;
  border: 1px solid rgba(201, 162, 39, .35);
  font-style: normal;
}
.p2-ava:hover .p2-ava-edit { color: #fff; border-color: #c9a227; }

.p2-id { min-width: 0; }
.p2-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.p2-name-row h3 { margin: 0; font: 600 26px/1.1 Georgia, serif; color: #f6ecd8; letter-spacing: .2px; }
.p2-id .profsub { margin: 5px 0 0; color: #a89a83; font-size: 12.5px; }
.p2-level {
  margin: 7px 0 0; font: 11px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #c9a227;
}
.p2-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.p2-coin {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .38);
  color: #f6e7bd; font: 600 13.5px/1 system-ui, sans-serif;
}
.p2-coin .p2-ico { color: #e5c56a; }
.p2-read { display: inline-flex; align-items: center; gap: 6px; color: #9d907b; font-size: 11.5px; }

.p2-ico { display: inline-flex; color: #c9a227; }
.p2-ico svg { display: block; }

.p2-sec { margin: 20px 0 0; }
.p2-h {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font: 10.5px/1 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #a89a83;
}
.p2-h .p2-ico { color: #c9a227; }
.p2-slot:empty { display: none; }

/* бързи връзки — решетка от плочки с иконки */
.p2-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 20px 0 0;
}
.p2-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: #17130f;
  border: 1px solid rgba(201, 162, 39, .16);
  border-radius: 11px;
  color: #e8dcc4; font: 13px/1.3 Georgia, serif;
  text-decoration: none; cursor: pointer; text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.p2-link:hover { border-color: rgba(201, 162, 39, .55); background: #1c1712; transform: translateY(-1px); }
.p2-link:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }

/* за мен */
.p2-me { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
.p2-age, .p2-bio { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.p2-age > span, .p2-bio > span {
  font: 10px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8f8371;
}
.p2-age > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: #6f6455; }
.p2-age input, .p2-bio textarea {
  background: #100e0b; color: #f2e9d8;
  border: 1px solid rgba(201, 162, 39, .2); border-radius: 10px;
  padding: 10px 12px; font: 14px/1.5 Georgia, serif;
}
.p2-bio textarea { resize: vertical; min-height: 96px; }
.p2-age input:focus, .p2-bio textarea:focus { outline: none; border-color: rgba(201, 162, 39, .6); }
.p2-count { align-self: flex-end; font-size: 10.5px; color: #6f6455; }

.p2-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(201, 162, 39, .14);
}
.p2-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 10px;
  background: transparent; color: #b9ab92;
  border: 1px solid rgba(201, 162, 39, .2);
  font: 12.5px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.p2-ghost:hover { color: #f2e9d8; border-color: rgba(201, 162, 39, .5); }
.p2-actions .primary { padding: 11px 22px; }
.p2-actions .saved { color: #7fb99a; font-size: 12.5px; }

/* старите блокове да пасват на новата рамка */
.prof2 #profCalendar, .prof2 #profTitles, .prof2 #profArenaStats { margin: 0; }

@media (max-width: 620px) {
  .profsheet.prof2 { padding: 20px 15px 18px; border-radius: 16px; }
  .p2-head { grid-template-columns: 68px minmax(0, 1fr); gap: 13px; }
  .p2-ava { width: 68px; height: 68px; border-radius: 15px; }
  .p2-name-row h3 { font-size: 21px; }
  .p2-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .p2-links { grid-template-columns: 1fr; }
  .p2-me { grid-template-columns: 1fr; }
  .p2-read { font-size: 11px; }
  .p2-actions .primary { flex: 1 1 auto; }
}

/* в профила секциите имат свои заглавия — вътрешните се скриват */
.prof2 .am-pstats-label,
.prof2 #profTitles .am-missions-titles-label,
.prof2 #profTitles .am-missions-titles-count,
.prof2 #profCalendar .am-season-eyebrow { display: none !important; }

/* реваншът в профила — като карта, не гол текст */
.prof2 #profRevenge { margin: 16px 0 0; }
.prof2 #profRevenge .am-social-big,
.prof2 #profRevenge > div {
  background: #17130f;
  border: 1px solid rgba(201, 162, 39, .28);
  border-radius: 12px;
  padding: 12px 14px;
  color: #e8dcc4;
  font-size: 13px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.prof2 #profRevenge button {
  border: 1px solid rgba(201, 162, 39, .4);
  background: rgba(201, 162, 39, .12);
  color: #f6e7bd; border-radius: 9px; padding: 8px 12px;
  font: 12.5px/1 system-ui, sans-serif; cursor: pointer;
}
.prof2 #profRevenge button:hover { border-color: #c9a227; color: #fff; }

/* без двойни заглавия в профила */
.prof2 #profArenaStats .am-pstats-t { display: none !important; }
.prof2 #profTitles .am-missions-titles-head { display: none !important; }
.prof2 #profCalendar .am-season-eyebrow,
.prof2 #profCalendar .am-season-sub { display: none !important; }
.prof2 #profCalendar .prof-cal-t { margin-top: 0; }
.prof2 #profCalendar .am-season-cal { padding-top: 0 !important; }

/* заглавието „постоянство · ноември“ е излишно — секцията вече има своє */
.prof2 #profCalendar .prof-cal-t { display: none !important; }
.prof2 #profCalendar .prof-cal-s { margin-top: 0 !important; }

/* етикетите на плочките се връщат (скрих ги по погрешка) */
.prof2 #profArenaStats .am-pstats-label { display: block !important; }

/* ── Профил 2.0: пръстен, герб, табове, тема ── */
.p2-ava.p2-ring { position: relative; overflow: visible; }
.p2-ring-line {
  position: absolute; inset: -6px; border-radius: 22px;
  background: conic-gradient(#c9a227 var(--p2-pct, 0%), rgba(201, 162, 39, .13) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  pointer-events: none;
}
.p2-ava img, .p2-ava > span { position: relative; z-index: 1; }

.p2-crest {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 6px; border-radius: 999px;
  background: rgba(201, 162, 39, .1);
  border: 1px solid rgba(201, 162, 39, .38);
  color: #e8d9b8; font: 11px/1.5 system-ui, sans-serif;
}
.p2-crest-mark { color: #c9a227; font-style: normal; }
.p2-crest[data-tier="silver"] { border-color: rgba(200, 208, 220, .45); }
.p2-crest[data-tier="gold"] { border-color: #c9a227; box-shadow: 0 0 0 1px rgba(201, 162, 39, .25) inset; }
.p2-crest[data-tier="platinum"] { border-color: #8fd6c4; color: #cdf3ea; }
.p2-crest[data-tier="diamond"] { border-color: #7fb7ff; color: #cfe4ff; }

/* табове и инструменти */
.p2-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(201, 162, 39, .14);
}
.p2-tabs { display: flex; gap: 4px; background: #100e0b; padding: 3px; border-radius: 10px; border: 1px solid rgba(201, 162, 39, .14); }
.p2-tab {
  padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: #9d907b;
  font: 12px/1 system-ui, sans-serif; letter-spacing: .04em;
}
.p2-tab:hover { color: #e8dcc4; }
.p2-tab.on { background: rgba(201, 162, 39, .16); color: #f6e7bd; }
.p2-tools { margin-left: auto; display: flex; gap: 6px; }
.p2-tool {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer;
  background: #17130f; color: #c9a227;
  border: 1px solid rgba(201, 162, 39, .22);
}
.p2-tool:hover { border-color: rgba(201, 162, 39, .6); color: #fff; }
.p2-tool.is-done { border-color: #7fb99a; color: #7fb99a; }
.p2-tool:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }

/* сгъване */
.p2-sec .p2-h { cursor: pointer; user-select: none; }
.p2-sec .p2-h::after {
  content: "▾"; margin-left: auto; color: #6f6455; font-size: 10px;
  transition: transform .18s ease;
}
.p2-sec.is-collapsed .p2-h::after { transform: rotate(-90deg); }
.p2-sec.is-collapsed > *:not(.p2-h) { display: none !important; }

/* празно състояние */
.p2-empty {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 12px;
  background: #141110; border: 1px dashed rgba(201, 162, 39, .28);
}
.p2-empty i { font-size: 26px; font-style: normal; opacity: .8; }
.p2-empty p { margin: 0; font-size: 12.5px; color: #b9ab92; line-height: 1.5; }
.p2-empty b { color: #f2e9d8; }
.p2-empty-btn {
  margin-left: auto; padding: 9px 13px; border-radius: 9px; text-decoration: none;
  border: 1px solid rgba(201, 162, 39, .45); color: #f6e7bd;
  font: 12.5px/1 system-ui, sans-serif;
}
.p2-empty-btn:hover { border-color: #c9a227; color: #fff; }

/* светла тема на профила */
.prof2.p2-light {
  background: linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
  border-color: rgba(160, 132, 50, .35);
  color: #2b2418;
}
.prof2.p2-light .p2-name-row h3,
.prof2.p2-light .p2-level,
.prof2.p2-light .p2-h { color: #6b5320; }
.prof2.p2-light .p2-id .profsub,
.prof2.p2-light .p2-read { color: #7a6a4c; }
.prof2.p2-light .p2-link,
.prof2.p2-light .p2-tool,
.prof2.p2-light .p2-ghost,
.prof2.p2-light .p2-empty { background: #fffaf0; color: #463a24; border-color: rgba(160, 132, 50, .3); }
.prof2.p2-light .p2-tabs { background: #f0e6d2; }
.prof2.p2-light .p2-tab { color: #6f5f40; }
.prof2.p2-light .p2-tab.on { background: rgba(201, 162, 39, .25); color: #3d3011; }
.prof2.p2-light .p2-age input,
.prof2.p2-light .p2-bio textarea { background: #fffdf7; color: #2b2418; border-color: rgba(160, 132, 50, .32); }
.prof2.p2-light .p2-coin { background: rgba(201, 162, 39, .16); color: #5a4715; }

@media (max-width: 620px) {
  .p2-toolbar { flex-wrap: wrap; }
  .p2-tab { padding: 8px 12px; }
  .p2-tool { width: 38px; height: 38px; }
  .p2-empty-btn { margin-left: 0; }
}

/* светла тема: контраст на плочките и текстовете */
.prof2.p2-light .p2-link,
.prof2.p2-light .p2-link * { color: #3d3220 !important; }
.prof2.p2-light .p2-link .p2-ico { color: #8a6a14 !important; }
.prof2.p2-light .p2-link:hover { border-color: #b8912a; background: #fffdf6; }
.prof2.p2-light .p2-h,
.prof2.p2-light .p2-h .p2-ico { color: #7a5f1c !important; }
.prof2.p2-light .p2-age > span,
.prof2.p2-light .p2-bio > span { color: #7a6a4c !important; }
.prof2.p2-light .p2-coin b { color: #4a3a12; }
.prof2.p2-light .p2-empty p { color: #5c4d31; }
.prof2.p2-light .p2-empty-btn { color: #5a4715; border-color: rgba(160,132,50,.5); }
.prof2.p2-light .p2-tool { color: #7a5f1c; }
.prof2.p2-light .saved { color: #2f6d54; }

/* ── пръстенът вече е в собствена обвивка (не го реже рамката) ── */
.p2-ava-wrap { position: relative; width: 88px; height: 88px; flex: 0 0 auto; }
.p2-ava-wrap .p2-ava { width: 100%; height: 100%; }
.p2-ava-wrap .p2-ring-line {
  position: absolute; inset: -7px; border-radius: 24px; z-index: 0;
  background: conic-gradient(#c9a227 var(--p2-pct, 0%), rgba(201, 162, 39, .14) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  pointer-events: none;
}
.p2-ava-wrap .p2-ava { position: relative; z-index: 1; overflow: hidden; }

/* ── светла тема: всички модулни блокове стават светли ── */
.prof2.p2-light #profArenaStats *,
.prof2.p2-light #profCalendar *,
.prof2.p2-light #profTitles *,
.prof2.p2-light #profRevenge * { color: #3d3220 !important; }
.prof2.p2-light #profCalendar .am-season-days li,
.prof2.p2-light #profArenaStats .am-pstats-grid > * {
  background: #fffaf0 !important; border-color: rgba(160, 132, 50, .28) !important;
}
.prof2.p2-light #profArenaStats .am-pstats-bar,
.prof2.p2-light #profCalendar .am-season-bar { background: #efe3c9 !important; }
.prof2.p2-light #profArenaStats .am-pstats-bar-fill { background: #b8912a !important; }
.prof2.p2-light .prof-cal-row b { color: #3d3220 !important; }
.prof2.p2-light #profTitles .am-missions-title { background: #fffaf0 !important; border-color: rgba(160,132,50,.3) !important; }

/* ── достъпност: секциите се стигат с Tab, по-големи цели ── */
.p2-sec .p2-h { min-height: 40px; display: flex; align-items: center; }
.p2-sec .p2-h:focus-visible { outline: 2px solid #c9a227; outline-offset: 3px; border-radius: 6px; }
.p2-tab { min-height: 40px; }
.p2-tool { width: 40px; height: 40px; }
.p2-link { min-height: 44px; }
.p2-ghost { min-height: 40px; }

/* на телефон лентата с табовете остава горе */
@media (max-width: 620px) {
  .p2-toolbar { position: sticky; top: 0; z-index: 5; background: #17130f; margin: 10px -15px 4px; padding: 8px 15px; }
  .prof2.p2-light .p2-toolbar { background: #fbf6ea; }
  .p2-ava-wrap { width: 68px; height: 68px; }
  .p2-actions { position: sticky; bottom: 0; background: #17130f; margin: 16px -15px 0; padding: 12px 15px; }
  .prof2.p2-light .p2-actions { background: #fbf6ea; }
}

/* ── „За мен“: подредена секция с избори и преглед ── */
.p2-note {
  margin: 0 0 12px; padding: 9px 12px; border-radius: 9px;
  background: rgba(201, 162, 39, .07);
  border: 1px solid rgba(201, 162, 39, .18);
  color: #a89a83; font-size: 11.5px; line-height: 1.55;
}
.p2-me { display: block; }
.p2-me .p2-bio { display: flex; flex-direction: column; gap: 5px; }
.p2-row2 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.p2-city { display: flex; flex-direction: column; gap: 5px; }
.p2-city > span { font: 10px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8f8371; }
.p2-city > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: #6f6455; }
.p2-city input {
  background: #100e0b; color: #f2e9d8; border: 1px solid rgba(201, 162, 39, .2);
  border-radius: 10px; padding: 10px 12px; font: 14px/1.5 Georgia, serif;
}
.p2-pick { margin-top: 14px; }
.p2-pick-label {
  display: block; margin-bottom: 7px;
  font: 10px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8f8371;
}
.p2-pick-label em { font-style: normal; text-transform: none; letter-spacing: 0; color: #6f6455; }
.p2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p2-chip {
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  background: #17130f; color: #b9ab92;
  border: 1px solid rgba(201, 162, 39, .2);
  font: 12px/1.2 system-ui, sans-serif;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.p2-chip:hover { border-color: rgba(201, 162, 39, .5); color: #f2e9d8; }
.p2-chip.on { background: rgba(201, 162, 39, .16); border-color: #c9a227; color: #f6e7bd; }
.p2-chip:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }

.p2-preview { margin-top: 16px; }
.p2-prev-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #1a1611 0%, #141110 100%);
  border: 1px solid rgba(201, 162, 39, .22);
}
.p2-prev-ava {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  background: #221c15 center/cover no-repeat;
  border: 1px solid rgba(201, 162, 39, .35);
  display: flex; align-items: center; justify-content: center;
  color: #c9a227; font: 600 16px/1 Georgia, serif;
}
.p2-prev-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.p2-prev-body b { color: #f6ecd8; font: 600 16px/1.2 Georgia, serif; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p2-prev-body span { color: #a89a83; font-size: 11.5px; }
.p2-prev-areas { color: #c9a227 !important; font-size: 11px !important; letter-spacing: .02em; }

@media (max-width: 620px) {
  .p2-row2 { grid-template-columns: 1fr; }
  .p2-chip { padding: 9px 12px; min-height: 38px; }
}