/* Мини-игра «Арендыч-раннер» — разметка и оформление.
   Один файл на две площадки: сайт подключает его из
   catalog_parts/game_arendych.php, приложение кладёт копию в свой пакет
   (assets/game/). Правки вносить только здесь. */
.ag-sec{max-width:760px;margin:34px auto 10px;padding:0 12px;}
.ag-card{background:#fff !important;border:1px solid #F0E9D6 !important;border-radius:16px !important;overflow:hidden;box-shadow:none !important;}
.ag-intro{display:flex;align-items:center;gap:18px;padding:22px;}
.ag-intro[hidden]{display:none !important;} /* иначе display:flex перебивает [hidden] и карточка не скрывается */
.ag-mascot{flex:0 0 auto;width:108px;height:auto;}
.ag-intro-body{flex:1 1 auto;color:#1D1D1B;min-width:0;}
.ag-intro-title{font-size:20px;font-weight:700;line-height:1.15;margin-bottom:8px;color:#1D1D1B;}
.ag-intro-sub{font-size:14px;line-height:1.4;color:#4a4a4a;margin-bottom:12px;}
.ag-intro-sub b{color:#FF6B1A;}
.ag-record-line{font-size:14px;font-weight:700;margin-bottom:14px;color:#1D1D1B;}
.ag-record-line b{color:#FF6B1A;}
/* Кнопки — те же принудительные стили, что и у кнопок-фильтров городов */
.ag-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;border:none !important;background:#FFE387 !important;color:#1D1D1B !important;font-size:.95rem !important;font-weight:700 !important;padding:14px 22px !important;border-radius:12px !important;min-height:55px !important;line-height:1 !important;cursor:pointer !important;box-shadow:none !important;text-transform:lowercase !important;transition:transform .2s ease,background .2s ease !important;}
.ag-btn:hover{background:#FFDB60 !important;color:#1D1D1B !important;transform:translateY(-1px) !important;box-shadow:none !important;}
.ag-note{margin-top:12px;font-size:12.5px;color:#8a8a8a;}
.ag-stage{position:relative;width:100%;aspect-ratio:16/10;background:linear-gradient(180deg,#CFE8FF 0%,#EAF6FF 45%,#ffffff 78%);touch-action:manipulation;}
.ag-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* Экран результата: поле подстраивается под высоту панели (иначе кнопки режутся) */
.ag-stage.ag-over{aspect-ratio:auto;background:#fff;}
.ag-stage.ag-over>canvas,.ag-stage.ag-over>.ag-hud{display:none;}
.ag-stage.ag-over>.ag-overlay{position:relative;padding:22px 16px;}
.ag-hud{position:absolute;top:8px;left:10px;right:10px;display:flex;gap:6px;font-size:12px;font-weight:700;pointer-events:none;}
.ag-hud .ag-chip{background:#FFE387;color:#1D1D1B;border-radius:12px;padding:5px 11px;}
.ag-hud .ag-chip.rec{background:#FF6B1A;color:#fff;}
.ag-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;}
.ag-panel{background:#fff;border:1px solid #F0E9D6;border-radius:16px;padding:20px 22px;max-width:92%;box-shadow:0 8px 24px rgba(0,0,0,.12);}
.ag-panel h3{margin:0 0 6px;font-size:22px;font-weight:700;color:#1D1D1B;}
.ag-panel p{margin:4px 0;font-size:14px;color:#4a4a4a;line-height:1.4;}
.ag-promo{margin:12px 0;background:#FFE387;border-radius:12px;padding:12px 14px;}
.ag-promo .code{font-size:24px;font-weight:700;letter-spacing:2px;color:#1D1D1B;}
.ag-promo .txt{font-size:13px;font-weight:700;color:#1D1D1B;}
.ag-win{margin:10px 0;color:#FF6B1A;font-weight:700;font-size:15px;}
.ag-panel-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.ag-btn-sm{display:inline-flex !important;align-items:center !important;justify-content:center !important;border:none !important;font-size:.9rem !important;font-weight:700 !important;padding:12px 20px !important;min-height:50px !important;border-radius:12px !important;line-height:1 !important;cursor:pointer !important;box-shadow:none !important;text-transform:lowercase !important;transition:transform .2s ease,background .2s ease !important;}
.ag-btn-sm:hover{transform:translateY(-1px) !important;box-shadow:none !important;}
.ag-btn-primary{background:#FF6B1A !important;color:#fff !important;}
.ag-btn-yellow{background:#FFE387 !important;color:#1D1D1B !important;}
.ag-start-hint{color:#1D1D1B;font-weight:700;font-size:16px;}
/* Чип «мини-игра» — сразу сигналит, что это играбельно */
.ag-badge{display:block;width:max-content;max-width:100%;margin:2px auto 14px;background:#FF6B1A;color:#fff;font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;text-align:center;}
/* Маскот в карточке-заглушке слегка подпрыгивает — карточка «живая» */
.ag-mascot{animation:ag-bob 1.1s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes ag-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Значок ▶ и пульс кнопки «играть» */
.ag-play-ico{margin-right:8px;font-size:.8em;}
.ag-pulse{animation:ag-pulse 1.6s ease-in-out infinite;}
@keyframes ag-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,26,.45)!important}50%{box-shadow:0 0 0 10px rgba(255,107,26,0)!important}}
/* Призыв поверх живого демо (attract-режим): игра видна за ним */
/* Призыв сверху поля — низ (бегущий Арендыч + земля) остаётся на виду */
.ag-cta-wrap{position:absolute;left:0;right:0;top:0;padding:14px 14px 26px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.78) 52%,rgba(255,255,255,0) 100%);}
.ag-cta-title{font-size:17px;font-weight:700;color:#1D1D1B;margin-bottom:4px;}
.ag-cta-sub{font-size:12.5px;color:#4a4a4a;margin-bottom:12px;}
.ag-cta-sub b{color:#FF6B1A;}
.ag-cta-wrap .ag-btn{padding:12px 26px !important;min-height:50px !important;}
@media(prefers-reduced-motion:reduce){.ag-mascot,.ag-pulse{animation:none!important;}}
@media(max-width:480px){
  .ag-intro{flex-direction:column;text-align:center;gap:10px;padding:16px;}
  .ag-mascot{width:92px;}
  .ag-intro-title{font-size:18px;}
}