:root{
    --bg: #080b12;
    --surface: #0e131d;
    --surface-2: #151b28;
    --surface-3: #1c2436;
    --border: #232b3d;
    --text: #e8ebf1;
    --text-secondary: #98a2b8;
    --text-muted: #666f85;
    --accent: #4b8bf4;
    --accent-2: #7c5cff;
    --orange: #f8974a;
    --radius: 14px;
    --radius-sm: 9px;
    --amber: #ffb020;
    --container: 1180px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);}


/* ============================================
   view switch: desktop layout vs. mobile mockup
   ============================================ */
#desktop-view{
  background:var(--bg);
    background-image:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217.32%22%20height%3D%2230.00%22%20viewBox%3D%220%200%2017.32%2030.00%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234b8bf4%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.14%22%3E%3Cpolygon%20points%3D%22-8.66%2C-25.00%200.00%2C-20.00%200.00%2C-10.00%20-8.66%2C-5.00%20-17.32%2C-10.00%20-17.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C-25.00%2017.32%2C-20.00%2017.32%2C-10.00%208.66%2C-5.00%20-0.00%2C-10.00%200.00%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C-25.00%2034.64%2C-20.00%2034.64%2C-10.00%2025.98%2C-5.00%2017.32%2C-10.00%2017.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C-10.00%20-8.66%2C-5.00%20-8.66%2C5.00%20-17.32%2C10.00%20-25.98%2C5.00%20-25.98%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C-10.00%208.66%2C-5.00%208.66%2C5.00%200.00%2C10.00%20-8.66%2C5.00%20-8.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C-10.00%2025.98%2C-5.00%2025.98%2C5.00%2017.32%2C10.00%208.66%2C5.00%208.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%22-8.66%2C5.00%200.00%2C10.00%200.00%2C20.00%20-8.66%2C25.00%20-17.32%2C20.00%20-17.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C5.00%2017.32%2C10.00%2017.32%2C20.00%208.66%2C25.00%20-0.00%2C20.00%200.00%2C10.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C5.00%2034.64%2C10.00%2034.64%2C20.00%2025.98%2C25.00%2017.32%2C20.00%2017.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C20.00%20-8.66%2C25.00%20-8.66%2C35.00%20-17.32%2C40.00%20-25.98%2C35.00%20-25.98%2C25.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C20.00%208.66%2C25.00%208.66%2C35.00%200.00%2C40.00%20-8.66%2C35.00%20-8.66%2C25.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C20.00%2025.98%2C25.00%2025.98%2C35.00%2017.32%2C40.00%208.66%2C35.00%208.66%2C25.00%22%20/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(circle at 15% 0%, rgba(75,139,244,0.10), transparent 40%),
      radial-gradient(circle at 85% 15%, rgba(124,92,255,0.08), transparent 40%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 17.32px 30.00px, auto, auto;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    min-height:100vh;
  display:block;
}
#mobile-view{
  background:var(--bg);
    background-image:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217.32%22%20height%3D%2230.00%22%20viewBox%3D%220%200%2017.32%2030.00%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234b8bf4%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.14%22%3E%3Cpolygon%20points%3D%22-8.66%2C-25.00%200.00%2C-20.00%200.00%2C-10.00%20-8.66%2C-5.00%20-17.32%2C-10.00%20-17.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C-25.00%2017.32%2C-20.00%2017.32%2C-10.00%208.66%2C-5.00%20-0.00%2C-10.00%200.00%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C-25.00%2034.64%2C-20.00%2034.64%2C-10.00%2025.98%2C-5.00%2017.32%2C-10.00%2017.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C-10.00%20-8.66%2C-5.00%20-8.66%2C5.00%20-17.32%2C10.00%20-25.98%2C5.00%20-25.98%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C-10.00%208.66%2C-5.00%208.66%2C5.00%200.00%2C10.00%20-8.66%2C5.00%20-8.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C-10.00%2025.98%2C-5.00%2025.98%2C5.00%2017.32%2C10.00%208.66%2C5.00%208.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%22-8.66%2C5.00%200.00%2C10.00%200.00%2C20.00%20-8.66%2C25.00%20-17.32%2C20.00%20-17.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C5.00%2017.32%2C10.00%2017.32%2C20.00%208.66%2C25.00%20-0.00%2C20.00%200.00%2C10.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C5.00%2034.64%2C10.00%2034.64%2C20.00%2025.98%2C25.00%2017.32%2C20.00%2017.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C20.00%20-8.66%2C25.00%20-8.66%2C35.00%20-17.32%2C40.00%20-25.98%2C35.00%20-25.98%2C25.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C20.00%208.66%2C25.00%208.66%2C35.00%200.00%2C40.00%20-8.66%2C35.00%20-8.66%2C25.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C20.00%2025.98%2C25.00%2025.98%2C35.00%2017.32%2C40.00%208.66%2C35.00%208.66%2C25.00%22%20/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(circle at 20% 0%, rgba(75,139,244,0.10), transparent 45%),
      radial-gradient(circle at 80% 100%, rgba(124,92,255,0.08), transparent 45%);
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 17.32px 30.00px, auto, auto;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text);
    min-height:100vh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:32px 16px 60px;
  display:none;
}
@media (max-width:860px){
  #desktop-view{ display:none; }
  #mobile-view{ display:flex; }
}

  @keyframes code-pill-march{
    to{background-position:8px 0, -8px 100%, 0 -8px, 100% 8px;}
  }

  /* ============================================
     desktop layout (>= 861px)
     ============================================ */
*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

#desktop-view a{color:inherit;text-decoration:none;}

#desktop-view :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

#desktop-view .note{
    max-width:var(--container);
    margin:0 auto;
    padding:16px 32px 0;
    font-size:12px;
    color:var(--text-muted);
    line-height:1.6;
  }

#desktop-view .container{max-width:var(--container);margin:0 auto;padding:0 32px;}

/* topbar */
#desktop-view .topbar{
    position:sticky;top:0;z-index:30;
    background:rgba(14,19,29,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
    margin-top:20px;
  }

#desktop-view .topbar-inner{
    display:flex;align-items:center;gap:32px;
    height:64px;
  }

#desktop-view .logo{
    display:flex;align-items:center;gap:9px;
    font-size:16px;font-weight:700;letter-spacing:-0.01em;
    flex:0 0 auto;
  }

#desktop-view .logo-mark{width:26px;height:26px;border-radius:7px;display:block;object-fit:cover;}

#desktop-view .nav-links{display:flex;align-items:center;gap:26px;flex:1 1 auto;}

#desktop-view .nav-links a{
    font-size:13.5px;font-weight:500;color:var(--text-secondary);
    padding:22px 0;position:relative;
    transition:color .15s ease;
  }

#desktop-view .nav-links a:hover{color:var(--text);}

#desktop-view .nav-links a.active{color:var(--text);}

#desktop-view .nav-links a.active::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--accent);border-radius:2px 2px 0 0;
  }

#desktop-view .nav-search{
    flex:0 0 260px;
    display:flex;align-items:center;gap:8px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:9px;
    padding:8px 12px;
    transition:border-color .15s ease;
  }

#desktop-view .nav-search:focus-within{border-color:var(--accent);}

#desktop-view .nav-search i{font-size:12.5px;color:var(--text-muted);}

#desktop-view .nav-search input{
    border:none;background:none;outline:none;
    color:var(--text);font-size:13px;width:100%;
    font-family:inherit;
  }

#desktop-view .nav-search input::placeholder{color:var(--text-muted);}

#desktop-view main{padding:28px 0 8px;}

/* section head */
#desktop-view .block{padding:34px 0 0;}

#desktop-view .block-head{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:16px;
  }

#desktop-view .block-head h2{font-size:17px;font-weight:600;margin:0;letter-spacing:-0.01em;}

#desktop-view .see-all{font-size:12.5px;color:var(--accent);font-weight:500;}

#desktop-view .see-all:hover{text-decoration:underline;}

/* hero */
#desktop-view .hero-desktop{
    position:relative;
    height:clamp(380px, 38vw, 500px);
    border-radius:18px;
    overflow:hidden;
    background:#1a2036;
    border:1px solid var(--border);
  }

#desktop-view .hero-desktop img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;
  }

#desktop-view .hero-desktop::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(0deg, rgba(6,8,13,0.90) 0%, rgba(6,8,13,0.05) 60%),
               linear-gradient(90deg, rgba(6,8,13,0.55) 0%, transparent 45%);
  }

#desktop-view .hero-desktop-text{position:absolute;left:40px;right:40px;bottom:38px;z-index:2;}

#desktop-view .hero-tag{
    display:inline-flex;align-items:center;gap:6px;
    font-size:11px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;
    color:var(--accent);background:rgba(75,139,244,0.15);
    padding:4px 9px;border-radius:20px;margin-bottom:14px;
  }

#desktop-view .hero-desktop-text .t{
    font-size:36px;font-weight:700;line-height:1.2;color:#fff;
    max-width:680px;letter-spacing:-0.01em;
  }

#desktop-view .hero-desktop-text .m{font-size:13px;color:rgba(255,255,255,0.65);margin-top:10px;}

/* codes grid */
#desktop-view .codes-grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(220px,1fr));gap:14px;
  }

#desktop-view .code-card{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px 16px;
    transition:transform .15s ease,border-color .15s ease;
  }

#desktop-view .code-card:hover{transform:translateY(-2px);border-color:#2c3550;}

#desktop-view .code-card .g{font-size:13.5px;font-weight:600;margin-bottom:10px;}

#desktop-view .code-card .d{font-size:11px;color:var(--text-muted);margin:8px 0 0;}

#desktop-view .code-pill{
    display:flex;align-items:center;justify-content:space-between;
    background-color:rgba(75,139,244,0.10);
    background-image:
      linear-gradient(90deg, var(--accent) 50%, transparent 50%),
      linear-gradient(90deg, var(--accent) 50%, transparent 50%),
      linear-gradient(0deg, var(--accent) 50%, transparent 50%),
      linear-gradient(0deg, var(--accent) 50%, transparent 50%);
    background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
    background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px;
    background-position:0 0, 0 100%, 0 0, 100% 0;
    animation:code-pill-march 0.7s infinite linear;
    border-radius:7px;padding:8px 10px;
    cursor:pointer;border:none;width:100%;
    transition:background-color .15s ease;
  }

#desktop-view .code-pill:hover{background-color:rgba(75,139,244,0.16);}

#desktop-view .code-pill span{font-size:12.5px;font-weight:600;font-family:ui-monospace,Menlo,monospace;color:var(--amber);}

#desktop-view .code-pill i{font-size:12px;color:var(--amber);}

@media (prefers-reduced-motion: reduce){
#desktop-view .code-pill{animation:none;}
}

/* upcoming grid */
#desktop-view .upcoming-grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(180px,1fr));gap:14px;
  }

#desktop-view .upcoming-card{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:8px;
    transition:transform .15s ease,border-color .15s ease;
  }

#desktop-view .upcoming-card:hover{transform:translateY(-2px);border-color:#2c3550;}

#desktop-view .upcoming-card .cover{
    width:100%;height:120px;border-radius:8px;margin-bottom:9px;
    background:linear-gradient(135deg,#2a3350,#171c2a);
    overflow:hidden;position:relative;
  }

#desktop-view .upcoming-card .cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}

#desktop-view .upcoming-card:hover .cover img{transform:scale(1.05);}

#desktop-view .upcoming-card .g{font-size:13px;font-weight:600;color:var(--text);}

#desktop-view .countdown-badge{
    position:absolute;top:7px;left:7px;
    display:flex;align-items:center;gap:4px;
    padding:3px 7px;border-radius:5px;
    font-size:10.5px;font-weight:700;
    backdrop-filter:blur(4px);line-height:1;
  }

#desktop-view .countdown-badge i{font-size:9px;}

#desktop-view .countdown-badge.urgent{background:rgba(239,110,80,0.9);color:#fff;}

#desktop-view .countdown-badge.normal{background:rgba(8,11,18,0.72);color:rgba(255,255,255,0.78);}

/* split block: news + popular games */
#desktop-view .split-block{
    display:grid;grid-template-columns:1.75fr 1fr;gap:40px;
    padding:34px 0 0;
  }

#desktop-view .news-list{display:flex;flex-direction:column;}

#desktop-view .news-row{
    display:flex;gap:14px;align-items:center;
    padding:13px 0;
    border-bottom:1px solid var(--border);
  }

#desktop-view .news-row:first-child{padding-top:0;}

#desktop-view .news-row:last-child{border-bottom:none;}

#desktop-view .news-thumb{
    width:76px;height:76px;border-radius:10px;flex:0 0 76px;
    background:linear-gradient(135deg,#232b40,#171c2a);
    overflow:hidden;position:relative;
  }

#desktop-view .news-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

#desktop-view .news-body{flex:1 1 auto;min-width:0;}

#desktop-view .news-body .t{
    font-size:14px;font-weight:600;line-height:1.4;
    color:var(--text);
  }

#desktop-view .news-row:hover .news-body .t{color:var(--accent);}

#desktop-view .news-body .m{font-size:11px;color:var(--text-muted);margin-top:6px;}

#desktop-view .games-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

#desktop-view .game-tile .cover{
    width:100%;aspect-ratio:1/1;border-radius:12px;
    background:linear-gradient(135deg,#2a3350,#171c2a);
    margin-bottom:8px;overflow:hidden;position:relative;
  }

#desktop-view .game-tile .cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}

#desktop-view .game-tile:hover .cover img{transform:scale(1.06);}

#desktop-view .game-tile .n{font-size:12px;color:var(--text-secondary);}

/* footer */
#desktop-view .site-footer{margin-top:56px;border-top:1px solid var(--border);padding:40px 0 0;}

#desktop-view .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:28px;}

#desktop-view .footer-brand{display:flex;align-items:center;gap:9px;margin-bottom:10px;}

#desktop-view .footer-brand .mark{width:24px;height:24px;border-radius:6px;display:block;object-fit:cover;}

#desktop-view .footer-brand .name{font-size:14.5px;font-weight:700;}

#desktop-view .footer-desc{font-size:12.5px;color:var(--text-muted);line-height:1.6;max-width:280px;}

#desktop-view .footer-col h4{font-size:12px;font-weight:600;color:var(--text);margin:0 0 14px;}

#desktop-view .footer-col{display:flex;flex-direction:column;gap:11px;}

#desktop-view .footer-col a{font-size:12.5px;color:var(--text-secondary);}

#desktop-view .footer-col a:hover{color:var(--accent);}

#desktop-view .footer-bottom{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    border-top:1px solid var(--border);
    padding:18px 0 30px;
  }

#desktop-view .footer-copy{font-size:11.5px;color:var(--text-muted);flex:0 0 auto;}

#desktop-view .footer-disclaimer{font-size:11px;color:var(--text-muted);opacity:0.75;line-height:1.6;max-width:640px;text-align:right;}

@media (max-width:980px){
#desktop-view .split-block{grid-template-columns:1fr;gap:34px;}

#desktop-view .games-grid{grid-template-columns:repeat(4,1fr);}

#desktop-view .footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:26px;}
}

@media (max-width:720px){
#desktop-view .nav-links{display:none;}

#desktop-view .nav-search{flex:1 1 auto;}

#desktop-view .hero-desktop-text .t{font-size:22px;}

#desktop-view .footer-grid{grid-template-columns:1fr 1fr;}

#desktop-view .footer-bottom{flex-direction:column;align-items:flex-start;}

#desktop-view .footer-disclaimer{text-align:left;}
}

  /* ============================================
     mobile mockup (<= 860px)
     ============================================ */
*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

#mobile-view .note{
    max-width:390px;
    margin:0 auto 14px;
    font-size:12px;
    color:var(--text-muted);
    text-align:center;
    line-height:1.5;
  }

#mobile-view .frame{
    width:100%;
    max-width:390px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:26px;
    overflow:hidden;
    position:relative;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }

#mobile-view .screen{
    height:760px;
    overflow-y:auto;
    -ms-overflow-style:none;
    scrollbar-width:none;
    padding-bottom:70px;
  }

#mobile-view .screen::-webkit-scrollbar{display:none;}

/* header */
#mobile-view header{
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 16px;
    background:rgba(14,19,29,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }

#mobile-view .logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:600;
    letter-spacing:-0.01em;
  }

#mobile-view .logo-mark{
    width:24px;height:24px;border-radius:6px;
    flex:0 0 auto;
    display:block;
    object-fit:cover;
  }

#mobile-view .icon-btn i{font-size:16px;}

#mobile-view .icon-btn{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:var(--text-secondary);
    background:transparent;
    border:none;
    cursor:pointer;
  }

#mobile-view .icon-btn:active{background:var(--surface-3);}

/* search overlay */
#mobile-view .search-bar{
    display:none;
    padding:10px 16px 12px;
    border-bottom:1px solid var(--border);
  }

#mobile-view .search-bar.open{display:block;}

#mobile-view .search-bar input{
    width:100%;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:9px 12px;
    color:var(--text);
    font-size:13px;
  }

#mobile-view .search-bar input::placeholder{color:var(--text-muted);}

/* chips */
#mobile-view section{padding:16px 16px 4px;}

#mobile-view .section-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:10px;
  }

#mobile-view .section-title{
    font-size:13px;font-weight:600;line-height:1;
    display:flex;align-items:center;
  }

#mobile-view .icon-chip{
    width:24px;height:24px;border-radius:7px;
    display:flex;align-items:center;justify-content:center;
    font-size:11.5px;flex:0 0 auto;
  }

#mobile-view .icon-chip.fire{background:rgba(248,151,74,0.14);color:var(--orange);}

#mobile-view .icon-chip.cal{background:rgba(75,139,244,0.14);color:var(--accent);}

#mobile-view .see-all{font-size:12px;color:var(--accent);}

/* hero */
#mobile-view .hero{
    position:relative;
    height:168px;
    border-radius:var(--radius);
    overflow:hidden;
    background:#1a2036;
  }

#mobile-view .hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }

#mobile-view .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(0deg, rgba(6,8,13,0.92) 0%, rgba(6,8,13,0.15) 65%);
    z-index:1;
  }

#mobile-view .hero-text{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;}

#mobile-view .hero-text .t{
    font-size:14px;font-weight:600;line-height:1.3;color:#fff;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;word-break:break-word;
    text-wrap:balance;
  }

#mobile-view .hero-text .m{font-size:10.5px;color:rgba(255,255,255,0.6);margin-top:4px;}

/* codes strip */
#mobile-view .codes-strip{display:flex;gap:9px;overflow-x:auto;padding-bottom:2px;}

#mobile-view .codes-strip::-webkit-scrollbar{display:none;}

#mobile-view .code-card{
    flex:0 0 146px;width:146px;min-width:0;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 11px;
  }

#mobile-view .code-card .g{
    font-size:12px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin-bottom:7px;
  }

#mobile-view .code-card .d{font-size:10.5px;color:var(--text-muted);margin:6px 0 0;}

#mobile-view .code-pill{
    display:flex;align-items:center;justify-content:space-between;
    background-color:rgba(75,139,244,0.10);
    background-image:
      linear-gradient(90deg, var(--accent) 50%, transparent 50%),
      linear-gradient(90deg, var(--accent) 50%, transparent 50%),
      linear-gradient(0deg, var(--accent) 50%, transparent 50%),
      linear-gradient(0deg, var(--accent) 50%, transparent 50%);
    background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
    background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px;
    background-position:0 0, 0 100%, 0 0, 100% 0;
    animation:code-pill-march 0.7s infinite linear;
    border-radius:6px;padding:5px 7px;
    cursor:pointer;
    border:none;
    width:100%;
    transition:background-color .15s ease;
  }

#mobile-view .code-pill:active{background-color:rgba(75,139,244,0.18);}

#mobile-view .code-pill span{font-size:11px;font-weight:600;font-family:ui-monospace,Menlo,monospace;color:#ffb020;}

#mobile-view .code-pill i{font-size:11px;color:#ffb020;}

@media (prefers-reduced-motion: reduce){
#mobile-view .code-pill{animation:none;}
}

/* news list */
#mobile-view .news-row{
    display:flex;gap:10px;align-items:center;
    padding:9px 0;
    border-bottom:1px solid var(--border);
  }

#mobile-view .news-row:last-child{border-bottom:none;}

#mobile-view .news-thumb{
    width:52px;height:52px;border-radius:8px;flex:0 0 52px;
    background:linear-gradient(135deg,#232b40,#171c2a);
    overflow:hidden;
    position:relative;
  }

#mobile-view .news-thumb img{
    width:100%;height:100%;object-fit:cover;display:block;
  }

#mobile-view .news-body{flex:1 1 auto;min-width:0;}

#mobile-view .news-body .t{
    font-size:12.5px;font-weight:500;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

#mobile-view .news-body .m{font-size:10.5px;color:var(--text-muted);margin-top:3px;}

/* games strip */
#mobile-view .games-strip{display:flex;gap:11px;overflow-x:auto;padding-bottom:4px;}

#mobile-view .games-strip::-webkit-scrollbar{display:none;}

#mobile-view .game-tile{flex:0 0 84px;width:84px;min-width:0;}

#mobile-view .game-tile .cover{
    width:84px;height:84px;border-radius:12px;
    background:linear-gradient(135deg,#2a3350,#171c2a);
    margin-bottom:6px;
    overflow:hidden;
    position:relative;
  }

#mobile-view .game-tile .cover img{
    width:100%;height:100%;object-fit:cover;display:block;
  }

#mobile-view .game-tile .n{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* upcoming strip */
#mobile-view .upcoming-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}

#mobile-view .upcoming-strip::-webkit-scrollbar{display:none;}

#mobile-view .upcoming-card{
    flex:0 0 116px;width:116px;min-width:0;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:6px;
  }

#mobile-view .upcoming-card .cover{
    width:100%;height:68px;border-radius:6px;margin-bottom:5px;
    background:linear-gradient(135deg,#2a3350,#171c2a);
    overflow:hidden;
    position:relative;
  }

#mobile-view .upcoming-card .cover img{
    width:100%;height:100%;object-fit:cover;display:block;
  }

#mobile-view .upcoming-card .g{
    font-size:11px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--text);
  }

#mobile-view .countdown-badge{
    position:absolute;top:5px;left:5px;
    display:flex;align-items:center;gap:3px;
    padding:2px 5px;border-radius:4px;
    font-size:9px;font-weight:700;
    backdrop-filter:blur(4px);
    line-height:1;
  }

#mobile-view .countdown-badge i{font-size:8px;}

#mobile-view .countdown-badge.urgent{background:rgba(239,110,80,0.9);color:#fff;}

#mobile-view .countdown-badge.normal{background:rgba(8,11,18,0.72);color:rgba(255,255,255,0.78);}

/* bottom nav */
#mobile-view .tabbar{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;
    background:rgba(14,19,29,0.96);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--border);
    z-index:27;
  }

#mobile-view .tab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 0 11px;
    color:var(--text-muted);
    background:none;border:none;
    font-family:inherit;
    cursor:pointer;
  }

#mobile-view .tab.active{color:var(--accent);}

#mobile-view .tab span{font-size:10px;}

#mobile-view .tab-ic{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:26px;border-radius:14px;
    font-size:16.5px;color:var(--text-muted);
    transition:background .15s ease,color .15s ease;
  }

#mobile-view .tab.active .tab-ic{background:rgba(75,139,244,0.15);color:var(--accent);}

/* more sheet */
#mobile-view .sheet-backdrop{
    position:absolute;top:0;left:0;right:0;bottom:64px;
    background:rgba(3,5,9,0.55);
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
    z-index:19;
  }

#mobile-view .sheet-backdrop.open{opacity:1;pointer-events:auto;}

#mobile-view .sheet{
    position:absolute;left:0;right:0;bottom:64px;
    background:var(--surface-2);
    border-top:1px solid var(--border);
    border-radius:16px 16px 0 0;
    padding:8px 16px 14px;
    transform:translateY(100%);
    transition:transform .25s ease;
    box-shadow:0 -12px 30px -10px rgba(0,0,0,0.5);
    z-index:24;
  }

#mobile-view .sheet.open{transform:translateY(0);}

#mobile-view .sheet-handle{
    width:36px;height:4px;border-radius:2px;
    background:var(--border);
    margin:8px auto 12px;
  }

#mobile-view .sheet-row{
    display:flex;align-items:center;gap:12px;
    padding:12px 2px;
    border-bottom:1px solid var(--border);
    color:var(--text);
  }

#mobile-view .sheet-row:last-child{border-bottom:none;}

#mobile-view .sheet-row i{width:18px;text-align:center;font-size:14.5px;color:var(--text-secondary);}

#mobile-view .sheet-row span{font-size:13.5px;}

#mobile-view .copied-toast{
    position:absolute;left:50%;bottom:86px;
    transform:translateX(-50%) translateY(8px);
    background:var(--surface-3);
    border:1px solid var(--border);
    color:var(--text);
    font-size:11.5px;
    padding:7px 13px;border-radius:20px;
    opacity:0;transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
    z-index:30;
    white-space:nowrap;
  }

#mobile-view .copied-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* footer */
#mobile-view footer{padding:22px 16px 28px;border-top:1px solid var(--border);margin-top:6px;}

#mobile-view .footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:8px;}

#mobile-view .footer-brand .mark{
    width:22px;height:22px;border-radius:6px;
    display:block;object-fit:cover;flex:0 0 auto;
  }

#mobile-view .footer-brand .name{font-size:14px;font-weight:600;}

#mobile-view .footer-desc{font-size:12px;color:var(--text-muted);line-height:1.55;margin-bottom:6px;}

#mobile-view .accordion{border-top:1px solid var(--border);}

#mobile-view .acc-item{border-bottom:1px solid var(--border);}

#mobile-view .acc-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 2px;
    background:none;border:none;width:100%;
    color:var(--text);font-family:inherit;font-size:13px;font-weight:500;
    cursor:pointer;
  }

#mobile-view .acc-head i{font-size:12.5px;color:var(--text-muted);transition:transform .2s ease;}

#mobile-view .acc-item.open .acc-head i{transform:rotate(180deg);color:var(--accent);}

#mobile-view .acc-body{
    max-height:0;overflow:hidden;
    transition:max-height .22s ease;
  }

#mobile-view .acc-item.open .acc-body{max-height:220px;}

#mobile-view .acc-links{display:flex;flex-direction:column;gap:11px;padding:2px 2px 14px 4px;}

#mobile-view .acc-links a{font-size:12.5px;color:var(--text-secondary);text-decoration:none;}

#mobile-view .footer-legal{margin-top:16px;}

#mobile-view .footer-copy{font-size:11px;color:var(--text-muted);}

#mobile-view .footer-disclaimer{font-size:10.5px;color:var(--text-muted);opacity:0.75;line-height:1.55;margin-top:8px;}



/* ============================================================
   FIXES ONLY — appended, nothing above this line was edited.
   One grid for everything: panel edge 32px, inner padding 22px,
   so every title, the logo and every card row start on 54px.
   ============================================================ */

/* ── 1 · header bar ──────────────────────────────────────────
   It was the only element whose background ran the full window width, and
   once contained it was 1180 wide while the sections below are 1116 — which
   is what made it look cropped. The bar is now drawn by a pseudo-element
   inset by the container's own 32px padding, so it is exactly as wide as the
   sections, with the same radius and the same 22px inner padding. */
#desktop-view .topbar{
  background:transparent;        /* no band — the bar itself is the surface */
  backdrop-filter:none;
  border-bottom:0;
  margin-top:0;
  padding:14px 0;
}
#desktop-view .topbar-inner{
  position:relative;
  height:64px;
  padding:0 54px;               /* 32 container + 22 panel = logo on 54 */
}
#desktop-view .topbar-inner::before{
  content:"";
  position:absolute;
  inset:0 32px;                 /* matches the section panels exactly */
  z-index:-1;
  background:rgba(14,19,29,0.62);   /* same as the section panels */
  backdrop-filter:blur(10px);       /* keeps it readable while sticky */
  border:1px solid var(--border);
  border-radius:var(--radius);
}
#desktop-view main{padding:8px 0 0;}

/* ── 2 · every section is a panel, heading included ──────────
   The heading used to sit outside any container, so titles over the card
   grids and titles over the lists started at different x positions. */
#desktop-view .block,
#desktop-view .split-block > div{
  background:rgba(14,19,29,0.62);   /* hexagon field reads through */
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-top:22px;
}
#desktop-view .block-head{margin-bottom:16px;}

/* ── 3 · Latest news + Popular games, symmetric ──────────────
   Both columns are now one panel each, same padding, stretched to the same
   height, with your 1.75fr / 1fr split kept as you designed it. */
#desktop-view .split-block{
  padding:0;
  margin-top:0;
  gap:22px;
  align-items:stretch;
}
#desktop-view .news-list{display:flex;flex-direction:column;}
#desktop-view .news-list .news-row:last-child{border-bottom:none;padding-bottom:0;}

/* ── 4 · footer gets the same container ─────────────────────
   Its inner .container elements would otherwise add a second 32px inset, so
   they are flattened and the panel supplies the padding. */
#desktop-view .site-footer{
  background:rgba(14,19,29,0.62);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-top:22px;
  padding:24px 22px 0;
}
#desktop-view .site-footer .container{max-width:none;padding:0;margin:0;}
#desktop-view .footer-grid{padding-bottom:22px;}
#desktop-view .footer-bottom{padding:18px 0 22px;}

/* the annotation line at the top of the mockup, on the same 54px */
#desktop-view .note{padding:16px 54px 0;}



/* ── 5 · mobile: same container treatment as desktop ─────────
   The frame was one solid --surface panel, so every section ran into the
   next with nothing between them. The frame is now transparent — the
   hexagon field shows inside the phone — and each section is its own
   translucent container at the same 0.62 as desktop. The hero keeps no
   container, exactly like desktop. Header and tab bar are untouched. */
#mobile-view .frame{
  background:transparent;
}
#mobile-view .screen > section{
  margin:0 12px 12px;
  padding:14px 13px 12px;
}
#mobile-view .screen > section:not(:first-of-type){
  background:rgba(14,19,29,0.62);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
#mobile-view .screen > section:first-of-type{
  padding:14px 12px 0;
  margin-bottom:0;
}
#mobile-view .section-head{margin-bottom:12px;}
#mobile-view footer{
  margin:12px;
  padding:18px 14px 20px;
  background:rgba(14,19,29,0.62);
  border:1px solid var(--border);
  border-radius:var(--radius);
  border-top:1px solid var(--border);
}
/* header keeps its own solid bar so content scrolls cleanly under it */
#mobile-view header{background:rgba(14,19,29,0.94);}



/* ── 6 · section titles sit outside the container ────────────
   The panel moves off the <section> and onto the content itself, so the
   heading and its "See all" sit on the page background above the box.
   Titles now all start on the container edge (32px desktop / 12px mobile)
   and every container starts on the same line under them. */

/* desktop */
#desktop-view .block,
#desktop-view .split-block > div{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
#desktop-view .block{margin-top:26px;}
#desktop-view .block-head{margin-bottom:12px;}
#desktop-view .split-block > div{display:flex;flex-direction:column;}
#desktop-view .codes-grid,
#desktop-view .upcoming-grid,
#desktop-view .news-list,
#desktop-view .games-grid{
  background:rgba(14,19,29,0.62);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
#desktop-view .news-list,
#desktop-view .games-grid{flex:1;}   /* both columns end level */

/* mobile */
#mobile-view .screen > section:not(:first-of-type){
  background:transparent;
  border:0;
  border-radius:0;
  padding:0 12px;
  margin:0 0 14px;
}
#mobile-view .section-head{margin:0 2px 10px;}
#mobile-view .codes-strip,
#mobile-view .upcoming-strip,
#mobile-view .games-strip,
#mobile-view .news-list{
  background:rgba(14,19,29,0.62);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
}
#mobile-view .news-list .news-row:first-child{padding-top:0;}
#mobile-view .news-list .news-row:last-child{padding-bottom:0;border-bottom:none;}



/* ── 7 · mobile hero was 168px tall, too small once the title wrapped to
      two lines. Height now follows the width at 16:10, so it scales with
      the phone instead of being a fixed strip (≈229px at 390px wide). ── */
#mobile-view .hero{
  height:auto;
  aspect-ratio:16/10;
  min-height:200px;
}
#mobile-view .hero-text .t{font-size:15px;}
#mobile-view .hero-text{bottom:13px;}



/* ── 8 · hero width bug ─────────────────────────────────────
   The hero section still carried the old margin:0 12px on top of its own
   12px padding — a 24px inset, while every other container sits at 12px.
   Side margin removed so the hero is exactly as wide as the containers. */
#mobile-view .screen > section:first-of-type{
  margin:0 0 14px;
  padding:14px 12px 0;
}



/* ── 9 · desktop header, variant B ───────────────────────────
   Flat contained panel, one hairline border, no gradient / glow / key chip.
   Every menu button carries the marching dashed strip from the code pill. */
#desktop-view .topbar{padding:14px 0;}
/* .topbar-inner IS the .container, so its padding positions the children.
   The panel is drawn at inset 0 32px, so children need 32 (container) + 20
   (inner padding) = 52px, otherwise the logo and search sit outside the panel. */
#desktop-view .topbar-inner{height:62px;padding:0 52px;gap:20px;}
#desktop-view .topbar-inner::before{
  background:#111825;
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  box-shadow:none;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}

/* logo: plain lockup, no divider, no glow */
#desktop-view .logo{gap:11px;font-size:16.5px;font-weight:700;color:#fff;letter-spacing:.005em;}
#desktop-view .logo-mark{width:30px;height:30px;border-radius:9px;box-shadow:none;}

/* menu buttons — marching dashes, same 8px dash and .7s loop as the pill */
@keyframes btn-march{
  to{background-position:8px 0, -8px 100%, 0 -8px, 100% 8px, 0 0;}
}
#desktop-view .nav-links{gap:8px;}
#desktop-view .nav-links a{
  padding:8px 13px;
  border-radius:8px;
  border:0;
  font-size:13px;
  font-weight:500;
  color:#93a0b8;
  background-image:
    linear-gradient(90deg, var(--accent) 50%, transparent 50%),
    linear-gradient(90deg, var(--accent) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent) 50%, transparent 50%),
    linear-gradient(180deg, rgba(75,139,244,0.06), rgba(75,139,244,0.06));
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y, no-repeat;
  background-size:8px 1px, 8px 1px, 1px 8px, 1px 8px, 100% 100%;
  background-position:0 0, 0 100%, 0 0, 100% 0, 0 0;
  animation:btn-march .7s infinite linear;
  transition:color .15s ease;
}
#desktop-view .nav-links a:hover{color:#fff;}
#desktop-view .nav-links a.active{
  color:#fff;
  font-weight:600;
  background-image:
    linear-gradient(90deg, var(--accent) 50%, transparent 50%),
    linear-gradient(90deg, var(--accent) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent) 50%, transparent 50%),
    linear-gradient(0deg,  var(--accent) 50%, transparent 50%),
    linear-gradient(180deg, rgba(75,139,244,0.20), rgba(75,139,244,0.20));
}
#desktop-view .nav-links a.active::after{display:none;}
@media (prefers-reduced-motion: reduce){
  #desktop-view .nav-links a{animation:none;}
}

/* search: inset field, focus ring, no key chip */
#desktop-view .nav-search{
  flex:0 0 262px;
  height:36px;
  padding:0 12px;
  border-radius:9px;
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.08);
  transition:border-color .18s ease, box-shadow .18s ease;
}
#desktop-view .nav-search:hover{border-color:rgba(255,255,255,0.13);}
#desktop-view .nav-search:focus-within{
  border-color:rgba(75,139,244,0.55);
  box-shadow:0 0 0 3px rgba(75,139,244,0.12);
}
#desktop-view .nav-search i{font-size:12.5px;color:#6b7794;}
#desktop-view .nav-search:focus-within i{color:var(--accent);}
#desktop-view .nav-search input{font-size:12.5px;}
#desktop-view .nav-search input::placeholder{color:#66708a;}



/* ============================================================
   PRODUCTION DYNAMIC WIRING
   These rules do not redesign the mockup. They only let the exact mockup
   surfaces hold the site's full dynamic collections without renderer caps.
   ============================================================ */
#desktop-view .mockup-hero-slide,
#mobile-view .mockup-hero-slide{
  position:absolute; inset:0; display:block; opacity:0; pointer-events:none;
  transition:opacity .35s ease; color:inherit; text-decoration:none;
}
#desktop-view .mockup-hero-slide.active,
#mobile-view .mockup-hero-slide.active{opacity:1;pointer-events:auto;}
#desktop-view .hero-desktop .mockup-hero-slide > img,
#mobile-view .hero .mockup-hero-slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* The mockup shows one desktop row. Keep that exact viewport, but allow the
   complete dynamic collection to continue off-canvas instead of discarding it. */
#desktop-view .codes-grid,
#desktop-view .upcoming-grid{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 28px)/3);
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
#desktop-view .codes-grid::-webkit-scrollbar,
#desktop-view .upcoming-grid::-webkit-scrollbar,
#desktop-view .news-list::-webkit-scrollbar,
#desktop-view .games-grid::-webkit-scrollbar,
#mobile-view .news-list::-webkit-scrollbar{display:none;}
#desktop-view .codes-grid > *,
#desktop-view .upcoming-grid > *{scroll-snap-align:start;min-width:0;}

/* Mockup viewport = four news rows and a 2x2 popular-games panel. The rest of
   the real collection remains available by scrolling inside the same panel. */
#desktop-view .news-list{max-height:432px;overflow-y:auto;scrollbar-width:none;}
#desktop-view .games-grid{max-height:432px;overflow-y:auto;scrollbar-width:none;align-content:start;}
#mobile-view .news-list{max-height:352px;overflow-y:auto;scrollbar-width:none;}

#desktop-view .code-card .g a,
#mobile-view .code-card .g a{color:inherit;text-decoration:none;}
#desktop-view .code-card .g a:hover{color:var(--accent);}
#desktop-view .news-row,
#desktop-view .game-tile,
#desktop-view .upcoming-card,
#mobile-view .news-row,
#mobile-view .game-tile,
#mobile-view .upcoming-card{color:inherit;text-decoration:none;}

#desktop-view .topbar{position:sticky;top:0;z-index:30;}
#mobile-view .tab{ text-decoration:none; }
#mobile-view .sheet-row{ text-decoration:none; color:inherit; }
#mobile-view .search-bar form{margin:0;}
#mobile-view .search-bar input{outline:none;}
#mobile-view .hero,
#desktop-view .hero-desktop{isolation:isolate;}

/* Keep the dynamic hero text above the mockup gradient. */
#desktop-view .hero-desktop::after,
#mobile-view .hero::after{pointer-events:none;}
#desktop-view .hero-desktop-text,
#mobile-view .hero-text{pointer-events:none;}

/* Production pages do not show the explanatory annotation lines embedded in
   the standalone mockup file. */
#desktop-view .note,
#mobile-view .note{display:none!important;}

/* ============================================================
   HOMEPAGE TUNING: FULL-WIDTH HERO + BALANCED SWIPE RAILS
   Presentation-only overrides. No homepage selection/ranking logic changes.
   ============================================================ */

/* 1) The original mockup capped hero titles at 680px. Production headlines
   can use the whole safe text area of the hero before wrapping. */
#desktop-view .hero-desktop-text .t{
  max-width:none;
  width:100%;
  text-wrap:pretty;
}

/* 2) Keep every collection as a real swipe/drag rail. */
#desktop-view .codes-grid,
#desktop-view .upcoming-grid,
#desktop-view .news-list,
#desktop-view .games-grid,
#mobile-view .codes-strip,
#mobile-view .upcoming-strip,
#mobile-view .news-list,
#mobile-view .games-strip{
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#desktop-view .codes-grid::-webkit-scrollbar,
#desktop-view .upcoming-grid::-webkit-scrollbar,
#desktop-view .news-list::-webkit-scrollbar,
#desktop-view .games-grid::-webkit-scrollbar,
#mobile-view .codes-strip::-webkit-scrollbar,
#mobile-view .upcoming-strip::-webkit-scrollbar,
#mobile-view .news-list::-webkit-scrollbar,
#mobile-view .games-strip::-webkit-scrollbar{display:none;}

/* Desktop code + upcoming: exactly three balanced cards in each viewport. */
#desktop-view .codes-grid,
#desktop-view .upcoming-grid{
  box-sizing:border-box;
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 28px) / 3);
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:16px;
}
#desktop-view .codes-grid > *,
#desktop-view .upcoming-grid > *{
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
#desktop-view .code-card{
  min-height:112px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
#desktop-view .code-card .d{margin-top:auto;padding-top:8px;}
#desktop-view .upcoming-card{
  min-height:166px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
#desktop-view .upcoming-card .g{
  min-height:32px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 3) Balance the lower half: equal columns and equal-height collection boxes. */
#desktop-view .split-block{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  align-items:stretch;
}
#desktop-view .split-block > div{min-width:0;}
#desktop-view .news-list,
#desktop-view .games-grid{
  box-sizing:border-box;
  height:432px;
  min-height:432px;
  max-height:432px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
}

/* Latest news keeps the mockup's four-row composition, but each group of four
   becomes a horizontal page. */
#desktop-view .news-list{
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;
  align-content:stretch;
}
#desktop-view .news-row{
  min-width:0;
  height:100%;
  box-sizing:border-box;
  padding:10px 0;
}
#desktop-view .news-row:first-child{padding-top:10px;}
#desktop-view .news-row:nth-child(4n+1){scroll-snap-align:start;}
#desktop-view .news-row:nth-child(4n){border-bottom:none;}

/* Popular games keeps a 2x2 viewport. Every four games form the next swipe page. */
#desktop-view .games-grid{
  display:grid;
  grid-template-columns:none;
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 12px) / 2);
  gap:12px;
  align-content:stretch;
}
#desktop-view .game-tile{
  min-width:0;
  min-height:0;
  overflow:hidden;
}
#desktop-view .game-tile .cover{
  height:calc(100% - 27px);
  min-height:0;
  aspect-ratio:auto;
  margin-bottom:7px;
}
#desktop-view .game-tile .n{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#desktop-view .game-tile:nth-child(4n+1){scroll-snap-align:start;}

/* Mouse users can physically drag the same rails on desktop. */
#desktop-view .codes-grid,
#desktop-view .upcoming-grid,
#desktop-view .news-list,
#desktop-view .games-grid{cursor:grab;}
#desktop-view .codes-grid.is-dragging,
#desktop-view .upcoming-grid.is-dragging,
#desktop-view .news-list.is-dragging,
#desktop-view .games-grid.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}

/* Mobile: all four panels swipe horizontally. News remains a compact four-row
   panel per swipe page instead of becoming a long vertical scroller. */
#mobile-view .codes-strip,
#mobile-view .upcoming-strip,
#mobile-view .games-strip,
#mobile-view .news-list{
  scroll-snap-type:x mandatory;
  overflow-x:auto;
  overflow-y:hidden;
}
#mobile-view .codes-strip > *,
#mobile-view .upcoming-strip > *,
#mobile-view .games-strip > *{
  scroll-snap-align:start;
}
#mobile-view .news-list{
  display:grid;
  grid-template-rows:repeat(4,64px);
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;
  height:280px;
  min-height:280px;
  max-height:280px;
  align-content:center;
  box-sizing:border-box;
}
#mobile-view .news-row{
  min-width:0;
  height:64px;
  box-sizing:border-box;
  padding:6px 0;
}
#mobile-view .news-row:first-child{padding-top:6px;}
#mobile-view .news-row:nth-child(4n+1){scroll-snap-align:start;}
#mobile-view .news-row:nth-child(4n){border-bottom:none;}

/* Consistent panel geometry so all section boxes start/end on the same rails. */
#desktop-view .codes-grid,
#desktop-view .upcoming-grid,
#desktop-view .news-list,
#desktop-view .games-grid{
  border-radius:14px;
  padding:16px;
}
#mobile-view .codes-strip,
#mobile-view .upcoming-strip,
#mobile-view .news-list,
#mobile-view .games-strip{
  border-radius:12px;
  padding:12px;
}

@media (max-width:980px) and (min-width:721px){
  #desktop-view .split-block{grid-template-columns:1fr;gap:26px;}
  #desktop-view .news-list,
  #desktop-view .games-grid{height:420px;min-height:420px;max-height:420px;}
}

/* ============================================================
   HOMEPAGE INTERACTION v3
   Swipe reliability only; content/ranking/rendering stay untouched.
   ============================================================ */
/* Hero uses explicit swipe detection, while preserving normal vertical page scroll. */
#desktop-view .hero-desktop,
#mobile-view .hero{
  touch-action:pan-y pinch-zoom;
}
/* Desktop rails use custom mouse/pen drag. */
#desktop-view .codes-grid,
#desktop-view .upcoming-grid,
#desktop-view .news-list,
#desktop-view .games-grid{
  touch-action:pan-y pinch-zoom;
}
/* Mobile rails are true native two-axis touch scrollers. Horizontal swipes are
   handled by overflow-x itself; vertical gestures still move the page. */
#mobile-view .codes-strip,
#mobile-view .upcoming-strip,
#mobile-view .news-list,
#mobile-view .games-strip{
  touch-action:pan-x pan-y pinch-zoom;
  overscroll-behavior-x:contain;
  scroll-behavior:auto;
}
#desktop-view .hero-desktop,
#mobile-view .hero{cursor:grab;}
#desktop-view .hero-desktop.is-swiping,
#mobile-view .hero.is-swiping{cursor:grabbing;user-select:none;}
#desktop-view .hero-desktop .mockup-hero-slide,
#desktop-view .hero-desktop .mockup-hero-slide img,
#mobile-view .hero .mockup-hero-slide,
#mobile-view .hero .mockup-hero-slide img,
#desktop-view .codes-grid a,
#desktop-view .codes-grid img,
#desktop-view .upcoming-grid a,
#desktop-view .upcoming-grid img,
#desktop-view .news-list a,
#desktop-view .news-list img,
#desktop-view .games-grid a,
#desktop-view .games-grid img{
  -webkit-user-drag:none;
}
/* Copy buttons must always win over the parent rail drag gesture. */
#desktop-view .code-pill,
#mobile-view .code-pill{
  touch-action:manipulation;
  cursor:pointer;
  position:relative;
  z-index:2;
}

/* ============================================================
   PRODUCTION MOBILE v4
   The source mockup used a fixed 390px / 760px phone preview frame. That is
   useful for displaying a mockup on desktop, but wrong for a real phone page.
   These overrides keep the same visual language while making the mobile view
   fill the real browser viewport and use normal page scrolling.
   ============================================================ */
@media (max-width:860px){
  html,
  body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
    background:var(--bg);
  }

  /* Reset default browser anchor styling on the real mobile shell. */
  #mobile-view a{
    color:inherit;
    text-decoration:none;
  }
  #mobile-view .see-all{
    color:var(--accent);
  }

  /* Real mobile viewport — no fake device frame, no outer mockup padding. */
  #mobile-view{
    display:block;
    width:100%;
    min-width:0;
    min-height:100dvh;
    padding:0;
    align-items:initial;
    justify-content:initial;
  }
  #mobile-view > div{
    width:100%!important;
    min-width:0;
  }
  #mobile-view .frame{
    width:100%;
    max-width:none;
    min-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    position:relative;
    background:transparent;
  }
  #mobile-view .screen{
    width:100%;
    height:auto;
    min-height:100dvh;
    overflow:visible;
    padding-bottom:calc(86px + env(safe-area-inset-bottom, 0px));
  }

  /* Header becomes a normal full-width sticky site header. */
  #mobile-view header{
    position:sticky;
    top:0;
    z-index:80;
    width:100%;
    min-height:58px;
    padding:11px 14px;
    background:rgba(14,19,29,.96);
    border-bottom:1px solid var(--border);
    box-shadow:0 6px 22px rgba(0,0,0,.16);
  }
  #mobile-view .logo{
    color:var(--text);
    text-decoration:none;
    gap:9px;
    font-size:15px;
    font-weight:700;
  }
  #mobile-view .logo-mark{
    width:27px;
    height:27px;
    border-radius:8px;
  }
  #mobile-view .search-bar{
    width:100%;
    padding:10px 12px 12px;
    background:rgba(14,19,29,.96);
  }

  /* Consistent page gutters for every section. */
  #mobile-view .screen > section:not(:first-of-type){
    padding:0 12px;
    margin:0 0 17px;
  }
  #mobile-view .screen > section:first-of-type{
    padding:12px 12px 0;
    margin:0 0 17px;
  }
  #mobile-view .section-head{
    min-height:22px;
    margin:0 2px 9px;
    align-items:center;
  }
  #mobile-view .section-title{
    font-size:13.5px;
    line-height:1.2;
  }
  #mobile-view .see-all{
    font-size:12px;
    line-height:1.2;
    padding:3px 0 3px 8px;
  }

  /* Hero: keep the mockup shape, but not the oversized 16:10 production
     override that consumed a quarter of a phone screen. */
  #mobile-view .hero{
    width:100%;
    height:clamp(172px,44vw,190px);
    min-height:0;
    aspect-ratio:auto;
    border-radius:13px;
    border:1px solid var(--border);
  }
  #mobile-view .hero-text{
    left:12px;
    right:12px;
    bottom:11px;
  }
  #mobile-view .hero-text .t{
    font-size:14.5px;
    line-height:1.28;
    -webkit-line-clamp:2;
  }
  #mobile-view .hero-text .m{
    font-size:10.5px;
    margin-top:4px;
  }

  /* Every content rail gets the exact same outer geometry. */
  #mobile-view .codes-strip,
  #mobile-view .upcoming-strip,
  #mobile-view .news-list,
  #mobile-view .games-strip{
    width:100%;
    max-width:100%;
    margin:0;
    padding:10px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(14,19,29,.62);
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-padding-inline:10px;
  }
  #mobile-view .codes-strip::-webkit-scrollbar,
  #mobile-view .upcoming-strip::-webkit-scrollbar,
  #mobile-view .news-list::-webkit-scrollbar,
  #mobile-view .games-strip::-webkit-scrollbar{
    display:none;
  }

  /* Codes: two readable cards plus a visible hint of the next card. */
  #mobile-view .codes-strip{
    gap:8px;
    scroll-snap-type:x proximity;
  }
  #mobile-view .code-card{
    flex:0 0 150px;
    width:150px;
    min-width:150px;
    min-height:98px;
    padding:10px;
    border-radius:9px;
    scroll-snap-align:start;
  }
  #mobile-view .code-card .g{
    font-size:11.8px;
    margin-bottom:7px;
  }
  #mobile-view .code-card .d{
    font-size:10px;
    margin-top:7px;
  }
  #mobile-view .code-pill{
    min-height:28px;
    padding:5px 7px;
  }
  #mobile-view .code-pill span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10.5px;
  }

  /* Upcoming: the previous 116px cards were too compressed on an actual
     phone. Make them readable while still exposing the next swipe target. */
  #mobile-view .upcoming-strip{
    gap:8px;
    scroll-snap-type:x proximity;
  }
  #mobile-view .upcoming-card{
    flex:0 0 145px;
    width:145px;
    min-width:145px;
    padding:6px;
    scroll-snap-align:start;
  }
  #mobile-view .upcoming-card .cover{
    height:82px;
    margin-bottom:6px;
  }
  #mobile-view .upcoming-card .g{
    font-size:11px;
    line-height:1.25;
  }

  /* Latest news: four rows remain one swipe page, but put a real page gap
     between groups so the next page no longer leaks a thumbnail into the
     right edge of every row. */
  #mobile-view .news-list{
    display:grid;
    grid-template-rows:repeat(4,68px);
    grid-auto-flow:column;
    grid-auto-columns:100%;
    column-gap:24px;
    row-gap:0;
    height:292px;
    min-height:292px;
    max-height:292px;
    align-content:start;
    scroll-snap-type:x proximity;
  }
  #mobile-view .news-row{
    width:100%;
    min-width:0;
    height:68px;
    padding:8px 0;
    overflow:hidden;
  }
  #mobile-view .news-row:first-child{
    padding-top:8px;
  }
  #mobile-view .news-row:nth-child(4n+1){
    scroll-snap-align:start;
  }
  #mobile-view .news-thumb{
    width:50px;
    height:50px;
    flex:0 0 50px;
  }
  #mobile-view .news-body .t{
    font-size:12px;
    line-height:1.3;
  }

  /* Popular games: slightly larger, balanced tiles with their names visible. */
  #mobile-view .games-strip{
    gap:10px;
    scroll-snap-type:x proximity;
    align-items:flex-start;
  }
  #mobile-view .game-tile{
    flex:0 0 94px;
    width:94px;
    min-width:94px;
    scroll-snap-align:start;
  }
  #mobile-view .game-tile .cover{
    width:94px;
    height:94px;
    margin-bottom:6px;
    border-radius:10px;
  }
  #mobile-view .game-tile .n{
    width:94px;
    font-size:10.5px;
    line-height:1.25;
  }

  /* Footer follows normal document flow; the fixed nav no longer belongs to
     an artificial 760px inner scroller. */
  #mobile-view footer{
    margin:4px 12px 12px;
    padding:18px 14px 20px;
  }

  /* True viewport-fixed mobile navigation. */
  #mobile-view .tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    z-index:1000;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:rgba(14,19,29,.97);
    border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(0,0,0,.28);
  }
  #mobile-view .tab{
    min-width:0;
    padding:7px 0 8px;
  }
  #mobile-view .tab span{
    font-size:9.5px;
  }
  #mobile-view .tab-ic{
    width:40px;
    height:25px;
    font-size:15px;
  }

  /* More sheet / backdrop / toast must follow the viewport too, not the old
     mock-phone frame. */
  #mobile-view .sheet-backdrop{
    position:fixed;
    inset:0 0 calc(59px + env(safe-area-inset-bottom, 0px));
    z-index:990;
  }
  #mobile-view .sheet{
    position:fixed;
    left:0;
    right:0;
    bottom:calc(59px + env(safe-area-inset-bottom, 0px));
    z-index:995;
    max-height:min(70vh,520px);
    overflow-y:auto;
  }
  #mobile-view .copied-toast{
    position:fixed;
    bottom:calc(78px + env(safe-area-inset-bottom, 0px));
    z-index:1010;
  }
}


/* ============================================================
   MOBILE SWIPE v5 — native horizontal scrolling reliability
   ============================================================ */
@media (max-width:860px){
  #mobile-view .codes-strip,
  #mobile-view .upcoming-strip,
  #mobile-view .news-list,
  #mobile-view .games-strip{
    -webkit-overflow-scrolling:touch;
    overflow-x:scroll;
    overflow-y:hidden;
  }
  #mobile-view .codes-strip img,
  #mobile-view .upcoming-strip img,
  #mobile-view .news-list img,
  #mobile-view .games-strip img{
    pointer-events:none;
  }
  /* Keep real controls tappable above the rail gesture surface. */
  #mobile-view .code-pill{
    pointer-events:auto;
  }
}

/* ============================================================
   HOMEPAGE v12 · LOWER-RAIL PANEL + SECTION-HEADING ALIGNMENT
   Presentation only. No data selection, ranking, inventory, or swipe logic.
   ============================================================ */

/* One exact desktop heading scale for Trending Codes, Upcoming Games,
   Latest News, and Popular Games. */
#desktop-view .block-head h2{
  margin:0!important;
  font-size:16px!important;
  line-height:1.2!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
}

/* The outer panel owns spacing and clipping. The inner rail only scrolls.
   This fixes both the missing left inset and the next-page sliver on the right. */
#desktop-view .split-block .home-lower-panel{
  box-sizing:border-box;
  width:100%;
  height:432px;
  min-height:432px;
  max-height:432px;
  padding:16px;
  overflow:hidden;
  background:rgba(14,19,29,.62);
  border:1px solid var(--border);
  border-radius:14px;
}

#desktop-view .split-block .home-lower-panel > .news-list,
#desktop-view .split-block .home-lower-panel > .games-grid{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  max-height:none;
  margin:0;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-padding-inline:0;
}

/* Four Latest News rows make one exact horizontal page. */
#desktop-view .split-block .home-lower-panel > .news-list{
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:100%;
  column-gap:16px;
  row-gap:0;
  align-content:stretch;
  scroll-snap-type:x mandatory;
}

/* Four Popular Games tiles make one exact 2x2 horizontal page. */
#desktop-view .split-block .home-lower-panel > .games-grid{
  display:grid;
  grid-template-columns:none;
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 16px) / 2);
  column-gap:16px;
  row-gap:12px;
  align-content:stretch;
  scroll-snap-type:x mandatory;
}

@media (max-width:980px) and (min-width:861px){
  #desktop-view .split-block .home-lower-panel{
    height:420px;
    min-height:420px;
    max-height:420px;
  }
}

/* One exact mobile heading scale for all four Homepage sections. */
@media (max-width:860px){
  #mobile-view .section-head{
    align-items:center!important;
    min-height:22px!important;
  }
  #mobile-view .section-title{
    font-size:14px!important;
    line-height:1.2!important;
    font-weight:600!important;
    letter-spacing:-.005em!important;
  }
}