/* dynamica.kz (Plinko KZ) — shared site styles, written from scratch.
   The theme stylesheet (plinko_kz/style.min.css) is not in the archive.
   Palette comes from the original theme variables in the page <head>:
   navy #051b39 background, gold links #ffd284 / #f0ad35, green CTA #0d9655 — slightly softened. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --d-bg: #051b39;
  --d-bg-2: #0a2a52;
  --d-surface: #0d2f5a;
  --d-surface-2: #123a6b;
  --d-line: rgba(255, 255, 255, .1);
  --d-text: #e6ecf5;
  --d-muted: #9fb0c8;
  --d-gold: #ffd284;
  --d-gold-2: #f0ad35;
  --d-green: #0d9655;
  --d-green-2: #0b7f49;
  --d-footer: #04122a;
  --d-radius: 14px;
  --d-container: 1140px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--d-text);
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(255, 210, 132, .08), transparent 70%),
    linear-gradient(180deg, var(--d-bg-2) 0, var(--d-bg) 520px) var(--d-bg);
  font: 400 16px/1.7 Inter, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
img.is-broken { display: none; }
a { color: var(--d-gold); text-decoration: none; transition: color .2s; }
a:hover { color: var(--d-gold-2); }
h1, h2, h3, h4 { margin: 0 0 .6em; color: #fff; font-weight: 700; line-height: 1.25; }
h1 { font-size: 38px; letter-spacing: -.5px; }
h2 { font-size: 28px; margin-top: 1.6em; }
h3 { font-size: 21px; margin-top: 1.4em; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin-bottom: .35em; }
.container { width: 100%; max-width: var(--d-container); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.plnk-header { position: sticky; top: 0; z-index: 50; background: rgba(5, 27, 57, .88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--d-line); }
.plnk-header__top-container { display: flex; align-items: center; justify-content: center; min-height: 68px; }
.plnk-header__top-left, .plnk-header__top-right { flex: 1; }
.plnk-header__top-logo { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.plnk-header__top-logo img { max-height: 44px; width: auto; }
/* logo image is missing in the archive: text logo instead */
.plnk-header__top-logo:has(img.is-broken)::before,
.plnk-header__top-logo:not(:has(img))::before {
  content: "PLINKO"; font-weight: 800; font-size: 24px; letter-spacing: 3px; color: #fff;
}
.plnk-header__top-logo:has(img.is-broken)::after,
.plnk-header__top-logo:not(:has(img))::after {
  content: "KZ"; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--d-gold); color: var(--d-bg); font-weight: 800; font-size: 14px; letter-spacing: 1px;
}

/* ---------- main: game block first, article second (as in the original theme) ---------- */
.plnk-main { flex: 1 0 auto; display: flex; flex-direction: column; padding: 32px 0 56px; }
.order1 { order: 1; }
.order2 { order: 2; }

.plnk-game { width: 100%; max-width: var(--d-container); margin: 0 auto 36px; padding: 0 20px; }
.plnk-game__inner {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 22px;
  min-height: 360px; padding: 32px 24px;
  border: 1px solid var(--d-line); border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 210, 132, .18), transparent 55%),
    linear-gradient(160deg, var(--d-surface-2), var(--d-surface) 55%, #0a2547);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
/* drawn Plinko board: pegs pattern that narrows towards the top */
.plnk-game__demo-wrap {
  position: absolute; inset: 24px 24px 110px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .55) 0 3px, transparent 4px);
  background-size: 34px 30px;
  background-position: center top;
  -webkit-mask: conic-gradient(from 150deg at 50% 0, #000 60deg, transparent 0);
  mask: conic-gradient(from 150deg at 50% 0, #000 60deg, transparent 0);
  opacity: .7;
  pointer-events: none;
}
.plnk-game__demo-wrap:not(:empty) { position: relative; inset: auto; width: 100%; min-height: 420px; background: none; -webkit-mask: none; mask: none; opacity: 1; pointer-events: auto; }
.plnk-game__demo-wrap iframe { display: block; width: 100%; min-height: 420px; border: 0; border-radius: var(--d-radius); }
.plnk-game__btns { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  font: 600 16px/1 Inter, Arial, sans-serif; cursor: pointer;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 34px; height: auto; opacity: .55; }
.button--big-green { background: var(--d-green); color: #fff; box-shadow: 0 10px 24px rgba(13, 150, 85, .35); }
.button--big-green:hover { background: var(--d-green-2); }
.button--play-demo { background: transparent; color: var(--d-gold); box-shadow: inset 0 0 0 2px var(--d-gold); }
.button--play-demo:hover { background: rgba(255, 210, 132, .1); }
.ajax-loader { display: none; }
.ajax-loader.is-active { display: block; }

/* ---------- article ---------- */
.content-article {
  padding: 40px 44px;
  border: 1px solid var(--d-line); border-radius: 22px;
  background: rgba(13, 47, 90, .55);
}
.text-block > :first-child { margin-top: 0; }
.text-block strong { color: #fff; }
.text-block img.aligncenter { display: block; margin: 8px auto 24px; border-radius: var(--d-radius); }
.text-block p:has(> img.is-broken:only-child) { display: none; }

/* tables */
.table-wrapper { margin: 0 0 28px; overflow-x: auto; border: 1px solid var(--d-line); border-radius: var(--d-radius); -webkit-overflow-scrolling: touch; }
.table-wrapper table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.table-wrapper th { padding: 14px 16px; background: var(--d-surface-2); color: var(--d-gold); font-weight: 600; text-align: left; }
.table-wrapper thead tr:only-child th:only-child { text-align: center; }
.table-wrapper td { padding: 12px 16px; border-top: 1px solid var(--d-line); vertical-align: top; }
.table-wrapper tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
.table-wrapper tbody tr:hover td { background: rgba(255, 210, 132, .06); }
.table-wrapper td:first-child { color: #fff; font-weight: 500; white-space: nowrap; }

/* table of contents (pl page) */
#ez-toc-container { margin: 0 0 28px; padding: 20px 24px; border: 1px solid var(--d-line); border-radius: var(--d-radius); background: rgba(5, 27, 57, .6); }
#ez-toc-container .ez-toc-title-container { display: none; }
#ez-toc-container nav > ul::before { content: "≡"; display: block; margin-bottom: 8px; color: var(--d-gold); font-size: 20px; line-height: 1; }
.ez-toc-list, .ez-toc-list ul { margin: 0; padding: 0; list-style: none; }
.ez-toc-list ul { padding-left: 18px; }
.ez-toc-list li { margin: 0; }
.ez-toc-link { display: block; padding: 5px 0; color: var(--d-text); font-size: 15px; }
.ez-toc-link:hover { color: var(--d-gold); }
.ez-toc-heading-level-3 > .ez-toc-link { color: var(--d-muted); font-size: 14px; }

.comments:empty { display: none; }

/* ---------- footer ---------- */
.plnk-footer { background: var(--d-footer); border-top: 1px solid var(--d-line); color: var(--d-muted); font-size: 14px; }
.plnk-footer > .container { padding-top: 28px; padding-bottom: 20px; }
.plnk-footer-lang-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.plnk-footer-lang-list__item { margin: 0; }
.plnk-footer-lang-list__item a,
.plnk-footer-lang-list__item.current-lang { display: inline-block; min-width: 44px; padding: 6px 10px; border: 1px solid var(--d-line); border-radius: 8px; color: var(--d-text); font-weight: 600; font-size: 13px; text-align: center; }
.plnk-footer-lang-list__item a:hover { border-color: var(--d-gold); color: var(--d-gold); }
.plnk-footer-lang-list__item.current-lang { border-color: var(--d-gold); background: var(--d-gold); color: var(--d-bg); }
.plnk-footer__disclaimer { text-align: center; }
.plnk-footer__copyrights { padding: 14px 0; border-top: 1px solid var(--d-line); text-align: center; font-size: 13px; }

/* ---------- to top button, popup ---------- */
.to_top_btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--d-gold); cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s;
}
.to_top_btn::before { content: ""; position: absolute; left: 50%; top: 52%; width: 12px; height: 12px; margin: -4px 0 0 -6px; border-top: 3px solid var(--d-bg); border-left: 3px solid var(--d-bg); transform: rotate(45deg); }
.to_top_btn.is-visible { opacity: 1; visibility: visible; transform: none; }
.popup, .popup-overflow { display: none; }
.popup.is-open { display: block; position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 80; width: min(92vw, 520px); padding: 24px; border-radius: var(--d-radius); background: var(--d-surface); }
.popup-overflow.is-open { display: block; position: fixed; inset: 0; z-index: 79; background: rgba(0, 0, 0, .6); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  h1 { font-size: 32px; }
  .content-article { padding: 32px 28px; }
}
@media (max-width: 767px) {
  body { font-size: 15px; }
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  .plnk-main { padding: 20px 0 40px; }
  .plnk-game { margin-bottom: 24px; padding: 0 12px; }
  .plnk-game__inner { min-height: 300px; padding: 24px 16px; border-radius: 18px; }
  .plnk-game__demo-wrap { inset: 16px 16px 150px; background-size: 26px 24px; }
  .plnk-game__btns { flex-direction: column; width: 100%; }
  .button { width: 100%; }
  .container { padding: 0 12px; }
  .content-article { padding: 22px 16px; border-radius: 18px; }
  .table-wrapper table { font-size: 14px; }
  .table-wrapper th, .table-wrapper td { padding: 10px 12px; }
  .table-wrapper td:first-child { white-space: normal; }
}