/* Başarım v2: /basarimlar sayfası, Karakter Akışı paneli, profil başarım puanı (Sources/ViceBasarim.php). */
@font-face { font-family: ViceDisplay; src: url('../fonts/vp-display.woff2') format('woff2'); font-weight: 400; font-display: swap; }

html:root body .vbs-page, html:root body .vbs-feed, html:root body .vbs-acc {
	--vbs-ink: #f2f4f8; --vbs-muted: #9aa6b8; --vbs-line: rgba(242, 244, 248, .12); --vbs-gold: #e7cb89; --vbs-bg: #0b0f18; --vbs-raised: #121826;
	--vbs-disp: var(--vx-display, ViceDisplay), ViceDisplay, "Bebas Neue", Impact, sans-serif;
	--vbs-cond: var(--vx-cond, "Barlow Condensed"), "Barlow Condensed", "Arial Narrow", sans-serif;
	--vbs-sans: var(--vx-sans, Barlow), Barlow, system-ui, sans-serif;
}
html:root body .vbs-page *, html:root body .vbs-feed * { box-sizing: border-box; }
html:root body .vbs-page ul, html:root body .vbs-page ol, html:root body .vbs-page dl, html:root body .vbs-feed ul, html:root body .vbs-feed ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html:root body .vbs-page li, html:root body .vbs-feed li { margin: 0 !important; list-style: none !important; }
html:root body .vbs-page p, html:root body .vbs-page dd { margin: 0 !important; }

/* rozet durumları */
.vice-badge { display: block; width: 72px; height: 72px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.vice-badge.is-off { filter: grayscale(1) brightness(.85); opacity: .45; }
.vice-badge.is-secret { filter: grayscale(1) brightness(.6); opacity: .55; }
img.vice-badge { object-fit: contain; }

/* ---------------------------------------------------------------- sayfa */
html:root body .vbs-page { display: grid; gap: 24px; margin: 0 0 56px; color: var(--vbs-ink); font: 15px/1.45 var(--vbs-sans); }
html:root body .vbs-hero { position: relative; isolation: isolate; overflow: hidden; padding: 40px 32px 28px; border-radius: 8px; background: var(--vbs-bg); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
html:root body .vbs-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--vbs-art) center 40% / cover no-repeat; }
html:root body .vbs-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 15, 24, .95) 0%, rgba(11, 15, 24, .75) 60%, rgba(11, 15, 24, .45) 100%), linear-gradient(0deg, #0b0f18 0, transparent 50%); }
html:root body .vbs-kicker { color: var(--vbs-gold); font: 700 12px var(--vbs-cond); letter-spacing: .2em; text-transform: uppercase; }
html:root body .vbs-page .vbs-title { margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #fff !important; font: 400 clamp(44px, 6vw, 84px)/.9 var(--vbs-disp) !important; letter-spacing: .02em !important; text-transform: uppercase !important; }
html:root body .vbs-lead { max-width: 60ch; margin-top: 12px !important; color: #d6dbe6; }
html:root body .vbs-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px !important; }
html:root body .vbs-hero__stats div { display: flex; flex-direction: column-reverse; }
html:root body .vbs-hero__stats dd { color: #fff; font: 400 32px/1 var(--vbs-disp); }
html:root body .vbs-hero__stats dt { color: var(--vbs-muted); font: 600 11px var(--vbs-cond); letter-spacing: .14em; text-transform: uppercase; }
html:root body .vbs-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
html:root body .vbs-pick a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(8, 11, 16, .5); color: #d6dbe6 !important; font: 600 13px var(--vbs-cond); letter-spacing: .06em; text-decoration: none !important; }
html:root body .vbs-pick a[aria-current="page"] { border-color: var(--vbs-gold); background: var(--vbs-gold); color: #1d1606 !important; }
html:root body .vbs-pick a:focus-visible { outline: 2px solid var(--vbs-gold); outline-offset: 2px; }

html:root body .vbs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
html:root body .vbs-main { display: grid; gap: 22px; min-width: 0; }
html:root body .vbs-cat header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--vbs-line); }
html:root body .vbs-page .vbs-cat h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--vbs-gold) !important; font: 700 14px var(--vbs-cond) !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
html:root body .vbs-cat header span { color: var(--vbs-muted); font-size: 13px; }
html:root body .vbs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
html:root body .vbs-item { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 14px 10px 12px; border: 1px solid var(--vbs-line); border-radius: 8px; background: var(--vbs-raised); text-align: center; }
html:root body .vbs-item.is-on { border-color: color-mix(in srgb, var(--vbs-gold) 45%, transparent); background: radial-gradient(circle at 50% 22%, rgba(231, 203, 137, .14), var(--vbs-raised) 70%); }
html:root body .vbs-item[data-zorluk="efsane"].is-on { border-color: rgba(255, 122, 182, .6); background: radial-gradient(circle at 50% 22%, rgba(255, 122, 182, .18), var(--vbs-raised) 70%); }
html:root body .vbs-item strong { color: var(--vbs-ink); font: 700 15px/1.15 var(--vbs-cond); letter-spacing: .03em; }
html:root body .vbs-item.is-off strong, html:root body .vbs-item.is-secret strong { color: #b9c3d3; }
html:root body .vbs-item small { color: var(--vbs-muted); font-size: 12.5px; line-height: 1.3; }
html:root body .vbs-item__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; color: var(--vbs-muted); font: 600 11px var(--vbs-cond); letter-spacing: .1em; text-transform: uppercase; }
html:root body .vbs-item[data-zorluk="bronz"] .vbs-tier { color: #e09a62; }
html:root body .vbs-item[data-zorluk="gumus"] .vbs-tier { color: #cdd6e3; }
html:root body .vbs-item[data-zorluk="altin"] .vbs-tier { color: #f2cf72; }
html:root body .vbs-item[data-zorluk="elmas"] .vbs-tier { color: #7fe3f0; }
html:root body .vbs-item[data-zorluk="efsane"] .vbs-tier { color: #ff7ab6; }
html:root body .vbs-item__date { color: var(--vbs-gold); font: 600 12px var(--vbs-cond); letter-spacing: .08em; }
html:root body .vbs-prog { display: grid; gap: 3px; width: 100%; }
html:root body .vbs-prog i { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
html:root body .vbs-prog s { display: block; height: 100%; background: var(--vbs-gold); text-decoration: none; }
html:root body .vbs-prog em { color: var(--vbs-muted); font: 500 12px var(--vbs-sans); font-style: normal; }

html:root body .vbs-side { display: grid; gap: 16px; position: sticky; top: 90px; }
html:root body .vbs-board { padding: 16px; border: 1px solid var(--vbs-line); border-radius: 8px; background: var(--vbs-raised); }
html:root body .vbs-board header { margin-bottom: 10px; }
html:root body .vbs-page .vbs-board h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--vbs-ink) !important; font: 400 26px/1 var(--vbs-disp) !important; text-transform: uppercase !important; }
html:root body .vbs-board small { color: var(--vbs-muted); font-size: 12px; }
html:root body .vbs-board li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--vbs-line); }
html:root body .vbs-board li b { color: var(--vbs-muted); font: 400 18px/1 var(--vbs-disp); }
html:root body .vbs-board li:nth-child(-n+3) b { color: var(--vbs-gold); }
html:root body .vbs-board li a { overflow: hidden; color: var(--vbs-ink) !important; font: 600 14px var(--vbs-sans); text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important; }
html:root body .vbs-board li a:hover, html:root body .vbs-board li a:focus-visible { color: var(--vbs-gold) !important; }
html:root body .vbs-board li span { color: var(--vbs-gold); font-size: 13px; }
html:root body .vbs-board li.is-me { background: rgba(231, 203, 137, .08); }
html:root body .vbs-empty, html:root body .vbs-foot { color: var(--vbs-muted); font-size: 13px; }

/* ---------------------------------------------------------------- sahibin ayarları (vitrin, akış) */
html:root body .vbs-settings { padding: 18px; border: 1px solid rgba(231, 203, 137, .35); border-radius: 8px; background: var(--vbs-raised); }
html:root body .vbs-page .vbs-settings h2 { margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--vbs-gold) !important; font: 700 14px var(--vbs-cond) !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
html:root body .vbs-settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
html:root body .vbs-form { display: grid; gap: 10px; align-content: start; min-width: 0; }
html:root body .vbs-page .vbs-form h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--vbs-ink) !important; font: 400 24px/1 var(--vbs-disp) !important; text-transform: uppercase !important; }
html:root body .vbs-form p { color: var(--vbs-muted); font-size: 13px; line-height: 1.4; }
html:root body .vbs-form label { display: grid; gap: 4px; color: var(--vbs-muted); font: 600 12px var(--vbs-cond); letter-spacing: .1em; text-transform: uppercase; }
html:root body .vbs-form select { width: 100% !important; min-height: 40px !important; padding: 0 10px !important; border: 1px solid var(--vbs-line) !important; border-radius: 6px !important; background: #0b0f18 !important; color: var(--vbs-ink) !important; font: 500 14px var(--vbs-sans) !important; letter-spacing: 0; text-transform: none; }
html:root body .vbs-form .vbs-check { display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--vbs-ink); font: 500 14px var(--vbs-sans); letter-spacing: 0; text-transform: none; cursor: pointer; }
html:root body .vbs-form .vbs-check input { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: #e7cb89; }
html:root body .vbs-btn { justify-self: start; min-height: 40px !important; padding: 0 18px !important; border: 0 !important; border-radius: 6px !important; background: var(--vbs-gold) !important; color: #1d1606 !important; font: 700 13px var(--vbs-cond) !important; letter-spacing: .1em !important; text-transform: uppercase !important; cursor: pointer; box-shadow: none !important; }
html:root body .vbs-btn:disabled { opacity: .5; cursor: not-allowed; }
html:root body .vbs-btn:focus-visible, html:root body .vbs-form select:focus-visible { outline: 2px solid var(--vbs-gold) !important; outline-offset: 2px; }
html:root body .vbs-flash { margin: 0 0 12px !important; padding: 10px 12px; border-radius: 6px; font-size: 14px; }
html:root body .vbs-flash--ok { background: rgba(120, 220, 160, .12); color: #9fe8bb; }
html:root body .vbs-flash--err { background: rgba(255, 110, 110, .12); color: #ffb3b3; }
@media (max-width: 760px) { html:root body .vbs-settings__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Karakter Akışı (karakter sayfası, profil) */
html:root body .vbs-feed { display: grid; gap: 12px; color: var(--vx-ink, var(--vbs-ink)); }
html:root body .vbs-feed__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
html:root body .vbs-feed__head .vx-link { margin-left: auto; }
html:root body .vbs-score, html:root body .vbs-rank { display: grid; line-height: 1.05; }
html:root body .vbs-score b { color: var(--vbs-gold); font: 400 32px/1 var(--vbs-disp) !important; }
html:root body .vbs-rank b { font: 400 24px/1 var(--vbs-disp) !important; }
html:root body .vbs-score small, html:root body .vbs-rank small { color: var(--vx-muted, var(--vbs-muted)); font: 600 11px var(--vbs-cond); letter-spacing: .12em; text-transform: uppercase; }
html:root body .vbs-vitrin { display: flex; gap: 10px; }
html:root body .vbs-vitrin li { position: relative; }
html:root body .vbs-vitrin .vice-badge { width: 56px; height: 56px; }
html:root body .vbs-akis { display: grid; gap: 2px; }
html:root body .vbs-akis__item { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 6px; border-radius: 6px; font-size: 14px; line-height: 1.35; }
html:root body .vbs-akis__item > i { margin-top: 3px; color: var(--vx-muted, var(--vbs-muted)); text-align: center; }
html:root body .vbs-akis__item.is-basarim > i { color: var(--vbs-gold); }
html:root body .vbs-akis__item time { display: block; color: var(--vx-muted, var(--vbs-muted)); font-size: 12px; }
html:root body .vbs-akis__item.is-basarim { cursor: help; }
html:root body .vbs-akis__item.is-basarim:hover, html:root body .vbs-akis__item.is-basarim:focus-visible { background: rgba(231, 203, 137, .08); outline: none; }
/* başarım kartı (üstüne gelince / odaklanınca) */
html:root body .vbs-pop { position: absolute; z-index: 40; left: 28px; bottom: calc(100% + 6px); display: none; gap: 12px; align-items: center; width: max-content; max-width: 300px; padding: 12px 14px; border: 1px solid rgba(231, 203, 137, .45); border-radius: 8px; background: #0b0f18; color: #f2f4f8; box-shadow: 0 14px 36px rgba(0, 0, 0, .5); text-align: left; }
html:root body .vbs-vitrin .vbs-pop { left: 0; }
html:root body .vbs-akis__item:hover > .vbs-pop, html:root body .vbs-akis__item:focus-visible > .vbs-pop, html:root body .vbs-vitrin li:hover > .vbs-pop, html:root body .vbs-vitrin li:focus-visible > .vbs-pop { display: flex; }
html:root body .vbs-pop .vice-badge { flex: none; width: 56px; height: 56px; }
html:root body .vbs-pop > span { display: grid; gap: 2px; }
html:root body .vbs-pop strong { font: 700 16px var(--vbs-cond); letter-spacing: .03em; }
html:root body .vbs-pop small { color: var(--vbs-gold); font: 600 12px var(--vbs-cond); letter-spacing: .06em; }
html:root body .vbs-pop em { color: #b9c3d3; font: 400 13px/1.3 var(--vbs-sans); font-style: normal; }
html:root body .vbs-pop time { color: #8f9ab0; font-size: 12px; }

/* ---------------------------------------------------------------- profil: Vice City / Los Santos anahtarı + akış sütunu */
html:root body .vxh .vbs-worlds { display: inline-flex; justify-self: start; padding: 3px; border: 1px solid var(--vx-line, rgba(255, 255, 255, .14)); border-radius: 999px; background: var(--vx-sunken, rgba(8, 11, 16, .4)); }
html:root body .vxh .vbs-worlds button { appearance: none; min-height: 30px; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: none !important; box-shadow: none !important; color: var(--vx-muted, #9aa6b8) !important; font: 700 12px var(--vbs-cond, "Barlow Condensed"), sans-serif !important; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
html:root body .vxh .vbs-worlds button[aria-selected="true"] { background: var(--vx-pink, #ff7ab6) !important; color: #1b0610 !important; }
html:root body .vxh .vbs-worlds button[data-vbs-world="gta5"][aria-selected="true"] { background: var(--vls-accent, #7fd6e0) !important; color: #06262d !important; }
html:root body .vxh .vbs-worlds button:focus-visible { outline: 2px solid var(--vx-focus, #e7cb89); outline-offset: 2px; }
html:root body .vxh .vxh-city__pane { display: grid; gap: 8px; min-width: 0; }
html:root body .vxh .vxh-city__pane[hidden] { display: none; }
html:root body .vxh .vxh-city--akis .vbs-feed { padding: 14px; border: 1px solid var(--vx-line, rgba(255, 255, 255, .12)); border-radius: var(--vx-r-md, 8px); background: var(--vx-raised, #121826); }
html:root body .vbs-page--embed { margin: 0; }

/* ---------------------------------------------------------------- profil: başarım puanı */
html:root body .vbs-acc { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
html:root body .vbs-acc > b { display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 8px; border: 2px solid var(--vbs-gold); border-radius: 12px; color: var(--vbs-gold); font: 400 28px/1 var(--vbs-disp) !important; }
html:root body .vbs-acc > span { display: grid; gap: 2px; }
html:root body .vbs-acc strong { color: var(--vx-ink, var(--vbs-ink)); font: 700 15px var(--vbs-cond); letter-spacing: .08em; text-transform: uppercase; }
html:root body .vbs-acc small { color: var(--vx-muted, var(--vbs-muted)); font-size: 13px; }

@media (max-width: 1000px) {
	html:root body .vbs-layout { grid-template-columns: minmax(0, 1fr); }
	html:root body .vbs-side { position: static; }
}
@media (max-width: 640px) {
	html:root body .vbs-hero { padding: 30px 18px 22px; }
	html:root body .vbs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	html:root body .vbs-item { padding: 12px 8px 10px; }
	html:root body .vice-badge { width: 60px; height: 60px; }
	html:root body .vbs-pop { left: 0; max-width: calc(100vw - 48px); }
}
@media (prefers-reduced-motion: reduce) { html:root body .vbs-page * { transition: none !important; } }