/* =============================================================================
   LOTOYA NETEWEYÎ — Dijital Kurdistan şans oyunları kurumu
   Full clickable app. Deep-navy + gold (zer) + Newroz flame.
   Ported from the Claude Design handoff (Loto.dc.html) into a vanilla SPA.
   Most layout styles are inline in index.html (faithful to the mockup); this
   file holds globals, animations, view-routing and :hover behaviours.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;700&display=swap');

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;background:#05070F}
body{margin:0;background:#05070F;color:#C7CFE6;font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100vw}
::selection{background:#F4B41A;color:#1a1200}
body::-webkit-scrollbar{width:11px;height:11px}
body::-webkit-scrollbar-track{background:#070A14}
body::-webkit-scrollbar-thumb{background:#232B4A;border-radius:6px;border:2px solid #070A14}
button{font-family:inherit;border:none;cursor:pointer;background:none;color:inherit}
table{font-family:inherit}
a{color:inherit}
img,svg{display:block;max-width:100%}

.num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* keyframes */
@keyframes pulse{0%{box-shadow:0 0 0 0 #1FA36399}70%{box-shadow:0 0 0 9px #1FA36300}100%{box-shadow:0 0 0 0 #1FA36300}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-12deg)}60%{transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes floatGlow{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:.85;transform:translateY(-10px)}}
@keyframes toastin{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes spinslow{to{transform:rotate(360deg)}}

/* view routing — only the active view shows */
[data-view]{display:none}
[data-view].active{display:block;animation:slideUp .35s ease both}

/* hover helpers (replace the mockup's style-hover attribute) */
.lift{transition:transform .18s,border-color .18s}
.lift:hover{border-color:#F4B41A88;transform:translateY(-4px)}
.gold-btn{transition:filter .15s}
.gold-btn:hover{filter:brightness(1.07)}
.ghost-btn{transition:color .15s,border-color .15s}
.ghost-btn:hover{border-color:#F4B41A;color:#F4B41A}
.row-hover{transition:background .15s}
.row-hover:hover{background:#111733}
.nav-link{transition:color .15s,background .15s}
.nav-link:hover{color:#F4B41A}
.foot-link:hover{color:#F4B41A}
.wallet-pick:hover{border-color:#F4B41A !important}
.lang-btn{transition:color .12s,background .12s,border-color .12s}

/* responsive */
[data-mobonly]{display:none}
@media(max-width:880px){
  [data-stack]{grid-template-columns:1fr !important}
  [data-games-grid]{grid-template-columns:1fr !important}
  [data-steps]{grid-template-columns:repeat(2,1fr) !important}
  [data-foot]{grid-template-columns:1fr 1fr !important}
  [data-desk]{display:none !important}
  [data-burger]{display:grid !important}
  [data-deskonly]{display:none !important}
  [data-mobonly]{display:inline-flex !important}
  /* Loto 6/49 board: 10 cols don't fit a phone (cells can't shrink below the
     number → the page overflowed right). Use 7 readable columns on mobile. */
  #lotoBoard{grid-template-columns:repeat(7,minmax(0,1fr)) !important;gap:6px !important}
  #lotoBoard button{font-size:13px !important}
  /* compact header so it never overflows the viewport (the overflow was zooming
     the whole page out on phones + pushing the buy modal off-screen) */
  #hdrRow{gap:8px !important;padding-inline:12px !important}
  #hdrLogo{gap:8px !important;min-width:0}
  #hdrFlame{width:34px !important;height:34px !important}
  #hdrFlame img{width:20px !important;height:20px !important}
  #hdrTitle{font-size:14px !important}
  #mobWalletTop{max-width:42vw !important;font-size:12.5px !important;padding:9px 12px !important}
  /* hero badges stay on ONE row on mobile — shrink to fit, never wrap */
  #heroBadges{gap:7px !important}
  #heroBadges > *{font-size:10.5px !important;letter-spacing:.04em !important;padding:6px 10px !important;white-space:nowrap;flex:none}
}
@media(min-width:881px){
  [data-burger]{display:none !important}
  [data-mobnav]{display:none !important}
}

/* ── Kurdistan-sun loading overlay (buy → chain confirm wait) ─────────────── */
#lotoLoader{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#04060Eec;backdrop-filter:blur(6px)}
#lotoLoader.on{display:flex}
.ksun{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center}
.ksun .halo{position:absolute;border-radius:50%;border:4px solid transparent;animation:ksun-rot 3s linear infinite}
.ksun .h-green{width:100%;height:100%;border-top-color:#1FA363;border-bottom-color:#1FA363}
.ksun .h-red{width:78%;height:78%;border-left-color:#E5344F;border-right-color:#E5344F;animation-duration:2.4s;animation-direction:reverse}
.ksun .h-yellow{width:56%;height:56%;border-top-color:#F4B41A;border-bottom-color:#F4B41A;animation-duration:1.8s}
.ksun svg{position:relative;z-index:1;width:100%;height:100%;filter:drop-shadow(0 0 16px rgba(244,180,26,.5))}
.ksun .rays{animation:ksun-pulse 2s ease-in-out infinite;transform-origin:100px 100px}
@keyframes ksun-rot{to{transform:rotate(360deg)}}
@keyframes ksun-pulse{0%,100%{opacity:1}50%{opacity:.55}}
#lotoLoaderTxt{color:#C7CFE6;font-size:14.5px;font-weight:600;text-align:center;max-width:80vw;line-height:1.5}
#lotoLoaderSub{color:#5C678A;font-size:12px;margin-top:-12px}