
:root{
  --bg:#cfefff;
  --card:#ffffff;
  --text:#0d5687;
  --muted:#5d91b5;
  --soft:#eaf7ff;
  --dark:#3f464f;
  --green:#35d978;
  --purple:#5865f2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
body{min-height:100vh}
.wrap{max-width:860px;margin:0 auto;padding:28px 18px 50px}
.hero{text-align:center;padding-top:18px}
.logo{width:152px;height:152px;object-fit:cover;border-radius:50%;border:6px solid #fff;box-shadow:0 6px 22px rgba(13,86,135,.12)}
h1{font-size:42px;line-height:1.1;margin:24px 0 12px;font-weight:800}
.subtitle{font-size:20px;font-weight:700;color:#2c6fa0}
.note{margin:26px auto 16px;background:#fff;border-radius:24px;padding:16px 20px;max-width:720px;font-size:18px;font-weight:700}
.section-title{font-size:26px;font-weight:800;text-align:center;margin:34px 0 14px}
.grid{display:grid;gap:16px}
.lang-card,.action{
  width:100%;border:none;border-radius:26px;background:#fff;padding:24px 28px;
  text-decoration:none;color:var(--text);display:flex;align-items:center;gap:18px;
  box-shadow:0 4px 14px rgba(13,86,135,.05);font-size:23px;font-weight:800
}
.lang-card small,.action small{display:block;font-size:15px;font-weight:600;color:var(--muted);margin-top:4px}
.badge{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef7ff;font-size:18px;font-weight:900;flex:0 0 auto}
.arrow{margin-left:auto;color:#92b4cd;font-size:30px}
.action .icon{width:54px;text-align:center;font-size:30px;flex:0 0 auto}
.action.disabled{opacity:.55;cursor:not-allowed}
.copy-card{background:#fff;border-radius:28px;padding:42px 24px;text-align:center;margin-top:38px}
.shield{font-size:78px}
.copy-title{font-size:31px;font-weight:800;color:#111;margin-top:18px}
.copy-desc{font-size:18px;color:#5b5f66;line-height:1.5;margin:12px auto 22px;max-width:620px}
.copy-url{display:inline-block;font-size:24px;font-weight:800;color:#111;padding:14px 18px;border-radius:16px;background:#f4f6f8;cursor:pointer;word-break:break-all}
.toast{margin:18px auto 0;display:none;background:#777;color:#fff;padding:13px 22px;border-radius:16px;max-width:220px;font-weight:800}
.browser-hint{margin-top:24px;font-size:16px;color:#708392}

.footer{text-align:center;margin-top:36px;padding-top:18px;border-top:1px solid rgba(13,86,135,.25);color:#111;font-weight:700}
@media (max-width:600px){
  .wrap{padding:18px 14px 34px}
  .logo{width:118px;height:118px}
  h1{font-size:34px}
  .subtitle{font-size:17px}
  .lang-card,.action{padding:19px 18px;font-size:19px;border-radius:22px}
  .badge{width:56px;height:56px}
  .copy-title{font-size:26px}
  .copy-url{font-size:20px}
}

.platform-icon{width:38px;height:38px;display:block;margin:0 auto}
.action .icon.platform{display:flex;align-items:center;justify-content:center}

/* FINAL: compact manufacturer promo gallery */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.gallery img{width:100%;display:block;border-radius:18px;aspect-ratio:16/9;object-fit:cover;cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999;padding:18px}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:16px}
.lightbox-close{position:fixed;top:16px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;font-size:26px;font-weight:800}
@media(max-width:600px){
 .gallery{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding:2px 4px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .gallery::-webkit-scrollbar{display:none}
 .gallery img{flex:0 0 84%;scroll-snap-align:center}
}

/* FINAL V2: fixed four-card Game Features grid, no horizontal swipe */
.gallery{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  overflow:visible !important;
  padding:0 !important;
  scroll-snap-type:none !important;
}
.gallery img{
  width:100% !important;
  max-width:none !important;
  flex:none !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  scroll-snap-align:none !important;
  border-radius:16px !important;
}
@media(max-width:600px){
  .gallery{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    overflow:visible !important;
  }
  .gallery img{
    width:100% !important;
    flex:none !important;
    aspect-ratio:16/9 !important;
  }
}

/* FINAL 3-image layout: one row, no swipe */
.gallery-three{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  overflow:visible !important;
  padding:0 !important;
  scroll-snap-type:none !important;
}
.gallery-three img{
  width:100% !important;
  min-width:0 !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:12px !important;
  cursor:zoom-in;
}
@media(max-width:600px){
  .gallery-three{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
  }
  .gallery-three img{
    width:100% !important;
    flex:none !important;
    border-radius:9px !important;
  }
}
