/* ===========================================================
   КАЧАЛКА-КЛУБ — concrete & rebar brutalism
   =========================================================== */
:root{
  --bg:#0c0c0e;
  --bg2:#121215;
  --steel:#17181c;
  --steel2:#1e2026;
  --line:#2a2c33;
  --ink:#f4f3ee;
  --mute:#8a8c94;
  --lime:#caff3f;
  --lime-d:#9bcc1f;
  --red:#ff3b30;
  --amber:#ffb020;
  --blue:#3fa9ff;
  --r:4px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.hidden{display:none !important}

/* grain + atmosphere */
#grain{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 500px at 75% -8%, rgba(202,255,63,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 105%, rgba(255,59,48,.07), transparent 60%),
    linear-gradient(180deg,#0c0c0e,#090909)}

/* ===== LOADER ===== */
#loader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;background:var(--bg)}
.loader-bar{width:170px;height:8px;background:#16171b;border:1px solid var(--line);overflow:hidden}
.loader-bar span{display:block;height:100%;width:40%;background:var(--lime);
  animation:load 1s infinite ease-in-out;box-shadow:0 0 16px var(--lime)}
@keyframes load{0%{margin-left:-40%}100%{margin-left:100%}}
.loader-txt{font-family:'Anton';letter-spacing:2px;color:var(--mute);font-size:13px}

/* ===== HUD ===== */
#hud{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:rgba(12,12,14,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hud-id{display:flex;align-items:center;gap:10px}
.hud-avatar{width:42px;height:42px;border:2px solid var(--lime);background:var(--steel2);
  display:grid;place-items:center;font-size:22px;border-radius:50%;overflow:hidden}
.hud-avatar img{width:100%;height:100%;object-fit:cover}
.hud-title{font-family:'Oswald';font-size:11px;letter-spacing:1.5px;color:var(--lime);text-transform:uppercase}
.hud-uname{font-family:'Anton';font-size:18px;line-height:1;letter-spacing:.5px}
.hud-res{display:flex;gap:8px}
.res-chip{background:var(--steel);border:1px solid var(--line);padding:5px 9px;border-radius:var(--r);
  text-align:right;min-width:60px}
.res-chip b{font-family:'Anton';font-size:16px;display:block;line-height:1}
.res-chip span{font-size:9px;letter-spacing:1px;color:var(--mute);text-transform:uppercase}
.res-chip.energy b{color:var(--lime)}

/* ===== SCREENS ===== */
#app{padding:14px 14px 20px;max-width:560px;margin:0 auto}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sec-title{font-family:'Anton';font-size:26px;letter-spacing:1px;margin:4px 0 14px;
  position:relative;padding-left:14px}
.sec-title::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;background:var(--lime);
  box-shadow:0 0 14px var(--lime)}

/* ===== XP BAR ===== */
.lvlbar{margin-bottom:14px}
.lvlbar-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.lvl-num{font-family:'Anton';font-size:18px;letter-spacing:1px}
.lvl-xp{font-size:11px;color:var(--mute);letter-spacing:.5px}
.xptrack{height:9px;background:#15161a;border:1px solid var(--line);overflow:hidden;position:relative}
.xptrack i{display:block;height:100%;background:linear-gradient(90deg,var(--lime-d),var(--lime));
  box-shadow:0 0 12px var(--lime);transition:width .5s cubic-bezier(.2,.8,.2,1);width:0}

/* ===== HERO ===== */
.hero{margin-bottom:14px}
.hero-stage{position:relative;height:200px;border:1px solid var(--line);overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.012) 23px 24px),
    radial-gradient(120% 90% at 50% 120%, rgba(202,255,63,.12), transparent 60%),
    var(--bg2);
  display:grid;place-items:center}
.hazard{position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(45deg,var(--amber) 0 12px,#1a1a1a 12px 24px);opacity:.85}
.hero-fig{font-size:108px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
  animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.03)}}
.hero-power{position:absolute;top:12px;right:12px;text-align:right;background:rgba(0,0,0,.35);
  border:1px solid var(--line);padding:6px 10px;border-radius:var(--r)}
.hero-power b{font-family:'Anton';font-size:30px;line-height:.9;color:var(--lime);display:block}
.hero-power span{font-size:9px;letter-spacing:2px;color:var(--mute)}
.status-flags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px}
.flag{font-size:10px;font-weight:800;letter-spacing:.5px;padding:4px 8px;border-radius:var(--r);
  text-transform:uppercase}
.flag.spit{background:rgba(255,59,48,.16);color:#ff8a82;border:1px solid rgba(255,59,48,.4)}
.flag.injury{background:rgba(255,176,32,.16);color:var(--amber);border:1px solid rgba(255,176,32,.4)}

/* ===== PANELS ===== */
.panel{background:var(--steel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:14px}
.panel-h{display:flex;align-items:center;justify-content:space-between;
  font-family:'Oswald';font-size:13px;letter-spacing:2.5px;color:var(--mute);
  text-transform:uppercase;margin-bottom:12px;padding-bottom:9px;border-bottom:1px dashed var(--line)}
.sp-badge{font-family:'Manrope';font-weight:800;font-size:11px;letter-spacing:0;color:#0c0c0e;
  background:var(--lime);padding:3px 8px;border-radius:20px;box-shadow:0 0 12px rgba(202,255,63,.5)}

/* stat rows */
.stat-row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.stat-row:last-child{margin-bottom:0}
.stat-ic{font-size:18px;width:22px;text-align:center}
.stat-meta{flex:1;min-width:0}
.stat-name{font-size:11px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;display:flex;
  justify-content:space-between;margin-bottom:3px}
.stat-name b{color:var(--ink);font-family:'Anton';font-size:15px;letter-spacing:0}
.stat-name .buff{color:var(--lime);font-size:11px}
.rebar{height:7px;background:#15161a;border:1px solid var(--line);overflow:hidden}
.rebar i{display:block;height:100%;background:linear-gradient(90deg,#5a6b16,var(--lime));transition:width .4s}
.stat-add{width:30px;height:30px;flex:0 0 30px;border:1px solid var(--lime);background:transparent;
  color:var(--lime);font-size:18px;font-weight:800;border-radius:var(--r);cursor:pointer}
.stat-add:active{background:var(--lime);color:#0c0c0e}

/* ===== EQUIP SLOTS ===== */
.slotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{aspect-ratio:1;border:1px dashed var(--line);background:var(--bg2);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
  position:relative;transition:.15s}
.slot.filled{border-style:solid}
.slot:active{transform:scale(.96)}
.slot-emoji{font-size:30px;line-height:1}
.slot-ph{font-size:24px;opacity:.25}
.slot-label{font-size:9px;letter-spacing:1px;color:var(--mute);text-transform:uppercase}
.slot-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%}

/* ===== ACTIONS ===== */
.act-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.act{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);
  background:var(--steel2);border-radius:var(--r);cursor:pointer;transition:.15s;text-align:left;
  min-width:0;overflow:hidden}
.act:active{transform:scale(.97);border-color:var(--lime)}
.act.primary{border-color:var(--lime);background:linear-gradient(135deg,rgba(202,255,63,.12),transparent)}
.act.disabled{opacity:.4;pointer-events:none}
.act-ic{font-size:24px;flex:0 0 auto}
.act-tx{min-width:0;flex:1}
.act-tx b{display:block;font-family:'Oswald';font-size:14px;letter-spacing:.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-tx span{display:block;font-size:10px;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== CARDS (inv / shop) ===== */
.cardgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.icard{border:1px solid var(--line);background:var(--steel);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column}
.icard-top{height:78px;display:grid;place-items:center;font-size:40px;position:relative;
  background:radial-gradient(80% 80% at 50% 30%,rgba(255,255,255,.05),transparent)}
.icard-rar{position:absolute;top:0;left:0;right:0;height:3px}
.icard-body{padding:9px 10px 11px}
.icard-name{font-family:'Oswald';font-size:13px;letter-spacing:.3px;line-height:1.1;margin-bottom:3px}
.icard-slot{font-size:9px;letter-spacing:1px;color:var(--mute);text-transform:uppercase}
.icard-bonus{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0}
.bchip{font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;background:#15161a;
  border:1px solid var(--line);color:var(--lime)}
.icard-desc{font-size:10px;color:var(--mute);line-height:1.35;margin-bottom:9px;min-height:26px}
.icard-btn{width:100%;padding:8px;border:none;border-radius:var(--r);font-family:'Oswald';
  font-size:12px;letter-spacing:1px;cursor:pointer;text-transform:uppercase}
.btn-buy{background:var(--lime);color:#0c0c0e}
.btn-buy:disabled{background:#2a2c33;color:var(--mute)}
.btn-equip{background:var(--steel2);color:var(--ink);border:1px solid var(--line)}
.btn-equipped{background:transparent;color:var(--lime);border:1px solid var(--lime)}
.btn-use{background:var(--blue);color:#04121f}
.qty-badge{position:absolute;bottom:4px;right:7px;font-family:'Anton';font-size:13px;color:var(--mute)}

/* shop tabs */
.shop-tabs{display:flex;gap:7px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.shop-tab{flex:0 0 auto;padding:7px 13px;border:1px solid var(--line);background:var(--steel);
  border-radius:20px;font-size:11px;letter-spacing:1px;color:var(--mute);text-transform:uppercase;
  cursor:pointer;white-space:nowrap}
.shop-tab.active{background:var(--lime);color:#0c0c0e;border-color:var(--lime);font-weight:800}

/* ===== ARENA ===== */
.arena-hint{font-size:12px;color:var(--mute);line-height:1.4;margin-bottom:14px;
  border-left:3px solid var(--amber);padding-left:10px}
.fighterlist,.ranklist{display:flex;flex-direction:column;gap:9px}
.frow{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);
  background:var(--steel);border-radius:var(--r)}
.frow-av{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--steel2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:20px}
.frow-meta{flex:1;min-width:0}
.frow-name{font-family:'Oswald';font-size:15px;letter-spacing:.3px;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow-sub{font-size:10px;color:var(--mute);letter-spacing:.4px;text-transform:uppercase}
.frow-pow{text-align:right}
.frow-pow b{font-family:'Anton';font-size:20px;color:var(--lime);line-height:.9;display:block}
.frow-pow span{font-size:8px;letter-spacing:1px;color:var(--mute)}
.fight-btn{padding:9px 14px;border:1px solid var(--red);background:rgba(255,59,48,.12);color:#ff8a82;
  border-radius:var(--r);font-family:'Oswald';font-size:12px;letter-spacing:1px;cursor:pointer}
.fight-btn:active{background:var(--red);color:#fff}
.fight-btn:disabled{opacity:.35;pointer-events:none}

/* rank */
.rrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);
  background:var(--steel);border-radius:var(--r)}
.rrow.me{border-color:var(--lime);background:linear-gradient(90deg,rgba(202,255,63,.08),transparent)}
.rrank{font-family:'Anton';font-size:20px;width:32px;text-align:center;color:var(--mute)}
.rrow:nth-child(1) .rrank{color:#ffd24a}
.rrow:nth-child(2) .rrank{color:#d4d4d4}
.rrow:nth-child(3) .rrank{color:#cd853f}

/* seg */
.seg{display:flex;background:var(--steel);border:1px solid var(--line);border-radius:var(--r);
  padding:4px;margin-bottom:14px}
.seg-btn{flex:1;padding:8px;background:transparent;border:none;color:var(--mute);font-family:'Oswald';
  font-size:12px;letter-spacing:1.5px;cursor:pointer;border-radius:3px}
.seg-btn.active{background:var(--lime);color:#0c0c0e;font-weight:700}

/* feed */
.feedlist{display:flex;flex-direction:column;gap:7px}
.feed-row{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);
  background:var(--steel);border-radius:var(--r)}
.feed-ic{font-size:18px;flex:0 0 auto}
.feed-tx{font-size:12.5px;line-height:1.35}
.feed-time{font-size:9px;color:var(--mute);margin-top:2px;letter-spacing:.5px}

.empty{text-align:center;color:var(--mute);padding:40px 0;font-size:13px}

/* ===== NAV ===== */
#nav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;background:rgba(12,12,14,.9);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.nav-b{flex:1;background:none;border:none;color:var(--mute);padding:9px 0 8px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.nav-b i{font-size:21px;font-style:normal;filter:grayscale(.6);opacity:.7;transition:.15s}
.nav-b span{font-size:9px;letter-spacing:.5px;text-transform:uppercase}
.nav-b.active{color:var(--lime)}
.nav-b.active i{filter:none;opacity:1;transform:translateY(-1px)}
.nav-b.active::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:3px;background:var(--lime);box-shadow:0 0 10px var(--lime)}

/* ===== MODAL ===== */
#modal{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade .2s}
.modal-card{width:100%;max-width:560px;background:var(--bg2);border-top:2px solid var(--lime);
  border-radius:14px 14px 0 0;max-height:88vh;overflow-y:auto;
  padding:18px 16px calc(20px + env(safe-area-inset-bottom));animation:slideup .28s cubic-bezier(.2,.9,.2,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.m-handle{width:44px;height:4px;background:var(--line);border-radius:2px;margin:0 auto 16px}
.m-title{font-family:'Anton';font-size:22px;letter-spacing:.5px;margin-bottom:4px}
.m-sub{font-size:12px;color:var(--mute);margin-bottom:16px}
.m-close{width:100%;padding:13px;margin-top:14px;background:var(--steel2);border:1px solid var(--line);
  color:var(--ink);border-radius:var(--r);font-family:'Oswald';letter-spacing:1px;cursor:pointer}

/* duel log */
.duel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.duel-side{flex:1;text-align:center}
.duel-side b{font-family:'Oswald';font-size:14px;display:block}
.duel-vs{font-family:'Anton';font-size:24px;color:var(--red)}
.hpbar{height:8px;background:#15161a;border:1px solid var(--line);margin-top:6px;overflow:hidden}
.hpbar i{display:block;height:100%;transition:width .4s}
.duel-log{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.dl{font-size:12.5px;line-height:1.35;padding:8px 10px;border-radius:var(--r);
  background:var(--steel);border:1px solid var(--line);opacity:0;animation:dlin .3s forwards}
.dl.miss{color:var(--mute)}
.dl.ko{background:rgba(255,59,48,.14);border-color:rgba(255,59,48,.4);color:#ff8a82;font-weight:700}
.dl.win{background:rgba(202,255,63,.12);border-color:var(--lime);color:var(--lime);font-weight:700;
  text-align:center;font-family:'Oswald';letter-spacing:1px}
@keyframes dlin{to{opacity:1}}
.result-banner{text-align:center;font-family:'Anton';font-size:30px;letter-spacing:1px;
  padding:14px;border-radius:var(--r);margin-bottom:14px}
.result-banner.win{color:var(--lime);background:rgba(202,255,63,.1);border:1px solid var(--lime)}
.result-banner.lose{color:var(--red);background:rgba(255,59,48,.1);border:1px solid var(--red)}

/* toast */
#toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);
  z-index:300;background:#000;border:1px solid var(--lime);color:var(--ink);padding:11px 16px;
  border-radius:var(--r);font-size:13px;max-width:90%;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.6);
  animation:toastin .25s}
#toast.err{border-color:var(--red)}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%)}}

/* level-up flash */
@keyframes flash{0%{box-shadow:0 0 0 rgba(202,255,63,0)}40%{box-shadow:0 0 40px rgba(202,255,63,.7)}100%{box-shadow:0 0 0 rgba(202,255,63,0)}}
.flashing{animation:flash .9s}

/* ===== v2 additions ===== */
.hud-avatar{cursor:pointer}
.res-chip.luck b{color:#7CFC00}
.ava-btn{position:absolute;bottom:14px;right:10px;background:rgba(0,0,0,.45);border:1px solid var(--line);
  color:var(--ink);font-size:11px;padding:5px 9px;border-radius:var(--r);cursor:pointer;letter-spacing:.5px}
.ava-btn:active{border-color:var(--lime)}
.slot-timer{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);font-size:8px;
  color:var(--amber);background:rgba(0,0,0,.5);padding:1px 5px;border-radius:8px;white-space:nowrap}
.bchip.pw{color:var(--amber);border-color:rgba(255,176,32,.4)}
.bchip.tm{color:#ff8a82;border-color:rgba(255,59,48,.35)}

/* events */
.ev-card{background:var(--steel);border:1px solid var(--line);border-left:3px solid var(--lime);
  border-radius:var(--r);padding:12px;margin-bottom:10px}
.ev-head{display:flex;justify-content:space-between;align-items:center;font-family:'Oswald';
  font-size:14px;letter-spacing:.5px;margin-bottom:9px}
.ev-head i{font-style:normal;font-size:11px;color:var(--amber)}
.ev-info{font-size:12.5px;color:var(--mute);line-height:1.5;margin-bottom:8px}
.ev-info b{color:var(--ink)}
.ev-done{font-size:12px;color:var(--lime);text-align:center;padding:6px;border:1px dashed var(--line);border-radius:var(--r)}
.ev-row{display:flex;gap:7px}
.ev-btn{flex:1;padding:11px;background:var(--steel2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r);font-family:'Oswald';font-size:14px;letter-spacing:.5px;cursor:pointer}
.ev-btn:active{border-color:var(--lime);background:rgba(202,255,63,.1)}
.ev-opts{display:flex;flex-direction:column;gap:6px}
.ev-opt{padding:11px;background:var(--steel2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r);font-size:13px;cursor:pointer;text-align:left}
.ev-opt:active{border-color:var(--lime);background:rgba(202,255,63,.1)}
.frow.pick:active{border-color:var(--lime)}

/* admin */
.adm-sec{border:1px solid var(--line);border-radius:var(--r);padding:11px;margin-bottom:11px;background:var(--steel)}
.adm-h{font-family:'Oswald';font-size:13px;letter-spacing:1px;color:var(--mute);margin-bottom:8px;text-transform:uppercase}
.adm-sel{width:100%;padding:10px;background:var(--steel2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r);font-size:13px;margin-bottom:9px;font-family:'Manrope'}
.adm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
.adm-grid label{font-size:11px;color:var(--mute);display:flex;flex-direction:column;gap:3px}
.adm-grid input,.adm-qty{background:var(--steel2);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r);padding:9px;font-family:'Anton';font-size:16px;width:100%}
.adm-qty{flex:0 0 60px;text-align:center}
.adm-events{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.adm-events .ev-btn{font-size:12px;padding:10px}
.adm-danger{border-color:rgba(255,59,48,.4)}
.adm-reset{width:100%;background:rgba(255,59,48,.14);border:1px solid var(--red);color:#ff8a82;font-weight:800}
.adm-reset:active{background:var(--red);color:#fff}

/* battle images */
.bi-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.bi-row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);
  background:var(--steel);border-radius:var(--r)}
.bi-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:6px;overflow:hidden;background:var(--steel2);
  border:1px solid var(--line);display:grid;place-items:center;font-size:22px}
.bi-thumb img{width:100%;height:100%;object-fit:cover}
.bi-meta{flex:1;min-width:0}
.bi-up{flex:0 0 auto;padding:9px 13px}

/* poker cards */
.pcards{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.pcard{display:inline-block;background:#f4f3ee;color:#111;font-weight:800;font-size:14px;
  padding:3px 8px;border-radius:5px;line-height:1.15;border:1px solid rgba(0,0,0,.15);
  font-family:'Manrope',sans-serif}