/* Top Ranking Games: "Hall of Fame" brand. Onyx, gold foil, ribbon red; Anton / Playfair Display Italic / Inter. */
:root {
	--trg-onyx: #0E0C09;
	--trg-plinth: #16130D;
	--trg-gold: #D9AE55;
	--trg-gold-hi: #F6D98B;
	--trg-silver: #C9CED6;
	--trg-bronze: #C2814F;
	--trg-ribbon: #8E1B22;
	--trg-ivory: #F3EBDD;
	--trg-muted: #CFC4B0;
	--trg-dim: #9C907A;
	--trg-line: rgba(217, 174, 85, .22);
	--trg-foil: linear-gradient(100deg, #B8862E 0%, #F6D98B 38%, #C9973D 60%, #F2D27E 85%);
	--trg-display: 'Anton', Impact, sans-serif;
	--trg-accent: 'Playfair Display', Georgia, serif;
	--trg-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.trg, .trg * { box-sizing: border-box; }
.trg { color: var(--trg-ivory); font-family: var(--trg-body); line-height: 1.55; }
.trg a { color: var(--trg-gold); text-decoration: none; }
.trg a:hover { color: var(--trg-gold-hi); }
.trg-foil { background: var(--trg-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trg-kicker { font-family: var(--trg-accent); font-style: italic; color: var(--trg-gold); font-size: 1.25rem; }
.trg-h { font-family: var(--trg-display); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1; margin: 0; color: var(--trg-ivory); }
.trg-muted { color: var(--trg-muted); }
.trg-dim { color: var(--trg-dim); }
.trg-label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--trg-dim); }

/* Buttons */
.trg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .8em 1.5em; border: 1px solid rgba(217,174,85,.6); background: transparent; color: var(--trg-ivory) !important; font: 600 .95rem/1 var(--trg-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.trg-btn:hover { border-color: var(--trg-gold); color: var(--trg-gold-hi) !important; }
.trg-btn--gold { background: var(--trg-gold); color: var(--trg-onyx) !important; border-color: var(--trg-gold); }
.trg-btn--gold:hover { background: var(--trg-gold-hi); color: var(--trg-onyx) !important; }
.trg-btn--small { min-height: 40px; padding: .55em 1em; font-size: .8rem; }
.trg-btn--big { font-family: var(--trg-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .1em; padding: .6em 1em; width: 100%; }

/* Tags */
.trg-tag { display: inline-block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .25em .6em; border: 1px solid rgba(217,174,85,.45); color: var(--trg-gold); }
.trg-tag--adult { background: var(--trg-ribbon); border-color: var(--trg-ribbon); color: var(--trg-ivory); }
.trg-tag--studio { border-color: var(--trg-ivory); color: var(--trg-ivory); }
.trg-awards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.trg-awards img { width: 96px; height: 96px; display: block; }
.trg-badges { display: grid; gap: 18px; }
.trg-badges__item { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 700px) { .trg-badges__item { grid-template-columns: 1fr; } }
.trg-tag--champion { background: var(--trg-gold); border-color: var(--trg-gold); color: var(--trg-onyx); font-weight: 600; }
.trg-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 22px; }
.trg-shots img { width: 100%; height: auto; display: block; border: 1px solid var(--trg-line); }
.trg-tag--sponsored { border-color: var(--trg-dim); color: var(--trg-dim); }

/* Ribbon */
.trg-ribbon { display: inline-block; background: var(--trg-ribbon); color: var(--trg-ivory); font-family: var(--trg-display); letter-spacing: .14em; padding: .55em 2.4em; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); text-transform: uppercase; }

/* Notices */
.trg-notice { padding: .9em 1.1em; margin: 0 0 1.2em; border-left: 3px solid var(--trg-gold); background: var(--trg-plinth); color: var(--trg-ivory); }
.trg-notice--error { border-left-color: #E0565E; }

/* Rankings */
.trg-rank { border-top: 2px solid var(--trg-gold); }
.trg-rank__head, .trg-rank__row { display: grid; grid-template-columns: 70px 160px minmax(0, 1fr) 110px; gap: 20px; align-items: center; padding: 16px 8px; }
.trg-rank__head { padding: 12px 8px; border-bottom: 1px solid var(--trg-line); }
.trg-rank__row { border-bottom: 1px solid rgba(217,174,85,.14); }
.trg-rank__num { font-family: var(--trg-display); font-size: 2.6rem; line-height: 1; color: #6E6450; }
.trg-rank__row--1 .trg-rank__num { color: var(--trg-gold); }
.trg-rank__row--2 .trg-rank__num { color: var(--trg-silver); }
.trg-rank__row--3 .trg-rank__num { color: var(--trg-bronze); }
.trg-rank__banner { display: block; aspect-ratio: 1200 / 630; background: var(--trg-plinth); border: 1px solid var(--trg-line); overflow: hidden; }
.trg-rank__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trg-rank__banner--empty { display: flex; align-items: center; justify-content: center; font-family: var(--trg-display); color: var(--trg-dim); letter-spacing: .06em; }
.trg-rank__name { font-family: var(--trg-display); font-size: 1.35rem; letter-spacing: .03em; color: var(--trg-ivory) !important; text-transform: uppercase; }
.trg-rank__desc { color: var(--trg-muted); font-size: .9rem; margin: .2em 0 .4em; }
.trg-rank__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.trg-rank__votes { text-align: right; font-weight: 600; font-size: 1.1rem; }
.trg-rank__votes small { display: block; font-weight: 400; font-size: .7rem; letter-spacing: .14em; color: var(--trg-dim); }
.trg-rank__empty { padding: 2.5em 1em; text-align: center; color: var(--trg-muted); }
.trg-pager { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* Podium */
.trg-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.trg-plaque { background: var(--trg-plinth); border: 1px solid var(--metal, var(--trg-gold)); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.trg-plaque__top { display: flex; justify-content: space-between; align-items: center; }
.trg-plaque__rank { font-family: var(--trg-display); font-size: 3.8rem; line-height: 1; color: var(--metal); }
.trg-plaque__metal { font-family: var(--trg-accent); font-style: italic; font-size: 1.2rem; color: var(--metal); }
.trg-plaque__banner { aspect-ratio: 1200 / 630; background: var(--trg-onyx); border: 1px solid var(--trg-line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.trg-plaque__banner img { width: 100%; height: 100%; object-fit: cover; }
.trg-plaque__name { font-family: var(--trg-display); font-size: 1.7rem; letter-spacing: .03em; color: var(--trg-ivory) !important; text-transform: uppercase; }
.trg-plaque__meta { display: flex; justify-content: space-between; color: var(--trg-muted); font-size: .95rem; }
.trg-plaque--empty .trg-plaque__name { color: var(--trg-dim) !important; }

/* Genre tabs */
.trg-genres { display: flex; flex-wrap: wrap; gap: 10px; }
.trg-genres a { border: 1px solid rgba(217,174,85,.4); padding: .7em 1.1em; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--trg-ivory); font-weight: 500; }
.trg-genres--platforms { margin-top: -6px; }
.trg-genres--platforms a { font-size: .78rem; padding: .55em .95em; border-style: dashed; }
.trg-tag--founding { border-color: var(--trg-silver); color: var(--trg-silver); }
.trg-genres a.is-current { background: var(--trg-gold); color: var(--trg-onyx); border-color: var(--trg-gold); }

/* Hall of Fame */
.trg-hall { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.trg-hall__plaque { background: rgba(22,19,13,.9); border: 2px solid #8C6E33; outline: 1px solid rgba(217,174,85,.4); outline-offset: 5px; padding: 24px 18px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.trg-hall__when { font-family: var(--trg-accent); font-style: italic; color: var(--trg-gold); font-size: 1.1rem; }
.trg-hall__name { font-family: var(--trg-display); font-size: 1.45rem; letter-spacing: .04em; text-transform: uppercase; }
.trg-hall__votes { font-size: .8rem; letter-spacing: .12em; color: var(--trg-dim); text-transform: uppercase; }
.trg-hall__plaque--waiting .trg-hall__name { color: var(--trg-dim); }
.trg-hall-section + .trg-hall-section { margin-top: 48px; }
.trg-hall-section > h2 { margin-bottom: 20px; font-size: 2.2rem; }

/* Single game */
.trg-game { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; margin-bottom: 32px; }
.trg-game__banner { width: 100%; height: auto; display: block; border: 1px solid var(--trg-line); }
.trg-game__panel { background: var(--trg-plinth); border: 1px solid var(--trg-line); padding: 24px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.trg-game__stat { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(217,174,85,.12); padding-bottom: 8px; }
.trg-game__stat b { font-family: var(--trg-display); font-weight: 400; font-size: 1.4rem; color: var(--trg-gold); }
.trg-game__short { font-size: 1.15rem; color: var(--trg-muted); margin: 14px 0; }
.trg-crowns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Ads */
.trg-ad { border: 1px dashed rgba(217,174,85,.35); padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: rgba(22,19,13,.6); }
.trg-ad__label { font-family: var(--trg-display); letter-spacing: .08em; color: var(--trg-dim); text-transform: uppercase; }

/* Forms and dashboard */
.trg-form { display: grid; gap: 18px; max-width: 720px; }
.trg-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.trg-field .trg-help { font-size: .85rem; color: var(--trg-dim); margin-top: 4px; }
.trg-field input[type=text], .trg-field input[type=url], .trg-field input[type=email], .trg-field input[type=password], .trg-field select, .trg-field textarea { width: 100%; min-height: 46px; padding: .7em .9em; background: var(--trg-onyx); color: var(--trg-ivory); border: 1px solid rgba(217,174,85,.35); font: 1rem var(--trg-body); }
.trg-field textarea { min-height: 160px; }
.trg-field input:focus, .trg-field select:focus, .trg-field textarea:focus { outline: 2px solid var(--trg-gold); outline-offset: 1px; }
.trg-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.trg-checks label { font-weight: 400; display: inline-flex; gap: 8px; align-items: center; min-height: 32px; }
.trg-hp { position: absolute !important; left: -9999px !important; }
.trg-card { background: var(--trg-plinth); border: 1px solid var(--trg-line); padding: 24px; margin-bottom: 22px; }
.trg-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.trg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 18px 0; }
.trg-stats div { border-top: 1px solid var(--trg-gold); padding-top: 8px; }
.trg-stats b { display: block; font-family: var(--trg-display); font-weight: 400; font-size: 1.8rem; color: var(--trg-ivory); }
.trg-code { display: block; width: 100%; background: var(--trg-onyx); color: var(--trg-muted); border: 1px solid var(--trg-line); padding: 12px; font: .82rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all; }
.trg-details summary { cursor: pointer; color: var(--trg-gold); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.trg-status { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; padding: .3em .7em; border: 1px solid var(--trg-line); }
.trg-status--live { border-color: #5E9B67; color: #9ED3A6; }
.trg-status--pending { border-color: var(--trg-gold); color: var(--trg-gold); }
.trg-status--off { border-color: #E0565E; color: #F0A3A7; }
.trg-auth { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.trg-auth form p { margin: 0 0 14px; }
.trg-auth input[type=text], .trg-auth input[type=password], .trg-auth input[type=email] { width: 100%; min-height: 46px; padding: .7em .9em; background: var(--trg-onyx); color: var(--trg-ivory); border: 1px solid rgba(217,174,85,.35); }
.trg-auth .button, .trg-auth input[type=submit] { min-height: 48px; padding: .8em 1.5em; background: var(--trg-gold); color: var(--trg-onyx); border: 0; font: 600 .95rem var(--trg-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }

/* Docs */
.trg-docs h2 { font-family: var(--trg-display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; margin: 1.6em 0 .5em; }
.trg-docs pre { background: var(--trg-onyx); border: 1px solid var(--trg-line); padding: 16px; overflow-x: auto; color: var(--trg-muted); font-size: .85rem; }
.trg-docs code { color: var(--trg-gold-hi); }

@media (max-width: 860px) {
	.trg-rank__head { display: none; }
	.trg-rank__row { grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-areas: "num info votes" "num banner banner"; gap: 10px 14px; }
	.trg-rank__num { grid-area: num; font-size: 2rem; }
	.trg-rank__info { grid-area: info; }
	.trg-rank__banner { grid-area: banner; }
	.trg-rank__votes { grid-area: votes; }
	.trg-game { grid-template-columns: 1fr; }
}

/* ---------- Sponsored ads (decision #23): always labelled, never part of the ranking ---------- */
.trg-ad--sponsored { display: block; border: 1px solid var(--trg-line); padding: 8px; background: rgba(22,19,13,.8); position: relative; }
.trg-ad--sponsored .trg-ad__label { position: absolute; top: 8px; left: 8px; z-index: 1; font-family: var(--trg-body); font-size: .65rem; letter-spacing: .14em; padding: .25em .6em; background: rgba(14,12,9,.85); color: var(--trg-muted); }
.trg-ad__link { display: block; line-height: 0; }
.trg-ad__link img { width: 100%; height: auto; display: block; }
.trg-ad--rankings-a.trg-ad--sponsored, .trg-ad--rankings-b.trg-ad--sponsored { max-width: 800px; margin: 10px auto; }
.trg-rank .trg-ad { margin: 10px 0; }

/* ---------- Verified-owner checkmark ---------- */
.trg-verified { display: inline-flex; vertical-align: middle; color: var(--trg-gold); position: relative; cursor: help; margin-left: .25em; }
.trg-verified svg { display: block; }
.trg-verified::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 .75rem/1.2 var(--trg-body); letter-spacing: 0; text-transform: none; padding: .45em .7em; background: var(--trg-ivory); color: var(--trg-onyx); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.trg-verified:hover::after, .trg-verified:focus::after { opacity: 1; }
.trg-verified:focus { outline: 2px solid var(--trg-gold); outline-offset: 2px; }
.trg-tag--verified { display: inline-flex; align-items: center; gap: .3em; border-color: var(--trg-gold); }
.trg-tag--verified .trg-verified { margin: 0; }
.trg-tag--verified .trg-verified::after { display: none; }

/* ---------- Buy an ad ---------- */
.trg-adbook .trg-card, .trg-adpay .trg-card { display: flex; flex-direction: column; gap: 18px; }
.trg-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.trg-slots legend { grid-column: 1 / -1; }
.trg-slot { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--trg-line); cursor: pointer; background: var(--trg-onyx); }
.trg-slot:has(input:checked) { border-color: var(--trg-gold); box-shadow: inset 0 0 0 1px var(--trg-gold); }
.trg-slot input { margin-top: 4px; accent-color: var(--trg-gold); }
.trg-slot__body { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.trg-slot__price { color: var(--trg-gold); font-weight: 600; }
.trg-when { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.trg-when label { display: block; font-weight: 600; margin-bottom: 6px; }
.trg-when input { min-height: 46px; padding: .6em .8em; background: var(--trg-onyx); color: var(--trg-ivory); border: 1px solid rgba(217,174,85,.35); font: 1rem var(--trg-body); color-scheme: dark; }
.trg-when input[type=number] { width: 110px; }
.trg-when__total { display: flex; flex-direction: column; }
.trg-when__total b { font-family: var(--trg-display); font-weight: 400; font-size: 2rem; color: var(--trg-gold); line-height: 1.1; }
.trg-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 10px; }
.trg .trg-cal button.trg-cal__wk { display: flex; width: 100%; min-height: 0; border-radius: 0; text-transform: none; letter-spacing: 0; white-space: normal; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px; border: 1px solid var(--trg-line); background: var(--trg-onyx); color: var(--trg-ivory); font: .8rem var(--trg-body); cursor: pointer; text-align: left; }
.trg .trg-cal__wk span { color: var(--trg-ivory); font-weight: 600; }
.trg-cal__wk small { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--trg-dim); }
.trg-cal__wk--free small { color: #8fc79a; }
.trg .trg-cal button.trg-cal__wk--partly { background: repeating-linear-gradient(135deg, rgba(142,27,34,.25) 0 6px, transparent 6px 12px); }
.trg .trg-cal button.trg-cal__wk:hover { background-color: var(--trg-plinth); border-color: var(--trg-gold); }
.trg .trg-cal button.trg-cal__wk--booked, .trg-cal__wk--booked { background: rgba(142,27,34,.45); color: var(--trg-muted); cursor: not-allowed; }
.trg .trg-cal button.trg-cal__wk--mine { border-color: var(--trg-gold); box-shadow: inset 0 0 0 1px var(--trg-gold); }
.trg-cal__wk--mine small { color: var(--trg-gold); }
.trg-cal__next { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.trg-adrow { border-top: 1px solid var(--trg-line); padding: 16px 0; }
.trg-adrow__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.trg-stats > div > .trg-dim { display: block; font-size: .8rem; }
.trg-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.trg-inline-form input[type=email] { flex: 1 1 260px; min-height: 40px; padding: .5em .8em; background: var(--trg-onyx); color: var(--trg-ivory); border: 1px solid rgba(217,174,85,.35); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ---------- Paying (PayPal JS SDK v6) ---------- */
.trg-pay { max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
.trg-pay paypal-button { display: block; width: 100%; }
.trg-cardfield { min-height: 46px; background: #fff; margin-bottom: 8px; }
.trg-cardrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trg button.trg-btn { border-color: rgba(217,174,85,.6); border-radius: 0; }
.trg button.trg-btn--gold { border-color: var(--trg-gold); }
.trg button.trg-btn:hover, .trg button.trg-btn:focus { background: transparent; border-color: var(--trg-gold); }
.trg button.trg-btn--gold:hover, .trg button.trg-btn--gold:focus { background: var(--trg-gold-hi); }
.trg button.trg-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Partner house ads (decision #24) ---------- */
.trg-ad__adult { position: absolute; top: 8px; right: 8px; z-index: 1; font: 700 .7rem/1 var(--trg-body); padding: .35em .55em; background: var(--trg-ribbon); color: var(--trg-ivory); }