/* WapUkis.eu — bendra struktūrinė stilių bazė (2026).
   Temos (1/2/3.css) apibrėžia tik --kintamuosius; ši byla apibrėžia formą. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Regimai paslėpta, bet ekrano skaitytuvams prieinama - naudojama
   puslapio antraštėms (h1), kad būtų galima naršyti pagal antraštes,
   nedubliuojant vizualaus "head2" banerio. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.45;
	margin: 0;
	padding: 10px 8px 40px;
}

.in {
	max-width: 640px;
	margin: 0 auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-outer);
}

/* ---------- Antraštės / juostos ---------- */

.head2, .tp, .info, .end {
	display: block;
	text-align: center;
	color: var(--accent-text);
	background: var(--accent-grad);
	font-weight: 700;
	font-family: var(--font);
	padding: 10px 12px;
}

.head2 {
	font-size: 16px;
	letter-spacing: 0.02em;
	border-bottom: 1px solid var(--accent-border);
}

.head2 img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: 0 auto; }

/* ---------- Prekės ženklas / baneris ---------- */
.ukis-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--accent-text);
}
.ukis-brand .ukis-brand-icon { height: 34px; width: auto; max-width: none; flex-shrink: 0; display: inline-block; margin: 0; border-radius: 0; }
.ukis-brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.ukis-brand-word { font-size: 19px; font-weight: 800; letter-spacing: 0.01em; }
.ukis-brand-word span { opacity: 0.75; font-weight: 600; }
.ukis-brand-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.8; }

.tp {
	font-size: 13px;
	padding: 7px 12px;
	border-top: 1px solid var(--accent-border-soft);
	border-bottom: 1px solid var(--accent-border-soft);
}

.info {
	font-size: 13px;
	border-top: 1px solid var(--accent-border);
}

.end {
	font-size: 11px;
	font-weight: 500;
	opacity: 0.9;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.head2 + .tp, .tp + .tp { border-top: none; }

/* h2 skyrių antraštės (Užmiestis/Miestas/Pokalbiai ir pan.) - naudoja
   tikrą <h2>, kad būtų galima naršyti ekrano skaitytuvu pagal
   antraštes, bet vizualiai turi likti tokios pat kaip anksčiau
   naudotas <b>. */
.meniu h2, .tp h2, .title h2, .nav h2 {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* ---------- Turinio blokas ---------- */

.meniu {
	background: var(--surface);
	color: var(--text);
	padding: 14px 14px 16px;
	text-align: left;
	border: none;
	max-width: none;
	margin: 0;
	line-height: 1.85;
}

.eilute, .eilute2, .eilute3 {
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 8px 10px;
	margin: 6px 0;
	text-align: left;
}

.topikas {
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	box-shadow: none;
	color: var(--text);
	margin: 8px auto;
	padding: 10px;
	width: auto;
}

.topikas:hover { background: var(--surface-hover); }

/* ---------- Nuorodos ---------- */

a:link, a:visited, a:active {
	color: var(--link);
	text-decoration: none;
	transition: color 120ms ease, opacity 120ms ease;
}

a:hover, a:focus {
	color: var(--link-hover);
	text-decoration: underline;
}

.head2 a, .tp a, .info a, .end a {
	color: var(--accent-text);
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,0.4);
}

.head2 a:hover, .tp a:hover, .info a:hover, .end a:hover { color: var(--accent-text); opacity: 0.8; }

.index { color: var(--text); }

/* ---------- Meniu nuorodos kaip paliečiami mygtukai ---------- */
/* Dauguma žaidimo navigacijos yra paprastos "$icona <a>Label</a><br/>"
   eilutės - šis stilius joms suteikia apvalintą hover/press foną, kad
   atrodytų kaip tikri sąrašo punktai, nekeičiant HTML struktūros. */

.meniu a:not(.button):not(.headbuton):not(.ukis-veiksmas):not(.ukis-tvenkinio-vieta):not(.ukis-kortele):not(.ukis-chat-nick):not(.ukis-quote-link):not(.ukis-avataras):not(.ukis-apacia-punktas):not(.ukis-mygtukas) {
	display: inline-block;
	padding: 3px 7px;
	margin: -3px -7px;
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.meniu a:not(.button):not(.headbuton):not(.ukis-veiksmas):not(.ukis-tvenkinio-vieta):not(.ukis-kortele):not(.ukis-chat-nick):not(.ukis-quote-link):not(.ukis-avataras):not(.ukis-apacia-punktas):not(.ukis-mygtukas):hover,
.meniu a:not(.button):not(.headbuton):not(.ukis-veiksmas):not(.ukis-tvenkinio-vieta):not(.ukis-kortele):not(.ukis-chat-nick):not(.ukis-quote-link):not(.ukis-avataras):not(.ukis-apacia-punktas):not(.ukis-mygtukas):focus-visible {
	background: var(--surface-hover);
	color: var(--link-hover);
	text-decoration: none;
}

.meniu a:not(.button):not(.headbuton):not(.ukis-veiksmas):not(.ukis-tvenkinio-vieta):not(.ukis-kortele):not(.ukis-chat-nick):not(.ukis-quote-link):not(.ukis-avataras):not(.ukis-apacia-punktas):not(.ukis-mygtukas):active {
	background: var(--surface-alt);
}

.info .index a, .end a {
	display: inline-block;
	padding: 3px 8px;
	margin: -3px -2px;
	border-radius: var(--radius-sm);
}

.info .index a:hover, .end a:hover {
	background: rgba(255,255,255,0.12);
}

/* ---------- Spalvų pagalbinės klasės (senoji sistema, paliktos suderinamumui) ---------- */

.balta { color: var(--accent-text); }
.raudona, .raudona2 { color: var(--c-red); }
.melyna { color: var(--c-blue); }
.zalia, .zalia2 { color: var(--c-green); }
.geltona, .geltona2 { color: var(--c-yellow); }
.pilka { color: var(--text-muted); }
.oaze { color: var(--c-pink); }
.plus_g { color: var(--c-green); }
.plus_o { color: var(--c-orange); }

/* ---------- Formos ---------- */

input[type="text"], input[type="password"], input[type="number"], input[type="email"],
textarea, select {
	background: var(--field-bg);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 7px 9px;
	font-family: var(--font);
	font-size: 14px;
	max-width: 100%;
	margin: 2px 0 6px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--accent-solid);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

textarea { resize: vertical; }

input[type="submit"], input[type="button"], button, a.button, a.headbuton {
	display: inline-block;
	background: var(--accent-grad);
	color: var(--accent-text);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-sm);
	padding: 8px 14px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: transform 80ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

input[type="submit"]:hover, input[type="button"]:hover, button:hover, a.button:hover, a.headbuton:hover {
	opacity: 0.92;
	box-shadow: var(--shadow-btn);
	color: var(--accent-text);
	text-decoration: none;
}

input[type="submit"]:active, input[type="button"]:active, button:active { transform: scale(0.97); }

a.headbuton { padding: 5px 10px; font-size: 12px; margin: 2px; background-image: none; }

/* Prisijungimo puslapio nuorodos po forma - viena eilute, o siauresniame
   ekrane viena po kita. */
.ukis-ivado-mygtukai {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 10px 0 4px;
}
.ukis-ivado-mygtukai .button { background: var(--surface-alt); color: var(--link); border-color: var(--border-soft); }
.ukis-ivado-mygtukai .button:hover { background: var(--surface-hover); color: var(--link-hover); }

.button1 { box-shadow: var(--shadow-outer); }
.green { background: var(--c-green); }
.brown { background: var(--c-orange); }
.blue { background: var(--c-blue); }
.red { background: var(--c-red); }

/* ---------- Realaus laiko elementai (skaitikliai / pranešimai) ---------- */

.ukis-timer {
	display: inline-block;
	background: var(--field-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 2px 10px;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
}

.ukis-timer-done {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #ffffff;
}

.ukis-timer-done a { color: #ffffff; text-decoration: underline; }

.chet {
	background: rgba(0,0,0,0.15);
	border-radius: var(--radius-pill);
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
}

/* ---------- Puslapiavimas ---------- */

.puslapiavimas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 8px 0 2px;
}

.puslapiavimas .pusl-nav,
.puslapiavimas .pusl-num {
	display: inline-block;
	flex-shrink: 0;
	white-space: nowrap;
	margin: 0 !important;
	min-width: 26px;
	text-align: center;
	padding: 5px 9px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-soft);
	background: var(--surface-alt);
	text-decoration: none;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.puslapiavimas .pusl-nav:hover,
.puslapiavimas .pusl-num:hover,
.puslapiavimas .pusl-nav:focus-visible,
.puslapiavimas .pusl-num:focus-visible {
	background: var(--surface-hover);
	text-decoration: none;
}

.puslapiavimas .pusl-active {
	display: inline-block;
	flex-shrink: 0;
	white-space: nowrap;
	min-width: 26px;
	text-align: center;
	padding: 5px 9px;
	border-radius: var(--radius-sm);
	background: var(--accent-grad);
	color: var(--accent-text);
	font-weight: 700;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.puslapiavimas .pusl-ellipsis {
	padding: 0 2px;
	color: var(--text-muted);
}

/* ---------- Chat ---------- */

/* Pokalbių langas turi rodyti visą puslapio žinučių porciją - anksčiau
   fiksuotas aukštis nukirsdavo paskutinę žinutę per pusę. */
#ukis-chat-box {
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 8px 10px;
	margin: 6px 0 10px;
	text-align: left;
}

/* Viena pokalbių žinutė: vardas ir laikas viršuje, tekstas po jais,
   "Atsakyti" - tyli nuoroda apačioje. Anksčiau viskas buvo vienoje
   eilutėje ir "Atsakyti" ėjo pirmiau už vardą. */
.ukis-chat-msg {
	padding: 8px 4px 6px;
	border-bottom: 1px solid var(--border-soft);
	font-size: 13px;
	line-height: 1.45;
}
.ukis-chat-msg:last-child { border-bottom: none; }

.ukis-chat-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-bottom: 2px;
}
.meniu a.ukis-chat-nick, .ukis-chat-nick {
	display: inline-block;
	padding: 0;
	margin: 0;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}
.ukis-chat-laikas {
	color: var(--text-muted);
	font-size: 11px;
	white-space: nowrap;
}
.ukis-chat-head .ukis-veiksmas-x { margin: 0 0 0 auto; }

.ukis-chat-tekstas {
	color: var(--text);
	overflow-wrap: anywhere;
	/* Zinuteje isaugotos naujos eilutes rodomos kaip naujos eilutes, o ne
	   suplakamos i viena - zr. ukis_daugiaeilis(). */
	white-space: pre-wrap;
}
.ukis-chat-tekstas img { max-width: 100%; height: auto; }

.meniu a.ukis-quote-link, .ukis-quote-link {
	display: inline-block;
	margin: 2px 0 0;
	padding: 0;
	color: var(--text-muted) !important;
	font-size: 11px;
	text-decoration: none;
}
.meniu a.ukis-quote-link:hover, .ukis-quote-link:hover {
	color: var(--link) !important;
	background: none;
	text-decoration: underline;
}

.ukis-fuel-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 8px 10px;
}
.ukis-fuel-notice img { flex-shrink: 0; }

.ukis-shop-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 10px;
	margin: 8px 0;
	text-align: left;
}
.ukis-shop-card img { max-width: 90px; height: auto; border-radius: var(--radius-sm); flex-shrink: 0; }
.ukis-shop-card-info { font-size: 13px; }

#ukis-chat-form {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

#ukis-chat-form input[type="text"] { flex: 1 1 auto; margin: 0; min-width: 120px; }
#ukis-chat-form input[type="submit"] { margin: 0; }

.ukis-quote-link { opacity: 0.7; }
.ukis-quote-link:hover { opacity: 1; }

.ukis-chat-reply-banner {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
}

.ukis-chat-reply-banner[hidden] {
	display: none;
}

.ukis-chat-reply-banner button {
	padding: 2px 8px;
	font-size: 11px;
}

.ukis-badge-notice {
	display: inline-block;
	background: var(--c-red);
	color: #fff;
	border-radius: var(--radius-pill);
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 700;
	margin-left: 4px;
	vertical-align: middle;
}

/* ---------- Pagrindinio (dashboard) kortelės ---------- */
/* .nav/.inside-top/.inside anksčiau buvo apibrėžti tik css/4.css, kuris
   niekada neįkeliamas nė vienam realiam puslapiui (žr. common_header.php -
   įkeliami tik base.css + 1/2/3.css pagal $stilius) - todėl šios klasės
   realiai neturėjo jokio stiliaus. Dabar tikra, temai pritaikyta kortelė. */
.nav {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--accent-grad);
	color: var(--accent-text);
	padding: 10px 14px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.nav img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.nav h2 { margin: 0; font-size: 15px; }

.inside-top {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--border-soft);
	padding: 8px 14px;
	font-size: 13px;
}

.inside {
	background: var(--surface);
	padding: 10px 14px 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.button2 {
	flex: 0 0 auto;
	box-shadow: var(--shadow-outer);
}
.button2:hover, .button2:focus-visible {
	box-shadow: var(--shadow-btn);
}

/* ---------- Ištekliai (HUD juosta) ---------- */
.ukis-hud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
}
.ukis-hud-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-variant-numeric: tabular-nums;
}
.ukis-hud-item img { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- Veiksmų piktogramų tinklelis ---------- */
.ukis-action-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ukis-action-grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 60px;
	padding: 6px 4px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	text-align: center;
}
.ukis-action-grid a:hover, .ukis-action-grid a:focus-visible {
	background: var(--surface-hover);
}
.ukis-action-grid img { width: 26px; height: 26px; }
.ukis-action-grid span { font-size: 10px; line-height: 1.2; color: var(--text); }

/* ---------- Informacijos kortelė (label: reikšmė sąrašai) ---------- */
/* Skirta pakeisti tankius "Label: value<br/>" teksto rulonus (žaidėjo
   profilis, misijų aprašymai, sąrašai) tvarkingu, šiuolaikišku sąrašu -
   be pakeitimų HTML struktūroje, tik apgaubiant esamą turinį. */

.ukis-info-card {
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 2px 12px;
	margin: 10px 0;
}

.ukis-info-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-soft);
	line-height: 1.35;
}

.ukis-info-row:last-child { border-bottom: none; }

.ukis-info-row .ukis-info-label { color: var(--text-muted); flex: 1 1 auto; }

.ukis-info-row .ukis-info-value { font-weight: 700; text-align: right; flex: 0 1 auto; }

/* Ilgesnio laisvo teksto reikšmėms (aprašymai) - antraštė virš,
   reikšmė žemiau, kairiuoja lygiuota, be paryškinimo. */
.ukis-info-row-block { display: block; }
.ukis-info-row-block .ukis-info-label { display: block; margin-bottom: 3px; }
.ukis-info-row-block .ukis-info-value { display: block; text-align: left; font-weight: 400; }

.ukis-info-card-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin: 14px 2px 6px;
}
.ukis-info-card-title:first-child { margin-top: 2px; }

/* Tekstinis blokas (misijų aprašymai, ilgesnės pastraipos) su ta pačia
   kortelės forma, bet be eilučių - skirta laisvo teksto turiniui. */
.ukis-text-card {
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 10px 12px;
	margin: 8px 0;
	line-height: 1.6;
}

/* ---------- Žemėlapio tinklelis ---------- */
/* Žemėlapio laukų paveikslėliai (images/zemelapis/*.png) yra žalio
   žolės tono, nepriklausomai nuo temos - tai natūralu (žemė), bet be
   rėmelio jie tiesiog "kybo" tamsiame fone. Rėmelis + paminkštinimas
   sujungia juos su likusiu tamsiu apvalkalu. */
.ukis-map-frame {
	display: inline-block;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 8px;
	margin: 6px 0;
	line-height: 0;
}
.ukis-map-frame img { image-rendering: auto; }

.ukis-map-controls {
	display: inline-block;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	padding: 10px;
	margin: 6px 0;
}
.ukis-map-controls a {
	display: inline-block;
	padding: 4px;
	border-radius: var(--radius-sm);
}
.ukis-map-controls a:hover, .ukis-map-controls a:focus-visible {
	background: var(--surface-hover);
}

/* ---------- Smulkmenos ---------- */

img { max-width: 100%; }

hr { border: none; border-top: 1px solid var(--border-soft); margin: 10px 0; }

table { border-collapse: collapse; width: 100%; }
td, th { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border-soft); }

::selection { background: var(--accent-solid); color: var(--accent-text); }

@media (max-width: 480px) {
	body { padding: 0; }
	.in { border-radius: 0; border-left: none; border-right: none; max-width: 100%; }
	.head2 { border-radius: 0; }
	.end { border-radius: 0; }
}

/* ==================================================================
   Responsyvumo ir naudojamumo patobulinimai (2026 auditas)
   ================================================================== */

/* ---------- Platesnis maketas didesniuose ekranuose ----------
   Anksčiau .in visada buvo 640px - telefonams tinka, bet kompiuteryje
   likdavo tuščia pusė ekrano. Dabar plotis auga laipsniškai, bet
   neperžengia patogaus skaitymo ilgio. */
@media (min-width: 768px) {
	.in { max-width: 720px; }
}
@media (min-width: 1024px) {
	.in { max-width: 860px; }
	body { padding: 20px 16px; }
}



/* ---------- Tarpinis dydis (planšetės, dideli telefonai) ----------
   Anksčiau buvo tik viena riba ties 480px, tad 481-767px ruožas
   likdavo neapdorotas. */
@media (min-width: 481px) and (max-width: 767px) {
	.in { max-width: 100%; margin: 0 8px; }
}

/* ---------- Patogesni paspaudimo taikiniai ----------
   Rekomenduojamas minimumas pirštui - apie 44px. */
.ukis-action-grid a,
.puslapiavimas a,
.puslapiavimas span {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Žemėlapis ---------- */

/* Langeliai buvo 30x30 - per smulkūs, todėl padidinti.
   Grafika glotninta, tad naudojamas tolygus mastelis. */
.ukis-map-frame img {
	width: 44px;
	height: 44px;
	/* Inline margin: 1px palikdavo matomus tarpus tarp langelių. */
	margin: 0 !important;
	vertical-align: top;
}
.ukis-map-frame a { display: inline-block; line-height: 0; }
.ukis-map-frame { font-size: 0; }

@media (max-width: 480px) {
	.ukis-map-frame img { width: 38px; height: 38px; }
}

/* ---------- Žemėlapio krypčių mygtukai ----------
   Buvo penki blizgūs žali paveikslėliai (2008-ųjų stiliaus, su atspindžiu) -
   nesiderino nei su naujomis plokščiomis ikonomis, nei su smėlio tema, kur
   visa kita oranžinė. Dabar tai SVG rodyklės, nusidažančios temos spalva.
   Išdėstytos kryžiumi - įprasta krypčių mygtukų forma. */
.ukis-kryptys {
	display: grid;
	grid-template-columns: repeat(3, 52px);
	gap: 6px;
	justify-content: center;
	margin: 2px auto;
}
.ukis-kryptis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-md);
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	color: var(--accent-solid);
	text-decoration: none;
	transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.ukis-kryptis svg { width: 30px; height: 30px; fill: currentColor; }
.ukis-kryptis:hover, .ukis-kryptis:focus-visible {
	background: var(--surface-hover);
	border-color: var(--accent-border-soft);
}
.ukis-kryptis:active { transform: translateY(1px); }

/* Krypčių rodyklės buvo 16x16 - sunku pataikyti pirštu. */
.ukis-map-nav a,
a > img[src*="zemelapis/aukstyn"],
a > img[src*="zemelapis/zemyn"],
a > img[src*="zemelapis/kaire"],
a > img[src*="zemelapis/desine"],
a > img[src*="zemelapis/centras"] {
	width: 32px;
	height: 32px;
	image-rendering: auto;
}
a:has(> img[src*="zemelapis/aukstyn"]),
a:has(> img[src*="zemelapis/zemyn"]),
a:has(> img[src*="zemelapis/kaire"]),
a:has(> img[src*="zemelapis/desine"]),
a:has(> img[src*="zemelapis/centras"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* ---------- Smulkios ikonos ----------
   Žaidimo grafika yra glotninta (anti-aliased) iliustracija, ne pixel-art,
   todėl didinant jai tinka tolygus, o ne pikselinis mastelis. */
.eilute img,
.ukis-info-row img,
img[src*="/ico/"],
img[src*="/ico2/"] {
	image-rendering: auto;
}

/* ---------- Smulkūs ženkliukai eilučių pradžioje ----------
   Failai yra 60x60, o rodomi 20 px - trigubas atsargos dydis, kaip ir
   mygtukuose (180 failas / 60 rodoma) bei pastatuose (192 / 64). Telefone,
   kurio ekranas 3x, toks ženkliukas piešiamas pikselis į pikselį; be šito
   16x16 failas telefone buvo išteptas ir smulkmenų jame nesimatydavo.
   Dydis nurodomas ir CSS, kad eilutė nešokinėtų, jei kuri nors ikona dar
   būtų senojo dydžio. */
img[src*="/ico2/"],
img[src$="/ivadas.png"],
img[src$="/energija.png"],
img[src$="/sotumas.png"],
img[src$="/svara.png"],
img[src$="/ic.png"],
img[src$="/doleriai.png"],
img[src$="/konkursas.png"],
img[src$="/kursai.png"],
img[src$="/puolimas.png"] {
	width: 30px;
	height: 30px;
	object-fit: contain;
	vertical-align: middle;
}

/* Likusieji sąsajos paveikslėliai: failas trigubas, o rodymo dydis toks pat,
   koks buvo iki šiol - kad eilučių aukštis nepasikeistų. */
img[src$="/day_mis.png"] { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
img[src$="/bandit.png"],
img[src$="/loterija2.png"],
img[src$="/arimai.png"],
img[src$="/policija.png"],
img[src$="/sunys.png"] { width: 64px; height: 64px; object-fit: contain; vertical-align: middle; }
img[src$="/zeme.png"]:not([src*="/ico2/"]) { width: 72px; height: 72px; object-fit: contain; }
img[src$="/fuel.png"] { width: 40px; height: 40px; object-fit: contain; }

/* ---------- Puslapių antraštės (`images/` šaknis) ----------
   Failai perpiešti ir padidinti iki 384 px, o rodomi lieka tie patys 192 px,
   kaip iki šiol - dvigubas atsargos dydis tankiam ekranui. Be šito nurodymo
   jie būtų rodomi tokie, koks failas, ir antraštė staiga taptų dvigubai
   didesnė.

   `:not([src*="/ico"])` ir `:not([src*="/mygtukai/"])` yra būtini: tais
   pačiais vardais vadinasi ir smulkūs `ico/` ženkliukai bei apatinės juostos
   mygtukai (pvz. `bankas.png` yra trijose vietose). Be išimties jie visi
   išsipūstų iki 192 px. */
img[src$="/bankas.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/dezute.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/misijos.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/miskas.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/sodas.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/supirktuve.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/parduotuve.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/ganykla.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/litai.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/pokalbiai.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/pienine.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]):not([src*="/pastatai/"]),
img[src$="/kreditai.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/siuksles.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]),
img[src$="/dealer.png"]:not([src*="/ico"]):not([src*="/mygtukai/"]) {
	width: 192px;
	height: auto;
	max-width: 100%;
}

/* ---------- Albumų ženkliukai ----------
   Failai 96 ir 192 px, rodomi 32 ir 64 px - trigubas dydis. */
img[src$="/albumas2.png"],
img[src$="/albumas_new.png"] { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }
img[src$="/albumas.png"],
img[src$="/albumas3.png"] { width: 64px; height: 64px; object-fit: contain; vertical-align: middle; }

/* ---------- Būsenos ženkliukai (turi / neturi, prisijungęs / ne) ----------
   Šitie buvo 16x16 - tokio dydžio failas telefone, kurio ekranas 3x, buvo
   ištepamas per 48 pikselius ir virsdavo dėme: skydas neatpažįstamas, varnelė
   susiliedavo su fonu. Failai perpiešti 48 px, o rodomi lieka 16 px, tad
   eilučių aukštis nepasikeičia nė per pikselį - keičiasi tik ryškumas.
   Medaliai (1vt/2vt/3vt) čia nereikalingi: jų dydį jau nurodo
   `.ukis-darbo-ikona`. */
img[src$="/neliec.png"],
img[src$="/tur.png"],
img[src$="/netur.png"],
img[src$="/neigiamas.png"]:not([src*="mini_"]),
img[src$="/teigiamas.png"]:not([src*="mini_"]),
img[src$="/on1.png"],
img[src$="/off1.png"] {
	width: 16px;
	height: 16px;
	object-fit: contain;
	vertical-align: middle;
}

/* Forumo ir pasiulymu balsavimo ženkliukai prie kiekvienos zinutes. Failai
   36 px (sumazinti is tos pacios poros, kaip ir dideli), rodomi 12 px. */
img[src$="/mini_teigiamas.png"],
img[src$="/mini_neigiamas.png"] {
	width: 12px;
	height: 12px;
	object-fit: contain;
	vertical-align: middle;
}

/* Būsenos juostoje (HUD) šitie trys ženkliukai iš viso nerodomi - ten tik
   tekstas ir užpildymo juostelė (žr. .ukis-hud-bar > img). Aukščiau nurodyti
   20 px galioja ten, kur jie rodomi kaip eilutės ženkliukai. */

/* ---------- Medžiojamų gyvūnų ikonos ----------
   Buvo 16x16 - tokiame dydyje visi žvėrys atrodė kaip vienoda dėmė.
   Rodomi 48 px, o failai - 144x144, t.y. trigubas atsargos dydis telefono
   ekranui (žr. ženkliukų pastabą aukščiau). */
img[src*="/gyvunai/"] {
	width: 48px;
	height: 48px;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 4px;
}

/* ---------- Ilgas turinys neturi laužyti maketo ---------- */
.meniu table,
.ukis-info-card table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
}

/* ---------- Perpieštos grafikos rodymo dydžiai ----------
   Kai failai buvo didinami iš senųjų, kiekvienam čia buvo prisegtas jo
   SENASIS rodymo dydis, kad maketas nepasikeistų nė per pikselį. Tada tai
   buvo teisinga, bet dabar paveikslėliai perpiešti iš naujo ir vienoje
   grupėje jie visi vienodos drobės. Senosios išimtys liko ir darė priešingą
   dalyką: kieme sandėlis buvo rodomas 48 px, garažas - 130 px, nors abu
   failai yra 192x192. Puslapiuose tai matėsi kaip atsitiktinis dydžių
   šokinėjimas.

   Todėl išimtys panaikintos - visa grupė rodoma vienu dydžiu:
     pastatai  192x192 -> 110 px  (1,75x atsargos tankiam ekranui)
     seklos    260x198 -> 130 px  (2x)
   Jei kada grupė vėl taps nevienoda, taisyti reikia failus, o ne pridėti
   naują išimtį čia. */

/* Kombainai yra 280x210, rodomi iki 140 px - vel tikslus mazinimas per puse.
   Anksciau failai buvo 200x150, tad placiausiame ekrane liko vos 1,4x atsargos
   ir kabinos rėmai bei šluotos virbai virsdavo pilka juosta. */
img[src*="/kombainai/"] { width: 100px; height: auto; }

img[src*="/mygtukai/"] { width: 60px; height: auto; }

/* ---------- Paveikslėliniai mygtukai su užrašu ----------
   Senuosiuose mygtukuose žodis buvo įpieštas į patį paveikslėlį („Turgus",
   „Laiškų dėžutė"). Perpiešus jų nebeliko: piešiame FLUX'u, o jis lietuviško
   teksto patikimai nesuformuoja, tad visuose aprašymuose teksto tiesiog
   uždrausta. Dėl to liko vien piešiniai ir žaidėjas turėdavo spėlioti.

   Užrašas grąžinamas ne į paveikslėlį, o po juo - tekstu. Taip geriau, negu
   buvo: jis didėja kartu su naršyklės šriftu, jį perskaito ekrano skaitytuvas,
   ir pakeitus pavadinimą nereikia perpiešti paveikslėlio.

   `alt` paliktas tuščias sąmoningai - vardą sako matomas užrašas, tad
   skaitytuvas jo nebekartoja du kartus. */
/* Mygtukai jau guli `.ukis-action-grid` konteineryje - jis pats deda
   paveiksleli ir uzrasa i stulpeli. Todel cia tik pakeiciami dydziai:
   `.ukis-action-grid` skirta 26 px veiksmu ikonoms, o cia 60 px mygtukai.

   `display: block` uzrasui yra butinas. Be jo jis lieka `inline`, o tada
   eilutes auksti nustato ne jo paties `line-height`, o konteinerio strutas
   (27,75 px) - dvieilis pavadinimas issiskirstydavo per visa mygtuko auksti
   ir uzlipdavo ant kitos eilutes. */
.ukis-action-grid a.ukis-mygtukas,
a.ukis-mygtukas {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 3px;
	width: 84px;
	padding: 6px 2px;
	margin: 0;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
}

.ukis-action-grid a.ukis-mygtukas img,
a.ukis-mygtukas img { width: 60px; height: auto; }

/* `min-height` dviem eilutems: dalis pavadinimu ilgi ("Savaites naujoku
   konkursas"), ir be jo vienaeiliai mygtukai butu auksciau uz dvieilius.
   `word-break` sąmoningai nenaudojamas - jis lauzo zodi bet kur
   ("Pokalbiai/vikt-orina"). */
.ukis-action-grid a.ukis-mygtukas .ukis-mygtuko-vardas,
a.ukis-mygtukas .ukis-mygtuko-vardas {
	display: block;
	width: 100%;
	font-size: 11px;
	line-height: 1.2;
	min-height: 2.4em;
	text-align: center;
	color: var(--text);
	overflow-wrap: break-word;
}

@media (min-width: 481px) {
	.ukis-action-grid a.ukis-mygtukas,
	a.ukis-mygtukas { width: 100px; }
	.ukis-action-grid a.ukis-mygtukas .ukis-mygtuko-vardas,
	a.ukis-mygtukas .ukis-mygtuko-vardas { font-size: 12px; }
}
}

img[src*="/pastatai/"] { width: 110px; height: auto; }

img[src*="/seklos/"] { width: 130px; height: auto; }

/* Sodo medziu vaisiai, uogos ir grybai - rodomi taip pat, kaip paseliai:
   jie yra to paties pobudzio piesiniai ir stovi tose paciose vietose. */
img[src*="/medziai/"],
img[src*="/uogos/"],
img[src*="/grybai/"],
img[src*="/misko_medziai/"],
img[src*="/gyvuliai/"],
img[src*="/zuvys/"],
img[src*="/sunys/"],
img[src*="/zirgai/"],
img[src*="/zverys/"],
img[src*="/aviliai/"],
img[src*="/narkotikai/"],
img[src*="/ganyklos/"],
img[src*="/vistos/"],
img[src*="/daryklos/"],
img[src*="/kepyklos/"],
img[src*="/masalai/"],
img[src*="/masinos/"],
img[src*="/kategorijos/"],
img[src*="/apranga/"],
img[src*="/gaminiai/"],
img[src*="/vaisiai/"] { width: 130px; height: auto; }

img[src*="/velykos/"] { width: 32px; height: auto; }

/* Esybes zenkliukas saraso eiluteje (ukis_esybes_zenkliukas).
   Rodomas 30 px - tiek pat, kiek ir kitos eiluciu ikonos, tad eilutes
   aukstis nepakinta. `object-fit: contain` reikalingas todel, kad failai yra
   260x198 (ne kvadratiniai): be jo naršykle juos istemptu i kvadrata. */
/* Selektorius su `img` tycia: gretimos taisykles yra `img[src*="/medziai/"]`
   ir panasios, kuriu specifiskumas (0,1,1) didesnis uz grynos klases (0,1,0).
   Be `img` priesagos zenkliukas butu rodomas 130 px, kaip ir didelis
   paveikslelis - taip ir buvo isbandant. */
img.ukis-eilutes-zenklas {
	width: 40px;
	height: 30px;
	object-fit: contain;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Nauji numatytieji avatarai yra 400x400, o seniau ikelti - 70-140 px plocio.
   `max-width` apkerpa didziuosius iki iprasto 150 px ir nepucia mazuju.
   400 pasirinkta ne del grozio: didziausias rodymo dydis yra 200 px, tad
   400 -> 200 yra tikslus mazinimas per puse. Kai failas buvo 300, tas pats
   200 px reiske 0,67 mastelio trupmena, ir smulkmenos (akiniai, barzdos
   plaukai) issitepdavo. Visi 12 avataru dabar to paties dydzio. */
img[src*="/avatarai/"] { max-width: 150px; height: auto; }

/* ---------- Meniu ikonos ----------
   Failai yra 48x48 (dalis senesnių - 64x64 ar 16x16), tad dydis prisegamas
   čia, kitaip dideli failai išsipūstų.

   Rodymo dydis: 16 -> 20 -> 30 px. Ties 16 px šautuvas (prof6) virsdavo rudu
   brūkšniu, o vartai (kiemas) - peteliške. Ties 20 px jie atpažįstami, bet
   ne daugiau: piešinio nesimato, tik ženklas. Kadangi ženkliukai yra pieštas
   turinys, o ne sąsajos glifai, jie pakelti iki 30 px - tada matyti pats
   piešinys. Failai yra 60x60, tad 30 px lieka dviguba raiška ir tankiuose
   ekranuose. Eilutė nuo to paaukštėja (~22 -> ~34 px), bet tai ir gerai:
   paspaudimo taikinys telefone tampa artimesnis 44 px rekomendacijai. */
img[src*="/ico/"] { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; }

/* Nuoroda eilutėje yra inline-block (kad turėtų paspaudimo paminkštinimą), tad
   šalia ženkliuko ji arba telpa visa, arba nukeliauja į kitą eilutę - ir tada
   ženkliukas lieka kaboti vienas. Su 16 px ženkliuku ilgiausi užrašai dar
   tilpdavo, su didesniu - nebe. Todėl eilutė su ženkliuku daroma flex juosta:
   ženkliukas nesitraukia, o tekstas laužomas šalia jo, ne po juo. */
.eilute:has(> img[src*="/ico/"] + a),
.eilute:has(> img[src*="/ico2/"] + a) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 4px;
}
.eilute:has(> img[src*="/ico/"] + a) > img,
.eilute:has(> img[src*="/ico2/"] + a) > img { flex-shrink: 0; }
/* Anksčiau čia buvo `flex: 1 1 0; min-width: 0` - norėta, kad naršyklė pirma
   trauktų nuorodą ir tik paskui laužtų juostą. Bet 390px pločio telefone tai
   duodavo priešingą rezultatą: nuoroda susitraukdavo iki nulio, jos tekstas vis
   tiek nusikeldavo žemyn, ir eilutė skaitydavosi atbulai - rodyklė pirmoje
   linijoje, laikmatis antroje, o pats pavadinimas trečioje.

   Reikia abiejų dalykų iš karto. `flex-basis: 0` palieka pradinį elgesį -
   naršyklė nelaužo juostos, o pirma traukia nuorodą (kitaip ilgi užrašai
   nustatymuose nukristų po savo ženkliuku). O `min-width: min-content` uždeda
   grindis: siaurėdama nuoroda nebegali susitraukti siauriau už ilgiausią savo
   žodį, tad pavadinimas lieka pirmoje linijoje, o netelpanti papildoma
   informacija nusikelia po juo. Tvarka teisinga ir 390px telefone, ir
   860px kompiuteryje. */
.eilute:has(> img[src*="/ico/"] + a) > a,
.eilute:has(> img[src*="/ico2/"] + a) > a { flex: 1 1 0; min-width: min-content; }

/* ==================================================================
   Sąsajos modernizavimas (2026)
   Tikslas - atsikratyti WAP laikų maniery: tekstinių "[»]" ženkliukų,
   beprasmių gradientinių juostų ir vienodo svorio dėžučių.
   ================================================================== */

/* ---------- Sąrašo ženkliukas vietoj "[»]" ---------- */
.ukis-b {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 2px;
	vertical-align: -0.06em;
	flex: none;
	background-color: var(--accent-solid);
	-webkit-mask: var(--ukis-chevron) center / contain no-repeat;
	mask: var(--ukis-chevron) center / contain no-repeat;
}
:root {
	--ukis-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* ---------- Sąrašo eilutės: aiškiai paspaudžiamos ---------- */
.eilute, .eilute2, .eilute3 {
	position: relative;
	transition: background-color .12s ease, border-color .12s ease;
}
.eilute:hover, .eilute2:hover, .eilute3:hover {
	background: var(--surface-hover);
	border-color: var(--accent-border-soft);
}
.eilute:active, .eilute2:active, .eilute3:active {
	transform: translateY(1px);
}
/* Eilutės nuoroda užima visą plotą - patogiau pirštui */
.eilute > a:first-of-type, .eilute2 > a:first-of-type {
	font-weight: 600;
}

/* ---------- Skiriamosios juostos ----------
   .tp buvo tuščia oranžinė gradientinė juosta. Beprasmė spalvota masė,
   labiausiai sendinusi vaizdą. Paverčiam subtiliu tarpu su plona linija. */
.tp {
	background: none !important;
	border: none !important;
	border-top: 1px solid var(--border-soft) !important;
	padding: 0 !important;
	margin: 14px 12px !important;
	height: 0;
	font-size: 0;
	opacity: .7;
}

/* ---------- Skyrių antraštės ----------
   Buvo storas gradientinis blokas. Dabar plokščias, ramesnis. */
.head2 {
	background: var(--surface-alt) !important;
	color: var(--text) !important;
	border-bottom: 2px solid var(--accent-solid);
	text-align: left;
	font-size: 15px;
	letter-spacing: 0;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 9px;
}
.head2 img { margin: 0 !important; }

/* Juostos, kurios yra tikras <h2> (pvz. „Jau turi ūkį?" tituliniame).
   Bendra .meniu h2 taisyklė nuima viską, kad h2 atrodytų kaip paprastas
   tekstas - čia tai atstatom atgal, kad juosta liktų juosta. */
.meniu h2.head2, h2.head2 {
	display: flex;
	margin: 0;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: normal;
}

/* ---------- Apatinė navigacija ----------
   .info buvo dar viena pilno pločio oranžinė juosta. */
.info {
	background: none !important;
	color: var(--text-muted) !important;
	border-top: 1px solid var(--border-soft);
	text-align: left;
	padding: 12px 14px;
	font-weight: 500;
}
.info a { color: var(--accent-solid); font-weight: 600; }

/* ---------- Poraštė ---------- */
.end {
	background: var(--surface-alt) !important;
	color: var(--text-muted) !important;
	border-top: 1px solid var(--border-soft);
	font-weight: 500;
}
.end a { color: var(--text-muted); }

/* ---------- Būsenos juosta (energija, sotumas, švara) ----------
   Buvo emoji + tekstas viena eile. Dabar atskiros "kortelės". */
.ukis-hud, .virsus-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* ---------- Svetainės antraštė ----------
   .head2 naudojama ir prekės ženklui, ir skyrių antraštėms. Skyriams
   tinka ramus plokščias stilius, bet pati žaidimo antraštė turi likti
   ryški - kitaip baltas logotipo tekstas dingsta šviesiame fone. */
.head2:has(.ukis-brand) {
	background: var(--accent-grad) !important;
	color: var(--accent-text) !important;
	border-bottom: none;
	justify-content: center;
	text-align: center;
	padding: 14px 12px;
}
.head2:has(.ukis-brand) .ukis-brand-word,
.head2:has(.ukis-brand) .ukis-brand-sub { color: var(--accent-text); }

/* ---------- Ištekliai: kortelės vietoj eilutės teksto ----------
   Anksčiau visi rodikliai buvo viena teksto eilutė su smulkiomis
   ikonomis - atrodė kaip forumo parašas, ne kaip žaidimo sąsaja. */
.ukis-hud {
	gap: 6px !important;
	margin: 2px 0 4px;
}
.ukis-hud-item {
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	padding: 5px 11px 5px 8px;
	gap: 6px !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.ukis-hud-item img { width: 22px !important; height: 22px !important; }
.ukis-hud-item a { color: inherit; }
.ukis-hud-item:hover { border-color: var(--accent-border-soft); }

@media (max-width: 400px) {
	.ukis-hud-item { font-size: 12px; padding: 4px 9px 4px 7px; }
}

/* ---------- Veiksmų mygtukai: aiškesnė hierarchija ----------
   Pastatų mygtukai buvo visi vienodo svorio. Dabar turi apibrėžtą
   formą, tarpus ir reakciją į paspaudimą. */
.ukis-action-grid {
	gap: 8px;
}
.ukis-action-grid a {
	transition: transform .12s ease, filter .12s ease;
}
.ukis-action-grid a:hover { filter: brightness(1.06); }
.ukis-action-grid a:active { transform: translateY(1px); }

/* ---------- Skyriaus antraštė (.nav) ----------
   Buvo ryški oranžinė gradientinė juosta - toks pat sprendimas kaip
   .head2, todėl suvienodinam: ramus fonas, akcentas tik apačioje. */
.nav {
	background: var(--surface-alt) !important;
	color: var(--text) !important;
	border-bottom: 2px solid var(--accent-solid);
	border-radius: 0 !important;
	padding: 12px 14px !important;
	font-weight: 600;
}
.nav h2 { font-size: 15px; margin: 0; font-weight: 600; }
.nav img { width: 20px; height: 20px; }

/* ---------- Įspėjimo juosta ---------- */
.ukis-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 12px;
	padding: 11px 13px;
	background: color-mix(in srgb, var(--accent-solid) 12%, var(--surface));
	border: 1px solid var(--accent-border-soft);
	border-left: 3px solid var(--accent-solid);
	border-radius: var(--radius-md);
	color: var(--text) !important;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.45;
	text-decoration: none;
}
.ukis-notice:hover { background: color-mix(in srgb, var(--accent-solid) 18%, var(--surface)); }
.ukis-notice-ico {
	flex: none;
	width: 20px; height: 20px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--accent-solid);
	color: var(--accent-text);
	font-weight: 800; font-size: 13px;
}

/* Pirmoji skiriamoji linija puslapio viršuje nereikalinga */
.in > .tp:first-of-type { display: none; }

/* ---------- Titulinio puslapio vitrina ----------
   Keturi žaidimo paveikslėliai iš karto po antrašte. Telefone telpa du per
   eilutę, platesniame ekrane - visi keturi. `aspect-ratio` su `height:auto`
   saugo nuo šuolio, kol paveikslėlis dar kraunasi. */
.ukis-vitrina {
	display: grid;
	/* Viena eile, o ne 2x2: dvieju eiluciu tinklelis telefone atsiedavo apie
	   390 px ir nustumdavo „Prad{$e}ti zaisti" i puslapio viduri. Juostele is
	   keturiu telpa i ~90 px ir palieka mygtuka matoma is karto. */
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 8px;
	margin: 0 0 10px;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
}
.ukis-vitrina img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: var(--radius-sm);
	background: var(--surface-alt);
}
/* Plačiame ekrane paveikslėliai nebeišsipučia per visą plotį. */
@media (min-width: 560px) {
	.ukis-vitrina { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* Pagrindinis titulinio veiksmas - platus, kad butu aiskiai svarbiausias. */
.ukis-pradzia { padding-top: 12px; padding-bottom: 12px; }
a.button.ukis-pradeti {
	display: inline-block;
	min-width: 220px;
	padding: 12px 22px;
	font-size: 1.05rem;
	font-weight: bold;
}

/* ---------- Įvadinis tekstas prisijungimo puslapyje ----------
   Buvo viena didelė paryškinto, centruoto teksto siena - sunkiai
   skaitoma. Dabar įprastas pastraipos tekstas. */
.ukis-intro p {
	margin: 0 0 10px;
	font-weight: 400;
	text-align: left;
	line-height: 1.65;
	color: var(--text);
}
.ukis-intro p:last-child { margin-bottom: 0; }
/* Plačiame ekrane pastraipa driekdavosi per visą ~830 px plotį - apie 95
   simbolius eilutėje. Akis, baigusi eilutę, sunkiai randa kitos pradžią;
   skaityti patogu, kai eilutėje 60-75 simboliai. Telefone nieko nesikeičia:
   ten pastraipa vis tiek siauresnė už šią ribą. */
.ukis-intro { display: flow-root; }
.ukis-intro p { max-width: 56ch; margin-left: auto; margin-right: auto; }

/* Statistika - viena eilutė po prisijungimu, ne atskira skiltis. */
.ukis-statistika small { color: var(--text-muted); line-height: 1.6; }
.ukis-statistika b { color: var(--text); }

/* ---------- Būsenos rodikliai su juostele ----------
   Skaičius vienas nieko nesako - žaidėjas turi žinoti, kad maksimumas 200.
   Juostelė parodo santykį iš karto, spalva perspėja apie kritinį lygį. */
.ukis-hud-bar { flex-direction: column; align-items: stretch !important; gap: 3px !important; min-width: 104px; padding: 6px 10px !important; }
.ukis-hud-bar > img { display: none; }
.ukis-hud-bar-txt { display: block; font-size: 12px; line-height: 1.1; }
.ukis-hud-bar-track {
	display: block;
	height: 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--text) 16%, transparent);
	overflow: hidden;
}
.ukis-hud-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.ukis-lvl-geras    { background: var(--accent-solid); }
.ukis-lvl-zemas    { background: #e8a33d; }
.ukis-lvl-kritinis { background: #e05555; }

/* ---------- Lygio rodiklis būsenos juostoje ----------
   Lygis buvo tik skaičius kažkur puslapio viduryje, nors tai vienintelis
   dydis, kuris žaidime nuolat auga. Dabar jis juostoje šalia energijos:
   apskritas ženklas su numeriu, taškai ir juostelė iki kito lygio.

   Judesys sąmoningai baigtinis - juostelė vieną kartą užauga, blyksnis
   perbėga tris kartus ir nurimsta. Nuolat judantis elementas pagrindiniame
   puslapyje vargintų ir be reikalo eikvotų telefono bateriją. */
.ukis-hud-lygis {
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 140px;
	padding: 5px 12px 5px 5px !important;
}
.ukis-lygio-zenklas {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	color: var(--accent-text);
	background: var(--accent-grad);
	border: 1px solid var(--accent-border);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-solid) 55%, transparent);
}
.ukis-lygio-vidus { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ukis-lygio-txt {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	line-height: 1.1;
	white-space: nowrap;
}
.ukis-lygio-liko { color: var(--text-muted); font-weight: 600; }
.ukis-lygio-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--accent-grad);
	width: var(--ukis-proc, 0%);
	position: relative;
	overflow: hidden;
	animation: ukis-lygio-augimas 1s cubic-bezier(.22, .9, .24, 1) both;
}
/* Blyksnis - siauras šviesesnis ruožas, perbėgantis per užpildą. */
.ukis-lygio-fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		transparent 0%,
		color-mix(in srgb, #fff 55%, transparent) 45%,
		color-mix(in srgb, #fff 55%, transparent) 55%,
		transparent 100%);
	transform: translateX(-140%);
	animation: ukis-lygio-blyksnis 2.6s ease-in-out 1s 3;
}
@keyframes ukis-lygio-augimas { from { width: 0; } }
@keyframes ukis-lygio-blyksnis {
	0%   { transform: translateX(-140%); }
	60%  { transform: translateX(140%); }
	100% { transform: translateX(140%); }
}

/* Pakilus lygiui ženklas trumpai pulsuoja - klasę uždeda js/ukis.js,
   palyginęs su praeitą kartą matytu lygiu. */
.ukis-lygio-zenklas.ukis-lygio-kilo { animation: ukis-lygio-pulsas 1.4s ease-out 2; }
@keyframes ukis-lygio-pulsas {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-solid) 60%, transparent); }
	70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-solid) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-solid) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
	.ukis-lygio-fill { animation: none; }
	.ukis-lygio-fill::after { animation: none; opacity: 0; }
	.ukis-lygio-zenklas.ukis-lygio-kilo { animation: none; }
}

@media (max-width: 400px) {
	.ukis-hud-lygis { min-width: 128px; }
	.ukis-lygio-zenklas { width: 24px; height: 24px; font-size: 12px; }
}

/* ---------- Vietos paveikslėlis puslapio viršuje ----------
   Beveik kiekvienas žaidimo puslapis prasideda pastato/vietos paveikslėliu,
   kuris kabodavo vienas tuščioje erdvėje: .meniu padding + line-height 1.85
   aplink 60px paveikslėlį. Dabar tai kompaktiška antraštės juosta. */
.meniu:has(> img[alt="*"]) {
	padding: 12px 14px !important;
	line-height: 0 !important;
	text-align: center;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--accent-solid) 9%, var(--surface)) 0%,
		var(--surface) 100%);
	border-bottom: 1px solid var(--border-soft);
}
.meniu > img[alt="*"] {
	/* Fiksuotas aukštis, o ne max-height: dalis vietų ikonų yra 64px, dalis
	   192px, ir be to jos puslapiuose atrodydavo skirtingo dydžio. */
	height: 76px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}
@media (max-width: 400px) {
	.meniu > img[alt="*"] { height: 62px; }
}

/* Juostelė sąrašo eilutėje (Energija/Sotumas/Švara žaidimo meniu) */
.ukis-eil-juosta { margin-top: 6px; max-width: 200px; }

/* ---------- Tušti skirtukai ----------
   Kode skirtukai dedami mechaniškai, todėl dažnai atsiranda du iš eilės
   arba vienas puslapio pradžioje/pabaigoje, kur nieko neskiria. */
.tp + .tp,
.tp:last-child,
.meniu:has(> img[alt="*"]) + .tp,
.head2 + .tp,
.nav + .tp { display: none !important; }

/* Tušti konteineriai neturi palikti tarpo */
.meniu:empty, .eilute:empty { display: none !important; }

/* ---------- Vienodos rodyklės visose sąrašo eilutėse ----------
   Dalis eilučių kode naudoja $icona, dalis - ne (istoriškai). Dėl to vienuose
   puslapiuose rodyklės buvo, kituose ne. Čia jos pridedamos toms eilutėms,
   kurios dar neturi, kad sąsaja atrodytų vienodai visur. */
/* Ilgesnis eilutės tekstas (pvz. DUK klausimai) laužydavosi taip, kad
   rodyklė likdavo viena pirmoje eilutėje. Nuoroda paverčiama flex eilute:
   rodyklė nesitraukia, tekstas laužiasi šalia jos. */
.eilute:not(:has(.ukis-b)) > a:first-of-type:not(.ukis-veiksmas),
.eilute2:not(:has(.ukis-b)) > a:first-of-type:not(.ukis-veiksmas) {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.eilute:not(:has(.ukis-b)) > a:first-of-type:not(.ukis-veiksmas)::before,
.eilute2:not(:has(.ukis-b)) > a:first-of-type:not(.ukis-veiksmas)::before {
	flex-shrink: 0;
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 4px;
	vertical-align: -0.06em;
	background-color: var(--accent-solid);
	-webkit-mask: var(--ukis-chevron) center / contain no-repeat;
	mask: var(--ukis-chevron) center / contain no-repeat;
}

/* ---------- Pavieniai elementai be konteinerio ----------
   Kai kur tekstas ar antraštė išvedami tiesiai į .in, neįdėti į .meniu bloką.
   Tada jie prilipdavo prie ekrano krašto be jokių paraščių. */
.in > b, .in > i, .in > u, .in > small, .in > span, .in > p, .in > font {
	display: block;
	padding: 12px 14px 4px;
	line-height: 1.5;
}
.in > b {
	font-size: 15px;
	color: var(--text);
}

/* Tuščias žaidėjo "topikas" blokas neturi palikti tuščios kortelės */
.topikas:empty { display: none !important; }

/* ---------- Privačios žinutės ----------
   Sąrašas buvo tik tekstas su [x] gale - nesimatė, kur baigiasi viena žinutė
   ir prasideda kita, o neskaitytas skyrėsi vien paryškinimu. */
.ukis-pm { display: flex; align-items: center; gap: 10px; }
.ukis-pm-link {
	display: flex !important;
	flex: 1 1 auto;
	min-width: 0;
	align-items: baseline;
	gap: 4px 10px;
	flex-wrap: wrap;
}
.ukis-pm-nick { font-weight: 600; }
.ukis-pm-data { color: var(--text-muted); font-size: 12px; }

/* Neskaityta - akcento juostelė kairėje ir taškas prie vardo */
.ukis-pm-nauja {
	border-left: 3px solid var(--accent-solid);
	background: color-mix(in srgb, var(--accent-solid) 8%, var(--surface-alt));
}
.ukis-pm-nauja .ukis-pm-nick { font-weight: 700; }
.ukis-pm-nauja .ukis-pm-nick::after {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-left: 6px;
	border-radius: 50%;
	background: var(--accent-solid);
	vertical-align: middle;
}

/* Trynimo mygtukas vietoj teksto "[x]" */
.ukis-pm-trinti {
	flex: none;
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	color: var(--text-muted) !important;
	text-decoration: none;
}
.ukis-pm-trinti:hover {
	background: color-mix(in srgb, #e05555 22%, transparent);
	color: #ff8a8a !important;
}

/* Prie žinutės prisegta nuotrauka. Rodoma nedidelė, paspaudus atsidaro
   pilno dydžio - kitaip telefono nuotrauka užimtų visą ekraną. */
.ukis-pm-foto {
	display: block !important;
	margin: 8px 0;
	padding: 0 !important;
	max-width: 260px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	line-height: 0;
}
.ukis-pm-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--text) 5%, transparent);
}
.ukis-pm-foto::before { content: none !important; }

/* Atsakymo laukelis greitajame skaityme - atsiveria vietoje, be JavaScript. */
.ukis-pm-atsakymas { margin: 6px 0 2px; }
.ukis-pm-atsakymas > summary {
	display: inline-flex;
	cursor: pointer;
	list-style: none;
	margin: 0;
}
.ukis-pm-atsakymas > summary::-webkit-details-marker { display: none; }
.ukis-pm-atsakymas[open] > summary { margin-bottom: 8px; }
.ukis-pm-atsakymas textarea { width: 100%; }
.ukis-pm-atsakymas input[type="submit"] { margin-top: 8px; }

/* ---------- Susirašinėjimas su vienu žaidėju ----------
   Toks pat išskleidžiamas <details> kaip ir atsakymo laukelis. Savos žinutės
   atitraukiamos į dešinę, kad iš karto matytųsi, kas ką rašė. */
.ukis-pm-pokalbis { margin: 6px 0 2px; }
.ukis-pm-pokalbis > summary {
	display: inline-flex;
	cursor: pointer;
	list-style: none;
	margin: 0;
}
.ukis-pm-pokalbis > summary::-webkit-details-marker { display: none; }
.ukis-pm-pokalbis[open] > summary { margin-bottom: 8px; }
.ukis-pm-pokalbio-eilutes {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ukis-pm-pokalbio-eilute {
	padding: 6px 8px;
	border-radius: 8px;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.ukis-pm-pokalbio-eilute.ukis-pm-savo { margin-left: 18px; }
.ukis-pm-pokalbio-nick {
	font-weight: bold;
	margin-right: 4px;
}
.ukis-pm-pokalbio-nick::after { content: ":"; }
.ukis-pm-pokalbio-foto { margin-left: 6px; }
.ukis-pm-pokalbio-data {
	display: block;
	margin-top: 2px;
	color: var(--text-muted);
	font-size: 11px;
}

/* Paaiškinimas po formos lauku - smulkiu šriftu, kad neblaškytų. */
.ukis-lauko-paaiskinimas {
	display: block;
	margin: 4px 0 0;
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.35;
}

/* ---------- Perstatomas sąrašas (mygtukų tvarka) ----------
   Vilkti galima tik už rankenos, kad rodyklės ir tekstas liktų paspaudžiami.
   Rodyklės yra tikros nuorodos - jos vienintelės iš tikrųjų būtinos, tad
   turi būti pakankamai didelės pirštui ir aiškiai matomos. */
.ukis-tvarka {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ukis-tvarka;
}
.ukis-tvarkos-punktas {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	margin-bottom: 6px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface-alt);
	counter-increment: ukis-tvarka;
	/* touch-action: none cia BUVO ant visos eilutes - todel pirstas, uzdetas
	   bet kur ant saraso, puslapio nebeslinkdavo. Slinkima blokuoja tik pati
	   rankena (.ukis-tvarkos-rankena), o eilute lieka iprasta. */
}
.ukis-tvarkos-punktas::before {
	content: counter(ukis-tvarka) ".";
	min-width: 1.8em;
	color: var(--text-muted);
	font-size: 13px;
}
/* Rankena telefone buvo vos dvi taskeliu eilutes - pirstu i ja pataikyti
   beveik neimanoma, todel vilkimas atrodydavo neveikiantis. Dabar tai
   pilno dydzio (44x44) lieciamas taikinys su savo remeliu. */
.ukis-tvarkos-rankena {
	cursor: grab;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1;
	letter-spacing: -3px;
	user-select: none;
	touch-action: none;
}
.ukis-tvarkos-rankena:active {
	cursor: grabbing;
	background: var(--surface-alt);
}
.ukis-tvarkos-vardas {
	flex: 1;
	min-width: 0;
	word-break: break-word;
}
.ukis-tvarkos-mygtukai {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.ukis-tvarkos-mygtukai .ukis-veiksmas {
	min-width: 40px;
	text-align: center;
}
.ukis-veiksmas-neveikia {
	opacity: .35;
}
.ukis-tvarkos-velkamas {
	opacity: .75;
	border-color: var(--accent, #4a7);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.ukis-tvarkos-pranesimas:not(:empty) {
	display: block;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--surface-alt);
	font-size: 13px;
}

/* ---------- Viktorinos klausimas ----------
   Atsakymo vieta rodoma vienodo pločio šriftu su tarpais tarp simbolių -
   kitaip žvaigždutės susilipdo į vieną dėmę ir nesuskaičiuoji, kiek raidžių
   dar liko. Tarpai tarp žodžių lieka tarpais, tad matosi, iš kelių žodžių
   atsakymas. */
.ukis-viktorina {
	margin-bottom: 10px;
}
.ukis-viktorinos-atsakymas {
	display: inline-block;
	margin: 8px 0 4px;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--surface-alt);
	font-family: "DejaVu Sans Mono", "Courier New", monospace;
	font-size: 18px;
	letter-spacing: 3px;
	white-space: pre-wrap;
	word-break: break-word;
}
.ukis-viktorinos-laikas {
	display: block;
	font-size: 13px;
}

/* ---------- Veiksmų mygtukai ----------
   Kode veiksmų nuorodos buvo rašomos WAP laikų maniera - laužtiniuose
   skliaustuose: [Trinti], [Imti], [X]. Skliaustai pakeisti į normalius
   mygtukus: aiškiai matosi, kad tai veiksmas, ir pakanka ploto pirštui. */
.ukis-veiksmas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 30px;
	padding: 4px 12px;
	margin: 3px 6px 3px 0;
	border: 1px solid var(--accent-border-soft);
	border-radius: 999px;
	background: color-mix(in srgb, var(--accent-solid) 10%, transparent);
	color: var(--accent) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .12s ease, border-color .12s ease;
}
.ukis-veiksmas:hover {
	background: color-mix(in srgb, var(--accent-solid) 20%, transparent);
	border-color: var(--accent-solid);
}
.ukis-veiksmas:active { transform: translateY(1px); }

/* Trynimo mygtukas - apvalus, neutralus, paryškėja tik užvedus. */
.ukis-veiksmas-x {
	width: 30px;
	min-width: 30px;
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	color: var(--text-muted) !important;
	background: none;
	border-color: var(--border-soft);
}
.ukis-veiksmas-x:hover {
	color: #fff !important;
	background: var(--c-red);
	border-color: var(--c-red);
}

/* Eilutėje su veiksmais tekstas kairėje, mygtukai dešinėje. */
.eilute:has(> .ukis-veiksmas), .eilute2:has(> .ukis-veiksmas) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}
.eilute:has(> .ukis-veiksmas) > .ukis-veiksmas:first-of-type { margin-left: auto; }

/* ---------- Tvenkinys: žūklavietės vietos pasirinkimas ----------
   Anksčiau tai buvo 11 tildžių (~) trijose eilutėse - neaišku, kad tai
   mygtukai, ir per maži pirštui. Dabar - vandens spalvos apskritimai su
   numeriais, išdėstyti tinkleliu tvenkinio formos fone. */
.ukis-tvenkinys {
	display: grid;
	grid-template-columns: repeat(4, 46px);
	justify-content: center;
	align-content: center;
	gap: 12px;
	max-width: 300px;
	margin: 6px auto 4px;
	padding: 26px 22px 30px;
	border-radius: 46% 54% 52% 48% / 34% 32% 68% 66%;
	background:
		radial-gradient(110% 80% at 50% 5%, color-mix(in srgb, var(--c-blue) 42%, transparent), transparent 72%),
		color-mix(in srgb, var(--c-blue) 24%, var(--surface-alt));
	border: 1px solid color-mix(in srgb, var(--c-blue) 30%, var(--border-soft));
}
.ukis-tvenkinio-vieta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-blue) 22%, var(--surface));
	border: 1px solid color-mix(in srgb, var(--c-blue) 45%, transparent);
	color: var(--text) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
	transition: background-color .12s ease, transform .1s ease;
}
.ukis-tvenkinio-vieta:hover {
	background: color-mix(in srgb, var(--c-blue) 45%, var(--surface));
	border-color: var(--c-blue);
}
.ukis-tvenkinio-vieta:active { transform: scale(0.94); }

/* ---------- Pareigų ženkleliai prie vardo ----------
   Duomenų bazėje pareigos žymimos priešdėliu prieš vardą (@ adminas,
   # vyr. moderatorius, * moderatorius, ! VIP). Žaidėjui tokie ženklai
   atrodo kaip klaida ("!Jonis"), todėl rodomi kaip paaiškinti ženkleliai. */
.ukis-zenklas {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.5;
	vertical-align: 0.08em;
	text-decoration: none;
	white-space: nowrap;
}
.ukis-zenklas-adm {
	color: #fff;
	background: var(--c-red);
}
.ukis-zenklas-mod {
	color: #fff;
	background: var(--c-blue);
}
.ukis-zenklas-vip {
	color: #2a1e00;
	background: var(--c-yellow);
}
/* Įspėjimas prie objekto, kuriam kažko trūksta - pvz. alkanas sarginis šuo.
   Ta pati geltona kaip VIP ženklo: ji šitoje temoje reiškia „atkreipk dėmesį",
   o ne „blogai" (blogai yra raudona, ją naudoja tik adminų ženklas). */
.ukis-zenklas-ispejimas {
	color: #2a1e00;
	background: var(--c-yellow);
}

/* Papildoma eilutės informacija po pagrindine nuoroda (būsena, procentai,
   kiekis). Anksčiau toks tekstas eidavo prieš nuorodą, tad rodyklė
   atsidurdavo eilutės viduryje. */
.ukis-eilutes-info {
	display: block;
	margin-top: 2px;
	color: var(--text-muted);
	font-size: 12px;
	line-height: 1.4;
}

/* Eilutė su kiekiu ir veiksmų mygtukais: pavadinimas kairėje, kiekis
   dešinėje, mygtukai atskiroje eilutėje po jais. */
.eilute:has(> .ukis-eilutes-skaicius),
.eilute:has(> .ukis-eilutes-veiksmai) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
}
.ukis-eilutes-skaicius {
	margin-left: auto;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
/* Skaičius eilutės gale gali būti pliusas arba minusas (pvz. rezultatų
   lentelėje). Tada spalva svarbesnė už prislopintą atspalvį, tad ją reikia
   grąžinti: bendroji .ukis-eilutes-skaicius taisyklė yra žemiau .zalia ir
   .raudona, todėl be šito nurungtų jas vien dėl eilės tvarkos. */
.ukis-eilutes-skaicius.zalia { color: var(--c-green); }
.ukis-eilutes-skaicius.raudona { color: var(--c-red); }

.ukis-eilutes-veiksmai {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}
.ukis-eilutes-veiksmai .ukis-veiksmas { margin: 0; }

/* Dar nepasiekiamas sąrašo punktas (pvz. žuvis, kuriai trūksta lygio):
   lieka matomas, bet aiškiai prislopintas. */
.eilute.ukis-neaktyvi {
	opacity: 0.55;
	background: transparent;
}
.eilute.ukis-neaktyvi .ukis-eilutes-skaicius { font-weight: 400; }

/* ---------- Reikalingo lygio ženklas ----------
   Sodinimo, leidimo ir rinkimo sąrašuose prie kiekvieno pasirinkimo rodoma,
   nuo kurio lygio jis pasiekiamas. Pasiekiami - įprasta pilka; nepasiekiami
   paryškinami perspėjimo spalva, o visa eilutė pritemdoma (.ukis-neaktyvi).
   Ekrano skaitytuvui spalva nieko nesako, todėl tokiose eilutėse dar yra ir
   paslėptas tekstas "dar nepasiekiama" (žr. ukis_lygio_zenklas). */
.ukis-lygis {
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}
.eilute.ukis-neaktyvi .ukis-lygis {
	color: var(--c-orange);
	font-weight: 700;
}

/* ---------- Skyriaus antraštė bloko viduje ----------
   Įprastas <h2> .meniu bloke sąmoningai paliktas atrodyti kaip paprastas
   <b> (žr. viršuje). Ten, kur blokas turi kelias dalis - "Dienos varžybos",
   "Kaip tai veikia", "Šiandienos top 5" - reikia tikros antraštės, kad
   akis iš karto matytų, kur viena dalis baigiasi ir prasideda kita. */
.meniu h2.ukis-skyriaus-antraste,
.ukis-skyriaus-antraste {
	display: block;
	margin: 0 0 8px;
	padding: 0 0 6px;
	border-bottom: 1px solid var(--border-soft);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.ukis-skyriaus-antraste + .eilute,
.ukis-skyriaus-antraste + .ukis-text-card { border-top: none; }
/* Antraštė-nuoroda ("Dienos varžybos") turi atrodyti kaip antraštė, o ne
   kaip eilinė nuoroda tekste - spalvą paima iš antraštės, pabraukimo nėra. */
.ukis-skyriaus-antraste a,
.meniu .ukis-skyriaus-antraste a:not(.button):not(.headbuton) {
	color: inherit;
	text-decoration: none;
	font: inherit;
	letter-spacing: inherit;
}
.ukis-skyriaus-antraste a:hover,
.ukis-skyriaus-antraste a:focus-visible { color: var(--accent-solid); }

/* ---------- Dienos varžybų prizai ----------
   Buvo: trys prizai suvaryti į vieną eilutę, o nuoroda į taisykles prilipusi
   prie paskutinio. Dabar - viena vieta vienoje eilutėje: medalis, vietos
   numeris, prizas dešinėje. */
.eilute.ukis-prizas {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ukis-prizo-vieta {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	object-fit: contain;
}
.ukis-prizo-vardas { font-weight: 600; }
/* Vietos numeris top 5 saraše - fiksuoto plocio, kad vardai išsirikiuotų. */
.ukis-prizo-nr {
	flex: 0 0 22px;
	color: var(--text-muted);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.ukis-prizo-tuscia { color: var(--text-muted); font-weight: 400; font-style: italic; }
/* Data virš vienos dienos rezultatų. */
.ukis-varzybu-diena {
	margin: 14px 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--text-muted);
}
.ukis-varzybu-diena:first-child { margin-top: 0; }
.eilute.ukis-prizas .ukis-eilutes-skaicius {
	color: var(--text);
	font-weight: 700;
}
/* Prizų ir laimėtojų eilutėse rodyklės ženkliuko nereikia - vietą jau
   žymi medalis arba numeris. */
.eilute.ukis-prizas > a:first-of-type::before { content: none !important; }

/* Paaiškinimo eilutė - ne sąrašo punktas, tad be rodyklės ženkliuko
   (jį prideda .eilute > a:first-of-type::before taisyklė aukščiau). */
.eilute.ukis-prizu-paaiskinimas {
	color: var(--text-muted);
	font-size: 13px;
}
.eilute.ukis-prizu-paaiskinimas > a:first-of-type::before { content: none !important; }

/* Formos lauko antraštė - aiškiai atskirta nuo paties lauko. */
.ukis-lauko-antraste {
	display: block;
	margin: 12px 0 4px;
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ukis-lauko-antraste:first-child { margin-top: 0; }
.ukis-lauko-antraste + select,
.ukis-lauko-antraste + input { display: block; width: 100%; max-width: 340px; }

/* Formos mygtukas atskiroje eilutėje, o ne prilipęs prie paskutinio lauko. */
.ukis-formos-veiksmai { margin-top: 14px; }

/* ---------- Prekės eilutė su nuotrauka ----------
   Technikos parduotuvė rodė tik pavadinimą ir skaičius, nors nuotraukos
   duomenų bazėje yra. Dabar eilutė: nuotrauka, pavadinimas su duomenimis,
   kaina dešinėje. */
.eilute.ukis-preke {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	line-height: 1.35;
}
.eilute.ukis-preke a:not(.ukis-veiksmas) { display: inline; padding: 0; margin: 0; }
.ukis-prekes-foto {
	width: 72px;
	height: 54px;
	object-fit: contain;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--text) 5%, transparent);
}
.ukis-prekes-info { flex: 1 1 auto; min-width: 0; }
.ukis-prekes-info .ukis-eilutes-info { margin-top: 1px; }
.ukis-prekes-kaina {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
}
.ukis-prekes-turi {
	font-size: 11px;
	font-weight: 600;
	color: var(--accent);
}
@media (max-width: 400px) {
	.ukis-prekes-foto { width: 56px; height: 44px; }
	.ukis-prekes-kaina { font-size: 12px; }
}

/* Eilutėse su $icona rodykle ta rodyklė yra atskiras elementas prieš nuorodą -
   ilgesnis tekstas ją palikdavo vieną eilutėje. */
.eilute:has(> .ukis-b):not(:has(> .ukis-eilutes-veiksmai)):not(.ukis-preke),
.eilute2:has(> .ukis-b):not(:has(> .ukis-eilutes-veiksmai)) {
	display: flex;
	align-items: baseline;
	gap: 0 4px;
}
.eilute > .ukis-b, .eilute2 > .ukis-b { flex-shrink: 0; }
/* Nuoroda turi trauktis ir laužytis viduje, o ne nušokti po rodykle. */
.eilute:has(> .ukis-b) > a, .eilute2:has(> .ukis-b) > a { flex: 1 1 auto; min-width: 0; }

/* ---------- Veidukų sąrašas ----------
   Anksčiau kiekvienas veidukas užimdavo atskirą eilutę - 20 veidukų
   puslapyje virsdavo ilgu tuščiu stulpeliu. Dabar - tinklelis. */
.ukis-veiduku-tinklelis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	margin: 6px 0;
}
.ukis-veidukas {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 74px;
	padding: 8px 4px;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	text-align: center;
}
.ukis-veidukas img { max-width: 100%; height: auto; }
.ukis-veidukas code {
	font-size: 11px;
	color: var(--text-muted);
	word-break: break-all;
}

/* ---------- Filtrų juosta ----------
   Filtrai kode buvo rašomi kaip nuorodos, atskirtos "|" ženklais - sunku
   pataikyti pirštu ir nesimato, kuris filtras įjungtas. */
.ukis-kortele-juosta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 10px;
}
.meniu a.ukis-kortele, .ukis-kortele {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 12px;
	margin: 0;
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	background: var(--surface-alt);
	color: var(--text-muted) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}
.meniu a.ukis-kortele:hover, .ukis-kortele:hover {
	border-color: var(--accent-border-soft);
	color: var(--link) !important;
}
.meniu a.ukis-kortele.ukis-aktyvus, .ukis-kortele.ukis-aktyvus {
	background: var(--accent-grad);
	border-color: var(--accent-border);
	color: var(--accent-text) !important;
}

/* ---------- Avatarų tinklelis ---------- */
.ukis-avataru-tinklelis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	margin: 6px 0;
}
.meniu a.ukis-avataras, .ukis-avataras {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 6px;
	margin: 0;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-md);
	text-decoration: none !important;
}
.meniu a.ukis-avataras:hover, .ukis-avataras:hover {
	border-color: var(--accent-solid);
	background: var(--surface-hover);
}
.ukis-avataras img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.ukis-avataras span { font-size: 12px; font-weight: 600; color: var(--accent); }

/* Formų laukai per visą plotį - anksčiau jie buvo skirtingo ilgio, nes
   plotis priklausė nuo naršyklės numatytojo dydžio. */
.meniu input[type="text"], .meniu input[type="password"],
.meniu input[type="email"], .meniu input[type="number"],
.meniu select, .meniu textarea {
	width: 100%;
	max-width: 340px;
}

/* ---------- Kelias (breadcrumb) ----------
   Anksčiau tai buvo eilutės kortelė su rodykle priekyje ir ">" tarp nuorodų -
   atrodė kaip dar vienas meniu punktas, o ne kaip kelias. */
.ukis-kelias {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 2px 0 10px;
	font-size: 13px;
}
.meniu .ukis-kelias a, .ukis-kelias a {
	display: inline;
	padding: 0;
	margin: 0;
	color: var(--text-muted) !important;
	text-decoration: none;
}
.meniu .ukis-kelias a:hover, .ukis-kelias a:hover { color: var(--link) !important; text-decoration: underline; }
.ukis-kelias a + a::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 6px;
	vertical-align: -0.04em;
	background-color: var(--text-muted);
	-webkit-mask: var(--ukis-chevron) center / contain no-repeat;
	mask: var(--ukis-chevron) center / contain no-repeat;
}
.ukis-kelias a:last-child { color: var(--text) !important; font-weight: 600; }

/* ---------- Būsenos ženkleliai sode ----------
   Sode medžio būsena buvo žymima raidėmis skliaustuose ([B], [S], [R]) -
   žaidėjas turėjo atsiminti legendą. Dabar tai spalvoti ženkleliai su
   paaiškinimu užvedus. */
.ukis-zenklu-grupe {
	display: inline-flex;
	gap: 4px;
	margin-left: 8px;
	vertical-align: middle;
}
.ukis-zenklas-b { color: #2a1e00; background: var(--c-yellow); }
.ukis-zenklas-s { color: #fff; background: var(--c-green); }
.ukis-zenklas-r { color: #fff; background: var(--c-blue); }
.ukis-zenklu-grupe .ukis-zenklas {
	min-width: 20px;
	margin-left: 0;
	text-align: center;
}
.ukis-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 12px;
	color: var(--text-muted);
}
.ukis-legenda .ukis-zenklas { margin-left: 0; margin-right: 4px; }

/* ---------- Pranešimo langelis viršuje ----------
   Atėjus žinutei (ar kitam pranešimui) langelis iššoka viršuje ir po kelių
   sekundžių dingsta. Spalvos imamos iš temos: anksčiau jos buvo įrašytos
   tiesiai JS'e („background:#222"), tad šviesioje temoje langelis atrodydavo
   kaip svetimkūnis. */
.ukis-pranesimas {
	position: fixed;
	top: calc(10px + env(safe-area-inset-top, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	max-width: min(92vw, 420px);
	background: var(--surface-alt);
	color: var(--text);
	border: 1px solid var(--accent-border);
	border-radius: var(--radius-sm);
	box-shadow: 0 4px 16px rgba(0,0,0,.45);
	padding: 10px 16px;
	font-size: 14px;
	text-align: center;
}
.ukis-pranesimas a {
	color: var(--link);
	text-decoration: none;
	font-weight: 600;
}
.ukis-pranesimas a:hover { color: var(--link-hover); }
.ukis-pranesimas[hidden] { display: none; }

/* ---------- Apatinė navigacijos juosta ----------
   Iki šiol į bet kurią vietą buvo galima patekti tik per "Pagrindinis" ->
   "Žaidimo meniu" -> punktas, o nuorodos kabodavo po visu puslapio turiniu.
   Telefone tai reiškė, kad kiekvieną kartą reikia nuslinkti iki galo. */
/* `env(safe-area-inset-bottom)` cia BUTINAS. Pati juosta ta atsarga sau
   prisideda (zr. `.ukis-apacia` zemiau), tad iPhone su namu bruksneliu ji yra
   apie 93 px auksčio, o vietos jai buvo paliekama 76 px. Skirtumas - paskutines
   puslapio turinio eilutes, atsidurusios PO juosta: bandant paliesti ten esanti
   lauka pataikoma i pirma meniu mygtuka. Virsutine juostele tai jau daroma
   teisingai (`body:has(.ukis-atgal-virsus)`), apacia buvo pamirsta. */
body:has(.ukis-apacia) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

.ukis-apacia {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	background: color-mix(in srgb, var(--surface) 92%, #000);
	border-top: 1px solid var(--border);
	box-shadow: 0 -4px 14px rgba(0,0,0,.35);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Ta pati bėda liecia kiekviena ivedimo lauka, ne tik zodziu pyne: pokalbius,
   zinutes, paiešką. Todel riba duodama visiems - kur narsykle pati atslenka i
   lauka, ji sustos aukSciau uz juosta. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
textarea, select {
	scroll-margin-bottom: 110px;
}

/* Kai atidaryta klaviatura, juosta tik kliudo.

   iOS Safari `position: fixed` juosta prilipdo prie klaviaturos virsaus -
   tiksliai ten, kur atsiduria ir pats ivedimo laukas. Taikantis pirstu i lauka
   pataikoma i pirma meniu mygtuka; su VoiceOver, kai narsoma braukiant pirstu,
   tai ypac erzina, nes virsuje esantis elementas laimi visada.

   Klaviatura ir taip uzdengia visa apacia, tad juostos tuo metu nereikia -
   atsijungus nuo lauko ji grizta. Tik lieciamuose ekranuose (`hover: none`):
   pele tokios bedos nera. `:has()` nemokancioje narsykleje elgsena lieka tokia,
   kokia buvo iki siol. */
@media (hover: none) {
	body:has(input[type="text"]:focus, input[type="email"]:focus,
	         input[type="password"]:focus, input[type="search"]:focus,
	         input[type="number"]:focus, textarea:focus) .ukis-apacia {
		display: none;
	}
}

.ukis-apacia-punktas {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 58px;
	padding: 6px 2px;
	margin: 0;
	border-radius: 0;
	line-height: 1.1;
	color: var(--text-muted) !important;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none !important;
	transition: color .12s ease, background-color .12s ease;
}
.ukis-apacia-punktas:hover { background: var(--surface-hover); color: var(--link) !important; }
.ukis-apacia-punktas:active { background: var(--surface-alt); }
.ukis-apacia-punktas.ukis-aktyvus { color: var(--accent) !important; }
.ukis-apacia-punktas.ukis-aktyvus::before {
	content: "";
	position: absolute;
	top: 0;
	left: 22%;
	right: 22%;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--accent-solid);
}
.ukis-apacia-ikona {
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.ukis-apacia-tekstas { line-height: 1.1; }

.ukis-apacia-zenklas {
	position: absolute;
	top: 4px;
	left: 50%;
	margin-left: 4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--c-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* Ikonos - įrašytos SVG kaukėmis, kad spalva sektų temą ir nereikėtų
   papildomų failų. */

/* Naujos apatinės juostos piktogramos - žaidėjas juostą susideda pats
   (Nustatymai > Apatinė juosta), tad reikia ikonų ir ūkio vietoms. */
.ukis-ik-pokalbiai {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H8l-5 3 1.5-5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H8l-5 3 1.5-5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
}
.ukis-ik-dovana {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M3 13h18'/%3E%3Cpath d='M12 9v12'/%3E%3Cpath d='M12 9C12 6 10 4 8 5s0 4 4 4zM12 9c0-3 2-5 4-4s0 4-4 4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M3 13h18'/%3E%3Cpath d='M12 9v12'/%3E%3Cpath d='M12 9C12 6 10 4 8 5s0 4 4 4zM12 9c0-3 2-5 4-4s0 4-4 4z'/%3E%3C/svg%3E");
}
.ukis-ik-zaidimas {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.5' cy='15.5' r='1.3' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.ukis-ik-nustatymai {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
}
.ukis-ik-knyga {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H4z'/%3E%3Cpath d='M20 4h-3a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H20z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7a3 3 0 0 1 3 3v13a2.5 2.5 0 0 0-2.5-2.5H4z'/%3E%3Cpath d='M20 4h-3a3 3 0 0 0-3 3v13a2.5 2.5 0 0 1 2.5-2.5H20z'/%3E%3C/svg%3E");
}
.ukis-ik-zemelapis {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 5.5v15L9 18l6 3 6-2.5v-15L15 6z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3 3 5.5v15L9 18l6 3 6-2.5v-15L15 6z'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E");
}
.ukis-ik-augalas {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12C12 8 9 5 5 5c0 4 3 7 7 7z'/%3E%3Cpath d='M12 12c0-4 3-7 7-7 0 4-3 7-7 7z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-9'/%3E%3Cpath d='M12 12C12 8 9 5 5 5c0 4 3 7 7 7z'/%3E%3Cpath d='M12 12c0-4 3-7 7-7 0 4-3 7-7 7z'/%3E%3Cpath d='M7 21h10'/%3E%3C/svg%3E");
}
.ukis-ik-medis {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M12 17a6 6 0 0 0 6-6 5 5 0 0 0-1-3 5 5 0 0 0-10 0 5 5 0 0 0-1 3 6 6 0 0 0 6 6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M12 17a6 6 0 0 0 6-6 5 5 0 0 0-1-3 5 5 0 0 0-10 0 5 5 0 0 0-1 3 6 6 0 0 0 6 6z'/%3E%3C/svg%3E");
}
.ukis-ik-pastatas {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l9-6 9 6v12'/%3E%3Cpath d='M2 21h20'/%3E%3Crect x='9' y='13' width='6' height='8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l9-6 9 6v12'/%3E%3Cpath d='M2 21h20'/%3E%3Crect x='9' y='13' width='6' height='8'/%3E%3C/svg%3E");
}
.ukis-ik-preke {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}
.ukis-ik-moneta {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10'/%3E%3Cpath d='M9.5 9.5h3.5a2 2 0 0 1 0 4H9.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10'/%3E%3Cpath d='M9.5 9.5h3.5a2 2 0 0 1 0 4H9.5'/%3E%3C/svg%3E");
}
.ukis-ik-namai {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
}
.ukis-ik-kiemas {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-8l3-3 3 3v8'/%3E%3Cpath d='M13 20V9l3.5-3L20 9v11'/%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M16.5 13h1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-8l3-3 3 3v8'/%3E%3Cpath d='M13 20V9l3.5-3L20 9v11'/%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M16.5 13h1'/%3E%3C/svg%3E");
}
.ukis-ik-turgus {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.5 11h10L20 7H6'/%3E%3Ccircle cx='9.5' cy='19' r='1.6'/%3E%3Ccircle cx='17' cy='19' r='1.6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.5 11h10L20 7H6'/%3E%3Ccircle cx='9.5' cy='19' r='1.6'/%3E%3Ccircle cx='17' cy='19' r='1.6'/%3E%3C/svg%3E");
}
.ukis-ik-zinutes {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E");
}
.ukis-ik-meniu {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

@media (max-width: 360px) {
	.ukis-apacia-tekstas { font-size: 10px; }
}

/* Plačiuose ekranuose juosta lygiuojama pagal patį žaidimo langą, kad
   neatrodytų kaip per visą ekraną nutįsusi juosta. */
@media (min-width: 768px) {
	.ukis-apacia {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: 100%;
		max-width: 720px;
		border-left: 1px solid var(--border);
		border-right: 1px solid var(--border);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}
}
@media (min-width: 1024px) {
	.ukis-apacia { max-width: 860px; }
}

/* ---------- Patvirtinimo langas ----------
   "Taip | Ne" buvo dvi paprastos nuorodos, atskirtos brūkšneliu. Pirštu
   pataikyti sunku, o "Taip" dažnai reiškia negrįžtamą veiksmą (sudeginti
   derlių, ištrinti žinutę) ir niekuo nesiskyrė nuo "Ne". */
.ukis-patvirtinimas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 14px 0 4px;
}
.ukis-patvirtinimas .ukis-veiksmas {
	margin: 0;
	min-width: 110px;
	min-height: 42px;
	font-size: 14px;
}
.meniu a.ukis-veiksmas-pavojingas, .ukis-veiksmas-pavojingas {
	color: #fff !important;
	background: var(--c-red);
	border-color: var(--c-red);
}
.meniu a.ukis-veiksmas-pavojingas:hover, .ukis-veiksmas-pavojingas:hover {
	background: color-mix(in srgb, var(--c-red) 82%, #000);
	border-color: color-mix(in srgb, var(--c-red) 82%, #000);
}

/* Klaidos pranešimo antraštė. Anksčiau vietoj žaidimo antraštės buvo plika
   juosta su užrašu "KLAIDA" - puslapis atrodė kaip visai kita svetainė. */
.ukis-klaidos-antraste {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px 0;
	color: var(--c-red);
	font-size: 15px;
	font-weight: 700;
}
.ukis-klaidos-antraste::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-red);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* Pagrindinis (bet nepavojingas) patvirtinimo mygtukas - žalias, kaip ir
   kitos formos. Raudonas paliekamas tik negrįžtamiems veiksmams. */
/* „Kitas lygis" - vienintelis veiksmas uzbaigtame lygyje, tad ir atrodyti turi
   kaip vienintelis: platus, aukstas ir uzpildytas, o ne dar viena pilkšva
   pilyte tarp kitu. Plotis ribojamas 320 px - per visa placiaekrani jis
   atrodytu ne kaip mygtukas, o kaip juosta. */
/* Didelis pagrindinio veiksmo mygtukas. `ukis-zp-kitas` vardas liko is
   zodziu pynes, kur jis atsirado; `ukis-pagr-mygtukas` - tas pats stilius
   bendru vardu, naudojamas ir naujoko pasitikimo ekrane. */
.meniu a.ukis-zp-kitas, a.ukis-zp-kitas,
.meniu a.ukis-pagr-mygtukas, a.ukis-pagr-mygtukas {
	display: flex;
	width: min(100%, 320px);
	min-height: 48px;
	margin: 6px auto;
	padding: 10px 18px;
	border-radius: 14px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-solid) 30%, transparent);
}
.meniu a.ukis-zp-kitas:active, a.ukis-zp-kitas:active,
.meniu a.ukis-pagr-mygtukas:active, a.ukis-pagr-mygtukas:active {
	transform: translateY(1px);
	box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-solid) 30%, transparent);
}

.meniu a.ukis-veiksmas-pagr, .ukis-veiksmas-pagr {
	color: var(--accent-text) !important;
	background: var(--accent-grad);
	border-color: var(--accent-border);
}
.meniu a.ukis-veiksmas-pagr:hover, .ukis-veiksmas-pagr:hover {
	opacity: 0.92;
	background: var(--accent-grad);
	border-color: var(--accent-border);
}

/* Formos blokas su antraštėmis lygiuojamas į kairę, net jei aplinkinis
   .meniu turi įrašytą text-align: center - kitaip antraštė lieka kairėje,
   o laukas nuklysta į vidurį. */
.meniu:has(.ukis-lauko-antraste) { text-align: left !important; }
.meniu:has(.ukis-lauko-antraste) input[type="submit"] { display: block; }

/* Matomas fokuso žymėjimas visur - naršant klaviatūra turi būti aišku,
   kur esi. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--accent-solid);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
.ukis-zenklas-ne { color: #fff; background: var(--c-red); }

/* ---------- Ūkyje vykstantys darbai ----------
   <details> blokas: naršyklė pati moka jį išskleisti, tad veikia ir be
   JavaScript, ir su klaviatūra, ir su ekrano skaitytuvu. */
.ukis-darbai {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface-alt);
	margin: 8px 0;
	overflow: hidden;
}
.ukis-darbu-antraste {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.ukis-darbu-antraste::-webkit-details-marker { display: none; }
.ukis-darbu-antraste::before {
	content: "\25B8";
	color: var(--text-muted);
	transition: transform .15s;
}
.ukis-darbai[open] > .ukis-darbu-antraste::before { transform: rotate(90deg); }
.ukis-darbu-vardas { flex: 1 1 auto; }
.ukis-darbu-skaicius {
	display: inline-block;
	min-width: 1.6em;
	padding: 1px 6px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}
.ukis-darbu-sarasas {
	list-style: none;
	margin: 0;
	padding: 0 12px 10px;
}
.ukis-darbo-eilute {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 10px;
	padding: 7px 0;
	border-top: 1px solid var(--border);
	font-size: 14px;
}
/* Buvo `flex: 1 1 60%`. Pridejus zenkliuka pavadinimo dalis nebetilpdavo i
   60% ir isaugdavo, o busena ("baigta", "visi baigti") nusikeldavo i kita
   linija. Su `auto` ir `min-width: 0` ji uzleidzia vietos, ir eilute vel telpa
   i viena linija. */
.ukis-darbo-vardas { flex: 1 1 0; min-width: 0; }
/* Eilute pati nesilauzo: pavadinimas turi lauztis savo viduje, o busena
   ("baigta", "liko 6:40") visada likti toje pacioje linijoje desineje.
   Su `wrap` narsykle pirma nukeldavo busena i antra linija ir tik paskui
   traukdavo pavadinima - eilutes issitempdavo dvigubai. */
/* `align-items: baseline` buvo tinkamas, kol eilute buvo vien tekstas. Su
   zenkliuku pavadinimo dalis tapo auksta, o busena, lygiuojama pagal paskutine
   teksto linija, nusileisdavo i eilutes apacia ir atrodydavo lyg nukelta i
   kita linija. `center` laiko ja viduryje, salia pavadinimo. */
.ukis-darbo-eilute { flex-wrap: nowrap; align-items: center; }
.ukis-darbo-laikas { flex: 0 0 auto; }
.ukis-darbo-laikas {
	flex: 0 1 auto;
	color: var(--text-muted);
	font-size: 13px;
	text-align: right;
}
.ukis-darbo-visi { opacity: .75; }

/* ---------- Orai ----------
   Zalias/raudonas atspalvis rodo tik krypti, o pats skaicius ir zodis
   ("daugiau"/"maziau") pasako viska ir be spalvos - daltonikams ir ekrano
   skaitytuvui informacija nedingsta. */
.ukis-oras-gerai {
	color: #2e7d32;
	font-weight: 600;
}
.ukis-oras-blogai {
	color: #c62828;
	font-weight: 600;
}
@media (prefers-color-scheme: dark) {
	.ukis-oras-gerai { color: #7bd18a; }
	.ukis-oras-blogai { color: #ef8a8a; }
}

/* ==================================================================
   Dydžiai pagal ekraną - laikyti FAILO GALE
   Vienodos specifikos taisyklėse laimi paskutinė, o grupių dydžiai
   (`img[src*="/pastatai/"]`, `.ukis-prekes-foto` ir kiti) apibrėžti
   aukščiau. Todėl šis blokas turi likti pačiame gale - kitaip jis
   nustelbiamas ir platesniame ekrane niekas nepasikeičia.
   ================================================================== */

/* ---------- Dydžiai pagal ekraną ----------
   Iki šiol ženkliukai, tekstas ir eilučių aukštis buvo vienodi visur: tokie,
   kokie tinka telefonui. Dėl to kompiuteryje puslapis atrodydavo kaip ištemptas
   telefonas - 860px pločio eilutėje 30px ženkliukas ir vienas žodis.

   Ribos parinktos pagal tai, kiek atsargos turi patys failai. `ico/` yra 60x60,
   tad 40px dar lieka 1,5x tankiam ekranui; toliau didinti nebūtų iš ko, kol
   failai neperpiešti didesni (žr. PERPIESTI.md). */
@media (min-width: 768px) {
	body { font-size: 17px; }
	.eilute { padding: 11px 14px; }

	/* Visos grupės vienoje vietoje. Dydžiai parinkti žiūrint į kiekvieną grupę
	   žaidime, o riba visur ta pati: telefone rodymo dydis neviršija pusės failo
	   kraštinės, o kompiuteryje, kur ekranai dažniausiai 1x-2x, leidžiama iki
	   maždaug dviejų trečdalių. */
	img[src*="/ico/"], img[src*="/ico2/"] { width: 60px; height: 60px; }
	.ukis-hud-item img { width: 30px !important; height: 30px !important; }
	img[src*="/gyvunai/"] { width: 60px; height: 60px; }
	.ukis-action-grid a { width: 88px; }
	.ukis-action-grid img { width: 56px; height: 56px; }
	.ukis-action-grid span { font-size: 12px; }
	img[src*="/velykos/"] { width: 38px; }
	img[src*="/pastatai/"] { width: 130px; }
	img[src*="/seklos/"] { width: 150px; }
	img[src*="/medziai/"],
	img[src*="/uogos/"],
	img[src*="/grybai/"],
	img[src*="/misko_medziai/"],
	img[src*="/gyvuliai/"],
	img[src*="/zuvys/"],
	img[src*="/sunys/"],
	img[src*="/zirgai/"],
	img[src*="/zverys/"],
	img[src*="/aviliai/"],
	img[src*="/narkotikai/"] { width: 150px; }
	img[src*="/kombainai/"] { width: 120px; }
	img[src*="/avatarai/"] { max-width: 180px; }
	.ukis-prekes-foto { width: 110px; height: 80px; }

	/* Sąrašai į du stulpelius. Telefone eilutė per visą plotį yra teisinga, o
	   860px pločio eilutė su vienu žodžiu - ne: akis keliauja per tuščią lauką
	   nuo pavadinimo iki dešinėje kabančio skaičiaus. Sąlyga `:has(> .eilute +
	   .eilute)` įjungia tinklelį tik ten, kur eilučių iš tikrųjų daug; vienos
	   eilutės blokai lieka kaip buvę. Kas nėra eilutė (antraštės, formos,
	   paaiškinimai) driekiasi per visus stulpelius, kad nesusimaišytų. */
	.meniu:has(> .eilute + .eilute) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 8px;
		align-items: start;
	}
	.meniu:has(> .eilute + .eilute) > *:not(.eilute) { grid-column: 1 / -1; }
	.meniu:has(> .eilute + .eilute) > .eilute { margin: 0; }
	/* Senajame makete tarpai daryti <br> žymėmis. Tinklelyje kiekviena jų
	   tampa atskiru langeliu ir palieka tuščią eilę, tad čia jos nereikalingos -
	   tarpus daro pats `gap`. */
	.meniu:has(> .eilute + .eilute) > br { display: none; }
	/* Siauresniame langelyje ilga eilutė (pvz. Skerdykla su laikmačiu) nebetelpa
	   į vieną liniją. Be `wrap` pavadinimas nukrisdavo po laikmačiu ir eilutė
	   skaitydavosi atbulai. */
	/* Eilučių laužymo tvarką dabar nustato bendra `.eilute` taisyklė aukščiau -
	   ji reikalinga ne tik tinkleliui, bet ir siauram telefonui. */
}
@media (min-width: 1024px) {
	body { font-size: 18px; }
	.eilute { padding: 13px 16px; }
	.ukis-hud-item { font-size: 15px; }

	img[src*="/ico/"], img[src*="/ico2/"] { width: 60px; height: 60px; }
	.ukis-hud-item img { width: 30px !important; height: 30px !important; }
	img[src*="/gyvunai/"] { width: 68px; height: 68px; }
	.ukis-action-grid a { width: 104px; }
	.ukis-action-grid img { width: 68px; height: 68px; }
	.ukis-action-grid span { font-size: 13px; }
	img[src*="/velykos/"] { width: 42px; }
	img[src*="/pastatai/"] { width: 150px; }
	img[src*="/seklos/"] { width: 170px; }
	img[src*="/kombainai/"] { width: 140px; }
	img[src*="/avatarai/"] { max-width: 200px; }
	.ukis-prekes-foto { width: 130px; height: 95px; }
}

/* ---------- Ženkliukas darbų sąrašo eilutėje ----------
   „Ūkyje vykstantys darbai" iki šiol buvo vien tekstas. Ženkliukas parenkamas
   pagal darbo pavadinimą (`ukis_darbo_ikona`): lauko darbams - `images/irasai/`
   piešiniai, pastatų darbams - tie patys `ico/` ženkliukai, kurie tą pastatą
   žymi kieme. Dydis mažesnis už meniu ženkliukus, nes eilutė čia siauresnė ir
   svarbiausia lieka pavadinimas su laikmačiu. */
/* Pavadinimo dalis daroma flex juosta, kad zenkliukas liktu salia teksto,
   o ne virs jo: ilgas pavadinimas telefone kitaip nustumdavo zenkliuka i
   atskira linija, ir eilute skaitydavosi netvarkingai. */
.ukis-darbo-vardas {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 6px;
}
.ukis-darbo-ikona {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}
/* Nuoroda turi trauktis, o ne keltis i nauja flex linija - kitaip zenkliukas
   lieka kaboti vienas. Ta pati bėda ir tvarkymas kaip meniu eilutese. */
.ukis-darbo-vardas > a { flex: 1 1 0; min-width: min-content; }
@media (min-width: 768px) {
	.ukis-darbo-ikona { width: 30px; height: 30px; }
}

/* ---------- Žemėlapio plytelių dydis ----------
   Iki šiol dydžio niekas nenustatė - plytelės susitraukdavo pačios, kiek
   leisdavo `max-width: 100%` juostoje, ir visur išeidavo 38-44 px. Dėl to
   kompiuteryje visas žemėlapis buvo 238 px kvadratėlis 860 px pločio
   stulpelyje: daugiau tuščios vietos aplink negu paties žemėlapio.

   Dabar dydis nurodomas aiškiai ir auga kartu su ekranu. Failai yra 132x132,
   tad net didžiausias 88 px lieka 1,5x - o telefone 44 px yra tiksliai
   trečdalis, t. y. švarus mastelis. */
.ukis-map-frame img { width: 44px; height: auto; }
@media (min-width: 768px) {
	.ukis-map-frame img { width: 66px; }
}
@media (min-width: 1024px) {
	.ukis-map-frame img { width: 88px; }
}

/* „Atgal" virsuje kaireje - TIK programeleje.
   Narsykleje savo mygtukas jau yra, tad pagal nutylejima slepiam. `display:
   none` reiskia, kad ekrano skaitytuvas jo net nemato - butent to ir norim,
   kitaip narsykleje jis kabotu tyliu, bet skaitomu trukdziu. */
.ukis-atgal-virsus {
	display: none;
}
/* Tas pats „Atnaujinti": narsykleje puslapi atnaujina pati Safari, tad ten sita
   nuoroda butu tik trukdis - ir akiai, ir ekrano skaitytuvui. */
.ukis-atnaujinti-virsus {
	display: none;
}
@media (display-mode: standalone) {
	/* Juostele virsuje kaireje - visada matoma, kad ir kur puslapyje esi.
	   Sutvarkyta taip pat, kaip apacios juosta (`.ukis-apacia`): tas pats
	   fonas, tas pats z-index, ta pati rusis. `env(safe-area-inset-top)`
	   nustumia nuo iPhone iskarpos ir laikrodzio - be jo mygtukas atsidurtu
	   po jais. */
	.ukis-atgal-virsus {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 50;
		display: inline-block;
		font-weight: bold;
		text-decoration: none;
		background: color-mix(in srgb, var(--surface) 92%, #000);
		border-right: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		border-bottom-right-radius: 10px;
		box-shadow: 0 4px 14px rgba(0,0,0,.35);
		padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px
			calc(14px + env(safe-area-inset-left, 0px));
	}
	/* „Atnaujinti" - to paties auksto juostele, tik desineje. Butent nuoroda,
	   o ne vien braukimo gestas: su ekrano skaitytuvu vienas pirstas yra
	   narsymas, tad gestas jam neivyksta, o nuoroda aktyvinama iprastai. */
	.ukis-atnaujinti-virsus {
		display: inline-block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 50;
		display: inline-block;
		font-weight: bold;
		text-decoration: none;
		background: color-mix(in srgb, var(--surface) 92%, #000);
		border-left: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		border-bottom-left-radius: 10px;
		box-shadow: 0 4px 14px rgba(0,0,0,.35);
		padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px
			calc(14px + env(safe-area-inset-right, 0px));
	}

	/* Turinys nustumiamas zemyn, kad neatsidurtu po juostele. Tas pats budas,
	   kaip apacioje (`body:has(.ukis-apacia)`). */
	body:has(.ukis-atgal-virsus) {
		padding-top: calc(46px + env(safe-area-inset-top, 0px));
	}

	/* Traukimas zemyn atnaujina puslapi (zr. js/ukis.js).
	   `overscroll-behavior: none` isjungia gumini atsitrenkima - be jo pusla-
	   pis pats nuslystu zemyn ir juostele atrodytu prilipusi prie krasto. */
	html, body {
		overscroll-behavior-y: none;
	}
	.ukis-traukimas {
		position: fixed;
		top: calc(-34px + env(safe-area-inset-top, 0px));
		left: 50%;
		z-index: 60;
		margin-left: -95px;
		width: 190px;
		text-align: center;
		font-size: .85rem;
		font-weight: bold;
		padding: 6px 0;
		border-radius: 999px;
		background: color-mix(in srgb, var(--surface) 92%, #000);
		border: 1px solid var(--border);
		box-shadow: 0 4px 14px rgba(0,0,0,.35);
		opacity: 0;
		pointer-events: none;
		/* Pirstui judant permetimas keiciamas kas ivyki, tad ten pereigos
		   nereikia - ji uzdedama tik atleidus, kai juostele slepiasi pati. */
		transition: transform .2s ease, opacity .2s ease;
	}
}

/* Kvietimas isideti programele - tik narsykleje. Programeleje jis bergzdzias,
   tad slepiam tuo paciu budu, kaip ir „Atgal" mygtuka, tik atvirksciai. */
.ukis-tik-programele { display: none; }
@media (display-mode: standalone) {
	.ukis-tik-narsykle { display: none; }
	.ukis-tik-programele { display: block; }
}

/* ---------- Žaidimų kambarys: kortos ----------
   Kortos piešiamos tekstu, ne paveikslėliais - taip jos lieka aiškios bet
   kokiame ekrane ir nereikia 52 failų. Spalvos imamos iš temos kintamųjų,
   kad vienodai atrodytų ir šviesioje, ir tamsioje. */
.ukis-korta-eile { margin: 10px 0; line-height: 2.1; }
.ukis-korta-vardas {
	font-size: .85em;
	opacity: .75;
	letter-spacing: .02em;
}
.ukis-korta {
	display: inline-block;
	min-width: 2.6em;
	margin: 3px 2px;
	padding: 8px 6px;
	border: 1px solid var(--border-soft);
	border-radius: 7px;
	background: var(--surface-alt);
	color: var(--text);
	font-weight: 700;
	font-size: 1.15em;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.ukis-korta-raudona { color: var(--c-red); }
/* Dengta korta - dalintojo antroji, kol žaidėjas dar traukia. */
.ukis-korta-dengta {
	background: var(--border-soft);
	color: var(--border-soft);
}

/* --------------------------------------------------------------------------
   Žodžių pynė
   -------------------------------------------------------------------------- */

/* Kryžiažodžio tinklelis. Plotis niekada neviršija 10 stulpelių (taip
   sudėlioti patys lygiai - žr. zodziai/gen_lygiai.py), tad `min()` leidžia
   langeliui augti dideliame ekrane ir susitraukti siaurame telefone, o
   tinklelis lieka vientisas. */
.ukis-zp-tinklas {
	display: inline-grid;
	gap: 2px;
	margin: 2px auto 4px;
	justify-content: center;
}
/* Langelio dydį uždeda JS (žr. `islygiuoti`): jis dalija likusį ekrano aukštį
   tarp kryžiažodžio ir rato, tad dideliame ekrane abu paauga, o žemame
   susitraukia kryžiažodis, kad ratui liktų kuo vesti. Čia įrašyta reikšmė yra
   atsarginė - ji galioja tol, kol JS neįsijungė, ir tada, kai jis išjungtas. */
.ukis-zp-lastele,
.ukis-zp-tuscia {
	width: var(--zp-lastele, min(9.4vw, 34px));
	height: var(--zp-lastele, min(9.4vw, 34px));
	line-height: var(--zp-lastele, min(9.4vw, 34px));
	font-size: calc(var(--zp-lastele, min(9.4vw, 34px)) * 0.5);
	text-align: center;
	border-radius: 4px;
}
/* Tuščias langelis turi matytis - iš jų ir susideda kryžiažodžio forma.
   Vien `--surface-alt` tamsioje temoje beveik nesiskiria nuo fono, todėl
   dedam ryškesnį rėmelį ir šiek tiek šviesesnį vidų. */
.ukis-zp-lastele {
	background: color-mix(in srgb, var(--text) 8%, var(--surface-alt));
	border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
	color: var(--text);
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Užpildytas langelis - kad rasti žodžiai iš karto matytųsi tarp tuščių. */
.ukis-zp-lastele.pilna {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
}
.ukis-zp-tuscia { background: transparent; border: 0; }

/* Žodžių sąrašas po tinkleliu. Regintiems - santrauka, ekrano skaitytuvui -
   vienintelis būdas suprasti, kokių žodžių dar trūksta. */
/* Lygio skaiciu juostele.
   Anksciau tie patys skaiciai buvo `ukis-info-card` kortele - sesios eilutes,
   apie 230 px. Telefone (640-844 px auksčio) tai reiske, kad atvėręs lygi
   zaidejas matydavo statistika ir tinkleli, o raidziu rata - vienintelį
   dalyką, su kuriuo cia zaidziama - tik paslinkes ~300 px zemyn, ir taip po
   kiekvieno perkrovimo. Zenklai uzima ~2 eilutes vietoj sesiu. */
/* Virsutinis blokas siauresnis uz iprasta: jame tik zenklai ir juostele,
   o kiekvienas cia sutaupytas pikselis ratą kelia arciau ekrano. */
/* Ketvirtadalis buvusiu parasciu. Zaidimo ekrane vertikalus pikselis nera
   neutralus: viskas, ko cia nesutaupom, nusisluoja nuo raidziu rato, nes
   `islygiuoti` ratui atiduoda butent tai, kas lieka. */
.ukis-zp-virsus { padding-top: 4px; padding-bottom: 4px; }

.ukis-zp-zenklai {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0;
}
.ukis-zp-zenklas {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	background: var(--surface-alt);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	padding: 4px 11px;
	line-height: 1.35;
	white-space: nowrap;
}
.ukis-zp-zenklas .ukis-info-label {
	color: var(--text-muted);
	font-size: .85em;
}
.ukis-zp-zenklas .ukis-info-value { font-weight: 700; }
/* Etapo zenklas eina pirmas ir issiskiria ryskesniu vardu: jis pasako ne
   skaiciu, o kur zaidejas yra ("Kiemas 1/12"), ir po juo iskart eina to paties
   etapo juostele. Per visa ploti ji buvo isteme, bet tada zenklai sugulddavo i
   tris eilutes vietoj dvieju - o kiekviena eilute cia yra 36 px, kuriais ratas
   nusileidzia zemyn nuo ekrano. */
.ukis-zp-etapo-eilute .ukis-info-label {
	font-size: 1em;
	color: var(--text);
	font-weight: 700;
}
/* Ispejimas apie sunku lygi - kas dvyliktame lygyje, tad vietos jam gaila. */
.ukis-zp-sunkus {
	padding: 7px 12px;
	margin: 0 0 8px;
	text-align: center;
}

.ukis-zp-rangas {
	font-size: .8em;
	color: var(--text-muted);
	font-weight: 400;
}

.ukis-zp-zodziai {
	margin: 4px 0 2px;
	line-height: 2;
}
.ukis-zp-zodis {
	display: inline-block;
	margin: 2px 3px;
	padding: 2px 7px;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	font-size: .9em;
	letter-spacing: .12em;
	opacity: .7;
}
.ukis-zp-zodis.rastas {
	border-color: var(--c-green);
	color: var(--c-green);
	font-weight: 700;
	opacity: 1;
}

/* Bazinės raidės. Be JS - paprasta eilė, ir žaidžiama rašant. */
/* Žodžių langeliai ir ratas guli dviejuose gretimuose `.meniu` blokuose, o
   kiekvienas jų deda po 14-16 px paraštės - kartu 30 px tuščios vietos ten,
   kur jos labiausiai trūksta: abu blokai priklauso tam pačiam žaidimo laukui,
   ir būtent tarp jų žvilgsnis laksto braukiant žodį. */
.meniu:has(> .ukis-zp-zodziai) { padding-bottom: 4px; }
.meniu:has(> .ukis-zp-raides) { padding-top: 4px; }

.ukis-zp-raides { margin: 8px 0; }
.ukis-zp-raide {
	display: inline-block;
	/* Raidė dabar yra <button> - naršyklės savo stilių nusiimam, kad atrodytų
	   taip pat, kaip atrodė paprastas ženklas. */
	appearance: none;
	font-family: inherit;
	min-width: 1.7em;
	margin: 3px;
	padding: 7px 4px;
	border: 1px solid var(--border-soft);
	border-radius: 50%;
	background: var(--surface-alt);
	color: var(--text);
	font-weight: 700;
	font-size: 1.1em;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.ukis-zp-premijos { margin: 4px 0 2px; line-height: 1.9; }
/* Progreso juostelė: etapo eiga ir premijinių indas. Spalva čia yra vienintelis
   turinys, todėl pati juosta pažymėta `role="progressbar"` su reikšmėmis - be to
   ekrano skaitytuvui ji būtų tuščias langelis. */
.ukis-zp-juosta {
	height: 8px;
	margin: 6px 2px 2px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--text) 10%, transparent);
	overflow: hidden;
}
.ukis-zp-juosta-pilna {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--c-green);
	transition: width .35s ease;
}
/* Su išjungtomis animacijomis juosta turi tiesiog atsirasti reikiamo pločio. */
.ukis-zp-be-animaciju .ukis-zp-juosta-pilna { transition: none; }

.ukis-zp-indas { margin: 2px 0 0; }
.ukis-zp-indo-tekstas {
	margin: 2px 2px 0;
	font-size: .85em;
	opacity: .85;
}

/* Lygio pabaigos suvestinė - ką tik uždirbta, viena eilute po antrašte. */
.ukis-zp-suvestine {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	margin-top: 5px;
	font-size: .9em;
}
.ukis-zp-suvestine > span { white-space: nowrap; }

.ukis-zp-premija {
	display: inline-block;
	margin: 2px 3px;
	padding: 1px 7px;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	font-size: .85em;
	opacity: .8;
}

/* Smulki pastaba po veiksmų eilute - kiek žaidėjas turi pinigų užuominai. */
.ukis-zp-pastaba {
	margin: 4px 2px 0;
	font-size: .82em;
	opacity: .7;
}

/* Su JS raidės tampa liečiamos - rodyklė ir atsakas paspaudus. Be JS klasė
   neuždedama, tad raidė lieka paprastu ženklu ir neapgaudinėja, kad spaudžiama. */
.ukis-zp-liesti .ukis-zp-raide {
	cursor: pointer;
	user-select: none;
	transition: transform .08s ease, opacity .12s ease;
}
.ukis-zp-liesti .ukis-zp-raide:active { transform: scale(.9); }
.ukis-zp-liesti .ukis-zp-raide.panaudota { opacity: .3; }

.ukis-zp-veiksmai { margin: 0 0 6px; }
.ukis-zp-trinti {
	min-width: 2.4em;
	margin: 0 4px;
	padding: 5px 10px;
	border: 1px solid var(--border-soft);
	border-radius: 7px;
	background: var(--surface-alt);
	color: var(--text);
	font-size: 1em;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Raidžių ratas
   --------------------------------------------------------------------------
   Klasę `ukis-zp-ratas` uždeda JS. Be jo lieka paprasta raidžių eilė ir
   įvedimo laukas - viskas veikia, tik renkama klaviatūra. */

.ukis-zp-ratas {
	position: relative;
	/* Šitas dydis yra atsarginis - jis galioja tol, kol JS neįsijungė, ir tada,
	   kai jis išjungtas. Tikrąjį uždeda `islygiuoti`: ratas pasiima tiek, kiek
	   lieka ekrano po kryžiažodžiu, tad dideliame ekrane peraugа šituos 350 px,
	   o žemame susitraukia. `max-width` čia dėti NEGALIMA - ji nukirstų ir tą
	   inline dydį, kurį uždeda JS, ir dideliame ekrane ratas liktų stovėti ties
	   350 px, nors vietos aplink daugybė. */
	width: min(92vw, 350px);
	height: min(92vw, 350px);
	margin: 2px auto 4px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--text) 5%, transparent);
	/* Braukiant per raides puslapis neturi slinktis kartu. */
	touch-action: none;
	user-select: none;
}
/* Raidės rate tyčia stambios. Ratas yra tai, į ką žaidėjas žiūri visą partiją,
   ir pirštu vedama būtent per jas: maža raidė reiškia ne tik prastą matomumą,
   bet ir prašautą vedimą.

   TIKRĄJĮ dydį uždeda JS (žr. `issideti`): jis skaičiuojamas iš to, kas iš
   tikrųjų riboja - iš atstumo tarp gretimų raidžių ant žiedo. Šešioms raidėms
   ten vietos beveik dvigubai daugiau nei devynioms, tad viena fiksuota
   reikšmė visada būtų kompromisas: ką atlaiko devynios, tas šešioms per maža.
   Čia likusi reikšmė yra atsarginė - ji galioja tol, kol JS neįsijungė, ir tada,
   kai jis išjungtas. */
.ukis-zp-ratas .ukis-zp-raide {
	position: absolute;
	margin: 0;
	width: 2.2em;
	height: 2.2em;
	line-height: 2.2em;
	padding: 0;
	transform: translate(-50%, -50%);
	font-size: 1.9em;
	font-weight: 700;
	cursor: pointer;
	transition: transform .08s ease, background .12s ease, color .12s ease;
}
/* Pasirinkta raidė - kaip užpildytas kryžiažodžio langelis, kad iš karto
   matytųsi, kas jau paimta. */
.ukis-zp-ratas .ukis-zp-raide.pasirinkta {
	background: var(--c-green);
	border-color: var(--c-green);
	color: #fff;
	transform: translate(-50%, -50%) scale(1.12);
}

/* Linija tarp pasirinktų raidžių. */
.ukis-zp-linija {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.ukis-zp-linija polyline {
	fill: none;
	stroke: var(--c-green);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .75;
}

/* Renkamas žodis. Be JS - eilutė virš raidžių (raidės tada yra paprasta eilė).
   Su JS jis atsiduria rato viduryje: ten vis tiek buvo tuščia, o atskira
   juostelė virš rato atiminėjo 32 px iš to paties ekrano, kuriame turi tilpti
   ir kryžiažodis, ir „Spėti". */
.ukis-zp-renkama {
	text-align: center;
	min-height: 1.6em;
	margin: 2px 0;
	font-size: 1.35em;
	font-weight: 700;
	letter-spacing: .18em;
	color: var(--c-green);
}
.ukis-zp-ratas .ukis-zp-renkama {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* Tiek lieka laisvo rato vidurio: raidės sėdi ant apskritimo krašto, ir
	   paaugusios jos to vidurio atsiėmė. Ilgas žodis persilaužia į dvi
	   eilutes, o ne užlipa ant raidžių. */
	width: 50%;
	min-height: 0;
	margin: 0;
	font-size: 1.15em;
	letter-spacing: .1em;
	line-height: 1.15;
	overflow-wrap: anywhere;
	/* Pirštas braukia per raides - užrašas neturi jo gaudyti. */
	pointer-events: none;
}

/* Įvedimo laukas ir „Spėti" vienoje eilutėje. Anksčiau buvo keturios atskiros
   eilutės - užrašas, laukas, trynimo mygtukai, „Spėti" - ir dėl to mygtukas
   nukrisdavo žemiau ekrano krašto. */
.ukis-zp-eile {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 0 0 3px;
	/* Kai narsykle (ar ekrano skaitytuvas) pati atslenka i si lauka, ji megsta
	   ji pastatyti pacioje ekrano apacioje - tiksliai po apatine juosta. Su
	   `scroll-margin-bottom` slinkimas sustoja aukSciau, ir laukas lieka
	   pasiekiamas pirstu. */
	scroll-margin-bottom: 110px;
}
.ukis-zp-eile input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.ukis-zp-eile input[type="submit"] { flex: 0 0 auto; margin: 0; }
.ukis-zp-veiksmai { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ukis-zp-veiksmai .ukis-zp-trinti { margin: 0; }
/* „Maišyti" yra nuoroda (be JS ji perkrauna puslapį), bet eilutėje turi
   atrodyti kaip tokie pat mygtukai, kaip „Trinti raidę" ir „Išvalyti". */
/* „Slėpti iki rytojaus" po dienos žodžio kortele - tyli, antraeilė nuoroda:
   ji neturi konkuruoti su mygtuku „Spėti" virš jos. */
.ukis-zp-kortele-slepti { margin-top: 6px; font-size: .85em; }
.ukis-zp-kortele-slepti a { color: var(--text-muted); }

/* Pagalbos bloko vidus. Eilutės <details> viduje neturi liesti kraštų - be
   šito jos atsiremia į patį rėmelį. */
.ukis-zp-pagalbos-vidus { padding: 2px 10px 8px; }

a.ukis-zp-trinti {
	text-decoration: none;
	display: inline-block;
	/* Be sito „Maišyti" liktų žalias, kaip nuoroda, o gretimi „Trinti raidę"
	   ir „Išvalyti" - tamsūs. Vienoje eilutėje trys vienodi mygtukai turi ir
	   atrodyti vienodai. */
	color: var(--text);
}


/* --------------------------------------------------------------------------
   Žodžių pynės animacijos
   -------------------------------------------------------------------------- */

/* Raidės slenka į naujas vietas maišant. Perėjimas uždedamas tik tada, kai
   maišoma - kitaip renkant žodį raidės "plauktų" paskui pirštą. */
.ukis-zp-ratas.maisosi .ukis-zp-raide {
	transition: left .38s cubic-bezier(.34, 1.3, .64, 1),
	            top .38s cubic-bezier(.34, 1.3, .64, 1),
	            transform .08s ease, background .12s ease;
}

/* Papurtymas - kai žodis per trumpas arba netinka. */
@keyframes ukis-zp-purtymas {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-7px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(2px); }
}
.ukis-zp-ratas.purto,
.ukis-text-card.purto { animation: ukis-zp-purtymas .3s ease; }

/* Ką tik užsipildęs langelis pašoka. Vėlinimą kiekvienam nustato JS, tad
   žodis užsipildo raidė po raidės, o ne visas iškart. */
@keyframes ukis-zp-nukrito {
	0% { transform: scale(.4); opacity: 0; }
	60% { transform: scale(1.18); opacity: 1; }
	100% { transform: scale(1); }
}
.ukis-zp-lastele.nauja { animation: ukis-zp-nukrito .34s ease both; }

/* Kas išjungęs animacijas sistemoje - tam jų ir nerodom. */
@media (prefers-reduced-motion: reduce) {
	.ukis-zp-ratas.maisosi .ukis-zp-raide { transition: none; }
	.ukis-zp-ratas.purto,
	.ukis-text-card.purto,
	.ukis-zp-lastele.nauja { animation: none; }
}

/* --------------------------------------------------------------------------
   Žodžių pynės nustatymų langas
   --------------------------------------------------------------------------
   Iššoka iš apačios. Visą langą uždengia patamsinimas - taip aišku, kad kol
   kas veikia tik jis, ir paspaudus šalia jis užsidaro. */

.ukis-zp-nustatymai {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: flex-end;
	background: rgba(0, 0, 0, .55);
}
.ukis-zp-nustatymai[hidden] { display: none; }

.ukis-zp-nust-vidus {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
	border-radius: 14px 14px 0 0;
	background: var(--surface);
	border-top: 1px solid var(--border-soft);
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .35);
	animation: ukis-zp-issoka .22s ease;
}
@keyframes ukis-zp-issoka {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

.ukis-zp-nust-antraste {
	margin: 0 0 10px;
	font-weight: 700;
}
.ukis-zp-nust-eilute {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 2px;
	border-bottom: 1px solid var(--border-soft);
	cursor: pointer;
}
.ukis-zp-nust-eilute input { width: 20px; height: 20px; }
.ukis-zp-nust-pastaba {
	margin: 10px 0;
	font-size: .82em;
	opacity: .7;
}
.ukis-zp-nust-uzdaryti {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--c-green);
	border-radius: 8px;
	background: var(--c-green);
	color: #fff;
	font-size: 1em;
	cursor: pointer;
}

/* Animacijos išjungtos žaidėjo - tada jų ir nerodom. Tas pats, ką daro
   sisteminis prefers-reduced-motion, tik rankiniu jungikliu. */
.ukis-zp-be-animaciju .ukis-zp-ratas.maisosi .ukis-zp-raide { transition: none; }
.ukis-zp-be-animaciju .ukis-zp-ratas.purto,
.ukis-zp-be-animaciju .ukis-text-card.purto,
.ukis-zp-be-animaciju .ukis-zp-lastele.nauja,
.ukis-zp-be-animaciju .ukis-zp-nust-vidus { animation: none; }

/* Raidė-mygtukas: matomas fokusas klaviatūrai. Be jo einant tabuliatoriumi
   nesimatytų, ties kuria raide esi. */
.ukis-zp-raide:focus-visible {
	outline: 3px solid var(--c-green);
	outline-offset: 2px;
}
.ukis-zp-veiksmai { text-align: center; margin: 3px 0 0; }

/* Braukymas išjungtas - ratas atiduoda liečiamąjį sluoksnį naršyklei.
   Puslapis vėl slenka pirštu per ratą, o ekrano skaitytuvo tyrinėjimas ties
   juo nebeužkliūva. Raidės lieka mygtukais, tad žaisti galima kaip ir buvo. */
.ukis-zp-be-braukymo .ukis-zp-ratas { touch-action: auto; }
.ukis-zp-be-braukymo .ukis-zp-linija { display: none; }

.ukis-zp-nust-eilute small {
	display: block;
	font-size: .78em;
	opacity: .65;
	line-height: 1.35;
}