/* ============================================================
   HungaroGames — közös PC játék-keret (nyitóképernyő, menü, szünet)
   hungarogames.com
   ============================================================ */
.hgs-root{
  --hgs-a:#3a2560;          /* témaszín 1 (játékonként felülírva) */
  --hgs-b:#7b2f4a;          /* témaszín 2 */
  --hgs-accent:#ffcf5c;     /* kiemelés */
  --hgs-ink:#fbf3ff;
  --hgs-muted:#c9bbdd;
  position:fixed; inset:0; z-index:2147483000;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:var(--hgs-ink);
  display:none;
}
.hgs-root.hgs-on{display:block}
.hgs-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% -10%, var(--hgs-a) 0, transparent 58%),
    radial-gradient(circle at 85% 8%, var(--hgs-b) 0, transparent 52%),
    linear-gradient(165deg,#1d1230,#120a20 60%,#080512);
}
/* halk népi motívum-réteg */
.hgs-bg::after{
  content:""; position:absolute; inset:0; opacity:.10; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='white' stroke-width='2.4'><circle cx='60' cy='60' r='10'/><path d='M60 50c0-14 11-22 11-22s-2 14-11 22z'/><path d='M70 60c14 0 22 11 22 11s-14-2-22-11z'/><path d='M60 70c0 14-11 22-11 22s2-14 11-22z'/><path d='M50 60c-14 0-22-11-22-11s14 2 22 11z'/></g></svg>");
  background-size:130px 130px;
}
.hgs-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(4,2,10,.65) 100%)}

.hgs-wrap{position:relative;height:100%;display:grid;place-items:center;padding:24px;overflow:auto}
.hgs-panel{
  width:min(760px,94vw); text-align:center;
  animation:hgs-pop .45s cubic-bezier(.2,.8,.25,1) both;
}
.hgs-crest{
  width:104px;height:104px;margin:0 auto 18px;border-radius:26px;
  display:grid;place-items:center;font-size:52px;
  background:linear-gradient(150deg,var(--hgs-a),var(--hgs-b));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  animation:hgs-float 4s ease-in-out infinite;
}
.hgs-kicker{color:var(--hgs-accent);font-weight:900;letter-spacing:.22em;font-size:.74rem;margin-bottom:10px}
.hgs-title{
  font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.02;margin-bottom:12px;font-weight:900;
  background:linear-gradient(100deg,#fff 14%,var(--hgs-accent) 46%,#9fd8ff 74%,#fff 94%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hgs-shine 9s linear infinite;
}
.hgs-sub{color:var(--hgs-muted);font-size:1rem;line-height:1.6;max-width:56ch;margin:0 auto 22px}

.hgs-menu{display:flex;flex-direction:column;gap:12px;width:min(380px,90vw);margin:0 auto}
.hgs-btn{
  appearance:none;border:0;cursor:pointer;font-family:inherit;
  border-radius:16px;padding:15px 18px;font-size:1.04rem;font-weight:900;
  color:#2a1600;background:linear-gradient(180deg,#ffd977,#f2a007);
  box-shadow:0 12px 26px rgba(242,160,7,.32);
  transition:transform .13s ease, filter .13s ease;
  display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
}
.hgs-btn:hover{filter:brightness(1.07)}
.hgs-btn:active{transform:scale(.97)}
.hgs-btn.hgs-ghost{
  background:rgba(255,255,255,.09);color:var(--hgs-ink);
  border:1px solid rgba(255,255,255,.16);box-shadow:none;
}
.hgs-btn[disabled]{opacity:.4;cursor:not-allowed}

.hgs-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:20px auto 0;width:min(560px,92vw)}
.hgs-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:12px;font-size:.82rem;color:var(--hgs-muted);line-height:1.45
}
.hgs-card b{display:block;color:var(--hgs-ink);font-size:.88rem;margin-bottom:4px}

.hgs-foot{margin-top:22px;color:#9c8cba;font-size:.78rem}
.hgs-foot a{color:var(--hgs-accent);text-decoration:none}

/* betöltő */
.hgs-load{width:min(420px,88vw);margin:22px auto 0}
.hgs-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.hgs-bar i{display:block;height:100%;width:0%;border-radius:6px;
  background:linear-gradient(90deg,var(--hgs-accent),#ff8a5c);transition:width .25s ease}
.hgs-loadtxt{margin-top:10px;color:var(--hgs-muted);font-size:.84rem;letter-spacing:.05em}

/* lebegő szünet gomb a játék felett */
.hgs-pausebtn{
  position:fixed;top:12px;right:12px;z-index:2147482000;
  width:46px;height:46px;border:0;border-radius:13px;cursor:pointer;
  background:rgba(18,10,32,.72);color:#fff;font-size:1.15rem;
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  display:none;align-items:center;justify-content:center;
  font-family:"Segoe UI",system-ui,sans-serif;
}
.hgs-pausebtn.hgs-on{display:flex}
.hgs-pausebtn:active{transform:scale(.93)}

@keyframes hgs-pop{0%{opacity:0;transform:translateY(16px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes hgs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hgs-shine{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@media (prefers-reduced-motion:reduce){.hgs-root *{animation:none!important}}
@media (max-width:520px){
  .hgs-crest{width:84px;height:84px;font-size:42px}
  .hgs-sub{font-size:.92rem}
}