:root {
  color-scheme: dark;
  --bg: #040a13;
  --navy: #071326;
  --navy-2: #0a1c35;
  --blue: #1475ff;
  --blue-bright: #00a2ff;
  --cyan: #27d4ff;
  --gold: #ffb800;
  --text: #f7faff;
  --muted: #7587a2;
  font-family: Inter, Impact, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 2%, rgba(22,105,235,.28), transparent 26%),
    radial-gradient(circle at 8% 46%, rgba(0,120,255,.12), transparent 24%),
    radial-gradient(circle at 92% 72%, rgba(255,184,0,.08), transparent 24%),
    #030810;
  color: var(--text);
}

button { font: inherit; color: inherit; cursor: pointer; }

.background-lines {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(128deg, transparent 0 34%, rgba(0,129,255,.06) 34.2%, transparent 34.7%),
    linear-gradient(52deg, transparent 0 68%, rgba(0,129,255,.05) 68.2%, transparent 68.7%),
    repeating-linear-gradient(112deg, transparent 0 85px, rgba(255,255,255,.012) 86px, transparent 87px);
}
.background-lines::after {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: 3%;
  height: 260px;
  border: 1px solid rgba(26,127,255,.12);
  transform: skewY(-9deg);
  box-shadow: 0 0 45px rgba(17,110,255,.08);
}

main {
  width: min(100%, 620px);
  min-height: 100vh;
  margin-inline: auto;
  padding: max(24px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
}

.brand-header {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 23px;
  padding-inline: 3px;
}
.brand-logo { width: 62px; height: 62px; padding: 2px; border: 1px solid rgba(255,184,0,.4); border-radius: 17px; background: linear-gradient(145deg, var(--gold), #1d73e7 62%, var(--cyan)); box-shadow: 0 14px 40px rgba(11,89,210,.25); }
.brand-logo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 14px; }
.brand-copy p { margin: 0 0 3px; color: #6e829f; font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.brand-copy h1 { margin: 0; font-size: 25px; line-height: 1; letter-spacing: -.055em; font-style: italic; }
.brand-copy h1 span { color: var(--gold); }
.online-badge { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(39,212,255,.16); border-radius: 20px; background: rgba(6,20,38,.72); color: #7c91ae; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.online-badge i { width: 6px; height: 6px; border-radius: 50%; background: #32e798; box-shadow: 0 0 10px #32e798; }

.banner-list { display: grid; gap: 15px; }
.link-banner {
  position: relative;
  width: 100%;
  height: 176px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(24,121,255,.55);
  border-radius: 19px;
  background:
    linear-gradient(106deg, rgba(4,14,28,.98) 0 53%, rgba(8,35,67,.95) 78%, rgba(3,13,26,.98) 100%);
  box-shadow: 0 16px 45px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.035), 0 0 18px rgba(18,107,255,.07);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.link-banner::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -10%;
  right: 34%;
  bottom: 30px;
  height: 2px;
  transform: skewY(-16deg);
  background: linear-gradient(90deg, transparent, var(--blue-bright), var(--cyan));
  box-shadow: 0 0 14px var(--blue);
}
.link-banner::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -30px 70px rgba(0,0,0,.18);
  pointer-events: none;
}
.link-banner:active { transform: scale(.985); }
.link-banner:hover { transform: translateY(-2px); border-color: rgba(58,151,255,.9); box-shadow: 0 20px 52px rgba(0,0,0,.42), 0 0 25px rgba(18,107,255,.12); }

.card-grid { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 17px 17px; mask-image: linear-gradient(90deg, black, transparent 84%); }
.card-shine { position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; background: rgba(0,126,255,.18); filter: blur(35px); }

.banner-copy { position: absolute; z-index: 3; left: 24px; top: 24px; display: grid; }
.banner-copy small { margin-bottom: 7px; color: #7291ba; font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.banner-copy strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; color: #fff; font-size: clamp(39px, 11vw, 54px); line-height: .77; letter-spacing: -.025em; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.banner-copy strong em { color: var(--blue-bright); font-style: normal; text-shadow: 0 0 22px rgba(0,146,255,.3), 0 4px 0 rgba(0,0,0,.3); }
.banner-cta { width: max-content; display: flex; align-items: center; gap: 7px; margin-top: 15px; padding: 6px 9px; border: 1px solid rgba(94,164,255,.22); border-radius: 6px; background: rgba(19,95,213,.13); color: #9fcaff; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.banner-cta b { color: #fff; font-size: 11px; }
.mini-brand { position: absolute; z-index: 3; right: 18px; bottom: 12px; color: rgba(255,255,255,.38); font-size: 7px; font-weight: 950; font-style: italic; letter-spacing: .08em; }

.banner-art { position: absolute; z-index: 2; right: 6px; top: 0; width: 48%; height: 100%; pointer-events: none; }
.telegram-disc { position: absolute; right: 27px; top: 36px; width: 85px; height: 85px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.2); border-radius: 50%; background: linear-gradient(145deg, #39c8ff, #087ddf); box-shadow: 0 16px 30px rgba(0,0,0,.36), 0 0 25px rgba(0,144,255,.27); transform: rotate(-7deg); }
.telegram-disc svg { width: 46px; height: 46px; fill: white; transform: translate(-2px, 2px); }
.football { position: absolute; z-index: 2; display: block; filter: drop-shadow(0 10px 9px rgba(0,0,0,.5)); font-style: normal; }
.ball-one { right: 108px; top: 80px; font-size: 44px; transform: rotate(-19deg); }
.ball-two { right: -10px; top: 9px; font-size: 33px; transform: rotate(14deg); opacity: .8; }

.partner-banner { border-color: rgba(255,184,0,.45); background: linear-gradient(106deg, rgba(6,14,26,.98) 0 53%, rgba(48,35,5,.78) 80%, rgba(8,15,26,.98) 100%); }
.partner-banner::before { background: linear-gradient(90deg, transparent, var(--gold), #ffe18b); box-shadow: 0 0 14px rgba(255,184,0,.7); }
.partner-banner .card-shine { background: rgba(255,184,0,.15); }
.partner-banner .banner-copy strong em { color: var(--gold); text-shadow: 0 0 22px rgba(255,184,0,.22), 0 4px 0 rgba(0,0,0,.3); }
.partner-banner .banner-cta { border-color: rgba(255,184,0,.2); background: rgba(255,184,0,.08); color: #ffd776; }
.partner-banner:hover { border-color: rgba(255,194,49,.85); box-shadow: 0 20px 52px rgba(0,0,0,.42), 0 0 25px rgba(255,184,0,.1); }
.star-shape { position: absolute; right: 23px; top: 17px; color: var(--gold); font-size: 112px; line-height: 1; filter: drop-shadow(0 16px 15px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(255,184,0,.2)); transform: rotate(7deg); }
.age-chip { position: absolute; right: 97px; bottom: 24px; display: grid; place-items: center; width: 47px; height: 47px; border: 2px solid rgba(255,255,255,.3); border-radius: 50%; background: #091426; box-shadow: 0 9px 20px rgba(0,0,0,.4); color: #fff; font-size: 13px; font-weight: 950; }

.youtube-banner { border-color: rgba(255,62,86,.32); background: linear-gradient(106deg, rgba(5,14,27,.98) 0 53%, rgba(52,12,24,.72) 80%, rgba(7,14,26,.98) 100%); }
.youtube-banner::before { background: linear-gradient(90deg, transparent, #ff304f, #ff8191); box-shadow: 0 0 14px rgba(255,48,79,.65); }
.youtube-banner .card-shine { background: rgba(255,48,79,.14); }
.youtube-banner .banner-copy strong em { color: #ff4962; text-shadow: 0 0 22px rgba(255,48,79,.25), 0 4px 0 rgba(0,0,0,.3); }
.youtube-banner .banner-cta { border-color: rgba(255,74,96,.2); background: rgba(255,48,79,.07); color: #ff9dab; }
.youtube-banner:hover { border-color: rgba(255,86,106,.75); box-shadow: 0 20px 52px rgba(0,0,0,.42), 0 0 25px rgba(255,48,79,.09); }
.youtube-disc { position: absolute; right: 15px; top: 20px; width: 101px; height: 74px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.14); border-radius: 20px; background: linear-gradient(145deg, #ff314f, #be081f); box-shadow: 0 16px 27px rgba(0,0,0,.45), 0 0 22px rgba(255,48,79,.18); transform: rotate(5deg); }
.youtube-disc i { width: 0; height: 0; margin-left: 7px; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 27px solid white; filter: drop-shadow(0 2px 1px rgba(0,0,0,.2)); }
.mic-shape { position: absolute; right: 106px; bottom: 18px; width: 24px; height: 69px; border: 3px solid rgba(255,255,255,.7); border-radius: 15px; background: linear-gradient(#202e42, #07111f); transform: rotate(-24deg); box-shadow: 0 12px 18px rgba(0,0,0,.45); }
.mic-shape::before { content: ""; position: absolute; left: -10px; top: 30px; width: 38px; height: 29px; border: 3px solid rgba(255,255,255,.6); border-top: 0; border-radius: 0 0 22px 22px; }
.mic-shape i { position: absolute; left: 50%; bottom: -15px; width: 3px; height: 16px; transform: translateX(-50%); background: rgba(255,255,255,.65); }

.safe-area { padding-top: 26px; }
.safe-card { display: grid; grid-template-columns: 52px 1px 1fr 43px; align-items: center; gap: 13px; padding: 12px 13px; border: 1px solid rgba(48,139,255,.42); border-radius: 13px; background: rgba(4,18,35,.9); box-shadow: 0 0 20px rgba(18,107,255,.08), inset 0 1px rgba(255,255,255,.03); }
.safe-card img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.safe-divider { width: 1px; height: 38px; background: linear-gradient(transparent, var(--blue-bright), transparent); }
.safe-copy { display: grid; gap: 3px; }
.safe-copy strong { color: #8fc6ff; font-size: 8px; letter-spacing: .07em; }
.safe-copy small { color: #c5d3e6; font-size: 8px; font-weight: 850; }
.safe-age { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: #aebdd2; font-size: 10px; font-weight: 950; }
.disclaimer { margin: 11px 0 0; color: #53657f; font-size: 8px; text-align: center; }
footer { display: flex; justify-content: space-between; padding: 21px 3px 0; color: #3f526d; font-size: 8px; }

dialog { width: min(390px, calc(100% - 30px)); padding: 0; border: 1px solid rgba(35,130,255,.4); border-radius: 20px; background: #08172b; color: var(--text); box-shadow: 0 35px 100px rgba(0,0,0,.7); }
dialog::backdrop { background: rgba(1,5,12,.84); backdrop-filter: blur(8px); }
dialog form { position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px 24px 23px; text-align: center; }
.close-dialog { position: absolute; right: 13px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255,255,255,.04); color: #8697b0; font-size: 20px; }
.age-mark { display: grid; place-items: center; width: 61px; height: 61px; margin-bottom: 16px; border: 1px solid rgba(255,184,0,.28); border-radius: 50%; background: rgba(255,184,0,.05); font-weight: 900; }
dialog h2 { margin: 0 0 9px; font-size: 23px; letter-spacing: -.03em; }
dialog p { margin: 0 0 21px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.confirm-age, .cancel-age { width: 100%; border-radius: 11px; font-weight: 800; }
.confirm-age { padding: 12px; border: 1px solid rgba(126,182,255,.4); background: linear-gradient(135deg, #2c7dff, #124bcf); }
.cancel-age { margin-top: 8px; padding: 9px; border: 0; background: transparent; color: #7486a1; font-size: 12px; }

.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 20; width: max-content; max-width: calc(100% - 32px); padding: 11px 15px; border: 1px solid rgba(35,130,255,.3); border-radius: 11px; background: #10213b; box-shadow: 0 18px 55px rgba(0,0,0,.38); color: #dbe9ff; opacity: 0; transform: translate(-50%, 18px); pointer-events: none; transition: .22s ease; font-size: 11px; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  main { padding-top: 38px; }
  .link-banner { height: 190px; }
  body::before { content: ""; position: fixed; z-index: -1; inset: 16px calc(50% - 335px); border: 1px solid rgba(255,255,255,.03); border-radius: 30px; background: rgba(2,8,17,.22); box-shadow: 0 45px 120px rgba(0,0,0,.3); }
}

@media (max-width: 390px) {
  main { padding-inline: 13px; }
  .brand-header { grid-template-columns: 54px 1fr auto; }
  .brand-logo { width: 54px; height: 54px; }
  .link-banner { height: 164px; }
  .banner-copy { left: 18px; top: 21px; }
  .banner-copy strong { font-size: 38px; }
  .banner-art { right: -5px; width: 47%; transform: scale(.89); transform-origin: center right; }
  .safe-card { grid-template-columns: 46px 1px 1fr 39px; gap: 9px; }
  .safe-card img { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}