/* 7k7k21.casino — Admiral palette · Nunito + Source Sans 3 · prefix .qrn- */

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:    #141414;
  --bg2:   #1e1e1e;
  --bg3:   #282828;
  --line:  #333333;
  --acc:   #dc2626;
  --acc-l: #f87171;
  --hot:   #f59e0b;
  --txt:   #f1f5f9;
  --txt-d: #94a3b8;
  --r: .75rem;
  --r2: 1.25rem;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  min-height: 100vh;
}

a { color: var(--acc-l); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--hot); }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: 'Nunito', Georgia, serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--txt);
}

h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1rem, 2.5vw, 1.3rem); }

p { color: var(--txt-d); }

/* ===== SKIP LINK ===== */
.qrn-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--acc); color: #fff; padding: .5rem 1rem;
  border-radius: 0 0 var(--r) var(--r); font-size: .9rem;
  z-index: 1000;
}
.qrn-skip:focus { left: 1rem; }

/* ===== HEADER ===== */
.qrn-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: .75rem 1.5rem;
}

.qrn-logo {
  display: flex; align-items: center; gap: .6rem;
  color: var(--txt); text-decoration: none;
  flex-shrink: 0;
}
.qrn-logo:hover { text-decoration: none; }
.qrn-logo__svg { width: 40px; height: 40px; }
.qrn-logo__t {
  font-family: 'Nunito', Georgia, serif;
  font-weight: 800; font-size: 1.1rem; line-height: 1.1;
}
.qrn-logo__sub {
  display: block; font-size: .65rem; font-weight: 400;
  color: var(--txt-d); font-family: 'Source Sans 3', sans-serif;
}

.qrn-nav {
  display: flex; gap: 1.25rem; flex: 1; justify-content: center;
  flex-wrap: wrap;
}
.qrn-nav a {
  color: var(--txt-d); font-size: .9rem; transition: color .2s;
}
.qrn-nav a:hover { color: var(--txt); text-decoration: none; }

/* ===== CTA BUTTONS ===== */
.qrn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); font-weight: 600; cursor: pointer;
  transition: opacity .2s, transform .15s; text-decoration: none;
  border: none; font-family: 'Nunito', Georgia, serif;
}
.qrn-cta:hover { opacity: .88; text-decoration: none; transform: translateY(-1px); }

.qrn-cta--small { padding: .45rem 1rem; font-size: .85rem; background: var(--acc); color: #fff; }
.qrn-cta--big   { padding: .75rem 1.75rem; font-size: 1rem; }
.qrn-cta--sm    { padding: .35rem .85rem; font-size: .8rem; background: var(--bg3); color: var(--txt-d); border: 1px solid var(--line); }
.qrn-cta--hot   { background: var(--hot); color: #141414; font-weight: 800; }
.qrn-cta--ghost { background: transparent; color: var(--acc-l); border: 1px solid var(--acc); }

/* ===== TICKER / METR ===== */
.qrn-metr {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  background: var(--bg2); border-bottom: 1px solid var(--line);
}
.qrn-metr__cell {
  display: flex; flex-direction: column; align-items: center;
  padding: .75rem 1.5rem; border-right: 1px solid var(--line);
  min-width: 120px;
}
.qrn-metr__cell:last-child { border-right: none; }
.qrn-metr__num { font-family: 'Nunito', Georgia, serif; font-size: 1.15rem; font-weight: 800; color: var(--hot); }
.qrn-metr__lbl { font-size: .72rem; color: var(--txt-d); text-align: center; }

/* ===== HERO ===== */
.qrn-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
  padding: 4rem 1.5rem; max-width: 1200px; margin: 0 auto;
}

.qrn-hero__chip {
  display: inline-block; font-size: .78rem; color: var(--acc-l);
  background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.25);
  border-radius: 2rem; padding: .3rem .9rem; margin-bottom: 1rem;
}

.qrn-hero h1 { margin-bottom: 1.25rem; }
.qrn-hero__sub { color: var(--txt-d); margin-bottom: 2rem; font-size: 1.05rem; }

.qrn-hero__btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }

.qrn-kpi {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.qrn-kpi__item { display: flex; flex-direction: column; }
.qrn-kpi__num { font-family: 'Nunito', Georgia, serif; font-size: 1.6rem; font-weight: 800; color: var(--acc); }
.qrn-kpi__lbl { font-size: .78rem; color: var(--txt-d); }

.qrn-hero__pic { display: flex; align-items: center; justify-content: center; }
.qrn-hero__pic-svg { width: 100%; max-width: 500px; border-radius: var(--r2); }

/* ===== SECTION COMMON ===== */
.qrn-ovrline {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--acc-l); margin-bottom: .4rem; font-family: 'Source Sans 3', sans-serif; font-weight: 600;
}

.qrn-sec__sub { color: var(--txt-d); margin-bottom: 2rem; }

section { padding: 3.5rem 1.5rem; max-width: 1200px; margin: 0 auto; }

/* ===== WELCOME ===== */
.qrn-welcome { text-align: center; }
.qrn-welcome h2 { margin-bottom: .5rem; }
.qrn-welcome .qrn-sec__sub { margin-bottom: 2.5rem; }
.qrn-bonus-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.qrn-bcard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.75rem 1.25rem; text-align: center;
  transition: border-color .2s;
}
.qrn-bcard:hover { border-color: var(--acc); }
.qrn-bcard__idx { font-size: .78rem; color: var(--txt-d); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.qrn-bcard__val { font-family: 'Nunito', Georgia, serif; font-size: 2.4rem; font-weight: 800; color: var(--hot); margin-bottom: .25rem; }
.qrn-bcard__cap { font-size: 1rem; color: var(--txt); margin-bottom: .75rem; }
.qrn-bcard__slot { font-size: .8rem; color: var(--txt-d); }

/* ===== STEPS ===== */
.qrn-steps h2 { margin-bottom: 2rem; }
.qrn-steps__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.qrn-step {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.75rem;
}
.qrn-step__n {
  display: block; font-family: 'Nunito', Georgia, serif; font-size: 2rem; font-weight: 800;
  color: var(--acc); margin-bottom: .5rem;
}
.qrn-step__t { font-size: 1.1rem; margin-bottom: .6rem; color: var(--txt); }
.qrn-step p { font-size: .9rem; }

/* ===== SLOTS ===== */
.qrn-slots h2 { margin-bottom: .5rem; }
.qrn-slots > .qrn-sec__sub { margin-bottom: 2rem; }
.qrn-slots__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 2rem;
}

.qrn-scard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem;
  transition: border-color .2s;
}
.qrn-scard:hover { border-color: var(--acc); }
.qrn-scard__badge {
  display: inline-block; font-size: .7rem; font-weight: 600;
  background: rgba(220,38,38,.15); color: var(--acc-l);
  border-radius: .25rem; padding: .15rem .5rem; align-self: flex-start;
}
.qrn-scard__t { font-size: .95rem; color: var(--txt); font-family: 'Nunito', Georgia, serif; font-weight: 700; }
.qrn-scard__prov { font-size: .8rem; color: var(--txt-d); }
.qrn-scard__rtp { font-size: .8rem; color: var(--hot); font-weight: 600; }

/* ===== LOYALTY ===== */
.qrn-loyalty h2 { margin-bottom: .5rem; }
.qrn-loyalty .qrn-sec__sub { margin-bottom: 2rem; }
.qrn-loyalty__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem;
}

.qrn-lvbox {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.25rem .75rem; text-align: center;
}
.qrn-lvbox--hot { border-color: var(--acc); background: rgba(220,38,38,.08); }
.qrn-lvbox--peak { border-color: var(--hot); background: rgba(245,158,11,.08); }
.qrn-lvbox__t { font-family: 'Nunito', Georgia, serif; font-weight: 700; font-size: .95rem; color: var(--txt); margin-bottom: .4rem; }
.qrn-lvbox__cash { font-family: 'Nunito', Georgia, serif; font-size: 1.7rem; font-weight: 800; color: var(--hot); }
.qrn-lvbox__thr { font-size: .72rem; color: var(--txt-d); margin-top: .25rem; }

/* ===== TOURNAMENT ===== */
.qrn-tour {
  background: var(--bg2); border-radius: var(--r2); border: 1px solid var(--line);
}
.qrn-tour h2 { margin-bottom: 1rem; }
.qrn-tour__body p { margin-bottom: 1.5rem; }
.qrn-tour__stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem;
}
.qrn-tour__stat { display: flex; flex-direction: column; }
.qrn-tour__n { font-family: 'Nunito', Georgia, serif; font-size: 1.5rem; font-weight: 800; color: var(--hot); }
.qrn-tour__l { font-size: .78rem; color: var(--txt-d); }

/* ===== LIVE ===== */
.qrn-live h2 { margin-bottom: .5rem; }
.qrn-live .qrn-sec__sub { margin-bottom: 2rem; }
.qrn-live__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}

.qrn-lcard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem;
  transition: border-color .2s;
}
.qrn-lcard:hover { border-color: var(--acc); }
.qrn-lcard__badge {
  display: inline-block; font-size: .7rem; font-weight: 600;
  background: rgba(245,158,11,.15); color: var(--hot);
  border-radius: .25rem; padding: .15rem .5rem; align-self: flex-start;
}
.qrn-lcard__t { font-size: 1rem; color: var(--txt); font-family: 'Nunito', Georgia, serif; font-weight: 700; }
.qrn-lcard__prov { font-size: .8rem; color: var(--txt-d); }

/* ===== BRAND OVERVIEW ===== */
.qrn-brand { }
.qrn-brand h2 { margin-bottom: 2rem; }
.qrn-brand__block {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.75rem 2rem; margin-bottom: 1.25rem;
}
.qrn-brand__block h3 { margin-bottom: .75rem; color: var(--txt); }
.qrn-brand__block p { margin-bottom: .85rem; font-size: .95rem; }
.qrn-brand__block p:last-child { margin-bottom: 0; }
.qrn-brand__block a { color: var(--acc-l); }
.qrn-brand__block a:hover { color: var(--hot); }

/* ===== REVIEWS ===== */
.qrn-reviews h2 { margin-bottom: 2rem; }
.qrn-reviews__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.qrn-rcard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.5rem;
}
.qrn-rcard__author { font-family: 'Nunito', Georgia, serif; font-weight: 700; color: var(--txt); font-size: .95rem; }
.qrn-rcard__date { font-size: .78rem; color: var(--txt-d); margin-bottom: .75rem; }
.qrn-rcard__text { font-size: .9rem; color: var(--txt-d); }

/* ===== CASHIER ===== */
.qrn-cashier h2 { margin-bottom: 2rem; }
.qrn-cashier__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.qrn-pcard {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem; text-align: center;
}
.qrn-pcard__name { font-family: 'Nunito', Georgia, serif; font-weight: 700; color: var(--txt); font-size: 1.05rem; margin-bottom: .25rem; }
.qrn-pcard__time { color: var(--hot); font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }
.qrn-pcard__note { font-size: .8rem; color: var(--txt-d); }

/* ===== PRE-FOOTER CTA ===== */
.qrn-final {
  text-align: center; background: var(--bg2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 3.5rem 1.5rem;
}
.qrn-final h2 { margin-bottom: .75rem; }
.qrn-final p { margin-bottom: 2rem; }

/* ===== FAQ ===== */
.qrn-faq h2 { margin-bottom: 2rem; }
.qrn-faq__list { display: flex; flex-direction: column; gap: .5rem; }

.qrn-faq__item {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.qrn-faq__item summary {
  padding: 1rem 1.25rem; cursor: pointer; font-weight: 600;
  font-family: 'Nunito', Georgia, serif; font-size: 1rem;
  color: var(--txt); list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.qrn-faq__item summary::-webkit-details-marker { display: none; }
.qrn-faq__item summary::after {
  content: '+'; color: var(--acc); font-size: 1.2rem; flex-shrink: 0;
  font-family: monospace;
}
.qrn-faq__item[open] summary::after { content: '–'; }
.qrn-faq__item[open] { border-color: var(--acc); }
.qrn-faq__item p {
  padding: 0 1.25rem 1rem; font-size: .9rem; color: var(--txt-d);
}

/* ===== AUTHOR NOTE ===== */
.qrn-author {
  max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem;
  border-top: 1px solid var(--line);
}
.qrn-author__note { font-size: .82rem; color: var(--txt-d); margin-bottom: .5rem; }
.qrn-author__18 { font-size: .78rem; color: var(--txt-d); opacity: .7; }

/* ===== FOOTER ===== */
.qrn-foot {
  background: var(--bg2); border-top: 1px solid var(--line);
  padding: 2rem 1.5rem; text-align: center;
}
.qrn-foot__inner { max-width: 1200px; margin: 0 auto; }
.qrn-foot__brand { font-family: 'Nunito', Georgia, serif; font-weight: 700; color: var(--txt); margin-bottom: .4rem; }
.qrn-foot__legal { font-size: .8rem; color: var(--txt-d); margin-bottom: .4rem; }
.qrn-foot__links { font-size: .78rem; }
.qrn-foot__links a { color: var(--txt-d); }
.qrn-foot__links a:hover { color: var(--acc-l); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .qrn-loyalty__grid { grid-template-columns: repeat(3, 1fr); }
  .qrn-slots__grid { grid-template-columns: repeat(3, 1fr); }
  .qrn-hero { grid-template-columns: 1fr; }
  .qrn-hero__pic { display: none; }
}

@media (max-width: 768px) {
  .qrn-bonus-grid { grid-template-columns: 1fr; }
  .qrn-steps__grid { grid-template-columns: 1fr; }
  .qrn-slots__grid { grid-template-columns: repeat(2, 1fr); }
  .qrn-loyalty__grid { grid-template-columns: repeat(2, 1fr); }
  .qrn-live__grid { grid-template-columns: repeat(2, 1fr); }
  .qrn-reviews__grid { grid-template-columns: 1fr; }
  .qrn-cashier__grid { grid-template-columns: repeat(2, 1fr); }
  .qrn-nav { display: none; }
  .qrn-bar { justify-content: space-between; }
}

@media (max-width: 480px) {
  .qrn-slots__grid { grid-template-columns: 1fr; }
  .qrn-live__grid { grid-template-columns: 1fr; }
  .qrn-cashier__grid { grid-template-columns: 1fr; }
  .qrn-loyalty__grid { grid-template-columns: repeat(2, 1fr); }
  .qrn-metr { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .qrn-metr__cell { min-width: 110px; }
}