/* COREWARD COMMUNITY — Copyright (c) 2026 SANSOFT (Bancsó Péter e.v.). See LICENSE.

   A lap NEM a játék stíluslapját használja. Az 117 kB, és nagyjából minden
   sora egy három dimenziós műszerfalról szól — egy fórumnak ebből semmi nem
   kell. Amit átveszünk, az a HANG: ugyanaz a sötét háttér, ugyanaz az
   írógépbetű, ugyanaz a ritkított nagybetűs felirat és ugyanaz a ciánkék.
   Aki a nyitóképernyőről érkezik, ne érezze, hogy elhagyta az oldalt. */

:root {
  --bg:      #04080d;
  --ink:     #9dbccd;   /* alapszöveg */
  --ink-hi:  #cfe9f7;   /* cím, kiemelés */
  --ink-lo:  #4d7a92;   /* másodlagos: dátum, szám, megjegyzés */
  --line:    rgba(96,150,185,.24);
  --panel:   rgba(12,28,42,.55);
  --panel-2: rgba(20,52,74,.42);
  --cyan:    #8fd4f5;
  /* HAROM HANG, HAROM SZIN. Nem dekoracio: egy pillantasbol el kell dolni,
     KI beszel — a hazirendet iro COREWARD, a gazda a sajat neveben, vagy egy
     jatekos. A szin csak a masodik jel, a nev az elso: aki nem latja a
     szineket, az is olvassa a becenevet. */
  --warm:    #ffd58a;   /* COREWARD — a lap sajat hangja: hazirend, GYIK */
  --green:   #74d6a2;   /* a jatekosok */
}

* { box-sizing: border-box; }

/* A HATTERSZIN A <html>-EN ALL, ES A <body> ATLATSZO. Nem stilus kerdese:
   a csillagok (#sky) `z-index:-1`-gyel allnak, tehat a body sajat hattere
   ELTAKARNA oket — a lap aljan, a tartalom alatt latszottak volna csak. Igy
   viszont a html hattere a legalso reteg, a csillagok folotte, a tartalom
   pedig mindketto folott. */
/* A GORGETOSAV HELYE MINDIG FOGLALT. Enelkul a lap szelessege tiz keppontot
   ugrik, valahanyszor egy rovid nezetrol egy hosszura valtunk (lista ->
   tema): megjelenik a gorgetosav, es alatta minden elcsuszik. Nem nagy hiba,
   de minden kattintasnal latszik. */
html { -webkit-text-size-adjust: 100%; background: var(--bg); scrollbar-gutter: stable; }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  min-height: 100vh;
}

/* A CSILLAGOK. Három átlátszó rétegű radiális gradiens, semmi több: ez a
   háttér nem mozog, nem tölt be, és nem eszik akkumulátort. A `fixed` azért
   kell, hogy görgetés közben ne csússzon el — az ég nem görög. */
#sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 71% 8%,  rgba(210,235,255,.45), transparent),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 88% 41%, rgba(255,240,210,.45), transparent),
    radial-gradient(1px 1px at 54% 88%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 22% 77%, rgba(190,225,255,.35), transparent),
    radial-gradient(1px 1px at 92% 79%, rgba(255,255,255,.28), transparent),
    radial-gradient(1200px 700px at 76% -10%, rgba(30,90,130,.20), transparent 70%),
    radial-gradient(900px 600px at 6% 106%, rgba(20,60,95,.18), transparent 70%);
}

/* A NYITOKEP, ROGZITVE A JOBB OLDALON. Ugyanaz a fajl, amit a jatek
   nyitokepernyoje hasznal (a szerveren mar ott van, nem toltunk fel semmit).
   A bal szele atmenettel tunik a hatterbe, hogy ne egy fuggoleges vagas
   valassza ketté a lapot, es a teteje-alja is elhalvanyodik: igy a fejlec es
   a lablec fole nem tolakszik.

   `fixed`: gorgetes kozben all. Egy alló kep mogott mozgo szoveg az, amitol
   a lap melysege erzodik — egy egyutt gorgo hatterkep csak egy hosszu kep. */
#art {
  position: fixed; z-index: -1; pointer-events: none;
  top: 0; right: 0; bottom: 0; width: min(56%, 900px);
  background: url('../img/login.jpg') center/cover no-repeat;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 62%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 62%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  opacity: .5;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* --- fejléc ------------------------------------------------------------ */

#top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(4,8,13,.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 18px; height: 58px; }

.brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-name { font-size: 17px; letter-spacing: .22em; color: var(--ink-hi); font-weight: 600; }
.brand-sub  { font-size: 10px; letter-spacing: .22em; color: var(--ink-lo); }

#searchform { flex: 1 1 auto; min-width: 0; }
#q {
  width: 100%; max-width: 380px;
  padding: 8px 12px; border-radius: 4px;
  background: rgba(8,20,30,.7); color: var(--ink-hi);
  border: 1px solid var(--line);
  font: inherit; font-size: 12px;
}
#q:focus { outline: none; border-color: rgba(150,215,250,.6); }
#q::placeholder { color: #3f6d88; }

.top-right { display: flex; gap: 8px; flex: 0 0 auto; }

/* A gombok a nyitóképernyő .sm gombjainak kistestvérei: ugyanaz a keret,
   ugyanaz a ritkítás, csak alacsonyabb — itt sorban állnak, nem egymás alatt. */
.tbtn {
  display: inline-block; padding: 8px 14px; border-radius: 4px;
  font: inherit; font-size: 10.5px; letter-spacing: .18em; font-weight: 600;
  text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap;
  color: #9ec6dc; background: var(--panel-2);
  border: 1px solid rgba(96,150,185,.42);
  transition: color .15s, background .15s, border-color .15s;
}
.tbtn:hover { color: #e6f7ff; background: rgba(34,84,116,.6);
              border-color: rgba(150,215,250,.75); text-decoration: none; }
.tbtn.go { color: #04202e; background: linear-gradient(180deg,#8fe0ff,#40b6e4); border-color: transparent; }
.tbtn.go:hover { color: #04202e; background: linear-gradient(180deg,#a5e8ff,#4ec2ee); }
.tbtn[disabled] { opacity: .45; cursor: default; }

/* --- elrendezés -------------------------------------------------------- */

.cols { display: grid; grid-template-columns: 210px 1fr; gap: 28px; padding-top: 26px; padding-bottom: 60px; align-items: start; }
/* A racs gyerekeinek alapertelmezett legkisebb szelessege a TARTALMUKE, nem
   nulla. Emiatt a vizszintesen gorgetheto rovatsav (keskeny kepernyon) nem
   szukult ossze, hanem kitolta a lapot a kepernyo szelen tul — a fejlec savja
   375 kepponton ert veget, a tartalom viszont 436-on. Egy sor, es a
   `overflow-x: auto` vegre azt csinalja, amiert oda lett irva. */
.cols > * { min-width: 0; }

#side { position: sticky; top: 84px; }

#cats { display: flex; flex-direction: column; gap: 3px; }
.cat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 4px; border: 1px solid transparent;
  color: #9ec6dc; font-size: 11px; letter-spacing: .14em; font-weight: 600;
  cursor: pointer; background: none; text-align: left; width: 100%; font-family: inherit;
}
.cat:hover { background: rgba(20,52,74,.4); text-decoration: none; }
.cat.on { background: var(--panel-2); border-color: rgba(96,150,185,.42); color: var(--ink-hi); }
.cat i { font-style: normal; color: var(--ink-lo); font-size: 10px; letter-spacing: 0; }

#stats { margin: 16px 0 12px; padding-top: 14px; border-top: 1px solid var(--line);
         font-size: 10.5px; color: var(--ink-lo); letter-spacing: .1em; }
.side-note { font-size: 11px; line-height: 1.6; color: #3f6d88; }

/* --- listák ------------------------------------------------------------ */

.head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
        margin: 0 0 14px; flex-wrap: wrap; }
.head h1 { margin: 0; font-size: 19px; letter-spacing: .2em; color: var(--ink-hi); font-weight: 600; }
.head .blurb { font-size: 11.5px; color: var(--ink-lo); flex: 1 1 200px; }

.tlist { border-top: 1px solid var(--line); }
.trow {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 18px;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.trow:hover { background: rgba(20,52,74,.22); }
.trow .t {
  font-size: 13.5px; color: var(--ink-hi); letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.trow .t:hover { text-decoration: underline; }
.trow .meta { grid-column: 1; font-size: 10.5px; color: var(--ink-lo); letter-spacing: .06em; }
.trow .nums { grid-row: 1 / span 2; grid-column: 2; text-align: right;
              font-size: 10.5px; color: var(--ink-lo); letter-spacing: .06em; white-space: nowrap; }
.trow .nums b { display: block; color: #9ec6dc; font-weight: 600; font-size: 12px; }

/* A rovat jele a listában. Nem szín szerint különbözteti meg őket — színvak
   olvasónak az semmit nem mond —, hanem kiírja a rovat nevét. */
.tag { display: inline-block; padding: 1px 6px; margin-right: 8px; border-radius: 3px;
       border: 1px solid var(--line); font-size: 9.5px; letter-spacing: .14em;
       color: #7fb0c9; vertical-align: 1px; }
.flag { color: var(--warm); letter-spacing: .1em; font-size: 10px; margin-right: 7px; }
/* A listasorban ugyanaz a harom szin, csak kisebben. */
.who       { color: var(--green); }
.who.staff { color: var(--warm); }
.who.owner { color: var(--cyan); }

.snippet { grid-column: 1 / -1; font-size: 11.5px; color: #7d9db0;
           border-left: 2px solid var(--line); padding-left: 10px; margin-top: 4px; }

.empty { padding: 34px 4px; color: var(--ink-lo); font-size: 12px; }
.loading { padding: 34px 4px; color: var(--ink-lo); font-size: 12px; }

.pager { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }

/* --- egy téma ---------------------------------------------------------- */

.crumb { font-size: 10.5px; letter-spacing: .14em; color: var(--ink-lo); margin-bottom: 10px; }
.thead { margin: 0 0 6px; font-size: 20px; line-height: 1.35; letter-spacing: .02em;
         color: var(--ink-hi); font-weight: 600; overflow-wrap: anywhere; }
.tsub { font-size: 10.5px; color: var(--ink-lo); letter-spacing: .08em; margin-bottom: 22px; }

/* FEKETE UVEG. A dobozok atlatszoak, es elmossak, ami mogottuk van — igy a
   kep atsejlik a szoveg alatt, de egyetlen betut sem tesz olvashatatlanna.
   Akinek a bongeszoje nem tud `backdrop-filter`-t, annak marad a sotet
   alapszin: az onmagaban is eleg kontrasztot ad. */
.post { border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
        backdrop-filter: blur(14px) saturate(.75);
        -webkit-backdrop-filter: blur(14px) saturate(.75);
        padding: 14px 16px; margin-bottom: 12px; }
.post.op { border-color: rgba(96,150,185,.42); }
.phead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
         margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* AZ AVATAR. Egyelore mindenkinek ugyanaz: egy korbe zart, KIVAGOTT
   emberalak — a szin a kore, a figura maga a luk rajta. Nem kep, hanem
   vektor, tehat nincs toltese es minden felbontason eles. Ha egyszer valodi
   kepek jonnek a helyere, ez az egy szabaly es egy fuggveny cserelodik. */
.av { flex: 0 0 auto; width: 22px; height: 22px; display: block; border-radius: 50%; }
.av path       { fill: var(--green); }
.av-staff path { fill: var(--warm); }
.av-owner path { fill: var(--cyan); }
.pnick { font-size: 11.5px; letter-spacing: .12em; font-weight: 600; color: var(--green); }
.pnick.staff { color: var(--warm); }
.pnick.owner { color: var(--cyan); }
.pwhen { font-size: 10.5px; color: var(--ink-lo); }
.pacts { margin-left: auto; display: flex; gap: 10px; }
.pact { background: none; border: none; padding: 0; cursor: pointer; font: inherit;
        font-size: 10px; letter-spacing: .14em; color: var(--ink-lo); }
.pact:hover { color: var(--cyan); }

/* A hozzászólás törzse. `pre-wrap`: a sortöréseket úgy tartjuk meg, ahogy
   beírták — egy repülési naplóban a sorok tagolása információ. */
/* A SORKOZ 1.55, NEM 1.75. Egy forumhozzaszolas nem prospektusszoveg: rovid
   bekezdesek, egymas utan, es ha mindegyik sor kozott egy fel sor levego van,
   akkor tiz mondat elfoglal egy kepernyot. A `pre-wrap` marad — a repulesi
   naplokban a sortordeles informacio —, de a MI szovegeink egy bekezdes = egy
   sor formaban allnak, hogy a bongeszo tordelje oket a doboz szelesseegehez. */
.pbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; }
.pbody > .quote { margin: 2px 0; }
.pbody a { overflow-wrap: anywhere; }
.pbody .quote { display: block; border-left: 2px solid var(--line); padding-left: 10px;
                color: #7d9db0; }
.pbody code { background: rgba(8,20,30,.8); border: 1px solid var(--line);
              border-radius: 3px; padding: 0 4px; font-size: 12px; }
.gone { color: #3f6d88; font-style: italic; }

/* --- szerkesztő -------------------------------------------------------- */

.composer { margin-top: 22px; border: 1px solid var(--line); border-radius: 5px;
            background: var(--panel);
            backdrop-filter: blur(14px) saturate(.75);
            -webkit-backdrop-filter: blur(14px) saturate(.75);
            padding: 15px 16px; }
.composer h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: .2em; color: #9ec6dc; font-weight: 600; }
.composer label { display: block; font-size: 10px; letter-spacing: .16em;
                  color: var(--ink-lo); margin-bottom: 12px; }
.composer input[type=text], .composer textarea, .composer select {
  display: block; width: 100%; margin-top: 5px;
  padding: 9px 11px; border-radius: 4px;
  background: rgba(8,20,30,.7); color: var(--ink-hi);
  border: 1px solid var(--line); font: inherit; font-size: 13px; letter-spacing: 0;
}
.composer textarea { min-height: 130px; resize: vertical; line-height: 1.7; }
.composer input:focus, .composer textarea:focus, .composer select:focus {
  outline: none; border-color: rgba(150,215,250,.6); }
/* A gombsor es a szovegdoboz kozott res. Egy gomb, ami hozzaer a mezo
   kereteehez, ugy nez ki, mintha a mezo resze volna. */
.crow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.count { font-size: 10px; color: var(--ink-lo); letter-spacing: .1em; margin-left: auto; }
.count.over { color: #ff9a8a; }
.err { color: #ff9a8a; font-size: 11.5px; margin-bottom: 10px; }
.hint { font-size: 10.5px; color: #3f6d88; margin-top: 10px; line-height: 1.6; }

/* A gazda savja a hozzaszolasok es a valaszdoboz KOZE kerul: ami a temaval
   mint egesszel tortenik, az a temat lezaro sor, nem a valaszirasé. */
.modbar { margin: 18px 0 4px; padding: 12px 14px; border-radius: 5px;
          border: 1px solid rgba(255,213,138,.22); background: rgba(40,30,10,.28);
          backdrop-filter: blur(14px) saturate(.75);
          -webkit-backdrop-filter: blur(14px) saturate(.75); }
.modbar .hint { margin-top: 10px; }

.locked { border: 1px dashed var(--line); border-radius: 5px; padding: 14px 16px;
          margin-top: 22px; font-size: 11.5px; color: var(--ink-lo);
          background: var(--panel);
          backdrop-filter: blur(14px) saturate(.75);
          -webkit-backdrop-filter: blur(14px) saturate(.75); }

/* A MEG NEM ERŐSITETT CIM. Nem hibauzenet — allapot —, ezert nem piros: meleg
   szin, ugyanaz, ami a gazdat is jeloli. A gomb a dobozon BELUL all, mert a
   mondat es a teendo egy dolog. */
.needmail { border: 1px solid rgba(255,213,138,.34); border-radius: 5px;
            padding: 14px 16px; margin-top: 22px;
            background: rgba(40,30,10,.35);
            backdrop-filter: blur(14px) saturate(.75);
            -webkit-backdrop-filter: blur(14px) saturate(.75); }
.needmail h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .2em;
               color: var(--warm); font-weight: 600; }
.needmail p { margin: 0 0 14px; font-size: 11.5px; line-height: 1.65; color: #b9ccd8; }
.needmail .ok { color: #9ee6b8; }

/* --- ablak -------------------------------------------------------------- */

#modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center;
         justify-content: center; background: rgba(2,5,9,.82); padding: 20px; }
#modal[hidden] { display: none; }
.mbox { width: 100%; max-width: 380px; border: 1px solid rgba(96,150,185,.42);
        border-radius: 6px; background: #071119; padding: 20px 22px; }
.mbox h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: .22em; color: var(--ink-hi); font-weight: 600; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.tab { flex: 1; padding: 8px 6px; border-radius: 4px; cursor: pointer; font: inherit;
       font-size: 10px; letter-spacing: .14em; font-weight: 600; color: #7fb0c9;
       background: none; border: 1px solid var(--line); }
.tab.on { color: var(--ink-hi); background: var(--panel-2); border-color: rgba(150,215,250,.6); }
.mbox label { display: block; font-size: 10px; letter-spacing: .16em;
              color: var(--ink-lo); margin-bottom: 12px; }
.mbox input[type=email], .mbox input[type=password], .mbox input[type=text] {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border-radius: 4px;
  background: rgba(8,20,30,.7); color: var(--ink-hi); border: 1px solid var(--line);
  font: inherit; font-size: 13px; letter-spacing: 0; }
.mbox input:focus { outline: none; border-color: rgba(150,215,250,.6); }
.mbox .check { display: flex; gap: 9px; align-items: flex-start; letter-spacing: 0;
               font-size: 10.5px; line-height: 1.55; color: #7d9db0; }
.mbox .check input { margin-top: 3px; flex: 0 0 auto; }
.merr { color: #ff9a8a; font-size: 11.5px; min-height: 18px; margin-bottom: 8px; }
.mrow { display: flex; gap: 8px; }
.mrow .tbtn { flex: 1; }
#modal:not(.reg) .reg-only { display: none; }

/* --- lábléc ------------------------------------------------------------- */

footer { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
         padding-top: 18px; padding-bottom: 34px; border-top: 1px solid var(--line);
         font-size: 10.5px; color: var(--ink-lo); letter-spacing: .08em; }

/* --- keskeny képernyő ---------------------------------------------------
   Telefonon a rovatlista VÍZSZINTESEN gördül a tartalom fölött. Egymás alá
   tenni annyi lenne, mint minden látogatót átgörgetni öt soron, mielőtt
   megpillantaná az első témát. */
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; gap: 18px; }
  #side { position: static; }
  #cats { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .cat { flex: 0 0 auto; }
  .cat i { display: none; }
  #stats, .side-note { display: none; }
  /* A FEJLEC KESKENYEN. Harom dolog fer ki egy sorba 375 kepponton: a nev, a
     visszaut es a fiok — de csak ha mindharom osszebb huzza magat. A ritkitas
     az elso, amit feladunk: nagybetus feliratnal az adja a legtobb helyet, es
     az olvashatosagbol veszi a legkevesebbet. */
  /* A vizszintes belso margo a .wrap-e — ha itt csak `padding: 10px 0`-t
     irunk, azt is felulirjuk, es a nev nekimegy a kepernyo szelenek. */
  .top-in { height: auto; padding: 10px 20px; flex-wrap: wrap; gap: 8px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand-name { font-size: 15px; letter-spacing: .12em; }
  .brand-sub { display: none; }
  .top-right { margin-left: auto; }
  .tbtn { padding: 7px 9px; letter-spacing: .10em; }
  /* A becenev barmilyen hosszu lehet; a gomb nem nyulhat vele. */
  #acct { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  #searchform { order: 3; flex-basis: 100%; }
  #q { max-width: none; }
}