/* ==========================================================================
   Qerind — global stylesheet
   Design register: synthwave horizon grid / flat neon outline
   Palette
     --q-void      #07030f   base background
     --q-deep      #120832   panel background
     --q-panel     #1a0d40   raised panel
     --q-line      #2f1a6b   structural rule
     --q-magenta   #ff2d95   primary neon outline
     --q-cyan      #19e8ff   secondary neon outline
     --q-violet    #8a5cf6   tertiary / grid lines
     --q-sun       #ffb03a   horizon arc accent
     --q-text      #ece6ff
     --q-muted     #9b90c8
   ========================================================================== */

:root{
  --q-void:#07030f;
  --q-deep:#120832;
  --q-panel:#1a0d40;
  --q-line:#2f1a6b;
  --q-magenta:#ff2d95;
  --q-cyan:#19e8ff;
  --q-violet:#8a5cf6;
  --q-sun:#ffb03a;
  --q-text:#ece6ff;
  --q-muted:#9b90c8;
  --q-display:"Chakra Petch",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --q-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --q-shell:1180px;
  --q-gut:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--q-void);
  color:var(--q-text);
  font-family:var(--q-body);
  font-size:16px;
  line-height:1.68;
  letter-spacing:.005em;
}
img{max-width:100%;display:block;}
a{color:var(--q-cyan);text-decoration:none;}
a:hover{color:var(--q-magenta);}
h1,h2,h3,h4{font-family:var(--q-display);font-weight:700;line-height:1.1;margin:0 0 .5em;letter-spacing:.01em;}
h1{font-size:clamp(2.1rem,5.4vw,3.5rem);text-transform:uppercase;}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);text-transform:uppercase;}
h3{font-size:1.16rem;text-transform:uppercase;letter-spacing:.06em;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0 0 1.15em;padding-left:1.2em;}
li{margin-bottom:.45em;}
hr{border:0;border-top:1px solid var(--q-line);margin:2.5rem 0;}
:focus-visible{outline:2px solid var(--q-cyan);outline-offset:3px;}

.q-shell{width:100%;max-width:var(--q-shell);margin:0 auto;padding:0 var(--q-gut);}
.q-eyebrow{
  font-family:var(--q-display);font-size:.74rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--q-cyan);
  margin:0 0 .9rem;
}
.q-lede{font-size:1.09rem;color:#cfc6f2;max-width:62ch;}
.q-muted{color:var(--q-muted);}
.q-center{text-align:center;}
.q-skip{position:absolute;left:-9999px;}
.q-skip:focus{left:12px;top:12px;z-index:60;background:var(--q-magenta);color:#fff;padding:.6rem 1rem;}

/* ---- signature device: receding perspective grid ------------------------- */
.q-grid-bg{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,var(--q-void) 0%,#0e0526 58%,#1a0a3d 100%);
}
.q-grid-bg::before{
  content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:46%;
  background-image:
    repeating-linear-gradient(to right,rgba(255,45,149,.50) 0 1px,transparent 1px 7.6%),
    repeating-linear-gradient(to bottom,rgba(25,232,255,.42) 0 1px,transparent 1px 11%);
  transform:perspective(320px) rotateX(70deg);
  transform-origin:bottom center;
  pointer-events:none;
}
.q-grid-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,3,15,.55) 0%,rgba(7,3,15,0) 46%,rgba(7,3,15,.35) 100%);
}
.q-grid-bg > *{position:relative;z-index:1;}

/* flat concentric horizon arcs (retro sun, drawn as strokes not blur) */
.q-sun{
  width:172px;height:86px;margin:0 0 1.6rem;
  border:2px solid var(--q-sun);border-bottom:0;
  border-radius:172px 172px 0 0;
  position:relative;
}
.q-sun::before,.q-sun::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  border:2px solid var(--q-magenta);border-bottom:0;border-radius:999px 999px 0 0;
}
.q-sun::before{width:118px;height:59px;}
.q-sun::after{width:64px;height:32px;border-color:var(--q-cyan);}
.q-center .q-sun{margin-left:auto;margin-right:auto;}

/* horizon-line divider */
.q-horizon{
  height:3px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--q-magenta) 18%,var(--q-cyan) 82%,transparent);
}

/* ---- header -------------------------------------------------------------- */
.q-head{
  position:sticky;top:0;z-index:50;
  background:rgba(7,3,15,.94);
  border-bottom:1px solid var(--q-line);
}
.q-head-in{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:16px;}
.q-brand{display:flex;align-items:center;gap:11px;font-family:var(--q-display);font-weight:700;
  font-size:1.26rem;letter-spacing:.2em;text-transform:uppercase;color:var(--q-text);}
.q-brand:hover{color:var(--q-text);}
.q-mark{
  width:30px;height:30px;flex:none;border:2px solid var(--q-magenta);
  transform:rotate(45deg);position:relative;
}
.q-mark::after{content:"";position:absolute;inset:5px;border:2px solid var(--q-cyan);}
.q-nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;}
.q-nav a{
  display:block;padding:.5rem .78rem;font-family:var(--q-display);font-size:.82rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--q-muted);
  border:1px solid transparent;
}
.q-nav a:hover{color:var(--q-text);border-color:var(--q-line);}
.q-nav a[aria-current="page"]{color:var(--q-cyan);border-color:var(--q-cyan);}
.q-burger{
  display:none;background:none;border:1px solid var(--q-line);color:var(--q-text);
  font-family:var(--q-display);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.55rem .8rem;cursor:pointer;
}
.q-burger:hover{border-color:var(--q-magenta);}

@media (max-width:900px){
  .q-burger{display:block;}
  .q-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--q-deep);border-bottom:2px solid var(--q-magenta);
    display:none;
  }
  .q-nav.is-open{display:block;}
  .q-nav ul{flex-direction:column;gap:0;padding:8px var(--q-gut) 16px;}
  .q-nav a{padding:.8rem 0;border:0;border-bottom:1px solid var(--q-line);}
  .q-nav a[aria-current="page"]{border-color:var(--q-line);}
}

/* ---- age bar ------------------------------------------------------------- */
.q-agebar{
  background:var(--q-deep);border-bottom:1px solid var(--q-line);
  font-family:var(--q-display);font-size:.73rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--q-muted);text-align:center;padding:.42rem 0;
}
.q-agebar b{color:var(--q-magenta);}

/* ---- sections ------------------------------------------------------------ */
.q-sec{padding:72px 0;}
.q-sec--tight{padding:52px 0;}
.q-sec--panel{background:var(--q-deep);border-top:1px solid var(--q-line);border-bottom:1px solid var(--q-line);}
.q-hero{padding:76px 0 88px;}
.q-hero h1{margin-bottom:.35em;}
.q-hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px;align-items:center;}
@media (max-width:980px){.q-hero-split{grid-template-columns:1fr;gap:40px;}}

/* full-bleed photo hero */
.q-hero--photo{
  position:relative;
  padding:0;
  min-height:min(72vh,640px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--q-line);
}
.q-hero--photo .q-hero-media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
  display:block;
}
.q-hero--photo .q-hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,3,15,.35) 0%,rgba(7,3,15,.55) 42%,rgba(7,3,15,.92) 100%),
    linear-gradient(90deg,rgba(7,3,15,.75) 0%,rgba(7,3,15,.25) 55%,rgba(7,3,15,.45) 100%);
}
.q-hero--photo .q-shell{
  position:relative;z-index:1;
  padding-top:72px;padding-bottom:56px;
  max-width:var(--q-shell);
}
.q-hero--photo .q-lede{color:#d8d0f4;max-width:48ch;}
.q-hero--photo h1{text-shadow:0 2px 24px rgba(0,0,0,.45);}
@media (max-width:700px){
  .q-hero--photo{min-height:min(68vh,520px);}
  .q-hero--photo .q-hero-media{object-position:28% 30%;}
}

.q-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem;}
.q-btn{
  display:inline-block;font-family:var(--q-display);font-weight:700;font-size:.9rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.84rem 1.6rem;
  border:2px solid var(--q-magenta);color:var(--q-text);background:transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.q-btn:hover{background:var(--q-magenta);color:#0a0316;}
.q-btn--cyan{border-color:var(--q-cyan);}
.q-btn--cyan:hover{background:var(--q-cyan);color:#04121a;}
.q-btn--ghost{border-color:var(--q-line);color:var(--q-muted);}
.q-btn--ghost:hover{background:transparent;border-color:var(--q-violet);color:var(--q-text);}
.q-btn[disabled]{opacity:.42;cursor:not-allowed;}
.q-btn[disabled]:hover{background:transparent;color:var(--q-text);}

/* thin neon-outline cards */
.q-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));}
.q-card{border:1px solid var(--q-line);background:var(--q-deep);padding:26px 24px;position:relative;}
.q-card::before{content:"";position:absolute;left:-1px;top:-1px;width:44px;height:3px;background:var(--q-cyan);}
.q-card--m::before{background:var(--q-magenta);}
.q-card--v::before{background:var(--q-violet);}
.q-card h3{color:var(--q-text);margin-bottom:.45em;}
.q-card p{color:var(--q-muted);font-size:.96rem;margin-bottom:0;}
.q-num{font-family:var(--q-display);font-size:.78rem;letter-spacing:.3em;color:var(--q-violet);display:block;margin-bottom:.6rem;}

.q-prose{max-width:74ch;}
.q-prose h2{margin-top:2.4rem;}
.q-prose h2:first-child{margin-top:0;}
.q-prose h3{margin-top:1.8rem;color:var(--q-cyan);}

.q-note{border-left:3px solid var(--q-magenta);background:var(--q-deep);padding:18px 22px;margin:1.6rem 0;}
.q-note p{margin-bottom:0;color:#d6cdf5;font-size:.97rem;}

.q-faq{border-top:1px solid var(--q-line);}
.q-faq > div{border-bottom:1px solid var(--q-line);padding:22px 0;}
.q-faq h3{color:var(--q-cyan);margin-bottom:.5em;}
.q-faq p{margin-bottom:0;color:var(--q-muted);}

.q-strip{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.q-strip div{border:1px solid var(--q-line);padding:18px 20px;}
.q-strip b{display:block;font-family:var(--q-display);letter-spacing:.1em;text-transform:uppercase;
  font-size:.84rem;color:var(--q-magenta);margin-bottom:.35rem;}
.q-strip span{font-size:.92rem;color:var(--q-muted);}

/* ---- game ---------------------------------------------------------------- */
.q-game{border:1px solid var(--q-violet);background:linear-gradient(180deg,#0d0526,#16093a);padding:22px;}
.q-game-top{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;
  border-bottom:1px solid var(--q-line);padding-bottom:16px;margin-bottom:18px;
}
.q-game-title{font-family:var(--q-display);font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase;color:var(--q-cyan);}
.q-meters{display:flex;gap:26px;}
.q-meter span{display:block;font-family:var(--q-display);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--q-muted);}
.q-meter strong{font-family:var(--q-display);font-size:1.5rem;color:var(--q-text);line-height:1.2;}
#q-balance{color:var(--q-cyan);}

.q-board-wrap{position:relative;width:100%;max-width:560px;margin:0 auto;}
#q-board{display:block;width:100%;height:auto;background:#09041a;border:1px solid var(--q-line);}

.q-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:18px;}
.q-stake{display:flex;align-items:center;gap:8px;border:1px solid var(--q-line);padding:.35rem .5rem;}
.q-stake span{font-family:var(--q-display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--q-muted);}
.q-stake button{
  width:32px;height:32px;background:transparent;border:1px solid var(--q-line);color:var(--q-text);
  font-family:var(--q-display);font-size:1rem;cursor:pointer;
}
.q-stake button:hover{border-color:var(--q-cyan);color:var(--q-cyan);}
.q-stake strong{font-family:var(--q-display);font-size:1.1rem;min-width:56px;text-align:center;}

.q-status{
  margin-top:16px;text-align:center;min-height:2.6em;
  font-family:var(--q-display);letter-spacing:.06em;font-size:1.02rem;color:var(--q-muted);
}
.q-status.is-win{color:var(--q-cyan);}
.q-status.is-loss{color:var(--q-magenta);}

.q-paytable{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.93rem;}
.q-paytable caption{
  font-family:var(--q-display);font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--q-cyan);text-align:left;padding-bottom:.7rem;
}
.q-paytable th,.q-paytable td{border:1px solid var(--q-line);padding:.55rem .7rem;text-align:left;}
.q-paytable th{font-family:var(--q-display);letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;color:var(--q-muted);}
.q-paytable td:last-child{font-family:var(--q-display);color:var(--q-sun);}

/* ---- footer -------------------------------------------------------------- */
.q-foot{background:var(--q-deep);border-top:2px solid var(--q-magenta);padding:52px 0 34px;margin-top:0;}
.q-foot-grid{display:grid;gap:34px;grid-template-columns:1.5fr 1fr 1fr;}
@media (max-width:760px){.q-foot-grid{grid-template-columns:1fr;gap:26px;}}
.q-foot h4{font-family:var(--q-display);font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--q-cyan);margin:0 0 .9rem;}
.q-foot p{color:var(--q-muted);font-size:.93rem;}
.q-foot ul{list-style:none;margin:0;padding:0;}
.q-foot ul a{color:var(--q-muted);font-size:.93rem;}
.q-foot ul a:hover{color:var(--q-text);}
.q-foot-legal{border-top:1px solid var(--q-line);margin-top:34px;padding-top:22px;}
.q-foot-legal p{font-size:.85rem;margin-bottom:.6rem;}
.q-badge{
  display:inline-block;border:2px solid var(--q-magenta);color:var(--q-magenta);
  font-family:var(--q-display);font-weight:700;font-size:.8rem;letter-spacing:.12em;
  padding:.28rem .62rem;margin-bottom:.9rem;
}
