/* 7k4129u.buzz — 7К Казино. Концепция «неоновый квартал»: ночной асфальт + циан + коралл. prefix .arc- */

:root {
  --bg: #0a0c12;
  --bg2: #101623;
  --bg3: #0d121c;
  --ln: #1e2a3d;
  --ln2: #2c3d57;
  --tx: #e9f1fb;
  --td: #9dadc4;
  --tdd: #64748f;
  --cy: #22d3ee;
  --co: #ff7a5c;
  --lm: #bef264;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  font: 16px/1.68 "Commissioner", ui-sans-serif, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--tx);
  background:
    radial-gradient(760px 460px at 12% -6%, rgba(34, 211, 238, .16), transparent 62%),
    radial-gradient(680px 480px at 96% 30%, rgba(255, 122, 92, .12), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Tektur", "Commissioner", system-ui, sans-serif; font-weight: 600; line-height: 1.18; margin: 0 0 14px }
p { margin: 0 0 14px }
a { color: var(--cy); text-decoration: none }
a:hover { text-decoration: underline }
ul { margin: 0 0 14px; padding-left: 18px }
li { margin-bottom: 7px }

.arc-skip { position: absolute; top: -44px; left: 10px; background: var(--cy); color: #04212a; padding: 9px 14px; border-radius: 30px; z-index: 99 }
.arc-skip:focus { top: 10px }
.arc-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px }

/* header */
.arc-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 12px 22px; background: rgba(10, 12, 18, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ln) }
.arc-logo { display: flex; align-items: center; gap: 10px; color: var(--tx) }
.arc-logo:hover { text-decoration: none }
.arc-logo svg { width: 36px; height: 36px }
.arc-logo__n { font-family: "Tektur", sans-serif; font-size: 18px; font-weight: 600; line-height: 1 }
.arc-logo__u { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--tdd); margin-top: 4px }
.arc-menu { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap }
.arc-menu a { font-size: 14px; color: var(--td) }
.arc-menu a:hover { color: var(--cy); text-decoration: none }

/* buttons — pill */
.arc-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 12px 22px; font-family: "Tektur", sans-serif; font-size: 14px; border: 1px solid transparent; transition: transform .15s, box-shadow .2s }
.arc-btn:hover { text-decoration: none; transform: translateY(-1px) }
.arc-btn--go { background: linear-gradient(100deg, var(--cy), var(--lm)); color: #06222a; font-weight: 600; box-shadow: 0 10px 26px -12px rgba(34, 211, 238, .9) }
.arc-btn--out { border-color: var(--ln2); color: var(--tx) }
.arc-btn--out:hover { border-color: var(--co); color: var(--co) }
.arc-btn--s { padding: 9px 17px; font-size: 13px; background: var(--bg2); border-color: var(--ln2); color: var(--tx) }
.arc-btn--l { padding: 15px 30px; font-size: 15px }

/* neon ticker rail */
.arc-rail { display: flex; overflow-x: auto; border-bottom: 1px solid var(--ln); background: rgba(34, 211, 238, .05) }
.arc-rail__i { flex: 1 0 auto; min-width: 176px; padding: 12px 20px; border-right: 1px solid var(--ln) }
.arc-rail__v { display: block; font-family: "Tektur", sans-serif; font-size: 16px; color: var(--co) }
.arc-rail__k { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--tdd) }

/* hero */
.arc-hero { padding: 50px 0 56px; border-bottom: 1px solid var(--ln) }
.arc-hero__g { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start }
.arc-hero h1 { font-size: clamp(26px, 4vw, 43px) }
.arc-hero__tag { display: inline-block; border: 1px solid var(--ln2); border-radius: 999px; padding: 5px 14px; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--td); margin-bottom: 16px }
.arc-hero__p { color: var(--td); font-size: 17px; max-width: 62ch }
.arc-hero__row { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 26px }
.arc-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
.arc-kpi__c { background: var(--bg3); border: 1px solid var(--ln); border-radius: 16px; padding: 14px 16px }
.arc-kpi__v { font-family: "Tektur", sans-serif; font-size: 19px; color: var(--cy) }
.arc-kpi__k { display: block; margin-top: 4px; font-size: 12.5px; color: var(--tdd) }

.arc-quick { background: linear-gradient(170deg, var(--bg2), var(--bg3)); border: 1px solid var(--ln2); border-radius: 22px; padding: 20px }
.arc-quick__h { font-family: "Tektur", sans-serif; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tdd); margin-bottom: 14px }
.arc-quick a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(34, 211, 238, .07); color: var(--tx); margin-bottom: 9px }
.arc-quick a:hover { background: rgba(34, 211, 238, .16); text-decoration: none }
.arc-q__t { font-weight: 600; font-size: 14.5px }
.arc-quick span { display: block; font-size: 12.5px; color: var(--tdd); margin-top: 2px }

/* sections */
.arc-s { padding: 58px 0; border-bottom: 1px solid var(--ln) }
.arc-s__n { font-family: "Tektur", sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--co); margin: 0 0 10px }
.arc-s h2 { font-size: clamp(22px, 2.9vw, 31px); max-width: 27ch }
.arc-lead { color: var(--td); max-width: 80ch; font-size: 16.5px }
.arc-fine { color: var(--tdd); font-size: 14px; max-width: 78ch }
.arc-hi { color: var(--lm) }

/* deposit rail */
.arc-dep { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px }
.arc-dep__c { border: 1px solid var(--ln); border-radius: 20px; background: var(--bg3); padding: 20px }
.arc-dep__c h3 { font-size: 14.5px; color: var(--cy) }
.arc-dep__s { font-family: "Tektur", sans-serif; font-size: 23px; margin-bottom: 4px }
.arc-dep__f { color: var(--co); font-size: 14px; margin-bottom: 10px }
.arc-dep__c p { font-size: 14px; color: var(--td); margin: 0 }
.arc-terms { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ln) }
.arc-terms div { font-size: 13px; color: var(--tdd) }
.arc-terms span { display: block; font-family: "Tektur", sans-serif; font-size: 16px; color: var(--tx); margin-top: 3px }

/* game cards */
.arc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px }
.arc-card { border: 1px solid var(--ln); border-radius: 18px; background: var(--bg3); padding: 15px }
.arc-card h3 { font-size: 14.5px; margin-bottom: 4px }
.arc-card__p { font-size: 12.5px; color: var(--cy); margin: 0 0 8px }
.arc-card__t { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px }
.arc-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ln2); color: var(--tdd) }
.arc-tag--r { color: var(--lm); border-color: rgba(190, 242, 100, .4) }
.arc-card p { font-size: 13.5px; color: var(--td); margin: 0 }

/* crash strip */
.arc-crash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px }
.arc-crash__c { border-radius: 18px; padding: 18px; background: linear-gradient(150deg, rgba(255, 122, 92, .12), rgba(34, 211, 238, .06)); border: 1px solid var(--ln) }
.arc-crash__c h3 { font-size: 15px }
.arc-crash__c p { font-size: 14px; color: var(--td); margin: 0 }

/* vip */
.arc-vip { margin-top: 24px; display: grid; gap: 10px }
.arc-vip__r { display: grid; grid-template-columns: 140px 150px 110px 1fr; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid var(--ln); border-radius: 16px; background: var(--bg3); font-size: 14px; color: var(--td) }
.arc-vip__l { font-family: "Tektur", sans-serif; color: var(--tx) }
.arc-vip__c { color: var(--co); font-weight: 600 }

/* two-box */
.arc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px }
.arc-box { border: 1px solid var(--ln); border-radius: 20px; background: var(--bg3); padding: 20px }
.arc-box h3 { font-size: 15.5px }
.arc-box p { font-size: 14.5px; color: var(--td) }
.arc-pot { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px }
.arc-pot div { font-size: 12.5px; color: var(--tdd) }
.arc-pot span { display: block; font-family: "Tektur", sans-serif; font-size: 20px; color: var(--lm); margin-top: 3px }
.arc-list { display: grid; gap: 9px; margin-top: 14px }
.arc-list div { font-size: 13.5px; color: var(--td); padding-left: 13px; border-left: 2px solid var(--cy) }
.arc-l__t { display: block; color: var(--tx); font-weight: 500 }

/* table */
.arc-tab { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14.5px }
.arc-tab th { text-align: left; font-family: "Tektur", sans-serif; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tdd); padding: 11px 13px; border-bottom: 1px solid var(--ln2) }
.arc-tab td { padding: 12px 13px; border-bottom: 1px solid var(--ln); color: var(--td) }
.arc-tab td:first-child { color: var(--tx) }

/* reviews */
.arc-rev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px }
.arc-rev__c { border: 1px solid var(--ln); border-radius: 20px; background: var(--bg3); padding: 18px; display: flex; flex-direction: column; gap: 9px }
.arc-rev__s { color: var(--co); letter-spacing: 2px; font-size: 14px }
.arc-rev__c p { font-size: 14.5px; color: var(--td); margin: 0 }
.arc-rev__w { font-size: 12.5px; color: var(--tdd); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ln) }

/* trust */
.arc-tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px }
.arc-tr__c { border-radius: 18px; padding: 18px; background: var(--bg3); border: 1px solid var(--ln) }
.arc-tr__c h3 { font-size: 15px }
.arc-tr__c p { font-size: 14px; color: var(--td); margin: 0 }

/* cta band */
.arc-band { padding: 44px 0; border-bottom: 1px solid var(--ln); background: linear-gradient(100deg, rgba(34, 211, 238, .14), rgba(255, 122, 92, .1)) }
.arc-band__i { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap }
.arc-band p { font-family: "Tektur", sans-serif; font-size: clamp(18px, 2.3vw, 24px); margin: 0; max-width: 32ch }

/* faq */
.arc-faq { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.arc-faq details { border: 1px solid var(--ln); border-radius: 16px; background: var(--bg3); padding: 14px 16px }
.arc-faq summary { cursor: pointer; font-family: "Tektur", sans-serif; font-size: 14.5px; list-style: none }
.arc-faq summary::-webkit-details-marker { display: none }
.arc-faq summary::after { content: " +"; color: var(--cy) }
.arc-faq details[open] summary::after { content: " \2212"; color: var(--co) }
.arc-faq p { margin: 10px 0 0; font-size: 14.5px; color: var(--td) }

/* author + footer */
.arc-auth { padding: 44px 0; border-bottom: 1px solid var(--ln) }
.arc-auth p { color: var(--td); font-size: 14.5px; max-width: 90ch }
.arc-foot { padding: 38px 0 54px; font-size: 13.5px; color: var(--tdd) }
.arc-foot__g { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; margin-bottom: 24px }
.arc-foot h4 { font-family: "Tektur", sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--td); margin-bottom: 10px }
.arc-foot ul { list-style: none; padding: 0 }
.arc-foot a { color: var(--td) }
.arc-age { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--co); color: var(--co); font-family: "Tektur", sans-serif; font-size: 13px; margin-bottom: 10px }
.arc-foot__law { border-top: 1px solid var(--ln); padding-top: 18px; line-height: 1.7 }

@media (max-width: 1000px) {
  .arc-hero__g, .arc-duo { grid-template-columns: 1fr }
  .arc-cards { grid-template-columns: repeat(2, 1fr) }
  .arc-dep, .arc-rev, .arc-tr, .arc-crash, .arc-faq { grid-template-columns: 1fr }
  .arc-foot__g { grid-template-columns: 1fr }
  .arc-vip__r { grid-template-columns: 1fr 1fr; gap: 8px }
}
@media (max-width: 600px) {
  .arc-top { flex-wrap: wrap; padding: 10px 14px }
  .arc-menu { width: 100%; order: 3; margin-left: 0; gap: 13px }
  .arc-wrap { padding: 0 14px }
  .arc-kpi { grid-template-columns: repeat(2, 1fr) }
  .arc-cards { grid-template-columns: 1fr }
  .arc-s { padding: 42px 0 }
  .arc-btn--s { padding: 11px 18px }
  .arc-tab { font-size: 13.5px }
  .arc-tab th, .arc-tab td { padding: 9px 7px }
}

/* мобильный скролл широких таблиц вместо горизонтального скролла страницы */
@media (max-width: 600px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }
}