/* ==========================================================================
   NAUJIENŲ SRAUTO ASMENINĖS KORTELĖS
   Spec: docs/superpowers/specs/2026-10-02-srauto-asmenines-korteles-design.md
   Maketai: docs/superpowers/specs/2026-10-02-srauto-korteles-maketai/

   Klasė `.hc` atsiranda TIK tada, kai HistoryCard.apply() ją uždeda —
   historyService.js tai daro nuo 1024px pločio. Todėl čia nėra @media:
   siauresniame lange `.hc` tiesiog nebūna, ir kortelė lieka sena.
   <link>-inamas PO classique.css — perrašoma kaskados tvarka.
   ========================================================================== */

/* Lizdai be kortelės nematomi (senas vaizdas nepakinta). */
.history-item .hc-bg,
.history-item .hc-ring {
	display: none;
}

.hc-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.hc-title[hidden] {
	display: none !important;
}

/* ---------- Parduotuvės peržiūra ----------
   Parduotuvė classique.css neįtraukia, tad `.history-item` bazę čia
   pakartojam tik `.hc-sample` viduje (vertės — iš classique.css
   „NAUJIENŲ SRAUTAS" bloko). `:where()` nunulina `.hc-sample` svorį —
   kitaip `.hc-sample .history-item` (2 klasės) nugalėtų `.hc--klasika`
   (1 klasė) ir visi išdėstymai virstų stulpeliu. */

.hc-sample {
	width: 100%;
	max-width: 290px;
	text-align: left;
}

:where(.hc-sample) .history-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 9px 10px 8px 13px;
	border-radius: 10px;
	font-size: 0.85rem;
	line-height: 1.35;
}

:where(.hc-sample) .history-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--panel-green, #6fb692);
}

:where(.hc-sample) .history-item__top {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

:where(.hc-sample) .history-username {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--color-accent-gold, #fbbf24);
	font-weight: 700;
	font-size: 0.92rem;
}

:where(.hc-sample) .history-amount {
	flex: none;
	white-space: nowrap;
	font-weight: 700;
	color: var(--panel-green, #6fb692);
}

:where(.hc-sample) .history-item__text {
	margin: 0;
	color: var(--color-text-secondary, #adadc9);
}

:where(.hc-sample) .history-detail {
	color: var(--color-text-primary, #f5f5fa);
	font-weight: 600;
}

:where(.hc-sample) .history-time {
	font-size: 0.72rem;
	color: var(--color-text-secondary, #adadc9);
}

/* ---------- Bendra visiems išdėstymams ---------- */

.history-item.hc {
	--hc-frame-c: var(--hc-frame, var(--color-accent-gold, #fbbf24));
	--hc-card: var(--color-bg-secondary, #1b1b29);
	isolation: isolate;
	overflow: hidden;
	background-color: var(--hc-card);
}

.hc .hc-bg {
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hc-bg, none) center / cover no-repeat;
	pointer-events: none;
}

.hc .hc-ring {
	display: block;
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.hc .hc-av {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--color-bg-tertiary, #2a2a3d) var(--hc-av, none) center / cover no-repeat;
	box-shadow: 0 0 0 2px var(--hc-card), 0 0 0 3.5px var(--hc-frame-c);
}

.hc .hc-title {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.hc .hc-title .uc-title {
	font-size: 0.58rem;
	color: var(--color-text-secondary, #c9c9e0);
}

/* Fonas be paveikslėlio (cron dar nespėjo priskirti) — tik kortelės spalva. */
.hc:not(.hc--has-bg) .hc-bg {
	display: none;
}

/* Kontrastas (matuota iš pikselių, blogiausias pikselis po raide, 2026-10-02):
   antrinis tekstas #adadc9 ant baltos paveikslėlio dėmės išlaiko 4,5:1 tik
   tada, kai paveikslėlio efektyvus nepermatomumas po tekstu ≤ ~0,15. Todėl
   fonai po tekstu — iki 0,15, o ryškesnis paveikslėlis tik ten, kur teksto
   nėra. Suma dažniausiai stovi dešinėje, ant ryškiausios fono dalies —
   jai nepermatoma plokštelė (raudona #ef4444 ant #12121c ≈ 5:1). */
.hc--has-bg .history-amount {
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--color-bg-primary, #12121c);
}

/* #ef4444 ant plokštelės — 4,1:1 (matuota); šviesesnė raudona — ~6:1. */
.hc--has-bg.history-item--loss .history-amount {
	color: #f87171;
}

/* ---------- A · Klasika+ ---------- */

.hc--klasika {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.hc--klasika .hc-ring {
	margin-top: 2px;
}

.hc--klasika .hc-bg {
	opacity: 0.15;
	-webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
}

/* ---------- J · Kompaktas ---------- */

.hc--kompaktas {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding-bottom: 11px;
}

.hc--kompaktas .hc-ring {
	width: 24px;
	height: 24px;
}

.hc--kompaktas .hc-av {
	box-shadow: 0 0 0 1.5px var(--hc-card), 0 0 0 3px var(--hc-frame-c);
}

.hc--kompaktas .hc-bg {
	top: auto;
	height: 4px;
}

.hc--kompaktas .hc-title {
	display: none;
}

/* ---------- D · Atvirukas ---------- */

.hc--atvirukas {
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	padding: 8px 8px 8px 13px;
}

.hc--atvirukas .hc-bg {
	position: relative;
	inset: auto;
	z-index: 0;
	order: 2;
	flex: none;
	width: 58px;
	min-height: 58px;
	border-radius: 7px;
}

.hc--atvirukas .hc-ring {
	position: absolute;
	right: 44px;
	bottom: 6px;
	z-index: 1;
	width: 26px;
	height: 26px;
}

/* ---------- B · Juosta ---------- */

.hc--juosta {
	display: grid;
	grid-template-columns: 38px 1fr;
	column-gap: 9px;
	align-items: start;
	/* Tekstas — po viršeliu, ne ant jo; ant viršelio užlipa tik avataras. */
	padding-top: 36px;
}

.hc--juosta .hc-bg {
	bottom: auto;
	height: 34px;
	opacity: 0.6;
}

.hc--juosta .hc-ring {
	margin-top: -22px;
}

.hc--juosta .hc-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 20%, var(--hc-card));
}

.hc--juosta .hc-ring {
	width: 38px;
	height: 38px;
}

/* ---------- E · Medalionas ---------- */

.hc--medalionas {
	flex-direction: row;
	align-items: center;
	gap: 11px;
}

.hc--medalionas .hc-bg {
	display: none;
}

.hc--medalionas .hc-ring {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	background: var(--color-bg-tertiary, #2a2a3d) var(--hc-bg, none) center / cover no-repeat;
	box-shadow: 0 0 0 2px var(--hc-frame-c);
}

.hc--medalionas .hc-av {
	width: 32px;
	height: 32px;
	box-shadow: 0 0 0 2px var(--hc-card);
}

/* ---------- H · Įstrižainė ---------- */

.hc--istrizaine {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

/* Paveikslėlis — tik dešinėje juostoje, teksto eilutės jos nesiekia.
   Viršutinė eilutė (vardas + suma ant plokštelės) lieka pilno pločio,
   kitaip vardas trumpinamas iki „Ald…". 40 % — nuo .hc-body pločio. */
.hc--istrizaine .hc-title,
.hc--istrizaine .history-item__text,
.hc--istrizaine .history-time {
	padding-right: 40%;
}

.hc--istrizaine .hc-bg {
	left: auto;
	width: 34%;
	opacity: 0.75;
	clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}

.hc--istrizaine .hc-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(27, 27, 41, 0.9), rgba(27, 27, 41, 0.35));
}

.hc--istrizaine .hc-ring {
	width: 34px;
	height: 34px;
}

/* ---------- I · Plakatas ---------- */

.hc--plakatas {
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	/* Vietos sumai „−200 Litų" 1.15rem šriftu — kitaip ji užlipa ant frazės. */
	padding-right: 108px;
}

.hc--plakatas .hc-bg {
	opacity: 0.3;
}

.hc--plakatas .hc-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--hc-card) 50%, rgba(27, 27, 41, 0.6));
}

.hc--plakatas .hc-ring {
	width: 22px;
	height: 22px;
}

.hc--plakatas .hc-av {
	box-shadow: 0 0 0 1.5px var(--hc-card), 0 0 0 3px var(--hc-frame-c);
}

.hc--plakatas .history-amount {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	padding: 3px 7px;
	border-radius: 8px;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1;
}

/* ---------- F · Kronika ---------- */

.hc--kronika {
	--hc-card: #221d17;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid #4a3d2c;
}

.hc--kronika .hc-bg {
	opacity: 0.28;
	filter: sepia(1) saturate(0.6);
}

.hc--kronika .hc-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--hc-card) 45%, rgba(34, 29, 23, 0.4));
}

.hc--kronika .hc-av {
	box-shadow: 0 0 0 2px var(--hc-card), 0 0 0 3.5px #8a6d3b;
}

.hc--kronika .history-username {
	font-family: 'PT Serif', Georgia, serif;
	font-style: italic;
	font-size: 1rem;
	color: #e9c46a;
}

.hc--kronika .history-item__text {
	color: #d6c7ad;
}

.hc--kronika .history-detail {
	color: #fff3dc;
}

.hc--kronika .history-time,
.hc--kronika .hc-title .uc-title {
	color: #c4b394;
}

/* ---------- C · Vitrina ---------- */

.hc--vitrina {
	padding-right: 64px;
	min-height: 74px;
}

.hc--vitrina .hc-bg {
	opacity: 0.55;
	background-position: right center;
}

.hc--vitrina .hc-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Tekstas siekia ~78 % pločio — iki ten paveikslėlis vos matomas. */
	background: linear-gradient(90deg, var(--hc-card) 55%, rgba(27, 27, 41, 0.85) 78%, rgba(27, 27, 41, 0.3));
}

.hc--vitrina .hc-ring {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 44px;
	height: 44px;
}

.hc--vitrina .history-amount {
	position: absolute;
	right: 10px;
	bottom: 8px;
}

/* ---------- G · Neonas ---------- */

.hc--neonas {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid color-mix(in srgb, var(--hc-frame-c) 55%, transparent);
	box-shadow: 0 0 14px -4px var(--hc-frame-c), inset 0 0 22px -12px var(--hc-frame-c);
}

.hc--neonas .hc-bg {
	opacity: 0.12;
}

.hc--neonas .hc-ring {
	width: 34px;
	height: 34px;
}

.hc--neonas .hc-av {
	box-shadow: 0 0 0 2px var(--hc-card), 0 0 0 3.5px var(--hc-frame-c), 0 0 10px var(--hc-frame-c);
}

/* ==========================================================================
   SISTEMINĖ NAUJIENA (2026-10-03)

   Klausimų papildymas ir projekto naujienos — „Viktorina" kalba pati. Auksas,
   ne žalia: tai ne kažkieno laimėjimas, o visos svetainės šventė. Kortelės
   lizdų (avataro, fono) neturi — žaidėjo nėra.

   Kontrastas (suplokštinta ant #1a1a2e): fonas ≈ #2a2731;
   #fbbf24 — 9,6:1, #f5f5fa — 13,9:1, #adadc9 — 6,9:1.
   ========================================================================== */

.history-item--news {
	--row-state: var(--color-accent-gold, #fbbf24);
	background: rgba(251, 191, 36, 0.08);
}

.history-item--news .history-item__text {
	color: var(--color-text-primary, #f5f5fa);
	font-weight: 600;
	/* Antraštė trumpa, bet „Plačiau" tekstas — ne; jam riba netaikoma. */
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.news-icon {
	margin-right: 0.35em;
}

/* „Plačiau" — trumpas žodis, bet 44×44 liečiamas plotas: neigiamos
   paraštės atsveria padding'ą, tad eilutės aukštis nepasikeičia. */
.news-toggle {
	flex: none;
	margin: -12px -10px -12px 0;
	padding: 12px 10px;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: none;
	color: var(--color-accent-gold, #fbbf24);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 8px;
}

.news-toggle:hover,
.news-toggle[aria-expanded='true'] {
	color: var(--color-text-primary, #f5f5fa);
}

.news-toggle:focus-visible {
	outline: 2px solid var(--color-accent-gold, #fbbf24);
	outline-offset: -6px;
}

.news-more {
	margin: 4px 0 2px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--color-text-primary, #f5f5fa);
	overflow-wrap: anywhere;
}

.news-more__title {
	display: block;
	margin-bottom: 2px;
	color: var(--color-accent-gold, #fbbf24);
}

.news-more[hidden] {
	display: none !important;
}