:root{color-scheme:dark;--violet:#8a42ff;--cyan:#31e5f3}.landing-page *{box-sizing:border-box}html,body{height:100%;margin:0}.landing-page{font-family:Nunito,Arial,sans-serif;background:#120720;color:#fff;overflow:hidden}.choice{position:relative;display:flex;width:100%;height:100%;min-height:640px;background:#120720}.choice-heading{position:absolute;z-index:8;top:28px;left:50%;width:min(760px,70vw);transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 3px 18px #000}.choice-logo{display:block;margin-bottom:8px;font:900 20px Rubik,sans-serif}.choice-heading h1{margin:0;font:900 clamp(34px,4vw,68px)/1 Rubik,sans-serif;letter-spacing:-.045em}.choice-heading h1 em{font-style:normal;background:linear-gradient(90deg,#ec79ff,#5ce6ff);background-clip:text;color:transparent}.choice-heading p{margin:14px 0 0;font-size:clamp(11px,1vw,16px);font-weight:800;letter-spacing:.38em;text-transform:uppercase}.choice-panel{position:relative;display:block;flex:1;min-width:0;height:100%;overflow:hidden;color:#fff;text-decoration:none;transition:flex .65s cubic-bezier(.2,.8,.2,1),filter .45s ease;isolation:isolate}.choice:hover .choice-panel{flex:.82;filter:saturate(.8) brightness(.8)}.choice .choice-panel:hover{flex:1.18;filter:saturate(1.15) brightness(1)}.choice-panel:focus-visible{outline:4px solid #fff;outline-offset:-8px}.choice-panel--dolls{background:linear-gradient(125deg,#72270d,#d46b2e 44%,#4b1327)}.choice-panel--club{background:linear-gradient(130deg,#0a123e,#173b73 42%,#39157b)}.choice-panel::before{content:"";position:absolute;z-index:-3;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.8,.2,1);transform:scale(1.04)}.choice-panel:hover::before{transform:scale(1)}.choice-panel--dolls::before{background-image:url('../media/stock/balloons.webp');opacity:.5}.choice-panel--club::before{background-image:url('../media/stock/disco.webp');opacity:.62}.choice-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(9,3,21,.25),rgba(9,3,21,.03) 38%,rgba(9,3,21,.9))}.choice-character{position:absolute;z-index:-2;display:block;max-width:none;filter:drop-shadow(0 16px 28px rgba(0,0,0,.32));transition:transform .65s cubic-bezier(.2,.8,.2,1)}.choice-character--dolls{height:91%;right:-11%;bottom:-5%}.choice-character--club{width:105%;height:auto;left:-2%;bottom:-3%}.choice-panel:hover .choice-character{transform:scale(1.025)}.choice-copy{position:absolute;z-index:3;left:clamp(30px,5vw,92px);bottom:clamp(44px,7vh,92px);display:flex;max-width:470px;flex-direction:column;align-items:flex-start;text-shadow:0 3px 16px rgba(0,0,0,.72)}.choice-panel--club .choice-copy{left:clamp(44px,7vw,126px)}.choice-copy small{max-width:280px;margin-bottom:8px;font-size:18px;font-weight:800;line-height:1.2}.choice-copy strong{font:900 clamp(48px,6vw,94px)/.92 Rubik,sans-serif;letter-spacing:-.04em;text-transform:uppercase}.choice-copy>span{max-width:400px;margin-top:12px;font-size:clamp(17px,1.4vw,24px);font-weight:700;line-height:1.25}.choice-copy b{display:flex;align-items:center;justify-content:center;min-width:260px;margin-top:24px;padding:17px 27px;border:2px solid rgba(255,255,255,.76);border-radius:999px;background:rgba(255,255,255,.93);color:#281136;font-size:18px;text-shadow:none;box-shadow:0 12px 30px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s}.choice-panel--club .choice-copy b{background:linear-gradient(90deg,#a54aff,#2de4e8);color:#fff}.choice-copy b i{margin-left:14px;font-size:25px;font-style:normal;transition:transform .2s}.choice-panel:hover .choice-copy b{transform:translateY(-3px);box-shadow:0 16px 35px rgba(0,0,0,.3)}.choice-panel:hover .choice-copy b i{transform:translateX(5px)}.choice-divider{position:absolute;z-index:10;top:50%;left:50%;display:grid;width:68px;height:68px;place-items:center;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:linear-gradient(135deg,#842cf6,#168dde);font:900 31px/1 Rubik,sans-serif;letter-spacing:-8px;padding-right:7px;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 0 25px #28dffc;pointer-events:none}
@media(max-width:760px){.landing-page{overflow:auto}.choice{display:grid;height:auto;min-height:100%;grid-template-rows:minmax(430px,52vh) minmax(430px,52vh)}.choice-heading{position:absolute;top:14px;width:94vw}.choice-logo{font-size:15px}.choice-heading h1{font-size:25px}.choice-heading p{display:none}.choice-panel{height:auto;min-height:430px}.choice:hover .choice-panel,.choice .choice-panel:hover{filter:none}.choice-character--dolls{height:82%;right:-12%;bottom:0}.choice-character--club{width:118%;left:-9%;bottom:0}.choice-copy,.choice-panel--club .choice-copy{left:22px;bottom:25px;max-width:85%}.choice-copy small{font-size:14px}.choice-copy strong{font-size:50px}.choice-copy>span{max-width:290px;font-size:16px}.choice-copy b{min-width:210px;margin-top:15px;padding:12px 20px;font-size:16px}.choice-divider{top:52vh;width:52px;height:52px;font-size:23px}}
@media(prefers-reduced-motion:reduce){.choice-panel,.choice-panel::before,.choice-character,.choice-copy b,.choice-copy b i{transition:none}}
.choice-panel--dolls::before{background-image:url('../art/landing-dolls-v3.webp');background-position:center;opacity:1}
.choice-panel--club::before{background-image:url('../art/landing-club-collage-v3.webp');background-position:center;opacity:1}
@media(max-width:760px){.choice-panel--dolls::before{background-image:url('../art/landing-dolls-mobile-v2.webp');background-position:center 38%}.choice-panel--club::before{background-image:url('../art/landing-club-mobile-v1.webp');background-position:center 42%}}
.choice-divider{transition:left .65s cubic-bezier(.2,.8,.2,1)}
.choice:has(.choice-panel--dolls:hover) .choice-divider{left:59%}
.choice:has(.choice-panel--club:hover) .choice-divider{left:41%}
.choice-note{position:absolute;z-index:4;top:clamp(130px,17vh,190px);font:700 clamp(24px,2vw,38px)/.95 Caveat,cursive;letter-spacing:.01em;color:#fff;text-shadow:0 3px 12px rgba(0,0,0,.8);transform:rotate(-5deg)}
.choice-panel--dolls .choice-note{left:clamp(30px,4vw,74px);text-align:left}
.choice-panel--club .choice-note{right:clamp(30px,4vw,74px);text-align:right;transform:rotate(5deg)}
@media(max-width:760px){.choice-divider{transition:none}.choice:has(.choice-panel--dolls:hover) .choice-divider,.choice:has(.choice-panel--club:hover) .choice-divider{left:50%}.choice-note{top:86px;font-size:25px}.choice-panel--dolls .choice-note{left:18px}.choice-panel--club .choice-note{right:18px}}

/* Landing refinements */
.choice-heading{top:30px;width:94vw;text-shadow:none}
.choice-heading h1{white-space:nowrap;font-size:clamp(32px,3.25vw,60px);text-shadow:0 4px 16px rgba(13,3,26,.45)}
.choice-heading h1 em{background-image:linear-gradient(90deg,#ff9edb 0%,#c681ff 45%,#56edff 100%);filter:drop-shadow(0 0 11px rgba(132,105,255,.55))}
.choice-heading p{margin-top:12px;font-weight:600;letter-spacing:.3em;text-shadow:0 2px 12px rgba(8,3,24,.7)}
.choice-heading p span{display:inline-block;margin-left:.2em;color:#55efff;font-size:1.7em;line-height:.4;text-shadow:0 0 6px #3ceeff,0 0 18px #b64cff;animation:heartGlow 2.2s ease-in-out infinite}
.choice:hover .choice-panel{flex:.66}.choice .choice-panel:hover{flex:1.34}
.choice:has(.choice-panel--dolls:hover) .choice-divider{left:67%}.choice:has(.choice-panel--club:hover) .choice-divider{left:33%}
.choice-panel--dolls::after{content:"";position:absolute;z-index:6;top:-5%;right:-2px;width:96px;height:110%;border-right:3px solid #fff3c6;border-radius:50%;filter:drop-shadow(0 0 5px #ffb33a) drop-shadow(0 0 13px #ff7b4a);pointer-events:none;opacity:.95}
.choice-divider{font-size:0;border-color:#8eefff;background:linear-gradient(135deg,#ff6eb4,#8053ff 50%,#1ddde9);animation:dividerPulse 2.6s ease-in-out infinite}
.choice-divider::before{content:"↔";font:900 28px/1 Rubik,sans-serif;letter-spacing:-4px;padding-right:4px}
.choice:has(.choice-panel--dolls:hover) .choice-divider::before{content:"‹‹"}.choice:has(.choice-panel--club:hover) .choice-divider::before{content:"››"}
.choice-note{font-weight:500;color:#ffe075;text-shadow:0 0 4px #ffb325,0 0 13px rgba(255,112,45,.95);animation:noteFloat 4.6s ease-in-out infinite}
.choice-panel--club .choice-note{color:#74f5ff;text-shadow:0 0 4px #15dff4,0 0 14px rgba(170,63,255,.95);animation-delay:-2.1s}
.choice-doodle{position:absolute;z-index:4;width:clamp(72px,7vw,125px);fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px currentColor);pointer-events:none;animation:doodleGlow 2.8s ease-in-out infinite}
.choice-doodle--crown{left:clamp(34px,5vw,92px);bottom:clamp(278px,32vh,370px);color:#ffce62;transform:rotate(-7deg)}
.choice-doodle--gamepad{left:clamp(44px,7vw,126px);right:auto;bottom:clamp(278px,32vh,370px);color:#62efff;transform:rotate(6deg)}
.choice-copy b{border:2px solid transparent;background-size:100% 100%,260% 100%;background-position:0 0,0 0;animation:buttonShimmer 3.2s linear infinite}
.choice-panel--dolls .choice-copy b{background-image:linear-gradient(115deg,#ffe8aa,#ffbd76),linear-gradient(90deg,#ffdc68,#ff7d4f,#ffe69a,#ff9b57);background-origin:border-box;background-clip:padding-box,border-box;color:#54230e;box-shadow:0 0 18px rgba(255,176,75,.32),0 12px 30px rgba(0,0,0,.2)}
.choice-panel--club .choice-copy b{background-image:linear-gradient(90deg,#9952ff,#27dce8),linear-gradient(90deg,#b563ff,#25f5ff,#ff5bc5,#7265ff);background-origin:border-box;background-clip:padding-box,border-box;color:#fff;box-shadow:0 0 18px rgba(45,228,232,.35),0 12px 30px rgba(0,0,0,.2)}
.choice-panel::before{animation:sceneDrift 14s ease-in-out infinite alternate;background-size:cover}.choice-panel--club::before{animation-delay:-7s}
@keyframes sceneDrift{from{background-position:48% center;transform:scale(1.045)}to{background-position:52% center;transform:scale(1.075)}}
@keyframes noteFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes doodleGlow{0%,100%{opacity:.8;stroke-width:3.4}50%{opacity:1;stroke-width:4.4}}
@keyframes dividerPulse{0%,100%{box-shadow:0 0 0 6px rgba(255,255,255,.1),0 0 19px #28dffc}50%{box-shadow:0 0 0 9px rgba(255,255,255,.16),0 0 31px #d950ff}}
@keyframes heartGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes buttonShimmer{to{background-position:0 0,260% 0}}
@media(max-width:760px){.choice-heading{top:12px}.choice-heading h1{font-size:clamp(19px,6vw,26px);letter-spacing:-.055em}.choice-heading p{display:none}.choice-panel--dolls::after{top:-4%;right:50%;width:105%;height:54px;border:0;border-bottom:2px solid #fff3c6;border-radius:50%;transform:translateX(50%)}.choice-divider::before{content:"↕"}.choice:has(.choice-panel--dolls:hover) .choice-divider::before,.choice:has(.choice-panel--club:hover) .choice-divider::before{content:"↕"}.choice-doodle{width:66px}.choice-doodle--crown{left:20px;bottom:210px}.choice-doodle--gamepad{left:22px;right:auto;bottom:210px}.choice:hover .choice-panel,.choice .choice-panel:hover{flex:initial}.choice-panel::before{animation:none}}
@media(prefers-reduced-motion:reduce){.choice-panel::before,.choice-note,.choice-doodle,.choice-divider,.choice-heading p span,.choice-copy b{animation:none}}

/* Правки читаемости */
/* Затемнение сверху под заголовком: слово «приключение» терялось на пёстром фото клуба */
.choice::before{content:"";position:absolute;z-index:7;left:0;right:0;top:0;height:clamp(150px,22vh,240px);background:linear-gradient(180deg,rgba(12,4,26,.78),rgba(12,4,26,.45) 55%,transparent);pointer-events:none}
.choice-heading h1 em{filter:drop-shadow(0 0 2px rgba(20,6,40,.9)) drop-shadow(0 0 12px rgba(132,105,255,.6))}
/* Рукописные подписи — ниже шапки и на мягкой подложке, чтобы не лежать на лицах и читаться */
.choice-note{top:clamp(150px,21vh,230px);padding:6px 14px 8px;border-radius:18px;background:radial-gradient(closest-side,rgba(12,4,26,.55),rgba(12,4,26,0))}
/* Пока фото грузится (сервер бывает медленным) — тёплая/холодная заливка вместо плоского оранжевого */
.choice-panel--dolls{background:radial-gradient(circle at 60% 35%,#b8612c,#5a1d17 60%,#2a0b1c)}
.choice-panel--club{background:radial-gradient(circle at 40% 35%,#3a2a9a,#141a55 60%,#0a0b2a)}
@media(max-width:760px){
  .choice::before{height:120px}
  .choice-note{top:70px}
}

/* ===== Стык панелей ===== */
/* Компьютер: фото кукол подрезано по той же дуге, что и светящаяся линия, —
   панель клуба заходит под неё, чтобы в вырезах было фото клуба, а не пустота */
.choice-panel--dolls{z-index:2;clip-path:polygon(0 0,calc(100% - 23px) 0,calc(100% - 10px) 10%,calc(100% - 3px) 20%,100% 30%,100% 70%,calc(100% - 3px) 80%,calc(100% - 10px) 90%,calc(100% - 23px) 100%,0 100%)}
.choice-panel--club{z-index:1;margin-left:-30px}
.choice-panel--club .choice-copy{left:clamp(74px,calc(7vw + 30px),156px)}
.choice-panel--club .choice-doodle--gamepad{left:clamp(74px,calc(7vw + 30px),156px)}

/* Кружок между панелями: вместо стрелок — стеклянный значок «или» */
.choice-divider{width:70px;height:70px;padding:0;border:1.5px solid rgba(255,255,255,.75);
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.28),transparent 58%),rgba(22,9,44,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:orGlow 3.2s ease-in-out infinite}
.choice-divider::before,
.choice:has(.choice-panel--dolls:hover) .choice-divider::before,
.choice:has(.choice-panel--club:hover) .choice-divider::before{content:"или";font:600 30px/1 Caveat,cursive;letter-spacing:0;padding:0 0 5px;color:#fff;text-shadow:0 0 8px rgba(255,214,140,.9),0 0 18px rgba(110,230,255,.7)}
@keyframes orGlow{0%,100%{box-shadow:0 0 0 6px rgba(255,255,255,.07),-10px 0 24px rgba(255,170,80,.45),10px 0 24px rgba(70,225,255,.45)}50%{box-shadow:0 0 0 9px rgba(255,255,255,.12),-12px 0 32px rgba(255,170,80,.6),12px 0 32px rgba(70,225,255,.6)}}

/* ===== Телефон: всё на одном экране, без прокрутки, кружка нет ===== */
@media(max-width:760px){
  .landing-page{overflow:hidden}
  .choice{height:100svh;min-height:0;grid-template-rows:1fr 1fr}
  .choice-panel{min-height:0}
  .choice-divider{display:none}
  /* Стык: лёгкий прямой срез наискосок (как линии в коллаже клуба) со светящейся линией.
     Перекрытие всего 16px — фото почти не закрываются */
  /* Стык — ровная горизонтальная светящаяся линия, без срезов и перекрытий */
  .choice-panel--dolls{clip-path:none}
  .choice-panel--dolls::after{top:auto;bottom:0;right:0;left:0;width:auto;height:3px;border:0;border-radius:0;transform:none;
    background:linear-gradient(90deg,rgba(255,243,198,.2),#fff3c6 20%,#fff3c6 80%,rgba(255,243,198,.2));
    filter:drop-shadow(0 0 3px #ffb33a) drop-shadow(0 0 8px rgba(80,225,255,.8))}
  .choice-panel--club{margin-left:0;margin-top:0}
  /* Фото начинается от самого верха; у картинки сверху дорисован запас фона,
     поэтому голова кота всё равно ниже заголовка, а над ним нет пустоты */
  .choice-panel--dolls::before{top:0;background-position:center top}
  .choice-panel--club .choice-copy,.choice-panel--club .choice-doodle--gamepad{left:22px}
  /* Размеры по высоте экрана, чтобы обе панели влезали и на маленьких телефонах */
  .choice-copy,.choice-panel--club .choice-copy{bottom:clamp(14px,2.6svh,26px)}
  .choice-copy strong{font-size:clamp(34px,6svh,50px)}
  .choice-copy>span{margin-top:6px;font-size:clamp(14px,2svh,16px)}
  .choice-copy b{min-width:190px;margin-top:clamp(8px,1.6svh,15px);padding:clamp(9px,1.4svh,12px) 20px;font-size:15px}
  .choice-note{top:clamp(44px,8svh,70px);font-size:clamp(19px,3svh,25px)}
  .choice-panel--club .choice-note{top:clamp(40px,7svh,64px)}
  .choice-doodle{width:clamp(44px,7svh,62px)}
  .choice-doodle--crown,.choice-doodle--gamepad{bottom:clamp(150px,24svh,200px)}
}
/* ===== Уход со страницы после выбора ===== */
.choice.is-leaving{pointer-events:none}
/* Запрет выделения и сохранения картинок на главной (дополняет скрипт в index.html) */
.landing-page{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.choice.is-leaving .choice-panel{transition:flex .38s cubic-bezier(.7,0,.25,1),opacity .3s ease,filter .3s ease!important}
.choice.is-leaving--dolls .choice-panel--dolls,.choice.is-leaving--club .choice-panel--club{flex:1 1 100%!important;filter:none!important}
.choice.is-leaving--dolls .choice-panel--club,.choice.is-leaving--club .choice-panel--dolls{flex:.0001!important;opacity:0}
.choice.is-leaving::before,.choice.is-leaving .choice-heading,.choice.is-leaving .choice-divider,.choice.is-leaving .choice-copy,.choice.is-leaving .choice-note,.choice.is-leaving .choice-doodle{opacity:0;transition:opacity .3s ease}
.choice.is-leaving--club .choice-panel--club{margin-left:0;transition:flex .38s cubic-bezier(.7,0,.25,1),margin .38s ease!important}
@media(max-width:760px){
  .choice{transition:grid-template-rows .38s cubic-bezier(.7,0,.25,1)}
  .choice.is-leaving--dolls{grid-template-rows:1fr 0fr}
  .choice.is-leaving--club{grid-template-rows:0fr 1fr}
  .choice.is-leaving--club .choice-panel--club{margin-top:0}
}

/* Совсем низкие экраны: убираем декоративные подписи и значки, остаётся главное */
@media(max-width:760px) and (max-height:700px){
  .choice-note,.choice-doodle{display:none}
}

/* Старые iPhone (iOS до 15.4) не знают единицы svh — те же правила в vh */
@supports not (height: 1svh) {
  @media(max-width:760px){
    .choice{height:100vh;min-height:0;grid-template-rows:1fr 1fr}
    .choice-panel--dolls::before{top:0;background-position:center top}
    .choice-copy,.choice-panel--club .choice-copy{bottom:clamp(14px,2.6vh,26px)}
    .choice-copy strong{font-size:clamp(34px,6vh,50px)}
    .choice-copy>span{margin-top:6px;font-size:clamp(14px,2vh,16px)}
    .choice-copy b{min-width:190px;margin-top:clamp(8px,1.6vh,15px);padding:clamp(9px,1.4vh,12px) 20px;font-size:15px}
    .choice-note{top:clamp(44px,8vh,70px);font-size:clamp(19px,3vh,25px)}
    .choice-panel--club .choice-note{top:clamp(40px,7vh,64px)}
    .choice-doodle{width:clamp(44px,7vh,62px)}
    .choice-doodle--crown,.choice-doodle--gamepad{bottom:clamp(150px,24vh,200px)}
  }
}

/* Фирменный курсор: фиолетовая стрелка с искоркой, над кнопками и ссылками — розовая ручка с маникюром, сердечком и блёсткой */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2v20l5.5-5 3.5 8 3.5-1.5-3.5-7.7h7.5z' fill='%237B2FF7' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M22 2l1.3 3 3 1.3-3 1.3-1.3 3-1.3-3-3-1.3 3-1.3z' fill='%23FFC93C'/%3E%3C/svg%3E") 3 2, auto;
  }
  a, button, summary, label, select, [role='button'], .wheel, .wheel *, .pcard, .vplay, .wheel-dot {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M11 3.5a2.5 2.5 0 0 1 5 0V13a2.3 2.3 0 0 1 4.5.6 2.3 2.3 0 0 1 4.5.8 2.3 2.3 0 0 1 4.3 1.2V22c0 4.5-3 8-8 8h-3c-3 0-4.8-1.4-6.4-3.8L4.6 19.6a2.3 2.3 0 0 1 3.7-2.7L11 20z' fill='%23FFD6EA' stroke='%23FF3D9A' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M16 13v5M20.5 14v4.5M25 15v4' stroke='%23FF3D9A' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M11.9 5.8V3.6a1.6 1.6 0 0 1 3.2 0v2.2z' fill='%23FF3D9A'/%3E%3Cpath d='M12.8 3.4h.9' stroke='white' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M25.5 10.6l-2.6-2.4a1.6 1.6 0 0 1 2.6-1.8 1.6 1.6 0 0 1 2.6 1.8z' fill='%23FF3D9A' stroke='white' stroke-width='.8'/%3E%3Cpath d='M5 6.5l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z' fill='%23FFC93C' stroke='white' stroke-width='.6'/%3E%3C/svg%3E") 13 2, pointer !important;
  }
  input, textarea { cursor: text; }
}
