/* ghst.network - FiveM pages (Los Santos): the Hard Edge look on top of style.css */
.fv .scene { opacity: .55; }
.fv-tag { margin-left: 4px; padding: 3px 7px; font: 800 .62rem/1 Oxanium, sans-serif; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, var(--red), #b3122c); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }

/* Hard Edge plate: cut corners, a red bar top-left, a purple bar bottom-right */
.he { position: relative; background: linear-gradient(180deg, rgba(20,14,32,.94), rgba(12,9,20,.92)); border: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); padding: 24px; }
.he::before { content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 3px; background: var(--red); }
.he::after { content: ''; position: absolute; right: 0; bottom: 0; width: 52px; height: 3px; background: var(--purple); }
.he-sm { padding: 16px 18px; }
.kick { display: flex; align-items: center; gap: 8px; font: 800 .72rem/1 Oxanium, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--red); }
.kick::before { content: ''; width: 18px; height: 2px; background: currentColor; }
.fv h1.big { font: 800 clamp(2.2rem, 5vw, 3.6rem)/1 Oxanium, sans-serif; letter-spacing: .02em; text-transform: uppercase; margin: 10px 0 8px; }
.fv h2.sec { display: flex; align-items: center; gap: 12px; font: 800 .82rem/1 Oxanium, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin: 34px 0 14px; }
.fv h2.sec::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.fv-grid { display: grid; gap: 16px; }
.fv-grid.c2 { grid-template-columns: repeat(2, 1fr); } .fv-grid.c3 { grid-template-columns: repeat(3, 1fr); } .fv-grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .fv-grid.c3, .fv-grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fv-grid.c2, .fv-grid.c3, .fv-grid.c4 { grid-template-columns: 1fr; } }
.chipx { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; font: 800 .7rem/1 Oxanium, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tc, var(--muted)); background: rgba(255,255,255,.05); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.chipx i { width: 7px; height: 7px; background: currentColor; }
.chipx.live i { animation: fvp 1.6s infinite; } @keyframes fvp { 50% { opacity: .3; } }
.statx { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.statx div { padding: 14px 16px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); }
.statx b { display: block; font: 800 1.6rem/1 Oxanium, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
.statx span { display: block; margin-top: 7px; font: 700 .66rem/1 Oxanium, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.btnx { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; font: 800 .8rem/1 Oxanium, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: linear-gradient(160deg, var(--purple), var(--purple-2)); border: 0; cursor: pointer; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: filter .15s; }
.btnx:hover { filter: brightness(1.15); color: #fff; } .btnx.red { background: linear-gradient(160deg, var(--red), #b3122c); }
.btnx.ghost { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); } .btnx.sm { padding: 8px 12px; font-size: .7rem; }
.btnx[disabled] { opacity: .45; pointer-events: none; }
.tabsx { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tabsx a { padding: 11px 16px; font: 800 .74rem/1 Oxanium, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tabsx a:hover { color: var(--text); } .tabsx a.on { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.tabsx a .n { margin-left: 6px; padding: 2px 6px; font-size: .62rem; background: var(--red); color: #fff; }
.mt { margin-top: 16px; } .mb0 { margin-bottom: 0; }

/* the server offline card */
.fv-off { display: flex; gap: 16px; align-items: center; }
.fv-off-ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; color: var(--red); background: var(--red-soft); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.fv-off-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* landing: live strip */
.fv-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .fv-strip { grid-template-columns: repeat(2, 1fr); } }

/* players */
.pf-hero { --gc: var(--purple); background: linear-gradient(120deg, var(--gcA, rgba(168,110,252,.16)), rgba(12,9,20,.94) 55%); }
.pf-hero .row { align-items: flex-end; }
.pf-name { font: 800 clamp(2rem, 5vw, 3.4rem)/1 Oxanium, sans-serif; letter-spacing: .02em; margin: 10px 0 6px; word-break: break-word; }
.pf-title { font: 700 .82rem/1 Oxanium, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--amber, #ffb020); }
.pf-lv { text-align: right; }
.pf-lv b { display: block; font: 800 4.2rem/1 Oxanium, sans-serif; color: #fff; text-shadow: 0 0 30px var(--gcA, rgba(168,110,252,.4)); }
.pf-lv span { font: 800 .7rem/1 Oxanium, sans-serif; letter-spacing: .3em; color: var(--muted); }
@media (max-width: 640px) { .pf-lv { text-align: left; } }
.ach { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); }
.ach .ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; color: #ffd24d; background: rgba(255,210,77,.1); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ach .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ach b { display: block; font: 700 .95rem/1.2 Oxanium, sans-serif; } .ach span { font-size: .8rem; color: var(--muted); }
.car { padding: 16px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); }
.car svg { width: 100%; height: 54px; fill: none; stroke: var(--purple); stroke-width: 1.4; opacity: .8; }
.car b { display: block; margin-top: 8px; font: 800 1rem/1 Oxanium, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.car span { font: 700 .7rem/1 ui-monospace, monospace; color: var(--muted); letter-spacing: .12em; }
.toplist { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.toplist li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--line); counter-increment: r; }
.toplist li::before { content: counter(r); font: 800 1.1rem/1 Oxanium, sans-serif; color: var(--dim); text-align: center; }
.toplist li:nth-child(1)::before { color: #ffd24d; } .toplist li:nth-child(2)::before { color: #cfd6e4; } .toplist li:nth-child(3)::before { color: #e0a070; }
.toplist a { color: var(--text); font-weight: 600; } .toplist small { display: block; color: var(--muted); }
.toplist .v { font: 800 1rem/1 Oxanium, sans-serif; font-variant-numeric: tabular-nums; }
.gdot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; background: var(--c, #9d93b5); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* live map */
.map-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
@media (max-width: 1000px) { .map-wrap { grid-template-columns: 1fr; } }
.map-box { position: relative; padding: 0; height: min(78vh, 820px); min-height: 460px; overflow: hidden; background: #070611; }
.map-box svg.map { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map-box svg.map.drag { cursor: grabbing; }
.map-ctl { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.map-ctl button { width: 38px; height: 38px; display: grid; place-items: center; font: 800 1.1rem/1 Oxanium, sans-serif; color: var(--text); background: rgba(12,9,20,.9); border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
.map-ctl button:hover { background: var(--purple-2); }
.map-hud { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.map-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 190px; padding: 12px 14px; background: rgba(10,8,18,.96); box-shadow: inset 3px 0 0 var(--tc, var(--purple)), 0 12px 30px rgba(0,0,0,.5); font-size: .85rem; }
.map-tip b { display: block; font: 800 .95rem/1.2 Oxanium, sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.map-tip span { display: block; color: var(--muted); margin-top: 3px; }
.map-foot { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: .75rem; color: var(--dim); }
.turf { stroke-width: 6; transition: fill-opacity .15s; vector-effect: non-scaling-stroke; }
.turf:hover { fill-opacity: .75; }
.turf.war { animation: warp 1.2s ease-in-out infinite; }
@keyframes warp { 50% { stroke: #fff; } }
.gang-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gang-row b { font: 700 .9rem/1.2 Oxanium, sans-serif; }
.gang-row small { color: var(--muted); }
.gbar { grid-column: 1 / -1; height: 4px; background: rgba(255,255,255,.06); }
.gbar i { display: block; height: 100%; background: var(--c); }
.war-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.war-item b { font: 700 .92rem/1.25 Oxanium, sans-serif; }
.war-item .t { float: right; font: 800 .9rem/1 Oxanium, sans-serif; color: var(--red); font-variant-numeric: tabular-nums; }
.war-item small { display: block; color: var(--muted); margin-top: 3px; }
.vs { font-weight: 800; }

/* events calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 900px) { .cal { grid-template-columns: 1fr; } }
.cal-day { padding: 14px 12px 12px; min-height: 180px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--line); }
.cal-day.today { background: linear-gradient(180deg, rgba(168,110,252,.14), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px var(--purple), inset 0 3px 0 var(--red); }
.cal-day h4 { margin: 0 0 10px; font: 800 .74rem/1 Oxanium, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cal-day.today h4 { color: #fff; }
.ev { margin-bottom: 8px; padding: 9px 10px; background: rgba(8,6,14,.6); box-shadow: inset 3px 0 0 var(--ec, var(--purple)); }
.ev time { display: block; font: 800 .82rem/1 Oxanium, sans-serif; color: var(--ec, var(--purple)); }
.ev b { display: block; margin-top: 5px; font: 700 .86rem/1.2 Oxanium, sans-serif; }
.ev span { display: block; margin-top: 4px; font-size: .74rem; line-height: 1.4; color: var(--muted); }
.ev .loc { color: var(--dim); font-size: .7rem; }
.next-ev { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.cd { display: flex; gap: 8px; }
.cd div { min-width: 64px; padding: 10px 6px; text-align: center; background: rgba(8,6,14,.7); }
.cd b { display: block; font: 800 1.7rem/1 Oxanium, sans-serif; font-variant-numeric: tabular-nums; }
.cd span { display: block; margin-top: 5px; font: 700 .6rem/1 Oxanium, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .next-ev { grid-template-columns: 1fr; } }

/* support tickets */
.tk-list { list-style: none; padding: 0; margin: 0; }
.tk-list li a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); color: var(--text); }
.tk-list li a:hover { background: rgba(255,255,255,.03); }
.tk-list .id { font: 800 .85rem/1 Oxanium, sans-serif; color: var(--dim); }
.tk-list b { font-weight: 600; } .tk-list small { display: block; color: var(--muted); }
.msg { padding: 16px 18px; margin-bottom: 12px; background: rgba(255,255,255,.035); box-shadow: inset 3px 0 0 var(--line-2); }
.msg.staff { background: linear-gradient(90deg, rgba(168,110,252,.12), rgba(255,255,255,.03)); box-shadow: inset 3px 0 0 var(--purple); }
.msg header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .8rem; color: var(--muted); }
.msg header b { color: var(--text); font-family: Oxanium, sans-serif; }
.msg p { white-space: pre-wrap; word-break: break-word; margin: 0; }
.banpick { display: grid; gap: 8px; }
.banpick label { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.banpick input { margin-top: 4px; accent-color: var(--purple); }

/* staff */
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: .9rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-all; }
.amt-pos { color: #3cdc7a; } .amt-neg { color: var(--red); }
.t td.num, .t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.searchbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.searchbar .input { max-width: 340px; }