/* World of Clashes forums — glassy dark + gold, YELLOW for official words.
   (--blue is kept as the variable NAME for churn-free markup, but its VALUE is the
   official-yellow — every "blue" class renders gold.) No JS anywhere. */
* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #0b0d13; --panel: rgba(21, 25, 36, 0.88); --panel2: rgba(30, 35, 50, 0.85);
  --line: #262d3f; --tx: #e8ebf4; --dim: #8d97ab; --gold: #e5b45a;
  --blue: #ffd24a; --blue-deep: #4a3810; --red: #ef5350; --ok: #48c78e;
  --fac-light: #ffd24a; --fac-dark: #a86dff;
}
body {
  background: var(--bg) url('/assets/city_life.png') center -120px / 1600px no-repeat fixed;
  color: var(--tx); font: 15px/1.55 Rubik, system-ui, sans-serif; min-height: 100vh;
}
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(11,13,19,.82), rgba(11,13,19,.97) 420px); pointer-events: none; }
.wrap { position: relative; max-width: 1060px; margin: 0 auto; padding: 18px 14px 40px; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header */
.fhead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 0 16px; }
.brand { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--gold); letter-spacing: 1px; }
.brand span { color: var(--blue); }
.fnav { display: flex; gap: 14px; font-size: 13px; }
.fnav a { color: var(--dim); } .fnav a:hover { color: var(--gold); }
.who { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.me { color: var(--tx); font-weight: 500; }
.crumb { font-size: 13px; color: var(--dim); margin-bottom: 12px; }

/* layout */
.cols { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.onecol { max-width: 900px; margin: 0 auto; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; backdrop-filter: blur(6px); }
h1 { font-size: 21px; } h2 { font-size: 16px; letter-spacing: 1px; } h3 { font-size: 13px; letter-spacing: 1.2px; color: var(--gold); margin-bottom: 10px; }
.grp { color: var(--gold); margin-bottom: 10px; }
.bluegrp { color: var(--blue); }
.dim { color: var(--dim); } .tiny { font-size: 12px; }
.err { color: #ff8a80; background: rgba(90,20,22,.5); border: 1px solid #5a2a2e; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }

/* forum rows */
.frow { display: block; padding: 11px 12px; border-radius: 9px; border: 1px solid transparent; color: var(--tx); }
.frow:hover { background: var(--panel2); border-color: var(--line); text-decoration: none; }
.frow.bluef { border-left: 3px solid var(--blue); }
.ftitle { font-weight: 600; font-size: 15px; }
.fdesc { color: var(--dim); font-size: 13px; }
.fstats { color: var(--dim); font-size: 12px; margin-top: 2px; }
.fstats em { color: var(--gold); font-style: normal; }

/* tags */
.btag { background: var(--blue-deep); color: var(--blue); border: 1px solid var(--blue); border-radius: 4px; font-size: 10px; padding: 1px 6px; letter-spacing: 1px; vertical-align: 2px; }
.stag { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.ltag { color: var(--red);  font-size: 11px; letter-spacing: 1px; }

/* thread list */
.trow { display: grid; grid-template-columns: 34px 1fr 70px 90px; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 9px; color: var(--tx); }
.trow:hover { background: var(--panel2); text-decoration: none; }
.trow.bluef { border-left: 3px solid var(--blue); }
.tava { border-radius: 6px; border: 2px solid var(--line); image-rendering: pixelated; object-fit: cover; width: 34px; height: 34px; }
.tava-light { border-color: var(--fac-light); }
.tava-dark  { border-color: var(--fac-dark); }
.ttitle { font-weight: 600; font-size: 14px; }
.tmeta { color: var(--dim); font-size: 12px; }
.treplies { text-align: center; color: var(--gold); font-weight: 700; }
.treplies span { display: block; color: var(--dim); font-size: 10px; font-weight: 400; }
.tupd { color: var(--dim); font-size: 12px; text-align: right; }

/* posts — classic-forum layout: poster rail left, body right */
.threadhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.post { display: grid; grid-template-columns: 130px 1fr; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.post-blue { border-color: #86702c; background: linear-gradient(180deg, rgba(80,62,22,.5), rgba(21,25,36,.9)); }
.poster { background: rgba(12,15,23,.55); border-right: 1px solid var(--line); padding: 14px 10px; text-align: center; }
.pava { image-rendering: pixelated; border-radius: 8px; border: 3px solid var(--line); width: 96px; height: 96px; object-fit: cover; }
.pava-light { border-color: var(--fac-light); box-shadow: 0 0 10px rgba(255,210,74,.3); }
.pava-dark  { border-color: var(--fac-dark);  box-shadow: 0 0 10px rgba(168,109,255,.3); }
.pava-staff { box-shadow: 0 0 14px rgba(255,210,74,.55); }
.pname { font-weight: 700; font-size: 13px; margin-top: 6px; }
.staffname { color: var(--blue); }
.ptag { color: var(--blue); font-size: 10px; letter-spacing: 1.4px; }
.phero { color: var(--gold); font-size: 12px; margin-top: 4px; }
.pmeta, .pposts { color: var(--dim); font-size: 11px; }
.pbody { padding: 12px 16px 14px; min-width: 0; }
.ptime { color: var(--dim); font-size: 12px; margin-bottom: 8px; }
.ptext { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }
.post-blue .ptext { color: #ffeec2; }
.pactions { margin-top: 10px; display: flex; gap: 10px; align-items: center; }

/* rail */
.rail .card { padding: 14px 16px; }
.bluelink { display: block; color: var(--blue); font-size: 13px; font-weight: 600; margin-top: 8px; }
.newslink { display: block; color: var(--gold); font-size: 13px; font-weight: 600; margin-top: 8px; }
.bmeta { color: var(--dim); font-size: 11px; }
.more { display: inline-block; margin-top: 10px; font-size: 12px; }

/* forms */
label { display: block; margin: 10px 0 4px; font-size: 13px; color: var(--dim); }
input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; background: rgba(10,12,18,.8); color: var(--tx); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--gold); }
button.gold { margin-top: 12px; background: linear-gradient(180deg, #f0c674, #d9a441); color: #221605; border: 0; border-radius: 8px; padding: 10px 22px; font: 700 14px Rubik, sans-serif; letter-spacing: .5px; cursor: pointer; }
button.gold:hover { filter: brightness(1.08); }
.inline { display: inline; }
.linkbtn { background: none; border: 0; color: var(--dim); font: inherit; font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
.linkbtn:hover { color: var(--gold); }
.modbar { display: flex; gap: 8px; margin-left: auto; }
.modbtn { background: var(--panel2); border: 1px solid var(--line); color: var(--tx); border-radius: 7px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.modbtn:hover { border-color: var(--blue); color: var(--blue); }

/* pager + footer */
.pager { display: flex; gap: 6px; margin: 14px 0; }
.pager a, .pager .cur { padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.pager .cur { background: var(--gold); color: #221605; border-color: var(--gold); }
.login p { margin-bottom: 6px; }
.login-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--dim); font-size: 12px; }
.login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-apple {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 16px; border-radius: 8px;
  background: #000; color: #fff; border: 1px solid #2a2a2a;
  font: 700 14px Rubik, sans-serif; text-decoration: none;
}
.btn-apple:hover { background: #111; text-decoration: none; }
.btn-apple svg { display: block; margin-top: -2px; }
.sso-hint { margin-top: 12px; font-size: 12.5px; }
.sso-hint a { color: var(--dim); text-decoration: underline; }
.sso-hint a:hover { color: var(--gold); }
.ffoot { text-align: center; color: var(--dim); font-size: 12px; margin-top: 26px; }