/* ============================================================
   J-GET:it — мини-игра «Стек»
   Токены и типографика унаследованы из main.css, здесь только
   то, что нужно самой игре.
   ============================================================ */
:root{
  --kw:#FF7BD5;   /* хрупкие платформы — цвет ключевых слов из терминала */
  --fn:#7BD8FF;   /* подвижные платформы — цвет функций */
}

/* ---------- общий фон страницы ----------
   Сетка и свечение живут на слое, который накрывает и шапку, и сцену,
   и плавно растворяются книзу — иначе на стыке секций видна резкая черта. */
.gm-page{position:relative}
.gm-page__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.45) 58%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0%,#000 26%,rgba(0,0,0,.45) 58%,transparent 88%);
}
.gm-page__bg .orb{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(204,255,0,.55) 0%,
             rgba(204,255,0,.22) 34%, rgba(204,255,0,0) 68%);
  filter:blur(10px);
  width:min(680px,88vw);aspect-ratio:1;right:-14%;top:-30%;opacity:.42;
}

/* ---------- шапка страницы ----------
   Намеренно компактная: на странице игры важно, чтобы поле было видно
   сразу, а не после экрана прокрутки. */
.gm-head{padding:92px 0 0;position:relative;z-index:1}
.gm-stage{position:relative;z-index:1}
.gm-head__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,56px);align-items:end}
.gm-head h1{
  font-family:var(--mono);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,58px);line-height:.9;letter-spacing:-.05em;margin-bottom:14px;
}
.gm-head h1 em{font-style:normal;color:var(--acid)}
.gm-head h1 .thin{-webkit-text-stroke:1.5px var(--acid);color:transparent}
.gm-head__sub{font-size:clamp(14.5px,1.4vw,17px);color:var(--tx-2);max-width:52ch;line-height:1.55;margin:0}
.gm-head__sub b{color:var(--tx);font-weight:700}

/* приз-жетон рядом с заголовком */
.gm-prize{
  border:1px solid var(--acid-line);border-radius:var(--r);background:rgba(204,255,0,.07);
  padding:18px 22px;min-width:236px;
}
.gm-prize__cap{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acid);margin-bottom:8px}
.gm-prize__ttl{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px}
.gm-prize__note{font-family:var(--mono);font-size:12.5px;color:var(--tx-2);margin:0;line-height:1.45}

/* ---------- сцена ---------- */
.gm-stage{padding:22px 0 clamp(60px,8vw,110px)}
.gm-stage__in{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:clamp(18px,2.4vw,32px);align-items:start}

/* корпус «терминала» вокруг холста */
.gm-frame{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1);
  overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.gm-frame__bar{display:flex;align-items:center;gap:7px;padding:13px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.gm-frame__bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none}
.gm-frame__bar i:first-child{background:var(--acid)}
.gm-frame__bar span{margin-left:8px;font-family:var(--mono);font-size:13px;color:var(--tx-2)}

/* HUD */
.gm-hud{display:flex;align-items:center;gap:clamp(12px,2vw,22px);padding:12px 16px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.gm-hud__stat{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);flex:none}
.gm-hud__stat b{font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gm-hud__stat span{font-size:12px;color:var(--tx-3);letter-spacing:.04em}
.gm-hud__stat--goal b{color:var(--acid)}
.gm-hud__track{flex:1;height:6px;border-radius:100px;background:var(--s4);overflow:hidden;min-width:44px}
.gm-hud__fill{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--acid-600),var(--acid));
  box-shadow:0 0 14px rgba(204,255,0,.5);transition:width .12s linear}

/* холст + оверлеи */
.gm-view{position:relative;background:#000;touch-action:none}
.gm-view canvas{display:block;width:100%;height:min(64vh,680px);min-height:400px}

.gm-scr{
  position:absolute;inset:0;z-index:2;display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(20px,4vw,40px);gap:14px;
  background:radial-gradient(ellipse 90% 70% at 50% 45%,rgba(0,0,0,.82),rgba(0,0,0,.95));
  backdrop-filter:blur(3px);
  overflow-y:auto;
}
.gm-scr.is-on{display:flex;animation:gmIn .32s var(--ease) both}
@keyframes gmIn{from{opacity:0;transform:scale(.97)}}

.gm-scr__cap{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acid)}
.gm-scr h2{font-family:var(--mono);text-transform:uppercase;font-size:clamp(26px,5vw,46px);
  line-height:.95;letter-spacing:-.04em}
.gm-scr h2 em{font-style:normal;color:var(--acid)}
.gm-scr p{font-size:clamp(14.5px,1.5vw,17px);color:var(--tx-2);max-width:44ch;line-height:1.55;margin:0}
.gm-scr .btn{margin-top:6px}

/* правила на стартовом экране */
.gm-rules{display:grid;gap:8px;margin:4px 0 2px;text-align:left;max-width:400px;width:100%}
.gm-rules li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--tx-2);line-height:1.4}
.gm-rules li b{font-family:var(--mono);color:var(--acid);flex:none;font-size:13px;padding-top:2px}

/* легенда платформ */
.gm-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2px}
.gm-legend div{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--tx-3)}
.gm-legend i{width:20px;height:4px;border-radius:2px;flex:none}

/* результат попытки */
.gm-score{font-family:var(--mono);font-size:clamp(44px,9vw,80px);font-weight:800;
  line-height:.9;letter-spacing:-.05em;color:var(--acid);font-variant-numeric:tabular-nums}
.gm-score small{display:block;font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3);margin-top:10px}

/* секретная фраза на экране победы: её называют администратору */
.gm-secret{
  width:100%;max-width:430px;text-align:center;
  border:1px dashed var(--acid-line);border-radius:var(--r);
  background:rgba(204,255,0,.08);padding:18px 22px;
}
.gm-secret__cap{display:block;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin-bottom:9px}
.gm-secret__word{
  display:block;font-family:var(--mono);font-weight:800;
  font-size:clamp(27px,5.6vw,42px);line-height:1;letter-spacing:-.03em;
  color:var(--acid);text-shadow:0 0 28px rgba(204,255,0,.45);margin-bottom:11px;
}
.gm-secret__hint{display:block;font-size:13.5px;color:var(--tx-2);line-height:1.45}

/* ---------- боковая панель ---------- */
.gm-side{display:grid;gap:14px;position:sticky;top:88px}
.gm-card{border:1px solid var(--line);border-radius:var(--r);background:var(--s2);padding:20px 22px}
.gm-card h3{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.gm-card p{font-size:14.5px;color:var(--tx-2);line-height:1.5;margin:0}

.gm-keys{display:grid;gap:10px;margin:0}
.gm-keys div{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--tx-2)}
.gm-keys kbd{
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--tx);
  border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:7px;
  padding:5px 9px;background:var(--s4);flex:none;
}
.gm-keys__touch{display:none}

.gm-best{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);margin-top:4px}
.gm-best b{font-size:30px;font-weight:800;color:var(--acid);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.gm-best span{font-size:12.5px;color:var(--tx-3)}

/* Баннер игры (.gm-promo) живёт на лендинге, поэтому его стили —
   в main.css: game.css подключается только на странице игры. */

/* ---------- адаптив ---------- */
@media(max-width:1080px){
  .gm-stage__in{grid-template-columns:1fr}
  .gm-side{position:static;grid-template-columns:1fr 1fr;display:grid}
}
@media(max-width:860px){
  .gm-head__in{grid-template-columns:1fr}
  /* На телефоне приз сжимается в одну строку: игровое поле должно
     оказаться на экране как можно раньше. */
  .gm-prize{min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:13px 16px}
  .gm-prize__cap{margin:0}
  .gm-prize__ttl{font-size:16px;margin:0}
  .gm-prize__note{flex-basis:100%;font-size:11.5px}
}
@media(max-width:720px){
  .gm-side{grid-template-columns:1fr}
  .gm-keys__key{display:none}
  .gm-keys__touch{display:flex}
  .gm-view canvas{height:min(68vh,700px);min-height:380px}
  .gm-hud__stat b{font-size:18px}
  .gm-frame{border-radius:var(--r)}
}
@media(max-width:480px){
  .gm-head{padding-top:80px}
  .gm-head h1{font-size:clamp(28px,8.4vw,38px)}
  .gm-hud{gap:9px;padding:10px 12px}
  .gm-hud__stat b{font-size:17px}
  .gm-hud__stat span{font-size:11px}
  /* «цель» подписывать не нужно — число стоит вплотную к шкале прогресса */
  .gm-hud__stat--goal span{display:none}
}

@media(prefers-reduced-motion:reduce){
  .gm-scr.is-on{animation:none}
}