/* ============================================================
   HungaroGames — közös vizuális réteg a PC játékokhoz (pcskin)

   SZABÁLY: ez a fájl KIZÁRÓLAG megjelenést módosít.
   Nem nyúl elrendezéshez (display, position, width, height,
   margin, padding, float, grid, flex), hogy egyetlen játék
   működése se boruljon fel.
   ============================================================ */

.hgskin{
  --sk-a:#3a2560;
  --sk-b:#7b2f4a;
  --sk-accent:#ffcf5c;
  --sk-ink:#f7f1ff;
  --sk-line:rgba(255,255,255,.14);
  --sk-shadow:0 14px 34px rgba(0,0,0,.42);
}

/* ---- alap: lágyabb betűk, szebb kijelölés ---- */
.hgskin, .hgskin *{
  -webkit-font-smoothing:antialiased;
  -moz-osx-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.hgskin ::selection{ background:var(--sk-accent); color:#2a1600; }

/* ---- finom mélység a háttérre (csak árnyalat, nem elrendezés) ---- */
.hgskin body{
  background-image:
    radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--sk-a) 55%, transparent) 0, transparent 55%),
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--sk-b) 45%, transparent) 0, transparent 50%),
    var(--hgskin-bodybg, none);
  background-attachment:fixed;
}

/* ---- gombok: prémium fém-arany hatás ---- */
.hgskin button,
.hgskin .btn,
.hgskin [class*="btn"]:not(input):not(textarea){
  border-radius:13px;
  box-shadow:0 8px 18px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.20);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  letter-spacing:.01em;
}
.hgskin button:hover,
.hgskin .btn:hover{ filter:brightness(1.09) saturate(1.05); }
.hgskin button:active,
.hgskin .btn:active{ transform:translateY(1px) scale(.985); box-shadow:0 4px 12px rgba(0,0,0,.3); }
.hgskin button:focus-visible{ outline:3px solid var(--sk-accent); outline-offset:2px; }

/* ---- panelek, kártyák, dobozok: lágy keret és mélység ---- */
.hgskin [class*="panel"],
.hgskin [class*="card"],
.hgskin [class*="box"],
.hgskin [class*="modal"],
.hgskin [class*="dialog"],
.hgskin [class*="popup"],
.hgskin [class*="hud"],
.hgskin [class*="menu"]{
  border-radius:16px;
  box-shadow:var(--sk-shadow), inset 0 1px 0 rgba(255,255,255,.09);
}

/* ---- fejlécek: aranyos kiemelés ---- */
.hgskin h1, .hgskin h2, .hgskin h3{
  text-shadow:0 2px 0 rgba(0,0,0,.28), 0 0 22px color-mix(in srgb, var(--sk-accent) 30%, transparent);
  letter-spacing:.005em;
}

/* ---- állapotsávok (élet, energia, töltés) fénylő kitöltéssel ---- */
.hgskin [class*="bar"] > *,
.hgskin [id*="Fill"],
.hgskin [class*="fill"]{
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px color-mix(in srgb, var(--sk-accent) 45%, transparent);
}
.hgskin [class*="bar"]{ border-radius:999px; }

/* ---- vászon: éles kép, lekerekített keret, mélység ---- */
.hgskin canvas{
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 0 1px var(--sk-line);
  image-rendering:auto;
}

/* ---- képek: ne legyenek elmosódottak, legyen kis mélységük ---- */
.hgskin img{ image-rendering:auto; }

/* ---- táblázatok, listák: olvashatóbb elválasztók ---- */
.hgskin table{ border-collapse:collapse; border-radius:12px; overflow:hidden; }
.hgskin th{ letter-spacing:.06em; text-transform:uppercase; font-size:.86em; }
.hgskin tr:nth-child(even){ background:rgba(255,255,255,.035); }

/* ---- beviteli mezők ---- */
.hgskin input, .hgskin select, .hgskin textarea{
  border-radius:11px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.28);
}
.hgskin input:focus, .hgskin select:focus, .hgskin textarea:focus{
  outline:2px solid var(--sk-accent); outline-offset:1px;
}

/* ---- görgetősáv ---- */
.hgskin ::-webkit-scrollbar{ width:11px; height:11px; }
.hgskin ::-webkit-scrollbar-track{ background:rgba(0,0,0,.25); border-radius:8px; }
.hgskin ::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--sk-accent), color-mix(in srgb, var(--sk-b) 70%, #000));
  border-radius:8px;
}

/* ---- halk népi motívum-fátyol az egész játék fölé (nem fogja el a kattintást) ---- */
.hgskin body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2147481000;
  opacity:.045;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='white' stroke-width='2.6'><circle cx='70' cy='70' r='11'/><path d='M70 59c0-16 12-25 12-25s-2 16-12 25z'/><path d='M81 70c16 0 25 12 25 12s-16-2-25-12z'/><path d='M70 81c0 16-12 25-12 25s2-16 12-25z'/><path d='M59 70c-16 0-25-12-25-12s16 2 25 12z'/></g></svg>");
  background-size:150px 150px;
}
/* ---- finom vignetta a képernyő szélén ---- */
.hgskin body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2147481001;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(4,2,10,.42) 100%);
}

/* a keret saját felületét ne színezze át a skin */
.hgs-root, .hgs-root *, .hgs-pausebtn{ mix-blend-mode:normal !important; }

@media (prefers-reduced-motion:reduce){
  .hgskin button, .hgskin .btn{ transition:none; }
}