/* ═══════════════════════════════════════════════════════════════
   «Вкус дня» — блок главной mda-medusa.ru
   Все классы с префиксом .fd, переменные объявлены на .fd-wrap:
   на :root их класть нельзя — перебьём тему Aspro.
   ═══════════════════════════════════════════════════════════════ */
.fd-wrap{
    --acc:#a855f7; --acc2:#e845da;
    --ink:#f7f3ff; --muted:rgba(247,243,255,.62); --faint:rgba(247,243,255,.34);
    --hair:rgba(255,255,255,.08);
    --spring:cubic-bezier(.32,.72,0,1);
    --soft:cubic-bezier(.22,1,.36,1);
    container-type:inline-size;position:relative;padding:0 0 8px;
    font:15px/1.6 "Montserrat",system-ui,sans-serif;color:var(--ink)
}
.fd-wrap *{box-sizing:border-box}

/* У Aspro на .drag-block стоит overflow:hidden — сияние блока обрезалось
   ровно по его нижней границе и давало резкую линию на переходе к историям. */
.drag-block.container.FLAVOR_DAY{overflow:visible}

/* дышащее сияние за блоком */
.fd-aura{position:absolute;inset:0 4% auto;height:70%;pointer-events:none;z-index:0;
background:
 radial-gradient(45% 60% at 20% 40%,rgba(168,85,247,.4),transparent 70%),
 radial-gradient(45% 60% at 82% 55%,rgba(232,69,218,.36),transparent 70%);
filter:blur(70px);opacity:.5;animation:fd-breathe 9s var(--soft) infinite alternate}
@keyframes fd-breathe{to{opacity:.82;transform:translateY(-14px) scale(1.05)}}

.fd-shell{position:relative;z-index:1;padding:1px;border-radius:36px;
background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.04) 38%,rgba(232,69,218,.3));
box-shadow:0 40px 110px -60px rgba(168,85,247,.6)}
.fd{position:relative;overflow:hidden;border-radius:35px;padding:40px 44px;
background:
 radial-gradient(70% 100% at 92% -15%,rgba(232,69,218,.24),transparent 62%),
 radial-gradient(60% 90% at 2% 108%,rgba(120,60,255,.26),transparent 60%),
 linear-gradient(180deg,rgba(46,28,84,.92),rgba(28,15,55,.95) 70%);
box-shadow:0 1px 0 0 rgba(255,255,255,.1) inset}
.fd__spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s var(--spring);
background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(232,69,218,.13),transparent 70%)}
.fd:hover .fd__spot{opacity:1}

.fd__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,442px);
gap:56px;align-items:center}

/* ── левая часть ── */
.fd__eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;
background:rgba(255,255,255,.05);border:1px solid var(--hair);
font:600 10px/1 "Montserrat",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,243,255,.82)}
.fd__eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc2);
box-shadow:0 0 14px 3px rgba(232,69,218,.9);animation:fd-blink 2.6s var(--soft) infinite}
@keyframes fd-blink{0%,100%{opacity:1}50%{opacity:.3}}

.fd__h{margin:22px 0 0;font:800 clamp(31px,5cqi,60px)/1 "Unbounded","Montserrat",sans-serif;letter-spacing:-.05em;color:var(--ink)}
.fd__h em{font-style:normal;display:block;margin-top:.14em;
background:linear-gradient(96deg,#d7a2ff,#ff7ae8 45%,#ffd6f7 70%,#d7a2ff);
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:fd-flow 7s linear infinite}
@keyframes fd-flow{to{background-position:220% 0}}
.fd__sub{margin:20px 0 0;color:var(--muted);font-size:15.5px;max-width:42ch}

/* карточка приза */
.fd__prize{position:relative;overflow:hidden;margin:32px 0 0;padding:24px 28px;border-radius:22px;
display:flex;align-items:center;gap:22px;
background:linear-gradient(120deg,rgba(168,85,247,.2),rgba(232,69,218,.1) 60%,rgba(255,255,255,.03));
box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 1px 0 0 rgba(255,255,255,.18) inset}
.fd__prize:before{content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);
animation:fd-shimmer 4.5s var(--soft) infinite}
@keyframes fd-shimmer{0%{left:-60%}55%,100%{left:130%}}
.fd__prize b{font:800 clamp(38px,5.4cqi,56px)/1 "Unbounded","Montserrat",sans-serif;letter-spacing:-.05em;
background:linear-gradient(100deg,#fff,#ffd0f8);-webkit-background-clip:text;background-clip:text;color:transparent}
.fd__prize span{font-size:13.5px;color:rgba(247,243,255,.72);line-height:1.45}
.fd__prize span u{display:block;text-decoration:none;color:var(--faint);font-size:12px;margin-top:3px}

/* код выигрыша */
.fd__code{display:none;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;border-radius:16px;
background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.fd__code.on{display:flex;animation:fd-pop .6s var(--spring) both}
.fd__code b{font:700 21px/1 "Unbounded","Montserrat",sans-serif;letter-spacing:.04em;color:var(--ink);
background:none;-webkit-text-fill-color:currentColor}
.fd__code span{font-size:12px;color:var(--faint);line-height:1.4}
.fd__copy{margin-left:auto;flex:none;padding:9px 15px;border:0;border-radius:999px;cursor:pointer;
font:600 12px/1 "Montserrat",sans-serif;color:var(--ink);background:rgba(255,255,255,.09);
transition:background .5s var(--spring),transform .5s var(--spring)}
.fd__copy:hover{background:rgba(168,85,247,.3)}
.fd__copy:active{transform:scale(.95)}

/* кнопки */
.fd__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.fd-btn{position:relative;display:inline-flex;align-items:center;gap:16px;
padding:8px 8px 8px 26px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
font:600 14.5px/1 "Montserrat",sans-serif;color:#fff;
background:linear-gradient(135deg,var(--acc),var(--acc2));
box-shadow:0 20px 44px -22px rgba(232,69,218,1),0 1px 0 0 rgba(255,255,255,.32) inset;
transition:transform .6s var(--spring),box-shadow .6s var(--spring)}
.fd-btn:hover{box-shadow:0 30px 58px -22px rgba(232,69,218,1);color:#fff;text-decoration:none}
.fd-btn:active{transform:scale(.97)!important}
.fd-btn__ic{width:36px;height:36px;border-radius:50%;flex:none;background:rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;transition:transform .6s var(--spring),background .6s var(--spring)}
.fd-btn:hover .fd-btn__ic{transform:translate(3px,-2px) scale(1.07);background:rgba(255,255,255,.3)}
.fd-btn__ic svg{width:15px;height:15px;stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round}
.fd-btn--ghost{background:rgba(255,255,255,.045);color:var(--ink);
box-shadow:0 0 0 1px var(--hair) inset}
.fd-btn--ghost:hover{background:rgba(168,85,247,.14);box-shadow:0 0 0 1px rgba(168,85,247,.42) inset;color:var(--ink)}
.fd-btn--ghost .fd-btn__ic{background:rgba(255,255,255,.08)}
.fd-btn--ghost .fd-btn__ic svg{stroke:var(--ink)}
.fd__note{margin:18px 0 0;font-size:12.5px;color:var(--faint)}
.fd__h sup{font-size:.3em;vertical-align:super;line-height:0;margin-left:.06em;
-webkit-text-fill-color:currentColor;color:rgba(247,243,255,.5)}
.fd__legal{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:rgba(247,243,255,.42);max-width:56ch}

/* ── правая часть: сцена игры ── */
.fd__stage{position:relative}
.fd__stage:before{content:'';position:absolute;inset:-14% -8%;border-radius:50%;pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%,rgba(232,69,218,.3),transparent 70%);
filter:blur(48px);opacity:.85;animation:fd-breathe 7s var(--soft) infinite alternate}
.fd__panel{position:relative;padding:1px;border-radius:30px;
background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.05) 45%,rgba(232,69,218,.28))}
.fd__panel-in{border-radius:29px;padding:22px 20px 20px;
background:linear-gradient(180deg,rgba(24,12,48,.94),rgba(17,8,36,.96));
box-shadow:0 1px 0 0 rgba(255,255,255,.09) inset;
display:flex;flex-direction:column;align-items:center;gap:14px}

.fd__tries{display:flex;gap:6px;align-self:center;margin-bottom:2px}
.fd__try{width:26px;height:4px;border-radius:99px;background:rgba(255,255,255,.1);
transition:all .6s var(--spring)}
.fd__try.used{background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 12px -1px rgba(232,69,218,.9)}

.fd__board{display:grid;gap:10px;width:100%;max-width:352px;perspective:1100px}
.fd__row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.fd__cell{aspect-ratio:1;border-radius:17px;display:flex;align-items:center;justify-content:center;
font:700 clamp(18px,5cqi,27px)/1 "Unbounded","Montserrat",sans-serif;text-transform:uppercase;color:var(--ink);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 1px 0 0 rgba(255,255,255,.08) inset;
transition:box-shadow .55s var(--spring),background .55s var(--spring),transform .45s var(--spring)}
/* Клетка, в которую сейчас пишем: поле ввода — это сама сетка, отдельного
   поля на странице нет, поэтому активную клетку надо обозначить явно. */
.fd__board .fd__cell.caret{background:linear-gradient(180deg,rgba(168,85,247,.18),rgba(168,85,247,.05));
box-shadow:0 0 0 2px var(--acc) inset,0 1px 0 0 rgba(255,255,255,.14) inset}
/* мигающая палочка в пустой активной клетке — чтобы сетка читалась как поле */
.fd__board .fd__cell.caret:empty:after{content:'';width:2px;height:46%;border-radius:2px;
background:var(--acc2);animation:fd-caret 1.1s steps(1) infinite}
@keyframes fd-caret{50%{opacity:0}}
.fd__cell.typed{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 1px 0 0 rgba(255,255,255,.16) inset;
animation:fd-tap .34s var(--spring)}
@keyframes fd-tap{42%{transform:scale(1.09)}}
.fd__cell.flip{animation:fd-flip .66s var(--spring) forwards}
@keyframes fd-flip{0%{transform:rotateX(0)}46%{transform:rotateX(94deg) scale(.93)}100%{transform:rotateX(0)}}
.fd__cell.hit{background:linear-gradient(150deg,var(--acc),var(--acc2));color:#fff;
box-shadow:0 16px 38px -12px rgba(232,69,218,1),0 1px 0 0 rgba(255,255,255,.36) inset}
.fd__cell.near{background:linear-gradient(150deg,#f9cd58,#dd9a12);color:#2c1a00;
box-shadow:0 14px 30px -14px rgba(240,180,41,.85),0 1px 0 0 rgba(255,255,255,.45) inset}
.fd__cell.miss{background:rgba(255,255,255,.018);color:rgba(247,243,255,.26);
box-shadow:0 0 0 1px rgba(255,255,255,.04) inset}
.fd__cell.win{animation:fd-bounce .7s var(--spring) both}
@keyframes fd-bounce{30%{transform:translateY(-14px) scale(1.06)}60%{transform:translateY(0)}80%{transform:translateY(-5px)}100%{transform:none}}
.fd__row.shake{animation:fd-shake .55s var(--spring)}
@keyframes fd-shake{15%{transform:translateX(-8px)}35%{transform:translateX(8px)}55%{transform:translateX(-5px)}75%{transform:translateX(5px)}100%{transform:none}}

/* Поле для родной клавиатуры телефона: прозрачный input поверх поля игры.
   На десктопе не нужен — там печатают физической клавиатурой (см. flavor.js). */
.fd__board-wrap{position:relative;display:flex;justify-content:center;width:100%}
.fd__input{display:none}

.fd__msg{min-height:17px;font:600 12.5px/1 "Montserrat",sans-serif;color:#ffb6f2;text-align:center;
opacity:0;transform:translateY(-3px);transition:all .5s var(--spring)}
.fd__msg.on{opacity:1;transform:none}

.fd__kbd{display:grid;gap:7px;width:100%;max-width:392px}
.fd__krow{display:flex;gap:5px;justify-content:center}
.fd__key{flex:1 1 0;min-width:0;height:44px;border:0;border-radius:12px;cursor:pointer;padding:0;
font:600 clamp(11px,3.2cqi,14px)/1 "Montserrat",sans-serif;color:var(--ink);
background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
box-shadow:0 1px 0 0 rgba(255,255,255,.26) inset,0 3px 8px -3px rgba(0,0,0,.85);
display:flex;align-items:center;justify-content:center;
transition:transform .3s var(--spring),background .3s var(--spring),box-shadow .3s var(--spring);
-webkit-tap-highlight-color:transparent}
.fd__key:hover{background:linear-gradient(180deg,rgba(168,85,247,.46),rgba(168,85,247,.18))}
.fd__key:active,.fd__key.press{transform:translateY(2px) scale(.95);box-shadow:0 1px 0 0 rgba(255,255,255,.14) inset}
.fd__key.hit{background:linear-gradient(150deg,var(--acc),var(--acc2));
box-shadow:0 10px 22px -10px rgba(232,69,218,.95),0 1px 0 0 rgba(255,255,255,.3) inset}
.fd__key.near{background:linear-gradient(150deg,#f9cd58,#dd9a12);color:#2c1a00}
.fd__key.miss{background:rgba(255,255,255,.016);color:rgba(247,243,255,.2);box-shadow:none}
.fd__key--w{flex:1.9 1 0;font-size:11px;letter-spacing:.07em;text-transform:uppercase}

/* легенда */
.fd__legend{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
font-size:11.5px;color:var(--faint);margin-top:2px}
.fd__legend div{display:flex;align-items:center;gap:8px}
.fd__lg{width:15px;height:15px;border-radius:5px;font-style:normal}
.fd__lg--hit{background:linear-gradient(150deg,var(--acc),var(--acc2))}
.fd__lg--near{background:linear-gradient(150deg,#f9cd58,#dd9a12)}
.fd__lg--miss{background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}

/* итог внутри сцены */
.fd__done{display:none;text-align:center;padding-top:2px}
.fd__done.on{display:block;animation:fd-pop .6s var(--spring) both}
@keyframes fd-pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.fd__done-h{font:700 20px/1.2 "Unbounded","Montserrat",sans-serif;letter-spacing:-.035em;color:var(--ink)}
.fd__done-p{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.fd__done-t{margin-top:9px;font:600 11px/1 "Montserrat",sans-serif;letter-spacing:.08em;
color:var(--faint);font-variant-numeric:tabular-nums}

/* конфетти */
.fd__conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.fd__p{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0}
@keyframes fd-fall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}
100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot))}}

/* появление */
.fd-rise{opacity:0;transform:translateY(28px);filter:blur(12px)}
.fd-rise.in{opacity:1;transform:none;filter:blur(0);
transition:opacity 1s var(--soft),transform 1s var(--soft),filter 1s var(--soft);transition-delay:var(--d,0ms)}

/* адаптив по ширине контейнера, а не окна */
@container (max-width:1060px){
    .fd__grid{grid-template-columns:1fr;gap:34px}
    .fd__sub{max-width:none}
    .fd{padding:40px 34px}
}
@container (max-width:660px){
    .fd-wrap{padding:0 0 4px}
    .fd{padding:26px 18px;border-radius:28px}
    .fd-shell{border-radius:29px}
    .fd__h{letter-spacing:-.04em}
    .fd__prize{padding:20px;gap:16px;margin-top:26px}
    .fd__cta{gap:10px}
    .fd__cta .fd-btn{flex:1 1 100%;justify-content:space-between}
    .fd__panel-in{padding:20px 14px 18px}
    .fd__board{gap:8px}
    .fd__row{gap:8px}
    .fd__cell{border-radius:13px}
    .fd__kbd{gap:6px}
    .fd__krow{gap:4px}
    .fd__key{height:45px;border-radius:10px}
}
/* браузеры без container queries — ориентируемся на окно */
@supports not (container-type:inline-size){
    @media (max-width:1180px){
        .fd__grid{grid-template-columns:1fr;gap:34px}
        .fd{padding:40px 34px}
    }
    @media (max-width:760px){
        .fd{padding:26px 18px;border-radius:28px}
        .fd__cta .fd-btn{flex:1 1 100%;justify-content:space-between}
    }
}
/* ── телефоны ──
   Непрерывные эффекты здесь стоят дороже, чем выглядят: blur-ауры
   переразмываются на каждом кадре анимации, бегущий блик карточки двигает
   left (layout), градиент заголовка перерисовывает текст. Всё это крутится
   постоянно и подвешивает прокрутку всей главной. На touch-экранах ауры
   стоят статично (слой растеризуется один раз), бегущие эффекты выключены.
   Медиазапрос по hover, а не только по ширине: узкое окно на десктопе тянет. */
@media (hover:none),(max-width:900px){
    /* Ауры на телефоне не рисуем вовсе. Дело не только в их анимации:
       размытый слой вылезает за границы блока (у нас overflow:visible) и
       накрывает соседние блоки Aspro — их перерисовка при прокрутке идёт
       через blur, отсюда «плохо отрисовываются» баннеры выше и истории ниже.
       Радиальные градиенты и без blur достаточно мягкие, так что теряем мало. */
    .fd-aura,.fd__stage:before{display:none}
    .drag-block.container.FLAVOR_DAY{overflow:hidden}
    .fd-shell{box-shadow:none}
    /* одна заливка вместо трёх слоёв градиента на большой площади */
    .fd{background:linear-gradient(180deg,rgba(46,28,84,.94),rgba(28,15,55,.96))}
    .fd__prize:before,.fd__h em,.fd__eyebrow i{animation:none}
    .fd__h em{background-position:0 0}
    .fd__spot{display:none}
    /* появление блока без blur: 1s размытия всей карточки приходится ровно
       на момент, когда человек до неё доскроллил */
    .fd-rise{filter:none}
    .fd-rise.in{filter:none;transition:opacity .5s var(--soft),transform .5s var(--soft);transition-delay:var(--d,0ms)}

    /* Ввод буквы перекрашивает плитку и клавишу. Мягкие тени с радиусом 20-40px
       заставляют перерисовывать площадь много больше самой плитки — на телефоне
       это и есть задержка набора. Оставляем только внутренние блики. */
    .fd__cell{transition:background .18s linear,color .18s linear}
    .fd__cell.hit{box-shadow:0 1px 0 0 rgba(255,255,255,.36) inset}
    .fd__cell.near{box-shadow:0 1px 0 0 rgba(255,255,255,.45) inset}
    .fd__board{perspective:none}
    .fd__key{transition:none;touch-action:manipulation;
    box-shadow:0 1px 0 0 rgba(255,255,255,.26) inset}
    .fd__key.hit{box-shadow:0 1px 0 0 rgba(255,255,255,.3) inset}
    .fd__try{transition:none}
    .fd__try.used{box-shadow:none}
    .fd-btn{transition:none;box-shadow:0 1px 0 0 rgba(255,255,255,.32) inset}

    /* ── ввод с родной клавиатуры телефона ──
       Прозрачный input лежит поверх поля: тап по клеткам открывает клавиатуру
       устройства, буквы попадают в игру через событие input (flavor.js).
       font-size 16px обязателен — при меньшем iOS зумит страницу на фокусе. */
    /* Тема Aspro задаёт всем input[type="text"] фон, рамку и height:44px через
       !important (`.wrapper1 input[type="text"]` в custom.css, специфичность
       0-2-1). Поэтому и !important, и селектор длиннее: иначе поверх сетки
       рисуется настоящее поле ввода — ровно то, что и было видно. */
    .fd-wrap .fd__board-wrap input.fd__input{display:block!important;position:absolute;inset:0;z-index:2;
    width:100%!important;height:100%!important;min-height:0!important;
    margin:0!important;padding:0!important;border:0!important;outline:none;
    background:transparent!important;box-shadow:none!important;border-radius:17px!important;
    color:transparent!important;caret-color:transparent;
    font-size:16px!important;-webkit-appearance:none;appearance:none;
    -webkit-tap-highlight-color:transparent;-webkit-text-fill-color:transparent}

    /* Своя клавиатура на телефоне не нужна, но подсказка по буквам нужна:
       те же кнопки остаются в DOM и превращаются в полоску уже сыгранных букв.
       Ряды раскрываются через display:contents, поэтому переносится всё одной лентой. */
    .fd__kbd{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:none;pointer-events:none}
    .fd__krow{display:contents}
    .fd__key{display:none}
    .fd__key.hit,.fd__key.near,.fd__key.miss{display:flex;flex:0 0 auto;width:29px;height:29px;
    border-radius:9px;font-size:12.5px}
    .fd__key.miss{opacity:.45}
    /* Стирание берём у системы, а «ВВОД» оставляем кнопкой: не у каждой
       клавиатуры Enter доступен, полагаться только на него нельзя. */
    .fd__key[data-k="ВВОД"]{display:flex;order:99;flex:1 1 100%;width:auto;height:44px;border-radius:12px;
    pointer-events:auto;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#fff;
    background:linear-gradient(135deg,var(--acc),var(--acc2))}
}
@media (prefers-reduced-motion:reduce){
    .fd-wrap *{animation:none!important}
    .fd-rise{opacity:1;transform:none;filter:none}
}