/* Football Star - Unity-szeru elrendezes: bal menusav + varosterkep */

/* A jatekbeli paletta ugyanabbol a keszletbol jon, mint a bemutato oldal:
 * melykek alap, sarga kiemeles, zold jovahagyas. */
:root {
	--bg: #0f1c3f;
	--side: #1b2f66;
	--side2: #142450;
	--btn: #24407f;
	--btn-hi: #2f55a4;
	--border: #33508f;
	--gold-line: #d8a521;
	--text: #eef2ff;
	--muted: #98a9d6;
	--gold: #ffc81f;
	--green: #2fbf5b;
	--red: #e0554f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* A `hidden` attributum MINDIG erosebb legyen a sajat szabalyainknal.
 *
 * A bongeszo alapertelmezese csak `[hidden] { display: none }`, amit BARMELY
 * sajat `display: flex/block` felulir - es a kod ilyenkor hiaba allitja az
 * `el.hidden`-t, az elem ott marad a kepernyon. Ebbe tobbszor belefutottunk
 * (esemenysav, sebessegvalaszto, vilagvalaszto), es eddig egyesevel
 * foltoztuk. Ez az egy sor mindegyiket lezarja.
 */
[hidden] { display: none !important; }

/* ------------------------------------------------- kereso-baratsag
 *
 * Az #app-ban egy statikus leiras all, amit a app.js indulaskor felulir.
 * Ket kozonsege van: a keresorobot elso, szkript nelkuli koré, es az a
 * fel masodperc, amig a jatek betolt. Ezert nem rejtjuk el - rejtett
 * szoveget a keresok amugy is bunteti -, hanem ugy nez ki, mint egy
 * rendes betoltolap.
 */
.seo-intro {
	max-width: 760px; margin: 0 auto; padding: 40px 20px 64px;
	font-family: "Segoe UI", system-ui, sans-serif;
	line-height: 1.65; color: var(--text);
}
.seo-intro h1 { font-size: 30px; line-height: 1.2; margin-bottom: 14px; color: var(--gold); }
.seo-intro h2 { font-size: 19px; margin: 26px 0 8px; color: #cfe0ff; }
.seo-intro p  { margin-bottom: 12px; color: var(--muted); }
.seo-intro ul { margin: 0 0 12px 20px; color: var(--muted); }
.seo-intro li { margin-bottom: 6px; }
.seo-intro strong { color: var(--text); }
.seo-load { margin-top: 28px; font-size: 13px; opacity: .7; }

html, body { height: 100%; }
body {
	background: var(--bg);
	color: var(--text);
	font-family: "Segoe UI", system-ui, sans-serif;
	overflow: hidden;
}

#app { height: 100vh; display: flex; }

button { font-family: inherit; cursor: pointer; }
input {
	background: var(--side2);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	padding: 10px 12px;
	font-size: 15px;
	width: 100%;
}
input:focus { outline: none; border-color: var(--gold); }
.error { color: var(--red); font-size: 14px; min-height: 20px; }

/* ---------------- belepes ---------------- */

.login-wrap {
	flex: 1;
	display: flex; align-items: center; justify-content: center;
	background: url(assets/bg_night.png) center/cover;
}
.login-box {
	width: 360px;
	background: rgba(15, 40, 48, .93);
	border: 2px solid var(--gold-line);
	border-radius: 14px;
	padding: 30px;
	display: flex; flex-direction: column; gap: 14px;
}
.login-box h1 { font-size: 22px; text-align: center; letter-spacing: 1px; }
.login-box h1 span { color: var(--gold); }
.login-box button {
	background: var(--gold);
	border: none; border-radius: 8px;
	padding: 11px; font-size: 16px; font-weight: 700; color: #221a04;
}

/* ---------------- bal menusav ---------------- */

.sidebar {
	width: 250px;
	min-width: 250px;
	background: linear-gradient(180deg, var(--side) 0%, var(--side2) 100%);
	border-right: 2px solid var(--gold-line);
	display: flex; flex-direction: column;
	padding: 14px 12px;
	gap: 6px;
	overflow-y: auto;
}

.playerbox { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.avatar {
	width: 64px; height: 64px;
	border: 2px solid var(--gold-line);
	border-radius: 10px;
	background: var(--btn);
	display: flex; align-items: center; justify-content: center;
	font-size: 30px;
	position: relative;
	flex-shrink: 0;
}
.avatar .lvl {
	position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
	background: var(--gold); color: #221a04;
	font-size: 11px; font-weight: 800;
	border-radius: 8px; padding: 1px 7px;
}
.pinfo .pname { font-weight: 700; font-size: 15px; }
.pinfo .psub { font-size: 11px; color: var(--muted); }
.pres { font-size: 14px; margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.pres b { color: var(--gold); font-variant-numeric: tabular-nums; }

.mdivider {
	height: 10px;
	margin: 4px 12px;
	border-bottom: 1px solid var(--gold-line);
	opacity: .5;
}

.menu-btn {
	display: flex; align-items: center; gap: 10px;
	background: linear-gradient(180deg, var(--btn) 0%, var(--side2) 100%);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--gold);
	font-weight: 700; font-size: 13px;
	letter-spacing: .8px;
	padding: 9px 12px;
	text-align: left;
	text-transform: uppercase;
}
.menu-btn:hover { background: var(--btn-hi); border-color: var(--gold-line); }
.menu-btn.active { border-color: var(--gold); }
.menu-btn .mi { width: 20px; text-align: center; }

.side-foot { margin-top: auto; display: flex; gap: 10px; padding-top: 10px; }
.side-foot button {
	background: none; border: none; font-size: 20px; opacity: .7;
}
.side-foot button:hover { opacity: 1; }

/* ---------------- varosterkep ---------------- */

.map-wrap {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: #0a141a;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Fix keparanyu "szinpad": a hatterkep aranyat tartja, es egyben
 * kicsinyedik az ablakkal - igy az epuletek a talajhoz ragadnak.
 * A szelesseg keplete: vagy a rendelkezesre allo hely, vagy a kepernyo
 * magassagabol szamolt arany-helyes ertek - amelyik kisebb. Igy az arany
 * SOHA nem torzulhat (a width:100% + max-height paros torzult, mert a
 * max-height nem huzza vissza a mar kiszamolt szelesseget). */
.map {
	position: relative;
	width: min(100%, 142.857vh); /* 2000/1400 x magassag */
	aspect-ratio: 2000 / 1400;
	background-size: 100% 100%;
}
.map.day   { background-image: url(assets/bg_day.png); }
.map.night { background-image: url(assets/bg_night.png); }

.bld {
	position: absolute;
	cursor: pointer;
	transition: filter .12s;
	transform: translate(-50%, -50%);
}
.bld img { width: 100%; display: block; pointer-events: none; }
.bld:hover { filter: drop-shadow(0 0 10px rgba(240, 194, 64, .9)) brightness(1.12); }
.bld .blabel {
	position: absolute; left: 50%; bottom: -6px;
	transform: translateX(-50%);
	background: rgba(10, 22, 28, .88);
	border: 1px solid var(--gold-line);
	border-radius: 6px;
	padding: 2px 10px;
	font-size: 12px; font-weight: 700;
	letter-spacing: .5px;
	white-space: nowrap;
	color: var(--gold);
	opacity: 0;
	transition: opacity .12s;
	pointer-events: none;
}
.bld:hover .blabel { opacity: 1; }

.bld.editing { outline: 2px dashed var(--gold); cursor: move; }
.bld.decor { cursor: default; }
.bld.decor:hover { filter: none; }
.bld.decor.editing { cursor: move; }

/* ---------------- panel a terkep folott ---------------- */

/* A panel teljesen kitolti a terkep helyet - a varos nem latszik ki mogule. */
.panel-dim {
	position: absolute; inset: 0;
	background: var(--side2);
	display: flex;
	z-index: 1500;
}

/* a belepolapon nincs terkep, amihez igazodhatna - a kepernyohoz tapad */
.panel-dim.floating {
	position: fixed;
	align-items: center; justify-content: center;
	background: rgba(6, 14, 32, .72);
	padding: 20px;
}
.panel-dim.floating .panel {
	/* a tartalomhoz igazodik, nem a terkep magassagahoz */
	width: 100%; max-width: 460px; height: auto; max-height: 90vh;
}
.panel {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	background: linear-gradient(180deg, var(--side) 0%, var(--side2) 100%);
	border: none;
	border-radius: 0;
	padding: 20px 26px;
}
.panel-head {
	display: flex; align-items: center; gap: 14px;
	margin-bottom: 16px;
}
.panel-head h2 {
	font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--gold);
}
.panel-head .x {
	margin-left: auto;
	background: none; border: none;
	color: var(--gold); font-size: 22px; font-weight: 700;
}
.energywrap { font-size: 12px; color: var(--muted); }
.energybar {
	width: 170px; height: 9px;
	background: rgba(0, 0, 0, .4);
	border-radius: 5px; overflow: hidden;
	margin-top: 3px;
}
.energybar div { height: 100%; background: var(--green); transition: width .3s; }

.pbtn {
	background: var(--gold);
	border: none; border-radius: 8px;
	color: #221a04;
	font-weight: 700; font-size: 14px;
	padding: 9px 16px;
}
.pbtn:hover { filter: brightness(1.1); }
.pbtn:disabled { background: #3d4e56; color: var(--muted); cursor: default; filter: none; }
.pbtn.ghost { background: var(--btn); color: var(--text); border: 1px solid var(--border); }

.quest-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@container jatek (max-width: 760px) { .quest-list { grid-template-columns: 1fr; } }
.quest {
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 15px;
	display: flex; flex-direction: column; gap: 9px;
}
.quest h3 { font-size: 15px; min-height: 38px; }
.quest .qcat {
	font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
	color: var(--green);
	border: 1px solid rgba(53, 196, 107, .5);
	border-radius: 20px; padding: 2px 9px;
	width: fit-content;
}
.quest .qrow { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.quest .qrow b { color: var(--text); font-variant-numeric: tabular-nums; }

/* kuldeteskep a kartya tetejen (teljes szeles, szinesen) */
.quest .qart { margin: -15px -15px 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.quest .qart img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.active-quest .qart.big { width: 100%; max-width: 460px; margin: 0 auto 4px;
	border-radius: 12px; overflow: hidden; border: 1px solid var(--gold-line); }
.active-quest .qart.big img { width: 100%; display: block; }

/* csapatlap: teljes szeles palya-kep, rarakott UI-val */
.pitchhero { position: relative; width: 100%; max-width: 1180px; border-radius: 14px;
	overflow: hidden; border: 1px solid var(--gold-line); margin-bottom: 14px; background: #0a1730; }
.pitchhero .ph-bg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; display: block; }
.pitchhero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: linear-gradient(90deg, rgba(4,10,26,.62), rgba(4,10,26,.05) 26%, rgba(4,10,26,.05) 60%, rgba(4,10,26,.70)); }

.ph-head { position: absolute; top: 10px; left: 14px; right: 14px; z-index: 2;
	display: flex; align-items: center; gap: 10px; text-shadow: 0 2px 6px #000; }
.ph-head .clubname { font-size: 18px; }
.ph-head .muted { font-size: 12px; }

.ph-left { position: absolute; top: 56px; left: 14px; z-index: 2;
	display: flex; flex-direction: column; gap: 8px; width: 158px; }
.ph-left .pbtn { width: 100%; }

.ph-right { position: absolute; top: 56px; right: 14px; z-index: 2;
	width: 310px; max-height: calc(100% - 72px); overflow: auto;
	background: rgba(4,10,26,.74); border: 1px solid var(--gold-line);
	border-radius: 10px; padding: 10px 12px; }
.ph-right h3.sub { margin-top: 0; }

.ph-stats { position: absolute; left: 14px; bottom: 14px; z-index: 2;
	display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; font-size: 12px;
	background: rgba(4,10,26,.74); border: 1px solid var(--gold-line);
	border-radius: 10px; padding: 8px 12px; max-width: 360px; }
.ph-stats div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.ph-stats span { color: var(--muted); }
.ph-stats b { color: var(--text); font-variant-numeric: tabular-nums; }

/* koztes szelesseg: kisebb overlay-panelek */
@container jatek (max-width: 900px) {
	.ph-left { width: 132px; gap: 6px; }
	.ph-left .pbtn { padding: 8px 6px; font-size: 12px; }
	.ph-right { width: 240px; padding: 8px 10px; }
	.ph-stats { grid-template-columns: 1fr; gap: 1px 0; }
}

/* mobil / keskeny: az overlay-ek a kep ALA kerulnek, egymas alá (nem egymásra) */
@container jatek (max-width: 680px) {
	.pitchhero { overflow: visible; border: none; background: transparent; margin-bottom: 12px; }
	.pitchhero .ph-bg { aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--gold-line); }
	.pitchhero::after { display: none; }
	.ph-head, .ph-left, .ph-right, .ph-stats {
		position: static; width: auto; max-width: none; max-height: none;
		margin: 10px 0 0; }
	.ph-head { text-shadow: none; }
	.ph-left { flex-direction: row; flex-wrap: wrap; }
	.ph-left .pbtn { flex: 1 1 30%; width: auto; font-size: 13px; padding: 9px 8px; }
	.ph-right { overflow: visible; }
	.ph-stats { grid-template-columns: 1fr 1fr; }
}

/* ---------------- targyak, player-lap, boltok ---------------- */

.sub {
	font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
	color: var(--gold); margin-bottom: 10px;
}
.muted { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.player-grid { display: grid; grid-template-columns: 300px 1fr; gap: 22px; }
@container jatek (max-width: 780px) { .player-grid { grid-template-columns: 1fr; } }

.statrow {
	display: grid; grid-template-columns: 1fr auto auto auto;
	gap: 8px; align-items: center; margin-bottom: 7px;
}
.statrow .sname { font-size: 14px; }
.statrow .sval { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 54px; text-align: right; }
.statrow .sbtn { padding: 5px 9px; font-size: 12px; }

.kv { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; color: var(--muted); }
.kv b { color: var(--text); }

.item-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	gap: 9px;
}
.item {
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 9px 10px;
	display: flex; flex-direction: column; gap: 4px;
	font-size: 12px;
}
.item.epic { border-color: #b06be0; box-shadow: inset 0 0 12px rgba(176, 107, 224, .18); }
.item.empty { opacity: .4; }
.item .iname { font-weight: 700; font-size: 13px; line-height: 1.25; }
.item .iup { color: var(--green); }
.item .itype { color: var(--muted); font-size: 11px; }
.item .istats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.item .ist {
	background: rgba(255, 255, 255, .07);
	border-radius: 4px; padding: 1px 6px; font-size: 11px;
}
.item .ist.dmg { color: var(--gold); }
.item .iprice { color: var(--gold); font-weight: 700; margin-top: 2px; }
.item .ibtn { margin-top: 6px; padding: 5px; font-size: 12px; width: 100%; }

/* ---------------- rankings ---------------- */

.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rank-table th {
	text-align: left; color: var(--gold); font-size: 11px;
	text-transform: uppercase; letter-spacing: .8px;
	padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.rank-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.rank-table tr.me { background: rgba(240, 194, 64, .1); font-weight: 700; }
.rank-table td:first-child, .rank-table td:nth-child(4),
.rank-table td:nth-child(5), .rank-table td:nth-child(6) { font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

/* ---------------- mail ---------------- */

.maillist { display: flex; flex-direction: column; gap: 8px; }
.mailrow {
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border);
	border-radius: 9px; padding: 10px 12px; cursor: pointer;
}
.mailrow:hover { border-color: var(--gold-line); }
.mailrow.unread { border-left: 3px solid var(--gold); }
.mtop { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.mtopic { font-weight: 700; margin-top: 3px; }
.mbody { margin-top: 8px; font-size: 13px; white-space: pre-wrap; color: var(--muted); }
.mdel { margin-top: 8px; padding: 4px 10px; font-size: 11px; }

/* a muhelyben: mennyi jon a szetszedeskor a fejlesztesekert */
.kitup { font-size: 12px; margin-top: 10px; line-height: 1.45; }
.kitup b { color: var(--gold); }

/* ---------------- betting: szerencsekerek ---------------- */

.betgrid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: 18px; align-items: start;
}
@container jatek (max-width: 860px) { .betgrid { grid-template-columns: 1fr; } }
/* Telefonon a jatekter szelessege dont, nem a bongeszoablake: a keretes
 * elonezetben egy 390 keppontos telefont mutatunk egy szeles ablakban, ott
 * a fenti lekerdezes nem sul el - es a 320 keppontos kerek kilog a 338-as
 * hasabbol, ratorlodva a nyeremenytablara. */
.mobile-ui.jw-860 .betgrid { grid-template-columns: 1fr; }

.betleft { text-align: center; }

/* A kerek: a szeletek szinet egy kortorta adja, a jelek fole ulnek. */
.wheelbox {
	position: relative;
	/* A `vw` a bongeszoablakot meri, a kerek viszont egy hasabban ul: keretes
	 * elonezetben 360 keppontos kerek keszult egy 350-es helyre, es a lap
	 * oldalra elhuzhato lett. A szazalek a tenyleges helyet meri. */
	width: min(360px, 100%); aspect-ratio: 1;
	margin: 4px auto 0;
}
.wheel2 {
	--wheel-a: #1d3a6e;
	--wheel-b: #162b52;
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 6px solid var(--gold-line);
	box-shadow: 0 0 0 4px var(--ink), 0 10px 26px rgba(0, 0, 0, .55),
		inset 0 0 40px rgba(0, 0, 0, .5);
	transform: rotate(0deg);
}
/* egy szelet: a kozeppontbol kifele mutat, a vegen ul a jel */
.wsec {
	position: absolute; inset: 0;
	display: flex; justify-content: center;
	pointer-events: none;
}
.wico {
	margin-top: 9%;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	font-size: 27px; line-height: 1;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}
.wico img { width: 40px; height: 40px; object-fit: contain; }
/* amit most nem lehet megnyerni (tele hatizsak, nincs klubhaz) */
.wsec.off .wico { opacity: .28; filter: grayscale(1); }

/* a kozepen a gomb, felette a mutato */
.whub {
	position: absolute; left: 50%; top: 50%;
	width: 58px; height: 58px; margin: -29px 0 0 -29px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #35548f, #0f1f3d);
	border: 4px solid var(--gold-line);
	display: flex; align-items: center; justify-content: center;
	font-size: 26px;
}
.wpin {
	position: absolute; left: 50%; top: -12px; z-index: 3;
	width: 0; height: 0; margin-left: -13px;
	border-left: 13px solid transparent;
	border-right: 13px solid transparent;
	border-top: 26px solid var(--gold);
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .7));
}

.bresult {
	font-size: 20px; margin: 16px 0 10px; min-height: 30px;
	display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bresult b { color: var(--gold); }
.bresult .wsub { color: var(--muted); font-size: 14px; }
.bresult.hit { animation: bpop .6s ease; }
@keyframes bpop {
	0%   { transform: scale(.7); opacity: .3; }
	60%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

.pbtn.big { padding: 11px 30px; font-size: 15px; }
.betfoot { margin-top: 8px; font-size: 12.5px; }

/* nyeremenytabla */
.wtable td { vertical-align: middle; }
.wtable .wrare td { color: var(--gold); font-weight: 700; }
.wtable .woff td { opacity: .45; }
.wtico {
	display: inline-flex; width: 20px; height: 20px; vertical-align: -4px;
	align-items: center; justify-content: center; font-style: normal;
	margin-right: 5px;
}
.wtico img { width: 18px; height: 18px; object-fit: contain; }

/* ---------------- 1v1 meccs ---------------- */

.fight-box {
	width: min(680px, 94cqw);
	background: linear-gradient(180deg, var(--side) 0%, var(--side2) 100%);
	border: 2px solid var(--gold-line);
	border-radius: 16px;
	padding: 22px;
	animation: pop .2s ease-out;
}
.fighters { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.fighter { text-align: center; }
.fname { font-weight: 800; font-size: 15px; }
.fpos { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.vs { font-weight: 900; color: var(--gold); font-size: 18px; }
.hpbar {
	height: 12px; border-radius: 6px; overflow: hidden;
	background: rgba(0, 0, 0, .45); border: 1px solid var(--border);
}
.hpbar div { height: 100%; background: linear-gradient(90deg, #35c46b, #7ee2a0); transition: width .25s; }
.hpnum { font-size: 11px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }

.fightlog {
	margin-top: 16px; height: 210px; overflow-y: auto;
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--border); border-radius: 9px;
	padding: 10px 12px; font-size: 13px;
	display: flex; flex-direction: column; gap: 3px;
}
.fline.mine { color: #a9e8c1; }
.fline.theirs { color: #e8b4b4; text-align: right; }
.fdmg { font-weight: 800; color: var(--gold); }
.fresult {
	margin-top: 10px; padding: 9px; border-radius: 8px;
	text-align: center; font-weight: 800; letter-spacing: 1px;
}
.fresult.win { background: rgba(53, 196, 107, .18); color: #7ee2a0; }
.fresult.lose { background: rgba(224, 85, 85, .16); color: #ec9a9a; }
.fresult span { font-weight: 600; }
.fight-foot { display: flex; justify-content: center; margin-top: 14px; }

/* ---------------- coach youngsters: oravalaszto csuszka ---------------- */

.shift { padding: 4px 6px 8px; }
.shift-nums {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: 12px;
}
.shift-h { font-size: 26px; font-weight: 800; }
.shift-g { font-size: 20px; font-weight: 700; color: var(--gold); }

.slider {
	--fill: 0%;
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 10px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: linear-gradient(90deg,
		var(--gold) 0 var(--fill), rgba(0, 0, 0, .45) var(--fill) 100%);
	outline: none;
	cursor: pointer;
	padding: 0;
}
.slider::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 60%, #a87c15);
	border: 2px solid #6b5210;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	cursor: grab;
}
.slider::-webkit-slider-thumb:active { cursor: grabbing; }
.slider::-moz-range-thumb {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 60%, #a87c15);
	border: 2px solid #6b5210;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	cursor: grab;
}

.shift-ticks {
	display: flex; justify-content: space-between;
	margin-top: 6px; padding: 0 2px;
	font-size: 11px; color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.active-quest {
	text-align: center;
	display: flex; flex-direction: column; gap: 14px; align-items: center;
	padding: 18px 0;
}
.active-quest .timer { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); }
.btn-row { display: flex; gap: 10px; }

/* ---------------- jutalom + toast ---------------- */

.overlay {
	position: fixed; inset: 0;
	background: rgba(4, 8, 11, .8);
	display: flex; align-items: center; justify-content: center;
	z-index: 2000;
}
.reward-box {
	background: linear-gradient(180deg, var(--side) 0%, var(--side2) 100%);
	border: 2px solid var(--gold);
	border-radius: 16px;
	padding: 32px 46px;
	text-align: center;
	display: flex; flex-direction: column; gap: 12px;
	animation: pop .25s ease-out;
}
.reward-box h2 { color: var(--gold); letter-spacing: 1px; }
.reward-box .rline { font-size: 19px; }
.reward-box .rline b { color: var(--gold); }
@keyframes pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.toast {
	position: fixed; bottom: 22px; left: 50%;
	transform: translateX(-50%);
	background: var(--side);
	border: 1px solid var(--gold-line);
	border-radius: 10px;
	padding: 10px 20px;
	font-size: 14px;
	z-index: 2100;
}

/* ---------------- cup run ---------------- */

.cupbar {
	height: 6px; border-radius: 3px; margin-top: 4px;
	background: rgba(0, 0, 0, .45); overflow: hidden;
}
.cupbar div { height: 100%; background: var(--gold); }

/* A kartya elore megmutatja, ki jon kovetkezonek: arc, nev, szint.
 * A statjait szandekosan nem irjuk ki - az a meccsen derul ki. */
.cup-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 12px;
}
.cupcard {
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 12px;
	padding: 11px 12px;
	display: flex; flex-direction: column; gap: 9px;
}
.cupcard:hover { border-color: var(--gold-line); }
.cupcard.won { opacity: .72; }
.cupcard.won .cupface { filter: grayscale(.85); }
.cupcard.boss { border-color: var(--gold-line); }

.cuphead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cupname {
	font-family: var(--f-display); font-size: 14px; line-height: 1.2;
	overflow-wrap: anywhere;
}
.cupname i {
	display: block; font-style: italic; font-weight: 400;
	font-family: var(--f-body, inherit);
	font-size: 11px; color: var(--muted); margin-top: 2px;
}
.cupround { color: var(--muted); font-size: 11px; white-space: nowrap; }

.cupfoe { display: flex; align-items: center; gap: 10px; }
.cupfoe.empty { color: var(--muted); font-size: 12px; padding: 10px 0; }
.cupface {
	flex: none; width: 92px; height: 104px; overflow: hidden;
	border: 2px solid var(--gold-line); border-radius: 8px;
	background: rgba(0, 0, 0, .35);
	display: flex; justify-content: center;
}
.cupface .portraitbox { flex: none; }
/* a rajzolt valogatottak kepe: az eredetin jobbra neznek, itt a jatekos fele */
.mirror { transform: scaleX(-1); }
.cupface .foeimg { width: 100%; height: 100%; object-fit: cover; }
/* A megvett/valogatott portre nem tolti ki a keretet: a kartya szeles, a kep
 * pedig negyzetes, ezert kifeszitve orias es levagott lenne. Megtartjuk az
 * aranyat, es a nevsav fole kozepre allitjuk. */
.dcard .dimg {
	display: block; margin: 10px auto 0;
	width: 140px; height: 140px;
	object-fit: contain;
}

.cupwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cupwho b { font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.cupnext {
	font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted);
}
.cupcard.boss .cupnext { color: var(--gold); }
.cupclub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.cuplvl { font-size: 12px; color: var(--gold); font-weight: 700; }

/* a gomb a doboz aljara tapad, hogy egy sorban alljanak */
.cupcard > .pbtn { margin-top: auto; }

/* a parbajkepernyon az ellenfel klubja a neve alatt, ugyanabban a savban */
.dclub {
	display: block; font-style: normal; font-size: 11px;
	color: #cfe0ff; opacity: .85; margin-top: 1px;
}

/* ---------------- team alapitas ---------------- */

.found-row { display: flex; gap: 10px; }
.found-row input { flex: 1; }

/* ---------------- karakterablak (SF-szeru elrendezes) ---------------- */

.char-wrap { max-width: 1080px; margin: 0 auto; }

.char-main {
	display: grid;
	grid-template-columns: auto minmax(280px, 1fr) auto auto;
	gap: 12px;
	align-items: start;
}
@container jatek (max-width: 1000px) {
	.char-main { grid-template-columns: auto 1fr auto; }
	.bagcol { grid-column: 1 / -1; margin-top: 12px; }
}

.ecol { display: flex; flex-direction: column; gap: 10px; }
.erow { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

.etile {
	position: relative;
	width: 82px; height: 82px;
	background: rgba(0, 0, 0, .3);
	border: 2px solid var(--gold-line);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: border-color .12s, transform .12s;
}
.etile:hover { border-color: var(--gold); transform: translateY(-2px); }
.etile.empty { cursor: default; border-color: var(--border); }
.etile.empty:hover { transform: none; border-color: var(--border); }
.etile.epic { border-color: #b06be0; box-shadow: inset 0 0 14px rgba(176, 107, 224, .25); }
.etile img { max-width: 74%; max-height: 74%; object-fit: contain; }
.etile.empty img { opacity: .22; }
.etile .eup {
	position: absolute; right: 3px; bottom: 2px;
	background: var(--green); color: #06210f;
	font-size: 10px; font-weight: 800;
	border-radius: 5px; padding: 0 4px;
}

/* tooltip */
.etile .etip {
	position: absolute; left: 50%; bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: 190px;
	background: rgba(8, 20, 26, .97);
	border: 1px solid var(--gold-line);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 12px; text-align: left;
	opacity: 0; pointer-events: none;
	transition: opacity .12s;
	z-index: 60;
}
.etile:hover .etip { opacity: 1; }

.ccenter { display: flex; flex-direction: column; }
.portrait {
	position: relative;
	border: 3px solid var(--gold-line);
	border-radius: 10px;
	background: linear-gradient(180deg, #1d4757, #102630);
	height: 244px;
	display: flex; align-items: center; justify-content: center;
}
.portrait .pface { font-size: 84px; opacity: .85; }
.portrait .pname2 {
	position: absolute; bottom: 10px; left: 0; right: 0;
	text-align: center; font-weight: 800; font-size: 19px;
	color: var(--gold); text-shadow: 0 2px 4px #000;
}
.portrait .pname2 span { font-size: 14px; color: var(--text); }
/* A zöld sávból annyi látszik, amennyi a szintből megvan. A töltetlen rész
 * sötét marad, hogy a felirat mindkét felén olvasható legyen. */
.lvlbar {
	position: relative;
	overflow: hidden;
	margin-top: 8px; height: 26px;
	border: 2px solid var(--gold-line); border-radius: 13px;
	background: #123a24;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 13px; color: #eafff1;
}

.lvlfill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: linear-gradient(90deg, #35c46b 0%, #2aa85b 100%);
	transition: width .5s ease;
}

.lvlbar > span {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 7px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.lvlpct { font-style: normal; font-size: 11px; opacity: .9; }

.bagcol { min-width: 262px; }
.baggrid { display: grid; grid-template-columns: repeat(4, 58px); gap: 6px; }

.statgrid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 10px; margin-top: 18px;
}
@container jatek (max-width: 620px) { .statgrid { grid-template-columns: 1fr; } }
.statcell {
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--border);
	border-radius: 9px; padding: 9px 12px;
}
.stopline { display: flex; align-items: center; gap: 10px; }
.stopline .sname { font-weight: 800; font-size: 13px; letter-spacing: .6px; flex: 1; }
.stopline .sval { font-weight: 800; font-size: 17px; color: var(--gold); font-variant-numeric: tabular-nums; }
.sbotline {
	display: flex; justify-content: space-between;
	font-size: 11px; color: var(--muted); margin-top: 2px;
}
.plusbtn {
	width: 26px; height: 26px; border-radius: 6px;
	background: var(--gold); color: #221a04;
	border: none; font-size: 17px; font-weight: 900; line-height: 1;
}
.plusbtn:hover { filter: brightness(1.12); }

.charfoot {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin-top: 16px; padding-top: 14px;
	border-top: 1px solid var(--border);
}
.fitem {
	display: flex; flex-direction: column; align-items: center;
	min-width: 74px; gap: 3px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border); border-radius: 8px;
	padding: 7px 9px; font-size: 11px; color: var(--muted);
}
.fitem .fico { font-size: 20px; }

/* ---------------- Kitman alkatresz-sav ---------------- */

.partbar { display: flex; gap: 12px; flex-wrap: wrap; }
.pchip {
	display: flex; align-items: center; gap: 8px;
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--gold-line);
	border-radius: 20px;
	padding: 7px 16px;
	font-size: 13px; color: var(--muted);
}
.pchip span { font-size: 17px; }
.pchip b { color: var(--gold); font-size: 15px; font-variant-numeric: tabular-nums; }

/* ---------------- fulek (mail, rankings) ---------------- */

.tabbar {
	display: flex; gap: 8px; flex-wrap: wrap;
	border-bottom: 1px solid var(--border);
	margin-bottom: 14px; padding-bottom: 10px;
}
.tab {
	background: var(--btn);
	border: 1px solid var(--border);
	border-radius: 8px 8px 0 0;
	color: var(--muted);
	font-size: 13px; font-weight: 700; letter-spacing: .5px;
	padding: 9px 16px;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--btn-hi); color: var(--gold); border-color: var(--gold-line); }
.tab .badge {
	background: var(--red); color: #fff;
	border-radius: 10px; padding: 0 6px;
	font-size: 11px; margin-left: 4px;
}

/* ---------------- levelirras ---------------- */

.compose { margin-top: 16px; }
.composebox {
	margin-top: 16px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--gold-line);
	border-radius: 10px;
	padding: 16px 18px;
	max-width: 640px;
}
.clabel {
	display: block; margin-bottom: 12px;
	font-size: 12px; color: var(--muted); letter-spacing: .5px;
}
.clabel input, .clabel textarea {
	display: block; margin-top: 5px; width: 100%;
	background: var(--side2);
	border: 1px solid var(--border); border-radius: 8px;
	color: var(--text); font-family: inherit; font-size: 14px;
	padding: 9px 11px; resize: vertical;
}
.clabel input:focus, .clabel textarea:focus { outline: none; border-color: var(--gold); }

.acwrap { position: relative; }
.acmenu {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #0c222b;
	border: 1px solid var(--gold-line); border-radius: 0 0 8px 8px;
	border-top: none;
	max-height: 210px; overflow-y: auto;
	z-index: 30;
}
.acmenu:empty { display: none; }
.acitem { padding: 8px 11px; font-size: 14px; cursor: pointer; }
.acitem:hover { background: var(--btn-hi); color: var(--gold); }

/* ---------------- rankings ---------------- */

.rankbar {
	display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
	margin-bottom: 14px;
}
.rankbar select {
	display: block; margin-top: 5px;
	background: var(--side2);
	border: 1px solid var(--border); border-radius: 8px;
	color: var(--text); font-family: inherit; font-size: 14px;
	padding: 8px 11px; min-width: 230px;
}
.rankbar select:focus { outline: none; border-color: var(--gold); }

.rflag { font-size: 16px; margin-right: 5px; }
.postag {
	display: inline-block; min-width: 30px; text-align: center;
	background: rgba(53, 196, 107, .15);
	border: 1px solid rgba(53, 196, 107, .45);
	border-radius: 5px; padding: 1px 5px;
	font-size: 11px; font-weight: 800; letter-spacing: .5px;
	color: var(--green);
}

/* ---------------- nemzetiseg-valaszto ---------------- */

.fitem.clickable { cursor: pointer; }
.fitem.clickable:hover { border-color: var(--gold-line); color: var(--text); }

.flaggrid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	max-height: 320px; overflow-y: auto;
	margin: 12px 0;
	text-align: left;
}
@media (max-width: 520px) { .flaggrid { grid-template-columns: 1fr; } }
.flagitem {
	display: flex; align-items: center; gap: 8px;
	padding: 7px 10px;
	border: 1px solid var(--border); border-radius: 7px;
	font-size: 13px; cursor: pointer;
}
.flagitem span { font-size: 18px; }
.flagitem:hover { background: var(--btn-hi); border-color: var(--gold-line); }
.flagitem.sel { border-color: var(--gold); color: var(--gold); }

/* ---------------- bajnoksag ---------------- */

.tstar {
	display: inline-block;
	background: rgba(240, 194, 64, .15);
	border: 1px solid var(--gold-line);
	border-radius: 10px;
	padding: 0 6px;
	font-size: 11px; font-weight: 800;
	color: var(--gold);
	vertical-align: middle;
}

.leaguehead {
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--gold-line);
	border-radius: 10px;
	padding: 14px 18px;
}
.leaguehead .lbig {
	font-size: 19px; font-weight: 800; color: var(--gold);
	letter-spacing: .5px;
}
.leaguehead .muted { font-size: 12px; color: var(--muted); margin-top: 2px; }

.rank-table.league td:nth-child(n+3) { text-align: center; }
.rank-table.league tr.zone-up   td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.rank-table.league tr.zone-down td:first-child { box-shadow: inset 3px 0 0 var(--red); }

.zonekey {
	display: flex; gap: 18px; align-items: center;
	margin-top: 8px; font-size: 11px; color: var(--muted);
}
.zk { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; }
.zk.up { background: var(--green); }
.zk.down { background: var(--red); }

.resultlist { display: flex; flex-direction: column; gap: 6px; }
.resrow {
	display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 12px;
	background: rgba(0, 0, 0, .22);
	border: 1px solid var(--border); border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
}
.resrow .rteam.h { text-align: right; }
.resrow .rscore {
	font-weight: 800; font-size: 15px; color: var(--gold);
	font-variant-numeric: tabular-nums;
	min-width: 56px; text-align: center;
}

/* ---------------- portre ---------------- */

.portraitbox { position: relative; overflow: hidden; }
.pcanvas {
	position: absolute; left: 0; top: 0;
	width: 500px; height: 500px;
	transform-origin: 0 0;
}
.pcanvas img { position: absolute; image-rendering: auto; }

.avatar .portraitbox { border-radius: 8px; }
.portrait .portraitbox { margin: 0 auto; }

.portraitframe {
	width: 260px; height: 260px;
	margin: 0 auto 10px;
	border: 3px solid var(--gold-line);
	border-radius: 10px;
	background: linear-gradient(180deg, #1d4757, #102630);
	overflow: hidden;
}

/* ---------------- karakterkeszito ---------------- */

.create-wrap {
	flex: 1;
	display: flex; align-items: flex-start; justify-content: center;
	background: url(assets/bg_night.png) center/cover;
	overflow-y: auto;
	padding: 24px 16px;
}
.create-box {
	width: min(100%, 900px);
	background: rgba(15, 40, 48, .95);
	border: 2px solid var(--gold-line);
	border-radius: 14px;
	padding: 26px 30px;
}
.create-box h1 { font-size: 22px; text-align: center; letter-spacing: 1px; margin-bottom: 20px; }
.create-box h1 span { color: var(--gold); }

.create-cols { display: grid; grid-template-columns: 300px 1fr; gap: 26px; }
@media (max-width: 780px) { .create-cols { grid-template-columns: 1fr; } }

.lookrows { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.lookrow {
	display: grid; grid-template-columns: 1fr auto auto;
	align-items: center; gap: 6px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border); border-radius: 7px;
	padding: 5px 6px 5px 11px;
	font-size: 12px; color: var(--muted);
}
.stepbtn {
	width: 28px; height: 26px;
	background: var(--btn); border: 1px solid var(--border); border-radius: 6px;
	color: var(--gold); font-size: 15px; font-weight: 800; line-height: 1;
}
.stepbtn:hover { background: var(--btn-hi); border-color: var(--gold-line); }

.pickrow { display: flex; gap: 8px; margin-bottom: 12px; }
.pickcol { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pick {
	background: var(--btn);
	border: 1px solid var(--border); border-radius: 8px;
	color: var(--text); font-family: inherit; font-size: 13px;
	padding: 9px 14px; text-align: left;
}
.pick:hover { background: var(--btn-hi); }
.pick.active { border-color: var(--gold); background: var(--btn-hi); }
.pick.wide { display: flex; flex-direction: column; gap: 2px; }
.pick.wide b { color: var(--gold); font-size: 13px; }
.pick.wide span { color: var(--muted); font-size: 11px; line-height: 1.35; }

.login-box .ghostbtn {
	background: none;
	border: 1px solid var(--border); border-radius: 8px;
	color: var(--muted);
	padding: 9px; font-size: 13px; font-weight: 700; letter-spacing: .5px;
}
.login-box .ghostbtn:hover { color: var(--gold); border-color: var(--gold-line); }

/* ---------------- targykepek ---------------- */

.ipic {
	position: relative;
	height: 86px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 6px;
}
.ipic img { max-height: 100%; max-width: 100%; object-fit: contain; position: relative; z-index: 1; }

/* Legendas targy: izzo, lelegzo hatter a kep mogott. */
.ipic.legend::before,
.etile.epic::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 86%; height: 86%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 226, 120, .95) 0%,
		rgba(255, 168, 32, .70) 34%,
		rgba(232, 96, 12, .34) 58%,
		rgba(232, 96, 12, 0) 74%);
	animation: emberglow 2.2s ease-in-out infinite;
	pointer-events: none;
}
.etile.epic::before { width: 92%; height: 92%; }
.etile.epic img { position: relative; z-index: 1; }

@keyframes emberglow {
	0%, 100% { opacity: .70; transform: translate(-50%, -50%) scale(.94); }
	50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* Ures szereleshely: a sajat kepbol keszult halvany sziluett. */
.etile.empty img { opacity: .24; filter: grayscale(1) brightness(1.5); }

/* ---------------- zaszlok (SVG, lasd flags.js) ---------------- */

svg.flag {
	display: inline-block;
	vertical-align: -.16em;
	border-radius: 2px;
	flex-shrink: 0;
}
.rflag { display: inline-block; margin-right: 6px; vertical-align: middle; }
.rflag svg.flag { vertical-align: middle; }

.flagselect { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.flagselect select {
	flex: 1;
	background: var(--side2);
	border: 1px solid var(--border); border-radius: 8px;
	color: var(--text); font-family: inherit; font-size: 14px;
	padding: 9px 11px;
}
.flagselect select:focus { outline: none; border-color: var(--gold); }

.flagitem svg.flag { margin-right: 2px; }
.fitem .fico svg.flag { vertical-align: middle; }

/* ---------------- stat tooltip es alapertek ---------------- */

.statcell { position: relative; }
.sval .sbase {
	font-size: 12px; font-weight: 600;
	color: var(--muted);
	margin-left: 4px;
}

.stattip {
	position: absolute; left: 50%; bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: 310px; max-width: 86cqw;
	background: rgba(8, 20, 26, .98);
	border: 1px solid var(--gold-line);
	border-radius: 9px;
	padding: 11px 13px;
	font-size: 12px; line-height: 1.45; text-align: left;
	opacity: 0; pointer-events: none;
	transition: opacity .12s;
	z-index: 80;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
.statcell:hover .stattip { opacity: 1; }
.stattip b { color: var(--gold); }
.stattip p { margin: 5px 0 9px; color: var(--text); }

.calcbox { border-top: 1px solid var(--border); padding-top: 7px; }
.calcbox div {
	display: flex; justify-content: space-between; gap: 12px;
	color: var(--muted); padding: 1px 0;
}
.calcbox div b { color: var(--text); font-variant-numeric: tabular-nums; }
.calcbox .calcsum {
	border-top: 1px solid var(--border);
	margin-top: 5px; padding-top: 5px;
}
.calcbox .calcsum b { color: var(--gold); }

/* ---------------- meccsstatisztika ---------------- */

.mstats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 8px;
}
.mstat {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-rows: auto auto;
	align-items: center; gap: 0 9px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border); border-radius: 9px;
	padding: 9px 12px;
}
.mstat .mico { font-size: 18px; grid-row: 1 / 3; }
.mstat .mval { font-size: 19px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.mstat .mlab { font-size: 12px; color: var(--text); }
.mstat .mcar { grid-column: 2 / 4; font-size: 10px; color: var(--muted); }

.pick.wide .tnum { color: var(--gold); font-size: 11px; margin-top: 2px; }

/* ---------------- karakterlap: tomorebb elrendezes (SF-szeru) ---------------- */

.char-wrap { max-width: 900px; }
.char-main { gap: 8px; }

/* kisebb szereleshelyek */
.ecol { gap: 6px; }
.erow { gap: 6px; margin-top: 6px; }
.etile { width: 58px; height: 58px; border-radius: 7px; border-width: 2px; }
.etile .eup { font-size: 9px; padding: 0 3px; }

/* kisebb portre */
.portrait { height: 178px; border-width: 2px; }
.portrait .pname2 { bottom: 6px; font-size: 15px; }
.portrait .pname2 span { font-size: 12px; }
.lvlbar { margin-top: 6px; height: 20px; font-size: 11px; }

/* a hatizsak a portre magassagahoz igazodik */
.baggrid .etile.locked {
	display: flex; align-items: center; justify-content: center;
	font-size: 19px;
	background: rgba(0, 0, 0, .38);
	border-style: dashed;
	border-color: var(--border);
	color: var(--muted);
	cursor: pointer;
}
.baggrid .etile.locked:hover {
	border-color: var(--gold);
	color: var(--gold);
	transform: none;
}

/* tomorebb statdobozok */
.statgrid { gap: 7px; margin-top: 12px; }
.statcell { padding: 6px 10px; border-radius: 8px; }
.stopline .sname { font-size: 11px; letter-spacing: .4px; }
.stopline .sval { font-size: 15px; }
.sval .sbase { font-size: 11px; }
.sbotline { font-size: 10px; }
.plusbtn { width: 22px; height: 22px; font-size: 15px; border-radius: 5px; }

/* tomorebb lablec */
.charfoot { margin-top: 12px; padding-top: 10px; gap: 7px; }
.fitem { min-width: 62px; padding: 5px 8px; font-size: 10px; }
.fitem .fico { font-size: 17px; }

.mstats { gap: 6px; }
.mstat { padding: 7px 10px; }
.mstat .mval { font-size: 16px; }
.mstat .mlab { font-size: 11px; }

/* finomhangolas: a negy oszlop egymas mellett, kozepre zarva */
.char-wrap { max-width: 780px; }
.char-main {
	grid-template-columns: auto auto auto auto;
	justify-content: center;
	gap: 10px;
}
.ccenter { width: 236px; }
@container jatek (max-width: 900px) {
	.char-main { grid-template-columns: auto auto auto; }
	.bagcol { grid-column: 1 / -1; justify-self: center; margin-top: 10px; }
}
.lvlbar { font-size: 11px; letter-spacing: .4px; }
.bagcol .sub { margin-bottom: 6px; }

/* ---------------- karakterlap v2: baloldalt a baba + statok, jobbra a taska ---------------- */

.char-main {
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: start;
	gap: 18px;
}
@container jatek (max-width: 780px) {
	.char-main { grid-template-columns: auto; }
	.bagcol { grid-column: auto; justify-self: center; }
}

.dollcol { display: flex; flex-direction: column; }
.dollrow { display: flex; gap: 8px; justify-content: center; }
.ccenter { width: 190px; }

/* a portre ne logjon ki a keretebol */
.portrait { height: 182px; overflow: hidden; }
.portrait .portraitbox { margin-top: 2px; }
/* a nyak es a mez ugyanugy a vaszonra van pozicionalva, mint a kepretegek */
.pjersey, .pneck { position: absolute; }

/* a statok pontosan a baba szelessegeben */
.dollcol .statgrid {
	grid-template-columns: 1fr 1fr;
	margin-top: 10px;
	width: 100%;
}
@container jatek (max-width: 480px) { .dollcol .statgrid { grid-template-columns: 1fr; } }

/* ---------------- targy-tooltip (SF-szeru) ---------------- */

.etip {
	position: absolute; left: 50%; bottom: calc(100% + 8px);
	transform: translateX(-50%);
	width: 236px;
	background: rgba(6, 16, 22, .98);
	border: 1px solid var(--gold-line);
	border-radius: 8px;
	padding: 0;
	font-size: 12px; text-align: left;
	opacity: 0; pointer-events: none;
	transition: opacity .12s;
	z-index: 90;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
}
.item { position: relative; }
.item:hover > .etip.card { opacity: 1; }

.itip { padding: 9px 11px; }
.itiphead {
	font-weight: 800; font-size: 13px; color: var(--gold);
	line-height: 1.25;
}
.itiphead.epic { color: #d79bff; }
.itipflav {
	color: #ffd76a; font-style: italic; font-size: 11.5px;
	line-height: 1.35; margin-top: 4px;
}
.itiptype {
	color: var(--muted); font-size: 11px;
	margin: 4px 0 6px;
	border-bottom: 1px solid var(--border); padding-bottom: 5px;
}
.itl {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 1px 0; color: var(--muted);
}
.itl b { color: var(--text); font-variant-numeric: tabular-nums; }
.itl.dmg b { color: var(--green); }
.itipfoot {
	border-top: 1px solid var(--border);
	margin-top: 6px; padding-top: 5px;
	font-size: 11px;
}
.itiphint {
	color: var(--muted); font-size: 10px;
	margin-top: 6px; text-align: center;
	border-top: 1px dashed var(--border); padding-top: 5px;
}

/* A tooltipek lefele nyilnak, kulonben a panel tetejen kilognak a semmibe. */
.etip,
.stattip {
	top: calc(100% + 8px);
	bottom: auto;
}

/* A lebego doboz kerüljön minden fole. A hoverkor kapott transform sajat
 * retegkontextust nyit, ezert magat a csempet kell feljebb emelni. */
.etile:hover,
.item:hover,
.statcell:hover { z-index: 200; }

/* A hatizsak jobb szelen befele nyiljon, kulonben levagja a panel szele. */
.baggrid .etip { left: auto; right: 0; transform: none; }
.ecol .etip     { left: 0; transform: none; }
.ecol:last-of-type .etip { left: auto; right: 0; }


/* Retegsorrend a karakterlapon, hogy a lebego dobozok mindig lathatok
 * legyenek: a baba sora legfelul, alatta a taska, majd a statok. */
.dollrow { position: relative; z-index: 6; }
.bagcol  { position: relative; z-index: 5; }
.dollcol .statgrid { position: relative; z-index: 4; }
.mstats  { position: relative; z-index: 3; }

/* A korabbi `.etile .etip` szabaly `bottom`-ot ad meg; ha csak a `top`-ot
 * irjuk felul, mindketto beallitva marad es osszelapul a doboz. Ezert
 * ugyanolyan eros valasztoval nullazzuk a `bottom`-ot is. */
.etile .etip,
.item .etip,
.statcell .stattip {
	top: calc(100% + 8px);
	bottom: auto;
	height: auto;
	width: 236px;
}

/* ---------------- felallas-szerkeszto ---------------- */

.formbar {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 12px; flex-wrap: wrap;
}
.fnav {
	width: 34px; height: 30px;
	background: var(--btn); border: 1px solid var(--border); border-radius: 7px;
	color: var(--gold); font-size: 14px;
}
.fnav:hover { background: var(--btn-hi); border-color: var(--gold-line); }
.fname {
	font-size: 20px; font-weight: 800; color: var(--gold);
	letter-spacing: 2px; min-width: 88px; text-align: center;
}
.fhint { font-size: 11px; flex: 1; min-width: 200px; }

.pitch {
	position: relative;
	width: 100%; max-width: 760px;
	aspect-ratio: 3 / 2;
	background: linear-gradient(90deg, #2f7d32 0%, #35893a 50%, #2f7d32 100%);
	border: 3px solid rgba(255, 255, 255, .75);
	border-radius: 10px;
	overflow: hidden;
}
.pitch .pline.mid {
	position: absolute; left: 50%; top: 0; bottom: 0;
	width: 2px; background: rgba(255, 255, 255, .55);
}
.pitch .pcircle {
	position: absolute; left: 50%; top: 50%;
	width: 22%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(255, 255, 255, .55);
	border-radius: 50%;
}
.pitch .pbox {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 13%; height: 46%;
	border: 2px solid rgba(255, 255, 255, .55);
}
.pitch .pbox.left  { left: 0; border-left: none; border-radius: 0 6px 6px 0; }
.pitch .pbox.right { right: 0; border-right: none; border-radius: 6px 0 0 6px; }

.pslot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 74px;
	text-align: center;
	cursor: pointer;
}
.pdisc {
	width: 40px; height: 40px; margin: 0 auto;
	border-radius: 50%;
	border: 3px solid #fff;
	background: #2b6ea8;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 800; color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.pdisc.small { width: 26px; height: 26px; border-width: 2px; font-size: 10px; }
.pdisc.fit-ok   { background: #2f8f4a; }
.pdisc.fit-mid  { background: #b98a1e; }
.pdisc.fit-bad  { background: #b04a35; }
.pdisc.fit-none { background: rgba(0, 0, 0, .35); border-style: dashed; }
.pslot.me .pdisc { border-color: var(--gold); }
.pslot:hover .pdisc { filter: brightness(1.15); }

.pname3 {
	font-size: 10px; font-weight: 700; color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
	margin-top: 2px; line-height: 1.15;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ppos {
	font-size: 9px; color: rgba(255, 255, 255, .8);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* ---------------- karakterlap v3: nagyobb, az eredeti meretehez igazitva ---------------- */

.char-wrap { max-width: 1060px; }
.char-main { gap: 24px; }

/* szereleshelyek */
.ecol { gap: 10px; }
.erow { gap: 10px; margin-top: 10px; }
.etile { width: 88px; height: 88px; border-radius: 9px; border-width: 2px; }
.etile .eup { font-size: 11px; padding: 0 5px; border-radius: 6px; }

/* portre */
.ccenter { width: 272px; }
.portrait { height: 262px; border-width: 3px; border-radius: 10px; }
.portrait .pname2 { bottom: 9px; font-size: 20px; }
.portrait .pname2 span { font-size: 15px; }
.lvlbar { margin-top: 9px; height: 28px; font-size: 13px; border-radius: 14px; }

/* statok - ket oszlop a baba teljes szelessegeben */
.dollcol .statgrid { gap: 10px; margin-top: 16px; }
.statcell { padding: 9px 14px; border-radius: 9px; }
.stopline { gap: 12px; }
.stopline .sname { font-size: 13px; letter-spacing: .7px; }
.stopline .sval { font-size: 20px; }
.sval .sbase { font-size: 13px; }
.sbotline { font-size: 11px; margin-top: 3px; }
.plusbtn { width: 30px; height: 30px; font-size: 19px; border-radius: 7px; }

/* hatizsak */
.bagcol { min-width: 392px; }
.baggrid { grid-template-columns: repeat(4, 88px); gap: 10px; }
.baggrid .etile.locked { font-size: 26px; }

/* lablec es statisztika */
.charfoot { margin-top: 16px; padding-top: 14px; gap: 10px; }
.fitem { min-width: 82px; padding: 8px 12px; font-size: 11px; }
.fitem .fico { font-size: 22px; }
.mstat { padding: 10px 14px; }
.mstat .mico { font-size: 20px; }
.mstat .mval { font-size: 20px; }
.mstat .mlab { font-size: 12px; }

@container jatek (max-width: 1000px) {
	.char-main { grid-template-columns: auto; }
	.bagcol { justify-self: center; margin-top: 14px; }
}

/* ---------------- betutipusok ---------------- */

@font-face {
	font-family: "Baloo";
	src: url(assets/fonts/baloo-2-latin.woff2) format("woff2");
	font-weight: 400 800;
	font-display: swap;
}
@font-face {
	font-family: "Bungee";
	src: url(assets/fonts/bungee-latin.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "LuckiestGuy";
	src: url(assets/fonts/luckiest-guy-latin.woff2) format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--f-body:    "Baloo", "Segoe UI", system-ui, sans-serif;
	--f-display: "Bungee", "Baloo", "Segoe UI", sans-serif;
	--f-title:   "LuckiestGuy", "Bungee", "Segoe UI", sans-serif;
}

body, button, input, select, textarea { font-family: var(--f-body); }

/* Vastag, "táblás" felirat: panelcimek, menu, szekciok, statnevek */
.panel-head h2,
.menu-btn,
h3.sub,
.stopline .sname,
.lvlbar,
.fname,
.leaguehead .lbig,
.tab,
.postag,
.pdisc {
	font-family: var(--f-display);
	letter-spacing: .5px;
}
/* A Bungee alapbol is nagybetus hatasu, ezert nem kell extra vastagsag */
.panel-head h2, .menu-btn, h3.sub, .stopline .sname, .lvlbar, .tab { font-weight: 400; }

/* Jatek-logo es a felugro ablakok cime */
.login-box h1,
.create-box h1,
.reward-box h2 {
	font-family: var(--f-title);
	letter-spacing: 1px;
	font-weight: 400;
}

/* A szamok maradjanak jol olvashatoak es azonos szelesseguek */
.sval, .mval, .pres b, .pchip b, .rank-table td { font-variant-numeric: tabular-nums; }

/* ---------------- karakterlap fulek ---------------- */

.chartabs {
	margin-top: 16px; margin-bottom: 12px;
	padding-bottom: 8px;
	gap: 6px;
}
.chartabs .tab { padding: 8px 16px; font-size: 12px; }

.charpane { width: 100%; }
.charpane .clabel { margin-bottom: 10px; }
.charpane textarea { min-height: 150px; }
.charpane .btn-row { align-items: center; gap: 12px; }
.charpane .mstats { grid-template-columns: repeat(2, 1fr); }
.charpane h3.sub { margin-top: 0 !important; }

/* A lablec (ital, jarmu, presztizs) a baba oszlopaban marad, tobb sorban,
 * hogy semmikepp ne csusszon a hatizsak ala. */
.dollcol .charfoot {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
	width: 100%;
}
.dollcol .charfoot .fitem { min-width: 0; }

/* ---------------- targy-osszehasonlitas ---------------- */

.itipcmp { display: flex; }
.itipcmp .itip { flex: 1; min-width: 0; }
.itipcmp .itip.equipped {
	border-left: 1px solid var(--border);
	background: rgba(255, 255, 255, .035);
}
.cmplabel {
	font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
	color: var(--muted); margin-bottom: 4px;
}
.idiff { font-size: 11px; font-weight: 800; margin-left: 5px; }
.idiff.up   { color: var(--green); }
.idiff.down { color: var(--red); }

/* osszehasonlitaskor ketszer olyan szeles a doboz */
.etile .etip:has(.itipcmp),
.item  .etip:has(.itipcmp) { width: 452px; }

/* ---------------- kattinthato csapatnev ---------------- */

.teamlink {
	cursor: pointer;
	border-bottom: 1px dotted currentColor;
}
.teamlink:hover { color: var(--gold); }
.portrait .pname2 .teamlink { border-bottom-color: rgba(255, 255, 255, .35); }

/* Amelyik oszlop folott all az eger, az kerul felulre - kulonben a baba
 * eltakarja a hatizsak lebego dobozat es forditva. */
.dollrow:hover,
.bagcol:hover { z-index: 20; }

/* Az osszehasonlito doboz ket panelje kicsit keskenyebb, hogy elferjen. */
.etile .etip:has(.itipcmp),
.item  .etip:has(.itipcmp) { width: 420px; }
.itipcmp .itip { padding: 9px 10px; }

/* ---------------- klubfejlesztesek ---------------- */

.buildgrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}
.build {
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border); border-radius: 10px;
	padding: 12px 14px;
	display: flex; flex-direction: column; gap: 6px;
}
.build.maxed { border-color: var(--gold-line); }
.bhead { display: flex; align-items: center; gap: 10px; }
.bico { font-size: 26px; }
.bname { font-weight: 800; font-size: 14px; color: var(--gold); }
.blvl { font-size: 11px; color: var(--muted); }
.bdescr { font-size: 11px; color: var(--muted); line-height: 1.35; }
.bfx { font-size: 12px; }
.bfx.now  { color: var(--text); }
.bfx.next { color: var(--green); font-size: 11px; }
.bbar {
	height: 6px; border-radius: 3px; overflow: hidden;
	background: rgba(0, 0, 0, .45);
	margin: 2px 0 4px;
}
.bbar div { height: 100%; background: var(--gold); transition: width .3s; }
.bbtn { margin-top: auto; font-size: 13px; }

.donaterow {
	display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
	margin-bottom: 6px;
}
.donaterow .clabel { margin: 0; }
.donaterow input { width: 150px; }

/* ---------------- rangado ---------------- */

.raidempty { text-align: center; padding: 26px 20px; }
.raidempty .rbig { font-size: 54px; }
.raidempty h3 { font-size: 18px; color: var(--gold); margin: 8px 0; }
.raidempty p { max-width: 520px; margin: 0 auto 14px; line-height: 1.5; font-size: 13px; }

.raidhead {
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--gold-line); border-radius: 10px;
	padding: 16px 18px;
}
.raidhead .rname {
	font-family: var(--f-display);
	font-size: 20px; color: var(--gold); text-align: center; margin-bottom: 10px;
}
.rhpbar {
	position: relative;
	height: 26px; border-radius: 13px; overflow: hidden;
	background: rgba(0, 0, 0, .55);
	border: 1px solid var(--border);
}
.rhpbar div {
	height: 100%;
	background: linear-gradient(90deg, #e05555, #ff8a4c);
	transition: width .4s;
}
.rhpbar span {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
	font-variant-numeric: tabular-nums;
}
.rmeta {
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	margin-top: 8px; font-size: 12px; color: var(--muted);
}

.raidlog { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.rline2 {
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border); border-radius: 7px;
	padding: 6px 12px; font-size: 13px;
}
.rline2 b { color: var(--gold); }
.rline2.crit { border-color: var(--gold-line); }
.rline2.crit b { color: #ffd76a; }

/* ---------------- panel-hatterkepek ---------------- */

.panel.hasbg { position: relative; }
.panel.hasbg::before {
	content: "";
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	background-attachment: local;
	opacity: .30;
	pointer-events: none;
	z-index: 0;
}
/* sotet fatyol, hogy a szoveg biztosan olvashato maradjon */
.panel.hasbg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(13, 26, 32, .55) 0%,
		rgba(13, 26, 32, .78) 45%,
		rgba(13, 26, 32, .92) 100%);
	pointer-events: none;
	z-index: 0;
}
.panel.hasbg > * { position: relative; z-index: 1; }

/* A kepeket a tools/gen_backgrounds.py keszíti; a fajlnev a panelt jeloli. */
.panel.bg-team::before  { background-image: url(assets/bg/team.jpg); }
.panel.bg-coach::before { background-image: url(assets/bg/coach.jpg); }
.panel.bg-train::before { background-image: url(assets/bg/train.jpg); }

/* ---------------- kuldetes bevezeto ---------------- */

.qintro {
	font-size: 12px; line-height: 1.45;
	color: var(--muted);
	font-style: italic;
	min-height: 52px;
	margin-bottom: 2px;
}

/* ---------------- jutalomtargy a kuldetes vegen ---------------- */

.rewitem {
	background: rgba(0, 0, 0, .32);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 14px 16px 12px;
	margin: 12px 0 6px;
	text-align: center;
}
.rewitem.epic { border-color: #b06be0; }
/* negyzetes kepdoboz, hogy a legendas izzas kor alaku maradjon */
.rewitem .ipic {
	width: 104px; height: 104px;
	margin: 0 auto 8px;
}
.riname { font-weight: 800; font-size: 15px; color: var(--gold); }
.rewitem.epic .riname { color: #d79bff; }
.rewitem .itipflav { text-align: center; margin: 4px auto 0; max-width: 320px; }
.ritype {
	font-size: 11px; color: var(--muted);
	margin: 4px 0 8px; padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
}
/* soronkent egy ertek, balra a nev, jobbra a szam */
.rewitem .itiprows {
	max-width: 300px; margin: 0 auto;
	text-align: left; font-size: 13px;
}

/* kuldeteskartya: jar-e felszereles */
.qrow.qitem b { color: var(--green); }

/* ---------------- ugynok: szerzodesek ---------------- */

.offergrid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 14px;
}
.offer {
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--border); border-radius: 10px;
	padding: 14px 16px;
	display: flex; flex-direction: column; gap: 9px;
}
.offer:hover { border-color: var(--gold-line); }
.ohead, .contracthead { display: flex; align-items: center; gap: 12px; }
.cico { font-size: 30px; }
.cname {
	font-family: var(--f-display);
	font-size: 15px; color: var(--gold); letter-spacing: .5px;
}
.odays { font-size: 12px; color: var(--muted); }
.odescr { font-size: 12px; color: var(--muted); line-height: 1.4; min-height: 34px; }

.contracthead {
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--gold-line); border-radius: 10px;
	padding: 14px 18px; margin-bottom: 14px;
}
.contracthead .cname { font-size: 19px; }
.cprog { font-size: 13px; color: var(--green); margin-top: 3px; font-weight: 700; }

/* Az agent napjai csempekent: soronkent annyi fer ki, amennyi elfer. */
.daygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; margin-top: 4px; }
.daygrid.small { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.daytile {
	background: rgba(0, 0, 0, .22);
	border: 1px solid var(--border); border-radius: 9px;
	padding: 8px 6px; text-align: center; position: relative;
}
.daytile .dtnum {
	width: 22px; height: 22px; line-height: 21px; margin: 0 auto 5px;
	border-radius: 50%; background: rgba(255, 255, 255, .08);
	font-weight: 800; font-size: 12px; color: var(--muted);
}
.daytile .dtrew { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.dtbit { font-size: 11px; color: var(--text); white-space: nowrap; }
.daygrid.small .dtbit { font-size: 10px; }
.daygrid.small .daytile { padding: 6px 4px; }
.daygrid.small .dtnum { width: 18px; height: 18px; line-height: 17px; font-size: 10.5px; margin-bottom: 3px; }
.daytile.done { opacity: .55; }
.daytile.done .dtnum { color: var(--green); }
.daytile.next { border-color: var(--gold); background: rgba(240, 194, 64, .10); }
.daytile.next .dtnum { background: var(--gold); color: #221a04; }
.daytile.last { border-color: rgba(176, 107, 224, .55); }
.daytile.last .dtnum { color: #d79bff; }
.dttag { margin-top: 5px; font-size: 9px; letter-spacing: .4px; text-transform: uppercase; color: var(--gold); font-weight: 700; }

.ototal {
	border-top: 1px solid var(--border);
	padding-top: 8px; margin-top: auto;
	font-size: 12px; color: var(--gold);
}
.panel.bg-agent::before { background-image: url(assets/bg/agent.jpg); }

/* ---------------- labdas parbaj ---------------- */

.fight-box.duel { max-width: 720px; }
.duelrow {
	display: grid; grid-template-columns: 1fr minmax(120px, 1.4fr) 1fr;
	align-items: center; gap: 12px;
	margin-bottom: 14px;
}
.duelside { text-align: center; }
.duelside .fname {
	font-family: var(--f-display);
	font-size: 14px; color: var(--gold); letter-spacing: .4px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duelside .fpos { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.duelside .hpnum { font-size: 11px; color: var(--muted); margin-top: 3px; }
.duelside .hpnum span { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* a palya sav a ket jatekos kozott */
.pitchstrip {
	position: relative;
	height: 74px;
	border-radius: 8px;
	background:
		repeating-linear-gradient(90deg,
			#2f7d32 0 22px, #34893a 22px 44px);
	border: 2px solid rgba(255, 255, 255, .5);
	overflow: hidden;
}
.pitchstrip .midline {
	position: absolute; left: 50%; top: 0; bottom: 0;
	width: 2px; background: rgba(255, 255, 255, .5);
}
.pitchstrip .goalpost {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 10px; height: 40px;
	border: 2px solid rgba(255, 255, 255, .75);
}
.pitchstrip .goalpost.left  { left: 0;  border-left: none;  border-radius: 0 5px 5px 0; }
.pitchstrip .goalpost.right { right: 0; border-right: none; border-radius: 5px 0 0 5px; }

.pitchstrip .ball {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 22px; line-height: 1;
	transition: left .34s cubic-bezier(.32, .9, .4, 1);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
/* rugas: porog es kicsit ivel */
.pitchstrip .ball.kick { animation: ballkick .34s ease-out; }
@keyframes ballkick {
	0%   { transform: translate(-50%, -50%) rotate(0deg); }
	50%  { transform: translate(-50%, -128%) rotate(280deg); }
	100% { transform: translate(-50%, -50%) rotate(540deg); }
}

.fline.crit  { border-left: 3px solid var(--gold); }
.fline.block { opacity: .75; }
.fline .fdmg { color: var(--red); font-weight: 800; }
.fline.crit .fdmg { color: #ffd76a; }

/* ---------------- szintlepes ---------------- */

.overlay.levelup { z-index: 4000; }
.lvlbox {
	background: linear-gradient(180deg, #1d4757, #0f2830);
	border: 3px solid var(--gold);
	border-radius: 16px;
	padding: 26px 40px 24px;
	text-align: center;
	box-shadow: 0 0 60px rgba(240, 194, 64, .35);
	animation: lvlpop .35s cubic-bezier(.2, 1.3, .5, 1);
}
@keyframes lvlpop {
	from { transform: scale(.7); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}
.lvlspark { font-size: 46px; animation: lvlspin 2.4s linear infinite; }
@keyframes lvlspin {
	0%, 100% { transform: rotate(-12deg) scale(1); }
	50%      { transform: rotate(12deg) scale(1.12); }
}
.lvlbox h2 {
	font-family: var(--f-title);
	font-size: 28px; color: var(--gold);
	letter-spacing: 1px; margin: 4px 0 10px;
}
.lvlnums {
	font-family: var(--f-display);
	font-size: 30px; margin-bottom: 12px;
}
.lvlnums .old { color: var(--muted); }
.lvlnums .new { color: var(--green); }
.lvlbox p { font-size: 13px; line-height: 1.5; margin-bottom: 16px; }

/* ---------------- team oldal: negy blokk ---------------- */

.teamgrid {
	display: grid;
	grid-template-columns: minmax(340px, 1fr) minmax(300px, 1fr);
	gap: 14px;
	align-items: start;
	max-width: 1180px;
}
@container jatek (max-width: 980px) { .teamgrid { grid-template-columns: 1fr; } }

.tcol {
	background: rgba(0, 0, 0, .34);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 14px 16px;
}
.tcol h3.sub { margin-top: 0; }

/* --- klubkartya --- */
.clubtop { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.clubname {
	font-family: var(--f-display);
	font-size: 18px; color: var(--gold); letter-spacing: .5px;
}
.clubrows {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 2px 14px;
	font-size: 12px;
	margin-bottom: 12px;
}
.clubrows div {
	display: flex; justify-content: space-between; gap: 10px;
	padding: 3px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.clubrows span { color: var(--muted); }
.clubrows b { color: var(--text); font-variant-numeric: tabular-nums; }

/* --- fejlesztesek egy oszlopban --- */
.buildcol { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.buildrow {
	display: grid; grid-template-columns: auto 1fr auto;
	align-items: center; gap: 10px;
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border); border-radius: 8px;
	padding: 7px 10px;
}
.buildrow.maxed { border-color: var(--gold-line); }
.buildrow .bico { font-size: 20px; }
.buildrow .bname { font-size: 12px; font-weight: 700; color: var(--gold); }
.buildrow .bfx { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.buildrow .bbar { height: 4px; margin-top: 3px; }
.buildrow .bbtn { font-size: 11px; padding: 5px 9px; white-space: nowrap; }

/* --- mini palya a felallashoz --- */
.pitch.mini { aspect-ratio: 3 / 2; border-width: 2px; margin-bottom: 10px; }
.pitch.mini .pslot { width: 34px; }
.pitch.mini .pdisc.small { width: 24px; height: 24px; font-size: 9px; border-width: 2px; }

/* --- oltozo (chat) --- */
.chatbox {
	height: 210px; overflow-y: auto;
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 8px;
	padding: 8px 10px;
	display: flex; flex-direction: column; gap: 3px;
	font-size: 12px;
}
.chatline { line-height: 1.4; }
.chatline .ctime { color: var(--muted); font-size: 10px; margin-right: 5px; }
.chatline b { color: var(--gold); }
.chatline.me b { color: var(--green); }
.chatline.sys { color: var(--muted); font-style: italic; }
.chatline.sys b { color: #8fd0e0; font-style: normal; }

.chatsend { display: flex; gap: 8px; margin-top: 8px; }
.chatsend input { flex: 1; }
.chatsend .pbtn { padding: 8px 14px; }

/* --- keret tomorebben --- */
.rank-table.compact th, .rank-table.compact td { padding: 5px 8px; font-size: 12px; }
.rank-table.compact select {
	background: var(--side2); color: var(--text);
	border: 1px solid var(--border); border-radius: 6px;
	font-family: inherit; font-size: 11px; padding: 2px 5px;
}

.descbox {
	background: rgba(0, 0, 0, .25);
	border: 1px solid var(--border); border-radius: 8px;
	padding: 10px 12px;
	font-size: 12px; line-height: 1.5; color: var(--text);
}

/* --- mez --- */
.kitsvg { display: block; flex-shrink: 0; }
.kitpreview { display: flex; justify-content: center; margin: 8px 0; }
.kitcolors { display: flex; gap: 18px; justify-content: center; margin: 10px 0; }
.kitcolors input[type=color] {
	width: 60px; height: 34px; padding: 2px;
	background: var(--side2); border: 1px solid var(--border); border-radius: 7px;
}
.reward-box textarea {
	width: 100%; background: var(--side2);
	border: 1px solid var(--border); border-radius: 8px;
	color: var(--text); font-family: inherit; font-size: 14px;
	padding: 10px; resize: vertical; margin-top: 8px;
}

/* ---------------- uj panel-hatterek ---------------- */

.panel.bg-clothing::before { background-image: url(assets/bg/clothing.jpg); }
.panel.bg-grocery::before  { background-image: url(assets/bg/grocery.jpg); }
.panel.bg-vehicle::before  { background-image: url(assets/bg/vehicle.jpg); }

/* ---------------- jarmuvek ---------------- */

.item-grid.vehicles { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.item.vehicle { text-align: center; }
.vpic {
	height: 120px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 6px;
}
.vpic img { max-height: 100%; max-width: 100%; object-fit: contain; }
.item.vehicle.epic .vpic img { filter: drop-shadow(0 0 12px rgba(240, 194, 64, .55)); }
.vdescr {
	font-size: 11px; color: var(--muted);
	line-height: 1.35; margin: 4px 0 6px; min-height: 30px;
}

/* a karakterlap lablecben a berelt jarmu sajat ikonja */
.fitem .fico .vico,
.fitem .fico img.vico { width: 26px; height: 26px; display: block; object-fit: contain; }

/* ---------------- kuldetes jutalomtargya a kartyan ---------------- */

.qprize {
	position: relative;
	display: grid; grid-template-columns: auto 1fr;
	align-items: center; gap: 10px;
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 9px;
	padding: 8px 10px;
	margin: 6px 0 2px;
}
.qprize.epic { border-color: #b06be0; }
.qpic {
	position: relative;
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
}
.qpic img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; }
/* legendas darabnal ugyanaz a parazs, mint mashol */
.qpic.legend::before {
	content: "";
	position: absolute; left: 50%; top: 50%;
	width: 86%; height: 86%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(255, 226, 120, .95) 0%, rgba(255, 168, 32, .70) 34%,
		rgba(232, 96, 12, .34) 58%, rgba(232, 96, 12, 0) 74%);
	animation: emberglow 2.2s ease-in-out infinite;
}
.qpname { font-size: 12px; font-weight: 800; color: var(--gold); line-height: 1.2; }
.qprize.epic .qpname { color: #d79bff; }
.qptype { font-size: 10px; color: var(--muted); margin-bottom: 3px; }
.qprize .istats { gap: 4px; }
.quest { position: relative; }
.qprize:hover > .etip { opacity: 1; }
.qprize .etip { left: 0; transform: none; }

/* a kuldeteskartya jutalomdoboza is szelesebb, ha osszehasonlit */
.qprize .etip { width: 236px; }
.qprize .etip:has(.itipcmp) { width: 420px; }

/* ---------------- bolt: bal oldalt a karakter, jobbra az aru ---------------- */

.shopgrid {
	display: grid;
	grid-template-columns: auto minmax(320px, 1fr);
	gap: 22px;
	align-items: start;
}
@container jatek (max-width: 940px) {
	.shopgrid { grid-template-columns: 1fr; }
	.shopleft { justify-self: center; }
}








.shopright .item-grid.shop {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

/* ---------------- stat-cimkek a kartyakon ---------------- */

.qpstats { display: flex; flex-direction: column; gap: 1px; }
.schip {
	display: flex; justify-content: space-between; gap: 10px;
	font-size: 11px; color: var(--muted);
	line-height: 1.45;
}
.schip b { color: var(--text); font-variant-numeric: tabular-nums; }
.schip.dmg b { color: var(--green); }

/* A bolti kartyak lebego doboza befele nyiljon, kulonben vizszintes
 * gorgetosav jelenik meg a panel aljan. */
.shopright .item .etip { left: auto; right: 0; transform: none; }

/* ---------------- bolt v2: 8x4 taska, 3x2 aru ---------------- */

/* A bolt a Player lap meretezeset hasznalja - nincs sajat csempemeret. */
.shopleft { width: auto; }
.shopleft .baggrid { grid-template-columns: repeat(8, 88px); gap: 10px; }

/* balra igazitva, ahogy a Player lapon is */
.shopgrid {
	grid-template-columns: auto minmax(260px, 1fr);
	justify-content: start;
	gap: 26px;
}
.shopleft .dollrow { justify-content: flex-start; }

/* az aru: harom oszlop, ket sor - csak a kep es a gomb */
.goodsgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.good {
	position: relative;
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 10px;
	padding: 10px;
	display: flex; flex-direction: column; gap: 8px;
	align-items: center;
}
.good.epic { border-color: #b06be0; }
.good:hover { border-color: var(--gold-line); }
.good .ipic { width: 92px; height: 92px; margin: 0; }
.good .pbtn { width: 100%; font-size: 13px; padding: 7px; }
.good:hover > .etip { opacity: 1; }
.good .etip { left: auto; right: 0; transform: none; }

@container jatek (max-width: 1240px) {
	.shopleft .baggrid { grid-template-columns: repeat(4, 88px); }
}

/* ---------------- a Player lap is balra igazitva, mint a bolt ---------------- */

.char-wrap { max-width: none; }
.char-main { justify-content: start; gap: 26px; }
.dollrow { justify-content: flex-start; }

/* ---------------- lebego dobozok: soha ne csusszanak ki ---------------- */

/* Egyseges szelesseg mindenhol; az osszehasonlito valtozat szelesebb. */
.etile .etip,
.item .etip,
.good .etip,
.qprize .etip { width: 236px; }
.etile .etip:has(.itipcmp),
.item  .etip:has(.itipcmp),
.good  .etip:has(.itipcmp),
.qprize .etip:has(.itipcmp) { width: 420px; }

/* A racs elso ket oszlopaban jobbra nyilik (nem ki a menu ala), az utolso
 * ketto oszlopban balra - igy mindig a panelen belul marad. */
.baggrid .etile:nth-child(8n+1) .etip,
.baggrid .etile:nth-child(8n+2) .etip,
.baggrid .etile:nth-child(8n+3) .etip { left: 0; right: auto; transform: none; }
.baggrid .etile:nth-child(8n+6) .etip,
.baggrid .etile:nth-child(8n+7) .etip,
.baggrid .etile:nth-child(8n) .etip { left: auto; right: 0; transform: none; }

/* a bal oldali szerelesoszlop dobozai is jobbra nyilnak */
.dollrow .ecol:first-child .etip { left: 0; right: auto; transform: none; }
.dollrow .ecol:last-child  .etip { left: auto; right: 0; transform: none; }


/* ---------------- Grocery: aktiv hatasok ---------------- */

.grocactive { display: grid; gap: 8px; }
.gactive {
	display: flex; align-items: center; gap: 10px;
	background: rgba(0, 0, 0, .32);
	border: 1px solid var(--border); border-radius: 10px;
	padding: 8px 10px;
	min-height: 56px;
}
.gactive img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.gactive b { font-size: 13px; }
.gactive .muted { font-size: 11px; line-height: 1.35; }
.gactive .gleft { font-size: 11px; color: var(--gold); }
.gactive.empty { justify-content: center; border-style: dashed; opacity: .55; }

/* a Grocery keszlete soronkent egy-egy hataskor */
.grocactive + .sub { margin-top: 16px; }


/* ---------------- fogd-es-vidd a csempek kozott ---------------- */

.etile[draggable="true"] { cursor: grab; }
.etile.dragging { opacity: .35; }
.etile.dropok {
	border-color: var(--gold);
	box-shadow: 0 0 0 2px var(--gold) inset, 0 0 12px rgba(240, 194, 64, .45);
}
/* huzas kozben a lebego doboz csak utban van */
.etile.dragging .etip, .etile.dropok .etip { display: none; }

.warn { color: #e8a33d; }


/* Grocery: lapozo a polc alatt */
.gpager { justify-content: center; align-items: center; gap: 14px; margin-top: 14px; }
.gpager .pbtn { padding: 6px 16px; font-size: 16px; line-height: 1; }
.gpage { font-family: 'Bungee', sans-serif; font-size: 13px; color: var(--gold); }

/* a kuldeteskartya jutalma: csak a kep, a doboz akkora, mint a kep */
.qprize.solo {
	display: inline-flex; padding: 6px;
	align-self: flex-start; width: max-content;
}
.qprize.solo .qpic { width: 72px; height: 72px; }


/* ---------------- karakterlap v3: bal oldalt a baba + taska, jobbra a fulek ---------------- */

.char-main {
	grid-template-columns: auto minmax(300px, 1fr);
	justify-content: start;
	align-items: start;
	gap: 26px;
}
.dollcol { min-width: 0; }
.tabcol  { min-width: 0; }

/* a taska ugyanugy nyolc oszlop, mint a boltban */
.dollcol .baggrid { grid-template-columns: repeat(8, 88px); gap: 10px; }
.dollcol .sub { margin-bottom: 8px; }

/* a fulek a jobb oszlop tetejen kezdodnek */
.tabcol .chartabs { margin-top: 0; }
.tabcol .statgrid { grid-template-columns: 1fr 1fr; margin-top: 0; width: 100%; }
@container jatek (max-width: 620px) { .tabcol .statgrid { grid-template-columns: 1fr; } }

/* a lablec mar nem a baba oszlopaban van, igy sima sorba rendezodik */
.tabcol .charfoot {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin-top: 16px; padding-top: 14px;
}

@container jatek (max-width: 1240px) {
	.dollcol .baggrid { grid-template-columns: repeat(4, 88px); }
}
@container jatek (max-width: 1000px) {
	.char-main { grid-template-columns: auto; }
}

/* ----------------------------------------------------------------
   Karakterlap telefonon: a baba mellett jobbra alljanak a fulek, kulonben
   a jobb fele uresen marad, es a statokig le kell tekerni.
   ---------------------------------------------------------------- */
.mobile-ui .char-main {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
}
.mobile-ui .char-wrap { max-width: none; }

/* a taska a baba alatt, negy oszlopban */
.mobile-ui .dollcol .baggrid { grid-template-columns: repeat(4, 56px); gap: 6px; }
.mobile-ui .dollcol .sub { margin-top: 10px !important; font-size: 13px; }

/* a jobb hasab tomorebben: kisebb fulek es egy hasabnyi stat */
.mobile-ui .tabcol .chartabs { gap: 4px; }
.mobile-ui .tabcol .chartabs .tab { padding: 7px 10px; font-size: 11px; }
.mobile-ui .tabcol .statgrid { grid-template-columns: 1fr; gap: 6px; }
.mobile-ui .tabcol .charfoot { gap: 6px; margin-top: 10px; padding-top: 10px; }
.mobile-ui .tabcol .charfoot .fitem { font-size: 11px; padding: 5px 8px; }

/* Ha a keszulek fekvoben is szuk, inkabb egymas ala. */
.mobile-ui.jw-700 .char-main { grid-template-columns: auto; }


/* ---------------- Grocery: fogyasztas kattintassal / huzassal ---------------- */

.good { cursor: pointer; }
.good.dragging { opacity: .4; }
/* a karakter blokkja a celpont: ide huzva fogyaszt */
.ccenter { border-radius: 12px; transition: box-shadow .12s; }
.ccenter.dropok { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(240, 194, 64, .5); }

/* az aktiv hatas a lablecben lekattinthato */
.fitem.potitem { cursor: pointer; }
.fitem.potitem:hover { border-color: var(--gold-line); }


/* ---------------- kartyagombok: mindig a doboz aljan ---------------- */

/* A dobozok egy racs soraban egyforma magasak; a tartalom felul kezdodik,
 * a sarga gomb pedig lent zar - igy nem ugral soronkent kulon-kulon. */
.quest, .item, .good, .offer { height: 100%; }

.quest > .pbtn,
.offer > .pbtn,
.offer > .btn-row,
.item > .pbtn:not(.dbtn),
.item > .muted,
.good > .pbtn { margin-top: auto; }

/* ahol ket gomb van (Kitman), a paros egyben csuszik le */
.item > .ibtn + .dbtn { margin-top: 6px; }

/* a kep ne nyuljon szet, csak a gomb elotti hely */
.good { justify-content: flex-start; }
.good .ipic { flex: none; }


/* ---------------- 1v1: ellenfelek keppel es statokkal ---------------- */

.arenagrid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px; align-items: start;
}
.acard {
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 12px;
	padding: 12px;
	display: flex; flex-direction: column; gap: 10px;
	height: 100%;
}
.acard:hover { border-color: var(--gold-line); }

.aportrait {
	position: relative; overflow: hidden;
	border: 2px solid var(--gold-line); border-radius: 9px;
	background: rgba(0, 0, 0, .35);
	height: 220px; cursor: pointer;
	/* a portre vizszintesen kozepen alljon, barmilyen szeles a kartya */
	display: flex; justify-content: center;
}
.aportrait .portraitbox { flex: none; }
.aportrait .pname2 {
	position: absolute; left: 0; right: 0; bottom: 6px;
	padding: 0 8px;
	text-align: center; font-family: var(--f-display);
	font-size: 13px; line-height: 1.25; color: var(--gold);
	text-shadow: 0 2px 4px #000, 0 0 8px #000;
	/* a hosszu nev inkabb toressen, mint kilogjon */
	overflow-wrap: anywhere;
}
.aportrait .alvl { color: #fff; font-size: 11px; margin-top: 2px; }

/* a savon a jatekos osszesitett ereje */
.abar {
	position: relative; height: 22px; border-radius: 6px;
	border: 1px solid var(--gold-line);
	background: linear-gradient(180deg, #2a0f12, #4a1417);
	overflow: hidden;
}
.abar span {
	position: absolute; left: 0; top: 0; bottom: 0;
	background: linear-gradient(180deg, #d0342c, #8f1d18);
}
.abar b {
	position: relative; display: block; text-align: center;
	font-family: var(--f-display); font-size: 12px; line-height: 20px;
	color: #fff; text-shadow: 0 1px 2px #000;
}
.apos { font-size: 11px; color: var(--muted); text-align: center; }

.astats { display: flex; flex-direction: column; gap: 2px; }
.arow {
	display: flex; justify-content: space-between; gap: 10px;
	font-size: 12px; color: var(--muted);
	padding: 3px 2px;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.arow b { color: #e7edf5; font-weight: 700; }
.arow.better b { color: var(--green); }
.arow.worse  b { color: var(--red); }
.acard > .pbtn { margin-top: auto; }


/* a Grocery polcan a mar futo hatasu szer tompan latszik */
.panel.bg-arena::before  { background-image: url(assets/bg/arena.jpg); }
.panel.bg-kitman::before { background-image: url(assets/bg/kitman.jpg); }
.panel.bg-icebath::before { background-image: url(assets/bg/icebath.jpg); }

.good.clash { opacity: .55; }
.good.clash .pbtn { background: none; border-color: var(--border); color: var(--muted); }
.good.clash:hover { border-color: var(--red); }


/* a sajat nev a portren: a ranglistara visz */
.melink { cursor: pointer; }
.melink:hover { text-decoration: underline; }

/* ---------------- Kitman: egy targy muhelye ---------------- */

.kitbox { max-width: 470px; }
.kitrow { display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.kitrow .ipic { width: 96px; height: 96px; flex: none; margin: 0; }
.kitinfo { flex: 1; min-width: 0; }
/* itt nem lebego doboz, hanem beagyazott lista */
.kitinfo .itip {
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 9px;
}
.kitbox .btn-row { flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kitbox .pbtn { line-height: 1.35; }


/* ---------------- Ice Bath ---------------- */

.icelevel { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.icebig {
	font-family: var(--f-display);
	font-size: 34px; line-height: 1; color: var(--gold);
}
.icewait {
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 9px;
	padding: 10px 12px; font-size: 13px; text-align: center;
}


/* ================================================================
   KINEZET v2 - vastag keret, kemeny arnyek, hatarozott tipografia
   A referencia-oldal nyelvezete: sotet kontur, eltolt arnyek,
   nagy display-cim es kis, ritkitott "eyebrow" felirat.
   ================================================================ */

:root {
	--ink: #0a1430;            /* a kontur szine */
	--card: #1a2c5e;           /* kartya-alap */
	--card2: #16264f;
	--shadow: 4px 4px 0 var(--ink);
	--shadow-lg: 6px 6px 0 var(--ink);
}

/* ---------------- nyomhato gombok ---------------- */

.chunky {
	font-family: var(--f-display);
	font-size: 14px; letter-spacing: 1px;
	border: 3px solid var(--ink); border-radius: 12px;
	padding: 12px 18px;
	background: var(--gold); color: #2a1f04;
	box-shadow: var(--shadow);
	transition: transform .06s, box-shadow .06s;
}
.chunky.go { background: var(--green); color: #04240f; }
.chunky.ghost { background: transparent; color: var(--text); }
.chunky:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.chunky:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

/* a jatekbeli gombok is kapnak konturt es arnyekot */
.pbtn {
	border-width: 2px; border-style: solid; border-color: var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
	transition: transform .06s, box-shadow .06s;
}
.pbtn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.pbtn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.pbtn:disabled { box-shadow: 2px 2px 0 rgba(7, 16, 22, .5); }

/* ---------------- kartyak: kontur + eltolt arnyek ---------------- */

.panel {
	border: 3px solid var(--ink);
	box-shadow: 8px 8px 0 rgba(7, 16, 22, .55);
}

.item, .good, .quest, .offer, .acard, .cupcard, .gactive, .buildrow, .icewait, .rewitem {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 rgba(7, 16, 22, .45);
}
.item:hover, .good:hover, .quest:hover, .offer:hover, .acard:hover, .cupcard:hover {
	box-shadow: 4px 4px 0 rgba(7, 16, 22, .6);
}

/* a felszereles- es taska-kockak is hatarozottabbak */
.etile { border-color: var(--ink); box-shadow: 2px 2px 0 rgba(7, 16, 22, .45); }
.etile.empty, .etile.locked { box-shadow: none; }

/* ---------------- szakaszcimek ---------------- */

/* kis sarga csik a cim elott - a referencia szakaszjeloloje */
h3.sub {
	position: relative;
	padding-left: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}
h3.sub::before {
	content: "";
	position: absolute; left: 0; top: 50%;
	transform: translateY(-50%);
	width: 4px; height: 1em;
	background: var(--gold);
	border-radius: 2px;
}

/* ---------------- panelfejlec ---------------- */

.panel-head h2 {
	-webkit-text-stroke: 2px var(--ink);
	paint-order: stroke fill;
	color: var(--gold);
}


/* kartyacimek display-betuvel, mint a referencian */
.quest h3, .offer .cname, .item .iname, .acard .apos { font-family: var(--f-display); }
.quest h3 { font-size: 14px; letter-spacing: .6px; }
.item .iname { font-size: 12px; letter-spacing: .3px; }

/* sarokjeloles a nagyobb kartyakon - a referencia "levagott sarok" motivuma */
.quest, .offer, .acard { position: relative; }
.quest::after, .offer::after, .acard::after {
	content: "";
	position: absolute; right: 8px; top: 8px;
	width: 14px; height: 14px;
	border-top: 3px solid var(--gold-line);
	border-right: 3px solid var(--gold-line);
	border-radius: 0 4px 0 0;
	opacity: .65;
	pointer-events: none;
}


/* ================================================================
   BELEPES ELOTTI OLDAL - "papir" nyelvezet
   Nincs hozza kep: a hatas harom darabbol all.
   1) a lap enyhen ferde negyszog (clip-path),
   2) a keret egy masodik, sotet reteg ugyanazzal a vagassal,
   3) eltolt, elmosas nelkuli arnyek adja a kivagott-papir melyseget.
   A kockas papirt ket ismetlodo vonalas atmenet rajzolja.
   ================================================================ */

:root {
	--sky:    #2fb4d6;
	--navy:   #16295c;
	--paper:  #fbf6e4;
	--yellow: #ffc81f;
	--grass:  #2fbf5b;
}

.login-wrap {
	position: relative;
	flex: 1;
	overflow: auto;
	display: block;
	background: var(--sky);
	padding: 34px 24px 40px;
}
/* halvany kockas papir az egesz hatteren */
.login-wrap::before {
	content: "";
	position: fixed; inset: 0;
	background-image:
		linear-gradient(rgba(22, 41, 92, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22, 41, 92, .07) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}

/* --- a figurak a szeleken --- */
.heroart {
	position: fixed; bottom: 0;
	pointer-events: none; user-select: none;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28));
	z-index: 0;
}
.heroart.left  { left: -10px;  width: 300px; }
.heroart.right { right: -14px; width: 320px; }
.heroart.girl  { left: 265px; width: 175px; }
@media (max-width: 1560px) { .heroart.girl { display: none; } }
@container lap (max-width: 1180px) { .heroart { display: none; } }

.loginpage {
	position: relative; z-index: 1;
	max-width: 1000px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 26px;
}

/* --- a papirlap --- */
.paper {
	--cut: polygon(0 9px, 100% 0, 100% calc(100% - 7px), 5px 100%);
	position: relative;
	background: var(--navy);          /* ez latszik keretkent */
	clip-path: var(--cut);
	padding: 3px;
	filter: drop-shadow(11px 11px 0 #0e1c40);
}
.paper > .sheet {
	position: relative;
	height: 100%;
	clip-path: var(--cut);
	background: var(--paper);
	background-image:
		linear-gradient(rgba(22, 41, 92, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22, 41, 92, .06) 1px, transparent 1px);
	background-size: 22px 22px;
	padding: 20px 22px;
	color: var(--navy);
}
/* sarokjeloles, ahogy a referencian */
.paper > .sheet::after {
	content: "";
	position: absolute; right: 9px; top: 9px;
	width: 15px; height: 15px;
	border-top: 3px solid rgba(22, 41, 92, .35);
	border-right: 3px solid rgba(22, 41, 92, .35);
}
/* alig eszreveheto dolesek, hogy ne legyen gepies a racs */
.paper.tilt-a { --cut: polygon(0 10px, 100% 0, 100% calc(100% - 6px), 6px 100%); }
.paper.tilt-b { --cut: polygon(0 0, 100% 8px, calc(100% - 5px) 100%, 0 calc(100% - 7px)); }

.paper.navy > .sheet {
	background: var(--navy); color: #fff; background-image: none;
	overflow: hidden;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 230px;
}
.paper.navy > .sheet::after { border-color: rgba(255, 255, 255, .3); }
/* halvany labda a sarokban, ahogy a referencian */
.paper.navy > .sheet::before {
	content: "⚽";
	position: absolute; right: -22px; bottom: -46px;
	font-size: 190px; line-height: 1;
	opacity: .085;
	pointer-events: none;
}

/* --- felso ket tabla --- */
.lgrid {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px;
	align-items: stretch;
}
@container lap (max-width: 860px) { .lgrid { grid-template-columns: 1fr; } }

.tag {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--yellow); color: var(--navy);
	border-radius: 4px; padding: 5px 11px;
	font-family: var(--f-display);
	font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
	margin-bottom: 14px;
	align-self: flex-start;      /* ne nyuljon vegig a tabla szelesseben */
}
.tag img { width: 16px; height: 16px; object-fit: contain; }

.bigtitle {
	font-family: var(--f-title);
	font-size: clamp(38px, 6vw, 62px);
	line-height: .95;
	color: var(--yellow);
	text-shadow: 5px 5px 0 rgba(0, 0, 0, .35);
}
.bigtitle span { display: block; }
.herologo { display: block; width: min(100%, 440px); height: auto; }
.lead { margin-top: 14px; font-size: 15px; line-height: 1.5; color: #cfe0ff; }

.eyebrow {
	font-family: var(--f-display);
	font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
	color: #5c76b8;
}
.phead {
	font-family: var(--f-title);
	font-size: 26px; color: var(--navy);
	margin: 2px 0 14px;
}

.plabel {
	display: block; margin-bottom: 12px;
	font-family: var(--f-display);
	font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
	color: #5c76b8;
}
.plabel input {
	margin-top: 5px;
	background: #fff;
	border: 2px solid var(--navy);
	border-radius: 6px;
	color: var(--navy);
	font-family: "Baloo", system-ui, sans-serif;
	font-size: 15px; letter-spacing: 0; text-transform: none;
}
.plabel input:focus { border-color: var(--grass); }
/* A szervervalaszto ugyanugy nezzen ki, mint a beviteli mezok. */
.plabel select {
	width: 100%; margin-top: 5px;
	background: #fff;
	border: 2px solid var(--navy);
	border-radius: 6px;
	color: var(--navy);
	font-family: "Baloo", system-ui, sans-serif;
	font-size: 15px; letter-spacing: 0; text-transform: none;
	padding: 9px 10px;
}
.plabel select:focus { outline: none; border-color: var(--grass); }
.paper .error { color: #c1332b; margin-bottom: 8px; }
.paper .chunky { width: 100%; margin-top: 6px; }
.paper .chunky.go { background: var(--grass); color: #06280f; border-color: var(--navy); }
.paper .chunky.ghost { background: var(--yellow); color: var(--navy); border-color: var(--navy); }

/* --- cetlik --- */
.notegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@container lap (max-width: 900px) { .notegrid { grid-template-columns: repeat(2, 1fr); } }
@container lap (max-width: 520px) { .notegrid { grid-template-columns: 1fr; } }

.note > .sheet { padding: 16px 18px; }
.note.green  > .sheet { background-color: #e4f5dc; }
.note.yellow > .sheet { background-color: #fdf0c8; }
.note.pink   > .sheet { background-color: #fbe0d6; }
.note.blue   > .sheet { background-color: #dcebfb; }
.note .nico { line-height: 1; margin-bottom: 8px; }
.note .nico img { width: 38px; height: 38px; image-rendering: auto; }
.note h3 { font-family: var(--f-title); font-size: 17px; margin: 1px 0 6px; }
.note p  { font-size: 13px; line-height: 1.45; color: #33477e; }

.lfoot {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	color: #eaf7fc; font-size: 13px;
}
.lfoot img { width: 40px; }


/* a karakterkeszites ugyanabban a vilagos, papiros vilagban all,
   mint a belepes - csak a hatter es a doboz szinei valtoznak */
.create-wrap {
	position: relative;
	background: var(--sky);
}
.create-wrap::before {
	content: "";
	position: fixed; inset: 0;
	background-image:
		linear-gradient(rgba(22, 41, 92, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22, 41, 92, .07) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}
.create-box {
	position: relative; z-index: 1;
	background: var(--navy);
	border: 3px solid #0e1c40;
	box-shadow: 11px 11px 0 #0e1c40;
}


/* ================================================================
   BEMUTATO OLDAL - egyetlen gorgetheto lap, felso navigacioval
   ================================================================ */

/* a vegen hagyunk levegot, hogy az utolso szakasz is felkerulhessen a sav ala */
/* A lap aljan korabban ures hely allt, hogy az utolso szakasz fol tudjon
   gorogni; ezt a szerepet mar a lablec tolti be. */
.login-wrap { padding: 0; scroll-behavior: smooth; }

/* --- felso sav --- */
.topbar {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; gap: 18px;
	padding: 10px 22px;
	background: var(--navy);
	border-bottom: 4px solid #0e1c40;
	box-shadow: 0 6px 0 rgba(14, 28, 64, .25);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 34px; }
/* uj kep-logo (a regi trofea+szoveg helyett) */
.brand .brandlogo { width: auto; height: 42px; }
.sidebrand .brandlogo { width: auto; height: 34px; }
@container lap (max-width: 680px) { .brand .brandlogo { height: 34px; } }
.brand b {
	display: block;
	font-family: var(--f-title); font-size: 17px; color: var(--yellow);
	letter-spacing: .5px; line-height: 1;
}
.brand span {
	display: block;
	font-family: var(--f-display); font-size: 8.5px; letter-spacing: 1.6px;
	text-transform: uppercase; color: #7f96d6; margin-top: 3px;
}

.topnav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.topnav button {
	background: none; border: none;
	font-family: var(--f-display);
	font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
	color: #cbd8fb;
	padding: 8px 11px; border-radius: 7px;
}
.topnav button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.topnav button.on { color: var(--navy); background: var(--yellow); }

.chunky.small { padding: 9px 16px; font-size: 12px; flex: none; }
/* A hamburger csak keskeny kijelzon latszik. */
.navtoggle { display: none; }
.navdrop { display: contents; }

/* ----------------------------------------------------------------
   Telefon: a fooldal fejlece logo + hamburger + BELEPES, semmi mas.
   A kilenc menupont es a nyelvvalaszto a lenyiloba kerul, igy a sav
   egysoros marad, es nincs oldalra tolodo tartalom.
   ---------------------------------------------------------------- */
@container lap (max-width: 1020px) {
	.topbar {
		gap: 10px; padding: 10px 16px;
		flex-wrap: nowrap; position: relative;
	}
	.brand { margin-right: auto; }

	.navtoggle {
		display: flex; flex-direction: column; justify-content: center;
		gap: 4px; flex: none;
		width: 40px; height: 36px; padding: 0 9px;
		background: rgba(255, 255, 255, .08); border: none; border-radius: 8px;
		cursor: pointer;
	}
	.navtoggle span {
		display: block; height: 3px; border-radius: 2px;
		background: #cbd8fb; transition: transform .18s, opacity .18s;
	}
	.topbar.navopen .navtoggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.topbar.navopen .navtoggle span:nth-child(2) { opacity: 0; }
	.topbar.navopen .navtoggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


	/* a lenyilo a sav ala kerul, teljes szelessegben */
	.navdrop {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; gap: 6px;
		padding: 10px 12px 14px;
		background: var(--navy);
		border-bottom: 4px solid #0e1c40;
		box-shadow: 0 10px 18px rgba(6, 14, 34, .45);
	}
	.topbar.navopen .navdrop { display: flex; }

	/* A menupontok annyi hasabban allnak, amennyi kifer - egy huvelykujjal
	 * is eltalalhatok maradnak. Allo telefonon ez ket hasab, elforgatva
	 * negy-ot: igy a lenyilo nem no a kepernyo felere. */
	.navdrop .topnav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
		gap: 4px;
		margin-left: 0; width: 100%;
	}
	.navdrop .topnav button { padding: 11px 10px; text-align: center; }
	.navdrop .topnav .dcbtn { grid-column: 1 / -1; }

	.navdrop .langbar {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
		margin: 4px 0 0; padding-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
}

/* Telefonon szukebb sav es kisebb logo. */
@container lap (max-width: 680px) {
	.topbar { padding: 8px 12px; }
	.brand .brandlogo { height: 30px; }
	.headgo { padding: 8px 12px; font-size: 11px; }
}

/* A hasabok szamat az auto-fit donti el (lasd fentebb): a legkeskenyebb
 * telefonon is ket hasab fer ki, egyre valtani csak magasabb menut adna. */

/* Elforgatott telefon: szeles, de nagyon alacsony kepernyo.
 *
 * Itt nem a szelesseg szorit, hanem a magassag - a lenyilo menu konnyen
 * elfoglalna a kepernyo felet. Ezert mindent osszebb huzunk, es ha meg igy
 * sem fer ki, a lenyilo maga gorgetheto lesz. */
@media (max-height: 500px) {
	.navdrop {
		padding: 6px 10px 8px;
		gap: 4px;
		max-height: calc(100vh - 52px);
		overflow-y: auto;
	}
	.navdrop .topnav button { padding: 7px 8px; font-size: 11px; }
	/* Elforgatva sok hasab van: a Discord is elfer a tobbi mellett, nem kell
	 * neki sajat sor. */
	.navdrop .topnav .dcbtn { padding: 7px 10px; grid-column: auto; }
	.navdrop .langbar { margin-top: 2px; padding-top: 6px; gap: 3px; }
	.topbar { padding: 6px 12px; }
	.brand .brandlogo { height: 26px; }
}

/* Semmi ne logjon ki oldalra a fooldalon.
 *
 * A "container" azert kell, hogy a fejlec elrendezese a SAJAT szelessegehez
 * igazodjon, ne a bongeszoablakehoz. Igy a nezetvalto telefonos elonezete is
 * hu: a keretbe zart oldal ugyanugy hamburgermenut kap, mint egy valodi
 * telefonon. */
.login-wrap { overflow-x: hidden; container-type: inline-size; container-name: lap; }
.login-wrap img, .login-wrap video { max-width: 100%; }

/* --- szakaszok --- */
.loginpage {
	max-width: 1060px; margin: 0 auto;
	padding: 0 24px;
	display: block;
}
/* ---------------- nyelvvalaszto a felso savban ---------------- */

.langbar {
	display: flex; align-items: center; gap: 4px;
	margin-left: auto; margin-right: 10px;
}

.langflag {
	display: flex; align-items: center; padding: 3px;
	background: none; border: 2px solid transparent; border-radius: 5px;
	cursor: pointer; line-height: 0;
}
.langflag svg { display: block; border-radius: 2px; }
.langflag:hover:not(:disabled) { border-color: rgba(255, 255, 255, .5); }
.langflag.on { border-color: var(--gold, #ffcc00); }

/* ami meg keszul: latszik, de nem valaszthato */
.langflag.soon { opacity: .35; cursor: default; }

.langsep {
	width: 1px; height: 16px; margin: 0 4px;
	background: rgba(255, 255, 255, .28);
}

@container lap (max-width: 1100px) {
	/* keskeny kepernyon a zaszlok a sav ala csusznak */
	.langbar { order: 3; width: 100%; margin: 6px 0 0; justify-content: center; }
}

/* ---------------- vilagszamok a belepolapon ---------------- */

/* Racs helyett rugalmas sor: minden doboz annyi helyet kap, amennyi a
 * szamahoz kell. Igy a 628 139 843 sem log ki, a 15 mellett pedig nem
 * marad felesleges ures hely. */
.worldbar {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 30px 0 4px;
}

.worldbox {
	flex: 1 1 auto; text-align: center;
	padding: 16px 18px;
	background: var(--card);
	border: 3px solid var(--ink);
	border-radius: 12px;
	box-shadow: var(--shadow);
}

.worldbox b {
	display: block; font-family: var(--f-title);
	font-size: clamp(20px, 2.6vw, 30px); color: #ffcc00;
	line-height: 1.1; margin-bottom: 5px;
	/* A szamok felporgesnel valtoznak; az azonos szelessegu szamjegyek es a
	 * lefoglalt hely nelkul a doboz ugralna minden lepesnel. */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.worldbox span {
	display: block;
	font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
}

@container lap (max-width: 700px) {
	.worldbox { padding: 12px 12px; }
	.worldbox span { font-size: 11px; }
}

.sect { position: relative; padding: 54px 0 10px; scroll-margin-top: 90px; }
#home { padding-top: 40px; }

.secthead { text-align: center; margin-bottom: 26px; }
.eyebrow.light { color: #0b3f52; }
.secttitle {
	font-family: var(--f-title);
	font-size: clamp(28px, 4.4vw, 44px);
	color: #fff;
	text-shadow: 4px 4px 0 rgba(14, 28, 64, .45);
	margin: 2px 0 8px;
}
.secttitle.inpanel { color: var(--yellow); text-align: left; }
.sectlead {
	max-width: 620px; margin: 0 auto;
	color: #f2fbff; font-size: 15px; line-height: 1.55;
}

/* --- kezdolap --- */
.herostats { display: flex; gap: 22px; margin-top: 20px; }
.herostats div { display: flex; flex-direction: column; }
.herostats b {
	font-family: var(--f-title); font-size: 24px; color: var(--yellow); line-height: 1;
}
.herostats span {
	font-family: var(--f-display); font-size: 9px; letter-spacing: 1.4px;
	text-transform: uppercase; color: #8fa6e6; margin-top: 4px;
}
/* a figurak a kezdo szakaszhoz tapadnak, nem a kepernyohoz */
.heroart { position: absolute; bottom: -20px; }
.heroart.left  { left: -252px; width: 240px; }
.heroart.right { right: -252px; width: 245px; }
@container lap (max-width: 1580px) { .heroart { display: none; } }

/* --- rendszerek --- */
.paper.wide { width: 100%; }
.phead.big { font-size: 34px; }
.sysintro { color: #33477e; font-size: 14px; margin-bottom: 18px; max-width: 620px; }

.sysgrid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@container lap (max-width: 900px) { .sysgrid { grid-template-columns: repeat(2, 1fr); } }
@container lap (max-width: 520px) { .sysgrid { grid-template-columns: 1fr; } }

.sys {
	border: 2px solid var(--navy);
	box-shadow: 4px 4px 0 rgba(22, 41, 92, .85);
	padding: 12px 13px;
	background: #fff;
}
.sys.green  { background: #e4f5dc; }
.sys.yellow { background: #fdf0c8; }
.sys.pink   { background: #fbe0d6; }
.sys.blue   { background: #dcebfb; }
.sys .sico { display: block; margin-bottom: 5px; line-height: 1; }
.sys .sico img { width: 30px; height: 30px; }
.sys b { font-family: var(--f-display); font-size: 12px; letter-spacing: .6px; }
.sys p { font-size: 12px; line-height: 1.4; color: #33477e; margin-top: 4px; }

/* kiemelt sor a racs alatt: a kupasorozat bovebb leirasa */
.syshl {
	display: flex; gap: 14px; align-items: flex-start;
	margin-top: 16px; padding: 14px 16px;
	background: rgba(22, 41, 92, .07);
	border: 2px dashed rgba(22, 41, 92, .28); border-radius: 10px;
}
.syshl .sico img { width: 34px; height: 34px; }
.syshl b {
	font-family: var(--f-display); font-size: 13px; letter-spacing: .6px;
	display: block; margin-bottom: 4px;
}
.syshl p { font-size: 12.5px; line-height: 1.5; color: #33477e; margin: 0 0 6px; }
.syshl p:last-child { margin-bottom: 0; }

.sysmore img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

.sysmore {
	display: inline-block; margin-top: 18px;
	background: var(--navy); color: #fff;
	font-family: var(--f-display); font-size: 10px; letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 9px 15px;
	box-shadow: 4px 4px 0 rgba(22, 41, 92, .5);
}

/* --- filozofia --- */
.paper.navy.wide > .sheet { min-height: 0; display: block; overflow: hidden; }
.sectart {
	position: absolute; right: 10px; bottom: -14px;
	width: 190px;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
	pointer-events: none;
}
@container lap (max-width: 900px) { .sectart { display: none; } }

.philo {
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px;
	margin-top: 18px; max-width: 760px;
}
@container lap (max-width: 760px) { .philo { grid-template-columns: 1fr; } }
.philo .pnum {
	font-family: var(--f-title); font-size: 13px; color: var(--yellow);
	display: block; margin-bottom: 2px;
}
.philo b { font-family: var(--f-display); font-size: 13px; color: #fff; }
.philo p { font-size: 13px; line-height: 1.5; color: #b9c9f2; margin-top: 5px; }

/* --- gyokerek --- */
.rootgrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
@container lap (max-width: 800px) { .rootgrid { grid-template-columns: 1fr; } }
.paper.yellowpaper > .sheet { background-color: #ffe27a; }
.rootgrid p { font-size: 14px; line-height: 1.55; color: #33477e; margin-bottom: 10px; }
.rootgrid p.small { font-size: 12.5px; color: #5c76b8; }

.tickel { list-style: none; }
.tickel li {
	font-size: 13.5px; color: #33477e;
	padding: 6px 0 6px 26px; position: relative;
	border-bottom: 1px dashed rgba(22, 41, 92, .18);
}
.tickel li::before {
	content: "✓";
	position: absolute; left: 0; top: 5px;
	color: #2fbf5b; font-weight: 900;
}
.tickel li.wip { color: #7a86a8; }
.tickel li.wip::before { content: "◷"; color: #c98a1e; }

/* --- gyik --- */
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq summary {
	cursor: pointer; list-style: none;
	font-family: var(--f-display); font-size: 13px; color: var(--navy);
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	font-family: var(--f-title); font-size: 20px; color: #5c76b8; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
	margin-top: 10px; padding-top: 10px;
	border-top: 1px dashed rgba(22, 41, 92, .2);
	font-size: 13.5px; line-height: 1.55; color: #33477e;
}

/* --- zaro sav --- */
.ctaband {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap;
	background: var(--yellow);
	border: 3px solid #0e1c40;
	box-shadow: 10px 10px 0 #0e1c40;
	padding: 18px 24px;
	margin-bottom: 26px;
}
.ctaband h2 {
	font-family: var(--f-title); font-size: clamp(24px, 3.6vw, 36px);
	color: var(--navy); line-height: 1;
}
.ctaband .eyebrow { color: #8a6b12; }


/* a szakaszok szelere allo figurak - csak diszites */
.sectfig {
	position: absolute; bottom: 10px;
	width: 190px;
	pointer-events: none; user-select: none;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25));
	z-index: 0;
}
.sectfig.left  { left: -215px; }
.sectfig.right { right: -215px; }
.sectfig.low   { bottom: -10px; width: 165px; }
@container lap (max-width: 1500px) { .sectfig { display: none; } }
.sect > .lgrid, .sect > .notegrid, .sect > .rootgrid,
.sect > .paper, .sect > .faq, .sect > .secthead, .sect > .ctaband { position: relative; z-index: 1; }


/* ---------------- karakterkeszites a bemutato oldal nyelven ---------------- */

.create-wrap { padding: 0 0 60px; display: block; }
.create-wrap .topbar { margin-bottom: 26px; }

.createfig {
	position: fixed; bottom: 0;
	width: 235px; pointer-events: none;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25));
	z-index: 0;
}
.createfig.left  { left: 14px; }
.createfig.right { right: 14px; }
@media (max-width: 1500px) { .createfig { display: none; } }

.create-box {
	position: relative; z-index: 1;
	width: min(100%, 960px);
	margin: 0 auto;
	border-radius: 0;
}
.createhead { text-align: center; margin-bottom: 20px; }
.createhead .secttitle { text-align: center; color: var(--yellow); margin-bottom: 6px; }
.createhead p { color: #b9c9f2; font-size: 14px; }

/* a bal oldali portre-oszlop papirlapon ul */
.ccol-left .paper { --cut: polygon(0 8px, 100% 0, 100% calc(100% - 6px), 5px 100%); }
.sheet.cpaper { padding: 16px; }
.sheet.cpaper .portraitframe { border-color: var(--navy); }
.sheet.cpaper .lookrow { color: var(--navy); }
.sheet.cpaper .lookrow span { color: #33477e; }
.sheet.cpaper .pbtn { border-color: var(--navy); }

/* a jobb oldali valasztok */
.create-box .clabel { color: #8fa6e6; }
.create-box .pick {
	border: 2px solid #0e1c40;
	box-shadow: 3px 3px 0 rgba(14, 28, 64, .8);
}
.create-box .pick.active { background: var(--yellow); color: var(--navy); }
.create-box .pick.active b, .create-box .pick.active span { color: var(--navy); }
.create-box input, .create-box select {
	border: 2px solid #0e1c40;
	background: rgba(255, 255, 255, .95);
	color: var(--navy);
}


/* a menusav fejlece: ugyanaz a marka, mint a bemutato oldalon */
.sidebrand {
	display: flex; align-items: center; gap: 9px;
	padding: 4px 4px 12px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--gold-line);
}
.sidebrand img { width: 30px; }
.sidebrand b {
	display: block;
	font-family: var(--f-title); font-size: 15px; color: var(--gold);
	letter-spacing: .4px; line-height: 1;
}
.sidebrand span {
	display: block; margin-top: 3px;
	font-family: var(--f-display); font-size: 7.5px; letter-spacing: 1.4px;
	text-transform: uppercase; color: var(--muted);
}


/* A szurkolokrol combtol le van vagva a rajz, ezert palya melletti
 * reklamtabla ele allnak - az takarja a vagast. */
.figbox {
	position: absolute; bottom: 10px;
	width: 195px; height: 235px;
	pointer-events: none; user-select: none;
	z-index: 0;
}
.figbox.left  { left: -218px; }
.figbox.right { right: -218px; }
.figbox img {
	/* jol be kell csusztatni a tabla moge, hogy a vagas ne latszodjon */
	position: absolute; left: 50%; bottom: 12px;
	transform: translateX(-50%);
	width: 165px;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .25));
}
.figboard {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 42px;
	background: var(--yellow);
	border: 3px solid #0e1c40;
	box-shadow: 5px 5px 0 #0e1c40;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--f-display);
	font-size: 9px; letter-spacing: 1.6px; color: var(--navy);
}
@container lap (max-width: 1500px) { .figbox { display: none; } }


/* ================================================================
   GORGETOSAV - a rendszer alapertelmezettje helyett sajat
   ================================================================ */

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--gold-line) rgba(10, 20, 48, .55); }

/* Chrome / Edge */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
	background: rgba(10, 20, 48, .55);
	border-left: 2px solid var(--ink);
}
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-line) 100%);
	border: 2px solid var(--ink);
	border-radius: 8px;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
::-webkit-scrollbar-corner { background: transparent; }

/* a vilagos, papiros feluleteken sotet fogantyu illik jobban */
.login-wrap::-webkit-scrollbar-track,
.create-wrap::-webkit-scrollbar-track { background: rgba(22, 41, 92, .18); border-left: none; }
.login-wrap::-webkit-scrollbar-thumb,
.create-wrap::-webkit-scrollbar-thumb {
	background: var(--navy);
	border: 2px solid #0e1c40;
}
.login-wrap, .create-wrap { scrollbar-color: var(--navy) rgba(22, 41, 92, .18); }


/* ================================================================
   JATEKBELI KORNYEZET v2
   ================================================================ */

/* --- panelfejlec: sotet sav, sarga cim, nyomhato bezaro --- */

.panel { padding: 0; }
.panel-head {
	position: sticky; top: 0; z-index: 20;
	margin: 0 0 18px;
	padding: 13px 22px;
	background: linear-gradient(180deg, #1e356f 0%, #16264f 100%);
	border-bottom: 4px solid var(--ink);
	box-shadow: 0 5px 0 rgba(10, 20, 48, .35);
}
.panel-head h2 {
	font-family: var(--f-title);
	font-size: 22px; letter-spacing: .8px;
	-webkit-text-stroke: 0;
	text-shadow: 3px 3px 0 rgba(10, 20, 48, .8);
}
.panel-head .x {
	margin-left: auto;
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	background: var(--red); color: #fff;
	border: 2px solid var(--ink); border-radius: 9px;
	font-size: 16px; line-height: 1;
	box-shadow: 3px 3px 0 var(--ink);
	transition: transform .06s, box-shadow .06s;
}
.panel-head .x:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.panel-head .x:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

.panel-body { padding: 0 26px 28px; }
/* a hatterkep a fejlec ala is befut */
.panel.hasbg::before { top: 0; }

/* --- energiasav --- */
.energybar {
	height: 12px;
	border: 2px solid var(--ink);
	border-radius: 7px;
	background: rgba(10, 20, 48, .6);
}
.energybar div {
	background: linear-gradient(180deg, #4ee07f, #21a34c);
	border-radius: 4px;
}

/* --- menusav --- */
.menu-btn {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 rgba(10, 20, 48, .55);
	transition: transform .06s, box-shadow .06s, background .12s;
}
.menu-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(10, 20, 48, .7); }
.menu-btn.active {
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-line) 100%);
	color: #2a1f04;
}

/* eroforras-csempek a jatekosdoboz alatt */
.pres { flex-direction: row; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pres span {
	display: flex; align-items: center; gap: 4px;
	background: rgba(10, 20, 48, .5);
	border: 2px solid var(--ink); border-radius: 8px;
	padding: 3px 7px;
	font-size: 11.5px;
	white-space: nowrap;
}
/* a jatekosdoboz ne szoruljon ki a savbol */
.playerbox { align-items: flex-start; }
.pinfo { min-width: 0; flex: 1; }
.pinfo .pname { font-size: 14px; word-break: break-word; }

/* --- a panel tartalma jobban elvaljon a hatterkeptol --- */
.panel.hasbg .panel-body > p,
.panel.hasbg .panel-body > .muted {
	background: rgba(10, 20, 48, .55);
	border-left: 3px solid var(--gold-line);
	border-radius: 0 8px 8px 0;
	padding: 10px 14px;
}


/* --- tablazatok: sotet fejlecsav, zebracsikok --- */

.rank-table, .ltable, .squadtable {
	border: 2px solid var(--ink);
	box-shadow: 4px 4px 0 rgba(10, 20, 48, .5);
	overflow: hidden;
	border-radius: 10px;
}
.rank-table thead th, .ltable thead th, .squadtable thead th {
	background: linear-gradient(180deg, #1e356f 0%, #16264f 100%);
	color: var(--gold);
	font-family: var(--f-display);
	font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
	border-bottom: 3px solid var(--ink);
	padding: 10px 12px;
}
.rank-table tbody tr:nth-child(even),
.ltable tbody tr:nth-child(even),
.squadtable tbody tr:nth-child(even) { background: rgba(10, 20, 48, .3); }
.rank-table tbody tr:hover,
.ltable tbody tr:hover,
.squadtable tbody tr:hover { background: rgba(255, 200, 31, .1); }
.rank-table tbody tr.me, .ltable tbody tr.me, .squadtable tbody tr.me {
	background: rgba(255, 200, 31, .16);
	box-shadow: inset 4px 0 0 var(--gold);
}

/* a szuro- es fejlecsor a tablazat folott */
.rankbar {
	background: rgba(10, 20, 48, .5);
	border: 2px solid var(--ink); border-radius: 10px;
	padding: 12px 14px;
	box-shadow: 3px 3px 0 rgba(10, 20, 48, .45);
}
select {
	background: var(--side2);
	border: 2px solid var(--ink); border-radius: 8px;
	color: var(--text); padding: 8px 10px;
	font-family: inherit; font-size: 14px;
}
select:focus { outline: none; border-color: var(--gold); }

/* --- fulek --- */
.tab {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 rgba(10, 20, 48, .5);
	transition: transform .06s, box-shadow .06s;
}
.tab.active {
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-line) 100%);
	color: #2a1f04;
}
.tab:hover { transform: translate(-1px, -1px); }

/* --- felugro ablakok --- */
.reward-box, .cbox {
	border: 3px solid var(--ink);
	box-shadow: 10px 10px 0 rgba(10, 20, 48, .75);
	border-radius: 14px;
}
.reward-box h2 {
	font-family: var(--f-title);
	text-shadow: 3px 3px 0 rgba(10, 20, 48, .8);
}


/* ================================================================
   RACSOS HATTER ES PAPIROS TIPPDOBOZ A JATEKBAN
   ================================================================ */

/* A menusav a bemutato oldal vilagoskek, kockas papirjat kapja - igy a
 * ket felulet osszeer. A paneleken nincs racs: ott a hatterkep dolgozik. */
.sidebar {
	background:
		linear-gradient(rgba(22, 41, 92, .10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22, 41, 92, .10) 1px, transparent 1px),
		var(--sky);
	background-size: 26px 26px, 26px 26px, auto;
	border-right: 4px solid var(--ink);
}
/* a marka es a jatekosdoboz sotet kartyan ul, hogy olvashato maradjon */
.sidebrand, .playerbox {
	background: var(--navy);
	border: 2px solid var(--ink); border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(10, 20, 48, .45);
	padding: 9px 10px;
}
.sidebrand { border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
.playerbox { margin-bottom: 10px; }
.mdivider { border-bottom-color: rgba(22, 41, 92, .35); }

/* --- papiros tippdoboz, ugyanaz a nyelv, mint a bemutato oldalon --- */
.tipcard {
	--cut: polygon(0 8px, 100% 0, 100% calc(100% - 6px), 5px 100%);
	position: relative;
	background: var(--ink);
	clip-path: var(--cut);
	padding: 3px;
	filter: drop-shadow(7px 7px 0 rgba(10, 20, 48, .8));
	margin: 14px 0 18px;
}
.tipcard > .tipsheet {
	clip-path: var(--cut);
	background: #fbf6e4;
	background-image:
		linear-gradient(rgba(22, 41, 92, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22, 41, 92, .07) 1px, transparent 1px);
	background-size: 20px 20px;
	padding: 14px 18px 15px;
	color: #16295c;
	font-size: 13px; line-height: 1.55;
}
.tipcard .tiphead {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--f-display);
	font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
	color: #16295c;
	background: var(--gold);
	border: 2px solid #16295c;
	padding: 3px 9px;
	margin-bottom: 9px;
}
.tipcard b  { color: #0f1f4a; }
.tipcard p + p { margin-top: 8px; }
.tipcard ul { margin: 6px 0 0 18px; }
.tipcard li { margin-bottom: 4px; }
/* a panel.hasbg altalanos szovegdoboza ne szoljon bele */
.panel.hasbg .panel-body > .tipcard { background: var(--ink); border-left: none; padding: 3px; }

/* ================================================================
   TELEFON: parbaj, kupa es csapat
   A kartyak alapbol asztali meretre keszultek: egy 1v1 kartya 549
   keppont magas, azaz masfel telefonkepernyo. Itt tomoritjuk oket.
   ================================================================ */

/* --- 1v1 ellenfelkartyak --- */
.mobile-ui .arenagrid { gap: 10px; }
.mobile-ui .acard { padding: 8px; gap: 6px; }
.mobile-ui .aportrait { height: 110px; }
.mobile-ui .aportrait .pname2 { font-size: 11px; bottom: 4px; }
.mobile-ui .aportrait .alvl { font-size: 10px; }
.mobile-ui .apower { margin-top: 4px; }
.mobile-ui .abar { height: 18px; }
.mobile-ui .abar b { font-size: 11px; line-height: 16px; }
.mobile-ui .apos { font-size: 10px; }
/* a hat stat ket hasabban feleannyi helyet visz */
.mobile-ui .astats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; }
.mobile-ui .arow { font-size: 11px; padding: 1px 2px; gap: 6px; }
.mobile-ui .acard > .pbtn { padding: 8px 10px; font-size: 12px; }
/* --- kupakartyak --- */
.mobile-ui .cup-grid { gap: 8px; }
.mobile-ui .cupcard { padding: 8px 10px; gap: 6px; }
.mobile-ui .cupname { font-size: 12px; }
.mobile-ui .cupname i { font-size: 10px; }
.mobile-ui .cupround { font-size: 10px; }
.mobile-ui .cupface { width: 70px; height: 80px; }
.mobile-ui .cupfoe { gap: 8px; }
.mobile-ui .cupnext { font-size: 10px; }
.mobile-ui .cupclub, .mobile-ui .cuplvl { font-size: 11px; }
.mobile-ui .cupcard > .pbtn { padding: 8px 10px; font-size: 12px; }
/* --- parbaj kepernyo ---
   A mezo tartalma (portrek, eroSav, statok) magasabb, mint a telefon
   kepernyoje, a doboz pedig overflow:hidden - igy a jegyzokonyv es a
   gombok egyszeruen nem latszottak. A felso resz mostantol gorgetheto,
   az also sav (log + gombok) pedig fixen a helyen marad. */
.mobile-ui .duelscreen { max-height: calc(100% - 6px); }
.mobile-ui .duelfield {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	gap: 8px; padding: 6px 10px 4px;
}
.mobile-ui .dcard { height: auto; padding: 4px; }
.mobile-ui .dcard .dimg { width: 84px; height: 84px; margin: 4px auto 0; }
.mobile-ui .dname { font-size: 11px; }
.mobile-ui .dclub { font-size: 10px; }
.mobile-ui .dhp { height: 16px; }
.mobile-ui .dhp b { font-size: 10px; line-height: 14px; }
.mobile-ui .dstats {
	font-size: 11px; margin-top: 4px; padding: 4px 8px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
}
.mobile-ui .dstats > div { padding: 1px 2px; }
.mobile-ui .dstats .dpow { grid-column: 1 / -1; }
.mobile-ui .dstats .dpow b { font-size: 12px; }
.mobile-ui .duelmid { height: 56px; }

.mobile-ui .duelbottom { flex: 0 0 auto; padding: 8px 10px 10px; }
.mobile-ui .duelbottom .fightlog {
	max-height: 48px; font-size: 12px; padding: 6px 10px; margin-top: 0;
}
/* a vegeredmeny sora asztali meretben 10+9 keppont keretet visz - itt keveseb */
.mobile-ui .fresult { margin-top: 4px; padding: 5px 8px; font-size: 12px; letter-spacing: .5px; }
.mobile-ui .duelbottom .fight-foot { margin-top: 8px; gap: 8px; }
.mobile-ui .duelbottom .fight-foot .pbtn {
	min-width: 0; flex: 0 1 240px; padding: 9px 10px; font-size: 12px;
}
/* --- csapatlap fejresz ---
   A palyakep 16:9-ben 439 keppont magas volt, azaz egy egesz telefon-
   kepernyo. A meglevo mobil szabaly 680 keppontnal indult, fekvo telefonon
   viszont 845 az ablak, igy sosem lepett be. Itt a nezethez kotjuk. */
.mobile-ui .pitchhero {
	overflow: visible; border: none; background: transparent; margin-bottom: 10px;
}
/* A palyakep teljes egeszeben latszik: a magassagot adjuk meg, a
 * szelesseg a sajat aranyabol jon (1000x800), igy semmi nem vagodik le. */
.mobile-ui .pitchhero .ph-bg {
	aspect-ratio: auto; height: 150px; width: auto; max-width: 100%;
	object-fit: contain;
	border-radius: 10px; border: 1px solid var(--gold-line);
}
.mobile-ui .pitchhero::after { display: none; }
.mobile-ui .ph-head, .mobile-ui .ph-left,
.mobile-ui .ph-right, .mobile-ui .ph-stats {
	position: static; width: auto; max-width: none; max-height: none;
	margin: 8px 0 0;
}
.mobile-ui .ph-head { text-shadow: none; }
.mobile-ui .ph-head .clubname { font-size: 15px; }
.mobile-ui .ph-left { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.mobile-ui .ph-left .pbtn { flex: 1 1 30%; width: auto; font-size: 12px; padding: 8px; }
.mobile-ui .ph-right { overflow: visible; padding: 8px 10px; }
.mobile-ui .ph-stats { grid-template-columns: 1fr 1fr; gap: 1px 12px; font-size: 12px; }

/* Fekvo telefonon a kep ala ket hasab kerul: balra a gombok es a mutatok,
 * jobbra a fejlesztesek - kulonben mind egymas ala allna. */
/* Fekvo telefonon a kep mar nem viszi el a teljes szelesseget: mellette
 * all a klub neve es a mutatok, jobbra vegig a fejlesztesek, alul a gombok. */
.mobile-ui.jw-720plus .pitchhero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		'kep fej  jobb'
		'kep adat jobb'
		'bal bal  jobb';
	gap: 8px 12px; align-items: start;
}
.mobile-ui.jw-720plus .ph-bg    { grid-area: kep; align-self: start; }
.mobile-ui.jw-720plus .ph-head  { grid-area: fej; margin-top: 0; }
.mobile-ui.jw-720plus .ph-stats { grid-area: adat; }
.mobile-ui.jw-720plus .ph-left  { grid-area: bal; }
.mobile-ui.jw-720plus .ph-right { grid-area: jobb; margin-top: 0; }
/* Osszecsukott magyarazo doboz telefonon: csak a fejlec latszik, mellette
 * egy nyil jelzi, hogy lehuzhato. */
/* A 150 keppontos babanal a nev + csapatnev ket sorba tor es kilog a
 * keretbol; telefonon kisebb betuvel es kulon sorban all a klub. */
.mobile-ui .dollrow .pname2 { font-size: 11px; line-height: 1.15; bottom: 3px; }
.mobile-ui .dollrow .pname2 .teamlink { display: block; font-size: 10px; }

.mobile-ui .tipcard { margin: 8px 0 12px; }
.mobile-ui .tipcard .tiphead { cursor: pointer; user-select: none; margin-bottom: 0; }
.mobile-ui .tipcard .tiphead::after { content: ' ▾'; font-size: 11px; }
.mobile-ui .tipcard.csukva .tiphead::after { content: ' ▸'; }
.mobile-ui .tipcard > .tipsheet { padding: 8px 12px 10px; font-size: 12px; line-height: 1.45; }
.mobile-ui .tipcard.csukva > .tipsheet > *:not(.tiphead) { display: none; }
.mobile-ui .tipcard.csukva > .tipsheet { padding-bottom: 8px; }
/* --- oltozo: a rendszeruzenetek sargak, ne feherek --- */
.chatline.sys {
	color: #ffd964; font-style: normal;
	background: rgba(255, 200, 31, .09);
	border-left: 3px solid var(--gold);
	border-radius: 0 6px 6px 0;
	padding: 3px 8px;
	margin: 2px 0;
}
.chatline.sys b { color: var(--gold); font-style: normal; }
.chatline.sys .ctime { color: #c9a94e; }


/* ================================================================
   MECCSNEZO
   ================================================================ */

.matchlist { display: flex; flex-direction: column; gap: 8px; }
.mrow {
	display: grid;
	grid-template-columns: 68px 1fr 74px 1fr 34px 130px;
	align-items: center; gap: 10px;
	background: rgba(10, 20, 48, .55);
	border: 2px solid var(--ink); border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(10, 20, 48, .45);
	padding: 9px 12px;
}
@container jatek (max-width: 820px) { .mrow { grid-template-columns: 1fr; text-align: center; } }
.mmd { font-family: var(--f-display); font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.mteam { font-size: 13px; }
.mteam.me { color: var(--gold); font-weight: 700; }
.mscore {
	font-family: var(--f-title); font-size: 17px; text-align: center;
	background: rgba(0, 0, 0, .35); border: 2px solid var(--ink); border-radius: 7px;
	padding: 2px 0;
}
.mres {
	font-family: var(--f-display); font-size: 11px; text-align: center;
	border: 2px solid var(--ink); border-radius: 6px; padding: 3px 0;
}
.mres.w { background: var(--green); color: #04240f; }
.mres.d { background: #6c7ba8; color: #0b1330; }
.mres.l { background: var(--red); color: #2a0705; }
.mrow .pbtn { font-size: 12px; padding: 7px 10px; }

/* --- eredmenyjelzo --- */
.scoreboard {
	display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 14px;
	background: linear-gradient(180deg, #1e356f 0%, #101f45 100%);
	border: 3px solid var(--ink); border-radius: 14px;
	box-shadow: 6px 6px 0 rgba(10, 20, 48, .6);
	padding: 14px 20px;
}
.sbteam {
	font-family: var(--f-display); font-size: 14px; letter-spacing: .6px;
	text-align: center;
}
.sbteam.me { color: var(--gold); }
.sbmid { text-align: center; }
.sbscore {
	font-family: var(--f-title); font-size: 34px; line-height: 1;
	color: var(--gold); text-shadow: 3px 3px 0 rgba(10, 20, 48, .85);
}
.sbclock {
	font-family: var(--f-display); font-size: 11px; letter-spacing: 1.5px;
	color: #cfe0ff; margin-top: 5px;
}

/* --- teljes palya, mindket csapat pontjaival --- */

.pitch {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 420px;
	margin: 14px 0;
	background:
		repeating-linear-gradient(90deg, #1f7a3d 0 6.25%, #24894a 6.25% 12.5%);
	border: 3px solid var(--ink); border-radius: 12px;
	box-shadow: 6px 6px 0 rgba(10, 20, 48, .55);
	overflow: hidden;
}
.pmark { position: absolute; border: 2px solid rgba(255, 255, 255, .55); }
.pmark.halfline { left: 50%; top: 0; bottom: 0; width: 0; border-width: 0 0 0 2px; }
.pmark.circle {
	left: 50%; top: 50%; width: 17%; aspect-ratio: 1;
	transform: translate(-50%, -50%); border-radius: 50%;
}
.pmark.box   { top: 20%; height: 60%; width: 15%; }
.pmark.six   { top: 36%; height: 28%; width: 6%; }
.pmark.goal  { top: 43%; height: 14%; width: 1.6%; background: rgba(255,255,255,.25); }
.pmark.left  { left: 0;  border-left-width: 0; }
.pmark.right { right: 0; border-right-width: 0; }

/* egy jatekos a palyan: felul a neve, alatta a portreja */
.pdot {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	pointer-events: none;
	/* a csapat egyben tolodik - linearisan, hogy a labda vonala pontosan
	 * kovetni tudja a fejeket (lasd animLine az app.js-ben). A hosszat a
	 * lejatszo allitja a --mv valtozoval, a tempohoz igazitva. */
	transition: left var(--mv, .8s) linear, top var(--mv, .8s) linear;
}
.pdot .pnum {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	border: 2px solid var(--ink); border-radius: 50%;
	font-family: var(--f-display); font-size: 9px;
	box-shadow: 2px 2px 0 rgba(10, 20, 48, .5);
}
.pdot .pnum .portraitbox { margin-top: 4px; }
.pdot.home .pnum { background: var(--gold); color: #2a1f04; }
.pdot.away .pnum { background: #e8ecf7; color: #16295c; }
.pdot .pnm {
	font-size: 9px; line-height: 1;
	color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000;
	white-space: nowrap;
}
/* akinel epp a labda van */
.pdot.passing   .pnum { box-shadow: 0 0 0 3px #fff, 2px 2px 0 rgba(10,20,48,.5); }
.pdot.receiving .pnum { box-shadow: 0 0 0 3px #7ef0a4, 2px 2px 0 rgba(10,20,48,.5); }
.pdot.holding   .pnum { box-shadow: 0 0 0 3px #ffe27a, 2px 2px 0 rgba(10,20,48,.5); }
.pdot.shooting  .pnum { box-shadow: 0 0 0 4px #ff6a5a, 2px 2px 0 rgba(10,20,48,.5); }

/* a labda utja */
.ballpath { position: absolute; inset: 0; width: 100%; height: 100%; }
.ballpath { transition: opacity .3s; }
.ballpath.dim { opacity: 0; }
/* a passz ive: vekony, vilagos, nyilheggyel a fogado fejen */
.ballpath path {
	fill: none;
	stroke: rgba(255, 255, 255, .9);
	stroke-width: 2;
	stroke-dasharray: 4 3.5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}
.ballpath circle { fill: #fff; }
/* a hazai labdautja sargas, a vendege feher - igy latszik, kie a labda */
.ballpath path   { stroke: rgba(255, 214, 102, .95); }
.ballpath circle { fill: #ffd666; }
.ballpath.away path   { stroke: rgba(255, 255, 255, .95); }
.ballpath.away circle { fill: #fff; }
.pitch .ball {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	font-size: 17px;
	transition: left var(--mv, .8s) linear, top var(--mv, .8s) linear;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}

/* nagy felirat a palya kozepen golnal, felidonel */
.pitchmsg {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%) scale(.9);
	font-family: var(--f-title); font-size: 30px;
	color: var(--gold); text-shadow: 4px 4px 0 rgba(10, 20, 48, .9);
	opacity: 0; pointer-events: none;
	transition: opacity .25s, transform .25s;
	text-align: center; max-width: 80%;
}
.pitchmsg.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pitchmsg.half, .pitchmsg.end { font-size: 20px; color: #fff; }
.pitchmsg.red, .pitchmsg.penalty { font-size: 18px; color: #ffb0a8; }

.mvbar { display: flex; gap: 10px; flex-wrap: wrap; }
.mvbar .pbtn { font-size: 12px; padding: 8px 13px; }

/* --- jegyzokonyv --- */
.mvfeed {
	display: flex; flex-direction: column; gap: 5px;
	max-height: 460px; overflow-y: auto;
	background: rgba(10, 20, 48, .55);
	border: 2px solid var(--ink); border-radius: 10px;
	padding: 10px 12px;
}
.mvline {
	display: grid; grid-template-columns: 40px 24px 1fr;
	align-items: baseline; gap: 6px;
	font-size: 13px; line-height: 1.4;
	padding: 4px 6px; border-radius: 7px;
	animation: mvin .25s ease;
}
@keyframes mvin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
.mvmin { font-family: var(--f-display); font-size: 10px; color: var(--muted); }
.mvico { font-size: 14px; }
.mvline.goal {
	background: rgba(47, 191, 91, .16);
	border-left: 3px solid var(--green);
	font-weight: 700;
}
.mvline.yellow { background: rgba(255, 200, 31, .12); border-left: 3px solid var(--gold); }
.mvline.red    { background: rgba(224, 85, 79, .16); border-left: 3px solid var(--red); }
.mvline.half, .mvline.end, .mvline.kickoff {
	background: rgba(255, 255, 255, .07);
	border-left: 3px solid #9fb4e8;
	font-family: var(--f-display); font-size: 11px; letter-spacing: .6px;
}
.mvline.penalty { background: rgba(255, 160, 40, .14); border-left: 3px solid #ffa028; }


/* a boltokban a tippdoboz a jobb oszlop szelessegehez igazodik */
.shopright .tipcard { margin: 16px 0 0; max-width: 100%; }
.shopright .tipsheet { padding: 12px 15px; font-size: 12.5px; }
/* a Grocery-ben felul all, ezert lentebb nem kell margo */
.shopright > .tipcard:first-child { margin: 0 0 16px; }


/* golpassz kiemelese a jegyzokonyvben */
.mvline.assist { background: rgba(126, 240, 164, .1); border-left: 3px solid #7ef0a4; }


/* a felallas-szerkesztoben is portre all a korongban */
.pslot .pdisc {
	width: 52px; height: 52px;
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
}
.pslot .pdisc .portraitbox { margin-top: 5px; }
.pslot .pname3 { margin-bottom: 2px; }


/* ---------------- sajat ikonok ---------------- */

/* a menugomb ikonja - a kepek 100px-esek, ezert kotelezo a meret */
.menu-btn .mi {
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	flex: none;
}
.mimg { width: 26px; height: 26px; object-fit: contain; display: block; }
.menu-btn { gap: 9px; }

/* arany es csillag a szoveg kozott */
.rico {
	width: 16px; height: 16px;
	object-fit: contain;
	vertical-align: -3px;
	display: inline-block;
}
.pres .rico { width: 15px; height: 15px; }
.itl .rico, .iprice .rico, .kv .rico { width: 15px; height: 15px; }


/* ---------------- sebessegvalaszto ---------------- */

.speedpick { position: relative; }
/* alapbol csukva - osztallyal, mert a .speedmenu display-e egyebkent
   felulirna a [hidden] alapertelmezett display:none-jat */
.speedmenu { display: none; }
.speedmenu.open {
	position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
	min-width: 176px;
	background: var(--side2);
	border: 2px solid var(--ink); border-radius: 10px;
	box-shadow: 4px 4px 0 rgba(10, 20, 48, .6);
	padding: 5px;
	display: flex; flex-direction: column; gap: 3px;
}
.speedmenu button {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	background: none; border: none; border-radius: 7px;
	color: var(--text);
	font-family: var(--f-display); font-size: 11px; letter-spacing: .6px;
	padding: 8px 10px; text-align: left;
}
.speedmenu button span { color: var(--muted); font-family: "Baloo", sans-serif; font-size: 12px; }
.speedmenu button:hover { background: rgba(255, 255, 255, .09); }
.speedmenu button.on { background: var(--gold); color: #2a1f04; }
.speedmenu button.on span { color: #5b4508; }


/* ---------------- meccsnezo: palya balra, jegyzokonyv jobbra ---------------- */

.mvmain {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 18px;
	align-items: start;
	margin-top: 14px;
}
@container jatek (max-width: 1100px) { .mvmain { grid-template-columns: 1fr; } }

.mvleft { min-width: 0; }
.mvleft .pitch { margin: 0 0 12px; max-height: none; }
.mvright { min-width: 0; }
.mvright .sub { margin: 0 0 8px; }
/* a jegyzokonyv a palya magassagaig er */
.mvright .mvfeed { max-height: 430px; }

/* Meccsnezo telefonon: fekvoben a palya es a jegyzokonyv egymas mellett
 * fer el, kulonben a jegyzokonyvig egy egesz kepernyot kell tekerni. */
.mobile-ui .mvmain { gap: 10px; margin-top: 10px; }
.mobile-ui .scoreboard { padding: 6px 10px; }
.mobile-ui .mvleft .pitch { max-height: 190px; margin: 0 0 8px; }
.mobile-ui .mvright .mvfeed { max-height: 190px; }
.mobile-ui.jw-720plus .mvmain { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }


/* ---------------- jelolesek a fej mellett ---------------- */

.pdot .phead { position: relative; display: block; line-height: 0; }
.pbadges {
	position: absolute; left: 100%; top: 50%;
	transform: translateY(-50%);
	margin-left: 3px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	pointer-events: none;
}
.pbadges i {
	font-style: normal;
	font-size: 11px; line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
/* a sarga lap egy kis teglalap, sotet konturral */
.pbadges .bg-yellow {
	width: 8px; height: 11px;
	background: #ffd21f;
	border: 1.5px solid var(--ink);
	border-radius: 2px;
}

/* kiallitva: lekerul a palyarol */
.pdot.off {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.4);
	transition: opacity .5s, transform .5s;
	pointer-events: none;
}


/* ---------------- esemenysav a menusavban ---------------- */

.eventbar {
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-line) 100%);
	border: 2px solid var(--ink); border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(10, 20, 48, .45);
	color: #2a1f04;
	padding: 8px 10px; margin-bottom: 8px;
	text-align: center;
}
.eventbar b {
	display: block;
	font-family: var(--f-display); font-size: 10px; letter-spacing: .8px;
	line-height: 1.3;
}
.eventbar span {
	display: block; margin-top: 3px;
	font-size: 11px; font-weight: 700; color: #5b4508;
}
.eventbar i { display: block; font-style: normal; font-size: 10px; color: #6b5410; }

/* admin gomb a menusav lababan */
.side-foot .adminlink {
	text-decoration: none; font-size: 20px; opacity: .75;
	line-height: 1;
}
.side-foot .adminlink:hover { opacity: 1; }


/* ---------------- Star Shop: csillagcsomagok ---------------- */

.packgrid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}
.pack {
	background: rgba(10, 20, 48, .55);
	border: 2px solid var(--ink); border-radius: 12px;
	box-shadow: 4px 4px 0 rgba(10, 20, 48, .5);
	padding: 18px 16px; text-align: center;
	display: flex; flex-direction: column; gap: 8px;
}
.pack:hover { border-color: var(--gold-line); }
.packstars { font-size: 15px; }
.packstars b { font-family: var(--f-title); font-size: 26px; color: var(--gold); }
.packstars .rico { width: 24px; height: 24px; vertical-align: -5px; }
.packname { font-family: var(--f-display); font-size: 11px; letter-spacing: .8px; }
.packprice { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.pack .pbtn { margin-top: auto; }

.paywarn {
	background: rgba(224, 85, 79, .16);
	border: 2px solid var(--red); border-radius: 10px;
	padding: 11px 14px; margin-bottom: 16px; font-size: 13px;
}

.ostate { font-size: 11px; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border); }
.ostate.ok   { background: rgba(47, 191, 91, .2);  color: #7ef0a4; border-color: var(--green); }
.ostate.wait { background: rgba(255, 200, 31, .16); color: var(--gold); border-color: var(--gold-line); }
.ostate.bad  { background: rgba(224, 85, 79, .18); color: #ffb0a8; border-color: var(--red); }

/* --- kupon bevaltas --- */
.couponbox {
	margin-top: 20px;
	background: rgba(10, 20, 48, .55);
	border: 2px solid var(--ink); border-radius: 12px;
	box-shadow: 4px 4px 0 rgba(10, 20, 48, .5);
	padding: 16px 18px;
}
.couponbox .sub { margin-bottom: 4px; }
.couponrow { display: flex; gap: 10px; flex-wrap: wrap; }
.couponrow input {
	flex: 1; min-width: 180px;
	background: rgba(10, 20, 48, .6);
	border: 2px solid var(--ink); border-radius: 10px;
	padding: 11px 14px; color: #fff; font-size: 16px;
	letter-spacing: 2px; text-transform: uppercase;
}
.couponrow input:focus { outline: none; border-color: var(--gold); }
.couponrow input::placeholder { letter-spacing: normal; text-transform: none; color: var(--muted); }
.couponrow .pbtn { flex: 0 0 auto; }
@container jatek (max-width: 560px) { .couponrow .pbtn { flex: 1 0 100%; } }


/* ================================================================
   STAR SHOP: ajanlatok, VIP, csillagcsomagok
   ================================================================ */

/* ket oszlop: balra az ajanlat, jobbra a VIP */
.shopcols {
	display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
	align-items: start; margin-top: 20px;
}
@container jatek (max-width: 1000px) { .shopcols { grid-template-columns: 1fr; } }
.shopcols .sub { margin-bottom: 10px; }
.shopnote {
	background: rgba(10, 20, 48, .5);
	border: 2px solid var(--ink); border-radius: 10px;
	padding: 16px 18px; color: var(--muted);
}

/* --- kezdocsomag --- */

.offer2 {
	max-width: none;
	background: linear-gradient(180deg, #1e4f8f 0%, #123566 100%);
	border: 3px solid var(--ink); border-radius: 14px;
	box-shadow: 7px 7px 0 rgba(10, 20, 48, .6);
	padding: 16px;
}
.offer2head {
	background: linear-gradient(180deg, #2f6fbf, #1c4a8c);
	border: 2px solid var(--ink); border-radius: 10px;
	font-family: var(--f-title); font-size: 22px; color: #fff;
	text-shadow: 2px 2px 0 rgba(10, 20, 48, .8);
	text-align: center; padding: 9px; margin-bottom: 14px;
}
.offer2grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@container jatek (max-width: 700px) { .offer2grid { grid-template-columns: repeat(2, 1fr); } }

.offitem {
	background: linear-gradient(180deg, #2a63ad, #17417a);
	border: 2px solid var(--ink); border-radius: 10px;
	padding: 8px; text-align: center;
	display: flex; flex-direction: column; gap: 6px;
}
.offtop {
	background: rgba(10, 20, 48, .45);
	border: 2px solid var(--ink); border-radius: 7px;
	font-family: var(--f-display); font-size: 11px; color: var(--gold);
	padding: 4px 6px;
}
.offtop .rico { width: 14px; height: 14px; vertical-align: -2px; }
.offpic { height: 74px; display: flex; align-items: center; justify-content: center; }
.offpic img { max-width: 70px; max-height: 70px; object-fit: contain; }
.offlab { font-size: 11px; color: #cfe0ff; }

.offer2foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 14px; flex-wrap: wrap;
}
.offtag {
	background: rgba(10, 20, 48, .5);
	border: 2px solid var(--ink); border-radius: 8px;
	font-size: 11px; color: #cfe0ff; padding: 7px 11px;
}
.pbtn.bigbuy {
	font-family: var(--f-title); font-size: 18px;
	padding: 9px 22px; letter-spacing: .5px;
}
.offdescr { color: #a8bde8; font-size: 12px; margin-top: 10px; text-align: center; }

/* --- VIP --- */

.vipnow {
	background: rgba(47, 191, 91, .14);
	border: 2px solid var(--green); border-radius: 10px;
	padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.vipcard {
	position: relative;
	background: linear-gradient(180deg, #7d1620 0%, #4d0d14 100%);
	border: 3px solid var(--ink); border-radius: 14px;
	box-shadow: 7px 7px 0 rgba(10, 20, 48, .6);
	overflow: hidden;
}
/* a szurkololany a doboz jobb alsó sarkaban all: a kep alja pont a doboz
   aljara esik, a tulnyulo reszt a kartya vagja le */
.vipgirl {
	position: absolute; right: -14px; bottom: 0;
	width: 190px;
	pointer-events: none; user-select: none;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
	z-index: 0;
}
@container jatek (max-width: 1240px) { .vipgirl { width: 150px; } }
@container jatek (max-width: 620px)  { .vipgirl { display: none; } }
.vipband {
	background: linear-gradient(180deg, #d3202f, #8d1420);
	border-bottom: 3px solid var(--ink);
	font-family: var(--f-title); font-size: 22px; color: #fff;
	text-shadow: 2px 2px 0 rgba(10, 20, 48, .8);
	text-align: center; padding: 11px;
}
.vipbody {
	position: relative; z-index: 1;
	padding: 16px 18px 18px;
	padding-right: 165px;              /* a lany helye */
}
@container jatek (max-width: 1240px) { .vipbody { padding-right: 130px; } }
@container jatek (max-width: 620px)  { .vipbody { padding-right: 18px; } }
.vipbody p  { font-size: 13.5px; line-height: 1.55; color: #ffe3e3; }
.vipbody ul { list-style: none; margin: 12px 0; }
.vipbody li {
	display: flex; align-items: center; gap: 7px;
	font-size: 14px; padding: 7px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, .15);
}
.vipbody li .rico { width: 17px; height: 17px; }
.vipbody b { color: var(--gold); }
.vipfoot {
	display: flex; align-items: center; justify-content: flex-start; gap: 12px;
	margin-top: 14px; flex-wrap: wrap;
}

/* --- csillagcsomagok --- */

.packpic { height: 78px; display: flex; align-items: center; justify-content: center; }
.packpic img { max-width: 62px; max-height: 62px; object-fit: contain; }


/* ================================================================
   PARBAJ-KEPERNYO
   ================================================================ */

.overlay.duelov { padding: 0; }
.duelscreen {
	position: relative;
	width: min(100%, 1000px);
	max-height: 96vh;
	display: flex; flex-direction: column;
	background: url(assets/bg/arena.jpg) center/cover;
	border: 3px solid var(--ink); border-radius: 14px;
	box-shadow: 10px 10px 0 rgba(10, 20, 48, .7);
	overflow: hidden;
}
/* sotet fatyol, hogy a szoveg olvashato maradjon a kepen */
.duelscreen::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10, 20, 48, .55), rgba(10, 20, 48, .8));
	pointer-events: none;
}

.duelfield {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr auto 1fr;
	gap: 14px; padding: 16px 16px 10px;
	align-items: start;
}
@container jatek (max-width: 760px) {
	.duelfield { grid-template-columns: 1fr 1fr; }
	.duelmid { grid-column: 1 / -1; grid-row: 2; }
}

.dside { min-width: 0; }
.dcard {
	position: relative;
	border: 3px solid var(--gold-line); border-radius: 10px;
	background: rgba(10, 20, 48, .55);
	overflow: hidden;
	height: 190px;
}
.dcard .portraitbox { margin: 0 auto; }
.dnolook { font-size: 60px; text-align: center; line-height: 190px; }
.dname {
	position: absolute; left: 0; right: 0; bottom: 6px;
	text-align: center;
	font-family: var(--f-display); font-size: 13px; color: var(--gold);
	text-shadow: 0 2px 4px #000, 0 0 8px #000;
}
.dname span { color: #fff; font-size: 11px; }

/* eletcsik a portre alatt */
.dhp {
	position: relative; height: 26px; margin-top: 8px;
	background: linear-gradient(180deg, #2a0f12, #4a1417);
	border: 3px solid var(--gold-line); border-radius: 7px;
	overflow: hidden;
}
.dhpfill {
	position: absolute; left: 0; top: 0; bottom: 0;
	background: linear-gradient(180deg, #e04a3e, #a01a14);
	transition: width .35s;
}
.dhp b {
	position: relative; display: block; text-align: center;
	font-family: var(--f-display); font-size: 12px; line-height: 20px;
	color: #fff; text-shadow: 0 1px 2px #000;
}

/* statlista */
.dstats {
	margin-top: 8px;
	background: rgba(10, 20, 48, .55);
	border: 2px solid var(--ink); border-radius: 9px;
	padding: 6px 10px;
}
.dstats div {
	display: flex; justify-content: space-between; gap: 10px;
	font-size: 12.5px; color: #cfe0ff;
	padding: 3px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dstats div:last-child { border-bottom: none; }
.dstats b { color: #fff; }

/* A parbajt a lovesero donti el, nem az ot stat - ezert ez all elol,
 * kiemelve. Az ellenfel statjai maskepp skalazodnak, mint a jatekose,
 * ezert onmagukban felrevezetoek lennenek. */
.dstats .dpow {
	border-bottom: 2px solid rgba(255, 255, 255, .16);
	padding-bottom: 5px; margin-bottom: 2px;
}
.dstats .dpow span { color: var(--gold); font-weight: 700; }
.dstats .dpow b { color: var(--gold); font-size: 13.5px; }

/* a labda es a felkialtas kozotte */
.duelmid { position: relative; width: 190px; height: 240px; }
@container jatek (max-width: 760px) { .duelmid { width: auto; height: 90px; } }
.dball {
	position: absolute; left: 50%; bottom: 0;
	font-size: 30px;
	transform: translate(-50%, 0);
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
}
.dshout {
	position: absolute; left: 50%; top: 40%;
	transform: translate(-50%, -50%) scale(.8);
	font-family: var(--f-title); font-size: 30px;
	color: var(--gold); text-shadow: 3px 3px 0 rgba(10, 20, 48, .9);
	opacity: 0; transition: opacity .18s, transform .18s;
	white-space: nowrap; pointer-events: none;
}
.dshout.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dshout.crit  { color: #ffd21f; }
.dshout.block { color: #9fd8ff; font-size: 22px; }
.dshout.miss  { color: #ffb0a8; font-size: 22px; }

/* also resz: jegyzokonyv es gombok */
.duelbottom {
	position: relative; z-index: 1;
	background: rgba(10, 20, 48, .72);
	border-top: 3px solid var(--ink);
	padding: 12px 16px 14px;
}
.duelbottom .fightlog {
	max-height: 150px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 4px;
}
.duelbottom .fight-foot {
	display: flex; justify-content: center; gap: 10px; margin-top: 12px;
}
.duelbottom .fight-foot .pbtn { min-width: 190px; }


/* ---------------- sebzes a fej folott ---------------- */

.dcard { position: relative; }
.dpop {
	position: absolute; left: 50%; top: 34%;
	transform: translate(-50%, 0);
	font-family: var(--f-title);
	font-size: 26px; line-height: 1.05;
	text-align: center; white-space: nowrap;
	text-shadow: 3px 3px 0 rgba(10, 20, 48, .95), 0 0 12px rgba(0, 0, 0, .7);
	pointer-events: none;
	animation: dpopup 1.4s ease-out forwards;
	z-index: 5;
}
.dpop b { display: block; font-size: 30px; }

@keyframes dpopup {
	0%   { opacity: 0; transform: translate(-50%, 12px) scale(.7); }
	18%  { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
	30%  { transform: translate(-50%, -2px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

.dpop.hit   { color: #ff8a7a; }
.dpop.crit  { color: #ffd21f; font-size: 15px; letter-spacing: .5px; }
.dpop.crit b { color: #ff6a5a; }
.dpop.block { color: #9fd8ff; font-size: 20px; }
.dpop.miss  { color: #cfd8ea; font-size: 20px; }


/* ---------------- 1v1: osszesitett ero savja ---------------- */

.apower { margin-top: 8px; }
.apowlab, .apowcmp {
	display: block; text-align: center;
	font-family: var(--f-display); font-size: 9px; letter-spacing: 1.2px;
	text-transform: uppercase; color: var(--muted);
}
.apowlab { margin-bottom: 4px; }
.apowcmp { margin-top: 4px; }
.apowcmp.better { color: var(--green); }
.apowcmp.worse  { color: var(--red); }

/* a csik szine is mutatja, erosebb-e nalad */
.abar.under span { background: linear-gradient(180deg, #4ee07f, #21a34c); }
.abar.over  span { background: linear-gradient(180deg, #e0554f, #96201b); }


/* ---------------- portrebolt ---------------- */

/* A megvett portre a sajat arc helyere kerul. Ugy all, ahogy a rajz keszult
 * (jobbra nezve) - itt nem tukrozunk, ellentetben a kupaellenfelekkel. */
.myportrait { display: block; margin: 0 auto; border-radius: 8px; }
.avatar .myportrait { width: 60px; }

.pshoptop {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap;
	margin: 14px 0 6px;
}
.pshopnow { display: flex; align-items: center; gap: 12px; }
.pshopcur {
	width: 88px; height: 88px; overflow: hidden;
	border: 2px solid var(--gold-line); border-radius: 10px;
	background: rgba(0, 0, 0, .3);
	display: flex; align-items: center; justify-content: center;
}
.pshopcur img { width: 100%; height: 100%; object-fit: cover; }
.pshopcur .portraitbox { flex: none; }

.pshophead { margin-top: 20px; }
.pshophead i {
	font-style: italic; font-weight: 400; font-size: 12px;
	color: var(--muted); margin-left: 8px;
}

.pshopgrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}
.pshop {
	background: rgba(0, 0, 0, .3);
	border: 2px solid var(--ink); border-radius: 11px;
	box-shadow: 3px 3px 0 rgba(7, 16, 22, .45);
	padding: 9px;
	display: flex; flex-direction: column; gap: 5px;
	text-align: center;
}
.pshop:hover { border-color: var(--gold-line); }
.pshop.own  { border-color: var(--gold-line); }
.pshop.on   { box-shadow: 3px 3px 0 rgba(7, 16, 22, .45), inset 0 0 0 2px var(--gold); }

.pshoppic {
	aspect-ratio: 1; overflow: hidden; border-radius: 8px;
	background: rgba(0, 0, 0, .35);
}
.pshoppic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pshopname { font-weight: 700; font-size: 12.5px; line-height: 1.25; }
.pshoppos { color: var(--muted); font-size: 11px; line-height: 1.3; }
.pshop .ibtn { margin-top: auto; width: 100%; padding: 5px; font-size: 12px; }
.pshoptag {
	margin-top: auto; padding: 5px; font-size: 11.5px; font-weight: 700;
	color: var(--gold);
}


/* ---------------- beallitasok ---------------- */

.setbody { max-width: 620px; }

.setnote {
	color: var(--muted); font-size: 12.5px; line-height: 1.5;
	margin: 6px 0 12px;
}

/* megerositett cim, illetve a meg megerositesre varo sav */
.setok {
	color: var(--green, #4bd07a); font-size: 13px; margin: 6px 0 14px;
}

.setwarn {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	background: rgba(255, 200, 31, .09);
	border: 1px solid rgba(255, 200, 31, .35);
	border-radius: 8px; padding: 12px 14px; margin: 6px 0 14px;
}
.setwarn p { margin: 0; font-size: 13px; flex: 1 1 240px; }

/* szoveges hivatkozasnak latszo gomb (belepolap) */
.linkbtn {
	display: block; width: 100%; margin-top: 10px;
	background: none; border: 0; cursor: pointer;
	color: var(--muted); font-size: 12.5px; text-decoration: underline;
	font-family: inherit;
}
.linkbtn:hover { color: var(--gold, #ffcc00); }

.setrow {
	display: grid; grid-template-columns: 150px 1fr;
	gap: 12px; align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}
.setrow > label { color: var(--muted); font-size: 12.5px; }
.setval { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setval i {
	font-style: normal; color: var(--muted); font-size: 11.5px; line-height: 1.4;
}

.setform {
	display: flex; flex-direction: column; gap: 10px;
	max-width: 380px; margin-bottom: 18px;
}
.setform label {
	display: flex; flex-direction: column; gap: 4px;
	font-size: 12.5px; color: var(--muted);
}
.setform input, .setform select, .setval select {
	padding: 8px 10px; font-size: 14px;
}
.setform .pbtn { align-self: flex-start; margin-top: 2px; }

/* nyelvvalaszto: nagy, jol elkulonulo gombok */
.langgrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 10px; max-width: 560px;
}
.langbtn {
	padding: 12px 14px;
	background: rgba(0, 0, 0, .3);
	border: 2px solid var(--ink); border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(7, 16, 22, .45);
	color: var(--gold); font-family: var(--f-display); font-size: 14px;
	cursor: pointer;
}
.langbtn:hover { border-color: var(--gold-line); }
.langbtn.on {
	border-color: var(--gold);
	box-shadow: 3px 3px 0 rgba(7, 16, 22, .45), inset 0 0 0 2px var(--gold);
}

/* ki-be kapcsolo */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
	position: absolute; inset: 0; cursor: pointer;
	background: rgba(0, 0, 0, .45);
	border: 2px solid var(--ink); border-radius: 24px;
	transition: background .15s;
}
.switch span::before {
	content: ''; position: absolute;
	width: 16px; height: 16px; left: 2px; top: 2px;
	background: var(--muted); border-radius: 50%;
	transition: transform .15s, background .15s;
}
.switch input:checked + span { background: rgba(240, 194, 64, .3); }
.switch input:checked + span::before { transform: translateX(22px); background: var(--gold); }

/* ------------------------------------------------ arc a beállításokban
 * A portré balra, a léptető sorok mellé. Szűk kijelzőn egymás alá kerül. */
.facewrap {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.facecol { flex: 1 1 260px; min-width: 240px; }

.facebtns {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}

/* ------------------------------------------- elkeszult munka jelzese
 * A Training és a Coach gombja addig villog, amíg a jutalmat át nem
 * vesszük - így nem kell benyitni, hogy kiderüljön, lejárt-e. */
@keyframes doneglow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); }
	50%      { box-shadow: 0 0 0 3px rgba(255, 204, 0, .75); }
}

.menu-btn.done {
	animation: doneglow 1.1s ease-in-out infinite;
	border-color: var(--gold, #ffcc00);
}

.bld.done .blabel {
	animation: doneglow 1.1s ease-in-out infinite;
	border-radius: 6px;
	color: var(--gold, #ffcc00);
}

/* A visszaszámláló szűkebb, mint a név: ne ugráljon tőle a gomb. */
.menu-btn .mtext { display: inline-block; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
	.menu-btn.done, .bld.done .blabel { animation: none; }
	.menu-btn.done { background: rgba(255, 204, 0, .18); }
}

/* A járművel lerövidült küldetésidő: az eredeti áthúzva, pirosan marad ott,
 * hogy látszódjon, mennyit spórol - utána fehéren a tényleges idő. */
.qslow {
	color: var(--red, #ff6b5e);
	opacity: .85;
	margin-right: 6px;
	font-weight: 600;
}

/* --------------------------------------------------------- csapatchat-fiók
 * A térkép jobb szélén ül, egy nyíllal húzható ki. Csukva csak a fül
 * látszik, hogy ne vegyen el helyet a pályából. */
/* A képernyőhöz tapad, nem a térképhez: így panel fölött is elérhető.
 * A térkép épületei 100 fölötti rétegszámot kapnak, a panel 1500-at - ezért
 * kell ennél is feljebb ülnie, különben a ház rárajzolódik. */
.chatdrawer {
	position: fixed;
	top: 74px;
	right: 0;
	z-index: 1800;
	display: flex;
	align-items: flex-start;
	transform: translateX(calc(100% - 30px));
	transition: transform .25s ease;
}

/* Új üzenet: a fül ugyanúgy villog, mint az elkészült munka gombja. */
.chatdrawer.unread .cdtab {
	animation: doneglow 1.1s ease-in-out infinite;
	background: #2a3a1c;
}

.chatdrawer.open { transform: translateX(0); }

.cdtab {
	flex: 0 0 auto;
	width: 30px;
	height: 68px;
	margin-top: 14px;
	border: 1px solid #2b3d63;
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: #15213a;
	color: #ffcc00;
	font-size: 18px;
	cursor: pointer;
}

.cdtab:hover { background: #1b2a49; }

.cdbody {
	width: 380px;
	max-width: 78cqw;
	background: rgba(14, 23, 41, .96);
	border: 1px solid #2b3d63;
	border-radius: 10px 0 0 10px;
	padding: 12px 12px 10px;
}

.cdbody h3 {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: 1px;
	color: #ffcc00;
}

.cdbody .chatbox {
	height: 340px;
	overflow-y: auto;
	margin-bottom: 8px;
}

@container jatek (max-width: 780px) {
	.cdbody { width: 260px; }
	.cdbody .chatbox { height: 190px; }
}

/* ------------------------------------------------------- csapat adatlapja
 * A címke és az érték egymás mellett, balra rendezve: széles panelen a két
 * szélre húzva olvashatatlanul messze kerültek egymástól. */
.tvfacts { margin-bottom: 4px; }

.tvrow {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 5px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.tvrow > span {
	flex: 0 0 170px;
	color: var(--muted);
}

.tvrow > b { font-weight: 700; }

.tvdescr {
	margin: 0 0 14px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, .04);
	border-left: 3px solid var(--gold, #ffcc00);
	border-radius: 0 8px 8px 0;
	line-height: 1.5;
	white-space: pre-wrap;
}

.tvbuilds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 8px;
}

.tvbuild {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, .04);
	border-radius: 8px;
}

.tvbico { font-size: 20px; }
.tvbuild > div { flex: 1 1 auto; min-width: 0; }
.tvbuild b { display: block; }
.tvblvl { color: var(--muted); font-size: 12px; }
.tvbeff { flex: 0 0 auto; color: var(--muted); font-size: 12px; text-align: right; }
.tvgave { white-space: nowrap; }

@container jatek (max-width: 640px) {
	.tvrow > span { flex-basis: 120px; }
	.tvbeff { display: none; }
}

/* A csillagbolt és a szerencsekerék saját háttere. */
.panel.bg-starshop::before { background-image: url(assets/bg/starshop.jpg); }
.panel.bg-betting::before  { background-image: url(assets/bg/betting.jpg); }

/* ------------------------------------------------------------ gól a pályán
 * Kicsiből nő nagyra, egy pillanatra megáll, majd áttűnéssel eltűnik.
 * Összesen három másodperc - a korábbi felirat túl hamar eltűnt ahhoz,
 * hogy a játékos észrevegye. */
.goalsplash {
	position: absolute;
	left: 50%;
	top: 44%;
	width: min(72%, 520px);
	height: auto;
	transform: translate(-50%, -50%) scale(.2);
	opacity: 0;
	pointer-events: none;
	z-index: 30;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
	animation: goalpop 3s cubic-bezier(.2, .9, .3, 1) forwards;
}

@keyframes goalpop {
	0%   { transform: translate(-50%, -50%) scale(.2);  opacity: 0; }
	18%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
	26%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
	70%  { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1.14); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.goalsplash { animation: goalfade 3s linear forwards; transform: translate(-50%, -50%); }
	@keyframes goalfade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}

/* Hangerő-csúszka: teljesen lehúzva néma. */
.volslider {
	flex: 1 1 180px;
	max-width: 260px;
	accent-color: var(--gold, #ffcc00);
	cursor: pointer;
}

.volnum {
	font-style: normal;
	min-width: 44px;
	text-align: right;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- a bíró
 * Amikor sípol, alulról felkúszik a pálya jobb szélén, majd vissza.
 * A pálya közepét nem takarja: ott folyik a játék. */
.refsplash {
	position: absolute;
	right: 3%;
	bottom: 0;
	height: 78%;
	width: auto;
	pointer-events: none;
	z-index: 28;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
	transform: translateY(100%);
	animation: refslide 2.6s cubic-bezier(.25, .9, .3, 1) forwards;
}

@keyframes refslide {
	0%   { transform: translateY(100%); }
	18%  { transform: translateY(0); }
	78%  { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.refsplash { animation: reffade 2.6s linear forwards; transform: translateY(0); }
	@keyframes reffade { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---------------- fiok: karaktervalaszto, eszkozok ---------------- */

/* A belepolaphoz hasonlo kartya, de a szelesebb tartalomhoz (valaszto,
 * kotelezo jelszocsere). A login-box mellett all meg, nem helyette. */
.login-card {
	width: 100%;
	background: rgba(15, 40, 48, .93);
	border: 2px solid var(--gold-line);
	border-radius: 14px;
	padding: 30px;
}
.login-card .secttitle { font-size: 22px; margin: 0 0 6px; }
.login-card .setnote { margin: 0 0 16px; }

.charpick-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.charpick {
	display: flex; gap: 12px; align-items: center; text-align: left;
	background: var(--btn); border: 1px solid var(--border);
	border-radius: 12px; padding: 12px; cursor: pointer;
	color: var(--text); transition: border-color .1s, background .1s;
}
.charpick:hover:not(:disabled) { border-color: var(--gold); background: var(--btn-hi); }
.charpick:disabled { opacity: .55; cursor: default; }
.charpick-pv {
	width: 76px; height: 76px; flex: none;
	border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.25);
}
.charpick-pv svg, .charpick-pv img { width: 100%; height: 100%; }
.charpick-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.charpick-info b { font-size: 15px; }
.charpick-info span { font-size: 13px; color: var(--muted); }
.charpick-ban { color: var(--red) !important; font-weight: 700; }
.charpick.banned { border-color: var(--red); }

.devlist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.devrow {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--btn); border: 1px solid var(--border);
	border-radius: 10px; padding: 10px 12px;
}
.devrow.current { border-color: var(--gold-line); }
.devinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.devinfo b { font-size: 14px; }
.devnow {
	font-size: 11px; color: #221a04; background: var(--gold);
	border-radius: 6px; padding: 1px 7px; font-weight: 700; margin-left: 4px;
}
.pbtn.small { padding: 6px 12px; font-size: 13px; }

/* ---------------- hetvegi esemenyek: felugro + belepolap ---------------- */
.eventpop { text-align: center; }
.eventpop .evpop-ico { font-size: 54px; line-height: 1; margin-bottom: 4px; }
.eventpop h2 { margin: 2px 0 6px; }
.eventpop .evpop-tag {
	display: inline-block; margin-bottom: 12px;
	font-family: var(--f-display); font-size: 10px; letter-spacing: 1.4px;
	text-transform: uppercase; color: #221a04;
	background: var(--gold); border: 2px solid var(--ink); border-radius: 999px;
	padding: 3px 12px;
}
.eventpop .evpop-when {
	margin-top: 12px; font-size: 12px; color: var(--muted);
}

/* a belepolap esemenysavja */
/* nincs futo esemeny: a [hidden] gyoznie kell a display:flex felett,
   kulonben ures arany buborek marad a belepolapon */
.eventland[hidden] { display: none; }
.eventland {
	display: flex; align-items: center; gap: 16px;
	/* a fejlec ala, a belepoblokk fole: kis kihagyas fent-lent es ket oldalt */
	width: calc(100% - 32px); max-width: 860px; margin: 16px auto 22px;
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-line) 100%);
	border: 2px solid var(--ink); border-radius: 14px;
	box-shadow: 4px 4px 0 rgba(10, 20, 48, .4);
	padding: 14px 20px; color: #2a1f04;
}
.eventland .evland-ico { font-size: 40px; line-height: 1; flex: none; }
.eventland .evland-txt { text-align: left; }
.eventland .evland-txt b {
	display: block; font-family: var(--f-display); font-size: 15px;
	letter-spacing: .5px;
}
.eventland .evland-txt b em {
	font-style: normal; font-family: var(--f-body, inherit);
	font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
	color: #221a04; background: rgba(255, 255, 255, .5);
	border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}
.eventland .evland-txt span { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: #5b4508; }
.eventland .evland-txt i { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: #6b5410; }

/* coaching csuszka: Coaching Pro csillagszamlalo */
.shift-stars {
	text-align: center; margin: 2px 0 6px;
	font-weight: 800; color: var(--gold);
	font-variant-numeric: tabular-nums;
}

/* ---------------- belepolap: Events blokk ---------------- */
.evgrid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@container lap (max-width: 640px) { .evgrid { grid-template-columns: 1fr; } }
.evcard {
	display: flex; align-items: flex-start; gap: 12px;
	border: 2px solid var(--navy);
	box-shadow: 4px 4px 0 rgba(22, 41, 92, .85);
	padding: 12px 14px; background: #fff;
}
.evcard-ico { font-size: 30px; line-height: 1; flex: none; }
.evcard b { display: block; font-family: var(--f-display); font-size: 13px; letter-spacing: .6px; color: var(--navy); }
.evcard p { font-size: 12.5px; line-height: 1.45; color: #33477e; margin-top: 4px; }

/* ---------------- Profession (Mastery) ---------------- */
.mtop{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin:6px 0 14px;}
.mstat{text-align:center;min-width:88px;}
.mstat b{display:block;font-family:var(--f-title);font-size:22px;color:var(--gold);line-height:1;}
.mstat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;}
.mtrees{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@container jatek(max-width:720px){.mtrees{grid-template-columns:1fr}}
.mtree{background:#17244180;background:rgba(10,20,48,.35);border:2px solid #0a1730;
 border-radius:12px;padding:14px;}
.mtree.career{border-color:#5b4508;}
.mthead{display:flex;align-items:center;gap:9px;}
.mtico{font-size:24px;}
.mthead b{font-family:var(--f-display);font-size:15px;letter-spacing:1px;color:var(--gold);
 text-transform:uppercase;}
.mtspent{margin-left:auto;font-size:11.5px;color:var(--muted);}
.mtsub{font-size:11.5px;color:var(--muted);margin:4px 0 10px;}
.mstage{border-top:1px dashed #2b3d63;padding:10px 0;}
.mstage:first-of-type{border-top:0;}
.mstagelock{font-size:11px;color:#ffd479;letter-spacing:.3px;margin-bottom:7px;}
.mnodes{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@container jatek(max-width:420px){.mnodes{grid-template-columns:1fr}}
.mnode{background:#101c34;border:2px solid #2b3d63;border-radius:9px;padding:9px 10px;cursor:pointer;
 transition:transform .05s;}
.mnode:hover{border-color:var(--goldln);}
.mnode:active{transform:translate(1px,1px);}
.mnode.max{border-color:#3b7d3b;background:#12261a;cursor:default;}
.mnode.off{opacity:.4;filter:grayscale(.55);cursor:not-allowed;}
.mnt{display:flex;align-items:center;gap:6px;}
.mnico{font-size:17px;}
.mnico .mimg-node{width:22px;height:22px;object-fit:contain;display:block;}
.mtico .mimg-node{width:26px;height:26px;object-fit:contain;display:block;}
.mnt b{font-size:12px;font-weight:700;letter-spacing:.2px;color:#eaf0ff;}
.meff{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.35;}
.meff b{color:#eaf0ff;}
.mmax{color:#7f92bd;}
.mpips{display:flex;gap:3px;margin-top:7px;align-items:center;}
.mpip{width:12px;height:7px;border-radius:2px;background:#26375c;border:1px solid #0a1730;}
.mpip.on{background:var(--gold);}
.mrc{margin-left:auto;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.mfoot{margin-top:12px;text-align:center;}
.mreset{font-size:12px;}

/* ---------------- Derby (csapatharc) ---------------- */
.derbyintro { text-align: center; padding: 6px 4px; }
.derbyintro .rbig { font-size: 46px; line-height: 1; }
.derbyintro h3 { font-family: var(--f-title); color: var(--gold); margin: 6px 0; }
.derbylineup { margin: 14px 0; }
.derbylineup h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; }
.derbychips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dchip { background: rgba(0,0,0,.25); border: 1px solid var(--gold-line); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--text); }
.dchip.ai { opacity: .7; border-color: var(--border); }
.dchip i { color: var(--gold); font-style: normal; font-weight: 800; margin-left: 4px; }

/* A derby ugyanugy nez ki, mint az 1v1 (arena hatter, portre + eletcsik +
 * statmezo), csak a statmezo keskenyebb, es a ket sorbaallas ott van mellette
 * balra/jobbra. */
.derbyov { z-index: 3000; }
.derbyscreen {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	background: url(assets/bg/arena.jpg) center/cover;
}
.derbyscreen::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,20,48,.55), rgba(10,20,48,.82));
}
.derbytop { position: relative; z-index: 1; flex: 1; display: grid;
	grid-template-columns: 156px minmax(0,1fr) 156px; min-height: 0; }
@container jatek (max-width: 820px) { .derbytop { grid-template-columns: 104px minmax(0,1fr) 104px; } }
.derbytop .duelfield { position: relative; display: grid;
	grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 14px 12px 8px; align-items: start; }

/* a derby statmezoje keskenyebb, mint az 1v1-e, hogy legyen hely a sorbaallasnak */
.derbytop .dstats { max-width: 230px; margin: 8px auto 0; }
.derbytop .dcard { height: 168px; }

.droster { display: flex; flex-direction: column; gap: 4px; padding: 12px 6px;
	overflow: auto; background: rgba(0,0,0,.32); }
.drchip { display: flex; align-items: center; gap: 6px; justify-content: space-between;
	background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 7px;
	padding: 5px 8px; font-size: 11.5px; color: var(--text); }
.drchip .drname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drchip .drlvl { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.drchip.up { border-color: var(--gold); background: rgba(240,194,64,.16); box-shadow: 0 0 0 1px var(--gold) inset; }
.drchip.dead { opacity: .35; text-decoration: line-through; }
.drchip.dead .drlvl { color: var(--muted); }

.fduelhead { text-align: center; color: var(--muted); font-size: 11px; padding: 3px 0; opacity: .85; }

/* Telefonon a derby ugyanabba a csapdaba esne, mint az 1v1: a sajat
 * .derbytop szabalyai kesobb allnak, mint a .mobile-ui-s parjaik, ezert
 * itt kell megismetelni oket. */
.mobile-ui .derbytop { grid-template-columns: 84px minmax(0, 1fr) 84px; }
.mobile-ui .derbytop .duelfield {
	min-height: 0; overflow-y: auto;
	gap: 8px; padding: 6px 8px 4px;
}
.mobile-ui .derbytop .dcard { height: auto; padding: 4px; }
.mobile-ui .derbytop .dstats {
	max-width: none; margin: 4px 0 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
	font-size: 11px; padding: 4px 8px;
}
.mobile-ui .derbytop .dstats .dpow { grid-column: 1 / -1; }
.mobile-ui .droster { padding: 8px 4px; gap: 3px; }
.mobile-ui .drchip { font-size: 10.5px; padding: 4px 6px; gap: 4px; }

/* derby raid-progresszió (intro) */
.derbyraid { background: rgba(0,0,0,.25); border: 1px solid var(--gold-line); border-radius: 10px;
	padding: 10px 14px; margin: 10px auto 14px; max-width: 440px; }
.draidtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.draidtop b { color: var(--gold); font-size: 15px; white-space: nowrap; }
.draidbar { height: 8px; background: #26375c; border: 1px solid #0a1730; border-radius: 4px; margin: 8px 0 4px; overflow: hidden; }
.draidbar > div { height: 100%; background: var(--gold); }

/* --- csatlakozasi feltetelek, jelentkezok, meghivok --- */
.reqrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.reqchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
	padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06);
	border: 1px solid var(--gold-line); color: var(--muted); white-space: nowrap; }
.reqchip.open { color: #7bd88f; }
.reqchip.lock { color: var(--gold); border-color: var(--gold); }
.pbtn.xsmall { padding: 3px 9px; font-size: 12px; }
.sub2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--muted); margin: 0 0 6px; }
.tsquad tr.pendingrow { opacity: .5; font-style: italic; }
.xbtn { background: none; border: none; color: #e0644d; cursor: pointer;
	font-size: 13px; padding: 0 4px; }
.xbtn:hover { color: #ff7a60; }
.applylist { display: flex; flex-direction: column; gap: 6px; }
.applyrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 6px 8px; background: rgba(255,255,255,.04); border-radius: 8px; font-size: 13px; }
.applyrow .muted { font-size: 12px; }
.item.invite { border-color: var(--gold); }

/* feltetel-szerkeszto */
.reqeditor .clabel { display: flex; justify-content: space-between; align-items: center;
	gap: 10px; margin: 8px 0; font-size: 14px; }
.reqeditor .clabel input[type=number] { width: 90px; }
.reqeditor .invtoggle { border-bottom: 1px solid var(--gold-line); padding-bottom: 10px; }
.reqeditor .reqlabel { margin: 10px 0 6px; font-size: 13px; color: var(--muted); }
.reqeditor .posgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.reqeditor .poschk { display: flex; align-items: center; gap: 5px; justify-content: center;
	padding: 6px 4px; border: 1px solid var(--gold-line); border-radius: 8px;
	font-size: 12px; cursor: pointer; user-select: none; }
.reqeditor .poschk.on { background: var(--gold); color: #1a1206; border-color: var(--gold); font-weight: 600; }
.reqeditor .poschk input { accent-color: var(--gold); }

/* ================================================================
   MOBIL: a jatek fekvo modra keszult
   Allo tajolasu telefonon a jatek helyett "fordisd el" felirat all;
   fekvobe forditva a media query megszunik, es a jatek elojon (nincs
   ujratoltes). A (pointer: coarse) miatt asztali keskeny ablak nem kapja. */
#rotate-hint { display: none; }

/* A tabla kinezete - hogy hol jelenik meg, azt lentebb ket kulon szabaly
 * dontí el: valodi allo telefonon, es a nezetvalto allo elonezeteben. */
#rotate-hint .rh-box { max-width: 340px; }
#rotate-hint .rh-ico {
	font-size: 68px; line-height: 1; margin-bottom: 14px;
	display: inline-block; transform: rotate(90deg);
	animation: rh-tilt 1.8s ease-in-out infinite;
}
#rotate-hint p { font-size: 17px; line-height: 1.5; margin: 6px 0; font-weight: 700; }
#rotate-hint .rh-sub { font-size: 14px; font-weight: 500; color: #9fb0d0; }
#rotate-hint .rh-count {
	margin-top: 16px; font-size: 13px; font-weight: 700;
	letter-spacing: .6px; color: var(--gold, #ffcc00);
}

@media (orientation: portrait) and (max-width: 900px) and (pointer: coarse) {
	/* A .rot-ok akkor kerul fel, ha a visszaszamlalas lejart vagy a jatekos
	 * elforgatta a keszuleket - onnantol allo helyzetben is jatszhat. */
	html.in-game:not(.rot-ok) #app { display: none !important; }
	html.in-game:not(.rot-ok) #rotate-hint {
		display: flex; position: fixed; inset: 0; z-index: 99999;
		align-items: center; justify-content: center; text-align: center;
		padding: 28px;
		background: linear-gradient(180deg, #10214a 0%, #0a1730 100%);
		color: #e8ecf5;
	}
}

/* Az allo telefon elonezete a nezetvaltobol.
 *
 * Valodi allo telefonon a jatek helyett a "fordisd el" tabla all - az
 * elonezetnek ugyanezt kell mutatnia, kulonben olyat mutatna, amit a
 * jatekos sosem lat. A tabla ilyenkor a KERETBE kerul (a applyView() teszi
 * at oda), nem a bongeszoablakot fedi le. */
html.view-framed.view-portrait.in-game:not(.rot-ok) #rotate-hint {
	display: flex; position: absolute; inset: 0; z-index: 60;
	align-items: center; justify-content: center; text-align: center;
	padding: 28px;
	background: linear-gradient(180deg, #10214a 0%, #0a1730 100%);
	color: #e8ecf5;
}
html.view-framed.view-portrait.in-game #rotate-hint .rh-ico { font-size: 54px; }
html.view-framed.view-portrait.in-game #rotate-hint p { font-size: 15px; }
@keyframes rh-tilt {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(90deg); }
}

/* ---------------- kassza: ki mennyit adott ---------------- */

/* A keret minden tagja szerepel, csillag szerint sorban. Gorgetheto, hogy
   egy nepes csapat se tolja szet a chat alatti oszlopot. */
.donorlist {
	max-height: 168px; overflow-y: auto;
	background: rgba(0, 0, 0, .3);
	border: 1px solid var(--border); border-radius: 8px;
	padding: 6px 8px;
	display: flex; flex-direction: column; gap: 2px;
	font-size: 12px;
}
.donorrow { display: flex; justify-content: space-between; gap: 10px; line-height: 1.5; }
.donorrow .dname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donorrow .dval { color: var(--muted); white-space: nowrap; }
.donorrow.me .dname { color: var(--gold); font-weight: 600; }

/* ---------------- lablec es a "papir" oldalak (Wiki, Terms, ...) --------- */

/* A Discord gomb a fejlecben: ugyanaz a meret, mint a tobbi navigacios
   gomb, csak kiemelve - link, ezert kell a sajat betutipus es igazitas. */
.topnav .dcbtn {
	font-family: var(--f-display);
	font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
	color: #fff; text-decoration: none;
	padding: 8px 13px; border-radius: 7px;
	background: #5865f2;                    /* Discord-kek */
	display: inline-flex; align-items: center;
}
.topnav .dcbtn:hover { background: #6b76f5; }
/* amig nincs meghivo link, nem kattinthato */
.topnav .dcbtn.off, .sflinks .off { opacity: .45; cursor: default; }

.sitefoot {
	margin-top: 40px;
	padding: 22px 26px 30px;
	background: var(--navy);
	border-top: 4px solid #0e1c40;
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
	justify-content: space-between;
}
.sfbrand { display: flex; align-items: center; gap: 12px; }
.sfbrand img { width: 30px; }
.sfbrand span { color: #9fb0d8; font-size: 12px; }
.sflinks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sflinks button, .sflinks a, .sflinks span {
	background: none; border: none;
	font-family: var(--f-display);
	font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
	color: #cbd8fb; text-decoration: none;
	padding: 8px 11px; border-radius: 7px;
}
.sflinks button:hover, .sflinks a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.sflinks .sfdc { background: #5865f2; color: #fff; }
.sflinks .sfdc:hover { background: #6b76f5; }

/* A papir oldalak: egy hasab, nyugodt sorkoz, semmi diszites - ezeket
   olvasni kell, nem nezegetni. */
.docwrap { max-width: 900px; margin: 0 auto; padding: 30px 22px 10px; }
.docsheet {
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--gold-line); border-radius: 12px;
	padding: 30px 34px 36px;
	line-height: 1.65; font-size: 14px; color: #dfe6f7;
}
.docsheet h1 {
	font-family: var(--f-display); color: var(--gold);
	font-size: 24px; margin: 0 0 6px;
}
.docsheet h2 {
	font-family: var(--f-display); color: var(--gold);
	font-size: 17px; margin: 30px 0 8px;
	border-bottom: 1px solid var(--gold-line); padding-bottom: 6px;
}
.docsheet h3 { font-size: 14px; color: #fff; margin: 20px 0 6px; }
.docsheet p { margin: 0 0 10px; }
.docsheet ul { margin: 0 0 12px; padding-left: 20px; }
.docsheet li { margin-bottom: 5px; }
.docsheet b { color: #fff; }
.docsheet .docintro { color: #a9b8dc; font-style: italic; margin-bottom: 18px; }

/* A tablazatok kicsi kepernyon is elferjenek: sajat gorgeto keret. */
.docsheet .doctable {
	width: 100%; border-collapse: collapse;
	margin: 0 0 14px; display: block; overflow-x: auto;
}
.docsheet .doctable th, .docsheet .doctable td {
	border: 1px solid var(--border); padding: 7px 10px;
	text-align: left; vertical-align: top;
}
.docsheet .doctable th { color: var(--gold); font-weight: 600; white-space: nowrap; }

/* A papir oldalakon a lablec akkor is alul uljon, ha keves a szoveg. */
.login-wrap.docpage {
	display: flex; flex-direction: column;
	/* A .login-wrap fuggolegesen is kozepre igazitana a tartalmat. Egy hosszu
	   lapnal ez a lap TETEJET tolja ki a gorgetheto teruletbol - onnan mar nem
	   lehet visszagorgetni. Ezert felulrol kezdunk, es teljes szelesseget
	   engedunk; a lablec zarja a lapot. */
	justify-content: flex-start;
	align-items: stretch;
	padding-bottom: 0;
}
.login-wrap.docpage .docwrap { flex: 1 0 auto; width: 100%; }
.login-wrap.docpage .sitefoot { flex: none; }
/* kozepkezdes felirata: halkabb, mint a felido - csak jelzes */
.pitchmsg.kickoff { font-size: 17px; color: #d8e4ff; }

/* ---------------- vilagvalaszto a szamok felett ---------------- */

/* Csak akkor latszik, ha tobb vilag van; a szamsav fole kerul, jobbra
   igazitva, hogy ne vonja el a figyelmet a szamokrol. */
.worldpick { display: flex; justify-content: flex-end; margin: 0 auto -6px; max-width: 1000px; }
.worldpick label {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--f-display);
	font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
	color: #5c76b8;
}
.worldpick select {
	background: #fff;
	border: 2px solid var(--navy); border-radius: 6px;
	color: var(--navy);
	font-family: "Baloo", system-ui, sans-serif;
	font-size: 13px; letter-spacing: 0; text-transform: none;
	padding: 5px 8px;
}
.worldpick select:focus { outline: none; border-color: var(--grass); }

/* ================================================================ mobil
 *
 * Keskeny kepernyon (telefon fekvo modban is) a 250 pixeles menusav a
 * szelesseg harmadat vinne el, es a husz gombbol harom latszana. Ezert ott
 * a menusav elbujik a bal szel moge, es egy bal felso gombbal jon elo, az
 * egesz kepernyot betoltve.
 *
 * Alapbol - szeles kepernyon - ezek a reszek nem leteznek a lapon.
 */

.mobbar, .mobdim, .mobclose { display: none; }

/* A mobil elrendezest a .mobile-ui osztaly kapcsolja a <html>-en. Azert
 * osztaly es nem medialekerdezes, hogy a nezetet kezzel is at lehessen
 * kapcsolni (jobb felso gomb) - igy asztali gepen is meg lehet nezni,
 * mit lat a telefonos jatekos. A dontest az app.js hozza: a keperyo
 * merete VAGY a jatekos valasztasa. */
/* --- felso sav: menugomb, nev, arany, csillag --- */

.mobile-ui .mobbar {
	position: fixed; inset: 0 0 auto 0; z-index: 60;
	height: 46px;
	display: flex; align-items: center; gap: 10px;
	padding: 0 10px;
	background: linear-gradient(180deg, var(--side) 0%, var(--side2) 100%);
	border-bottom: 2px solid var(--gold-line);
}

.mobile-ui .mobwho { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.mobile-ui .mobwho b {
	font-size: 13px; color: var(--gold);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mobile-ui .mobwho i { font-style: normal; font-size: 10px; color: var(--muted); }

.mobile-ui .mobres { margin-left: auto; display: flex; gap: 12px; font-size: 13px; white-space: nowrap; }

.mobile-ui .mobres b { color: var(--gold); }

/* A hamburger: harom vonal, nyitott allapotban X-be fordul. */

.mobile-ui .mobmenu {
	flex: none; width: 38px; height: 34px;
	display: flex; flex-direction: column; justify-content: center; gap: 5px;
	background: var(--btn); border: 1px solid var(--gold-line); border-radius: 8px;
	padding: 0 8px;
}

.mobile-ui .mobmenu span {
	display: block; height: 2px; background: var(--gold); border-radius: 2px;
	transition: transform .18s, opacity .18s;
}

.mobile-ui .mobmenu.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.mobile-ui .mobmenu.on span:nth-child(2) { opacity: 0; }

.mobile-ui .mobmenu.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- a jatekter a sav ala kerul --- */

.mobile-ui #app { padding-top: 46px; }

/* A jatekter a merce, nem a bongeszoablak.
 *
 * A jatekon beluli toresponok `@container jatek (...)` alakban vannak, es
 * ehhez az elemhez merik magukat. Igy a keretes fejlesztoi elonezet - ami
 * egy 390 keppontos telefont mutat egy 1400-as ablakban - pontosan azt
 * mutatja, amit a jatekos lat. Media-lekerdezessel ez nem volt igaz, es
 * tobb "hibat" is emiatt jelentettunk. */
#app { container-type: inline-size; container-name: jatek; }

/* A terkep epuletei a melysegi rendezestol 200-570 kozotti retegszamot
 * kapnak, es enelkul a menu fole rajzolodnanak. Nem nagyobb szamokkal
 * versenyzunk veluk, hanem sajat retegbe zarjuk az egesz terkepet -
 * onnantol a belso szamaik csak egymashoz kepest szamitanak. */

.mobile-ui .map-wrap { z-index: 0; }

/* A terkep szelessege a kepernyo magassagabol szamol (142.857vh), de
 * telefonon a felso sav elvesz belole, igy a kep magasabb lett a helynel,
 * es fent-lent levagodott - epp a Grocery es a helikopter. Itt nem az
 * ablakhoz, hanem a terkep sajat helyehez meretezunk. */
.mobile-ui .map-wrap { container-type: size; }
@supports (width: 1cqh) {
	.mobile-ui .map { width: min(100%, calc(1.428571 * 100cqh)); }
}

/* A terkep aranya fix, igy szeles keszuleken ket oldalt hely marad. Csupasz
 * sotet sav helyett ugyanaz a kep all ott elmosva - a terkep igy is teljes. */
.mobile-ui .map-wrap::before {
	content: ''; position: absolute; inset: -24px; z-index: 0;
	background-size: cover; background-position: center;
	filter: blur(18px) brightness(.4) saturate(.8);
	pointer-events: none;
}
.mobile-ui .map-wrap:has(.map.day)::before   { background-image: url(assets/bg_day.png); }
.mobile-ui .map-wrap:has(.map.night)::before { background-image: url(assets/bg_night.png); }
.mobile-ui .map { z-index: 1; }

/* --- a menusav teljes kepernyos lapka --- */

.mobile-ui .sidebar {
	position: fixed; inset: 46px 0 0 0; z-index: 55;
	width: auto; min-width: 0;
	transform: translateX(-100%);
	transition: transform .22s ease;
	padding: 12px;
	gap: 8px;
	border-right: none;
}

.mobile-ui .sidebar.open { transform: none; }

/* A gombok ket hasabban: igy a husz menupont gorgetes nelkul elfer. */

.mobile-ui .sidebar .menu-btn {
	font-size: 12px; padding: 12px 10px;
}

.mobile-ui .sidebar { flex-flow: row wrap; align-content: flex-start; }

.mobile-ui .eventbar,
.mobile-ui .side-foot,
.mobile-ui .mdivider { width: 100%; }

/* A logo es a jatekosdoboz itt csak helyet vinne: a nev, a szint, az
 * arany es a csillag mar ott all a felso savban. Igy a husz menupontbol
 * sokkal tobb fer ki gorgetes nelkul. */

.mobile-ui .sidebar .playerbox { display: none; }

.mobile-ui .sidebrand {
	width: 100%;
	display: flex; align-items: center; justify-content: flex-end;
	background: none; border: none; padding: 0; margin: 0;
}

.mobile-ui .sidebrand .brandlogo { display: none; }

/* Harom hasab, ahol elfer - telefon fekvo modban ez a kenyelmes. */

.mobile-ui .sidebar > .menu-btn { width: calc(33.333% - 6px); }


/* A kulon bezaro X nem kell: a bal felso hamburger maga fordul X-be. */
.mobile-ui .mobclose { display: none; }

/* --- fatyol a menu mogott --- */

/* Csak nyitott menunel! A `hidden` attributumot egy sima display
 * szabaly felulirja - ezert kell a :not([hidden]). Enelkul a fatyol
 * vegig a lapon ul, elnyeli az epuletek kattintasait, es a megnyilo
 * panelt is eltakarja. */
.mobile-ui .mobdim:not([hidden]) {
	display: block;
	position: fixed; inset: 46px 0 0 0; z-index: 54;
	background: rgba(4, 10, 24, .6);
}

html.mobile-ui body.menuopen { overflow: hidden; }

/* A panelek is a felso sav ala kerulnek, es kitoltik a maradek helyet -
 * telefonon minden keppont szamit. */

/* A .panel-dim a terkephez kepest all (position: absolute), a terkep pedig
 * mar a felso sav alatt kezdodik - ezert itt 0, nem 46. Kulonben egy
 * savnyi terkep latszana a fejlec es a panel kozott. */
.mobile-ui .panel-dim { top: 0; padding: 0; }

.mobile-ui .panel {
	max-width: none; width: 100%;
	height: 100%; max-height: 100%;
	border-radius: 0; border-left: none; border-right: none;
}



/* Nagyon keskeny kepernyon (telefon allo modban) egy hasab a menu. */
.mobile-ui.jw-760 .sidebar > .menu-btn { width: calc(50% - 4px); }

.mobile-ui.jw-460 .sidebar > .menu-btn { width: 100%; }

/* --- nezetvalto gomb (jobb felso sarok) ---
 *
 * Mindket modban ugyanaz az elem, fixen a jobb felso sarokban. Mobil modban
 * a felso sav jobb szelen ul, ezert ott helyet hagyunk neki. */
/* Nezetvalto: gepes / mobil allo / mobil fekvo.
 *
 * Harom gomb egy sorban; az ervenyes van kiemelve. Igy asztali gepen is meg
 * lehet nezni, mit lat a telefonos jatekos - allo es fekvo helyzetben is. */
.viewswitch {
	position: fixed; top: 8px; right: 10px; z-index: 80;
	display: flex; gap: 2px;
	background: var(--btn); border: 1px solid var(--gold-line); border-radius: 8px;
	padding: 2px;
	opacity: .75;
}
.viewswitch:hover { opacity: 1; }

.viewswitch button {
	display: flex; align-items: center; gap: 5px;
	background: none; border: 0; border-radius: 6px;
	color: var(--gold);
	font-family: inherit; font-size: 14px; line-height: 1;
	padding: 6px 9px;
	cursor: pointer;
}
.viewswitch button:hover { background: var(--btn-hi); }
.viewswitch button.on { background: var(--gold); color: var(--navy); }
.viewswitch span { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }

/* A fejlesztoi valto a jobb felso sarokban marad, de a felso sav mar NEM
 * hagy neki helyet: a nev es a keszlet igy pontosan kozepre all. A valto
 * elfer a kozepre igazitott csoport jobb oldalan, es amugy is csak
 * fejlesztoi eszkoz (DEV_VIEW_SWITCH), ami a kiadas elott kikerul.
 * Lent nem lehet: ott a panel tartalmara - pl. a parbaj gombjaira - ulne. */
.mobile-ui .viewswitch {
	top: 6px; right: 8px;
	opacity: .55;
	padding: 1px;
}
.mobile-ui .viewswitch:hover { opacity: 1; }
.mobile-ui .viewswitch button { padding: 5px 6px; font-size: 13px; }
.mobile-ui .viewswitch span { display: none; }

/* Keskeny kepernyon csak az ikonok ferenek ki. */
@media (max-width: 620px) {
	.viewswitch span { display: none; }
	.viewswitch button { padding: 6px 7px; }
	.mobile-ui .mobbar { padding-right: 112px; }
}

/* --- csapatchat mobil nezetben ---
 *
 * Ugyanott nyilik, mint gepen (jobb oldalt), de a magassaga a kepernyohoz
 * igazodik: enelkul a beiromezo es a Kuldes gomb a keperyo ala esne
 * telefon fekvo modban (375 keppont magas kijelzo, 447 keppontos fiok). */
.mobile-ui .chatdrawer {
	top: 52px;
	max-height: calc(100dvh - 60px);
}
.mobile-ui .cdbody {
	width: 340px;
	max-height: calc(100dvh - 60px);
	display: flex; flex-direction: column;
	padding: 10px;
}
/* a beszelgetes tolti ki a maradek helyet, a beirosor mindig lathato marad */
.mobile-ui .cdbody .chatbox { flex: 1 1 auto; min-height: 0; height: auto; }
.mobile-ui .cdbody h3 { flex: none; }
.mobile-ui .cdbody .chatsend { flex: none; }


/* ---------------------------------------------- telefon-keret
 *
 * Ha a mobil nezetet KEZZEL kapcsoltad be egy szeles kepernyon, a
 * jatek egy telefon meretu keretbe kerul (iPhone fekvo modja). Enelkul
 * egy 1920 keppontos ablakban a "mobil" nezet is 1920 keppont szeles
 * lenne, es semmit nem mondana arrol, mit lat a jatekos.
 *
 * A transform azert kell, hogy a fixen pozicionalt reszek (felso sav,
 * menu, fatyol) a KERETHEZ igazodjanak, ne a bongeszoablakhoz.
 */
.view-framed body { background: #070d1a; overflow: auto; }

.view-framed #app {
	width: 844px; height: 390px;          /* iPhone 14, fekvo */
	margin: 46px auto;
	/* ha az ablakba nem fer bele, arannyal kicsinyitve latszik (lasd applyView) */
	transform: scale(var(--frame-scale, 1));
	transform-origin: top center;
	border: 10px solid #12182a;
	border-radius: 26px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
	overflow: hidden;
}

/* Allo helyzetben forditott a keret. */
.view-framed.view-portrait #app { width: 390px; height: 844px; margin: 46px auto 24px; }

/* A chatfiok a kerethez meretezodjon, ne a bongeszoablakhoz. */
.view-framed .chatdrawer, .view-framed .cdbody { max-height: calc(100% - 60px); }

/* Felirat a keret folott, hogy egyertelmu legyen, mit latsz. */
.view-framed #app::after {
	content: attr(data-frame);
	position: absolute; top: -34px; left: 0; right: 0;
	text-align: center;
	font-family: var(--f-display); font-size: 11px; letter-spacing: 1.4px;
	text-transform: uppercase; color: #6f83ad;
}

/* Kis kepernyon nincs ertelme keretnek - ott ugyis ez a valosag. */
@media (max-width: 880px), (max-height: 470px) {
	.view-framed #app {
		width: auto; height: 100vh; margin: 0;
		border: none; border-radius: 0; box-shadow: none; transform: none;
	}
	.view-framed #app::after { display: none; }
}

/* ================================================ kompakt panelek mobilon
 *
 * Telefonon semmit ne kelljen oldalra gorgetni: a tobbhasabos elrendezesek
 * egymas ala kerulnek, a szeles racsok kevesebb hasabra allnak.
 *
 * A .mobile-ui elotag azert kell, mert nehany racsot a stiluslap kesobb
 * feltetel nelkul is beallit - azokat csak nagyobb fajsulyu szabaly tudja
 * felulirni (pl. a .shopgrid ket hasabja).
 */

/* Boltok fekvo modban: a baba BALRA huzva, mellette jobbra az arukeszlet -
 * igy elfer egymas mellett, es nem kell lefele tekerni az aruig. Allo
 * (keskeny) kepernyon egymas ala kerulnek. */
.mobile-ui .shopgrid {
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	justify-content: start;
}
.mobile-ui .shopleft { justify-self: start; }
.mobile-ui .shopleft .dollrow { justify-content: flex-start; }

.mobile-ui.jw-620 .shopgrid { grid-template-columns: 1fr; }
.mobile-ui.jw-620 .shopleft { justify-self: center; }
.mobile-ui.jw-620 .shopleft .dollrow { justify-content: center; }

/* semmi ne feszitse szet a panelt */
.mobile-ui .panel-body { overflow-x: hidden; }
.mobile-ui .panel-body > * { max-width: 100%; }

/* a szeles racsok kevesebb hasabbal */
/* A kuldeteslistat eddig egy ablak-szelessegre iranyulo lekerdezes torte egy
 * hasabra. A keretes elonezet igy harom hasabot mutatott ott, ahol a valodi
 * telefon egyet - ezert itt is a jatekter szelessege dont. */
.mobile-ui.jw-760 .quest-list { grid-template-columns: 1fr; }
.mobile-ui .mtrees   { grid-template-columns: 1fr; }
.mobile-ui .teamgrid { grid-template-columns: 1fr; gap: 10px; }
/* fekvo telefonon ket hasab is elfer: balra az oltozo, jobbra a keret */
.mobile-ui.jw-720plus .teamgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mobile-ui .evgrid   { grid-template-columns: 1fr; }
.mobile-ui .statgrid { grid-template-columns: 1fr 1fr; }

/* Tablazatok telefonon.
 *
 * Eddig `display: block; overflow-x: auto` volt rajtuk, hogy a szeles
 * tablak sajat keretukben gorogjenek. Csakhogy a `display: block` a tablat
 * kozonseges dobozza teszi, es a sorok bent mar csak a tartalmukig ernek:
 * a doboz 774 keppont szeles, a sorok 178 - a kulonbseg pedig URES SAV a
 * jobb oldalon, a tabla hattereben. Mind a harom tablat (fogadas, liga,
 * rangsor) ez rontotta el.
 *
 * A tablak egyike sem szelesebb a helyenel, csak a szoveg hosszabb neha -
 * ezert maradnak valodi tablak, kitoltik a szelesseget, es ha szuk a hely,
 * a cellak tordelnek ahelyett, hogy kilognanak. */
.mobile-ui .panel-body table { display: table; width: 100%; max-width: 100%; }
.mobile-ui .panel-body table th,
.mobile-ui .panel-body table td { overflow-wrap: anywhere; }

/* A felszereles-baba mobilon kisebb: a kozeposzlop es a targykockak is. */
.mobile-ui .ccenter { width: 152px; }
.mobile-ui .portrait { height: 116px; }
.mobile-ui .dollrow { gap: 5px; }
.mobile-ui .etile { width: 52px; height: 52px; }
.mobile-ui .etile img { max-width: 100%; max-height: 100%; }

/* ------------------------------------------------- targylap (erintesre)
 *
 * Telefonon a koppintas ezt nyitja meg a targyrol: ugyanaz a leiras, ami
 * gepen a ravitelnel latszik, alatta a gombokkal. */
.itemsheet {
	position: fixed; inset: 0; z-index: 2400;
	display: flex; align-items: center; justify-content: center;
	background: rgba(4, 10, 24, .72);
	padding: 16px;
}
.ishbox {
	position: relative;
	background: var(--side2, #101a30);
	border: 2px solid var(--gold-line); border-radius: 12px;
	padding: 12px;
	max-width: 300px; width: 100%;
	max-height: 100%; overflow-y: auto;
}
.ishclose {
	position: absolute; top: 6px; right: 8px; z-index: 2;
	background: none; border: none; color: var(--gold);
	font-size: 18px; line-height: 1; padding: 4px 6px;
}
/* a leiras itt nem lebego buborek, hanem a lap resze */
.ishtip .etip, .ishtip > div {
	position: static; transform: none; width: auto;
	opacity: 1; visibility: visible; pointer-events: auto;
	box-shadow: none;
}
.ishbtns { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ishbtns .pbtn { width: 100%; }

/* Rövid magyarázat egy beviteli mező alatt (pl. miért kérünk e-mail címet). */
.clabel .chint {
	display: block;
	margin-top: 5px;
	font-style: normal;
	font-size: 12px;
	line-height: 1.4;
	color: var(--muted);
}

/* ============================================================================
 * TELEFON FEKVO MODBAN - a hely kihasznalasa
 *
 * Fekvo telefonon a magassag a szuk keresztmetszet: egy 812x375-os kijelzon a
 * felso sav utan 329 keppont marad. Az allo modra szabott meretekkel a
 * menu 534 keppont magas lett, vagyis a also ot menupont, a hangero, a
 * beallitasok es a kilepes csak GORGETESSEL volt elerheto - a jatekos nem is
 * latta, hogy van ott meg valami.
 *
 * Itt ezert mindent osszehuzunk annyira, hogy gorgetes nelkul kiferjen, de
 * meg kenyelmesen talalhato maradjon: a gombok magassaga sehol nem megy 34
 * keppont ala, mert az mar nehezen eltalalhato ujjal.
 *
 * A kapcsolo a <html> `lapos` osztalya (350 alatt `nagyon-lapos`), amit az
 * applyView() tesz fel. Szandekosan NEM media-lekerdezes: az a
 * bongeszoablakot merne, a fejlesztoi keretes elonezet viszont egy 390
 * keppont magas telefont mutat egy magas ablakban - ott a lekerdezes nem
 * sulne el, es masnak latszana a jatek, mint amit a jatekos lat.
 * ========================================================================== */

/* --- felso sav: minden keppont szamit, de olvashato marad --- */

.mobile-ui.lapos .mobbar { height: 40px; padding: 0 8px; gap: 8px; }
.mobile-ui.lapos #app { padding-top: 40px; }
.mobile-ui.lapos .sidebar,
.mobile-ui.lapos .mobdim:not([hidden]) { inset: 40px 0 0 0; }
.mobile-ui.lapos .mobmenu { height: 30px; width: 34px; }
.mobile-ui.lapos .mobwho b { font-size: 12px; }
.mobile-ui.lapos .mobwho i { font-size: 9px; }
.mobile-ui.lapos .mobres { gap: 10px; font-size: 12px; }

/* --- menu: negy hasab, tomor sorok, gorgetes nelkul --- */

.mobile-ui.lapos .sidebar { padding: 8px 10px; gap: 6px; }
.mobile-ui.lapos .sidebar > .menu-btn { width: calc(25% - 5px); }
.mobile-ui.lapos .sidebar .menu-btn {
	padding: 7px 8px; font-size: 11px; gap: 7px; min-height: 34px;
}
/* A magassagot is le kell venni: az ikon doboza kulonben 26 keppont
 * marad, es azzal a gomb 44 lesz - hat sor mar nem fer ki tole. */
.mobile-ui.lapos .sidebar .menu-btn .mi { width: 20px; height: 20px; }
.mobile-ui.lapos .sidebar .menu-btn .mi img { width: 20px; height: 20px; }
/* hosszu nev ne torje ket sorba a gombot */
.mobile-ui.lapos .sidebar .menu-btn .mtext {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mobile-ui.lapos .sidebar .mdivider { margin: 0; }
.mobile-ui.lapos .sidebar .sidebrand { display: none; }

/* a labresz a menu aljara tapad, es marad benne ujjnyi hely */
.mobile-ui.lapos .side-foot { padding-top: 6px; gap: 14px; }
.mobile-ui.lapos .side-foot button { min-height: 34px; }

/* Nagyon lapos kijelzon meg egy hasabbal tobb kell. A hatar szandekosan 350
 * es nem 380: a legelterjedtebb telefon fekvo modban EPP 375 keppont magas
 * (iPhone SE, 8), es ott meg kenyelmesen elfer a negy hasab. */
.mobile-ui.nagyon-lapos .sidebar > .menu-btn { width: calc(20% - 5px); font-size: 10px; }

/* A fejlesztoi nezetvalto helye csak akkor foglalodik le, ha a valto tenyleg
 * ott van. Igy amikor a kiadas elott kivesszuk (DEV_VIEW_SWITCH = false), az
 * arany es a csillag magatol visszakapja a helyet - nem marad utana lyuk. */
.mobile-ui .mobbar { padding-right: 10px; }

/* ----------------------------------------------------------------------------
 * FEKVO TELEFON: a panelek tartalma
 *
 * A lapok allo modra keszultek, ahol van fuggoleges hely. Fekvo telefonon a
 * panelre 335 keppont jut, es ebbe a kuldeteskartya (532), a bolt (763) vagy
 * a postalada (365) nem fer bele - a jatekos gorgetes nelkul nem latja a
 * gombot, amiert megnyitotta a lapot.
 *
 * Amit elveszunk, az mindenutt DISZ: a nagy kepek alacsonyabbak lesznek, a
 * hangulatszoveg eltunik. Amit meghagyunk, az az informacio es a gomb.
 * -------------------------------------------------------------------------- */

/* --- panelfejlec: alacsonyabb, de a bezaro X marad ujjnyi --- */

.mobile-ui.lapos .panel-head { padding-top: 8px; padding-bottom: 8px; }
.mobile-ui.lapos .panel-head h2 { font-size: 17px; }
.mobile-ui.lapos .panel-body { padding-top: 10px; padding-bottom: 8px; }

/* --- kuldetesek --- */

/* A kuldeteskep marad, csak alacsonyabb savva valik: igy is megvan a
 * hangulata, de nem visz el 156 keppontot a harombol. */
.mobile-ui.lapos .quest .qart img { aspect-ratio: 16 / 3.5; }

/* A targyjutalom kepe sajat sorban 86 keppontot vitt el - pont annyit,
 * amennyi a START gombnak hianyzott. Fekvoben a kuldeteskep sarkara kerul
 * jelvenykent: ugyanugy latszik, ugyanugy rakoccinthato a leirasaert, de
 * nem tol le semmit a kepernyorol. */
.mobile-ui.lapos .quest .qprize.solo {
	position: absolute; top: 6px; right: 6px; z-index: 2;
	width: auto; min-height: 0;
}
/* A jelveny beleferjen a kepsavba, kulonben ralog a kuldetes cimere. */
.mobile-ui.lapos .quest .qprize.solo .qpic { width: 40px; height: 40px; }
.mobile-ui.lapos .quest .qprize.solo .qpic img { width: 40px; height: 40px; }

/* A leiras BALRA nyiljon: a jelveny a kartya jobb szelen ul, es a jobbra
 * nyilo buborek a harmadik kartyanal mar a kepernyon kivulre esett. */
.mobile-ui.lapos .quest .qprize.solo .etip {
	left: auto; right: 0; transform: none;
}

/* A hangulatszoveg szep, de nem dontesi informacio - fekvoben elmarad. */
.mobile-ui.lapos .quest .qintro { display: none; }

.mobile-ui.lapos .quest { padding: 8px; gap: 4px; }
.mobile-ui.lapos .quest .qart { margin: -8px -8px 0; }
.mobile-ui.lapos .quest h3 { min-height: 0; font-size: 13px; line-height: 1.25; }
.mobile-ui.lapos .quest .qrow { font-size: 12px; line-height: 1.35; }
.mobile-ui.lapos .quest-list { gap: 8px; }

/* A tipsav osszecsukva is 48 keppont volt - fekvoben ennyi mar egy
 * kartyasornyi hely. */
.mobile-ui.lapos .tipcard.csukva > .tipsheet { padding: 4px 10px; }
.mobile-ui.lapos .tipcard .tiphead { font-size: 10px; }

/* --- bolt: a taska sajat gorgetheto dobozba kerul ---
 *
 * Harminckét rekesz 486 keppont magas, es ezzel a bolt aru- es
 * gombreszet is letolta a kepernyorol. Ket sor mindig latszik, a tobbi
 * a taskan belul gorgetheto - a lap tobbi resze igy a helyen marad. */
.mobile-ui.lapos .shopleft .baggrid {
	max-height: 118px; overflow-y: auto;
	padding-right: 4px;
}
.mobile-ui.lapos .shopgrid { gap: 10px; }
.mobile-ui.lapos .shopgrid h3.sub { margin: 4px 0 2px; }
.mobile-ui.lapos .grocactive .gactive { min-height: 0; padding: 6px 10px; }

/* --- postalada --- */

/* A torlogomb 28 keppont magas volt: ujjal nehezen eltalalhato. */
.mobile-ui.lapos .mailrow .mdel { min-height: 32px; }
.mobile-ui.lapos .tabbar .tab { padding-top: 8px; padding-bottom: 8px; }

/* --- ures lapok ---
 *
 * Ahol csak egy "ez most nem elerheto" uzenet all (pl. a jegfurdo szint
 * alatt), az uzenet eddig a lap tetejere tapadt, alatta 145 keppont
 * uressel - befejezetlennek latszott. Igy a lap kozepen all. */
.mobile-ui.lapos .panel-body > .muted:only-child {
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	min-height: 100%;
}

/* A panel ket reszre valik: a fejlec a helyen marad, a tartalom gordul
 * alatta. Telefonon mindket tajolasban.
 *
 * Eddig az EGESZ panel gordult, vagyis lefele gorgetve a cim, az energiasav
 * es a bezaro X is elcsuszott a kepernyorol - a jatekos nem tudta becsukni a
 * lapot anelkul, hogy visszagorgessen. Allo modban ez a rosszabb: ott egy
 * hosszu bolti lista vegen a bezaro gomb ezer keppontra volt a kepernyotol.
 *
 * Mellekhatasa, hogy a torzs pontosan a maradek helyet kapja meg: a
 * ractolt elrendezesek (pl. a kuldeteskartyak) igy tenyleg kitoltik a lapot,
 * nem lognak tul rajta. */
.mobile-ui .panel {
	display: flex; flex-direction: column;
	overflow: hidden;
}
.mobile-ui .panel-head { flex: none; }
.mobile-ui .panel-body {
	flex: 1 1 auto; min-height: 0;
	overflow-y: auto;
}

/* ----------------------------------------------------------------------------
 * FEKVO TELEFON: a bolt (Grocery)
 *
 * Ez a leghosszabb lap: a ket hasab egyutt 614 keppont, a helye 257. Teljesen
 * behozni nem lehet - ennyi tartalom van rajta -, de az volt a baj, hogy a
 * VASARLOGOMBOK estek a kepernyo ala: a jatekos megnyitotta a boltot, es nem
 * latott belole semmit, csak a sajat baba-kepet.
 *
 * Ezert a felso reszek (hatasok, kesziet-cimek) osszehuzodnak, az arukepek
 * kisebbek lesznek - epp annyira, hogy az elso arusor a Vesz gombjaval egyutt
 * rogton latszodjon. A tobbihez mar termeszetes, hogy gorgetni kell.
 * -------------------------------------------------------------------------- */

/* Az aktiv hatasok harom sor helyett egy sorban - uresen ugyis csak
 * helykitoltok, es telve is elfernek egymas mellett. */
.mobile-ui.lapos .grocactive { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mobile-ui.lapos .gactive { min-height: 0; padding: 6px 8px; gap: 6px; }
.mobile-ui.lapos .gactive img { width: 26px; height: 26px; }
.mobile-ui.lapos .gactive b { font-size: 11px; }
.mobile-ui.lapos .gactive .muted, .mobile-ui.lapos .gactive .gleft { font-size: 10px; }

/* Kisebb arukepek: igy az elso sor gombja is a kepernyon marad. */
.mobile-ui.lapos .goodsgrid { gap: 8px; }
.mobile-ui.lapos .good { padding: 7px; gap: 5px; }
.mobile-ui.lapos .good .ipic { width: 58px; height: 58px; }
.mobile-ui.lapos .good .pbtn { font-size: 12px; padding: 6px; }

/* A szakaszcimek koze nem kell 16 keppontnyi levego. */
.mobile-ui.lapos .shopgrid h3.sub { font-size: 11px; }
.mobile-ui.lapos .grocactive + .sub { margin-top: 8px; }

/* A baloldali baba-sor is lejjebb jon egy kicsit. */
.mobile-ui.lapos .shopleft .dollrow { gap: 6px; }
.mobile-ui.lapos .shopleft .etile { width: 46px; height: 46px; }
.mobile-ui.lapos .shopleft .baggrid { grid-template-columns: repeat(6, 46px); }
.mobile-ui.lapos .shopleft .lvlbar { height: 18px; font-size: 10px; margin-top: 4px; }

/* ----------------------------------------------------------------------------
 * FEKVO TELEFON: a karakterlap
 *
 * Ket dolog vitte itt a helyet feleslegesen. A tulajdonsagok egy hasabban
 * alltak, pedig a lap fekvoben 472 keppont szeles - ket hasabban feleannyi
 * hely kell nekik. A hatizsak pedig 32 rekesszel nyolc sort tolt ki, ami
 * magaban tobb, mint az egesz lap magassaga.
 * -------------------------------------------------------------------------- */

.mobile-ui.lapos .tabcol .statgrid { grid-template-columns: 1fr 1fr; gap: 6px 10px; }

/* A hatizsak sajat gorgetheto dobozba kerul, mint a boltban: ket sor mindig
 * latszik, a tobbi azon belul gordul. */
.mobile-ui.lapos .dollcol .baggrid {
	max-height: 124px; overflow-y: auto;
	padding-right: 4px;
}

/* ----------------------------------------------------------------------------
 * FEKVO TELEFON: jarmubelres
 *
 * Negy jarmu allt harom hasabban, vagyis ket sorban - es mivel egy kartya 295
 * keppont magas, EGYETLEN Berles gomb sem latszott a megnyitaskor. Fekvoben
 * negy hasab van: mind a negy jarmu egy sorba kerul, a gombjaval egyutt.
 * -------------------------------------------------------------------------- */

.mobile-ui.lapos .item-grid.vehicles { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mobile-ui.lapos .item.vehicle { padding: 8px; gap: 4px; }
.mobile-ui.lapos .item.vehicle .vpic { height: 48px; }
.mobile-ui.lapos .item.vehicle .iname { font-size: 12px; }
.mobile-ui.lapos .item.vehicle .itype,
.mobile-ui.lapos .item.vehicle .vdescr { font-size: 10px; line-height: 1.3; }
.mobile-ui.lapos .item.vehicle .vdescr {
	min-height: 0;
	/* Ket sor eleg belole: a lenyeg (hany szazalek) az elso sorban all. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.mobile-ui.lapos .item.vehicle .iprice { font-size: 12px; }

/* ----------------------------------------------------------------------------
 * FEKVO TELEFON: 1v1
 *
 * A kartya 326 keppont magas volt egy 187-es helyen, es a lenyeg - a
 * statok osszehasonlitasa meg a Kiallas gomb - a kepernyo ala esett: a
 * jatekos csak harom arcot latott, dontesi informacio nelkul.
 *
 * A megoldas nem a zsugoritas, hanem az atrendezes: fekvoben van vizszintes
 * hely bosegesen, ezert a portre az erosorrend MELLE kerul, nem foleje. Igy
 * a kartya harmadaval alacsonyabb lesz ugyanazzal a tartalommal.
 * -------------------------------------------------------------------------- */

.mobile-ui.lapos .acard {
	display: grid;
	/* A portre oszlopa szandekosan szeles: a fej igy nem lapul ossze, es a
	 * nev is kifer ala. Fuggolegesen a lap maradek helyet kapja meg - a
	 * kartya igy is gorgetes nelkul elfer. */
	grid-template-columns: 86px minmax(0, 1fr);
	align-items: center;
	gap: 4px 8px;
	padding: 6px;
}

/* A portre a bal hasabban all, a NEVE ALATTA - nem rajta.
 *
 * Eddig a nev abszolut pozicioban ult a kep aljan, es rendesen eltakarta az
 * arcot. Fekvoben van hely egy kulon sornak: a kep 76 keppont, alatta a nev
 * es a szint. A hasab igy harom sort fog at (ero, poszt, statok), tehat a
 * kartya ettol nem lesz magasabb - sot, alacsonyabb lett. */
.mobile-ui.lapos .acard .aportrait {
	grid-column: 1; grid-row: 1 / span 3;
	height: auto;
	flex-direction: column; align-items: center;
	padding: 4px 3px 5px;
	overflow: visible;
}
.mobile-ui.lapos .acard .aportrait .portraitbox { border-radius: 6px; }

/* a nev mar nem lebeg a kepen: rendes sor lett belole */
.mobile-ui.lapos .acard .aportrait .pname2 {
	position: static;
	margin-top: 3px; padding: 0;
	text-shadow: none;
	line-height: 1.15;
}
.mobile-ui.lapos .acard .aportrait .pname2 { font-size: 10px; }
.mobile-ui.lapos .acard .alvl { font-size: 9px; margin-top: 1px; }

.mobile-ui.lapos .acard .apower { grid-column: 2; grid-row: 1; margin: 0; }
.mobile-ui.lapos .acard .apos   { grid-column: 2; grid-row: 2; }

/* A statok is a jobb hasabba kerulnek, a portre melle: igy a ket hasab
 * magassaga kiegyenlitodik, es a kartya alacsonyabb lesz. */
.mobile-ui.lapos .acard .astats  { grid-column: 2; grid-row: 3; gap: 0 10px; }
.mobile-ui.lapos .acard > .pbtn  { grid-column: 1 / -1; }

.mobile-ui.lapos .acard .abar { height: 16px; }
.mobile-ui.lapos .acard .abar b { font-size: 10px; line-height: 14px; }
.mobile-ui.lapos .acard .arow { font-size: 10px; padding: 0 2px; }
.mobile-ui.lapos .arenagrid { gap: 8px; }

/* A lap kicsit feljebb kezdodjon: fekvoben minden keppont szamit. A
 * tipsav es a kartyak koze sem kell 12 keppontnyi levego. */
.mobile-ui.lapos .panel-body { padding-left: 14px; padding-right: 14px; padding-top: 6px; }
.mobile-ui.lapos .panel-body > .tipcard { margin-bottom: 6px; }
.mobile-ui.lapos .acard { gap: 3px 8px; }
/* A parbaj-kartya: a portre megnovelese utan ennyi hianyzott a gorgetes
 * megszunesehez. */
.mobile-ui.lapos .acard .arow { line-height: 1.15; }
.mobile-ui.lapos .acard .astats { gap: 0 10px; }

/* ----------------------------------------------------------------------------
 * ALLO TELEFON: ami kilogott oldalra
 * -------------------------------------------------------------------------- */

/* A bolti hatizsak racs 4 x 88 keppont volt fix meretben, plusz 3 x 10 res:
 * 382 keppont egy 338 keppontos savban. Emiatt a bolt (Clothing Store,
 * Grocery, Kitman) 18 keppontot kilogott a kepernyorol, es a lap vizszintesen
 * is huzhato lett. A rekeszek mostantol a helyukhoz igazodnak. */
.mobile-ui .shopleft .baggrid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}
.mobile-ui .shopleft .baggrid .etile {
	width: auto; height: auto; aspect-ratio: 1;
}

/* Racs-elemek alapbol nem mennek a tartalmuk ala (min-width: auto), ezert
 * egyetlen tul szeles gyerek az egesz lapot szetfesziti. Telefonon inkabb
 * zsugorodjanak. */
.mobile-ui .shopgrid > * { min-width: 0; }

/* A torlogomb allo modban is ujjnyi legyen, ne csak fekvoben. */
.mobile-ui .mailrow .mdel { min-height: 32px; }

/* A kerek szeletei el vannak forgatva, es egy elforgatott negyzet befoglalo
 * doboza nagyobb az eredetinel (320 -> 430). Emiatt a fogadolap 20 keppontot
 * "kilogott" oldalra: latszolag semmi nem lepte tul a szelet, de a lap
 * megis elhuzhato volt vizszintesen. A szeletek amugy is a koron belul
 * rajzolodnak, tehat a levagas nem vesz el semmit. */
.mobile-ui .wheelbox { overflow: hidden; }

/* A targyleiras buborek ne logjon tul a kepernyo szelen. A racs-alapu
 * igazitas (nth-child(8n+...)) nyolc hasabra keszult, telefonon viszont
 * negy van - ezert a jobb szelen levo darabok kicsusztak. */
.mobile-ui .panel-body .etip,
.mobile-ui .panel-body .itip { max-width: min(280px, calc(100vw - 28px)); }

/* A bolti aru harom hasabban all, de a kartya legkisebb szelessege 116
 * keppont (92-es kep + belso terkoz), a hely viszont csak 105 - es mivel a
 * racs-elemek alapbol nem mennek a tartalmuk ala, a harmadik hasab 8
 * keppontot kilogott a kepernyorol. A kep mostantol egyutt zsugorodik a
 * hasabbal. */
.mobile-ui .goodsgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mobile-ui .good { min-width: 0; }
.mobile-ui .good .ipic { width: 100%; max-width: 92px; }

/* ----------------------------------------------------------------------------
 * ALLO TELEFON: a boltokban elol legyen az ARU
 *
 * Keskeny kepernyon a bolt ket hasabja egymas ala kerul, es a sorrend a
 * jelolesbol jott: eloszor a karakter babaja es a hatizsak, utana az aru.
 * Ez azt jelentette, hogy a jatekos megnyitotta a boltot, es a sajat -
 * indulaskor ures - hatizsakjat nezte; az elso vasarlogomb 1136 (Clothing)
 * illetve 1427 (Grocery) keppontra volt a lap tetejetol, vagyis masfel
 * kepernyonyi gorgetesre.
 *
 * A lap celja a vasarlas, tehat az aru jon elol. A baba es a hatizsak alatta
 * marad - oda akkor gorgetunk, amikor mar van mit odatenni.
 * -------------------------------------------------------------------------- */

.mobile-ui.jw-620 .shopright { order: 1; }
.mobile-ui.jw-620 .shopleft  { order: 2; }

/* ----------------------------------------------------------------------------
 * KESKENY KEPERNYO: a rangsor es a ligatabla ket sorban
 *
 * Het, illetve kilenc oszlop nem fer ki 390 keppontra. A bongeszo eddig
 * ugy oldotta meg, hogy MINDENT tordelt: a fejlecben fuggolegesen egymas
 * ala kerultek a betuk ("P L A Y E R"), a nevek harom sorba tortek. Olvasni
 * nem lehetett, es minden sor ket-harom sornyi helyet vitt el ugyis.
 *
 * Ugyanannyi helyen sokkal tobb fer ki igy: az elso sorban a HELYEZES es a
 * NEV all (a rangsorban a csapat is), a masodik sorban pedig a szamok, mind
 * a sajat rovid nevevel. A fejlec ilyenkor felesleges, el is tunik.
 * -------------------------------------------------------------------------- */

.mobile-ui.jw-620 .rank-table { display: block; }
.mobile-ui.jw-620 .rank-table thead { display: none; }
.mobile-ui.jw-620 .rank-table tbody { display: block; }

.mobile-ui.jw-620 .rank-table tbody tr {
	display: grid;
	align-items: center;
	gap: 2px 6px;
	padding: 7px 8px;
	border-bottom: 1px solid var(--border);
}

.mobile-ui.jw-620 .rank-table tbody td {
	display: block;
	border: 0; padding: 0;
	font-size: 12px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A szam a sajat nevevel all - fejlec nelkul kulonben nem tudni, mit latunk. */
.mobile-ui.jw-620 .rank-table tbody td[data-l]::before {
	content: attr(data-l) ' ';
	color: var(--muted);
	font-size: 10px;
}

/* a helyezes nagyobb, es atfogja mindket sort */
.mobile-ui.jw-620 .rank-table tbody td:first-child {
	grid-column: 1; grid-row: 1 / span 2;
	font-size: 15px; font-weight: 800; color: var(--gold);
	text-align: center; align-self: center;
}

/* --- rangsor: # | jatekos + csapat / poszt, szint, erem, gyozelem --- */

.mobile-ui.jw-620 .rank-table:not(.league) tbody tr {
	grid-template-columns: 30px repeat(4, minmax(0, 1fr));
}
/* A nev es a klub feleznek az elso soron: igy a hosszabb klubnevek
 * (VfB Paderborn) sem vagodnak le. */
.mobile-ui.jw-620 .rank-table:not(.league) tbody td:nth-child(2) {
	grid-column: 2 / 4; grid-row: 1;
	font-size: 13px; font-weight: 700;
}
.mobile-ui.jw-620 .rank-table:not(.league) tbody td:nth-child(3) {
	grid-column: 4 / -1; grid-row: 1;
	text-align: right; font-size: 11px;
}
.mobile-ui.jw-620 .rank-table:not(.league) tbody td:nth-child(n+4) { grid-row: 2; }

/* --- liga: # | csapatnev / M, GY, D, V, golok, +/-, pont --- */

.mobile-ui.jw-620 .rank-table.league tbody tr {
	grid-template-columns: 30px repeat(7, minmax(0, 1fr));
}
.mobile-ui.jw-620 .rank-table.league tbody td:nth-child(2) {
	grid-column: 2 / -1; grid-row: 1;
	font-size: 13px; font-weight: 700;
}
.mobile-ui.jw-620 .rank-table.league tbody td:nth-child(n+3) {
	grid-row: 2; font-size: 11px; text-align: center;
}
.mobile-ui.jw-620 .rank-table.league tbody td[data-l]::before { display: block; }

/* a sajat sor kiemelese a racsban is lathato maradjon */
.mobile-ui.jw-620 .rank-table tbody tr.me { border-left: 3px solid var(--gold); }

/* a fogadolap nyeremenytablaja ket oszlopos, azt nem kell szetszedni */
.mobile-ui.jw-620 .rank-table.wtable { display: table; }
.mobile-ui.jw-620 .rank-table.wtable thead { display: table-header-group; }
.mobile-ui.jw-620 .rank-table.wtable tbody { display: table-row-group; }
.mobile-ui.jw-620 .rank-table.wtable tbody tr { display: table-row; padding: 0; }
.mobile-ui.jw-620 .rank-table.wtable tbody td { display: table-cell; padding: 6px 10px; }

/* ----------------------------------------------------------------------------
 * ALLO TELEFON: a panelfejlec tordelese
 *
 * A fejlec egyetlen sor: [cim] [energiasav] [+20 perc gomb] [X]. Keskeny
 * kepernyon ez nem fer ki, es a bongeszo a GOMBOT nyomta ossze - a "+20 min
 * (1 csillag)" harom sorba tort egy huvelykujjnyi dobozban a cim mellett.
 *
 * Igy a cim es a bezaro X marad az elso sorban, alattuk teljes szelessegben
 * az energiasav, majd a gomb. Ugyanaz a tartalom, csak olvashatoan.
 * -------------------------------------------------------------------------- */

.mobile-ui.jw-620 .panel-head {
	flex-wrap: wrap;
	row-gap: 8px; column-gap: 10px;
}

/* a cim es az X az elso soron marad */
.mobile-ui.jw-620 .panel-head h2 { order: 0; }
.mobile-ui.jw-620 .panel-head .x { order: 1; }

/* minden mas a cim ALA kerul, teljes szelessegben */
.mobile-ui.jw-620 .panel-head > :not(h2):not(.x) {
	order: 2;
	flex: 1 1 100%;
}
.mobile-ui.jw-620 .panel-head .energybar { width: 100%; }
.mobile-ui.jw-620 .panel-head .pbtn { white-space: nowrap; }

/* ----------------------------------------------------------------------------
 * TELEFON: a felso sav kozepre igazitva
 *
 * Eddig a nev balra tapadt, a keszlet jobbra, es a legkeskenyebb kepernyon a
 * nev el is tunt - pedig van rá hely. Mostantol a hamburger a bal szelen ul
 * (kivezetve a sorbol), a nev, a szint, az arany es a csillag pedig egy
 * kozepre igazitott csoportot alkot. Mindket tajolasban ugyanaz.
 * -------------------------------------------------------------------------- */

/* A sav `position: fixed` marad (azt a fenti szabaly adja) - az mar
 * onmagaban horgony a kivezetett menugombnak. */
.mobile-ui .mobbar {
	justify-content: center;
	gap: 14px;
	/* Mindket oldalon ugyanannyi, kulonben a csoport a menugomb szelessegenek
	 * felevel elcsuszna a kozeptol. A menugomb kivezetve ul a bal szelen. */
	padding-left: 56px; padding-right: 56px;
}

/* a menugomb kikerul a sorbol, hogy ne tolja el a kozepet */
.mobile-ui .mobmenu {
	position: absolute; left: 10px; top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

.mobile-ui .mobwho { text-align: center; align-items: center; }
.mobile-ui .mobwho b { overflow: visible; }

/* a `margin-left: auto` tolta eddig jobbra - most a csoport resze */
.mobile-ui .mobres { margin-left: 0; }

/* Amig a fejlesztoi nezetvalto ott van a jobb felso sarokban, helyet kell
 * neki hagyni, es a kozep annyival balra tolodik. A valto kivetele
 * (DEV_VIEW_SWITCH = false) utan a csoport magatol pontosan kozepre all. */

/* ----------------------------------------------------------------------------
 * TROFEAK a jatekos Info fulen
 *
 * Egy dij = egy kis kartya: hany darab, a kep, alatta a nev. Az azonos dijak
 * osszevonva jonnek (4 x arany 2), tehat a racs nem no el akkor sem, ha
 * valaki sok szezont vegigjatszott.
 * -------------------------------------------------------------------------- */

.trophygrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 10px;
	margin-top: 8px;
}

.trophy {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 8px 6px;
	background: rgba(0, 0, 0, .28);
	border: 1px solid var(--border); border-radius: 10px;
	cursor: default;
}

.trophy .tcount {
	font-family: var(--f-display);
	font-size: 13px; color: var(--gold); letter-spacing: .5px;
}

.trophy .tpic {
	display: flex; align-items: center; justify-content: center;
	/* A kepek 141x146-osak. Elegge nagyra kell venni oket, hogy az eremre
	 * rajzolt liga-szam is olvashato maradjon. */
	width: 66px; height: 68px;
}
.trophy .tpic img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Ha valamihez megsincs kep (pl. tizedik folotti liga), emodzsi all a helyen. */
.trophy .tfall { font-size: 34px; line-height: 1; }

.trophy .tname {
	font-size: 10px; color: var(--muted); text-align: center;
	line-height: 1.2;
}

.trophy-none { margin: 6px 0 0; font-size: 13px; }

/* Fekvo telefonon tomorebben, hogy tobb ferjen ki egy sorba. */
.mobile-ui.lapos .trophygrid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.mobile-ui.lapos .trophy { padding: 6px 4px; }
.mobile-ui.lapos .trophy .tpic { width: 52px; height: 54px; }
.mobile-ui.lapos .trophy .tfall { font-size: 28px; }