/* playbeton.com.ua — концепт D "ARCADE NEON" (геймерський стиль), префікс pb- */
:root{
  --pb-bg:#08090e; --pb-bg-2:#0c0e16; --pb-surface:#14161f; --pb-surface-2:#1c1f2b; --pb-surface-3:#272b3a;
  --pb-line:#2c3142; --pb-text:#f2f3f5; --pb-mut:#9aa0ad; --pb-dim:#6b7186;
  --pb-cy:#8a5cf6;        /* фіолет — основний CTA бренду */
  --pb-cy-strong:#6f3fd6;
  --pb-mg:#e8ff00;        /* лайм — акцент/лого бренду */
  --pb-lm:#c8dd00;        /* лайм-strong (AA-safe на темному) */
  --pb-ok:#3ad29f; --pb-no:#ff5d6c;
  --container:1180px; --rad:14px;
  --glow-cy:0 0 0 1px rgba(138,92,246,.40),0 0 22px rgba(138,92,246,.30);
  --glow-mg:0 0 0 1px rgba(232,255,0,.35),0 0 22px rgba(232,255,0,.25);
  --hud:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
    radial-gradient(900px 480px at 88% -8%,rgba(232,255,0,.08),transparent 60%),
    radial-gradient(900px 520px at 8% -4%,rgba(138,92,246,.14),transparent 60%),
    var(--pb-bg);
  color:var(--pb-text);font-family:"Exo 2",system-ui,sans-serif;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.pb-wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
.pb-skip{position:absolute;left:-999px}.pb-skip:focus{left:12px;top:12px;background:var(--pb-cy);color:#04121a;padding:.6em 1em;border-radius:8px;z-index:200}
a{color:var(--pb-cy);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:"Orbitron",sans-serif;line-height:1.12;letter-spacing:.01em}

/* ===== HEADER ===== */
.pb-header{position:sticky;top:0;z-index:90;background:rgba(8,11,20,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--pb-line)}
.pb-headrow{display:flex;align-items:center;gap:1rem;min-height:62px}
.pb-logo{display:flex;align-items:center;gap:.5rem;font-family:"Orbitron",sans-serif;font-weight:800;color:var(--pb-text);text-decoration:none;letter-spacing:.06em}
.pb-logo img{width:104px;height:auto;filter:drop-shadow(0 0 8px rgba(232,255,0,.45))}
.pb-logo span{color:var(--pb-mg);text-shadow:0 0 10px rgba(232,255,0,.6);font-size:.92rem}
.pb-nav{display:flex;gap:.2rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.pb-nav a{color:var(--pb-mut);font-size:.86rem;font-weight:600;padding:.45em .7em;border-radius:8px;text-decoration:none;letter-spacing:.02em}
.pb-nav a:hover{color:var(--pb-text);background:var(--pb-surface-2)}
.pb-nav a[aria-current=page]{color:var(--pb-mg);background:rgba(232,255,0,.08)}
.pb-lang{display:inline-flex;border:1px solid var(--pb-line);border-radius:8px;overflow:hidden;margin-left:.4rem}
.pb-lang a{padding:.4em .7em;color:var(--pb-mut);border-radius:0}
.pb-lang a[aria-current=true]{background:var(--pb-mg);color:#101400}
.pb-burger{display:none;margin-left:auto;background:var(--pb-surface-2);color:var(--pb-cy);border:1px solid var(--pb-line);border-radius:8px;font-size:1.3rem;width:44px;height:40px;cursor:pointer}

/* ===== MAIN ===== */
.pb-main{padding:30px 0 60px}.pb-article>section{margin:0 0 38px}
.pb-article h2{font-size:clamp(1.4rem,3.4vw,2rem);margin:0 0 .7rem;text-transform:uppercase;position:relative;padding-left:18px}
.pb-article h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:6px;background:linear-gradient(var(--pb-mg),var(--pb-cy));box-shadow:0 0 12px rgba(232,255,0,.5);border-radius:2px}
.pb-article h3{font-size:1.12rem;margin:1.3rem 0 .5rem;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.pb-article p{margin:0 0 1rem}
.pb-article ul,.pb-article ol{margin:0 0 1rem;padding-left:1.25rem}
.pb-article li{margin:.34rem 0}
.pb-small{font-size:.84rem;color:var(--pb-dim);line-height:1.6}

/* ===== HERO ===== */
.pb-hero{position:relative;background:linear-gradient(160deg,var(--pb-surface) 0%,var(--pb-bg-2) 100%);border:1px solid var(--pb-line);border-radius:18px;padding:34px 30px;overflow:hidden;clip-path:var(--hud)}
.pb-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(138,92,246,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(138,92,246,.06) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;mask:linear-gradient(180deg,#000,transparent 75%)}
.pb-hero::after{content:"";position:absolute;top:-30%;right:-10%;width:340px;height:340px;background:radial-gradient(circle,rgba(232,255,0,.16),transparent 65%);pointer-events:none}
.pb-hero>*{position:relative}
.pb-tag{display:inline-flex;align-items:center;gap:.5em;font-family:"Orbitron",sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pb-lm);border:1px solid rgba(232,255,0,.4);padding:.4em .85em;border-radius:999px;background:rgba(232,255,0,.06)}
.pb-hero h1{font-size:clamp(1.8rem,5vw,3rem);margin:.7rem 0 .6rem;text-transform:uppercase}
.pb-hero h1 b{color:var(--pb-mg);text-shadow:0 0 18px rgba(232,255,0,.5)}
.pb-lead{font-size:1.12rem;color:#e3e5ec;max-width:62ch;margin:0 0 1rem}

/* ===== HUD STAT TILES ===== */
.pb-hud{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin:1.3rem 0 0;list-style:none;padding:0}
.pb-hud .pb-cell{background:var(--pb-surface-2);border:1px solid var(--pb-line);clip-path:var(--hud);padding:.85rem .7rem;text-align:center}
.pb-hud dt{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pb-dim);font-family:"Orbitron",sans-serif}
.pb-hud dd{margin:.3rem 0 0;font-family:"Orbitron",sans-serif;font-weight:700;font-size:1.02rem;color:var(--pb-mg);white-space:nowrap}

/* ===== CTA ===== */
.pb-cta{display:inline-block;font-family:"Orbitron",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;padding:.85em 1.5em;border-radius:10px;text-decoration:none;cursor:pointer;border:0;transition:transform .15s,box-shadow .15s}
.pb-cta:hover{text-decoration:none;transform:translateY(-2px)}
.pb-cta--cy{background:linear-gradient(135deg,var(--pb-cy),var(--pb-cy-strong));color:#fff;box-shadow:var(--glow-cy)}
.pb-cta--mg{background:var(--pb-mg);color:#101400;box-shadow:var(--glow-mg)}
.pb-cta--lm{background:var(--pb-mg);color:#101400;box-shadow:0 0 0 1px rgba(232,255,0,.35),0 0 22px rgba(232,255,0,.25)}

/* ===== PANELS / CARDS ===== */
.pb-panel{background:var(--pb-surface);border:1px solid var(--pb-line);border-radius:var(--rad);padding:1.2rem 1.3rem;margin:0 0 1rem}
.pb-feature{background:var(--pb-surface);border:1px solid var(--pb-line);border-left:3px solid var(--pb-cy);border-radius:var(--rad);padding:1.1rem 1.2rem;margin:1rem 0}
.pb-feature h3{margin-top:0;color:var(--pb-cy)}
.pb-grid{display:grid;gap:1rem}.pb-grid-2{grid-template-columns:1fr 1fr}

/* ===== XP / LEVEL BARS (рейтинг у геймерському стилі) ===== */
.pb-xps{display:grid;gap:.7rem;margin:1rem 0}
.pb-xp{background:var(--pb-surface-2);border:1px solid var(--pb-line);border-radius:10px;padding:.7rem .9rem}
.pb-xp .pb-xprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.pb-xp .pb-xplab{font-family:"Orbitron",sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--pb-mut)}
.pb-xp .pb-xpval{font-family:"Orbitron",sans-serif;font-weight:700;color:var(--pb-lm)}
.pb-xp .pb-track{height:10px;background:#0a1124;border-radius:6px;overflow:hidden;border:1px solid var(--pb-line)}
.pb-xp .pb-fill{height:100%;background:linear-gradient(90deg,var(--pb-cy),var(--pb-mg));box-shadow:0 0 12px rgba(138,92,246,.5)}
.pb-score{font-family:"Orbitron",sans-serif;font-size:1.15rem}
.pb-score b{color:var(--pb-cy);font-size:1.7rem;text-shadow:0 0 14px rgba(138,92,246,.5)}

/* ===== BADGES / CHIPS ===== */
.pb-tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1rem 0}
.pb-tags li{font-size:.8rem;padding:.4em .8em;border-radius:999px;border:1px solid var(--pb-line);background:var(--pb-surface-2);color:var(--pb-mut);font-weight:600}
.pb-tags li[data-c=cyr]{border-color:rgba(138,92,246,.4);color:var(--pb-cy)}
.pb-tags li[data-c=lat]{border-color:rgba(232,255,0,.4);color:var(--pb-mg)}
.pb-tags li[data-c=mod]{border-color:rgba(232,255,0,.4);color:var(--pb-lm)}
.pb-tags li[data-c=err]{opacity:.7}

/* ===== TABLE (HUD) ===== */
.pb-tablewrap{overflow-x:auto;margin:1rem 0;border:1px solid var(--pb-line);border-radius:var(--rad)}
.pb-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
.pb-table th,.pb-table td{padding:.7em .85em;text-align:left;border-bottom:1px solid var(--pb-line)}
.pb-table thead th{background:var(--pb-surface-2);color:var(--pb-cy);font-family:"Orbitron",sans-serif;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.pb-table tbody tr:nth-child(even){background:rgba(24,35,61,.4)}
.pb-table td{color:#dfe2ea}

/* ===== PROVIDERS ===== */
.pb-prov{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.pb-prov span{font-size:.82rem;padding:.45em .85em;border-radius:8px;background:var(--pb-surface-2);border:1px solid var(--pb-line);color:#e3e5ec;font-weight:600}

/* ===== QUEST STEPS ===== */
.pb-steps{list-style:none;counter-reset:q;padding:0;margin:1rem 0}
.pb-steps li{position:relative;padding:.65rem .9rem .65rem 3rem;margin:.5rem 0;background:var(--pb-surface-2);border:1px solid var(--pb-line);border-radius:10px;counter-increment:q}
.pb-steps li::before{content:counter(q);position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;font-family:"Orbitron",sans-serif;font-weight:700;color:#04121a;background:linear-gradient(135deg,var(--pb-cy),var(--pb-mg));border-radius:8px;font-size:.85rem}

/* ===== PROS / CONS ===== */
.pb-procons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.pb-pros,.pb-cons{border-radius:var(--rad);padding:1rem 1.1rem;border:1px solid var(--pb-line)}
.pb-pros{background:rgba(61,220,151,.06);border-color:rgba(61,220,151,.32)}
.pb-cons{background:rgba(255,93,108,.06);border-color:rgba(255,93,108,.32)}
.pb-pros h3{color:var(--pb-ok);margin-top:0}.pb-cons h3{color:var(--pb-no);margin-top:0}
.pb-pros ul,.pb-cons ul{margin:0;padding-left:1.15rem}

/* ===== BONUS / VERDICT ===== */
.pb-bonus{text-align:center;background:linear-gradient(135deg,var(--pb-surface-2),var(--pb-bg-2));border:1px solid rgba(138,92,246,.3);border-radius:18px;padding:1.5rem;margin:1.2rem 0;clip-path:var(--hud)}
.pb-amt{font-family:"Orbitron",sans-serif;font-weight:800;font-size:clamp(1.3rem,4vw,2rem);color:var(--pb-lm);text-shadow:0 0 16px rgba(232,255,0,.4);margin-bottom:.6rem}
.pb-verdict{background:var(--pb-surface);border:1px solid var(--pb-line);border-top:3px solid var(--pb-mg);border-radius:var(--rad);padding:1.3rem}

/* ===== SHOTS ===== */
.pb-shot{margin:1.2rem 0;border:1px solid var(--pb-line);border-radius:var(--rad);overflow:hidden;background:var(--pb-surface)}
.pb-shot img{width:100%}
.pb-shot figcaption{padding:.6rem .9rem;font-size:.82rem;color:var(--pb-mut);border-top:1px solid var(--pb-line)}
.pb-shot--archive{position:relative}
.pb-shot--archive::after{content:"АРХІВ";position:absolute;top:10px;left:10px;font-family:"Orbitron",sans-serif;font-size:.66rem;letter-spacing:.1em;background:var(--pb-no);color:#fff;padding:.3em .7em;border-radius:6px}

/* ===== FAQ ===== */
.pb-faq details{border:1px solid var(--pb-line);border-radius:10px;margin:.5rem 0;background:var(--pb-surface)}
.pb-faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:700;font-family:"Orbitron",sans-serif;font-size:.92rem;color:#fff;list-style:none}
.pb-faq summary::-webkit-details-marker{display:none}
.pb-faq summary::before{content:"+ ";color:var(--pb-cy)}
.pb-faq details[open] summary::before{content:"\2212 "}
.pb-faq details>p{padding:0 1rem 1rem;margin:0;color:#e3e5ec}

/* ===== STICKY CTA ===== */
.pb-sticky{position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(8,11,20,.92);backdrop-filter:blur(10px);border-top:1px solid var(--pb-line);padding:.6rem;text-align:center}
.pb-claim{display:inline-block;font-family:"Orbitron",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;background:linear-gradient(135deg,var(--pb-lm),#e6ff5a);color:#15200a;padding:.7em 1.4em;border-radius:10px;text-decoration:none;box-shadow:0 0 22px rgba(232,255,0,.3)}
.pb-claim:hover{text-decoration:none}

/* ===== FOOTER ===== */
.pb-footer{background:var(--pb-bg-2);border-top:1px solid var(--pb-line);padding:34px 0 96px}
.pb-footergrid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:1.8rem}
.pb-footer h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pb-cy);margin:0 0 .6rem}
.pb-footer a{color:var(--pb-mut)}
.pb-disclosure{font-size:.8rem;color:var(--pb-dim);border:1px dashed var(--pb-line);border-radius:8px;padding:.6rem .8rem;margin-top:.7rem}
.pb-21{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:8px;background:var(--pb-no);color:#fff;font-family:"Orbitron",sans-serif;font-weight:700;font-size:.9rem;float:left;margin:0 .7rem .3rem 0}

/* ===== RESPONSIVE ===== */
@media(max-width:880px){
  .pb-hud{grid-template-columns:repeat(3,1fr)}
  .pb-footergrid{grid-template-columns:1fr}
  .pb-grid-2,.pb-procons{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pb-burger{display:block}
  .pb-nav{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:var(--pb-bg-2);border-bottom:1px solid var(--pb-line);padding:.7rem 20px;gap:.2rem}
  .pb-nav.open{display:flex}
  .pb-nav a{width:100%}
  .pb-lang{margin:.4rem 0 0}
}
@media(max-width:420px){
  body{font-size:16px}
  .pb-hud{grid-template-columns:repeat(2,1fr)}
  .pb-hero{padding:24px 18px}
}