/* ---------- страница игры ---------- */
body.gamepage{overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.gtop{position:fixed;top:0;left:0;right:0;z-index:12;display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;gap:14px}
.gtop h1{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px;
  font-size:clamp(15px,2.2vw,24px);color:#fff;text-shadow:0 3px 0 var(--red3)}
.gtop h1 .y{color:var(--yellow)}
.gtop .right{display:flex;gap:10px;align-items:center}
/* .mini на баттле — fixed в правом углу; здесь кнопки живут в строке шапки */
.gtop .ghostbtn.mini{position:static;font-size:12px;padding:8px 16px;opacity:.85}

.gwrap{position:relative;z-index:6;width:min(96vw,1120px);height:min(64vh,520px);
  display:flex;align-items:center;justify-content:center}
#gc{border-radius:16px;border:1px solid rgba(245,197,24,.3);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);background:#2a0405;display:block;touch-action:none}

.ghint{z-index:6;margin-top:14px;font-family:var(--hand2);font-size:17px;color:#e8b7a2;opacity:.8;text-align:center}
.ghint b{color:var(--yellow);font-weight:600}

/* стартовая карточка и экран смерти */
.gpanel{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(12,1,2,.74);backdrop-filter:blur(5px);padding:3vh 4vw;overflow-y:auto}
.gcard{position:relative;width:min(94vw,640px);max-height:92vh;overflow-y:auto;margin:auto;
  text-align:center;padding:38px 38px 30px;border-radius:20px;
  background:radial-gradient(120% 90% at 50% 0%,#7d0b0e 0%,#4d0608 60%,#2a0405 100%);
  border:1px solid rgba(245,197,24,.35);box-shadow:0 40px 100px -30px rgba(0,0,0,.95)}
.gcard h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px;
  font-size:clamp(22px,4vw,34px);color:#fff;text-shadow:0 3px 0 var(--red3);margin-bottom:6px}
.gcard h2 .y{color:var(--yellow)}
.gquote{font-family:var(--hand);font-size:clamp(22px,3.4vw,30px);color:#f0c3a8;line-height:1.15;margin:10px 0 18px}
.gbig{font-family:var(--disp);font-weight:700;font-size:clamp(40px,8vw,64px);color:var(--yellow);
  line-height:1;text-shadow:0 0 34px rgba(245,197,24,.4)}
.glabel{font-family:var(--disp);font-size:12px;letter-spacing:3px;color:rgba(255,255,255,.55);
  text-transform:uppercase;margin-top:4px}
.gbestline{font-family:var(--body);font-size:13px;color:#e8b7a2;opacity:.8;margin-top:8px}
.grules{font-family:var(--body);font-size:13.5px;line-height:1.7;color:#f3e7d8;opacity:.9;
  text-align:left;margin:16px auto 20px;max-width:380px}
.grules b{color:var(--yellow)}
.gbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}

.ginput{width:min(100%,260px);margin:14px auto 0;display:block;background:rgba(20,3,4,.65);
  border:1px solid rgba(245,197,24,.35);border-radius:11px;padding:11px 15px;color:#fff;
  font-family:var(--body);font-size:15px;text-align:center;outline:none}
.ginput:focus{border-color:var(--yellow)}
.ginput::placeholder{color:rgba(243,231,216,.4)}

/* приз */
.gprize{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(245,197,24,.28)}
.gprize p{font-family:var(--hand2);font-size:17px;color:#e8b7a2;margin-bottom:12px}
/* кнопки приза раньше были inline-block с внешними отступами и наезжали друг на друга,
   а длинная подпись вылезала за рамку — теперь это флекс-строка с переносом */
.gprize .gprizebtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.gprize .ghostbtn{margin:0;flex:0 1 auto;max-width:100%}

/* таблица очков */
.gboard{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:rgba(12,1,2,.78);backdrop-filter:blur(4px);padding:4vh 3vw}
.gboardpanel{position:relative;width:min(92vw,520px);max-height:84vh;overflow-y:auto;padding:30px 28px 24px;
  border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,#7d0b0e 0%,#4d0608 60%,#2a0405 100%);
  border:1px solid rgba(245,197,24,.35);box-shadow:0 40px 100px -30px rgba(0,0,0,.95)}
.gboardclose{position:absolute;top:12px;right:14px;background:transparent;border:none;color:var(--yellow);
  font-size:22px;line-height:1;padding:6px 10px;border-radius:8px}
.gboardclose:hover{background:rgba(245,197,24,.15)}
.gboard h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px;
  font-size:clamp(19px,3vw,27px);color:#fff;margin-bottom:18px;text-shadow:0 3px 0 var(--red3)}
.gboard h2 .y{color:var(--yellow)}
.grow{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;
  background:rgba(16,6,6,.6);border:1px solid rgba(245,197,24,.14);margin-bottom:7px}
.grow .gm{flex:0 0 30px;font-family:var(--disp);font-size:15px;color:var(--yellow);text-align:center}
.grow .gn{flex:1;font-size:14px;color:#f3e7d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grow .gs{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--yellow)}
.gempty{font-family:var(--hand);font-size:20px;color:#f0c3a8;text-align:center;padding:18px 0}

/* крестик на модалках */
.gclose{position:absolute;top:12px;right:14px;background:transparent;border:none;color:var(--yellow);
  font-size:22px;line-height:1;padding:6px 11px;border-radius:9px;z-index:2;
  transition:background .15s,color .15s}
.gclose:hover{background:var(--yellow);color:#2a0405}

/* прокрутка внутри модалок — своя, без системного ползунка */
.gcard,.gboardpanel{scrollbar-width:thin;scrollbar-color:rgba(245,197,24,.5) transparent}
.gcard::-webkit-scrollbar,.gboardpanel::-webkit-scrollbar{width:8px}
.gcard::-webkit-scrollbar-track,.gboardpanel::-webkit-scrollbar-track{background:transparent}
.gcard::-webkit-scrollbar-thumb,.gboardpanel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(245,197,24,.65),rgba(195,16,24,.6));
  border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.gcard::-webkit-scrollbar-thumb:hover,.gboardpanel::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#F5C518,#c31018);background-clip:padding-box}

/* правила в стартовой модалке стали шире — дышим */
.grules{max-width:460px;font-size:14px}

/* на узкой модалке длинные подписи переносим целиком, а не рвём слово */
@media(max-width:560px){
  .gprize .gprizebtns{flex-direction:column;align-items:stretch}
  .gprize .ghostbtn{width:100%}
}

/* ================================================================
   МОБИЛЬНЫЙ СЛОЙ ИГРЫ — только внутри медиазапросов.
   ================================================================ */
@media (max-width:760px){
  /* шапка съедала 94px высоты: заголовок в одну строку, кнопки компактнее */
  .gtop{padding:9px 12px;gap:8px}
  .gtop h1{font-size:13px;letter-spacing:1px;line-height:1.15}
  .gtop .right{gap:6px}
  .gtop .ghostbtn.mini{font-size:10.5px;padding:7px 10px;letter-spacing:1px}

  /* холст занимает всю доступную ширину; пропорции те же, что на десктопе,
     поэтому игровое поле не меняется — меняется только масштаб.
     Высоту задаём явно: resize() в game.js считает масштаб от размеров .gwrap,
     и при height:auto получалась циклическая зависимость и заниженный холст. */
  .gwrap{width:100vw;height:46vh;flex:0 0 auto}
  #gc{border-radius:12px}
  .ghint{font-size:14px;margin-top:10px;padding:0 14px;line-height:1.35}

  /* модалки: во всю ширину, крестик крупнее под палец */
  .gpanel{padding:2vh 3vw}
  .gcard{width:min(96vw,560px);max-height:90vh;padding:24px 18px 20px}
  .gcard h2{font-size:22px;letter-spacing:1px}
  .gquote{font-size:19px;margin:8px 0 14px}
  .gbig{font-size:44px}
  .grules{font-size:12.5px;line-height:1.55;max-width:100%;margin:12px auto 14px}
  .gclose{top:8px;right:8px;font-size:26px;padding:8px 14px}
  .gbtns{gap:8px}
  .gbtns .startbtn.small{font-size:16px;padding:13px 26px;letter-spacing:2px}
  .gbtns .ghostbtn{font-size:12px;padding:11px 16px;letter-spacing:1px}
  .gprize p{font-size:15px}
  .gboardpanel{width:96vw;max-height:88vh;padding:26px 16px 20px}
  .gboard h2{font-size:20px}
  .grow{padding:8px 10px;gap:9px}
  .grow .gn{font-size:13px}
}

/* телефон стоймя: подсказка, что лёжа поле крупнее */
.rotatehint{display:none}
@media (max-width:760px) and (orientation:portrait){
  .rotatehint{display:block;z-index:6;margin-top:8px;font-family:var(--disp);font-size:11px;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--yellow);opacity:.75;text-align:center}
}