/* Слой GGTHOT поверх штатного оформления игры: режимы, магазин, настройки.
   Палитра и шрифты берутся у самой игры, чтобы вставки не выглядели чужими. */

.gg-modes { display: flex; gap: 8px; margin: 22px 0 18px; flex-wrap: wrap; }
.gg-mode {
  flex: 1 1 150px; min-width: 140px; text-align: left; cursor: pointer;
  background: rgba(16, 14, 14, .55); border: 1px solid rgba(238, 80, 59, .22);
  color: #cfc6c1; padding: 11px 12px; font: inherit; transition: .18s;
}
.gg-mode:hover { border-color: rgba(238, 80, 59, .6); background: rgba(30, 20, 18, .7); }
.gg-mode.active { border-color: #ee503b; background: rgba(46, 22, 19, .8); color: #f6ece7; }
.gg-mode b { display: block; font-size: 13px; letter-spacing: .06em; margin-bottom: 4px; }
.gg-mode small { display: block; font-size: 10px; line-height: 1.35; color: #9b8f89; }
.gg-mode i { display: block; margin-top: 7px; font-style: normal; font-size: 9px; letter-spacing: .12em; color: #ee503b; }

.gg-shop-main {
  width: 100%; margin-top: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  background: rgba(16, 14, 14, .6); border: 1px solid rgba(238, 80, 59, .35);
  color: #e2d8d2; font: inherit; font-size: 12px; letter-spacing: .16em; padding: 13px 16px; transition: .18s;
}
.gg-shop-main:hover { border-color: #ee503b; background: rgba(40, 20, 18, .8); }
.gg-shop-main i { margin-left: auto; font-style: normal; font-size: 9px; letter-spacing: .08em; color: #9b8f89; }

.gg-wallet { width: auto !important; padding: 0 10px !important; font-size: 11px !important; letter-spacing: .1em; }

.gg-panel {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(6, 5, 6, .82); backdrop-filter: blur(7px);
}
.gg-panel.hidden { display: none; }
.gg-panel-inner {
  position: relative; width: min(760px, calc(100% - 40px)); max-height: 84vh; overflow-y: auto;
  background: #0d0b0c; border: 1px solid rgba(238, 80, 59, .3); padding: 30px 32px;
}
.gg-close {
  position: absolute; right: 14px; top: 12px; background: none; border: 0;
  color: #9b8f89; font-size: 18px; cursor: pointer;
}
.gg-close:hover { color: #ee503b; }
.gg-eyebrow { font-size: 9px; letter-spacing: .32em; color: #ee503b; }
.gg-panel h2 { font-size: 34px; letter-spacing: -.01em; margin: 10px 0 18px; color: #f4ece8; }
.gg-balance { font-size: 12px; letter-spacing: .08em; color: #a89d97; margin: 0 0 18px; display: flex; gap: 10px; align-items: center; }
.gg-balance b { color: #f0e2d8; }
.gg-balance a { margin-left: auto; color: #ee503b; font-size: 11px; }
.gg-hint { font-size: 11px; line-height: 1.6; color: #8f847e; margin: 0 0 18px; }

.gg-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.gg-tabs button, .gg-quality button {
  background: rgba(22, 18, 18, .8); border: 1px solid rgba(238, 80, 59, .2);
  color: #c3b8b2; font: inherit; font-size: 11px; letter-spacing: .1em;
  padding: 9px 16px; cursor: pointer; transition: .18s;
}
.gg-tabs button:hover, .gg-quality button:hover { border-color: rgba(238, 80, 59, .6); }
.gg-tabs button.active, .gg-quality button.active { background: #ee503b; border-color: #ee503b; color: #140d0c; }
.gg-quality { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.gg-quality button { flex: 1 1 110px; }

.gg-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.gg-skin {
  border: 1px solid; background: rgba(20, 16, 16, .7); padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
}
.gg-skin.equipped { background: rgba(46, 22, 19, .75); }
.gg-swatch { width: 40px; height: 40px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .14); margin-bottom: 3px; }
.gg-skin b { font-size: 11px; color: #efe6e0; letter-spacing: .03em; }
.gg-skin small { font-size: 8px; letter-spacing: .12em; }
.gg-skin button {
  width: 100%; margin-top: 5px; background: #ee503b; border: 0; color: #140d0c;
  font: inherit; font-size: 9px; letter-spacing: .12em; padding: 8px 4px; cursor: pointer;
}
.gg-skin button:disabled { background: #2c2624; color: #6f6560; cursor: not-allowed; }
.gg-on { margin-top: 5px; font-size: 9px; letter-spacing: .12em; color: #ee503b; padding: 8px 0; }

.gg-reward { margin: 12px 0 4px; font-size: 12px; letter-spacing: .06em; color: #ee503b; }

.gg-toast {
  position: fixed; left: 50%; top: 92px; transform: translateX(-50%) translateY(-12px);
  z-index: 95; background: #14100f; border: 1px solid rgba(238, 80, 59, .45);
  color: #efe4dd; font-size: 12px; letter-spacing: .06em; padding: 10px 18px;
  opacity: 0; pointer-events: none; transition: .25s;
}
.gg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px) {
  .gg-modes { flex-direction: column; }
  .gg-panel-inner { padding: 22px 18px; }
}