/* «Игры для бренда» (22.10.2026): карточки наших игр, шаги «Путь игры» (каркас — общий .odemo из v2.css) и конструктор
   «Соберите игру». Токены цветов — те же, что у сайта: светлая тема переопределяет их в light.css. */

/* наши игры */
.gcards{display:grid;gap:18px}
.gcard{display:flex;flex-direction:column;min-width:0;border-radius:calc(var(--r) + 4px);background:var(--kelp);border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh-1,none)}
.gcard__shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0f0d26;text-decoration:none}
.gcard__shot img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s var(--ease)}
a.gcard__shot:hover img{transform:scale(1.03)}
.gcard__play{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.95);color:#0f0d26;font:600 13px/1 var(--sans);box-shadow:0 6px 18px -8px rgba(15,13,38,.45)}
.gcard__play::before{content:"";width:24px;height:24px;border-radius:50%;background:#3d12fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5v7l5.5-3.5z' fill='%23fff'/%3E%3C/svg%3E") center/14px no-repeat}
.gcard__body{display:flex;flex-direction:column;gap:12px;flex:1;padding:22px 20px 24px}
.gcard__brand{color:var(--dim);font:600 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.14em}
.gcard h3{font-size:clamp(23px,2.1vw,29px);line-height:1.12;letter-spacing:-.015em}
.gcard__d{color:var(--silver);font-size:15.5px;line-height:1.5}
.gcard__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gcard__tags li{padding:6px 11px;border-radius:999px;background:rgba(61,18,252,.08);color:var(--phos);font-size:13px;font-weight:500}
.gcard__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.gcard__facts b{display:block;color:var(--phos);font-size:clamp(24px,2.2vw,30px);font-weight:600;line-height:1;letter-spacing:-.03em}
.gcard__facts span{display:block;margin-top:5px;color:var(--dim);font-size:12.5px;line-height:1.3}
.gcard__goal{padding:11px 13px;border-radius:12px;background:rgba(61,18,252,.06);color:var(--mist);font-size:14.5px;line-height:1.45}
.gcard__goal b{font-weight:600;color:var(--white)}
.gcard__go{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:auto;padding-top:6px}
@media (min-width:860px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.gcard__body{padding:26px 26px 28px}}

/* шаг 3: герои */
.ghero{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ghero li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fff}
.ghero__ic{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(61,18,252,.08)}
.ghero__ic svg{width:22px;height:22px;fill:none;stroke:#3d12fc;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ghero b{font-size:15px;font-weight:600;line-height:1.3}
.ghero span{color:var(--silver);font-size:13.5px;line-height:1.4}
.odemo__p.is-on .ghero li{animation:odin .45s var(--ease) both}
.odemo__p.is-on .ghero li:nth-child(2){animation-delay:.15s}.odemo__p.is-on .ghero li:nth-child(3){animation-delay:.3s}.odemo__p.is-on .ghero li:nth-child(4){animation-delay:.45s}

/* шаг 6: стили графики — маленькие «сцены» на CSS */
.gstyle{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gstyle li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--line);background:#fff}
.gstyle b{align-self:end;font-size:15px;font-weight:600;line-height:1.3}
.gstyle li>span:last-child{align-self:start;color:var(--silver);font-size:13.5px;line-height:1.4}
.gstyle__art{grid-row:span 2;position:relative;display:block;height:64px;border-radius:10px;overflow:hidden}
.gstyle__art i{position:absolute;display:block}
.gstyle--paper .gstyle__art{background:#f6efdf}
.gstyle--paper .gstyle__art i:nth-child(1){left:12px;bottom:10px;width:22px;height:30px;border-radius:9px 9px 6px 6px;background:#2105d8;box-shadow:0 0 0 3px #fff}
.gstyle--paper .gstyle__art i:nth-child(2){left:44px;top:12px;width:20px;height:20px;border-radius:50%;background:#f2c94c;box-shadow:0 0 0 3px #fff}
.gstyle--paper .gstyle__art i:nth-child(3){right:10px;bottom:12px;width:24px;height:14px;border-radius:7px;background:#e76f51;box-shadow:0 0 0 3px #fff}
.gstyle--satire .gstyle__art{background:#18211b}
.gstyle--satire .gstyle__art i:nth-child(1){left:10px;top:10px;width:46px;height:8px;border-radius:2px;background:#d4ff5a}
.gstyle--satire .gstyle__art i:nth-child(2){left:10px;top:24px;width:30px;height:5px;border-radius:2px;background:rgba(255,255,255,.35)}
.gstyle--satire .gstyle__art i:nth-child(3){right:12px;bottom:10px;width:28px;height:28px;border-radius:50%;background:#d4ff5a;box-shadow:inset 0 -9px 0 #2b3a2f}
.gstyle--pixel .gstyle__art{background:#1d1a3d;background-image:linear-gradient(#2a2660 1px,transparent 1px),linear-gradient(90deg,#2a2660 1px,transparent 1px);background-size:8px 8px}
.gstyle--pixel .gstyle__art i:nth-child(1){left:16px;bottom:8px;width:16px;height:24px;background:#ff5ca8;box-shadow:8px -8px 0 -2px #ffd23f}
.gstyle--pixel .gstyle__art i:nth-child(2){left:0;right:0;bottom:0;height:8px;background:#6a4dff}
.gstyle--pixel .gstyle__art i:nth-child(3){right:16px;top:14px;width:8px;height:8px;background:#ffd23f;box-shadow:16px 8px 0 #ffd23f}
.odemo__p.is-on .gstyle li{animation:odin .45s var(--ease) both}
.odemo__p.is-on .gstyle li:nth-child(2){animation-delay:.2s}.odemo__p.is-on .gstyle li:nth-child(3){animation-delay:.4s}

/* шаг 8: воронка замера */
.gfun{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gfun li{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;overflow:hidden;isolation:isolate}
.gfun li i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:linear-gradient(90deg,rgba(61,18,252,.16),rgba(61,18,252,.06));z-index:-1;transform-origin:left}
.gfun li:last-child{border-color:rgba(31,157,85,.5)}
.gfun li:last-child i{background:linear-gradient(90deg,rgba(31,157,85,.24),rgba(31,157,85,.08))}
.gfun b{font-size:14.5px;font-weight:600}
.gfun span{color:var(--dim);font-size:13.5px}
.odemo__p.is-on .gfun li i{animation:odbar .9s var(--ease) both}
.odemo__p.is-on .gfun li:nth-child(2) i{animation-delay:.2s}.odemo__p.is-on .gfun li:nth-child(3) i{animation-delay:.4s}.odemo__p.is-on .gfun li:nth-child(4) i{animation-delay:.6s}
@keyframes odbar{from{transform:scaleX(0)}}
@media (min-width:760px){.ghero,.gstyle{grid-template-columns:repeat(2,minmax(0,1fr))}.gstyle li:last-child{grid-column:span 2}}

/* конструктор «Соберите игру» */
.gbuild{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding:18px;border-radius:calc(var(--r) + 4px);background:var(--kelp2);border:1px solid var(--line)}
.gbuild__q{display:grid;gap:20px;min-width:0;margin:0}
.gopt{min-width:0;min-inline-size:0;border:0;margin:0;padding:0}
.gopt__row{display:flex;flex-wrap:wrap;gap:8px}
.gopt legend{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0;color:var(--white);font-size:16px;font-weight:600}
.gopt legend i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--phos);color:var(--on-glow);font:600 12px/1 var(--sans);font-style:normal}
.gopt label{position:relative;cursor:pointer}
.gopt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.gopt span{display:inline-block;padding:10px 15px;border-radius:999px;border:1px solid var(--line2);background:var(--kelp);color:var(--silver);font-size:14.5px;line-height:1.2;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.gopt label:hover span{border-color:var(--phos);color:var(--white)}
.gopt input:checked+span{background:var(--phos);border-color:var(--phos);color:var(--on-glow);box-shadow:0 6px 16px -8px rgba(61,18,252,.6)}
.gopt input:focus-visible+span{outline:2px solid var(--phos);outline-offset:2px}

.gpass{position:relative;display:grid;gap:18px;padding:18px;border-radius:18px;background:#100d2b;color:#fff;overflow:hidden;isolation:isolate}
.gpass::before{content:"";position:absolute;inset:-40% -20% auto auto;width:80%;height:110%;background:radial-gradient(closest-side,rgba(92,60,255,.5),rgba(92,60,255,0));z-index:-1;pointer-events:none}
.gpass__k{color:#a99bff;font:600 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.14em}
.gpass__t{margin-top:8px;color:#fff;font-size:clamp(21px,2vw,26px);line-height:1.2;letter-spacing:-.01em}
.gpass__dl{display:grid;gap:10px;margin:16px 0 0}
.gpass__dl div{display:grid;gap:2px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.gpass__dl dt{color:#a99bff;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.gpass__dl dd{margin:0;color:rgba(255,255,255,.86);font-size:15px;line-height:1.45}
.gpass__like{margin:14px 0 18px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);font-size:14px;line-height:1.4}
.gpass .btn--glow{background:linear-gradient(90deg,#9f8fff 0%,#d8d2ff 34%,#fff 56%,#c9d6ff 78%,#9f8fff 100%);background-size:240% 100%;color:#120f2e}
.gbuild.is-flash .gpass__t,.gbuild.is-flash .gpass__dl dd{animation:gflash .5s var(--ease) both}
@keyframes gflash{from{opacity:.25;transform:translateY(4px)}}

/* мини-экран: рамка зависит от площадки */
.gscreen{position:relative;margin:0 auto;width:100%;max-width:440px}
.gscreen canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated;image-rendering:crisp-edges;background:#f1f0fa}
.gscreen__bar{display:none}
.gscreen--site{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:#fff}
.gscreen--site .gscreen__bar{display:flex;gap:5px;align-items:center;height:20px;padding:0 10px;background:#e9e7f6}
.gscreen--site .gscreen__bar i{width:7px;height:7px;border-radius:50%;background:rgba(15,13,38,.2)}
.gscreen__pad{display:none}
.gscreen--tg,.gscreen--app{max-width:230px;padding:34px 10px 30px;border-radius:30px;background:#05040f;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.gscreen--tg canvas,.gscreen--app canvas{border-radius:4px 4px 0 0}
.gscreen--tg .gscreen__bar{display:block;height:22px;border-radius:4px 4px 0 0;background:#2aabee;color:#fff;font:600 10px/22px var(--sans);text-align:center}
.gscreen--tg .gscreen__bar::before{content:"Мини-приложение"}
.gscreen--tg .gscreen__bar i{display:none}
.gscreen--tg canvas{border-radius:0}
/* сенсорное управление под экраном игры: джойстик слева, кнопки B и A справа */
.gscreen--tg .gscreen__pad,.gscreen--app .gscreen__pad{position:relative;display:block;height:74px;border-radius:0 0 4px 4px;background:#f1f0fa}
.gscreen__pad i{position:absolute;left:16px;top:13px;width:48px;height:48px;border-radius:50%;background:#d9d2ff;box-shadow:inset 0 0 0 2px #b9b4e6}
.gscreen__pad i::after{content:"";position:absolute;left:14px;top:14px;width:20px;height:20px;border-radius:50%;background:#3d12fc}
.gscreen__pad b{position:absolute;top:26px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#3d12fc;color:#fff;font:600 11px/1 var(--sans)}
.gscreen__pad b:nth-of-type(1){right:52px;top:32px;background:#8f7bff}
.gscreen__pad b:nth-of-type(2){right:16px;top:20px}
.gscreen--tg::before,.gscreen--app::before{content:"";position:absolute;left:50%;top:13px;width:56px;height:9px;margin-left:-28px;border-radius:9px;background:#1d1b30}
.gscreen--tg::after{content:"Игра в Telegram";position:absolute;left:0;right:0;bottom:9px;color:rgba(255,255,255,.55);font:600 10px/1 var(--sans);text-align:center;letter-spacing:.06em}
.gscreen--app::after{content:"";position:absolute;left:50%;bottom:11px;width:60px;height:4px;margin-left:-30px;border-radius:4px;background:rgba(255,255,255,.4)}
.gscreen--event{padding:8px 8px 0;border-radius:6px;background:#1d1b30}
.gscreen--event canvas{border-radius:2px}
.gscreen--event .gscreen__bar{display:block;height:26px;margin:0 auto;width:50%;background:linear-gradient(90deg,transparent 46%,#2d2a48 46%,#2d2a48 54%,transparent 54%)}
@media (min-width:980px){
  .gbuild{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;padding:28px;align-items:start}
  .gpass{position:sticky;top:96px;padding:24px}
}
@media (prefers-reduced-motion:reduce){.gbuild *,.gcard *{animation:none!important;transition:none!important}}
.gbuild__note{margin:0;color:var(--dim);font-size:14px;line-height:1.45}
/* телефон: варианты — строкой с прокруткой вбок, чтобы набросок был сразу под ними */
@media (max-width:599px){
  .gbuild__q{gap:16px}
  .gopt__row{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px;padding:0 18px 4px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .gopt__row::-webkit-scrollbar{display:none}
  .gopt label{flex:none;scroll-snap-align:start}
  .gopt span{white-space:nowrap}
}