/* styles.css */
:root{--orange:#ff6500;--gold:#ffb000;--ink:#070707;--page-w:min(100vw,480px)}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#000}body{margin:0;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}.page{width:100%;max-width:480px;margin:auto;background:#070707;overflow:hidden}.header{height:68px;display:flex;align-items:center;gap:15px;padding:8px 14px;background:#030303;position:relative;z-index:5}.menu{width:38px;border:0;background:transparent;padding:6px;display:grid;gap:5px}.menu i{height:4px;border-radius:3px;background:#fff}.logo{width:78px;height:48px;display:flex;overflow:hidden;margin-right:auto}.logo img{width:100%;height:100%;object-fit:contain;filter:none}.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:900;background:linear-gradient(180deg,#ff9d00,#ff4b00);border:1.5px solid #ffb000;border-radius:12px;box-shadow:0 5px 15px #ff5a0038}.header-button{min-width:94px;height:42px;font-size:15px}.hero{height:520px;position:relative;background-image:linear-gradient(90deg,rgba(5,5,5,.98) 0%,rgba(16,7,2,.92) 40%,rgba(12,5,0,.1) 68%),url('image/w1nwin-funnel-layout.png');background-size:100% auto;background-position:center -40px;background-repeat:no-repeat;border-radius:0 0 16px 16px}.hero-copy{position:absolute;z-index:2;left:25px;top:34px;width:46%;text-align:left}.hero h1{font-style:italic;line-height:.86;margin:0;color:#fff;text-shadow:0 4px 6px #000;font-size:29px}.hero h1 small{display:block;font-size:30px}.hero h1 strong{display:block;font-size:47px;white-space:nowrap;letter-spacing:-3px}.hero h1 span{color:#ffd42a;text-shadow:2px 2px #bd6500}.hero h1 em{font-size:25px;letter-spacing:-1px}.hero hr{border:0;height:2px;margin:15px 0 12px;background:linear-gradient(90deg,#ffbd00,transparent)}.hero h2{color:#ffad00;font-size:19px;line-height:1.1;margin:0 0 10px}.hero p{font-size:13px;line-height:1.25;margin:0 0 14px}.hero-button{height:44px;padding:0 12px;font-size:14px;white-space:nowrap}.hero-button b,.bonus-button b{font-size:28px;margin-left:10px}.trust{margin:-20px 13px 0;position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #ff9100;border-radius:14px;background:linear-gradient(100deg,#050505,#171717);padding:11px 7px;box-shadow:0 10px 25px #000}.trust article{display:flex;align-items:center;justify-content:center;gap:7px;border-right:1px solid #555}.trust article:last-child{border:0}.trust article>span{font-size:26px}.trust article div{display:grid}.trust b{font-size:10px}.trust small{font-size:9px;color:#ddd}.section-dark{padding:15px 18px;background:radial-gradient(circle at 50% 20%,#24201b,#090909 70%)}.title,.how-title{text-align:center;margin:0 0 10px;font-size:20px;display:flex;align-items:center;justify-content:center;gap:11px}.title span{width:33px;height:4px;background:var(--orange);clip-path:polygon(0 0,100% 0,78% 100%,0 100%)}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.game-card{position:relative;aspect-ratio:1/.96;border:1.5px solid #ffad00;border-radius:13px;overflow:hidden;color:#fff;text-decoration:none;background:#111}.game-art{position:absolute;inset:0;background-image:url('image/w1nwin-funnel-layout.png');background-size:333.333% auto;background-position-y:calc(var(--page-w) * -.80);background-repeat:no-repeat}.game-1 .game-art{background-position-x:0}.game-2 .game-art{background-position-x:50%}.game-3 .game-art{background-position-x:100%}.game-card b{position:absolute;inset:auto 4px 8px;text-align:center;font-size:10px;color:#ffd237;text-shadow:0 2px 3px #000}.dots{text-align:center;padding-top:8px}.dots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#aaa;margin:0 5px}.dots i:first-child{background:#ff9c00}.benefits{margin:0 15px;padding:19px 8px 22px;border:1.5px solid #ff8500;border-radius:13px 13px 0 0;display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(115deg,#070707,#201a15,#070707)}.benefits article{text-align:center;padding:0 5px;border-right:1px solid #555}.benefits article:last-child{border:0}.benefits span{font-size:32px}.benefits h3{font-size:11px;color:#ff7400;margin:7px 0}.benefits p{font-size:9px;line-height:1.35;margin:0}.how{margin:0 15px 16px;padding:17px 10px 15px;background:#fffaf5;color:#111;border-radius:0 0 13px 13px}.how-title{font-size:21px}.how-title span{width:22px;height:1px;background:var(--orange)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.steps article{position:relative;text-align:center;padding:15px 6px 10px;min-height:140px;border:1px solid #eadfd7;border-radius:11px;box-shadow:0 4px 12px #0001}.steps article>b{position:absolute;left:9px;top:9px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--orange)}.steps article>span{font-size:35px}.steps h3{font-size:11px;margin:8px 0}.steps p{font-size:9px;line-height:1.35;margin:0}.steps i{position:absolute;right:-19px;top:46%;font-size:30px;color:var(--orange);font-style:normal}.bonus{margin:0 15px;padding:10px;min-height:96px;border:1px solid #ff7600;border-radius:12px;display:grid;grid-template-columns:65px 1fr auto;align-items:center;gap:8px;background:linear-gradient(100deg,#2a0c00,#17100b,#391300)}.bonus-icon{font-size:45px}.bonus h2{font-size:13px;margin:0 0 4px}.bonus h2 em{color:#ff9700;font-style:normal}.bonus p{font-size:10px;line-height:1.3;margin:0}.bonus-button{height:43px;padding:0 10px;font-size:12px;white-space:nowrap}footer{text-align:center;padding:10px 20px 18px;background:linear-gradient(#181818,#080808)}footer h2{font-size:15px;margin:0 0 8px}footer h2 strong{color:#ff6500;font-style:italic}footer nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}footer a{color:#fff;text-decoration:none;font-size:31px;display:grid;place-items:center}footer a small{font-size:8px;margin-top:4px}@media(max-width:390px){.hero{height:475px}.hero-copy{left:20px;top:28px}.hero h1 strong{font-size:39px}.hero h1 small{font-size:26px}.hero h1 em{font-size:21px}.hero h2{font-size:17px}.hero p{font-size:11px}.hero-button{font-size:12px}.trust{margin-top:-17px}.trust article>span{font-size:20px}.trust b{font-size:9px}.trust small{font-size:8px}.bonus{grid-template-columns:48px 1fr}.bonus-icon{font-size:36px}.bonus-button{grid-column:1/-1;width:100%}}@media(min-width:700px){body{padding:20px 0}.page{border-radius:6px}}

/* game-images.css */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.game-art {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.game-1 .game-art { background-image: url('image/medusa.jpg'); }
.game-2 .game-art { background-image: url('image/gates-of-olympus.jpg'); }
.game-3 .game-art { background-image: url('image/chicken-n-roll.webp'); }

/* hero-image.css */
.hero {
  background-image:
    linear-gradient(90deg, rgba(5, 5, 5, .98) 0%, rgba(10, 6, 3, .88) 39%, rgba(5, 5, 5, .05) 66%),
    url('image/hero-image.jpg?v=20260826c');
  background-size: cover;
  background-position: center top;
}

.how {
  background: linear-gradient(145deg, #151515, #050505);
  color: #fff;
  border: 1px solid #4b2a16;
  border-top-color: #ff7a00;
}

.how-title { color: #fff; }

.steps article {
  background: linear-gradient(145deg, #1b1b1b, #0b0b0b);
  border-color: #3b3029;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .45);
  min-height: 255px;
  padding: 14px 8px;
}

.steps {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.steps article { min-width: 0; }
.steps h3 { color: #ff8a00; line-height: 1.15; }
.steps h4 { color: #fff; font-size: var(--font-body); line-height: 1.2; margin: 8px 0; overflow-wrap: anywhere; }
.how .steps p { color: #cfcfcf; font-size: var(--font-body); line-height: 1.35; overflow-wrap: anywhere; }

.hero-copy {
  top: 50%;
  transform: translateY(-50%);
}

.hero-copy > p {
  width: 250px;
  max-width: 58vw;
  text-wrap: pretty;
}

/* typography.css */
:root {
  --font-big-title: 35px;
  --font-subtitle: 15px;
  --font-body: 12px;
  --font-remark: 10px;
}

/* Big title */
.hero h1,
.hero h1 small,
.hero h1 strong,
.hero h1 em {
  font-size: var(--font-big-title);
}

/* Subtitles and section headings */
.hero h2,
.title,
.how-title,
footer h2 {
  font-size: var(--font-subtitle);
}

/* Main body text, labels and buttons */
.hero p,
.button,
.trust b,
.benefits h3,
.steps h3,
.bonus h2,
.bonus p {
  font-size: var(--font-body);
}

/* Remarks and supporting details */
.trust small,
.game-card b,
.benefits p,
.steps p,
footer a small {
  font-size: var(--font-remark);
}

@media (max-width: 390px) {
  .hero h1,
  .hero h1 small,
  .hero h1 strong,
  .hero h1 em,
  .hero h2,
  .hero p,
  .button,
  .trust b,
  .trust small,
  .bonus h2,
  .bonus p {
    font-size: inherit;
  }

  .hero h1,
  .hero h1 small,
  .hero h1 strong,
  .hero h1 em { font-size: var(--font-big-title); }
  .hero h2 { font-size: var(--font-subtitle); }
  .hero p, .button, .trust b, .bonus h2, .bonus p { font-size: var(--font-body); }
  .trust small { font-size: var(--font-remark); }
}

/* trust-icons.css */
.trust { margin-top: -35px; }

.trust-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  border-radius: 50%;
}

@media (max-width: 390px) {
  .trust-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}

/* social-icons.css */
footer h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.social-icon {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 50%;
}

footer nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 390px) {
  .social-icon {
    width: 40px;
    height: 40px;
  }
}

/* header-transparent.css */
.page { position: relative; }

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: linear-gradient(90deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, .28));
  border-bottom: 1px solid rgba(255, 132, 0, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* step-icons.css */
.step-icon {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 5px;
  object-fit: contain;
}

.step-arrow {
  position: absolute;
  right: -21px;
  top: 48%;
  z-index: 2;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.bonus-icon-image {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 10px;
}

@media (max-width: 390px) {
  .step-icon {
    width: 52px;
    height: 52px;
  }

  .step-arrow {
    right: -18px;
    width: 18px;
    height: 18px;
  }

  .bonus-icon-image {
    width: 46px;
    height: 46px;
  }
}

/* benefit-icons.css */
.benefit-icon {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 390px) {
  .benefit-icon {
    width: 46px;
    height: 46px;
  }
}

/* game-slider.css */
.game-slider {
  position: relative;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.game-slider.is-dragging { cursor: grabbing; }

.game-slide {
  transition: transform .18s ease-out;
  will-change: transform;
}

.game-slider.is-dragging .game-slide { transition: none; }

.game-slider .game-card,
.game-slider .game-art {
  -webkit-user-drag: none;
}

.game-slide[hidden] { display: none; }

.game-4 .game-art { background-image: url('image/great-rhino-megaways.jpg'); }
.game-5 .game-art { background-image: url('image/fire-blaze-sky-queen.jpg'); }
.game-6 .game-art { background-image: url('image/fortune-garuda.webp'); }
.game-7 .game-art { background-image: url('image/fortune-gems.jpeg'); }
.game-8 .game-art { background-image: url('image/joker-jewels.jpeg'); }
.game-9 .game-art { background-image: url('image/starlight princess.jpg'); }

.dots button {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #aaa;
  cursor: pointer;
}

.dots button.is-active { background: #ff9c00; }

/* popular-title-icons.css */
.title-wing {
  display: block;
  width: 42px;
  height: 22px;
  object-fit: contain;
}

@media (max-width: 390px) {
  .title-wing {
    width: 34px;
    height: 18px;
  }
}

/* White and orange theme */
html,
body {
  background: #fff7ef;
}

body { color: #2b1a10; }

.page {
  background: #fffaf6;
  box-shadow: 0 0 35px rgba(139, 62, 8, .14);
}

.header {
  background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 247, 238, .86));
  border-bottom-color: rgba(255, 111, 0, .42);
  box-shadow: 0 5px 18px rgba(122, 48, 0, .10);
}

.hero {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 246, 237, .91) 40%, rgba(255, 244, 232, .10) 68%),
    url('image/hero-image.jpg?v=20260826c');
}

.hero h1,
.hero h1 small,
.hero h1 strong,
.hero h1 em {
  color: #2a160b;
  text-shadow: 0 2px 2px rgba(255, 255, 255, .9);
}

.hero h1 span,
.hero h2 { color: #f36a00; }
.hero h1 span { text-shadow: 1px 1px #ffc04b; }
.hero p { color: #4a3022; }
.hero hr { background: linear-gradient(90deg, #ff7100, rgba(255, 113, 0, 0)); }

.trust {
  background: linear-gradient(110deg, #ffffff, #fff3e7);
  border-color: #ff7900;
  box-shadow: 0 10px 25px rgba(151, 63, 0, .16);
}

.trust article { border-right-color: #efc3a5; }
.trust b { color: #2c1a10; }
.trust small { color: #735746; }

.section-dark {
  background: radial-gradient(circle at 50% 0%, #ffffff, #fff4e9 75%);
}

.title,
.how-title { color: #2b1a10; }

.game-card {
  background: #fff;
  box-shadow: 0 5px 14px rgba(120, 49, 0, .13);
}

.dots button { background: #d8c7bc; }
.dots button.is-active { background: #ff7600; }

.benefits {
  background: linear-gradient(115deg, #ffffff, #fff0e2, #ffffff);
  border-color: #ff7900;
  box-shadow: 0 8px 22px rgba(145, 58, 0, .12);
}

.benefits article { border-right-color: #eac3a8; }
.benefits h3 { color: #e95f00; }
.benefits p { color: #584033; }

.how {
  background: linear-gradient(145deg, #ffffff, #fff5ec);
  color: #2b1a10;
  border-color: #f2c3a4;
  border-top-color: #ff7600;
}

.how-title { color: #2b1a10; }

.steps article {
  background: #ffffff;
  border-color: #f0c9ad;
  box-shadow: 0 5px 16px rgba(129, 51, 0, .10);
}

.steps h4 { color: #382217; }
.how .steps p { color: #6a5041; }

.bonus {
  background: linear-gradient(100deg, #fff8f1, #ffe8d4);
  border-color: #ff7200;
  box-shadow: 0 8px 20px rgba(133, 52, 0, .12);
}

.bonus h2,
.bonus p { color: #3b2417; }
.bonus h2 em { color: #ee6500; }

footer {
  background: linear-gradient(#fffaf6, #ffeede);
  border-top: 1px solid #f4c3a0;
}

footer h2,
footer nav a { color: #2d1a10; }
footer h2 strong { color: #f06400; }