/* reGOT – közös arculat (v0.2) · „Obszidián": sötét üveg, arany fénnyel.
   Forrás: poc/regot_v0.0/design/02-obszidian.html. Mindhárom felület ezt tölti (/assets/regot.css). */

@import url('/assets/fonts.css');

:root {
  color-scheme: dark;

  /* Hideg tónusú mély fekete – ettől frissebb az arany. */
  --bg:         #06070a;
  --uveg:       rgba(255, 255, 255, 0.045);
  --uveg-elem:  rgba(255, 255, 255, 0.07);
  --uveg-vonal: rgba(255, 255, 255, 0.10);

  --arany:      #e6c063;
  --arany-feny: #f7e6b4;
  --arany-mely: #8d7330;

  --vilagos:    #eef1f6;
  --halk:       #8b95a8;
  --hideg:      #c7cedb;   /* a „re" színe */

  --helyes:     #5fd39a;
  --hibas:      #ff7a7a;

  --display: 'Cinzel', Georgia, serif;
  --szoveg:  'Inter', system-ui, sans-serif;

  --radius:  1rem;
}

* { box-sizing: border-box; }

/* A body opacity:0 alatt a html háttere látszik – legyen sötét, ne fehér villanás. */
html { background: var(--bg); }

/* A mélység két lágy fényfoltból jön: meleg arany + hideg kék. Ettől „él" a fekete. */
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--szoveg);
  color: var(--vilagos);
  background:
    radial-gradient(60vw 50vh at 78% 8%,  rgba(230, 192, 99, 0.14), transparent 60%),
    radial-gradient(70vw 60vh at 6% 96%,  rgba(90, 130, 200, 0.10), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--arany); text-decoration: none; }

/* ---------- wordmark / logó ---------- */
.wordmark { font-family: var(--display); font-weight: 900; letter-spacing: .04em; line-height: 1; }
.wordmark .re  { color: var(--hideg); }
.wordmark .got {
  background: linear-gradient(100deg, var(--arany-feny), var(--arany) 55%, var(--arany-mely));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cimer { display: block; }

/* ---------- kijelentés / mottó ---------- */
.motto {
  font-size: .8rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--arany-mely);
}

/* ---------- gombok ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--szoveg); font-size: 1rem; font-weight: 600; letter-spacing: .1em;
  padding: .9rem 2rem; border: 0; border-radius: 999px; cursor: pointer;
  color: #1a1508;
  background: linear-gradient(180deg, var(--arany-feny), var(--arany) 55%, #c8a343);
  box-shadow: 0 0 2.4rem rgba(230, 192, 99, .30);
  transition: box-shadow .18s, transform .18s;
}
.btn:hover { box-shadow: 0 0 3.2rem rgba(230, 192, 99, .5); transform: translateY(-1px); }

.btn-uveg {
  color: var(--vilagos);
  background: var(--uveg-elem);
  border: 1px solid var(--uveg-vonal);
  box-shadow: none;
}
.btn-uveg:hover { border-color: var(--arany); color: var(--arany-feny); box-shadow: none; }

/* ---------- üvegpanel ---------- */
.panel {
  background: var(--uveg);
  border: 1px solid var(--uveg-vonal);
  border-radius: var(--radius);
  padding: 1.4rem;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.panel-arany { border-color: rgba(230, 192, 99, .30); box-shadow: 0 0 4rem rgba(230, 192, 99, .10); }

/* ---------- pirula / állapotjelek ---------- */
.pirula {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem; border-radius: 999px;
  background: var(--uveg); border: 1px solid var(--uveg-vonal);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--halk);
}
.eljel {
  width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--arany); box-shadow: 0 0 .7rem rgba(230, 192, 99, .9);
}
.eljel.holt { background: #6b7486; box-shadow: none; }
.rombusz {
  width: .5rem; height: .5rem; background: var(--arany); transform: rotate(45deg);
  flex: 0 0 auto; box-shadow: 0 0 .6rem rgba(230, 192, 99, .6);
}

.dim { color: var(--halk); }

/* ---------- nyelvkapcsoló ---------- */
.lang-switch { display: inline-flex; gap: .25rem; }
.lang-fix { position: fixed; top: 1rem; right: 1rem; z-index: 10; }
.lang-btn {
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  padding: .35rem .6rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--uveg-vonal); color: var(--halk);
}
.lang-btn:hover:not(.aktiv) { color: var(--arany); border-color: var(--arany); }
.lang-btn.aktiv { color: var(--bg); background: var(--arany); border-color: var(--arany); }