/* =============================================================================
 * aidcadru.css -- panels, the header, and buttons. Drawn, not photographed.
 *
 * Reads every value from themes/<active>/tokens.css. There is not one colour
 * literal below the line marked THE ONE EXCEPTION, and that is the point: this
 * file is the SHAPE of the interface, the token file is its LOOK, and a new
 * theme changes only the second.
 *
 * WHAT A PANEL IS HERE
 *
 *   .aid-cadru            the carved stone band -- an element with edges
 *     .aid-cadru-titlu    an optional cartouche across the top
 *     .aid-cadru-camp     the dark field the content sits on
 *
 * Four layers make it read as carved: the stone gradient, a brass line inset
 * from it, one highlight along the top-left, one shadow along the bottom-right.
 * All four are lit from the same corner as the map's trees and rocks -- mixed
 * lighting is the fastest way to make a screen look like parts from different
 * places, and this screen is parts from different places.
 *
 * THE ONE ASSET NAMED IN HERE RATHER THAN IN A THEME
 *
 * The dracusor. Every other picture on this screen is a theme token, because
 * every other picture is allowed to change; he is not. "Dracusor - little
 * devil - wil not change. that is our mascot, logo, brand... so this one never
 * gets replaced in any theme." A theme file cannot reach public/brand/, so
 * there is no theme that can take him off the header.
 *
 * WHY NOT border-image AND A PNG
 *
 * Because that is the old problem wearing a newer hat: a themed corner becomes
 * a picture again, at one fixed size, that somebody has to repaint to change a
 * colour. Everything here is gradients and shadows, so it takes a colour from
 * a variable, scales to any panel, and costs no request.
 * ========================================================================== */

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

/* THE PANEL ITSELF PAINTS NOTHING.
 *
 * This is the whole reason the transparency works, and the first version got
 * it wrong in a way that looked fine: the stone gradient was the panel's own
 * background, so it filled the ENTIRE rectangle -- including the part behind
 * the field. The field was therefore translucent over STONE, not over the
 * landscape, and turning the fill alpha from 0.82 down to 0.30 changed almost
 * nothing on screen. Two hours of "the slider does nothing" live here.
 *
 * So the panel is transparent and the stone is a RING drawn in ::before. The
 * only thing the element itself contributes is the shadow it casts, which a
 * box-shadow paints from the border-box shape whether there is a background
 * or not. */
/* Outside the theme chain on purpose -- see the note at the top of this file. */
:root { --aid-dracusor: url("../brand/dracusor.svg"); }

.aid-cadru {
	position: relative;
	box-sizing: border-box;
	padding: var(--aid-rama);
	border-radius: var(--aid-raza-mare);
	background: transparent;
	box-shadow: var(--aid-desprins);
	color: var(--aid-text);
	font-family: var(--aid-font);
	font-size: 11px;
}

/* The carved band: a ring, made by masking the padding box out of the border
 * box, so the middle of the panel stays genuinely empty.
 *
 * The grain rides along as the first background layer rather than as a third
 * pseudo-element -- it belongs on the stone and nowhere else, and a grain over
 * the field would be sand on a window. */
.aid-cadru::before {
	content: '';
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	border-radius: inherit;
	border: var(--aid-rama) solid transparent;
	background:
		var(--aid-granulatie) border-box,
		var(--aid-fata-piatra) border-box;
	-webkit-mask:
		linear-gradient(#000 0 0) padding-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	box-shadow: var(--aid-lumina), var(--aid-adancime);
	pointer-events: none;
}

/* The brass line, inset from the stone edge. Drawn as a ring rather than a
 * border so it sits INSIDE the carved band -- a border would be the outermost
 * thing and the stone would lose its lit edge. */
.aid-cadru::after {
	content: '';
	position: absolute;
	left: calc(var(--aid-rama) - var(--aid-rama-fina));
	top: calc(var(--aid-rama) - var(--aid-rama-fina));
	right: calc(var(--aid-rama) - var(--aid-rama-fina));
	bottom: calc(var(--aid-rama) - var(--aid-rama-fina));
	border: var(--aid-rama-fina) solid transparent;
	border-radius: var(--aid-raza);
	background: var(--aid-fata-alama) border-box;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

/* The field. Above both pseudo-elements so content is never under the grain. */
/* THE FIELD IS TRANSLUCENT ON PURPOSE, AND THE BLUR IS WHY IT CAN BE.
 *
 * The panels sit on a landscape, and the point of repainting that landscape
 * was to see it. An opaque panel throws it away; a merely transparent one puts
 * text over grass, tree trunks and roof edges and becomes unreadable in
 * patches -- readable over the dark mountain, hopeless over a lit field, which
 * is worse than either being true everywhere.
 *
 * backdrop-filter fixes exactly that. Blurring what is BEHIND the panel
 * destroys the fine detail that fights the text while leaving the colour and
 * the large shapes showing through, so the world is still visibly there and
 * the words still sit on something even. */
.aid-cadru-camp {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	height: 100%;
	padding: 8px;
	border-radius: var(--aid-raza);
	background: var(--aid-camp);
	box-shadow: var(--aid-apasat);
	overflow: auto;
	/* A hair of shadow on the text, so a light patch of landscape coming
	 * through never swallows a digit. Cheaper and less heavy-handed than
	 * raising the fill. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.aid-cadru-camp.aid-lizibil { background: var(--aid-camp-tare); }

/* THE MAIN PANEL IS OPAQUE, AND THAT IS A RULE NOT A TASTE.
 *
 * Laurentiu: "the transparency for panels is around 0.45 but the main panel
 * (istanga) is not transparent at all (100)."
 *
 * The reason holds for every theme, which is why it is a class here rather
 * than a number in one token file. A side panel is a label on the world and
 * should let the world through. #istanga is where the game is actually READ --
 * a battle report, a list of buildings, a wall of figures -- and a landscape
 * drifting under that is not atmosphere, it is noise. The blur comes off too:
 * blurring a backdrop nobody can see is work for nothing. */
.aid-cadru-camp.aid-opac {
	background: var(--aid-camp-opac);
	text-shadow: none;
}

/* The @supports fallback that used to live here is gone with the blur it was
 * covering for: with --aid-neclar at `none` the condition can never be true,
 * and a rule that cannot apply is a rule somebody will later believe. */

/* A panel with a title loses the padding at the top -- the cartouche IS the
 * top of the frame, and stone above it as well would read as two frames. */
.aid-cadru-titlu {
	position: relative;
	z-index: 1;
	margin: calc(var(--aid-rama) * -1 + 2px) -2px 6px -2px;
	padding: 4px 12px;
	border-radius: var(--aid-raza) var(--aid-raza) 0 0;
	background: var(--aid-fata-alama);
	box-shadow: var(--aid-lumina), var(--aid-adancime);
	font-family: var(--aid-font-titlu);
	font-size: var(--aid-titlu-marime);
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	text-align: var(--aid-titlu-aliniere);
	text-transform: var(--aid-titlu-caz);
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}

/* THE COLLAPSE DOT.
 *
 * Every panel in the game today carries a small circle at the right end of its
 * title bar, and it is not decoration -- it is how you fold a panel away. It
 * has to be here or the default theme is missing a control that players use.
 * Drawn rather than an image, so a theme recolours it for free. */
.aid-cadru-titlu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.aid-cadru-titlu::after {
	content: '';
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%,
		rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.35) 70%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.15);
	cursor: pointer;
	pointer-events: auto;
}

/* ========================================================= a panel, in one class
 *
 * WHY THIS EXISTS ALONGSIDE .aid-cadru
 *
 * .aid-cadru needs two nested elements -- a frame and a field inside it. That
 * is fine for markup written today, and wrong for main.php: the shell is
 * fifteen years of hand-written HTML that does not reliably balance its own
 * tags (armate.php has one </div> too many, which is what broke the map panel
 * frame once already). Wrapping every panel in two more divs through the port
 * is exactly the change that breaks on the page nobody opened.
 *
 * So: .aid-panou is the whole panel on ONE element, drawn with box-shadow
 * instead of a masked ring. The port adds a class to a div that already
 * exists and changes not a single tag.
 *
 * AND THE TITLE BAR IS ALREADY THERE.
 *
 * Every panel in the game is <div id="bloc..."><h5>Personaj</h5>...</div>.
 * That h5 IS the title bar -- it has been all along, sitting invisibly over a
 * strip painted into the JPEG. Styling `.aid-panou > h5` turns the painted
 * strip into a real one with no new markup at all.
 * ========================================================================== */

.aid-panou {
	box-sizing: border-box;
	/* THE GAP BETWEEN PANELS.
	 *
	 * The layout boxes touch -- css.css gives them no margins -- but the
	 * PAINTED panels inside them never did: the old JPEG left a few pixels of
	 * landscape between every pair. Drawn edge to edge they fuse into one dark
	 * slab, which is what "trebuie si spatii intre panouri, ca sa nu fie
	 * lipite" is about.
	 *
	 * A transparent border is how to get it without moving anything. With
	 * border-box the element keeps the exact size css.css gave it; the border
	 * is simply not painted, and `padding-box` on the background stops the
	 * fill short of it. The rim then goes on as an INSET shadow, which is
	 * clipped to the padding box -- so gap outside, rim, fill, in that order,
	 * on a single element. */
	border: var(--aid-spatiu) solid transparent;
	border-radius: var(--aid-raza-panou);
	background: var(--aid-camp) padding-box;
	/* The rim is a spread shadow rather than a border, so it costs no layout:
	 * the panel keeps the exact width and height css.css gives it, which is
	 * the whole point of a theme that must not move anything. */
	box-shadow:
		inset 0 0 0 var(--aid-rama) var(--aid-piatra),
		var(--aid-apasat),
		var(--aid-desprins);
	color: var(--aid-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* The main panel: opaque, and no blur behind something you cannot see through. */
.aid-panou-opac {
	background: var(--aid-camp-opac) padding-box;
	text-shadow: none;
}

/* The h5 the markup already has. */
.aid-panou > h5 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 4px 0;
	padding: 2px 8px;
	border-radius: var(--aid-raza-panou-interior) var(--aid-raza-panou-interior) 0 0;
	background: var(--aid-fata-alama);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 0 rgba(0, 0, 0, 0.5);
	font-family: var(--aid-font-titlu);
	font-size: var(--aid-titlu-marime);
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	text-align: var(--aid-titlu-aliniere);
	text-transform: var(--aid-titlu-caz);
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
	line-height: 15px;
}

/* A LINK AT THE RIGHT END OF A TITLE BAR (17 sept 2026). „sa adaugam un buton
 * sau link pe bara Elemente Magice, in dreapta catre retete.php". The badge
 * before it takes the spare space (margin-right: auto), so this lands right
 * before the collapse dot. Quiet by default, gold on hover -- a pointer, not
 * a button, on a strip 15px tall. */
.aid-panou > h5 > .aid-h5-link {
	flex: 0 0 auto;
	font: inherit; font-size: 10px; letter-spacing: 0; text-transform: none;
	color: var(--aid-text); text-decoration: none; opacity: .8;
	padding: 0 2px;
}
.aid-panou > h5 > .aid-h5-link:hover { color: var(--aid-aur); opacity: 1; text-decoration: underline; }

/* SI UN BUTON, PE BARA RAFTURILOR (17 sept 2026). „arata foarte fain sa vezi
 * artefactele tale, potiunile mari. am putea adauga un buton fain
 * negru-golden round pe bara de la blocartefacte si blocpotiuni (Vezi
 * Colecția) si sa duca in acel fullscreen unde vedem colectiile."
 *
 * Pastila neagra cu rama de aur, cat bara: 17px inalta pe o bara de 15px +
 * padding, deci nu o umfla. Aceleasi culori ca butoanele negre din Contul meu,
 * ca sa fie limpede ca e acelasi fel de buton, nu un link colorat. */
.aid-panou > h5 > .aid-h5-buton {
	flex: 0 0 auto;
	display: inline-flex; align-items: center;
	height: 17px; padding: 0 10px;
	border-radius: 999px;
	font: inherit; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: bold;
	text-decoration: none; white-space: nowrap;
	color: var(--aid-aur, #ffcc00);
	background: linear-gradient(180deg, #17170f 0%, #000 100%);
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), 0 1px 0 rgba(0, 0, 0, 0.6);
	transition: color .12s, box-shadow .12s, background .12s;
}
.aid-panou > h5 > .aid-h5-buton:hover {
	color: #fff2c0;
	background: linear-gradient(180deg, #2a2716 0%, #0a0a06 100%);
	box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 10px rgba(255, 204, 0, 0.20);
}
.aid-panou > h5 > .aid-h5-buton:active { transform: translateY(1px); }

/* The collapse dot, which every panel in the game has at the right end of its
 * title. Not decoration -- it is how a panel folds away. */
.aid-panou > h5::after {
	content: '';
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.5), rgba(0,0,0,0.4) 70%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

/* ===================================================== round icon buttons
 *
 * WHAT THEY REPLACE, AND WHY IT IS EASY
 *
 * The eight main destinations appear twice in the shell -- across the header
 * either side of the dracusor, and down the right edge in #meniusecundar -- and
 * both sets are the same thing: `<a><img src="imagini/x.png" width="44"
 * height="44"></a>` over an icon painted into the JPEG.
 *
 * The useful discovery is that the IMG is already the full 44x44. The anchor
 * only measures 13px tall because it is `display: inline` and the image sits on
 * the text baseline. So making the anchor `inline-block` gives a box of exactly
 * the right size, in exactly the right place, with no repositioning at all --
 * the button footprint has been correct in the markup for fifteen years, just
 * invisible.
 *
 * The icon is a MASK filled with the theme's gold, not a picture: it recolours
 * with the theme, stays sharp at any size, and costs no request. Which is the
 * same rule as the map's tiles and the header's vine.
 *
 * The port matches these by the alt text the markup already carries -- Acasa,
 * Harta, Targul, Armate, Ceilalti, Institutii, Mesaje, Rapoarte -- so it adds a
 * class and a custom property, and changes no tags. */

.aid-ic {
	display: inline-block;
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0) 62%),
		linear-gradient(165deg, #3d4a30 0%, #1d2716 55%, #0c1208 100%);
	box-shadow:
		0 0 0 2px var(--aid-piatra),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 2px 4px rgba(0, 0, 0, 0.55);
	transition: background-color 90ms linear;
	vertical-align: top;
}

/* The transparent spacer stays exactly as it is -- it is the click target, and
 * it is already the right size. It just has to stop sitting on a baseline. */
.aid-ic img { display: block; width: 100%; height: 100%; }

.aid-ic::before {
	content: '';
	position: absolute;
	left: 24%; top: 24%; right: 24%; bottom: 24%;
	background: var(--aid-aur);
	-webkit-mask: var(--aid-ic) center / contain no-repeat;
	        mask: var(--aid-ic) center / contain no-repeat;
	pointer-events: none;
}

.aid-ic:hover {
	box-shadow:
		0 0 0 2px var(--aid-aur-stins),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 10px rgba(255, 204, 0, 0.25);
}

.aid-ic:hover::before { background: var(--aid-text-tare); }

.aid-i-acasa { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13 16 4l12 9v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M13 29V19h6v10'/%3E%3C/svg%3E"); }
.aid-i-harta { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7 12 4l8 3 9-3v21l-9 3-8-3-9 3Z'/%3E%3Cpath d='M12 4v21M20 7v21'/%3E%3C/svg%3E"); }
.aid-i-targul { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h24l-2-6H6Z'/%3E%3Cpath d='M6 12v14h20V12'/%3E%3Cpath d='M13 26v-7h6v7'/%3E%3C/svg%3E"); }
.aid-i-armate { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 3 13 15l4 4L29 7V3Z'/%3E%3Cpath d='M7 3 19 15l-4 4L3 7V3Z'/%3E%3Cpath d='M6 28l5-5M9 24l3 3'/%3E%3Cpath d='M26 28l-5-5M23 24l-3 3'/%3E%3C/svg%3E"); }
.aid-i-ceilalti { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='11' r='5'/%3E%3Cpath d='M3 27c0-5 4-8 9-8s9 3 9 8'/%3E%3Ccircle cx='23' cy='13' r='4'/%3E%3Cpath d='M23 21c4 0 6 3 6 6'/%3E%3C/svg%3E"); }
.aid-i-institutii { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12 16 5l13 7'/%3E%3Cpath d='M6 12v13M12 12v13M20 12v13M26 12v13'/%3E%3Cpath d='M3 27h26'/%3E%3C/svg%3E"); }
.aid-i-mesaje { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='26' height='18' rx='2'/%3E%3Cpath d='M4 9l12 9 12-9'/%3E%3C/svg%3E"); }
.aid-i-rapoarte { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='20' height='24' rx='2'/%3E%3Cpath d='M11 11h10M11 16h10M11 21h6'/%3E%3C/svg%3E"); }
.aid-i-logout { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 6H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h6'/%3E%3Cpath d='M20 10l6 6-6 6M11 16h15'/%3E%3C/svg%3E"); }

/* THE FOUR THAT WERE NEVER MATCHED. "la zona caracter mai erau ceva butoane
 * (aliante, editare caracter - vezi legacy layout)", and the panel controls in
 * the corner of the main frame, which nobody has mentioned because they have
 * been invisible for as long as the badges have.
 *
 * They are the same construction as every other button in the shell -- an
 * anchor over a transparent x.png -- and they went missing for the same reason
 * the top bar's four did: their destinations were not in the port's table, so
 * no class was added and the spacer stayed a spacer. Reading aidnouv3.jpg shows
 * all three round buttons on the portrait's rim exactly where the markup puts
 * its spacers: (31,43) and (13,93) at 35px, (130,290) at 23px.
 *
 * The two frame controls are the odd pair: `href="javascript:aidPanouReload()"`
 * and `aidInapoi()`, so there is no .php destination to key on and the port
 * matches them on the call instead. */
.aid-i-alianta { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v25'/%3E%3Cpath d='M9 6h15l-4 5 4 5H9'/%3E%3C/svg%3E"); }
.aid-i-aliante { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v20'/%3E%3Cpath d='M5 5h11l-3 4 3 4H5'/%3E%3Cpath d='M17 11v18'/%3E%3Cpath d='M17 13h10l-3 4 3 4H17'/%3E%3C/svg%3E"); }
.aid-i-editpersonaj { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 4l6 6-15 15-7 1 1-7z'/%3E%3Cpath d='M19 7l6 6'/%3E%3C/svg%3E"); }
.aid-i-reincarca { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 16a11 11 0 1 1-3.4-7.9'/%3E%3Cpath d='M27 4v8h-8'/%3E%3C/svg%3E"); }
.aid-i-inapoi { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5L9 16l11 11'/%3E%3C/svg%3E"); }


/* ================================================ the minimap's ring of buttons
 *
 * Eleven controls sit around the 3x3 minimap, and unlike the eight main
 * destinations they are all DIFFERENT SIZES -- 35, 33, 22 and 20 pixels,
 * arranged on a circle rather than a grid, because the old frame was drawn that
 * way and the spacers were laid over whatever the artist had painted.
 *
 * So .aid-ica takes no width at all: the anchor wraps its own image and the
 * image is already the right size. One class fits every one of them, and if a
 * future frame moves a button the CSS does not care.
 *
 * THE FOUR ARROWS WERE NOT GUESSED.
 *
 * Four unlabelled 20px buttons sit above, below, left and right of the grid.
 * That looks like a pan cross, but looking like one is not knowing, so I read
 * their targets: with the player at 34,32 they lead to 34,33 / 34,31 / 33,32 /
 * 35,32. It is a pan cross, and now it says so.
 *
 * The rest carry their own titles and are matched on them: Top 100 in timp
 * real, Contul meu, Statistici, Regulament, Haine, Ajutor, Costuri productie.
 * A few remain unlabelled in the markup and are left alone rather than given an
 * icon I would be inventing. */

.aid-ica {
	display: inline-block;
	position: relative;
	border-radius: 50%;
	vertical-align: top;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0) 62%),
		linear-gradient(165deg, #3d4a30 0%, #1d2716 55%, #0c1208 100%);
	box-shadow:
		0 0 0 1px var(--aid-piatra),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 2px 4px rgba(0, 0, 0, 0.55);
}

.aid-ica img { display: block; }

.aid-ica::before {
	content: '';
	position: absolute;
	left: 22%; top: 22%; right: 22%; bottom: 22%;
	background: var(--aid-aur);
	-webkit-mask: var(--aid-ic) center / contain no-repeat;
	        mask: var(--aid-ic) center / contain no-repeat;
	pointer-events: none;
}

.aid-ica:hover { box-shadow: 0 0 0 1px var(--aid-aur-stins), 0 0 9px rgba(255, 204, 0, 0.3); }
.aid-ica:hover::before { background: var(--aid-text-tare); }

.aid-i-sus { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 25V8M9 15l7-7 7 7'/%3E%3C/svg%3E"); }
.aid-i-jos { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7v17M9 17l7 7 7-7'/%3E%3C/svg%3E"); }
.aid-i-stanga { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 16H8M15 9l-7 7 7 7'/%3E%3C/svg%3E"); }
.aid-i-dreapta { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16h17M17 9l7 7-7 7'/%3E%3C/svg%3E"); }
.aid-i-topactuali { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4h12v6a6 6 0 0 1-12 0Z'/%3E%3Cpath d='M10 6H6v2a4 4 0 0 0 4 4'/%3E%3Cpath d='M22 6h4v2a4 4 0 0 1-4 4'/%3E%3Cpath d='M16 16v5M11 28h10l-1-5h-8Z'/%3E%3C/svg%3E"); }
.aid-i-datecont { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='11' r='6'/%3E%3Cpath d='M6 27c0-5 4-8 10-8s10 3 10 8'/%3E%3C/svg%3E"); }
.aid-i-statistici { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 26h24'/%3E%3Cpath d='M8 20v4M14 14v10M20 17v7M26 9v15'/%3E%3C/svg%3E"); }
.aid-i-regulament { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5h9v22H6ZM17 5h9v22h-9Z'/%3E%3Cpath d='M15 5v22'/%3E%3C/svg%3E"); }
.aid-i-itemuri { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 8l2 6 3-1v13h10V13l3 1 2-6-5-3-3 3h-4Z'/%3E%3C/svg%3E"); }
.aid-i-ghid { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='13'/%3E%3Cpath d='M12 12a4 4 0 1 1 5 4c-1 .6-1 1.4-1 2.5'/%3E%3Cpath d='M16 24.5v.5'/%3E%3C/svg%3E"); }
.aid-i-gcladire { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12c0 2 4 3 8 3s8-1 8-3-4-3-8-3-8 1-8 3Z'/%3E%3Cpath d='M8 12v8c0 2 4 3 8 3s8-1 8-3v-8'/%3E%3C/svg%3E"); }


.aid-i-premium { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l6 5 6-9 6 9 6-5-3 15H7Z'/%3E%3Cpath d='M7 26h18'/%3E%3C/svg%3E"); }
.aid-i-artefacte { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4h10l5 7-10 17L6 11Z'/%3E%3Cpath d='M11 4l-5 7h20M16 11 11 4M16 11l5-7M16 11v17'/%3E%3C/svg%3E"); }
.aid-i-licori { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3h6M14 3v8L7 24a3 3 0 0 0 3 4h12a3 3 0 0 0 3-4l-7-13V3'/%3E%3Cpath d='M9 20h14'/%3E%3C/svg%3E"); }
.aid-i-masini { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='24' r='2.5'/%3E%3Ccircle cx='22' cy='24' r='2.5'/%3E%3Cpath d='M5 20v4M27 20v4'/%3E%3Cpath d='M4 19h24M6 19l3-8h14l3 8v5H6Z'/%3E%3C/svg%3E"); }

/* THE TOP BAR'S FOUR, whose pictures used to live inside aidnouv3.jpg.
 * A quill for "Scrie-ne", a sparkle for the lucky-artefact draw, a clock over a
 * bar chart for the 24-hour statistics, a horseshoe for the week's lucky
 * player. Same masks, same 32x32 grid, same 2.4 stroke as the other twenty. */
.aid-i-scrisoare { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 27c0-6 3-12 8-16 4-3 9-5 13-6-1 5-3 10-6 14-4 5-10 8-15 8z'/%3E%3Cpath d='M6 27 18 15'/%3E%3Cpath d='M4 5h10M4 10h7'/%3E%3C/svg%3E"); }
.aid-i-concurs { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3l3.2 8.4L28 15l-8.8 3.6L16 27l-3.2-8.4L4 15l8.8-3.6z'/%3E%3Cpath d='M25 4l1 2.6L28 8l-2 1.4L25 12l-1-2.6L22 8l2-1.4z'/%3E%3C/svg%3E"); }
.aid-i-stats24 { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='17' r='11'/%3E%3Cpath d='M16 11v6l4 3'/%3E%3Cpath d='M4 28V22M28 28V19'/%3E%3C/svg%3E"); }
.aid-i-norocos { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 28V19a7 7 0 0 1 14 0v9'/%3E%3Cpath d='M9 28h4v-4H9zM19 28h4v-4h-4z'/%3E%3Cpath d='M16 5v3'/%3E%3C/svg%3E"); }
/* a die for the games page (8 Sept 2026), same grid and stroke */
.aid-i-jocuri { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='22' height='22' rx='5'/%3E%3Ccircle cx='11' cy='11' r='1.6' fill='%23000'/%3E%3Ccircle cx='21' cy='11' r='1.6' fill='%23000'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23000'/%3E%3Ccircle cx='11' cy='21' r='1.6' fill='%23000'/%3E%3Ccircle cx='21' cy='21' r='1.6' fill='%23000'/%3E%3C/svg%3E"); }

/* ONE SET OF ICONS, TWO SETS OF BUTTONS.
 *
 * The icon lives on its own class -- .aid-i-acasa -- rather than on
 * .aid-ic-acasa, because the same destination appears at two sizes: 44px in
 * the header and the side column, 18px as the main panel's own home control.
 * Tying the icon to the button size meant defining it twice and forgetting the
 * second one, which shows up as a solid gold square where a mask should be.
 *
 * So: .aid-ic or .aid-ica decides the SHELL, .aid-i-<x> decides the PICTURE,
 * and every button carries one of each.
 *
 * MATCH ON THE TARGET, NOT ON THE TITLE.
 *
 * Two of these buttons are both titled "Haine". One goes to itemuri.php and is
 * indeed Haine; the other goes to masini.php and is Masini with somebody's
 * copy-pasted alt text still on it. Matching the port's rules on the title
 * would therefore have put a shirt on the cars, and -- worse -- would have
 * looked correct.
 *
 * So the port matches these on the href: premium, topactuali, datecont,
 * statistici, regulament, itemuri, masini, ghid, gcladire, artefacte, licori,
 * hartamica. The href is what the button DOES; the title is what someone once
 * typed.
 *
 * The wrong alt is a real bug in the live game -- a tooltip that lies -- and
 * worth a $fixes rule of its own rather than working around it here. */

/* ===================================================== the banner and the strip
 *
 * #blocheader is NOT a panel. It is the brown-and-orange banner that has
 * carried the dracusor and the eight main destinations since 2010, and giving
 * it the same dark green field as everything else flattened the one element on
 * the screen that is supposed to stand out.
 *
 * The eight buttons either side of him are the same eight as the right-hand
 * column -- casa, harta, targul, armate | ceilalti, institutii, mesaje,
 * rapoarte -- so they share .aid-ic and differ only in their setting: a gold
 * ring on brown here, a stone ring on green there.
 *
 * #baratop is a strip, not a panel either: square corners, edge to edge, and no
 * gap. Production has to be readable in it at all times -- "in top bar trebuie
 * sa avem mereu afisata productia" -- which is why it gets its own darker fill
 * rather than the 0.45 the side panels use. */

#blocheader.aid-antet {
	box-sizing: border-box;
	border: var(--aid-spatiu) solid transparent;
	border-radius: var(--aid-raza-mare);
	background: var(--aid-fata-banner) padding-box;
	box-shadow:
		inset 0 0 0 2px var(--aid-cerneala),
		inset 0 2px 0 rgba(255, 226, 170, 0.35),
		0 3px 9px rgba(0, 0, 0, 0.55);
}

/* On brown, the buttons take a gold ring -- a stone one disappears into it. */
/* THE HEADER USES THE RAIL'S BUTTON, FULL STOP.
 *
 * "cele verticale din dreapta jos sunt mai faine. foloseste-le te rog si sus in
 *  header (acelasi css)."
 *
 * Two rules used to sit here, both re-skinning .aid-ic in browns to match the
 * parchment -- a warm body, a warm ring, a softer inner shadow. They were
 * answering the banner rather than the button, and the result was two different
 * controls for the same eight destinations: brown discs across the top, brass
 * and slate down the side. The rail's is the better one, so there is now one
 * button in the game and the rules that made a second are gone. */

#baratop.aid-bara-sus {
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	background: var(--aid-camp-cald) padding-box;
	box-shadow:
		inset 0 0 0 2px var(--aid-piatra),
		0 2px 6px rgba(0, 0, 0, 0.5);
	color: var(--aid-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* ============================================================== the headpiece
 *
 * WHAT IT REPLACES
 *
 * #baratop is 1024x28 and today it is FOUR TRANSPARENT 28px SPACERS over icons
 * painted into backgroundv3.jpg, plus the server name, a search box and a
 * nine-column production table at 9px. Nothing in the markup says what any of
 * the four buttons is; you find out by reading the alt text.
 *
 * WHAT IT IS NOW
 *
 * A headpiece, in the Heroes / Age of Empires sense: a band of aged parchment
 * with a carved rail above and below, a brass vine running its length, and the
 * dracusor at dead centre in a medallion that overhangs the band. The buttons
 * flank him symmetrically, so the centre of the screen is the crest and
 * everything else balances about it.
 *
 * THREE RULES IT IS BUILT ON
 *
 * 1. THE CENTRE IS THE CENTRE. The medallion is the middle child of a flex row
 *    whose two sides are `flex: 1 1 0` -- equal by construction, not by
 *    counting buttons. Add a fifth button on one side and the crest stays put.
 *
 * 2. IT IS THE ONLY LIGHT THING ON SCREEN. Everything else is dark stone over
 *    a landscape. Spend the boldness here and keep the rest quiet.
 *
 * 3. NO ORNAMENT IS A PICTURE. The vine is an SVG used as a MASK filled with
 *    the theme's brass; the medallion is gradients and shadows. So a theme
 *    changes the headpiece by changing values, which is the whole point, and
 *    the band stretches to any width -- which is what makes a phone layout
 *    possible at all.
 * ========================================================================== */

#baratop.aid-cap {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--aid-font);
	/* Room for the medallion, which hangs below the band. */
	padding-bottom: 14px;
}

/* --------------------------------------------------------------- the band */

.aid-cap-panglica {
	position: relative;
	display: flex;
	align-items: center;
	height: 54px;
	padding: 0 10px;
	border-radius: var(--aid-raza-mare) var(--aid-raza-mare) 0 0;
	background:
		linear-gradient(180deg,
			var(--aid-pergament-sus) 0%,
			var(--aid-pergament) 52%,
			var(--aid-pergament-jos) 100%);
	/* The carved rail top and bottom, plus the parchment's own shadow. Done
	 * with box-shadow rather than borders so the rail can be two tones thick
	 * without adding to the element's height. */
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.45),
		inset 0 -1px 0 rgba(0, 0, 0, 0.25),
		0 0 0 2px var(--aid-alama-jos),
		0 3px 12px rgba(0, 0, 0, 0.55);
}

/* The fibres. Parchment without them is a beige rectangle -- this is the same
 * trick as the stone's grain, at a lower frequency and a little stronger,
 * because vellum has a coarser tooth than cut stone. */
.aid-cap-panglica::before {
	content: '';
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	border-radius: inherit;
	background-image: var(--aid-granulatie);
	background-size: 140px 140px;
	opacity: 0.55;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Age at the edges. Old vellum darkens where it was handled and where it was
 * rolled, never evenly, so this is two soft ellipses rather than one border. */
.aid-cap-panglica::after {
	content: '';
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	border-radius: inherit;
	background:
		radial-gradient(ellipse 55% 120% at 0% 50%, rgba(90, 62, 22, 0.32), rgba(90, 62, 22, 0) 70%),
		radial-gradient(ellipse 55% 120% at 100% 50%, rgba(90, 62, 22, 0.32), rgba(90, 62, 22, 0) 70%);
	pointer-events: none;
}

/* ------------------------------------------------------------- the vine
 *
 * A masked strip, so the ornament takes the theme's brass. It runs the full
 * width behind everything and is dimmed -- filigree you can READ is filigree
 * competing with the buttons; filigree you notice only when you look for it is
 * what an old page actually has. */
.aid-cap-vita {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 18px;
	background: var(--aid-fata-alama);
	-webkit-mask-image: var(--aid-filigran);
	        mask-image: var(--aid-filigran);
	-webkit-mask-repeat: repeat-x;
	        mask-repeat: repeat-x;
	opacity: 0.32;
	pointer-events: none;
	z-index: 0;
}

.aid-cap-vita-sus { top: 3px; }
.aid-cap-vita-jos { bottom: 3px; transform: scaleY(-1); }

/* --------------------------------------------------------------- the sides
 *
 * flex: 1 1 0 on BOTH, so they are equal by construction. The medallion
 * therefore sits on the screen's centre line whatever the sides contain --
 * which is the requirement, and is not something you can get by eye. */
.aid-cap-aripa {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.aid-cap-aripa-stanga { justify-content: flex-end;  padding-right: 16px; }
.aid-cap-aripa-dreapta { justify-content: flex-start; padding-left: 16px; }

/* ------------------------------------------------------------ the medallion
 *
 * The crest. Overhangs the band's lower edge, the way a shield hangs off a
 * banner, so the header has a silhouette instead of being a rectangle. */
.aid-cap-medalion {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	/* Overhangs by 14, not 24. Enough to give the header a silhouette instead
	 * of a straight bottom edge; not so much that the crest lands on the name
	 * ribbon below it -- which is exactly what the first attempt did, and the
	 * mascot came out wearing the server name across his chin. */
	margin-bottom: -14px;
	border-radius: 50%;
	background: var(--aid-fata-alama);
	box-shadow:
		inset 0 2px 0 rgba(255, 244, 214, 0.55),
		inset 0 -2px 3px rgba(0, 0, 0, 0.45),
		0 0 0 3px var(--aid-piatra-jos),
		0 0 0 5px var(--aid-alama),
		0 4px 10px rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The boss the mascot sits in: darker than the rim, so he is not a sticker on
 * a coin but a figure in a recess. */
.aid-cap-medalion::before {
	content: '';
	position: absolute;
	left: 7px; top: 7px; right: 7px; bottom: 7px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 30%, rgba(255, 244, 214, 0.20), rgba(0, 0, 0, 0) 60%),
		var(--aid-fata-piatra);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65);
}

.aid-cap-medalion .aid-dracusor {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* The server name, on a small banner hanging BELOW the crest, on the shelf
 * line. Positioned against #baratop rather than the parchment band, because
 * the band's own bottom edge is where the medallion is and stacking the two
 * there is what put the name across the mascot's face. */
#baratop.aid-cap .aid-cap-fasie {
	position: absolute;
	left: 50%;
	bottom: 2px;
	transform: translateX(-50%);
	z-index: 4;
	padding: 2px 18px;
	background: var(--aid-fata-piatra);
	border: 1px solid var(--aid-alama);
	border-radius: 2px;
	box-shadow: var(--aid-lumina), 0 2px 5px rgba(0, 0, 0, 0.6);
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aid-aur);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- the shelf
 *
 * Resources left, search right, on a thin dark strip under the parchment. They
 * are reference, not navigation, so they belong below the crest rather than
 * competing with it -- and putting them here is what lets the buttons stay
 * symmetric about the centre. */
.aid-cap-raft {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 26px;
	margin: 0 14px;
	padding: 0 12px;
	border-radius: 0 0 var(--aid-raza) var(--aid-raza);
	background: var(--aid-camp-cald);
	box-shadow:
		inset 0 1px 0 rgba(255, 244, 214, 0.12),
		0 2px 6px rgba(0, 0, 0, 0.5);
}

#baratop .aid-umplutura { flex: 1 1 auto; }

/* Buttons ON parchment have to be dark, or they disappear into it. */
.aid-cap-panglica .aid-buton {
	border-color: var(--aid-piatra-jos);
	box-shadow: var(--aid-lumina), var(--aid-adancime), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------- buttons */

.aid-buton {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 26px;
	padding: 4px 11px;
	border: 1px solid var(--aid-alama-jos);
	border-radius: var(--aid-raza);
	background: var(--aid-fata-piatra);
	box-shadow: var(--aid-lumina), var(--aid-adancime);
	color: var(--aid-aur);
	font-family: var(--aid-font);
	font-size: 11px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	/* A button that only changes colour on hover feels dead. One pixel of
	 * travel on press is what makes it feel like a button, and it costs
	 * nothing. */
	transition: background-color 90ms linear, border-color 90ms linear;
}

.aid-buton:hover {
	border-color: var(--aid-aur-stins);
	background: linear-gradient(160deg, #7d7261 0%, #574d40 38%, #332d25 100%);
	color: var(--aid-text-tare);
}

.aid-buton:active {
	box-shadow: var(--aid-apasat);
	transform: translateY(1px);
}

.aid-buton:focus-visible {
	outline: 2px solid var(--aid-aur);
	outline-offset: 2px;
}

/* The four header actions: square, icon only, tooltip-labelled. */
.aid-buton-icon {
	width: 30px;
	min-height: 30px;
	padding: 0;
}

.aid-buton-icon svg { width: 17px; height: 17px; display: block; }

/* The one that matters on the screen it is on. */
.aid-buton-tare {
	border-color: var(--aid-alama-sus);
	background: var(--aid-fata-alama);
	color: #2b1f06;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
}

.aid-buton-tare:hover {
	background: linear-gradient(160deg, #f0cd77 0%, #bd9436 45%, #6f5518 100%);
	color: #2b1f06;
}

/* ------------------------------------------------------------- resources
 *
 * The production row, which is currently a nine-column <table> of 9px arial
 * inside the 28px bar. Numbers a player reads at a glance want to be numbers,
 * not table cells: monospace so the digits line up as they tick, and a label
 * small enough to stop competing with them. */

.aid-resurse {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

.aid-resursa {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.aid-resursa-nume {
	font-size: 10px;
	color: var(--aid-text-stins);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.aid-resursa-val {
	font-family: var(--aid-font-cifre);
	font-size: 12px;
	color: var(--aid-text-tare);
}

/* ------------------------------------------------------------------ input */

.aid-camp-text {
	box-sizing: border-box;
	height: 26px;
	padding: 0 8px;
	border: 1px solid var(--aid-alama-jos);
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.45);
	box-shadow: var(--aid-apasat);
	color: var(--aid-text);
	font-family: var(--aid-font);
	font-size: 11px;
}

.aid-camp-text::placeholder { color: var(--aid-text-stins); }
.aid-camp-text:focus {
	outline: none;
	border-color: var(--aid-aur-stins);
	background: rgba(0, 0, 0, 0.6);
}

/* -------------------------------------------------------------- the shell
 *
 * THE LANDSCAPE, WHICH IS NOW ONLY A LANDSCAPE.
 *
 * aidnouv3.jpg had the panels painted into it. aid_nopanels.jpg does not --
 * same hills, same road, same grass, no furniture -- so the picture is finally
 * separable from the interface, and `--aid-fundal` in tokens.css is the whole
 * of what a theme has to change to move the game somewhere else.
 *
 * TWO EARLIER MISTAKES ARE FIXED HERE, AND THE SECOND IS THE INTERESTING ONE.
 *
 * This rule used to read `body.aid-tema` -- and nothing has ever put that class
 * on the body. The port does not add it; grep says the string appears in this
 * file and nowhere else in the project. So the rule was dead from the day it
 * was written, the old background kept showing, and everything LOOKED fine
 * because the thing it was meant to replace was still there. A selector that
 * matches nothing fails exactly like a selector that matches something and
 * changes nothing.
 *
 * The fix is to stop inventing a hook. `body` is already the element, and this
 * stylesheet is loaded after defaultcss2.css, so equal specificity plus later
 * order wins. Nothing has to be added to the markup for that to be true.
 *
 * `cover` and `fixed`, not the old `top center` at natural size: the landscape
 * is 1744x1136 against a 1024-wide shell, and a background that scrolls with a
 * 1020px-tall page shows its own bottom edge on a short window. */
body {
	background-color: var(--aid-iarba);
	background-image: var(--aid-fundal);
	background-position: center top;
	background-repeat: no-repeat;
	/* AUTO, NOT COVER.
	 *
	 * "background-ul trebuie pus auto nu cover (trebuie sa stea fixat pe
	 *  center-top) - acum terenul e miscat."
	 *
	 * cover scales the landscape to fill whatever window it is given, so the
	 * road, the crossroads and the treeline land somewhere different on every
	 * screen -- and the shell, which is a fixed 1024 wide, sits on a different
	 * part of the picture each time. The panels were designed against ONE
	 * framing of that landscape.
	 *
	 * At natural size, centred on the top edge, the middle 1024 pixels are the
	 * same 1024 pixels for everybody. A wide window shows grass either side,
	 * which is what --aid-iarba is for. */
	background-size: auto;
	background-attachment: scroll;
}

/* NO VIGNETTE OVER THE WHOLE SCREEN.
 *
 * The first version dimmed everything behind the shell by up to 45% to buy
 * contrast for the panels. It works, and it is the wrong trade: it darkens the
 * landscape between the panels too -- the only part of it anybody can actually
 * see -- so the picture is dulled everywhere in order to help the places that
 * are covered anyway.
 *
 * The contrast is bought locally instead: each panel casts its own soft shadow
 * onto the ground behind it, which separates it from the landscape without
 * touching the parts of the landscape that are in the open. */
#wrapper { position: relative; }

/* ================================================ the home screen has no floor
 *
 * Laurentiu: "scapa si de fundalul de la frag casa.php sa punem cladirile
 * direct pe fundalul mare."
 *
 * casa.php arrives with body class `mainframegol`, and that class used to drag
 * a 600x510 photograph of a lawn along with it -- so the player's buildings
 * stood on a small painted field, floating on top of the big real one, with a
 * visible seam where the two greens disagreed. Now the panel opens up and the
 * buildings stand on the actual landscape.
 *
 * WHY :has(), AND WHAT HAPPENS WITHOUT IT
 *
 * The class lands on #istanga; the fill belongs to its parent #blociframe. CSS
 * cannot look upwards except with :has(), which every current browser has and
 * this game's audience -- Chrome and Edge -- has had for years. A browser
 * without it simply keeps the opaque panel, which is the current behaviour, so
 * the failure mode is "no improvement", never "broken".
 *
 * THE CONTENT PAGES ARE NOT TOUCHED. #istanga.iframe -- armate, rapoarte, the
 * market -- keeps the opaque field, on purpose: "the main panel is not
 * transparent at all". A battle report over a moving landscape is not
 * atmosphere, it is noise. This is the one screen that is a picture rather
 * than a page, and it is the one screen that opens. */
#blociframe:has(> #istanga.mainframegol) {
	background: none;
	box-shadow: none;
}

/* The three corner controls stay legible over grass: they lose the panel
 * behind them, so they grow their own. */
#blociframe:has(> #istanga.mainframegol) > div:first-child {
	/* A pill now rather than a corner tab: the controls moved off the panel's
	 * corner and onto the bar's line when the bar came back, and a shape cut
	 * square on three sides only makes sense flush into a corner. */
	padding: 2px 4px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(6, 10, 4, 0.72), rgba(6, 10, 4, 0.38));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* And the buildings get a shadow of their own, so they sit ON the grass
 * instead of hovering over it. drop-shadow follows the PNG's alpha, which is
 * the whole reason it is worth the filter here: a box-shadow would draw the
 * rectangle the roof is delivered in. */
#istanga.mainframegol img.hover_animated {
	filter: drop-shadow(3px 6px 5px rgba(0, 0, 0, 0.45));
}

/* box-shadow, NOT filter: drop-shadow.
 *
 * A `filter` on an element makes it a new backdrop root, and a backdrop root
 * is exactly what .aid-cadru-camp's backdrop-filter reads from -- so the blur
 * would stop seeing the landscape and start seeing its own parent, which is a
 * flat stone gradient. The panel would go opaque and nothing would say why.
 * A box-shadow costs the same and creates no such thing. */
/* (the panel's own shadow is set on .aid-cadru at the top of this file) */


/* ############################################################################
 *
 *                            T H E   S T Y L I N G
 *
 * Everything above this line is structure: where a panel is, how a button
 * measures, which class carries which fill. It was written to be correct and
 * deliberately not to be pretty, because the layout had to be proved first --
 * "putem face butoanele si headerul mai fain, dupa ce legam la layout totul
 * acum, nu?"
 *
 * The layout is wired. This is the second half.
 *
 * THE REGISTER
 *
 * Heroes of Might and Magic and Age of Empires, filtered through what Vampirix
 * already does: warm brass over dark ground, everything sunk into or raised out
 * of a surface, no flat rectangles. Ornament earns its place by describing a
 * material -- a ring is a torus, a plate has a bevel, a boss casts a shadow --
 * rather than by being decoration laid on top.
 *
 * WHAT IT MAY NOT DO
 *
 * Move anything. Every panel, every button, every one of the eight
 * destinations stays exactly where fifteen years of play put it. Nothing here
 * changes a position, a width or a padding in the shell; it changes what those
 * boxes are made of. And the dracusor is not styled away: he gets the most
 * prominent seat on the screen, which is what he has always had.
 *
 * ######################################################################### */


/* ========================================================= the button, remade
 *
 * WHY A BORDER RATHER THAN A RING OF box-shadow
 *
 * The old button drew its rim with three stacked box-shadows -- cheap, and flat
 * by construction, because a box-shadow can only be one colour. A real ring is
 * a torus: bright where it faces the light, dark on the far side, with two
 * highlights and two shadows going round. At 44 pixels the eye still reads the
 * difference; a flat ring looks printed, a graded one looks turned.
 *
 * So the ring is a conic-gradient painted into a transparent 3px border, and
 * the face is a separate pair of gradients clipped to the padding box. One
 * element, three background layers, two clip boxes:
 *
 *     background-clip: padding-box, padding-box, border-box
 *                      \_____ the face ____/  \__ the ring __/
 *
 * box-sizing: border-box keeps the button 44x44 with the border on it, so the
 * footprint the markup has had since 2010 does not move by a pixel.
 *
 * The img inside is still the click target and still the full content box. */

.aid-ic,
.aid-ica {
	box-sizing: border-box;
	border: 3px solid transparent;
	background-origin: border-box;
	background-clip: padding-box, padding-box, border-box;
	background-image:
		radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 58%),
		linear-gradient(168deg,
			var(--aid-buton-sus, #435234) 0%,
			var(--aid-buton-mij, #1e2917) 52%,
			var(--aid-buton-jos, #0a0f06) 100%),
		var(--aid-metal);
	box-shadow:
		inset 0 -4px 7px rgba(0, 0, 0, 0.55),
		inset 0 2px 3px rgba(255, 255, 255, 0.10),
		0 2px 4px rgba(0, 0, 0, 0.55);
	transition:
		transform 110ms cubic-bezier(.2, .8, .3, 1),
		box-shadow 110ms linear,
		filter 110ms linear;
}

/* THE MINIMAP BUTTONS PAY FOR THEIR RING OUT OF THEIR OWN POCKET.
 *
 * .aid-ic is a fixed 44x44, so border-box absorbs the border and the footprint
 * does not change. .aid-ica has no size at all -- it is whatever its image is,
 * 35 or 33 or 22 or 20 px -- so a 2px border would make each of the eleven
 * buttons 4px bigger, and since they are absolutely positioned by top/left that
 * growth all goes down and to the right. Eleven buttons drifting off a ring
 * that was drawn around them.
 *
 * The negative margin gives back exactly what the border took, so the ring
 * grows outwards from where the button already was and every one of them stays
 * on its circle. */
.aid-ica {
	border-width: 2px;
	margin: -2px;
}

/* The icon gains a shadow of its own, so it sits IN the dish rather than on
 * top of it. Two shadows: a dark one down-right for depth, a faint light one
 * up-left, which is what makes engraved metal read as engraved. */
.aid-ic::before,
.aid-ica::before {
	filter:
		drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65))
		drop-shadow(0 -1px 0 rgba(255, 240, 200, 0.12));
}

/* Hover lifts the button towards the light. Not a colour change: a position
 * change plus a warmer ring, which is what a physical control does. */
.aid-ic:hover,
.aid-ica:hover {
	transform: translateY(-1px);
	filter: brightness(1.14) saturate(1.06);
	box-shadow:
		inset 0 -4px 7px rgba(0, 0, 0, 0.45),
		inset 0 2px 3px rgba(255, 255, 255, 0.16),
		0 4px 9px rgba(0, 0, 0, 0.55),
		0 0 14px rgba(255, 204, 0, 0.28);
}

/* And pressing it puts it back down, past level. The transition is skipped on
 * the way down -- a button that eases into being pressed feels broken. */
.aid-ic:active,
.aid-ica:active {
	transform: translateY(1px);
	transition-duration: 0ms;
	box-shadow:
		inset 0 3px 7px rgba(0, 0, 0, 0.7),
		0 1px 2px rgba(0, 0, 0, 0.5);
}

.aid-ic:hover::before,
.aid-ica:hover::before { background: var(--aid-text-tare); }


/* ================================================== the banner, and the boss
 *
 * "the header is very important. the little devil must always be in the middle,
 *  with buttons centered. it is the headpiece and has to be super nice and as i
 *  said, homm like or aoe like"
 *
 * The banner is 614x85 and holds nine floats: four buttons, the dracusor, four
 * buttons. Those positions are frozen, so the work is entirely in what the
 * strip is made of and what happens at its centre.
 *
 * Three layers, in order of how much they matter:
 *
 *   1. the plate     -- brass, lit from above, with a bevelled rim
 *   2. the filigree  -- a repeating vine, masked out of the plate itself so it
 *                       is a carving in the metal rather than a sticker on it
 *   3. the boss      -- a raised medallion at dead centre holding the mascot
 */

#blocheader.aid-antet {
	position: relative;
	overflow: visible;
	z-index: 3;
	background:
		linear-gradient(180deg,
			rgba(255, 232, 190, 0.30) 0,
			rgba(255, 232, 190, 0.00) 10px),
		radial-gradient(120% 180% at 50% -40%,
			rgba(255, 214, 150, 0.30), rgba(255, 214, 150, 0) 62%),
		var(--aid-fata-banner)
		padding-box;
	box-shadow:
		inset 0 0 0 2px var(--aid-cerneala),
		inset 0 0 0 3px rgba(255, 214, 150, 0.22),
		inset 0 3px 0 rgba(255, 235, 200, 0.30),
		inset 0 -6px 12px rgba(60, 24, 4, 0.55),
		0 4px 12px rgba(0, 0, 0, 0.55);
}

/* THE VINE IS A MASK, NOT A PICTURE.
 *
 * Same trick as the icons: one SVG data-URI used as a mask over a flat warm
 * fill, so the ornament takes the theme's own brass and costs no request. A
 * theme that wants a different carving overrides --aid-filigran; a theme that
 * wants none sets it to `none` and this draws nothing at all.
 *
 * It runs edge to edge UNDER the buttons at low opacity. Ornament that
 * competes with the controls is ornament in the wrong place. */
#blocheader.aid-antet::before {
	content: '';
	position: absolute;
	left: 6px; right: 6px; top: 6px; bottom: 6px;
	border-radius: var(--aid-raza);
	background: rgba(255, 226, 178, 0.34);
	-webkit-mask: var(--aid-filigran) repeat-x center / auto 100%;
	        mask: var(--aid-filigran) repeat-x center / auto 100%;
	pointer-events: none;
}

/* The four rivets. One element, four background layers -- a rivet is a tiny
 * radial gradient, and four of them cost less than one image. */
#blocheader.aid-antet::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--aid-raza-mare);
	background:
		radial-gradient(circle at 11px 11px,          #ffe2ad 0 1.5px, #a4761f 2px 3.5px, rgba(0,0,0,.5) 4px 4.6px, transparent 5px),
		radial-gradient(circle at calc(100% - 11px) 11px,          #ffe2ad 0 1.5px, #a4761f 2px 3.5px, rgba(0,0,0,.5) 4px 4.6px, transparent 5px),
		radial-gradient(circle at 11px calc(100% - 11px),          #ffe2ad 0 1.5px, #a4761f 2px 3.5px, rgba(0,0,0,.5) 4px 4.6px, transparent 5px),
		radial-gradient(circle at calc(100% - 11px) calc(100% - 11px), #ffe2ad 0 1.5px, #a4761f 2px 3.5px, rgba(0,0,0,.5) 4px 4.6px, transparent 5px);
	pointer-events: none;
}

/* On brass, the buttons take the warm ring and a brown dish. A cold ring
 * disappears into the banner; that was the first version's mistake. */
/* THE HEADER USES THE RAIL'S BUTTON, FULL STOP.
 *
 * "cele verticale din dreapta jos sunt mai faine. foloseste-le te rog si sus in
 *  header (acelasi css)."
 *
 * Two rules used to sit here, both re-skinning .aid-ic in browns to match the
 * parchment -- a warm body, a warm ring, a softer inner shadow. They were
 * answering the banner rather than the button, and the result was two different
 * controls for the same eight destinations: brown discs across the top, brass
 * and slate down the side. The rail's is the better one, so there is now one
 * button in the game and the rules that made a second are gone. */


/* ---------------------------------------------------------- the medallion
 *
 * "Dracusor - little devil - wil not change. that is our mascot, logo, brand...
 *  so this one never gets replaced in any theme."
 *
 * So he does not live in the theme. public/brand/dracusor.svg is outside the
 * theme chain entirely -- Laurentiu's own Illustrator vector, traced, artwork
 * untouched, breathing and blinking on three CSS animations that drive GROUPS
 * rather than the shapes themselves (a CSS transform OVERRIDES the transform
 * presentation attribute instead of composing with it, which is what flattened
 * his eyes the first time).
 *
 * HOW HE GETS IN WITHOUT TOUCHING THE MARKUP
 *
 * The header still contains <img id="dev" src="imagini/devil23.png">, and
 * js.js's de()/deh() reset that src on every mouseout of every button -- so
 * swapping the file would be undone within a second of the first hover. The
 * img is hidden instead and the anchor draws the mascot itself: visibility
 * keeps the box, so the layout is unchanged, and the old JS goes on setting a
 * src nobody can see. No markup change, no fight with fifteen-year-old script.
 *
 * TWO SELECTORS, ON PURPOSE. :has() is exact and survives the markup moving;
 * nth-of-type is positional and works in browsers without :has(). They name
 * the same element, so whichever the browser understands, the mascot appears.
 *
 * An SVG used as a background-image still runs its own CSS animations -- images
 * render in "secure animated mode", which permits declarative animation and
 * forbids script. So he breathes here exactly as he does on the homepage. */

#blocheader.aid-antet > div:nth-of-type(5) > a,
#blocheader.aid-antet a:has(> img#dev) {
	display: block;
	position: relative;
	width: 68px;
	height: 80px;
	z-index: 4;
}

#blocheader.aid-antet #dev { visibility: hidden; }

/* The plate: a struck medallion, wider than the mascot and overhanging the
 * banner a little top and bottom so it reads as raised metal rather than as a
 * circle printed on it. Kept to 96px -- big enough to be the headpiece, small
 * enough not to crash into the strip above or the panel below. */
#blocheader.aid-antet > div:nth-of-type(5) > a::before,
#blocheader.aid-antet a:has(> img#dev)::before {
	content: '';
	position: absolute;
	left: 50%; top: 50%;
	/* 88, AND FOUR PIXELS LOWER. The assembly was 96px centred on the anchor,
	 * which put its crown at page y=20 -- eight pixels up into #baratop, with
	 * the mascot's horns crossing the production strip behind it. Nothing was
	 * clipping it (the anchor carries z-index 4 and wins); it simply ran off
	 * the banner it is mounted on. 88 centred four pixels down lands the whole
	 * medallion inside the header's 85 pixels with three to spare. */
	width: 88px; height: 88px;
	margin: -40px 0 0 -44px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 26%, rgba(255, 244, 214, 0.50), rgba(255, 244, 214, 0) 50%),
		radial-gradient(circle at 50% 46%, rgba(52, 20, 2, 0.88) 0 40%, rgba(52, 20, 2, 0) 62%),
		radial-gradient(circle at 50% 116%, rgba(255, 176, 60, 0.30), rgba(255, 176, 60, 0) 55%),
		var(--aid-metal-cald);
	box-shadow:
		inset 0 0 0 3px rgba(60, 24, 4, 0.85),
		inset 0 0 14px 6px rgba(30, 10, 0, 0.55),
		0 0 0 1px rgba(255, 226, 178, 0.35),
		0 4px 10px rgba(0, 0, 0, 0.6);
	z-index: 0;
}

/* The mascot himself, over the plate, standing slightly proud of it. */
#blocheader.aid-antet > div:nth-of-type(5) > a::after,
#blocheader.aid-antet a:has(> img#dev)::after {
	content: '';
	position: absolute;
	left: -8px; right: -8px; top: 0; bottom: -4px;
	background: var(--aid-dracusor) center bottom / contain no-repeat;
	filter: drop-shadow(0 3px 3px rgba(30, 10, 0, 0.55));
	z-index: 1;
	pointer-events: none;
}

/* He leans towards the cursor. A whole 2 pixels and a hair of scale -- enough
 * to feel alive, not enough to be a cartoon. */
#blocheader.aid-antet > div:nth-of-type(5) > a::after,
#blocheader.aid-antet a:has(> img#dev)::after {
	transition: transform 160ms cubic-bezier(.2, .8, .3, 1);
}
#blocheader.aid-antet > div:nth-of-type(5) > a:hover::after,
#blocheader.aid-antet a:has(> img#dev):hover::after {
	transform: translateY(-2px) scale(1.04);
}


/* ======================================================= the strips, top and foot
 *
 * #baratop is not a panel and must never look like one. It is the ledger: "in
 * top bar trebuie sa avem mereu afisata productia", so it is read at a glance
 * dozens of times an hour and it wants contrast, not atmosphere. Square, edge
 * to edge, its own darker fill, and a hairline of brass along the top and
 * bottom so it reads as a band of metal let into the screen rather than as a
 * fifth panel that lost its corners.
 *
 * #barabottom is the same band mirrored -- ticker, round dates, logout. It
 * carried no styling at all before this. */

#baratop.aid-bara-sus,
#barabottom {
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	background:
		linear-gradient(180deg,
			rgba(255, 226, 178, 0.16) 0 1px,
			rgba(0, 0, 0, 0) 1px calc(100% - 1px),
			rgba(255, 226, 178, 0.10) calc(100% - 1px)),
		linear-gradient(180deg, rgba(18, 28, 12, 0.90), rgba(6, 11, 4, 0.94))
		padding-box;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.7),
		0 2px 7px rgba(0, 0, 0, 0.5);
	color: var(--aid-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

#barabottom { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 -2px 7px rgba(0, 0, 0, 0.5); }

/* The production figures ARE the top bar. Give them the gold. */
#baratop.aid-bara-sus .productiesus {
	color: var(--aid-aur);
	font-weight: bold;
	text-shadow: 0 0 6px rgba(255, 204, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* ...but not so much of it that they run under the search box: "nu se vad bine
   productiile (ajung sub zona cauta); micsoreaza un pic fontul, eventual si
   muta mai la stanga" (8 Sept 2026). The strip's div is a fixed 600px float
   that began at 327 and the search box at 837, so 90px overlapped; with the
   games button beside the lucky draw it is 33 more. The strip now takes the
   room that is actually there (everything between the icons and the search
   box), the digits drop to 11px and the table hugs the left instead of
   centring in 600. */
#baratop.aid-bara-sus > div[style*="width:600px"] {
	width: auto !important;
	max-width: calc(100% - 560px);   /* 1024 bar: 464px, for a 438px table */
	min-width: 440px;
	overflow: hidden;
	white-space: nowrap;
}
#baratop.aid-bara-sus > div[style*="width:600px"] > table { margin: 0 0 0 4px; }
#baratop.aid-bara-sus .productiesus { font-size: 11px; }
#baratop.aid-bara-sus .boxresursetdb { font-size: 9px; }


/* ============================================================== the right rail
 *
 * #meniusecundar is the second copy of the eight destinations, down the right
 * edge, and until now it was eight buttons floating on the landscape with
 * nothing to hold them. A rail: a dark strip with a brass edge, tucked against
 * the right side of the shell, open on that side because it runs off the
 * screen.
 *
 * No size changes. The strip is 51px wide and 388 tall and stays so; the rail
 * is drawn inside it. */

/* NO RAIL.
 *
 * "butoanele verticale de pe lateral dreapta jos nu au nevoie de background."
 *
 * I drew one because eight buttons floating on grass looked unmoored to me.
 * They are not: each one is a ring with its own shadow, and eight of them in a
 * column already read as a set. The strip behind them was solving a problem
 * the buttons had solved themselves, and it put a hard dark edge down the side
 * of the landscape.
 *
 * The rule stays as the note. Nothing is drawn. */
#meniusecundar { background: none; box-shadow: none; }


/* ================================================================ the ornament
 *
 * A panel title with nothing at either end is a label. A panel title with a
 * small mark at each end is a plate. This is the whole difference and it costs
 * one gradient.
 *
 * It goes on h5 rather than on the panel, so a panel with no title -- the
 * character portrait, the experience bar -- does not get a mark hanging in
 * space where its title would have been. */
.aid-panou > h5 {
	background-image:
		linear-gradient(90deg,
			var(--aid-aur) 0 2px,
			rgba(255, 204, 0, 0.28) 2px 3px,
			rgba(255, 204, 0, 0) 3px),
		var(--aid-fata-alama);
	background-repeat: no-repeat;
	background-size: 100% 100%, 100% 100%;
}


/* ========================================================= the potions and the
 *                                                             artefacts shelf
 *
 * "players struggle to get those and they like seing them all the time (their
 *  treasures)" -- so every slot shows, including the empty ones, and the ones
 * that are full should look like something worth having.
 *
 * A niche each: a sunken square with a warm rim, and a glow on hover. The
 * markup gives each item a floated div with a count badge, so the niche is
 * drawn on the div and nothing moves. */
#boxartefacte > div,
.boxpotiuni > table td > div {
	border-radius: var(--aid-raza);
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 204, 0, 0.10), rgba(0, 0, 0, 0) 70%),
		rgba(0, 0, 0, 0.30);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	transition: box-shadow 120ms linear;
}

#boxartefacte > div:hover,
.boxpotiuni > table td > div:hover {
	box-shadow:
		inset 0 0 0 1px var(--aid-aur-stins),
		0 0 12px rgba(255, 204, 0, 0.30);
}


/* ############################################################################
 *
 *                  R O U N D   T W O  --  after looking at it
 *
 * Everything below answers a specific thing Laurentiu found on dev. The list is
 * worth keeping in order, because half of these are not taste: they are the
 * layout telling us that a box which used to be a hole in a photograph is now
 * an element, and elements have edges you can overflow.
 *
 * ######################################################################### */


/* ================================================== the shadows come off
 *
 * "scoate te rog acele shadow de la paneluri - nu dau bine."
 *
 * They were there to separate a translucent panel from a busy landscape, and on
 * the old flat background that worked. On this one it does not: the landscape
 * is already dark at the edges, the shadow lands on grass that is nearly the
 * panel's own colour, and all it adds is a grey halo. The panel's own rim does
 * the separating now. */
.aid-panou,
.aid-cadru {
	box-shadow:
		inset 0 0 0 var(--aid-rama) var(--aid-piatra),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ================================================== nothing scrolls apart
 *
 * "panelurile trebuie positionate fix pe layout (sa nu facem scrol cu tot cu
 *  ele si cu tot cu cladiri)"
 *
 * background-attachment: fixed pinned the landscape to the WINDOW while the
 * panels and the buildings scrolled over it. That is a parallax, and a parallax
 * is exactly wrong here: the buildings are supposed to be standing ON that
 * grass, and they were sliding across it.
 *
 * Scrolling instead, so the ground and everything standing on it move as one
 * picture. */
/* (set with the rest of the background above -- kept here as the note of why:
 * fixed pinned the landscape to the window while the panels scrolled over it,
 * and the buildings slid across the grass they are supposed to stand on.) */


/* ================================================ a colour for every button
 *
 * "butoanele pot fi colorate diferit - plus, jucatorii asociaza butoanele si cu
 *  o culoare si le deosebesc mai usor. nu avem un layout serios, de birou, ci
 *  ceva fun."
 *
 * Eight gold icons on eight identical discs is a toolbar: you read the shape
 * every time because nothing else tells them apart. Give each destination a
 * colour and the row becomes a keyboard -- after a week nobody looks at the
 * pictogram at all, they go to the green one.
 *
 * The colours are picked for what each place IS, not from a palette: the map is
 * the land, the market is coin, the armies are blood, the others are the sky
 * you send messages across. And every one of them is a light, warm tint at high
 * lightness, because the disc under it is nearly black and a dark icon on a
 * dark dish is a hole. */

.aid-ic::before, .aid-ica::before { background: var(--aid-ic-culoare, var(--aid-aur)); }

.aid-i-acasa      { --aid-ic-culoare: #ffcf5c; }   /* hearth */
.aid-i-harta      { --aid-ic-culoare: #7fd66a; }   /* the land */
.aid-i-targul     { --aid-ic-culoare: #ffa63d; }   /* coin, awnings */
.aid-i-armate     { --aid-ic-culoare: #ff6f5e; }   /* blood */
.aid-i-ceilalti   { --aid-ic-culoare: #6ec8ff; }   /* other people */
.aid-i-institutii { --aid-ic-culoare: #c69cff; }   /* office, seal wax violet */
.aid-i-mesaje     { --aid-ic-culoare: #6ee7d3; }   /* paper and distance */
.aid-i-rapoarte   { --aid-ic-culoare: #e8e2c6; }   /* ink on parchment */
.aid-i-logout     { --aid-ic-culoare: #ff8f7a; }

.aid-i-premium    { --aid-ic-culoare: #ffd84d; }
.aid-i-topactuali { --aid-ic-culoare: #ffd84d; }
.aid-i-datecont   { --aid-ic-culoare: #9fd4ff; }
.aid-i-statistici { --aid-ic-culoare: #8ee0a8; }
.aid-i-regulament { --aid-ic-culoare: #ded6bb; }
.aid-i-itemuri    { --aid-ic-culoare: #ff9fd0; }
.aid-i-masini     { --aid-ic-culoare: #b6c2ff; }
.aid-i-ghid       { --aid-ic-culoare: #ffe08a; }
.aid-i-gcladire   { --aid-ic-culoare: #d2b48c; }
.aid-i-artefacte  { --aid-ic-culoare: #8be0ff; }
.aid-i-licori     { --aid-ic-culoare: #d59bff; }
.aid-i-sus, .aid-i-jos, .aid-i-stanga, .aid-i-dreapta { --aid-ic-culoare: #ffe1a3; }
.aid-i-scrisoare  { --aid-ic-culoare: #ffd9a0; }
.aid-i-concurs    { --aid-ic-culoare: #ffd84d; }
.aid-i-stats24    { --aid-ic-culoare: #8ee0a8; }
.aid-i-norocos    { --aid-ic-culoare: #7fd66a; }
.aid-i-jocuri     { --aid-ic-culoare: #ffb84d; }   /* the games: orange, a warm one the bar had not */
.aid-i-alianta    { --aid-ic-culoare: #ffd84d; }   /* your own banner */
.aid-i-aliante    { --aid-ic-culoare: #9fd4ff; }   /* everyone else's */
.aid-i-editpersonaj { --aid-ic-culoare: #ffd9a0; }
.aid-i-reincarca  { --aid-ic-culoare: #cfe6bd; }
.aid-i-inapoi     { --aid-ic-culoare: #cfe6bd; }

/* And the glow on hover takes the button's own colour, so the feedback says
 * WHICH button as well as that it is live. color-mix keeps one rule instead of
 * twenty-four. */
.aid-ic:hover,
.aid-ica:hover {
	box-shadow:
		inset 0 -4px 7px rgba(0, 0, 0, 0.45),
		inset 0 2px 3px rgba(255, 255, 255, 0.16),
		0 4px 9px rgba(0, 0, 0, 0.55),
		0 0 15px color-mix(in srgb, var(--aid-ic-culoare, var(--aid-aur)) 45%, transparent);
}
/* The icon does NOT go white on hover any more: white throws away the colour
 * at the exact moment the player is looking at it. It brightens instead. */
.aid-ic:hover::before,
.aid-ica:hover::before {
	background: color-mix(in srgb, var(--aid-ic-culoare, var(--aid-aur)) 72%, #ffffff);
}


/* ==================================================== the headpiece, redrawn
 *
 * "fundalul inca nu e ce trebuie. incearca sa vezi daca iti iese un pergament
 *  fain ca cel vechi sau ceva similar din jocuri, nu dreptunghiular."
 *
 * The plate is gone. themes/default/imagini/ui/antet.svg is a parchment slung
 * between two turned rods, with wavy cut edges, a ruled border, corner
 * scrollwork and a laurel either side of the middle -- a SHAPE rather than a
 * rectangle with ornament printed on it.
 *
 * Which means the CSS has almost nothing left to do: no fill, no rivets, no
 * vine mask, and no box-shadow, because a shadow on a rectangular BOX around a
 * non-rectangular PICTURE draws the rectangle straight back in. The drop-shadow
 * filter follows the artwork's own alpha instead. */
#blocheader.aid-antet {
	border: 0;
	background: var(--aid-antet-fundal) center / 100% 100% no-repeat;
	box-shadow: none;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}
#blocheader.aid-antet::before,
#blocheader.aid-antet::after { content: none; }

/* AND THE HEADER'S BUTTONS ARE THE RAIL'S BUTTONS. THE SAME ONES.
 *
 * "butoanele de sus, din top header, sa fie exact aceleasi ca cele de pe
 *  lateral dreapta jos. sa nu avem 2 butoane Home diferite. cele colorate sunt
 *  cele bune."
 *
 * There used to be a rule here giving every .aid-ic inside the parchment a
 * dark brown dish, on the reasoning that a button needs contrast against
 * parchment or it vanishes into it. It reads well enough on its own -- and it
 * was wrong anyway, because it overwrote `background-image`, which is where
 * the whole per-destination palette lives. So the eight buttons in the header
 * and the same eight buttons in #meniusecundar were two different sets of
 * buttons: brown discs at the top, coloured discs down the side. Two Home
 * buttons, as he put it.
 *
 * One destination, one button. The rule is deleted rather than rewritten:
 * .aid-ic already says everything a button is, and the way to keep two copies
 * identical is to have nothing that applies to only one of them. Contrast on
 * parchment was never the problem it was solved for -- the coloured discs sit
 * on grass in the rail and read fine, and the parchment is darker than grass.
 *
 * The medallion below is not this. It is the mascot's frame, there is only one
 * of it, and it is part of the banner rather than a copy of anything. */

/* The medallion: lighter metal, and a warm gold well rather than a brown hole
 * for the mascot to stand in. */
#blocheader.aid-antet > div:nth-of-type(5) > a::before,
#blocheader.aid-antet a:has(> img#dev)::before {
	background:
		radial-gradient(circle at 38% 24%, rgba(255, 250, 232, 0.62), rgba(255, 250, 232, 0) 50%),
		radial-gradient(circle at 50% 48%, rgba(120, 76, 18, 0.55) 0 38%, rgba(120, 76, 18, 0) 64%),
		radial-gradient(circle at 50% 114%, rgba(255, 205, 120, 0.40), rgba(255, 205, 120, 0) 54%),
		var(--aid-metal-medalion);
	box-shadow:
		inset 0 0 0 3px rgba(96, 60, 14, 0.75),
		inset 0 0 12px 5px rgba(90, 56, 10, 0.35),
		0 0 0 1px rgba(255, 240, 200, 0.45),
		0 4px 10px rgba(0, 0, 0, 0.5);
}


/* ============================================ the top bar's buttons exist
 *
 * "butoanele din toolbar nu le vad - Scrie-ne, concurs... ce mai era pe sus."
 *
 * Of course not. Those four were icons PAINTED INTO aidnouv3.jpg with a
 * transparent x.png laid over each as the click target -- the same arrangement
 * as every other button in the shell. Stripping the panels out of the
 * background took their pictures with them and left four invisible 28px holes
 * that still worked if you happened to find them.
 *
 * The port now names them the same way it names the other twenty, and they get
 * the same drawn icon. Four more buttons that are buttons. */
#baratop.aid-bara-sus .aid-ica {
	margin: 1px 0 0 4px;
	border-width: 2px;
}


/* ====================================================== the panels, one by one
 */

/* PERSONAJ. "panelul nu merge vertical cat trebuie" -- the info table needs
 * about 250px and the box declares 220, so the production percentages sat on
 * the panel's bottom rim. #bloca is 600 tall and holds 320 + 220 = 540, so
 * there were 60 unused pixels directly underneath it the whole time. */
#blocpersonajinfo { height: 262px; }

/* POTIUNI. "zona potiunilor e overlaped sau ingustata vertical."
 *
 * 58px, and the contents are a 13px title, 8px of padding and a 30px bottle:
 * 55 before anything else, so the strip hung out of the bottom of its own
 * panel. The painted design did not care -- there was no edge to hang out of.
 * Six pixels back from the box's own slack and two off the padding. */


/* ARTEFACTE. "trebuie si placeholderul gol pentru fiecare artefact lipsa. ei
 *  trebuie sa stie ca acolo poate fi ceva (gandeste-te la World of warcraft cum
 *  avea jos placeholdere pentru combat). plus, spatiate fain."
 *
 * The shelf is drawn as a repeating background, not as markup: one 36x34 tile
 * holding a single sunken niche, tiled across the box. The artefacts the player
 * owns are floated divs at exactly that pitch -- 30px wide with 6px of
 * padding-left -- so they land one per niche with no markup change at all, and
 * every slot they have not filled yet shows as an empty one behind them.
 *
 * Two rows, because that is what fits in the 146px panel and it is enough to
 * read as a collection rather than as a row of three lonely icons. */
/* THREE ROWS, because that is what the old panel has. Counted off
 * aidnouv3.jpg: the artefact shelf runs the full width of the panel in three
 * courses, with the title bar and the Elemente magice strip above them. Two
 * rows was my guess; three is the measurement. */
#boxartefacte {
	height: 102px;
	padding: 7px 0 0 3px;
	background-image: var(--aid-nisa);
	background-repeat: repeat;
	background-position: 0 0;
}

/* Same shelf for the potions -- one row, they are consumed rather than
 * collected, but the empty slots say the same thing. */
.boxpotiuni > table td {
	background-image: var(--aid-nisa);
	background-repeat: repeat-x;
	background-position: 0 0;
}

/* ELEMENTE MAGICE and ESTI SUB EFECTUL. Both are absolutely positioned over the
 * artefacts panel by the original markup, which was fine when the panel was a
 * photograph with a place drawn for them. Now they float on it, which is what
 * "elementele magice, care au fugit" means. Give each one a home: a sunken
 * strip of its own, so they read as fitted into the panel rather than dropped
 * on top of it. */
/* "zona Potiuni active si zona Elementelor magice sa fie de aceeasi inaltime si
 *  ambele sa aiba aceeasi transparenta ca majoritatea celorlalte panels (.85)."
 * One height, one ground, and the ground is the panels' own body colour rather
 * than flat black -- so the strip reads as two small panels on the same line as
 * the credits, which is what it is. */
/* 32, MEASURED OFF WHAT IS IN THEM.
 *
 * "la elemente magice, mai trebuie vreo 4-6 pixeli height la background pt ca
 *  acum cardurile elementelor dau pe afara."
 *
 * Each element's niche renders 27px tall (23 of icon plus 1px of padding on
 * each side plus the line box), and the strip had `padding: 2px 6px` with
 * border-box, so 26 gave the contents 22 and they hung four pixels out of the
 * bottom. 27 + 4 of padding is 31; 32 so the niches are not touching the rim.
 *
 * All three at once. They are one line across the bottom of the shell and a
 * strip that is a pixel off its neighbour looks like a mistake from further
 * away than you would think. */
/* Only the credits now: .obiecte and #potiuniactive stopped being 32px strips
   on 10 September and became panels with title bars of their own. */
#aid-credite {
	box-sizing: border-box;
	height: 32px;
	display: flex;
	align-items: center;
}
/* The plate these two used to be given by hand comes from .aid-panou now --
   they are real panels since 10 September, and the pass that themes the shell
   marks them like the rest. The rule that painted them here is gone with the
   strips it painted. */

/* The magic elements have their own six slots in the paint, in a single row to
 * the right of their title. Six is not a guess either -- the markup floats
 * exactly six, 23px wide with 9px of padding. */
.obiecte {
	background-image: var(--aid-nisa);
	background-repeat: repeat-x;
	background-position: 108px 0;
	background-size: 32px 30px;
}


/* ============================================== the experience bar is a bar
 *
 * "bara experientei nu e buna inca."
 *
 * It was a raw yellow div with a white right border and the level written
 * inside it in 8px black -- markup from a time when the panel behind it was
 * painted, so the div only ever had to be the FILL. With the paint gone it is a
 * yellow stripe on a dark strip and reads as a rendering fault.
 *
 * A progress bar is two things: a track you can see when it is empty, and a
 * fill that clearly belongs in it. The panel becomes the track; the div becomes
 * the fill, with a leading edge bright enough to say where the value is.
 *
 * !important, and it is earned: the width is computed per player and written
 * into the element's own style attribute along with `background:yellow`, so the
 * only way to restyle the fill without the port rewriting a PHP echo is to beat
 * an inline declaration. The width is left alone -- that is the data. */
/* 28, NOT 22, AND THE REASON IS .aid-panou.
 *
 * The original rule is `height:16px; padding:12px 11px 0 11px` -- 28 pixels of
 * box under the content-box sizing this stylesheet was written for. .aid-panou
 * sets box-sizing: border-box on every panel, which silently turned that 16
 * into the TOTAL and left 4px of content for a 10px bar. It had been
 * overflowing its own panel since the day the class was added, and nobody could
 * see it because the panel had no visible edge to overflow.
 *
 * So the number here is the OUTER height, and it is the one the layout has
 * reserved all along. Nothing below it moves. */
#blocexperienta {
	height: 28px;
	/* "dunga plina a experientei nu e centrata pe panoul experientei - e
	 *  decalata dreapta si jos (fa-i height mai mic si rezolvi)."
	 *
	 * Both halves of that are one arithmetic error. The panel is 28 outer with a
	 * 4px border, so its inside is 20; the fill is 16 and the padding said 6 top
	 * and bottom -- 28 of content asked of a 20px box, so the fill was pushed to
	 * the bottom and the six pixels underneath were never drawn. And 11 of
	 * padding-left against 4 of border-right is not a centre either.
	 *
	 * 3 and 14: 3 + 14 + 3 = 20 exactly, so the fill is centred with a visible
	 * strip of track above and below it, and 10 either side leaves it on the
	 * same left edge as the artefact niches under it. */
	padding: 3px 10px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.42) padding-box;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		inset 0 2px 5px rgba(0, 0, 0, 0.55);
}
#blocexperienta > div {
	height: 14px !important;
	border: 0 !important;
	border-radius: var(--aid-raza) !important;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.35) 0 1px,
			rgba(255, 255, 255, 0) 1px),
		linear-gradient(90deg, #a9761a 0%, #e8b52e 55%, #ffd964 100%) !important;
	box-shadow:
		inset 0 -3px 6px rgba(90, 50, 0, 0.45),
		0 0 10px rgba(255, 204, 0, 0.30);
	color: #2a1c00 !important;
	font-size: 10px !important;
	line-height: 14px !important;
	text-shadow: 0 1px 0 rgba(255, 240, 190, 0.55);
	/* LA ZERO XP, ETICHETA NU MAI AVEA UNDE STA (22 septembrie 2026).
	 *
	 *   „la inceput, avem xp 0, iar scrisul «nivel XP» din bara de experienta
	 *    nu se vede si sare pe 2 randuri"
	 *
	 * Eticheta stă ÎN dunga plină, iar dunga plină e lată cât procentul. La
	 * zero procente e lată de zero, deci „nivel 1 »" se rupea între cuvinte și
	 * cădea sub bară, unde nu se vede nimic -- exact în ziua în care un jucător
	 * nou are cea mai mare nevoie să afle la ce nivel e.
	 *
	 * Lățimea minimă e cât textul, nu cât un procent: 64px țin și „nivel 40 »".
	 * Sub vreo șapte procente dunga arată deci puțin mai plină decât e --
	 * prețul plătit ca eticheta să existe, și cifrele exacte sunt oricum în
	 * tooltip, la un hover. `nowrap` e cealaltă jumătate: fără el, o bară
	 * îngustă rupe textul chiar dacă are loc. */
	min-width: 64px;
	white-space: nowrap;
	box-sizing: border-box;
}


/* ================================================================== the chat
 *
 * "chat-ul e bine ca e aproape opac... la chat, vezi ce poti face cu panoul din
 *  dreapta lui (panoul utilizatorului) - separa-l ori cu alta nuanta ori cu un
 *  border. Ascunde chat-ul e pozitionat un pic gresit."
 *
 * The online list is a 194px column butted straight against the messages with
 * nothing between them, so a name in the list reads as a line of chat. A rule
 * and a darker ground settle it. */

/* ONE GROUND, AT 0.95.
 *
 * "e un fundal dublu si nu cred ca e aliniat stanga din cauza asta -> se vede
 *  in stanga -> poate de aceea e si mai intunecat (e bine sa fie intunecat dar
 *  doar cu opacity.95 nu cu fundal dublu)"
 *
 * porumbel.jpg is off in aidchat.css; the panel takes the whole job. The chat
 * is the one panel in the shell that is READ line by line rather than glanced
 * at, so it gets 0.95 where every other panel gets --aid-vopsea (0.8) -- the
 * same argument as #blociframe, and the reason the token is not simply raised
 * for everything.
 *
 * The apparent left misalignment goes with it: css.css insets this box by ten
 * pixels (padding: 2px 0 0 10px) and always has. Nothing moves; the second
 * rectangle that made the inset visible is gone. */
#blocporumbel.aid-panou {
	background: rgba(var(--aid-corp-r), var(--aid-corp-g), var(--aid-corp-b), 0.95)
		padding-box;
	/* css.css says `padding: 2px 0 0 10px`. The two at the top go: the panel is
	 * 215 border-box, its inside is 207, and the chat is 205 -- two more would
	 * put the emoticon strip through the bottom rim. The ten on the left stay:
	 * they are what puts the chat's contents on the same left edge as the
	 * experience fill and the artefact niches below it.
	 *
	 * AND FOUR MORE PIXELS OF GAP ON THE RIGHT.
	 *
	 * "las un pic de spatiu intre chatzone si panoul bonusurilor si al
	 *  potiunilor (taie din chat un pic)."
	 *
	 * A wider transparent border, not a narrower panel: the layout floats
	 * #bloclangaporumbel straight after this one, so taking width off
	 * #blocporumbel would drag Bonusuri and the potions 4px left. The border is
	 * inside the 650 css.css gives it, so the fill stops short and nothing
	 * moves. Twelve pixels of ground between the two now. */
	padding-top: 0;
	border-right-width: 8px;
}

#aidchat-online-cutie {
	border-left: 1px solid rgba(255, 226, 178, 0.22);
	background: rgba(0, 0, 0, 0.26);
	border-radius: 0 var(--aid-raza) var(--aid-raza) 0;
}
#aidchat-online-cutie h3 {
	background: rgba(0, 0, 0, 0.45);
	border-bottom: 1px solid rgba(255, 226, 178, 0.18);
}

/* "Arhiva" and "Ascunde chat-ul" are two bare links absolutely positioned into
 * the chat's top edge, and the second one landed on the online column's
 * heading. Both become small chips on the panel's title line, side by side,
 * which is where a control that acts on the panel belongs. */
#blocporumbel > div:first-of-type,
#blocporumbel > div:last-of-type {
	top: 2px !important;
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.45);
	padding: 1px 7px;
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.16);
	font-size: 10px;
	line-height: 15px;
}
/* Measured on the live page rather than guessed at, because the first guess put
 * "Ascunde chat-ul" on top of the channel dropdown. The chat's top strip runs
 * to x=1103; the channel select ends at 910 and the status light starts at
 * 1090, so the free run is 910..1090 and the two chips are 104 and 50 wide. */
#blocporumbel > div:first-of-type  { right: 16px !important; }   /* Arhiva */
#blocporumbel > div:last-of-type   { right: 74px !important; }   /* Ascunde chat-ul */
/* AND ARHIVA HAS TO BE ABOVE THE CHAT, or it is not there at all.
 *
 * "am mai observat ca am pierdut pe drum link-ul Arhiva, de pe baratop dreapta
 *  a chatului." It was never lost -- it was underneath. Both chips are
 * `position: absolute` with no z-index, and #aidchat is `position: relative`
 * and comes AFTER the first of them in the markup: two positioned elements at
 * auto z-index paint in document order, so the chat's online column was drawn
 * straight over Arhiva. "Ascunde chat-ul" survived only because it happens to
 * be the LAST child. One line, and the link is visible again -- at 1017..1067,
 * clear of the status light at 1070. */
#blocporumbel > div:first-of-type { z-index: 3; }
#blocporumbel > div:first-of-type a,
#blocporumbel > div:last-of-type a { color: var(--aid-aur); text-decoration: none; }


/* ================================================ the portrait is an oval
 *
 * Drawing today's boxes on the old background turned this up: #blocpersonaj is
 * a 205x320 rectangle and we had been drawing it as one, but the paint has a
 * tall oval medallion with a laurel crest over the top and the four buttons set
 * around its rim. It is the most decorated element in the old interface and the
 * only one that had been replaced with a plain box.
 *
 * The panel paints nothing of its own now -- the frame IS the panel. */
#blocpersonaj.aid-panou {
	background: var(--aid-personaj-rama) center / 100% 100% no-repeat;
	border: 0;
	box-shadow: none;
}


/* ===================================================== the minimap has a frame
 *
 * hartamicav3.jpg had the window, the ring and all eleven buttons painted into
 * it. The buttons are drawn now, so what is left to supply is the furniture
 * they stand on: a brass ring passing under every one of them, and a squared
 * window for the 3x3 grid. themes/default/imagini/ui/minimap.svg.
 *
 * The panel itself paints nothing -- the SVG is the panel. */
#blocharta.aid-panou {
	background: var(--aid-minimap-rama) center / 100% 100% no-repeat;
	border: 0;
	box-shadow: none;
}
#blocharta.aid-panou > h5 { display: none; }

/* And the map window itself loses the legacy JPEG: the frame around it is drawn
 * and the squares inside it come from hartamica.php. */
/* NO SECOND FRAME. This used to paint --aid-minimap-fereastra over the whole
 * 200x170 box, back when the grid was 138x117 at (27,26) and a bezel drawn on
 * #blocharta would have framed thirty pixels of nothing. That is no longer
 * true: the grid is 152x122 centred on the plate, and minimap.svg draws the
 * window exactly around it.
 *
 * So this rule had become a second frame painted ON TOP of the first -- with
 * `!important`, over an even older `hartamicav2.jpg` underneath it -- and it
 * was what kept the plate's own border out of sight however carefully the SVG
 * was redrawn. "id=panou-harta era de vina: are background si venea peste cel
 * de la blocharta. in consola, cand am sters backgroundul la el, arata totul
 * bine."
 *
 * One frame, drawn once, in the file that draws the rest of the plate. */
#panou-harta {
	background: none !important;
}

/* ARMATELE TALE AND ARMATELE LOR, FLUSH.
 *
 * "armatele lor si armatele tale nu sunt aliniate stanga."
 *
 * Eight pixels out, and the eight are traceable: #blocbonusuri carries
 * `margin: 0 0 0 8px`, so everything floated after it inside
 * #bloclangaporumbel starts eight pixels left of where the right-hand column
 * begins. Armatele tale is in that column; Armatele lor is after bonusuri.
 * The same eight pixels put back. */
#blocatacurilelor { margin-left: 8px; }

/* ============================ the right-hand column ends on one line
 *
 * "lasam bonusurile la widthul lor si ducem celelalte sa se alinieze dreapta cu
 *  el... sper sa ne iasa."
 *
 * It comes out exactly, and here is the arithmetic, because these four numbers
 * are only right together.
 *
 * Bonusuri lives in #blocc, which starts at 1261; at 146 wide with a 4px
 * transparent right border its PLATE ends at 1403. That is the line.
 *
 * The other three live in #bloclangaporumbel, which starts at 1093, and each
 * carries `margin-left: 8`, so the first one's box starts at 1101.
 *
 *   the elements   1101 + w - 4 = 1403   ->  w = 306
 *   the two armies 1101 + w + 8 + w - 4 = 1403  ->  2w = 298  ->  w = 149
 *
 * 8 + 149 + 8 + 149 is 314, and #bloclangaporumbel is 320, so the pair still
 * has its row -- which is the thing to check here: the note further up this
 * file records the day these two wrapped and Armatele Lor dropped underneath.
 *
 * WHY NOT MOVE BONUSURI INSTEAD. Because it was tried: aligning it to Armatele
 * Lor at 144 left a visible band of nothing between it and the button rail on
 * the right. "asa e cand te uiti numai intr-o parte." The column's right edge
 * is set by the widest thing in it, and that is Bonusuri. */
#blocatacuriletale { width: 149px; }
#blocatacurilelor  { width: 149px; }

/* AND THE LISTS INSIDE THEM STAY INSIDE THEM.
 *
 * "armatele tale si armatele mele - vezi dreapta (interiorul - ex. zona-plecate
 *  trece peste marginea panoului)."
 *
 * #zona-plecate carries `width:133px` in its style attribute and #boxatacuriletale
 * `margin-left:6px`, in a panel whose inside is 136 -- so 6 + 133 is three
 * pixels past the rim, and its own scrollbar sat on the frame. Armatele Lor is
 * the same list with a 4px margin, one pixel over. The heights were over too:
 * 121 of list under a 19px title in 143 of panel.
 *
 * The widths come off entirely rather than being corrected -- the boxes are
 * block elements, so with no width they are exactly as wide as the room they
 * are in, and a future change to the panel cannot make them wrong again. The
 * two margins are equalised at the same time, because Tale at 6 and Lor at 4
 * put two identical lists on two different left edges. */
#boxatacuriletale,
#boxatacurilelor { margin: 4px 4px 0 4px; }
#zona-plecate,
#zona-primite    { width: auto !important; height: 116px !important; }


/* AND THE ROOM FOR IT TO SIT IN.
 *
 * The eight pixels alone made it worse, not better: #bloclangaporumbel is 305
 * wide and 8 + 152 (bonusuri) + 8 + 144 is 312, so the float wrapped and
 * Armatele Lor dropped underneath Bonusuri entirely. A fix that moves an
 * element out of its row is not a smaller error than the misalignment it was
 * fixing.
 *
 * 320 gives it the room. #blocd is 1024 and #blocporumbel takes 660 of it, so
 * there are 364 to spend and this spends 320 of them. */
/* superseded 10 Sept -- see #bloclangaporumbel further down, with the chat
   panel's new width. */

/* PREMIUM: ROUND, AND MOVED ROUND THE RING.
 *
 * "butonul premium parca e prea inghesuit acolo in mini harta sus - pe el il
 *  putem face tot rotund (ca Top 100 in timp real) si il putem muta in zona
 *  coltul stanga sus al chenarului minimap - tot pe conturul cercului - e gol
 *  acolo."
 *
 * It was a 50x18 pill wedged between Top 100 and the account button at the top
 * of the ring, which is the busiest arc on the plate. There IS a gap, and it is
 * measurable: taking the centre of every button on the minimap and converting
 * to an angle about the plate's centre (920.5, 136) gives a ring occupied at
 * 24, 63, 90, 116, 179, 204, 224, 245, 270, 291, 305, 323, 335 and 359 degrees
 * -- and nothing at all between 129 and 171. Forty-two degrees of empty rim on
 * the upper left.
 *
 * A 44px button at radius 80 needs thirty of those degrees. Centred on 150 it
 * sits with six degrees of clearance either side, which lands it at (11,46) in
 * the panel's own box.
 *
 * AND (11,46) IS UNDER THE MAP. "butonul premium inca nu apare."
 *
 * It renders, at exactly the size and place this rule asks for -- I measured it
 * on the page before believing him, and it is there. What is also there is
 * #panou-harta's wrapper: `top:25px; left:6px`, 200x170, so it covers
 * 6..206 x 25..195 of a 205x216 plate. (11,46) is inside that, both divs carry
 * `z-index:1`, and the map comes SECOND in the markup. Painted over, and taking
 * the clicks with it -- which is half of "tot panou-harta ia click spre harta
 * mare" as well.
 *
 * An empty arc is not an empty RECTANGLE. The corner is: the plate's disc is
 * centred (102.5,108) with r=100, so (2,4) is 144 from the centre -- outside
 * the ring, outside the map window, outside Top 100 which starts at x=45, and
 * clear of the 3x3 grid which starts at y=51. The one place on this panel where
 * nothing else is.
 *
 * 40px rather than 44 so it clears Top 100 by three pixels rather than fouling
 * it, and a z-index that beats the map's wrapper rather than tying with it.
 *
 * Two selectors again: :has is exact, nth-of-type survives a browser without
 * it. They name the same div -- premium is the second child of #blocharta,
 * after the credits counter. */
#blocharta > div:has(> .aid-i-premium) {
	top: 2px !important;
	left: 2px !important;
	z-index: 12 !important;
}
#blocharta .aid-ica.aid-i-premium {
	width: 40px;
	height: 40px;
	margin: 0;
	border-width: 3px;
	border-radius: 50%;
	background-image:
		radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 58%),
		linear-gradient(168deg, #2f5220 0%, #172c0e 52%, #081204 100%),
		var(--aid-metal-cald);
}
#blocharta .aid-ica.aid-i-premium img { width: 100%; height: 100%; }
#blocharta .aid-i-premium::before { left: 24%; right: 24%; top: 24%; bottom: 24%; }


/* ============================================== the buildings do not fade in
 *
 * "eu aveam ceva animatie fadein la cladiri - scoate-o te rog. e depasita."
 *
 * animate.css's fadeIn on the whole casa.php stage: every panel swap dissolved
 * the player's town back in from nothing, which in 2013 said "this is a modern
 * page" and now says "this page is slow". The class stays in the markup; the
 * animation stops.
 *
 * What replaces it is not nothing -- it is one building breathing at a time,
 * which is the Vampirix idea. That needs to know which building, so it is a
 * separate piece of work rather than a line here. */
#istanga .animated.fadeIn,
#istanga.mainframegol .animated {
	animation: none !important;
	opacity: 1 !important;
}


/* ======================================== the main panel gets its bar back
 *
 * "la panoul principal (istanga) a disparut bara top. nu mai apar nici
 *  butoanele inapoi si reload (sunt x.png in loc) -> fa-le butoane ca pe cel cu
 *  casuta mica (ce era close inainte)."
 *
 * mainframe.jpg had it, and looking at the file settles what it was rather than
 * what I would have guessed: a 17px strip across the whole 600, a green
 * gradient from #3c3728 down to black, with three round buttons at its right
 * end -- a green back arrow, a green reload, and a red dot. The dot is the
 * small home button, which is the one control of the three the port already
 * knew about and therefore the only one still visible: "ca pe cel cu casuta
 * mica (ce era close inainte)". The other two are in the port's table now.
 *
 * A BACKGROUND ON #istanga, NOT AN OVERLAY ON THE PANEL.
 *
 * That is where the original had it -- css.css puts mainframe.jpg on
 * `body.iframe` with `padding-top:12px` -- and it is also the only place it
 * works: #istanga is a scrolling box, and a background on a scrolling box is
 * fixed to the BOX, so the bar stays while a long report runs under it. An
 * absolutely positioned strip on #blociframe would have to be offset by the
 * panel's own border to line up and would still be a second thing to keep in
 * step with the first.
 *
 * .iframe ONLY. The home screen is #istanga.mainframegol, whose panel is
 * transparent so the buildings stand on the real landscape -- a bar across the
 * top of that is a bar across the sky. mainframegolv2.jpg had none either. */
#istanga {
	border-radius: var(--aid-raza-panou);
}

/* LINKURILE DIN PAGINI, CARE ALTFEL SUNT ALBASTRE (17 sept 2026).
 *
 * „sunt ceva linkuri albastre, semn ca nu au stil. mai sunt si prin alte
 *  pagini pe mobil (alianta spre exemplu)."
 *
 * Culoarea lor statea in `css/css.css` -- `a { color: #fff; font-weight: bold }`
 * -- pe care nicio rama nu-l mai incarca, iar fragmentele isi pierd <head>-ul
 * la incarcare. Deci orice link care n-a primit o clasa de-a noastra cadea pe
 * albastrul browserului: numele jucatorului, coordonatele hartii, „Vezi
 * profil". Aici e aceeasi regula ca in 2010, mutata unde traieste pagina.
 *
 * Punctaj mic dinadins (0,1,1): orice regula scrisa pe o clasa a noastra o
 * bate, deci nimic din ce arata bine azi nu se schimba. */
#istanga a,
#istanga a:visited,
#istanga a:active { color: #fff; text-decoration: none; }
#istanga a:hover { color: var(--aid-aur, #ffcc00); }
#istanga.iframe {
	/* Three layers: the rule that closes the bar, a highlight along its top,
	 * and the bar itself. --aid-fata-alama is the same strip every other panel
	 * wears -- measured off the original rather than invented, which is why it
	 * is a dark grey falling to black and not the gold a fantasy UI reaches
	 * for. mainframe.jpg's bar ran #3c4032 to #050501 over sixteen pixels, so
	 * this is the same bar in a token. */
	background-image:
		linear-gradient(180deg, rgba(255, 226, 178, 0.24) 0 1px, rgba(0, 0, 0, 0) 1px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0 1px, rgba(0, 0, 0, 0) 1px),
		var(--aid-fata-alama);
	background-repeat: no-repeat;
	background-size: 100% 1px, 100% 1px, 100% 28px;
	background-position: 0 27px, 0 0, 0 0;
	/* 12 in css.css, and 12 was measured against a bar painted INTO the
	 * background: the heading it pushed down was already clear of it.
	 *
	 * 28 OF BAR RATHER THAN 20, because the three controls are 18px discs and
	 * the bar has to hold them: at 20 they overhung it top and bottom and read
	 * as pinned on rather than sitting in. Plus four for clearance. */
	padding-top: 32px;
}

/* The three controls, centred on the bar. The wrapper is `top:0 right:0` inside
 * #blociframe, and #istanga sits 4px in from that -- so without this they float
 * four pixels above their own bar and hang off its right end. */
#blociframe > div:first-child {
	top: 5px !important;
	right: 6px !important;
}

/* AND #istanga FITS THE PANEL, WHICH IS WHY THE BAR ENDED SHORT OF IT.
 *
 * css.css gives both #blociframe and #istanga 600x510, and .aid-panou's 4px
 * transparent border is INSIDE that 600 -- so the panel's inside is 592x502 and
 * the content box hung eight pixels past it on the right and the bottom. The
 * bar is drawn on #istanga, the controls are positioned on #blociframe, so the
 * two ended in different places: exactly the gap he marked.
 *
 * The border goes rather than the content narrowing. Every fragment in the game
 * is laid out for 600 pixels, and this panel already has margin-left:7px and
 * six spare on its right, so it does not need the gap the other panels wear. */
#blociframe {
	border-width: 0;
	/* AND EVERYTHING INSIDE IT STAYS INSIDE IT.
	 *
	 * "potiunea pentru personajdetaliat.php ... am impresia ca pozitionarea
	 *  z-index o pune peste overlayoul de la noul map."
	 *
	 * jucator.php carries `z-index:9999` on that block, casa.php has 135,
	 * personaj.php has 9 -- fifteen years of numbers picked to win a fight
	 * against whatever was on screen that day, and the map overlay at 900 was
	 * never in the running. Raising the overlay would only move the fight.
	 *
	 * A z-index here makes #blociframe a stacking context, and a stacking
	 * context is a ceiling: 9999 inside it is 9999 RELATIVE TO IT, and the whole
	 * panel then sits at 1 against the overlay's 900. One line, and it settles
	 * every fragment at once rather than the one he found. */
	z-index: 1;
}
#blociframe .aid-ica { margin-left: 3px; }


/* ==================================================== the alert badges, ON the
 *                                                      button rather than under
 *
 * "alertele de la mesaje si rapoarte sunt sub buton."
 *
 * semn.png is 29x25 and the markup drops it at top:42 left:30 inside a wrapper
 * whose own padding is `17px 0 0 11px` -- so the button occupies 11..55 x
 * 17..61 and the badge 30..59 x 42..69. Eight pixels below the button, four
 * past its right edge. It looked deliberate when the button was painted into
 * the JPEG at a slightly different size; against a drawn 44px disc it reads as
 * a badge that has fallen off.
 *
 * A count badge belongs on the upper right of the thing it counts. Same rule,
 * different arithmetic, for the side column: its wrapper is padded 3px, so the
 * 43px button sits at 3..46 and the badge goes to (26,0).
 *
 * SEMNUL S-A FACUT MAI MIC (17 sept 2026). Flacara din semn.svg se deseneaza la
 * 16x16, nu 29x25 ca triunghiul de dinainte, deci aritmetica de mai sus da alt
 * rezultat: in bara de sus (34,12) o aseaza fix pe sfertul din dreapta-sus al
 * discului, asa ca ramane; in coloana din dreapta, (26,0) o impingea la
 * mijlocul muchiei de sus, si 31 o aduce inapoi in colt (31..47, cat butonul). */
#semni, #semnr   { top: 12px !important; left: 34px !important; }
#semnib, #semnrb { top: 0   !important; left: 31px !important; }
#semni, #semnr, #semnib, #semnrb { z-index: 3; pointer-events: none; }
#semni a, #semnr a, #semnib a, #semnrb a { pointer-events: auto; }


/* ============================================ the blazon sits IN the wreath
 *
 * "parca si la personaj e ceva ciudat in topul panelului."
 *
 * The alliance emblem: `top:7px; left:88px`, 35 wide, which on the old painted
 * panel landed on a bare patch above the oval. The wreath is drawn now and its
 * two branches meet with their tips at x 66..84 and 118..136 -- so the emblem
 * as positioned overlaps the right branch and reads as a stray icon dropped on
 * the leaves.
 *
 * Centred in the wreath's opening (the panel's own axis is x=101, so 35 wide
 * starts at 83) and given a seat, it reads as what it is: the alliance's mark
 * mounted in the crest. A player with no alliance gets the same seat with the
 * "join one" link in it, which is a better invitation than a bare word.
 *
 * BY CLASS, NOT BY POSITION. This was `#blocpersonaj > div:nth-of-type(2)`,
 * chosen when the div carried neither a class nor an id. The port names it
 * .aid-bp-stema now, and on 9 Sept 2026 the games button was inserted into this
 * block -- which moved every div along one and handed the crest's gold seat to
 * the games button: "a aparut un patrat auriu si fundalul rotund a fugit". A
 * selector that counts siblings breaks the next time anything is added beside
 * it; one that names the element does not. */
#blocpersonaj .aid-bp-stema {
	left: 83px !important;
	top: 6px !important;
	width: 35px !important;
	height: 35px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0) 62%),
		linear-gradient(165deg, #3d4a30 0%, #1d2716 55%, #0c1208 100%);
	box-shadow:
		0 0 0 2px var(--aid-piatra),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 2px 5px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}
#blocpersonaj .aid-bp-stema img { display: block; }
#blocpersonaj .aid-bp-stema a { text-decoration: none; }


/* ================================================== one straight left edge
 *
 * "vezi sa fie toate pe aceeasi linie dreapta."
 *
 * Measured, on the page, in the shell's own coordinates: the chat's contents
 * start at x=14, the experience fill at 15, the artefacts at 17 and their
 * niches at 14. Four elements stacked in one column, four different left edges,
 * none of them wrong on its own -- each is `border 4 + whatever padding
 * css.css happened to give that div`, and css.css was written against a
 * background that drew the alignment for it.
 *
 * 14 for all of them, which is the one that already fits the chat -- the panel
 * that cannot move without its 646px contents overflowing.
 *
 * AND THE RIGHT EDGE, WHICH WAS RAGGED FOR ONE REASON.
 *
 * #blocexperienta is `width:1002; padding:12px 11px` and #blocartefacte is
 * `width:1012; padding:1px 6px 0 2px` -- widths written for content-box, so
 * both were meant to total 1024 and fill #bloce. .aid-panou sets
 * box-sizing:border-box, which turned each declared width into the TOTAL: 22
 * and 12 pixels short, ending in two different places, in a container that is
 * 1024. The same trap that made the experience bar overflow its own panel, in
 * the same three panels. Stated as totals now. */
#blocexperienta { width: 1024px; }
#blocartefacte  { width: 1024px; }

/* AND NO PADDING ON A PANEL THAT HAS A TITLE BAR.
 *
 * "panel personaje - e un gap intre topbarul panelului (unde e h5) si topul
 *  zonei."
 *
 * Measured across all seven panels that have an h5: four sit flush at (4,4) --
 * the border and nothing else -- and three do not, because css.css still gives
 * them padding it needed when the title was painted into the JPEG at whatever
 * offset the artist chose. #blocpersonajinfo has `padding: 10px 0 0 3px`, so
 * its bar floats ten pixels down the panel with the field showing above it;
 * #blocpotiuni has 11 and 7, so its bar is inset by different amounts on each
 * side; #blocartefacte has 1 and 6.
 *
 * The cartouche IS the top of the frame -- that is what .aid-panou > h5 draws.
 * The padding therefore belongs to the CONTENT under it, not to the panel, and
 * #boxartefacte takes back the four pixels that keep its niches on the left
 * edge everything else in that column uses. */
#blocpersonajinfo { padding: 0; }
#blocelemente     { padding: 0; }
#blocartefacte    { padding: 0; }

/* And the shelf's tiles under its icons rather than three pixels to their left.
 * #boxartefacte's own `padding-left:3` moves the icons but not the background,
 * whose origin is the padding box -- so the tiles were offset from the niches
 * they are drawn for by exactly that padding. */
/* ONE PIXEL, not four (10 Sept 2026): "ca sa mearga putin mai la stanga si sa
   fie centrate pe div toate". The shelf is 1016 wide and its tiles carry a 6px
   left margin each, so four of padding pushed the whole grid off the panel's
   own centre by the three it did not need. */
#boxartefacte { padding: 3px 0 0 1px; background-position: 1px 0; }

/* THE ROW HAS TO FIT BETWEEN THE EXPERIENCE BAR AND THE BOTTOM STRIP.
 *
 * #bloce is 127px in css.css and holds 28 + 146: the artefacts panel was
 * hanging ten pixels into #barabottom. The room is 847..1011 -- 164 -- so #bloce
 * says 164 and the panel takes the 136 that are left after the experience bar.
 * Three courses of niches still fit, by taking the four pixels under the title
 * and four off the shelf's top padding rather than by dropping a row. */
#bloce { height: 164px; }
#blocartefacte { height: 136px; }
#blocartefacte > h5 { margin-bottom: 0; }
#boxartefacte { height: 105px; }


/* ======================================== the potions row, and its eight slots
 *
 * "potiunile inca nu stau bine."
 *
 * .boxpotiuni carries `style="width:330px"` inside a panel whose content box is
 * 264 -- 66 pixels of shelf hanging out of the right-hand side, over Armatele
 * Lor. The 330 is not arbitrary: main.php shows up to EIGHT potions and eight
 * slots at the shelf's 36px pitch need 288, so the panel is the thing that is
 * too narrow, not the box. #bloclangaporumbel is 320 wide and #blocbonusuri
 * above it does not use the last thirty pixels, so the panel takes them.
 *
 * Vertically it is the border-box trap again: 58 declared plus 5 of padding
 * became 58 total, and a 19px title over a 34px bottle is 53 before the frame.
 * 64 outer, and the title gives up its bottom margin -- which is the whole of
 * the difference. */
/* RETARGETED 10 SEPT 2026: this slot beside the chat is the magic elements now.
   The measurement below is still the measurement -- 320 of panel, 64 outer, the
   title giving up its bottom margin -- only the shelf standing in it changed. */
#blocelemente > h5 { margin-bottom: 0; }

/* THE 150px INDENT IS GONE, AND SO IS THE RULE THAT CANCELLED IT.
 *
 * `<h5><span style="padding-left:150px">Potiuni` was written to push the word
 * off a bottle painted at the left of the strip. This used to answer it with
 * `#blocpotiuni > h5 > span { padding-left: 0 !important }`.
 *
 * The port now rewrites that heading outright -- the span is gone and the total
 * lives there instead -- so the rule had nothing left to cancel. What it DID
 * still do was match the new badge, which is also a span in that h5, and being
 * id-specific it beat `h5 > .aid-numar` and took the left padding off it. The
 * digit sat two pixels off centre in its own circle: "la nr potiunilor mai
 * trebuie cred 1 px stanga sa fie centrat pe cerc".
 *
 * Deleted rather than narrowed. A rule kept alive to undo markup that no longer
 * exists will always find something new to hit. */


/* ============================================== elemente magice, one per niche
 *
 * "nici elementele magice."
 *
 * The niches were a background tiled at 32px across the whole strip, and the
 * strip begins with the TITLE -- a float whose width is however wide the word
 * "Elemente Magice" happens to render, which is a different number in every
 * language. So the shelf started under the title and the icons landed between
 * niches; the only way to line the tiling up would be to hard-code the width of
 * a translated string.
 *
 * Each element carries its own niche instead. No offset to get wrong, no count
 * to keep in step with the loop, and it survives a translation. */
.obiecte { background-image: none; }
.obiecte > div:has(> img) {
	/* 23px of icon in a 32px slot, which is the pitch the markup already uses
	 * (`padding-right:9px`). Wider and the sixth element wraps onto a second
	 * line -- the inline `width:369px` leaves no slack, which the first version
	 * of this rule found out. */
	padding: 1px 3px !important;
	margin-right: 3px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
/* And the strip is as wide as what is in it. It is absolutely positioned by
 * `right:4px`, so with no width it shrinks to fit and its right edge lands on
 * the panel's -- which is the straight line, and it stays straight whatever the
 * title translates to. */
/* WIDTH ONLY. This rule used to say `height: auto !important` in the same
 * breath, and being later and !important it beat the shared height above --
 * so the two strips he asked to make equal were 31 and 26 and the rule that
 * was supposed to equalise them had been dead since the day it was written.
 * Nothing here ever wanted the height; the shrink-to-fit is about the right
 * edge landing on the panel's. */
.obiecte { width: auto !important; }


/* ================================================== the minimap shows grass
 *
 * "minimap nu afiseaza iarba (fundalul)."
 *
 * The nine squares are 46x39 images and an EMPTY one is imagini/x.png -- fully
 * transparent. The ground under them was hartamicav3.jpg, the painted frame,
 * which is the file harta-fereastra.svg replaced; the frame came across, the
 * grass did not, so empty land showed as the well's black. The grass is drawn
 * into the well in that SVG now, where the paint had it. */


/* The minimap's coordinate readout is now the way into the big map. It sat in
   two slots the painted frame had for it, 40px apart, as two bare numbers. One
   control, one comma, and it says what it does when you hover it. */
#aid-hm-spre {
	position: absolute;
	/* Centred in the map box rather than measured from its left edge: the two
	   numbers this replaces sat in slots the painted frame had for them, 40px
	   apart, and inheriting one of those coordinates put the pill under a
	   button. The box is 200 wide and the pill is not, so 50% and a translate
	   is the only version that stays centred whatever the text says -- "9, 7"
	   and "100, 100" are different widths. */
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(255, 204, 0, 0.30),
		0 1px 3px rgba(0, 0, 0, 0.6);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}
#aid-hm-spre:hover {
	background: rgba(0, 0, 0, 0.62);
	box-shadow:
		inset 0 0 0 1px rgba(255, 204, 0, 0.75),
		0 0 8px rgba(255, 190, 30, 0.35);
}


/* ================================================ the big map, reframed
 *
 * "poti restiliza si map.php cel inactiv ... in map.php poti reface acel border
 *  verde din svg sau sa faci ceva fain ca in minimap, in acelasi stil"
 *
 * harta.php is the map the game had before the overlay, and it is still the
 * better tool for the thing it is used for -- looking at who is next door and
 * attacking one of them. It kept working the whole time; it just looked like
 * 2010, because hartam.jpg is the frame, the well and the ground painted into
 * one 555x415 JPEG with the markup traced onto it.
 *
 * Same move as the minimap: the picture goes, the frame is drawn. A stone
 * plate, a sunken well with grass in it, a gold hairline where the two meet --
 * the minimap's own vocabulary at four times the size, so the two read as the
 * same object seen close and far.
 *
 * THE NUMBERS ARE THE MARKUP'S, not a new arrangement. The grid is 9 columns of
 * 48px and 7 rows of 40px -- `x > $x-5 and x < $x+5` is nine, `y > $y-4 and
 * y < $y+4` is seven -- so 432x280, and everything below is that rectangle
 * centred with room for the four arrows on the rim. */
#istanga #hartam {
	position: relative;
	box-sizing: border-box;
	width: 560px;
	height: 352px;
	margin: 0 auto 8px;
	/* The frame is a drawing, not a set of gradients. "bordura aceea neagra e
	   un pic cam prea moderna. seamana totul cu o tableta landscape" -- and a
	   dark rounded rectangle with an inner shadow IS what a tablet looks like.
	   Same parchment as the headpiece, sixteen pixels of it, with the middle
	   punched out so the ground below shows through. */
	background: url("../themes/default/imagini/ui/harta-cadru.svg") 0 0 / 100% 100% no-repeat;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* THE GROUND, inside the window the frame cuts. Drawn under the squares rather
   than around them, because an empty square is imagini/x.png -- one transparent
   pixel -- and whatever is behind it IS the ground. That is why the painted
   JPEG could not simply be deleted.

   The grass is two crossed gradients and a vignette: enough texture that it
   does not read as a flat fill, cheap enough to be free. */
#istanga #hartam::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 16px;
	width: 528px;
	height: 320px;
	border-radius: 3px;
	background:
		radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0) 72%),
		repeating-linear-gradient(64deg, rgba(0, 0, 0, 0.05) 0 3px, rgba(0, 0, 0, 0) 3px 7px),
		repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0.035) 0 2px, rgba(255, 255, 255, 0) 2px 9px),
		linear-gradient(180deg, #3a5a24 0%, #2c4519 55%, #21360f 100%);
	box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.5);
}

/* The grid, centred in that window: it is 9 columns of 48px and 7 rows of 40px
   -- `x > $x-5 and x < $x+5` is nine, `y > $y-4 and y < $y+4` is seven -- so
   432x280 inside 528x320 leaves 48 across and 40 down, halved.

   The window is deliberately tight vertically. It was 44px of grass above and
   below, which looked better on its own and pushed the two toolbars past the
   bottom of the panel -- and a map you have to scroll to use the search under
   is worse than a map with less lawn. */
#istanga .aid-hm-grila {
	position: relative;
	padding: 36px 0 0 64px;
	overflow: hidden;
}
#istanga #hartam img { display: block; }

/* The four arrows stand ON the grass at the edges of the window, clear of the
   grid: the window is 16..544 across and 16..384 down, so its centres are 280
   and 200, and the buttons are 34. */
#istanga .aid-hm-sus,
#istanga .aid-hm-jos,
#istanga .aid-hm-stanga,
#istanga .aid-hm-dreapta {
	position: absolute;
	width: 26px;
	height: 26px;
	z-index: 3;
}
#istanga .aid-hm-sus     { left: 267px; top: 13px; }
#istanga .aid-hm-jos     { left: 267px; top: 313px; }
#istanga .aid-hm-stanga  { left: 27px;  top: 163px; }
#istanga .aid-hm-dreapta { left: 507px; top: 163px; }
#istanga .aid-hm-sus img,
#istanga .aid-hm-jos img,
#istanga .aid-hm-stanga img,
#istanga .aid-hm-dreapta img { width: 26px; height: 26px; }

/* A square you can go to. The ring is on the IMAGE rather than on the anchor
   so it follows the tile exactly -- the anchors are floated and their boxes do
   not always agree with the picture inside them. */
#istanga #hartam a img {
	border-radius: 3px;
	transition: box-shadow 90ms linear;
}
#istanga #hartam a:hover img {
	box-shadow:
		0 0 0 1px rgba(255, 204, 0, 0.85),
		0 0 8px rgba(255, 190, 30, 0.45);
}
/* The centre square keeps the marker the page already draws for it
   (`border:1px solid #c90`), but as a ring that does not shift the grid: a
   border on one tile of a floated row moves every tile after it by a pixel. */
#istanga #hartam img[style*="#c90"] {
	border: 0 !important;
	box-shadow: 0 0 0 2px var(--aid-aur), 0 0 10px rgba(255, 204, 0, 0.4);
}

/* THE THREE-SQUARE JUMP PAD.
 *
 * "refa, te rog, si butoanele cele verzi din stanga (alta nuanta fata de
 *  sagetile principale, poate gold) sus si plaseaza-le mai bine, mai jos (intra
 *  peste topbar)"
 *
 * It was `position:absolute; top:15px; left:70px` on a div OUTSIDE #hartam, so
 * it positioned against the panel and landed on the title bar. Out of the flow
 * it goes, and down under the map with the two forms, where it is next to the
 * other two ways of moving around.
 *
 * Gold rather than green, which is his call and the right one: the four big
 * arrows on the map step one square and these step three, so they must not look
 * like the same control at a different size. Turning green art gold with a
 * filter rather than redrawing nine PNGs -- sepia flattens the hue to one, then
 * saturate and rotate take that one to gold. */
#istanga .aid-hm-sarituri {
	position: static !important;
	top: auto !important;
	left: auto !important;
}
#istanga .aid-hm-sarituri table { margin: 0; }
#istanga .aid-hm-sarituri td {
	padding: 0;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--aid-aur-stins);
}
#istanga .aid-hm-sarituri img {
	height: 16px;
	width: auto;
	filter: sepia(1) saturate(3.6) hue-rotate(-14deg) brightness(1.06);
	transition: filter 90ms linear;
}
#istanga .aid-hm-sarituri a:hover img {
	filter: sepia(1) saturate(4.6) hue-rotate(-14deg) brightness(1.35)
	        drop-shadow(0 0 4px rgba(255, 204, 0, 0.55));
}

/* The two forms and the jump pad, on one line under the map.
 *
 * They are siblings in the markup with the forms first, and putting them side
 * by side needs no reordering: inline-block plus a centred parent is the whole
 * trick, and it does not care which order they arrive in. A flex container
 * would have needed a wrapper element around exactly these two, which means
 * moving markup in the port to save nothing.
 *
 * The forms box was `position:absolute; bottom:0; left:30px; height:45px`,
 * measured against the painted frame that is no longer there. */
#istanga div:has(> #hartam) { text-align: center; }
#istanga .borderrosu[style*="bottom:0px"] {
	display: inline-block;
	vertical-align: middle;
	position: static !important;
	height: auto !important;
	width: auto !important;
	left: auto !important;
	margin: 0 8px 6px 0;
	padding: 5px 8px;
	text-align: left;
	line-height: 130%;
}
/* The two forms are each a nested table with its own cell padding, which at
   this size is most of the height. They are a label, two small fields and a
   button; they do not need the room a table gives them by default. */
#istanga .borderrosu[style*="bottom:0px"] td { padding: 0 3px; font-size: 11px; }
#istanga .borderrosu[style*="bottom:0px"] form { margin: 0 !important; }
#istanga .borderrosu[style*="bottom:0px"] input[type="text"],
#istanga .borderrosu[style*="bottom:0px"] input:not([type]) { height: 20px; }
#istanga .aid-hm-sarituri {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 8px;
}


/* ============================================ the minimap opens the big map
 *                                              -- from INSIDE the minimap
 *
 * "acum tot panou-harta (sau hartamica_div) ia click spre harta mare - ar
 *  trebui doar hartamica (adica doar cand dai click in interiorul hartii) - se
 *  poate ca din cauza asta sa nu ia click nici la butoanele stanga dreapta sus
 *  jos de acolo."
 *
 * Exactly that, and the cause is in aidharta.js rather than here: the handler
 * is on #panou-harta's WRAPPER (it has to be -- htmx replaces the panel's
 * contents on every load), so every click inside those 200x170 pixels bubbled
 * up to it, the four pan arrows included. They were firing their own navigation
 * AND opening the overlay, which is indistinguishable from not working. Guarded
 * there; nothing to do here but say where it went. */


/* ========================================================= THE BUTTON PALETTE
 *
 * "am nevoie de mai multe variante de culori din aceste butoane (aid-i-c) ...
 *  fa-mi te rog pe rosu ... tot in stilul asta pe albastru, verde inchis,
 *  magenta, gold, turqoise, purple. apoi, fiecare din cele 8 butoane principale
 *  ... sa aiba cate o culoare diferita din aceasta gama. imi va folosi sa vad ce
 *  svguri fac pentru ele."
 *
 * The body of a button was three hard-coded stops inside .aid-ic's third
 * background layer. They are three custom properties now, so a colour is three
 * declarations and nothing else changes -- the sheen, the brass rim, the inner
 * shadow and the press are all still the one rule above.
 *
 * The red is his, exactly as he wrote it: #ff0000 -> #990000 -> #0a0f06. The
 * other six are built to the same recipe -- a saturated face, a deep midtone at
 * 52%, and the same near-black foot, which is what makes them read as one set
 * rather than as seven separate buttons.
 *
 * The classes are here to be used by hand as well: any control can take
 * .aid-b-rosu and become red without touching its icon. */

.aid-b-rosu     { --aid-buton-sus: #ff0000; --aid-buton-mij: #990000; --aid-buton-jos: #0a0f06; }
.aid-b-albastru { --aid-buton-sus: #2f86e0; --aid-buton-mij: #10457f; --aid-buton-jos: #030c18; }
.aid-b-verde    { --aid-buton-sus: #2f9c46; --aid-buton-mij: #10502a; --aid-buton-jos: #030f08; }
.aid-b-magenta  { --aid-buton-sus: #e13fb4; --aid-buton-mij: #7c1663; --aid-buton-jos: #150312; }
.aid-b-auriu    { --aid-buton-sus: #ffcf4d; --aid-buton-mij: #a3760f; --aid-buton-jos: #171001; }
.aid-b-turcoaz  { --aid-buton-sus: #2fd6c6; --aid-buton-mij: #0c6b68; --aid-buton-jos: #021415; }
.aid-b-purpuriu { --aid-buton-sus: #9a5cf2; --aid-buton-mij: #481d90; --aid-buton-jos: #0c031c; }

/* And one colour per destination, on the class the port already writes, so no
 * markup changes and both copies of a button -- header and rail -- match by
 * construction.
 *
 * The icon goes pale rather than keeping its own hue: a coloured disc under a
 * differently coloured glyph is mud, and the point of this pass is to see the
 * eight shapes clearly enough to decide what to draw. Each icon is a light tint
 * of its own body, so the set still reads as eight colours. */
.aid-i-acasa      { --aid-buton-sus: #ffcf4d; --aid-buton-mij: #a3760f; --aid-buton-jos: #171001;
                    --aid-ic-culoare: #fff4d2; }
.aid-i-harta      { --aid-buton-sus: #2f9c46; --aid-buton-mij: #10502a; --aid-buton-jos: #030f08;
                    --aid-ic-culoare: #ddf7d0; }
.aid-i-targul     { --aid-buton-sus: #2fd6c6; --aid-buton-mij: #0c6b68; --aid-buton-jos: #021415;
                    --aid-ic-culoare: #ccfaf5; }
.aid-i-armate     { --aid-buton-sus: #ff0000; --aid-buton-mij: #990000; --aid-buton-jos: #0a0f06;
                    --aid-ic-culoare: #ffd8d0; }
.aid-i-ceilalti   { --aid-buton-sus: #2f86e0; --aid-buton-mij: #10457f; --aid-buton-jos: #030c18;
                    --aid-ic-culoare: #d6ecff; }
.aid-i-institutii { --aid-buton-sus: #9a5cf2; --aid-buton-mij: #481d90; --aid-buton-jos: #0c031c;
                    --aid-ic-culoare: #e7d9ff; }
.aid-i-mesaje     { --aid-buton-sus: #e13fb4; --aid-buton-mij: #7c1663; --aid-buton-jos: #150312;
                    --aid-ic-culoare: #ffd9f3; }
/* Rapoarte keeps the original slate -- eight colours out of seven names means
 * one of them is the one the set was built from, and this is it. */
.aid-i-rapoarte   { --aid-ic-culoare: #e8e2c6; }


/* ============================================== THE SHELVES, DRAWN NOT TILED
 *
 * The empty slot every artefact and potion the player has not got. It floats in
 * the same row as the ones they have, at the same pitch -- 30 of niche plus the
 * 6 of padding the filled ones carry -- so the two can never drift apart, which
 * is the whole reason the tiled background had to go. */
.aid-nisa-goala {
	float: left;
	width: 30px;
	height: 30px;
	margin: 0 0 4px 6px;
	border-radius: var(--aid-raza);
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 204, 0, 0.05), rgba(0, 0, 0, 0) 70%),
		rgba(0, 0, 0, 0.38);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.06);
}
/* The filled ones already had a niche of their own -- see "a niche each" above
 * -- so all they need is for it to be the SAME size and pitch as an empty one:
 * the 6 and 4 of inline padding become margin, and the box is the 30 the icon
 * is. Held and not-held are then the same object, one of them with something
 * in it.
 *
 * [style*="float:left"] because the potions td also holds the "+" that opens
 * the full list, absolutely positioned in its corner -- a niche behind that is
 * a niche in the wrong place. The floated ones are the slots. */
#boxartefacte > div[style*="float:left"],
.boxpotiuni > table td > div[style*="float:left"] {
	margin: 0 0 4px 6px;
	padding: 0 !important;
	/* AND AN EXACT HEIGHT, WHICH IS NOT TIDINESS.
	 *
	 * A held artefact measured 32 tall against an empty slot's 30 -- two
	 * pixels of line box under a 30px image, from the font-size:9px the
	 * markup puts on the div for its count badge. Floats of different
	 * heights snag: the first simulated run gave 28 slots in row one, 25 in
	 * row two and a single orphan in row four, because the taller items left
	 * a step for the shorter ones to catch on. 82 artefacts in three courses
	 * of 28 only works while every slot is the same box. */
	height: 30px;
	line-height: 0;
	font-size: 0;
}
/* And the tiled shelves they used to stand on are gone. */
#boxartefacte { background-image: none; }
.boxpotiuni > table td { background-image: none; }


/* =================================================== the bonuses fit the panel
 *
 * "la bonusuri -> continutul da peste. poate cu fontul un pic mai mic la
 *  elemente, intra tot"
 *
 * Five rows of 32 pixels in 123 of room: the last one and a half were outside
 * the panel. The 32 is the icon -- $lang[15] and its four neighbours are <img>
 * tags at their natural height -- so that is the number to change, and the text
 * follows it down. 24 a row leaves three pixels of slack rather than 38 of
 * overflow. */
#blocbonusuri table { padding-top: 0 !important; }
/* "id=blocbonusuri merge marit un pic in jos, sa fie la cam acelasi bottom cu
   blocpersonaj: height 162 -- poti aera apoi un pic bonusurile ca sunt cam
   inghesuite. si width: 146px, il aduce la acelasi dreapta cu armatele lor."
   The eight extra pixels of height buy two per row -- 19 to 21, no padding:
   with a pixel of padding as well the sixth row crossed the bottom rim, which
   is the same trap as the potion shelf. Measured: the table runs 27..153 in a
   162 panel, nine clear at the foot. */
#blocbonusuri { height: 162px; width: 146px; }
#blocbonusuri td { font-size: 11px; line-height: 21px; padding: 0; }
/* THE ICONS ARE SQUARES, whatever height the context gives them.
 *
 * "sa ne asiguram ca au aceeasi inaltime, latime." The height is written into
 * the $lang strings themselves -- 21 in the panels, 16 in the shop tables, 15
 * here -- so this class cannot set one; it makes the box square around whatever
 * height applies. `object-fit: contain` is what keeps draci.svg, the narrow one,
 * whole and centred inside that square instead of stretched to fill it.
 *
 * bani.svg was the odd one out at 32: $lang[12] was the only icon string
 * written without a height at all. That is fixed at the source, in romana.php,
 * by a port fix -- "a fost o scapare de a mea". */
img.aid-ico { width: auto; aspect-ratio: 1 / 1; object-fit: contain; vertical-align: middle; }
#blocbonusuri td img { height: 15px !important; vertical-align: middle; }
#blocbonusuri .textgalben { font-size: 11px !important; }


/* =========================================== the chat's title bar reaches the edge
 *
 * IT USED TO REACH BACKWARDS TO GET THERE. The dark notch at the left of
 * "Porumbelul Magic" was defaultcss2.css's `padding-left: 10px` on
 * #blocporumbel showing between the panel's rim and the bar, and the answer was
 * a negative margin plus twenty of padding to put the text back.
 *
 * That padding is gone at the source now (bin/port-legacy.php, $assetFixes):
 * the chat IS the panel's contents, so the bar starts where the panel does and
 * none of those three declarations has anything left to correct.
 *
 * What it does need is the corner. SIX, not the panel's ten: the plate has a
 * 4px border, and an inner corner nested in an outer one is the outer radius
 * minus the border. At ten the bar's curve bulged past the panel's. */
#aidchat > .titlu {
	border-radius: calc(var(--aid-raza-panou, 10px) - 4px) calc(var(--aid-raza-panou, 10px) - 4px) 0 0;
}

/* And the channel dropdown is a control, not a form field. Its own arrow, its
 * own dark face, sized to the bar it sits in. */
#aidchat-canal {
	-webkit-appearance: none;
	appearance: none;
	padding: 0 18px 0 6px;
	border-radius: var(--aid-raza);
	background:
		linear-gradient(45deg, transparent 50%, var(--aid-aur) 50%) calc(100% - 10px) 7px / 4px 4px no-repeat,
		linear-gradient(135deg, var(--aid-aur) 50%, transparent 50%) calc(100% - 6px) 7px / 4px 4px no-repeat,
		linear-gradient(180deg, #23281c, #10140c);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.20);
	color: var(--aid-aur);
	cursor: pointer;
	/* "select id=aidchat-canal are width prea mare (175px) si trece in zona
	 *  panel useri - la 145px mi se pare ca e ok"
	 *
	 * 175 is aidchat.css's, sized for a bar that ran the full width of the chat
	 * before the online list was given its own column beside it. His 145 is the
	 * measurement -- the longest channel name still fits and the box now stops
	 * short of the list's left edge instead of sliding under it. */
	width: 145px;
}


/* ============================ the two columns end on the same line
 *
 * "Blocul Personaj, aliniaza bottom cu bottom de la armatele tale, din partea
 *  dreapta a ecranului."
 *
 * #bloca and #blocc are both 600 tall and both start at the same y, so this is
 * only a matter of the last panel in each using what is left. The right-hand
 * column now fills it exactly -- 8 of margin over the minimap, 216, 226, 150 --
 * and the left one gives its remainder to the info panel: 320 of portrait plus
 * 280 is the same 600. Both end on the shell's own bottom edge. */
#blocpersonajinfo { height: 280px; }


/* ================================== the lower band clears the cafenea
 *
 * "probabil ai vazut ca zona chat si panelurile de sub cladiri trebuie mutate
 *  mai jos. acum se vede, cu ocazia cafenelei care este peste. pentru a
 *  compensa coborarea lor, poti sa maresti bloc personaj si, pe partea
 *  cealalta, blocresurse. armatele lor si tale trebuie sa ramana de acelasi
 *  height"
 *
 * WHAT IS ACTUALLY IN THE WAY.
 *
 * #pozcafenea is 123x90 at (1065, 589) and the band starts at 628, so the chat
 * row covered the bottom 51 pixels of the building -- and it is the building
 * he MOVED, in the console, in the batch before this one. The buildings live
 * inside #istanga and overflow it; that is by design and is why they read as a
 * town rather than as a panel with pictures in it. What they must not overflow
 * into is another panel.
 *
 * 52 PIXELS, AND WHERE THEY COME FROM.
 *
 * #blocd is not positioned. It is the fourth float in #wrapper and its top is
 * decided entirely by the three columns above it, all of which say `height:
 * 600px` -- so nothing inside #bloca or #blocc can move it, which is what the
 * first attempt at this discovered by growing the panels and watching the band
 * not budge. The columns are the thing to change.
 *
 * 652 puts the band at 680; the cafenea ends at 679. One pixel of clearance is
 * not a coincidence, it is the measurement.
 *
 * AND THE 52 GO TO THE TWO PANELS HE NAMED.
 *
 *   left    372 portrait + 280 info                     = 652
 *   right     8 margin + 216 minimap + 278 resurse
 *                                     + 150 armate + 8  = 652
 *
 * Armatele Tale keeps its 150 and Armatele Lor its 151, which is what he
 * asked; they are the two panels that face each other across the band and an
 * uneven pair would be visible from across the room. The centre column grows
 * with the other two and gives its 52 to nothing -- that is the gap the
 * cafenea now shows through, and the point of the change.
 *
 * The page grows 1067 -> 1119. The background is 1136 tall, so this is page
 * that already exists rather than page invented under the art. */
#bloca, #blocb, #blocc { height: 652px; }
#blocpersonaj { height: 372px; }
/* AND SINCE 10 SEPTEMBER IT IS 212, not 278.
 *
 * "blocresurse are acum un gol sub intariri si il putem micsora cu 48px la
 *  height, exact cat sa facem loc deasupra pentru divul cu creditele" -- then,
 * once it was measured, "trebuie adunat vertical, chiar un pic, sa lasam un mic
 * padding la bottom."
 *
 * The panel's contents end 200px in; 278 left 78 of empty plate under
 * "Intariri". 212 leaves twelve, which is a margin rather than a hole, and the
 * 66 released go to the credits bar (48) and to the column's own slack.
 * #blocc is a fixed 652 either way, so nothing below this moves. */
#blocresurse  { height: 212px; }

/* THE CREDITS, UNDER THE MINIMAP.
 *
 * They were in the strip under the experience bar until the potion shelf took
 * that strip whole. `clear: both` and not `display: block`: #blocharta and
 * #blocresurse are floats, and a static block between two floats is laid over
 * them, not after them -- which put the credits inside the minimap the first
 * time this was tried. */
#aid-credite.aid-credite-coloana {
	position: static; float: left; clear: both;
	display: flex; justify-content: center; align-items: center;
	width: 205px; margin: 14px 0; box-sizing: border-box;
}

/* AND THE RAIL GOES WITH THEM.
 *
 * "butoanele laterale dreapta jos au ramas sus si vin peste blocresurse"
 *
 * #meniusecundar is the one thing in #wrapper that is `position: absolute`, so
 * it is the one thing the columns cannot push. css.css pins it at `top: 468`,
 * which was where #blocresurse used to end; the panel now ends at 522 and the
 * rail was sitting on its last 54 pixels. The same 52 that moved everything
 * else moves this too -- it is not an independent number and must not become
 * one. */
#meniusecundar { top: 520px; }

/* AND THE MAIN PANEL ENDS WHERE THE OTHER TWO COLUMNS END.
 *
 * "istanga main frame a ramas mic. da click pe institutii, spre exemplu si vezi
 *  spatiul mare sub frame. bottom trebuie dus la nivelul bottom blocpersonaj."
 * and, separately, "in istanga, pt ca am marit topbar, se face scroll vertical
 * - a aparut o bara pe dreapta."
 *
 * Both are this number. css.css says 510, which ran 113..623 against a column
 * that used to end at 628 and now ends at 680 -- so the panel was short by the
 * same 52 the band moved, and 57 once the five pixels it never used are
 * counted. 113 + 567 = 680, level with #bloca and #blocc.
 *
 * The scrollbar is the same shortfall seen from inside: #istanga.iframe wears
 * `padding-top: 32px` for its title bar and `box-sizing: border-box`, so the
 * bar eats 32 of the 510 and every fragment written for a 500-odd tall frame
 * overflowed by about thirty pixels. 567 gives the content 535 and the bar its
 * 32 without taking anything from the page. */
#blociframe,
#istanga { height: 567px; }

/* AND THE PORTRAIT SITS IN THE MIDDLE OF ITS OWN OVAL.
 *
 * "blocpersonaj (stanga sus) il mai poti da jos un pic sau mari ca sa mai umple
 *  spatiul prea mare"
 *
 * personaj.svg is the panel's background and stretches with it, so the oval
 * grew to 372 the moment the column did. Its contents did not: every one of
 * them is `position:absolute` at a pixel offset written in 2010 against a 320px
 * panel, so the whole group stayed pinned to the top and left 31 pixels of
 * empty oval underneath.
 *
 * The group runs 34..341 -- 307 tall in a 372 panel -- so 24px down puts it in
 * the middle with the level and the pencil landing just inside the bottom of
 * the ring. A transform rather than eight edited offsets: they are one group,
 * they move as one, and nothing in the markup has to be true for this to work.
 */
#blocpersonaj > div { transform: translateY(24px); }


/* ===================================================== the search box
 *
 * "vezi si butonul cauta din dreapta sus de tot. form-ul de acolo duce tot
 *  spre harta veche. sa duca spre cea noua" / "fa-l si pe acela mai fain:)"
 *
 * WHAT WAS THERE.
 *
 * A 100px text field and a 50px submit, both 16px tall, inside a wrapper
 * declaring `width:130px`. 150 does not fit in 130, so the button hung past
 * the end of its own box and out to the shell's edge -- which is why it looked
 * like it had been dropped there rather than placed.
 *
 * The port takes the inline sizing off both inputs, so none of this needs
 * !important. It also adds a placeholder: the field had no label of any kind,
 * and at 28px there is nowhere to put one that is not inside the field.
 *
 * ONE PILL, TWO HALVES.
 *
 * The field carries the magnifier as a background image rather than as an
 * <img> beside it -- there is no markup to hang an icon on and adding some
 * would mean another port fix for a decoration. The two halves meet with no
 * gap and only the outer corners are round, so it reads as one control.
 *
 * The two states are the search's answers. .aid-cauta-asteapta while the
 * request is out, .aid-cauta-gol when the name is not a player -- set and
 * cleared by AidHarta.cautaJucator(), and cleared again the moment he types,
 * which is the one thing an alert() cannot do. */
#baratop > div:has(input[name="numej"]) {
	right: 8px !important;
	width: auto !important;
	height: 28px !important;
	display: flex;
	align-items: center;
}
#baratop > div:has(input[name="numej"]) table { border-collapse: separate; border-spacing: 0; }
#baratop > div:has(input[name="numej"]) td    { padding: 0; }

#baratop input[name="numej"] {
	box-sizing: border-box;
	height: 20px;
	width: 128px;
	margin: 0;
	padding: 0 7px 0 22px;
	border: 0;
	border-radius: 10px 0 0 10px;
	/* LUPA ÎNAINTEA FUNDALULUI (îndreptat 23 septembrie 2026).
	   Straturile se pictează de sus în jos, deci primul scris stă deasupra.
	   Degradeul fiind opac și scris primul, lupa a stat ascunsă sub el de
	   când s-a desenat: un câmp fără etichetă ȘI fără pictogramă, adică o
	   casetă goală în colț. „ori nu e buton de search ori nu-l vad eu." */
	background:
		no-repeat 6px 50% / 11px 11px
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23c69e0c' stroke-width='2'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Cpath d='M10 10l4 4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(180deg, #0d1108, #181e10) padding-box;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.8),
		inset 0 1px 3px rgba(0, 0, 0, 0.7),
		inset -1px 0 0 rgba(255, 226, 178, 0.10);
	color: var(--aid-aur);
	font-size: 11px;
	outline: 0;
}
#baratop input[name="numej"]::placeholder { color: rgba(255, 204, 0, 0.38); }
#baratop input[name="numej"]:focus {
	box-shadow:
		inset 0 0 0 1px rgba(255, 204, 0, 0.55),
		inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
#baratop input[name="numej"].aid-cauta-gol {
	box-shadow:
		inset 0 0 0 1px rgba(220, 60, 50, 0.85),
		inset 0 1px 3px rgba(0, 0, 0, 0.7);
	color: #ff8a80;
}
#baratop input[name="numej"].aid-cauta-asteapta { opacity: 0.6; }

#baratop input[name="numejs"] {
	box-sizing: border-box;
	height: 20px;
	min-height: 0;
	width: auto;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 0 10px 10px 0;
	background-image:
		linear-gradient(100deg,
			rgba(255, 255, 255, 0) 58%,
			rgba(255, 255, 255, 0.30) 70%,
			rgba(255, 255, 255, 0) 84%),
		linear-gradient(180deg, #ffd76b 0%, #d69f28 52%, #8a5f12 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 244, 200, 0.5),
		inset 0 -2px 4px rgba(120, 70, 6, 0.4),
		0 1px 3px rgba(0, 0, 0, 0.5);
	color: #2d1e00;
	font-size: 11px;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(255, 244, 200, 0.5);
	cursor: pointer;
}
#baratop input[name="numejs"]:hover  { filter: brightness(1.08); }
#baratop input[name="numejs"]:active {
	filter: brightness(0.94);
	box-shadow: inset 0 2px 4px rgba(60, 34, 4, 0.55);
}


/* ======================================================= the tooltip
 *
 * "tooltip-ul de la cladiri (se de prin tot game-ul) e broken - e prin toate
 *  partile acum. fa ceva css nou, eficient si frumos. pune-i o rama de
 *  pergament frumos sa arate a tooltip de joc."
 *
 * The "prin toate partile" half is fixed in js/aidtooltip.js, which has the
 * post-mortem: thirty-four pasted copies of a 2001 script, and the pasted ones
 * had lost the 'px' off `skn.left = x + Xoffset`. This is the other half.
 *
 * PARCHMENT, AND DARK TEXT ON IT.
 *
 * Not a choice made for looks alone. The content is built by a hundred and
 * thirty-seven PHP call sites that have always drawn on `BGCOLOR=white`: bold
 * names, plain numbers, small building images with no light of their own. A
 * dark tooltip would need every one of those revisited. Parchment keeps the
 * contrast direction the content was written for AND is the thing he asked
 * for, which is the rare case where the cheap answer is also the right one.
 *
 * THE FRAME IS BOX-SHADOW, NOT AN IMAGE.
 *
 * Four flat rings -- hairline, brass, dark, and the drop -- cost nothing, size
 * themselves to any content, and stay sharp at any zoom. A border-image of a
 * torn edge would look better standing still and would have to be re-sliced
 * every time the padding changed; a tooltip is on screen for a second and a
 * half at a time and does not earn that.
 *
 * Nothing here uses `display` for the show and hide: `visibility` plus
 * `opacity` lets it fade, and an element that is never display:none keeps its
 * measured size, which is what the placement code reads before the first
 * paint.
 */
#dek,
#dek.aid-tooltip {
	position: fixed;
	left: -9999px;
	top: -9999px;
	z-index: 2000;
	box-sizing: border-box;
	width: auto;
	max-width: 260px;
	padding: 7px 11px;
	border: 0;
	border-radius: 3px;
	background:
		radial-gradient(ellipse at 22% 18%, rgba(169, 122, 53, 0.20), rgba(169, 122, 53, 0) 60%),
		radial-gradient(ellipse at 82% 88%, rgba(169, 122, 53, 0.22), rgba(169, 122, 53, 0) 62%),
		linear-gradient(170deg, #f8e9c8 0%, #eddcae 42%, #dcc48c 78%, #c9a86a 100%);
	box-shadow:
		inset 0 0 0 1px rgba(120, 80, 20, 0.55),
		inset 0 0 12px rgba(120, 80, 20, 0.28),
		0 0 0 1px #6d4413,
		0 0 0 3px #a97a35,
		0 0 0 4px #2b1a05,
		0 7px 20px rgba(0, 0, 0, 0.55);
	color: #3a2408;
	font-size: 11px;
	line-height: 15px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 250, 232, 0.6);
	pointer-events: none;      /* it must never eat the hover that opened it */
	visibility: hidden;
	opacity: 0;
	transition: opacity 90ms linear;
}
/* O POZĂ ÎN TOOLTIP NU IESE DIN EL -- DAR NUMAI CEA CARE N-A CERUT O MĂRIME.
 *
 * `max-width: 260px` de mai sus oprește cutia, nu ce e în ea: un `<img>` mai lat
 * își păstrează lățimea naturală și dă peste margine. N-a deranjat cât timp
 * pozele din popup erau de 200 de pixeli; de când miniatura de la urcare arată
 * fișierul de 2x al clădirii (`Oras::imagineFisa`), mall-ul are 376 și ar fi
 * ieșit.
 *
 * `:not([height]):not([width])` NU e prudență, e reparația unei stricăciuni:
 * prima formă a regulii avea `height: auto` fără gardă, iar în tooltipul
 * clădirii producția se scrie cu `<img height="16" src="resurse/draci.svg">`
 * (Oras::tooltip). Un SVG fără mărime intrinsecă, lăsat pe `auto`, se desenează
 * la mărimea lui implicită -- „dracusorul se vede foarte mare (nu ca iconita
 * unei resurse)". Cine și-a scris mărimea în atribut o știe mai bine decât
 * foaia asta; regula e pentru cine n-a scris-o. */
#dek img:not([height]):not([width]) {
	max-width: 100%;
	height: auto;
}
#dek.aid-tooltip-deschis {
	visibility: visible;
	opacity: 1;
}
/* AND THE TABLE INSIDE IT STOPS BEING LIGHT-ON-DARK.
 *
 * "schimba si text color insa in negru - a ramas alb"
 *
 * Most tooltips are a <table> -- that is how the building figures have always
 * been laid out -- and defaultcss2.css says `table { color: #ddd }` for the
 * whole game, because the whole game is light text on dark panels. The colour
 * on #dek never reached them: a table sets its own.
 *
 * `inherit` rather than a second copy of the brown. The tooltip's colour is
 * stated once, on #dek, and everything structural inside it takes whatever
 * that is -- so a theme that repaints the tooltip repaints the tables in it
 * without knowing they exist. <b> keeps its own darker tone below, and a
 * <font color> written into a message by the game still wins, which is the
 * one case where the content genuinely means a colour. */
#dek table,
#dek thead,
#dek tbody,
#dek tr,
#dek td,
#dek th             { color: inherit; }
#dek b,
#dek strong        { color: #2a1a04; }
#dek img           { vertical-align: middle; max-width: 100%; }
#dek .aid-tooltip-corp > br:first-child { display: none; }


/* ================================================ the panel controls, undressed
 *
 * "cele 3 butoane din istanga sus -> scoate fundalul si sa nu fie afisate in
 *  ecranul casa.php"
 *
 * The dark tab behind them was drawn when the home screen took its panel away
 * and left three buttons on grass. They are not on grass any more -- the panel
 * has a title bar of its own for them to sit on -- so the tab is one background
 * too many. And on the home screen they have nothing to act on: casa.php IS the
 * panel's first screen, so Back, Reload and Home all point at where the player
 * already is. */
#blociframe > div:first-child {
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	/* AND CLEAR OF THE SCROLLBAR.
	 *
	 * "istanga - butoanele cele 3 din top right intra putin peste bara de
	 *  scroll vertical. mutate un pic mai la stanga (10-15px)"
	 *
	 * Measured: the rightmost of the three ends four pixels from #istanga's
	 * right edge, and a scrollbar is about fifteen wide -- so on every fragment
	 * long enough to scroll, the bar comes up underneath them. The three sit on
	 * #blociframe rather than inside the scrolling box, so they cannot be
	 * pushed by it and have to be moved out of its way. */
	transform: translateX(-15px);
}
#blociframe:has(> #istanga.mainframegol) > div:first-child { display: none; }


/* ============================================ the credits, in gold, on the strip
 *
 * "scoate insa acel background verde de sub text ca nu se vede bine textul.
 *  inca e inghesuit acolo sus dreapta -> propun sa il mutam in stanga
 *  elementelor magice, jos."
 *
 * The green was `background:#060` on the div, still there under the gold and
 * showing through the text. The div is rebuilt and moved to the strip by the
 * port (see 'premium credits moved to the strip'), so what is left here is the
 * pill itself -- struck gold, because this is the one number in the shell you
 * buy with real money and it should not look like the others.
 *
 * AND THE TWO SELECTORS THAT NAMED IT BY POSITION ARE GONE WITH IT.
 * #blocharta > div:first-of-type was the credits; with the credits moved out it
 * would have been the Premium button, and :nth-of-type(2) -- the fallback for
 * browsers without :has() -- would have been the map. A rule that names an
 * element by its place in a list is a rule that quietly moves house. */
#aid-credite {
	position: absolute;
	top: 31px;
	left: 176px;
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	/* NO HEIGHT. It said 26 here, later in the file and id-specific, so it beat
	 * the shared rule above that exists precisely to keep the three strips the
	 * same. A second statement of a shared measurement is not a safety net, it
	 * is the thing that breaks it. */
	padding: 0 12px 0 8px;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0 1px, rgba(255, 255, 255, 0) 1px),
		linear-gradient(168deg, #ffd76b 0%, #d69f28 52%, #8a5f12 100%);
	box-shadow:
		inset 0 0 0 1px rgba(90, 52, 4, 0.55),
		inset 0 -3px 6px rgba(120, 70, 6, 0.45),
		0 2px 5px rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	z-index: 2;
}
#aid-credite a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #2d1e00 !important;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255, 244, 200, 0.55);
	font-size: 11px;
}
#aid-credite span   { letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
#aid-credite strong { font-size: 13px; }
#aid-credite img    { display: block; }
#aid-credite:hover  { box-shadow: inset 0 0 0 1px rgba(90,52,4,0.55), 0 0 12px rgba(255,204,0,0.45); }


/* =============================== the minimap's grid does not catch the ring
 *
 * "vezi ca div-ul hartamica iese un pic peste butoanele din dreapta."
 *
 * #hartamicadiv is 179 wide inside a 200 panel and starts at its left edge, so
 * it runs under Statistici and Haine on the right of the ring. It draws
 * nothing, so nothing showed -- but it is the element the map click is bound
 * to, and a transparent box over a button is a button that sometimes does not
 * work. The div stops taking the pointer; the grid inside it takes it instead,
 * which is also what "doar cand dai click in interiorul hartii" asks for. */
#hartamicadiv { pointer-events: none; }
#hartamica    { pointer-events: auto; }


/* ================================ a band of its own between XP and artefacts
 *
 * "Elementele magice si zona licorilor (esti sub efectul) -> eu zic sa facem un
 *  spatiu intre bara de experienta si artefacte si sa le punem cum trebuie
 *  acolo."
 *
 * Both were absolutely positioned ON the artefacts panel by markup written when
 * that panel was a photograph with a place drawn for each of them -- Elemente
 * Magice sat on the title bar, Esti sub efectul floated over it a hundred
 * pixels to the right. Neither is part of the artefacts; they are the player's
 * two other small inventories, and they get their own line.
 *
 * The thirty pixels are new page rather than borrowed: #bloce was 164 for 28 of
 * bar and 136 of shelf with nothing spare, and the background is 1136 tall
 * against a document of 1037 -- so the page can grow into picture it already
 * has rather than into blank ground. */
/* THE BAND THE STRIP SITS IN, SIZED FROM BOTH EDGES.
 *
 * The experience bar ends at 28 and the artefacts shelf began 30 later, so the
 * strip had exactly 30px to live in and a 32px strip would have sat on the
 * shelf. Six more pixels of margin gives it 36, the strip is centred in that
 * with two clear on each side, and #bloce grows by the same six so nothing
 * below moves relative to anything above.
 *
 * 200 = 28 of bar + 36 of band + 136 of shelf. The page goes to 1125 against a
 * background 1136 tall, so this is still picture we already have. */
#bloce { height: 200px; }
#blocartefacte { margin-top: 36px; }

/* The three coordinates that used to live here are gone: the strip was redealt
   on 10 September and the two blocks that were in it are positioned at the end
   of this file, with the shelves. */

/* "propun sa il mutam in stanga elementelor magice, jos."
 *
 * The pill was left at 176px -- beside the potions strip, at the other end of
 * the line from where he put it. .obiecte is 360 wide and pinned by `right:4`,
 * so the credits are pinned by `right` too and the gap between them stays 8
 * whatever the strip grows to; measuring from the left would have to guess
 * .obiecte's width, which is shrink-to-fit and changes with the language. */
/* ...and the credits went up under the minimap when the potion shelf took the
   whole strip. See #aid-credite.aid-credite-coloana, further up. */

/* THE STRIP SAYS WHEN THERE IS NOTHING.
 *
 * "sa nu scrie esti sub efectul decat daca e vreo potiune activa. daca nu, sa
 *  scrie Nicio potiune activa acum"
 *
 * $lang[101] is "Esti sub efectul " -- half a sentence, which is fine while
 * something follows it and reads as a fault when nothing does. main.php counts
 * the active potions before printing the title now and picks the other half
 * ($lang[1500], added to romana.php by the port); this only makes the empty
 * state look like an empty state rather than a heading with its list missing. */
#potiuniactive:not(:has(img)) {
	color: var(--aid-text-slab);
	font-style: italic;
}


/* =========================================== the pan cross joins the dial
 *
 * The three arcs on his screenshot, read against the old paint: the four arrows
 * were 20px where every other control on the ring is 22, 33 or 35, and they sat
 * inside the map window rather than on the band around it -- so the ring ran
 * past them instead of through them, and the crown of the circle had a gap in
 * it where the up arrow should have been.
 *
 * They are hartamica.php's markup, positioned against the 200x170 window
 * because that is the box they are in. The band they belong to is OUTSIDE that
 * box on three sides, which is why #panou-harta stops clipping: its only
 * overflowing child was #hartamicadiv, which draws nothing and no longer takes
 * the pointer either.
 *
 * 26px, centred on the ring at r=91 about the plate's own centre (102.5,108) --
 * the same circle the two SVGs draw, so the four of them land on it by
 * arithmetic rather than by eye. The fragment wrapper htmx puts around a swap
 * sits between #panou-harta and these divs, which is why the selector is a
 * descendant rather than a child: the first version was a child selector and
 * matched nothing at all. */
#panou-harta { overflow: visible !important; }
#panou-harta div:has(> .aid-i-sus)     { left:  84px !important; top: -21px !important; }
#panou-harta div:has(> .aid-i-jos)     { left:  84px !important; top: 161px !important; }
#panou-harta div:has(> .aid-i-stanga)  { left:  -8px !important; top:  70px !important; }
#panou-harta div:has(> .aid-i-dreapta) { left: 178px !important; top:  70px !important; }
.aid-i-sus, .aid-i-jos, .aid-i-stanga, .aid-i-dreapta { width: 26px; height: 26px; }
.aid-i-sus img, .aid-i-jos img,
.aid-i-stanga img, .aid-i-dreapta img { width: 100%; height: 100%; }


/* ============================ two overlapping buttons, and one over the text
 *
 * "in zona minimap ti-am evidentiat 2 butoane, masini si itemuri care fac
 *  overlap, muta un pic mai sus pe cerc itemuri si resolvi. de asemenea, tot
 *  acolo, butonul datecont sta peste textul cu coordonatele hartii, muta-l un
 *  pic mai sus si o data cu el, muta un pic mai sus si topactuali, sa fie pe
 *  aceeasi linie amandoua"
 *
 * Haine ends at y=158 and Masini begins at 158 -- touching, and with the brass
 * rims on both they read as one lozenge. Eight pixels up puts a gap between
 * them and keeps Haine on the ring: its centre lands 91 from the plate's own
 * (102.5,108), which is the radius the ring is drawn at.
 *
 * Top 100 and Contul meu sat at y=9 and y=11 -- not on a line with each other,
 * and Contul meu's lower edge crossed the y coordinate the map prints at y=35.
 * Both to zero: level, and their bottoms stop exactly where the numbers start. */
#blocharta > div:has(> .aid-i-itemuri)    { top: 130px !important; left: 178px !important; }
#blocharta > div:has(> .aid-i-topactuali) { top: 0 !important; }
#blocharta > div:has(> .aid-i-datecont)   { top: 0 !important; }


/* ================================ the town stands on the plots it was drawn for
 *
 * "vezi si pozitionarea cladirilor. parca nu sunt unde trebuie - am impresia ca
 *  sunt decalate in sus si in dreapta."
 *
 * Right on both counts, and the amount is measurable rather than a matter of
 * taste. casa.php lays its buildings on a 600x510 stage whose ground used to be
 * imagini/mainframegolv2.jpg -- the lawn with the red-bordered plots. That lawn
 * is a CROP of the same painting the background comes from, so the question is
 * only where the crop sits in the new file.
 *
 * Template-matched mainframegolv2.jpg against themes/default/imagini/fundal/joc.jpg
 * at six scales: 1.09 wins outright (correlation 0.85, against 0.56 at 1:1), at
 * offset (544,128). aid_nopanels.jpg is the same scene rendered nine per cent
 * larger -- 1744x1136 against the old 1600x1036 -- which is why nothing lines up
 * by translation alone.
 *
 * The background is `center top`, so the shell's x=0 is always 360 into the
 * image and its y is the page's: the stage sits at image (571,117) and the plots
 * are painted at (544,128). Twenty-seven right and eleven up, exactly as he saw
 * it, plus the nine per cent.
 *
 * translate before scale, origin at the corner: the stage's top-left lands on
 * the plots and its 600x510 becomes the 654x556 the plots occupy. #istanga stops
 * clipping for this screen only -- the home screen has no panel to clip against
 * anyway, and the town is meant to run onto the landscape. */
#istanga.mainframegol { overflow: visible !important; }
#istanga.mainframegol div[style*="width:600px"] {
	transform: translate(-27px, 11px) scale(1.09);
	transform-origin: 0 0;
}


/* ===========================================================================
 * THE BUTTON, FROM HIS TWO EXAMPLES
 *
 * "pentru cele mai mari, importante (precum ATACA, UPGRADE) -> atasat alt
 *  exemplu + astea sa fie pe verde (e potrivit pentru aceste actiuni - unda
 *  verde, subconstient). pentru cele mai lungi (precum vinde, cumpara, vreau,
 *  cauta) -> atasat un exemplu"
 *
 * WHAT THE TWO PICTURES ACTUALLY HAVE IN COMMON
 *
 * A crimson one and a blue one, one chunky and one long -- but they are the
 * same button. Read off them: a thick brushed-silver rim, generously rounded;
 * a face that runs light at the top to dark at the foot; one bright vertical
 * sheen about three quarters across, narrow and hard-edged, which is what makes
 * it read as moulded plastic rather than as a flat rectangle; and heavy white
 * condensed capitals with a little tracking.
 *
 * So there is ONE button here with two sizes and a colour per job, not two
 * designs. The rim is a real gradient border rather than a `border-color`,
 * because a single flat grey around a glossy face reads as a table cell.
 *
 * The green is his reasoning, not mine: "unda verde, subconstient". It goes on
 * the action that commits -- attack, upgrade, build -- and everything else
 * stays blue, so a player can tell the two apart without reading.
 *
 * NO MARKUP CHANGES. Every one of these is already an <input type="submit">, an
 * <input type="button"> or a <button>, and there are 115 of the first alone --
 * so the selector is the element, scoped to the panel the fragments load into.
 * A .aid-btn class is there for anything hand-written later. */

#istanga input[type="submit"],
#istanga input[type="button"],
#istanga button,
.aid-btn {
	display: inline-block;
	box-sizing: border-box;
	min-height: 30px;
	padding: 5px 20px;
	border: 3px solid transparent;
	border-radius: 12px;
	background-origin: border-box;
	background-clip: padding-box, padding-box, border-box;
	/* THE DEFAULT IS THE THEME'S GREEN, NOT THE EXAMPLE'S BLUE.
	 *
	 * "butoanele lunguiete albastre au iesit bine, dar albastrul era doar ca
	 *  exemplu. la noi, putem folosi ceva mai spre tema, spre verde inchis la
	 *  acesta butoane care nu trebuie sa iasa prea mult in evidenta."
	 *
	 * The blue came off the button he sent as a shape reference and was never
	 * a colour decision; it just survived because nothing overruled it. These
	 * are the ordinary buttons -- vinde, cumpara, trimite -- and an ordinary
	 * button should not be the brightest thing on the screen. The stops below
	 * are his, unchanged, including the quieter sheen: 0.14 where the example
	 * had 0.34, because a hard white glint is exactly what makes a button
	 * shout.
	 *
	 * The rim keeps one bright stop at 16%. That single line of light is what
	 * makes it read as a raised metal edge rather than a dark outline, and it
	 * is the only loud thing left. --aid-btn-sus/mij/jos still override, which
	 * is how ATACA and UPGRADE stay green-bright and the palette classes stay
	 * whatever they are. */
	background-image:
		/* the sheen: narrow, hard, three quarters across */
		linear-gradient(100deg,
			rgba(255, 255, 255, 0) 60%,
			rgba(255, 255, 255, 0.14) 70%,
			rgba(255, 255, 255, 0.10) 77%,
			rgba(255, 255, 255, 0) 86%),
		linear-gradient(180deg,
			var(--aid-btn-sus, #39664c) 0%,
			var(--aid-btn-mij, #0f4033) 55%,
			var(--aid-btn-jos, #05261a) 100%),
		/* the rim */
		linear-gradient(180deg, #061211 0%, #d2d2d2 16%, #34524f 56%, #1c3b38 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -3px 8px rgba(0, 0, 0, 0.35),
		0 2px 5px rgba(0, 0, 0, 0.45);
	color: #fff;
	font-family: "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	line-height: 18px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: transform 90ms ease, box-shadow 120ms linear, filter 120ms linear;
	/* defaultcss2.css says `input { display:block }` for the text fields, which
	 * put every button on a line of its own. */
	width: auto;
}

/* AND THE WIDTH IS THE WORDS. !important, ONCE, DELIBERATELY.
 *
 * "la premium/ butoanele vreau draci, preoti... etc -> trebuie lungite"
 *
 * `width: auto` above is beaten by an inline `style="width:110px"` on every one
 * of them, which is 2010 sizing for a button whose label was a 110px picture.
 * "Vreau punctele!" needs 179 in this font; at 110 it is cut. The same
 * attribute is on `width:60px` buttons, on the "Vreau!" repeats, and across the
 * other fragments -- some hundred of them, each a different number, none of
 * them a decision anybody would make again.
 *
 * The alternative was a port pass stripping the attribute. It was not taken:
 * that is a regex over every fragment in the game to delete something the
 * cascade can simply outrank, and this file is where the shell's shape is
 * decided. One !important that says "a button is as wide as its text" is a
 * smaller thing than a hundred edits to the markup.
 *
 * It applies to the panel's buttons only -- #istanga and .aid-btn -- so nothing
 * in the shell's own furniture is touched. */
#istanga input[type="submit"],
#istanga input[type="button"],
#istanga button,
.aid-btn { width: auto !important; }

#istanga input[type="submit"]:hover,
#istanga input[type="button"]:hover,
#istanga button:hover,
.aid-btn:hover {
	filter: brightness(1.10);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -3px 8px rgba(0, 0, 0, 0.3),
		0 3px 9px rgba(0, 0, 0, 0.5);
}
#istanga input[type="submit"]:active,
#istanga input[type="button"]:active,
#istanga button:active,
.aid-btn:active {
	transform: translateY(1px);
	box-shadow:
		inset 0 3px 7px rgba(0, 0, 0, 0.45),
		0 1px 2px rgba(0, 0, 0, 0.4);
}

/* THE COLOUR SAYS WHAT THE BUTTON DOES.
 *
 * Green commits; blue is everything else, and everything else is the default so
 * a control nobody has classified still looks right. */
.aid-btn-verde,
#istanga input[type="submit"].aid-btn-verde {
	--aid-btn-sus: #56c65e; --aid-btn-mij: #1f8c37; --aid-btn-jos: #0c4a1c;
}
.aid-btn-albastru { --aid-btn-sus: #2f86e0; --aid-btn-mij: #1552a6; --aid-btn-jos: #0b2f6b; }
.aid-btn-rosu     { --aid-btn-sus: #e0453f; --aid-btn-mij: #a3151a; --aid-btn-jos: #4d0407; }
.aid-btn-crimson  { --aid-btn-sus: #c21a63; --aid-btn-mij: #8e0b46; --aid-btn-jos: #4a0426; }
.aid-btn-auriu    { --aid-btn-sus: #ffcf4d; --aid-btn-mij: #b8830f; --aid-btn-jos: #4d3403;
                    color: #2d1e00; text-shadow: 0 1px 0 rgba(255, 244, 200, 0.6); }

/* NEGRU CU RAMĂ DE AUR (17 sept 2026). „butoane black cu border gold" -- pentru
 * alegerile care nu sunt nici „da" nici „nu", ci „care din două": ramele
 * (telefon / desktop) din pagina contului. Fața e neagră, rama e inelul de aur
 * al lui .aid-numar; textul e aur. `-activ` e cea în care ești acum: rama
 * plină, textul mai deschis, fără hover. */
.aid-btn-negru, #istanga .aid-btn-negru {
	--aid-btn-sus: #1e1d18; --aid-btn-mij: #0c0c0a; --aid-btn-jos: #030303;
	background-image:
		linear-gradient(100deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.08) 70%, rgba(255, 255, 255, 0.05) 77%, rgba(255, 255, 255, 0) 86%),
		linear-gradient(180deg, var(--aid-btn-sus) 0%, var(--aid-btn-mij) 55%, var(--aid-btn-jos) 100%),
		linear-gradient(150deg, #fff3bd 0%, #ffd34d 18%, #e8b62e 38%, #8a6414 62%, #5a3f0a 82%, #c99a2a 100%);
	color: var(--aid-aur, #ffcc00);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
	text-decoration: none;
}
.aid-btn-negru:hover:not(:disabled), #istanga .aid-btn-negru:hover:not(:disabled) {
	color: #fff3bd;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -3px 8px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 10px -2px rgba(255, 204, 0, 0.45);
}
.aid-btn-negru.aid-btn-negru-activ, #istanga .aid-btn-negru.aid-btn-negru-activ {
	color: #fff3bd; cursor: default;
	background-image:
		linear-gradient(180deg, #2a2610 0%, #12110a 55%, #050503 100%),
		linear-gradient(180deg, #2a2610 0%, #12110a 55%, #050503 100%),
		linear-gradient(150deg, #fff3bd 0%, #ffd34d 30%, #e8b62e 60%, #ffd34d 100%);
	box-shadow: inset 0 1px 0 rgba(255, 244, 200, 0.25), 0 0 12px -3px rgba(255, 204, 0, 0.55);
}
/* the pair, side by side, in the account table's cell */
#istanga .aid-ecrane { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* The long one: same button, more room and a flatter rise, which is the only
 * difference between his two pictures once the colour is taken out. */
.aid-btn-lung { padding: 5px 34px; letter-spacing: 0.08em; }
/* And the big one, for the action a screen is about. */
.aid-btn-mare { min-height: 40px; padding: 9px 30px; font-size: 16px; border-radius: 14px; }


/* ============================================ the fields they sit next to
 *
 * defaultcss2.css gives every input a 1px #034507 border and a half-black fill,
 * written for a screen with no panel behind it. Inside a drawn panel they read
 * as holes. Same treatment as the chat's channel select: a sunken well with a
 * warm hairline. */
/* AND `input` WITH NO TYPE AT ALL, which is 23 fields across seven pages.
 *
 * The legacy markup writes `<input name="dest" style="width:430px;">`. A
 * browser treats that as text, but `input[type="text"]` does NOT match it --
 * the attribute is absent, not defaulted -- so every one of those fields kept
 * defaultcss2.css's 2010 border while the field beside it, written with an
 * explicit type, got the sunken well. adaugal.php alone has fifteen. Found by
 * looking at "Scrie un mesaj" and wondering why its two boxes were the only
 * unstyled things on a themed page. */
#istanga input:not([type]),
#istanga input[type="text"],
#istanga input[type="password"],
#istanga input[type="number"],
#istanga textarea,
#istanga select {
	box-sizing: border-box;
	padding: 3px 7px;
	border: 0;
	border-radius: var(--aid-raza);
	background: linear-gradient(180deg, #0d1208, #161d0f);
	box-shadow:
		inset 0 0 0 1px rgba(255, 226, 178, 0.18),
		inset 0 2px 4px rgba(0, 0, 0, 0.55);
	color: var(--aid-text);
	font-size: 12px;
}
#istanga input:not([type]):focus,
#istanga input[type="text"]:focus,
#istanga input[type="password"]:focus,
#istanga textarea:focus,
#istanga select:focus {
	outline: none;
	box-shadow:
		inset 0 0 0 1px var(--aid-aur-stins),
		inset 0 2px 4px rgba(0, 0, 0, 0.55),
		0 0 8px rgba(255, 204, 0, 0.25);
}


/* ================================================================= the tabs
 *
 * "cu ocazia asta stilizezi si tab-urile. trebuie mai faine."
 *
 * .tab and .tabactiv are two divs' worth of 2010 CSS in three stylesheets. A
 * tab strip is a row of plates with the live one raised out of it and joined to
 * the panel below -- so the inactive ones sit lower and darker, the active one
 * carries the brass the panel titles use, and the strip has a rule under it for
 * the active tab to break. */
#istanga .tabdiv {
	position: relative;
	overflow: hidden;
	/* THREE NUMBERS FROM css.css, ALL OF THEM WRONG NOW.
	 *
	 *   width: 100%       + padding outside the box  -> 8px too wide
	 *   margin-left: 30px + width: 100%              -> 30px too wide
	 *   height: 30px      + tabs 27px tall + 2px rule -> clipped underline
	 *
	 * None of it showed while premium.php was 490px wide inside a 560px box:
	 * the strip had 70px of slack to waste and wasted it. Widening the page to
	 * the box (see the port's fix on that table) spent the slack, and all three
	 * turned into a horizontal scrollbar on .borderrosu at once. box-sizing
	 * keeps the padding in, the margin goes, the height becomes the content's
	 * own -- six tabs come to 536 of the 542 available, which is why the sixth
	 * one ("Castiga credite!") is visible at all now. */
	box-sizing: border-box;
	width: auto;
	height: auto;
	margin-left: 0;
	margin-bottom: 10px;
	padding: 0 4px;
	border-bottom: 2px solid var(--aid-piatra);
}
#istanga .tab,
#istanga .tabactiv {
	margin: 4px 3px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--aid-raza-panou-interior) var(--aid-raza-panou-interior) 0 0;
	background: linear-gradient(180deg, #2a3220, #141a0d);
	box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
#istanga .tab a,
#istanga .tabactiv a {
	display: block;
	padding: 5px 14px;
	font-family: var(--aid-font-titlu);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	text-transform: var(--aid-titlu-caz);
	text-decoration: none;
	color: var(--aid-text-slab);
}
#istanga .tab:hover { background: linear-gradient(180deg, #36402a, #1b2312); }
#istanga .tab:hover a { color: var(--aid-text); }
#istanga .tabactiv {
	margin-top: 0;
	background: var(--aid-fata-alama);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 2px 0 var(--aid-aur-stins);
}
#istanga .tabactiv a { color: var(--aid-titlu-culoare); text-shadow: var(--aid-titlu-umbra); }

/* The pane under the strip wore `border: 1px solid #006600` from css.css -- a
   bright green rectangle drawn around content that is already inside a framed,
   scrolling box. One frame is enough; the lit tab above says which pane this
   is far better than a line around it does. */
#istanga .tabul { border: 0; }


/* ================================================ the scroll box reaches bottom
 *
 * "tabla la acest fragment, ca si continutul la altele, merg date mai jos, pana
 *  spre bottom-ul div-ului parent id=istanga"
 *
 * Measured on artefacte: #istanga ends at 680, the fragment ended at 622. Fifty
 * eight pixels of nothing, on every screen in the game, because div.borderrosu
 * -- the scrolling box roughly forty fragments put their content in -- has
 * `height: 420px` in css.css and has had since the frame was 510 tall. The
 * frame is 567 now. The box never heard about it.
 *
 * Not a new number: a new number is wrong again the next time anything moves.
 * The wrapper becomes a flex column as tall as the panel and the box takes what
 * is left after the title, so it ends where #istanga ends whatever else the
 * fragment puts above or below it. The 420px stays as the flex basis, which is
 * what it should have been all along -- a starting size, not a decree.
 *
 * `flex: 1 1 auto` and not `1 1 0`: fragments that give the box an inline
 * height (adaugal's 380) keep using it as the basis, and a box shorter than the
 * space still grows into it. min-height: 0 because a flex item will not shrink
 * below its content otherwise, and this one has thirteen thousand pixels of it.
 *
 * The scroll stays INSIDE the box. #istanga must not grow its own scrollbar --
 * "in istanga, pt ca am marit topbar, se face scroll vertical - a aparut o bara
 * pe dreapta" -- so nothing here lets content out of the box. */
/* EXCEPT ON THE BIG MAP, where .borderrosu is not the content box.
 *
 * This rule reads "the fragment's scrolling box is its .borderrosu" and that is
 * true of about forty screens. harta.php is the one where it is not: there the
 * .borderrosu is a small box holding two forms, and the content is #hartam
 * above it. Made a flex column, the map became a flex ITEM -- so its 400px
 * height was shrunk to fit (400 became 340, the frame no longer matched the
 * window drawn in it) and the two things meant to sit side by side underneath
 * were blockified, because a flex item's `display: inline-block` computes to
 * `block`. Both symptoms, one cause, and the same one that shortened the
 * report's verdict band: flex shrinks its children unless told otherwise. */
#istanga > div:has(> .borderrosu):not(:has(> #hartam)),
#istanga > div:has(> .aid-cadru) {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
#istanga > div:has(> .borderrosu) > .borderrosu {
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
}


/* ------------------------------------ THE PANEL ITSELF STOPS BEING THE SCROLLER
 *
 * "la mesaje, rapoarte, div-ul cu scroll-y e cat parent-ul de mare. asta
 *  inseamna ca, atunci cand dau scroll in jos, continutul ajunge peste topbar si
 *  pe sub butoanele din dreapta sus."
 *
 * Exactly right, and the mechanism is the 32px of padding-top on #istanga. The
 * panel's title bar is painted in that band, and a background is painted BELOW
 * its own content -- so as soon as #istanga scrolled, the list slid up over its
 * own header and under the round buttons that sit on #blociframe above it.
 *
 * The fix is to move the scrolling one element in. The fragment wrapper starts
 * where the padding ends, so when IT scrolls, nothing can ever be drawn in that
 * band: the clip edge is the top of the wrapper, not the top of the panel.
 *
 * Only .iframe. #istanga.mainframegol is the home screen, whose buildings are
 * positioned outside the flow on purpose and would be clipped or, worse, given
 * a scrollbar of their own.
 *
 * "Mai bine ar fi sa fie scrollable sub titlu (Rapoarte - spre ex.) ca in alte
 *  fragmente -> Premium" -- that is the .aid-cadru / .aid-cutie pair below, and
 * this rule is what catches every fragment that does not use it yet. */
#istanga.iframe { overflow: hidden; }
#istanga.iframe > div {
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

/* .aid-cadru: "I am as tall as the panel and I place my own parts."
   .aid-cutie: "I am the part that scrolls."
 *
 * What premium gets from .borderrosu by accident, the rebuilt fragments get on
 * purpose: the title, the toolbar and the footer keep their place and only the
 * middle moves. A list whose paging buttons scroll off the bottom is a list you
 * have to scroll back down to leave.
 *
 * min-height: 0 on both, and it is not decoration -- a flex item's automatic
 * minimum size is its content, so without it the box refuses to be shorter than
 * its table and the scrollbar appears on the panel again, which is the bug this
 * whole section is about. */
#istanga .aid-cadru {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
/* Everything that is NOT the scrolling box keeps its own height. A flex item
   shrinks by default, and the first thing that cost was the verdict band on the
   report: 90px of rays, asked to fit, quietly became 61. The scrolling box is
   the only part that should give. */
#istanga .aid-cadru > * { flex: none; }
#istanga .aid-cutie {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
/* Once the rows scroll under the title, the column headers scroll away with
   them and the third screenful of a list is four unlabelled columns of names
   and dates. Sticking them to the top of the box fixes that -- but the header
   was deliberately left unfilled ("a label, not a bar", further down), and an
   unfilled sticky header is a row of words with other rows sliding through it.
   So the fill comes back HERE and only here, where it is doing a job: the
   theme's stone face, which is dark in every theme because it is what the
   frame's own plates are made of. */
#istanga .aid-cutie .aid-lista thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--aid-fata-piatra);
}


/* ============================================ the mascot introduces the screen
 *
 * "stilizeaza te rog si textul si zona aceea descriptiva care apare in mai multe
 *  fragmente ... sa fie mai faina (foloseste dracusorul nostru svg)"
 *
 * Six screens open with a line from him -- artefacte, licori, itemuri, masini,
 * retete, premium. It was a floated 60px devil with `hspace="10"` and the text
 * running around it, which is why it read as decoration rather than as somebody
 * talking: a float has no box, so there was nothing to separate his line from
 * the shop underneath it.
 *
 * A plate, him on it, and the text set as a paragraph beside him. The left
 * gutter of gold is the only ornament and it is doing a job -- it marks the
 * three or four lines that are ADVICE, so the eye can skip them on the fortieth
 * visit and find them on the first.
 *
 * The paragraph is a real <p> in five of the six (the port builds it); premium
 * keeps a text node that HTML closes at the wrapper. `align-items: flex-start`
 * rather than centre: his line is one sentence on some screens and four on
 * others, and a mascot that drifts down the box as the text grows looks like a
 * bug in a way that one standing at the top never does. */
#istanga .aid-intro {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	padding: 10px 14px 10px 11px;
	border-radius: var(--aid-raza-panou-interior);
	border-left: 2px solid var(--aid-aur-stins);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	text-align: left;
}
#istanga .aid-intro p,
#istanga .aid-intro {
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text);
}
#istanga .aid-intro p { margin: 0; }
/* He is a vector now, so this is a size rather than a scale factor. The shadow
   is what puts him ON the plate instead of printed on it. */
#istanga .aid-intro-drac {
	flex: none;
	width: 52px;
	height: 64px;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
/* The cell that holds all this was `style="color: #FFFFff"` -- white text on
   the old dark green. Inside .aid-intro the paragraph sets its own colour; this
   is for the stray lines some of the six put outside it. */
#istanga .borderrosu > table.tabla > tbody > tr > td[style*="FFFFff"],
#istanga .borderrosu > table.tabla > tbody > tr > td[style*="FFFFFF"] {
	color: var(--aid-text) !important;
}


/* ============================================== the tables inside a fragment
 *
 * "mergi prin toate fragmentele care se incarca in istanga si stilizeaza-le mai
 *  fain (butoane, chenare, lista table, headere table, ce elemente vechi mai
 *  gasesti)"
 *
 * The game's own three: .tabla, .tablaalb and .tablaartefact, plus the report
 * tables. What they all lack is a header that reads as one and rows you can
 * follow across -- both are one rule each and neither touches the markup. */
#istanga table.tabla th,
#istanga .tablaalb th,
#istanga .tablaartefact th,
#istanga .tablaraport th,
#istanga table thead td {
	padding: 4px 8px;
	background: var(--aid-fata-alama);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	text-transform: var(--aid-titlu-caz);
	text-align: left;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
/* `> tbody > tr` and not a descendant `tr`, and the reason is worth writing
 * down because it cost an afternoon. artefacte.php -- and licori, itemuri,
 * masini -- lay the cards out inside an OUTER `table.tabla`, one card per cell.
 * So every row of every card is also a descendant row of a .tabla, and with a
 * loose selector the zebra tinted the description cell of each card and, worse,
 * `tr:hover` lit up whichever row of the card the mouse happened to be over:
 * the name band, then the description band, then nothing when the pointer
 * crossed the picture (rowspan, so that cell belongs to row 1 and the hover
 * had already moved to row 2). That is exactly the "se manifesta diferit pe
 * fiecare td" -- it was never the card's own hover, it was this rule reaching
 * two tables deep. The child combinators stop it at the list it was written
 * for. */
/* NO ZEBRA AND NO HOVER ON A BARE .tabla, and this is the second time the same
 * assumption has cost something. `table.tabla` is not "a list" -- it is the
 * game's only table class, so it is also the player sheet on jucator.php, the
 * grid of shop cards, and the two-column scaffolding half the fragments are
 * built out of. Striping and lighting all of those was wrong twice over:
 *
 *   "in jucator.php - scoate acel mouseover cu change background - pe td-uri e
 *    un pic prea mult pt player. nu vede bine informatia ... background change
 *    pe tr (linii, cum sunt la mesaje, rapoarte) e ok"
 *
 * Exactly the right distinction. A row that lights up is a row that says "click
 * me"; on a list that is true and useful, on a stat sheet it is a promise the
 * page does not keep, and it moves the ground under the numbers you are trying
 * to read. So both live in the list-only block further down, behind the same
 * `:has(.aid-cap)` test that decides everything else about lists.
 *
 * .tablaalb is loc.php only, and it is not a list either. */

/* primarii.php marks a row `color:green` when the last report from that
 * institution dropped an artefact -- state, not striping, which is why pass
 * 6b8c leaves the colour alone and only takes the background. But `green` is
 * #008000, and #008000 on this panel is barely a colour at all: the one row on
 * the screen worth noticing was the hardest one to read. Same meaning, a green
 * that survives the background.
 *
 * The attribute selector is the honest way to reach it: the condition lives in
 * PHP and there is no class to hang this on without rewriting the loop. */
#istanga table.tabla tr[style*="color:green"] > td { color: #93d456 !important; }
#istanga table.tabla tr[style*="color:green"] > td a { color: #93d456; }

/* -------------------------------- the old lists get the rebuilt lists' rhythm
 *
 * "sunt faine table-urile de la mesaje si rapoarte - liniile. am crezut ca asa
 *  o sa le faci si prin celelalte fragmente (spre ex: ceilalti si institutii,
 *  armate...)"
 *
 * Fair. .aid-lista got the room and the hairlines because those three screens
 * were rebuilt as templates; the ones still rendered by their own PHP kept 2010
 * spacing -- rows 16px tall, nothing separating them, everything crammed left.
 * The look was never in the template. It is four declarations.
 *
 * WHICH TABLES. `table.tabla` is not a list -- it is the game's only table
 * class, and artefacte.php uses one as a GRID with a card in every cell. Giving
 * every .tabla row a hairline would rule the shops. The test that separates
 * them is the header: a list has an .aid-cap band naming its columns or its
 * section, a card grid has none. So `:has()` asks that question directly,
 * rather than listing the files, which would be wrong again the next time one
 * is added.
 *
 * The colour codes stay. "mentinem codurile de culori din institutii" -- the
 * green row in primarii is state, and nothing here touches a colour. */
#istanga table.tabla:has(> tbody > tr.aid-cap) > tbody > tr > td,
#istanga table.tabla:has(> tbody > tr > td.aid-cap) > tbody > tr > td {
	padding: 7px 8px;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	vertical-align: middle;
}
#istanga table.tabla:has(> tbody > tr.aid-cap) > tbody > tr:last-child > td,
#istanga table.tabla:has(> tbody > tr > td.aid-cap) > tbody > tr:last-child > td {
	box-shadow: none;
}
/* The header band draws its own edge and must not also wear a row hairline. */
#istanga table.tabla > tbody > tr.aid-cap > td,
#istanga table.tabla > tbody > tr > td.aid-cap { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); }
/* Zebra to match .aid-lista's: white at 3.5%, not black at 16%. On these pages
   the rows sit on the panel rather than on a plate, and black-on-dark reads as
   a gap in the list instead of as a stripe. */
#istanga table.tabla:has(> tbody > tr.aid-cap) > tbody > tr:nth-child(even):not(.aid-cap) > td,
#istanga table.tabla:has(> tbody > tr > td.aid-cap) > tbody > tr:nth-child(even):not(.aid-cap) > td {
	background: rgba(255, 255, 255, 0.035);
}
/* THE HOVER FOLLOWS THE CLICK, not the table.
 *
 * A row lights up because it opens something -- so the test is whether it
 * carries the attribute that makes it open something, which pass 6b8c put
 * there. That covers ceilalti, primarii, topactuali and every list added later,
 * and it cannot reach a stat sheet or a card grid however they are marked up,
 * because nothing there is clickable.
 *
 * The zebra above is a different question and keeps a different answer: it is
 * about reading ACROSS a row of columns, which a list has and a layout table
 * does not, whether or not its rows do anything. */
/* The cursor belongs with the hover, and for once the old markup was right
 * about something: `this.style.cursor='pointer'` was the second half of every
 * onMouseOver handler pass 6b8c deleted. Deleting the handler took the cursor
 * with it, so a clickable row was showing an I-beam -- the one cursor that
 * says "this is text, select it", on a row whose whole job is to be clicked. */
#istanga tr[data-aid-panou] { cursor: pointer; }
#istanga tr[data-aid-panou] > td { cursor: pointer; }
#istanga tr[data-aid-panou]:hover > td,
#istanga table.tabla:has(> tbody > tr.aid-cap) > tbody > tr[data-aid-panou]:hover > td {
	background: rgba(255, 204, 0, 0.10);
}
#istanga .aid-t-rand:hover > td { background: rgba(255, 204, 0, 0.10); }

/* The institution's icon, beside its name. One icon rather than thirty: they
   are all the same kind of place, and what tells them apart is the name and the
   garrison, both of which are already on the row. The first row is the
   Parlament -- it gets the gold, because it is the one everybody is after. */
#istanga .aid-inst-nume { white-space: nowrap; }
/* The pictures are the buildings' own, 350x292 and 200x176, so they are sized
   by HEIGHT with the width free -- a fixed width would squash the two that are
   drawn at a different aspect. 26px is the row: tall enough to tell a parliament
   from a town hall, short enough not to set the line height. */
#istanga .aid-inst-icon {
	height: 26px;
	width: auto;
	margin-right: 8px;
	vertical-align: -8px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
/* The fallback icon is a flat glyph, not a building, and it needs the older
   treatment: smaller, dimmer, no shadow to cast. */
#istanga .aid-inst-icon-gen {
	height: 20px;
	vertical-align: -5px;
	opacity: 0.75;
	filter: none;
}

/* ------------------------------------------------- topactuali, the live top
 *
 * Four cells: place, name, medal, number. They were sized with `width='20'`,
 * `width='100'` and `align='right'` in a string echoed from PHP, which is why
 * this one list escaped every pass that fixed the others -- there is no tag in
 * the source for a regex to find, only a quoted string. The port rewrites the
 * echo; this is the layout.
 *
 * The rank and the number are tabular figures, because a ranking whose digits
 * do not line up is a ranking you have to read twice. The name keeps $fnt --
 * the top three are set larger by the page itself, which is the one piece of
 * this list that was always right. */
#istanga .aid-t-rand { cursor: pointer; }
#istanga .aid-t-loc {
	width: 34px;
	padding-right: 6px;
	text-align: right;
	color: var(--aid-text-slab);
	font-variant-numeric: tabular-nums;
}
#istanga .aid-t-nume { padding: 2px 6px; text-align: left; white-space: nowrap; }
#istanga .aid-t-nume a { color: var(--aid-text); text-decoration: none; }
#istanga .aid-t-rand:hover .aid-t-nume a { color: var(--aid-aur); }
#istanga .aid-t-medalie { width: 28px; text-align: left; }
#istanga .aid-t-medalie img { height: 18px; margin: 0 4px; }
/* width:100% on the LAST column is the old trick for "you take whatever is
   left": it pushes rank, name and medal together on the left and holds the
   figures against the right edge, without giving any of them a fixed width. */
#istanga .aid-t-cifra {
	width: 100%;
	padding-right: 8px;
	text-align: right;
	white-space: nowrap;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}
/* The page separates 1-3, 4-10 and 11-50 with a bare <hr> inside a cell. It is
   a real divider and it stays; it just stops being a browser default rule. */
#istanga table.tabla td > hr {
	border: 0;
	border-top: 1px solid rgba(255, 226, 178, 0.14);
	margin: 6px 0;
}

/* A line explaining how to read the thing under it. Small, dim, centred, out
   of the way -- the opposite of the pure yellow at body size it replaces.

   THE PUBLIC PAGES ARE NAMED HERE, not given a second copy of this further
   down. They had one for a while, and it had drifted: the copy under
   .aid-afara set --aid-text-stins where this sets --aid-text-slab, so the same
   object -- "a small dim note line", one entry in the shared vocabulary -- was
   a warm grey inside the panel and a cooler one outside it, on pages a player
   reaches from the same menu. A note is a note wherever it is printed. What
   genuinely differs out there is where it sits, and only that is restated
   (":9823"). */
#istanga .aid-nota,
.aid-afara .aid-nota {
	margin: 0 0 10px;
	text-align: center;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-slab);
}

/* ---------------------------------------------- the section headers, at last
 *
 * Thirty cells and rows across sixteen files used to paint themselves with
 * `background: <?php echo $bmouseover; ?>` -- one dark green from setari.php,
 * written into a style attribute in eight different spellings. Pass 6b8d turns
 * every one of them into this class, so the band that says "Armate in miscare"
 * or names the columns of a list is finally the same object as every other
 * header in the game.
 *
 * Two shapes, one look: a cell that spans the table (a section title, usually
 * with <center><strong> inside it) and a whole row (a set of column names).
 * The zebra and the hover above skip .aid-cap rows -- a header is not a row
 * you can click, and it should not light up as though it were. */
#istanga td.aid-cap,
#istanga th.aid-cap {
	padding: 5px 8px;
	background: var(--aid-fata-alama);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	/* NOT var(--aid-titlu-caz). That variable is `capitalize`, which is fine
	   for the one-word column names it was written for and wrong here: these
	   are whole phrases from $lang, and capitalize turns "Armate in miscare"
	   into "Armate In Miscare". Romanian does not title-case. Third time this
	   has come up -- the report heading and the letter's subject were the
	   other two. */
	text-transform: none;
	color: var(--aid-titlu-culoare) !important;
	text-shadow: var(--aid-titlu-umbra);
}
/* The markup centres these with a <center> and bolds them with a <strong>.
   Both are already true of the band; the elements just stop adding to it. */
#istanga td.aid-cap center,
#istanga tr.aid-cap center { text-align: center; }
#istanga td.aid-cap strong,
#istanga tr.aid-cap strong { font-weight: bold; }
#istanga td.aid-cap a,
#istanga tr.aid-cap a { color: var(--aid-titlu-culoare); }
/* Rounded on the outside of the band only, so a header row reads as one plate
   rather than as a set of cells that happen to share a colour. */
#istanga td.aid-cap { border-radius: var(--aid-raza-mare); }

/* A ROW OF COLUMN NAMES IS NOT A SECTION TITLE, AND GETS THE OTHER HEADER.
 *
 * "imi place mult tabla aceea de la rapoarte, cu headerul fain cu gold, cu
 *  liniile aerisite. am vazut ca nu ai mai folosit-o si ai trecut la alt tip in
 *  celelalte fragmente."
 *
 * Right, and the two things pass 6b8d swept up were never the same object. A
 * <td colspan> spanning the table says "Armate in miscare" -- that is a title,
 * and it wants the brass plate above. A <tr> of column names says Nume, Draci,
 * Harta -- that is a label for what is underneath it, and .aid-lista settled
 * how those look on the reports and the inbox: no fill at all, small gold caps,
 * one hairline. A filled bar there competes with the first row of data, and the
 * first row wins anyway.
 *
 * Same rule as that one, deliberately duplicated rather than merged into a
 * shared selector: .aid-lista is the rebuilt lists' own vocabulary and these
 * are old tables borrowing the look. If one of them ever needs to move, the
 * other should not have to. */
#istanga tr.aid-cap > td,
#istanga tr.aid-cap > th {
	padding: 4px 8px 7px;
	/* "acel header nu e la fel ca la rapoarte. lipseste ceva -- probabil
	   backgroundul." It is the background, and the reason the two differed is
	   that on the reports it was never a decision: .aid-lista's header is drawn
	   with no fill, and it only has one there because it is STICKY inside the
	   scroll box, and a see-through sticky header has rows sliding through it.
	   So the fill arrived as a fix and turned out to be the better look.
	   Same plate here -- the theme's stone, which is dark in every theme
	   because it is what the frame's own panels are made of. */
	background: var(--aid-fata-piatra);
	border-radius: 0;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.22);
	font-family: var(--aid-font-titlu);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	color: var(--aid-aur-stins) !important;
	text-shadow: none;
}

/* .tablaartefact's border was `1px solid #F60` -- a 2010 orange on a green
 * wash, the loudest thing on any screen it appears on.
 *
 * No inset ring here any more: it was drawn under the cells and showed through
 * only where they happened to be transparent. The card's ring is an outline
 * now -- see ITEM CARDS further down. This keeps the fill and the top light.
 *
 * `.tart` joins it here: premium.php's ten tables, the four shops and the six
 * exchange forms in the first tab. "poti folosi aceleasi celule si cand ajungi
 * la premium.php unde poti lua artefacte" -- the four shops get the whole card
 * (the port gives them the .tablaartefact class as well, since the markup is
 * the same one copied across in 2010); the six forms get only this much, the
 * fill and the ring, because their insides are a different shape and pretending
 * otherwise is how a stylesheet starts lying about the markup. */
#istanga .tablaartefact,
#istanga .tart {
	border: 0;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26) !important;
	box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.10);
}


/* ================================ the two that were pictures, now buttons
 *
 * `.atac` and `.urca` are seventeen inputs whose whole label was batac.jpg and
 * burca.jpg -- 147x50 each, plus a second JPEG for the hover. Empty value, so
 * there was nothing for CSS to work with until the port put the words back
 * (pass 6s, $lang[1501] and [1502]).
 *
 * Green, and the reason is his: "unda verde, subconstient". These two commit --
 * attack a player, spend on a level -- and they are the only two in the game
 * that do, so they are the only two that are green.
 *
 * The four background rules in css.css are beaten on specificity rather than
 * deleted: those stylesheets are legacy source, and a theme should be able to
 * put the pictures back. */
#istanga input[type="submit"].atac,
#istanga input[type="submit"].urca,
#istanga input[type="submit"].butonsubmit {
	--aid-btn-sus: #56c65e;
	--aid-btn-mij: #1f8c37;
	--aid-btn-jos: #0c4a1c;
	display: inline-block;
	width: auto;
	min-height: 40px;
	height: auto;
	padding: 9px 30px;
	border: 3px solid transparent;
	border-radius: 14px;
	background-image:
		linear-gradient(100deg,
			rgba(255, 255, 255, 0) 60%,
			rgba(255, 255, 255, 0.34) 70%,
			rgba(255, 255, 255, 0.10) 77%,
			rgba(255, 255, 255, 0) 86%),
		linear-gradient(180deg, var(--aid-btn-sus) 0%, var(--aid-btn-mij) 55%, var(--aid-btn-jos) 100%),
		linear-gradient(180deg, #fdfdfd 0%, #d2d2d2 16%, #8b8b8b 56%, #f2f2f2 100%);
	background-repeat: no-repeat;
	font-size: 16px;
}
#istanga input[type="submit"].atac:hover,
#istanga input[type="submit"].urca:hover {
	background-image:
		linear-gradient(100deg,
			rgba(255, 255, 255, 0) 60%,
			rgba(255, 255, 255, 0.42) 70%,
			rgba(255, 255, 255, 0.14) 77%,
			rgba(255, 255, 255, 0) 86%),
		linear-gradient(180deg, var(--aid-btn-sus) 0%, var(--aid-btn-mij) 55%, var(--aid-btn-jos) 100%),
		linear-gradient(180deg, #fdfdfd 0%, #d2d2d2 16%, #8b8b8b 56%, #f2f2f2 100%);
}


/* ==========================================================================
 *  THE BATTLE REPORT
 *
 *  "fragment raport - are nevoie de o atentie speciala - trebuie restilizat
 *   complet, mult mai fain ... poate ar trebui sa stim direct din header ce am
 *   facut ... am putea pune o medalie in dreptul castigatorului"
 *
 *  The markup is bin/sabloane/raport.php, spliced into the fragment by the
 *  port. What that file decides is WHAT is on the page; this decides how it
 *  reads. The order is the argument: verdict, then the two armies, then what
 *  was taken. The old page had the arithmetic first and the outcome nowhere.
 *
 *  Built against his two Vampirix screenshots: a coloured verdict band with
 *  rays behind the words, then role-headed cards with the player's name on the
 *  right, then a winner block with the loot as labelled figures. Same
 *  information architecture, in this game's colours rather than that one's.
 * ========================================================================== */

.aid-raport {
	padding: 4px 10px 14px;
	font-size: 12px;
}

/* THE CAPTION, NOT THE HEADING.
 *
 * "tot dau scroll cand intru pe unu ... ca un detaliu minor centrat intre
 *  animatie si butonul vezi lupta"
 *
 * This was a 17px <h1> with the date under it, above the verdict band, and it
 * cost 32px at the top of a fragment that is already taller than the panel.
 * The band says what happened; a heading that repeats the name of the link you
 * just clicked does not. So it sits under the band now, small and dim, between
 * the outcome and the button -- a filing detail, which is what a timestamp is.
 *
 * `text-transform: none` stays for the same reason it was there before:
 * `h1 { text-transform: capitalize }` in defaultcss2.css is still in the
 * cascade, and it would make this "Raport De Batalie Din ...". Romanian does
 * not use title case. It no longer applies to a <p>, but the declaration costs
 * nothing and the next person to make this an <h2> will be glad of it. */
.aid-raport-cand {
	/* Nothing on top: the band already carries 10px under it, and two margins
	   between the same pair of elements is how a gap ends up different from the
	   one it is meant to match. 9 below against that 10 puts the line on the
	   middle of the space, which is what "centrat intre" asks for. */
	margin: 0 0 9px;
	text-align: center;
	text-transform: none;
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0.04em;
	color: var(--aid-aur-stins);
	opacity: 0.8;
}

/* ------------------------------------------------------------ the verdict
 *
 * "daca am pierdut, incepem cu un header de 90px height: Am pierdut
 *  batalia... - pe o animatie lenta ... daca am castigat: Am invins! - pe o
 *  animatie cu rays"
 *
 * 90px exactly, because that is the number he gave and it is the right one:
 * tall enough that the sentence is the page's subject, short enough that the
 * first army card is still on screen under it.
 *
 * THE RAYS ARE A CONIC GRADIENT, NOT A FILE.
 *
 * A repeating conic gradient is a starburst, and turning it is one animation on
 * one element. No Lottie player (about 250 KB), no JSON to fetch, no second
 * thing that can 404. It is masked with a radial fade so the rays dissolve
 * before the border instead of stopping at it, which is the whole difference
 * between "rays" and "a pie chart".
 *
 * If a Lottie file arrives later it replaces .aid-verdict-raze and nothing else
 * in this section changes -- the 90px box, the type and the colours all stay.
 */
.aid-verdict {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 90px;
	margin-bottom: 10px;
	padding: 0 14px;
	border-radius: var(--aid-raza-panou);
	text-align: center;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		0 3px 10px rgba(0, 0, 0, 0.45);
}
.aid-verdict-raze {
	position: absolute;
	/* Wider than the box and centred, so the rays converge somewhere off the
	   middle of the text rather than on it. */
	left: 50%;
	top: 50%;
	width: 260%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	animation: aid-raze 34s linear infinite;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, rgba(0, 0, 0, 0.55) 42%, transparent 68%);
	        mask-image: radial-gradient(circle at 50% 50%, #000 12%, rgba(0, 0, 0, 0.55) 42%, transparent 68%);
	pointer-events: none;
}
@keyframes aid-raze { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* A player who has asked their system to stop moving things gets the rays as a
   still starburst. The information is in the colour and the words; the turning
   is decoration and decoration is what this setting is for. */
@media (prefers-reduced-motion: reduce) {
	.aid-verdict-raze { animation: none; }
}

.aid-verdict-titlu {
	position: relative;
	font-family: "Alegreya", Georgia, "Times New Roman", serif;
	font-size: 26px;
	line-height: 30px;
	letter-spacing: 0.01em;
}
.aid-verdict-rand {
	position: relative;
	font-size: 12px;
	line-height: 16px;
	opacity: 0.92;
}

/* WON. Warm gold on the game's green, and the rays are gold. */
.aid-verdict-castig {
	background: linear-gradient(180deg, #1d4a2b 0%, #123420 55%, #0a2415 100%);
}
.aid-verdict-castig .aid-verdict-raze {
	background: repeating-conic-gradient(from 0deg,
		rgba(255, 214, 92, 0.34) 0deg 5deg,
		rgba(255, 214, 92, 0) 5deg 15deg);
}
.aid-verdict-castig .aid-verdict-titlu {
	color: #ffd76b;
	text-shadow: 0 0 18px rgba(255, 200, 60, 0.55), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.aid-verdict-castig .aid-verdict-rand { color: #d8e7c6; }

/* LOST. "pe o animatie lenta" -- so the same rays, but ash-coloured, thinner,
 * and turning at a third of the speed. The slowness is the tone: a defeat that
 * flashes at you reads as a celebration of somebody else's win. */
.aid-verdict-pierdere {
	background: linear-gradient(180deg, #3a1a16 0%, #26100d 55%, #170807 100%);
}
.aid-verdict-pierdere .aid-verdict-raze {
	background: repeating-conic-gradient(from 0deg,
		rgba(214, 150, 140, 0.16) 0deg 3deg,
		rgba(214, 150, 140, 0) 3deg 19deg);
	animation-duration: 96s;
	animation-direction: reverse;
}
.aid-verdict-pierdere .aid-verdict-titlu {
	color: #f0b4a8;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.aid-verdict-pierdere .aid-verdict-rand { color: #cfaea8; }

/* NEITHER SIDE. An admin reading somebody else's battle. Stone, no rays. */
.aid-verdict-neutru {
	background: linear-gradient(180deg, #2a2f22 0%, #1b2016 55%, #12160f 100%);
}
.aid-verdict-neutru .aid-verdict-raze { display: none; }
.aid-verdict-neutru .aid-verdict-titlu { color: var(--aid-text); }

.aid-raport-actiuni {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

/* ==========================================================================
 *  ARMATA IN MISCARE -- one army, on its way (armata.php)
 *
 *  "click, pagina armatelor si prezentam fain compozitia ei, unde merg, cat
 *   timp mai e, poate si un header fain ca la raport, ceva animat cu miscare si
 *   text: Mergem la atac ... putem pune si timerul tot acolo, mult mai fain si
 *   ceva mai mare"
 *
 *  Same 90px box as the report's verdict, and the same argument for it: the
 *  first thing on the screen says what is happening, and the numbers follow as
 *  the detail. What moves is different, because what is being said is
 *  different -- the report's rays turn in place around a result that is already
 *  fixed, and this is a journey, so the ground slides underneath.
 * ========================================================================== */

.aid-armata-pag {
	padding: 4px 10px 14px;
	font-size: 12px;
}

.aid-mars {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 90px;
	margin-bottom: 12px;
	padding: 0 14px;
	border-radius: var(--aid-raza-panou);
	text-align: center;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		0 3px 10px rgba(0, 0, 0, 0.45);
}

/* THE ROAD.
 *
 * Stripes drawn vertically and then SKEWED, rather than a diagonal gradient
 * translated diagonally. The reason is that the animation has to move by
 * exactly one period or the pattern jumps on every loop -- and the period of a
 * gradient at 115 degrees is not 28px along X, it is 28/cos(25) and the seam
 * shows. Skewing keeps the maths in one axis: the stripes repeat every 28px,
 * the keyframe moves 28px, and the loop is invisible.
 *
 * The box is inset negatively on all sides so the skew never exposes a corner.
 */
.aid-mars-drum {
	position: absolute;
	top: -30%; right: -20%; bottom: -30%; left: -20%;
	background: repeating-linear-gradient(90deg,
		rgba(255, 255, 255, 0.07) 0 10px,
		rgba(255, 255, 255, 0) 10px 28px);
	animation: aid-drum 1.15s linear infinite;
}
@keyframes aid-drum {
	from { transform: skewX(-22deg) translateX(0); }
	to   { transform: skewX(-22deg) translateX(-28px); }
}

/* The mascot marches. He is at the leading edge of the band, facing the way
   the army is going -- and on the two INCOMING states he is turned around and
   the ground runs the other way, because then the thing is coming at you. */
.aid-mars-drac {
	position: absolute;
	left: 14px;
	bottom: 8px;
	height: 54px;
	width: auto;
	opacity: 0.9;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
	animation: aid-mars-pas 620ms ease-in-out infinite;
}
/* NAMED aid-mars-pas, NOT aid-pas, AND THE NAME IS THE WHOLE BUG.
 *
 * "dracusorul nu se mai misca bine sus in animatie. sare ciudat la dus. la
 *  intoarcere pluteste bine" (10 September 2026)
 *
 * There were TWO @keyframes called aid-pas in this stylesheet: this one, a
 * 4px bob, and one near the bottom for the walking SVG devil's legs --
 * `from { rotate(-22deg) } to { rotate(22deg) }`. A duplicate @keyframes name
 * is not an error and does not cascade per rule: the LAST definition in the
 * document replaces the earlier one everywhere. The leg swing is written
 * further down, so the marching mascot was rocking 44 degrees back and forth
 * instead of bobbing -- "sare ciudat".
 *
 * The return trip was fine because it uses aid-pas-intors, a name nobody else
 * had taken. That asymmetry is what pointed at the name rather than at the
 * timing: two identical keyframe blocks cannot behave differently unless one
 * of them is not the block you think it is.
 *
 * Both names here now carry the component's prefix, like everything else in
 * this file, and bin/check-theme.php refuses a duplicate from now on. */
@keyframes aid-mars-pas {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
.aid-mars-primesc-atac .aid-mars-drum,
.aid-mars-primesc-intariri .aid-mars-drum,
.aid-mars-acasa .aid-mars-drum { animation-direction: reverse; }
.aid-mars-primesc-atac .aid-mars-drac,
.aid-mars-primesc-intariri .aid-mars-drac,
.aid-mars-acasa .aid-mars-drac {
	left: auto;
	right: 14px;
	animation-name: aid-mars-pas-intors;
}
@keyframes aid-mars-pas-intors {
	0%, 100% { transform: scaleX(-1) translateY(0); }
	50%      { transform: scaleX(-1) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.aid-mars-drum, .aid-mars-drac { animation: none; }
}

.aid-mars-titlu {
	position: relative;
	font-family: var(--aid-font-titlu);
	font-size: 26px;
	line-height: 30px;
	font-weight: bold;
	letter-spacing: 0.01em;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65);
}
.aid-mars-rand {
	position: relative;
	font-size: 12px;
	line-height: 17px;
}
.aid-mars-nume { font-weight: bold; text-decoration: none; }
.aid-mars-loc {
	margin-left: 6px;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* Four states, four grounds. Attacking out is ember; being attacked is the
   same fire seen from the wrong end, so it is redder and lit from the right.
   Reinforcements are the game's green, and coming home is the quiet one. */
.aid-mars-atac {
	background: linear-gradient(180deg, #5a2a12 0%, #3a1a0c 55%, #200e06 100%);
}
.aid-mars-atac .aid-mars-titlu { color: #ffcf7a; }
.aid-mars-primesc-atac {
	background: linear-gradient(180deg, #631d1d 0%, #401212 55%, #230a0a 100%);
}
.aid-mars-primesc-atac .aid-mars-titlu { color: #ff9d8c; }
.aid-mars-intariri,
.aid-mars-primesc-intariri {
	background: linear-gradient(180deg, #1e4a2a 0%, #143119 55%, #0b1c0e 100%);
}
.aid-mars-intariri .aid-mars-titlu,
.aid-mars-primesc-intariri .aid-mars-titlu { color: #9fe08a; }
.aid-mars-acasa {
	background: linear-gradient(180deg, #2f3a22 0%, #1d2415 55%, #10150c 100%);
}
.aid-mars-acasa .aid-mars-titlu { color: var(--aid-aur); }
.aid-mars-rand { color: rgba(255, 255, 255, 0.78); }
.aid-mars-nume { color: #fff; }

/* ---------------------------------------------- cele doua liste de armate
 *
 * Din bara, desenate de aidLista() in main.php. Doua stari care nu existau
 * inainte, pentru ca lista nu mai e doar „ce e pe drum":
 *
 *   .aid-in-batalie   armata a ajuns, lupta nu s-a decis inca
 *   .aid-lista-restul „→ incă 7 armate", cand sunt mai multe de cinci
 */
#lista-plecate .aid-in-batalie,
#lista-primite .aid-in-batalie {
	font-style: italic;
	color: var(--aid-portocaliu);
}
#lista-plecate .aid-lista-restul,
#lista-primite .aid-lista-restul {
	display: inline-block;
	margin-top: 2px;
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--aid-aur-stins);
	text-decoration: none;
	opacity: 0.85;
}
#lista-plecate .aid-lista-restul:hover,
#lista-primite .aid-lista-restul:hover { text-decoration: underline; opacity: 1; }

/* THE CLOCK, big. It is the one number the player opened this screen for.
   Tabular figures so the digits do not shuffle sideways as they change --
   at 40px a proportional 1 is very visibly narrower than a 0. */
.aid-ceas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	margin: 0 0 14px;
}
.aid-ceas-cifre {
	font-size: 42px;
	line-height: 46px;
	font-weight: bold;
	letter-spacing: 0.03em;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.aid-ceas-eticheta {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
.aid-ceas-gata .aid-ceas-cifre { color: var(--aid-text-slab); }

/* ACELASI CEAS MARE, DAR CU O PROPOZITIE IN LOC DE CIFRE.
 *
 * „cand armata ajunge la destinatie, schimba «A ajuns» in «Bătălia are loc
 * acum!»" (20 sept. 2026). Propozitia aia la 42px nu incape pe niciun telefon,
 * si oricum nu e un numar: fara cifre tabulare, fara spatiere de ceas, si cu
 * voie sa treaca pe randul al doilea.
 *
 * Si nu e stinsa. `.aid-ceas-gata` inchide culoarea fiindca un ceas ajuns la
 * 00:00:00 nu mai are ce spune; asta are, si e singurul lucru de pe ecran care
 * se intampla chiar acum. */
.aid-ceas.aid-ceas-text:not(.aid-ceas-rand) .aid-ceas-cifre {
	font-size: clamp(20px, 6.5vw, 28px);
	line-height: 1.2;
	letter-spacing: 0.01em;
	font-variant-numeric: normal;
	text-align: center;
	max-width: 14em;
}
.aid-ceas.aid-ceas-text.aid-ceas-gata:not(.aid-ceas-rand) .aid-ceas-cifre {
	color: var(--aid-portocaliu);
}

/* ACELASI CEAS, DAR INTR-UN RAND DE TABEL.
 *
 * In armate.php sunt cate unul pe rand, langa numele celui atacat -- deci nu
 * are ce cauta nici coloana, nici 42px, nici marginea de dedesubt. `.aid-ceas`
 * ramane clasa care il face sa mearga (aidceas.js o cauta pe ea); asta il face
 * sa incapa. */
.aid-ceas-rand {
	display: inline;
	margin: 0;
	gap: 0;
}
.aid-ceas-rand .aid-ceas-cifre {
	font-size: inherit;
	line-height: inherit;
	font-weight: normal;
	letter-spacing: normal;
	color: inherit;
	text-shadow: none;
}
/* „În bătălie" nu e un numar: fara cifre tabulare, si aprins -- randul asta e
   singurul de pe ecran unde se intampla ceva chiar acum. */
.aid-ceas-rand.aid-ceas-text .aid-ceas-cifre {
	font-variant-numeric: normal;
	font-style: italic;
	color: var(--aid-portocaliu);
}
.aid-ceas-rand.aid-ceas-gata .aid-ceas-cifre { color: var(--aid-text-slab); }
.aid-ceas-rand.aid-ceas-text.aid-ceas-gata .aid-ceas-cifre { color: var(--aid-portocaliu); }

/* The composition reuses the report's loot plates -- same kind of object (an
   icon, what it is, how many) and no reason for it to look like a second one. */
.aid-comp,
#istanga .aid-comp {
	margin-bottom: 12px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
.aid-comp-cap {
	padding: 5px 10px;
	border-radius: var(--aid-raza-panou-interior) var(--aid-raza-panou-interior) 0 0;
	background: var(--aid-fata-alama);
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
.aid-comp-grila {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	padding: 10px;
}
.aid-comp-fisa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 4px;
	border-radius: var(--aid-raza-mare);
	background:
		radial-gradient(circle at 50% 12%, rgba(255, 204, 0, 0.10), rgba(0, 0, 0, 0) 68%),
		rgba(0, 0, 0, 0.34);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
}
.aid-comp-icoana img { display: block; }
.aid-comp-eticheta {
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.62;
}
.aid-comp-cifra {
	font-size: 19px;
	line-height: 24px;
	font-weight: bold;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}
.aid-comp-nota {
	margin: 0;
	padding: 0 10px 10px;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-slab);
}
.aid-comp-nota b { color: var(--aid-text); }

/* ------------------------------------------------- the live-battle switch
 *
 * "sa fie si in pagina armatei ca un switch si sa o poti activa-dezactiva (pana
 *  in 10 secunde pana la batalie)"
 *
 * A real switch rather than a tick box, because it is a state you leave on --
 * and because at a glance across the page you need to see WHICH way it is set,
 * which a 13px checkbox does not tell you from two feet away.
 *
 * The input keeps existing and keeps being the thing that is focused and
 * toggled; it is only moved out of sight. A label wrapping a real checkbox is
 * still a real checkbox: keyboard, space bar, screen readers, and the browser's
 * own :checked all keep working, which is not true of a <div> with a click
 * handler. */
#istanga .aid-live {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 12px;
	padding: 9px 12px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	cursor: pointer;
	user-select: none;
}
#istanga .aid-live input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
#istanga .aid-live-buton {
	position: relative;
	flex: none;
	width: 38px;
	height: 21px;
	margin-top: 1px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.7),
		inset 0 1px 2px rgba(0, 0, 0, 0.5);
	transition: background-color 120ms linear, box-shadow 120ms linear;
}
#istanga .aid-live-buton::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: linear-gradient(180deg, #cfcabb, #8d8a80);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	transition: transform 140ms cubic-bezier(.3, .7, .3, 1.3), background-color 120ms linear;
}
#istanga .aid-live input:checked + .aid-live-buton {
	background: linear-gradient(180deg, #7a3417, #a34a1c);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		0 0 8px rgba(255, 140, 40, 0.35);
}
#istanga .aid-live input:checked + .aid-live-buton::after {
	transform: translateX(17px);
	background: linear-gradient(180deg, #ffd9a0, #e8a44f);
}
/* Focus has to be visible on the switch, because the input it belongs to is
   not: a keyboard user tabbing here would otherwise have no idea where they
   are. */
#istanga .aid-live input:focus-visible + .aid-live-buton {
	outline: 2px solid var(--aid-aur);
	outline-offset: 2px;
}
#istanga .aid-live-text { display: flex; flex-direction: column; gap: 1px; }
#istanga .aid-live-text strong { font-size: 12px; color: var(--aid-text); }
#istanga .aid-live-nota { font-size: 11px; line-height: 15px; color: var(--aid-text-slab); }
/* Ten seconds out the switch stops being a control and says so. */
#istanga .aid-live-blocat { cursor: default; opacity: 0.62; }
#istanga .aid-live-blocat .aid-live-nota { color: var(--aid-aur-stins); }

/* WHAT THE REPORT SAYS -- the box under the animation.
 *
 * "sa nu afisam raportul in scroll ... ceva fain ca in prototip, cu exact info
 *  boxul 'Ce spune raportul' ... mai bogat vizual (icoane resurse, medalie
 *  etc), imediat dupa terminarea animatiei"
 *
 * Built from figures rather than from the report page, so it is the size of
 * what it has to say. It arrives when the battle ends and then stays: replaying
 * does not take it away, because by then you have read it.
 *
 * The plates are the report's own loot tiles at the same size. Two screens
 * showing the same three numbers should not invent two ways to draw them. */
.aidsumar {
	width: 100%;
	max-width: 720px;
	margin: 12px auto 0;
	padding: 12px 14px 14px;
	border-radius: var(--aid-raza-panou);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.55);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.12);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 320ms ease-out, transform 320ms cubic-bezier(.2, .8, .3, 1);
}
.aidsumar-intra { opacity: 1; transform: translateY(0); }

.aidsumar-cap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding-bottom: 8px;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.18);
}
.aidsumar-titlu {
	font-family: var(--aid-font-titlu);
	font-size: 14px;
	font-weight: bold;
	color: var(--aid-aur);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
/* The winner, named, on the same line as the medal. A label above the name
   rather than "Castigator: x" on one line: the eye finds a small dim word over
   a bright one faster than it parses a sentence, and this box is read in the
   two seconds after an animation ends. */
.aidsumar-cine {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	margin-left: auto;
	line-height: 14px;
}
.aidsumar-cine i {
	font-style: normal;
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
	color: var(--aid-text);
}
.aidsumar-cine b { font-size: 13px; color: var(--aid-aur); }
.aidsumar-pierdere .aidsumar-titlu { color: #ff9d8c; }
.aidsumar-pierdere .aidsumar-cine b { color: #ffb3a4; }

/* WHOSE LOOT IT IS. The figures belong to the BATTLE, not to the reader: on a
   loss they are what was taken from you, and printed under a bare heading they
   read as a prize -- which is exactly what happened. So the heading names the
   person, and on a loss the plates lose their gold. */
.aidsumar-prada-titlu {
	margin: 12px 0 6px;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
.aidsumar-e-pierdere .aidsumar-prada-titlu { color: #e0897a; }
.aidsumar-e-pierdere .aidsumar-cifra,
.aidsumar-e-pierdere .aidsumar-obiect strong,
.aidsumar-e-pierdere .aidsumar-element b { color: #f0a294; }
.aidsumar-e-pierdere .aidsumar-fisa {
	background:
		radial-gradient(circle at 50% 12%, rgba(255, 90, 60, 0.10), rgba(0, 0, 0, 0) 68%),
		rgba(0, 0, 0, 0.34);
}

.aidsumar-grila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
}
.aidsumar-fisa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px;
	border-radius: var(--aid-raza-mare);
	background:
		radial-gradient(circle at 50% 12%, rgba(255, 204, 0, 0.10), rgba(0, 0, 0, 0) 68%),
		rgba(0, 0, 0, 0.34);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
}
.aidsumar-icoana { height: 21px; width: auto; display: block; }
.aidsumar-eticheta {
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.62;
	color: var(--aid-text);
}
.aidsumar-cifra {
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}

.aidsumar-obiect {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 6px 10px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.34);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
	font-size: 12px;
	color: var(--aid-text);
}
.aidsumar-obiect img { height: 24px; width: auto; }
.aidsumar-obiect strong { margin-left: auto; color: var(--aid-aur); }

.aidsumar-elemente {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 6px 10px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.34);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.aidsumar-element {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-right: 8px;
	font-size: 12px;
	color: var(--aid-text);
}
.aidsumar-element img { height: 20px; width: auto; }
.aidsumar-element b { color: var(--aid-aur); font-variant-numeric: tabular-nums; }

.aidsumar-gol {
	margin: 0;
	font-size: 12px;
	color: var(--aid-text-slab);
}
.aidsumar-jos { margin-top: 10px; text-align: right; }

.aid-armata-jos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
}

/* ------------------------------------------------------------- the medal */
.aid-medalie {
	display: inline-block;
	width: 22px;
	height: 27px;
	background: url("../themes/default/imagini/ui/medalie.svg") center / contain no-repeat;
	/* It hangs slightly below its line, the way a medal hangs. */
	margin: -4px 0 -4px;
	flex: none;
}

/* --------------------------------------------------------- the two armies */
.aid-armata {
	margin-bottom: 10px;
	border-radius: var(--aid-raza-panou);
	background: rgba(var(--aid-corp-r), var(--aid-corp-g), var(--aid-corp-b), 0.85);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	overflow: hidden;
}
.aid-armata-cap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	background: linear-gradient(180deg, rgba(255, 226, 178, 0.10), rgba(0, 0, 0, 0.28));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.aid-armata-rol {
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--aid-aur-stins);
}
/* The name goes to the right end, which is where his reference puts it and
   where the eye is already going: role on the left is the label, name on the
   right is the answer. */
.aid-armata-nume {
	margin-left: auto;
	font-size: 14px;
	font-weight: bold;
	color: var(--aid-aur) !important;
	text-decoration: none;
}
.aid-armata-nume:hover { text-decoration: underline; }

.aid-armata-invinge .aid-armata-cap {
	background: linear-gradient(180deg, rgba(255, 214, 92, 0.22), rgba(80, 52, 0, 0.30));
}

.aid-armata-corp {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 10px;
}
.aid-armata-poza {
	flex: none;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.4);
}
.aid-armata-tabla {
	flex: 1;
	border-collapse: collapse;
	width: auto;
	color: inherit;
}
.aid-armata-tabla th,
.aid-armata-tabla td {
	padding: 2px 6px;
	font-size: 12px;
	color: inherit;
}
/* "aliniaza dreapta icoanele cu dracii si preotii sa fie in coloana cu
 *  cifrele" -- the numbers are right-aligned, so a centred icon above them
 *  floats off to the left of its own column and the header stops pointing at
 *  anything. Same alignment as the cells, and the column reads as one thing. */
.aid-armata-tabla thead th {
	padding-bottom: 4px;
	text-align: right;
}
.aid-armata-tabla thead img { vertical-align: middle; }
.aid-armata-tabla tbody th {
	text-align: right;
	font-weight: normal;
	white-space: nowrap;
	opacity: 0.75;
}
.aid-armata-tabla tbody td {
	width: 40%;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* The two that matter get weight: what you lost, and what is coming back. */
.aid-armata-tabla .aid-r-pierduti td { color: #f09a8e; }
.aid-armata-tabla .aid-r-ramasi  th,
.aid-armata-tabla .aid-r-ramasi  td { font-weight: bold; opacity: 1; }
.aid-armata-tabla .aid-r-ramasi  td { color: #b9dd93; }

/* The same table again as one line. Three widths that always add to 100, so it
   is readable before a single number has been. */
.aid-armata-bara {
	display: flex;
	height: 6px;
	margin: 0 10px 9px;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
	background: rgba(0, 0, 0, 0.45);
}
.aid-armata-bara > span { display: block; height: 100%; }
.aid-b-fugiti   { background: linear-gradient(180deg, #b99a3e, #7d6520); }
.aid-b-pierduti { background: linear-gradient(180deg, #c0483a, #7c2119); }
.aid-b-ramasi   { background: linear-gradient(180deg, #6ea64a, #3d6b25); }

/* ------------------------------------------------------------- what was taken */
.aid-prada {
	margin-bottom: 10px;
	border-radius: var(--aid-raza-panou);
	background: rgba(var(--aid-corp-r), var(--aid-corp-g), var(--aid-corp-b), 0.85);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	overflow: hidden;
}
.aid-prada-cap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	background: linear-gradient(180deg, rgba(255, 214, 92, 0.22), rgba(60, 40, 0, 0.35));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
.aid-prada-cap strong {
	margin-left: auto;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--aid-aur);
}

/* THE LOOT AS FIGURES, NOT AS A TABLE ROW.
 *
 * "prada, bani, puncte, elemente magice, la fel - sa se vada ce am luat"
 *
 * Three tiles across at 600px. A number you are meant to feel needs room and a
 * size of its own; in the old two-column table it was the same 12px as the
 * word next to it. */
.aid-prada-grila {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 10px;
}
.aid-prada-fisa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px;
	border-radius: var(--aid-raza-mare);
	background:
		radial-gradient(circle at 50% 12%, rgba(255, 204, 0, 0.10), rgba(0, 0, 0, 0) 68%),
		rgba(0, 0, 0, 0.34);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
}
.aid-prada-icoana img { display: block; }
.aid-prada-eticheta {
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.62;
	text-align: center;
}
.aid-prada-cifra {
	font-size: 16px;
	line-height: 20px;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}

.aid-prada-obiect {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 10px 8px;
	padding: 6px 8px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.30);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.aid-prada-obiect .aid-prada-eticheta { text-align: left; }
.aid-prada-obiect .aid-prada-nume {
	margin-left: auto;
	color: var(--aid-aur);
	font-size: 13px;
}
.aid-prada-elemente {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 10px 10px;
	padding: 6px 8px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.30);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.aid-prada-siruri { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.aid-prada-element { display: inline-flex; align-items: center; gap: 3px; }
.aid-prada-element img { display: block; height: 20px; width: auto; }
.aid-prada-element b { color: var(--aid-aur); font-size: 12px; }

.aid-prada-nota {
	margin: 0;
	padding: 6px 10px 10px;
	text-align: center;
	font-size: 11px;
	color: #f0c98a;
}

/* --------------------------------------------------------------- the points */
.aid-puncte {
	border-radius: var(--aid-raza-panou);
	background: rgba(var(--aid-corp-r), var(--aid-corp-g), var(--aid-corp-b), 0.85);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	overflow: hidden;
}
.aid-puncte-corp {
	display: flex;
	justify-content: space-around;
	padding: 8px 10px;
	font-size: 12px;
}
.aid-puncte-corp b { color: var(--aid-aur); margin-left: 4px; }


/* ==========================================================================
 *  A MESSAGE, AS A LETTER
 *
 *  "fragment mesaj - are nevoie de o restilizare mai faina. e basic si old.
 *   trebuie aranjat altfel sa citesti mesajul"
 *
 *  Markup in bin/sabloane/mesaj.php. The whole point of this section is the
 *  one rule the old table broke: the message is the subject of the page, so it
 *  gets the space and the type. Everything else is an address label.
 * ========================================================================== */

/* SCRISOAREA IA TOATĂ LĂȚIMEA CONTAINERULUI (22 septembrie 2026).
 *
 *   „sa te asiguri ca mesajul ia full width -> am avut un mesaj scurt si nu a
 *    fost afisat pe full width al containerului"
 *
 * Așa era, și nu din cauza lui `max-width`. `#istanga .aid-cadru` face din
 * scrisoare un element de flexbox, iar `margin: 0 auto` pe axa transversală
 * ANULEAZĂ întinderea: regula spune că un element cu margine `auto` pe axa aia
 * nu se mai întinde, ci se centrează la lățimea CONȚINUTULUI. Un mesaj scurt
 * avea conținut îngust, deci cutia ieșea îngustă -- măsurată pe dev: 380px
 * într-un panou de 600, cu 110px goi de fiecare parte. Un mesaj lung umplea
 * lățimea și ascundea problema, de-aia s-a văzut abia acum.
 *
 * `width: 100%` îi dă o lățime care nu depinde de text. Iar în panou plafonul
 * de 540px iese cu totul: acolo lățimea de citit o dă panoul, care are 600 și
 * atât, și un plafon sub el lasă exact banda goală de care e vorba. Rămâne unde
 * fragmentul se deschide singur, pe o pagină lată, ca rândul să nu ajungă lung
 * cât ecranul. */
.aid-scrisoare {
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	padding: 10px 12px 16px;
	box-sizing: border-box;
}
#istanga .aid-scrisoare { max-width: none; }

.aid-scrisoare-cap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 9px;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.14);
}
/* `object-position: center top` si nu centrul.
 *
 * Personajele sunt 138x400 -- aproape de trei ori mai inalte decat late -- si
 * intr-un patrat de 42x52 `object-fit: cover` taie din inaltime. Din centru,
 * ce ramane e mijlocul: cureaua si o bucata de pantalon. Capul, adica singurul
 * lucru dupa care recunosti pe cineva, cadea afara.
 *
 * „poti pune center top, sa ii vedem capul si braul" -- exact asta: se taie de
 * jos, nu de la amandoua capetele. */
.aid-scrisoare-poza {
	flex: none;
	width: 42px;
	height: 52px;
	object-fit: cover;
	object-position: center top;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.4);
}
/* A player with no portrait still gets the same block of space, so the name
   and the date do not shift left on half the messages. */
.aid-scrisoare-poza-goala {
	display: block;
	background:
		radial-gradient(circle at 50% 34%, rgba(255, 226, 178, 0.16), rgba(0, 0, 0, 0) 62%),
		rgba(0, 0, 0, 0.38);
}
.aid-scrisoare-cine { display: flex; flex-direction: column; gap: 1px; }
.aid-scrisoare-rol {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
}
.aid-scrisoare-nume {
	font-size: 15px;
	font-weight: bold;
	color: var(--aid-aur) !important;
	text-decoration: none;
}
.aid-scrisoare-nume:hover { text-decoration: underline; }
.aid-scrisoare-data {
	margin-left: auto;
	font-size: 11px;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

.aid-scrisoare-subiect {
	margin: 12px 0 10px;
	text-transform: none;
	font-family: "Alegreya", Georgia, "Times New Roman", serif;
	font-size: 19px;
	line-height: 24px;
	color: var(--aid-aur);
}

/* THE TEXT. This is the page.
 *
 * 14px over 22 and a measure that stops around 60 characters, because a line
 * that runs the full 540 is one the eye loses its place on. The panel behind
 * it is the same body the other panels use, so the letter reads as a sheet
 * lying on the desk rather than as a bordered cell -- the old `border:1px
 * solid #447744` was the only thing separating it from the labels above. */
.aid-scrisoare-text {
	padding: 14px 16px;
	border-radius: var(--aid-raza-panou);
	background: rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
	font-size: 14px;
	line-height: 22px;
	overflow-wrap: anywhere;
}
.aid-scrisoare-text a { color: var(--aid-aur); }
.aid-scrisoare-text img { max-width: 100%; height: auto; }

.aid-scrisoare-jos {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px;
}
/* .aid-btn is an <a> here, and the button rules are written for inputs that
   have no text-decoration and centre their own label. */
.aid-scrisoare-jos .aid-btn {
	text-decoration: none;
	line-height: 20px;
}


/* ==========================================================================
 *  THE REPLAY
 *
 *  "putem pune si buton replay battle" -- and, a month later, "prea naivă":
 *  js/aidreluare.js now draws the battle as in Heroes, on a rendered backdrop,
 *  and this is the room it is drawn in. A takeover over the whole viewport,
 *  because claude/battle-replay.md identified the one constraint that matters:
 *  if the armies list is visible, a returning army tells the player they
 *  survived before the animation says so. The result has to be the last thing
 *  on screen, not the first.
 *
 *  Names, portraits and live totals are painted ON the canvas now (the bottom
 *  bar of the scene), so the chrome here is only the frame, the verdict and the
 *  transport. The field is 16:9 and must fit BOTH ways: as wide as the box, but
 *  never taller than the viewport minus the transport row -- a 1366x768 laptop
 *  would otherwise scroll the controls off the bottom.
 * ========================================================================== */

#aidreluare {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	/* "fundalul sa fie black complet (sa nu apara ceva dedesupt ca se vede
	   oricum prin blur)". Opaque. */
	background: #000;
}
#aidreluare.aidreluare-deschis { display: flex; }

.aidreluare-cutie {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-height: 100%;
}

/* ------------------------------------------------------------- the field */
.aidreluare-camp {
	position: relative;
	width: min(100%, 1600px, calc((100vh - 92px) * 16 / 9));
	border-radius: var(--aid-raza-panou);
	overflow: hidden;
	background: #16241a;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 rgba(255, 226, 178, 0.12),
		0 18px 50px rgba(0, 0, 0, 0.65);
}
.aidreluare-panza {
	display: block;
	width: 100%;
	height: auto;
	/* 1600x900 in its own units; the aspect keeps the ranks from squashing */
	aspect-ratio: 1600 / 900;
}

.aidreluare-verdict {
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	padding: 10px 30px;
	border-radius: 999px;
	background: rgba(10, 17, 12, 0.84);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.25);
	backdrop-filter: blur(3px);
	font-family: "Alegreya", Georgia, "Times New Roman", serif;
	font-size: clamp(19px, 3vw, 30px);
	white-space: nowrap;
	opacity: 0;
	transition: opacity 500ms ease;
	pointer-events: none;
}
.aidreluare-vizibil { opacity: 1; }
.aidreluare-castig   { color: #ffd76b; }
.aidreluare-pierdere { color: #f0b4a8; }

/* "Armatele se așază…" -- shown only until the four sprites have arrived the
   first time; after that they are cached and the curtain never shows again. */
.aidreluare-asteapta {
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	padding: 8px 22px;
	border-radius: 999px;
	background: rgba(10, 17, 12, 0.7);
	color: var(--aid-text-slab);
	font-size: 13px;
	letter-spacing: 0.08em;
	pointer-events: none;
}

.aidreluare-inchide {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 15px;
	background: rgba(10, 17, 12, 0.8);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.28);
	color: var(--aid-aur);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.aidreluare-inchide:hover { filter: brightness(1.3); }

/* ---------------------------------------------------------- the transport */
.aidreluare-comenzi {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	width: min(100%, 1600px, calc((100vh - 92px) * 16 / 9));
}
.aidreluare-comenzi button {
	box-sizing: border-box;
	height: 30px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--aid-raza-mare);
	background: linear-gradient(180deg, #1d2f21, #16241a);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.22);
	color: var(--aid-text);
	font-size: 12px;
	cursor: pointer;
}
.aidreluare-comenzi button:hover { box-shadow: inset 0 0 0 1px var(--aid-aur); color: var(--aid-aur); }
.aidreluare-joaca { min-width: 104px; color: var(--aid-aur) !important; }

.aidreluare-scrub {
	flex: 1 1 180px;
	min-width: 120px;
	accent-color: #e2622b;
	cursor: pointer;
}
.aidreluare-viteza {
	display: flex;
	gap: 5px;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aid-text-slab);
}
.aidreluare-viteza i { font-style: normal; }
.aidreluare-viteza button { height: 24px; padding: 0 9px; min-width: 40px; font-size: 11px; }
.aidreluare-viteza button[aria-pressed="true"] {
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins);
	color: var(--aid-aur);
}
.aidreluare-faza {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aid-text-slab);
	font-variant-numeric: tabular-nums;
}

/* On a phone held upright a 16:9 field is 200px tall. The scene still plays,
   but a line under the transport says what the thumb already suspects. */
.aidreluare-sfat { display: none; width: 100%; font-size: 11px; color: var(--aid-text-slab); }

@media (max-width: 620px) {
	#aidreluare { padding: 8px; }
	.aidreluare-faza { margin-left: 0; width: 100%; }
	.aidreluare-viteza i { display: none; }
}
@media (max-width: 620px) and (orientation: portrait) {
	.aidreluare-sfat { display: block; }
}


/* ==========================================================================
 *  LISTS
 *
 *  The pattern every ranking, inbox and archive in this game needs, written
 *  once. Built against his Vampirix screenshots: a page title with a quiet
 *  subtitle under it, a header row that is a label rather than a bar, rows with
 *  air in them, alternating grounds so the eye can hold a line across, and the
 *  numbers right-aligned in their own columns.
 *
 *  WHAT IT REPLACES, AND WHY IT IS WORTH A SECTION OF ITS OWN
 *
 *  A legacy list is an outer <table> with a NESTED TABLE INSIDE EVERY ROW, each
 *  carrying onClick, onMouseOver and onMouseOut attributes that write inline
 *  background colours from PHP variables. Fifteen rows is sixteen tables. None
 *  of it can be reached from a stylesheet, and every theme has to supply two
 *  hover colours to every page that draws a list.
 *
 *  Rows get their hover from CSS and their click from js/aidliste.js, so a new
 *  list is now a plain <table class="aid-lista"> and nothing else.
 * ========================================================================== */

/* TWO LEGACY GLOBALS TO STOP, AND ONE OF THEM IS FUNNY.
 *
 * defaultcss2.css says `h1 { text-transform: capitalize }`, so the subtitle
 * came out as "Din Ultimele 3 Zile" -- title case in a language that does not
 * use it. And the panel centres its table text from an ancestor, which is fine
 * for a 2010 page of three cells and wrong for a list: names read down the left
 * edge or they do not read at all.
 *
 * Both are stated here rather than fought elsewhere, because a list is exactly
 * the place where inherited typography goes wrong and this section is the one
 * that knows what a list is supposed to look like. */
.aid-lista-titlu {
	margin: 6px 0 12px;
	text-align: center;
	text-transform: none;
	font-size: 17px;
	line-height: 22px;
	color: var(--aid-aur);
}
.aid-lista-titlu small {
	display: block;
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 0.03em;
	opacity: 0.6;
}

.aid-lista {
	width: calc(100% - 20px);
	margin: 0 10px;
	border-collapse: separate;
	border-spacing: 0;
	color: inherit;
	font-size: 12px;
}

/* The header is a label, not a bar. His reference has no fill behind it at all
   -- just the words, spaced out, over a rule. A filled header competes with the
   first row for attention and the first row usually wins anyway. */
.aid-lista thead th {
	padding: 4px 8px 7px;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.22);
	text-align: left;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
	white-space: nowrap;
}

.aid-lista tbody tr {
	cursor: pointer;
	transition: background-color 90ms linear;
}
/* Zebra, faint. Two thirds of a percent of white is enough to hold a line
   across five columns and not enough to read as a stripe. */
.aid-lista tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
.aid-lista tbody tr:hover           { background: rgba(255, 204, 0, 0.10); }
.aid-lista tbody tr:focus-visible {
	outline: 2px solid var(--aid-aur);
	outline-offset: -2px;
}
.aid-lista th,
.aid-lista td { text-align: left; }
.aid-lista tbody td {
	padding: 7px 8px;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	color: inherit;
	vertical-align: middle;
}
.aid-lista tbody tr:last-child td { box-shadow: none; }

/* Numbers right, names left, and tabular figures so columns of digits line up
   whatever the font does with a 1. */
.aid-lista .aid-l-cifra,
.aid-lista td.aid-l-cifra {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.aid-lista .aid-l-nume { color: var(--aid-text); }
.aid-lista tbody tr:hover .aid-l-nume { color: var(--aid-aur); }

.aid-lista-goala {
	padding: 40px 0;
	text-align: center;
	opacity: 0.6;
}

.aid-lista-jos {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 10px 14px;
}
.aid-lista-bife { display: flex; gap: 10px; font-size: 11px; }
.aid-lista-bife a { color: var(--aid-aur-stins); }
.aid-lista-pagini { margin-left: auto; display: flex; gap: 6px; }
.aid-lista-jos .aid-btn { text-decoration: none; }
/* BARA DE SUB CASUTA: doua butoane, unul la fiecare capat.
 *
 * "Marcheaza ca citite il punem in dreapta, sub coloana cu checkboxuri; adauga
 *  un alt buton in stanga paginii si a lui" -- deci stanga e "Fara mesaje
 * necitite", iar cel care lucreaza cu bifele sta sub ele. `margin-left: auto`
 * pe ultimul face toata treaba: nu conteaza cate butoane sunt inainte, ultimul
 * se duce la dreapta si spatiul ramane intre ele.
 *
 * Tintit pe #mesaje, nu pe .aid-lista-jos in general: rapoarte.php foloseste
 * aceeasi bara si inca are cele doua linkuri, si nu-i mut butonul fara sa ceara. */
#mesaje .aid-lista-jos .aid-btn:last-child { margin-left: auto; }

/* Bifa din capul coloanei. Marita putin fata de cele din randuri: e tinta pe
   care o apesi prima, si singura din tabela care nu are un rand langa ea de
   care sa te sprijini cand o cauti. */
#istanga .aid-lista-mesaje thead .aid-l-bifa input[type="checkbox"] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
	cursor: pointer;
	accent-color: var(--aid-aur-stins, #c69e0c);
}
.aid-btn-mic {
	min-height: 24px !important;
	padding: 2px 12px !important;
	font-size: 12px !important;
	line-height: 18px;
}


/* ------------------------------------------- the reports list, specifically
 *
 * "sa punem in dreptul fiecarei linii de batalii, la inceput, nu numarul de
 *  ordine, ca nu e important ci: un semn de intrebare stilizat pt game ...
 *  steluta golden daca e victorie ... un trident rupt in doua pe un cerc
 *  purple dark daca am pierdut"
 *
 * The row number is gone. It counted 1..15 and then counted 1..15 again on the
 * next page, which is not information. The glyph is: it says, before you read a
 * single name, whether you have opened this one and how it went.
 */
.aid-semn {
	display: block;
	width: 22px;
	height: 22px;
	background: center / contain no-repeat;
}
.aid-semn-necitit    { background-image: url("../themes/default/imagini/ui/raport-necitit.svg"); }
.aid-semn-victorie   { background-image: url("../themes/default/imagini/ui/raport-victorie.svg"); }
.aid-semn-infrangere { background-image: url("../themes/default/imagini/ui/raport-infrangere.svg"); }

.aid-lista-rapoarte .aid-l-semn { width: 22px; padding-right: 0; }
.aid-lista-rapoarte .aid-l-data { width: 130px; white-space: nowrap; }
/* The date is dimmed on the ROWS only. Dimming it on the header too was
   harmless until the header became sticky -- opacity applies to the whole
   element including its background, so a 0.72 header is a translucent one
   and the rows slide visibly through it. */
.aid-lista-rapoarte tbody .aid-l-data { opacity: 0.72; }
.aid-lista-rapoarte .aid-l-bifa,
.aid-lista-rapoarte th.aid-l-bifa { width: 26px; text-align: right; }
.aid-lista-rapoarte .aid-l-bifa input { margin: 0; cursor: pointer; }

/* An unread report is the one you came here for, so it carries weight and the
   game's gold. The old page tinted it with a colour taken from a theme
   variable, which on half the themes was the colour of everything else. */
.aid-lista-rapoarte .aid-l-necitit .aid-l-nume,
.aid-lista-rapoarte .aid-l-necitit .aid-l-data {
	color: var(--aid-aur);
	font-weight: bold;
	opacity: 1;
}


/* ------------------------------------------------- the two message lists
 *
 * The inbox and the sent folder, on the same table as the reports. The
 * envelope carries the state that used to be a text colour taken from a theme
 * variable -- and in the SENT list it carries a different fact with the same
 * two shapes: sealed means the person you wrote to has not opened it yet.
 */
.aid-plic {
	display: block;
	width: 22px;
	height: 18px;
	background: center / contain no-repeat;
}
.aid-plic-necitit { background-image: url("../themes/default/imagini/ui/mesaj-necitit.svg"); }
.aid-plic-citit   { background-image: url("../themes/default/imagini/ui/mesaj-citit.svg"); }

.aid-lista-mesaje .aid-l-semn    { width: 22px; padding-right: 0; }
.aid-lista-mesaje .aid-l-de-la   { width: 110px; }
.aid-lista-mesaje .aid-l-data    { width: 130px; white-space: nowrap; }
.aid-lista-mesaje tbody .aid-l-data { opacity: 0.72; }
.aid-lista-mesaje .aid-l-bifa,
.aid-lista-mesaje th.aid-l-bifa  { width: 26px; text-align: right; }
.aid-lista-mesaje .aid-l-bifa input { margin: 0; cursor: pointer; }
/* The subject is the wide one and it is already cut to 53 characters in PHP;
   this only stops a long unbroken word from pushing the date off the panel. */
.aid-lista-mesaje .aid-l-subiect { overflow-wrap: anywhere; }

.aid-lista-mesaje .aid-l-necitit .aid-l-nume,
.aid-lista-mesaje .aid-l-necitit .aid-l-subiect {
	color: var(--aid-aur);
	font-weight: bold;
}
/* „O Voce Din Cer" e mai lung decât „Admin" și e singurul expeditor care nu e
   un jucător. Cursivele spun asta fără să adauge un cuvânt, iar `text-wrap` îl
   lasă să cadă pe două rânduri rupte frumos în loc să împingă subiectul. */
.aid-lista-mesaje .aid-l-nume-joc {
	font-style: italic;
	text-wrap: balance;
}

/* The bar above the title: where you go from here, before the list itself.
   The old page had these two as absolutely positioned <a>s at top:22px, one in
   each corner, overlapping the heading on a narrow panel. */
.aid-lista-bara {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 10px 0;
}
.aid-lista-bara .aid-btn { text-decoration: none; }
.aid-lista-bara .aid-btn:last-child { margin-left: auto; }


/* ==========================================================================
 *  THE COUNT DISC
 *
 *  "pune totalul la ambele intr-un cerc negru cu bara golden ca cel atasat -
 *   mai putem folosi acest cerc si prin alte parti"
 *
 *  A black disc in a polished gold ring, from the image he sent. Built in CSS
 *  rather than shipped as an SVG for one reason: it holds a NUMBER, and a
 *  number is one, two or four digits wide. An image would either be stretched
 *  by the widest case or too small for it; a padded pill with a fully round
 *  radius grows sideways and stays a circle at one digit, which is the shape in
 *  the reference and the only shape that survives four.
 *
 *  The ring is the same background-clip trick the buttons use: a transparent
 *  border with the gradient painted into the border box, and the black face
 *  clipped to the padding box. One element, no pseudo, no image.
 * ========================================================================== */

.aid-numar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 24px;
	height: 24px;
	padding: 0 5px;
	border: 3px solid transparent;
	border-radius: 999px;
	background-origin: border-box;
	background-clip: padding-box, border-box;
	background-image:
		/* the face */
		radial-gradient(circle at 50% 40%, #14140f 0%, #050505 70%),
		/* the ring: light at the upper left, deep at the lower right, with a
		   hard bright band where the reference has its polish */
		linear-gradient(150deg,
			#fff3bd 0%,
			#ffd34d 18%,
			#e8b62e 38%,
			#8a5f12 62%,
			#d9a83a 84%,
			#f7e07a 100%);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.6),
		inset 0 0 0 1px rgba(0, 0, 0, 0.55);
	color: var(--aid-aur);
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
	vertical-align: middle;
}

/* IN A PANEL TITLE, THE PUSH GOES ON THE BADGE.
 *
 * `.aid-panou > h5` is already `display: flex; justify-content: space-between`
 * with the collapse dot as its ::after. Add a badge and there are three items
 * on that line, so space-between puts the number in the MIDDLE of the bar --
 * which is a new version of the same complaint: the total parked away from the
 * title. `margin-right: auto` on the badge takes the whole gap for itself, so
 * the order becomes title, number, then all the space, then the dot. */
h5 > .aid-numar {
	position: relative;
	top: -1px;
	margin-right: auto;
	/* AND IT FITS THE BAR RATHER THAN STRETCHING IT.
	 *
	 * The title bar is 15px of line plus 2px of padding. A 24px disc in it
	 * makes every panel that has a total taller than every panel that does
	 * not, which is a worse misalignment than the one being fixed. 18 sits
	 * inside the bar with a pixel to spare. */
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-width: 2px;
	font-size: 10px;
}

/* The smaller one, in the corner of a 30px artefact tile. Two thirds the size
   and no shadow, because a drop shadow on a badge sitting on a badge-sized
   icon is just a dark ring. */
/* PASTILA STA PESTE RAMA, SI NU PRINDE CLICK.
 *
 * „nu se mai vede cercul gold cu cate artefacte/potiuni sunt" (15 sept 2026).
 * Pana la rama, poza era un <img> nepozitionat, deci pastila -- absoluta --
 * se desena peste el oricum. Rama e `position: relative`, adica intra in
 * acelasi strat, si cum vine dupa pastila in ordinea din pagina, o acoperea.
 * Un `z-index` o scoate inapoi deasupra.
 *
 * `pointer-events: none` e a doua jumatate a cererii: „fa te rog tot cardul
 * linkuit spre obiect.php (adica inclusiv cercul cu nr de obiecte)". Click-ul
 * sta pe rama (artefacte) sau pe card (potiuni); pastila nu mai e o gaura in
 * mijlocul lui, ci o eticheta prin care se trece. */
.aid-numar-mic {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	right: -2px;
	bottom: 0;
	/* 13 si nu 16: „am putea micsora si cercul golden cu numarul" (15 sept 2026).
	   Pe o iconita de 30px, un disc de 16 acopera mai mult de un sfert din
	   desen. La 13 se citeste la fel de bine si lasa artefactul sa se vada. */
	min-width: 13px;
	height: 13px;
	padding: 0 2px;
	border-width: 1px;
	font-size: 8px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}


/* EVERY FRAGMENT TITLE, NOT JUST THE ONES REBUILT.
 *
 * defaultcss2.css says `h1 { text-transform: capitalize }` for the whole game,
 * so screen titles read "Haine Pentru Ea", "Raport De Batalie", "Din Ultimele 3
 * Zile". English uses title case; Romanian does not, and the strings in
 * romana.php are written in sentence case -- the stylesheet has been overruling
 * the language file for fifteen years.
 *
 * Three separate refusals were written for the three headings I rebuilt. This
 * replaces the need for any more of them. */
#istanga h1,
#istanga h2,
#istanga h3 { text-transform: none; }


/* ==========================================================================
 *  ITEM CARDS
 *
 *  "abia astept sa vad cum vor arata si restul fragmentelor, in special
 *   cardurile pentru artefacte si potiuni, haine, masini"
 *
 *  Four screens -- artefacte, licori, itemuri, masini -- and one card, because
 *  they were all copied from each other in about 2010:
 *
 *    <table class="tablaartefact">
 *      <tr> <td rowspan=2 width=70>  picture
 *           <td>                     name
 *           <td rowspan=2 width=190> price and the buy form
 *      <tr> <td>                     description
 *      <tr> <td colspan=3>           the stat row (artefacte, masini)
 *
 *  Every one of those cells carries its own inline colour -- #fff on the name,
 *  #0F0 on the description, #FF0 on the price, 9px on the stats -- which is why
 *  the rules below need !important and why that is the honest answer here
 *  rather than a code smell. The alternative is a regex pass stripping style
 *  attributes out of four files, and a pass that edits colours inside markup it
 *  only half understands is a much worse trade than five declarations that say
 *  exactly which cell they are overruling.
 *
 *  Structural selectors, no new classes. The markup is identical across the
 *  four pages and I am not going to touch it: `tr:first-child > td:nth-child(2)`
 *  is the name on all four, and it will keep being the name.
 *
 *  Laid out against his Vampirix screenshot: picture left, name and description
 *  as a block beside it, the numbers on a band of their own down the right.
 * ========================================================================== */

/* THE RING IS AN OUTLINE, NOT A BOX-SHADOW, AND THAT IS THE WHOLE FIX.
 *
 * "am impresia ca td rowspan=2 de 190px din dreapta celulei trece peste bordura
 *  celulei" -- he was right, and it is in the painting order rather than in the
 * numbers. A table paints its own background and its own inset shadows FIRST,
 * then the rows, then the cells on top of both. The price cell has a background
 * of its own and it is the last cell in the row, so it sits exactly where the
 * right-hand side of the ring is drawn and covers it. Same on the bottom left,
 * under the description band. The ring was never missing; it was underneath.
 *
 * Outlines are painted last, after every descendant, so nothing inside the card
 * can cover this one. `outline-offset: -1px` pulls it inside the border box so
 * it lands on the rounded corner instead of squaring it off.
 *
 * "nu trebuie schimbat background la onmouseover. e suficient joaca din bordura
 *  si glow" -- so hover moves the outline from a dim gold to a bright one and
 * adds the glow, and touches nothing else. The card is 8px narrower than the
 * column and sits in the middle of it purely so the outer glow has somewhere to
 * go: .borderrosu clips at overflow:auto, and a glow clipped down two sides is
 * exactly the kind of uneven that started this. */
#istanga .tablaartefact,
#istanga .tart {
	width: calc(100% - 8px);
	margin: 0 4px 10px;
	border-collapse: separate;
	border-spacing: 0;
	outline: 1px solid rgba(255, 204, 0, 0.20);
	outline-offset: -1px;
	transition: outline-color 120ms linear, box-shadow 120ms linear;
}
#istanga .tablaartefact:hover,
#istanga .tart:hover {
	outline-color: rgba(255, 204, 0, 0.62);
	box-shadow:
		inset 0 1px 0 rgba(255, 226, 178, 0.12),
		0 0 9px rgba(255, 190, 30, 0.20);
}
/* A .tart inside a .tart is premium.php's form scaffolding -- a two-cell table
   used to put a field beside its button. It is layout, not a card. */
#istanga .tart .tart,
#istanga .tart table {
	width: auto;
	margin: 0;
	outline: 0;
	background: none !important;
	box-shadow: none;
}
#istanga .tablaartefact > tbody > tr > td { padding: 8px; vertical-align: top; }

/* THE PICTURE, ON A PLATE.
 *
 * His reference gives every artefact a dark rounded tile with the art sitting
 * in it and a little light at the top left. The images are 60-75px PNGs with
 * transparent corners, so without a plate they float on the card and the row
 * has no left edge to line up on. */
#istanga .tablaartefact > tbody > tr:first-child > td:first-child {
	width: 84px;
	padding: 10px;
}
/* ...dar NU peste poza dintr-o ramă, și de-aia.
 *
 * Regula asta e mai veche decât rama SVG. Ea ia orice `img` din prima celulă și
 * îi pune farfuria: 72x72, padding, fundal, umbră. Rama își pune singură poza,
 * absolut, la 89,2% din ea și decupată în opt colțuri -- iar `width: 72px` de
 * aici o umfla peste un cadru de 64, deci poza ieșea din ramă. „in artefacte.php,
 * imaginea artefactului iese din frame dreapta jos" (15 sept 2026); la licori
 * ieșea în sus, fiindcă acolo celula aliniază altfel, dar era aceeași regulă.
 *
 * Farfuria rămâne pentru pozele care chiar sunt încă `<img>` gol -- mașinile,
 * de pildă. Rama nu are nevoie de ea: ea E farfuria. */
#istanga .tablaartefact > tbody > tr:first-child > td:first-child img:not(.aid-rama-poza) {
	display: block;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	padding: 4px;
	border-radius: var(--aid-raza-mare);
	object-fit: contain;
	background:
		radial-gradient(circle at 34% 24%, rgba(255, 226, 178, 0.16), rgba(0, 0, 0, 0) 62%),
		rgba(0, 0, 0, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 226, 178, 0.12);
}
/* The cars are drawn wide rather than square and were given `width:120` in the
   markup. Let that one keep its shape. */
#istanga .tablaartefact > tbody > tr:first-child > td:first-child img[width="120"] {
	width: 108px;
	height: 72px;
}

/* THE NAME. Gold, big enough to be the card's title, and on the left where the
 * eye starts. It was #fff, centred by the table, at body size. */
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(2) {
	color: var(--aid-aur) !important;
	text-align: left;
	font-size: 15px;
	line-height: 20px;
	padding-top: 12px;
}
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(2) strong { font-weight: bold; }
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(2) span[style*="#fff"] {
	color: var(--aid-aur) !important;
}

/* THE DESCRIPTION. #0F0 on a dark green panel is the least readable pair in the
 * file: pure green at full saturation, on green. Ordinary body text instead. */
#istanga .tablaartefact > tbody > tr:nth-child(2) > td {
	color: var(--aid-text) !important;
	text-align: left;
	font-size: 12px;
	line-height: 17px;
	padding-top: 0;
}

/* THE PRICE COLUMN, as its own band -- BUT ONLY WHEN THERE IS A PRICE.
 *
 * licori.php has the same three cells and writes `<td rowspan="2">&nbsp;</td>`
 * for the third, because potions are not bought on that screen. Painted
 * unconditionally, that empty cell took 206 pixels of the card and squeezed
 * every potion's description into two thirds of the width for no reason at all
 * -- an invisible band, because it is dark on dark, doing visible damage.
 *
 * `:has(strong)` is the test: the real price cell always opens with the "Pret:"
 * label, and the premium variant with a bold "buy credits" line. An empty cell
 * matches neither and collapses to nothing, which is what it is. */
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(3) {
	color: var(--aid-text) !important;
	text-align: right;
	font-size: 12px !important;
	line-height: 18px;
}
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(3):has(strong),
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(3):has(b) {
	width: 190px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.30);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(3) strong {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
/* The two costs are the number the player is deciding on. The red one is the
   one they cannot afford and keeps its own colour, set inline per row. */
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(3) span {
	font-size: 14px;
	font-weight: bold;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(3) span[style*="red"] {
	color: #f0796a !important;
}
/* ------------------------------------------------- retete's recipe, as a row
 *
 * Same card, and the third cell holds a recipe instead of a price: six magic
 * elements with the amount under each and a "+" between them. The port turns
 * the twelve floats into .aid-ingredient (see $fixes for retete.php); this puts
 * them on a line and lets the row wrap where it needs to instead of where the
 * float order happened to break it.
 *
 * The cell is a flex container, so the buy form -- which is a sibling of the
 * ingredients, not inside a wrapper -- is pushed onto its own line by a full
 * basis rather than by a <br> nobody would find later.
 *
 * The separators are the divs with no icon in them. They keep their place in
 * the row and step back in weight, because "+" is punctuation: it should be
 * legible and it should not be as loud as the numbers it separates. */
/* The selector is long on purpose. Adding the Necesar label made this cell
   match `td:nth-child(3):has(strong)` -- the price band -- which sets it to
   190px, and 190 is not enough for six elements in a row: the recipe wrapped
   4 + 2 and left a "+" dangling at the end of the first line. So this has to
   out-specify that rule, and `:nth-child(3)` is what buys the extra class
   weight. 240 is the width the markup asked for in the first place. */
/* LA DREAPTA, NU LA MIJLOC (19 septembrie 2026).
 *
 * „pe desktop: aliniaza dreapta coloana cu Necesar si elementele magice - se
 *  misca peste tot acum, stanga dreapta."
 *
 * `justify-content: center` centra fiecare rând al rețetei pe lățimea celulei.
 * Rețetele au între două și șase ingrediente, iar cele care se înfășoară lasă pe
 * ultimul rând două-trei elemente centrate — deci de la un card la altul
 * elementele cădeau în alt loc. O margine comună le pune pe toate în același
 * plan, iar dreapta e cea care se vede: acolo se termină cardul. */
#istanga .tablaartefact > tbody > tr:first-child > td:nth-child(3):has(> .aid-ingredient) {
	width: 240px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 3px 1px;
	text-align: right !important;
}
#istanga .tablaartefact td:has(> .aid-ingredient) > strong { flex-basis: 100%; }
#istanga .tablaartefact td:has(> .aid-ingredient) > form,
#istanga .aid-ingredient-jos {
	flex-basis: 100%;
	justify-content: center;
	margin-top: 4px;
}
#istanga .aid-ingredient-jos center { text-align: center; }
#istanga .aid-ingredient-jos form { justify-content: center; margin-top: 0; }
#istanga .aid-ingredient {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	font-size: 11px;
	line-height: 14px;
	color: var(--aid-text);
	font-variant-numeric: tabular-nums;
}
#istanga .aid-ingredient img { height: 20px; width: auto; }
#istanga .aid-ingredient:not(:has(img)) {
	padding: 0 1px;
	color: var(--aid-text-slab);
	align-self: center;
}
/* An amount the player does not have is marked with $culoare in the markup --
   an inline colour from PHP. Whatever it evaluates to, it stays: this only
   makes sure the ones they DO have read as ordinary text. */
#istanga .aid-ingredient span:not([style]):not([class]) { color: var(--aid-text); }

/* PREMIUM'S BAND IS THE SAME BAND, IN TWO PIECES.
 *
 * The four shops in premium.php are this card with one difference: the price
 * cell is not `rowspan="2"`. The price sits in row one and the buy form in a
 * second cell under it, so the band that is one box on artefacte.php is two
 * boxes here, one above the other, with a seam across the middle.
 *
 * Merging them in the port is the tempting move and the wrong one: that means
 * rewriting the row structure of four loops to save six declarations, and a
 * markup rewrite that goes wrong is a page that does not render, while a
 * stylesheet that goes wrong is a page that looks odd. So the two halves are
 * painted as one instead -- rounded on the outside only, square where they
 * meet, and no inner ring to draw a line at the join. */
/* 140 rather than the 190 the other four screens use: artefacte.php's band
   carries two prices, a unit and a quantity field, premium's carries the word
   CREDITE and a number. The 50px go to the name, which was wrapping
   "Ierburile / Abundentei" over two lines inside a card 480 wide. */
#istanga .tart > tbody > tr:first-child > td:nth-child(3):has(strong) {
	width: 140px;
	border-radius: var(--aid-raza-mare) var(--aid-raza-mare) 0 0;
	padding-bottom: 2px;
	box-shadow: none;
}
#istanga .tart > tbody > tr:nth-child(2) > td:nth-child(2) {
	width: 140px;
	padding-top: 2px;
	border-radius: 0 0 var(--aid-raza-mare) var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.30);
	text-align: right;
	vertical-align: top;
}
/* The row-2 rule above this one paints the DESCRIPTION cell, and it uses
   `> td` -- which in premium reaches the buy cell as well and left-aligns it
   under a right-aligned price. Only the first cell of that row is prose. */
#istanga .tart > tbody > tr:nth-child(2) > td:nth-child(2) form { margin-top: 0; }
#istanga .tart > tbody > tr:nth-child(2) > td:nth-child(2) a {
	font-size: 11px;
	color: var(--aid-aur-stins);
}

/* ------------------------------------------- premium's six exchange forms
 *
 * "sa avem clar png credite + Credite langa input, sa stim ce schimbam.
 *  explicatia cu 'vei primi...' poate sa vina un line sub buton si input"
 *
 * The port rebuilds each one as a chip, a field, a button and a result line
 * (see $fixes for premium.php). This lays them out: everything on one row,
 * centred, and the result forced onto its own line by a full-width basis --
 * so it reads as the consequence of the row above rather than as a note
 * pinned to the right of the button, which is where it used to sit.
 *
 * The chip is the price band from the item cards, small: same dark inset
 * plate, same dim uppercase label, so "what you are spending" looks the same
 * on the shops and on the exchange. */
#istanga .tart:not(.tablaartefact) > tbody > tr:first-child > td {
	padding: 10px 12px 2px;
	font-size: 12px;
	line-height: 17px;
	color: var(--aid-text);
}
#istanga .tart:not(.tablaartefact) > tbody > tr:first-child > td strong {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	line-height: 18px;
	color: var(--aid-aur);
}
/* The rates inside the headline were `style="color:orange;"` -- 2010 orange,
   the one colour on the screen that belongs to no part of this palette. */
#istanga .tart span[style*="orange"] { color: var(--aid-aur) !important; }
#istanga .tart:not(.tablaartefact) > tbody > tr:nth-child(2) > td { padding: 6px 12px 12px; }

#istanga .aid-schimb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
#istanga .aid-schimb-cu {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 7px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.30);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#istanga .aid-schimb-cu img { height: 16px; width: auto; }
#istanga .aid-schimb-cu b {
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
#istanga .aid-schimb input[type="text"] {
	width: 90px !important;
	text-align: center;
}
/* flex-basis:100% is the line break. The margin-top is negative against the
   row's 8px gap, so the result sits under the field rather than a full gap
   below it -- it belongs to that row, it is just not on it. */
#istanga .aid-schimb-rezultat {
	flex-basis: 100%;
	margin: -2px 0 0;
	text-align: center;
	font-size: 11px;
	color: var(--aid-text-slab);
}
#istanga .aid-schimb-rezultat span {
	font-weight: bold;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------- fila Resurse: antetul si tabla de procente
 *
 * „sa pui si titlul altfel, cu iconita de resursa pe care o obtii, mai mare,
 *  ca un artefact: [imagine] Ai nevoie de....?” plus „o tabla ca la Ataca
 *  (procente) sa fie mai usor. acolo tre sa scrii acuma.”
 *
 * Antetul imprumuta anatomia cardului de artefact -- poza pe o placa la
 * stanga, numele deasupra, pretul dedesubt -- fiindca asta e deja limbajul
 * paginii: cele doua file de alaturi, Artefacte si Masini, arata exact asa.
 * Regulile de mai sus pentru `.tart` centreaza si micsoreaza primul rand, deci
 * aici trebuie `!important` ca sa le bata; un selector mai lung n-ar ajuta,
 * fiindcă acelea sunt deja `#istanga .tart:not(...) > tbody > tr > td`. */
#istanga .aid-res-cap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px 10px !important;
	text-align: left;
}
#istanga .aid-res-poza {
	flex: 0 0 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.30);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
}
#istanga .aid-res-poza img { width: 34px; height: 34px; }
#istanga .aid-res-text { min-width: 0; }
#istanga .aid-res-cap strong {
	display: block;
	margin: 0 0 3px !important;
	font-size: 15px !important;
	line-height: 19px !important;
	color: var(--aid-aur) !important;
}
#istanga .aid-res-pret {
	display: block;
	font-size: 12px;
	line-height: 16px;
	color: var(--aid-text);
}
#istanga .aid-res-pret b {
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}
#istanga .aid-res-nota {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-style: italic;
	color: var(--aid-text-slab);
}

/* `order:-1` cu `flex-basis:100%`: tabla sta pe linia ei, DEASUPRA randului cu
   campul si butonul, desi in markup vine dupa chip. In DOM sta inauntrul
   formularului, langa campul pe care il umple -- de-aia nu e mutata acolo si
   in sursa. */
#istanga .aid-res-repede {
	order: -1;
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
	margin-bottom: 2px;
}

#istanga .tablaartefact form {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 8px;
}
#istanga .tablaartefact form input[type="text"] {
	width: 42px !important;
	text-align: center;
}

/* THE STAT ROW.
 *
 * Six or seven `label +N%` pairs at 9px in a straight line. His reference puts
 * them on a band under the description with the zeroes greyed and only the ones
 * that matter picked out, which is exactly the shape the markup already has:
 * a non-zero value gets .textgalben or .textrosu, a zero gets no class at all.
 * So the muting is one selector and needs nothing added to the PHP. */
#istanga .tablaartefact > tbody > tr:nth-child(3) > td {
	padding: 0 10px 10px;
}
/* NOT FLEX. The markup is `<img> &nbsp; <span>+2%</span>` repeated, and the
 * non-breaking space is what binds an icon to its own number. Flex makes every
 * one of those -- each img, each nbsp, each span -- a separate item and
 * distributes them evenly, which puts equal space between an icon and its
 * value and between one pair and the next. The pairs stop reading as pairs.
 *
 * Ordinary inline flow keeps the nbsp doing its job; the separation between
 * pairs is a margin on the icons. */
#istanga .tablaartefact > tbody > tr:nth-child(3) > td > div {
	padding: 6px 10px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.26);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
	font-size: 11px !important;
	line-height: 22px;
	color: var(--aid-text-slab);
}
#istanga .tablaartefact > tbody > tr:nth-child(3) img { vertical-align: middle; }
#istanga .tablaartefact > tbody > tr:nth-child(3) > td > div img { margin: 0 1px 0 12px; }
#istanga .tablaartefact > tbody > tr:nth-child(3) > td > div img:first-child { margin-left: 0; }
/* A value with no class is a zero. Half-lit, so the row reads as "these two
   matter" instead of as fourteen numbers. */
#istanga .tablaartefact > tbody > tr:nth-child(3) span:not([class]) { opacity: 0.45; }
#istanga .tablaartefact .textgalben { color: var(--aid-aur); font-weight: bold; }
#istanga .tablaartefact .textrosu   { color: #f0796a; font-weight: bold; }
/* ========== personaj ========== */
/* ---------------------------- personaj */

/* ==============================================================================
 *  THE TWO CHARACTER SHEETS
 *
 *  personaj.php   -- your own: the paper doll, your wardrobe, your numbers.
 *  personajdetaliat.php -- the same player seen by a spy: no doll, a portrait
 *                          and a blazon, and two columns of everything the
 *                          scouts brought back.
 *
 *  They were written as one screen and then diverged, so they still share every
 *  habit: a 500x395 div sized around a background PNG, five identical stat
 *  tables built with cellspacing="0" and two lines of inline padding, <h5>
 *  headings inheriting css.css's `margin-left: 20px; text-transform: capitalize`
 *  (twenty pixels of indent inside a 150px column, and Romanian title-cased),
 *  quantity badges painted `background: #0F2D0D` -- a bottle green from a
 *  different decade -- and item slots drawn with `border: 1px solid #080`.
 *
 *  WHAT IS NOT TOUCHED, AND WHY
 *
 *  Every coordinate. The box is 500x395 because bgpersonajalianta.png is
 *  500x395; the portrait is at (203,71) because that is where the frame is
 *  painted in it; the doll's four clothing layers are at (175,0), (192,78),
 *  (175,194) and (175,346) because that is where a body is. Nothing in this
 *  file may move any of them, and the classes below exist precisely so that
 *  the numbers live in ONE place where that is obvious, instead of in twelve
 *  style attributes where the next person edits one and wonders why the hat
 *  slid off.
 *
 *  THE ABSOLUTE POSITIONING STAYS, AND IT IS NOT LAZINESS.
 *
 *  On personajdetaliat the two columns are children of the 500x395 box and are
 *  pinned to its top corners -- that is a genuine overlay on artwork and flow
 *  cannot express it. On personaj.php it is stranger and more load-bearing:
 *  those blocks are SIBLINGS of the box, and their containing block is not the
 *  .borderrosu they sit inside (which is position:static) but #istanga, which
 *  main.php declares position:relative. So `top:70px; left:40px` is measured
 *  from the panel, across a scrolling box, onto artwork. Rewriting that as flow
 *  is a different task with a different risk; every offset is copied here
 *  unchanged, to the pixel, and only the paint on top of them is new.
 * ========================================================================== */

/* --------------------------------------------------- which sheet is which
 *
 * Both files open `<div class="borderrosu" >` and both fill it with elements
 * called "the left column" and "the right column" -- at completely different
 * coordinates. One extra class on the frame lets the shared vocabulary below
 * (.aid-fisa, .aid-fisa-cap, .aid-tile, .aid-cant) be genuinely shared while
 * the geometry stays per-sheet.
 *
 * On personajdetaliat that frame was also NEVER CLOSED: the div opened at the
 * top of the body and the browser closed it at </body>. Harmless in a whole
 * document, wrong the moment htmx swaps the fragment into #istanga, where an
 * unclosed div swallows whatever renders next. The port closes it now. */

/* The 500x395 stage. Same pixels as the style attribute it replaces, including
 * the 10px above it and the auto margins that centre it in the 560px frame.
 * position:relative is the important one: it is the containing block for the
 * portrait, the blazon, the two columns and -- on personaj.php -- the four
 * clothing layers, so it must not become anything else. */
#istanga .aid-fisa-cadru {
	position: relative;
	display: block;
	box-sizing: content-box;
	width: 500px;
	height: 395px;
	margin: 10px auto 0;
	background-position: top center;
	background-repeat: no-repeat;
	text-align: center;
}
/* The spy sheet's backdrop is a fixed asset, so it belongs here rather than in
 * the markup. personaj.php's is the player's own body ($file is b or f) and
 * stays an inline background-image for that reason -- a stylesheet cannot know
 * which one to draw.
 *
 * THE PICTURE IS NAMED IN THE THEME, NOT HERE, and the first draft of this
 * block got that wrong: it wrote the PNG's path straight into the declaration
 * below. That is the one thing bin/check-theme.php exists to
 * refuse, and two other blocks in the same sweep refused to do it and said so
 * -- the public-pages batch left top.png and bottom.png in the markup for this
 * reason (":9602"), and the homepage batch refused `content: url(devil22h.png)`
 * for it (":10834"). A path written here also cannot be re-skinned: a theme
 * that repaints the spy sheet would have to ship a second copy of this
 * stylesheet, which is exactly the fork the whole token system exists to avoid.
 *
 * So the picture is a custom property, declared once per theme, the same way
 * the landscape, the headpiece, the minimap frame and the portrait medallion
 * already are (themes/default/tokens.css, "--aid-fundal" and the four under
 * it). This file states WHERE the picture goes; the theme states WHICH picture.
 *
 * Not Theme::asset() -- that resolves inside themes/<name>/imagini/, and this
 * PNG is game art that still lives in the legacy imagini/ tree with the
 * artefacts and the bodies. Asking asset() for a file no theme holds returns
 * the placeholder and logs a note, so routing it that way would have traded a
 * lint failure for a broken picture. The token can name any URL, which is why
 * it is the right half of the theme system for a picture that has not been
 * migrated yet; when it is migrated, one line in one theme file changes. */
#istanga .aid-fisa-cadru-alianta {
	background-image: var(--aid-fisa-fundal-alianta);
}

/* The portrait and the blazon, both pinned into places painted for them. The
 * only thing added is a seat: a thin ring and a drop shadow, so a player's
 * uploaded JPEG and the alliance's icon read as MOUNTED in the frame rather
 * than as two pictures laid on it. */
#istanga .aid-fisa-portret {
	position: absolute;
	top: 71px;
	left: 203px;
	width: 90px;
	text-align: center;
}
#istanga .aid-fisa-portret img {
	display: block;
	margin: 0 auto;
	border-radius: var(--aid-raza);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.65),
		0 0 0 2px rgba(255, 204, 0, 0.28),
		0 2px 6px rgba(0, 0, 0, 0.55);
}
#istanga .aid-fisa-blazon {
	position: absolute;
	top: 17px;
	left: 231px;
	width: 35px;
	text-align: center;
}
#istanga .aid-fisa-blazon img {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
/* "Fara alianta" was a white 10px arial-narrow span inside a <center> inside a
 * 35px box -- three ways of saying "middle" and a font stack nothing else in
 * the game uses. The box already centres; the label only needs to be legible
 * against whatever the artwork puts behind it. */
#istanga .aid-fisa-fara-alianta {
	display: block;
	font-size: 9px;
	font-weight: bold;
	line-height: 11px;
	color: var(--aid-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ------------------------------------------------- the columns, per sheet
 *
 * The text sits on painted artwork in both files, so both get the same shadow:
 * one pixel of black under every glyph. It is the cheapest way to keep a number
 * readable over an image whose colours this stylesheet does not control, and it
 * is why no scrim is drawn behind the columns -- a panel over the art would
 * hide the art, which is the thing the screen is for. */
#istanga .aid-fisa-stanga,
#istanga .aid-fisa-dreapta {
	display: block;
	position: absolute;
	text-align: left;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
/* Spy sheet: inside the box, pinned to its top corners, 150 wide. */
#istanga .aid-fisa-spion .aid-fisa-stanga  { top: 0; left: 0;  width: 150px; }
#istanga .aid-fisa-spion .aid-fisa-dreapta { top: 0; right: 0; width: 150px; }
/* Own sheet: siblings of the box, positioned against #istanga. 170 wide, and
 * the 250px height is the original's -- it is not a clip (overflow is visible)
 * so it only ever mattered as documentation of how much room was expected. */
#istanga .aid-fisa-mea .aid-fisa-stanga  { top: 70px; left: 40px;  width: 170px; height: 250px; }
#istanga .aid-fisa-mea .aid-fisa-dreapta { top: 70px; right: 40px; width: 170px; height: 250px; }

/* -------------------------------------------------------- the stat tables
 *
 * Five of them on the spy sheet, five on your own, all the same object: a label
 * and a number, repeated. They were `cellspacing="0" cellpadding="0"` with two
 * declarations of padding on the table itself, which means every row was 13
 * pixels tall with nothing between them -- the numbers ran together into a
 * block you had to count down rather than read across.
 *
 * The same rhythm the reports and the inbox got: room in the cells, a hairline
 * under each row, the label dim and the value bright. No zebra -- these are
 * two-column facts, not a list of things, and striping a stat sheet makes it
 * look sortable when it is not.
 *
 * `> tbody > tr > td` and not `td`: personaj.php's tables also carry .green
 * (`color:#66cc00; font-size:12px` out of css.css) and the child chain wins
 * that on specificity without an !important. It also stops these rules reaching
 * the two comparison tables NESTED inside the third one, which get them in
 * their own right and would otherwise be styled twice. */
#istanga .aid-fisa {
	width: 100%;
	margin: 0 0 10px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 11px;
}
#istanga .aid-fisa > tbody > tr > td {
	padding: 4px 5px;
	line-height: 15px;
	vertical-align: middle;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.34);
	color: var(--aid-text);
}
#istanga .aid-fisa > tbody > tr:last-child > td { box-shadow: none; }

/* EVERY CELL RULE FROM HERE DOWN WEIGHS THE SAME, AND SOURCE ORDER SETTLES IT.
 *
 * `#istanga .aid-fisa > tbody > tr > td` plus one class or pseudo-class is
 * (1,2,3) whichever of them it is -- :first-child, [colspan], .aid-fisa-cap,
 * .aid-fisa-sub, .aid-fisa-celula all score identically. So a longer selector
 * would not have won the argument and an !important would only have hidden it.
 * They are written from the most general to the most particular instead --
 * label, spanning cell, value, then the three named cells further down -- which
 * is the order they would be read in anyway. Nothing here may be reordered. */

/* The label column reads as a label. */
#istanga .aid-fisa > tbody > tr > td:first-child {
	color: var(--aid-text-stins);
	font-weight: normal;
}
/* A cell that spans the table is not half of a pair -- those are the
 * "Artefacte: 12" summary lines on personaj.php, which are whole sentences and
 * should not be dimmed as though they were column labels. */
#istanga .aid-fisa > tbody > tr > td[colspan] {
	color: var(--aid-text);
}
/* ...and the value reads as the value. Tabular figures so that a column of
 * numbers lines up on its digits, which is the entire point of the column. */
#istanga .aid-fisa > tbody > tr > td:first-child + td {
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	color: var(--aid-text);
}
/* The little icons that stand in for "attack" and "defence" in the first
 * column, and the object icons in the third table. They were `align="left"` on
 * a 15-20px image in a cell with no padding, so they sat on the text baseline
 * and dragged the row's height around. */
#istanga .aid-fisa > tbody > tr > td img {
	display: inline-block;
	vertical-align: middle;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
/* The six bonus percentages. .textgalben is `bold 12px #FF0` from css.css and
 * each of the six also carried `style="font-size:11px"` -- the same override,
 * six times, of a rule three lines away. The class is enough; the colour comes
 * from the theme now so a re-skin can move it. */
#istanga .aid-fisa .textgalben {
	font-size: 11px;
	color: var(--aid-aur);
}

/* -------------------------------------------------------- the two headings
 *
 * A COLUMN HEADING (.aid-fisa-cap) names the four or five numbers under it:
 * "Resurse", "Bonusuri", "Cladiri". Same voice as the reports table's header
 * row -- small gold caps over a hairline, no fill -- because that is the one
 * the owner asked for by name ("imi place mult tabla aceea de la rapoarte, cu
 * headerul fain cu gold") and because in a 150px column a filled bar would be
 * most of the column.
 *
 * NOT var(--aid-titlu-caz). It is `capitalize`, and these are Romanian phrases
 * out of $lang. Fourth time this has come up in this stylesheet.
 *
 * The margin is the real fix on the <h5> ones: css.css sets `margin-left: 20px`
 * on every h5 in the game, written when an h5 was a panel title with a painted
 * bar behind it. Inside a 150px column it indented the heading past its own
 * numbers. */
#istanga h5.aid-fisa-cap {
	margin: 0 0 4px;
	padding: 0 0 3px;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.22);
	font-family: var(--aid-font-titlu);
	font-size: 10px;
	font-weight: bold;
	line-height: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--aid-aur-stins);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
/* personaj.php spells the same heading as a <td colspan> at the top of the
 * table rather than as an h5 above it, so there it is a band and gets the
 * stone plate the reports header wears -- a see-through header with a row of
 * numbers directly under it has nothing to separate the two. */
#istanga .aid-fisa > tbody > tr > td.aid-fisa-cap {
	padding: 5px 6px 4px;
	background: var(--aid-fata-piatra);
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.22);
	font-family: var(--aid-font-titlu);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--aid-aur-stins);
	text-shadow: none;
}
#istanga .aid-fisa-cap strong { font-weight: bold; }

/* A SUB-HEADING (.aid-fisa-sub) is a line INSIDE a table that starts a second
 * group in it -- "Intariri" halfway down the resources, "Personalitate" at the
 * top of the traits. Both were centred cells that spaced themselves with <br>
 * tags, and the first was set in text-transform:capitalize. Same voice, quieter
 * than a heading, with the room the <br> tags were buying. */
#istanga .aid-fisa > tbody > tr > td.aid-fisa-sub {
	padding: 11px 6px 3px;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.14);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--aid-aur-stins);
}

/* A cell that holds nothing but another table is scaffolding (personaj.php
 * nests the two comparison tables inside a third one) and must add nothing to
 * the height of what it holds. Last of the six, because it overrides all of
 * them. */
#istanga .aid-fisa > tbody > tr > td.aid-fisa-celula {
	padding: 0;
	box-shadow: none;
}

/* A SECTION HEADING (.aid-fisa-sectiune) is the other kind entirely: the four
 * bands under the box that say Artefacte, Licori, Haine, Masini. Those name a
 * whole shelf rather than a column of numbers, they run the full 550px, and
 * they are the only thing separating four floods of 30px icons from each other
 * -- so they get the brass plate, the same object as every `td.aid-cap` section
 * title in the game. */
#istanga .aid-fisa-sectiune {
	margin: 0 0 8px;
	padding: 5px 8px;
	border-radius: var(--aid-raza-mare);
	background: var(--aid-fata-alama);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--aid-adancime);
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	line-height: 15px;
	letter-spacing: var(--aid-titlu-spatiere);
	text-transform: none;
	text-align: left;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}

/* ------------------------------------------------------------- the shelves
 *
 * Four wrappers whose whole style attribute was `padding-top:15px` (one of
 * them) or `padding-top:20px` (the other three) -- a difference nobody chose.
 * One value now, plus the clearfix the floats inside have always needed: the
 * tiles are floated and the wrapper is not a block formatting context, so
 * without it the artefacts shelf and the potions shelf overlap whenever the
 * first one wraps to a second row.
 *
 * The `<table><tr><td>` inside each is 2008 scaffolding, and left to itself an
 * auto-width table shrink-wraps -- which is why a full shelf used to pile up in
 * a narrow column down the left instead of using the panel. One declaration
 * makes it behave like the block it should have been. The floats inside it need
 * no clearfix: a table cell is a block formatting context, so it already grows
 * to hold them. The one on the wrapper is for the four shelves themselves. */
#istanga .aid-fisa-raft {
	clear: both;
	width: 100%;
	padding-top: 16px;
}
#istanga .aid-fisa-raft::after {
	content: "";
	display: block;
	clear: both;
}
#istanga .aid-fisa-raft > table {
	width: 100%;
	border-collapse: collapse;
}
#istanga .aid-fisa-raft > table > tbody > tr > td { padding: 0; }

/* ---------------------------------------------------------------- the tiles
 *
 * One object across four shelves and two files: an artefact, a potion, a piece
 * of clothing, a war machine. Three different spellings of it in the markup --
 * padding-left:6px here, `border:1px solid #080` there, a hard-coded green or
 * gold fill on your own wardrobe -- and none of them a plate.
 *
 * A plate is what the icons need: they are 30px PNGs with transparent corners,
 * so with nothing behind them they float on the artwork and a shelf has no
 * grid. The niche is the same one the main screen's artefact shelf uses
 * (--aid-nisa's sunken 30px well, drawn here rather than tiled), so the item a
 * player sees in their panel and the same item on their sheet are the same
 * object.
 *
 * The hover is border and glow, and NOTHING else. "nu trebuie schimbat
 * background la onmouseover. e suficient joaca din bordura si glow." The
 * outline is used rather than a border for the same reason .tart uses one:
 * outlines paint after every descendant, so the icon cannot cover its own
 * ring, and outline-offset:-1px puts it inside the rounded corner. */
#istanga .aid-tile {
	position: relative;
	float: left;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	margin: 0 0 5px 5px;
	padding: 2px;
	border-radius: var(--aid-raza);
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 204, 0, 0.05), rgba(0, 0, 0, 0) 70%),
		rgba(0, 0, 0, 0.38);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.06);
	outline: 1px solid rgba(255, 204, 0, 0.20);
	outline-offset: -1px;
	transition: outline-color 120ms linear, box-shadow 120ms linear;
	font-size: 9px;
	line-height: 0;
	text-align: center;
}
#istanga .aid-tile:hover {
	outline-color: rgba(255, 204, 0, 0.62);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.12),
		0 0 9px rgba(255, 190, 30, 0.20);
}
/* The icon fills the niche. Height only -- the artefacts and potions are square
 * 30px files but the clothing is not, and a forced width squashes a pair of
 * boots. `vspace="2"` in the markup becomes nothing here; the padding is the
 * gap now. */
#istanga .aid-tile > img {
	display: block;
	height: 30px;
	width: auto;
	margin: 0 auto;
	vertical-align: top;
}
/* War machines are drawn larger than an artefact and at their own aspect, so
 * their tile is sized by what is in it. Everything else about it is the same
 * plate -- they belong to the same shelf. */
#istanga .aid-tile-larg {
	width: auto;
	height: auto;
	min-width: 34px;
	min-height: 34px;
}
#istanga .aid-tile-larg > img { height: auto; width: auto; max-width: 100%; }
/* The thirteenth machine starts the second row. That was `clear:left` written
 * into the style attribute by the loop; it is layout, so it survives, as a
 * class the loop can add. */
#istanga .aid-tile-rand { clear: left; }

/* THE LOCKED SLOT KEEPS ITS MEANING AND LOSES ITS PAINT.
 *
 * On your own wardrobe every slot was filled with one of two colours: #060 if
 * you can wear it, #c90 if you cannot (your level is too low, or it is cut for
 * the other body). That is a colour code and the rules say colour codes stay --
 * so it stays, as the state it always was: the gold moves from a flat fill to
 * the ring, and the item itself goes grey and dim, which says "not yours yet"
 * in a way a background never did. The tooltip already gives the reason. */
#istanga .aid-tile-blocat {
	outline-color: rgba(204, 153, 0, 0.55);
}
#istanga .aid-tile-blocat > img {
	opacity: 0.42;
	filter: grayscale(0.65);
}
#istanga .aid-tile-blocat:hover { outline-color: rgba(204, 153, 0, 0.85); }

/* ------------------------------------------------------- the quantity chip
 *
 * "background: #0F2D0D; color:#FFCC00; font-size:8px" and `font:arial`, which
 * is not a valid shorthand and has therefore never applied anything. A dark
 * green rectangle with a corner poking out of the tile: at eight pixels the
 * digits were unreadable, and against the new plate the green read as a
 * rendering fault rather than as a count.
 *
 * A chip: rounded, near-black, ringed in gold, with the number in the game's
 * own yellow at a size a person can actually read. Tabular figures so a 2 and a
 * 11 sit the same way, and pointer-events:none so the badge cannot eat the
 * hover or the tooltip belonging to the icon underneath it. */
#istanga .aid-cant {
	position: absolute;
	right: -3px;
	bottom: -2px;
	min-width: 8px;
	padding: 0 3px;
	border-radius: 7px;
	background: rgba(6, 9, 4, 0.94);
	box-shadow:
		inset 0 0 0 1px rgba(255, 204, 0, 0.45),
		0 1px 2px rgba(0, 0, 0, 0.7);
	font-family: var(--aid-font-cifre);
	font-size: 9px;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	line-height: 13px;
	text-align: center;
	color: var(--aid-aur);
	pointer-events: none;
}

/* ==================================================== personaj.php, the rest
 *
 * Everything below is your own sheet only. Each block keeps the offsets it had;
 * what changes is what is drawn at them.
 */

/* THE WARDROBE. It already carried .tablaartefact, so it already had the gold
 * ring and the hover glow every other card in the game got in the item-cards
 * pass -- and it only kept its size by accident, because the inline
 * `width:175px` beat the class's `calc(100% - 8px)`. With the style attribute
 * gone the numbers have to be said here, and said with enough specificity to
 * win the same argument on purpose (.tablaartefact.aid-fisa-inventar rather
 * than the bare class, so appending order is not what decides it).
 *
 * FOUR ACROSS, AND THAT IS ARITHMETIC RATHER THAN TASTE. The box is 175 wide
 * and a vertical scrollbar takes about 15 of it, so the shelf has ~156 to lay
 * out in. The tile is 34 and its default gutter is 5, which is a pitch of 39
 * and gives three per row -- one fewer than the old 31px slot fitted, on a
 * screen where the wardrobe is the thing you scroll. Three pixels of gutter
 * instead of five brings the pitch to 37 and the four back. */
#istanga .tablaartefact.aid-fisa-inventar {
	display: block;
	position: absolute;
	top: 290px;
	left: 20px;
	width: 175px;
	height: 170px;
	margin: 0;
	padding: 4px 2px 0;
	z-index: 10;
	overflow-x: hidden;
	overflow-y: auto;
	border-radius: var(--aid-raza-panou-interior);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.04), rgba(0, 0, 0, 0) 40%),
		rgba(0, 0, 0, 0.42);
}
#istanga .aid-fisa-inventar .aid-tile { margin: 0 0 4px 3px; }

/* The public profile link, top left of the panel. It was a bare URL printed at
 * 12px green on artwork; the label and the address now read as one line and the
 * address as the thing you copy. */
#istanga .aid-fisa-legatura {
	position: absolute;
	top: 2px;
	left: 10px;
	font-size: 10px;
	color: var(--aid-text-stins);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
#istanga .aid-fisa-legatura a { color: var(--aid-aur); }
#istanga .aid-fisa-legatura strong { font-weight: normal; }

/* The description a spy sees, and the medals under it. 200px against the right
 * edge of the panel, over the artwork, which is why it gets the same shadow the
 * columns get. */
#istanga .aid-fisa-descriere {
	position: absolute;
	top: 206px;
	right: 20px;
	width: 200px;
	height: 270px;
	overflow: hidden;
	text-align: center;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
/* Gold, silver and bronze from the seasons this player has won. Three identical
 * two-cell tables, `align="center"` and nothing else, so the medal and its
 * count sat wherever the default cell padding left them. A row: the medal, then
 * "X n" as a count in the same chip voice as the shelf badges. */
#istanga .aid-fisa-medalie {
	margin: 6px auto 0;
	border-collapse: collapse;
}
#istanga .aid-fisa-medalie td {
	padding: 0 5px;
	vertical-align: middle;
	font-size: 12px;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	color: var(--aid-aur);
}
#istanga .aid-fisa-medalie img {
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

/* The two buttons that save or clear what you are wearing. They were 145px wide
 * inside a 150px box -- one number chosen to fit another, twice, in style
 * attributes. The block is 150 and they fill it, so the pair lines up and a
 * translation that is one word longer cannot break the column. */
#istanga .aid-fisa-actiuni {
	display: block;
	position: absolute;
	top: 400px;
	right: 60px;
	width: 150px;
	height: 50px;
}
#istanga .aid-fisa-actiuni form { margin: 0 0 5px; }
#istanga .aid-fisa-actiuni input[type="submit"] { width: 100%; }

/* The two moderator forms, which only an admin ever sees. Bottom left of the
 * panel, unchanged; they just stop being 12px green on grass. */
#istanga .aid-fisa-moderare {
	position: absolute;
	bottom: 0;
	left: 200px;
}
#istanga .aid-fisa-moderare form { display: inline-block; margin: 0 6px 0 0; }
/* ========== aliante ========== */
/* ---------------------------- aliante
 *
 * A LIST WHOSE ROWS ARE TABLES.
 *
 * aliante.php and alianta.php draw their lists the way nothing else in the game
 * does: one <table class="tabla"> PER RECORD, stacked, with the column names in
 * a table of their own above the pile. Nine tables for eight alliances.
 *
 * That is why the list rules further up did nothing here. The test that decides
 * whether a .tabla is a LIST is `:has(> tbody > tr.aid-cap)` -- does THIS table
 * carry the band that names its columns -- and it is the right test everywhere
 * else, because everywhere else the header and the rows are in one table. Here
 * the header table answers yes and gets the gold caps, and every record table
 * answers no, so the screen showed a 2025 header with 2010 rows welded to the
 * bottom of it: 16px tall, crammed against the left edge, nothing between one
 * alliance and the next.
 *
 * The honest fix is one table, and it is not available from here: both files
 * open and close the <table> INSIDE the for loop, so joining them is a rewrite
 * of the loop rather than a $fixes entry. So the port names the pile instead --
 * `aid-rand-cap` on the header table, `aid-rand` on each record -- and this
 * block makes the pile read as one list.
 *
 * Everything below is the same four decisions the shared list rule makes (7px
 * padding, a hairline under each record, white at 3.5% every other one, gold at
 * 10% on the clickable ones). Only the counting changes: the "rows" are sibling
 * TABLES, so the zebra is :nth-of-type on the table rather than :nth-child on
 * the row. Deliberately a separate block and not merged into the list rule
 * above -- that rule is about tables that contain their own header, this one is
 * about tables that are a row, and the day one of them moves the other should
 * not have to.
 */

/* THE COLUMNS HAVE TO LINE UP ACROSS TABLES, which is the one thing this shape
 * cannot do by itself: `table-layout: auto` sizes every table from its own
 * contents, so eight records with eight different alliance names produced eight
 * different column grids under one header. Both files already declare the same
 * width= on every cell of both the header and the records -- with the fixed
 * algorithm those attributes are finally obeyed instead of being treated as a
 * suggestion, and the stack lines up because it is told to, not because the
 * text happened to be the same length.
 *
 * border-collapse also matters more than it looks: the browser's default 2px
 * border-spacing is drawn INSIDE each table, so a stack of nine of them carried
 * eighteen stray pixels of gap that no rule in this file put there. Collapsed,
 * the records sit on each other and the hairlines are the only thing between
 * them. */
#istanga table.tabla.aid-rand,
#istanga table.tabla.aid-rand-cap {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
}

/* The record's cells: the shared list rule's own numbers, applied to a table
   that cannot qualify for it. `overflow-wrap` is the price of a fixed layout --
   a player name is one unbroken token and a fixed column cannot grow for it, so
   it wraps rather than painting over the column to its right. */
#istanga table.tabla.aid-rand > tbody > tr > td {
	padding: 7px 8px;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	vertical-align: middle;
	overflow-wrap: break-word;
}
/* The last record closes the list; a hairline under it would be a line under
   nothing. `:last-of-type` among the sibling tables, for the same reason the
   zebra counts tables -- there is no last ROW to reach for. */
#istanga table.tabla.aid-rand:last-of-type > tbody > tr > td { box-shadow: none; }

/* THE ZEBRA COUNTS TABLES.
 *
 * `:nth-of-type(even)` on the record tables, and it lands on the same rhythm as
 * `tr:nth-child(even)` does in a normal list: there the header is row 1 and the
 * first data row is row 2, here the header TABLE is table 1 and the first record
 * is table 2. Same stripe on the same alliance, without either file having to
 * know it is being striped.
 *
 * White at 3.5%, not black -- these rows sit on the panel rather than on a
 * plate, and a dark stripe on a dark ground reads as a gap in the list. */
#istanga table.tabla.aid-rand:nth-of-type(even) > tbody > tr > td {
	background: rgba(255, 255, 255, 0.035);
}

/* THE HOVER HAS TO BEAT THE ZEBRA, and this is the one place in the file where
 * that is not automatic. `#istanga tr[data-aid-panou]:hover > td` further up is
 * all a normal list needs, because there the zebra it competes with is written
 * at about the same weight. Here the zebra had to name the table twice
 * (.tabla.aid-rand) and count it (:nth-of-type) to reach a row through two
 * elements, and that out-weighs the shared hover -- so every other alliance
 * stayed grey under the pointer while its neighbours went gold.
 *
 * Same colour, same meaning, stated heavily enough to win. The cursor and the
 * keyboard behaviour still come from the shared rule and from js/aidliste.js:
 * the attribute is on the <tr>, which is where every other list in the game
 * carries it and where the CSS already knows to look. */
#istanga table.tabla.aid-rand > tbody > tr[data-aid-panou]:hover > td {
	background: rgba(255, 204, 0, 0.10);
}

/* The header table gets its hairline back. `table.tabla > tbody > tr.aid-cap >
   td` up in the shared block gives every header band a top highlight and no
   bottom edge, which is right when the first data row is the very next <tr> and
   the fill alone separates them. Across two tables there is a seam there, and
   the reports' gold underline is what closes it. */
#istanga table.tabla.aid-rand-cap > tbody > tr.aid-cap > td {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		inset 0 -1px 0 rgba(255, 226, 178, 0.22);
}

/* The alliance's coat of arms in the list, echoed from the icoane/ folder at
   whatever size the PNG happens to be. Held to the row. */
#istanga table.tabla.aid-rand img { vertical-align: middle; }

/* The pager under the list was a <center> holding << and >>, which is the 1996
   spelling of text-align and works fine -- it just cannot be given a margin,
   and what those two arrows actually needed was to stop sitting on the last
   row of the table. */
#istanga .aid-pagini {
	margin: 12px 0 2px;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
}
#istanga .aid-pagini a {
	padding: 0 6px;
	color: var(--aid-aur);
	text-decoration: none;
}
#istanga .aid-pagini a:hover { color: var(--aid-text-tare, #fff); }


/* ---------------------------------------------------- one alliance, alianta.php
 *
 * THE COAT OF ARMS WAS PINNED TO THE WRONG BOX.
 *
 *     <div style="position:absolute; top:0; left:0;">
 *
 * with nothing positioned between it and the panel, so `top:0; left:0` meant
 * the top-left of the SCREEN's panel, not of this fragment: the alliance's arms
 * were drawn up under the <h1>, six lines away from the name they belong to,
 * and they moved when the panel scrolled. The name below them was centred
 * because with the icon out of the flow there was nothing left for it to sit
 * beside.
 *
 * One plate, arms on the left, name and description beside them -- the
 * arrangement the markup was reaching for and could not reach with the tools it
 * had. Nothing here is positioned.
 *
 * NO GAP ON THE FLEX CONTAINER, and that is not a style preference: an alliance
 * with no icon uploaded renders an EMPTY .aid-alianta-stema, and a gap would
 * indent its name by 12px for a picture that is not there. The spacing is a
 * margin on the image, so it exists only when the image does. */
#istanga .aid-alianta-plac {
	display: flex;
	align-items: center;
	margin: 0 0 12px;
	padding: 10px 14px 10px 11px;
	/* Same radius as .aid-intro, which this plate sits beside on aliante.php --
	   with a fallback, because themes/pergament/ does not define the panel
	   radii and an unresolved var() on border-radius drops to 0 rather than to
	   something sensible. */
	border-radius: var(--aid-raza-panou-interior);
	border-left: 2px solid var(--aid-aur-stins);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.06), rgba(0, 0, 0, 0) 70%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	text-align: left;
}
#istanga .aid-alianta-stema { flex: none; line-height: 0; }
/* The <img> still carries width=60 vspace=5 hspace=5 from 2008. All three are
   presentational hints and lose to any rule at all, which is the only reason
   they can be left in the markup: 52px is the size the plate wants, and the
   margin is the gap the container refuses to provide. The ring is what stops a
   square PNG from looking pasted on. */
#istanga .aid-alianta-stema img {
	width: 52px;
	height: auto;
	margin: 0 12px 0 0;
	border-radius: var(--aid-raza);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 226, 178, 0.18);
}
#istanga .aid-alianta-titlu { flex: 1 1 auto; min-width: 0; }
/* An <h3> straight out of the browser stylesheet: 1.17em, bold, with a margin
   above it that pushed the arms off centre. It is the name of the thing on the
   screen, so it gets the game's title face like every other name. NOT
   --aid-titlu-caz: "Cavalerii de foc" is a Romanian phrase and capitalize turns
   it into "Cavalerii De Foc". Fourth time. */
#istanga .aid-alianta-titlu h3 {
	margin: 0;
	font-family: var(--aid-font-titlu);
	font-size: 15px;
	line-height: 20px;
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	text-transform: none;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
	overflow-wrap: break-word;
}
/* The description is the alliance's own words, and it was `color: #0C0` --
   pure green, on a dark panel, at 11px, which is the hardest green there is to
   read. Same green primarii.php's artefact rows were moved to, so the skin has
   one green and not two.
 *
 * NOT .aid-intro, which was the obvious first thought: that plate is the
 * MASCOT's, and he is the game talking to the player. Putting him beside text
 * a player wrote about his own alliance makes the game look like it endorses
 * it. He introduces the alliance LIST on aliante.php, which is the game
 * talking; this stays the alliance's line. */
#istanga .aid-alianta-desc {
	margin: 4px 0 0;
	font-size: 11px;
	line-height: 16px;
	color: #93d456;
	overflow-wrap: break-word;
}

/* The body of the screen: the stats and the member list. Was a `div.text` with
   padding-left:10px, line-height:130% and font-size:11px in a style attribute;
   the padding is the only one of the three that was doing anything the panel
   was not already doing. */
#istanga .aid-alianta-corp {
	padding: 0 2px;
	font-size: 11px;
	line-height: 18px;
	text-align: left;
}

/* FOUR STATS THAT WERE FOUR SENTENCES.
 *
 * Fondator, Creat, Puncte, Membri -- four lines of running text separated by
 * <br>, with the values in `<span style="color:#fff">`, and then the member
 * list starting on the very next line with nothing to say that one had ended.
 * A plate says it.
 *
 * Two columns, because the four labels are short and the panel is 560px: one
 * column left two thirds of the plate empty and pushed the member list a screen
 * further down. `column-count` rather than a grid on purpose -- the block is
 * one run of inline content broken by <br>, not four elements, so a grid would
 * see a single anonymous item and lay out nothing. Multicol breaks lines, which
 * is exactly what is wanted here and the only thing that works on this markup
 * without the port having to wrap each stat in a tag of its own. */
#istanga .aid-alianta-stat {
	column-count: 2;
	column-gap: 20px;
	margin: 0 0 12px;
	padding: 8px 10px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.22);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
	font-size: 11px;
	line-height: 18px;
	color: var(--aid-text-stins, #97917a);
}
/* The block's last line ends with a <br> like the other three, so there is an
   empty fifth line at the bottom -- invisible in one column, and in two it
   pushes the balance point and leaves a hole. Text nodes do not count for
   :last-child, so this reaches it. */
#istanga .aid-alianta-stat br:last-child { display: none; }
/* The value, against the dim label. The founder's name inside it is an
   `a.alb` and keeps its own colour -- the selector is deliberately not
   `.aid-alianta-val a`, because a link that looks exactly like the text around
   it is a link nobody clicks. */
#istanga .aid-alianta-val {
	color: var(--aid-text-tare, #fff);
	font-variant-numeric: tabular-nums;
}

/* The two leader-only links, above the plate. */
#istanga .aid-alianta-unelte {
	margin: 0 0 8px;
	text-align: right;
	font-size: 11px;
}
/* And the compose-a-letter links under the member list, which were a <center>. */
#istanga .aid-alianta-actiuni {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 226, 178, 0.12);
	text-align: center;
	font-size: 11px;
	line-height: 20px;
}

/* ------------------------------------------- joining one, or founding one
 *
 * The two forms were nested `div.text` with padding-left:20px and then
 * padding-left:30px -- indentation standing in for grouping, which is what you
 * reach for when there is no box to put anything in. Two plates in a column
 * that stops at 420px: a form whose fields are 15 and 200 characters long does
 * not want to be 560px wide, and a text input that runs the full width of the
 * panel reads as though it expects a paragraph. */
#istanga .aid-alianta-forme {
	max-width: 420px;
	margin: 0 auto;
	text-align: left;
	font-size: 12px;
	line-height: 18px;
}
#istanga .aid-alianta-forme form { margin: 0 0 14px; }
/* "Vrei sa intri intr-o alianta" / "Vrei sa faci o alianta" -- the question
   each form answers, and it was a bare <strong> on the line above the box. It
   is a heading, so it is set as one. */
#istanga .aid-alianta-forme strong {
	display: block;
	margin: 0 0 5px;
	font-family: var(--aid-font-titlu);
	font-size: 12px;
	font-weight: bold;
	text-transform: none;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
#istanga .aid-alianta-forma {
	padding: 10px 12px;
	border-radius: var(--aid-raza-mare);
	border-left: 2px solid var(--aid-aur-stins);
	background: rgba(0, 0, 0, 0.22);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
	font-size: 11px;
	line-height: 17px;
	/* `color:#0f0` was in the style attribute -- the same unreadable pure green
	   as the description above, for the same 2008 reason. Same replacement. */
	color: #93d456;
}
#istanga .aid-alianta-forma input[type="text"] { margin: 4px 6px 4px 0; }
/* width:300px; height:90px was the box a 1024px screen wanted in 2008. The
   plate decides the width now, and the player decides the height -- a 200
   character description is three lines for one alliance and eight for another,
   and resize:vertical costs nothing. */
#istanga .aid-alianta-desc-camp {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 90px;
	margin: 5px 0 9px;
	resize: vertical;
}
/* ========== cladiri ========== */
/* ---------------------------- cladiri */

/* ==========================================================================
 *  THE FOURTEEN BUILDINGS
 *
 *  benzinarie, birouri, biserica, cafenea, casaschimb, fabrica, fastfood,
 *  ferma, garaj, hotel, mall, masina, stadion, tv.
 *
 *  One page, copied thirteen times in about 2008 and then drifted. Every one
 *  of them is:
 *
 *    <h1>                          the building's name
 *    <div class="borderrosu">
 *      <table class="tabla">       picture | description
 *      <div class="text">          UPGRADE: what the next level costs, and the
 *                                  button, or the list of buildings you still
 *                                  need before you are allowed to press it
 *      <div class="text">          what it produces now
 *      <div class="text">          what it would produce one level up
 *      <table class="tablaartefact"> downgrade, and what you get back
 *
 *  This is the single biggest repetition in the game, and until now it was
 *  also the least consistent: the same picture cell is written four different
 *  ways (`align="center" height="150" width="150"`, `height="145" width="100"`,
 *  `height="120" width="150" align="center"`, and plain `<td>`), and the level
 *  number is placed by hand per building -- `top:-15px; left:18px` on six of
 *  them, `top:35px; left:0px`, `top:132px; left:90px` on the church, `top:20px;
 *  left:30px` on the factory. Fourteen guesses at where a number should sit on
 *  a picture, none of which survives the picture being resized.
 *
 *  So the port names it once (pass: cladiri) and this names it once more. The
 *  classes are the page read out loud:
 *
 *    .aid-cladire          the two-column head
 *    .aid-cladire-poza     its picture cell
 *    .aid-cladire-plinta   the plate the picture sits on
 *    .aid-cladire-img      the picture
 *    .aid-nivel            the level, as a badge on that plate
 *    .aid-cladire-desc     the description beside it
 *    .aid-urcare           the upgrade card
 *    .aid-urcare-tabla     its three cells: cost | thumbnail | action
 *    .aid-urcare-thumb     the thumbnail
 *    .aid-linii            an indented list of "label: number unit" lines
 *    .aid-cost-nr          the one big number the player is deciding on
 *    .aid-prod             a production plate
 *    .aid-prod-nr          a number inside one
 *    .aid-lipsa            a prerequisite you do not have yet
 *    .aid-scadere          the downgrade footer
 *
 *  Shaped after the two screens he has said he likes: the artefact card (a
 *  picture on a dark plate, the name and text beside it, the numbers on a band
 *  of their own) and the army page (a stack of small plates rather than one
 *  long wall of text).
 * ========================================================================== */


/* ------------------------------------------------------------- the head
 *
 * A `table.tabla` with two cells, which is scaffolding rather than a list --
 * so it gets none of the list treatment, on purpose, and only what it needs to
 * be a row: full width, the picture column fixed, one hairline under the pair
 * to separate the identity of the building from the decisions about it.
 *
 * fabrica.php already had that idea and drew the hairline itself, inline and
 * in `1px dashed #66cc00`. Same divider, one shade the eye does not stop on,
 * and now on all fourteen. */
#istanga .aid-cladire {
	width: calc(100% - 8px);
	margin: 0 4px 12px;
	border-collapse: separate;
	border-spacing: 0;
}
#istanga .aid-cladire > tbody > tr > td {
	padding: 0 0 12px;
	border-bottom: 1px solid rgba(255, 226, 178, 0.12);
	vertical-align: middle;
}
/* The selector is long because the rule above it is: `> tbody > tr > td` beats
   a bare `.aid-cladire-poza` on specificity and would keep its own padding. */
#istanga .aid-cladire > tbody > tr > td.aid-cladire-poza {
	width: 156px;
	padding: 0 14px 12px 0;
	text-align: center;
}

/* THE PICTURE, ON A PLATE -- the same argument as the artefact cards.
 *
 * The building PNGs are 200px art with transparent corners and no ground
 * under them, drawn at anything from 120 to 140 tall depending on which file
 * you opened. Without a plate they float in the cell and the row has no left
 * edge to line up on; with one, every building is the same size and the badge
 * has a corner to be pinned to.
 *
 * `object-fit: contain` is what lets one box hold a tall church and a wide
 * shopping centre without either being squashed -- which is the whole reason
 * the fourteen files were each carrying their own height attribute. */
#istanga .aid-cladire-plinta {
	position: relative;
	display: inline-block;
	width: 136px;
	height: 136px;
	border-radius: var(--aid-raza-panou-interior);
	background:
		radial-gradient(circle at 34% 22%, rgba(255, 226, 178, 0.16), rgba(0, 0, 0, 0) 62%),
		rgba(0, 0, 0, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 226, 178, 0.12);
}
/* The picture is wrapped in `<a href="">` carrying pdeh()/pde() -- the pair
   that swaps the mascot in the parent frame. It is a hover handler wearing a
   link's clothes, and an empty href reloads the page if it is ever clicked, so
   at least stop it looking like something to click. */
#istanga .aid-cladire-plinta > a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	cursor: default;
}
#istanga .aid-cladire-img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 8px;
	object-fit: contain;
}

/* THE LEVEL, AS A BADGE.
 *
 * It was a bare number in `$bmouseover` -- the theme's dark green -- floating
 * somewhere over the artwork on a 25x18 white box (div.nivel in css.css), and
 * on most of the fourteen it was pushed fifteen pixels ABOVE the picture, so
 * on a dark panel it read as a stray digit rather than as the building's
 * level. The most important number on the screen and nothing said what it was.
 *
 * Gold stamp, pinned to the plate's top-left corner and overhanging it, with
 * the word on it. The label is generated rather than markup because the PHP
 * echoes the number alone and there is nothing to wrap; uppercase, which is
 * allowed -- it is `capitalize` that mangles Romanian, not caps. */
#istanga .aid-nivel {
	position: absolute;
	top: -9px;
	left: -9px;
	z-index: 3;
	min-width: 36px;
	padding: 3px 7px 4px;
	border-radius: var(--aid-raza-mare);
	background: linear-gradient(180deg,
		#ffeaad 0%,
		var(--aid-aur) 45%,
		var(--aid-aur-stins) 100%);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.7),
		0 2px 5px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	color: #241a02;
	font-family: var(--aid-font-titlu);
	font-size: 15px;
	line-height: 16px;
	font-weight: bold;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
#istanga .aid-nivel::before {
	content: "NIVEL";
	display: block;
	font-size: 8px;
	line-height: 9px;
	letter-spacing: 0.10em;
	opacity: 0.6;
}

/* THE DESCRIPTION. `#66cc00` at 11px with a 130% leading -- the game's own
   green, at the smallest size in the file, on a dark green panel. Same
   sentence in the body voice, at the size everything else is read at. */
#istanga .aid-cladire-desc {
	padding: 2px 4px;
	color: var(--aid-text);
	font-size: 12px;
	line-height: 18px;
}


/* ---------------------------------------------------------- the upgrade card
 *
 * "UPGRADE / Nivel 8: 12.500 galbeni" beside a thumbnail beside the button --
 * three cells of a `table.green`, which in css.css means nothing but
 * `color:#66cc00; font-size:12px`. The decision the player came to this page
 * to make, and it was the least furnished thing on the screen.
 *
 * A card, like an artefact is a card: fill, inner ring, the reason on the left
 * and the action on the right. */
#istanga .aid-urcare {
	margin: 0 4px 10px;
	padding: 10px 12px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	font-size: 12px;
	color: var(--aid-text);
}
/* AT MAX LEVEL there is no cost, no thumbnail and no button -- the block holds
   one sentence ("ai atins nivelul maxim"), which the port now wraps in
   .aid-nota. An empty card around a single dim line is a box drawn for nothing,
   so in that one state the card is not drawn at all. */
#istanga .aid-urcare:has(> .aid-nota) {
	padding: 2px 12px;
	background: none;
	box-shadow: none;
}
#istanga .aid-urcare > .aid-nota { margin: 0; }

#istanga .aid-urcare-tabla {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--aid-text);
	font-size: 12px;
}
#istanga .aid-urcare-tabla > tbody > tr > td {
	padding: 0;
	vertical-align: middle;
}
/* Cost left, thumbnail in the middle, action right -- structural selectors and
   no new classes on the cells, because the three cells are the same three
   cells on all fourteen pages and they will keep being. */
#istanga .aid-urcare-tabla > tbody > tr > td:nth-child(2) {
	width: 92px;
	text-align: center;
}
#istanga .aid-urcare-tabla > tbody > tr > td:nth-child(3) {
	width: 190px;
	text-align: right;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-slab);
}
#istanga .aid-urcare-tabla form { margin: 0; }

/* The word UPGRADE ($lang[10]) was a `<strong>` with a `<br>` inside it. Same
   small gold cap the artefact card puts over its price, and the `<br>` goes:
   the strong is a block now and does its own line break. */
#istanga .aid-urcare-tabla > tbody > tr > td:first-child > strong {
	display: block;
	margin-bottom: 3px;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
#istanga .aid-urcare-tabla > tbody > tr > td:first-child > strong br,
#istanga .aid-prod > strong br { display: none; }

/* THE COST AND PRODUCTION LINES.
 *
 * `padding-left:40px; line-height:240%` on a div -- a 40px indent that lined
 * up with nothing, and lines nearly two and a half times their own height
 * apart, so two facts occupied the vertical space of five. (fabrica said 30px
 * and tv said 4px, which is how much of a decision it was.)
 *
 * The indent goes entirely: the card's own padding is the left edge now. */
#istanga .aid-linii {
	padding: 0;
	font-size: 12px;
	line-height: 20px;
	color: var(--aid-text);
}
/* Each list ends with a trailing `<br />` that used to buy a blank line under
   itself, and now buys a ragged bottom edge inside a padded card. */
#istanga .aid-linii > br:last-child { display: none; }

/* The number the whole page is about. It was `id='b'` -- the same id three
   times on one page -- plus `color:white; font-size:19px` inline. Gold, and
   tabular figures so a five-digit cost and a six-digit one line up when the
   player upgrades twice in a row. */
#istanga .aid-cost-nr {
	font-size: 20px;
	line-height: 26px;
	font-weight: bold;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}

/* The thumbnail opens the full picture in the `popup()` layer on hover, which
   is worth keeping and worth signalling -- hence the cursor. Same plate as the
   artefact art, one size down. */
#istanga .aid-urcare-thumb {
	display: block;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	margin: 0 auto;
	padding: 4px;
	border-radius: var(--aid-raza-mare);
	object-fit: contain;
	background:
		radial-gradient(circle at 34% 24%, rgba(255, 226, 178, 0.16), rgba(0, 0, 0, 0) 62%),
		rgba(0, 0, 0, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 226, 178, 0.12);
	cursor: help;
}

/* WHEN YOU ARE NOT ALLOWED TO UPGRADE YET, the action cell fills with
 * "ai nevoie de nivelul N la: <i>Ferma, Fabrica, Mall</i>" and the ones you do
 * not have are wrapped in `<span style='color:red'>` from inside a for loop.
 *
 * Red because it is state -- which building is blocking you -- so it keeps a
 * colour and only moves out of the loop. #f0796a is the same red the item
 * cards use for a price you cannot afford: it says the same thing, so it
 * should look the same. Pure red at full saturation on this panel does not. */
#istanga .aid-lipsa {
	color: #f0796a;
	font-weight: bold;
}
#istanga .aid-urcare-tabla i {
	font-style: normal;
	color: var(--aid-text);
}


/* ------------------------------------------------------- the production plates
 *
 * Two blocks -- what it makes now, what it would make one level up -- both
 * `<div class="text">`, both indented 40px, both leading 240%, and nothing to
 * tell them apart but the sentence at the top. Small stat plates instead, the
 * way the army page stacks its facts.
 *
 * The second plate is a projection rather than a fact, and it is only there
 * when an upgrade is still possible. A gold edge down its left side is the
 * whole difference: same plate, marked as the one that has not happened yet.
 * `+` and not a class, because the two divs are adjacent siblings and always
 * will be -- the second is inside the same `if` that draws the upgrade card. */
#istanga .aid-prod {
	margin: 0 4px 8px;
	padding: 8px 12px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.22);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
	font-size: 12px;
	color: var(--aid-text);
}
#istanga .aid-prod + .aid-prod {
	border-left: 2px solid rgba(255, 204, 0, 0.30);
}
#istanga .aid-prod > strong {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
#istanga .aid-prod .aid-linii { line-height: 21px; }
/* `id='d'` and `id='b'` again, white again. The values, in the same gold as the
   cost but at reading size -- the cost is the number being decided on and stays
   the loudest thing in the column. */
#istanga .aid-prod-nr {
	font-weight: bold;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}

/* PLAFONUL CLĂDIRII (18 sept 2026).
 *
 * „nu il mai avem in cladiri.php. el era afisat inainte (cred). oricum,
 *  trebuie sa scriem undeva acolo jos: Nivel maxim cladire: X."
 *
 * E o notă, nu o plăcuță de producție: una singură pe pagină, mereu adevărată,
 * nimic de decis pe baza ei. Deci plata se golește -- fără fund, fără muchie --
 * și rămâne doar linia de text, mai mică și mai stinsă decât cele de deasupra.
 *
 * `border-left: 0` e obligatoriu: e al treilea `.aid-prod` la rând, deci ar
 * prinde muchia de aur a regulii `+` de mai sus, care înseamnă „ce nu s-a
 * întâmplat încă". Aici nu e o proiecție, e plafonul. */
#istanga .aid-prod.aid-nivel-maxim {
	margin-top: -4px;
	padding: 2px 12px 0;
	background: none;
	box-shadow: none;
	border-left: 0;
	font-size: 11px;
	color: var(--aid-text-stins, rgba(255, 226, 178, 0.55));
}
#istanga .aid-prod.aid-nivel-maxim .aid-prod-nr { font-size: 12px; }


/* --------------------------------------------------------- the downgrade bar
 *
 * `<table class='tablaartefact' width="100%">` with three cells: the word
 * DOWNGRADE, what you get back, and the button. It borrowed .tablaartefact
 * because in 2008 that class was "a bordered table", and it has been collecting
 * the item-card treatment ever since -- an 84px picture plate in the first cell
 * with no picture in it, the second cell gold at 15px as if it were a name, the
 * third cell a 190px price band. A footer wearing a card's clothes, and the
 * loudest element on a page whose point is the button above it.
 *
 * `.tablaartefact.aid-scadere` rather than `.aid-scadere` alone: the card rules
 * are `#istanga .tablaartefact > tbody > tr:first-child > td:first-child` and
 * a single class cannot outrank three of those. Two can.
 *
 * No hover at all. It is not a card and there is nothing to light up -- and the
 * rule holds either way: border and glow only, never a background. */
#istanga .tablaartefact.aid-scadere {
	width: calc(100% - 8px);
	margin: 16px 4px 4px;
	outline: 0;
	border-top: 1px solid rgba(255, 226, 178, 0.12);
	border-radius: 0;
	background: none !important;
	box-shadow: none;
}
#istanga .tablaartefact.aid-scadere:hover {
	outline: 0;
	box-shadow: none;
}
#istanga .tablaartefact.aid-scadere > tbody > tr > td,
#istanga .tablaartefact.aid-scadere > tbody > tr:first-child > td:first-child,
#istanga .tablaartefact.aid-scadere > tbody > tr:first-child > td:nth-child(2),
#istanga .tablaartefact.aid-scadere > tbody > tr:first-child > td:nth-child(3) {
	width: auto;
	padding: 9px 8px 4px;
	border-radius: 0;
	background: none;
	box-shadow: none;
	vertical-align: middle;
	text-align: left;
	font-size: 11px !important;
	line-height: 16px;
	color: var(--aid-text-slab) !important;
}
#istanga .tablaartefact.aid-scadere > tbody > tr:first-child > td:nth-child(3) {
	width: 150px;
	text-align: right;
	padding-right: 0;
}
#istanga .tablaartefact.aid-scadere > tbody > tr:first-child > td:first-child {
	width: 1%;
	padding-left: 0;
	white-space: nowrap;
}
#istanga .tablaartefact.aid-scadere > tbody > tr:first-child > td:first-child > strong {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
#istanga .aid-scadere form { margin: 0; }
/* The one button in the game that takes something away. The shared submit
   styling already keeps ordinary buttons quiet -- "nu trebuie sa iasa prea mult
   in evidenta" -- and this one goes a step further onto the stone ramp, because
   green is the colour of the two buttons that COMMIT (ataca, urca) and this is
   the opposite of both. Three custom properties, no new gradient. */
#istanga .aid-scadere input[type="submit"] {
	--aid-btn-sus: #5e5648;
	--aid-btn-mij: #39342c;
	--aid-btn-jos: #1f1c17;
	min-height: 26px;
	padding: 4px 16px;
	font-size: 11px;
}
/* ========== mici ========== */
/* ---------------------------- mici
 *
 * Four small screens that had nothing in common except being small, and that
 * is why they were left for last: statistici (two stat sheets and a referral
 * block), loc (buying a plot of land), ochila (one potion, one sentence) and
 * licitatii (the auction house). Only the last one is a list, and it was
 * already wearing the reports look before this pass began -- so most of what
 * follows is about the things AROUND lists: caption plates, a cost breakdown,
 * a summary bar, and a page that had never been told what theme it was in.
 */


/* ======================================================= statistici, the sheet
 *
 * Two `<table class="tabla">` with a `<center><h2>` floating above each. The
 * port folds the heading into the table as `<td colspan="2" class="aid-cap">`,
 * so the sheet finally has a header instead of standing under one.
 *
 * WHICH IMMEDIATELY MAKES IT A LIST, and it is not one.
 *
 * `:has(> tbody > tr > td.aid-cap)` is the test the shared rule uses to tell a
 * list from the two-column scaffolding half the fragments are built out of --
 * and it is the right test, which is exactly the problem here: a stat sheet
 * with a caption in it answers yes to a question that was asked about lists.
 * Two of the three things that answer buys are wanted: 7px of room and a
 * hairline under each line, which is the whole of "airy". The third is not:
 *
 *   "in jucator.php - scoate acel mouseover cu change background - pe td-uri e
 *    un pic prea mult pt player. nu vede bine informatia"
 *
 * Striping a sheet of numbers moves the ground under the numbers. So `aid-sumar`
 * rides along on the same table and takes the zebra back off. The hover was
 * never at risk: it follows `data-aid-panou`, and nothing here is clickable.
 *
 * THE SELECTOR IS THAT LONG ON PURPOSE. It has to out-specify the zebra rule
 * it is undoing, which scores (1,4,7) -- four classes because of :has(),
 * :nth-child() and :not(), seven type selectors because :has() contributes its
 * own. Adding .aid-sumar to the same shape makes it (1,5,7) and it wins. A
 * short selector here would simply have done nothing, silently. */
#istanga table.tabla.aid-sumar:has(> tbody > tr > td.aid-cap) > tbody > tr:nth-child(even):not(.aid-cap) > td {
	background: none;
}

/* Two sheets stacked need a gap between them; they had one only because the
   <h2> between them carried padding, and the <h2> is gone. */
#istanga table.tabla.aid-sumar {
	border-collapse: collapse;
	margin: 0 0 14px;
}

/* THE LINE READS LEFT TO RIGHT: what it is, then what it is.
 *
 * Everything in a fragment inherits `text-align: center` from #istanga.iframe,
 * which is fine for a caption and wrong for a sheet -- centred labels and
 * centred numbers give you two ragged columns and no column at all. Labels go
 * left, figures go right, and the eye has an edge to run down.
 *
 * `:not([colspan])` is what separates the two shapes in these tables. A row
 * with two cells is a label and a value; a row with one cell spanning both is
 * a sentence (the bonuses line, the garrison line, the experience line), and a
 * sentence is neither, so it is left alone with nothing but the left align. */
#istanga table.tabla.aid-sumar > tbody > tr > td:not(.aid-cap) {
	text-align: left;
}
#istanga table.tabla.aid-sumar > tbody > tr > td:first-child:not([colspan]) {
	width: 50%;
	color: var(--aid-text-slab);
}
/* The label was `<strong>` in 2008 because bold was the only emphasis anyone
   had. It is the quiet half of the line now, so the bold comes off -- dim AND
   bold is a label shouting in a whisper. */
#istanga table.tabla.aid-sumar > tbody > tr > td:first-child:not([colspan]) strong {
	font-weight: normal;
}
/* The value. Tabular figures because half of these are numbers formatted by
   numar() and a column of them that does not line up is a column you read
   twice. (1,4,5) against the left align's (1,3,4), so it wins on its own. */
#istanga table.tabla.aid-sumar > tbody > tr > td:first-child:not([colspan]) + td {
	text-align: right;
	font-weight: bold;
	color: var(--aid-text-tare);
	font-variant-numeric: tabular-nums;
}


/* ------------------------- a section title inside a list keeps its own plate
 *
 * A latent collision, found by putting a `td.aid-cap` section title UNDER a
 * `tr.aid-cap` row of column names for the first time -- which is what
 * licitatii.php now does five times over.
 *
 * The band ends up as the table's second row, the zebra counts rows and paints
 * every even one, and the zebra's selector scores (1,4,7) against the plain
 * `#istanga td.aid-cap` at (1,1,1). So the brass plate lost its fill to a 3.5%
 * white stripe, and a section title turned into a slightly paler ordinary row.
 *
 * The fill is put back at matching specificity rather than with !important:
 * !important is for beating an inline style that cannot be removed, and there
 * is no inline style here -- only two rules of ours disagreeing about which
 * one is more specific. Written for both spellings of the list test, because
 * a table can qualify through either.
 *
 * `[colspan]` IS NOT DECORATION ON THESE SELECTORS -- it is what makes them
 * safe. `.aid-cap` arrived on thirty cells by machine (pass 6b8d swept up
 * every `background: <?php echo $bmouseover; ?>`), and not all thirty are
 * headers: adaugal.php has one on a 34px cell holding a 20px picture, in the
 * MIDDLE of a data row, because that cell happened to paint itself the same
 * colour. A section title always spans its table; that image cell never
 * could. Without the attribute test these two rules would put a brass plate
 * behind every other item's icon on a screen this file does not own. */
#istanga table.tabla:has(> tbody > tr.aid-cap) > tbody > tr:nth-child(even):not(.aid-cap) > td.aid-cap[colspan],
#istanga table.tabla:has(> tbody > tr > td.aid-cap) > tbody > tr:nth-child(even):not(.aid-cap) > td.aid-cap[colspan] {
	background: var(--aid-fata-alama);
}

/* And it aligns with what it introduces. A section title above a row of
   left-aligned column names has no business being centred -- the two bands sit
   one on top of the other and a centred one reads as a different object. Only
   inside a table that HAS a row of column names: a lone `td.aid-cap` on
   armate.php is a caption over the whole box and stays where it is. */
#istanga table.tabla:has(> tbody > tr.aid-cap) > tbody > tr > td.aid-cap[colspan] {
	text-align: left;
}


/* ------------------------------------------------ statistici, the referral box
 *
 * Four hand-picked colours in six lines of markup: an <h3> in #99FF33, the
 * player list loose on the panel, the referral id in `color:orange`, and the
 * explanation in a div at `font-size:10px; color:#9F3`. Nothing wrong with any
 * of them in 2008 and nothing right about them now -- they are four different
 * answers to "how do I make this stand out" on a screen that has one.
 *
 * The mascot plate's shape without the mascot: he introduces a SCREEN, and
 * this is a block at the bottom of one. Same gutter of gold, same fill, so the
 * two read as the same kind of object. */
#istanga .aid-recomanda {
	margin: 4px 0 0;
	padding: 10px 14px 12px 12px;
	border-radius: var(--aid-raza-panou-interior);
	border-left: 2px solid var(--aid-aur-stins);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	text-align: left;
}
/* `#istanga h1, h2, h3 { text-transform: none }` further up already saves this
   from `h3 { text-transform: capitalize }` in css.css. The size is the change:
   14px gold was competing with the page's own <h1>, and this is a block inside
   the page, not another page. */
#istanga .aid-recomanda-titlu {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--aid-font-titlu);
	font-size: 12px;
	letter-spacing: var(--aid-titlu-spatiere);
	color: var(--aid-aur);
	text-shadow: var(--aid-titlu-umbra);
}
/* The people you brought into the game -- a count, then a run of names each
   with its level in brackets. It is a sentence of links, so it is set as one
   and the links are the only bright thing in it. */
#istanga .aid-recomanda-lista {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 19px;
	color: var(--aid-text-slab);
}
#istanga .aid-recomanda-lista a { color: var(--aid-text); text-decoration: none; }
#istanga .aid-recomanda-lista a:hover { color: var(--aid-aur); }
/* The id itself: the one thing on this plate a player is meant to copy out and
   send to somebody, so it is set as a value -- monospace, gold, on its own
   small ground -- rather than as orange words in a sentence. */
#istanga .aid-recomanda-cod {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 19px;
	color: var(--aid-text);
}
#istanga .aid-recomanda-id {
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.16);
	font-family: var(--aid-font-cifre);
	font-weight: bold;
	color: var(--aid-aur);
}
/* .aid-nota already handles the small print under it -- see "A line explaining
   how to read the thing under it" further up -- except that it centres itself,
   and inside this plate everything else is left. */
#istanga .aid-recomanda .aid-nota { margin: 0; text-align: left; }


/* ================================================== loc, the plot of land
 *
 * Two tables, and telling them apart is the whole job.
 *
 * `<table class="tabla"><tr>` at the top is LAYOUT -- a photograph of a field
 * in one cell, the address and the asking price in the other. One row, two
 * cells, nothing to read across, so it gets no caption and therefore none of
 * the list treatment. That is the shared rule working as designed and there is
 * no CSS for it here; this comment is the record that it was looked at.
 *
 * `<table align="center" class="tablaalb">` further down IS a list: the price
 * of the new plot, the moving tax, what you get back for the old one, and the
 * total. It already had a bold centred title row, so the port turns that row
 * into the .aid-cap plate -- but .tablaalb is not .tabla, so every list rule
 * in this file looks straight past it. ("`.tablaalb` is loc.php only, and it
 * is not a list either" -- that note was written before this row was named,
 * and it was right until then.) Hence an arm of its own, with the same four
 * decisions the shared rule makes: room, a hairline, a right-aligned figure,
 * and nothing else. */
#istanga table.tablaalb {
	width: 100%;
	max-width: 420px;
	margin: 0 auto 12px;
	border-collapse: collapse;
	text-align: left;
}
/* `.tablaalb, .tablaalb td { width: 100% }` in css.css is not a typo I can
   read any charitable way -- three cells each asked to be the full width of
   the table. Undone here, and the widths decided per column below.

   `:not(.aid-cap)` on every one of these: the caption band sets its own
   padding, font and colour at (1,1,1), and a rule at (1,1,4) that forgot to
   exclude it would quietly win all three. */
#istanga table.tablaalb > tbody > tr > td:not(.aid-cap) {
	width: auto;
	padding: 7px 10px;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	font-size: 12px;
	vertical-align: middle;
	color: var(--aid-text-slab);
}
/* The figure. `align="right"` is already on two of the three rows in the
   markup and missing from the fourth, which is how these things go; the column
   is right-aligned here so it does not depend on that. */
#istanga table.tablaalb > tbody > tr > td:nth-child(2):not(.aid-cap) {
	text-align: right;
	white-space: nowrap;
	font-weight: bold;
	color: var(--aid-text-tare);
	font-variant-numeric: tabular-nums;
}
/* The currency word after each figure -- "bani" repeated four times. It is a
   unit, not a value: as narrow as it can be and as quiet. */
#istanga table.tablaalb > tbody > tr > td:nth-child(3):not(.aid-cap) {
	width: 1%;
	padding-left: 4px;
	white-space: nowrap;
	font-size: 11px;
}
/* THE TOTAL, which was announced by thirty-two full stops.
 *
 * `................................` in a cell of its own is 2008 for "draw a
 * rule here", and it is not a bad instinct -- the total IS separated from the
 * three lines that make it. The port deletes the dots and names the row; the
 * rule is a real one, above the row rather than in a row of its own, and the
 * figure goes gold because it is the number the page exists to tell you.
 *
 * `width: auto` beats the `width="400"` attribute still on that cell, which
 * would otherwise stretch the column past the two above it. */
#istanga table.tablaalb > tbody > tr.aid-loc-total > td {
	padding-top: 11px;
	box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.22);
	color: var(--aid-text);
}
#istanga table.tablaalb > tbody > tr.aid-loc-total > td + td {
	width: auto;
	text-align: right;
	font-size: 13px;
	color: var(--aid-aur);
}

/* The picture of the plot: a 2008 JPEG carrying `align="center"` (which does
   nothing to an image the cell has already centred) and `border="0"` (which
   turns off a border no stylesheet has drawn since about 2005). It is a
   photograph on a dark panel, so it gets what every other picture in this
   interface gets -- a corner, a thin dark ring so it ends somewhere, and a
   shadow so it sits ON the panel instead of being printed on it. */
#istanga .aid-loc-teren {
	max-width: 100%;
	height: auto;
	border-radius: var(--aid-raza-panou-interior);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.10),
		0 2px 6px rgba(0, 0, 0, 0.5);
}
/* The asking price was `color:white` inline, inside an <h2> that is already
   gold -- so the one figure the screen is about was the only thing on it NOT
   in the game's colour. Gold, and tabular, for the same reason as everywhere
   else: it is a number you compare against the one in your own purse. */
#istanga .aid-loc-pret {
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}


/* ================================================== ochila, the seer's potion
 *
 * "Lacrima lui Ochila" shows you the next army walking towards you. Three
 * sentences, one picture, and until now the only fragment in the game whose
 * <body> was
 *
 *     bgcolor="#285428" style="background:#285428; color:#fff;
 *              text-align:center; overflow:hidden"
 *
 * rather than `class="iframe"`. Everything followed from that. The shell
 * copies the body's class onto #istanga after each swap, so with no class
 * there was no `.iframe`, no panel padding, no scrolling box, and none of the
 * rules that make a fragment look like it belongs -- the page painted itself a
 * flat mid-90s green and sat in the middle of the frame looking like a
 * different website. `overflow:hidden` on top meant anything taller than the
 * panel simply lost its bottom edge with no scrollbar to say so.
 *
 * The port gives it `class="iframe"` and drops the green. What is left here is
 * the card itself: the potion, one line of explanation, and the army. */
#istanga table.aid-ochila {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	border-collapse: collapse;
}
/* Deliberately NOT `table.tabla`: it is a 1x1 wrapper, and the day somebody
   adds an .aid-cap to it by reflex the list rules should still not reach it. */
#istanga .aid-ochila-fata {
	padding: 6px 12px 14px;
	text-align: center;
}
/* The potion was followed by four <br> in a row, which is what you write when
   you have no margins. 72px because it is the subject of the page -- big
   enough to be the picture rather than an icon, small enough that the sentence
   under it is still the first thing you read. */
#istanga .aid-ochila-licoare {
	width: 72px;
	height: auto;
	margin: 8px 0 12px;
	filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.6));
}
/* The blurb. It was a <strong> because bold was the only emphasis available;
   it is the only prose on the page, so it does not need emphasis at all -- it
   needs a measure. Held to 380px so it breaks into two comfortable lines
   instead of one long one across the whole panel. */
#istanga .aid-ochila-vorba {
	max-width: 380px;
	margin: 0 auto 12px;
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text);
}
#istanga .aid-ochila-vorba strong { font-weight: normal; }

/* THE ANSWER, WHICH IS THE ONLY REASON ANYONE DRINKS THIS.
 *
 * Who is coming, with how many priests and how many devils. It was a second
 * 1x1 table whose entire styling was `border:1px solid #99FF33` -- a 2008 lime
 * rectangle around one line of text. The port makes it a div (a single cell is
 * not a table) and it becomes a plate: the labels dim, the three values that
 * matter bright, so the line can be read at a glance instead of parsed. */
#istanga .aid-ochila-armata {
	max-width: 380px;
	margin: 0 auto;
	padding: 10px 14px;
	border-radius: var(--aid-raza-panou-interior);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.30);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.12);
	font-size: 12px;
	line-height: 20px;
	color: var(--aid-text-slab);
}
/* The attacker's name is a link to his sheet, and the two counts are the
   numbers you are about to plan around. */
#istanga .aid-ochila-armata a {
	font-weight: bold;
	color: var(--aid-text-tare);
	text-decoration: none;
}
#istanga .aid-ochila-armata a:hover { color: var(--aid-aur); }
#istanga .aid-ochila-armata strong {
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}


/* ==================================================== licitatii, the market
 *
 * The one page that came out of the earlier passes already right: five
 * `table.tabla`, each with a `tr.aid-cap` naming its columns, every lot row
 * carrying data-aid-panou so it gets the pointer and the gold hover. NOTHING
 * BELOW TOUCHES THE LISTS. Everything here is the furniture around them.
 */

/* THE BOX STOPS BEING THE SCROLLER.
 *
 * `<div class="borderrosu" style="display:block; overflow:auto;
 *  height:380px;">` is the fixed-height pattern the whole sweep has been
 * undoing -- a number typed in 2008 for a frame that was 510 tall. It also
 * meant the summary bar (your balance, and the link that puts a lot up for
 * sale) scrolled away the moment you looked past the first six lots.
 *
 * "mai bine ar fi sa fie scrollable sub titlu (Rapoarte - spre ex.) ca in alte
 *  fragmente" -- so the port drops the inline height and makes the box the
 * .aid-cadru of the pair, with the lots in an .aid-cutie underneath the bar.
 * The class stays on the element as well, because .borderrosu is what draws
 * the frame; only its behaviour changes.
 *
 * And its own `overflow: auto` from css.css has to go with the height. Two
 * scrolling boxes nested one inside the other is how you get a list that
 * scrolls, stops, and then scrolls the box it is in. */
#istanga .borderrosu.aid-cadru { overflow: hidden; }

/* ------------------------------------------------------- the summary bar
 *
 * Was `<div class="textalb" style="height:60px;">` holding a 24h devil floated
 * right by `hspace="5" align="right"`, a loose sentence, and two floated divs.
 * 60px is somebody's guess at how tall three lines of Romanian are, and when
 * the guess is wrong -- a long name, a wide balance -- the floats fall out of
 * the bottom of the box and land on the first table.
 *
 * A grid instead, which has no opinion about how tall anything is: the devil
 * down the left across both rows, the game's line about the market along the
 * top, your balance bottom-left and the action bottom-right. Nothing floats,
 * so nothing can escape. Same plate as the other two blocks in this file, so
 * the market's header reads as the same kind of object as the seer's card. */
#istanga .aid-lic-antet {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"drac vorba   vorba"
		"drac bani    actiuni";
	align-items: center;
	column-gap: 12px;
	row-gap: 6px;
	margin: 0 0 10px;
	padding: 9px 12px;
	border-radius: var(--aid-raza-panou-interior);
	border-left: 2px solid var(--aid-aur-stins);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	text-align: left;
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text);
}
/* He is served from an absolute http:// address on the live host and so may
   not be there at all in development -- `max-width` and `height: auto` mean a
   missing picture costs a small gap and never the row's height. */
#istanga .aid-lic-drac {
	grid-area: drac;
	width: 48px;
	max-width: 48px;
	height: auto;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
#istanga .aid-lic-vorba {
	grid-area: vorba;
	margin: 0;
	color: var(--aid-text-slab);
}
#istanga .aid-lic-bani { grid-area: bani; }
#istanga .aid-lic-actiuni {
	grid-area: actiuni;
	text-align: right;
	white-space: nowrap;
}
/* Your takings, and what they are worth -- the only figure in the bar. */
#istanga .aid-lic-bani strong {
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}
/* The two links are both ACTIONS -- collect what your sales earned, put a new
   lot up -- and were plain blue-ish anchors in a paragraph. Small chips, so
   they read as things you press without pretending to be the green submit
   buttons, which in this game mean "commit" and are reserved for two. */
#istanga .aid-lic-bani a,
#istanga .aid-lic-actiuni a {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 9px;
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins);
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: var(--aid-aur);
}
#istanga .aid-lic-bani a:hover,
#istanga .aid-lic-actiuni a:hover {
	color: var(--aid-text-tare);
	box-shadow: inset 0 0 0 1px var(--aid-aur), 0 0 8px rgba(255, 204, 0, 0.25);
}

/* ------------------------------------------------------------ the three columns
 *
 * `color:#99FF33` on the name, `font-size:13px; color:#FF0` on the quantity,
 * and the price in whatever colour the span happened to be. Three columns,
 * three 2008 greens and yellows, and no hierarchy at all: the loudest cell was
 * the one you care about least.
 *
 * The order is what a shopper actually asks. WHAT is it -- the brightest, the
 * thing being scanned. HOW MANY are on offer -- context, so it recedes. WHAT
 * DOES IT COST -- gold, because it is the answer, and because gold is what
 * every other figure in this interface uses for money.
 *
 * No padding declared here on purpose: the shared list rule's 7px 8px already
 * holds the price off the right edge, which is what the three `&nbsp;` the
 * port removed were for. */
#istanga .aid-lic-nume {
	text-align: left;
	color: var(--aid-text);
}
#istanga .aid-lic-cate {
	text-align: center;
	color: var(--aid-text-slab);
	font-variant-numeric: tabular-nums;
}
#istanga .aid-lic-pret {
	text-align: right;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}
/* THE RED IS STATE AND STAYS RED. "mentinem codurile de culori".
 *
 * The page marks a lot red while it is younger than $limitatarg minutes -- it
 * is on the board but not yet yours to take. That is information, not
 * decoration, so the only thing that changes is the shade: `red` is #FF0000,
 * and pure red on a near-black green panel is a colour you squint at. Same
 * meaning, a red that survives the background -- exactly the move made for the
 * green row in primarii further up. */
#istanga .aid-lic-proaspat { color: #ff6a58; }
/* ========== jucator ========== */
/* ---------------------------- jucator */

/* ==============================================================================
 *  THE SCREEN THE ATTACK DECISION IS MADE ON
 *
 *  jucator.php -- somebody else's town, seen from outside. It is the
 *  most-visited decision screen in the game: you arrive from the map, from the
 *  ranking, from a report, from the chat, and you leave it either having
 *  pressed ATACA or having decided not to.
 *
 *  ataca.php is its second half -- the same house, the same name, the same
 *  garrison, then the form that says how many draci and how many preoti go.
 *  The two were written as one screen and copy-pasted apart, and the port gives
 *  them the same class vocabulary so they stop drifting: everything below
 *  applies to both, and where only one of them has a thing it is said so.
 *
 *  WHAT WAS THERE
 *
 *  Everything the decision needs, and no shape at all. A two-cell table; a
 *  house picture with a 25x18 WHITE BOX pinned at `top:109px; left:120px`
 *  holding the level (139,90 on ataca.php -- the same badge, nudged by eye,
 *  twice); five facts as `label: <strong>value</strong><br>` in one grey; the
 *  garrison, which is the number the whole page exists to show, set at 14px in
 *  the middle of a sentence; and at the bottom two `width:50%` floats, the last
 *  five attacks on one side and the ATACA button on the other, of unequal
 *  height and with nothing containing them.
 *
 *  WHAT IT IS NOW
 *
 *  Four plates and a hierarchy. The house sits on one and the level is a gold
 *  badge in its corner -- positioned against the PICTURE, so it stays right
 *  whatever size the artwork is cut at, which the two pixel offsets had already
 *  stopped being. The facts become a sheet where the labels stay dim and the
 *  values come up white. The garrison becomes the biggest thing on the screen,
 *  because it is what the player is actually reading. And the two floats become
 *  a flex row: equal height, a real gap, and one column each on a phone.
 *
 *  Nothing here changes what the page says or which numbers it shows.
 * ========================================================================== */


/* -------------------------------------------------------------- the head
 *
 * `<table class="tabla" align="center">` with two `width="50%"` cells: the
 * house on the left, the name and the facts on the right. It is scaffolding,
 * not a list -- no .aid-cap anywhere in it, so the list rules at the top of
 * this file correctly leave it alone (see "the old lists get the rebuilt lists'
 * rhythm"). What it needs is the room a 2010 layout table never had.
 *
 * The second row's `colspan="2"` cell picks up the same padding, which is what
 * puts the garrison and the two columns in line with the sheet above them. */
#istanga .aid-jucator {
	width: 100%;
	margin: 0 0 4px;
	border-collapse: separate;
	border-spacing: 0;
}
#istanga .aid-jucator > tbody > tr > td {
	width: 50%;
	padding: 10px 12px;
	vertical-align: top;
}
#istanga .aid-jucator > tbody > tr > td[colspan="2"] {
	width: auto;
	padding-top: 4px;
}

/* The name. css.css sets every h2 to 13px gold with `text-transform:
 * capitalize`, and jucator.php's player branch has carried
 * `style="text-transform:none"` inline ever since somebody noticed what
 * capitalize does to a Romanian nickname. The institution branch and the whole
 * of ataca.php never got it, so "Statul" and a two-word player name were
 * title-cased on one screen and not on the other -- the port gives both the
 * class, and this is what it does.
 *
 * Two points bigger than the rest of the sheet, because it is the answer to
 * "whose town is this". */
#istanga .aid-jucator h2,
#istanga .aid-j-nume {
	margin: 0 0 6px;
	padding: 0;
	font-size: 15px;
	line-height: 20px;
	text-transform: none;
	color: var(--aid-titlu-culoare, var(--aid-aur));
	text-shadow: var(--aid-titlu-umbra, 0 1px 2px rgba(0, 0, 0, 0.9));
}


/* ------------------------------------------------------- the house, on a plate
 *
 * `.aid-j-casa` is the left column; `.aid-j-poza` is the picture and NOTHING
 * ELSE, and that distinction is the point of the markup change. The old
 * `position:relative` box held the picture, the badge AND the land-price
 * caption, so there was no element whose edges were the picture's edges -- and
 * the only way to put a badge on the corner of the house was to measure it,
 * which is exactly what `top:109px; left:120px` was.
 *
 * `line-height: 0` on the plate: an <img> is an inline box and sits on the
 * text baseline, which leaves four or five pixels of descender space under it.
 * Inside a padded plate that reads as a plate that is crooked. */
#istanga .aid-j-casa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
}
#istanga .aid-j-poza {
	position: relative;
	display: inline-block;
	max-width: 100%;
	padding: 6px;
	line-height: 0;
	border-radius: var(--aid-raza-panou-interior);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
/* The artwork is 350x292 and the panel is not always 560 wide any more. */
#istanga .aid-j-poza img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--aid-raza, 2px);
}

/* THE LEVEL BADGE.
 *
 * It was `position:absolute; top:109px; left:120px; width:25px; height:18px;
 * background:#fff; color:#090` -- a white sticker with green digits, whose two
 * offsets were measured against a picture that has since been re-cut. On
 * ataca.php the same badge was measured again, to 139,90, without the colour.
 * Neither number means anything now.
 *
 * So it is pinned to `.aid-j-poza` instead of to the page: bottom-right of the
 * picture, whatever the picture's size, on both screens. A pill rather than a
 * rectangle, gold rather than white -- gold is the game's own emphasis colour
 * and this is a number worth emphasising; a white sticker on a landscape reads
 * as a label somebody stuck on, which is what it was.
 *
 * `min-width` and not `width`: level 3 and level 12 are both real. The old 25px
 * clipped the second one.
 *
 * The <strong> around the digits is the original markup and stays: the badge is
 * a number and it should be bold whether or not this rule loads. */
#istanga .aid-j-nivel {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	display: block;
	box-sizing: border-box;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--aid-aur, #fc0) 0%, var(--aid-aur-stins, #c69e0c) 100%);
	box-shadow:
		0 1px 3px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
	font-size: 12px;
	line-height: 20px;
	font-weight: bold;
	text-align: center;
	color: #1a1400;
	text-shadow: none;
	cursor: default;
}
#istanga .aid-j-nivel strong { font-weight: bold; }

/* "Valoare teren: 28.950.000 bani" -- what the ground under that house is
 * worth, and the second number in the attack sum. It was a <span> whose PHP
 * opened with a literal `<br>`, which is a caption written by somebody who had
 * no way to say "put this under the picture". This says it.
 *
 * The <b> is the price; the label around it stays dim, the same division as on
 * the facts sheet below. */
#istanga .aid-j-teren {
	display: block;
	max-width: 100%;
	font-size: 11px;
	line-height: 15px;
	text-align: center;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-j-teren b {
	color: var(--aid-text, #e6e0c8);
	font-weight: bold;
	white-space: nowrap;
}


/* ------------------------------------------------------------- the facts sheet
 *
 * Profesie, Harta, Loc in clasament, In joc din, Vezi profil. Five lines of
 * `label: <strong>value</strong><br>` inside `div.textalb`, which css.css sets
 * to #bcbcbc -- so the label and the value were the same grey and the eye had
 * to read the whole line to find the number in it.
 *
 * The labels were already right; the fix is that the VALUES were not bright.
 * One rule, no markup moved: every <strong> in the sheet comes up to white.
 * That is the whole difference between a paragraph and a sheet you scan. */
#istanga .aid-j-fisa {
	padding: 0;
	font-size: 12px;
	line-height: 19px;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-j-fisa strong {
	font-weight: bold;
	color: var(--aid-text-tare, #fff);
}
/* The map coordinates are a link (a.rev) and the profile is a.alb; css.css
   already makes both white and gold-on-hover, and they are values, so they read
   as values. Nothing to add -- this is only here so the next person does not
   add it. */

/* The portrait, floated right of the name. scrieimaginejucator() emits
 * `<img height="90" width="">` -- an empty width attribute, which browsers
 * ignore, so the picture is 90 tall and whatever wide. The float is the layout
 * and stays; what was missing was any space between it and the text, so the
 * facts ran up against the chin.
 *
 * The medallion ring is the same one the character panel wears, at the same
 * radius, so a portrait looks like a portrait wherever it appears. */
#istanga .aid-j-portret {
	float: right;
	margin: 0 0 6px 10px;
	line-height: 0;
}
#istanga .aid-j-portret img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--aid-raza-panou-interior);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
}

/* The player's own description, truncated at 47 characters on jucator.php and
 * 300 on ataca.php, and centred in a <center> on both. Centring a fragment of a
 * sentence that ends in "..." is the one thing that makes it read as broken
 * rather than as cut short; left-aligned in its own measure it reads as a
 * quotation, which is what it is.
 *
 * Not escaped here and it must not be: `rezervatii`.`descriere` is cleaned on
 * the way IN by src/Support/Text.php, and escaping it again at the sink is how
 * a player ends up seeing `&amp;lt;` where they typed `<`. */
#istanga .aid-j-descriere {
	clear: right;
	margin: 8px 0 0;
	padding: 7px 10px;
	border-left: 2px solid var(--aid-aur-stins, #c69e0c);
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	font-size: 11px;
	line-height: 16px;
	font-style: italic;
	text-align: left;
	color: var(--aid-text-stins, #97917a);
}

/* "Ai 3 perne / Arunca una in Cineva :)" -- the one playful thing on the page,
   and it only appears when you are carrying pillows. Its own small plate so it
   is clearly an aside and not one of the facts. */
#istanga .aid-j-perne {
	clear: right;
	margin: 8px 0 0;
	padding: 6px 8px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(255, 226, 178, 0.05);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-j-perne img { vertical-align: middle; }

/* JUCĂTOR PROTEJAT DE FLACĂRA VIOLET.
 *
 * The one line on this page that changes what the page is FOR: the attack
 * button is not coming, and this says why. So it is not a footnote in the
 * facts column -- it is a plate, with the potion's own bottle at 40px beside
 * it, in the violet the flame is named after rather than the page's gold, so
 * that the eye lands on it before it lands on anything else.
 *
 * Three lines inside, in falling weight: what (bold), which potion (a link to
 * its page, because "which flame" is a real question -- there are four), and
 * until when. `min-width: 0` on the text column for the same reason the podium
 * needed it: the countdown is unbreakable and would otherwise set the width. */
#istanga .aid-j-scut {
	display: flex;
	gap: 10px;
	align-items: center;
	clear: right;
	margin: 10px 0 0;
	padding: 8px 10px;
	border: 1px solid rgba(168, 130, 255, 0.42);
	border-left-width: 3px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(112, 66, 190, 0.16);
	text-align: left;
}
#istanga .aid-j-scut-poza {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	/* the bottles are drawn on a dark plate; a soft violet glow seats it */
	filter: drop-shadow(0 0 6px rgba(168, 130, 255, 0.55));
}
#istanga .aid-j-scut-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-j-scut-text b { color: #d9c6ff; font-size: 12px; }
#istanga .aid-j-scut-nume a { color: #c0a6ff; text-decoration: none; }
#istanga .aid-j-scut-nume a:hover { text-decoration: underline; }
#istanga .aid-j-scut-pana b { font-size: 11px; color: #c0a6ff; }

/* THE POTION FLAG.
 *
 * A 30px bottle that appears when the viewer is holding the potion that reveals
 * a player's full character sheet, linking to personajdetaliat.php. It was
 * `position:absolute; top:70px; left:270px; z-index:9999` -- and .borderrosu is
 * position:static, so those coordinates never resolved against the fragment at
 * all. They resolved against #istanga, which main.php declares relative. In the
 * frameset that landed just right of the portrait; in a scrolling panel it
 * lands wherever the panel happens to be, at a z-index high enough to sit over
 * the topbar.
 *
 * It is a flag, so it floats: top-right of the fragment, above the sheet, out
 * of the way of everything and still the first thing in the corner of the eye.
 * No z-index at all now -- nothing overlaps it. */
#istanga .aid-j-licoare {
	float: right;
	margin: 0 2px 4px 8px;
	line-height: 0;
}
#istanga .aid-j-licoare img {
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}


/* ========================================== THE NUMBER THE DECISION IS MADE ON
 *
 * The garrison. `$lang[15]` is the draci icon (a 21px SVG, not a word) and the
 * count follows it; then "(Acasa)", meaning these are the ones at home rather
 * than out on a raid. All of it was one running line at 14px -- icon, number
 * and note in the same size and colour as the sentence above them, ended with a
 * <br>.
 *
 * A player opens this screen for that number. It decides whether the attack is
 * worth sending and how much to send, and everything else on the page is
 * context for it. So it is the biggest thing here: 26px, gold, with the icon
 * scaled up to match and the "(Acasa)" left small and dim beside it.
 *
 * Gold rather than the old white on purpose, and it is the only value on the
 * page that gets it -- white is what an ordinary value looks like on the sheet
 * above, so gold can only mean "this one". */
#istanga .aid-j-garnizoana {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 6px;
	line-height: 1;
}
#istanga .aid-j-icoana {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
/* Beats the `height=21` attribute on the <img> $lang[15] builds. A presentation
   attribute loses to any rule, which is what makes this legal without
   !important -- and the language file stays the one place the icon is named. */
#istanga .aid-j-icoana img {
	display: block;
	width: auto;
	height: 26px;
}
#istanga .aid-j-draci {
	font-size: 26px;
	line-height: 1;
	font-weight: bold;
	color: var(--aid-aur, #fc0);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
	/* The digits are grouped ("12.400"); tabular figures stop the number
	   jittering sideways when the panel re-renders it. */
	font-variant-numeric: tabular-nums;
}
#istanga .aid-j-draci strong { font-weight: bold; }
#istanga .aid-j-paziti {
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-stins, #97917a);
}

/* The travel time -- "Distanta (ore:min:sec): 01:12:30". The second number the
   decision needs, and the one that says whether the target is worth the trip.
   It was a white span in a run of text; a line of its own, with the clock in
   the monospaced face so the colons line up between visits. */
#istanga .aid-j-drum {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-j-timp {
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-size: 13px;
	font-weight: bold;
	color: var(--aid-text-tare, #fff);
}


/* ============================================================ the bottom half
 *
 * Two `width:50%` blocks, one floated left and one floated right, with nothing
 * containing them: the last five attacks against this player on one side, the
 * attack limits and the ATACA button on the other. Floats of equal width and
 * unequal height, so the shorter column ended level with the top of the taller
 * one and half the cell was empty.
 *
 * A flex row instead. Equal height, a real gap, and -- the thing floats could
 * never do -- one column each below 560px instead of two columns 130px wide.
 *
 * `min-width: 0` on the children is not decoration: a flex item's default
 * minimum is its content, and the history table has a 155px column in it, so
 * without this the row refuses to narrow and the panel grows a horizontal
 * scrollbar instead. */
#istanga .aid-j-jos {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 6px 0 0;
}
#istanga .aid-j-istoric,
#istanga .aid-j-actiune {
	flex: 1 1 240px;
	min-width: 0;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: var(--aid-raza-panou-interior);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
}

/* The history column's own text: the caption, and the two legend lines under
   the table -- red means the defender lost, green means an artefact dropped.
   Those colours are STATE and live inside $lang[750] and $lang[751]; nothing
   here touches them. This only makes the legend read as a legend. */
#istanga .aid-j-istoric {
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-stins, #97917a);
}

/* "Ultimele 5 atacuri" is a bare <strong> above the table -- the only heading
   in the fragment that is not an h-anything. It is a column caption, so it is
   set like one: the same small gold uppercase as .aid-cap, which is what the
   table under it already wears. */
#istanga .aid-j-istoric > strong {
	display: block;
	margin: 0 0 6px;
	font-family: var(--aid-font-titlu, Verdana, Arial, sans-serif);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--aid-aur, #fc0);
}
/* The table itself already carries `tr.aid-cap`, so it is a LIST as far as this
   stylesheet is concerned and it gets the reports look -- gold header, airy
   rows, hairlines, zebra -- from the rules above. All it needs here is to stop
   being `align="center"` at whatever width its content wants. */
#istanga .aid-j-istoric > table.tabla {
	width: 100%;
	margin: 0;
}

/* THE CALL TO ACTION.
 *
 * The right column is refusals, counters and the button, in that order,
 * depending on what the game thinks of the attack. Whatever it holds, it holds
 * ONE element -- the <center> the fragment has always used -- so making the
 * column a flex column centres its content against the history table beside it
 * however tall that grows. The <center>'s own contents stay in normal flow;
 * some of the branches echo loose text and <br>, and a flex container would
 * have made each of those a column of its own. */
#istanga .aid-j-actiune {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text, #e6e0c8);
}

/* The two counters -- "Atacurile tale asupra lui in ultimele 48 de ore: 2/6"
 * and the same the other way round. Both were an echo, a <strong> and two <br>,
 * which is a paragraph written without one.
 *
 * $lang[1020] and $lang[1029] already contain a <strong> of their own (the
 * words "Atacurile tale"), so the ratio is the LAST <strong> in the line and
 * not the only one -- hence `:last-child` rather than a bare descendant
 * selector, which would have raised the label to white as well and left nothing
 * for the number to be brighter than. */
#istanga .aid-j-limita {
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-j-limita strong { font-weight: bold; }
#istanga .aid-j-limita > strong:last-child {
	display: inline-block;
	margin-left: 3px;
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-size: 13px;
	color: var(--aid-text-tare, #fff);
}

/* The button is `.atac`, which is drawn green further up this file ("the two
 * that were pictures, now buttons") because Laurentiu asked for it: "unda
 * verde, subconstient". Nothing here re-draws it. What it needs on THIS screen
 * is room around it -- it is the last thing in the column and it was sitting
 * flush against the counter above it -- and to stop being 147px wide on a
 * phone, which is what the branch this replaced hard-coded.
 *
 * The form is the only element between the column and the button and it had the
 * browser's default 1em bottom margin, which is where the extra gap under the
 * button came from. */
#istanga .aid-j-actiune form { margin: 6px 0 0; }
#istanga .aid-j-actiune input[type="submit"].atac { min-width: 150px; }


/* ---------------------------------------------------------------- narrow
 *
 * Below 560px the two head cells stop being 50% of anything and stack: the
 * house, then the name and the facts under it. A table cell cannot wrap, so the
 * table stops being a table -- which is safe here precisely because it never
 * was one: two cells side by side is a layout, and this is the layout said in
 * the one place a phone can hear it.
 *
 * The bottom row needs nothing: .aid-j-jos wraps on its own at the 240px
 * flex-basis above. */
@media (max-width: 560px) {
	#istanga .aid-jucator,
	#istanga .aid-jucator > tbody,
	#istanga .aid-jucator > tbody > tr,
	#istanga .aid-jucator > tbody > tr > td {
		display: block;
		width: auto;
	}
	#istanga .aid-jucator > tbody > tr > td { padding: 8px 4px; }
	#istanga .aid-j-portret { margin-left: 8px; }
	#istanga .aid-j-draci { font-size: 22px; }
	#istanga .aid-j-icoana img { height: 22px; }
}
/* ========== liste ========== */
/* ---------------------------- liste
 *
 * Twelve screens went through this pass -- stats.php, the seven moderation
 * pages and their nav strip, and the three little bold-header lists (jamutiti,
 * jbanati, lista_facturi) -- and eleven of them needed no rule written here at
 * all. That is the point of the pass rather than a shortcut through it: every
 * one of those tables is a LIST, and the list look has existed since the
 * reports table got it. What they were missing was the sentence that says so.
 *
 *     a table.tabla that contains a tr.aid-cap is a list
 *
 * Put the row of column names in the markup and the 7px padding, the hairline
 * under each row, the 3.5% zebra and the gold caps all arrive from rules
 * already in this file. Nothing needed duplicating, and nothing needed a
 * per-page selector.
 *
 * The two things below are the genuine remainder: a nav strip, which is not a
 * list and has nowhere else to live, and one cell on stats.php that spans the
 * table without being a section title.
 *
 * WHAT DELIBERATELY DID NOT GET THE LIST LOOK. mod_info.php has no list -- one
 * player's figures echoed as "Draci: 12<br>" -- and mod_mod.php and mod_tot.php
 * have a broadcast FORM in their table.tabla, label beside input, with the send
 * button in a colspan cell. Those three keep 2010's spacing on purpose. A bare
 * .tabla gets none of the list rules, and giving a layout table an .aid-cap to
 * borrow the look would rule a box with one cell in it and put a brass plate
 * behind a submit button.
 * ========================================================================== */


/* ----------------------------------------- the moderation strip, meniumoderare
 *
 * Included by all seven mod_* screens, and until now two centred divs with a
 * hand-drawn `border-bottom:1px solid #777` each -- a grey that belongs to no
 * theme -- holding a run of links glued together with literal " | ".
 *
 * The pipes are 1998's answer to "put a gap between two things". A flex row
 * with a gap is this one's, and whitespace between flex items generates no box,
 * so the markup can put one link per line and the strip still reads as tabs.
 *
 * And once they are tabs they can say which one you are on, which the old strip
 * could not: it is an include shared by seven pages, so nothing in the markup
 * knew. basename(SCRIPT_NAME) does -- the same spelling src/Http/AccessGate.php
 * uses for the same question -- and hx-boost fetches the real URL, so the
 * running script really is the screen on show. */
#istanga .aid-mod-echipa {
	margin: 0 0 8px;
	padding: 0 0 8px;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
	text-align: center;
	font-size: 11px;
	line-height: 18px;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-mod-echipa a {
	color: var(--aid-aur-stins, #c69e0c);
	text-decoration: none;
}
#istanga .aid-mod-echipa a:hover { color: var(--aid-aur, #fc0); }

/* The tab rail. The hairline is the rail's own, drawn on the container, and the
   tabs sit ON it rather than above it -- so no padding under them. */
#istanga .aid-mod-meniu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	margin: 0 0 12px;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.22);
}
/* Same type as a row of column names -- 10px, bold, tracked, gold-stins on the
   theme's stone -- because that is what a tab is: a label for what is under it.
   Rounded at the top two corners only, which is what makes it read as a tab
   and not as a button that happens to be in a row.

   `uppercase`, never var(--aid-titlu-caz): that variable is `capitalize` and
   would turn "Toti moderatorii" into "Toti Moderatorii". Romanian does not
   title-case -- fourth time this has come up in this file. */
#istanga .aid-mod-meniu a {
	padding: 5px 10px;
	border-radius: var(--aid-raza, 2px) var(--aid-raza, 2px) 0 0;
	background: var(--aid-fata-piatra);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	font-family: var(--aid-font-titlu);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--aid-aur-stins, #c69e0c);
}
#istanga .aid-mod-meniu a:hover { color: var(--aid-aur, #fc0); }
/* The current screen. Brighter plate, full gold, and a gold edge along the
   bottom of the tab -- drawn INSIDE the tab as an inset shadow so it lands on
   the rail's own hairline and reads as the tab breaking through it. */
#istanga .aid-mod-meniu a.aid-mod-acum {
	background: var(--aid-fata-alama);
	color: var(--aid-titlu-culoare, #fc0);
	text-shadow: var(--aid-titlu-umbra);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		inset 0 -2px 0 var(--aid-aur, #fc0);
}

/* The box the seven screens put their content in. It was
 * `<div style="width:100%; margin:auto; position:relative;" align="center">`,
 * and only `position:relative` was doing anything -- a block div is already
 * 100% wide and `margin:auto` on a full-width block is a no-op.
 *
 * `align="center"` WAS doing something, and it was the problem: it centres
 * every descendant, so the cells of the lists below would read down the middle
 * under a header that tr.aid-cap aligns left. It goes, and with it the heading
 * moves to where every other <h1> in the game already sits. That is why the fix
 * is applied to all seven screens including the three with no list on them --
 * the tabs are one object, and the title must not jump as you move along it. */
#istanga .aid-mod-corp { position: relative; }


/* ------------------------------------------------ stats.php's full-width cells
 *
 * Two cells on the stat sheet span all three columns: the players who caught a
 * chest in the last 24h, and the footer rule with the link to jbanati. A third
 * is built inside a PHP string when any magic element was found, and carries
 * the row of element icons.
 *
 * They are content, not headings, so they must NOT be .aid-cap. That class on a
 * <td colspan> means "section title" and would draw a brass plate across a run
 * of player names -- announcing a new section where the page only means "this
 * one is wide". One declaration is the whole of what they need, and it is here
 * rather than left as align="center" because that attribute is what the sweep
 * exists to remove. */
#istanga .aid-stat-lat { text-align: center; }
/* ========== ghid ========== */
/* ---------------------------- ghid */

/* ==========================================================================
 *  THE HELP SET, THE TWO LEGAL TEXTS, THE THREE CONTEST PAGES AND THE TWO
 *  ALLIANCE PAGES.
 *
 *  Thirteen fragments, and two completely different jobs.
 *
 *  The eight prose pages -- ghid, instructiuni, destiut, frecvent,
 *  infoatacuri, regulament + incregulament, termeni -- are the only screens in
 *  the game where a player READS rather than scans. Everything else in
 *  aidcadru.css is tuned for density: 11 and 12px, 140% leading, rows 16 to
 *  24px tall, because a list of forty attacks is something you look things up
 *  in. Nine hundred words of Romanian set that way is a grey slab, and it is
 *  the first thing a new player is handed.
 *
 *  So this block goes the other way on purpose, and it is the only block in
 *  the file that does: a measure of 66 characters instead of 95, 22px of
 *  leading instead of 17, real space between paragraphs, and slightly LESS
 *  contrast rather than more. That last one looks backwards written down and
 *  is not: #e6e0c8 on near-black is about 14:1, which is fine for a number you
 *  glance at and glaring for a column you follow down a page. Long text on a
 *  dark panel wants the edge taken off it.
 *
 *  The five contest/alliance pages are here for the opposite reason -- they
 *  are in this batch because all five had broken div nesting, not because they
 *  look alike -- and they get the game's ordinary vocabulary: the brass plate
 *  for a section title, the reports rhythm where something really is a list,
 *  and a ring rather than a 1px border on anything selectable.
 * ========================================================================== */


/* -------------------------------------------- the ink, before anything else
 *
 * `div.borderrosu { color: #66cc00 }` in css.css -- the game's old green, from
 * when the panel was a green wash. Every one of these thirteen fragments was
 * overruling it with a style attribute (`color:#bbb`, `color:#fff`,
 * `color:#eee` on div.text, `color:#000` on termeni), and taking those
 * attributes out is what puts the green BACK unless something says otherwise.
 * These five wrappers are that something: they are the elements the attributes
 * were on, and they carry the theme's ink instead of a colour picked in 2008.
 *
 * Everything below inherits from one of them, so this is also the only place
 * in the batch that has to know the green exists. */
#istanga .aid-ajutor,
#istanga .aid-regulament,
#istanga .aid-concurs,
#istanga .aid-alianta,
#istanga .aid-simbol-grila { color: var(--aid-text); }


/* ------------------------------------------------------- the reading block
 *
 * .aid-proza is the paragraph column. Two scopes, written out rather than
 * merged: the help pages live inside #istanga and need to beat
 * `#istanga .aid-intro p` when the two are nested (ghid puts the whole tale on
 * the mascot's plate); termeni.php is a standalone public page with no
 * #istanga at all, and .aid-legal is the second scope it needs. Nothing else
 * in this stylesheet reaches outside #istanga, which is why this is spelled
 * out at every selector below instead of hidden in a shared prefix.
 *
 * 66ch and not a pixel width: the measure that matters is characters per line,
 * and .borderrosu is 560px on the desktop and less than that the day the panel
 * moves. ch tracks the font; a pixel number would have to be re-guessed.
 *
 * color-mix rather than a second ink token, because both themes set --aid-text
 * to the same #e6e0c8 and a hardcoded softer value would silently stop
 * following a theme that changed it. Mixing toward transparent keeps the
 * relationship: whatever the ink becomes, prose is 88% of it. */
#istanga .aid-proza,
.aid-legal .aid-proza {
	max-width: 66ch;
	font-size: 13px;
	line-height: 22px;
	color: color-mix(in srgb, var(--aid-text) 88%, transparent);
	text-align: left;
}
/* The paragraphs the port now builds out of `<br><br>`. 14px between them --
   the same air the list rows got, spent on the thing lists do not have. */
#istanga .aid-proza p,
.aid-legal .aid-proza p {
	margin: 0 0 14px;
	font-size: inherit;
	line-height: inherit;
}
#istanga .aid-proza p:last-child,
.aid-legal .aid-proza p:last-child { margin-bottom: 0; }
/* An empty <p> is what a string ending in <br><br> would leave behind. The
   port strips the trailing run, so this only catches a $lang that is entirely
   empty -- but an empty paragraph 14px tall in the middle of a page is exactly
   the kind of thing nobody notices for two years. */
#istanga .aid-proza p:empty,
.aid-legal .aid-proza p:empty { display: none; }

/* A PARAGRAPH THAT STARTS WITH A <strong> IS A HEADING WITH ITS TEXT ATTACHED.
 *
 * That is not a guess about markup, it is how all four of these texts are
 * written. frecvent asks a question in <strong> and answers it under a single
 * <br>; incregulament and termeni number their sections `<p><strong>SS4 -
 * Comportament</strong></p>`; instructiuni puts its two green subheads in
 * `<span><strong>` at the top of the paragraph they introduce. One rule reads
 * all three, and it reads them by ASKING THE QUESTION -- "does this paragraph
 * begin with bold?" -- rather than by giving four hundred paragraphs a class
 * they would have to be given again the next time the text is edited.
 *
 * :first-child and not `strong` alone, and the difference is load-bearing:
 * SS1's body says "voie cu doar <strong>un cont pe joc</strong>, pe fiecare
 * server", which is emphasis inside a sentence and must stay emphasis. It is
 * not the paragraph's first child, so it is not touched. The `~ strong` half
 * catches the second half of the two headings that are split across two
 * elements (`<strong>SS8.1 - Sanctiuni</strong> <strong>pentru mai multe
 * conturi</strong>`), which would otherwise go half gold.
 *
 * :not(:first-child) rather than a second rule putting the first paragraph
 * back to zero: frecvent.php OPENS with a bold question, so the paragraph that
 * needs no space above it is exactly the one this rule would otherwise catch,
 * and :has() outranks :first-child on specificity. Excluding it in the same
 * selector is the version that does not need to be argued with. */
#istanga .aid-proza p:not(:first-child):has(> strong:first-child),
#istanga .aid-proza p:not(:first-child):has(> span:first-child),
.aid-legal .aid-proza p:not(:first-child):has(> strong:first-child),
.aid-legal .aid-proza p:not(:first-child):has(> span:first-child) { margin-top: 24px; }

#istanga .aid-proza p > strong:first-child,
#istanga .aid-proza p > strong:first-child ~ strong,
.aid-legal .aid-proza p > strong:first-child,
.aid-legal .aid-proza p > strong:first-child ~ strong {
	font-family: var(--aid-font-titlu);
	font-size: 13px;
	letter-spacing: var(--aid-titlu-spatiere);
	/* NOT var(--aid-titlu-caz) -- "Cum gasesc un jucator dupa nume?" is a
	   Romanian sentence and capitalize would set it as an English book title.
	   Fourth time this has been written down in this file. */
	text-transform: none;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
/* The green subheads in instructiuni and the tale in ghid keep their green --
   it is the game's own voice and it has been that colour since 2008, and the
   colour is in a style attribute inside romana.php that this file has no
   business overruling. What they get here is the WEIGHT of a heading, which is
   what they were missing: they were 12px bold like everything around them. */
#istanga .aid-proza p > span:first-child strong,
.aid-legal .aid-proza p > span:first-child strong {
	font-family: var(--aid-font-titlu);
	font-size: 13.5px;
	letter-spacing: 0.02em;
}

/* destiut.php is eight tips that each begin with "- ". Left as they are, the
   dash sits in the text column and the second line of a tip starts under it,
   so nothing marks where one tip ends. A hanging indent puts the dash in the
   margin and the sentence in a column -- a real bulleted list, made out of the
   text that is already there. */
#istanga .aid-proza-puncte p {
	padding-left: 14px;
	text-indent: -14px;
}

/* Links inside prose. .rev and .alb are already gold and white from css.css;
   what they lack in a wall of text is any mark at all until you hover one, and
   a link you cannot see is not a link. An underline offset far enough not to
   cut the descenders of a Romanian t-comma or s-comma. */
#istanga .aid-proza a,
.aid-legal .aid-proza a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
#istanga .aid-proza a:hover,
.aid-legal .aid-proza a:hover { text-decoration-color: currentColor; }


/* ------------------------------------------------- headings inside the prose
 *
 * .aid-proza-cap is a section title: "povestea", "Citeste (!)",
 * "Contacteaza-ne", "Alege un simbol", "Castigatorii de azi". It is NOT the
 * brass plate -- td.aid-cap is a band across a table and this is a heading over
 * a block of text, and a filled bar over a paragraph reads as a table header
 * that lost its table.
 *
 * The gold rule down its left is deliberately the same gesture as .aid-intro's
 * left gutter, and for the same reason: both mean "this line is the label of
 * what is under it". Two ornaments in the batch, one idea.
 *
 * The `h2:not([class])` half catches the headings already written into the two
 * legal texts -- termeni.php opens with a bare `<h2>Cine suntem</h2>` -- which
 * would otherwise be the browser's 2em default, larger than the document's own
 * title. :not([class]) so it cannot reach .aid-proza-titlu, which is also an h2
 * and wants to stay bigger. */
#istanga .aid-proza-cap,
.aid-legal .aid-proza-cap,
#istanga .aid-proza h2:not([class]),
.aid-legal .aid-proza h2:not([class]),
#istanga .aid-proza h3:not([class]),
.aid-legal .aid-proza h3:not([class]) {
	margin: 22px 0 10px;
	padding: 1px 0 1px 10px;
	border-left: 2px solid var(--aid-aur-stins);
	font-family: var(--aid-font-titlu);
	font-size: 13px;
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	text-transform: none;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
#istanga .aid-ajutor > .aid-proza-cap:first-child { margin-top: 0; }

/* The document title of the two legal texts. It was an <h1> inside a fragment
   that already had one, rendered at the browser's 2em default -- bigger than
   the title of the page it sat in. It is the document's name, so it stays
   larger than a section, and it gets the rule under it that says the sections
   below belong to it. */
#istanga .aid-proza-titlu,
.aid-legal .aid-proza-titlu {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 226, 178, 0.18);
	font-family: var(--aid-font-titlu);
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-transform: none;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}

/* The way back to the hub. It was `<a class="alb">-> Ajutor</a>` inside a
   <center>, which is a link typeset as a sentence fragment. The arrow moves
   into CSS and turns round: it points back, because that is where it goes. */
#istanga .aid-proza-inapoi {
	display: inline-block;
	margin-top: 20px;
	padding: 5px 12px 5px 10px;
	border: 1px solid rgba(255, 226, 178, 0.20);
	border-radius: var(--aid-raza-mare);
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-proza-inapoi::before { content: "\2190\00a0"; }
#istanga .aid-proza-inapoi:hover {
	border-color: var(--aid-aur-stins);
	color: var(--aid-titlu-culoare);
}


/* ------------------------------------------- the mascot's plate, made longer
 *
 * .aid-intro was written for one to four lines, and ghid.php puts the whole
 * origin tale on it -- three paragraphs, because that page IS its opening
 * paragraph and there is nothing else on it to introduce. The plate keeps its
 * shape; the type inside it stops being a caption.
 *
 * min-width: 0 on the text side is the flexbox one that always has to be said:
 * a flex item will not shrink below its content's intrinsic width, so without
 * it a long unbroken URL in a $lang string widens the plate past the panel. */
#istanga .aid-intro > .aid-proza {
	flex: 1 1 auto;
	min-width: 0;
}
#istanga .aid-intro-lung { padding: 14px 16px 14px 13px; }
#istanga .aid-intro-lung .aid-proza p {
	font-size: 12.5px;
	line-height: 20px;
	margin-bottom: 12px;
}


/* ------------------------------------------------- ghid.php is a HUB, not a
 *                                                    paragraph of links
 *
 * Five <a> separated by <br> inside a <center>: a list of destinations wearing
 * the costume of a sentence. Nothing said where one entry ended, and the one
 * that leaves the game looked exactly like the four that do not.
 *
 * A stack of full-width plates instead. Each one is a target you can hit, the
 * gold rule on the left grows on hover so the row you are on is unambiguous,
 * and the two that open a new tab are marked with the arrow that has meant
 * that since about 1998. NO BACKGROUND CHANGE ON HOVER -- "nu schimba
 * backgroundul la hover", asked for twice and true here as much as on the
 * artefact cards: the border and the rule do the work. */
#istanga .aid-meniu-ajutor {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
	max-width: 420px;
}
#istanga .aid-meniu-link {
	display: block;
	padding: 9px 12px 9px 14px;
	border: 1px solid rgba(255, 226, 178, 0.14);
	border-left: 3px solid var(--aid-aur-stins);
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.22);
	font-family: var(--aid-font-titlu);
	font-size: 12.5px;
	font-weight: bold;
	text-transform: none;
	text-decoration: none;
	color: var(--aid-text);
	transition: border-color 120ms linear, color 120ms linear;
}
#istanga .aid-meniu-link:hover {
	border-color: rgba(255, 226, 178, 0.30);
	border-left-color: var(--aid-aur);
	color: var(--aid-titlu-culoare);
}
/* The two that leave. Dimmer, and they say so before they are clicked rather
   than by opening a tab the player did not ask for. */
#istanga .aid-meniu-extern {
	border-left-color: rgba(255, 226, 178, 0.22);
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-meniu-extern::after {
	content: "\00a0\2197";
	opacity: 0.7;
}


/* ------------------------------------------- the attack-limit table, and the
 *                                              two tables that are really boxes
 *
 * infoatacuri.php lists level against attack limit for eighty levels: two
 * numeric columns and a header, which is a LIST, and it was marked
 * `class="tablaartefact"` -- the shop CARD with the gold ring that brightens on
 * hover. Eighty cards, one number wide each. As `table.tabla` with a
 * `tr.aid-cap` it gets the reports look for free from the rule further up this
 * file; all it needs here is to stop being 560px wide, because two columns of
 * two-digit numbers stretched across the panel is a table you read with a
 * ruler.
 *
 * tabular-nums so the eighty rows line up on the units digit. It is the one
 * thing a column of numbers always wants and the one thing nobody sets. */
#istanga .aid-limite {
	width: auto;
	min-width: 260px;
	max-width: 340px;
	margin: 18px auto 0;
}
#istanga .aid-limite td,
/* the header row's own rule sets text-align: left at a higher specificity than
   a plain `.aid-limite td`, so it has to be named to be centred with the
   numbers it labels */
#istanga .aid-limite tr.aid-cap > td {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* incregulament.php and termeni.php both put their whole text in one cell of a
   one-cell table -- a box drawn with a table, which is what 2008 did before a
   div could have a border. The table stays (removing it would mean re-indenting
   two thousand words of legal text for no gain the reader can see); it just
   stops being 560px of nothing and stops being treated as a data table.

   The measure goes on the TABLE and not only on the cell: max-width on a <td>
   is a hint the table layout algorithm may ignore, and a legal text that
   silently ran the full 560px would be exactly the bug this block exists to
   fix. On the table it is honoured. */
#istanga .aid-proza-tabla,
.aid-legal .aid-proza-tabla {
	width: 100%;
	max-width: 500px;
	border-collapse: collapse;
}
#istanga .aid-proza-tabla > tbody > tr > td,
.aid-legal .aid-proza-tabla > tbody > tr > td { padding: 0; }

/* The rules page. .borderrosu is 560px and centred; the text inside it now
   holds its own measure, so all this does is give the column its air back --
   the cell had `line-height:150%` and no padding at all, so the first word of
   every section touched the frame. */
#istanga .aid-regulament { padding: 10px 14px; }
/* Blocul de contact de sub regulament. Al doilea scop, `.aid-legal`, fiindcă de
   pe 20 septembrie 2026 `termeni.php` include același fragment în loc să țină o
   a doua copie a lui -- iar pagina aceea n-are #istanga. */
#istanga .aid-contact,
.aid-legal .aid-contact {
	margin-top: 10px;
	font-size: 12px;
	line-height: 20px;
	color: var(--aid-text-stins, #97917a);
}
/* „Ultima actualizare: …" -- o notă de subsol într-un text legal, nu o frază. */
#istanga .aid-proza-slab,
.aid-legal .aid-proza-slab {
	margin-top: 24px;
	font-size: 11px;
	color: var(--aid-text-stins, #97917a);
}


/* ================================================ termeni.php, the one page
 *                                                  outside #istanga
 *
 * It is opened with target="_blank" from the footer, from the registration
 * form and from index.php -- a public legal document, read as often on a phone
 * as on a desktop, and until now it had no <head>, no <link> and no viewport:
 * two thousand words of Times New Roman, black on white, at whatever width the
 * window happened to be. Its single style attribute was `color:#000`, the only
 * black text anywhere in the game, and it was there because there was no
 * stylesheet to make it anything else.
 *
 * The port gives it a document; this gives it the game's palette. It cannot
 * borrow the rest of aidcadru.css because every selector in the file is scoped
 * to #istanga and this page has no #istanga -- and must not fake one, because
 * that id carries the panel's own layout, its overflow and its padding band.
 * So .aid-legal is a second scope, written once, for one page, and the prose
 * rules above name it explicitly rather than being loosened to reach it.
 *
 * The theme tokens ARE loaded here (the port links tokensUrl in the head), so
 * the colours below are the same variables the panel uses and follow a theme
 * change like everything else. */
body.aid-pagina-legal {
	margin: 0;
	padding: 0;
	background: var(--aid-piatra, #14140f);
	font-family: var(--aid-font, Verdana, Arial, Helvetica, sans-serif);
	color: var(--aid-text, #e6e0c8);
	-webkit-text-size-adjust: 100%;
}
/* 620px and not the window: this page has been full-bleed since it was written,
   which on a 1920px monitor is a 260-character line. A little wider than the
   panel's 66ch because a legal text is read once straight through and then
   searched, and both want a bit more room than a help page does. */
.aid-legal {
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 28px 22px 60px;
}
.aid-legal .aid-proza-cap { font-size: 15px; }
.aid-legal .aid-proza-titlu { font-size: 19px; }
.aid-legal a { color: var(--aid-aur, #ffcc00); }
/* This page's own table has no panel around it, so the 500px cap above would
   leave a 120px gutter inside a 620px column for no reason. */
.aid-legal .aid-proza-tabla { max-width: none; }


/* ==========================================================================
 *  THE THREE CONTEST PAGES
 *
 *  concursa is the daily draw, concursalist its three prize lists,
 *  concursnorocoslist the lucky-draw archive. They are in this batch because
 *  all three had unclosed divs inside #istanga, where .borderrosu is the
 *  fragment's scrolling box -- a div left open there does not indent something
 *  wrongly, it changes which element scrolls.
 *
 *  ARE THEY LISTS? Two of the three are not, and the answer decides everything
 *  else. concursa shows who entered TODAY: forty short names, and forty names
 *  in a one-column table would be forty rows of white space with a word at the
 *  left edge. concursalist is the same shape three times over with a date in
 *  front of each name. Both are sets of tags, and they want to WRAP -- which is
 *  what the `float:left; width:110px` in the markup was reaching for and
 *  getting wrong, because a float has no gutter and forty of them in a row
 *  cannot be told apart.
 *
 *  concursnorocoslist IS a list: one line per draw, a date, a player and the
 *  artefacts they won. It gets the reports rhythm -- and it gets it on divs,
 *  because that is what it is made of, rather than being wrapped in a table to
 *  earn a look it can have directly.
 * ========================================================================== */

/* The announcement at the top of all three. It was a bare text node in a div
   carrying `style="color: #fff"` -- white, because the page used to be dark
   green. It is a paragraph now and it is set as one. */
#istanga .aid-concurs-lead {
	max-width: 62ch;
	margin: 0 0 4px;
	font-size: 12.5px;
	line-height: 20px;
	color: color-mix(in srgb, var(--aid-text) 88%, transparent);
}
#istanga .aid-concurs-corp { margin-top: 10px; }

/* Today's three winners. `width:200px; padding-left:10px; padding-bottom:10px`
   -- a 200px column of three names with nothing round it. It is the answer to
   the question the page exists to ask, so it gets a plate: the same left gold
   rule as .aid-intro and .aid-proza-cap, meaning the same thing a third time. */
#istanga .aid-castigatori {
	max-width: 320px;
	margin: 0 0 14px;
	padding: 10px 14px 12px;
	border-left: 2px solid var(--aid-aur-stins);
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
	font-size: 12px;
	line-height: 20px;
	color: var(--aid-text);
}
#istanga .aid-castigatori .aid-proza-cap { margin: 0 0 6px; }

/* THE NAMES. Inline-block rather than float, and no width at all.
 *
 * The float was 110px on concursa and 230px on concursalist, chosen to fit the
 * longest name somebody had in 2009 -- so short names sat in a wide empty box
 * and the one long name overflowed into the next. Sized to their own content
 * with a real gutter between them, they pack, they wrap, and both pages get
 * the same rule: the gutter is the design, the width never was.
 *
 * white-space: nowrap so a date and the name it belongs to never break apart
 * across two lines, which was the other thing the float was holding together. */
#istanga .aid-concurs-jucatori { line-height: 26px; }
#istanga .aid-concurs-jucator {
	display: inline-block;
	margin-right: 20px;
	white-space: nowrap;
	font-size: 12px;
}

/* concursnorocoslist: the reports rhythm, on the divs it is actually made of.
   Same three numbers as the list rule further up this file -- 7px of padding,
   a hairline under each row, white at 3.5% on the even ones -- deliberately
   repeated rather than shared, because that rule tests for a tr.aid-cap inside
   a table.tabla and this is neither, and loosening it to reach here would let
   it reach a hundred things it was written to stay away from. */
#istanga .aid-norocos { margin-top: 4px; }
#istanga .aid-norocos-rand {
	padding: 7px 8px;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	font-size: 12px;
	line-height: 19px;
}
#istanga .aid-norocos-rand:nth-child(even) { background: rgba(255, 255, 255, 0.035); }
#istanga .aid-norocos-rand:last-child { box-shadow: none; }


/* ==========================================================================
 *  THE TWO ALLIANCE PAGES
 * ========================================================================== */

/* galianta.php pinned two widgets with `position:absolute; top:3px; left:30px`
 * and `top:20px; right:30px` -- and .borderrosu is position:static, so their
 * containing block was not the box they were drawn for. It was #istanga, which
 * main.php declares position:relative. top:3px measured from the PANEL puts
 * them in its title band: the alliance symbol and the founder's Sterge link
 * have been sitting on top of the panel heading, on top of the round buttons
 * in the corner, for as long as the panel has had a heading.
 *
 * One declaration fixes the whole thing -- the box becomes the containing
 * block, and the offsets that were meant for it start meaning what they say.
 * The band they sit in is reserved with padding rather than with the eight
 * consecutive <br> the member branch used to push its button clear of them.
 *
 * :has() so the band is only reserved when something is in it. A member of an
 * alliance with no symbol chosen gets an empty widget div, and 78px of nothing
 * at the top of the page is worse than the overlap this rule exists to fix. */
#istanga .borderrosu.aid-alianta { position: relative; }
#istanga .aid-alianta:has(.aid-al-simbol > a, .aid-al-simbol > img) { padding-top: 78px; }
#istanga .aid-al-sterge,
#istanga .aid-al-simbol {
	position: absolute;
	top: 10px;
	z-index: 1;
}
#istanga .aid-al-sterge  { left: 12px; }
#istanga .aid-al-simbol  { right: 12px; text-align: right; }
#istanga .aid-al-simbol img {
	display: block;
	width: 60px;
	height: auto;
	border-radius: var(--aid-raza-mare);
	box-shadow: 0 0 0 1px var(--aid-aur-stins), var(--aid-ridicat, 0 1px 3px rgba(0,0,0,0.55));
}
#istanga .aid-al-sterge a {
	font-size: 11px;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-al-sterge a:hover { color: var(--aid-titlu-culoare); }

/* The form's reply line -- "invitatia a fost trimisa", "numele e prea lung",
   "acces interzis". It was `style="color:red"`, which said ERROR for the six
   messages that are errors and, in the same breath, for the four that are
   confirmations of something that worked. It becomes a NOTICE instead: the
   plate and the gold rule that every other "read this" in the batch wears, in
   the ordinary text colour, so what it says decides how it reads.

   :not(:empty) because the div is emitted on every request and is empty on
   almost all of them -- an always-present plate with nothing in it would put a
   30px bar at the top of the page nine visits out of ten. */
#istanga .aid-al-mesaj:not(:empty) {
	margin: 0 0 10px;
	padding: 7px 10px;
	border-left: 2px solid var(--aid-aur-stins);
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.26);
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text);
}

#istanga .aid-al-corp {
	margin-top: 12px;
	line-height: 1.5;
	text-align: left;
	color: var(--aid-text);
}
#istanga .aid-al-desc {
	width: 100%;
	max-width: 320px;
	height: 60px;
}
#istanga .aid-al-functie {
	width: 100px;
	max-width: 100%;
}

/* THE MEMBER TABLE WAS N+1 TABLES.
 *
 * A header table carrying the tr.aid-cap pass 6b8d added, and then one complete
 * <table class="tabla"> PER MEMBER inside the loop. The columns only lined up
 * because every cell repeats a width attribute; the hairline and the zebra
 * never applied, because a table with one row has no second row to stripe; and
 * `:has(> tbody > tr.aid-cap)` -- the test the entire list look hangs on -- was
 * true only of the header table, which contains no data. The port makes it one
 * table, and the header that was already there starts doing its job with no
 * further rule needed. This is only the width. */
#istanga .aid-al-corp table.tabla {
	width: 100%;
	margin: 0;
}

/* galiantap.php -- the symbol picker. Sixty 60px icons spaced with
 * `hspace="5" vspace="5"`, which is a gutter written twice per image in 1997
 * syntax and gives 10px between two icons and 5px at the edge. A wrapping flex
 * row with one gap value, and the <br> after the "no symbol" tile is gone
 * because a grid does not need to be told where to break.
 *
 * THE THREE COLOURS ARE STATE AND THEY STAY. Green means free, red means
 * another alliance has it, orange means it is yours -- "mentinem codurile de
 * culori". They were three `style='border:1px solid ...'` attributes echoed
 * from PHP; they are three classes now with the same three meanings, drawn as
 * a ring instead of a line so they match every other selectable thing in the
 * game.
 *
 * Border and glow on hover, never a background: "nu schimba backgroundul la
 * hover", and only on the free ones -- the taken ones are not links and must
 * not answer like one. */
#istanga .aid-simbol-grila {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
	margin-top: 10px;
}
#istanga .aid-simbol-grila a { display: block; line-height: 0; }
#istanga .aid-simbol {
	display: block;
	width: 60px;
	height: auto;
	border: 0;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.25);
	transition: box-shadow 120ms linear, opacity 120ms linear;
}
/* free -- the game's green, lifted off #008000 for the same reason primarii's
   green row was: #008000 on this panel is barely a colour at all. */
#istanga .aid-simbol-liber  { box-shadow: 0 0 0 1px #93d456; }
#istanga .aid-simbol-liber:hover {
	box-shadow: 0 0 0 2px #93d456, 0 0 12px rgba(147, 212, 86, 0.45);
}
/* taken by somebody else -- not a link, so it is dimmed rather than outlined
   brightly, and it does not respond to the pointer. */
#istanga .aid-simbol-luat {
	box-shadow: 0 0 0 1px rgba(214, 90, 74, 0.55);
	opacity: 0.45;
}
/* yours. The only one on the page that is already true, so it is the only one
   that glows without being hovered. */
#istanga .aid-simbol-al-meu {
	box-shadow: 0 0 0 2px var(--aid-aur), 0 0 12px rgba(255, 204, 0, 0.35);
}
/* the "no symbol" tile: 000.png is a blank, so without a ring there is nothing
   on screen to click. */
#istanga .aid-simbol-nimic { box-shadow: 0 0 0 1px rgba(255, 226, 178, 0.25); }
#istanga .aid-simbol-nimic:hover { box-shadow: 0 0 0 2px var(--aid-aur-stins); }


/* ---------------------------------------------------------------- narrow
 *
 * These eight pages are the ones a player is most likely to open on a phone --
 * the rules and the terms because they are linked from registration, the help
 * because it is what you read before you know what you are doing. Nothing here
 * is a layout, so nothing has to be undone: the measure is already in ch and
 * already shrinks, and this only takes back the room that is spent on
 * ornament when there is none to spare. */
@media (max-width: 560px) {
	#istanga .aid-proza,
	.aid-legal .aid-proza { font-size: 12.5px; line-height: 21px; }
	#istanga .aid-meniu-ajutor { max-width: none; }
	#istanga .aid-limite { min-width: 0; width: 100%; }
	.aid-legal { padding: 18px 14px 40px; }
	/* The mascot is 52px of a 300px screen and the tale beside him is down to
	   twenty characters a line. He steps out of the way and speaks from
	   above. */
	#istanga .aid-intro-lung { display: block; }
	#istanga .aid-intro-lung .aid-intro-drac { margin-bottom: 8px; }
}
/* ========== public ========== */
/* ---------------------------- public
 *
 *  THE PAGES THAT ARE NOT PANELS.
 *
 *  Eight of them -- listacampioni, listajuc, listapremii, mesajc, top100runda,
 *  topactual, topfinal, topprofesii -- plus the sidebar all eight include and
 *  the six item showcases the homepage includes. They are what somebody sees
 *  before they have an account: the rankings, the prize list, the roster, the
 *  chat teaser.
 *
 *  WHY THEY LOOKED UNTOUCHED WHILE EVERYTHING ELSE WAS BEING RE-SKINNED.
 *
 *  Every rule above this line is written under `#istanga`, because every
 *  fragment in the game loads into that panel. These eight are whole
 *  documents -- their own <html>, their own <head>, their own <body> -- and
 *  they never go near #istanga. Not one selector in the eight thousand lines
 *  above reached them. That is the entire reason they still looked like 2008.
 *
 *  THE SCOPE, AND WHY IT IS NOT ONE OF THE OTHER TWO ANSWERS.
 *
 *  Copying the stylesheet under a second scope would be two files drifting
 *  apart inside a month -- the version somebody edits and the version somebody
 *  forgets. Wrapping the pages in `<div id="istanga">` would be an id that
 *  lies about what the element is, and there are rules further up that assume
 *  #istanga is the 600px panel in main.php, so half of them would come out
 *  wrong in ways nobody would trace back to the wrapper.
 *
 *  So the pages carry a class of their own: `<body class="aid-afara">` --
 *  "the game's look, outside the panel". It cannot be mistaken for the panel,
 *  and what it costs is this block: the handful of rules those pages actually
 *  need, said again under the new scope. Not the whole vocabulary. The list
 *  look, the two headers, the intro plate, the card, the shell. Everything
 *  else stays where it is.
 *
 *  COMPANIONS, NOT EDITS. Where a rule already exists under #istanga it is
 *  left exactly as it is and a small companion is written here. The two scopes
 *  are separate on purpose: this side has a different ground under it (a
 *  1024-wide public page, not a 600px panel on a landscape) and the day one of
 *  them needs to move, the other should not have to.
 *
 *  THE PAGES NOW LINK THE STYLESHEET. They did not before: all eight carried
 *  `css/css.css` and nothing else -- no theme tokens either, so every
 *  var(--aid-*) in here would have resolved to nothing. The port adds the same
 *  two <link> lines main.php uses, tokens first, then aidcadru.css. css.css
 *  stays and keeps everything neither of them claims.
 *
 *  ONE CONSEQUENCE, STATED RATHER THAN HIDDEN. `body { background }` near the
 *  top of this file is the one rule here that is not scoped to anything, so
 *  loading the stylesheet on a public page puts the game's landscape behind
 *  it. Four of the eight write a day/night background into the style attribute
 *  from PHP and keep it -- an attribute beats a stylesheet. The other four had
 *  a bare <body> and now show the landscape instead of the old public-side
 *  picture css.css names, which is the point of the batch: the same ground
 *  under the public pages as under the game. It is deliberately NOT overridden
 *  back here, because overriding it means writing that picture's path into
 *  this file and bin/check-theme.php exists to stop exactly that. If the old
 *  picture is wanted on the public side, it belongs in the theme as a token.
 * ---------------------------------------------------------------------- */

/* ============================================================ the 800px shell
 *
 *  Every one of the eight opens the same way, and has since 2008:
 *
 *    <div style="margin:auto;display:block;width:800px; position:relative;
 *                padding-top:90px;">
 *    <table width="800" style="line-height:155%" height="450" border="0">
 *      <tr><td width="250" valign="top">  <?php include('ileft.php'); ?>
 *
 *  800 written twice, a table used as a two-column layout, and a sidebar cell
 *  sized by attribute. None of that changes here -- a table column does not
 *  reflow and pretending otherwise is the mobile pass's job, not this one
 *  (AUDIT 3d). What changes is WHERE the numbers live: out of eight copies of
 *  a style attribute and into one place, so the mobile pass has a single
 *  selector to change instead of eight files to re-port. */
.aid-afara .aid-pag {
	display: block;
	width: 800px;
	margin: 0 auto;
	position: relative;
	padding-top: 90px;
}
/* topfinal sits lower: it carries the top.png banner above the columns.
   mesajc sits higher: it has no htoptop scroll to clear. Both numbers are the
   ones the markup already had. */
.aid-afara .aid-pag-inalt  { padding-top: 130px; }
.aid-afara .aid-pag-scund  { padding-top: 80px; }

.aid-afara .aid-pag-grid {
	width: 800px;
	line-height: 155%;
	border-collapse: collapse;
}
.aid-afara .aid-pag-lat {
	width: 245px;
	vertical-align: top;
}
.aid-afara .aid-pag-corp {
	vertical-align: top;
	color: var(--aid-text);
}
/* The content column was 520, 530 or 584 pixels depending on the file, inside
   a cell that is 800 minus the sidebar -- so one of the three was wider than
   the cell holding it. It is the rest of the row; say that instead. It stays
   position:relative because .htoptop, the scroll drawn behind the title, is
   absolutely positioned against it. */
.aid-afara .aid-pag-col {
	width: 100%;
	position: relative;
}
.aid-afara .aid-pag-titlu {
	text-align: center;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
.aid-afara .aid-pag-titlu h2 {
	font-family: var(--aid-font-titlu);
	/* NOT var(--aid-titlu-caz). It is `capitalize`, and these are Romanian
	   phrases -- "Premii pe runda" would come out "Premii Pe Runda". */
	text-transform: none;
	color: inherit;
}
/* The footer line under the columns. It was `color:#009900` -- the 2008 green
   that half this batch writes into a style attribute -- on a line that is a
   copyright notice, i.e. the quietest thing on the page rather than the
   greenest. */
.aid-afara .aid-pag-subsol {
	color: var(--aid-aur-stins);
	text-align: center;
	font-size: 11px;
}
/* NOT SWEPT, ON PURPOSE: the two 802px picture strips that top and tail these
   pages (top.png, bottom.png). Their whole style attribute is a background
   image, and moving one of those out of the markup means writing the path into
   this file -- which is the single thing bin/check-theme.php exists to refuse.
   They belong to the theming pass, where the picture gets a token, not to the
   layout sweep. */

/* THE CONTENT BOX STOPS BEING A 420-PIXEL WINDOW.
 *
 * css.css gives `div.borderrosu` a hard `height:420px; overflow:auto`, which
 * on listapremii means the prize list -- the whole reason for the page -- is
 * read four hundred pixels at a time through a scrollbar inside a page that
 * also scrolls. Two scrollbars for one list. The box grows with its content
 * now and the page scrolls, which is the one scrollbar anybody expects.
 *
 * The fill and the ring are the panel's, so a public page and a fragment are
 * recognisably the same game. */
/* Four selectors for two elements. On the eight standalone pages the marker is
   on <body> and the box is inside it, so the descendant form matches. On the
   six homepage showcases there is no <body> to mark -- they are includes -- so
   the marker rides on the box itself and the compound form is what matches. */
.aid-afara .borderrosu,
.aid-afara .borderrosub,
.borderrosu.aid-afara,
.borderrosub.aid-afara {
	width: auto;
	height: auto;
	overflow: visible;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--aid-raza-panou);
	background: var(--aid-camp);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	color: var(--aid-text);
}
/* The 480px yellow plate inside it. `color:#FFFF00` on the table and
   `color:#FFFFff` on its only cell -- two colours fighting over the same text,
   both from a green-background era. */
.aid-afara .aid-pag-plansa {
	width: 100%;
	border-collapse: collapse;
	line-height: 155%;
	color: var(--aid-text);
}

/* ==================================================== the list look, out here
 *
 *  "imi place mult tabla aceea de la rapoarte, cu headerul fain cu gold, cu
 *   liniile aerisite."
 *
 *  The rankings are the clearest lists on the public side and had none of it:
 *  a 250px table of `<tr><td>1. name</td><td align=right>12.400</td></tr>`
 *  repeated a hundred times, no header, nothing between the rows, so the first
 *  line of data was serving as the column names.
 *
 *  Same test as inside the panel, one selector narrower. In there the question
 *  is `table.tabla:has(> tbody > tr.aid-cap)`, because `.tabla` is also the
 *  card grid on artefacte.php and a hairline under every .tabla row would rule
 *  the shops. Out here there is no .tabla at all -- these pages predate it --
 *  so the header row alone is the test: a table that names its columns is a
 *  list, a table that does not is layout. That distinction is the whole of it,
 *  and it is why the two prize tables on listapremii (a photograph of a memory
 *  stick, a photograph of a camera) get the title plate and NOT the hairlines. */
.aid-afara table:has(> tbody > tr.aid-cap) > tbody > tr > td {
	padding: 7px 8px;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
	vertical-align: middle;
}
.aid-afara table:has(> tbody > tr.aid-cap) > tbody > tr:last-child > td {
	box-shadow: none;
}
/* The header band draws its own edge and must not also wear a row hairline. */
.aid-afara table > tbody > tr.aid-cap > td,
.aid-afara table > tbody > tr > td.aid-cap {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* White at 3.5%, matching .aid-lista inside the panel. Black-on-dark reads as
   a gap in the list rather than as a stripe. */
.aid-afara table:has(> tbody > tr.aid-cap) > tbody > tr:nth-child(even):not(.aid-cap) > td {
	background: rgba(255, 255, 255, 0.035);
}
/* No hover on these rows: nothing on a public ranking is clickable except the
   player's name, which is a link and looks like one. A row that lights up is
   a row promising something the page does not do. */

.aid-afara .aid-lista-pub {
	width: 100%;
	margin: 0 0 10px;
	border-collapse: collapse;
	text-align: left;
}
/* The number column. `align='right'` was written into the echoed row; this is
   the same intent plus the thing the attribute could never say -- that a
   column of figures should line its digits up. */
.aid-afara .aid-nr {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* listacampioni's per-round card is both a card and a list of three: the medal
   rows want the hairlines above, and the last cell of each is the draci count,
   so it right-aligns for the same reason .aid-nr does. The markup emits those
   cells with no attribute at all, which is why this is positional rather than
   another class in the loop. */
.aid-afara .aid-tart > tbody > tr > td:last-child { text-align: right; }
.aid-afara .aid-tart > tbody > tr > td:first-child { width: 44px; }

/* -------------------------------------------------- the two headers, again
 *
 *  The same two objects as inside the panel and the same reason for keeping
 *  them apart: a <td colspan> spanning the table says "Premii pe runda" --
 *  that is a title, and it gets the brass plate. A <tr> of column names says
 *  Jucator, Draci -- that is a label for what is underneath, and it gets the
 *  reports header: the theme's stone, small gold caps, one hairline. */
.aid-afara td.aid-cap,
.aid-afara th.aid-cap {
	padding: 5px 8px;
	background: var(--aid-fata-alama);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
	border-radius: var(--aid-raza-mare);
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: var(--aid-titlu-spatiere);
	/* Romanian is never title-cased. Third place in this file that has to say
	   so, and the reason is always the same variable. */
	text-transform: none;
	color: var(--aid-titlu-culoare) !important;
	text-shadow: var(--aid-titlu-umbra);
}
.aid-afara tr.aid-cap > td,
.aid-afara tr.aid-cap > th {
	padding: 4px 8px 7px;
	background: var(--aid-fata-piatra);
	border-radius: 0;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.22);
	font-family: var(--aid-font-titlu);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	color: var(--aid-aur-stins) !important;
	text-shadow: none;
}
/* A row of column names whose last column is a number: the label goes over the
   figures it labels. */
.aid-afara tr.aid-cap > td:last-child:not(:first-child) { text-align: right; }

/* ------------------------------------------------------------ the intro plate
 *
 *  mesajc set its one paragraph on st1.jpg -- a 520-wide drawing of a scroll,
 *  with the text padded 45px down to clear the curl at its head and the box
 *  frozen at height:250px so the picture is never cut. A longer $lang[700]
 *  overflowed it; a shorter one left a third of the scroll empty. The six item
 *  showcases did the same thing differently: `<img hspace=5 align=right>` of
 *  the mascot, with the sentence flowing round it.
 *
 *  Both become .aid-intro, which is what artefacte.php and itemuri.php -- the
 *  same fragments INSIDE the panel -- already use for exactly this sentence.
 *  A box as tall as its text, him standing at the top of it, and a gold gutter
 *  marking the three lines that are advice. */
.aid-afara .aid-intro {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	padding: 10px 14px 10px 11px;
	border-radius: var(--aid-raza-panou-interior);
	border-left: 2px solid var(--aid-aur-stins);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	text-align: left;
}
.aid-afara .aid-intro,
.aid-afara .aid-intro p {
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text);
}
.aid-afara .aid-intro p { margin: 0; }
.aid-afara .aid-intro-drac {
	flex: none;
	width: 52px;
	height: 64px;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
}
/* The small print under a ranking -- topactual's paragraph about when an
   offline player's draci are refreshed. It was a bare text node between two
   </div>, so it inherited the ranking's size and read as another row of it.

   Only the two things that are actually different out here. The colour, the
   size and the leading come from the shared rule at ":4037", which names
   .aid-afara alongside #istanga -- a note should not change voice because of
   which door the reader came in by. It sits under what it explains rather than
   above it, and it is left-aligned because the ranking beside it is: a centred
   note over a left-aligned table reads as a caption for the page. */
.aid-afara .aid-nota {
	margin: 10px 0 0;
	text-align: left;
}

/* ================================================================= the card
 *
 *  "abia astept sa vad cum vor arata si restul fragmentelor, in special
 *   cardurile pentru artefacte si potiuni, haine, masini"
 *
 *  The six homepage showcases carry `class="tablaartefact"` and the two prize
 *  tables carry `class="tart"` -- the same two classes the shops inside the
 *  panel use, because all of it was copied from the same file around 2010. So
 *  there is nothing to design here: it is the card that already exists, said
 *  once more under the other scope.
 *
 *  "nu trebuie schimbat background la onmouseover. e suficient joaca din
 *   bordura si glow" -- hover moves the outline from a dim gold to a bright
 *  one and adds the glow. The background does not move. It never does.
 *
 *  The ring is an outline rather than a box-shadow for the reason the panel's
 *  version documents at length: a table paints its own shadows first and the
 *  cells on top of them, so an inset ring disappears behind whichever cell has
 *  a background of its own. Outlines are painted after every descendant. */
/* TWO ACROSS.  (10 Sept 2026)
 *
 * "putem pune 2 cate 2 (2 coloane) cardurile ca sunt prea goale 1 pe rand."
 *
 * The list pages put every artefact -- ninety of them -- in a full-width card,
 * and a card 830 pixels wide holding a 72px picture, a three-word name and one
 * sentence is mostly air. Worse than air: the description ended up a whole
 * screen away from the name it described, because the table spreads its three
 * cells across whatever width it is given.
 *
 * The cell the cards sit in becomes the grid. Nothing about the card changes --
 * it is the same card the shops inside the panel use, and it should stay that
 * -- it simply gets half the room, which is what pulls the three cells back
 * together. auto-fit rather than a fixed 2, so the page still has an answer at
 * phone width instead of two 165px columns.
 *
 * The mascot plate at the top is a grid item too, and it is a paragraph: it
 * spans. */
.aid-afara td.aid-vitro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	align-items: start;
}
.aid-afara td.aid-vitro > .aid-intro { grid-column: 1 / -1; }

.aid-afara .tablaartefact,
.aid-afara .tart {
	width: calc(100% - 8px);
	margin: 0 4px 10px;
	border: 0;
	border-radius: var(--aid-raza-panou-interior);
	border-collapse: separate;
	border-spacing: 0;
	background: rgba(0, 0, 0, 0.26);
	outline: 1px solid rgba(255, 204, 0, 0.20);
	outline-offset: -1px;
	box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.10);
	transition: outline-color 120ms linear, box-shadow 120ms linear;
	font-size: 12px;
}
.aid-afara .tablaartefact:hover,
.aid-afara .tart:hover {
	outline-color: rgba(255, 204, 0, 0.62);
	box-shadow:
		inset 0 1px 0 rgba(255, 226, 178, 0.12),
		0 0 9px rgba(255, 190, 30, 0.20);
}
.aid-afara .tablaartefact > tbody > tr > td { padding: 8px; vertical-align: top; }
/* THE PICTURE, ON A PLATE. The art is a 60-75px PNG with transparent corners,
   so without a tile under it the image floats and the row has no left edge to
   line up on. Same plate as the shops. */
.aid-afara .tablaartefact > tbody > tr:first-child > td:first-child {
	width: 84px;
	padding: 10px;
}
.aid-afara .tablaartefact > tbody > tr:first-child > td:first-child img {
	display: block;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
	padding: 4px;
	border: 0;
	border-radius: var(--aid-raza-mare);
	object-fit: contain;
	background:
		radial-gradient(circle at 34% 24%, rgba(255, 226, 178, 0.16), rgba(0, 0, 0, 0) 62%),
		rgba(0, 0, 0, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 226, 178, 0.12);
}
/* homemasini asks for `width="160"` on a cell it declared 120 wide: the cars
   are drawn wide rather than square. Let that one keep its shape. */
.aid-afara .tablaartefact > tbody > tr:first-child > td:first-child img[width="160"] {
	width: 108px;
	height: 72px;
}
/* THE NAME. `style="color: #900"` -- a dark red chosen for a light homepage
   panel, unreadable the moment the card has a dark fill. Gold, left, and big
   enough to be the card's title. */
.aid-afara .tablaartefact > tbody > tr:first-child > td:nth-child(2) {
	color: var(--aid-aur) !important;
	text-align: left;
	font-size: 15px;
	line-height: 20px;
	padding-top: 12px;
}
/* THE DESCRIPTION, whichever of the two shapes it is in: a third cell on the
   grid pages, a second row on the single-item ones. `style="color: #000"` on
   the span is the inline that has to be beaten, and it is the one case in this
   block where !important is the honest answer -- the alternative is a regex
   pass rewriting colours inside six files it only half understands. */
.aid-afara .tablaartefact > tbody > tr:first-child > td:nth-child(3),
.aid-afara .tablaartefact > tbody > tr:nth-child(2) > td {
	text-align: left;
	font-size: 12px !important;
	line-height: 17px;
}
.aid-afara .tablaartefact span[style*="#000"] { color: var(--aid-text) !important; }
/* THE STAT ROW. Six percentages at 9px, the good ones yellow and the bad ones
   red -- .textgalben and .textrosu, which css.css already colours and which
   mean something, so they are left alone. Only the size and the room change. */
.aid-afara .tablaartefact div[style*="font-size:9px"] {
	font-size: 11px !important;
	line-height: 17px;
	color: var(--aid-text-stins);
}

/* =============================================== ONE THING, ON ITS OWN PAGE
 *
 *  homeartefact.php and homepotiune.php -- /listaartefact-12-Amuleta and its
 *  potion twin, the two public pages Google actually indexes item by item.
 *
 *  "Prezinta artefactul cu un titlu mai mare, o scena black in spatele imaginii
 *   centrate si un pic mai mari, bonusurile facute mai fain. sa impresionam un
 *   pic." (10 Sept 2026)
 *
 *  What it replaces: the list's heading, the list's mascot paragraph, and then
 *  the same 72px card the list uses, with one item in it. The visitor had
 *  already clicked the thing; three quarters of the page told them where
 *  artefacts come from in general.
 *
 *  The art is the reason to build this. Every one of these is a drawn object
 *  with a joke in its name -- Bagheta Sfintei Duminici, Fulgerul lui Gebeleizis
 *  -- and the file on disk is a 200px PNG that has never been shown above 72.
 *  A black stage, a rim of light, and the picture at 200: nothing else on the
 *  public site is allowed to be that big, which is the point of a page about
 *  one object. */
.aid-afara .aid-obp { text-align: center; }
/* said again on each of the three, because the block above this one gives
   .aid-afara h1 and its paragraphs a left alignment of their own and a shared
   `text-align` on the wrapper does not beat a rule that names the element */
.aid-afara .aid-obp-fel,
.aid-afara .aid-obp-nume,
.aid-afara .aid-obp-durata { text-align: center; }
.aid-afara .aid-obp-fel {
	margin: 6px 0 0;
	font: 500 11px/1.5 var(--aid-font-cifre, 'Courier New', monospace);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
.aid-afara .aid-obp-premium {
	margin-left: 10px;
	padding: 2px 8px;
	border: 1px solid rgba(255, 204, 0, .45);
	border-radius: 999px;
	letter-spacing: .12em;
	color: var(--aid-aur);
}
.aid-afara .aid-obp-nume {
	margin: 6px 0 0;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.15;
	text-wrap: balance;
}
.aid-afara .aid-obp-durata { margin: 8px 0 0; font-size: 13px; color: var(--aid-text-stins); }
.aid-afara .aid-obp-durata strong { color: var(--aid-text); font-weight: 600; }

/* THE STAGE. Not a plate behind the picture -- a room with a light in it. The
   radial puts the source above and behind the object, the inset ring is the
   far wall catching it, and the drop-shadow under the PNG is the object's own
   shadow on the floor. The art has transparent corners, so all three are
   needed: any one of them alone reads as a grey box. */
.aid-afara .aid-obp-scena {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 22px auto 0;
	padding: 30px 20px;
	max-width: 380px;
	min-height: 230px;
	border-radius: var(--aid-raza-panou, 10px);
	background:
		radial-gradient(ellipse 70% 55% at 50% 28%, rgba(255, 226, 178, .13), rgba(0, 0, 0, 0) 70%),
		#07090a;
	box-shadow:
		inset 0 0 0 1px rgba(255, 226, 178, .10),
		inset 0 24px 48px -28px rgba(255, 226, 178, .22),
		0 10px 28px -18px rgba(0, 0, 0, .9);
}
/* 150, not 200, AND THE FILE ON DISK IS WHY. The artefact and potion sprites
   are 64x64 -- checked, not assumed. At 200 the upscale is visible as mush;
   at 150 it still reads as a deliberate presentation (twice what the card
   gives it) and the edges hold. If the art is ever redrawn larger, this is the
   one number to raise. */
.aid-afara .aid-obp-poza {
	width: 150px;
	max-width: 100%;
	height: auto;
	border: 0;
	filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .75));
}
/* rama pe pagina publica a artefactului: 300px, cat ii da si fisa din joc
   (jumatate de latime pe telefon o duce singura `max-width`) */
.aid-afara .aid-obp-rama { max-width: 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .75)); }
/* rama dintr-o lista de extrageri: fara marginea de lista */
#istanga .aid-rama-drop { margin: 0 10px 0 0; float: left; }
.aid-afara .aid-obp-desc {
	margin: 22px auto 0;
	max-width: 56ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--aid-text);
}
/* THE BONUSES, AS TILES. They were seven percentages at 9px in one run, most
   of them "+0%", so the one number that mattered had to be hunted for. Zeroes
   are not printed at all now and what is left gets a tile each: the game's own
   icon, the figure at the size of a figure, and the word under it. */
.aid-afara .aid-obp-bonusuri {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 24px auto 0;
	max-width: 640px;
}
.aid-afara .aid-obp-bonus {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0 8px;
	min-width: 128px;
	padding: 10px 14px;
	border: 1px solid var(--aid-muchie, rgba(255, 226, 178, .14));
	border-radius: var(--aid-raza-mare, 8px);
	background: rgba(0, 0, 0, .30);
}
.aid-afara .aid-obp-ic { grid-row: 1 / span 2; display: flex; align-items: center; }
.aid-afara .aid-obp-ic img { display: block; width: 22px; height: 22px; border: 0; object-fit: contain; }
.aid-afara .aid-obp-val {
	grid-column: 2;
	font: 700 19px/1.1 var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	text-align: left;
}
.aid-afara .aid-obp-et {
	grid-column: 2;
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
	text-align: left;
}
/* Gold for what it gives you, ember for what it takes. Same two colours the
   card's .textgalben / .textrosu have always used, said properly. */
.aid-afara .aid-obp-plus  { border-color: rgba(255, 204, 0, .28); }
.aid-afara .aid-obp-plus  .aid-obp-val { color: var(--aid-aur, #ffcc00); }
.aid-afara .aid-obp-minus { border-color: rgba(240, 160, 138, .28); }
.aid-afara .aid-obp-minus .aid-obp-val { color: #f0a08a; }

.aid-afara .aid-obp-unde {
	margin: 26px auto 0;
	max-width: 56ch;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--aid-text-stins);
}
.aid-afara .aid-obp-inapoi { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 6px; }

/* ====================================================== the forum, in progress
 *
 *  "la Forum: faci ceva fain cu dracusorul nostru si un mesaj fain ca lucram si
 *   ca va fi curand un loc de forum."
 *
 *  A holding page has one job and it is not to apologise. The mascot stands in
 *  the same lit black room the artefacts get, there is a small cloud of dust at
 *  his feet because he is supposed to be working, and the text says what is
 *  coming and where the conversation is happening meanwhile. */
.aid-afara .aid-ff { text-align: center; padding-bottom: 10px; }
.aid-afara .aid-ff-scena {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 18px auto 0;
	padding: 26px 20px 0;
	max-width: 380px;
	min-height: 250px;
	border-radius: var(--aid-raza-panou, 10px);
	background:
		radial-gradient(ellipse 70% 55% at 50% 26%, rgba(255, 226, 178, .14), rgba(0, 0, 0, 0) 70%),
		#07090a;
	box-shadow:
		inset 0 0 0 1px rgba(255, 226, 178, .10),
		inset 0 24px 48px -28px rgba(255, 226, 178, .22),
		0 10px 28px -18px rgba(0, 0, 0, .9);
	overflow: hidden;
}
.aid-afara .aid-ff-drac {
	position: relative;
	z-index: 1;
	width: 180px;
	max-width: 60%;
	height: auto;
	border: 0;
	filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .8));
}
/* the floor he is standing on: a wide, very soft ellipse of light, so he is in
   the room rather than pasted onto it */
.aid-afara .aid-ff-praf {
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 240px;
	height: 34px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 226, 178, .16), rgba(0, 0, 0, 0) 70%);
}
.aid-afara .aid-ff-titlu {
	margin: 6px 0 0;
	text-align: center;
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.15;
	text-wrap: balance;
}
.aid-afara .aid-ff-text {
	margin: 18px auto 0;
	max-width: 54ch;
	text-align: center;
	font-size: 15px;
	line-height: 1.65;
	color: var(--aid-text);
}
.aid-afara .aid-ff-mic { font-size: 13px; color: var(--aid-text-stins); }
.aid-afara .aid-ff-mic strong { color: var(--aid-text); font-weight: 600; }

/* ================================================================== contact
 *
 *  The form was a <table align="center"> with the labels in the left column
 *  and `class="tipa"` inputs in the right -- 2008's idea of a form, and on a
 *  phone two columns that cannot become one.
 *
 *  Labels above their fields, one column, and the whole thing narrow enough to
 *  read: a contact form is four questions, not a layout problem. The label is
 *  the <label>, so the whole line is the hit target.
 *
 *  See homecontact.php for the anti-spam; the only part of it that shows up
 *  here is .aid-ct-curse, the honeypot, which has to be genuinely invisible
 *  without using display:none -- some bots skip anything that is display:none,
 *  and the point is that they DO fill it. Off-screen and untabbable. */
.aid-afara .aid-ct { text-align: center; }
.aid-afara .aid-ct-titlu { margin: 6px 0 0; text-align: center; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
.aid-afara .aid-ct-sub {
	margin: 12px auto 0;
	max-width: 52ch;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aid-text-stins);
}
.aid-afara .aid-ct-plata {
	margin: 20px auto 0;
	padding: 12px 18px;
	max-width: 52ch;
	border-radius: var(--aid-raza-mare, 8px);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
.aid-afara .aid-ct-ok {
	border: 1px solid rgba(111, 192, 96, .45);
	background: rgba(111, 192, 96, .10);
	color: #b8e8a8;
}
.aid-afara .aid-ct-nu {
	border: 1px solid rgba(240, 160, 138, .45);
	background: rgba(190, 60, 40, .12);
	color: #f0a08a;
}
.aid-afara .aid-ct-forma {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px auto 0;
	max-width: 520px;
	text-align: left;
}
/* one field and a button -- recuperare and reactivare. A 520px column round a
   single e-mail box reads as a form with something missing from it. */
.aid-afara .aid-ct-scurta { max-width: 380px; }
.aid-afara .aid-ct-camp { display: block; }
.aid-afara .aid-ct-et {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
.aid-afara .aid-ct-forma input[type="text"],
.aid-afara .aid-ct-forma input[type="email"],
.aid-afara .aid-ct-forma textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--aid-muchie, rgba(255, 226, 178, .16));
	border-radius: var(--aid-raza-mare, 8px);
	background: rgba(0, 0, 0, .34);
	color: var(--aid-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color .12s, box-shadow .12s;
}
.aid-afara .aid-ct-forma textarea { resize: vertical; min-height: 150px; }
.aid-afara .aid-ct-forma input:focus,
.aid-afara .aid-ct-forma textarea:focus {
	outline: 0;
	border-color: rgba(255, 204, 0, .55);
	box-shadow: 0 0 0 3px rgba(255, 190, 30, .12);
}
.aid-afara .aid-ct-nota { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--aid-text-stins); }
/* the question is the one field that has to look like a question rather than a
   form control, so it gets the plate the answer sits on */
.aid-afara .aid-ct-intrebare {
	padding: 14px 16px;
	border: 1px solid var(--aid-muchie, rgba(255, 226, 178, .14));
	border-radius: var(--aid-raza-mare, 8px);
	background: rgba(0, 0, 0, .22);
}
.aid-afara .aid-ct-intrebare .aid-ct-et {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--aid-text);
}
.aid-afara .aid-ct-intrebare input { max-width: 220px; }
/* NOT display:none. A bot that skips hidden fields is a bot this trap misses,
   and the trap only works if it gets filled. Off the page, out of the tab
   order, and no height so it cannot push anything about. */
.aid-afara .aid-ct-curse {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.aid-afara .aid-ct-actiune { display: flex; justify-content: center; margin-top: 4px; }

/* ------------------------------------------------------ paginile de cont
 *  (17 sept 2026) inregistrare, confirmare, parola-noua, schimba-email,
 *  doi-pasi si iesire au trecut de pe foaia crem a lui Support\View pe
 *  site, ca homerecuperare -- aceeasi forma, cateva controale in plus. */
.aid-afara .aid-ct-forma input[type="password"] {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--aid-muchie, rgba(255, 226, 178, .16));
	border-radius: var(--aid-raza-mare, 8px);
	background: rgba(0, 0, 0, .34);
	color: var(--aid-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color .12s, box-shadow .12s;
}
/* parola si repetarea ei, umar la umar cand e loc */
.aid-afara .aid-ct-doua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .aid-afara .aid-ct-doua { grid-template-columns: 1fr; } }
/* bifa de termeni: caseta si textul pe un rand, tot randul e tinta */
.aid-afara .aid-ct-bifa {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--aid-text);
	cursor: pointer;
}
.aid-afara .aid-ct-bifa input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: #ffcc00;
}
.aid-afara .aid-ct-bifa a { color: #ffcc00; }
/* codul de sase cifre: mare, rar, centrat, ca pe telefon */
.aid-afara .aid-ct-forma input.aid-ct-cod {
	font-size: 24px;
	letter-spacing: .28em;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding: 12px;
}
.aid-afara .aid-ct-forma input.aid-ct-cod::placeholder { letter-spacing: .28em; color: rgba(255, 226, 178, .25); }
/* linkurile marunte de sub formular: „Am deja cont · Am uitat parola" */
.aid-afara .aid-ct-linkuri {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	margin: 18px 0 4px;
	font-size: 13px;
}
.aid-afara .aid-ct-linkuri a { color: var(--aid-text-stins); text-decoration: underline; text-underline-offset: 3px; }
.aid-afara .aid-ct-linkuri a:hover { color: #ffcc00; }
.aid-afara .aid-ct-doua-butoane { gap: 10px; flex-wrap: wrap; }
.aid-afara .aid-ct-doua-butoane .aid-btn { text-decoration: none; }
.aid-afara .aid-ct-plata code { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 13px; }
.aid-afara .aid-prem-nota code { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 12.5px; color: var(--aid-text); }

/* ======================================= the rankings: a podium and a list
 *
 *  homeclasament.php (all rounds together) and homecampioni.php (one round at
 *  a time). Both used to be one long table with the medal PNGs floated inside
 *  the name cell and the top three given inline font sizes counted down from
 *  17px -- which is the whole of what 2008 markup could say about first place.
 *
 *  "stilizeaza-le mai spectaculos, ca in joc" -- so the first three come OUT of
 *  the table. A ranking's podium is the reason people open it; a row cannot be
 *  a podium. Gold in the middle and standing higher, silver and bronze either
 *  side, each on its own plinth with the medal the game already draws. From the
 *  fourth place down it is a list again, because that is what it is.
 *
 *  The order in the markup is silver, gold, bronze -- reading order matches
 *  drawing order, so nothing has to be moved about with `order:` and the
 *  columns still stack correctly on a phone. */
.aid-afara .aid-cls { text-align: center; }
.aid-afara .aid-cls-titlu { margin: 6px 0 0; text-align: center; font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
/* AL DOILEA SUBTITLU, CU AUR (22 septembrie 2026).
 *
 *   „pune te rog inca un subtitlu cu gold: Clasamentul tuturor timpurilor. Cei
 *    mai buni din istoria Ai Draci"
 *
 * Stă între titlu și paragraful care explică punctele: unul spune CE e pagina,
 * celălalt CUM se ajunge în ea. Aurul îl ia de la titlurile jocului, nu de la
 * un galben scris aici -- `--aid-aur` e aceeași variabilă ca pe podium. */
.aid-afara .aid-cls-gold {
	margin: 10px auto 0;
	max-width: 58ch;
	text-align: center;
	font-family: var(--aid-font-titlu, Alegreya, Georgia, serif);
	font-size: clamp(15px, 2vw, 18px);
	line-height: 1.45;
	color: var(--aid-aur, #ffcc00);
}
.aid-afara .aid-cls-sub {
	margin: 12px auto 0;
	max-width: 58ch;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: var(--aid-text-stins);
}
/* which round is on screen, said once and said large */
.aid-afara .aid-cls-runda {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 12px;
	margin: 26px 0 0;
}
.aid-afara .aid-cls-runda-et {
	font: 500 11px/1 var(--aid-font-cifre, 'Courier New', monospace);
	letter-spacing: .20em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
.aid-afara .aid-cls-runda-nr {
	font-family: var(--aid-font-titlu, Alegreya, Georgia, serif);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--aid-aur, #ffcc00);
}
.aid-afara .aid-cls-runda-link { font-size: 12.5px; }

.aid-afara .aid-pod {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
	margin: 24px auto 0;
	max-width: 760px;
}
.aid-afara .aid-pod-loc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	/* min-width:0 is the one that matters. Without it a flex item refuses to go
	   narrower than its longest unbreakable word -- and on the champions page
	   that word is a devil count in the trillions, so the three plinths grew
	   past their max-width, overflowed 680px between them, and bronze dropped
	   onto a second row. Measured on round 172, where the number is fifteen
	   digits long. */
	flex: 1 1 180px;
	min-width: 0;
	max-width: 240px;
	padding: 18px 14px 16px;
	border: 1px solid var(--aid-muchie, rgba(255, 226, 178, .14));
	border-radius: var(--aid-raza-panou, 10px);
	background:
		radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 226, 178, .10), rgba(0, 0, 0, 0) 70%),
		rgba(0, 0, 0, .30);
}
/* gold stands higher and wears the brighter ring: the one thing the old table
   was trying to say with two extra pixels of type */
.aid-afara .aid-pod-aur {
	padding-top: 26px;
	padding-bottom: 22px;
	border-color: rgba(255, 204, 0, .45);
	box-shadow: 0 0 22px -8px rgba(255, 190, 30, .40);
	order: 0;
}
.aid-afara .aid-pod-medalie { width: 34px; height: auto; border: 0; }
.aid-afara .aid-pod-aur .aid-pod-medalie { width: 44px; }
.aid-afara .aid-pod-eticheta {
	font: 500 10.5px/1.4 var(--aid-font-cifre, 'Courier New', monospace);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
.aid-afara a.aid-pod-nume,
.aid-afara a.aid-pod-nume:visited {
	font-family: var(--aid-font-titlu, Alegreya, Georgia, serif);
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--aid-text, #e6e0c8);
	text-decoration: none;
	text-wrap: balance;
}
.aid-afara .aid-pod-aur a.aid-pod-nume { font-size: 23px; color: var(--aid-aur, #ffcc00); }
.aid-afara a.aid-pod-nume:hover { color: var(--aid-aur, #ffcc00); text-decoration: underline; }
/* Numele de pe podium e acum un <span class="aid-pod-nume"> cu, inauntru, ori
   o legatura <a> ori un <span class="aid-fost"> pentru conturile sterse
   (29 sept 2026, Runda::legatura). Aceeasi tipografie ca pana acum. */
.aid-afara span.aid-pod-nume { display: block; font-family: var(--aid-font-titlu, Alegreya, Georgia, serif); font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--aid-text, #e6e0c8); text-wrap: balance; }
.aid-afara .aid-pod-aur span.aid-pod-nume { font-size: 23px; color: var(--aid-aur, #ffcc00); }
.aid-afara span.aid-pod-nume a, .aid-afara span.aid-pod-nume a:visited { color: inherit; text-decoration: none; }
.aid-afara span.aid-pod-nume a:hover { color: var(--aid-aur, #ffcc00); text-decoration: underline; }
/* cont sters: numele ramane in clasament, dar nu duce nicaieri */
.aid-afara .aid-fost { color: var(--aid-text-stins, #97917a); cursor: default; }
.aid-afara .aid-pod-aur .aid-fost { color: var(--aid-aur, #ffcc00); opacity: .75; }
/* 16, not 20, and nowrap: the same fifteen-digit number. At 20px it broke
   across two lines inside the plinth, which is worse than a slightly smaller
   figure -- a number split down the middle is not a number any more. */
.aid-afara .aid-pod-puncte {
	margin-top: 2px;
	font: 700 16px/1.2 var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--aid-text);
}
.aid-afara .aid-pod-aur .aid-pod-puncte { font-size: 18px; }
.aid-afara .aid-pod-puncte small {
	display: block;
	margin-top: 2px;
	font: 400 10px/1 var(--aid-font-cifre, 'Courier New', monospace);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
.aid-afara .aid-pod-mic { font-size: 11.5px; color: var(--aid-text-stins); }

/* everything from fourth place down */
.aid-afara .aid-cls-lista {
	width: 100%;
	margin: 26px 0 0;
	border-collapse: collapse;
	text-align: left;
	font-size: 13.5px;
}
.aid-afara .aid-cls-lista thead th {
	padding: 8px 10px;
	border-bottom: 1px solid rgba(255, 226, 178, .16);
	font: 500 10.5px/1.4 var(--aid-font-cifre, 'Courier New', monospace);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
	text-align: left;
}
.aid-afara .aid-cls-lista tbody td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 226, 178, .06); }
.aid-afara .aid-cls-lista tbody tr:hover { background: rgba(255, 204, 0, .05); }
.aid-afara .aid-cls-lista a { color: var(--aid-text); text-decoration: none; }
.aid-afara .aid-cls-lista a:hover { color: var(--aid-aur, #ffcc00); text-decoration: underline; }
.aid-afara .aid-cls-nr {
	width: 52px;
	text-align: right;
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	color: var(--aid-text-stins);
}
.aid-afara .aid-cls-cifre {
	text-align: right;
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* A COLUMN OF FIGURES AND ITS NAME LINE UP OR NEITHER DOES. Said with the
   table in the selector because `thead th` above already sets text-align and
   is the more specific of the two -- a plain `th.aid-cls-cifre` loses to it and
   the headings sat over the wrong edge of their own columns. */
.aid-afara .aid-cls-lista thead th.aid-cls-cifre,
.aid-afara .aid-cls-lista thead th.aid-cls-nr { text-align: right; }
.aid-afara .aid-cls-tare { color: var(--aid-aur, #ffcc00); }
.aid-afara .aid-cls-slab { color: var(--aid-text-stins); font-size: 12px; }
/* the tenth place: the old table drew an <hr> here and it was right to. Top ten
   is a thing players say out loud, so the line stays -- as a line, not a row. */
.aid-afara .aid-cls-prag td { border-top: 1px solid rgba(255, 226, 178, .18); }
/* Randul cu dracii exista in HTML pe orice ecran si se aprinde doar pe telefon
   (vezi blocul @media de mai jos). Ascuns aici, nu adaugat de JavaScript, ca sa
   fie acolo si daca scriptul nu ruleaza, si ca datele sa fie scrise o data. */
.aid-afara .aid-cls-lista tbody tr.aid-cls-rand2 { display: none; }

/* THE PAGER, said again outside the panel. aidPaginare() writes the same nav
   for the inbox, ceilalti.php and now the champions, and the markup is
   identical -- only the scope is new. */
.aid-afara .aid-paginare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 26px 0 4px;
	font-size: 12px;
	line-height: 24px;
}
.aid-afara .aid-paginare a,
.aid-afara .aid-paginare span {
	padding: 3px 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--aid-text-stins);
	text-decoration: none;
}
.aid-afara .aid-paginare a { border-color: var(--aid-muchie, rgba(255, 226, 178, .14)); color: var(--aid-text); }
.aid-afara .aid-paginare a:hover { border-color: rgba(255, 204, 0, .5); color: var(--aid-aur, #ffcc00); }
.aid-afara .aid-paginare .aid-pag-cur {
	border-color: rgba(255, 204, 0, .55);
	background: rgba(255, 204, 0, .12);
	color: var(--aid-aur, #ffcc00);
	font-weight: 700;
}
.aid-afara .aid-paginare .aid-pag-stins { opacity: .45; }
.aid-afara .aid-paginare .aid-pag-info { margin-left: 6px; font-size: 11.5px; }
/* the line that says what the chips are. Without it a row reading
   "172 171 170 169 168" is a puzzle; with it, it is a list of rounds. */
.aid-afara .aid-cls-anterioare {
	margin: 30px 0 -14px;
	text-align: center;
	font: 500 11px/1.6 var(--aid-font-cifre, 'Courier New', monospace);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}

/* ============================================== a player's public page
 *
 *  Everything the old page drew was inside `if (file_exists(the photo))`, so a
 *  player without an uploaded picture had a public page that rendered nothing
 *  at all -- and most players never uploaded one. There is no picture now, so
 *  there is nothing left for the page to be conditional on.
 *
 *  Three medal counts and six figures. The medals keep their row whether they
 *  are won or not -- a dim zero is information, and it keeps every player's
 *  page the same shape. */
.aid-afara .aid-cet { text-align: center; }
.aid-afara .aid-cet-din { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--aid-text-stins); }
.aid-afara .aid-cet-din strong { color: var(--aid-text); font-weight: 600; }
/* the motto, in the player's own words, so it is set as a quotation */
.aid-afara .aid-cet-vorba {
	margin: 16px auto 0;
	max-width: 52ch;
	font-family: var(--aid-font-titlu, Alegreya, Georgia, serif);
	font-size: 17px;
	font-style: italic;
	line-height: 1.5;
	color: var(--aid-text);
	text-wrap: balance;
}
.aid-afara .aid-cet-medalii {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 26px auto 0;
}
.aid-afara .aid-cet-medalie {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 108px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 204, 0, .28);
	border-radius: var(--aid-raza-mare, 8px);
	background: rgba(0, 0, 0, .30);
}
.aid-afara .aid-cet-medalie img { width: 30px; height: auto; border: 0; }
/* not won yet: the medal greys out and the tile stops glowing, but it stays */
.aid-afara .aid-cet-fara { border-color: var(--aid-muchie, rgba(255, 226, 178, .12)); }
.aid-afara .aid-cet-fara img { filter: grayscale(1); opacity: .35; }
.aid-afara .aid-cet-fara .aid-cet-nr { color: var(--aid-text-stins); }
.aid-afara .aid-cet-nr {
	font: 700 20px/1.1 var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	color: var(--aid-aur, #ffcc00);
}
.aid-afara .aid-cet-et {
	font-size: 10.5px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
.aid-afara .aid-cet-fise {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	margin: 18px auto 0;
	max-width: 640px;
}
.aid-afara .aid-cet-fisa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 14px 10px;
	border: 1px solid var(--aid-muchie, rgba(255, 226, 178, .12));
	border-radius: var(--aid-raza-mare, 8px);
	background: rgba(0, 0, 0, .22);
}
.aid-afara .aid-cet-val {
	font: 700 18px/1.1 var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	color: var(--aid-text);
	white-space: nowrap;
}
.aid-afara .aid-cet-loc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 24px;
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--aid-text-stins);
}
.aid-afara .aid-cet-loc strong { color: var(--aid-text); font-weight: 600; }
.aid-afara .aid-cet-loc img { vertical-align: middle; border: 0; }

/* the prizes, on the same podium as the ranking: this page is a preview of
   that one, so it should be the same object */
.aid-afara .aid-prem-credite {
	margin-top: 4px;
	font: 700 22px/1.1 var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--aid-aur, #ffcc00);
}
.aid-afara .aid-prem-credite small {
	display: block;
	margin-top: 3px;
	font: 400 10px/1 var(--aid-font-cifre, 'Courier New', monospace);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
.aid-afara .aid-prem-nota {
	margin: 26px auto 0;
	max-width: 54ch;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--aid-text-stins);
}
.aid-afara .aid-lista-goala { margin: 28px 0; text-align: center; color: var(--aid-text-stins); }

@media (max-width: 560px) {
	/* AURUL PRIMUL, PE TELEFON.
	 *
	 * „pag Campioni - sa inceapa cu gold-silver-bronz; acum, pe mobil, primul e
	 *  argintul" (12 septembrie 2026).
	 *
	 * Nu e o greseala in HTML: ordinea din document e argint-aur-bronz dinadins,
	 * ca pe ecran lat aurul sa stea in MIJLOC, cum sta pe un podium adevarat.
	 * Cand cele trei se aseaza una sub alta, ordinea din document devine ordinea
	 * citita, si atunci mijlocul nu mai inseamna nimic -- inseamna al doilea.
	 *
	 * Deci HTML-ul ramane cum e (si pentru cititoarele de ecran pe desktop), iar
	 * aici se schimba doar ordinea vizuala. `order` exista exact pentru asta.
	 * Cate una pe rand, ca doua langa una sa nu arate a rest. */
	.aid-afara .aid-pod-loc    { flex-basis: 100%; max-width: none; }
	.aid-afara .aid-pod-aur    { order: 1; }
	.aid-afara .aid-pod-argint { order: 2; }
	.aid-afara .aid-pod-bronz  { order: 3; }

	/* AICI COBORAU DRACII PE RANDUL LOR -- pana pe 22 septembrie 2026.
	 *
	 * „ascundem coloana dracilor. aici nu conteaza decat punctele si rundele."
	 *
	 * Coloana a iesit din tabela cu totul (vezi homeclasament.php), deci tot ce
	 * statea aici -- ascunderea ei sub 560px, randul al doilea care-i cobora
	 * numarul la dreapta, si dungile numarate din patru in patru ca perechea de
	 * randuri sa se citeasca drept UN jucator -- nu mai are obiect. Trei coloane
	 * incap si pe 358px fara niciun reglaj.
	 *
	 * `.aid-cls-rand2` ramane in fisier (randul e ascuns implicit mai sus), ca
	 * intoarcerea coloanei sa ceara numai HTML-ul inapoi. */

}

/* ========================================================== the left sidebar
 *
 *  ileft.php, included by all eight pages, so everything here is worth eight
 *  screens. Five boxes built from the same three divs: .dr2t a 245px top cap,
 *  .dr2m a middle that repeats, .dr2b a bottom cap. That art stays -- it is
 *  what the public side looks like, and swapping it for the panel's stone
 *  would make these pages look like a different site from index.php, which
 *  nobody has swept yet.
 *
 *  What was wrong was inside. Every box titled itself with a `float:right` div
 *  and then held the box open around the float by echoing fifteen empty
 *  <br /> -- the 2008 way of giving a floated column somewhere to sit. The
 *  float bought nothing (the title was already the full width of the box), so
 *  the titles stop floating, the fifteen line breaks go, and the box clears
 *  itself here instead.
 *
 *  The right alignment stays. It is not a side effect of the float: the frame
 *  is drawn with its ornament down the left edge and its text set against the
 *  right, and at 245px that reads correctly. */
body.aid-afara .dr2t { margin-top: 8px; }
body.aid-afara .dr2m {
	/* flow-root rather than overflow:hidden -- the box has to contain what is
	   inside it without also clipping it, and the prizes box has thumbnails
	   that sit right on its edge. */
	display: flow-root;
}
body.aid-afara .aid-lat-titlu {
	padding: 2px 30px 6px 0;
	text-align: right;
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aid-aur);
	text-shadow: var(--aid-titlu-umbra);
}
body.aid-afara .aid-lat-titlu a { color: var(--aid-aur); }
body.aid-afara .aid-lat-titlu a:hover { color: var(--aid-text-tare); }
body.aid-afara .aid-lat-corp,
body.aid-afara .aid-lat-premii {
	padding: 0 30px 0 0;
	text-align: right;
	line-height: 148%;
}
body.aid-afara .aid-lat-premii { padding-bottom: 8px; }
/* Three thumbnails that each carried `border:1px solid Orange` -- the CSS
   keyword, capitalised, which is the 2008 give-away. One hairline in the
   theme's gold, and a radius so they match the plates everywhere else. */
body.aid-afara .aid-lat-poza {
	border: 1px solid var(--aid-aur-stins);
	border-radius: var(--aid-raza);
	vertical-align: middle;
}

/* ------------------------------------------------- listajuc's roster columns
 *
 *  Every player on the server in one alphabetical run, cut into columns by the
 *  loop: it opened a `float:left; width:132px` div at i==0 and another at
 *  `width:110px` every four hundredth name. Two widths for the same thing, and
 *  the break landing wherever four hundred happened to fall rather than where
 *  the box ends.
 *
 *  CSS has had a name for this since 2011. The wrapper is given a column WIDTH
 *  rather than a count, so the browser fits as many as the page is wide and
 *  balances them -- which is the behaviour the loop was imitating by hand. */
.aid-afara .aid-jucatori-col {
	column-width: 132px;
	column-gap: 20px;
	text-align: left;
}
/* One name in that index. NOT .aid-jucator, which is jucator.php's player CARD
   -- a `table.tabla.aid-jucator` with nine rules of its own further up this
   file, including one that makes every cell half the table wide. Two unrelated
   objects had been given the same name by two different passes; they never met,
   because the card's rules are all under #istanga and this page is a standalone
   `<body class="aid-afara">`, but that is the routing keeping them apart rather
   than the stylesheet, and it would stop being true the first time anything
   loaded this list into the panel. */
.aid-afara .aid-jucatori-nume {
	font-size: 11px;
	line-height: 17px;
}

/* ---------------------------------------------------------------------------
 *  A NOTE ON THE SIX HOMEPAGE SHOWCASES, so nobody spends an afternoon on it.
 *
 *  homeartefacte, homeartefact, homepotiuni, homepotiune, homemasini and
 *  homehaine now carry `class="borderrosu aid-afara"` and the same classed
 *  markup artefacte.php has inside the panel, so every card rule above is
 *  written for them and correct for them.
 *
 *  None of it will paint yet. Those six are includes of index.php, and
 *  index.php links `css/homecssv3.css` and nothing else -- no theme tokens, no
 *  aidcadru.css. The eight standalone pages got their two <link> lines in this
 *  batch; index.php is not in this batch's file set and did not.
 *
 *  There is also a decision waiting there rather than a missing line. The
 *  homepage drops these fragments into `#homeinclude`, which homecssv3.css
 *  draws as a 400x360 window of light parchment with `color:#513c29` -- so the
 *  showcase sits on a LIGHT ground, while the card above is dark-on-dark
 *  because inside the panel it sits on stone. Whoever sweeps index.php has to
 *  decide which of the two the homepage wants before adding the link, and this
 *  block is written on the assumption that the answer is "the same card as the
 *  game". If it is not, the card rules above want a `#homeinclude .aid-afara`
 *  variant rather than an edit.
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 *  AND WHY THE ACCOUNT PAGES ARE NOT IN THIS FILE AT ALL.
 *
 *  login, inregistrare, logout, confirmare, retrimite-confirmare, recuperare,
 *  parola-noua, schimba-email and cont are the other half of the public side,
 *  and none of them is swept here. That is not an oversight; it is that they
 *  are a different KIND of file.
 *
 *  They are hand-written -- they replaced the legacy pages rather than being
 *  ported from them, and bin/port-legacy.php lists them on $skip precisely so
 *  a re-run cannot overwrite them. A $fixes entry naming one of those paths is
 *  never reached, and the port refuses that: "FIXES THAT NEVER REACHED A FILE".
 *
 *  They also link nothing. All nine render through src/Support/View.php, which
 *  writes its own <!doctype>, its own <head>, and its own palette inline in a
 *  <style> block -- parchment, dark red, no external stylesheet of any kind.
 *  So neither the theme's tokens nor one line of this file can reach them, and
 *  no class added to those nine pages would change anything.
 *
 *  What they are NOT is badly built. View.php already gives them the centred
 *  card, the labelled field stack, one full-width primary button and errors on
 *  a red plate. Between them they carry seven inline styles, all of them
 *  `margin-top` on a heading. The only thing outstanding is that they wear a
 *  different set of colours from the game they let you into.
 *
 *  Closing that is one change in one file: View::open() gains the same two
 *  <link> lines the eight standalone pages got, and View::css() sheds the
 *  colours that the tokens then own. src/Support/View.php is a single, small,
 *  hand-written class -- the right place for it, and a different batch from
 *  this one.
 * ------------------------------------------------------------------------- */
/* ========== piata ========== */
/* ---------------------------- piata */

/* ==============================================================================
 *  THE MARKET, BOTH ENDS OF IT
 *
 *  licitatii.php is the board you buy from and it was done earlier in the
 *  sweep. These are the other two: adaugal.php, where you put your own goods
 *  ON that board, and cumpara.php, where you buy the credits the whole economy
 *  runs on. Nothing here invents a new look -- the selling screen borrows the
 *  buying screen's, and the credit shop borrows the artefact shop's card.
 * ============================================================================ */


/* ================================================== adaugal -- "Taraba ta"
 *
 * Five near-identical tables -- Artefacte, Potiuni, Masini, Haine, Elemente
 * magice -- each listing what you own, with a sell form on every row. Pass 6b8d
 * had already given the five header rows their `tr.aid-cap`, so the shared list
 * rule (7px padding, a hairline under each row, the 3.5% zebra) was half
 * firing; the port now adds the section titles as `td.aid-cap` and takes 107 of
 * the 111 width/align/height attributes off the cells, which is what the rest
 * of this block styles.
 *
 * `#istanga .borderrosu.aid-cadru { overflow: hidden; }` is NOT repeated here:
 * it was written for licitatii.php further up this file and it is the same box,
 * the same 380px inline height removed, and the same reason -- two nested
 * scrollers make a list that scrolls, stops, then scrolls the box it is in. */

/* THE WAIT NOTICE. `<div style='color:yellow'>` built inside a PHP string:
   "Atentie! Nu ai voie sa adaugi un alt obiect la vanzare ... decat dupa" and a
   live countdown. Pure yellow at body size on a dark panel is the loudest thing
   the page can say, and what it says is a rule you cannot argue with, not an
   alarm. Amber on a plate, with the countdown itself picked out -- the same
   treatment the other "you must wait" lines in the game get. */
#istanga .aid-tar-asteptare {
	margin: 0 0 10px;
	padding: 8px 12px;
	border-radius: var(--aid-raza-panou-interior);
	border-left: 2px solid var(--aid-aur-stins);
	background: rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-aur);
}
#istanga .aid-tar-asteptare #tsl {
	font-weight: bold;
	font-variant-numeric: tabular-nums;
	color: var(--aid-text-tare, #e6ecdd);
}

/* THE ROW HIGHLIGHT, WITHOUT THE POINTER IT CAME WITH.
 *
 * Every data row carried `onMouseOver="this.style.background=$bmouseover;
 * this.style.cursor='pointer'"`. Half of that was right: seven columns is far
 * enough for an eye to lose its line, and this is the row you are about to type
 * a price into, so it should light up.
 *
 * The other half was a lie. Nothing on this row opens when you click it -- it
 * is a form, and the only thing in it that does anything is the Vinde button.
 * That is the whole reason this is its own class instead of the
 * `tr[data-aid-panou]` hover further up the file: THAT rule carries
 * `cursor: pointer` on purpose, because those rows really do open a panel.
 * Same gold at the same 10%, no cursor change. */
#istanga .aid-tar-rand:hover > td { background: rgba(255, 204, 0, 0.10); }

/* ------------------------------------------------------------- the six columns
 *
 * # / icon / name / Disponibile / Cate / Pret / Vinde. The order below is the
 * order you read them in, and each rule says only what the shared list rule
 * does not: it already sets the padding, the hairline and the vertical
 * alignment on every cell of a list, so nothing here declares those. */

/* The counter was `width="24" align="center"` -- centred single digits under a
   header row that aligns left. Right-aligned and tabular, so 1. 2. ... 10. line
   up on the dot rather than wandering as the list grows. */
#istanga .aid-tar-nr {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	color: var(--aid-text-slab);
	font-variant-numeric: tabular-nums;
}
/* The icon column. The cell said 24px in one section and 34px in four; the
   picture is 20px tall in all five. One width, and the image sized here so the
   `height="20"` left on the four <img> tags is a hint about the file rather
   than the thing deciding the layout. */
#istanga .aid-tar-poza {
	width: 34px;
	text-align: center;
}
#istanga .aid-tar-poza img {
	height: 20px;
	width: auto;
	vertical-align: middle;
}
/* The name. It was #99FF33 in all five sections -- the 2008 green, and the
   brightest thing in a row whose actual subject is the price you are about to
   type. Same decision as licitatii's .aid-lic-nume: the name is what you scan,
   so it gets the readable text colour and the left edge. */
#istanga .aid-tar-nume {
	text-align: left;
	color: var(--aid-text);
}
/* How many you have. Context, so it recedes -- and tabular, because the only
   thing you do with this column is compare it with what you are about to sell. */
#istanga .aid-tar-cate {
	text-align: center;
	color: var(--aid-text-slab);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------- the end of the row is ONE control
 *
 * Cate, Pret and Vinde were a 30px field, a 70px field and a 70px button, each
 * centred in the middle of its own column with 8px of list padding on both
 * sides of all three. Three widgets floating in three wide columns, in a row
 * that asks one question: how many, for how much, go.
 *
 * They stay three cells -- the header above them names three columns, and a
 * colspan here would put the table out of step with its own header -- but the
 * padding BETWEEN them goes, so they close up into one group anchored at the
 * right-hand end of the row. All three are set to the same 30px so the group
 * has one baseline and one height.
 *
 * WHY THE LONG SELECTORS. The list rule that owns this table is
 * `#istanga table.tabla:has(> tbody > tr.aid-cap) > tbody > tr > td` and it
 * sets `padding: 7px 8px`. A plain `#istanga .aid-tar-pret` is a weaker
 * selector and would lose the padding argument silently. Matching its shape --
 * table, tbody, tr, td -- ties on specificity, and this file is appended after
 * it, so the later rule wins. Only the three that fight over padding are
 * written this way; everything above and below uses the short form because
 * nothing else here touches a property the list rule sets.
 *
 * AND IT MOVES THE HEADER, WHICH IS NORMALLY THE WRONG WAY ROUND. The rule for
 * a row of column names sets `text-align: left`, and the note on mod_bulgari
 * says why data should follow the header rather than the other way: "the header
 * is the one the whole game already agrees on". These three columns are the
 * exception and it is worth saying out loud. They are one control group pinned
 * to the RIGHT-HAND END of the row, and each is only as wide as its own widest
 * thing -- so "Cate" and "Pret" left-aligned in a cell sized by the field under
 * them would sit an inch away from the field they name. The three names move
 * to the edge their columns are anchored on. The other four column names are
 * untouched and stay left, exactly as on licitatii.php. */
#istanga table.tabla > tbody > tr > td.aid-tar-cant {
	width: 1%;
	padding-right: 3px;
	text-align: right;
	white-space: nowrap;
}
#istanga table.tabla > tbody > tr > td.aid-tar-pret {
	width: 1%;
	padding-left: 3px;
	padding-right: 3px;
	text-align: right;
	white-space: nowrap;
}
#istanga table.tabla > tbody > tr > td.aid-tar-vinde {
	width: 1%;
	padding-left: 3px;
	text-align: right;
	white-space: nowrap;
}
/* The two fields. `style="width:70px"` and `style="width:30px"`, both from
   2008, both sized for a font this interface no longer uses. The price is
   right-aligned because it is money and money lines up on its last digit; the
   quantity is centred because it is one or two characters and centring is what
   keeps it from looking like a typo. 30px tall to match the button beside them.
   `input[type="text"]` in the selector is not decoration: the base field rule
   is `#istanga input[type="text"]`, and a class alone would not outrank it. */
#istanga input[type="text"].aid-tar-camp-pret,
#istanga input[type="text"].aid-tar-camp-cant {
	height: 30px;
	font-variant-numeric: tabular-nums;
}
#istanga input[type="text"].aid-tar-camp-pret {
	width: 88px;
	text-align: right;
}
#istanga input[type="text"].aid-tar-camp-cant {
	width: 52px;
	text-align: center;
}
/* Vinde. It is an ordinary button and stays the ordinary button -- "butoanele
   ... care nu trebuie sa iasa prea mult in evidenta", and the theme's own
   comment on the default names vinde as one of the three it was written for.
   The only thing changed is the side padding: 20px each side next to two narrow
   fields makes the button the widest thing in the group and the group stops
   reading as a group. `style="width:70px"` came off in the port and was already
   dead anyway -- `width: auto !important` has been beating it since the buttons
   were drawn. */
#istanga input[type="submit"].aid-tar-buton {
	padding-left: 14px;
	padding-right: 14px;
}
/* A row you cannot sell from -- nothing left in the warehouse, or the wait is
   still running -- disables all three at once. They were still drawn at full
   strength, so the row looked ready and did nothing. */
#istanga .aid-tar-rand input:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ------------------------------------------ "De vanzare:" -- what is already up
 *
 * Under an item you have already listed comes a second row: the label floated
 * left, and one floated-and-cleared div per lot down the right. Two bugs in
 * three lines -- the cell spanned 5 of the table's 7 columns, so the right
 * floats aligned to the middle of the table rather than to its edge, and the
 * label carried `id="onsale"` once per item, so fifteen items meant fifteen
 * elements sharing one id.
 *
 * A flex line instead. The label holds its place at the left, the lots run
 * along after it and wrap when there are more than the row is wide, and nothing
 * floats -- so nothing can fall out of the bottom of the cell onto the next
 * item's row, which is what the old one did the moment somebody listed four
 * lots of the same thing. */
/* STILL A CELL. The first cut made the td `display: flex`, and a td that is not
   `table-cell` forgets its colspan: the browser wrapped it in an anonymous cell
   in the FIRST column, so the "#" column grew to hold the chips and pushed the
   rest of the table over -- "prima coloana, cu nr., e cea mai mare si impinge
   restul" (8 Sept 2026). The cell stays a cell; the label and the chips are
   inline blocks with a little air, and wrap as inline content does. */
#istanga .aid-tar-piata {
	display: table-cell;
	text-align: left;
	line-height: 22px;
}
#istanga .aid-tar-eticheta {
	display: inline-block;
	margin-right: 6px;
	vertical-align: middle;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aid-text-slab);
}
/* Each lot is a chip: how many, of what, for how much, and the (x) that takes
   it back off the board. A chip rather than a line of text because there are
   usually two or three of them and they are all the same shape -- the eye
   should be able to count them without reading them. */
#istanga .aid-tar-lot {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 1px 6px 1px 0;
	gap: 3px;
	padding: 2px 8px;
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.16);
	font-size: 11px;
	line-height: 16px;
	white-space: nowrap;
	color: var(--aid-text);
}
#istanga .aid-tar-lot img { vertical-align: middle; }
/* The (x) is the only destructive control on this screen and it was a bare
   letter in brackets. Still a letter in brackets -- the game's own idiom, and
   renaming it would be a translation job -- but it answers to the pointer now,
   and it turns the red that means "this removes something" only on hover, so a
   list of ten lots is not ten red marks. */
#istanga .aid-tar-lot a {
	font-weight: bold;
	text-decoration: none;
	color: var(--aid-text-slab);
}
#istanga .aid-tar-lot a:hover { color: #ff6a58; }


/* ============================================ cumpara -- the credit shop
 *
 * "Cumpără credite": seven packages from 10 lei to 500, and the twelve mobilPay
 * forms underneath them. NOTHING IN THIS BLOCK CAN REACH A FORM -- there is no
 * selector here for a form, an input[type=hidden] or anything named env_key or
 * data, and the port's entry for this file changes no attribute that is
 * submitted. The only control styled below is the card picture, and only its
 * appearance: its onClick, which is the payment trigger, is untouched.
 *
 * WHAT WAS THERE. A 500px table with `cellpadding="6"`, alternating
 * `background:#285428` stripes, and each package spread across four columns --
 * price, credits, an empty cell where the withdrawn SMS price used to print,
 * and the bonus with the card button. Read down, that is a bank statement: the
 * thing you are choosing between is laid out sideways and the choosing has to
 * be done across the page.
 *
 * WHAT IT IS NOW. The same table, laid out as a grid of cards -- the shape
 * artefacte.php and premium.php already use for "here are the things you may
 * buy, pick one", down to the same outline ring. The markup stays a table on
 * purpose: this is the page that takes money, and restructuring a table is the
 * kind of edit that moves a payment trigger by accident. */

/* THE FOUR FACTS AT THE TOP. A <center> holding a reference price, a yellow
   line about the bonuses, a red line about the Premium threshold and the
   payment method, with a <strong> that opened on "CARD" and closed three lines
   later. The two colours STAY, because they are the two facts that decide which
   package somebody picks -- "mentinem codurile de culori" -- but tempered:
   #FFFF00 and #FF0000 on a near-black green panel are colours you squint at,
   and the same two shades used everywhere else in this sweep read as the same
   information without the glare. */
#istanga .aid-cump-antet {
	margin: 0 0 10px;
	padding: 9px 12px;
	border-radius: var(--aid-raza-panou-interior);
	border-left: 2px solid var(--aid-aur-stins);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
	text-align: center;
	font-size: 12px;
	line-height: 18px;
}
#istanga .aid-cump-antet p { margin: 0 0 3px; }
#istanga .aid-cump-antet p:last-child { margin-bottom: 0; }
#istanga .aid-cump-referinta { color: var(--aid-aur); }
#istanga .aid-cump-bonusuri { color: #f2c14b; }
#istanga .aid-cump-prag { color: #ff6a58; }
#istanga .aid-cump-metoda { color: var(--aid-text-slab); }

/* ---------------------------------------------------------- the billing box
 *
 * Netopia needs five fields on the invoice, and until they are filled in the
 * card buttons open this box instead of paying -- which makes it the second
 * most important thing on the page and it was drawn as `padding: 5px;
 * border-radius:10px; border:1px solid #606060`, a grey rectangle. Same plate
 * as the rest of the screen. */
#istanga .aid-cump-facturare {
	margin: 0 0 12px;
	padding: 4px 12px 12px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
/* The box's own heading is an <h2> inside an <a href="javascript:toggle_fact()">
   -- the anchor is the toggle and the h2 is the label, and at h2 size it was as
   loud as the page title above it. Styled by id, because the id is already
   there and doing a job: both toggle_fact() and show_fact() find this block by
   it, so there is nothing to add to the markup. */
#istanga #fact_div_head {
	display: block;
	text-decoration: none;
}
#istanga #fact_div_head h2 {
	margin: 8px 0 4px;
	font-family: var(--aid-font-titlu);
	font-size: 13px;
	letter-spacing: var(--aid-titlu-spatiere);
	text-transform: none;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
#istanga #fact_div_head:hover h2 { color: var(--aid-aur); }
/* "E nevoie de câteva date minime pentru a putea cumpăra cu cardul." This is a
   real warning -- it is the reason the button below will not pay -- so it keeps
   its red and gets a plate that says a condition is unmet, rather than being
   eleven pixels of red text under a heading. */
/* plățile oprite din panou (cumparare_credite = 0): un singur rând, în locul
   pachetelor, cu drumurile gratuite spre credite */
#istanga .aid-cump-oprit {
	margin: 12px 4px 18px;
	padding: 14px 16px;
	border-radius: var(--aid-raza);
	border: 1px solid rgba(255, 204, 0, 0.35);
	border-left: 3px solid var(--aid-aur);
	background: rgba(255, 204, 0, 0.06);
	font-size: 13px; line-height: 19px; color: var(--aid-text);
}
#istanga .aid-cump-oprit strong { color: var(--aid-aur); }
#istanga .aid-cump-oprit a { color: var(--aid-aur); }
#istanga .aid-cump-lipsa {
	margin: 4px 0 0;
	padding: 6px 10px;
	border-radius: var(--aid-raza);
	border-left: 2px solid #ff6a58;
	background: rgba(120, 20, 14, 0.22);
	font-size: 11px;
	line-height: 16px;
	color: #ff9c8e;
}
/* The five fields. `width="100%" align="center"` on the table and
   `align="center"` on every row centred each label over its own field, which
   made a five-field form read as a poster. Labels right against their fields,
   fields left, one column each. */
#istanga .aid-cump-fact {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
}
#istanga .aid-cump-fact td { padding: 2px 6px; font-size: 12px; }
#istanga .aid-cump-fact td:first-child {
	width: 40%;
	text-align: right;
	color: var(--aid-text-slab);
}
#istanga .aid-cump-fact input[type="text"] { width: 100%; max-width: 240px; }
/* PE TELEFON, 16px. Sub atât, Safari mărește pagina în clipa în care pui
   degetul pe casetă: ecranul sare, tastatura urcă peste rândul pe care tocmai
   îl atinseseși, și omul renunță la mijlocul adresei. Aceeași lecție ca la
   `vinde.php`, în locul unde renunțarea costă o plată. */
@media (pointer: coarse) {
	#istanga .aid-cump-fact input[type="text"] { font-size: 16px; padding: 6px 8px; }
	#istanga .aid-cump-fact td { font-size: 13px; }
}
#istanga .aid-cump-fact-jos { text-align: center; padding-top: 6px; }
#istanga .aid-cump-fact-nota { text-align: left; margin: 8px 0 0; }

/* CASETA CARE LIPSEȘTE (20 septembrie 2026).
 *
 * „poate si cu un border rosu pe ce nu e completat."
 *
 * Nu numai chenarul: chenarul singur e greu de văzut pe un fundal închis, iar
 * cine nu distinge roșul de verde nu-l vede deloc. Deci și un fundal, tot
 * roșu-stins, care se schimbă la culoarea obișnuită în clipa în care pui
 * cursorul acolo -- altfel scrii într-o casetă care ți se pare stricată. */
#istanga .aid-cump-fact input[type="text"].aid-cump-fact-gol {
	border: 1px solid #ff6a58;
	background: rgba(120, 20, 14, 0.18);
}
/* La focus, fundalul revine la normal -- scrii într-o casetă obișnuită -- dar
   chenarul rămâne roșu: câmpul tot nu e completat până nu scrii în el, iar dacă
   se face auriu în clipa în care pui cursorul acolo, semnul dispare exact când
   e nevoie de el. */
#istanga .aid-cump-fact input[type="text"].aid-cump-fact-gol:focus {
	background: rgba(0, 0, 0, 0.35);
}
/* Ce anume e greșit, scris în cuvinte, sub titlu. */
#istanga .aid-cump-fact-erori {
	margin: 4px 0 0;
	padding: 6px 10px 6px 26px;
	border-radius: var(--aid-raza);
	border-left: 2px solid #ff6a58;
	background: rgba(120, 20, 14, 0.22);
	font-size: 11px;
	line-height: 17px;
	color: #ff9c8e;
	text-align: left;
}

/* DIALOGUL DE LA BUTONUL DE CARD.
 *
 * Aceeași așezare ca `.aid-dialog-fundal`, dialogul obișnuit al jocului: fixed,
 * inset 0, fundal întunecat. Nu e `aidVeste()` fiindcă `cumpara.php` nu încarcă
 * js/aiddialog.js, iar pagina de plată nu e locul unde să adaugi un fișier de
 * JavaScript ca să spui o propoziție -- deci are markup-ul lui, aici. z-index-ul
 * stă sub 1200 (dialogul jocului) și peste restul paginii.
 *
 * `display` îl aprinde JavaScript-ul (`flex`), deci aici e `none`. */
#istanga .aid-fact-popup,
.aid-fact-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1100;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.62);
}
#istanga .aid-fact-popup-cutie,
.aid-fact-popup-cutie {
	max-width: 380px;
	padding: 16px 18px;
	border-radius: var(--aid-raza);
	border: 1px solid rgba(255, 204, 0, 0.35);
	background: #1a1513;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
	text-align: left;
}
#istanga .aid-fact-popup-cutie h3,
.aid-fact-popup-cutie h3 {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 20px;
	color: var(--aid-aur);
}
#istanga .aid-fact-popup-cutie p,
.aid-fact-popup-cutie p {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 19px;
	color: var(--aid-text);
}
#istanga .aid-fact-popup-mic,
.aid-fact-popup-mic { font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-fact-popup-butoane,
.aid-fact-popup-butoane {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 12px 0 0;
}
/* savon() painted the Save button from JavaScript the moment you typed --
   background, padding and colour, three inline styles, which is the one place
   this stylesheet cannot reach. The port swapped those three lines for this
   class, and the green it asks for is the theme's commit green rather than the
   #4ccc5d somebody picked in 2014: saving your invoice details is exactly the
   kind of "yes, do it" the green was reserved for. */
#istanga input[type="submit"].aid-cump-salveaza {
	--aid-btn-sus: #56c65e;
	--aid-btn-mij: #1f8c37;
	--aid-btn-jos: #0c4a1c;
}

/* ------------------------------------------------------------- the packages
 *
 * The table becomes the grid and the rows become the cards. `auto-fit` with a
 * 150px floor rather than a fixed column count: the panel is 540-ish wide on a
 * desktop and gets three across, a narrow window gets two, a phone gets one,
 * and nobody has to pick a breakpoint. */
#istanga table.aid-cump-pachete {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	line-height: 155%;
	font-size: 11px;
	color: var(--aid-text);
}
#istanga table.aid-cump-pachete > tbody {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}
/* PE TELEFON, UNUL SUB ALTUL (20 septembrie 2026).
   „sa verifici aspectul pe mobil - sa afisam pe o coloana cardurile (unul pe
    coloana, unul sub altul)"
   `auto-fit` cu podea de 160px dă două coloane la 390px lățime, iar un card cu
   patru rânduri de cifre și un buton la 170px nu mai e un card, e o listă
   înghesuită. Sub 520px, o singură coloană. */
@media (max-width: 520px) {
	#istanga table.aid-cump-pachete > tbody { grid-template-columns: 1fr; }
	#istanga .aid-cump-premium { gap: 10px; padding: 10px 12px; }
	#istanga img.aid-cump-premium-poza { width: 48px; height: 48px; }
}
/* THE CARD, AND ITS RING.
 *
 * Straight out of .tart, including the reason: "nu trebuie schimbat background
 * la onmouseover. e suficient joaca din bordura si glow". The outline goes from
 * a dim gold to a bright one and the glow arrives; the fill does not move.
 * An outline rather than a border so that nothing inside the card can paint
 * over it -- outlines are drawn after every descendant.
 *
 * `justify-content: space-between` and the `margin-top: auto` on the pay cell
 * below are what make seven cards of different text lengths line their buttons
 * up: the price and the credits sit at the top, the button sits on the floor of
 * the card whatever is above it. */
#istanga tr.aid-cump-pachet {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 12px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	outline: 1px solid rgba(255, 204, 0, 0.20);
	outline-offset: -1px;
	box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.10);
	text-align: center;
	transition: outline-color 120ms linear, box-shadow 120ms linear;
}
#istanga tr.aid-cump-pachet:hover {
	outline-color: rgba(255, 204, 0, 0.62);
	box-shadow:
		inset 0 1px 0 rgba(255, 226, 178, 0.12),
		0 0 9px rgba(255, 190, 30, 0.20);
}
#istanga tr.aid-cump-pachet > td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
/* WHAT IT COSTS -- the heading of the card, and the thing being compared, so it
   is the biggest and the only gold. The markup had it as a 16px span inside a
   <strong> inside a <div class="galben">, followed by a colon padded with two
   non-breaking spaces; the colon was pointing sideways at the credits column
   and there is no sideways any more. */
#istanga .aid-cump-lei {
	font-family: var(--aid-font-titlu);
	font-size: 12px;
	letter-spacing: var(--aid-titlu-spatiere);
	color: var(--aid-aur-stins);
}
#istanga .aid-cump-suma {
	font-size: 26px;
	font-weight: bold;
	line-height: 30px;
	color: var(--aid-aur);
	text-shadow: var(--aid-titlu-umbra);
}
/* WHAT YOU GET. Second line, plain, because it is the same unit on all seven
   cards -- what varies is the number, and the number is already bold. */
#istanga .aid-cump-credite {
	margin-top: 2px;
	font-size: 12px;
	color: var(--aid-text);
}
#istanga .aid-cump-credite strong {
	font-size: 14px;
	color: var(--aid-text-tare, #e6ecdd);
	font-variant-numeric: tabular-nums;
}
/* THE FOOT OF THE CARD: the bonus, the button, the marks. `margin-top: auto`
   is what pins it to the bottom, so the seven buttons land on one line however
   long the text above them runs. */
#istanga .aid-cump-plata {
	margin-top: auto;
	padding-top: 8px;
}
/* CE PRIMEȘTI PE DEASUPRA, ȘI CÂT FACE ÎN TOTAL (20 septembrie 2026).
 *
 * „25 lei / 7500 credite / + bonus 2250 credite / Total: 9750 credite"
 *
 * Bonusul era o notiță lipită de buton, în aceeași celulă cu el. E argumentul
 * pachetului mai mare -- 30% la 25 de lei, 54% la 500 -- deci e o cifră, nu o
 * paranteză, și stă pe rândul ei. Verdele îl separă de aur (prețul) și de alb
 * (ce plătești): trei culori, trei roluri.
 *
 * Totalul e ce cumperi de fapt, deci e scris cu culoarea textului tare și cu
 * o linie deasupra: închide socoteala, nu o continuă. */
#istanga .aid-cump-bonus {
	margin-top: 2px;
	font-size: 11px;
	color: var(--aid-text-slab);
}
#istanga .aid-cump-bonus strong {
	font-size: 13px;
	color: #6fc46a;
	font-variant-numeric: tabular-nums;
}
#istanga .aid-cump-total {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid rgba(255, 204, 0, 0.16);
	font-size: 11px;
	color: var(--aid-text-slab);
}
#istanga .aid-cump-total strong {
	font-size: 14px;
	color: var(--aid-text-tare, #e6ecdd);
	font-variant-numeric: tabular-nums;
}
/* Pachetele de 200 și 500 aduc cont Premium pe rundă. Scria într-un rând de
   text mărunt sub tabel, de două ori, cu un asterisc care trimitea în jos --
   acum scrie pe cardul care o face, fiindcă acolo se ia decizia. */
#istanga .aid-cump-stea {
	margin-top: 6px;
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aid-aur-stins);
}
#istanga .aid-cump-stea strong { color: var(--aid-aur); }
#istanga tr.aid-cump-pachet-premium {
	outline-color: rgba(255, 204, 0, 0.42);
	background:
		linear-gradient(180deg, rgba(255, 204, 0, 0.07) 0%, rgba(255, 204, 0, 0) 60%),
		rgba(0, 0, 0, 0.26);
}

/* BUTONUL NU MAI E O POZĂ.
 *
 * „inlocuim pngul cu un buton cu fundal verde si text alb: Cumpără"
 *
 * `card.png` era o imagine de 2010 cu un `onClick` pe ea: se scala prost pe
 * ecranele de azi, nu avea stare de focus, nu se putea apăsa cu tastatura și un
 * cititor de ecran nu avea ce să anunțe. Acum e un <button>, deci moștenește
 * tot ce știe butonul jocului -- muchia, apăsarea, inelul -- și primește doar
 * verdele: același verde de „da, fă-o" ca butonul de salvare a facturării, nu
 * un verde nou.
 *
 * Lat cât cardul: e singurul lucru de apăsat de pe el, și pe telefon un buton
 * lat se nimerește cu degetul din prima. */
#istanga button.aid-cump-buton {
	display: block;
	width: 100% !important;
	padding-inline: 8px;
	font-size: 14px;
	/* PASTILA VERDE, PLINĂ.
	   Butoanele jocului sunt pastile goale cu inel auriu: forma aia spune
	   „apasă-mă", și e bine că o spun toate la fel. Aici e singurul buton din
	   joc care ia bani, iar el are voie să spună mai mult decât atât -- deci
	   aceeași pastilă, dar plină, cu verdele de „da, fă-o" (același cu al
	   butonului de salvare a facturării) și text alb. Nu inventez un verde nou
	   și nu schimb forma: doar umplutura.
	   Se scrie ca `background-image`, nu prin `--aid-btn-*`, fiindcă blocul care
	   face pastilele pune `background-image: none` -- variabilele alea nu mai
	   ajung nicăieri. */
	background-image: linear-gradient(180deg, #56c65e 0%, #23913c 55%, #12662a 100%);
	background-color: #1f8c37;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 0 0 1px rgba(255, 255, 255, 0.22),
		0 0 12px -3px rgba(86, 198, 94, 0.55);
}
/* Starea de hover a pastilei generale are specificitate mai mare decât regula
   de deasupra (`:hover:not(:disabled)` = două clase în plus), deci fără rândul
   ăsta butonul redevenea auriu sub cursor. */
#istanga button.aid-cump-buton:hover:not(:disabled) {
	filter: brightness(1.08);
	background-color: #23913c;
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 0 0 1px rgba(255, 255, 255, 0.30),
		0 0 16px -3px rgba(86, 198, 94, 0.75);
}
#istanga button.aid-cump-buton:active {
	transform: translateY(1px);
	background-color: #12662a;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.20),
		inset 0 2px 5px rgba(0, 0, 0, 0.55);
}
#istanga button.aid-cump-buton:focus-visible {
	outline: 2px solid #8fe89a;
	outline-offset: 2px;
}
/* Visa și Mastercard. Un semn de încredere, nu un buton -- pe jumătate luminat,
   ca să spună cine ia cardul fără să concureze cu ce se apasă. */
#istanga img.aid-cump-marci {
	display: block;
	margin: 6px auto 0;
	max-width: 100%;
	height: auto;
	opacity: 0.7;
}

/* ---------------------------------------------------------------- the notes
 *
 * Four rows of small print among the packages: the PREMIUM asterisk twice
 * (once at colspan 4 and once at colspan 5, in the same four-column table --
 * neither was right and neither ever mattered), the worked example with the
 * Netopia banner, and what a Premium account gives you. A colspan means nothing
 * to a grid, so what makes them full width is this: they are the rows that are
 * not cards, and they say so. */
#istanga tr.aid-cump-rand-nota {
	grid-column: 1 / -1;
	display: block;
}
#istanga tr.aid-cump-rand-nota > td {
	display: block;
	padding: 0;
	border: 0;
	box-shadow: none;
}
#istanga .aid-cump-nota {
	padding: 6px 10px;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-slab);
}
#istanga .aid-cump-nota strong { color: var(--aid-text); }
/* CASETA DESPRE PREMIUM (20 septembrie 2026).
 *
 * „sa grupam si sa scoatem in evidenta mai bine, cu un div mai special
 *  mentiunile asta si poate si cu un card al Elixirului Adevarului"
 *
 * Erau patru rânduri de text de 10px împrăștiate printre pachete, dintre care
 * două spuneau exact aceeași propoziție. Acum e o casetă: poza licorii în
 * stânga, textul în dreapta, marginea aurie pe care o are tot ce e Premium în
 * joc. Aceeași lățime ca grila de carduri, fiindcă e rândul care le explică.
 *
 * Poza e `licori/9.png` -- Elixirul Adevărului, exact licoarea despre care
 * vorbește, aceeași pe care o arată `jucator.php`. Are `width`/`height` în
 * marcaj ca să nu sară aranjarea cât se încarcă. */
#istanga .aid-cump-premium {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0 2px;
	padding: 12px 14px;
	border-radius: var(--aid-raza-panou-interior);
	border: 1px solid rgba(255, 204, 0, 0.30);
	background:
		linear-gradient(180deg, rgba(255, 204, 0, 0.08) 0%, rgba(255, 204, 0, 0) 70%),
		rgba(0, 0, 0, 0.30);
	text-align: left;
}
#istanga img.aid-cump-premium-poza {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.35);
	outline: 1px solid rgba(255, 204, 0, 0.22);
	outline-offset: -1px;
}
#istanga .aid-cump-premium-text { min-width: 0; }
#istanga .aid-cump-premium-text h3 {
	margin: 0 0 4px;
	font-family: var(--aid-font-titlu);
	font-size: 14px;
	letter-spacing: var(--aid-titlu-spatiere);
	color: var(--aid-text);
}
#istanga .aid-cump-premium-text h3 span {
	color: var(--aid-aur);
	text-shadow: var(--aid-titlu-umbra);
}
#istanga .aid-cump-premium-text p {
	margin: 0 0 3px;
	font-size: 11px;
	line-height: 16px;
	color: var(--aid-text-slab);
}
#istanga .aid-cump-premium-text p:last-child { margin-bottom: 0; }
#istanga .aid-cump-premium-text strong { color: var(--aid-text); }
/* Banda Netopiei stă singură pe un rând, centrată: e o mențiune legală, deci
   nu se ascunde, dar nici nu concurează cu pachetele. */
#istanga .aid-cump-nota-netopia {
	margin-top: 4px;
	text-align: center;
}
/* The processor's banner, which is a legal notice as much as a picture: it must
   stay legible and it must not be the brightest thing on the page. Its
   `border="0"` came off in the port -- 1998 for "do not draw a blue rectangle
   round my link" -- and the rounding is here so it sits on the panel rather
   than being pasted onto it. */
#istanga img.aid-cump-netopia {
	max-width: 100%;
	height: auto;
	margin: 4px 0;
	border-radius: 4px;
	opacity: 0.9;
}
#istanga img.aid-cump-netopia:hover { opacity: 1; }
/* ========== raporta ========== */
/* ---------------------------- raporta
 *
 *  THE ALLIANCE'S COPY OF A BATTLE -- raporta.php and rapoartea.php.
 *
 *  Almost nothing is needed here, and that is the point. raporta.php is redrawn
 *  from bin/sabloane/raporta.php using the SAME class vocabulary as the personal
 *  report: .aid-raport, .aid-cadru, .aid-cutie, the .aid-verdict band with its
 *  rays, .aid-raport-cand, .aid-armata*, .aid-prada*, .aid-puncte. Every rule
 *  for those is already in the battle-report section above, and the alliance
 *  report deliberately inherits all of it -- two screens that show the same row
 *  of `rapoarte` should not be able to drift apart in the stylesheet either.
 *
 *  What is left is the one thing the alliance report has that the personal one
 *  does not (the banner each side fought under), and three small rules for
 *  rapoartea.php, which stays a `table.tabla` list rather than becoming a
 *  template and therefore cannot reach the .aid-lista family's own selectors.
 * ------------------------------------------------------------------------- */

/* THE BANNER, IN THE ARMY CARD'S HEADER.
 *
 * On raport.php there is nothing to say here: the two sides are "me" and "him",
 * and both are named. On the alliance report the reader is usually neither, and
 * which alliance the OTHER one fought for is half of what an alliance report is
 * for -- it is how you tell a raid from a border skirmish.
 *
 * It sits after the player's name rather than before it, so .aid-armata-nume
 * keeps the `margin-left: auto` that pushes the name to the right; the middot
 * ties the two together as one phrase instead of two labels sharing a row. */
#istanga .aid-armata-alianta {
	font-size: 11px;
	letter-spacing: 0.03em;
	white-space: nowrap;
	color: var(--aid-text-slab);
}
#istanga .aid-armata-alianta::before {
	content: "\00B7";
	margin-right: 5px;
	opacity: 0.6;
}
/* Our own banner, in the gold everything that belongs to the reader is in. The
   verdict band already says which way the battle went for us; this says which
   of the two names on the screen it went that way FOR. */
#istanga .aid-armata-alianta-noi {
	color: var(--aid-aur-stins);
	font-weight: bold;
}


/* ------------------------------------------------- rapoartea.php, the list
 *
 * The alliance's list of battles is still rendered by its own PHP loop, so it
 * is a `table.tabla` carrying a `tr.aid-cap` -- which the rules above already
 * treat as a LIST (7px cells, hairlines, zebra, row hover). These three add
 * only what the loop now puts in the markup and the .aid-lista selectors, being
 * scoped to the rebuilt templates, cannot reach.
 */

/* UNREAD. Was `style=";color:#00FF66;"` written into the row by PHP -- an
   inline colour no stylesheet could beat, in a green that is not one of this
   game's. Same fact as the rebuilt reports list, so the same answer: the
   game's gold, and weight. Kept as a generic .tabla rule rather than a
   rapoartea one, because every old list that still marks unread rows this way
   wants exactly this. */
#istanga table.tabla tr.aid-necitit > td {
	color: var(--aid-aur);
	font-weight: bold;
}

/* THE OUTCOME GLYPH takes over the column that used to hold a row number. The
   glyph itself (.aid-semn / .aid-semn-victorie / -infrangere) is defined with
   the rebuilt lists and is reused unchanged; only the cell needs sizing, and it
   gives up its right padding so the 22px symbol sits against its own column
   rather than floating in the middle of a 38px one. */
#istanga table.tabla td.aid-l-semn {
	width: 22px;
	padding-right: 0;
}

/* THE PAGER used to be a <table align="center"> nested in the last row. It is
   now the same .aid-lista-pagini flex row the rebuilt lists use -- but there it
   is a flex ITEM in .aid-lista-jos, where `margin-left: auto` right-aligns it.
   Inside a <td> it is a block filling the cell, so the centring has to be said,
   and the buttons need the underline taken off them the same way
   `.aid-lista-jos .aid-btn` does. Written for any .tabla list that grows a
   pager, not just this one. */
#istanga table.tabla td > .aid-lista-pagini {
	justify-content: center;
}
#istanga table.tabla td > .aid-lista-pagini .aid-btn {
	text-decoration: none;
}
/* ========== curatenie ========== */
/* ---------------------------- curatenie */

/* ===========================================================================
 *  THE SIX SHOWCASES INSIDE #homeinclude, AND THE THREE RULES THAT REACH THEM
 *
 *  index.php now links the theme (see the fix for index.php). That was the
 *  missing half: homeartefacte, homeartefact, homepotiuni, homepotiune,
 *  homemasini and homehaine already carry `class="borderrosu aid-afara"`, so
 *  aidcadru.css:9623 gives each of them the panel's fill and the panel's ring,
 *  and the `.tablaartefact` card rules at :9827 draw the items exactly as they
 *  are drawn inside the panel. That part needs nothing from this file.
 *
 *  THE CONFLICT THE PUBLIC-PAGES BATCH FLAGGED, AND HOW IT IS ANSWERED
 *
 *  Its note (aidcadru.css, "A NOTE ON THE SIX HOMEPAGE SHOWCASES") says:
 *
 *      "The homepage drops these fragments into #homeinclude, which
 *       homecssv3.css draws as a 400x360 window of light parchment with
 *       color:#513c29 -- so the showcase sits on a LIGHT ground, while the card
 *       above is dark-on-dark. Whoever sweeps index.php has to decide which of
 *       the two the homepage wants."
 *
 *  The card stays dark, and the light window stays light. They do not actually
 *  fight, because `.borderrosu.aid-afara` paints its OWN fill --
 *  `background: var(--aid-camp)` -- rather than relying on what is behind it.
 *  So the showcase is a self-contained dark plate laid inside the parchment
 *  window, which is the same thing it is on the eight standalone pages and the
 *  same thing every panel in the game is. Making #homeinclude dark instead
 *  would have repainted a window that also shows twenty other fragments --
 *  homedefault, homepremii, homelistajuc, homeclasament, homecontact and the
 *  rest -- every one of them written for parchment since 2008. Six against
 *  twenty is not a trade.
 *
 *  `color:#513c29` on #homeinclude is likewise not a problem: it is inherited,
 *  and the plate declares its own `color: var(--aid-text)`, which children take
 *  instead.
 *
 *  WHAT IS A PROBLEM is that homecssv3.css sets colour on ELEMENTS, not just on
 *  the body, and inheritance loses to a rule that names the element:
 *
 *      table { color:#513c29 }      -- so every table in the plate is dark
 *                                      brown on dark stone
 *      h1, h2, h3 { color:#513c29;  -- and so is the showcase's title
 *                   text-transform:capitalize }
 *      a { color:#513c29 }          -- and homehaine's two jump links
 *
 *  css.css, which the eight standalone pages load instead, happens to say
 *  `table { color:#ddd }` and `h1 { color: rgb(255,204,0) }` -- light on dark,
 *  which is why those pages needed none of this. The homepage's sheet says the
 *  opposite, so the three rules are answered here, once, under an #id so they
 *  win without !important and reach nothing outside that one window.
 * ------------------------------------------------------------------------- */

/* The tables. `inherit` rather than a second copy of the colour -- the plate
   states it once and everything structural inside takes whatever it is. Same
   idiom as `#dek table { color: inherit }` further up this file, and for the
   same reason: a table sets its own colour and never asks its parent. */
#homeinclude .aid-afara table,
#homeinclude .aid-afara thead,
#homeinclude .aid-afara tbody,
#homeinclude .aid-afara tr,
#homeinclude .aid-afara td,
#homeinclude .aid-afara th { color: inherit; }

/* The title. Gold, like every other title in the game, and NOT capitalized:
   homecssv3 sets `text-transform:capitalize` on h1/h2/h3, and Romanian is
   never title-cased. h2 is homehaine's "haine pentru el / pentru ea"
   sub-heading; h3 is here for the same reason nothing else needs it, so the
   day a showcase grows one it is already right. */
#homeinclude .aid-afara h1,
#homeinclude .aid-afara h2,
#homeinclude .aid-afara h3 {
	color: var(--aid-aur);
	text-transform: none;
	text-shadow: var(--aid-titlu-umbra);
}
#homeinclude .aid-afara h1 { font-family: var(--aid-font-titlu); }

/* The links. White with a gold hover, which is what css.css gives the same
   markup on the eight standalone pages -- so a showcase reads identically
   whichever door the player came in by. `.rev`, `.alb` and `.rosu` are excluded
   because those three classes MEAN a colour (gold, white, red) and homecssv3
   already sets them correctly for a dark ground; an #id selector would
   otherwise silently outrank them. */
#homeinclude .aid-afara a:not(.rev):not(.alb):not(.rosu),
#homeinclude .aid-afara a:not(.rev):not(.alb):not(.rosu):visited,
#homeinclude .aid-afara a:not(.rev):not(.alb):not(.rosu):active { color: var(--aid-text-tare); }
#homeinclude .aid-afara a:not(.rev):not(.alb):not(.rosu):hover  { color: var(--aid-aur); }

/* And left, not centre. homecssv3 sets `body { text-align:center }` and
   `.includediv { text-align:center }`; css.css sets neither, so the same six
   fragments are left-aligned on the standalone side. The card rules already
   force `text-align:left` on the item name and the description cell one by
   one -- they were written knowing this -- which left only the headings and
   the paragraph centred, and a left-aligned card under a centred title reads
   as a mistake. Said once here instead of six more times up there. */
#homeinclude .aid-afara { text-align: left; }


/* ===========================================================================
 *  THE DEVIL LIGHTS UP WITHOUT JAVASCRIPT, ON EIGHT PAGES
 *
 *  Pass 6b8e/e1 removes `onmouseover="demh();" onmouseout="dem();"` from the
 *  logo on listacampioni, listajuc, listapremii, mesajc, top100runda,
 *  topactual, topfinal and topprofesii. Those two functions did one thing: swap
 *  the img's src between devil22.png and devil22h.png -- a hover state, hand
 *  written, in a script, because in 2008 that was how you did one.
 *
 *  NOT A SECOND IMAGE. The obvious replacement is `#dev:hover { content:
 *  url(devil22h.png) }`, and it is wrong here for a reason that has nothing to
 *  do with taste: writing an image path into this file is the single thing
 *  bin/check-theme.php exists to refuse. devil22h.png is also not in the tree
 *  (there is no imagini/ directory at all -- the art ships separately), so it
 *  could not be verified even if it were allowed.
 *
 *  A brightness filter instead. devil22h.png was never a different picture; it
 *  was the same devil lit up, which is what a highlight sprite always was
 *  before CSS could do it. The glow is the theme's gold, so he answers the
 *  hover the way every other control in the game does.
 *
 *  Scoped to .aid-afara, which those eight pages carry on <body>. main.php's
 *  #dev is a different img (devil23.png, deh()/de()) and is already hidden and
 *  redrawn as brand/dracusor.svg further up this file; the fifteen admin copies
 *  have no hover at all and are left with none. */
.aid-afara #dev {
	transition: filter 120ms linear;
}
.aid-afara a:hover > #dev,
.aid-afara #dev:hover {
	filter: brightness(1.22) drop-shadow(0 0 6px rgba(255, 190, 30, 0.45));
}
@media (prefers-reduced-motion: reduce) {
	.aid-afara #dev { transition: none; }
}
/* ========== panou ========== */
/* ---------------------------- panou
 *
 * public/panou.php -- the administration panel that replaces the twenty files
 * in public/admin/.
 *
 * NOTHING HERE INVENTS A LOOK. The panel is six tabs of lists and forms, and
 * this file is almost entirely a set of pointers at vocabulary that already
 * exists: the tab rail is meniumoderare.php's, the section headers and the
 * number tiles are armata.php's, the tables are `.aid-lista`, the buttons are
 * `.aid-btn`. What is genuinely new is three things and they are all there
 * because an admin screen has them and a player screen does not: a
 * confirmation plate, a state lamp, and a compact key/value table.
 *
 * The whole file is scoped to `#istanga`, like everything else, plus
 * `.aid-panou-pag` where the rule has to beat one of `.aid-lista`'s own.
 * ========================================================================== */


/* ------------------------------------------------------------ the tab rail
 *
 * Byte for byte the shape of `.aid-mod-meniu` above -- a flex row of small
 * gold caps on the theme's stone, rounded at the top two corners only, sitting
 * ON a hairline drawn by the container rather than above it.
 *
 * WHY IT IS A SECOND CLASS AND NOT THE SAME ONE. The moderator strip and this
 * one look identical today and are not the same object: `.aid-mod-meniu` is an
 * include shared by seven separate PAGES and marks the current one by
 * basename, while this rail is six tabs of ONE page and marks the current one
 * by query string. The day either grows a badge -- an unread count on
 * Moderare, say -- only one of them should get it. Sharing the selector would
 * make that a choice between copying the rule out again or changing both.
 *
 * `uppercase`, never var(--aid-titlu-caz): that variable is `capitalize` and
 * would print "Jucatori" beside "Moderare" correctly and then turn any
 * two-word tab into Title Case. Romanian does not title-case. */
#istanga .aid-panou-file {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	margin: 0 0 12px;
	box-shadow: inset 0 -1px 0 rgba(255, 226, 178, 0.22);
}
#istanga .aid-panou-file a {
	padding: 5px 11px;
	border-radius: var(--aid-raza, 2px) var(--aid-raza, 2px) 0 0;
	background: var(--aid-fata-piatra);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	font-family: var(--aid-font-titlu);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--aid-aur-stins, #c69e0c);
}
#istanga .aid-panou-file a:hover { color: var(--aid-aur, #fc0); }
/* The tab you are on: brighter plate, full gold, and a gold edge drawn INSIDE
   the tab as an inset shadow so it lands on the rail's own hairline and reads
   as the tab breaking through it. */
#istanga .aid-panou-file a.aid-panou-acum {
	background: var(--aid-fata-alama);
	color: var(--aid-titlu-culoare, #fc0);
	text-shadow: var(--aid-titlu-umbra);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		inset 0 -2px 0 var(--aid-aur, #fc0);
}


/* ------------------------------------------------------------- the sections
 *
 * A tab is a stack of sections and a section is a titled box. Same header as
 * `.aid-comp-cap` on the army page -- brass plate, rounded at the top only,
 * the body sitting under it -- with a `<small>` allowed on the right for the
 * ids and counts that belong to the title rather than to the body.
 *
 * The box has an outline and a floor rather than a full fill: six of these
 * stacked in one scroll box, each with its own dark panel, reads as six
 * windows into nothing. An outline says "these belong together" at a fraction
 * of the ink. */
#istanga .aid-panou-sec {
	margin: 0 0 14px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.22);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
	overflow: hidden;
}
#istanga .aid-panou-cap {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 5px 10px;
	background: var(--aid-fata-alama);
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
/* The right-hand half of a title -- "personaj 46128 · cont 12827" -- is
   context, not heading. It gets the body font and no shadow, and it is pushed
   to the far end so the name reads on its own. */
/* Si un buton in capul sectiunii ("Inapoi la echipa") merge la celalalt capat,
   din acelasi motiv: titlul se citeste singur, actiunea sta departe de el. */
#istanga .aid-panou-cap > .aid-btn { margin-left: auto; }
#istanga .aid-panou-cap small {
	margin-left: auto;
	font-family: var(--aid-font);
	font-size: 10px;
	font-weight: normal;
	text-shadow: none;
	opacity: 0.72;
}
#istanga .aid-panou-sec > p,
#istanga .aid-panou-sec > .aid-nota { padding-left: 10px; padding-right: 10px; }


/* ------------------------------------------------------- the number tiles
 *
 * `.aid-comp-fisa` from the army page, in a grid that reflows instead of a
 * fixed two columns -- these rows carry between two and six numbers depending
 * on the tab, and auto-fit is the difference between "six tiles" and "four
 * tiles and two orphans on a second line". */
#istanga .aid-panou-cifre {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px;
	padding: 10px;
}
#istanga .aid-panou-fisa {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 9px 4px;
	border-radius: var(--aid-raza-mare);
	background:
		radial-gradient(circle at 50% 12%, rgba(255, 204, 0, 0.10), rgba(0, 0, 0, 0) 68%),
		rgba(0, 0, 0, 0.34);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		inset 0 1px 0 rgba(255, 226, 178, 0.08);
	text-align: center;
}
#istanga .aid-panou-eticheta {
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.62;
}
/* Smaller than the army page's 19px on purpose. Those tiles hold two numbers
   and nothing else; these hold four to six, and several of them are dates and
   whole phrases ("runda s-a incheiat") rather than digits. 15px is the largest
   size at which "2026-09-30 21:00:00" still fits a 96px tile. */
#istanga .aid-panou-fisa strong {
	font-size: 15px;
	line-height: 20px;
	font-weight: bold;
	color: var(--aid-aur);
	font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------- the round's progress
 *
 * One bar, one job: how much of the round is gone. Drawn as a track with an
 * inner fill whose width is the only inline style on the page -- a percentage
 * computed per request cannot be a class, and writing 101 classes to avoid one
 * `style="width:"` is the kind of purity that makes a file worse. */
#istanga .aid-panou-bara {
	height: 6px;
	margin: 0 10px 10px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.45);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}
#istanga .aid-panou-bara > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--aid-aur-stins), var(--aid-aur));
}


/* ------------------------------------------------------------- the forms
 *
 * Every form in this panel is one line of a few short fields and a button, so
 * they are all the same object: a wrapping flex row, labels that stack their
 * own caption over their own input, and the button at the end of the row.
 *
 * The label wraps the input rather than pointing at it with `for`. That is the
 * form of association that cannot go stale: these are rendered inside loops
 * (one per setting, one per joke) and a `for`/`id` pair would need a unique id
 * per iteration, which is exactly the thing that gets copied and not
 * incremented. */
#istanga .aid-panou-formular {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
}
#istanga .aid-panou-formular label {
	display: flex;
	flex-direction: column;
	/* flex-start, NOT the default stretch. A column flex container stretches
	   its children across, so the input took the width of its own CAPTION --
	   "Zile" gave a 30px box and "Nume sau bucata de nume" gave a 350px one,
	   on the same screen, for fields of the same kind. flex-start lets the
	   input be the width its `size` attribute asks for, which is the width the
	   page author actually chose. */
	align-items: flex-start;
	gap: 3px;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
/* The inputs. `.aid-btn { width: auto !important }` further up in this file
   already rescues buttons from the legacy `#istanga input { width: 100% }`
   rule; text fields in a flex row need the same rescue for the same reason,
   and they are not buttons. */
/* SELECT-URILE ERAU SINGURUL CAMP NESTILIZAT DIN PANOU.
   Tabul Cron-uri e primul care are nevoie de ele (ritmul triviei: trei liste
   scurte in loc de trei casute in care se poate scrie orice). Aceleasi culori
   ca la input, dar FARA `appearance: none`: sageata desenata de sistem e mai
   buna decat orice as fi pus eu acolo, si o lista care nu arata a lista e o
   lista pe care n-o deschide nimeni. */
#istanga .aid-panou-formular select {
	padding: 4px 6px;
	border: 1px solid rgba(0, 0, 0, 0.55);
	border-radius: var(--aid-raza);
	background: var(--aid-camp);
	font-family: var(--aid-font);
	font-size: 12px;
	color: var(--aid-text);
	text-transform: none;
	letter-spacing: normal;
}
#istanga .aid-panou-formular select:focus { outline: 1px solid var(--aid-aur-stins); }

#istanga .aid-panou-formular input[type="text"],
#istanga .aid-panou-formular textarea {
	width: auto;
	padding: 4px 6px;
	border: none;
	border-radius: var(--aid-raza);
	background: var(--aid-camp);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 2px rgba(0, 0, 0, 0.45);
	font-family: var(--aid-font);
	font-size: 12px;
	color: var(--aid-text);
	text-transform: none;
	letter-spacing: normal;
}
#istanga .aid-panou-formular input[type="text"]:focus,
#istanga .aid-panou-formular textarea:focus {
	outline: 1px solid var(--aid-aur-stins);
	outline-offset: 0;
}
/* The one form that is not a row: adding a joke. The caption sits over a
   full-width box and the button goes underneath it -- and only the box is
   full width. `align-items: stretch` here made the submit button span all
   600px, which reads as a banner rather than as a button; the label opts back
   into stretching for itself. */
#istanga .aid-panou-formular-lat { flex-direction: column; align-items: flex-start; }
#istanga .aid-panou-formular label.aid-panou-lat {
	width: 100%;
	align-self: stretch;
	align-items: stretch;
}
/* Two classes deliberately, so this beats the `width: auto` the row-form
   inputs get one rule above: that selector is #istanga + one class + one
   element, and a single extra class here is the smallest thing that wins. */
#istanga .aid-panou-formular .aid-panou-arie {
	width: 100%;
	min-height: 90px;
	resize: vertical;
}
/* A delete button standing alone in its own form still belongs to the row of
   tools above it, so the form contributes no padding of its own. */
#istanga .aid-panou-unelte {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0 4px;
	padding: 0 0 4px;
}
#istanga .aid-panou-unelte .aid-panou-formular { padding: 6px 10px; }
/* Delete is pushed to the far end of the tool row. Not a colour trick -- the
   button is already red -- but distance: the thing you cannot undo should not
   sit against the thing you press all day. */
#istanga .aid-panou-periculos { margin-left: auto; }
#istanga .aid-panou-actiune form { display: inline; padding: 0; }
#istanga .aid-panou-legaturi {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px;
}
#istanga .aid-panou-legaturi .aid-btn { text-decoration: none; }


/* ------------------------------------------------- the confirmation plate
 *
 * THE ONE THING ON THE SCREEN. The panel renders this INSTEAD of the tab it
 * came from, so there is exactly one question and two answers -- which is the
 * whole point, and the reason it is not a modal: a modal has a background you
 * can still see and, on a phone, still scroll.
 *
 * Two severities. `atentie` is amber and means "this changes something you
 * would rather have meant": a rename, a ban, the round clock. `pericol` is red
 * and means "this cannot be undone": deleting a player, wiping credits,
 * pruning accounts. Nothing else is allowed a colour, so the red keeps meaning
 * something.
 *
 * Both are drawn as a left edge plus a wash rather than a filled box, the same
 * way `.aid-intro` marks the mascot's advice -- a solid red panel in a dark
 * game reads as an error that has already happened, and this one has not
 * happened yet. */
#istanga .aid-panou-confirm {
	margin: 8px 10px;
	padding: 12px 14px;
	border-radius: var(--aid-raza-panou-interior);
	border-left: 3px solid var(--aid-aur-stins);
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.05), rgba(0, 0, 0, 0) 60%),
		rgba(0, 0, 0, 0.3);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
#istanga .aid-panou-confirm h2 {
	margin: 0 0 8px;
	font-family: var(--aid-font-titlu);
	font-size: 15px;
	font-weight: bold;
	text-transform: none;
	color: var(--aid-titlu-culoare);
	text-shadow: var(--aid-titlu-umbra);
}
#istanga .aid-panou-confirm-text {
	font-size: 12px;
	line-height: 19px;
	color: var(--aid-text);
}
#istanga .aid-panou-confirm-text code { font-size: 11px; opacity: 0.85; }
/* The list of what will be written. Custom bullet because the panel resets
   list styling in places and a disappearing bullet turns an itemised
   consequence list into a paragraph with odd line breaks. */
#istanga .aid-panou-ul {
	margin: 8px 0;
	padding: 0 0 0 16px;
	list-style: none;
}
#istanga .aid-panou-ul li { position: relative; padding: 1px 0; }
#istanga .aid-panou-ul li::before {
	content: "\2013";
	position: absolute;
	left: -14px;
	color: var(--aid-aur-stins);
}
/* CENTRATE. Randul asta e singurul lucru de facut pe ecran -- confirmarea
   inlocuieste corpul tabului dinadins, ca sa nu existe o a doua alegere -- si
   atunci doua butoane lipite de marginea stanga arata ca o bara de unelte,
   nu ca o intrebare care asteapta raspuns. `gap` mai mare din acelasi motiv:
   „Renunta" si „Da, sterge jucatorul" nu trebuie sa fie usor de incurcat. */
#istanga .aid-panou-confirm-jos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin: 16px 0 4px;
	padding: 0;
}
/* Cancel is first and quiet, the action is last and loud. The order is
   deliberate and it is the opposite of the old admin pages, where the only
   button on the page was "Da". */
#istanga .aid-panou-confirm-jos .aid-btn { text-decoration: none; }
#istanga .aid-panou-confirm-jos .aid-btn:first-of-type { opacity: 0.8; }
#istanga .aid-panou-confirm.aid-panou-pericol { border-left-color: #a3151a; }
#istanga .aid-panou-confirm.aid-panou-pericol h2 { color: #ff8a84; text-shadow: none; }


/* ------------------------------------------------------------- the banner
 *
 * What just happened, on the way back from a redirect. Post/redirect/get means
 * the message cannot be carried in the response body, so the page carries a
 * KEY in the query string and looks the sentence up in a table -- which is
 * also why nothing a request supplies can ever be echoed here as though the
 * server had said it. */
#istanga .aid-panou-veste {
	margin: 0 0 10px;
	padding: 7px 10px;
	border-radius: var(--aid-raza);
	border-left: 3px solid var(--aid-aur-stins);
	background: rgba(0, 0, 0, 0.28);
	font-size: 12px;
	line-height: 17px;
	color: var(--aid-text);
}
#istanga .aid-panou-bine { border-left-color: #3f9e46; }
#istanga .aid-panou-rau  { border-left-color: #a3151a; }
/* Used on a <b> inside a table cell as well as here: a number that wants
   noticing. Amber rather than red -- a pending migration is not a failure, it
   is a thing not done yet. */
#istanga .aid-panou-atentie { color: var(--aid-portocaliu); }

/* „Ultimul deploy n-a ajuns la port."
 *
 * O `.aid-nota` obisnuita e centrata, mica si stinsa -- exact tonul potrivit
 * pentru o explicatie de sub un tabel, si exact cel nepotrivit pentru singurul
 * rand din tot panoul care spune ca serverul ruleaza alt cod decat crezi.
 * Deci: aliniata la stanga ca sa se citeasca pe randuri intregi, cu o dunga
 * portocalie in margine ca sa se vada de sus. Fara rosu -- nu s-a stricat
 * nimic, doar a ramas in urma. */
#istanga .aid-port-alarma {
	max-width: none;
	margin: 12px 0 4px;
	padding: 9px 12px;
	border-left: 3px solid var(--aid-portocaliu);
	background: rgba(0, 0, 0, 0.22);
	text-align: left;
	line-height: 17px;
	color: var(--aid-text);
}
#istanga .aid-port-alarma b    { color: var(--aid-portocaliu); }
#istanga .aid-port-alarma code { color: var(--aid-aur-stins); }


/* --------------------------------------------------------------- the lamp
 *
 * on / off, for the site switches and the feature flags. A pill rather than a
 * tick, because half of these read better as a word than as a symbol -- "chat
 * enabled: ✓" needs a second of thought and "chat enabled: pornit" does not.
 *
 * The green is the game's own `--aid-verde`, which is the colour the map uses
 * for land you hold; the off state is deliberately colourless rather than red,
 * because most of these being off is the normal, correct state on dev. */
#istanga .aid-panou-bec {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 9px;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#istanga .aid-panou-bec-pornit {
	background: var(--aid-verde);
	color: #cdf0cf;
}
#istanga .aid-panou-bec-oprit {
	background: rgba(0, 0, 0, 0.4);
	color: var(--aid-text-stins);
}
#istanga .aid-panou-bec-atentie {
	background: rgba(214, 159, 40, 0.35);
	color: #ffe08a;
}
/* fișa-filtru din tabul Bug-uri e link; cea aleasă poartă rama de aur */
#istanga a.aid-panou-fisa { text-decoration: none; color: inherit; }
#istanga .aid-panou-fisa-activ { box-shadow: inset 0 0 0 1px var(--aid-aur), inset 0 1px 0 rgba(255, 226, 178, 0.08); }
/* tabul Bug-uri: un raport = un <details> */
#istanga .aid-bug-rand > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#istanga .aid-bug-rand > summary b { color: var(--aid-text); }
#istanga .aid-bug-nou > summary b { color: var(--aid-aur); }
#istanga .aid-bug-corp { padding: 6px 2px 8px; }
#istanga .aid-bug-text { margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid var(--aid-aur-stins, #c69e0c); background: rgba(0, 0, 0, 0.3); font-size: 13px; line-height: 19px; white-space: normal; }
#istanga .aid-bug-meta { font-size: 11px; line-height: 17px; margin: 0 0 8px; }
#istanga .aid-bug-meta code { font-size: 11px; word-break: break-all; }
#istanga .aid-bug-formular textarea { min-height: 40px; }
#istanga .aid-bug-butoane { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }


/* ------------------------------------------------- lists that are not lists
 *
 * `.aid-lista` gives every body row `cursor: pointer` and a gold hover,
 * because on the inbox and the report list every row IS clickable. Half the
 * tables in this panel are not: a key/value detail table, the read-only server
 * knobs, the row of switches. A pointer over a row that does nothing is a
 * promise the page does not keep, and the gold flash makes a static table look
 * like it is responding.
 *
 * So the test is the attribute the shell actually uses to open a panel. A row
 * with `data-aid-panou` keeps everything `.aid-lista` gives it; a row without
 * one gets its cursor back and keeps its zebra stripe on hover instead of
 * lighting up. Written as two rules rather than one so the even rows do not
 * lose their stripe the moment the mouse crosses them. */
.aid-panou-pag .aid-lista tbody tr:not([data-aid-panou]) { cursor: default; }
.aid-panou-pag .aid-lista tbody tr:not([data-aid-panou]):hover { background: none; }
.aid-panou-pag .aid-lista tbody tr:not([data-aid-panou]):nth-child(even):hover {
	background: rgba(255, 255, 255, 0.035);
}

/* A HEADER ROW IN ONE TONE.
 *
 * `#istanga .aid-cutie .aid-lista thead th` fills the sticky header with
 * `var(--aid-fata-piatra)`, and that token is a `linear-gradient(160deg, ...)`.
 * A gradient is painted per BOX, so every cell draws the whole ramp across its
 * own width: a 40px `#` column shows the top of it and a 220px `Text` column
 * shows all of it, and the header row reads as two or three different greys
 * with the seams at the column boundaries. It is most visible where the widths
 * differ most, which in this panel is every table.
 *
 * The flat mid-stop instead. Same colour family, same theme token, no ramp to
 * be cut up -- and it stays on the `th` rather than moving to the `tr`, because
 * the `th` is the element that is `position: sticky` and a transparent sticky
 * header has rows sliding through it. */
.aid-panou-pag .aid-lista thead th { background: var(--aid-piatra); }

/* The key/value table: a label column that does not grow, and a value column
   that takes everything else. `width: 1%` with `white-space: nowrap` is the
   old trick for "as narrow as the content", and it is still the only one that
   works in a table without measuring anything. */
#istanga .aid-panou-detaliu tbody td:first-child {
	width: 1%;
	white-space: nowrap;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aid-text-stins);
}
/* A link inside a value cell -- the map coordinates, the neighbours on the same
   IP -- was inheriting the browser's default blue, because `.aid-lista` styles
   cells and never had a link inside one. Gold, and only underlined on hover, so
   a table of forty values does not read as a page of links. */
#istanga .aid-panou-detaliu a,
#istanga .aid-panou-sec .aid-nota a {
	color: var(--aid-aur-stins);
	text-decoration: none;
}
#istanga .aid-panou-detaliu a:hover,
#istanga .aid-panou-sec .aid-nota a:hover {
	color: var(--aid-aur);
	text-decoration: underline;
}

/* The knob tables are read-only reference, three or four of them stacked, and
   they are read by scanning down the left column for a name. Tight rows, and
   the group titles carry `.aid-cap` so each table announces what it is. */
#istanga .aid-panou-reglaje { margin-bottom: 10px; }
#istanga .aid-panou-reglaje tbody td { padding: 4px 8px; }
#istanga .aid-panou-reglaje code,
#istanga .aid-panou-detaliu code,
#istanga .aid-panou-setari code {
	font-size: 11px;
	color: var(--aid-aur-stins);
}
/* A key in the left column is a NAME -- `.legacy-db-baseline`,
   `registration_open`, `round_start_day` -- and a name broken across two lines
   at a hyphen stops being one thing you can search for. Only the first cell,
   and only inside a table: the same `<code>` in a paragraph below is prose and
   must wrap like prose. */
#istanga .aid-panou-pag .aid-lista tbody td:first-child code { white-space: nowrap; }
/* The button column of a table sits hard right and does not stretch. */
#istanga .aid-panou-setari td.aid-panou-actiune,
#istanga .aid-panou-bancuri td.aid-panou-actiune {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}
/* A joke is a paragraph, so its cell is the one place in this panel where a
   line may wrap and should still read. */
#istanga .aid-panou-bancuri tbody td { vertical-align: top; line-height: 17px; }

/* The dim voice. Dates, IPs, e-mail addresses, the second half of a sentence
   that only matters when something is wrong -- all present, none of it
   competing with the name in the row beside it. */
#istanga .aid-panou-slab { color: var(--aid-text-slab); font-size: 11px; }


/* ---------------------------------------------------- the page's own frame
 *
 * `.aid-panou-pag` is on the `.aid-cadru`, so the title and the tab rail stay
 * put and only the tab's body scrolls -- the same arrangement as the inbox and
 * the report, and the reason it matters more here: the rail is how you leave
 * the tab you are in, and a rail that scrolls off the top is a rail you have
 * to scroll back up to reach. */
#istanga .aid-panou-pag { padding: 0 0 4px; }
#istanga .aid-panou-pag .aid-lista-titlu { margin-bottom: 8px; }
/* The `.aid-nota` under a section is an explanation of the thing above it, not
   a caption for the page, so it is left-aligned and set close. Several of them
   are three or four lines -- the reason a knob is read-only, the reason a mass
   mailing is not sent from a web page -- and those are the sentences that stop
   the next person re-opening a door on purpose. */
#istanga .aid-panou-sec .aid-nota {
	margin: 0 0 10px;
	text-align: left;
	line-height: 17px;
}
#istanga .aid-panou-sec .aid-nota code { color: var(--aid-aur-stins); }


/* ------------------------------------------------------------- Cron-uri
 *
 * Un rand pe job, si cea mai importanta informatie de pe el e un cerc de 8px.
 *
 * DE CE UN BEC SI NU UN CUVANT. Randul are deja patru coloane de text -- nume,
 * cale, cadenta, ora ultimei rulari -- si intrebarea cu care vine cineva aici
 * e una singura: „merge?". Un al cincilea cuvant ar fi trebuit citit impreuna
 * cu celelalte; culoarea se citeste inainte de orice cuvant. Textul ramane,
 * dar in `title`, pentru cine se opreste si pentru cititoarele de ecran.
 *
 * Patru stari, nu doua: pornit-si-viu, pornit-dar-tacut, oprit-din-panou, si
 * n-a-rulat-niciodata. Ultimele doua arata la fel pentru un log si complet
 * diferit pentru un om -- una e o alegere, cealalta e o intrebare.
 */
/* O cifra care nu e zero si n-ar trebui sa fie: „oprite din panou", „fara semn
   de viata". Aceeasi fisa, doar culoarea cifrei se schimba -- nu vreau un al
   doilea fel de tabla, vreau acelasi obiect care spune ceva. */
#istanga .aid-panou-fisa-atentie strong { color: #e0a50a; }

#istanga .aid-panou-cron tbody td {
	padding: 7px 8px;
	vertical-align: top;
}
#istanga .aid-cron-bec { width: 18px; padding-right: 0 !important; }
#istanga .aid-cron-bec span {
	display: block;
	width: 8px;
	height: 8px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--aid-text-stins);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
#istanga .aid-cron-viu   .aid-cron-bec span { background: #4caf50; box-shadow: 0 0 6px rgba(76, 175, 80, 0.55); }
#istanga .aid-cron-tacut .aid-cron-bec span { background: #e0a50a; box-shadow: 0 0 6px rgba(224, 165, 10, 0.5); }
#istanga .aid-cron-oprit .aid-cron-bec span { background: #a33; box-shadow: none; }

/* Randul oprit se stinge tot, nu doar becul: e singura stare pe care a ales-o
   cineva, si trebuie sa se vada ca randul ala nu mai participa. */
#istanga .aid-cron-oprit td { opacity: 0.5; }
#istanga .aid-cron-oprit .aid-cron-buton { opacity: 1; }

#istanga .aid-panou-cron .aid-l-nume { line-height: 1.35; }
#istanga .aid-cron-cale,
#istanga .aid-cron-linie {
	display: block;
	font-size: 10px;
	color: var(--aid-aur-stins);
	white-space: nowrap;
}
/* Propozitia despre ce face jobul. Mica si stinsa dinadins: se citeste o data,
   cand cauti care e ala, si pe urma niciodata. */
#istanga .aid-cron-face {
	display: block;
	margin-top: 3px;
	font-size: 10px;
	line-height: 1.4;
	color: var(--aid-text-stins);
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
}
/* Cadenta de pe productie, cand difera de a serverului asta. Si mai stinsa
   decat linia de crontab de deasupra ei: e o nota de subsol, nu o a doua
   valoare de citit. */
#istanga .aid-cron-prod { opacity: 0.6; }

#istanga .aid-panou-cron .aid-l-cifra .aid-panou-slab {
	display: block;
	font-size: 10px;
	white-space: nowrap;
}
/* Randul deschis dintr-o lista a panoului -- moderatorul al carui ecran e
   dedesubt. Aceeasi idee ca `.aid-panou-acum` de pe bara de taburi, dar acolo
   regula e legata de bara; aici e un rand de tabel, si nu are ce cauta sub
   acelasi selector. */
#istanga .aid-lista tr.aid-panou-acum > td { background: rgba(255, 204, 0, 0.06); }
/* Dunga aurie doar pe PRIMA celula. Pusa pe `> td` desena cate o dunga la
   inceputul fiecarei coloane -- trei linii verticale in mijlocul tabelului, care
   arata a bordura stricata, nu a rand ales. */
#istanga .aid-lista tr.aid-panou-acum > td:first-child { box-shadow: inset 3px 0 0 var(--aid-aur-stins); }
#istanga .aid-lista tr.aid-panou-acum .aid-l-nume a { color: var(--aid-aur); }

/* NUMELE DINTR-O LISTA A PANOULUI, CAND E LINK.
   Fara asta arata a link albastru subliniat din 1996: `#istanga a` are regula
   lui pentru joc, dar listele panoului sunt un obiect nou si n-aveau niciuna.
   Aceeasi culoare ca textul, subliniere doar la trecerea cu mouse-ul: intr-un
   tabel in care randul intreg e apasabil, o subliniere permanenta pe fiecare
   rand e zgomot. */
#istanga .aid-lista .aid-l-nume a {
	color: var(--aid-text);
	text-decoration: none;
	border-bottom: 1px dotted rgba(255, 226, 178, 0.28);
}
#istanga .aid-lista .aid-l-nume a:hover {
	color: var(--aid-aur);
	border-bottom-color: var(--aid-aur-stins);
}

/* Pulsul cronului, sub ora lucrului. Si mai stins: e raspunsul la alta
   intrebare decat cea pentru care a venit cineva aici. */
#istanga .aid-cron-puls { opacity: 0.55; }

#istanga .aid-cron-buton { width: 1%; white-space: nowrap; }
#istanga .aid-cron-buton form { margin: 0; }

/* Un rand de reglaj pe activitate: cine, doua selecturi, butonul, si ce iese.
   Acelasi `.aid-panou-formular` ca restul panoului -- adaug doar coloana cu
   numele la inceput si propozitia „adica intre X si Y" la sfarsit, care trece
   pe randul ei cand nu mai incape. */
#istanga .aid-viata-rand { align-items: flex-end; padding: 8px 10px; }
#istanga .aid-viata-rand + .aid-viata-rand { border-top: 1px solid rgba(0, 0, 0, 0.4); }
#istanga .aid-viata-cine {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 150px;
	padding-bottom: 3px;
}
#istanga .aid-viata-cine strong { font-size: 12px; color: var(--aid-text); }
#istanga .aid-viata-cine code { font-size: 10px; color: var(--aid-aur-stins); }
/* Ce iese din cele doua numere, scris in cuvinte. `flex-basis: 100%` o trimite
   pe randul ei sub selecturi: e o consecinta, nu un camp, si citita sub ele
   spune exact ce-ai tocmai ales. */
#istanga .aid-viata-iese {
	flex: 1 1 100%;
	font-size: 10px;
	line-height: 1.5;
	color: var(--aid-text-stins);
	text-transform: none;
	letter-spacing: normal;
}
#istanga .aid-viata-iese b { color: var(--aid-aur-stins); }
/* Doua propozitii una sub alta ar fi aratat ca un paragraf rupt. Cea cu
   cuferele e o stare a hartii, nu o consecinta a selecturilor, deci primeste o
   linie deasupra si sta putin mai jos -- ca sa se vada ca raspunde altei
   intrebari decat „adica intre X si Y". */
#istanga .aid-viata-cate {
	margin-top: 4px;
	padding-top: 5px;
	border-top: 1px dashed rgba(255, 255, 255, 0.07);
}

/* -------------------------------------------------------------------- premii
 *
 * Fiecare sursa de premii e o fisa, nu un rand de tabel: „ce se da" e o lista
 * de trei-patru lucruri, iar „cine/cand/de unde se regleaza" sunt propozitii.
 * Intr-un tabel ar fi iesit trei coloane inguste si un rand de sase linii.
 *
 * Doua coloane pe latime, ca ochiul sa prinda premiul si conditia deodata; sub
 * 720px se aseaza una sub alta. */
#istanga .aid-premiu {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
#istanga .aid-premiu:last-child { border-bottom: 0; }
#istanga .aid-premiu-cap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}
#istanga .aid-premiu-cap strong { font-size: 13px; color: var(--aid-aur); }

/* Becul jobului. Un premiu al carui cron e oprit nu se mai da, si asta nu se
   vedea de nicaieri -- deci sta chiar langa nume, si duce in Cron-uri. */
#istanga .aid-premiu-bec {
	padding: 1px 7px;
	border-radius: 9px;
	border: 1px solid;
	font-size: 9px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
#istanga .aid-premiu-on  { color: #7fc47f; border-color: rgba(127, 196, 127, .45); }
#istanga .aid-premiu-off { color: #e06c5a; border-color: rgba(224, 108, 90, .55); background: rgba(224, 108, 90, .1); }

#istanga .aid-premiu-corp {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}
#istanga .aid-premiu-ce {
	flex: 1 1 260px;
	margin: 0;
	padding-left: 16px;
	font-size: 11px;
	line-height: 1.75;
}
#istanga .aid-premiu-ce li { color: var(--aid-text); }
#istanga .aid-premiu-ce b  { color: var(--aid-aur-stins); }

/* „cine / când / se reglează" ca definitii: eticheta scurta in stanga, propozitia
   in dreapta. O lista de definitii chiar asta e, si se citeste pe verticala. */
#istanga .aid-premiu-fise {
	flex: 1 1 320px;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px 10px;
	margin: 0;
	font-size: 10px;
	line-height: 1.6;
}
#istanga .aid-premiu-fise dt {
	color: var(--aid-text-stins);
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
}
#istanga .aid-premiu-fise dd { margin: 0; color: var(--aid-text-stins); }
#istanga .aid-premiu-fise dd b { color: var(--aid-text); }

#istanga .aid-premiu-nota { margin: 8px 0 0; }
#istanga .aid-premiu-rau {
	margin: 8px 0 0;
	padding: 6px 9px;
	border-left: 2px solid #e06c5a;
	background: rgba(224, 108, 90, 0.08);
	font-size: 10px;
	line-height: 1.7;
	color: var(--aid-text-stins);
}
#istanga .aid-premiu-rau b { color: #e8a08f; }
#istanga .aid-panou-rau-text { color: #e06c5a; }
#istanga .aid-premii-balanta { margin-top: 8px; }

/* ------------------------------------------------------- subtaburi si pagini
 *
 * „te-aș ruga să le grupezi sub formă de taburi sus."
 *
 * Aceeasi bara ca `.aid-panou-file`, dar mai mica si fara linia de sub ea: sunt
 * subdiviziunile unei file, nu file noi, si daca ar arata la fel omul n-ar mai
 * sti care e care. Se lipesc de continutul lor, adica au marginea de jos mica. */
#istanga .aid-panou-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
#istanga .aid-panou-sub a {
	padding: 4px 12px;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 11px;
	letter-spacing: .03em;
	color: var(--aid-text-stins);
	text-decoration: none;
	transition: color .14s linear, background .14s linear, border-color .14s linear;
}
#istanga .aid-panou-sub a:hover { color: var(--aid-aur); }
#istanga .aid-panou-sub a.aid-panou-acum {
	color: var(--aid-aur);
	border-color: var(--aid-aur-stins);
	background: rgba(255, 204, 0, 0.08);
}

/* Randul de pagini. Numerele sunt tinte de apasat, deci au aceeasi inaltime ca
   un buton mic; pagina curenta e <b>, nu link, ca sa nu se apese degeaba. */
#istanga .aid-panou-pagini {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-top: 8px;
	font-size: 11px;
}
#istanga .aid-panou-pagini a,
#istanga .aid-panou-pagini b,
#istanga .aid-panou-pagini span {
	min-width: 22px;
	padding: 3px 6px;
	text-align: center;
	border-radius: 3px;
	text-decoration: none;
}
#istanga .aid-panou-pagini a { color: var(--aid-text-stins); }
#istanga .aid-panou-pagini a:hover { color: var(--aid-aur); background: rgba(255, 204, 0, 0.08); }
#istanga .aid-panou-pagini b {
	color: var(--aid-aur);
	border: 1px solid var(--aid-aur-stins);
	font-weight: 600;
}

/* Tintele. Una oprita ramane in lista si se vede ca e oprita -- altfel „unde a
   disparut Baba Dochia?" e o intrebare careia nimic nu-i raspunde. */
#istanga .aid-tinta-nume { width: 220px; }
#istanga .aid-tinte tr.aid-tinta-oprita td { opacity: .5; }

/* Numele e chiar campul de editat: se scrie peste el si se apasa Salvează. Un
   ecran separat pentru un singur cuvant ar fi fost doua pagini in plus pentru o
   litera schimbata. Butonul sta pe acelasi rand, mic si stins, ca sa nu para
   ca randul asteapta ceva de la tine. */
#istanga .aid-tinta-camp form {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}
#istanga .aid-tinta-camp input[type="text"] {
	width: 215px;
	padding: 2px 6px;
	font-size: 11px;
}
#istanga .aid-tinta-camp .aid-btn { opacity: .55; transition: opacity .14s linear; }
#istanga .aid-tinta-camp:hover .aid-btn,
#istanga .aid-tinta-camp input[type="text"]:focus + .aid-btn { opacity: 1; }

/* ------------------------------------------------------------- bataie cu...
 *
 * Tabelul e o legenda, nu o lista de apasat: arata cele cinci obiecte cu poza,
 * formele cuvantului si titlul care ajunge pe chat, iar randul celui activ e
 * marcat cu aceeasi clasa ca „urmatoarea rulare" din Cron-uri. Poza e chiar
 * fisierul pe care il cere jocul (21x21), la marimea lui: daca lipseste de pe
 * server, se vede aici, nu in joc. */
#istanga .aid-bataie select { min-width: 190px; }
#istanga .aid-bataie-lista { margin-top: 8px; }
#istanga .aid-bataie-poza {
	width: 29px;
	padding-right: 0;
	text-align: center;
}
#istanga .aid-bataie-poza img {
	display: inline-block;
	vertical-align: middle;
	image-rendering: auto;
}

/* ---------------------------------------------- cum vorbeste jocul pe chat
 *
 * Acelasi rand ca la ritmuri (nume in stanga, campuri in mijloc, consecinta pe
 * randul de dedesubt), doar ca aici consecinta e chiar mesajul, desenat cu
 * culorile alese. Un select cu cincizeci de nume de culori nu spune nimic
 * despre cum o sa arate; randul de proba spune tot, si de aceea exista si in
 * ecranul de confirmare, nu doar aici.
 *
 * Optiunile isi poarta culoarea lor (`style="color:..."` pe <option>): Chrome
 * si Firefox o deseneaza, iar unde nu se deseneaza ramane lista de nume, care
 * era oricum minimul. */
#istanga .aid-chat-cul { align-items: flex-end; padding: 8px 10px; }
#istanga .aid-chat-cul + .aid-chat-cul { border-top: 1px solid rgba(0, 0, 0, 0.4); }
#istanga .aid-cul-nume { width: 130px; }
#istanga .aid-cul-sel  { max-width: 128px; }

/* Randul de proba. Fundalul e al chatului (negru la 45% peste fundalul
   jocului), nu al panoului: o culoare se judeca pe fundalul pe care va sta,
   altfel galbenul ales pe alama arata altfel decat in joc. */
#istanga .aid-chat-proba {
	flex: 1 1 100%;
	margin-top: 4px;
	padding: 5px 8px;
	background: rgba(0, 0, 0, 0.45);
	border-radius: 3px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: normal;
}
#istanga .aid-chat-nota {
	flex: 1 1 100%;
	margin: 4px 0 0;
	font-size: 10px;
}

/* Crontabul de copiat. `overflow-x: auto` pe containerul lui si nu pe pagina:
   liniile au 140 de caractere fiindca au calea intreaga, si aia e tot rostul
   lor -- o cale scurtata nu se poate lipi in cPanel. */
#istanga .aid-cron-crontab {
	margin: 0;
	padding: 10px;
	overflow-x: auto;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 10px;
	line-height: 1.7;
	color: var(--aid-text-stins);
	white-space: pre;
}

/* ------------------------------------------------------------ narrow panel
 *
 * The panel is 600px on the desktop shell and the mobile work has not started,
 * so this is not a mobile layout -- it is the one breakpoint that keeps the
 * panel usable if the shell narrows before that work lands. Tiles go to two
 * across, the tool row stops trying to push delete to the far end (there is no
 * far end left), and the tab rail wraps to two lines, which it already does. */
@media (max-width: 520px) {
	#istanga .aid-panou-cifre { grid-template-columns: repeat(2, 1fr); }
	#istanga .aid-panou-periculos { margin-left: 0; }
	#istanga .aid-panou-formular label { flex: 1 1 auto; }
	#istanga .aid-panou-formular input[type="text"] { width: 100%; }
}
/* ========== grafice ========== */
/* ---------------------------- grafice
 *
 * public/grafice.php -- the statistics dashboard. Six kinds of thing on this
 * screen and every one of them is new to the stylesheet: a tile of one big
 * number, a bar row, a line with the area under it, a donut, a ranked list of
 * horizontal bars, and a record card.
 *
 * WHAT IS NOT HERE, DELIBERATELY
 *
 * No chart library's stylesheet, because there is no chart library: grafice.php
 * emits finished SVG with the real geometry in it. That decision is what makes
 * this section short -- everything below is colour, weight and motion. The
 * shapes are already correct before a single rule applies, which is also what
 * makes the charts survive with CSS disabled.
 *
 * THE TAB STRIP IS BORROWED, NOT REBUILT. .tabdiv / .tab / .tabactiv are the
 * game's own, restyled once further up this file for licitatii.php, adaugal.php
 * and premium.php. This screen uses the same three classes and adds exactly one
 * rule: those three pages float their tabs with an inline style, and a new file
 * has no business carrying that in, so the strip becomes a flex row.
 * ========================================================================= */


/* ------------------------------------------------------------- the palette
 *
 * Six hues, and the constraint that chose them is the panel: --aid-camp is
 * rgb(17, 32, 9) at 0.8 over a landscape -- a near-black with a green cast. So
 * every series colour has to be light enough to carry on that, and none of them
 * may be a green in the same family as the ground, or a bar sitting on it will
 * read as a hole rather than a quantity.
 *
 * --aid-g-1 IS THE GAME'S GOLD, unchanged, because the first series on the
 * first chart should be the colour the player already reads as "the number that
 * matters" -- it is the colour of every title and every total in the game.
 *
 * The other five are spaced round the wheel from it, and they are the same
 * five whatever the chart, so a colour means the same thing on every tab: 4 is
 * attack and loss (the game's own orange, calmed down from #F60, which vibrates
 * against gold at these sizes), 3 is arrival and growth, 2 is a cold neutral
 * for a categorical breakdown that has no natural order, 5 is the far tail, 6
 * is the alliances.
 *
 * They are NOT distinguished by hue alone anywhere: every donut slice and every
 * bar row carries its own label with its number beside it, so a reader who
 * cannot separate the orange from the gold still has the list. */
:root {
	--aid-g-1: var(--aid-aur);   /* gold   -- the default series */
	--aid-g-2: #7ea9d8;          /* blue   -- categorical, no order implied */
	--aid-g-3: #8fc45c;          /* green  -- growth, arrivals, the active */
	--aid-g-4: #e07a4e;          /* orange -- attacks, loot, damage */
	--aid-g-5: #b28ad0;          /* violet -- the tail, the dormant */
	--aid-g-6: #63bdb0;          /* teal   -- alliances */

	/* One number for how long a chart takes to arrive. It is a dashboard, not a
	   screensaver: everything below finishes inside a second and a bit and then
	   never moves again until the data does. */
	--aid-g-viteza: 0.55s;
}


/* ------------------------------------------------------------- the scaffolding
 *
 * .aid-grafice is an .aid-cadru, so #istanga's rule already makes it a flex
 * column with .aid-cutie as the one child that scrolls. Nothing here has to
 * repeat that; these are only the gaps between the blocks. */
#istanga .aid-grafice { font-size: 11px; }

/* The strip. `display: flex` replaces the `style="float:left"` the three older
   tab pages carry on every tab -- same result, and the gap comes from the strip
   instead of from a margin on each plate. */
#istanga .aid-g-file {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

#istanga .aid-g-pagina { padding: 0 2px 10px; }

/* A block is one chart with its title. The bottom margin is what separates two
   charts; the title's own rule (.aid-cap, further up) provides the top. */
#istanga .aid-g-bloc { margin: 0 0 14px; }
#istanga .aid-g-bloc > .aid-cap {
	display: block;
	margin: 0 0 6px;
	padding: 3px 7px;
}

/* Two blocks side by side where the pair reads better than the stack: the donut
   next to the numbers it breaks down, the activity ring next to the profession
   list. It wraps rather than shrinking, because a donut squeezed to 80px and a
   list squeezed to four characters are both worse than two rows. */
#istanga .aid-g-blocuri {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
	align-items: flex-start;
}
#istanga .aid-g-blocuri > .aid-g-bloc { flex: 1 1 300px; min-width: 0; }
#istanga .aid-g-blocuri > .aid-g-bloc-ingust { flex: 0 0 168px; }
#istanga .aid-g-blocuri > .aid-g-bloc-lat { flex: 1 1 100%; }

#istanga .aid-g-subcap {
	margin: 12px 0 5px;
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	font-weight: bold;
	text-transform: none;      /* --aid-titlu-caz would title-case the Romanian */
	color: var(--aid-aur-stins);
}

/* The paragraph that says what a chart does not show. There are several of
   them on this screen and they are the most important text on it: a chart
   without its caveat is a chart that lies politely. Dim, small, and never
   between the title and the drawing -- always after, where it reads as a
   footnote rather than as an excuse. */
#istanga .aid-grafice .aid-nota {
	margin: 4px 0 0;
	font-size: 10px;
	line-height: 1.45;
	color: var(--aid-text-slab);
}
#istanga .aid-g-intro { margin: 0 0 12px; }

#istanga .aid-g-gol {
	margin: 6px 0;
	padding: 14px 8px;
	text-align: center;
	color: var(--aid-text-slab);
	background: rgba(0, 0, 0, 0.22);
	border-radius: var(--aid-raza);
}


/* ---------------------------------------------------------------- the tiles
 *
 * Six numbers across the top of the first tab. They are the only part of the
 * screen that refreshes on a timer, so the thing that matters most about them
 * is that they DO NOT MOVE when they change.
 *
 * Two rules make that true. The grid is `1fr` columns, so a tile's width comes
 * from the row and not from its contents -- a figure going from 999 to 1.004
 * cannot widen it. And the figure is set in --aid-font-cifre with
 * `font-variant-numeric: tabular-nums`, so every digit is the same width and a
 * counting animation does not shuffle the ones beside it. Without those two,
 * six tiles ticking every thirty seconds is a row that twitches. */
#istanga .aid-g-fise {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 0 0 8px;
}
#istanga .aid-g-fise-3 { grid-template-columns: repeat(3, 1fr); }

#istanga .aid-g-fisa {
	padding: 7px 8px 8px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.26);
	box-shadow: var(--aid-lumina), var(--aid-adancime);
}
#istanga .aid-g-fisa-et {
	display: block;
	font-size: 9px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--aid-text-slab);
}
#istanga .aid-g-fisa-nr {
	display: block;
	margin-top: 2px;
	font-family: var(--aid-font-cifre);
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	line-height: 1.15;
	color: var(--aid-aur);
	text-shadow: var(--aid-titlu-umbra);
	/* A long figure shrinks rather than wrapping onto a second line, which
	   would make the tile taller than its neighbours for one refresh. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}
#istanga .aid-g-fisa-nota {
	display: block;
	margin-top: 1px;
	font-size: 9px;
	color: var(--aid-text-stins);
}


/* ------------------------------------------------------------- the SVG parts
 *
 * Everything the four PHP drawing functions emit. The elements arrive with
 * their geometry as attributes; these rules only say what colour they are and
 * how thick. */
#istanga .aid-g-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;         /* so a label at x=0 is not clipped in half */
}

/* The two rules. A baseline the bars stand on, and one half-way line so a
   height can be judged without counting pixels. Both are hairlines at low
   alpha: a grid that competes with the data is a grid drawn too dark, and this
   is the most common way a dark-panel chart goes wrong. */
#istanga .aid-g-baza  { stroke: rgba(230, 224, 200, 0.30); stroke-width: 1; }
#istanga .aid-g-grila { stroke: rgba(230, 224, 200, 0.10); stroke-width: 1; }

#istanga .aid-g-et {
	font-family: var(--aid-font);
	font-size: 8.5px;
	fill: var(--aid-text-stins);
}
#istanga .aid-g-max {
	font-family: var(--aid-font-cifre);
	font-size: 9px;
	fill: var(--aid-text-slab);
}

/* A bar grows out of the baseline it stands on.
 *
 * transform-box: fill-box is what makes `transform-origin: bottom` mean the
 * bottom of THIS RECT rather than the bottom of the whole SVG viewport, which
 * is what it means by default and which makes every bar fly up from the floor
 * of the chart. That one line is the difference between bars growing and bars
 * being thrown.
 *
 * The delay is the bar's own index, written into the markup by PHP as --i. At
 * 16ms a bar, twenty-four hours take 380ms to fill in and a forty-bar level
 * histogram takes 640 -- a sweep, not a queue. */
#istanga .aid-g-bara {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: aid-g-creste var(--aid-g-viteza) cubic-bezier(0.2, 0.75, 0.3, 1);
	animation-delay: calc(var(--i, 0) * 16ms);
}
@keyframes aid-g-creste { from { transform: scaleY(0); } }

/* THE RESTING STATE IS THE FINISHED CHART, AND THE ANIMATION RUNS FROM NOTHING
 * TO IT -- never the other way round.
 *
 * Written as a bare `from`, with no `to` and no forwards fill. That is the
 * whole trick behind the reduced-motion block at the bottom of this section: a
 * bar's normal transform is `none`, so switching the animation off leaves a
 * finished bar. Had this been written the usual way -- scaleY(0) in the rule,
 * scaleY(1) in a forwards keyframe -- reduced motion would leave the reader
 * with an empty chart, which is the single most common way this effect is got
 * wrong. */

#istanga .aid-g-linie {
	fill: none;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: var(--len);
	stroke-dashoffset: 0;
	animation: aid-g-traseu 0.9s ease-out;
}
/* --len is the path's own length, summed in PHP. The usual way to get it is
   getTotalLength() from a script, which means the line is wrong until the
   script runs and stays wrong if it never does. */
@keyframes aid-g-traseu { from { stroke-dashoffset: var(--len); } }

/* The area under the line fades in behind it rather than wiping across. Two
   things moving left-to-right at once read as one thing lagging the other. */
#istanga .aid-g-camp {
	opacity: 0.16;
	stroke: none;
	animation: aid-g-apare 0.7s ease-out;
	animation-delay: 0.25s;
}
@keyframes aid-g-apare { from { opacity: 0; } }

#istanga .aid-g-punct {
	animation: aid-g-apare 0.3s ease-out;
	animation-delay: calc(0.35s + var(--i, 0) * 12ms);
}


/* ---------------------------------------------------------------- the donut
 *
 * One <circle> per slice, each with a stroke-dasharray of "slice, remainder"
 * and a dashoffset that walks it round the ring. No arc paths, no
 * large-arc-flag, and a slice the live refresh can rewrite by setting two
 * attributes -- which is why the ring TURNS when the armies change instead of
 * blinking.
 *
 * The -90deg is on the circles and not on the <svg>, so the total in the middle
 * stays the right way up. transform-box: view-box makes 50% 50% mean the middle
 * of the drawing rather than the middle of each circle's own bounding box --
 * which for a circle happens to be the same point, but saying it is what stops
 * this breaking the day somebody changes the radius. */
#istanga .aid-g-gogoasa {
	display: block;
	width: 100%;
	max-width: 150px;
	height: auto;
	margin: 0 auto;
	animation: aid-g-inel 0.6s cubic-bezier(0.2, 0.75, 0.3, 1);
}
@keyframes aid-g-inel { from { opacity: 0; transform: scale(0.86); } }

#istanga .aid-g-inel,
#istanga .aid-g-felie {
	fill: none;
	stroke-width: 13;
	transform: rotate(-90deg);
	transform-box: view-box;
	transform-origin: 50% 50%;
}
#istanga .aid-g-inel { stroke: rgba(0, 0, 0, 0.35); }
/* No round linecap. At small slice sizes a cap overhangs the neighbour and two
   adjacent slices appear to overlap, which on a proportion chart is a drawing
   that contradicts its own arithmetic. */
#istanga .aid-g-felie { stroke-linecap: butt; }

#istanga .aid-g-gogoasa-nr {
	font-family: var(--aid-font-cifre);
	font-variant-numeric: tabular-nums;
	font-size: 20px;
	fill: var(--aid-aur);
}
#istanga .aid-g-gogoasa-et {
	font-family: var(--aid-font);
	font-size: 8px;
	fill: var(--aid-text-stins);
}

/* The legend carries the number as well as the colour, so the ring never has to
   be read by hue alone. */
#istanga .aid-g-legenda {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 10px;
	color: var(--aid-text-slab);
}
#istanga .aid-g-legenda li {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 1px 0;
}
#istanga .aid-g-legenda b {
	margin-left: auto;
	font-family: var(--aid-font-cifre);
	font-variant-numeric: tabular-nums;
	color: var(--aid-text);
}
#istanga .aid-g-pastila {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 2px;
}


/* ------------------------------------------------- the ranked horizontal bars
 *
 * Professions, alliances, the most-attacked list. HTML rather than SVG because
 * two of the three columns are text that should be selectable and, in two of
 * the three lists, a link to a player or an alliance -- none of which an
 * SVG <text> can be.
 *
 * The bar is an <i> inside a track, so the track holds the row's height whether
 * the bar is 2% or 100% wide, and the row cannot change height as it grows in.
 * The grow-in is scaleX about the left edge rather than an animated width:
 * width is a layout property and forty of them animating is forty reflows a
 * frame; a transform is composited. */
#istanga .aid-g-rang { margin: 0; padding: 0; list-style: none; }
#istanga .aid-g-rang-rand {
	display: grid;
	grid-template-columns: 8.5em 1fr 4.5em;
	align-items: center;
	gap: 7px;
	padding: 2px 0;
	border-bottom: 1px solid rgba(230, 224, 200, 0.06);
}
#istanga .aid-g-rang-rand:last-child { border-bottom: 0; }
#istanga .aid-g-rang-nume {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--aid-text);
}
#istanga .aid-g-rang-nume a { color: var(--aid-text); text-decoration: none; }
#istanga .aid-g-rang-nume a:hover { color: var(--aid-aur); }
#istanga .aid-g-rang-bara {
	height: 9px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.28);
	overflow: hidden;
}
#istanga .aid-g-rang-bara i {
	display: block;
	width: var(--lat, 0%);
	height: 100%;
	border-radius: 2px;
	transform-origin: left center;
	animation: aid-g-lat var(--aid-g-viteza) cubic-bezier(0.2, 0.75, 0.3, 1);
	animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes aid-g-lat { from { transform: scaleX(0); } }
#istanga .aid-g-rang-nr {
	font-family: var(--aid-font-cifre);
	font-variant-numeric: tabular-nums;
	font-size: 10px;
	text-align: right;
	color: var(--aid-text-slab);
}


/* ------------------------------------------------------------- record cards */
#istanga .aid-g-record {
	padding: 8px 10px;
	border-radius: var(--aid-raza-mare);
	background: rgba(0, 0, 0, 0.26);
	box-shadow: var(--aid-lumina), var(--aid-adancime);
}
#istanga .aid-g-record-et {
	display: block;
	font-size: 9px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--aid-text-slab);
}
#istanga .aid-g-record-nr {
	display: block;
	margin: 1px 0 2px;
	font-family: var(--aid-font-cifre);
	font-variant-numeric: tabular-nums;
	font-size: 19px;
	color: var(--aid-aur);
	text-shadow: var(--aid-titlu-umbra);
}
#istanga .aid-g-record-cine { display: block; color: var(--aid-text-slab); }
#istanga .aid-g-record-cine a { color: var(--aid-text); }
#istanga .aid-g-record-cine a:hover { color: var(--aid-aur); }

#istanga .aid-g-marunte {
	margin: 0;
	padding: 0 0 0 14px;
	line-height: 1.7;
	color: var(--aid-text-slab);
}
#istanga .aid-g-marunte b { color: var(--aid-text); }
#istanga .aid-g-marunte a { color: var(--aid-text); }
#istanga .aid-g-marunte a:hover { color: var(--aid-aur); }


/* ---------------------------------------------------- the top-bar icon
 *
 * The dashboard's own button, beside the one that opens stats.php. Same shape
 * as every other .aid-ica: the disc and the gold mask are already defined once,
 * up in the icon section, and a new destination only needs its glyph.
 *
 * A rising line over an axis, and not the bar chart .aid-i-statistici already
 * uses -- two neighbouring buttons that are both "little bars" is two buttons
 * nobody can tell apart. That one is the player's own sheet; this one is the
 * world. */
.aid-i-grafice { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5v22h24'/%3E%3Cpath d='M8 21l6-7 5 4 8-10'/%3E%3Cpath d='M21 8h6v6'/%3E%3C/svg%3E"); }


/* --------------------------------------------------- when movement is refused
 *
 * "Respect prefers-reduced-motion and skip the animation entirely when it is
 *  set." Not "make it slower" -- off.
 *
 * Every animation on this screen was written as a bare `from` keyframe with no
 * `to` and no forwards fill, precisely so that this block can be five lines of
 * `animation: none` and leave the finished chart behind. The bars sit at
 * scaleY(1), the line at dashoffset 0, the area at its real opacity, because
 * those are the values in the ordinary rules and the keyframes only ever
 * departed from them.
 *
 * The counting-up of the numbers is switched off in the script by the same
 * media query -- it writes the final figure straight in. */
@media (prefers-reduced-motion: reduce) {
	#istanga .aid-g-bara,
	#istanga .aid-g-linie,
	#istanga .aid-g-camp,
	#istanga .aid-g-punct,
	#istanga .aid-g-gogoasa,
	#istanga .aid-g-rang-bara i {
		animation: none;
	}
}
/* ========== acasa ========== */
/* ========== acasa ========== */
/* =============================================================================
 *  ACASA v3 -- index.php, THE WHOLE DOCUMENT.
 *
 *  „Ce e pe index.php nu seamana. Trebuie sa fie exact ca in mock, nu?”
 *
 *  It did not, and the reason was the mechanism: the first attempt replaced a
 *  REGION of the 2008 page with $fixes and left the page around it, so the new
 *  hero sat as an 820px box in the middle of the old shell -- the tiled
 *  landscape still behind it, the old panels still under it, and no top bar at
 *  all. index.php is now a TEMPLATE (pass 6b8b, bin/sabloane/index.php): the
 *  prologue above <html> is untouched, and everything from <html> to </html> is
 *  the page Laurentiu approved. So this block is not a patch on homecssv3 any
 *  more -- it is the whole stylesheet for one document, and homecssv3.css is
 *  not loaded on this page at all.
 *
 *  THE PALETTE IS THE MOCK'S, NOT THE THEME'S, and that is deliberate. The
 *  greens and ambers below came out of the game's own 2008 CSS (#034507 /
 *  #006600 / #285428, #FC0 / #F60), but they are declared here rather than
 *  taken from tokens.css because the answer to "must it look exactly like the
 *  mock" is yes, and a theme switch on the marketing page would answer no. The
 *  GOLD is the exception: --aid-aur is the game's own #FC0 and the button is
 *  the same metal as the in-game one, so it comes from the theme.
 *
 *  Everything is scoped to `body.aid-acasa`. Nothing here can reach the game.
 * ========================================================================= */
body.aid-acasa {
	--ac-noapte:    #0A110C;   /* deepest ground */
	--ac-muschi:    #101B12;   /* section ground */
	--ac-panou:     #16241A;   /* card surface */
	--ac-panou-sus: #1D2F21;   /* card surface, raised */
	--ac-muchie:    #2A4030;   /* hairline */
	--ac-muchie-hi: #3D5C45;   /* hairline, emphasised */
	--ac-pergament: #EDE9DC;   /* primary text */
	--ac-salvie:    #A7B8A9;   /* secondary text */
	--ac-salvie-jos:#75887A;   /* tertiary text */
	--ac-chihlimbar:#F0B44A;   /* the one accent */
	--ac-chihlimbar-jos: #C98526;
	--ac-jar:       #E2622B;   /* the colour of warm */
	--ac-viu:       #6FBF73;   /* a round in progress */

	--ac-titlu: Alegreya, Georgia, "Times New Roman", serif;
	--ac-ui:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Verdana, sans-serif;
	--ac-mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

	/* ---------------------------------------------------------- THE PICTURE.
	 * Laurentiu is drawing it. Until it lands the stage is the veil over plain
	 * ground, which is why nothing breaks when the file is missing -- there is
	 * no <img>, only a background.
	 * CHANGE THIS ONE LINE to point at the real picture; the size to draw it
	 * at is at the bottom of this block. */
	/* The picture. It is a THEME asset, so it is a token: public/imagini/ is
	   not in the repository at all -- it lives only on the server -- and a
	   file put there would never be deployed. Override this property to try
	   another picture without touching the theme. */
	--aid-ac-imagine: var(--aid-fundal-acasa);
	/* where the picture is anchored inside the stage. 50% 34% keeps a horizon
	 * drawn a third of the way down on screen at every window width. This is
	 * the property to change if the real picture comes out a different shape. */
	/* 42% rather than 34%: his picture puts a column of little devils walking
	   up the road across the LOWER half, and they are the best thing in it.
	   Pulling the frame down brings them into the stage instead of cropping
	   them off under the fold. */
	--aid-ac-cadru:   50% 42%;

	/* ------------------------------------------------------------- THE VEIL.
	 * „fa acel black mult mai transparent... trebuie sa se vada binisor
	 *  imaginea din spate, dar sa nu deranjeze. e un echilibru pe care il
	 *  gasesc manual.”
	 * Six numbers rather than a baked gradient, every one changeable live:
	 *     document.body.style.setProperty('--voal-jos', '.45')
	 *
	 *   --voal-imagine  how much of the picture comes through. 1 = full.
	 *   --voal-neclar   how far out of focus, in px. Blur costs no darkness,
	 *                   so blur BEFORE you darken.
	 *   --voal-sus      black over the TOP, under the menu bar.
	 *   --voal-centru   black across the MIDDLE, behind the devil. Near zero on
	 *                   purpose: this is the part of the picture the eye reads.
	 *   --voal-jos      black over the BOTTOM, where the button and the small
	 *                   print are. Heaviest, and it has to stay heaviest --
	 *                   lower it and the grey line under the button goes first.
	 *   --voal-jar      the warm glow at his feet. Not black; 0 removes it. */
	--voal-imagine: 0.92;
	--voal-neclar:  1.4px;
	--voal-sus:     0.34;
	--voal-centru:  0.08;
	/* 0.42, not 0.62. The bottom veil exists so the button and the small
	   print stay legible, and at 0.62 it was also erasing the marching
	   devils. The button carries its own dark ring and its own glow, so it
	   survives a lighter ground; the line under it is the thing to watch
	   if this goes lower still. */
	--voal-jos:     0.42;
	--voal-jar:     0.20;

	/* THE HEIGHT IS THE WHOLE DESIGN.
	 * „stagearea e prea mare. trebuie sa intre butonul Joaca in screen din
	 *  prima -> pune stagearea max height 800px”
	 * A cap alone would not have put the button on screen: 800px of stage under
	 * a 96px bar is 896px of page. So the stage is capped at 800 AND told to
	 * give way to the screen it is on, and the FIGURE is sized from that height
	 * rather than from the page's width -- see .aid-ac-figura. */
	--aid-ac-bara:     96px;
	--aid-ac-inaltime: min(800px, calc(100svh - var(--aid-ac-bara)));
	/* everything IN the stage that is not the figure: its padding, the kicker,
	 * the button and the two lines under it. Deliberately generous -- what is
	 * left over is centred and costs nothing, what is missing would be clipped. */
	--aid-ac-restul:   292px;

	margin: 0;
	padding: 0;
	background: var(--ac-noapte);
	color: var(--ac-pergament);
	font-family: var(--ac-ui);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
body.aid-acasa * { box-sizing: border-box; }
body.aid-acasa a { color: var(--ac-chihlimbar); text-underline-offset: 3px; }
body.aid-acasa :focus-visible { outline: 2px solid var(--ac-chihlimbar); outline-offset: 3px; border-radius: 2px; }
body.aid-acasa img { max-width: 100%; }
body.aid-acasa h1,
body.aid-acasa h2,
body.aid-acasa h3,
body.aid-acasa h4 { font-family: var(--ac-titlu); margin: 0; font-weight: 800; text-transform: none; }
body.aid-acasa .aid-ac-lat { max-width: 1240px; margin: 0 auto; padding: 0 26px; width: 100%; }

/* THE PAGE SCROLLED SIDEWAYS ON A PHONE, BY EXACTLY THE WIDTH OF A SCROLLBAR.
 *
 * The legal band in the footer is full-bleed, done the usual way:
 *
 *     margin: 26px calc(50% - 50vw) 0;
 *
 * which is correct in a world with no scrollbars. `vw` measures the VIEWPORT,
 * scrollbar included; `%` measures the element's containing block, which is the
 * viewport MINUS the scrollbar. So the band comes out 15-17px wider than the
 * page every time there is a vertical scrollbar -- about 8px past each edge --
 * and the document grows a horizontal scrollbar to show you the overhang.
 * Invisible at 1240px and impossible to miss at 500.
 *
 * `clip` rather than `hidden`, and this is the part worth remembering: `hidden`
 * turns the element into a scroll container, which silently breaks any
 * `position: sticky` inside it and gives scripts a second thing that can be
 * scrolled. `clip` just clips. It has to sit on <html> -- on <body> alone the
 * measurement above does not change -- so it is scoped with :has() to the
 * public pages, and a browser too old for :has() simply keeps today's
 * behaviour rather than getting a surprise. */
html:has(> body.aid-acasa) { overflow-x: clip; }
body.aid-acasa { overflow-x: clip; }

/* ------------------------------------------------------------------ the bar */
body.aid-acasa .aid-ac-bara {
	position: relative;
	z-index: 20;
	background: #060A07;
	border-bottom: 1px solid var(--ac-muchie);
}
body.aid-acasa .aid-ac-bara .aid-ac-lat {
	min-height: var(--aid-ac-bara);
	padding-top: 16px;
	padding-bottom: 16px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}
body.aid-acasa .aid-ac-meniu { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
body.aid-acasa .aid-ac-meniu-stanga { justify-content: flex-end; }
body.aid-acasa .aid-ac-meniu-dreapta { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
body.aid-acasa .aid-ac-meniu a,
body.aid-acasa .aid-ac-meniu a:visited {
	color: var(--ac-salvie);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
	padding: 9px 13px;
	border-radius: 3px;
	white-space: nowrap;
	transition: color .14s, background .14s;
}
body.aid-acasa .aid-ac-meniu a:hover { color: var(--ac-pergament); background: rgba(255,255,255,.05); }
body.aid-acasa .aid-ac-meniu a.pe { color: var(--ac-pergament); }

/* THE LOGO SLOT IS THE REAL LOGO NOW.
 * logoaidraci-alb.png is 417x121, so 3.45:1. The slot is height-led rather
 * than width-led -- `height: 60px; width: auto` -- so that the next version he
 * draws drops in at whatever width it happens to be and nothing has to be
 * measured again. 60px tall is what the 96px bar can carry with 18px of air
 * above and below. max-width stops a very wide logo from eating the menu. */
body.aid-acasa .aid-ac-sigla { display: block; flex: none; text-decoration: none; line-height: 0; }
body.aid-acasa .aid-ac-sigla img {
	display: block;
	height: 60px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
}
/* the top-right door. It is the in-game „inel” button: a gold ring on a dark
 * fill, which is the quiet member of the same family as JOACĂ ACUM. */
body.aid-acasa a.aid-ac-intra,
body.aid-acasa a.aid-ac-intra:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border: 1px solid var(--ac-chihlimbar-jos);
	border-radius: 999px;
	background: rgba(240,180,74,.07);
	color: var(--ac-chihlimbar);
	font: bold 13.5px var(--ac-ui);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .14s, border-color .14s;
}
body.aid-acasa a.aid-ac-intra:hover { background: rgba(240,180,74,.14); border-color: var(--ac-chihlimbar); color: var(--ac-chihlimbar); }

/* ==================================================================== the stage */
body.aid-acasa .aid-ac-scena {
	position: relative;
	overflow: hidden;
	/* a flex row with one child, so that child STRETCHES to the stage's height:
	   `min-height: 100%` on it would resolve against an auto-height parent and
	   do nothing, which leaves the first screen sitting at the top with half a
	   stage of nothing under it. */
	display: flex;
	/* min-height, not height: exactly as tall as the cap says while the content
	   fits -- which is the case the figure's size is solved for -- and GROWS
	   rather than clipping if a line of Romanian wraps one line further than the
	   estimate above. A stage that swallows its last paragraph is a worse bug
	   than a stage twenty pixels taller than asked for. */
	min-height: var(--aid-ac-inaltime);
	height: auto;
}
/* the picture and the darkening are two elements on purpose: tuning the veil
   then never touches the picture's own opacity or its blur */
body.aid-acasa .aid-ac-pamant {
	position: absolute;
	top: -8%; right: -6%; bottom: 0; left: -6%;
	z-index: 0;
	background: var(--aid-ac-imagine) var(--aid-ac-cadru) / cover no-repeat;
	opacity: var(--voal-imagine);
	filter: blur(var(--voal-neclar));
	-webkit-mask-image: radial-gradient(80% 74% at 50% 40%, #000 0%, rgba(0,0,0,.82) 62%, transparent 96%);
	        mask-image: radial-gradient(80% 74% at 50% 40%, #000 0%, rgba(0,0,0,.82) 62%, transparent 96%);
	will-change: transform;
}
body.aid-acasa .aid-ac-voal {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(46% 40% at 50% 78%, rgba(226,98,43,var(--voal-jar)) 0%, rgba(226,98,43,0) 68%),
		linear-gradient(180deg,
			rgba(10,17,12,var(--voal-sus))    0%,
			rgba(10,17,12,var(--voal-centru)) 34%,
			rgba(10,17,12,var(--voal-jos))    82%,
			var(--ac-noapte)                 100%);
}
/* a column: a fixed line at the top, a fixed block at the bottom, the figure
   between them at whatever size the arithmetic allows */
body.aid-acasa .aid-ac-scena-in {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(10px, 1.8vh, 22px) 26px clamp(12px, 2vh, 26px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
body.aid-acasa .aid-ac-kicker {
	flex: none;
	margin: 0 0 clamp(2px, .8vh, 10px);
	font: 500 12px var(--ac-mono);
	letter-spacing: .30em;
	text-transform: uppercase;
	color: var(--ac-chihlimbar);
	text-shadow: 0 2px 10px rgba(0,0,0,.95);
}

/* ------------------------------------------------------------------ the ribbon
 *  „Singurul lucru care nu ti-a iesit inca perfect este panglica aceea...
 *   Foloseste daca poti acea panglica.”
 *  So the drawn one is gone and this is his: red cloth with a gold rim, folded
 *  tails with swallowtail notches, a shallow arc. The word is set ON it, in the
 *  page's own type, on a path measured off the band -- set straight it would
 *  ride off the cloth toward the ends.
 *  It is the width of the figure and it sits on his horns, and it lives INSIDE
 *  the figure so that it leans when he does. */
body.aid-acasa .aid-ac-panglica-box { flex: none; width: 100%; margin: 0 0 -5% 0; }
body.aid-acasa .aid-ac-panglica { display: block; width: 100%; height: auto; overflow: visible; }
body.aid-acasa .aid-ac-pText {
	font-family: var(--ac-titlu);
	font-weight: 900;
	fill: #FFFFFF;
	paint-order: stroke;
	stroke: #7C0A10;
	stroke-width: 6;
	stroke-linejoin: round;
	filter: drop-shadow(0 3px 4px rgba(60,2,6,.75));
}

/* ------------------------------------------------------------------ the figure
 *  SIZED FROM THE STAGE'S HEIGHT, not from the page's width. That is backwards
 *  from every other block here, and it is the trick behind the 800px cap: take
 *  the stage's height, subtract everything that is not the figure, and what is
 *  left is how TALL the banner and the devil may be together -- so divide by
 *  the stack's own ratio and you have how WIDE. He shrinks on a laptop and
 *  grows on a desktop, and the button never moves below the fold.
 *
 *  1.478 is not a guess. His ribbon draws at 0.258 of its own width (it is a
 *  flat, wide banner -- the drawn one was 0.578), he draws at 1.5523 of his,
 *  he is 86% as wide as the ribbon, and the two overlap by 0.115:
 *  0.258 + 0.86 x 1.5523 - 0.115 = 1.478. Change the overlap, his share or the
 *  ribbon's viewBox and this number changes with them. */
body.aid-acasa .aid-ac-figura {
	position: relative;
	flex: none;
	display: flex;
	margin: 0 auto;
	width: min(88%, 460px, calc((var(--aid-ac-inaltime) - var(--aid-ac-restul)) / 1.478));
}
body.aid-acasa .aid-ac-figura::before {
	content: "";
	position: absolute;
	top: -12%; right: -26%; bottom: -4%; left: -26%;
	z-index: -2;
	pointer-events: none;
	background: radial-gradient(52% 52% at 50% 46%, rgba(226,98,43,.22) 0%, rgba(226,98,43,0) 70%);
}
/* the banner and the devil together: this is the element the cursor tilts, so
   the banner leans with him instead of hovering over a leaning devil */
body.aid-acasa .aid-ac-duo {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	will-change: transform;
}
body.aid-acasa .aid-ac-drac { position: relative; width: 86%; margin: 0 auto; aspect-ratio: 411 / 638; }
body.aid-acasa .aid-ac-lean,
body.aid-acasa .aid-ac-in { display: block; height: 100%; }
body.aid-acasa .aid-ac-drac-art {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 16px 24px rgba(0,0,0,.62));
}
/* the <img> is the hook js/js.js writes to, not a picture anybody sees: dem()
   and demh() do `getElementById('dev').src = ...` and are called from fragments
   this page still shows. Remove the element and those throw. */
body.aid-acasa .aid-ac-dev { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* a shadow, not a box: a box would make him an illustration on a page, and he
   is the page */
body.aid-acasa .aid-ac-talpa {
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	width: 92%;
	height: 40px;
	border-radius: 50%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(226,98,43,.34) 0%, rgba(226,98,43,.10) 46%, rgba(226,98,43,0) 100%);
}
/* behind him, not on him: a stamp is struck on the paper, and his tail passing
   over it is what says so */
body.aid-acasa .aid-ac-sigilii { position: absolute; width: 0; height: 0; overflow: hidden; }
body.aid-acasa .aid-ac-stampila {
	position: absolute;
	left: -34%;
	bottom: 2%;
	width: 40%;
	max-width: 128px;
	z-index: -1;
	transform: rotate(-13deg);
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.95));
}
body.aid-acasa .aid-ac-sigiliu { display: block; color: var(--ac-chihlimbar); opacity: .9; font-family: var(--ac-mono); }

/* -------------------------------------------------------- the mascot's own art
 *  The SVG arrives with its <style> stripped -- it declares .st0 .. .st14 with
 *  no scope, and this is a whole page, not a standalone image (the ribbon on
 *  the same page carries .st0 .. .st28 of its own, which is why those became
 *  fill attributes when the file was copied into the theme). The fourteen fills
 *  are re-declared here UNDER the drawing, so they cannot touch anything else,
 *  and so a theme cannot reach them either: "dracusor -- little devil -- will
 *  not change. that is our mascot, logo, brand."
 *
 *  THE RULE THE ANIMATION IS BUILT AROUND: to move part of him, WRAP it, never
 *  transform it. Every drawn element carries an Illustrator
 *  `transform="matrix(...)"`, and a CSS transform REPLACES that attribute
 *  instead of composing with it -- the eyes were once animated directly and
 *  rendered as a flat band, because ten rotation matrices were thrown away the
 *  instant the animation applied. Groups nest; matrices below them survive. */
body.aid-acasa .aid-ac-drac-art .st0  { fill: #EC282C; }
body.aid-acasa .aid-ac-drac-art .st1  { fill: #6B1F20; }
body.aid-acasa .aid-ac-drac-art .st2  { fill: #454446; }
body.aid-acasa .aid-ac-drac-art .st3  { fill: #6B696B; }
body.aid-acasa .aid-ac-drac-art .st4  { fill: #141516; }
body.aid-acasa .aid-ac-drac-art .st5  { fill: #23191A; }
body.aid-acasa .aid-ac-drac-art .st6  { fill: #D8DEC3; }
body.aid-acasa .aid-ac-drac-art .st7  { fill: #F0584B; }
body.aid-acasa .aid-ac-drac-art .st8  { fill: #FFFFFF; }
body.aid-acasa .aid-ac-drac-art .st9  { fill: #A82124; }
body.aid-acasa .aid-ac-drac-art .st10 { fill: #C32227; }
body.aid-acasa .aid-ac-drac-art .st11 { fill: #8B1E21; }
body.aid-acasa .aid-ac-drac-art .st12 { fill: #959595; }
body.aid-acasa .aid-ac-drac-art .st13 { fill: #CAD99D; }
body.aid-acasa .aid-ac-drac-art .st14 { fill: #C0D366; }

/* he breathes about the FEET, not the centre: about the centre he sinks into
   the floor and rises off it, which reads as zooming */
body.aid-acasa .aid-ac-drac-art .dr-corp {
	animation: aid-ac-respira 3.9s ease-in-out infinite;
	transform-origin: 289px 718px;
}
/* both eyes close together, about the line BETWEEN them, in view-box units:
   every part has to collapse toward the same line or the eye comes apart */
body.aid-acasa .aid-ac-drac-art .dr-ochi { transform-box: view-box; transform-origin: 345px 241px; }
body.aid-acasa .aid-ac-drac.aid-clipeste .dr-ochi { animation: aid-ac-clipeste .19s ease-in-out; }
/* iris, pupil and highlights -- the groups Illustrator already made. The script
   writes a translate here, and both eyes always get the SAME one: eyes that
   drift independently look unwell. */
body.aid-acasa .aid-ac-drac-art .dr-privire { transform-box: view-box; will-change: transform; }
/* THE TAIL. „sa miste si coada... usor din cand in cand”. The origin is the
   root, where it disappears behind his hip, so the swing is a swing and not a
   slide. */
body.aid-acasa .aid-ac-drac-art .dr-coada { transform-box: view-box; transform-origin: 216px 542px; }
body.aid-acasa .aid-ac-drac.aid-coada .dr-coada { animation: aid-ac-coada 2.6s cubic-bezier(.36,0,.28,1); }
/* the idle lean: he shifts his weight. It is NOT a head tilt and cannot be one
   -- the whole silhouette, head included, is a single subpath of one compound
   path, so a rotated head would leave its own black outline behind. */
body.aid-acasa .aid-ac-lean { transform-origin: 50% 94%; }
body.aid-acasa .aid-ac-drac.aid-inclinat .aid-ac-lean { animation: aid-ac-inclina 3.4s ease-in-out; }
body.aid-acasa .aid-ac-drac.aid-sare .aid-ac-in { animation: aid-ac-sare .46s cubic-bezier(.3,1.6,.5,1); }

@keyframes aid-ac-respira { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.008,1.016); } }
/* the eye shuts to scaleY(0), not to the .06 the mascot file ships with: at .06
   the whites survive as a bright sliver and any frame caught mid-blink reads as
   a squint. At 0 only the red lid and the brow are left. */
@keyframes aid-ac-clipeste { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0); } }
/* a lazy swing with a smaller one behind it, so it settles instead of stopping */
@keyframes aid-ac-coada {
	0%   { transform: rotate(0deg); }
	20%  { transform: rotate(-5.6deg); }
	46%  { transform: rotate(3.4deg); }
	68%  { transform: rotate(-1.8deg); }
	86%  { transform: rotate(.7deg); }
	100% { transform: rotate(0deg); }
}
@keyframes aid-ac-inclina {
	0%,100% { transform: rotate(0deg) translateY(0); }
	34%     { transform: rotate(-1.6deg) translateY(-3px); }
	64%     { transform: rotate(-1.1deg) translateY(-1px); }
}
@keyframes aid-ac-sare { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-15px); } 72% { transform: translateY(3px); } }

/* -------------------------------------------------------------- the call to act
 *  „mai rotund la colturi, scoate sageata, mai golden, cu bordura mai
 *   pronuntata.”
 *    rotund   999px, not a number -- the same pill as .aid-pastila.
 *    sageata  gone. JOACĂ ACUM says "this leads somewhere" on its own.
 *    auriu    the in-game button is a gold RING on a dark fill; this is the
 *             same gold turned solid, because it is the loudest button in the
 *             product and the only one on this screen. The ramp is written out
 *             rather than taken from --aid-alama-*, which is GREY in the
 *             default theme and gold only in pergament.
 *    bordura  3px of dark brass outside, a 1.5px light ring inset inside it.
 *             Two edges, not one: a single thick border reads as a frame, an
 *             outer dark edge with an inner light one reads as struck metal. */
body.aid-acasa .aid-ac-fapta {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(6px, 1vh, 11px);
	margin-top: clamp(4px, 1vh, 14px);
}
body.aid-acasa a.aid-ac-joaca,
body.aid-acasa a.aid-ac-joaca:visited {
	position: relative;
	overflow: hidden;
	display: inline-block;
	padding: clamp(19px, 1.9vw, 25px) clamp(34px, 4.2vw, 62px);
	border: 3px solid #6E5314;
	border-radius: 999px;
	background: linear-gradient(178deg, #FFE9A8 0%, #F6CB55 34%, #DCA02A 68%, #B77E1B 100%);
	color: #2A1A03;
	font: bold clamp(18px, 1.65vw, 23px)/1 var(--ac-ui);
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	box-shadow:
		inset 0 0 0 1.5px rgba(255,247,214,.9),
		inset 0 2px 0 rgba(255,255,255,.55),
		inset 0 -8px 14px -7px rgba(96,66,6,.7),
		0 0 0 1px rgba(0,0,0,.6),
		0 16px 34px -12px rgba(0,0,0,.9);
	animation: aid-ac-jar 3.6s ease-in-out infinite;
	transition: filter .16s linear, transform .09s ease;
}
body.aid-acasa a.aid-ac-joaca:hover { color: #2A1A03; filter: brightness(1.06) saturate(1.04); }
body.aid-acasa a.aid-ac-joaca:active { transform: translateY(1px); }
/* the slow sweep with a long pause -- the "press me" of every game button */
body.aid-acasa a.aid-ac-joaca::after {
	content: "";
	position: absolute;
	top: -60%; bottom: -60%; left: -70%;
	width: 42%;
	transform: skewX(-22deg);
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
	animation: aid-ac-luciu 5.4s ease-in-out infinite;
}
@keyframes aid-ac-luciu { 0%, 62% { left: -70%; } 84%, 100% { left: 128%; } }
@keyframes aid-ac-jar {
	0%,100% { box-shadow:
		inset 0 0 0 1.5px rgba(255,247,214,.9), inset 0 2px 0 rgba(255,255,255,.55),
		inset 0 -8px 14px -7px rgba(96,66,6,.7), 0 0 0 1px rgba(0,0,0,.6),
		0 0 0 0 rgba(255,204,0,.42), 0 16px 34px -12px rgba(0,0,0,.9); }
	50%     { box-shadow:
		inset 0 0 0 1.5px rgba(255,247,214,.9), inset 0 2px 0 rgba(255,255,255,.55),
		inset 0 -8px 14px -7px rgba(96,66,6,.7), 0 0 0 1px rgba(0,0,0,.6),
		0 0 36px 7px rgba(255,204,0,.34), 0 16px 34px -12px rgba(0,0,0,.9); }
}
body.aid-acasa .aid-ac-nota {
	margin: 0;
	font: 500 12.5px var(--ac-mono);
	letter-spacing: .06em;
	color: var(--ac-salvie-jos);
	text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
body.aid-acasa .aid-ac-pitch {
	margin: 0 auto;
	max-width: 68ch;
	font-size: clamp(13.5px, 1.1vw, 15.5px);
	line-height: 1.5;
	color: var(--ac-salvie);
	text-shadow: 0 1px 8px rgba(0,0,0,.85);
}
body.aid-acasa .aid-ac-pitch strong { color: var(--ac-pergament); font-weight: 600; }

/* ------------------------------------------- the news strip, under the stage */
body.aid-acasa #anunt {
	position: static;
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 18px 0 0 0;
	padding: 8px 14px;
	border: 1px solid var(--ac-muchie);
	border-radius: 4px;
	background: var(--ac-panou);
	color: var(--ac-pergament);
	font-size: 13.5px;
}
body.aid-acasa #anunt strong { font-weight: normal; }
/* the strip is the one place the owner writes in red, and red on this ground is
   unreadable. Gold is the emphasis this page has. */
body.aid-acasa #anunt span[style*="red"] { color: var(--ac-chihlimbar) !important; }
body.aid-acasa .aid-ac-info { flex: 0 0 auto; }

/* --------------------------------------- servers, as four slats: a rack of doors */
body.aid-acasa .aid-ac-rafturi {
	background: var(--ac-muschi);
	border-top: 1px solid var(--ac-muchie);
	border-bottom: 1px solid var(--ac-muchie);
	margin-top: 22px;
}
body.aid-acasa .aid-ac-rafturi .aid-ac-lat { padding-top: 40px; padding-bottom: 46px; }
body.aid-acasa .aid-ac-cap { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
body.aid-acasa .aid-ac-cap h2 { font-size: clamp(24px, 2.6vw, 31px); letter-spacing: -.01em; }
body.aid-acasa .aid-ac-cap p { margin: 0; color: var(--ac-salvie); font-size: 14.5px; max-width: 62ch; }
body.aid-acasa .aid-ac-stelaj { display: grid; gap: 12px; grid-template-columns: 1fr; }
body.aid-acasa .aid-ac-scandura {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: linear-gradient(180deg, var(--ac-panou-sus), var(--ac-panou));
	border: 1px solid var(--ac-muchie);
	border-left: 3px solid var(--ac-muchie-hi);
	border-radius: 3px;
	padding: 18px 18px 18px 20px;
	transition: border-color .16s, transform .16s;
}
body.aid-acasa .aid-ac-scandura:hover { border-color: var(--ac-muchie-hi); transform: translateY(-2px); }
body.aid-acasa .aid-ac-scandura.aid-ac-aici { border-left-color: var(--ac-viu); }
body.aid-acasa .aid-ac-scandura h3 { font-size: 20px; font-weight: 700; }
body.aid-acasa .aid-ac-stare { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--ac-ui); color: var(--ac-viu); }
body.aid-acasa .aid-ac-stare-alt { color: var(--ac-salvie-jos); }
body.aid-acasa .aid-ac-punct { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ac-viu); box-shadow: 0 0 0 3px rgba(111,191,115,.16); }
body.aid-acasa .aid-ac-stare-alt .aid-ac-punct { background: var(--ac-salvie-jos); box-shadow: 0 0 0 3px rgba(117,136,122,.16); }
body.aid-acasa .aid-ac-ritm { font: 500 13px var(--ac-ui); color: var(--ac-pergament); margin: 0; }
body.aid-acasa .aid-ac-cand { font: 400 12px/1.5 var(--ac-mono); color: var(--ac-salvie-jos); margin: 0; }
/* WHICH GAME IS BEHIND THAT DOOR. For the whole stretch between the first
   production move and the last, these four cards lead to two different games,
   and that has to be readable before a stranger picks one. Set apart from the
   prose with a rule and the mono face, because it is a fact about the server
   rather than a description of it. */
body.aid-acasa .aid-ac-versiune {
	margin: 0 0 2px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ac-muchie);
	font: 400 12px/1.5 var(--ac-mono);
	color: var(--ac-salvie-jos);
}
body.aid-acasa .aid-ac-versiune strong { color: var(--ac-chihlimbar); font-weight: 500; }
body.aid-acasa .aid-ac-fel { font-size: 13.5px; color: var(--ac-salvie); margin: 0; flex: 1 1 auto; }
body.aid-acasa .aid-ac-cifre { margin: 0; font-size: 12.5px; color: var(--ac-salvie-jos); }
body.aid-acasa .aid-ac-cifre strong { color: var(--ac-chihlimbar); }
body.aid-acasa a.aid-ac-buton,
body.aid-acasa a.aid-ac-buton:visited {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border: 1px solid var(--ac-muchie-hi);
	border-radius: 3px;
	background: var(--ac-panou-sus);
	color: var(--ac-pergament);
	font: bold 13.5px var(--ac-ui);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .14s, border-color .14s;
}
body.aid-acasa a.aid-ac-buton:hover { background: #26402C; border-color: #55854F; color: var(--ac-pergament); }

/* ------------------------------------------------------- the showcase and rail */
body.aid-acasa .aid-ac-vitrina .aid-ac-lat { padding-top: 34px; padding-bottom: 10px; }
body.aid-acasa .aid-ac-titlu {
	font-family: var(--ac-titlu);
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 800;
	margin: 0 0 12px 0;
	color: var(--ac-pergament);
}
/* SIX THINGS, NAMED.  (10 Sept 2026)
 *
 * What was here: #homeartefacte, a 1000x90 strip holding every artefact and
 * every potion in the game at 24 pixels each -- around a hundred and fifteen
 * unlabelled thumbnails in three rows. It read as texture, and the writing
 * behind it (each one has a real name and a paragraph of the game's own comic
 * prose) was reachable only by hovering one 24px square at a time.
 *
 * Six cards instead, five artefacts and one potion, drawn at random on each
 * load. The card is a link, and the whole card is the target: picture, kind,
 * name, description. Nothing here is a hover-only affordance, which is the
 * point -- the strip it replaces did not exist at all on a phone. */
body.aid-acasa .aid-ac-vitrina-sub {
	margin: 0 0 20px;
	max-width: 62ch;
	color: var(--ac-salvie);
	font-size: 14.5px;
	line-height: 1.6;
}
body.aid-acasa .aid-ac-lucruri {
	display: grid;
	/* Three across on a wide screen, two on a tablet, one on a phone -- with no
	   breakpoints, because the card has a natural minimum and the grid can be
	   told it. Six divides by three and by two and by one, which is why six. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
body.aid-acasa a.aid-ac-lucru,
body.aid-acasa a.aid-ac-lucru:visited {
	display: grid;
	grid-template-columns: 64px 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 14px;
	row-gap: 2px;
	align-content: start;
	padding: 16px 16px 18px;
	border: 1px solid var(--ac-muchie);
	border-radius: 4px;
	background: var(--ac-panou);
	color: var(--ac-salvie);
	text-decoration: none;
	transition: border-color .14s, background .14s, transform .14s;
}
body.aid-acasa a.aid-ac-lucru:hover {
	border-color: var(--ac-chihlimbar-jos);
	background: var(--ac-panou-sus);
	transform: translateY(-2px);
}
body.aid-acasa .aid-ac-lucru-poza {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}
/* The sprites are 64px art drawn for a dark ground; they need no plate, only
   room and a little lift when the card is under the cursor. */
body.aid-acasa .aid-ac-lucru-poza img {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
	transition: transform .14s;
}
body.aid-acasa a.aid-ac-lucru:hover .aid-ac-lucru-poza img { transform: scale(1.06); }
body.aid-acasa .aid-ac-lucru-fel {
	grid-column: 2;
	grid-row: 1;
	font: 500 10.5px/1.4 var(--ac-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ac-salvie-jos);
}
body.aid-acasa .aid-ac-lucru-nume {
	grid-column: 2;
	grid-row: 2;
	font-family: var(--ac-titlu);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ac-pergament);
	text-wrap: balance;
}
body.aid-acasa a.aid-ac-lucru:hover .aid-ac-lucru-nume { color: var(--ac-chihlimbar); }
/* The description spans both columns and starts under the picture: it is a
   paragraph, and a paragraph in a 150px column is a stack of two-word lines. */
body.aid-acasa .aid-ac-lucru-desc {
	grid-column: 1 / -1;
	grid-row: 3;
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ac-salvie);
}
body.aid-acasa .aid-ac-lucru-nota {
	grid-column: 1 / -1;
	margin-top: 8px;
	font: 400 11.5px/1.4 var(--ac-mono);
	color: var(--ac-salvie-jos);
}
/* The complete lists. These two are what Google is meant to follow -- the six
   cards above change on every load, these do not -- so they are text links in
   the reading flow rather than two more chips in the rail below. */
body.aid-acasa .aid-ac-vitrina-tot {
	display: flex;
	flex-wrap: wrap;
	/* centred, with the rail below it: the two rows read as one closing block
	   under the eight cards rather than as two ragged left edges */
	justify-content: center;
	gap: 6px 26px;
	margin: 20px 0 0;
}
body.aid-acasa .aid-ac-vitrina-tot a,
body.aid-acasa .aid-ac-vitrina-tot a:visited {
	color: var(--ac-chihlimbar);
	font-size: 14px;
	text-decoration: none;
	border-bottom: 1px solid var(--ac-chihlimbar-jos);
	padding-bottom: 1px;
}
body.aid-acasa .aid-ac-vitrina-tot a::after { content: " \203A"; }
body.aid-acasa .aid-ac-vitrina-tot a:hover { color: var(--ac-pergament); border-bottom-color: var(--ac-pergament); }
body.aid-acasa .aid-ac-rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0 0; }
body.aid-acasa .aid-ac-rail a,
body.aid-acasa .aid-ac-rail a:visited {
	padding: 8px 14px;
	border: 1px solid var(--ac-muchie);
	border-radius: 999px;
	background: var(--ac-panou);
	color: var(--ac-salvie);
	font-size: 13px;
	text-decoration: none;
}
body.aid-acasa .aid-ac-rail a:hover { color: var(--ac-chihlimbar); border-color: var(--ac-chihlimbar-jos); }

/* ------------------------------------------------------------------ the legend
 *  The only piece of writing the game has had since 2008 that anyone quotes
 *  back, set as the body of the page rather than shown through a 400x360 hole. */
body.aid-acasa .aid-ac-poveste { background: var(--ac-noapte); }
body.aid-acasa .aid-ac-poveste .aid-ac-lat { padding: clamp(44px, 7vh, 76px) 26px; max-width: 900px; }
body.aid-acasa .aid-ac-poveste h2 { font-size: clamp(26px, 3vw, 38px); text-align: center; margin-bottom: 8px; }
body.aid-acasa .aid-ac-poveste .aid-ac-sub { text-align: center; color: var(--ac-salvie); margin: 0 0 34px; font-size: 15px; }
body.aid-acasa .aid-ac-poveste p {
	font-family: var(--ac-titlu);
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.66;
	color: #DCD8CB;
}
/* the blank paragraph he asked for, which has to be given a height because an
   empty <p> has none */
body.aid-acasa .aid-ac-poveste p:empty { min-height: 1.66em; }
body.aid-acasa .aid-ac-glas {
	display: block;
	margin: 26px auto;
	max-width: 30ch;
	text-align: center;
	font-family: var(--ac-titlu);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(21px, 2.4vw, 30px);
	line-height: 1.34;
	color: var(--ac-chihlimbar);
}
body.aid-acasa .aid-ac-ultim { text-align: center; font-weight: 700; color: var(--ac-pergament); font-size: clamp(19px, 2vw, 24px); margin-top: 30px; }

/* ---------------------------------------- one of the other twenty-five screens */
body.aid-acasa #homeinclude {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	margin: 22px 0 30px 0;
	padding: 20px 22px;
	border: 1px solid var(--ac-muchie);
	border-radius: 6px;
	background: var(--ac-panou);
	color: var(--ac-pergament);
	font-size: 13.5px;
	line-height: 160%;
}
body.aid-acasa #homeinclude h1,
body.aid-acasa #homeinclude h2,
body.aid-acasa #homeinclude h3 { text-transform: none; color: var(--ac-pergament); font-family: var(--ac-titlu); }
body.aid-acasa #homeinclude a { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .includediv { width: auto; }
body.aid-acasa #homeinclude div[style*="text-align:justify"] { text-align: left !important; }

/* ------------------------------------------------------------------ the footer */
body.aid-acasa .aid-ac-subsol-nav { border-top: 1px solid var(--ac-muchie); background: #080D09; }
body.aid-acasa .aid-ac-subsol-nav .aid-ac-lat { padding: 26px 26px 22px; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; }
body.aid-acasa .aid-ac-subsol-nav nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
body.aid-acasa .aid-ac-subsol-nav a,
body.aid-acasa .aid-ac-subsol-nav a:visited { color: var(--ac-salvie); font-size: 13.5px; text-decoration: none; }
body.aid-acasa .aid-ac-subsol-nav a:hover { color: var(--ac-pergament); text-decoration: underline; }
body.aid-acasa .aid-ac-copy { color: var(--ac-salvie-jos); font-size: 12.5px; margin-left: auto; font-family: var(--ac-mono); }

/* homefooter.php: the banner strip, the partner links, MIC GHID AIDRACI and the
   legal line. It is a separate file with its own $fixes key; all this does is
   put it on the same ground as the rest of the page. */
body.aid-acasa #homefooter {
	position: static;
	width: auto;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 26px 30px 26px;
	color: var(--ac-salvie);
	font-size: 12px;
}
/* #zonabannere and #zonalinkuri had rules here. Both blocks are deleted at the
   source now, so the rules are gone with them rather than left to match
   nothing. `.footerlink` stays: the contact line above still uses it. */
body.aid-acasa a.footerlink,
body.aid-acasa a.footerlink:visited,
body.aid-acasa a.footerlink:active { color: var(--ac-salvie-jos); font-weight: normal; }
body.aid-acasa a.footerlink:hover { color: var(--ac-chihlimbar); }
/* The contact line sits alone above the guide, with nothing beside it to
   align to, so left is an arbitrary edge rather than a decision. Centred,
   it reads as the label it is. */
body.aid-acasa .aid-ac-subsol {
	color: var(--ac-salvie-jos);
	font-size: 12px;
	line-height: 165%;
	text-align: center;
}
body.aid-acasa .aid-ac-subsol a,
body.aid-acasa .aid-ac-subsol a:visited { color: var(--ac-salvie); font-weight: normal; }
body.aid-acasa .aid-ac-subsol a:hover { color: var(--ac-chihlimbar); }

/* THE LEGAL FOOTER WEARS THE NAV FOOTER'S BAND.
 *
 * "tinem aid-ac-legal ca e mai complet, dar il punem pe stilul
 *  aid-ac-subsol-nav."
 *
 * It carries both classes now, so everything above already applies: the top
 * hairline, the near-black ground, the flex row, the link colours, the
 * copyright pushed to the end by `margin-left: auto`. All that is left to say
 * is what the other footer never had -- the licence sentence, which is a
 * sentence and not a destination, so it sits under the row rather than in it,
 * a size down and dimmer.
 *
 * It also has to break OUT of #homefooter's 1240px column, because the band is
 * a band: a full-width edge with an inset row, like the one above it. */
body.aid-acasa #homefooter .aid-ac-legal {
	margin: 26px calc(50% - 50vw) 0;
	padding: 0;
	width: 100vw;
}
body.aid-acasa .aid-ac-legal .aid-ac-lat { max-width: 1240px; margin: 0 auto; }
body.aid-acasa .aid-ac-licenta {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 26px 26px;
	color: var(--ac-salvie-jos);
	font-size: 11.5px;
	line-height: 165%;
}
/* MIC GHID AIDRACI is the best copy on the page and it was one paragraph of
   plain text. Two columns, headings that are headings. */
body.aid-acasa .aid-ac-ghid {
	margin: 18px 0 10px 0;
	padding: 16px 18px;
	border: 1px solid var(--ac-muchie);
	border-radius: 5px;
	background: var(--ac-panou);
	column-count: 2;
	column-gap: 34px;
}
body.aid-acasa .aid-ac-ghid > .aid-ac-titlu { margin-bottom: 10px; column-span: all; }
body.aid-acasa .aid-ac-ghid-cap {
	display: block;
	margin: 12px 0 3px 0;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ac-chihlimbar);
	/* a heading that ends a column and leaves its paragraph in the next one is
	   worse than an uneven column */
	break-after: avoid;
}
body.aid-acasa .aid-ac-lista { margin: 4px 0 0 0; padding: 0 0 0 16px; list-style: none; }
body.aid-acasa .aid-ac-lista li { position: relative; break-inside: avoid; color: var(--ac-salvie-jos); }
body.aid-acasa .aid-ac-lista li::before { content: '\2013'; position: absolute; left: -14px; color: var(--ac-chihlimbar-jos); }
body.aid-acasa .aid-ac-nota-runda {
	margin: 14px 0;
	padding: 8px 12px;
	border: 1px solid var(--ac-muchie);
	border-radius: 4px;
	background: var(--ac-panou);
	color: var(--ac-pergament);
	font-size: 12.5px;
}
body.aid-acasa .aid-ac-nota-runda a { color: var(--ac-chihlimbar); text-decoration: underline; }
body.aid-acasa .aid-ac-nota-runda .aid-ac-info { float: left; margin: 0 8px 2px 0; }

/* ==================================================================== the dialog
 *  One dialog, and every door opens it: JOACĂ ACUM, the top-right INTRĂ and the
 *  "Intră" on this server's card are three doors into one room. Registration is
 *  not a second dialog and not a second page -- it is the line under the button,
 *  where somebody who has just been told to play now discovers that "now"
 *  requires an account. It is also where "registrations are closed" is said, so
 *  that the button on the stage never has to change its word. */
body.aid-acasa .aid-ac-perdea {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	background: rgba(4,8,5,.78);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow: auto;
}
body.aid-acasa .aid-ac-perdea.aid-ac-deschis { display: flex; }
/* :target so the dialog opens from a link even with the script switched off --
   the buttons are anchors to #intra and this is what makes them real */
body.aid-acasa .aid-ac-perdea:target { display: flex; }
body.aid-acasa .aid-ac-dialog {
	width: 100%;
	max-width: 430px;
	position: relative;
	margin: auto;
	background: linear-gradient(180deg, #1A2B1E 0%, #121E15 100%);
	border: 1px solid var(--ac-muchie-hi);
	border-radius: 7px;
	box-shadow: 0 40px 90px -30px #000, inset 0 1px 0 rgba(255,255,255,.06);
	padding: 30px 30px 26px;
}
body.aid-acasa .aid-ac-dialog h3 { font-size: 25px; margin-bottom: 4px; }
body.aid-acasa .aid-ac-dsub { color: var(--ac-salvie); font-size: 14px; margin: 0 0 22px; }
body.aid-acasa .aid-ac-eroare {
	margin: 0 0 16px;
	padding: 8px 10px;
	border: 1px solid #B34A44;
	border-radius: 4px;
	background: rgba(153,0,0,.3);
	color: #FFD9D6;
	font-size: 13px;
}
body.aid-acasa .aid-ac-eroare a { color: #FFD9D6; text-decoration: underline; }
body.aid-acasa .aid-ac-camp { margin-bottom: 14px; }
body.aid-acasa .aid-ac-camp label {
	display: block;
	font: 500 11px var(--ac-mono);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ac-salvie-jos);
	margin: 0 0 6px;
}
body.aid-acasa .aid-ac-dialog input.tipa,
body.aid-acasa .aid-ac-dialog select {
	font: 400 14.5px var(--ac-ui);
	color: var(--ac-pergament);
	background: #0D160F;
	border: 1px solid var(--ac-muchie);
	border-radius: 3px;
	padding: 11px 13px;
	width: 100% !important;
}
body.aid-acasa .aid-ac-dialog input.tipa::placeholder { color: var(--ac-salvie-jos); }
body.aid-acasa .aid-ac-dialog input.tipa:focus,
body.aid-acasa .aid-ac-dialog select:focus { border-color: var(--ac-muchie-hi); outline: none; box-shadow: 0 0 0 2px rgba(240,180,74,.18); }
body.aid-acasa .aid-ac-rand { display: flex; justify-content: flex-end; margin: 6px 0 20px; }
body.aid-acasa .aid-ac-rand a { font-size: 13px; color: var(--ac-salvie); text-decoration: none; }
body.aid-acasa .aid-ac-rand a:hover { color: var(--ac-chihlimbar); text-decoration: underline; }
/* the dialog's own button is the same metal as JOACĂ ACUM, quieter and smaller.
   It was the chat's butonlogin.png; it follows the big button now. */
body.aid-acasa .aid-ac-du {
	width: 100%;
	font: bold 15px var(--ac-ui);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #2A1A03;
	border: 2px solid #6E5314;
	border-radius: 999px;
	background: linear-gradient(178deg, #FFE9A8 0%, #F6CB55 38%, #DCA02A 72%, #B77E1B 100%);
	box-shadow: inset 0 0 0 1px rgba(255,247,214,.85), inset 0 1px 0 rgba(255,255,255,.5);
	text-shadow: 0 1px 0 rgba(255,255,255,.45);
	padding: 13px;
	cursor: pointer;
}
body.aid-acasa .aid-ac-du:hover { filter: brightness(1.06); }
body.aid-acasa .aid-ac-linie {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 16px;
	color: var(--ac-salvie-jos);
	font: 500 10.5px var(--ac-mono);
	letter-spacing: .16em;
}
body.aid-acasa .aid-ac-linie::before,
body.aid-acasa .aid-ac-linie::after { content: ""; height: 1px; background: var(--ac-muchie); flex: 1; }
body.aid-acasa .aid-ac-inreg { text-align: center; }
body.aid-acasa .aid-ac-inreg p { margin: 0 0 12px; color: var(--ac-salvie); font-size: 14px; }
body.aid-acasa .aid-ac-inchis { color: var(--ac-chihlimbar); }
body.aid-acasa a.aid-ac-fa,
body.aid-acasa a.aid-ac-fa:visited {
	display: block;
	text-align: center;
	font: bold 14px var(--ac-ui);
	letter-spacing: .04em;
	color: var(--ac-chihlimbar);
	text-decoration: none;
	border: 1px solid var(--ac-chihlimbar-jos);
	border-radius: 999px;
	padding: 12px;
	background: rgba(240,180,74,.06);
}
body.aid-acasa a.aid-ac-fa:hover { background: rgba(240,180,74,.13); border-color: var(--ac-chihlimbar); color: var(--ac-chihlimbar); }
body.aid-acasa .aid-ac-x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 3px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--ac-salvie-jos);
	font: 400 20px/1 var(--ac-ui);
	cursor: pointer;
}
body.aid-acasa .aid-ac-x:hover { color: var(--ac-pergament); border-color: var(--ac-muchie); }
body.aid-acasa .aid-ac-marunt { margin: 16px 0 0; text-align: center; color: var(--ac-salvie-jos); font-size: 12px; line-height: 1.5; }

/* ############################################################################
   THE PHONE.
   A page that cannot narrow is a page that gets thrown away. The one real
   casualty is the generous top bar: six menu items and a login button do not
   fit on a phone at any type size, so the bar keeps the logo and INTRĂ on the
   first line and drops the menu under it.
   ######################################################################### */
@media (min-width: 700px)  { body.aid-acasa .aid-ac-stelaj { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { body.aid-acasa .aid-ac-stelaj { grid-template-columns: repeat(4, 1fr); } }
/* ===================================================== the phone's top bar
 *
 *  It used to WRAP: three centred rows, 168 pixels of header before the game
 *  had said anything, and the stage below had to be told the number so its own
 *  height still worked out. Six menu items and a login button do not fit across
 *  a phone at any type size, and stacking them is the answer that costs the
 *  most screen.
 *
 *  "in topbar putem tine numai ce e important -> Intra, servere si restul punem
 *   in meniu sidebar. scoatem pe mobil si logoul din topbar si il punem in
 *   sidebar sus." (10 Sept 2026)
 *
 *  So the bar is one 64px row -- hamburger, INTRĂ -- and the rest is a drawer.
 *  The logo goes with them: it is 417px of artwork whose only job on a phone
 *  would be to take the width the button needs, and it is the first thing in
 *  the drawer instead, where it has room to be the size it was drawn.
 *
 *  Both the drawer and the veil carry `hidden` when shut, so the closed menu is
 *  out of the accessibility tree and not merely off-screen. Above 900px the
 *  drawer is display:none and the bar's own menu is the live one -- exactly one
 *  of the two copies is ever exposed. */
/* THE COMPONENT COMES FIRST, THE MEDIA QUERY SECOND, AND THAT ORDER IS THE
   WHOLE OF A BUG. This block sat BELOW the @media (max-width: 900px) rule
   that turns the hamburger on. Both say `display` on the same selector with
   the same specificity, so the later one wins whatever the viewport is --
   and the later one was `display: none`. On a phone the logo hid, the menu
   hid, the drawer was built and wired, and the button that opens it was
   invisible: a top bar with nothing in it but INTRA. A media query does not
   outrank anything; it only adds a condition. */
body.aid-acasa .aid-ac-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--ac-muchie);
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
}
body.aid-acasa .aid-ac-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--ac-pergament);
	transition: background .14s;
}
body.aid-acasa .aid-ac-burger:hover { border-color: var(--ac-chihlimbar-jos); }
body.aid-acasa .aid-ac-burger:hover span { background: var(--ac-chihlimbar); }
body.aid-acasa .aid-ac-burger[aria-expanded="true"] { border-color: var(--ac-chihlimbar); }

body.aid-acasa .aid-ac-voal-meniu {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(3, 5, 6, .72);
}
body.aid-acasa .aid-ac-voal-meniu[hidden] { display: none; }
body.aid-acasa .aid-ac-sertar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 61;
	display: flex;
	flex-direction: column;
	width: min(300px, 86vw);
	padding: 22px 22px 26px;
	background: #070B08;
	border-right: 1px solid var(--ac-muchie);
	box-shadow: 24px 0 60px -30px #000;
	overflow-y: auto;
	overscroll-behavior: contain;
}
body.aid-acasa .aid-ac-sertar[hidden] { display: none; }
body.aid-acasa.aid-ac-sertar-deschis { overflow: hidden; }
body.aid-acasa .aid-ac-sertar-sigla { display: block; line-height: 0; }
body.aid-acasa .aid-ac-sertar-sigla img { display: block; width: 168px; height: auto; border: 0; }
body.aid-acasa .aid-ac-sertar-inchide {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: 1px solid var(--ac-muchie);
	border-radius: 50%;
	background: transparent;
	color: var(--ac-salvie);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
body.aid-acasa .aid-ac-sertar-inchide:hover { border-color: var(--ac-chihlimbar-jos); color: var(--ac-chihlimbar); }
body.aid-acasa .aid-ac-sertar-meniu { display: flex; flex-direction: column; margin-top: 26px; }
body.aid-acasa .aid-ac-sertar-meniu a,
body.aid-acasa .aid-ac-sertar-meniu a:visited {
	padding: 13px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	color: var(--ac-salvie);
	font-size: 16px;
	text-decoration: none;
}
body.aid-acasa .aid-ac-sertar-meniu a:hover,
body.aid-acasa .aid-ac-sertar-meniu a.pe { color: var(--ac-chihlimbar); }
body.aid-acasa .aid-ac-sertar-jos { margin-top: auto; padding-top: 26px; }
body.aid-acasa .aid-ac-sertar-jos a.aid-ac-intra { display: flex; justify-content: center; width: 100%; }
body.aid-acasa .aid-ac-sertar-nota { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--ac-salvie-jos); }

@media (max-width: 900px) {
	body.aid-acasa { --aid-ac-bara: 64px; --aid-ac-restul: 330px; }
	body.aid-acasa .aid-ac-bara .aid-ac-lat {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	body.aid-acasa .aid-ac-burger { display: flex; }
	body.aid-acasa .aid-ac-meniu-stanga,
	body.aid-acasa .aid-ac-sigla,
	body.aid-acasa .aid-ac-meniu-dreapta > .aid-ac-meniu { display: none; }
	body.aid-acasa .aid-ac-meniu-dreapta { gap: 0; }
	body.aid-acasa .aid-ac-ghid { column-count: 1; }
}
/* the drawer belongs to the phone; on a wide screen the bar's own menu is the
   real one and this must not be reachable by any means, Tab included */
@media (min-width: 901px) {
	body.aid-acasa .aid-ac-sertar,
	body.aid-acasa .aid-ac-voal-meniu { display: none !important; }
}

@media (max-width: 560px) {
	/* „din 2008" coboara pe randul doi, sub „Joc de strategie in browser".
	   Punctul din mijloc despartea cele doua pe un rand; pe doua randuri nu mai
	   are ce sa desparta, deci dispare. Marginea de jos a primei bucati e cea
	   care tine cele doua randuri lipite, nu line-height -- kickerul are
	   letter-spacing mare si un line-height stramt l-ar fi facut sa se atinga. */
	body.aid-acasa .aid-ac-kicker-sep  { display: none; }
	body.aid-acasa .aid-ac-kicker-cand { display: block; margin-top: 3px; }
	body.aid-acasa .aid-ac-lat { padding-left: 18px; padding-right: 18px; }
	body.aid-acasa .aid-ac-scena-in { padding-left: 18px; padding-right: 18px; }
	body.aid-acasa a.aid-ac-joaca { display: block; width: 100%; }
	body.aid-acasa .aid-ac-fapta { align-self: stretch; }
	body.aid-acasa .aid-ac-stampila { left: -22%; bottom: -2%; width: 46%; }
	/* the veil has to work harder on a phone: the picture is the same size but
	   the words over it are proportionally much bigger */
	body.aid-acasa { --voal-sus: 0.44; --voal-centru: 0.12; --voal-jos: 0.70; }
}

/* Motion is optional, always: every colour and every shadow stays, only the
   movement goes. The script checks the same query and never starts a timer. */
@media (prefers-reduced-motion: reduce) {
	body.aid-acasa .aid-ac-drac-art .dr-corp,
	body.aid-acasa .aid-ac-drac-art .dr-ochi,
	body.aid-acasa .aid-ac-drac-art .dr-coada,
	body.aid-acasa .aid-ac-lean,
	body.aid-acasa .aid-ac-in,
	body.aid-acasa a.aid-ac-joaca,
	body.aid-acasa a.aid-ac-joaca::after { animation: none !important; }
	body.aid-acasa * { transition: none !important; }
}

/* ==============================================================================
 *  THE PICTURE LAURENTIU IS DRAWING, AND WHAT IT HAS TO SURVIVE.
 *
 *  Draw it 2400 x 1350, 16:9, and export it as WebP at quality ~78 (a JPEG at
 *  quality 80 is the fallback if anything in the chain refuses WebP). That
 *  lands around 300-450 KB for a painted scene, which is what a landing page
 *  can afford; it is one request and it is cached.
 *
 *  WHY 2400 x 1350. The stage is now FULL WIDTH -- up to about 1200 CSS px on a
 *  laptop, more on a desktop -- and at most 800 tall, so 2400 x 1350 is a 2x
 *  retina file for a 1200x675 frame with room to crop. `cover` scales it to
 *  fill and throws away the overflow: at 1400x704 the stage is 1.99:1 against
 *  the picture's 1.78:1, so about a tenth of the HEIGHT is cut; on a phone the
 *  stage is roughly 390x600, which is 0.65:1, and nearly two thirds of the
 *  WIDTH goes.
 *
 *  THE SAFE AREA is therefore the middle 900 x 1350 -- the centre 37% of the
 *  width, full height. Anything that must always be seen (a landmark, the thing
 *  that says "this is Romania") goes in there. The outer 750px each side is
 *  scenery that phone visitors never see.
 *
 *  THE HORIZON should sit about 40% down (y ~ 540 of 1350). The picture is
 *  anchored at `50% 34%` and the devil stands in the middle of the stage, so a
 *  horizon there runs behind his chest and the ground fills the lower half,
 *  under the button, where the veil is heaviest anyway.
 *
 *  KEEP THE BOTTOM QUIET. --voal-jos darkens the bottom fifth to almost black
 *  so the button and the small print stay legible; detail painted down there is
 *  detail nobody will see. Same for the last 4% at every edge, which the mask
 *  fades out so the picture does not end on a straight line.
 *
 *  IF IT COMES OUT A DIFFERENT SHAPE, change --aid-ac-cadru rather than the
 *  file: it is the background-position, so `50% 20%` pulls the picture down the
 *  frame and `50% 50%` centres it. Only a wildly different aspect -- a tall
 *  picture, say -- wants the stage's own height changed too. */
/* ========== butonul auriu ========== */
/* ==========================================================================
 *  EVERY BUTTON IN THE PANEL BECOMES THE RING.
 *
 *  "mergem pe varianta A -- pune-l te rog prin site si vedem cum arata live."
 *
 *  Variant A of the three golds: a black pill with a gold ring and a glow --
 *  `.aid-lic-actiuni` (the auction chips he already likes) grown to button
 *  size. What it replaces was measured before it was replaced, and the numbers
 *  are why this block exists rather than a nicer green:
 *
 *    the old face      #39664c -> #0f4033 -> #05261a
 *    against the panel #112009
 *
 *    top stop     2.58 : 1
 *    middle       1.46 : 1
 *    bottom       1.05 : 1     <- the foot of the button does not end,
 *    whole face   1.64 : 1        it dissolves into the panel
 *
 *  1.05:1 is not a low-contrast edge, it is no edge. What actually gave the
 *  button a shape was one accident: a single #d2d2d2 stop at 16% of the rim
 *  gradient, 26.4:1 against the panel. The eye read a silver rim and inferred
 *  a button inside it. Take the rim away and there was no button.
 *
 *  And it was never the same green either -- the panel is hue 99 (warm olive),
 *  the face 157-164 (cold teal), 60 degrees apart. A dark saturated teal on a
 *  dark olive, neither bright enough to escape the other. That mismatch is what
 *  "nu stiu de ce" was pointing at.
 *
 *  --aid-aur against the same panel is 11.25 : 1. Seven times the old face.
 *
 *  WHY IT IS WRITTEN AS AN OVERRIDE AND NOT AS A NEW CLASS. There are several
 *  hundred buttons in the ported pages and a hundred more bare
 *  `<input type="submit">` with an inline width. Adding a class to all of them
 *  is a port pass and a diff nobody can read; redefining the selectors that
 *  already match them is one block, and it can be deleted in one piece if the
 *  ring turns out to be wrong live. `.aid-pastila` below is the same look with
 *  a name, for markup written from here on.
 * ====================================================================== */

#istanga input[type="submit"],
#istanga input[type="button"],
#istanga button,
.aid-btn,
.aid-pastila {
	/* LUNGUIET. 26px of side padding rather than 20 -- a pill wants to be
	   longer than it is tall, or the 999px radius eats the whole shape and it
	   reads as a lozenge. */
	padding: 5px 26px;
	/* The border was 3px of transparent holding a background-clip trick that
	   drew the rim. The ring is an inset shadow now, so the border goes and
	   the shape gets the space back. */
	border: 0;
	/* A pill is "as round as it is tall". Any literal radius is wrong the
	   moment the button changes height. */
	border-radius: 999px;
	background-clip: padding-box;
	background-image: none;
	background-color: rgba(0, 0, 0, .42);
	color: var(--aid-aur);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
	letter-spacing: .07em;
	/* THE GLOW IS TWO STOPS, AND THAT IS WHAT MAKES IT A GLOW.
	   One wide soft shadow is a blur. A glow has a hard bright core -- the 1px
	   ring at full --aid-aur-stins -- and a tight halo just outside it that
	   falls off fast. The negative spread pulls the halo back inside the
	   pill's silhouette so it hugs the edge instead of fogging the panel. */
	box-shadow:
		inset 0 0 0 1px var(--aid-aur-stins),
		0 0 10px -2px rgba(255, 204, 0, .38);
	transition: box-shadow 130ms linear, color 130ms linear,
	            background-color 130ms linear, transform 90ms ease;
}

/* `:not(:disabled)` on every hover. CSS `:hover` DOES match a disabled button,
   and without this a dead control lights up under the pointer -- caught by
   forcing the hover state in the preview and looking at it. */
#istanga input[type="submit"]:hover:not(:disabled),
#istanga input[type="button"]:hover:not(:disabled),
#istanga button:hover:not(:disabled),
.aid-btn:hover:not(:disabled),
.aid-pastila:hover:not(:disabled) {
	filter: none;
	background-color: rgba(0, 0, 0, .55);
	color: var(--aid-text-tare, #fff4d6);
	box-shadow:
		inset 0 0 0 1px var(--aid-aur),
		0 0 7px rgba(255, 204, 0, .45),
		0 0 18px -4px rgba(255, 190, 0, .35);
}
#istanga input[type="submit"]:active,
#istanga input[type="button"]:active,
#istanga button:active,
.aid-btn:active,
.aid-pastila:active {
	transform: translateY(1px);
	background-color: rgba(0, 0, 0, .7);
	box-shadow:
		inset 0 0 0 1px var(--aid-aur),
		inset 0 2px 5px rgba(0, 0, 0, .7);
}
#istanga input[type="submit"]:focus-visible,
#istanga input[type="button"]:focus-visible,
#istanga button:focus-visible,
.aid-btn:focus-visible,
.aid-pastila:focus-visible {
	outline: 2px solid var(--aid-aur);
	outline-offset: 2px;
	box-shadow:
		inset 0 0 0 1px var(--aid-aur),
		0 0 10px rgba(255, 204, 0, .35);
}

/* OFF IS A LOOK, NOT AN OPACITY.
   `opacity: .38` on a button whose whole shape is a one-pixel ring dissolves
   the ring and leaves floating text -- it reads as broken markup rather than
   as a disabled control. The silhouette always survives; only the gold goes. */
#istanga input[type="submit"]:disabled,
#istanga input[type="button"]:disabled,
#istanga button:disabled,
.aid-btn:disabled,
.aid-pastila:disabled {
	cursor: default;
	transform: none;
	filter: none;
	background-color: rgba(0, 0, 0, .5);
	color: var(--aid-text-slab);
	text-shadow: none;
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .18);
}

/* THE COLOUR CODES SURVIVE, AS RINGS.
 *
 * The old classes set --aid-btn-sus/-mij/-jos, which drew a gradient FACE that
 * no longer exists. Nothing referenced them any more, so they would have gone
 * silently grey. Each keeps its meaning by colouring the ring and the text
 * instead: green still commits, red still destroys. #a3151a and #ff8a84 are
 * .aid-panou-pericol's border and heading -- the danger red the interface
 * already speaks, not a new one. */
/* SPECIFICITY, AND IT COST A RENDER TO SEE IT.
 *
 * The base rule above is `#istanga button` -- an id, weight (1,0,1). A plain
 * `.aid-btn-verde` is (0,1,0) and loses, so the first version of this block
 * drew every coloured button gold and every size the default size. Each
 * variant therefore repeats the id, which is the honest fix: the override is
 * as specific as the thing it overrides, and no `!important` is needed. */
#istanga .aid-btn-verde,
#istanga input[type="submit"].aid-btn-verde,
#istanga input[type="button"].aid-btn-verde,
#istanga button.aid-btn-verde,
#istanga .aid-pastila-verde,
.aid-btn-verde,
.aid-pastila-verde {
	color: #9ade9f;
	box-shadow: inset 0 0 0 1px #2f9a44, 0 0 10px -2px rgba(86, 198, 94, .32);
}
#istanga .aid-btn-verde:hover:not(:disabled),
#istanga .aid-pastila-verde:hover:not(:disabled),
.aid-btn-verde:hover:not(:disabled),
.aid-pastila-verde:hover:not(:disabled) {
	color: #dcffdd;
	box-shadow: inset 0 0 0 1px #56c65e, 0 0 7px rgba(86, 198, 94, .45),
	            0 0 18px -4px rgba(86, 198, 94, .35);
}
/* ACEEASI CAPCANA, PRINSA A DOUA OARA -- nota de mai sus a fost scrisa pentru
   verde si n-a fost dusa si aici. `#istanga input[type="submit"]` e (1,1,1):
   un id, un atribut si un tip. `#istanga .aid-btn-rosu` e (1,1,0) si pierde.
   Pe `<a class="aid-btn">` regula mergea, pe `<input type="submit">` nu -- si
   fix butonul de confirmare al actiunilor periculoase e un submit.
   Deci FIECARE ecran „Da, sterge jucatorul" avea butonul auriu, nu rosu:
   singurul semn vizual ca urmeaza ceva ireversibil lipsea tocmai acolo. */
#istanga .aid-btn-rosu, #istanga .aid-btn-crimson, #istanga .aid-pastila-rosu,
#istanga input[type="submit"].aid-btn-rosu,
#istanga input[type="submit"].aid-btn-crimson,
#istanga input[type="button"].aid-btn-rosu,
#istanga button.aid-btn-rosu,
.aid-btn-rosu, .aid-btn-crimson, .aid-pastila-rosu {
	color: #ff8a84;
	box-shadow: inset 0 0 0 1px #a3151a, 0 0 9px -3px rgba(224, 69, 63, .30);
}
#istanga .aid-btn-rosu:hover:not(:disabled),
#istanga .aid-btn-crimson:hover:not(:disabled),
#istanga .aid-pastila-rosu:hover:not(:disabled),
#istanga input[type="submit"].aid-btn-rosu:hover:not(:disabled),
#istanga input[type="submit"].aid-btn-crimson:hover:not(:disabled),
#istanga input[type="button"].aid-btn-rosu:hover:not(:disabled),
#istanga button.aid-btn-rosu:hover:not(:disabled),
.aid-btn-rosu:hover:not(:disabled),
.aid-btn-crimson:hover:not(:disabled),
.aid-pastila-rosu:hover:not(:disabled) {
	color: #ffd9d6;
	box-shadow: inset 0 0 0 1px #e0453f, 0 0 7px rgba(224, 69, 63, .45),
	            0 0 18px -4px rgba(224, 69, 63, .35);
}
/* Blue and gold were both "an ordinary button" once the face was gone -- blue
   because it was only ever the default, gold because gold is now the default.
   Neither needs a rule; both fall through to the ring above. */

/* The sizes keep their names and lose their radii -- 999px is size-independent,
   which is the point of a pill. */
#istanga .aid-btn-lung, .aid-btn-lung { padding: 5px 34px; letter-spacing: .08em; }
#istanga .aid-btn-mare, #istanga .aid-pastila-mare,
.aid-btn-mare, .aid-pastila-mare {
	min-height: 40px; padding: 10px 34px; font-size: 15px;
	letter-spacing: .09em; border-radius: 999px;
}
#istanga .aid-btn-mic, #istanga .aid-pastila-mic,
.aid-pastila-mic {
	min-height: 22px; padding: 1px 12px; font-size: 11px; letter-spacing: .05em;
}

@media (prefers-reduced-motion: reduce) {
	#istanga input[type="submit"], #istanga input[type="button"],
	#istanga button, .aid-btn, .aid-pastila { transition: none; }
	#istanga input[type="submit"]:active, #istanga input[type="button"]:active,
	#istanga button:active, .aid-btn:active, .aid-pastila:active { transform: none; }
}

/* =========================================================================
 * THE TOWN ON THE LANDSCAPE (8 Sept 2026)
 *
 * "punem cladirile direct pe fundal, nu in casa.php. daca dai pe butonul
 *  casa, practic ascunde istanga (istanga devine un fel de popupwindow)."
 *
 * #aid-oras is a child of #wrapper (Src\Support\Oras::html, inserted by the
 * port), 600x510 like the stage, moved over #blociframe by js/aidoras.js.
 * z-index:-1 in the root stacking context: above the landscape (the body
 * background), below every panel -- a tall building may rise out of the stage
 * and the header still covers it; #blociframe at z-index 1 covers it when a
 * page is open. The sprites are baked with their shadows at 5.5 px per unit
 * from the same camera as the landscape (.plan/blender/coace.py). */
#aid-oras {
	position: absolute;
	left: 212px;                /* js/aidoras.js measures and corrects these */
	top: 163px;                 /* stage top + DECALAJ_Y (50) */
	width: 600px;
	height: 510px;
	z-index: -1;
	pointer-events: none;       /* only the buildings take the mouse */
}
#aid-oras .aid-oras-cladire {
	position: absolute;
	display: block;
	pointer-events: auto;
	line-height: 0;
	outline: 0;
}
#aid-oras .aid-oras-cladire img {
	display: block;
	transition: filter .15s ease;
}
#aid-oras .aid-oras-cladire:hover img,
#aid-oras .aid-oras-cladire:focus-visible img {
	filter: brightness(1.10) drop-shadow(0 0 5px rgba(255, 204, 0, .85));
}
/* The 2000x1600 background is drawn 1:1 with the stage (the stage is at
 * (700, 565) in it). js/aidoras.js sets the exact offset; this is the value
 * for the shell as laid out today, so a page without JS is still nearly right. */
body {
	background-position: center -402px;   /* -(565 - 113 - 50) on the shell as laid out today */
	/* BLACK BEHIND THE PICTURE. On a wide screen the 2000 px landscape ends;
	 * oras.jpg fades its own edges into an irregular dark fog (baked in), and the
	 * page colour has to be what the fog fades to, or the edge shows as a seam. */
	background-color: #000;
}
/* THE HOME SCREEN IS THE TOWN. When casa.php is what is open, the panel and its
 * frame go and the sprites are the screen. The controls (back, reload, home)
 * on #blociframe stay -- they are how the player gets back. */
body.aid-oras-liber #istanga {
	visibility: hidden;
}
body.aid-oras-liber #blociframe {
	background: none;
	box-shadow: none;
	border-color: transparent;
}
/* ...AND THE CLICK HAS TO REACH THE SPRITES. #aid-oras paints at z-index -1,
 * which is BELOW the boxes of body, #wrapper, #blocb and #blociframe -- and an
 * empty, transparent box still takes the click (elementFromPoint on the hotel
 * answered "#blocb", then "#wrapper"). So, while the town is the screen, every
 * box in that chain lets the pointer through and every other child of theirs
 * takes it back: the header, the side columns, the chat, the corner controls
 * all still click; only the see-through path down to the town is open. */
body.aid-oras-liber,
body.aid-oras-liber #wrapper,
body.aid-oras-liber #blocb,
body.aid-oras-liber #blociframe { pointer-events: none; }
body.aid-oras-liber > *,
body.aid-oras-liber #wrapper > *,
body.aid-oras-liber #blocb > *,
body.aid-oras-liber #blociframe > div:first-child { pointer-events: auto; }
body.aid-oras-liber #wrapper > #blocb,
body.aid-oras-liber #blocb > #blociframe { pointer-events: none; }

/* =========================================================================
 * MOVABLE SIDE PANELS (js/aidpanouri.js)
 *
 * "sa le poti muta cu mouseul si sa le pui unde vrei (sa fie si un reset pe
 *  undeva) [...] resurse, personaj, caracter, bonusuri."
 *
 * The panel stays in the layout and travels by transform, so nothing reflows;
 * a moved panel rises above its neighbours and keeps its shadow. The bar is
 * the handle (cursor set by the script), double-click on it puts the panel
 * back, and a moved panel grows a small round "back" button in its bar. */
.aid-mutabil { touch-action: none; }
.aid-mutabil.aid-mutat { position: relative; z-index: 30; }
.aid-mutabil.aid-tras { z-index: 31; opacity: .92; transition: none; }
/* top: 1px, not 6. The bar is the panel's title strip and the button has to sit
   ON its line, not below it: "butonul de reset nu sta bine vertical pe bara de
   sus. pune-i top: 1px in loc de 6 si sta bine" (9 Sept 2026, measured on the
   real thing). */
.aid-panou-inapoi {
	position: absolute; right: 30px; top: 1px; z-index: 2;
	width: 18px; height: 18px; padding: 0; line-height: 16px;
	border: 1px solid var(--aid-aur-stins, #c69e0c); border-radius: 50%;
	background: rgba(6, 10, 4, .6); color: var(--aid-aur, #ffcc00);
	font: 12px/16px Verdana, Arial, sans-serif; cursor: pointer; opacity: .85;
}
.aid-panou-inapoi:hover { opacity: 1; background: rgba(6, 10, 4, .9); }
/* Armatele Tale <-> Bonusuri: Bonusuri sits in the right column now, where
 * its 8px left margin would push it off the column; Armatele Tale takes that
 * margin in the bottom row instead. */
body.aid-panouri-schimbate #blocc #blocbonusuri { margin-left: 0; }
body.aid-panouri-schimbate #bloclangaporumbel #blocatacuriletale { margin-left: 8px; }

/* The two army boxes still carried their 2010 pictures as inline backgrounds
 * (imagini/outgoing.jpg -- a grey road with lane lines -- and incoming.jpg).
 * Over the real landscape they read as a stray piece of road inside the panel:
 * "la Armatele tale a ramas o sosea pe fundal". The panel is the frame now. */
#zona-plecate, #zona-primite, #boxatacuriletale, #boxatacurilelor {
	background-image: none !important;
	background-color: transparent !important;
}

/* ---------------------------------------------------------------- LIFE ---
 * js/aidviata.js: little devils, chimney smoke, birds, the farm's animals and
 * the treasure chest -- inline SVG in #aid-oras, moved by CSS transitions.
 *
 *   "ideal este sa si vedem mici dracusori miscandu-se pe langa cladiri din
 *    cand in cand. aparand, disparind. [...] poti anima si cufarul, sa il faci
 *    sa apara si sa dispara in afara ecranului principal, din cand in cand si
 *    sa straluceasca ce are el acolo (coins)"
 *
 * The script sets left/top and --aid-dur (how long a walk takes) and
 * --aid-fata (1 or -1, which way the figure faces); everything else is here.
 * Nothing here takes the mouse except the chest. */
#aid-oras .aid-viata { position: absolute; will-change: left, top; }
#aid-oras .aid-viata svg { display: block; overflow: visible; }

/* the devil: walks by a left transition, faces with scaleX, pops in and out */
.aid-drac {
	transition: left var(--aid-dur, 1s) linear, top var(--aid-dur, 1s) linear;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.aid-drac > svg {
	transform: scaleX(var(--aid-fata, 1));
	transform-origin: 50% 100%;
}
.aid-drac.aid-drac-apare > svg  { animation: aid-drac-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.aid-drac.aid-drac-pleaca > svg { animation: aid-drac-piere .45s ease-in both; }
@keyframes aid-drac-pop {
	0%   { transform: scaleX(var(--aid-fata, 1)) scale(0) translateY(6px); opacity: 0; }
	60%  { opacity: 1; }
	100% { transform: scaleX(var(--aid-fata, 1)) scale(1) translateY(0); opacity: 1; }
}
@keyframes aid-drac-piere {
	0%   { transform: scaleX(var(--aid-fata, 1)) scale(1); opacity: 1; }
	100% { transform: scaleX(var(--aid-fata, 1)) scale(0) translateY(8px); opacity: 0; }
}
/* the walk: legs swing, the body bobs, the tail swishes */
.aid-drac .aid-drac-picior, .aid-drac .aid-drac-mana, .aid-drac .aid-drac-coada { transform-box: fill-box; }
.aid-drac .aid-drac-picior { transform-origin: 50% 0; }
.aid-drac-merge .aid-drac-p1 { animation: aid-pas .32s ease-in-out infinite alternate; }
.aid-drac-merge .aid-drac-p2 { animation: aid-pas .32s ease-in-out infinite alternate-reverse; }
.aid-drac-merge .aid-drac-coada { transform-origin: 100% 0; animation: aid-coada .64s ease-in-out infinite alternate; }
@keyframes aid-pas   { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes aid-coada { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
/* the wave: the right arm goes up and shakes */
.aid-drac .aid-drac-mana2 { transform-origin: 0 0; }
.aid-drac-salut .aid-drac-mana2 { animation: aid-salut 1.2s ease-in-out both; }
@keyframes aid-salut {
	0%, 100% { transform: rotate(0); }
	20%, 60% { transform: rotate(-120deg); }
	40%, 80% { transform: rotate(-150deg); }
}

/* the smoke: a puff that rises, spreads and thins in 4 s */
.aid-fum { transition: left 4s ease-out; }
.aid-fum > svg { opacity: 0; transform-origin: 50% 100%; }
.aid-fum-urca > svg { animation: aid-fum 4s ease-out both; }
@keyframes aid-fum {
	0%   { transform: translateY(0) scale(.5); opacity: .0; }
	10%  { opacity: .55; }
	100% { transform: translateY(-46px) scale(2.4); opacity: 0; }
}

/* the birds: cross the sky on a long linear transition, wings beating */
.aid-pasare { transition: left var(--aid-dur, 30s) linear, top var(--aid-dur, 30s) ease-in-out; opacity: .8; }
.aid-pasare .aid-arip { transform-box: fill-box; transform-origin: 50% 100%; animation: aid-arip .28s ease-in-out infinite alternate; }
.aid-pasare:nth-child(odd) .aid-arip { animation-delay: -.14s; }
@keyframes aid-arip { from { transform: scaleY(1); } to { transform: scaleY(-.6) translateY(-1px); } }

/* the farm's animals: potter about the yard */
.aid-animal { transition: left var(--aid-dur, 2s) linear, top var(--aid-dur, 2s) linear, opacity .8s; }
.aid-animal > svg { transform: scaleX(var(--aid-fata, 1)); transform-origin: 50% 100%; animation: aid-pasc 1.4s ease-in-out infinite alternate; }
@keyframes aid-pasc { from { transform: scaleX(var(--aid-fata, 1)) translateY(0); } to { transform: scaleX(var(--aid-fata, 1)) translateY(-.7px); } }

/* the chest: fades in on the grass outside the stage, the coins glint, and it
 * is the one live thing here you can click */
#aid-oras .aid-cufar { transition: opacity .9s; cursor: pointer; pointer-events: auto; display: block; }
#aid-oras .aid-cufar img {
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: auto; height: auto; max-width: none;
	filter: drop-shadow(0 0 4px rgba(255, 204, 0, .55));
	animation: aid-cufar-lumina 2.4s ease-in-out infinite;
}
#aid-oras .aid-cufar:hover img { filter: brightness(1.12) drop-shadow(0 0 7px rgba(255, 204, 0, .95)); }
@keyframes aid-cufar-lumina {
	0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 204, 0, .35)); }
	50%      { filter: drop-shadow(0 0 8px rgba(255, 220, 80, .85)); }
}
#aid-oras .aid-cufar-sclipiri { position: absolute; left: 0; top: 0; pointer-events: none; }
.aid-cufar .aid-sc { transform-box: fill-box; transform-origin: 50% 50%; animation: aid-sclipire 1.8s ease-in-out infinite; opacity: 0; }
.aid-cufar .aid-sc2 { animation-delay: .45s; }
.aid-cufar .aid-sc3 { animation-delay: .9s; animation-duration: 1.4s; }
.aid-cufar .aid-sc4 { animation-delay: 1.25s; }
@keyframes aid-sclipire {
	0%, 100% { transform: scale(.2) rotate(0); opacity: 0; }
	40%      { transform: scale(1.1) rotate(45deg); opacity: 1; }
	60%      { transform: scale(.9) rotate(70deg); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
	#aid-oras .aid-viata, #aid-oras .aid-viata * { animation: none !important; transition: none !important; }
}

/* The player's cars, parked on the slab south of the town (Oras::htmlMasini);
 * js/aidviata.js drives one out and back now and then, by the same
 * left/top transitions as the devils. */
#aid-oras .aid-oras-masina {
	position: absolute; pointer-events: auto; cursor: pointer;
	transition: left var(--aid-dur, 1s) linear, top var(--aid-dur, 1s) linear, opacity .6s, filter .15s;
}
/* a parked car is a way into the garage (js/aidviata.js -> garaj.php) */
#aid-oras .aid-oras-masina:hover { filter: brightness(1.35) drop-shadow(0 0 3px rgba(255, 204, 0, 0.7)); }

/* ================================================= jucator.php, the compact pass
 *
 * 8 Sept 2026: "treci din nou peste layout [...] fragmentele fara scroll pentru
 * butoanele importante; jucator.php: muta descrierea in stanga, sub poza;
 * adauga o zona perna sub buton." The panel is 600x~560 and the ATACA button
 * was at 690: you scrolled to find the one thing the page is for.
 *
 * What gives: the portrait (it was 180px tall on a sheet of eight 19px lines),
 * the house picture (150 -> 120), the line heights, and the description, which
 * the port now prints under the house (the left column had the room). The
 * button gets a cushion of empty space under it, so it never sits on the edge
 * of the panel. Same rules, tighter numbers -- nothing here changes what is
 * shown, only how much room it takes. */
#istanga .aid-jucator > tbody > tr > td { padding: 6px 12px 4px; }
#istanga .aid-jucator > tbody > tr > td[colspan="2"] { padding-top: 0; }
#istanga .aid-j-casa { gap: 6px; }
#istanga .aid-j-poza { padding: 5px; }
#istanga .aid-j-poza img { max-height: 118px; width: auto; }
#istanga .aid-j-teren { font-size: 11px; line-height: 14px; }
/* the description under the picture: the plate is the column's width, the
   text left-aligned, three lines at most */
#istanga .aid-j-casa .aid-j-descriere {
	clear: none;
	align-self: stretch;
	margin: 2px 0 0;
	padding: 5px 8px;
	font-size: 11px;
	line-height: 15px;
	max-height: 45px;
	overflow: hidden;
}
#istanga .aid-j-portret { margin: 0 0 4px 8px; }
#istanga .aid-j-portret img { max-height: 132px; width: auto; }
#istanga .aid-j-fisa { font-size: 12px; line-height: 17px; }
#istanga .aid-jucator h2, #istanga .aid-j-nume { margin-bottom: 3px; }
#istanga .aid-j-perne { margin-top: 6px; padding: 4px 8px; line-height: 16px; }
#istanga .aid-j-perne br { display: none; }
#istanga .aid-j-perne a { margin-left: 6px; }
/* the middle: the sentence, the garrison and the distance on as few lines as
   they can share */
#istanga .aid-jucator .text { font-size: 11px; line-height: 15px; }
#istanga .aid-j-garnizoana { margin: 2px 0 2px; }
#istanga .aid-j-draci { font-size: 22px; }
#istanga .aid-j-icoana img { height: 22px; }
#istanga .aid-j-drum { margin: 0 0 2px; line-height: 16px; }
/* the bottom row: less padding, the legend tighter, and the cushion */
#istanga .aid-j-jos { gap: 10px; margin-top: 4px; }
#istanga .aid-j-istoric, #istanga .aid-j-actiune { padding: 8px 10px; }
#istanga .aid-j-istoric { font-size: 10px; line-height: 14px; }
#istanga .aid-j-istoric > strong { margin-bottom: 4px; font-size: 10px; }
#istanga .aid-j-limita { margin: 0 0 6px; }
#istanga .aid-j-actiune form { margin: 4px 0 0; }
#istanga .aid-j-actiune { padding-bottom: 22px; }   /* the cushion: "o zona perna sub buton" */
#istanga .aid-j-actiune input[type="submit"].atac { min-width: 160px; }
/* the house needs 150px, the facts need the rest: 42/58 instead of 50/50,
   so "Profesie: Barbat Somer (Nivel 47)" and the date stay on one line each.

   SUB 561px NU SE APLICA, SI ASTA NU E O FINETE (17 sept 2026). Acolo tabelul
   nu mai e tabel -- blocul `@media (max-width: 560px)` de mai sus il face
   `display: block; width: auto`, ca sa se aseze una sub alta pe telefon. Dar
   regula asta, scrisa mai tarziu si cu `:first-child` in plus, avea punctaj mai
   mare si castiga: celula de jos, cea cu `colspan="2"` care tine toata partea
   de jos a fisei (distanta, butonul ATACA, ultimele cinci atacuri), ramanea
   lata cat 42% din ecran si sta ghemuita in stanga. Exact ce s-a vazut pe
   telefon: „ce e mai jos de distanta sta pe jumatate de ecran, stanga."
   Deci cele doua latimi traiesc de acum doar unde chiar e vorba de doua
   coloane. */
@media (min-width: 561px) {
	#istanga .aid-jucator > tbody > tr > td:first-child { width: 42%; }
	#istanga .aid-jucator > tbody > tr > td:first-child + td { width: 58%; }
}
/* the list rule above (#istanga table.tabla:has(...) > tbody > tr > td) gives
   7px; the history is five lines of context and gets 2px */
#istanga .aid-j-istoric > table.tabla:has(> tbody > tr.aid-cap) > tbody > tr > td { padding: 2px 8px; line-height: 16px; font-size: 10px; }
#istanga .aid-j-istoric > table.tabla:has(> tbody > tr.aid-cap) > tbody > tr.aid-cap > td { font-size: 9px; padding: 3px 8px; }
/* THE BUTTON ABOVE THE FOLD. .aid-j-corp (a port wrapper) is a grid: the
 * sentence + garrison + distance on the left, the action column on the right,
 * and the history under both at full width -- the decision and the act on one
 * row, the context below, where the panel may cut it without harm. */
#istanga .aid-j-corp {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 236px;
	grid-template-areas: "text actiune" "istoric istoric";
	gap: 6px 10px;
	align-items: stretch;
}
#istanga .aid-j-jos { display: contents; }
#istanga .aid-j-corp > .text { grid-area: text; align-self: center; min-width: 0; }
#istanga .aid-j-actiune { grid-area: actiune; padding: 8px 10px 20px; }
#istanga .aid-j-istoric { grid-area: istoric; }
#istanga .aid-j-istoric > table.tabla { max-width: 420px; margin: 0 auto; }
@media (max-width: 560px) {
	#istanga .aid-j-corp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "actiune" "istoric"; }
	#istanga .aid-j-corp:has(> .aid-j-lamurire) { grid-template-areas: "lamurire" "text" "actiune" "istoric"; }
}

/* The level on each building of the town: the game's gold-ring badge
 * (.aid-numar) at the size it has in the panel titles, set by Oras::html on
 * the building's ground centre. It belongs to the link, so a click on it is a
 * click on the building; the glow on hover comes from the <img>, not from it. */
#aid-oras .aid-oras-nivel {
	position: absolute;
	z-index: 2;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-width: 2px;
	font-size: 10px;
	pointer-events: none;
}

/* SEMNUL DE PE ȘANTIER (22 septembrie 2026).
 *
 *   „putem face ca, atunci cand o cladire nu e construita si avem bani de ea,
 *    putem sa afisam iconul cu bani deasupra mormanului de santier? ajuta la
 *    inceput, mai ales pe incepatori."
 *
 * Deasupra mijlocului parcelei, nu la un offset scris în pixeli: cele șase
 * morane de șantier au înălțimi diferite, iar un număr ales pe unul ar fi
 * nimerit în acoperișul altuia. `left: 50%` plus `translateX(-50%)` nimerește
 * mijlocul oricărei parcele, iar `bottom: 100%` îl așază exact peste marginea
 * ei de sus, oricât ar fi de înaltă.
 *
 * Plutește încet ca să se vadă cu coada ochiului pe un ecran plin de mișcare,
 * dar nu sare și nu clipește -- e un indiciu, nu o alarmă. Cine a oprit
 * animațiile din sistem îl primește nemișcat, tot acolo. */
#aid-oras .aid-oras-potcumpara {
	position: absolute;
	left: 50%;
	bottom: 100%;
	z-index: 3;
	margin-bottom: 2px;
	transform: translateX(-50%);
	pointer-events: none;
	filter: drop-shadow(0 0 4px rgba(255, 204, 0, .55)) drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
	animation: aid-santier-plutire 2.4s ease-in-out infinite;
}
#aid-oras .aid-oras-potcumpara img { display: block; border: 0; }
@keyframes aid-santier-plutire {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -4px); }
}
@media (prefers-reduced-motion: reduce) {
	#aid-oras .aid-oras-potcumpara { animation: none; }
}

/* The player's name on the medallion panel, under the portrait, left of the
 * edit pencil (which sits at left:130px): gold, one line, cut with an ellipsis
 * if it is long. Set by a port fix in main.php. */
#blocpersonaj .aid-nume-jucator {
	position: absolute;
	top: 296px;
	left: 6px;
	width: 120px;
	font: bold 13px/16px Verdana, Arial, sans-serif;
	color: var(--aid-aur, #ffcc00);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ================================================== the character medallion
 *
 * 8 Sept 2026. Four sketches for #blocpersonaj were drawn (canvas "Ecranul
 * personajului"). He chose A2: the gold ring IS the frame and the landscape
 * shows through, the figure stands in the dark oval, atac/aparare in two dark
 * pills hooked on the ring's lower shoulders, the name on a RED RIBBON across
 * the ring's foot with the level as a seal at its end, and the alliance
 * buttons, the pillows and the pencil on a small plate along the bottom. The
 * green medallion frame (ui/personaj.svg) and the green rectangle behind the
 * figure are gone: the avatar is a cut-out PNG now (Image/Composite, main.php
 * shows t/<id>.png when it exists), so it can be centred and large -- "poate
 * fi centrat vertical in medalion si facut mai mare". The port names the seven
 * blocks (.aid-bp-*) and adds .aid-card to the panel; their inline top/left
 * are overruled here. Geometry: block 205x372, ring 172x282 at (16,10). */
#blocpersonaj.aid-card {
	position: relative;
	border: 0;
	box-shadow: none;
	background: none;
}
#blocpersonaj.aid-card > div { transform: none; z-index: 1; }

/* the ring and the dark oval in it: the portrait block IS the medallion */
#blocpersonaj.aid-card .aid-bp-portret {
	left: 16px !important; top: 10px !important;
	width: 172px !important; height: 282px;
	box-sizing: border-box; padding: 5px;
	border-radius: 50%;
	background: linear-gradient(150deg, #fff3bd 0%, #ffd34d 18%, #e8b62e 38%, #8a5f12 62%, #d9a83a 84%, #f7e07a 100%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
	text-align: center;
}
#blocpersonaj.aid-card .aid-bp-portret::before {
	content: '';
	position: absolute; inset: 5px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 30%, #2c2c27 0%, #151512 45%, #070706 100%);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7), inset 0 12px 30px rgba(0, 0, 0, 0.6);
}
#blocpersonaj.aid-card .aid-bp-portret a {
	position: absolute; inset: 5px;
	display: flex; align-items: center; justify-content: center;   /* the figure stands mid-oval */
	border-radius: 50%; overflow: hidden;      /* the oval clips the picture */
	line-height: 0;
}
#blocpersonaj.aid-card .aid-bp-portret img {
	display: block; width: 86px; height: auto;   /* 86x250 in the 162x272 oval: whole, head to shoes */
	filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.7));
}
/* the crest, hung on the ring (the nth-of-type rule above pins it with !important) */
#blocpersonaj.aid-card .aid-bp-stema {
	left: 8px !important; top: 8px !important;
	width: 40px !important; height: 40px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 0 0 2px var(--aid-aur-stins, #c69e0c);
}
#blocpersonaj.aid-card .aid-bp-stema img { width: 30px; height: auto; }
#blocpersonaj.aid-card .aid-bp-stema span { font-size: 8px !important; line-height: 1 !important; }

/* atac and aparare: two dark pills hooked on the ring's lower shoulders (the
   stats block holds a two-row table; the rows become the pills, spread to
   the block's edges so each straddles the rim) */
#blocpersonaj.aid-card .aid-bp-fisa {
	left: 4px !important; top: 226px !important;
	width: 197px !important; text-align: left;
	font-size: 11px; color: var(--aid-text-tare, #fff);
	z-index: 3;                 /* the level seal sits above the ribbon */
}
#blocpersonaj.aid-card .aid-bp-fisa > div { margin: 0 !important; }
#blocpersonaj.aid-card .aid-bp-fisa table { width: 100%; border-collapse: collapse; }
#blocpersonaj.aid-card .aid-bp-fisa tbody { display: flex; justify-content: space-between; }
#blocpersonaj.aid-card .aid-bp-fisa tr { display: block; }
#blocpersonaj.aid-card .aid-bp-fisa td {
	display: inline-flex; align-items: center; gap: 4px;
	height: 22px; padding: 0 8px;
	border-radius: 11px;
	background: rgba(5, 5, 5, 0.86);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 226, 178, 0.12);
	font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums;
	font-size: 11px; font-weight: bold; color: var(--aid-text-tare, #fff);
	white-space: nowrap;
}
#blocpersonaj.aid-card .aid-bp-fisa td img { height: 12px; width: auto; float: none; }
/* the level: the gold seal ON TOP of the ring, over the head ("cercul cu
   nivelul pune-l sus, deasupra capului, pe cercul golden") */
#blocpersonaj.aid-card .aid-bp-nivel { position: absolute; left: 86px; top: -226px; display: block; }
#blocpersonaj.aid-card .aid-bp-nivel-eticheta { display: none; }
#blocpersonaj.aid-card .aid-bp-nivel .aid-numar {
	min-width: 24px; height: 24px; padding: 0 5px; border-width: 2px; font-size: 12px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* the red ribbon across the ring's foot. ONE shape: a banner with a
   swallow-tail notch cut into each end by clip-path, the ends darkened by the
   gradient as if folded back, the name centred. (The first cut used two
   pseudo-element tails behind the band; inside the band's own stacking
   context they painted OVER it and read as a smudge -- "ribbonul nu arata
   bine".) The name sits in a span so long names get an ellipsis without
   clipping the shape. */
#blocpersonaj.aid-card .aid-nume-jucator {
	position: absolute; left: 8px; top: 284px; width: 189px; height: 34px;
	box-sizing: border-box; padding: 0 26px;
	display: flex; align-items: center; justify-content: center;
	background:
		linear-gradient(180deg, rgba(255, 226, 178, 0.28) 0%, rgba(255, 226, 178, 0.06) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%),
		linear-gradient(90deg, #5a0d09 0%, #7a160f 9%, #a5221a 13%, #c4342a 22%, #c4342a 78%, #a5221a 87%, #7a160f 91%, #5a0d09 100%);
	clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
	font: bold 15px/34px Verdana, Arial, sans-serif; letter-spacing: .02em;
	color: #fff3bd; text-shadow: 0 1px 2px rgba(58, 10, 5, 0.9);
	text-align: center; white-space: nowrap;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
	z-index: 2;
}
#blocpersonaj.aid-card .aid-nume-jucator > span,
#blocpersonaj.aid-card .aid-nume-jucator > a {
	display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
	color: inherit; text-decoration: none;
}
/* the two stitched lines along the band */
#blocpersonaj.aid-card .aid-nume-jucator::before {
	content: ''; position: absolute; left: 22px; right: 22px; top: 4px; bottom: 4px;
	border-top: 1px dashed rgba(255, 226, 178, 0.35); border-bottom: 1px dashed rgba(255, 226, 178, 0.35);
	pointer-events: none;
}

/* the bottom row sits on a small plate of the panels' own field -- over the
   landscape the buttons and the pillows count would otherwise float on grass
   ("poate are nevoie de ceva fundal ca la panouri") */
#blocpersonaj.aid-card::after {
	content: '';
	position: absolute; left: 6px; top: 324px; width: 193px; height: 44px;
	border-radius: var(--aid-raza-panou, 10px);
	background: var(--aid-camp, rgba(17, 32, 9, 0.8));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 1px 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.45);
	z-index: 0; pointer-events: none;
}
/* the bottom row: alliance buttons, pillows, pencil */
#blocpersonaj.aid-card .aid-bp-alianta { left: 12px !important; top: 332px !important; }
#blocpersonaj.aid-card .aid-bp-aliante { left: 48px !important; top: 332px !important; }
#blocpersonaj.aid-card .aid-bp-alianta .aid-ica, #blocpersonaj.aid-card .aid-bp-aliante .aid-ica { width: 28px; height: 28px; }
#blocpersonaj.aid-card .aid-bp-alianta img, #blocpersonaj.aid-card .aid-bp-aliante img { width: 28px; height: 28px; }
#blocpersonaj.aid-card .aid-bp-perne {
	top: 340px !important; right: auto !important; left: 84px; width: 80px; text-align: center;
	font-size: 10px; color: var(--aid-text, #e6e0c8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); white-space: nowrap;
}
#blocpersonaj.aid-card .aid-bp-perne img { height: 10px; vertical-align: -1px; }
#blocpersonaj.aid-card .aid-bp-editeaza { left: 166px !important; top: 335px !important; }

/* the gold coins hopping out of the buildings (aidviata.js monede()): up
   and a little sideways on an arc, a flip on the way (scaleX through 0), gone
   at the top */
#aid-oras .aid-moneda { opacity: 0; animation: aid-moneda-sare 1.45s cubic-bezier(.2, .7, .3, 1) forwards; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
#aid-oras .aid-moneda svg { display: block; animation: aid-moneda-flip .55s linear 2; }
@keyframes aid-moneda-sare {
	0%   { opacity: 0; transform: translate(0, 4px) scale(.6); }
	12%  { opacity: 1; transform: translate(calc(var(--aid-dx, 0px) * .15), -6px) scale(1); }
	70%  { opacity: 1; transform: translate(calc(var(--aid-dx, 0px) * .85), -30px) scale(1); }
	100% { opacity: 0; transform: translate(var(--aid-dx, 0px), -40px) scale(.8); }
}
@keyframes aid-moneda-flip {
	0%   { transform: scaleX(1); }
	50%  { transform: scaleX(.12); }
	100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { #aid-oras .aid-moneda, #aid-oras .aid-moneda svg { animation: none; opacity: 0; } }

/* ================================================== jocuri.php -- the games
 *
 * "Trebuie sa facem un nou buton si acolo sa prezentam carduri faine cu
 * fiecare joc." One card per game from Game\Jocuri: a dark stone plate with
 * the game's own accent (--aid-joc) as a left rail and a soft glow behind its
 * emblem, the name in gold, a line of copy, two small tags (solo / 1 vs 1,
 * zilnic / oricand / duel), the prize and the button. A game not built yet is
 * dimmed a touch and its button says Curand. Two columns in the 600px panel. */
#istanga .aid-jocuri-lead {
	max-width: 62ch; margin: 0 0 12px;
	font-size: 12.5px; line-height: 20px;
	color: color-mix(in srgb, var(--aid-text) 88%, transparent);
}
#istanga .aid-jocuri-grila {
	display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
#istanga .aid-joc {
	--aid-joc: var(--aid-aur, #ffcc00);
	position: relative; display: flex; gap: 10px; align-items: stretch;
	min-height: 118px; padding: 10px 10px 10px 12px; box-sizing: border-box;
	border-radius: var(--aid-raza-panou, 10px);
	background: var(--aid-fata-piatra, linear-gradient(160deg, #3a352c 0%, #201d18 45%, #12110e 100%));
	box-shadow: var(--aid-lumina, inset 1px 1px 0 rgba(255, 255, 255, 0.07)), var(--aid-adancime, inset -1px -1px 0 rgba(0, 0, 0, 0.6)), 0 2px 6px rgba(0, 0, 0, 0.45);
	overflow: hidden;
	transition: box-shadow 130ms linear, transform 90ms ease;
}
#istanga .aid-joc::before {
	/* the accent rail on the left, the card's colour */
	content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--aid-joc) 100%, #fff 20%), var(--aid-joc) 50%, color-mix(in srgb, var(--aid-joc) 60%, #000));
	box-shadow: 0 0 8px color-mix(in srgb, var(--aid-joc) 60%, transparent);
}
#istanga .aid-joc:not(.aid-joc-curand):hover {
	box-shadow: var(--aid-lumina, inset 1px 1px 0 rgba(255, 255, 255, 0.07)), inset 0 0 0 1px color-mix(in srgb, var(--aid-joc) 55%, transparent), 0 4px 12px rgba(0, 0, 0, 0.55);
	transform: translateY(-1px);
}
#istanga .aid-joc-poza {
	flex: 0 0 72px; width: 72px; height: 72px; align-self: center;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--aid-joc) 28%, #0a0a0a) 0%, #0a0a0a 72%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px color-mix(in srgb, var(--aid-joc) 45%, transparent), 0 0 14px -4px color-mix(in srgb, var(--aid-joc) 70%, transparent);
}
#istanga .aid-joc-poza svg { width: 52px; height: 52px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
#istanga .aid-joc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#istanga .aid-joc-nume {
	margin: 0; font: bold 13px/16px Verdana, Arial, sans-serif; letter-spacing: .01em;
	color: var(--aid-aur, #ffcc00); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	text-transform: none;
}
#istanga .aid-joc-desc { margin: 0; font-size: 10.5px; line-height: 14px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-joc-eticheta { display: flex; gap: 5px; flex-wrap: wrap; }
#istanga .aid-joc-eticheta span {
	display: inline-block; padding: 1px 7px; border-radius: 999px;
	font-size: 9px; line-height: 13px; letter-spacing: .06em; text-transform: uppercase;
	background: rgba(0, 0, 0, 0.45); color: var(--aid-text-stins, #97917a);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#istanga .aid-joc-eticheta .aid-joc-duel { color: #ffb0a0; box-shadow: inset 0 0 0 1px rgba(255, 106, 61, 0.5); }
#istanga .aid-joc-jos { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#istanga .aid-joc-premiu { font-size: 10px; line-height: 13px; color: var(--aid-aur-stins, #c69e0c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#istanga .aid-joc-buton { flex: 0 0 auto; min-height: 24px; padding: 3px 14px; font-size: 10.5px; line-height: 16px; }
#istanga .aid-joc-buton-curand {
	display: inline-block; border-radius: 999px; padding: 4px 12px;
	font-size: 9.5px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--aid-text-stins, #97917a); background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#istanga .aid-joc-curand .aid-joc-poza { filter: saturate(.55); opacity: .8; }
#istanga .aid-joc-curand .aid-joc-nume { color: color-mix(in srgb, var(--aid-aur, #ffcc00) 70%, #97917a); }

/* ============================================ the character screen, fullscreen
 *
 * js/aidpersonajmare.js. Over the shell like the map (#aidharta): fixed, dark
 * ground with the faint green glow of the town under the figure, the same
 * stone header bar. Three columns: the sheet (300), the stage, the wardrobe
 * (380). Panels are the game's field (--aid-camp) with the panels' inset
 * edge; gold for titles and numbers, Courier for digits. Design: canvas
 * "Ecranul personajului", Main artboard. */
#aidpersonaj {
	position: fixed; inset: 0; z-index: 900;
	display: flex; flex-direction: column;
	background: radial-gradient(ellipse at 50% 72%, rgba(23, 99, 44, 0.35) 0%, rgba(5, 5, 5, 0) 55%), linear-gradient(180deg, #0b0f08 0%, #050505 100%);
	color: var(--aid-text, #e6e0c8);
	font: 11px/1.4 Verdana, Arial, Helvetica, sans-serif;
}
#aidpersonaj[hidden] { display: none; }
#aidpersonaj a { color: var(--aid-aur, #ffcc00); }
#aidpersonaj a:hover { color: #fff3bd; }
#aidpersonaj .aidp-cifre { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; }
#aidpersonaj .aidp-cap { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: bold; color: var(--aid-aur, #ffcc00); }
#aidpersonaj .aidp-cap-mic { font-size: 10px; }
#aidpersonaj .aidp-stins { color: var(--aid-text-stins, #97917a); }
#aidpersonaj .aidp-text { color: var(--aid-text, #e6e0c8); }
#aidpersonaj .aidp-tare { color: #fff; font-weight: bold; }
#aidpersonaj .aidp-mic { font-size: 10px; }
#aidpersonaj .aidp-micut { font-size: 9px; }
#aidpersonaj .aidp-bine { color: #6fc060; }
#aidpersonaj .aidp-rau { color: #f09a8e; }

/* the bar */
#aidpersonaj .aidp-bara {
	flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
	background: linear-gradient(180deg, #3a3d37 0%, #1c1e1b 55%, #050505 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 0 rgba(0, 0, 0, 0.5);
}
#aidpersonaj .aidp-bara-st, #aidpersonaj .aidp-bara-dr { display: flex; align-items: center; gap: 14px; }
#aidpersonaj .aidp-bara-dr { gap: 8px; }
#aidpersonaj .aidp-titlu { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: bold; color: var(--aid-aur, #ffcc00); }
#aidpersonaj .aidp-nume-bara { font-size: 12px; }
#aidpersonaj .aidp-sub-bara { font-size: 11px; }
#aidpersonaj .aidp-buton {
	height: 24px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 3px; cursor: pointer;
	border: 1px solid #4a4a48; background: linear-gradient(180deg, #3a3d37 0%, #1c1e1b 100%);
	color: var(--aid-aur, #ffcc00); font: bold 11px Verdana, Arial, sans-serif;
}
#aidpersonaj .aidp-buton:hover { border-color: var(--aid-aur-stins, #c69e0c); color: #fff3bd; }
#aidpersonaj .aidp-buton-aur { border-color: #c69e0c; background: linear-gradient(180deg, #ffd34d 0%, #c69e0c 100%); color: #1a1400; }
#aidpersonaj .aidp-buton-aur:hover { color: #000; background: linear-gradient(180deg, #ffe07a 0%, #d9ad1a 100%); }
#aidpersonaj .aidp-buton-stins { color: var(--aid-text-stins, #97917a); }
#aidpersonaj .aidp-buton:disabled { opacity: .45; cursor: default; }

/* the three columns */
#aidpersonaj .aidp-corp { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(420px, 1fr) 380px; gap: 24px; padding: 24px 24px 60px; overflow: hidden; }
#aidpersonaj .aidp-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
#aidpersonaj .aidp-stanga, #aidpersonaj .aidp-dreapta { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3d37 transparent; }
#aidpersonaj .aidp-panou {
	border-radius: var(--aid-raza-panou, 10px); padding: 12px 14px 14px;
	background: var(--aid-camp, rgba(17, 32, 9, 0.80));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 1px 1px 0 rgba(255, 255, 255, 0.07);
}
#aidpersonaj .aidp-panou-cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
#aidpersonaj .aidp-nota { font-size: 10px; text-align: right; }
#aidpersonaj .aidp-gol { padding: 6px 0; }

/* power bars */
#aidpersonaj .aidp-bara-rand + .aidp-bara-rand { margin-top: 10px; }
#aidpersonaj .aidp-bara-titlu { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
#aidpersonaj .aidp-bara-fund { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); overflow: hidden; }
#aidpersonaj .aidp-bara-plin { height: 8px; border-radius: 4px; transition: width 300ms ease; }
#aidpersonaj .aidp-plin-atac { background: linear-gradient(90deg, #8a5f12, #ffd34d); }
#aidpersonaj .aidp-plin-aparare { background: linear-gradient(90deg, #1f5a2a, #6fc060); }
#aidpersonaj .aidp-bara-rand .aidp-mic { margin-top: 3px; }
#aidpersonaj .aidp-unitati { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* xp */
#aidpersonaj .aidp-xp { display: flex; gap: 14px; align-items: center; }
#aidpersonaj .aidp-xp svg { flex: 0 0 auto; }
#aidpersonaj .aidp-xp-text { display: flex; flex-direction: column; gap: 5px; font-size: 11px; }

/* radar + collections */
#aidpersonaj .aidp-radar { display: flex; align-items: center; gap: 10px; }
#aidpersonaj .aidp-radar-valori { display: flex; flex-direction: column; gap: 4px; font-size: 11px; flex: 1; }
#aidpersonaj .aidp-radar-valori div { display: flex; justify-content: space-between; gap: 10px; }
#aidpersonaj .aidp-colectii { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 11px; }
#aidpersonaj .aidp-colectie { display: flex; justify-content: space-between; text-decoration: none; color: inherit; border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
#aidpersonaj a.aidp-colectie:hover { background: rgba(255, 204, 0, 0.08); }
#aidpersonaj a.aidp-colectie:hover .aidp-stins { color: var(--aid-aur, #ffcc00); }
#aidpersonaj .aidp-medalii { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 4px; }
#aidpersonaj .aidp-medalie { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #fff; }
#aidpersonaj .aidp-medalie i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0%, var(--aidp-med) 35%, color-mix(in srgb, var(--aidp-med) 50%, #000) 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }

/* the stage */
#aidpersonaj .aidp-centru { align-items: center; justify-content: flex-start; }
#aidpersonaj .aidp-scena { position: relative; width: 100%; display: flex; align-items: flex-start; justify-content: center; }
#aidpersonaj .aidp-cadru { position: relative; transform-origin: top center; flex: 0 0 auto; }
#aidpersonaj .aidp-cadru img { position: absolute; display: block; pointer-events: none; user-select: none; }
#aidpersonaj .aidp-corp-poza { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
#aidpersonaj .aidp-plinta { position: absolute; left: 90px; top: 356px; width: 320px; height: 80px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #2a2a29 0%, #14140f 55%, rgba(5, 5, 5, 0) 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7); }
#aidpersonaj .aidp-lumina { position: absolute; left: 130px; top: 380px; width: 240px; height: 14px; border-radius: 50%; background: rgba(255, 204, 0, 0.10); filter: blur(6px); }
#aidpersonaj .aidp-sloturi { position: absolute; top: 40px; display: flex; flex-direction: column; gap: 14px; width: 180px; }
#aidpersonaj .aidp-sloturi-st { left: 0; }
#aidpersonaj .aidp-sloturi-dr { right: 0; align-items: flex-end; }
#aidpersonaj .aidp-slot { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#aidpersonaj .aidp-slot-viitor { cursor: default; flex-direction: row-reverse; text-align: right; }
#aidpersonaj .aidp-slot-cutie { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 6px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 226, 178, 0.12); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#aidpersonaj .aidp-slot-plin .aidp-slot-cutie { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), inset 0 1px 0 rgba(255, 226, 178, 0.12); }
#aidpersonaj .aidp-slot-ales .aidp-slot-cutie, #aidpersonaj .aidp-slot:hover .aidp-slot-cutie { box-shadow: inset 0 0 0 2px var(--aid-aur, #ffcc00); }
#aidpersonaj .aidp-slot-viitor .aidp-slot-cutie { background: rgba(0, 0, 0, 0.35); }
#aidpersonaj .aidp-slot-cutie img { max-height: 56px; max-width: 56px; width: auto; height: auto; }
#aidpersonaj .aidp-slot-text { min-width: 0; }
#aidpersonaj .aidp-slot-text .aidp-mic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 106px; }
#aidpersonaj .aidp-asteapta { margin-top: 120px; text-align: center; color: var(--aid-text-stins, #97917a); }

/* the name plate */
/* NUMELE STA PE PLINTA, NU SUB EA.
 *
 * Plinta e o umbra ovala `position:absolute` in .aidp-cadru, si se intinde cu
 * 60px sub cadru ca sa para ca figura chiar sta pe ceva. Placuta cu numele vine
 * imediat dupa cadru, in curgerea normala, deci cadea fix in fasia aia -- iar
 * un element pozitionat se deseneaza peste unul nepozitionat, oricat de jos ar
 * fi in pagina. „numele jucatorului din centru jos, e sub scena gri (obturat)"
 * (15 sept 2026).
 *
 * Nu se muta nimic: placuta primeste si ea un strat, deasupra umbrei. */
#aidpersonaj .aidp-placa { position: relative; z-index: 1; margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
#aidpersonaj .aidp-placa-rand { display: flex; align-items: center; gap: 10px; }
#aidpersonaj .aidp-placa-nume { font-size: 20px; font-weight: bold; color: var(--aid-aur, #ffcc00); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
#aidpersonaj .aidp-placa-nivel { min-width: 24px; height: 24px; font-size: 12px; }
#aidpersonaj .aidp-descriere { max-width: 360px; font-size: 10px; font-style: italic; color: var(--aid-text-stins, #97917a); }

/* the wardrobe */
#aidpersonaj .aidp-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
#aidpersonaj .aidp-tab { padding: 4px 10px; border: 0; border-radius: 3px; background: none; color: var(--aid-text-stins, #97917a); font: 10px Verdana, Arial, sans-serif; cursor: pointer; }
#aidpersonaj .aidp-tab:hover { color: var(--aid-text, #e6e0c8); }
#aidpersonaj .aidp-tab-activ { background: linear-gradient(180deg, #3a3d37 0%, #1c1e1b 100%); color: var(--aid-aur, #ffcc00); font-weight: bold; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
#aidpersonaj .aidp-grila { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#aidpersonaj .aidp-celula { position: relative; height: 64px; box-sizing: border-box; padding: 4px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
#aidpersonaj .aidp-celula img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#aidpersonaj .aidp-celula:hover { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); }
#aidpersonaj .aidp-celula-purtat { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); }
#aidpersonaj .aidp-celula-ales, #aidpersonaj .aidp-celula-ales:hover { box-shadow: inset 0 0 0 2px var(--aid-aur, #ffcc00); }
#aidpersonaj .aidp-celula-nu img { opacity: .4; filter: grayscale(.6); }
#aidpersonaj .aidp-celula-goala { cursor: default; background: rgba(0, 0, 0, 0.3); }
#aidpersonaj .aidp-eticheta-purtat { position: absolute; right: 3px; bottom: 3px; font-size: 8px; color: var(--aid-aur, #ffcc00); font-weight: bold; }
#aidpersonaj .aidp-eticheta-cate { position: absolute; left: 4px; top: 3px; font-size: 9px; color: var(--aid-text, #e6e0c8); font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#aidpersonaj .aidp-detaliu { display: flex; gap: 14px; min-height: 90px; }
/* POZA HAINEI ALESE -- si de ce nu se mai masoara in pixeli.
 *
 * Chenarul avea 92x120 si poza dinauntru 84x108, scrise amandoua in pixeli.
 * Doua numere care trebuie sa ramana mereu mai mici decat alte doua numere,
 * fara ca nimic sa lege perechile: e genul de potriveala care tine pana cand
 * cineva atinge una dintre ele. Si tinea la limita -- 6px sus si 6px jos --
 * deci haina umplea chenarul pe verticala si parea ca iese din el, mai ales
 * la pantaloni si la rochiile lungi, care sunt inalte si inguste.
 *
 * Acum marginea se scrie o singura data, ca `padding`, iar poza se masoara
 * in PROCENTE din ce ramane. Oricat ar fi chenarul -- alt ecran, alt zoom,
 * alt parinte care il strange -- poza ramane inauntru, fiindca 100% din
 * cutia de continut nu poate depasi cutia de continut. `box-sizing` tine
 * chenarul tot la 92x120, deci asezarea din jur nu se misca.
 *
 * Acelasi lucru la celulele din garderoba, mai jos: aveau 64px inaltime si
 * poza 56px, aceeasi pereche nelegata. */
#aidpersonaj .aidp-detaliu-poza { width: 92px; height: 120px; flex: 0 0 auto; box-sizing: border-box; padding: 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#aidpersonaj .aidp-detaliu-poza img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
#aidpersonaj .aidp-detaliu-text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
#aidpersonaj .aidp-detaliu-nume { font-size: 13px; font-weight: bold; color: #fff; }
#aidpersonaj .aidp-detaliu-stat { display: flex; gap: 12px; font-size: 11px; }
#aidpersonaj .aidp-detaliu-butoane { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
#aidpersonaj .aidp-detaliu-butoane .aidp-buton { height: 26px; }
#aidpersonaj .aidp-legaturi { text-align: right; }

/* CUM OBTII HAINE -- randurile care tin locul garderobei goale.
 *
 * Acelasi lucru ca tabla „Cum obtii" din joc (.aid-cum / .aid-izvoare), spus
 * in limbajul ecranului: coloana garderobei are ~320px, deci icoana si textul
 * stau pe un rand, iar „cu ce" coboara sub ele cand nu mai incape -- de aia
 * randul e `flex-wrap` si coloana din dreapta n-are latime fixa, spre deosebire
 * de sora ei din #istanga, care are loc sa alinieze cifrele una sub alta.
 *
 * Explicatia aduce cu ea <b> si <a> din Izvoare, deci culorile lor se spun
 * aici: altfel linkul ar lua albastrul implicit al browserului peste negru. */
#aidpersonaj .aidp-cum { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(198, 158, 12, 0.18); }
#aidpersonaj .aidp-cum-rand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.42); }
#aidpersonaj .aidp-cum-ic { flex: 0 0 18px; line-height: 0; align-self: flex-start; margin-top: 1px; color: var(--aid-text-slab, #9a9a7a); }
#aidpersonaj .aidp-cum-ic svg { display: block; }
#aidpersonaj .aidp-cum-text { flex: 1 1 180px; min-width: 0; }
#aidpersonaj .aidp-cum-unde { font-size: 11px; font-weight: bold; color: #fff; }
#aidpersonaj .aidp-cum-explic { line-height: 1.5; margin-top: 2px; }
#aidpersonaj .aidp-cum-explic b { color: var(--aid-text, #e6e0c8); font-weight: bold; }
#aidpersonaj .aidp-cum-explic a { color: var(--aid-aur, #ffcc00); text-decoration: none; }
#aidpersonaj .aidp-cum-explic a:hover { text-decoration: underline; }
#aidpersonaj .aidp-cum-cu { margin-left: auto; font-size: 10px; color: var(--aid-aur-stins, #c69e0c); white-space: nowrap; }

/* back, and the toast */
#aidpersonaj .aidp-inapoi { position: absolute; left: 24px; bottom: 22px; height: 30px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-radius: 15px; border: 1px solid var(--aid-aur-stins, #c69e0c); background: rgba(5, 5, 5, 0.7); color: var(--aid-aur, #ffcc00); font: bold 12px Verdana, Arial, sans-serif; cursor: pointer; }
#aidpersonaj .aidp-inapoi:hover { color: #fff3bd; border-color: var(--aid-aur, #ffcc00); }
#aidpersonaj .aidp-mesaj { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(5, 5, 5, 0.85); color: #fff3bd; font-size: 12px; box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), 0 4px 12px rgba(0, 0, 0, 0.6); }
#aidpersonaj .aidp-mesaj[hidden] { display: none; }
#aidpersonaj .aidp-mesaj-rau { box-shadow: inset 0 0 0 1px #a5221a, 0 4px 12px rgba(0, 0, 0, 0.6); color: #ffd8d0; }

@media (max-width: 1240px) {
	#aidpersonaj .aidp-corp { grid-template-columns: 260px minmax(360px, 1fr) 320px; gap: 16px; padding: 16px 16px 60px; }
	#aidpersonaj .aidp-sloturi { width: 150px; }
	#aidpersonaj .aidp-slot-text .aidp-mic { max-width: 76px; }
}

/* the active potions: the countdown moved into the tooltip (port fix in
   main.php), so the white div that appeared under the title on hover -- and
   could not be read there -- stays for the tick to write and is never shown */
#potiuniactive .aratatimplicori { display: none !important; }
#dek .aid-tip-timp { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-weight: bold; color: #5a3a08; }
#dek .aid-tip-nota { display: block; margin-top: 3px; font-size: 10px; color: #7a6a4a; }

/* the magic elements: an empty kind is drawn faint, without its count, so the
   row always shows what there is to find (port fix in main.php) */
.aid-element-gol img { opacity: .28; filter: grayscale(.8); }
.aid-element-gol > div { display: none; }

/* the Premium pill above the minimap is gone -- "butonul premium de sus il
   putem scoate (avem link spre premium deasupra artefactelor)" */
#blocharta .aid-i-premium { display: none !important; }

/* ============================================ the building page, the picture big
 *
 * "cardul auriu cu Nivelul, de sus, trece sub bordura divului; oare nu ar fi
 *  faina prezentarea cladirii mai rich? grafica png-ului ne permite sa marim
 *  poza (full width, height: 166px) -- o arata pe centru, cu fundalul acela
 *  fain, si punem descrierea dedesubt." (8 Sept 2026)
 *
 * The header table (picture cell | description cell) is unrolled into blocks:
 * the plate becomes a full-width stage 166px tall -- a dusk sky falling to
 * dark ground, a warm glow behind the building, its shadow on the ground --
 * the picture centred in it at full height, the level stamp INSIDE the stage
 * (it overhung the plate by 9px and went under the panel's border), and the
 * description under the stage, centred. The markup is the twelve pages' own;
 * only the rules change, so the port keeps writing what it writes. */
#istanga .aid-cladire,
#istanga .aid-cladire > tbody,
#istanga .aid-cladire > tbody > tr,
#istanga .aid-cladire > tbody > tr > td { display: block; width: auto; }
#istanga .aid-cladire > tbody > tr > td { border-bottom: 0; padding: 0; }
#istanga .aid-cladire > tbody > tr > td.aid-cladire-poza { width: auto; padding: 0; text-align: center; }
#istanga .aid-cladire > tbody > tr > td:last-child { padding: 0 0 10px; border-bottom: 1px solid rgba(255, 226, 178, 0.12); }
#istanga .aid-cladire-plinta {
	display: block; width: 100%; height: 166px; box-sizing: border-box;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 96%, rgba(255, 204, 0, 0.16) 0%, rgba(255, 204, 0, 0) 58%),
		radial-gradient(circle at 30% 10%, rgba(255, 226, 178, 0.10), rgba(0, 0, 0, 0) 55%),
		linear-gradient(180deg, #1b2a15 0%, #142012 46%, #0c150b 72%, #070c06 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 226, 178, 0.12), inset 0 -18px 30px rgba(0, 0, 0, 0.45);
}
#istanga .aid-cladire-plinta::after {
	/* the building's shadow on the ground */
	content: ''; position: absolute; left: 50%; bottom: 10px; width: 240px; height: 26px;
	transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%);
	z-index: 0;
}
#istanga .aid-cladire-plinta > a { position: relative; z-index: 1; }

/* ================================ a building that has just gone up a level
 *
 * "sa afiseze o animatie scurta dupa ce dam upgrade (nu cred ca ne trebuie popup
 *  cu OK aici)... o mica tranzitie a cladirii, nu chiar un fade simplu, poate un
 *  transform mai interesant, sa se mareasca si sa se faca la loc (ca si cum a
 *  respirat?)."
 *
 * No dialog: the thing that changed is a picture already on the screen with its
 * level written on it, so the picture answers and there is nothing to dismiss.
 *
 * `transform-origin: 50% 92%` and not the centre -- a building grows out of its
 * own ground. From the middle it would drift up off the plinth, which reads as
 * a picture being zoomed rather than a building getting bigger. The overshoot
 * past 1 on the way back is the breath: it settles rather than stopping. */
@keyframes aid-cladire-creste {
	0%   { transform: scale(1);    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)); }
	28%  { transform: scale(1.09); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 16px rgba(255, 204, 0, 0.55)) brightness(1.18); }
	62%  { transform: scale(0.985); }
	100% { transform: scale(1);    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)); }
}
/* the same movement, the other way round, and no gold in it: going down is not
   a thing to celebrate, only a thing to notice */
@keyframes aid-cladire-scade {
	0%   { transform: scale(1); }
	28%  { transform: scale(0.9); filter: brightness(0.72) saturate(0.6); }
	62%  { transform: scale(1.015); }
	100% { transform: scale(1); }
}
#istanga .aid-cladire-img.aid-cladire-creste,
#istanga .aid-cladire-img.aid-cladire-scade {
	transform-origin: 50% 92%;
	will-change: transform;
}
#istanga .aid-cladire-img.aid-cladire-creste { animation: aid-cladire-creste .9s cubic-bezier(.2, .9, .3, 1); }
#istanga .aid-cladire-img.aid-cladire-scade  { animation: aid-cladire-scade  .9s cubic-bezier(.2, .9, .3, 1); }

/* the badge turns over with the picture rather than before it */
@keyframes aid-nivel-nou {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.35); box-shadow: 0 0 14px rgba(255, 204, 0, 0.75); }
	100% { transform: scale(1); }
}
#istanga .aid-nivel.aid-nivel-nou { animation: aid-nivel-nou .9s cubic-bezier(.2, .9, .3, 1); }

/* THE SPARKS NEED SOMEWHERE TO FLY.
 *
 * A new PHASE is a different sprite -- level 11 and 21 for the institutions,
 * every level for the house -- and js/aidcladire.js borrows the purchase
 * dialog's own particle layer for it. That layer is `position: absolute; inset:
 * 0`, so it needs a positioned box, and it must NOT be the plinth: the plinth
 * carries `overflow: hidden` for the building's own frame and would clip every
 * spark at its rim. The cell around it is the right size and clips nothing. */
#istanga .aid-cladire-poza { position: relative; }

@media (prefers-reduced-motion: reduce) {
	#istanga .aid-cladire-img.aid-cladire-creste,
	#istanga .aid-cladire-img.aid-cladire-scade,
	#istanga .aid-nivel.aid-nivel-nou { animation: none; }
}
/* SI SA INCAPA TOATA (17 sept 2026). „cele mari (birouri, tv, mall) sunt
 * taiate la baza lor. ar trebui sa le potrivim si ca inaltime, pe mobil, sa
 * intre toata cladirea."
 *
 * `height: 100%` pe o poza cu `box-sizing: content-box` inseamna 166px PLUS
 * cei 24 de padding: 190 intr-o scena de 166, iar scena taie ce iese
 * (`overflow: hidden`) -- adica exact talpile. Se vedea la cele late, fiindca
 * ele ating intai `max-width` si raman inalte.
 *
 * Cu `border-box`, inaltimea data include si padding-ul, iar `object-fit:
 * contain` aseaza desenul in cutia aia fara sa-l taie si fara sa-l turteasca.
 * `object-position: bottom` il tine cu talpile pe sol, nu plutind la mijloc --
 * scena are umbra desenata jos, si acolo trebuie sa cada. */
#istanga .aid-cladire-img {
	/* inaltimea scrisa in pixeli, nu in procente: procentul se masoara fata de
	   `<a>`-ul din jur, care n-are inaltime definita, deci nu se rezolva si
	   poza isi lua inaltimea din latime (374 x raportul ei = 305 intr-o scena
	   de 190). Numarul de aici merge cu inaltimea scenei de mai sus. */
	width: 100%; max-width: 100%; height: 166px; margin: 0 auto;
	box-sizing: border-box;   /* vezi si regula cu `img.` din aidmobil.css */
	padding: 10px 0 14px;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
}
#istanga .aid-nivel { top: 8px; left: 8px; }
#istanga .aid-cladire-desc { padding: 10px 14px 4px; text-align: center; font-size: 12px; line-height: 18px; }

/* ====================================================== the numbered pager
 *
 * ceilalti.php and topactuali.php (hand-written, @aidraci-adopted): "o
 * paginare serioasa jos (nu cu sageti)". First, a window of five round the
 * current, last; Anterior / Urmatoare as pills; the current page a filled
 * gold chip; the count on the right in the muted voice. */
#istanga .aid-paginare {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
	margin: 12px 4px 4px; font-size: 12px; line-height: 24px;
}
/* Inside a scrolling list box (the inbox, the reports) it is part of the list
   and scrolls with it: "pune acel bloc de paginare in divul cu lista, sa nu
   ramana fix acolo in bottom, pt ca zona de scrollare ramane foarte mica."
   A rule above it, so the last row and the first page number are not two things
   floating at the same distance from each other. */
#istanga .aid-cutie .aid-paginare {
	margin: 0 4px 4px; padding: 10px 0 4px;
	border-top: 1px solid rgba(255, 226, 178, 0.10);
}
#istanga .aid-paginare a, #istanga .aid-paginare .aid-pag-cur, #istanga .aid-paginare .aid-pag-pas {
	display: inline-block; min-width: 24px; height: 24px; padding: 0 7px; box-sizing: border-box;
	border-radius: 12px; text-align: center; text-decoration: none;
	font-family: var(--aid-font-cifre, 'Courier New', monospace); font-weight: bold; font-variant-numeric: tabular-nums;
	color: var(--aid-aur, #ffcc00); background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#istanga .aid-paginare a:hover { color: var(--aid-text-tare, #fff); box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); }
#istanga .aid-paginare .aid-pag-cur { color: #1a1400; background: linear-gradient(180deg, #ffd34d 0%, #c69e0c 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
#istanga .aid-paginare .aid-pag-pas { font-family: Verdana, Arial, sans-serif; font-weight: bold; font-size: 11px; padding: 0 12px; }
#istanga .aid-paginare .aid-pag-stins { color: var(--aid-text-stins, #97917a); box-shadow: none; background: rgba(0, 0, 0, 0.2); }
#istanga .aid-paginare .aid-pag-puncte { color: var(--aid-text-stins, #97917a); padding: 0 2px; }
#istanga .aid-paginare .aid-pag-info { flex-basis: 100%; text-align: center; font-size: 10px; color: var(--aid-text-stins, #97917a); line-height: 16px; }

/* sortable column heads: the active one wears an arrow */
#istanga .aid-ceilalti tr.aid-cap td a { color: inherit; text-decoration: none; }
#istanga .aid-ceilalti tr.aid-cap td a:hover { color: var(--aid-text-tare, #fff); }
#istanga .aid-ceilalti .aid-sageata { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0; }
#istanga .aid-ceilalti .aid-sortat .aid-sageata { opacity: 1; }
#istanga .aid-ceilalti .aid-sortat-desc .aid-sageata { border-top: 5px solid var(--aid-aur, #ffcc00); }
#istanga .aid-ceilalti .aid-sortat-asc .aid-sageata { border-bottom: 5px solid var(--aid-aur, #ffcc00); }
#istanga .aid-ceilalti td { padding-left: 6px; }
#istanga .aid-ceilalti .aid-ceilalti-nr { width: 1%; text-align: right; color: var(--aid-text-slab, #97917a); font-variant-numeric: tabular-nums; }
#istanga .aid-ceilalti .aid-ceilalti-cifre { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; text-align: right; padding-right: 8px; }
#istanga .aid-ceilalti tr.aid-cap td.aid-ceilalti-col-puncte, #istanga .aid-ceilalti tr.aid-cap td.aid-ceilalti-col-draci, #istanga .aid-ceilalti tr.aid-cap td.aid-ceilalti-col-nivel { text-align: right; padding-right: 8px; }
#istanga .aid-ceilalti tr.aid-ceilalti-eu > td { background: rgba(255, 204, 0, 0.10); box-shadow: inset 2px 0 0 var(--aid-aur, #ffcc00); }
#istanga .aid-ceilalti-total { color: var(--aid-text, #e6e0c8); }
#istanga .aid-ceilalti .aid-gol { text-align: center; color: var(--aid-text-stins, #97917a); padding: 14px; }

/* ============================================================== the top 100
 *
 * topactuali.php (hand-written): the battle report's rays behind a trophy in
 * the header, a three-step podium for the first three, medals as CSS discs,
 * the player's own row marked, the numbered pager. */
#istanga .aid-top-antet { height: 84px; flex-direction: row; gap: 14px; justify-content: flex-start; padding: 0 18px; }
#istanga .aid-top-trofeu { position: relative; width: 56px; height: 56px; flex: 0 0 auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); }
#istanga .aid-top-antet-text { position: relative; text-align: left; }
#istanga .aid-top-titlu { font-size: 17px; line-height: 20px; font-weight: bold; letter-spacing: .02em; }
#istanga .aid-podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px 6px 12px; }
#istanga .aid-podium-loc {
	position: relative; flex: 1 1 0; max-width: 176px; display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 10px 8px 0; text-decoration: none; color: var(--aid-text, #e6e0c8); text-align: center;
}
#istanga .aid-podium-loc:hover .aid-podium-nume { color: var(--aid-text-tare, #fff); }
#istanga .aid-podium-nume { font-size: 13px; font-weight: bold; color: var(--aid-aur, #ffcc00); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#istanga .aid-podium-aur .aid-podium-nume { font-size: 18px; }
#istanga .aid-podium-draci { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-size: 11px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-podium-treapta {
	width: 100%; margin-top: 6px; border-radius: 6px 6px 0 0;
	background: var(--aid-fata-piatra, linear-gradient(160deg, #3a352c 0%, #201d18 45%, #12110e 100%));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 226, 178, 0.14), 0 4px 10px rgba(0, 0, 0, 0.5);
}
#istanga .aid-podium-aur .aid-podium-treapta { height: 44px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 2px 0 rgba(255, 226, 178, 0.14), inset 0 0 24px rgba(255, 204, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.5); }
#istanga .aid-podium-argint .aid-podium-treapta { height: 30px; }
#istanga .aid-podium-bronz .aid-podium-treapta { height: 20px; }
#istanga .aid-podium-eu .aid-podium-treapta { box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00), 0 4px 10px rgba(0, 0, 0, 0.5); }
/* the medals: a disc with a rim and a highlight, in three metals */
#istanga .aid-medalie {
	--aid-med: #ffd34d; --aid-med-intunecat: #8a5f12;
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #fff 0%, var(--aid-med) 28%, var(--aid-med-intunecat) 100%);
	box-shadow: 0 0 0 2px var(--aid-med-intunecat), 0 0 0 3px rgba(0, 0, 0, 0.7), 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
	color: #1a1200; font: bold 15px/1 Verdana, Arial, sans-serif; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
#istanga .aid-medalie-argint { --aid-med: #dfe3e6; --aid-med-intunecat: #6f7780; }
#istanga .aid-medalie-bronz { --aid-med: #d9955a; --aid-med-intunecat: #6e3f18; }
#istanga .aid-medalie-mica { width: 22px; height: 22px; font-size: 11px; box-shadow: 0 0 0 1px var(--aid-med-intunecat), 0 0 0 2px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.6); }
#istanga .aid-top-lista .aid-t-loc { width: 40px; text-align: center; }
#istanga .aid-top-lista .aid-t-cifra { text-align: right; padding-right: 10px; font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; }
#istanga .aid-top-lista tr.aid-cap td.aid-t-cifra { text-align: right; }
#istanga .aid-top-lista .aid-t-aur .aid-t-nume a { font-size: 14px; }
#istanga .aid-top-lista tr.aid-t-eu > td { background: rgba(255, 204, 0, 0.10); box-shadow: inset 2px 0 0 var(--aid-aur, #ffcc00); }
#istanga .aid-top-lista .aid-gol { text-align: center; color: var(--aid-text-stins, #97917a); padding: 14px; }
#istanga .aid-top-nota { margin-top: 10px; }

/* ============================================================ contul meu
 *
 * datecont.php (hand-written): a header with the portrait and the account's
 * numbers, then cards on a two-column grid -- Descriere (wide), Profesie,
 * Cont, Bataliile (wide) -- and one Actualizeaza. */
#istanga .aid-cont-antet { display: flex; align-items: center; gap: 14px; padding: 6px 4px 12px; border-bottom: 1px solid rgba(255, 226, 178, 0.12); margin-bottom: 12px; }
#istanga .aid-cont-poza { width: 56px; height: 84px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #2a2a25 0%, #070706 80%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 2px var(--aid-aur-stins, #c69e0c); display: flex; align-items: flex-end; justify-content: center; }
#istanga .aid-cont-poza img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
#istanga .aid-cont-cine { flex: 1 1 auto; min-width: 0; }
#istanga .aid-cont-nume { font-size: 17px; font-weight: bold; color: var(--aid-aur, #ffcc00); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); display: flex; align-items: center; gap: 8px; }
#istanga .aid-cont-nivel { min-width: 22px; height: 22px; font-size: 11px; }
/* PASTILA DE PREMIUM, LÂNGĂ NUME (20 septembrie 2026).
 *
 * „ar trebui sa semnalizam si in datecont.php la jucatorul cu Premium cumva mai
 *  special ca el are cont premium."
 *
 * Aur pe negru, cu literă mică și spațiată: aceeași limbă cu bara de nivel de
 * lângă ea, ca să nu pară un banner lipit peste antet. Nu clipește și nu are
 * animație -- e o stare, nu o reclamă. */
#istanga .aid-cont-premium {
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 204, 0, 0.22) 0%, rgba(255, 204, 0, 0.08) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.55);
	font-family: var(--aid-font-titlu);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	text-shadow: none;
	color: var(--aid-aur, #ffcc00);
}
/* Și banda de sub antet, care spune CE ÎI DĂ. Pastila spune că ai; asta spune
   la ce folosește, cu poza licorii care face treaba -- Elixirul Adevărului,
   licoarea 9. Apare numai la cine e Premium: cui nu e, nu-i vinde nimeni nimic
   din pagina lui de setări. */
#istanga .aid-cont-premium-banda {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 4px 12px;
	padding: 10px 12px;
	border-radius: var(--aid-raza-panou-interior, 6px);
	border: 1px solid rgba(255, 204, 0, 0.30);
	background:
		linear-gradient(180deg, rgba(255, 204, 0, 0.08) 0%, rgba(255, 204, 0, 0) 70%),
		rgba(0, 0, 0, 0.30);
	/* `#istanga` centrează textul prin moștenire, iar o bandă de două rânduri
	   centrată arată ca un anunț, nu ca o stare a contului. */
	text-align: left;
}
#istanga .aid-cont-premium-banda img {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: var(--aid-raza, 4px);
	background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.22);
}
#istanga .aid-cont-premium-vorbe { min-width: 0; }
#istanga .aid-cont-premium-vorbe b { display: block; font-size: 12px; color: var(--aid-aur, #ffcc00); }
#istanga .aid-cont-premium-vorbe span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 15px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-cont-premium-vorbe span b { display: inline; color: var(--aid-text, #e6e0c8); }
#istanga .aid-cont-sub { font-size: 12px; color: var(--aid-text, #e6e0c8); margin-top: 2px; }
#istanga .aid-cont-cifre { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-cont-cifre b { color: #fff; font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; }
#istanga .aid-cont-personaj { flex: 0 0 auto; }
#istanga .aid-cont-ok { margin: 0 4px 10px; padding: 6px 12px; border-radius: 999px; background: rgba(111, 192, 96, 0.14); box-shadow: inset 0 0 0 1px rgba(111, 192, 96, 0.5); color: #b8e8a8; font-size: 11px; text-align: center; }
#istanga .aid-cont-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 4px; }
#istanga .aid-cont-card { padding: 10px 12px 12px; border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); }
#istanga .aid-cont-card-lat { grid-column: 1 / -1; }
#istanga .aid-cont-card h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: bold; color: var(--aid-aur, #ffcc00); }
#istanga .aid-cont-nota { margin: 0 0 8px; font-size: 10.5px; line-height: 15px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-cont-atentie { margin: 8px 0 0; color: #f0c48a; }
#istanga .aid-cont textarea { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; }
#istanga .aid-cont-contor { text-align: right; font-size: 10px; color: var(--aid-text-stins, #97917a); font-family: var(--aid-font-cifre, 'Courier New', monospace); margin-top: 3px; }
#istanga .aid-cont-select { width: 100%; box-sizing: border-box; }
#istanga .aid-cont-rand { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; }
#istanga .aid-cont-rand:last-child { border-bottom: 0; }
#istanga .aid-cont-eticheta { color: var(--aid-text-stins, #97917a); }
#istanga .aid-cont-actiuni { text-align: center; padding: 12px 0 4px; }
/* Actualizeaza moved off the bottom of the page and into the Descriere card,
   on the counter's row: the button is now beside the only field it is the
   only way to save. The counter keeps its own margin-top, so the row needs
   none of its own. */
#istanga .aid-cont-subsol { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#istanga .aid-cont-subsol .aid-cont-contor { margin-top: 0; }
/* THE TWO ROWS THAT CAME BACK WITH THE PAGE (17 sept 2026).
   „Doi pasi la intrare" in cardul Cont -- becul si drumul spre cont.php, ca
   sa se vada starea fara sa deschizi pagina de siguranta -- si „Ecranul" in
   Optiuni, sub bifa: cele doua butoane telefon / desktop, mereu la vedere.
   Randul are voie sa se rupa pe doua linii: pe un card de jumatate de latime
   eticheta plus doua butoane nu incap mereu pe una. */
#istanga .aid-cont-rand { flex-wrap: wrap; }
#istanga .aid-cont-doipasi { display: inline-flex; align-items: center; gap: 8px; }
#istanga .aid-cont-ecran { border-bottom: 0; padding-top: 10px; }
#istanga .aid-cont-ecran .aid-cont-eticheta { align-self: center; }
#istanga .aid-cont-nota-jos { margin: 6px 0 0; }
/* the professions as a table, one Alege per row -- "e greu sa stai sa citesti
   in select" */
#istanga .aid-cont-profesii { width: 100%; border-collapse: collapse; font-size: 12px; }
#istanga .aid-cont-profesii td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; }
#istanga .aid-cont-profesii tr.aid-cap td { padding: 2px 6px 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); border-bottom: 1px solid rgba(255, 226, 178, 0.14); background: none; }
#istanga .aid-cont-profesii tr:last-child td { border-bottom: 0; }
#istanga .aid-cont-profesie-cur td { background: rgba(255, 204, 0, 0.07); }
#istanga .aid-cont-profesie-cur .aid-cont-prof-nume { color: var(--aid-aur, #ffcc00); }
#istanga .aid-cont-prof-nume { font-weight: bold; color: #fff; white-space: nowrap; }
#istanga .aid-cont-prof-nume small { display: block; font-weight: normal; font-size: 10px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-cont-profesii .aid-t-cifra { text-align: right; font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; color: var(--aid-text, #e6e0c8); }
#istanga .aid-cont-plus { color: #b8e8a8 !important; }
#istanga .aid-cont-minus { color: #f0a08a !important; }
#istanga .aid-cont-gen { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; font-size: 10px; text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
#istanga .aid-cont-gen-el { background: rgba(90, 140, 220, 0.22); color: #bcd4ff; }
#istanga .aid-cont-gen-ea { background: rgba(220, 90, 150, 0.22); color: #ffc0dc; }
#istanga .aid-cont-prof-act { text-align: right; white-space: nowrap; }
#istanga .aid-cont-prof-esti { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--aid-aur, #ffcc00); }
/* the big checkbox: white box, oversized green check */
#istanga .aid-bifa { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 4px 0; }
#istanga .aid-bifa input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
#istanga .aid-bifa-cutie { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 2px #b9b39a, 0 1px 2px rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; overflow: visible; transition: box-shadow .12s; }
#istanga .aid-bifa-cutie svg { width: 30px; height: 30px; margin: -10px -6px 0 0; color: #2fb34a; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); opacity: 0; transform: scale(.4); transition: opacity .12s, transform .16s cubic-bezier(.2, 1.4, .4, 1); }
#istanga .aid-bifa input:checked + .aid-bifa-cutie { box-shadow: inset 0 0 0 2px #2fb34a, 0 1px 2px rgba(0, 0, 0, 0.7); }
#istanga .aid-bifa input:checked + .aid-bifa-cutie svg { opacity: 1; transform: scale(1); }
#istanga .aid-bifa input:focus-visible + .aid-bifa-cutie { box-shadow: inset 0 0 0 2px #b9b39a, 0 0 0 3px rgba(255, 204, 0, 0.55); }
#istanga .aid-bifa:hover .aid-bifa-cutie { box-shadow: inset 0 0 0 2px var(--aid-aur-stins, #c69e0c), 0 1px 2px rgba(0, 0, 0, 0.7); }
#istanga .aid-bifa-text { font-size: 12px; line-height: 16px; color: var(--aid-text, #e6e0c8); padding-top: 4px; }
#istanga .aid-bifa-text b { color: #fff; }
#istanga .aid-bifa-text small { display: block; font-size: 10.5px; line-height: 14px; color: var(--aid-text-stins, #97917a); margin-top: 2px; }

/* ============================================================ premium, the head
 *
 * premium.php (port fix): the credits as the big figure, the two ways to get
 * more as ring pills beside it, in one band under the title -- instead of two
 * PNG buttons pinned over the title's corners. */
#istanga .aid-premium-antet {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin: 0 4px 12px; padding: 10px 14px;
	border-radius: var(--aid-raza-panou-interior, 6px);
	background: radial-gradient(ellipse at 18% 50%, rgba(255, 204, 0, 0.14) 0%, rgba(255, 204, 0, 0) 55%), rgba(0, 0, 0, 0.34);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.12);
}
#istanga .aid-premium-credite { display: flex; flex-direction: column; gap: 2px; }
#istanga .aid-premium-credite-eticheta { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); }
#istanga .aid-premium-credite-nr { font: bold 24px/28px var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; color: var(--aid-aur, #ffcc00); text-shadow: 0 0 14px rgba(255, 204, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.9); }
#istanga .aid-premium-actiuni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#istanga .aid-premium-buton { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; font-size: 11px; }
#istanga .aid-premium-buton svg { width: 14px; height: 14px; }
#istanga .aid-premium-cumpara { color: #fff3bd; box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 12px -2px rgba(255, 204, 0, 0.55); }

/* ============================================================== the help hub
 *
 * ghid.php (port fix): the reading list as cards -- an icon, the title and one
 * line of what is inside -- before the tale. */
#istanga .aid-ajutor-carduri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
#istanga .aid-ajutor-card {
	display: flex; align-items: center; gap: 10px; padding: 9px 10px; text-decoration: none;
	border-radius: var(--aid-raza-panou-interior, 6px);
	background: rgba(0, 0, 0, 0.32);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10);
	color: var(--aid-text, #e6e0c8);
	transition: box-shadow 130ms linear, transform 90ms ease;
}
#istanga .aid-ajutor-card:hover { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), 0 3px 8px rgba(0, 0, 0, 0.45); transform: translateY(-1px); }
#istanga .aid-ajutor-ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(255, 204, 0, 0.22), rgba(0, 0, 0, 0) 70%), #0a0a0a; box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); color: var(--aid-aur, #ffcc00); }
#istanga .aid-ajutor-ic svg { width: 18px; height: 18px; }
#istanga .aid-ajutor-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#istanga .aid-ajutor-text b { font-size: 12px; color: var(--aid-aur, #ffcc00); }
#istanga .aid-ajutor-text small { font-size: 10px; line-height: 13px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-ajutor-extern .aid-ajutor-ic { color: var(--aid-text, #e6e0c8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
#istanga .aid-ajutor-termeni { margin: 0 0 14px; text-align: right; font-size: 10px; }
#istanga .aid-ajutor-termeni a { color: var(--aid-text-stins, #97917a); }

/* ================================================================ scrie-ne
 *
 * scrisoare.php (port fix): an intro plate with the mascot, then the form laid
 * out as a sheet -- labels in a narrow column, fields the full width. */
#istanga .aid-scrisoare-intro { display: flex; align-items: center; gap: 12px; margin: 0 4px 12px; padding: 10px 12px; border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); font-size: 11.5px; line-height: 17px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-scrisoare-intro .aid-intro-drac { width: 38px; height: 38px; flex: 0 0 auto; }
#istanga .aid-scrisoare-intro b { color: var(--aid-aur, #ffcc00); }
#istanga .aid-scrisoare table.tabla { width: 100%; }
#istanga .aid-scrisoare table.tabla > tbody > tr > td:first-child { width: 72px; padding: 8px 6px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); vertical-align: top; padding-top: 12px; }
#istanga .aid-scrisoare table.tabla > tbody > tr > td:first-child[colspan] { width: auto; text-transform: none; letter-spacing: 0; padding-top: 8px; }
#istanga .aid-scrisoare input[name="titlu"], #istanga .aid-scrisoare textarea, #istanga .aid-scrisoare select { width: 100% !important; box-sizing: border-box; }
#istanga .aid-scrisoare textarea { min-height: 220px; height: 220px !important; resize: vertical; }

/* ============================================================== statistici
 *
 * statistici.php (hand-written): header with rank, four resource tiles, cards
 * on a two-column grid (XP bar, bonuses, war record, collections), the rounds
 * bar chart, the empty badges shelf, the referrals. */
#istanga .aid-stat-antet { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 6px 10px; }
#istanga .aid-stat-nume { font-size: 17px; font-weight: bold; color: var(--aid-aur, #ffcc00); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); display: flex; align-items: center; gap: 8px; }
#istanga .aid-stat-nume .aid-numar { min-width: 22px; height: 22px; font-size: 11px; }
#istanga .aid-stat-sub { font-size: 11px; color: var(--aid-text-stins, #97917a); margin-top: 2px; }
#istanga .aid-stat-sub b { color: var(--aid-text, #e6e0c8); }
#istanga .aid-stat-loc { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.34); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); }
#istanga .aid-stat-loc-nr { font: bold 22px/24px var(--aid-font-cifre, 'Courier New', monospace); color: var(--aid-aur, #ffcc00); text-shadow: 0 0 12px rgba(255, 204, 0, 0.35); }
#istanga .aid-stat-loc-et { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); }
#istanga .aid-stat-tile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 4px 10px; }
#istanga .aid-stat-tila { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border-radius: var(--aid-raza-panou-interior, 6px); background: radial-gradient(ellipse at 50% 0%, rgba(255, 204, 0, 0.10), rgba(0, 0, 0, 0) 70%), rgba(0, 0, 0, 0.34); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); }
#istanga .aid-stat-tila img { height: 22px; width: auto; }
#istanga .aid-stat-tila b { font: bold 13px/16px var(--aid-font-cifre, 'Courier New', monospace); color: #fff; font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#istanga .aid-stat-tila small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); }
#istanga .aid-stat-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 4px; }
#istanga .aid-stat-card { padding: 10px 12px 12px; border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); min-width: 0; }
#istanga .aid-stat-card-lat { grid-column: 1 / -1; }
#istanga .aid-stat-card h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: bold; color: var(--aid-aur, #ffcc00); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#istanga .aid-stat-card h3 span { text-transform: none; letter-spacing: 0; font-weight: normal; }
#istanga .aid-stat-stins { color: var(--aid-text-stins, #97917a); }
#istanga .aid-stat-mic { font-size: 10px; line-height: 14px; }
#istanga .aid-stat-cifre { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; color: #fff; }
#istanga .aid-stat-bine { color: #8ee0a8; }
#istanga .aid-stat-rau { color: #f09a8e; }
#istanga .aid-stat-rand { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 11.5px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-stat-nota { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
#istanga .aid-stat-xp-cap { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
#istanga .aid-stat-bara { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); overflow: hidden; margin-bottom: 6px; }
#istanga .aid-stat-bara-mica { height: 5px; border-radius: 3px; margin: -2px 0 6px; }
#istanga .aid-stat-bara-plin { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a5f12, #ffd34d); }
#istanga .aid-stat-plin-rosu { background: linear-gradient(90deg, #7a160f, #e0261c); }
#istanga .aid-stat-plin-verde { background: linear-gradient(90deg, #1f5a2a, #6fc060); }
#istanga .aid-stat-colectii { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#istanga .aid-stat-colectii a { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); text-decoration: none; }
#istanga .aid-stat-colectii a:hover { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); }
#istanga .aid-stat-colectii b { font-size: 15px; }
#istanga .aid-stat-colectii small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); }
#istanga .aid-stat-medalii { display: flex; gap: 12px; margin-bottom: 6px; font-size: 11px; color: #fff; }
#istanga .aid-stat-medalie { display: inline-flex; align-items: center; gap: 4px; }
#istanga .aid-stat-medalie i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0%, var(--aid-med) 35%, color-mix(in srgb, var(--aid-med) 50%, #000) 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
#istanga .aid-stat-medalie small { color: var(--aid-text-stins, #97917a); }
#istanga .aid-stat-grafic { display: block; width: 100%; height: auto; margin-bottom: 4px; }
#istanga .aid-stat-gol { padding: 14px; text-align: center; color: var(--aid-text-stins, #97917a); font-size: 11px; }
#istanga .aid-stat-rafturi { display: flex; gap: 8px; margin: 4px 0 8px; }
#istanga .aid-stat-raft { flex: 1 1 0; height: 40px; border-radius: 6px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 226, 178, 0.08); }
#istanga .aid-stat-curand { opacity: .8; }

/* ====================================================== artefactul norocos
 *
 * concursa.php (hand-written): the wheel of fortune -- twelve segments in the
 * three prize colours, gold rim, studs, a pointer -- turning slowly, the mascot
 * beside the rule; the podium of today's winners (empty before the draw). */
#istanga .aid-roata-scena { display: flex; align-items: center; gap: 16px; padding: 4px 6px 12px; }
#istanga .aid-roata-cadru { flex: 0 0 200px; width: 200px; height: 200px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); }
#istanga .aid-roata { width: 200px; height: 200px; display: block; overflow: visible; }
#istanga .aid-roata-disc { transform-origin: 0 0; animation: aid-roata-invarte 28s cubic-bezier(.2, .1, .2, 1) infinite; }
@keyframes aid-roata-invarte { 0% { transform: rotate(0deg); } 55% { transform: rotate(1470deg); } 62% { transform: rotate(1440deg); } 100% { transform: rotate(1440deg); } }
@media (prefers-reduced-motion: reduce) { #istanga .aid-roata-disc { animation: none; } }
#istanga .aid-roata-text { flex: 1 1 auto; min-width: 0; position: relative; padding-left: 4px; }
#istanga .aid-roata-drac { float: right; width: 46px; height: 46px; margin: 0 0 6px 10px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
#istanga .aid-roata-text .aid-concurs-lead { margin: 0 0 8px; }

/* NOROCOSUL SĂPTĂMÂNII: același drăcușor, pe partea cealaltă (18 sept 2026).
   „lipseste dracusorul din zona descrierii, de sus [...] il poti pune totusi in
    stanga." Pe roată plutește la dreapta fiindcă textul stă lângă roată; aici
   pagina începe cu descrierea, deci el deschide rândul. `float`, ca acolo, ca
   textul să curgă pe lângă el și nu sub el. */
#istanga .aid-norocos-intro { position: relative; }
#istanga .aid-norocos-drac {
	float: left;
	width: 46px;
	height: 46px;
	margin: 0 12px 6px 0;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}
/* 62ch se măsoară de la marginea paragrafului, care acum începe după drăcuș:
   fără asta rândul s-ar strânge cu lățimea lui și ar rămâne golul din dreapta
   despre care e vorba. */
#istanga .aid-norocos-intro .aid-concurs-lead { max-width: none; margin: 0 0 8px; }
#istanga .aid-norocos-intro::after { content: ""; display: block; clear: both; }
#istanga .aid-roata-premii { font-size: 15px; color: var(--aid-aur, #ffcc00); }
#istanga .aid-roata-esti, #istanga .aid-roata-nu { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; font-size: 11px; }
#istanga .aid-roata-esti { background: rgba(111, 192, 96, 0.14); box-shadow: inset 0 0 0 1px rgba(111, 192, 96, 0.5); color: #b8e8a8; }
#istanga .aid-roata-nu { background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.18); color: var(--aid-text, #e6e0c8); }
#istanga .aid-roata-linkuri { margin: 0; font-size: 11px; }
#istanga .aid-roata-ora { font-size: 11px; font-weight: normal; text-transform: none; letter-spacing: 0; color: var(--aid-text-stins, #97917a); }
#istanga .aid-podium-concurs { margin-top: 4px; }
#istanga .aid-podium-gol .aid-podium-loc { opacity: .55; }
#istanga .aid-podium-gol .aid-podium-nume { color: var(--aid-text-stins, #97917a); }
#istanga .aid-podium-loc:not(a) { cursor: default; }
#istanga .aid-roata-lista { margin-top: 10px; }
#istanga .aid-concurs-eu a { color: #fff3bd; text-shadow: 0 0 8px rgba(255, 204, 0, 0.5); }

/* ================================================== norocosul saptamanii
 *
 * concursnorocoslist.php (hand-written): the prize shelf -- a carousel of the
 * last prize's items, the middle one big -- and the winners as cards. The
 * keyframes are written by the page (they depend on how many items). */
#istanga .aid-vitrina { position: relative; height: 200px; margin: 6px 4px 14px; border-radius: var(--aid-raza-panou-interior, 6px); overflow: hidden; background: linear-gradient(180deg, #14200f 0%, #0b120a 60%, #070c06 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 226, 178, 0.12); }
#istanga .aid-vitrina-raze { position: absolute; inset: 0; width: 100%; height: 100%; }
#istanga .aid-vitrina-banda { position: absolute; left: 50%; top: 22px; width: 0; height: 148px; }
#istanga .aid-vitrina-obiect { position: absolute; left: -50px; bottom: 0; width: 100px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform-origin: 50% 100%; will-change: transform, opacity; }
/* `:not(.aid-rama-poza)` -- DE CAND VITRINA ARE RAME (19 sept 2026).
 *
 * Regulile astea au fost scrise cand pe raft stateau pozele goale, si atunci
 * masurau exact ce trebuia. De cand fiecare premiu sta intr-o rama, poza nu mai
 * e obiectul din raft: e continutul ramei, iar rama i-a dat deja pozitie
 * absoluta, 89,2% pe amandoua laturile si o taietura octogonala. Peste ele,
 * `width: auto; height: auto` o intorcea la marimea ei naturala -- 37x130 intr-o
 * rama de 90 -- si rochia iesea din cadru in sus si in jos.
 *
 * Raman pentru orice poza fara rama (chipsurile mici de sub castigatori, si
 * orice ar mai pune pagina maine), iar umbra -- care era singurul lucru de aici
 * care avea sens si cu rama -- se muta pe rama. */
#istanga .aid-vitrina-obiect img:not(.aid-rama-poza) { max-width: 72px; max-height: 84px; width: auto; height: auto; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)); }
#istanga .aid-vitrina-obiect .aid-rama { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)); }
/* A garment is a dark sprite among glowing ones: at the back of the shelf
   it went out entirely while the potions still read. A thin warm rim is
   what a shop window would give it -- the light it does not make itself. */
#istanga .aid-vitrina-haina img:not(.aid-rama-poza) { max-height: 92px;
	filter: drop-shadow(0 0 2px rgba(255, 235, 190, 0.55)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)); }
#istanga .aid-vitrina-haina .aid-rama {
	filter: drop-shadow(0 0 2px rgba(255, 235, 190, 0.55)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)); }
/* 84px, not 100. The slots are 128px apart and the middle item is drawn at
   scale 1.45 -- so a 100px caption became 145px there and ran under the
   names on both sides. 84 x 1.45 = 122, inside the slot. */
#istanga .aid-vitrina-obiect figcaption { margin-top: 10px; font-size: 9px; line-height: 12px; text-align: center; color: var(--aid-text, #e6e0c8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#istanga .aid-vitrina-raft { position: absolute; left: 10%; right: 10%; top: 150px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, #c69e0c 0%, #8a5f12 60%, #3a2a06 100%); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7); }
#istanga .aid-vitrina-eticheta { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 10px; letter-spacing: .06em; color: var(--aid-text-stins, #97917a); }
@media (prefers-reduced-motion: reduce) { #istanga .aid-vitrina-obiect { animation: none !important; } }
#istanga .aid-norocos-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 4px; }
#istanga .aid-norocos-card { padding: 8px 10px 10px; border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); min-width: 0; }
#istanga .aid-norocos-ultim { grid-column: 1 / -1; box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), inset 0 1px 0 rgba(255, 226, 178, 0.10); }
#istanga .aid-norocos-eu { background: rgba(255, 204, 0, 0.08); }
#istanga .aid-norocos-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
#istanga .aid-norocos-data { font-size: 10px; color: var(--aid-text-stins, #97917a); font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#istanga .aid-norocos-nume { font-size: 13px; font-weight: bold; color: var(--aid-aur, #ffcc00); text-decoration: none; }
#istanga .aid-norocos-premii { display: flex; flex-wrap: wrap; gap: 4px; }
#istanga .aid-norocos-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 10px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-norocos-chip img { width: 18px; height: 18px; object-fit: contain; }
#istanga .aid-norocos-chip-haina { box-shadow: inset 0 0 0 1px rgba(198, 158, 12, 0.5); }
#istanga .aid-norocos-chip-licoare { box-shadow: inset 0 0 0 1px rgba(198, 156, 255, 0.4); }

/* The staff link in the bottom bar: "Panou Admin" for the administrator,
 * "Panou Moderare" for a moderator (port fix in main.php). Gold, bold, one
 * word apart from the news ticker beside it. */
#barabottom .aid-bara-jos-panou a {
	color: var(--aid-aur, #ffcc00);
	font-weight: bold;
	text-decoration: none;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 10px;
}
#barabottom .aid-bara-jos-panou a:hover { color: var(--aid-text-tare, #fff); }

/* ============================================================ the dialog
 *
 * js/aiddialog.js: the game's own yes/no, instead of the browser's confirm().
 * "Oare nu ar fi fain sa il customizam? sau sa avem un dialog yes/no al
 *  nostru? il putem folosi si prin alte parti. Gen logout."
 *
 * The dark panel with the gold ring the shell already speaks, the mascot at
 * the corner, two pills: yes (gold, or red when the thing destroys) and a
 * quiet no. Above everything -- the character screen is 900, the map 800. */
.aid-dialog-fundal {
	position: fixed; inset: 0; z-index: 1200;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(1.5px);
	opacity: 0; transition: opacity .16s linear;
}
.aid-dialog-fundal[hidden] { display: none; }
.aid-dialog-fundal.aid-dialog-vizibil { opacity: 1; }
.aid-dialog {
	position: relative;
	display: flex; align-items: flex-start; gap: 14px;
	width: 380px; max-width: calc(100vw - 32px); box-sizing: border-box;
	padding: 18px 20px 16px;
	border-radius: 14px;
	background: linear-gradient(180deg, #171a12 0%, #0b0d08 100%);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.9),
		inset 0 0 0 2px var(--aid-aur-stins, #c69e0c),
		inset 0 1px 0 3px rgba(255, 243, 189, 0.18),
		0 18px 48px rgba(0, 0, 0, 0.75);
	color: var(--aid-text, #e6e0c8);
	font-family: Arial, Helvetica, sans-serif;
	transform: translateY(8px) scale(.96);
	animation: aid-dialog-intra .22s cubic-bezier(.2, 1.2, .35, 1) forwards;
}
@keyframes aid-dialog-intra { to { transform: none; } }
.aid-dialog.aid-dialog-iese { animation: aid-dialog-pleaca .16s ease-in forwards; }
@keyframes aid-dialog-pleaca { to { opacity: 0; transform: translateY(6px) scale(.97); } }
.aid-dialog-drac { flex: 0 0 auto; width: 54px; height: auto; margin: -4px 0 0 -4px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); }
.aid-dialog-corp { flex: 1 1 auto; min-width: 0; }
.aid-dialog-titlu { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: bold; color: var(--aid-aur, #ffcc00); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); margin-bottom: 6px; }
.aid-dialog-pericol .aid-dialog-titlu { color: #ff8a84; }
.aid-dialog-text { font-size: 13px; line-height: 18px; color: #fff; }
.aid-dialog-text b { color: var(--aid-aur, #ffcc00); }
.aid-dialog-actiuni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.aid-dialog-actiuni .aid-btn { min-width: 84px; padding: 5px 20px; }
.aid-btn-stins, #istanga .aid-btn-stins {
	color: var(--aid-text-stins, #97917a);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.28);
}
.aid-btn-stins:hover:not(:disabled), #istanga .aid-btn-stins:hover:not(:disabled) {
	color: var(--aid-text, #e6e0c8);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.6), 0 0 8px -3px rgba(255, 226, 178, 0.3);
}
.aid-dialog-pericol .aid-dialog-da { color: #ff8a84; box-shadow: inset 0 0 0 1px #a3151a, 0 0 9px -3px rgba(224, 69, 63, .30); }
.aid-dialog-pericol .aid-dialog-da:hover:not(:disabled) { color: #ffd9d6; box-shadow: inset 0 0 0 1px #e0453f, 0 0 7px rgba(224, 69, 63, .45), 0 0 18px -4px rgba(224, 69, 63, .35); }
/* „Raportează o problemă" (js/aidbug.js, 17 sept 2026): dialogul cu formular */
.aid-dialog.aid-bug { width: 460px; }
.aid-bug .aid-bug-intro { margin: 0 0 12px; color: var(--aid-text-stins, #97917a); font-size: 12px; line-height: 17px; }
.aid-bug .aid-bug-camp { display: block; margin: 0 0 10px; }
.aid-bug .aid-bug-camp span { display: block; margin: 0 0 4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--aid-aur, #ffcc00); }
.aid-bug .aid-bug-camp input, .aid-bug .aid-bug-camp textarea {
	display: block; width: 100%; box-sizing: border-box; margin: 0;
	padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 226, 178, 0.28);
	background: rgba(0, 0, 0, 0.45); color: #fff; font: 13px/18px Arial, Helvetica, sans-serif; resize: vertical;
}
.aid-bug .aid-bug-camp input:focus, .aid-bug .aid-bug-camp textarea:focus { outline: 0; border-color: var(--aid-aur, #ffcc00); box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25); }
.aid-bug .aid-bug-context { font-size: 11px; color: var(--aid-text-stins, #97917a); }
.aid-bug .aid-bug-eroare { margin-top: 8px; padding: 6px 10px; border-radius: 6px; border-left: 2px solid #ff6a58; background: rgba(120, 20, 14, 0.3); color: #ffb0a0; font-size: 12px; }
.aid-bug .aid-bug-eroare[hidden] { display: none; }
body.aid-mobil .aid-dialog.aid-bug { width: calc(100vw - 24px); }

/* the logout overlay (main.php, port fix) wears the same clothes, no script
   of its own for the look: a form with a real submit for the no-JS path */
.aid-dialog form { display: inline; margin: 0; }
.aid-dialog .aid-dialog-actiuni input[type="submit"] { min-width: 84px; }
@media (prefers-reduced-motion: reduce) {
	.aid-dialog, .aid-dialog.aid-dialog-iese { animation: none; transform: none; }
	.aid-dialog-fundal { transition: none; }
}

/* ============================================================ the object page
 *
 * obiect.php (hand-written, @aidraci-adopted): one artefact / potion / garment
 * / car / element, big, on the lit stage the buildings stand on, with its
 * bonuses as tiles and the price card that buys without leaving. */
#istanga .aid-obiect-scena {
	position: relative; height: 190px; margin: 4px 4px 0; border-radius: var(--aid-raza-panou-interior, 6px);
	overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
	background:
		radial-gradient(ellipse at 50% 96%, rgba(255, 204, 0, 0.18) 0%, rgba(255, 204, 0, 0) 58%),
		radial-gradient(circle at 30% 10%, rgba(255, 226, 178, 0.10), rgba(0, 0, 0, 0) 55%),
		linear-gradient(180deg, #1b2a15 0%, #142012 46%, #0c150b 72%, #070c06 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 226, 178, 0.12), inset 0 -18px 30px rgba(0, 0, 0, 0.45);
}
#istanga .aid-obiect-scena::after {
	content: ''; position: absolute; left: 50%; bottom: 14px; width: 200px; height: 22px;
	transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 70%); z-index: 0;
}
#istanga .aid-obiect-poza {
	position: relative; z-index: 1; max-height: 150px; max-width: 70%; width: auto; height: auto;
	margin: 0 0 22px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6));
	animation: aid-obiect-vine .5s cubic-bezier(.2, 1.1, .35, 1);
}
@keyframes aid-obiect-vine { from { opacity: 0; transform: translateY(10px) scale(.94); } }
#istanga .aid-obiect-haina .aid-obiect-poza { max-height: 160px; margin-bottom: 16px; }
/* MAȘINA E LATĂ, POZA EI E PĂTRATĂ, ȘI DE-AIA PĂREA TĂIATĂ.
 *
 * „la masini (...) nici nu se vede bine acum (imaginea e taiata)" (15 sept
 * 2026). Fișierul e `masina<N>m.png`, 313x313, cu mașina desenată într-o fâșie
 * pe la mijloc și cu un sfert de imagine gol deasupra. Pe ecranul mare poza
 * primea `max-height: 300px` iar scena rămăsese la 190 cu `overflow: hidden` --
 * deci creștea până ieșea din cutie, și i se tăiau roțile.
 *
 * Două lucruri, nu unul: scena se lasă crescută de poză (`height: auto`), și
 * poza își taie singură golul de sus. `aspect-ratio` îi dă cutia fâșiei
 * (313x247 -- măsurat pe zece mașini, cea mai sus desenată începe la y=72), iar
 * `cover` cu `object-position: 50% 100%` ține marginea de jos și scoate exact
 * fâșia goală. Așa mașina se vede mare cât coloana, nu mică în mijlocul unui
 * câmp gol. */
#istanga .aid-obiect-masina .aid-obiect-scena { height: auto; align-items: center; padding: 10px 10px 16px; }
#istanga .aid-obiect-masina .aid-obiect-poza {
	width: 100%; max-width: 100%; max-height: none; height: auto; margin: 0;
	aspect-ratio: 313 / 247; object-fit: cover; object-position: 50% 100%;
}
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-masina .aid-obiect-poza { max-height: none; }
#istanga .aid-obiect-element .aid-obiect-poza, #istanga .aid-obiect-licoare .aid-obiect-poza, #istanga .aid-obiect-artefact .aid-obiect-poza { min-height: 96px; image-rendering: auto; }
/* ================================================================ RAMA
 *
 * src/Support/Rama.php pune markup-ul; aici sta doar cat de mare e si ce
 * culoare are treapta. Un singur SVG desenat, deci nu exista „varianta de
 * 30px" — exista aceeasi rama, la 30px.
 *
 * Poza sta SUB desen, decupata pe conturul deschiderii: altfel coltul ei
 * dreptunghiular ar trece peste consolele din colturi. Fara nicio estompare
 * rotunda — „sa vedem cat mai mult din artefact. frame-ul e suficient"
 * (14 sept 2026). */
/* RAMA E PATRATA, SI ASTA O TINE PATRATA.
 *
 * „alta dimensiune are artefactul acum" (14 sept 2026, seara). Rama iesea
 * 372x400 pe fisa: Rama::pune() scria in stil `width` si `height` deopotriva,
 * iar `max-width` de aici taia latimea fara sa poata atinge inaltimea — un stil
 * scris in atribut bate orice regula din foaie. Se vedea de cand exista rama
 * (340x400 in panou), dar pe pozele vechi, mici si sterse, nu se citea; pe
 * grafica noua, unde octogonul are colturi limpezi, sare in ochi.
 *
 * Acum PHP-ul scrie numai latimea, iar inaltimea o da `aspect-ratio`. Asta nu
 * e o reparatie pe fisa, e o reparatie oriunde e pusa rama: la orice `max-width`
 * si in orice coloana prea ingusta, ramane patrata. */
/* RAMA NU E SCOPATA PE #istanga, SI ASTA E O REPARATIE.
 *
 * „nu se vad bine cardurile in gamesscreen pentru artefacte si potiuni - in
 *  blocartefacte si blocpotiuni" (15 sept 2026).
 *
 * Restul foii scrie `#istanga .ceva` fiindca se adreseaza paginilor incarcate
 * in panou, si asa nu calca peste css.css, foaia veche. Rama nu e o pagina: e
 * un lucru desenat, pus in optsprezece locuri, dintre care DOUA -- cele doua
 * rafturi din gamescreen -- nu sunt in #istanga deloc. Acolo nu se aplica
 * nimic: <span>-ul ramanea `display:inline`, poza se desena la marimea ei
 * naturala (192px peste un raft de 30) si treapta nu mai colora nimic.
 *
 * Clasele astea incep toate cu `aid-rama`, deci nu se pot ciocni de css.css.
 * Un desen se poarta la fel oriunde e pus -- de-aia regulile lui nu au voie sa
 * intrebe intai unde se afla. */
.aid-rama {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
	aspect-ratio: 1;
	/* implicit: comun. Fiecare treapta o rescrie mai jos. */
	--aid-rar: #8fa088;
}
a.aid-rama { cursor: pointer; }
/* rama dintr-o lista tine locul vechiului `hspace='3'` de pe <img> */
.aid-rama-lista { margin: 0 3px; }
/* `height: auto` si nu `100%`: inaltimea invelisului vine din `aspect-ratio`,
   iar un procent citit dintr-o inaltime calculata asa nu e de incredere in
   toate motoarele. Acelasi raport, cerut direct. */
.aid-rama-svg { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1; }
.aid-rama-poza {
	position: absolute;
	left: 5.4%; top: 5.4%; width: 89.2%; height: 89.2%;
	object-fit: cover;
	-webkit-clip-path: polygon(11% 0, 89% 0, 100% 11%, 100% 89%, 89% 100%, 11% 100%, 0 89%, 0 11%);
	clip-path: polygon(11% 0, 89% 0, 100% 11%, 100% 89%, 89% 100%, 11% 100%, 0 89%, 0 11%);
}
/* TREPTELE. Trei din cinci sunt culori pe care jocul le avea deja: verdele
   stins al textului slab, portocaliul si aurul. Albastrul si violetul sunt
   singurele adaugate. */
.aid-rama-comun    { --aid-rar: #8fa088; }
.aid-rama-rar      { --aid-rar: #5aa9d6; }
.aid-rama-epic     { --aid-rar: #a06bd4; }
.aid-rama-legendar { --aid-rar: #f60; }
.aid-rama-premium  { --aid-rar: #ffcc00; }

/* pe fisa obiectului rama tine locul scenei: fundalul de dedesubt n-are ce
   cauta sub o rama care isi aduce propriul intuneric */
#istanga .aid-obiect-cu-rama {
	height: auto; padding: 12px 12px 14px; background: none; box-shadow: none;
	display: block; text-align: center;
}
#istanga .aid-obiect-cu-rama::after { content: none; }
#istanga .aid-obiect-rama { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1; }
#istanga .aid-obiect-rama .aid-rama-poza { animation: aid-obiect-vine .5s cubic-bezier(.2, 1.1, .35, 1); }
/* O POZĂ CARE NU E PĂTRATĂ SE POTRIVEȘTE ÎN RAMĂ, NU O UMPLE.
 *
 * Rama e pătrată și poza ei umple deschiderea (`cover`), fiindcă artefactele și
 * poțiunile sunt desenate pătrat. Hainele nu: o rochie e de două ori mai înaltă
 * decât lată, iar `cover` i-ar tăia tivul și decolteul ca să umple colțurile.
 * `contain` o lasă întreagă, cu aer în stânga și în dreapta -- ceea ce la o
 * vitrină e exact ce trebuie. */
#istanga .aid-rama-potrivit .aid-rama-poza { object-fit: contain; box-sizing: border-box; padding: 4%; }

/* ---------------------------------------------- PLACUTA CU NUMELE, SUB RAMA
 *
 * „titlu tinem pe Verdana, dar putem face acel dreptunghi mai fain. ceva pe
 *  black cu o animatie discreta? mic sparkle sau glow discret golden?" si, dupa
 *  ce a vazut-o, „animatia discreta imi place. poate un pic mai mult sparke"
 *  (14 sept 2026).
 *
 * Trei miscari, toate rare, si niciuna nu se repeta in acelasi ritm cu alta:
 *   luciul   -- o dunga de aur de 7% care traverseaza o data la noua secunde.
 *               Nu e stralucire, e o reflexie pe metal lustruit; de-aia e atat
 *               de slaba si sta atat de mult in afara cadrului.
 *   respiratia -- lumina din jurul literelor creste si scade la sase secunde.
 *               Culoarea e a treptei (--aid-rar), deci un legendar respira
 *               portocaliu fara ca aici sa existe vreo culoare scrisa.
 *   scanteile -- cinci puncte cu cate o cruce subtire de lumina, fiecare cu
 *               intarzierea lui. Cinci cu ritmuri diferite se citesc ca o
 *               sclipire; cinci in cor s-ar citi ca un bec.
 *
 * Numele e pe Verdana, ca tot jocul -- litere rare, mari si majuscule tin loc
 * de fata de titlu, ceea ce e mai ieftin si mai al nostru decat o a doua fonta. */
#istanga .aid-placa {
	position: relative; overflow: hidden;
	margin: 4px 4px 10px; padding: 13px 18px 11px; text-align: center;
	background: linear-gradient(180deg, #0c0c09 0%, #000 55%, #070706 100%);
	border-top: 1px solid rgba(198, 158, 12, 0.55);
	border-bottom: 1px solid rgba(198, 158, 12, 0.35);
	box-shadow: inset 0 10px 22px rgba(0, 0, 0, 0.9), 0 2px 7px rgba(0, 0, 0, 0.5);
}
#istanga .aid-placa::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 204, 0, 0.10) 48%,
		rgba(255, 255, 255, 0.13) 50%, rgba(255, 204, 0, 0.10) 52%, transparent 62%);
	transform: translateX(-120%);
	animation: aid-placa-luciu 9s ease-in-out 1.5s infinite;
}
@keyframes aid-placa-luciu {
	0%, 62% { transform: translateX(-120%); }
	86%, 100% { transform: translateX(120%); }
}
#istanga .aid-placa-nume {
	position: relative; margin: 0;
	font-size: clamp(14px, 2.1vw, 17px); font-weight: bold; line-height: 1.25;
	letter-spacing: 0.085em; text-transform: uppercase;
	color: var(--aid-rar, #8fa088); text-wrap: balance;
	animation: aid-placa-respira 6s ease-in-out infinite;
}
@keyframes aid-placa-respira {
	0%, 100% { text-shadow: 0 0 9px color-mix(in srgb, var(--aid-rar) 26%, transparent), 0 1px 0 #000; }
	50% { text-shadow: 0 0 17px color-mix(in srgb, var(--aid-rar) 52%, transparent),
		0 0 34px color-mix(in srgb, var(--aid-rar) 18%, transparent), 0 1px 0 #000; }
}
#istanga .aid-placa-treapta {
	position: relative; display: inline-block; margin-top: 6px;
	font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--aid-aur-stins, rgb(198, 158, 12));
}
#istanga .aid-placa-treapta::before { content: '\2726'; margin-right: 9px; font-size: 8px; color: var(--aid-aur); opacity: 0.75; }
#istanga .aid-placa-treapta::after { content: '\2726'; margin-left: 9px; font-size: 8px; color: var(--aid-aur); opacity: 0.75; }
#istanga .aid-placa-scanteie { position: absolute; width: 3px; height: 3px; opacity: 0; animation: aid-placa-scanteie 6.5s ease-in-out infinite; }
#istanga .aid-placa-scanteie::before,
#istanga .aid-placa-scanteie::after {
	content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	background: linear-gradient(90deg, transparent, rgba(255, 214, 90, 0.95), transparent);
}
#istanga .aid-placa-scanteie::before { width: 15px; height: 1px; }
#istanga .aid-placa-scanteie::after { width: 1px; height: 15px; background: linear-gradient(180deg, transparent, rgba(255, 214, 90, 0.95), transparent); }
#istanga .aid-placa .aid-s1 { top: 8px; right: 15px; animation-delay: 0.4s; }
#istanga .aid-placa .aid-s2 { bottom: 9px; left: 21px; animation-delay: 1.9s; transform: scale(0.82); }
#istanga .aid-placa .aid-s3 { top: 46%; right: 31%; animation-delay: 3.3s; transform: scale(0.6); }
#istanga .aid-placa .aid-s4 { top: 11px; left: 14%; animation-delay: 4.6s; transform: scale(0.72); }
#istanga .aid-placa .aid-s5 { bottom: 13px; right: 27%; animation-delay: 5.8s; transform: scale(0.55); }
@keyframes aid-placa-scanteie {
	0%, 80%, 100% { opacity: 0; }
	86% { opacity: 1; }
	93% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	#istanga .aid-placa::before, #istanga .aid-placa-nume, #istanga .aid-placa-scanteie { animation: none; }
	#istanga .aid-placa::before, #istanga .aid-placa-scanteie { opacity: 0; }
}
/* sansa de obtinere, sub placuta */
#istanga .aid-obiect-sansa {
	margin: 0 4px 12px; text-align: center; font-size: 11px;
	color: var(--aid-text-stins); font-family: var(--aid-font);
}
#istanga .aid-obiect-sansa b { color: var(--aid-aur); font-size: 13px; font-family: var(--aid-font-cifre); }
#istanga .aid-obiect-sansa .aid-tr-slab { color: var(--aid-text-slab); font-family: var(--aid-font); }
/* titlul paginii: pe ecranul mare il poarta placuta, deci aici nu mai are ce cauta */
#aidmare[data-ecran="obiect"] #istanga > .aid-obiect-h1 { display: none; }

/* ------------------------------------------- FISA OBIECTULUI, PE TOT ECRANUL
 *
 * „sa facem pagina artefactelor full screen (si pt celelalte obiecte la fel).
 *  sa fie spectaculoasa, cu imagine mare a artefactului, cu detalii despre
 *  bonusuri fain aranjate" (14 sept 2026).
 *
 * In panoul de 600px pagina curge pe o coloana, si asa ramane -- cine deschide
 * obiect.php fara shell primeste acelasi lucru, doar mai ingust. Pe ecranul
 * mare se desface in doua: lucrul in stanga, cu rama si placuta lui, si dosarul
 * in dreapta. Asta e si motivul pentru care in pagina exista cele doua
 * <div>-uri: o impartire in doua coloane facuta din `grid-row` peste sapte
 * frati s-ar fi rupt la primul rand adaugat. */
#istanga .aid-obiect-stanga, #istanga .aid-obiect-dreapta { min-width: 0; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect {
	display: flex; align-items: flex-start; gap: 30px; padding: 18px 22px 20px;
}
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-stanga { flex: 0 0 424px; max-width: 424px; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-dreapta { flex: 1 1 auto; min-width: 0; }
/* 424 de coloana minus 2x12 de padding = fix 400, cat cere pagina.
   Rama nu se mai turteste daca nu incape (aspect-ratio), dar nici nu are
   de ce sa nu incapa. */
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-rama { max-width: 400px; }
/* placuta si linia de sub ea se aliniaza cu ramale, nu cu marginea coloanei:
   12px e fix cat padding-ul pe care si-l ia scena ramei */
#aidmare[data-ecran="obiect"] #istanga .aid-placa { margin: 0 12px 10px; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-sansa { margin: 0 12px; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-poza { max-height: 300px; }
/* subtitlul e sus, in antetul ecranului: spus de doua ori ar citi ca o greseala */
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-sub { display: none; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-cap { padding: 0 0 2px; text-align: left; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-desc {
	margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 20px;
}
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-bonusuri { justify-content: flex-start; padding: 12px 0 4px; }
#aidmare[data-ecran="obiect"] #istanga .aid-cum { margin: 12px 0 0; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-grila { padding: 12px 0 0; }
/* dosarul se citeste de la stanga, tot: css/css.css centreaza .borderrosu, si
   cardurile mosteneau de-acolo un centru pe care nu si-l ceruse nimeni */
#istanga .aid-obiect-dreapta .aid-cont-card { text-align: left; }
#aidmare[data-ecran="obiect"] #istanga .aid-obiect-inapoi { text-align: left; }
/* sub 940px scena nu mai are loc pentru doua coloane: se intorc una sub alta */
@media (max-width: 940px) {
	#aidmare[data-ecran="obiect"] #istanga .aid-obiect { display: block; }
	#aidmare[data-ecran="obiect"] #istanga .aid-obiect-stanga { max-width: 424px; margin: 0 auto; }
	#aidmare[data-ecran="obiect"] #istanga .aid-obiect-cap { text-align: center; }
	#aidmare[data-ecran="obiect"] #istanga .aid-obiect-desc { margin: 0 auto; }
	#aidmare[data-ecran="obiect"] #istanga .aid-obiect-bonusuri { justify-content: center; }
}

/* ------------------------------------------------------ cum obtii artefactul
 *
 * TEXT-ALIGN: LEFT, SCRIS AICI SI NU MOSTENIT.
 *
 * „la tabela, aliniamentul nu e pe stanga ca in preview, inca" (14 sept 2026).
 * In macheta era stanga; in joc nu. Motivul nu era nimic din blocul asta:
 * obiect.php incarca si css/css.css, vechiul stylesheet, care centreaza
 * `.borderrosu` -- iar un rand de tabel centrat arata exact ca unul nealiniat,
 * fiindca fiecare celula isi cauta alt centru. O sectiune cu randuri nu se
 * bazeaza pe ce mosteneste: isi spune singura ca se citeste de la stanga. */
#istanga .aid-cum { margin: 14px 4px 4px; text-align: left; }
#istanga .aid-cum h3 {
	margin: 0 0 2px; font-size: 12px; letter-spacing: 0.06em; color: var(--aid-aur);
	text-transform: uppercase;
}
#istanga .aid-cum-sub { margin: 0 0 9px; font-size: 10.5px; color: var(--aid-text-stins); line-height: 1.5; }
#istanga .aid-izvoare {
	display: flex; flex-direction: column; gap: 1px;
	background: rgba(198, 158, 12, 0.16);
	border: 1px solid rgba(198, 158, 12, 0.16);
	border-radius: var(--aid-raza, 2px); overflow: hidden;
}
#istanga .aid-izvor {
	display: flex; align-items: center; gap: 12px; padding: 8px 11px;
	background: var(--aid-camp-opac, #112009);
}
#istanga .aid-izvor:hover { background: #16290d; }
/* O COLOANA DE CIFRE, DE LATIME FIXA, SI O ICOANA INAINTEA FIECARUI RAND.
 *
 * Latimea fixa e ce tine cifrele una sub alta: randuri de flex independente isi
 * masoara fiecare singur ultima coloana, deci nimic nu se aliniaza. Icoana e
 * din macheta („mi-au placut si iconitele acelea simple"): contur subtire, fara
 * umplutura, si ia culoarea textului prin currentColor. */
#istanga .aid-iz-ic {
	flex: 0 0 20px; height: 20px; color: var(--aid-text-slab);
	opacity: 0.85; line-height: 0;
}
#istanga .aid-izvor:hover .aid-iz-ic { color: var(--aid-aur-stins, rgb(198, 158, 12)); opacity: 1; }
#istanga .aid-iz-ic svg { display: block; }
#istanga .aid-iz-unde { flex: 1 1 auto; min-width: 0; }
/* NUMAI TITLUL RANDULUI E BLOC, NU ORICE <b> DIN EL.
 *
 * Regula era `.aid-iz-unde b`, scrisa cand in rand nu exista decat titlul. De
 * cand explicatia are si ea cuvinte ingrosate -- „7.098 credite", „croita pentru
 * ea, de la nivelul 1" -- fiecare dintre ele sarea pe randul lui, cu marimea
 * titlului: fraza iesea rupta in bucati si arata neterminata. Copilul direct,
 * deci: titlul e bloc, ce e in propozitie ramane in propozitie. */
#istanga .aid-iz-unde > b { display: block; color: var(--aid-text); font-size: 12px; }
#istanga .aid-iz-unde span { display: block; color: var(--aid-text-stins); font-size: 10.5px; line-height: 1.45; }
#istanga .aid-iz-b {
	flex: 0 0 76px; text-align: right; white-space: nowrap;
	font-family: var(--aid-font-cifre); font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--aid-aur); font-weight: bold;
}
/* capul de tabel: acelasi rand, alte haine -- scris marunt, fara cifre */
/* LA HAINE, COLOANA DIN DREAPTA NU E O CIFRA.
 *
 * O haină nu pică nicăieri: fiecare drum spre ea e sigur, doar costă altceva.
 * Deci acolo scrie „cu bani și puncte", nu „1,9%" -- text, nu numar, si are
 * nevoie de mai mult loc si de voie sa se rupa pe doua randuri. */
#istanga .aid-cum-haina .aid-iz-b {
	flex-basis: 104px; white-space: normal; font-size: 11px; line-height: 1.35;
	font-family: inherit; font-weight: normal; color: var(--aid-text);
}
#istanga .aid-cum-haina .aid-izvor-cap .aid-iz-b { color: var(--aid-text-stins); }

/* ---------------------------------------------- si tabla creditelor (refer.php)
 *
 * „nu este cu galben scris «locurile 1-3: 500 / 300 / 200» de pe randul doi."
 *
 * Nu era, si din doua motive mostenite de la fisa obiectului, unde amandoua au
 * dreptate: acolo randurile „targ / cumparat / premium / norocos" au coloana din
 * dreapta STINSA, fiindca ce scrie in ele nu e o sansa, ci o vorba („cat cere
 * el"). In tabla creditelor fiecare rand E o cifra, deci aurul se intoarce pe
 * toate. Al doilea: coloana e `flex: 0 0 76px` cu `nowrap`, iar `min-width:
 * auto` o lasa sa creasca -- „locurile 1-3: 20.000 / 10.000 / 5.000" se intindea
 * pe 278px si strangea descrierea intr-o dunga. Aici are latimea ei si voie sa
 * se rupa pe doua randuri, ca la haine, dar ramane aurie si cu cifre tabulare.
 *
 * Randul cu „Vezi preturile" nu e cifra, e buton -- si un buton n-are nevoie de
 * latimea rezervata cifrelor, doar sa nu fie strivit. */
#istanga .aid-cum-credite .aid-iz-b {
	flex: 0 0 136px; white-space: normal; line-height: 1.35;
	color: var(--aid-aur);
}
#istanga .aid-cum-credite .aid-izvor-cap .aid-iz-b { color: var(--aid-text-stins); }
#istanga .aid-cum-credite .aid-iz-b > .aid-btn { display: inline-block; white-space: nowrap; }

/* ------------------------------------------------------- cum iei masina
 *
 * Nu un tabel, o listă de condiții: la mașini întrebarea nu e „cu ce șansă",
 * e „ce-mi trebuie ca s-o pot lua". Fiecare rând poartă și starea ta -- bifă
 * verde dacă e îndeplinită, cerc stins dacă nu -- ca să se vadă dintr-o privire
 * ce anume te oprește. */
#istanga .aid-conditii { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
#istanga .aid-conditie {
	display: flex; align-items: flex-start; gap: 11px; padding: 9px 11px;
	background: var(--aid-camp-opac, #112009);
}
#istanga .aid-conditie:first-child { border-radius: var(--aid-raza, 4px) var(--aid-raza, 4px) 0 0; }
#istanga .aid-conditie:last-child { border-radius: 0 0 var(--aid-raza, 4px) var(--aid-raza, 4px); }
#istanga .aid-conditie-semn {
	flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px currentColor; position: relative; color: var(--aid-text-slab);
}
#istanga .aid-conditie-da .aid-conditie-semn { color: #7cc04a; }
#istanga .aid-conditie-da .aid-conditie-semn::after {
	content: ''; position: absolute; left: 4.5px; top: 3px; width: 4px; height: 8px;
	border: solid currentColor; border-width: 0 1.7px 1.7px 0; transform: rotate(42deg);
}
#istanga .aid-conditie-nu .aid-conditie-semn { color: #a8613a; }
#istanga .aid-conditie-nu .aid-conditie-semn::after {
	content: ''; position: absolute; left: 7px; top: 4px; width: 1.7px; height: 8px;
	background: currentColor; border-radius: 1px;
}
#istanga .aid-conditie-text { min-width: 0; }
/* iar aici, ca la izvoare: numai titlul e bloc. Explicatiile au si ele cifre
   ingrosate („21 din 34 locuri ocupate"), si fiecare isi lua rand propriu. */
#istanga .aid-conditie-text > b { display: block; color: var(--aid-text); font-size: 12px; }
#istanga .aid-conditie-nu .aid-conditie-text > b { color: var(--aid-aur-stins, #c69e0c); }
#istanga .aid-conditie-text span { display: block; color: var(--aid-text-stins); font-size: 10.5px; line-height: 1.45; }

/* ACEEASI TABLA, DAR CA RASPUNS LA UN RAFT GOL (20 septembrie 2026).
 *
 * Pe fisa obiectului tabla vine DUPA obiect si raspunde la „de unde mai iau
 * unul ca asta". Pe o colectie goala e singurul lucru de pe ecran si raspunde
 * la „de unde iau primul", deci sta sub desenul gol si sub propozitia lui, nu
 * lipita de ele: 18px in loc de 14 si aceleasi margini laterale ca panoul.
 * Nimic altceva nu se schimba -- randurile, icoanele si cifrele sunt aceleasi,
 * fiindca vin din acelasi Izvoare. */
#istanga .aid-cum-gol { margin: 18px 4px 6px; }
#istanga .aid-cum-gol h3 { color: var(--aid-aur, #ffcc00); }

#istanga .aid-izvor-cap {
	padding-top: 6px; padding-bottom: 6px; background: rgba(0, 0, 0, 0.32);
	font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--aid-text-slab);
}
#istanga .aid-izvor-cap:hover { background: rgba(0, 0, 0, 0.32); }
#istanga .aid-izvor-cap .aid-iz-b {
	font-family: var(--aid-font); font-size: 9px; font-weight: normal;
	color: var(--aid-text-slab); white-space: normal; line-height: 1.25;
}
/* nota de sub tabela: „ii poti pune si un margin-top, pt ca e cam aproape" */
#istanga .aid-cum .aid-nota { margin: 14px 0 0; text-align: left; max-width: 70ch; line-height: 1.6; }
/* randurile fara procent (targ, retete, cumparat) spun un cuvant, nu o cifra */
#istanga .aid-izvor-targ .aid-iz-b,
#istanga .aid-izvor-retete .aid-iz-b,
#istanga .aid-izvor-cumparat .aid-iz-b,
#istanga .aid-izvor-premium .aid-iz-b,
#istanga .aid-izvor-norocos .aid-iz-b {
	font-family: var(--aid-font); font-size: 10px; font-weight: normal;
	color: var(--aid-text-stins); white-space: normal; line-height: 1.3;
}

/* .aid-obiect-fel a fost scos din pagina (14 sept 2026): felul obiectului e
   scris in antetul ecranului mare, sus in stanga, si nu are de ce sa fie scris
   a doua oara peste poza. */
#istanga .aid-obiect-am { position: absolute; right: 10px; top: 8px; z-index: 2; min-width: 28px; height: 28px; font-size: 13px; }
#istanga .aid-obiect-premium {
	position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 2px 8px; border-radius: 4px;
	font-size: 9px; letter-spacing: .12em; font-weight: bold; color: #fff3bd;
	background: linear-gradient(180deg, #c69e0c, #8a5f12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
#istanga .aid-obiect-cap { padding: 10px 8px 2px; text-align: center; }
#istanga .aid-obiect-sub { font-size: 11px; letter-spacing: .04em; color: var(--aid-text-stins, #97917a); }
#istanga .aid-obiect-sub b { color: var(--aid-text, #e6e0c8); }
#istanga .aid-obiect-desc { margin: 6px auto 0; max-width: 460px; font-size: 12.5px; line-height: 18px; color: #fff; }
/* the bonuses, as tiles */
#istanga .aid-obiect-bonusuri { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 6px 4px; }
#istanga .aid-ob-bonus {
	display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 66px; padding: 7px 8px 6px;
	border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.32);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
#istanga .aid-ob-ic img, #istanga .aid-ob-ic svg { height: 16px; width: auto; vertical-align: middle; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
#istanga .aid-ob-val { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-weight: bold; font-size: 14px; font-variant-numeric: tabular-nums; }
#istanga .aid-ob-plus .aid-ob-val { color: #b8e8a8; }
#istanga .aid-ob-minus .aid-ob-val { color: #f0a08a; }
#istanga .aid-ob-et { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); white-space: nowrap; }
/* the two cards */
#istanga .aid-obiect-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 4px 0; }
#istanga .aid-obiect-grila > .aid-cont-card:only-child { grid-column: 1 / -1; }
#istanga .aid-obiect-am-mare { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #fff; margin-bottom: 6px; }
#istanga .aid-obiect-am-mare .aid-numar { min-width: 30px; height: 30px; font-size: 14px; }
#istanga .aid-obiect-actiune { margin: 8px 0 0; }
/* LANȚUL FLĂCĂRII -- comutatorul de sub butonul de activare, pe cele patru
   flăcări. `text-align: left` nu e decorativ: #istanga centrează prin
   moștenire, deci orice bloc care trebuie aliniat la stânga o spune el. */
#istanga .aid-obiect-lant { margin: 10px 0 0; padding: 9px 11px; text-align: left; border-radius: 8px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
#istanga .aid-obiect-lant .aid-bifa { padding: 0; }
#istanga .aid-obiect-lant-stins { opacity: .72; }
#istanga .aid-obiect-lant-stins .aid-bifa { cursor: default; }
#istanga .aid-obiect-lant-stins .aid-bifa-text b { color: var(--aid-aur, #ffcc00); }
#istanga .aid-obiect-lant-veste { margin: 6px 0 0 38px; font-size: 10.5px; line-height: 14px; color: var(--aid-text-stins, #97917a); min-height: 0; }
#istanga .aid-obiect-lant-veste:empty { display: none; }
#istanga .aid-obiect-costuri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #fff; margin-bottom: 6px; }
#istanga .aid-obiect-cost { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#istanga .aid-obiect-cost img { height: 16px; }
#istanga .aid-obiect-cost b { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; color: var(--aid-aur, #ffcc00); }
#istanga .aid-obiect-lipsa b { color: #f0a08a; }
#istanga .aid-obiect-lipsa { box-shadow: inset 0 0 0 1px rgba(224, 69, 63, 0.5); }
#istanga .aid-obiect-plus { color: var(--aid-text-stins, #97917a); }
#istanga .aid-obiect-forma { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
#istanga .aid-obiect-numar { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-obiect-numar input { width: 52px; text-align: center; font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#istanga .aid-obiect-nu-poti { margin-top: 8px; font-size: 11.5px; color: #f0c48a; }
#istanga .aid-obiect-inapoi { text-align: center; margin: 14px 0 4px; }
#istanga .aid-obiect-inapoi .aid-btn { text-decoration: none; }
/* the "i" in the shop lists (port fix): a small ring beside the name */
#istanga .aid-info {
	display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px;
	border-radius: 50%; font: bold 10px/1 Georgia, 'Times New Roman', serif; font-style: italic; text-decoration: none;
	color: var(--aid-aur, #ffcc00); background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c);
	vertical-align: middle; transition: box-shadow .12s, color .12s;
}
#istanga .aid-info:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 6px rgba(255, 204, 0, 0.5); }
@media (prefers-reduced-motion: reduce) { #istanga .aid-obiect-poza, .aid-vorba-ok { animation: none; } }

/* ============================================================== the plate
 *
 * aidVorba() in src/cumparat.php, and the same two classes written by hand in
 * obiect.php. One line of news inside the page: green when it worked, red when
 * it did not. It used to be .aid-obiect-mesaj under #istanga, which was wrong
 * twice over -- the same sentence is now printed from screens that open
 * FULL SCREEN, where #istanga is not an ancestor, and from pages that have
 * nothing to do with objects (compune.php, scrisoare.php).
 *
 * "Nu (sunt refuzuri, nu izbanzi)": a refusal gets this and nothing else. The
 * dialog with the confetti in it is for things that went well. */
.aid-vorba {
	margin: 8px auto 6px; padding: 7px 14px; border-radius: 999px;
	max-width: 520px; font-size: 11.5px; line-height: 1.45; text-align: center;
}
.aid-vorba + .aid-vorba { margin-top: 4px; }
.aid-vorba-ok {
	background: rgba(111, 192, 96, 0.14); box-shadow: inset 0 0 0 1px rgba(111, 192, 96, 0.5);
	color: #b8e8a8; animation: aid-obiect-vine .4s ease-out;
}
.aid-vorba-nu {
	background: rgba(224, 69, 63, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 69, 63, 0.45);
	color: #f0a08a;
}
.aid-vorba b { color: inherit; font-weight: bold; }
.aid-vorba a { color: inherit; text-decoration: underline; }

/* ============================================================ the garage
 *
 * garaj.php (hand-written, @aidraci-adopted): the parking lot as a page --
 * occupancy, the lot's summed bonus, one card per model owned. */
#istanga .aid-garaj-antet { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 8px 10px; }
#istanga .aid-garaj-cifra { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-garaj-numar { min-width: 30px; height: 30px; font-size: 14px; }
#istanga .aid-garaj-bara { display: flex; gap: 3px; margin-top: 6px; }
#istanga .aid-garaj-bara i { display: block; width: 12px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
#istanga .aid-garaj-bara i.aid-garaj-plin { background: linear-gradient(180deg, #ffd34d, #c69e0c); box-shadow: 0 0 4px rgba(255, 204, 0, 0.4); }
#istanga .aid-garaj-cumpara { text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
#istanga .aid-garaj-suma { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 4px 10px; padding: 8px 12px; border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); font-size: 12px; }
#istanga .aid-garaj-suma-titlu { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: bold; color: var(--aid-aur, #ffcc00); margin-right: 6px; }
#istanga .aid-garaj-suma-el, #istanga .aid-garaj-bonus { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-size: 11px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-garaj-suma-el img, #istanga .aid-garaj-bonus img { height: 14px; }
#istanga .aid-garaj-suma-el b, #istanga .aid-garaj-bonus b { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; }
#istanga .aid-ob-plus b { color: #b8e8a8; } #istanga .aid-ob-minus b { color: #f0a08a; }
#istanga .aid-garaj-bonus small { color: var(--aid-text-stins, #97917a); font-size: 10px; }
#istanga .aid-garaj-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
#istanga .aid-garaj-card {
	display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: var(--aid-raza-panou-interior, 6px);
	background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
#istanga .aid-garaj-aleasa { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), 0 0 12px -4px rgba(255, 204, 0, 0.5); background: rgba(255, 204, 0, 0.06); }
#istanga .aid-garaj-poza {
	position: relative; flex: 0 0 auto; width: 150px; height: 84px; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px; overflow: visible;
	background: radial-gradient(ellipse at 50% 90%, rgba(255, 204, 0, 0.14) 0%, rgba(255, 204, 0, 0) 60%), linear-gradient(180deg, #17230f 0%, #0a120a 100%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
#istanga .aid-garaj-poza img { max-width: 132px; max-height: 70px; width: auto; height: auto; margin-bottom: 6px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7)); transition: transform .15s; }
#istanga .aid-garaj-poza:hover img { transform: translateY(-2px) scale(1.03); }
#istanga .aid-garaj-cate { position: absolute; right: -6px; top: -6px; min-width: 24px; height: 24px; font-size: 11px; }
#istanga .aid-garaj-text { flex: 1 1 auto; min-width: 0; }
#istanga .aid-garaj-nume { font-size: 14px; font-weight: bold; margin-bottom: 5px; }
#istanga .aid-garaj-nume a { color: #fff; text-decoration: none; }
#istanga .aid-garaj-nume a:hover { color: var(--aid-aur, #ffcc00); }
#istanga .aid-garaj-nume small { font-weight: normal; font-size: 10.5px; color: var(--aid-text-stins, #97917a); margin-left: 4px; }
#istanga .aid-garaj-bonusuri { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
#istanga .aid-garaj-actiuni { display: flex; gap: 8px; flex-wrap: wrap; }
#istanga .aid-garaj-actiuni .aid-btn { text-decoration: none; }
#istanga .aid-garaj-gol { text-align: center; padding: 18px 20px 20px; color: var(--aid-text-stins, #97917a); font-size: 12px; line-height: 17px; }
#istanga .aid-garaj-gol svg { width: 180px; height: auto; display: block; margin: 0 auto 6px; }
#istanga .aid-garaj-gol p { margin: 0 auto 12px; max-width: 380px; }
#istanga .aid-garaj-gol .aid-btn { text-decoration: none; }

/* primarii.php: the chests under their own subtitle, after a rule (port fix) */
#istanga tr.aid-inst-sectiune td {
	padding: 14px 8px 6px !important; border-top: 1px solid rgba(255, 226, 178, 0.18); border-bottom: 1px solid rgba(255, 226, 178, 0.08);
	background: none !important; cursor: default;
}
#istanga tr.aid-inst-sectiune span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: bold; color: var(--aid-aur, #ffcc00); padding-left: 8px; border-left: 3px solid var(--aid-aur-stins, #c69e0c); }
#istanga tr.aid-inst-sectiune small { font-size: 10px; color: var(--aid-text-stins, #97917a); margin-left: 8px; }

/* the read-only sheet (another player, personajdetaliat): the extra panels */
#aidpersonaj .aidp-buton[hidden] { display: none; }
#aidpersonaj .aidp-resurse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#aidpersonaj .aidp-resursa { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
#aidpersonaj .aidp-resursa .aidp-micut { text-transform: uppercase; letter-spacing: .06em; }
/* CENTURA DE SIGURANȚĂ A CIFRELOR (22 septembrie 2026).
 *
 * Scurtarea din js/aidpersonajmare.js rezolvă cauza — „11,3 tril" în loc de
 * optsprezece caractere — dar o casetă care își lasă conținutul să iasă rămâne
 * o casetă care poate ieși, la primul număr la care nu ne-am gândit. `min-width`
 * pe 0 e ce lipsea de fapt: un element de grilă nu se strânge sub lățimea
 * conținutului lui fără asta, oricât ar zice `minmax(0, 1fr)` pe coloană. */
#aidpersonaj .aidp-resursa { min-width: 0; }
#aidpersonaj .aidp-resursa .aidp-cifre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#aidpersonaj .aidp-cladiri { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
#aidpersonaj .aidp-cladire { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 2px 0; color: var(--aid-text, #e6e0c8); }
#aidpersonaj .aidp-cladire-gol { color: var(--aid-text-slab, #6a665a); }
#aidpersonaj .aidp-cladire-gol .aid-numar { color: var(--aid-text-slab, #6a665a); }
#aidpersonaj .aidp-cladire-nivel { min-width: 20px; height: 20px; font-size: 10px; border-width: 2px; }
#aidpersonaj .aidp-colectie-grila { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#aidpersonaj .aidp-celula-obiect { height: 52px; text-decoration: none; }
#aidpersonaj .aidp-celula-obiect img { max-width: 80%; max-height: 80%; width: auto; height: auto; }
#aidpersonaj .aidp-celula-obiect:hover { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); }
#aidpersonaj.aidp-citire .aidp-celula { cursor: pointer; }
#aidpersonaj.aidp-citire .aidp-titlu { color: #f0c48a; }

/* personajdetaliat.php (fallback panel page): the compact read-only sheet */
#istanga .aid-fisa-det-nu { display: flex; gap: 14px; align-items: flex-start; padding: 10px 8px; font-size: 12.5px; line-height: 18px; }
#istanga .aid-fisa-det-nu p { margin: 0 0 10px; }
#istanga .aid-fisa-det-nu .aid-btn { text-decoration: none; }
#istanga .aid-numar-text { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; color: #fff; }
#istanga .aid-fisa-det-obiecte { display: flex; flex-wrap: wrap; gap: 6px; }
#istanga .aid-fisa-det-obiect { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7); }
#istanga .aid-fisa-det-obiect img { max-width: 80%; max-height: 80%; width: auto; height: auto; }
#istanga .aid-fisa-det-obiect:hover { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); }
#istanga .aid-fisa-det .aid-cont-card h3 small { font-weight: normal; letter-spacing: 0; text-transform: none; color: var(--aid-text-stins, #97917a); }

/* ============================================================ Sudoku Aidraci
 *
 * sudoku.php (lobby, hand-written) + js/aidsudoku.js (the board). Symbols, not
 * digits: a cell is a picture, the tray under the board offers the N of this
 * game. Cells 92px on the 4x4, 44px on the 9x9 -- the 9x9 is 420px wide with
 * its gaps, inside the 560px the panel gives. */
#istanga .aid-sd-alege { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 4px 0; }
#istanga .aid-sd-card { padding: 12px 12px 12px; border-radius: var(--aid-raza-panou-interior, 6px); background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10); display: flex; flex-direction: column; gap: 8px; }
#istanga .aid-sd-card-cap { display: flex; align-items: baseline; justify-content: space-between; }
#istanga .aid-sd-card-nume { font-size: 15px; font-weight: bold; color: var(--aid-aur, #ffcc00); letter-spacing: .04em; }
#istanga .aid-sd-card-marime { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-size: 12px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-sd-mini { display: grid; gap: 2px; width: 72px; margin: 2px auto 0; }
#istanga .aid-sd-mini-4 { grid-template-columns: repeat(4, 1fr); }
#istanga .aid-sd-mini-9 { grid-template-columns: repeat(9, 1fr); }
#istanga .aid-sd-mini i { display: block; aspect-ratio: 1; border-radius: 1px; background: rgba(255, 226, 178, 0.12); }
#istanga .aid-sd-mini i:nth-child(7n+2), #istanga .aid-sd-mini i:nth-child(11n+5), #istanga .aid-sd-mini i:nth-child(13n+9) { background: rgba(255, 204, 0, 0.35); }
#istanga .aid-sd-card .aid-cont-nota { margin: 0; text-align: center; }
#istanga .aid-sd-dif { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
#istanga .aid-sd-dif-b { min-height: 20px; padding: 1px 8px; font-size: 9.5px; letter-spacing: .04em; border-radius: 999px; background: rgba(0, 0, 0, 0.4); color: var(--aid-text-stins, #97917a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); text-shadow: none; }
#istanga .aid-sd-dif-b.aid-sd-dif-ales { color: #fff; background: rgba(255, 204, 0, 0.16); box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00); }
#istanga .aid-sd-salvat { font-size: 11px; color: #f0c48a; text-align: center; }
#istanga .aid-sd-actiuni { display: flex; justify-content: center; gap: 8px; margin-top: auto; }
#istanga .aid-sd-mine { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 12px 4px 4px; font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-sd-mine b { color: #fff; font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; }
#istanga .aid-sd-best { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 4px 0; }
#istanga .aid-sd-best-cine { display: flex; align-items: baseline; gap: 6px; }
#istanga .aid-sd-best-cine a { color: #fff; text-decoration: none; }
#istanga .aid-sd-best-cine small { color: var(--aid-text-stins, #97917a); font-size: 10px; }
#istanga .aid-sd-eu { background: rgba(255, 204, 0, 0.06); }
/* the board */
#istanga .aid-sd-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 6px; }
#istanga .aid-sd-cap-titlu { font-size: 13px; font-weight: bold; color: var(--aid-aur, #ffcc00); margin-right: 14px; }
#istanga .aid-sd-cap-cifre { display: inline-flex; gap: 14px; font-size: 11px; }
#istanga .aid-sd-cap-cifre i { font-style: normal; color: var(--aid-text-stins, #97917a); letter-spacing: .06em; text-transform: uppercase; font-size: 9px; }
#istanga .aid-sd-cap-cifre b { color: #fff; font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; font-size: 13px; }
#istanga .aid-sd-tabla { --cel: 40px; display: grid; grid-template-columns: repeat(var(--n), var(--cel)); gap: 2px; justify-content: center; margin: 0 auto; padding: 6px; width: max-content; border-radius: 8px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px var(--aid-aur-stins, #c69e0c), 0 6px 18px rgba(0, 0, 0, 0.5); }
#istanga .aid-sd-tabla-4 { --cel: 92px; gap: 5px; }
#istanga .aid-sd-cel { width: var(--cel); height: var(--cel); min-height: 0; padding: 3px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, box-shadow .12s, transform .12s; }
#istanga .aid-sd-cel:hover:not(:disabled) { background: rgba(255, 204, 0, 0.10); box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); }
#istanga .aid-sd-cel img { max-width: 84%; max-height: 84%; width: auto; height: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); pointer-events: none; }
#istanga .aid-sd-data { background: rgba(0, 0, 0, 0.35); cursor: default; }
#istanga .aid-sd-data img { opacity: .82; }
#istanga .aid-sd-cel:disabled { transform: none; filter: none; color: inherit; }
#istanga .aid-sd-ales { background: rgba(255, 204, 0, 0.18) !important; box-shadow: inset 0 0 0 2px var(--aid-aur, #ffcc00), 0 0 10px rgba(255, 204, 0, 0.35) !important; }
#istanga .aid-sd-la-fel { box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.55); background: rgba(255, 204, 0, 0.08); }
#istanga .aid-sd-rau { background: rgba(224, 69, 63, 0.22) !important; box-shadow: inset 0 0 0 2px #e0453f !important; animation: aid-sd-rau .5s ease-in-out 2; }
@keyframes aid-sd-rau { 50% { background: rgba(224, 69, 63, 0.5); } }
#istanga .aid-sd-margine-dr { margin-right: 5px; }
#istanga .aid-sd-margine-jos { margin-bottom: 5px; }
#istanga .aid-sd-tabla-4 .aid-sd-margine-dr { margin-right: 9px; } #istanga .aid-sd-tabla-4 .aid-sd-margine-jos { margin-bottom: 9px; }
#istanga .aid-sd-tabla { grid-auto-flow: row; }
#istanga .aid-sd-cel-castig { animation: aid-sd-castig .7s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes aid-sd-castig { 30% { transform: scale(1.12); background: rgba(111, 192, 96, 0.35); box-shadow: inset 0 0 0 2px #56c65e; } }
/* the tray */
#istanga .aid-sd-tava { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 8px auto 2px; max-width: 500px; }
/* `min-width` IS WHAT KEEPS THESE SQUARE. The width alone did not.
 *
 * The tray is a wrapping flex row, and the in-game layout gives it a column of
 * 200-300px. When the buttons did not fit, they did not wrap -- they squeezed,
 * each one down to the width its OWN picture wanted, because a flex item's
 * automatic minimum is its content. A tall thin potion made a tall thin
 * button, a round coin made a wide one: "cartile patrate sa fie patrate. ele
 * iau acum forma graficii din interior." Measured live in the arcade on a 4x4
 * game: 35x60, 50x60, 50x60, 40x60 and a 30x60 eraser -- five different cards.
 *
 * `flex: 0 0 auto` on its own changed nothing there; `width` kept losing to
 * the content minimum. Pinning min-width to the same number as width is what
 * actually holds the square, and then the row wraps, which is what the tray
 * was built to do. Each of the three sizes below needs its own, and the eraser
 * carries the same class so it squares up with them. */
#istanga .aid-sd-sim { position: relative; flex: 0 0 auto; width: 44px; min-width: 44px; height: 44px; min-height: 0; padding: 4px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.45); color: var(--aid-text, #e6e0c8); box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), 0 2px 6px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; text-shadow: none; }
#istanga .aid-sd-sim:hover:not(:disabled) { background: rgba(255, 204, 0, 0.14); box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 8px rgba(255, 204, 0, 0.4); transform: translateY(-2px); }
#istanga .aid-sd-sim img { max-width: 80%; max-height: 80%; width: auto; height: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
#istanga .aid-sd-sim-nr { position: absolute; right: 2px; bottom: 0; font: bold 9px/1 var(--aid-font-cifre, 'Courier New', monospace); color: var(--aid-text-stins, #97917a); }
#istanga .aid-sd-sim-gata { opacity: .45; }
#istanga .aid-sd-sterge { box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.3), 0 2px 6px rgba(0, 0, 0, 0.5); color: var(--aid-text-stins, #97917a); }
#istanga .aid-sd-sfat { text-align: center; margin: 4px 12px 0; font-size: 10px; }
#istanga .aid-sd-mesaj { margin: 8px auto 0; width: max-content; max-width: 90%; padding: 5px 12px; border-radius: 999px; font-size: 11px; background: rgba(111, 192, 96, 0.14); box-shadow: inset 0 0 0 1px rgba(111, 192, 96, 0.5); color: #b8e8a8; }
#istanga .aid-sd-mesaj-rau { background: rgba(224, 69, 63, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 69, 63, 0.45); color: #f0a08a; }
#istanga .aid-sd-mesaj[hidden] { display: none; }
/* the result */
#istanga .aid-sd-rezultat { margin: 14px 4px 4px; height: auto; min-height: 90px; padding: 12px 14px 14px; }
#istanga .aid-sd-rezultat .aid-verdict-raze { width: 200%; }
#istanga .aid-sd-rez-corp { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 10px 10px; text-align: center; }
#istanga .aid-sd-rez-scor { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-sd-rez-numar { min-width: 44px; height: 44px; font-size: 18px; }
#istanga .aid-sd-rez-premii { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#istanga .aid-sd-rez-premiu { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(111, 192, 96, 0.5); color: #b8e8a8; font-weight: bold; font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#istanga .aid-sd-rez-premiu img { height: 18px; width: auto; }
#istanga .aid-sd-rez-nota { font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-sd-rez-magic { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 8px; background: rgba(255, 204, 0, 0.08); box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); font-size: 12px; color: #fff; text-align: left; animation: aid-obiect-vine .6s cubic-bezier(.2, 1.1, .35, 1); }
#istanga .aid-sd-rez-magic img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7)); }
#istanga .aid-sd-rez-actiuni { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
#istanga .aid-sd-rez-actiuni .aid-btn { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { #istanga .aid-sd-rau, #istanga .aid-sd-cel-castig, #istanga .aid-sd-rez-magic { animation: none; } }

/* ============================================================ Trivia Ai Draci
 *
 * trivia.php (lobby, hand-written) + js/aidtrivia.js (the questions). One
 * round a day, five questions, a bar running down. The accent is the card's
 * green (#8ee0a8, Jocuri::lista) for "correct" and for the clock while there
 * is time; the clock turns to the game's red in the last five seconds. */
#istanga .aid-tv-azi { margin: 8px 4px 0; padding: 12px 14px 14px; border-radius: var(--aid-raza-panou-interior, 6px); background: linear-gradient(180deg, rgba(142, 224, 168, 0.08), rgba(0, 0, 0, 0.32) 60%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(142, 224, 168, 0.18); display: flex; flex-direction: column; gap: 10px; }
#istanga .aid-tv-azi-terminata { background: linear-gradient(180deg, rgba(255, 204, 0, 0.07), rgba(0, 0, 0, 0.32) 60%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.14); }
#istanga .aid-tv-azi-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#istanga .aid-tv-supra { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8ee0a8; }
#istanga .aid-tv-azi-terminata .aid-tv-supra { color: var(--aid-aur, #ffcc00); }
#istanga .aid-tv-zi { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-tv-zi b { color: #fff; font-variant-numeric: tabular-nums; }
#istanga .aid-tv-azi-corp { display: flex; flex-direction: column; gap: 10px; }
#istanga .aid-tv-azi-corp .aid-cont-nota { margin: 0; text-align: center; }
#istanga .aid-tv-reguli { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#istanga .aid-tv-reguli span { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; color: var(--aid-text-stins, #97917a); background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); white-space: nowrap; }
#istanga .aid-tv-reguli b { color: #fff; font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#istanga .aid-tv-actiuni { display: flex; justify-content: center; }
#istanga .aid-tv-start { min-height: 34px; padding: 6px 26px; font-size: 13px; letter-spacing: .03em; }
/* the played card */
#istanga .aid-tv-rez { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "numar text" "numar premii"; column-gap: 14px; row-gap: 6px; align-items: center; }
#istanga .aid-tv-rez-numar { grid-area: numar; min-width: 56px; height: 56px; font-size: 20px; }
#istanga .aid-tv-rez-text { grid-area: text; font-size: 12px; color: var(--aid-text, #e6e0c8); line-height: 17px; }
#istanga .aid-tv-rez-text small { color: var(--aid-text-stins, #97917a); font-size: 10.5px; }
#istanga .aid-tv-rez-text small b { color: #fff; }
#istanga .aid-tv-perfect { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #0c1a10; background: #8ee0a8; font-weight: bold; vertical-align: 1px; }
#istanga .aid-tv-rez-premii { grid-area: premii; display: flex; flex-wrap: wrap; gap: 6px; }
#istanga .aid-tv-premiu { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: bold; font-family: var(--aid-font-cifre, 'Courier New', monospace); color: #b8e8a8; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(111, 192, 96, 0.5); }
#istanga .aid-tv-premiu img { height: 14px; width: auto; }
#istanga .aid-tv-premiu-magic { color: #ffe08a; box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); font-family: inherit; font-weight: normal; }
#istanga .aid-tv-recap { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: tv; }
#istanga .aid-tv-recap li { counter-increment: tv; display: grid; grid-template-columns: 18px 1fr auto; gap: 4px 8px; align-items: baseline; padding: 6px 8px; border-radius: 5px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.1); font-size: 11px; }
#istanga .aid-tv-recap li::before { content: counter(tv); font-family: var(--aid-font-cifre, 'Courier New', monospace); color: var(--aid-text-stins, #97917a); font-size: 10px; }
#istanga .aid-tv-recap-bun { box-shadow: inset 3px 0 0 #8ee0a8 !important; }
#istanga .aid-tv-recap-rau { box-shadow: inset 3px 0 0 #e0453f !important; }
#istanga .aid-tv-recap-q { color: var(--aid-text, #e6e0c8); line-height: 15px; text-align: left; }
#istanga .aid-tv-recap-a { text-align: right; white-space: nowrap; }
#istanga .aid-tv-recap-a b { color: #fff; }
#istanga .aid-tv-recap-a s { color: #f0a08a; margin-right: 4px; }
#istanga .aid-tv-recap-a small { display: block; color: var(--aid-text-stins, #97917a); font-size: 9.5px; font-family: var(--aid-font-cifre, 'Courier New', monospace); }
/* my numbers, the tables, the records */
#istanga .aid-tv-mine { margin-top: 12px; }
#istanga .aid-tv-topuri { display: grid; grid-template-columns: 1fr; gap: 6px; }
#istanga .aid-tv-topuri section { min-width: 0; }
#istanga .aid-tv-top .aid-t-cifra { white-space: nowrap; }
#istanga .aid-tv-recorduri { margin: 10px 4px 0; }
#istanga .aid-tv-recorduri .aid-cont-rand { flex-wrap: wrap; }
#istanga .aid-tv-nota { margin: 8px 0 0; }
/* ---- the round */
#istanga .aid-tv-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 8px; }
#istanga .aid-tv-cap-st { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#istanga .aid-tv-cap-titlu { font-size: 13px; font-weight: bold; color: var(--aid-aur, #ffcc00); }
#istanga .aid-tv-cap-cifre { display: inline-flex; gap: 14px; font-size: 11px; }
#istanga .aid-tv-cap-cifre i { font-style: normal; color: var(--aid-text-stins, #97917a); letter-spacing: .06em; text-transform: uppercase; font-size: 9px; }
#istanga .aid-tv-cap-cifre b { color: #fff; font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; font-size: 13px; }
#istanga .aid-tv-serie b { color: #8ee0a8; }
#istanga .aid-tv-serie[hidden] { display: none; }
#istanga .aid-tv-pasi { display: flex; gap: 6px; }
#istanga .aid-tv-pasi i { display: block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: background .2s, box-shadow .2s, transform .2s; }
#istanga .aid-tv-pasi i.aid-tv-pas-acum { background: rgba(255, 204, 0, 0.25); box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 8px rgba(255, 204, 0, 0.4); transform: scale(1.15); }
#istanga .aid-tv-pasi i.aid-tv-pas-bun { background: #8ee0a8; box-shadow: 0 0 6px rgba(142, 224, 168, 0.5); }
#istanga .aid-tv-pasi i.aid-tv-pas-rau { background: #e0453f; box-shadow: 0 0 6px rgba(224, 69, 63, 0.4); }
#istanga .aid-tv-pasi i.aid-tv-pas-dus { background: rgba(255, 255, 255, 0.2); }
#istanga .aid-tv-card { margin: 0 4px; padding: 14px 16px 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(142, 224, 168, 0.35), 0 6px 18px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 12px; transition: box-shadow .2s; }
#istanga .aid-tv-card.aid-tv-graba { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(224, 69, 63, 0.6), 0 6px 18px rgba(0, 0, 0, 0.5); }
#istanga .aid-tv-card-cap { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-tv-nr b { color: #fff; font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#istanga .aid-tv-secunde { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-variant-numeric: tabular-nums; }
#istanga .aid-tv-secunde b { color: #fff; font-size: 15px; }
#istanga .aid-tv-graba .aid-tv-secunde b { color: #ff6a5a; animation: aid-tv-puls .5s ease-in-out infinite alternate; }
@keyframes aid-tv-puls { to { opacity: .55; } }
#istanga .aid-tv-ceas { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); overflow: hidden; }
#istanga .aid-tv-ceas i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #5cc07a, #8ee0a8); box-shadow: 0 0 8px rgba(142, 224, 168, 0.5); }
#istanga .aid-tv-graba .aid-tv-ceas i { background: linear-gradient(90deg, #c0392b, #e0453f); box-shadow: 0 0 8px rgba(224, 69, 63, 0.5); }
#istanga .aid-tv-intrebare { font: 19px/26px Georgia, 'Times New Roman', serif; color: #fff; text-align: center; padding: 6px 4px; text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
#istanga .aid-tv-raspuns { display: flex; gap: 8px; align-items: stretch; }
#istanga .aid-tv-input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; font: 15px/36px Arial, Helvetica, sans-serif; color: #fff; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 2px 6px rgba(0, 0, 0, 0.5); outline: none; }
#istanga .aid-tv-input:focus { box-shadow: inset 0 0 0 1px #8ee0a8, 0 0 10px rgba(142, 224, 168, 0.35), inset 0 2px 6px rgba(0, 0, 0, 0.5); }
#istanga .aid-tv-input::placeholder { color: rgba(255, 255, 255, 0.35); }
#istanga .aid-tv-raspuns .aid-btn { white-space: nowrap; }
#istanga .aid-tv-trimis .aid-tv-input { opacity: .6; }
#istanga .aid-tv-sfat { text-align: center; margin: -4px 0 0; font-size: 10px; }
#istanga .aid-tv-verdict { padding: 10px 14px; border-radius: 8px; font-size: 13px; text-align: center; animation: aid-tv-vine .35s cubic-bezier(.2, 1.1, .35, 1); }
#istanga .aid-tv-verdict-bun { background: rgba(142, 224, 168, 0.12); box-shadow: inset 0 0 0 1px rgba(142, 224, 168, 0.55); color: #d6f5df; }
#istanga .aid-tv-verdict-rau { background: rgba(224, 69, 63, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 69, 63, 0.45); color: #f6c7bf; }
#istanga .aid-tv-verdict b { color: #fff; }
#istanga .aid-tv-verdict em { color: #fff; font-style: normal; font-weight: bold; }
#istanga .aid-tv-verdict small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--aid-text-stins, #97917a); font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#istanga .aid-tv-plus { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #8ee0a8; color: #0c1a10; font-weight: bold; font-family: var(--aid-font-cifre, 'Courier New', monospace); }
@keyframes aid-tv-vine { from { opacity: 0; transform: translateY(6px); } }
#istanga .aid-tv-rezultat { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { #istanga .aid-tv-graba .aid-tv-secunde b, #istanga .aid-tv-verdict { animation: none; } }

/* ============================================================ Ai Memorie
 *
 * memoria.php (lobby, hand-written) + js/aidmemorie.js (the board). Cards with
 * a 3D flip: the back is a dark tile with the mascot's eye-glow, the face is
 * the picture the server named. The lobby reuses the Sudoku lobby classes
 * (.aid-sd-*) so the two arcade games read as one family. */
#istanga .aid-mm-mini { display: grid; gap: 3px; width: 72px; margin: 2px auto 0; }
#istanga .aid-mm-mini-4 { grid-template-columns: repeat(4, 1fr); }
#istanga .aid-mm-mini-6 { grid-template-columns: repeat(6, 1fr); }
#istanga .aid-mm-mini i { display: block; aspect-ratio: 3 / 4; border-radius: 2px; background: rgba(198, 156, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(198, 156, 255, 0.25); }
#istanga .aid-mm-mini i:nth-child(5n+2), #istanga .aid-mm-mini i:nth-child(7n+4) { background: rgba(198, 156, 255, 0.45); }
/* the board */
#istanga .aid-mm-tabla { --cel: 72px; display: grid; grid-template-columns: repeat(var(--n), var(--cel)); gap: 8px; justify-content: center; margin: 0 auto; padding: 10px; width: max-content; border-radius: 10px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(198, 156, 255, 0.45), 0 6px 18px rgba(0, 0, 0, 0.5); perspective: 900px; }
#istanga .aid-mm-tabla-6 { --cel: 56px; gap: 6px; }
#istanga .aid-mm-carte { position: relative; width: var(--cel); height: calc(var(--cel) * 1.25); min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, 1.2, .4, 1); text-shadow: none; }
#istanga .aid-mm-carte:hover:not(:disabled):not(.aid-mm-sus) { transform: translateY(-3px); }
#istanga .aid-mm-carte.aid-mm-sus { transform: rotateY(180deg); cursor: default; }
#istanga .aid-mm-carte:disabled { transform: rotateY(180deg); filter: none; color: inherit; }
#istanga .aid-mm-fata, #istanga .aid-mm-dos { position: absolute; inset: 0; border-radius: 7px; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.55); }
#istanga .aid-mm-dos { background: linear-gradient(160deg, #2a2340 0%, #16121f 60%, #0f0c14 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(198, 156, 255, 0.28), 0 3px 8px rgba(0, 0, 0, 0.55); }
#istanga .aid-mm-dos i { display: block; width: 46%; height: 46%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255, 204, 0, 0.55), rgba(198, 156, 255, 0.18) 55%, transparent 70%); box-shadow: 0 0 12px rgba(198, 156, 255, 0.35); }
#istanga .aid-mm-fata { transform: rotateY(180deg); background: linear-gradient(180deg, rgba(60, 52, 40, 0.98), rgba(28, 24, 18, 0.98)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 2px var(--aid-aur-stins, #c69e0c), 0 3px 8px rgba(0, 0, 0, 0.55); }
#istanga .aid-mm-fata img { max-width: 78%; max-height: 78%; width: auto; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); pointer-events: none; }
#istanga .aid-mm-fata-goala img { display: none; }
#istanga .aid-mm-gasita .aid-mm-fata { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(111, 191, 115, 0.8), 0 0 12px rgba(111, 191, 115, 0.3); opacity: .92; }
#istanga .aid-mm-pereche { animation: aid-mm-pereche .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes aid-mm-pereche { 40% { transform: rotateY(180deg) scale(1.14); } 100% { transform: rotateY(180deg) scale(1); } }
#istanga .aid-mm-gresit .aid-mm-fata { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 2px #e0453f, 0 0 10px rgba(224, 69, 63, 0.4); }
#istanga .aid-mm-asteapta { opacity: .7; }
#istanga .aid-mm-castig { animation: aid-mm-castig .7s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes aid-mm-castig { 30% { transform: rotateY(180deg) translateY(-8px); } 100% { transform: rotateY(180deg); } }
#istanga .aid-mm-sfat { text-align: center; margin: 8px 12px 0; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { #istanga .aid-mm-carte { transition: none; } #istanga .aid-mm-pereche, #istanga .aid-mm-castig { animation: none; } }

/* ============================================================ Etajul 2048
 *
 * douamii.php (lobby) + js/aiddouamii.js (the board). A 4x4 of empty slots
 * and, over it, a layer of tiles positioned by --r/--c so a move is one CSS
 * transition. Colours climb the ranks: ember grey for Scânteie, through the
 * game's gold and the devils' red, to a black-and-gold Imparat. */
#istanga .aid-dm-card { margin: 8px 4px 0; }
#istanga .aid-dm-etaje { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 4px 0 2px; }
#istanga .aid-dm-etaj { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; padding: 3px 6px; border-radius: 6px; font-size: 9px; line-height: 1.15; opacity: .45; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--aid-text-stins, #97917a); }
#istanga .aid-dm-etaj b { font-family: var(--aid-font-cifre, 'Courier New', monospace); font-size: 11px; color: #fff; }
#istanga .aid-dm-etaj-atins { opacity: 1; box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c); color: var(--aid-text, #e6e0c8); }
#istanga .aid-dm-cap-act { display: flex; gap: 8px; }
#istanga .aid-dm-tabla { --cel: 88px; --gap: 8px; position: relative; display: grid; grid-template-columns: repeat(4, var(--cel)); gap: var(--gap); width: max-content; margin: 0 auto; padding: var(--gap); border-radius: 10px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(230, 59, 46, 0.45), 0 6px 18px rgba(0, 0, 0, 0.5); touch-action: none; }
#istanga .aid-dm-gol { display: block; width: var(--cel); height: var(--cel); border-radius: 7px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
#istanga .aid-dm-piese { position: absolute; left: var(--gap); top: var(--gap); width: 0; height: 0; }
#istanga .aid-dm-piesa { position: absolute; left: 0; top: 0; width: var(--cel); height: var(--cel); border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; transform: translate(calc(var(--c) * (var(--cel) + var(--gap))), calc(var(--r) * (var(--cel) + var(--gap)))); transition: transform .1s ease-in; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.5); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
#istanga .aid-dm-piesa b { font: bold 26px/1 var(--aid-font-cifre, 'Courier New', monospace); letter-spacing: -.02em; }
#istanga .aid-dm-piesa small { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; max-width: 92%; text-align: center; line-height: 1.1; }
#istanga .aid-dm-v1024 b, #istanga .aid-dm-v2048 b, #istanga .aid-dm-v4096 b, #istanga .aid-dm-v8192 b { font-size: 21px; }
#istanga .aid-dm-sub { z-index: 0; }
#istanga .aid-dm-noua { animation: aid-dm-noua .18s ease-out; }
#istanga .aid-dm-unita { animation: aid-dm-unita .22s ease-out; z-index: 2; }
@keyframes aid-dm-noua { from { transform: translate(calc(var(--c) * (var(--cel) + var(--gap))), calc(var(--r) * (var(--cel) + var(--gap)))) scale(0); } }
@keyframes aid-dm-unita { 50% { transform: translate(calc(var(--c) * (var(--cel) + var(--gap))), calc(var(--r) * (var(--cel) + var(--gap)))) scale(1.16); } }
#istanga .aid-dm-scutura-x { animation: aid-dm-scx .18s ease-in-out; } #istanga .aid-dm-scutura-y { animation: aid-dm-scy .18s ease-in-out; }
@keyframes aid-dm-scx { 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } } @keyframes aid-dm-scy { 30% { transform: translateY(-4px); } 70% { transform: translateY(4px); } }
#istanga .aid-dm-gata .aid-dm-piesa { filter: saturate(.6) brightness(.8); }
#istanga .aid-dm-plus { position: absolute; margin-left: 6px; font: bold 12px var(--aid-font-cifre, 'Courier New', monospace); color: #b8e8a8; animation: aid-dm-plus .7s ease-out forwards; pointer-events: none; }
@keyframes aid-dm-plus { to { transform: translateY(-14px); opacity: 0; } }
#istanga .aid-sd-cap-cifre span { position: relative; }
#istanga .aid-dm-sfat { text-align: center; margin: 8px 12px 0; font-size: 10px; }
/* the ranks */
#istanga .aid-dm-v2    { background: linear-gradient(160deg, #5a554a, #3a362e); }
#istanga .aid-dm-v4    { background: linear-gradient(160deg, #7a6e4e, #4e4530); }
#istanga .aid-dm-v8    { background: linear-gradient(160deg, #b08a2a, #7a5c14); }
#istanga .aid-dm-v16   { background: linear-gradient(160deg, #d6a020, #9a6c10); }
#istanga .aid-dm-v32   { background: linear-gradient(160deg, #e08a1e, #a85a0c); }
#istanga .aid-dm-v64   { background: linear-gradient(160deg, #e6622a, #a83a10); }
#istanga .aid-dm-v128  { background: linear-gradient(160deg, #e63b2e, #961e14); }
#istanga .aid-dm-v256  { background: linear-gradient(160deg, #c8203a, #7a0f22); }
#istanga .aid-dm-v512  { background: linear-gradient(160deg, #9c1f6e, #5a0e40); }
#istanga .aid-dm-v1024 { background: linear-gradient(160deg, #5f2aa0, #341458); }
#istanga .aid-dm-v2048 { background: linear-gradient(160deg, #1a1410, #000); box-shadow: inset 0 0 0 2px var(--aid-aur, #ffcc00), 0 0 18px rgba(255, 204, 0, 0.45); color: var(--aid-aur, #ffcc00); }
#istanga .aid-dm-v4096, #istanga .aid-dm-v8192 { background: linear-gradient(160deg, #000, #2a0000); box-shadow: inset 0 0 0 2px #ff6a5a, 0 0 20px rgba(255, 90, 60, 0.5); color: #ffb3a8; }
#istanga .aid-dm-recorduri { margin: 10px 4px 0; }
@media (prefers-reduced-motion: reduce) { #istanga .aid-dm-piesa { transition: none; } #istanga .aid-dm-noua, #istanga .aid-dm-unita, #istanga .aid-dm-scutura-x, #istanga .aid-dm-scutura-y { animation: none; } }

/* ============================================================ the Arcade
 *
 * js/aidjocuri.js: the games fullscreen. "sa intre intr-o alta lume in pauza
 * aceasta, nu doar intr-un popup". A dark ground with embers drifting up, the
 * marquee with the living mascot, and the stage -- #istanga moved in, 1025px
 * wide, as tall as the room. */
#aidjocuri { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; color: var(--aid-text, #e6e0c8); font-family: Arial, Helvetica, sans-serif; }
#aidjocuri[hidden] { display: none; }
#aidjocuri.aidj-vizibil { opacity: 1; }
/* opaque from the first frame -- see the note on #aidmare. Here the backdrop
   is .aidj-fundal rather than the overlay itself, so that one is the element
   that must never fade; the header and the stage do the entrance. */
#aidjocuri .aidj-antet { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1); }
#aidjocuri .aidj-scena { opacity: 0; transition: opacity .24s ease .04s; }
#aidjocuri.aidj-vizibil .aidj-antet { opacity: 1; transform: none; }
#aidjocuri.aidj-vizibil .aidj-scena { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	#aidjocuri .aidj-antet, #aidjocuri .aidj-scena { transition: none; opacity: 1; transform: none; }
}
#aidjocuri [hidden] { display: none !important; }
#aidjocuri .aidj-fundal { position: absolute; inset: 0; z-index: 0; overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 140, 0, 0.16) 0%, rgba(255, 140, 0, 0) 45%),
		radial-gradient(ellipse at 15% 100%, rgba(120, 20, 10, 0.35) 0%, rgba(0, 0, 0, 0) 55%),
		radial-gradient(ellipse at 85% 100%, rgba(120, 20, 10, 0.3) 0%, rgba(0, 0, 0, 0) 55%),
		linear-gradient(180deg, #0c0a08 0%, #120d09 40%, #1a0e08 100%); }
#aidjocuri .aidj-fundal::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px); pointer-events: none; }
#aidjocuri .aidj-scantei { position: absolute; inset: 0; }
#aidjocuri .aidj-scantei i { position: absolute; left: var(--x); bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px rgba(255, 150, 50, 0.6); opacity: 0; transform: scale(var(--s)); animation: aidj-scanteie var(--d) linear infinite; animation-delay: var(--t); }
@keyframes aidj-scanteie { 0% { transform: translate(0, 0) scale(var(--s)); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(14px, -50vh) scale(var(--s)); opacity: .6; } 100% { transform: translate(-10px, -100vh) scale(calc(var(--s) * .4)); opacity: 0; } }
#aidjocuri .aidj-antet { position: relative; z-index: 1; flex: 0 0 auto; padding: 14px 20px 8px; }
#aidjocuri .aidj-antet-in { max-width: 1025px; margin: 0 auto; display: flex; align-items: center; gap: 22px; }
#aidjocuri .aidj-drac { width: 74px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 18px rgba(255, 120, 40, 0.35)); animation: aidj-plutire 4.5s ease-in-out infinite; }
@keyframes aidj-plutire { 50% { transform: translateY(-6px) rotate(-2deg); } }
#aidjocuri .aidj-titluri { flex: 1 1 auto; min-width: 0; }
#aidjocuri .aidj-supra { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #f0a05a; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
#aidjocuri .aidj-titlu { margin: 0; font: bold 34px/1.05 Georgia, 'Times New Roman', serif; letter-spacing: .02em;
	background: linear-gradient(180deg, #fff3bd 0%, #ffd34d 35%, #e8b62e 55%, #8a5f12 80%, #d9a83a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(255, 190, 60, 0.35)); }
#aidjocuri .aidj-sub { margin-top: 3px; font-size: 12px; color: var(--aid-text-stins, #97917a); }
#aidjocuri .aidj-actiuni { display: flex; gap: 10px; flex: 0 0 auto; }
#aidjocuri .aidj-actiuni .aid-btn { text-decoration: none; }
#aidjocuri .aidj-esc { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 9px; line-height: 14px; letter-spacing: .05em; background: rgba(255, 255, 255, 0.08); color: var(--aid-text-stins, #97917a); vertical-align: 1px; }
#aidjocuri .aidj-scena { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 20px 24px; scrollbar-width: thin; scrollbar-color: #3a3d37 transparent; }
/* the panel, wide: it is #istanga, moved here (the map's window does the same) */
/* main.php writes width:600px and the overflows INLINE on #istanga, so the arcade's sizes carry !important */
#aidjocuri #istanga { display: block !important; position: relative; width: 100% !important; max-width: 1025px; height: auto !important; min-height: 0; max-height: none !important; margin: 0 auto; overflow: visible !important; box-sizing: border-box; }
#aidjocuri #istanga > h1 { font-size: 20px; margin: 4px 0 10px; }
#aidjocuri #istanga .borderrosu, #aidjocuri #istanga > div:has(> .borderrosu) > .borderrosu { width: auto; max-width: none; max-height: none; height: auto; overflow: visible; padding: 14px 18px; }
#aidjocuri #istanga.iframe { background-image: none; padding: 0 0 10px; }
#aidjocuri #istanga > div:has(> .borderrosu) { min-height: 0; }
/* the cards, three across and bigger */
#aidjocuri #istanga .aid-jocuri-lead { max-width: none; font-size: 14px; line-height: 22px; }
/* DOUA COLOANE, NU TREI (17 sept 2026): „aranjeaza, te rog, cardurile pe 2
   coloane (avem doar 4 jocuri)". Cu trei pe rand, patru jocuri ies 3+1 --
   randul al doilea ramane cu un card singur si o jumatate de masa goala. */
#aidjocuri #istanga .aid-jocuri-grila { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 980px; margin-left: auto; margin-right: auto; }
#aidjocuri #istanga .aid-joc { min-height: 170px; padding: 16px 16px 16px 20px; gap: 16px; border-radius: 14px; }
#aidjocuri #istanga .aid-joc:not(.aid-joc-curand):hover { transform: translateY(-3px); }
#aidjocuri #istanga .aid-joc-poza { flex-basis: 96px; width: 96px; height: 96px; }
#aidjocuri #istanga .aid-joc-poza svg { width: 68px; height: 68px; }
#aidjocuri #istanga .aid-joc-nume { font-size: 17px; line-height: 20px; }
#aidjocuri #istanga .aid-joc-desc { font-size: 12px; line-height: 17px; }
#aidjocuri #istanga .aid-joc-buton { min-height: 30px; padding: 5px 20px; font-size: 12px; }
/* Sudoku, with room: the board grows, the lobby spreads */
#aidjocuri #istanga .aid-sd-tabla { --cel: 56px; gap: 3px; padding: 10px; }
#aidjocuri #istanga .aid-sd-tabla-4 { --cel: 110px; gap: 6px; }
#aidjocuri #istanga .aid-sd-margine-dr { margin-right: 8px; } #aidjocuri #istanga .aid-sd-margine-jos { margin-bottom: 8px; }
#aidjocuri #istanga .aid-sd-tabla-4 .aid-sd-margine-dr { margin-right: 12px; } #aidjocuri #istanga .aid-sd-tabla-4 .aid-sd-margine-jos { margin-bottom: 12px; }
#aidjocuri #istanga .aid-sd-sim { width: 56px; min-width: 56px; height: 56px; }
#aidjocuri #istanga .aid-sd-tava { max-width: 640px; gap: 8px; margin-top: 14px; }
#aidjocuri #istanga .aid-sd-cap-titlu { font-size: 16px; }
#aidjocuri #istanga .aid-sd-cap-cifre b { font-size: 16px; }
#aidjocuri #istanga .aid-sd-sfat { font-size: 11.5px; }
#aidjocuri #istanga .aid-sd-alege { grid-template-columns: 1fr 1fr; gap: 16px; }
#aidjocuri #istanga .aid-sd-card { padding: 18px 20px; }
#aidjocuri #istanga .aid-sd-mini { width: 110px; }
#aidjocuri #istanga .aid-sd-dif-b { font-size: 11px; min-height: 24px; padding: 2px 11px; }
#aidjocuri #istanga .aid-sd-best { grid-template-columns: 1fr 1fr; }
#aidjocuri #istanga .aid-sd-rezultat { max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
	#aidjocuri .aidj-antet-in { gap: 12px; } #aidjocuri .aidj-titlu { font-size: 24px; } #aidjocuri .aidj-drac { width: 52px; } #aidjocuri .aidj-sub { display: none; }
	#aidjocuri #istanga .aid-jocuri-grila { grid-template-columns: 1fr; }
	#aidjocuri #istanga .aid-sd-tabla { --cel: 36px; } #aidjocuri #istanga .aid-sd-tabla-4 { --cel: 72px; }
	#aidjocuri #istanga .aid-dm-tabla { --cel: 72px; --gap: 7px; } #aidjocuri #istanga .aid-dm-piesa b { font-size: 22px; } #aidjocuri #istanga .aid-dm-piesa small { font-size: 8px; }
	#aidjocuri #istanga .aid-mm-tabla { --cel: 64px; gap: 6px; padding: 8px; } #aidjocuri #istanga .aid-mm-tabla-6 { --cel: 46px; gap: 4px; }
	#aidjocuri #istanga .aid-tv-topuri { grid-template-columns: 1fr; } #aidjocuri #istanga .aid-tv-intrebare { font-size: 20px; line-height: 27px; } #aidjocuri #istanga .aid-tv-card { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { #aidjocuri .aidj-scantei i, #aidjocuri .aidj-drac { animation: none; } }
/* the arcade's frame around a page: the panel's ring, not the old green line */
#aidjocuri #istanga .borderrosu { border: 1px solid rgba(255, 226, 178, 0.14); border-radius: 12px; background: rgba(0, 0, 0, 0.42); box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.08), 0 10px 30px rgba(0, 0, 0, 0.5); }
#aidjocuri #istanga > h1 { padding-left: 4px; }
/* Sudoku in the arcade: the board left, the tray standing at its right */
#aidjocuri #istanga .aid-sd-in-joc { display: grid; grid-template-columns: auto minmax(200px, 300px); grid-template-areas: "cap cap" "tabla tava" "tabla sfat" "tabla mesaj" "rez rez"; column-gap: 32px; row-gap: 10px; align-items: start; align-content: start; justify-content: center; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-cap { grid-area: cap; padding-bottom: 4px; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tabla { grid-area: tabla; --cel: 52px; margin: 0; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tabla-4 { --cel: 104px; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tava { grid-area: tava; justify-content: flex-start; max-width: 300px; margin: 0; align-self: start; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tava-4 { max-width: 200px; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-sim { width: 60px; min-width: 60px; height: 60px; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-sfat { grid-area: sfat; text-align: left; margin: 0; font-size: 12px; line-height: 17px; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-mesaj { grid-area: mesaj; margin: 0; }
#aidjocuri #istanga .aid-sd-in-joc .aid-sd-rezultat { grid-area: 2 / 2 / 5 / 3; max-width: none; margin: 0; align-self: start; }
/* Etajul 2048 in the arcade: a big board in the middle */
#aidjocuri #istanga .aid-dm-tabla { --cel: 116px; --gap: 12px; }
#aidjocuri #istanga .aid-dm-piesa b { font-size: 34px; }
#aidjocuri #istanga .aid-dm-v1024 b, #aidjocuri #istanga .aid-dm-v2048 b, #aidjocuri #istanga .aid-dm-v4096 b, #aidjocuri #istanga .aid-dm-v8192 b { font-size: 27px; }
#aidjocuri #istanga .aid-dm-piesa small { font-size: 10.5px; }
#aidjocuri #istanga .aid-dm-sfat { font-size: 12px; }
#aidjocuri #istanga .aid-dm-rezultat { max-width: 640px; margin-left: auto; margin-right: auto; }
#aidjocuri #istanga .aid-dm-etaj { min-width: 60px; font-size: 10px; } #aidjocuri #istanga .aid-dm-etaj b { font-size: 13px; }
/* Ai Memorie in the arcade: bigger cards, room for the 6x6 */
#aidjocuri #istanga .aid-mm-tabla { --cel: 100px; gap: 12px; padding: 14px; }
#aidjocuri #istanga .aid-mm-tabla-6 { --cel: 80px; gap: 9px; }
#aidjocuri #istanga .aid-mm-sfat { font-size: 12px; }
#aidjocuri #istanga .aid-mm-rezultat { max-width: 640px; margin-left: auto; margin-right: auto; }
#aidjocuri #istanga .aid-mm-mini { width: 110px; }
/* Trivia in the arcade: the question card wide and calm in the middle, the lobby's two tables side by side */
#aidjocuri #istanga .aid-tv-topuri { grid-template-columns: 1fr 1fr; gap: 16px; }
#aidjocuri #istanga .aid-tv-azi { padding: 18px 22px 20px; }
/* the panel is inline-block in the legacy sheet; without the lobby's long text it would shrink around the card */
#aidjocuri #istanga .aid-tv-in-joc { display: block; width: 100%; box-sizing: border-box; }
#aidjocuri #istanga .aid-tv-card { max-width: 720px; margin: 0 auto; padding: 22px 28px 24px; gap: 16px; }
#aidjocuri #istanga .aid-tv-intrebare { font-size: 26px; line-height: 34px; padding: 10px 8px; }
#aidjocuri #istanga .aid-tv-input { height: 42px; font-size: 17px; line-height: 42px; }
#aidjocuri #istanga .aid-tv-cap { max-width: 720px; margin: 0 auto; width: 100%; box-sizing: border-box; }
#aidjocuri #istanga .aid-tv-cap-titlu { font-size: 16px; }
#aidjocuri #istanga .aid-tv-cap-cifre b { font-size: 16px; }
#aidjocuri #istanga .aid-tv-pasi i { width: 14px; height: 14px; }
#aidjocuri #istanga .aid-tv-rezultat { max-width: 640px; margin-left: auto; margin-right: auto; }
#aidjocuri #istanga .aid-tv-recap li { font-size: 12px; }


/* ====================================================== the legacy form sheet
 *
 * "propunere: o singura trecere de layout, nu opt rescrieri" -- this is that
 * trecere, for the shape every un-rebuilt form in the game still has:
 *
 *     <table class="tabla"><tr><td>Destinatar:</td><td><input ...></td></tr>
 *
 * a label cell and a field cell, no classes, sized by an inline width written
 * for a 2010 frame. Nothing here needs a markup change, so it reaches
 * compune.php, galianta.php, adaugal.php, harta.php's search, the moderation
 * forms and whatever else carries the pattern -- including pages nobody has
 * looked at yet.
 *
 * Scoped to a table INSIDE A FORM on purpose: `table.tabla` is also the
 * game's list table, and giving a list of reports label-column treatment
 * would be the cure killing the patient. */
#istanga form > table.tabla,
#istanga form table.tabla:not(.aid-rand):not(.aid-rand-cap) {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
}
#istanga form table.tabla > tbody > tr > td {
	vertical-align: middle;
	padding: 2px 4px;
}
/* the label column: first cell of a two-cell row, and only when the row's
   other cell holds the control */
#istanga form table.tabla > tbody > tr > td:first-child:not([colspan]) {
	width: 1%;
	white-space: nowrap;
	padding-right: 14px;
	text-align: right;
	font-size: 11.5px;
	letter-spacing: .03em;
	color: var(--aid-text-stins, #97917a);
	vertical-align: top;
	padding-top: 8px;
}
/* the field column: the inline width is a floor, not a law -- it may shrink on
   a narrow panel and it may grow in the arcade */
#istanga form table.tabla input:not([type]),
#istanga form table.tabla input[type="text"],
#istanga form table.tabla input[type="password"],
#istanga form table.tabla input[type="number"],
#istanga form table.tabla textarea,
#istanga form table.tabla select {
	max-width: 100%;
	min-height: 26px;
}
#istanga form table.tabla textarea { min-height: 120px; line-height: 1.5; padding: 7px 9px; }
/* the submit sits in its own full-width row, usually inside a <center> */
#istanga form table.tabla > tbody > tr > td[colspan] { padding-top: 6px; }
#istanga form table.tabla > tbody > tr > td[colspan] center { display: block; padding: 4px 0 2px; }

/* THE NOTE UNDER A FORM.
 *
 * Several pages end with a bare sentence in the old bright green -- "* Pentru
 * a trimite un mesaj mai multor jucatori...". It is help text, so it gets the
 * muted voice and a rule above it instead of shouting louder than the form it
 * explains. `.aid-nota` is the class the port wraps it in; the second selector
 * catches the ones still printing a bare <span style="color:orange">. */
#istanga .borderrosu > form + .aid-nota,
#istanga .aid-nota-forma {
	display: block;
	margin: 14px auto 2px;
	max-width: 62ch;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 226, 178, 0.12);
	font-size: 11.5px;
	line-height: 16px;
	text-align: center;
	color: var(--aid-text-stins, #97917a);
}

/* ================================================== the administration console
 *
 * js/aidadmin.js: panou.php on the whole screen. "am nevoie de un panou serios
 * si amplu in care o sa punem mai multe date."
 *
 * Deliberately NOT the arcade. Same machinery, opposite character: no embers,
 * no marquee, no mascot -- a working console. One rule under a plain header, a
 * ground a shade colder than the game's warm black so it does not pretend to
 * be part of the town, and a stage 1440 wide (or the whole window, remembered
 * per browser) because the point of the exercise is room. */
#aidadmin { position: fixed; inset: 0; z-index: 880; display: flex; flex-direction: column;
	color: var(--aid-text, #e6e0c8); font-family: Arial, Helvetica, sans-serif;
	background:
		radial-gradient(ellipse at 50% -10%, rgba(120, 132, 150, 0.10) 0%, rgba(0, 0, 0, 0) 55%),
		linear-gradient(180deg, #0b0c0e 0%, #0e0f11 55%, #0a0b0d 100%); }
#aidadmin[hidden] { display: none; }
/* opaque from the first frame -- see the note on #aidmare */
#aidadmin .aida-antet { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1); }
#aidadmin .aida-scena { opacity: 0; transition: opacity .24s ease .04s; }
#aidadmin.aida-vizibil .aida-antet { opacity: 1; transform: none; }
#aidadmin.aida-vizibil .aida-scena { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	#aidadmin .aida-antet, #aidadmin .aida-scena { transition: none; opacity: 1; transform: none; }
}
#aidadmin.aida-vizibil { opacity: 1; }
#aidadmin [hidden] { display: none !important; }
#aidadmin .aida-antet { flex: 0 0 auto; background: rgba(0, 0, 0, 0.35); }
#aidadmin .aida-file { border-bottom: 1px solid rgba(255, 226, 178, 0.14); background: rgba(0, 0, 0, 0.35); }
#aidadmin .aida-antet-in { max-width: 1440px; margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 20px; }
#aidadmin.aida-tot .aida-antet-in { max-width: none; }
#aidadmin .aida-titluri { margin-right: auto; min-width: 0; }
#aidadmin .aida-supra { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--aid-aur-stins, #c69e0c); font-family: var(--aid-font-cifre, 'Courier New', monospace); }
/* legacy css.css capitalizes every h1/h2 -- "Camera De Comanda" is not a title */
#aidadmin .aida-titlu { margin: 2px 0 0; font: bold 21px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .01em; color: var(--aid-aur, #ffcc00); text-transform: none; }
#aidadmin .aida-actiuni { display: flex; gap: 10px; flex: 0 0 auto; }
#aidadmin .aida-esc { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 9px; line-height: 14px; background: rgba(255, 255, 255, 0.08); color: var(--aid-text-stins, #97917a); vertical-align: 1px; }
/* ------------------------------------------------------- bara de taburi
 *
 * Urcata din panou.php in antetul scenei, ca sa nu mai dispara cand consola
 * tine alta pagina decat panoul -- `jbanati.php`, `mod_info.php`. Vezi nota
 * lunga din js/aidadmin.js.
 *
 * Si atunci bara desenata de panou.php nu mai are ce cauta pe ecran: ar fi doua
 * randuri de taburi unul sub altul. Nu o scot din PHP, pentru ca panou.php
 * trebuie sa ramana o pagina intreaga si cand e deschisa singura, in afara
 * consolei; o ascund cat timp e inauntru. Selectorul descrie exact asta. */
#aidadmin .aid-panou-file { display: none; }

/* O BANDA CAT TOT ECRANUL, CU UN MIEZ CAT SCENA.
 *
 * Prima versiune punea si linia de jos, si latimea maxima, pe acelasi element
 * -- si atunci banda se termina unde se termina taburile, iar „Mai lat" o
 * latea pe ea inaintea continutului. Aceeasi forma ca `.aida-antet-in` de
 * deasupra: exteriorul tine fundalul si linia, interiorul tine latimea. */
#aidadmin .aida-file { flex: 0 0 auto; }
/* Aceeasi reteta ca `.aida-antet-in`, litera cu litera: aceeasi latime maxima,
   acelasi padding, si FARA `box-sizing: border-box` -- cu el, cei 22px intrau
   in cei 1440 si primul tab statea cu 22px mai inauntru decat titlul de
   deasupra lui. Doua randuri care ar trebui sa inceapa de pe aceeasi linie. */
#aidadmin .aida-file-in {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 22px 10px;
}
#aidadmin.aida-tot .aida-file-in { max-width: none; }
/* Un moderator n-are nicio fila a panoului, deci bara lui e goala -- si o banda
   goala cu o linie sub ea arata a ceva stricat. */
#aidadmin .aida-file-in:empty { display: none; }
#aidadmin .aida-file:has(> .aida-file-in:empty) { border-bottom: none; padding: 0; }
#aidadmin .aida-file-in a {
	padding: 5px 13px;
	border-radius: 999px;
	font-family: var(--aid-font-titlu, Georgia, serif);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--aid-text-stins, #97917a);
	text-decoration: none;
	transition: color 120ms linear, background-color 120ms linear, box-shadow 120ms linear;
}
#aidadmin .aida-file-in a:hover { color: var(--aid-aur, #ffcc00); background: rgba(255, 255, 255, 0.05); }
/* Tabul deschis: inelul, ca la butoane, ca sa fie acelasi vocabular peste tot
   in consola -- nu o a doua forma de „asta e cel ales". */
#aidadmin .aida-file-in a.aida-acum {
	color: var(--aid-aur, #ffcc00);
	background: rgba(0, 0, 0, 0.42);
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c);
}

#aidadmin .aida-scena { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 22px 32px; scrollbar-width: thin; scrollbar-color: #3a3d37 transparent; }
/* the panel, wide: #istanga is moved in, and main.php writes its width inline */
#aidadmin #istanga { display: block !important; position: relative; width: 100% !important; max-width: 1440px;
	height: auto !important; min-height: 0; max-height: none !important; margin: 0 auto;
	overflow: visible !important; box-sizing: border-box; background-image: none; padding: 0 0 12px; }
#aidadmin.aida-tot #istanga { max-width: none; }
/* `#istanga.iframe > div` face, in panoul mic, un scroller de inaltimea
   panoului. In consola panoul n-are inaltime fixa -- scena scroleaza -- deci
   scrollerul ala ar fi un al doilea, inauntrul primului. */
#aidadmin #istanga > div { max-height: none; overflow: visible; }

/* `align-self: stretch` SI marginile pe zero, nu doar `width: auto`.
 *
 * Ambalajul fragmentului e `display: flex; flex-direction: column`, iar
 * css.css din 2008 da `.borderrosu { margin: auto }`. Intr-un container flex,
 * o margine `auto` pe axa transversala ANULEAZA intinderea si centreaza
 * elementul la latimea continutului lui -- deci `width: auto` dadea 272px
 * intr-un parinte de 1440, cu 563px de margine de fiecare parte. Din afara
 * arata ca „panoul de moderare e ingust rau", si nicio latime maxima n-ar fi
 * ajutat: nu era o limita, era o centrare.
 *
 * Masurat in pagina, nu ghicit: `width: 271.953px`, `margin: 563px`, parinte
 * 1440. De-aia nici „Mai lat" nu schimba nimic -- continutul nu se uita deloc
 * la parinte. */
#aidadmin #istanga .borderrosu, #aidadmin #istanga > div:has(> .borderrosu) > .borderrosu {
	width: auto; max-width: none; max-height: none; height: auto; overflow: visible;
	align-self: stretch; margin-left: 0; margin-right: 0;
	border: 1px solid rgba(255, 226, 178, 0.12); border-radius: 10px; padding: 16px 20px;
	background: rgba(255, 255, 255, 0.018); }
#aidadmin #istanga > div:has(> .borderrosu) { min-height: 0; }
#aidadmin #istanga .aid-cadru { max-width: none; }
#aidadmin #istanga > h1, #aidadmin #istanga .aid-lista-titlu { font-size: 19px; }

/* the strip of live figures, at the top of every tab (panou.php) */
#istanga .aid-adm-sumar { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; margin: 10px 0 14px; }
#istanga .aid-adm-cifra { padding: 9px 12px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.34);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 226, 178, 0.09); }
#istanga .aid-adm-cifra b { display: block; font: bold 20px/1.1 var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums; color: #fff; }
#istanga .aid-adm-cifra span { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .05em;
	text-transform: uppercase; color: var(--aid-text-stins, #97917a); }
#istanga .aid-adm-aur b { color: var(--aid-aur, #ffcc00); }
#istanga .aid-adm-viu b { color: #b8e8a8; }
/* on the wide console the panel's own sections can sit two across */
#aidadmin #istanga .aid-panou-sec { break-inside: avoid; }
@media (min-width: 1100px) {
	#aidadmin #istanga .aid-panou-cutii, #aidadmin #istanga .aid-panou-doua { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
	#aidadmin #istanga .aid-adm-sumar { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 700px) { #aidadmin .aida-antet-in { padding: 10px 14px; gap: 10px; } #aidadmin .aida-titlu { font-size: 17px; } #aidadmin .aida-lat { display: none; } #aidadmin .aida-scena { padding: 12px 14px 24px; } }
@media (prefers-reduced-motion: reduce) { #aidadmin { transition: none; } }

/* =========================================== jucator.php, the 9 Sept reglaje
 *
 * Three things the test found, all on the same screen.
 *
 * 1. THE GARRISON OVERFLOWED INTO THE BUTTON.
 *    "in pag. jucator.php, la jucatorii care au f multi draci, span-ul
 *     (Acasa) intra peste zona buton ataca, din dreapta. propun sa scriem
 *     mic, dedesuptul dracilor, acest span, intre draci si distanta"
 *    .aid-j-garnizoana is a flex row -- icon, number, note -- and a five
 *    digit number at 26px simply ran out of column. A row that wraps, with
 *    the note taking a whole line of its own, puts it exactly where it was
 *    asked for: under the draci, above the distance, and small.
 */
#istanga .aid-j-garnizoana { flex-wrap: wrap; row-gap: 0; }
#istanga .aid-j-paziti { flex: 0 0 100%; margin-top: 1px; font-size: 10px; line-height: 14px; }

/* 2. THE INSTITUTION'S PLACE ON THE MAP, under its name -- the coordinates
 *    the facts sheet only ever printed for players. Set like a subtitle, not
 *    like a row of a table: there is no table here to belong to. */
#istanga .aid-j-loc {
	margin: -3px 0 6px;
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-j-loc a { color: var(--aid-aur, #fc0); text-decoration: none; border-bottom: 1px dotted rgba(255, 204, 0, 0.35); }
#istanga .aid-j-loc a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

/* 3. THE INSTITUTION'S DESCRIPTION, across both columns and uncut.
 *    It is the only paragraph on the page worth reading -- what the building
 *    does -- and it was being cut at 90 characters in a 250px column. Here it
 *    spans the grid, over the garrison and the button, framed like a plaque
 *    on the wall of the place it describes. */
/*    A named row rather than `grid-column: 1 / -1`: the wrapper's areas
 *    already fill both rows, so an auto-placed item would be pushed under the
 *    history instead of sitting above the garrison. The :has() means the extra
 *    row exists only on the screens that have the paragraph. */
#istanga .aid-j-corp:has(> .aid-j-lamurire) {
	grid-template-areas: "lamurire lamurire" "text actiune" "istoric istoric";
}
#istanga .aid-j-lamurire {
	grid-area: lamurire;
	margin: 0 0 8px;
	padding: 9px 14px;
	border-left: 3px solid var(--aid-aur-stins, #c69e0c);
	border-radius: 0 7px 7px 0;
	background: rgba(0, 0, 0, 0.26);
	box-shadow: inset 0 1px 0 rgba(255, 226, 178, 0.07);
	font-size: 12px;
	line-height: 18px;
	color: var(--aid-text, #e6e0c8);
}

/* ============================== the four collection buttons, in blue
 *
 * "butoanele artefacte, potiuni, masini, haine, de pe minimap - sa fie albastre
 *  ca fundal (asa sunt obisnuiti jucatorii)" (9 Sept 2026)
 *
 * The eleven minimap buttons are one dish drawn from three custom properties
 * (see .aid-ic/.aid-ica above), so a different colour is three values and
 * nothing else: the ring, the bevel, the hover lift and the pressed state all
 * follow. These four are what a player OWNS -- artefacts, potions, cars,
 * garments -- and the old game gave that group a blue plate. Everything that
 * ACTS (map, rules, buildings, guide) stays green.
 *
 * A FIRST ATTEMPT WAS TOO DARK TO READ AS BLUE. "nu am vazut butoanele albastre
 * de care am vorbit. probabil ai schimbat tint in albastru. ma refeream sa faci
 * fundalul lor albastru, cu tint alb" -- so: a real blue in the dish, and the
 * engraved icon WHITE on it rather than the pastel each one used to carry.
 * Scoped to #blocharta, the minimap: the same .aid-i-* names name the big
 * buttons on the top bar, which keep the green plate and their own colours. */
#blocharta .aid-ica.aid-i-artefacte,
#blocharta .aid-ica.aid-i-licori,
#blocharta .aid-ica.aid-i-masini,
#blocharta .aid-ica.aid-i-itemuri {
	--aid-buton-sus: #5b8fd8;
	--aid-buton-mij: #24457f;
	--aid-buton-jos: #0e2145;
	--aid-ic-culoare: #ffffff;
}
/* hover keeps lifting towards the light rather than turning gold */
#blocharta .aid-ica.aid-i-artefacte:hover,
#blocharta .aid-ica.aid-i-licori:hover,
#blocharta .aid-ica.aid-i-masini:hover,
#blocharta .aid-ica.aid-i-itemuri:hover {
	box-shadow:
		inset 0 -4px 7px rgba(0, 0, 0, 0.45),
		inset 0 2px 3px rgba(255, 255, 255, 0.20),
		0 4px 9px rgba(0, 0, 0, 0.55),
		0 0 14px rgba(110, 170, 255, 0.40);
}
/* the artefact shelf in the gamescreen now opens the object page */
#boxartefacte img { cursor: pointer; }

/* ============================================ the two screens on the whole wall
 *
 * js/aidmare.js: statistici.php and topactuali.php, fullscreen.
 *
 * "pagina statistici.php o putem redenumi Statisticile Mele si o facem
 *  fullscreen, mai spectaculoasa. Acolo jucatorul vede tot ce a facut si
 *  trebuie sa fie faina, nu inghesuita in istanga."
 * "cred ca si topactuali.php - top 100 - merge fullscreen... o putem sa o facem
 *  mare, sa aiba impact."
 *
 * The third overlay of this shape, and deliberately its own character. The
 * arcade is a fairground (embers, marquee, the mascot); the console is an
 * office (cold grey, no ornament). This is the hall where a player's own record
 * hangs: a warm black, one shaft of gold from above, and nothing moving --
 * the numbers are the show. */
#aidmare {
	position: fixed; inset: 0; z-index: 890;
	display: flex; flex-direction: column;
	color: var(--aid-text, #e6e0c8); font-family: Arial, Helvetica, sans-serif;
	background: linear-gradient(180deg, #0d0b07 0%, #12100a 45%, #0a0906 100%);
	--aidm-lat: 1100px;
}
/* THE CURTAIN FALLS INSTANTLY, THE ACTORS COME IN ANIMATED.
 *
 * This used to fade the whole overlay in from opacity 0. But js/aidmare.js
 * moves #istanga into the stage BEFORE the overlay is shown, so for the length
 * of that fade the page underneath was on display with its panel already gone
 * -- an empty green #blociframe, which keeps its 600x510 from css.css whether
 * anything is in it or not. Found by setting display:none on #aidmare in the
 * console: "am vazut blociframe verde, dedesupt".
 *
 * So the backdrop is opaque from the first frame and only the contents
 * animate. Nothing can be seen through it at any point, on any machine, at any
 * frame rate. The header carries the small lift; the stage only fades, because
 * a transform on a scrolling box makes it the containing block for anything
 * positioned fixed inside it. */
#aidmare .aidm-antet { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1); }
#aidmare .aidm-scena { opacity: 0; transition: opacity .24s ease .04s; }
#aidmare.aidm-vizibil .aidm-antet { opacity: 1; transform: none; }
#aidmare.aidm-vizibil .aidm-scena { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	#aidmare .aidm-antet, #aidmare .aidm-scena { transition: none; opacity: 1; transform: none; }
}
#aidmare[hidden] { display: none; }
#aidmare.aidm-vizibil { opacity: 1; }
#aidmare [hidden] { display: none !important; }
/* the shaft of light, behind everything, painted not animated */
#aidmare .aidm-fundal {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 70% 45% at 50% -6%, rgba(255, 204, 0, 0.13) 0%, rgba(255, 204, 0, 0) 70%),
		radial-gradient(ellipse 120% 70% at 50% 108%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
}
#aidmare .aidm-antet { position: relative; flex: 0 0 auto; border-bottom: 1px solid rgba(255, 226, 178, 0.16); background: rgba(0, 0, 0, 0.32); }
#aidmare .aidm-antet-in { max-width: var(--aidm-lat); margin: 0 auto; padding: 14px 22px 13px; display: flex; align-items: center; gap: 22px; }
#aidmare .aidm-titluri { margin-right: auto; min-width: 0; }
#aidmare .aidm-supra { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--aid-aur-stins, #c69e0c); font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#aidmare .aidm-titlu {
	margin: 3px 0 2px; text-transform: none;
	font: bold 27px/1.08 Georgia, 'Times New Roman', serif;
	color: var(--aid-aur, #ffcc00);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 22px rgba(255, 204, 0, 0.22);
}
#aidmare .aidm-sub { font-size: 12px; color: var(--aid-text-stins, #97917a); }
#aidmare .aidm-actiuni { display: flex; gap: 10px; flex: 0 0 auto; }
#aidmare .aidm-esc { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 9px; line-height: 14px; background: rgba(255, 255, 255, 0.08); color: var(--aid-text-stins, #97917a); vertical-align: 1px; }
#aidmare .aidm-scena { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 22px 40px; scrollbar-width: thin; scrollbar-color: #3a3d37 transparent; }

/* the panel itself. main.php writes width and overflow INLINE on #istanga, so
   these four have to shout -- the same three lines the arcade needed. */
#aidmare #istanga {
	display: block !important; position: relative;
	width: 100% !important; max-width: var(--aidm-lat);
	height: auto !important; min-height: 0; max-height: none !important;
	margin: 0 auto; overflow: visible !important;
	box-sizing: border-box; background-image: none; padding: 0 0 12px;
}
/* the page's own h1 says exactly what the header above says. Both spellings of
   where it lands: bare in the panel, or inside Fragment's wrapper div. */
#aidmare #istanga > h1,
#aidmare #istanga > [data-aid-fragment] > h1 { display: none; }
/* !important, and premium.php is why: its frame is
       <div class="borderrosu" style="display:block; overflow:auto; height:380px;">
   -- an inline height and an inline scroller, from the days when the page lived
   in a 560px panel. Inline beats any selector, so the fullscreen page kept a
   380px window scrolling inside a screen with room to spare: "ar fi bine sa
   facem scroll ca la top100, pe tot divul, nu in box cum e acum (se
   inghesuie)". The scene scrolls; nothing inside it does. */
#aidmare #istanga .borderrosu {
	width: auto !important; max-width: none;
	height: auto !important; max-height: none !important;
	overflow: visible !important;
	border: 1px solid rgba(255, 226, 178, 0.12); border-radius: 12px;
	padding: 16px 20px 20px; background: rgba(255, 255, 255, 0.016);
}

/* ---------------------------------------------------- magazinele, wide (17 sept 2026)
 * artefacte, licori, masini, itemuri (haine) si retete pe tot ecranul. Marcajul
 * e cel din 2010 si nu se schimba: .borderrosu > table.tabla > td cu intro-ul
 * si un sir de carduri .tablaartefact. La 1120 un card pe rand era o panglica
 * lata cu trei cuvinte pe ea, deci celula devine o grila pe doua coloane, cu
 * intro-ul si paginarea intinse peste amandoua. `:has` pentru ca celula n-are
 * clasa si n-o s-o primeasca -- cinci fisiere portate. Cardul isi pierde
 * marginea de 4px (glow-ul are loc, scena nu decupeaza) si isi ia toata coloana. */
#aidmare #istanga .borderrosu > .tabla > tbody > tr > td:has(> .tablaartefact) {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start;
}
#aidmare #istanga .borderrosu > .tabla > tbody > tr > td:has(> .tablaartefact) > .aid-intro,
#aidmare #istanga .borderrosu > .tabla > tbody > tr > td:has(> .tablaartefact) > center,
#aidmare #istanga .borderrosu > .tabla > tbody > tr > td:has(> .tablaartefact) > .aid-vorba { grid-column: 1 / -1; }
#aidmare #istanga .borderrosu > .tabla > tbody > tr > td:has(> .tablaartefact) > br { display: none; }
#aidmare #istanga .borderrosu > .tabla > tbody > tr > td:has(> .tablaartefact) > .tablaartefact { width: 100%; margin: 0; }
/* the description cell wants the room the two-column card gives it */
#aidmare #istanga .tablaartefact > tbody > tr > td { font-size: 12px; }

/* ---------------------------------------------------- contul, wide (17 sept 2026)
 * datecont.php (tabelul vechi al contului) si cont.php (pagina View: .wrap >
 * .brand + main.card > h1-uri de sectiune, .rows, .field, button, .msg).
 * Fragment arunca <head>, deci cont.php ajunge fara stilul lui de pergament --
 * aici primeste hainele jocului: cardul ca .aid-cont-card, h1-urile de
 * sectiune ca etichete de aur, campurile si butoanele sunt deja ale panoului. */
/* 720 px E LATIMEA CONTULUI, NU A TUTUROR (17 sept 2026).
 *
 * „artefacte, licori, masini si haine -- cele patru pagini -- au fost trecute
 *  pe fullscreen, dar containerul (tabla) e ingust -> il poti face lat ca la
 *  Colectia mea. e loc."
 *
 * Regula de aici s-a nascut pentru datecont/cont, unde un formular de 1100 px
 * ar fi fost o linie de text peste tot ecranul; dar a prins ORICE ecran mare al
 * carui continut e o `.tabla`, adica si cele patru vitrine, care au de aratat
 * rafturi, nu randuri de formular. Deci se leaga de ecranele carora le
 * trebuie, pe nume. */
#aidmare[data-ecran="datecont"] #istanga .borderrosu > form > .tabla,
#aidmare[data-ecran="datecont"] #istanga .borderrosu > .tabla,
#aidmare[data-ecran="cont"] #istanga .borderrosu > form > .tabla,
#aidmare[data-ecran="cont"] #istanga .borderrosu > .tabla { margin: 0 auto; max-width: 720px; }
/* si, pe fata cealalta: vitrinele chiar umplu masa */
#aidmare[data-ecran="artefacte"] #istanga .borderrosu > .tabla,
#aidmare[data-ecran="licori"] #istanga .borderrosu > .tabla,
#aidmare[data-ecran="masini"] #istanga .borderrosu > .tabla,
#aidmare[data-ecran="itemuri"] #istanga .borderrosu > .tabla,
#aidmare[data-ecran="retete"] #istanga .borderrosu > .tabla,
#aidmare[data-ecran="garaj"] #istanga .borderrosu > .tabla { width: 100%; max-width: none; margin: 0; }

/* RETETELE, CU LOC DE CITIT (17 sept 2026).
 *
 * „descrierea ar trebui pe tot row-ul sau macar pe primele 2 - acum e o
 *  coloana inghesuita."
 *
 * Fiecare reteta e un tabel din 2010: poza (70), numele, ingredientele
 * (`width="240"`) si, sub ele, descrierea. Cardul primeste toata latimea
 * randului (o singura coloana in grila, nu doua) si nu mai tine coloanele la
 * latimile scrise pentru panoul ingust.
 *
 * CE NU SE REPARA DE AICI (17 sept 2026): descrierea statea in coloana din
 * mijloc, lata cat numele, iar poza si ingredientele tineau randul inalt cu
 * `rowspan="2"` -- „cardul [...] e cu muuult spatiu din cauza descrierii
 * inghesuite pe o coloana". `colspan` nu se scrie din CSS, deci aia s-a reparat
 * in marcaj (vezi fixurile lui retete.php din bin/port-legacy.php): acum
 * descrierea e un rand al ei, pe toata latimea. Aici a ramas doar ce tine de
 * marime, si `min-width` pe coloana ingredientelor a plecat odata cu ea -- o
 * pusesem crezand ca aia e descrierea. */
#aidmare[data-ecran="retete"] #istanga .borderrosu > .tabla > tbody > tr > td:has(> .tablaartefact) {
	grid-template-columns: minmax(0, 1fr);
}
#aidmare[data-ecran="retete"] #istanga .tablaartefact { width: 100%; }
#aidmare[data-ecran="retete"] #istanga .tablaartefact td[width="240"] { width: auto; font-size: 12px; line-height: 18px; }
#aidmare[data-ecran="retete"] #istanga .tablaartefact td[width="70"] { width: 78px; }

/* GARAJUL PE TOT ECRANUL (17 sept 2026). Lista lui e o coloana de carduri --
   buna intr-un panou de 600px, risipa pe 1120: doua coloane, cu poza masinii
   mai mare, si antetul (locurile, butonul, bonusul parcarii) peste amandoua. */
#aidmare[data-ecran="garaj"] #istanga .aid-garaj-lista {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start;
}
#aidmare[data-ecran="garaj"] #istanga .aid-garaj-card { padding: 12px 14px; }
#aidmare[data-ecran="garaj"] #istanga .aid-garaj-poza { width: 190px; height: 104px; }
#aidmare[data-ecran="garaj"] #istanga .aid-garaj-poza img { max-width: 170px; max-height: 92px; }
#aidmare[data-ecran="garaj"] #istanga .aid-intro,
#aidmare[data-ecran="garaj"] #istanga .aid-garaj-antet,
#aidmare[data-ecran="garaj"] #istanga .aid-garaj-actiune,
#aidmare[data-ecran="garaj"] #istanga .aid-garaj-suma { max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
	#aidmare[data-ecran="garaj"] #istanga .aid-garaj-lista { grid-template-columns: minmax(0, 1fr); }
}
#istanga .wrap { max-width: 100%; margin: 0; }
#istanga .wrap .brand { display: none; }                 /* antetul ecranului spune deja unde esti */
#istanga .wrap .card {
	padding: 6px 4px 12px; border: 0; background: none; box-shadow: none;
}
#aidmare #istanga .wrap .card { max-width: 640px; margin: 0 auto; }
#istanga .wrap .card > h1 {
	display: block; margin: 22px 0 10px; padding: 0 0 6px;
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: bold;
	color: var(--aid-aur, #ffcc00); border-bottom: 1px solid rgba(255, 226, 178, 0.14);
}
#istanga .wrap .card > h1:first-child { margin-top: 4px; }
#istanga .wrap p { margin: 0 0 10px; font-size: 12.5px; line-height: 18px; color: var(--aid-text, #e6e0c8); }
#istanga .wrap .hint { font-size: 11px; line-height: 16px; color: var(--aid-text-stins, #97917a); margin: 5px 0 0; }
#istanga .wrap .field { margin: 0 0 12px; }
#istanga .wrap label { display: block; margin: 0 0 4px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--aid-text-stins, #97917a); }
#istanga .wrap input[type="text"], #istanga .wrap input[type="password"], #istanga .wrap input[type="email"] {
	width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px;
	border-radius: 8px; border: 1px solid rgba(255, 226, 178, 0.28); background: rgba(0, 0, 0, 0.45); color: #fff;
}
#istanga .wrap input:focus { outline: 0; border-color: var(--aid-aur, #ffcc00); box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25); }
#istanga .wrap button { width: auto; margin-top: 2px; }
#istanga .wrap button.secondary { color: var(--aid-text-stins, #97917a); --aid-btn-sus: #3a3a34; --aid-btn-mij: #232320; --aid-btn-jos: #131311; }
#istanga .wrap .msg { padding: 9px 12px; border-radius: 8px; font-size: 12.5px; margin: 0 0 12px; border-left: 3px solid; background: rgba(0, 0, 0, 0.3); }
#istanga .wrap .msg ul { margin: 0; padding-left: 16px; }
#istanga .wrap .msg-error { border-color: #ff6a58; color: #ffb0a0; }
#istanga .wrap .msg-ok { border-color: var(--aid-verde, #4caf50); color: #cdf0cf; }
#istanga .wrap .msg-info { border-color: var(--aid-aur, #ffcc00); color: var(--aid-text, #e6e0c8); }
#istanga .wrap .rows { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#istanga .wrap .rows th, #istanga .wrap .rows td { text-align: left; padding: 6px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: top; }
#istanga .wrap .rows th { color: var(--aid-text-stins, #97917a); font-weight: normal; white-space: nowrap; }
#istanga .wrap .rows td { color: var(--aid-text, #e6e0c8); }
#istanga .wrap .links { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#istanga .wrap a { color: var(--aid-aur, #ffcc00); }
#istanga .wrap .foot { text-align: center; font-size: 11px; color: var(--aid-text-stins, #97917a); margin: 14px 0 0; }
#istanga .wrap .foot.small { display: none; }
/* doi pasi: codurile de rezerva si secretul, care aveau culorile paginii de pergament */
#istanga .wrap pre, #istanga .wrap code { background: rgba(0, 0, 0, 0.45) !important; border-color: rgba(255, 226, 178, 0.28) !important; color: var(--aid-aur, #ffcc00) !important; }
#istanga .wrap svg[aria-label="Cod QR"] { display: block; }

/* ---------------------------------------------------- statisticile mele, wide */
#aidmare .aid-stat-antet { padding: 6px 8px 16px; }
#aidmare .aid-stat-nume { font-size: 26px; }
#aidmare .aid-stat-nume .aid-numar { min-width: 28px; height: 28px; font-size: 13px; }
#aidmare .aid-stat-sub { font-size: 13px; margin-top: 5px; }
#aidmare .aid-stat-loc { padding: 10px 26px; }
#aidmare .aid-stat-loc-nr { font-size: 34px; line-height: 36px; }
#aidmare .aid-stat-loc-et { font-size: 10px; }
#aidmare .aid-stat-tile { gap: 12px; margin: 0 4px 14px; }
#aidmare .aid-stat-tila { padding: 16px 8px 13px; gap: 4px; }
#aidmare .aid-stat-tila img { height: 30px; }
#aidmare .aid-stat-tila b { font-size: 24px; line-height: 28px; }
#aidmare .aid-stat-tila small { font-size: 10px; }
/* three across instead of two, and the three wide cards share the second row
   -- a full-width card per section left two thirds of every row empty */
/* start, not stretch: a short card (Experienta is four lines) stretched to the
   height of the tallest in its row is half a card of black */
#aidmare .aid-stat-grila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
#aidmare .aid-stat-insigne,
#aidmare .aid-stat-recomanda { grid-column: auto; }
#aidmare .aid-stat-runde { grid-column: 1 / -1; }
#aidmare .aid-stat-card { padding: 14px 16px 16px; }
#aidmare .aid-stat-card h3 { font-size: 12px; margin-bottom: 11px; }
#aidmare .aid-stat-rand { font-size: 13px; padding: 5px 0; }
#aidmare .aid-stat-xp-cap { font-size: 14px; }
#aidmare .aid-stat-bara { height: 14px; border-radius: 7px; }
#aidmare .aid-stat-mic { font-size: 11px; line-height: 16px; }
#aidmare .aid-stat-colectii { grid-template-columns: repeat(4, 1fr); gap: 8px; }
#aidmare .aid-stat-colectii b { font-size: 20px; }
#aidmare .aid-stat-raft { height: 56px; }
#aidmare .aid-stat-medalii { font-size: 12px; margin-bottom: 10px; }
#aidmare .aid-stat-grafic { max-width: 1000px; margin: 0 auto 6px; }
#aidmare .aid-stat-runde .aid-stat-stins:last-child { text-align: center; }

/* ------------------------------------------------------------ top 100, wide */
#aidmare .aid-top-antet { height: 116px; padding: 0 26px; gap: 20px; }
#aidmare .aid-top-trofeu { width: 76px; height: 76px; }
#aidmare .aid-top-titlu { font-size: 24px; }
/* SPUS DE DOUĂ ORI, ȘI RĂMÂNE AȘA -- DELIBERAT (18 septembrie 2026).
 *
 * Pe ecranul mare antetul scenei spune „Runda 182 · încheiată / Topul Final",
 * iar panoul cu trofeul le spune încă o dată, mai jos. Am încercat să ascund
 * supratitlul și titlul din panou, ca la premium.php unde descrierea paginii e
 * ascunsă fiindcă a urcat în antet -- și arată mai rău: rămâne o bandă verde
 * înaltă cu un trofeu și un singur rând subțire plutind în ea.
 *
 * Diferența față de premium: acolo ce urcă în antet e o fâșie funcțională
 * (creditele și două butoane), care nu mai are ce căuta jos. Aici panoul nu e o
 * fâșie, e un afiș -- razele și trofeul SUNT momentul -- iar un afiș care își
 * repetă titlul sub un antet sobru se citește ca un afiș, nu ca o greșeală.
 *
 * Ce era cu adevărat greșit până azi s-a reparat în altă parte: antetul scria
 * „Runda în curs · Top 100" peste un clasament înghețat. Contrazicerea era
 * problema; repetiția e doar o alegere, și asta e alegerea. */
#aidmare .aid-podium { gap: 18px; margin: 18px 6px 24px; }
/* the base rule caps the column at 176px for a 600px panel -- here it is the
   thing the eye lands on first, so it gets the room */
#aidmare .aid-podium-loc { max-width: 230px; padding: 14px 10px 0; gap: 6px; }
#aidmare .aid-medalie { width: 44px; height: 44px; font-size: 19px; }
#aidmare .aid-podium-nume { font-size: 17px; }
#aidmare .aid-podium-aur .aid-podium-nume { font-size: 24px; }
#aidmare .aid-podium-draci { font-size: 13px; }
#aidmare .aid-podium-treapta { height: 46px; }
#aidmare .aid-podium-aur .aid-podium-treapta { height: 96px; }
#aidmare .aid-podium-argint .aid-podium-treapta { height: 66px; }
#aidmare .aid-podium-bronz .aid-podium-treapta { height: 46px; }
/* border-spacing: 0 -- the theme's tables leave a hairline between cells, which
   is invisible at 600px and reads as a seam down the middle of every row at 860 */
#aidmare .aid-top-lista { max-width: 860px; margin: 0 auto; border-spacing: 0; }
#aidmare .aid-top-lista td { font-size: 14px; padding-top: 7px; padding-bottom: 7px; }
#aidmare .aid-top-lista .aid-t-loc { width: 64px; font-size: 15px; }
/* the name column takes the slack; without this the numbers column got it, and
   the scale bar (a percentage of its own cell) stretched across the row */
#aidmare .aid-top-lista .aid-t-nume { width: 100%; }
#aidmare .aid-top-lista .aid-t-nume a { font-size: 15px; }
#aidmare .aid-top-lista .aid-t-cifra { width: 210px; font-size: 15px; }

/* the podium reads as three people standing on three steps, so the step has to
   look like it is under their feet: the base rule's 6px gap is right in a
   600px panel and reads as a floating slab at twice the size */
#aidmare .aid-podium-treapta { margin-top: 2px; border-radius: 8px 8px 0 0; }
#aidmare .aid-podium-aur .aid-medalie { box-shadow: 0 0 0 2px var(--aid-med-intunecat), 0 0 0 3px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 204, 0, 0.45), inset 0 -2px 3px rgba(0, 0, 0, 0.35); }

@media (max-width: 900px) {
	#aidmare .aidm-antet-in { padding: 10px 14px; gap: 12px; }
	#aidmare .aidm-titlu { font-size: 20px; }
	#aidmare .aidm-sub { display: none; }
	#aidmare .aidm-scena { padding: 12px 12px 28px; }
	#aidmare .aid-stat-grila { grid-template-columns: minmax(0, 1fr); }
	#aidmare .aid-stat-runde { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { #aidmare { transition: none; } }

/* ================================= the buttons, sorted by what they are
 *
 * "ar trebui sa grupam butoanele de concursuri/jocuri... butonul statistici il
 *  punem langa Scrie-ne; butonul Jocuri il facem mare (ca Contul Meu) si il
 *  punem in dreapta caracterului, simetric cu butonul Aliantei de pe stanga.
 *  Butoanele Norocosul si Artefactul norocos le punem deasupra butonului
 *  Jocuri, pe bara top. Ar trebui sa le facem pe toate cu acelasi tint al
 *  iconului, golden-yellow." (9 Sept 2026)
 *
 * The port moves the markup; this gives the four one colour and hangs the games
 * button on the character card. */

/* ONE GOLD FOR THE WHOLE GROUP. Each of these used to carry its own hue from
 * the pass that first drew it -- green for the 24h summary, another green for
 * the lucky draw, orange for the games -- which read as four unrelated
 * controls. They are one family: the game outside the war.
 *
 * .aid-i-statistici is NOT in the list: that button went back to the minimap
 * ring on 9 Sept, where it keeps the ring's own colours. */
.aid-i-stats24,
.aid-i-concurs,
.aid-i-norocos,
.aid-i-jocuri { --aid-ic-culoare: #ffd84d; }

/* THE GAMES BUTTON, on the character card, mirroring the crest.
 *
 * The crest is 40x40 at (8, 8) in a 205-wide block, so its centre is 28 from
 * the left; the mirror of that centre is 177, which puts a 44px button's right
 * edge 6px from the block's right. Both sit clear of the ring: the medallion is
 * an ellipse 172x282 at (16, 10), and at y=28 it spans x 60..144. */
#blocpersonaj.aid-card .aid-bp-jocuri {
	left: auto !important; right: 6px !important; top: 6px !important;
	width: 44px; height: 44px; z-index: 4;
}
#blocpersonaj.aid-card .aid-bp-jocuri .aid-ic { display: block; }
#blocpersonaj.aid-card .aid-bp-jocuri img { width: 40px; height: 40px; display: block; }

/* THE DIE ROLLS, ONCE IN A WHILE.
 *
 * "Oare icon-ul Jocurilor, acel zar, poate sa se roteasca din cand in cand? sa
 *  atraga atentia?"
 *
 * It can, and the rule is that it must not become wallpaper: nine seconds of
 * stillness, then one turn, is a glance -- a die that spins all day is noise
 * the eye stops seeing by the second minute. The mask is what turns, not the
 * dish, so the button keeps sitting still under it. */
@keyframes aid-zar-rostogol {
	0%, 82%   { transform: rotate(0deg)   scale(1); }
	88%       { transform: rotate(190deg) scale(1.10); }
	94%       { transform: rotate(340deg) scale(1.06); }
	100%      { transform: rotate(360deg) scale(1); }
}
.aid-i-jocuri::before { animation: aid-zar-rostogol 9s ease-in-out infinite; transform-origin: 50% 50%; }
.aid-i-jocuri:hover::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .aid-i-jocuri::before { animation: none; } }

/* the potion you already drank, on its own page: how long it has left, and the
   clock time it runs out. Sits where the Activeaza button would be, because it
   answers the question that button raises -- "have I got one going already?" */
#istanga .aid-obiect-activa {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
	margin: 8px 0 0; padding: 8px 10px;
	border-left: 3px solid #6fc060;
	border-radius: 0 6px 6px 0;
	background: rgba(111, 192, 96, 0.10);
	font-size: 11px;
}
#istanga .aid-obiect-activa-cap { font-weight: bold; color: #b8e8a8; }
#istanga .aid-obiect-activa-timp {
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	font-size: 14px; color: #fff;
}
#istanga .aid-obiect-activa-pana { color: var(--aid-text-stins, #97917a); }
/* The button that stops it, on the same green plate that says it is running --
   the two belong together, and the plate is the only place on the page where
   the potion is spoken of as active. Pushed to the right end of the flex row so
   it is not read as part of the sentence, and quiet: it takes something away,
   so it should not look like the thing to press. */
#istanga .aid-obiect-opreste {
	margin-left: auto;
	align-self: center;
	background: rgba(0, 0, 0, 0.25);
	border-color: rgba(255, 226, 178, 0.22);
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-obiect-opreste:hover {
	background: rgba(190, 60, 40, 0.28);
	border-color: rgba(240, 160, 138, 0.55);
	color: #f0a08a;
}

/* the garage's buy button on a line of its own (see the note in garaj.php):
   the slot bar and the count now have the whole width, and nothing overflows */
#istanga .aid-garaj-antet { flex-wrap: wrap; }
#istanga .aid-garaj-locuri { min-width: 0; }
#istanga .aid-garaj-bara { flex-wrap: wrap; }
#istanga .aid-garaj-actiune { margin: 0 8px 10px; padding: 0; }

/* a new record, on the player's own result card. The chat hears about it from
   the server (Sudoku::anunta); this is so the person who set it does not have
   to read the chat to find out. */
#istanga .aid-sd-rez-record {
	margin-top: 8px; padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255, 204, 0, 0.14);
	box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.35);
	font-size: 12px; font-weight: bold;
	color: var(--aid-aur, #ffcc00);
}
#istanga .aid-sd-salvat small { display: block; margin-top: 3px; color: var(--aid-text-stins, #97917a); font-size: 10px; line-height: 14px; }

/* ================================================ the quantity box
 *
 * "ar trebui stilizate acele sageti si inputul" (9 Sept 2026)
 *
 * The browser's spinner is two grey triangles about eight pixels tall, drawn
 * for a white page, and on this ground they are invisible as well as unhittable.
 * Ours are the game's own buttons, one on each side of the number, at a size a
 * finger can find; the native spinner is switched off so there are not two.
 * js/aidcant.js keeps the value between min and max whichever one is used. */
#istanga .aid-numarator {
	display: inline-flex; align-items: stretch;
	border-radius: 8px; overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 226, 178, 0.08);
	background: rgba(0, 0, 0, 0.4);
}
#istanga .aid-numarator input[type="number"] {
	width: 62px; margin: 0; padding: 0 4px;
	border: 0; border-radius: 0;
	background: rgba(0, 0, 0, 0.45);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
	font: bold 17px/1 var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	color: #fff; text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
#istanga .aid-numarator input[type="number"]::-webkit-outer-spin-button,
#istanga .aid-numarator input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#istanga .aid-numarator input[type="number"]:focus {
	outline: none;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--aid-aur-stins, #c69e0c);
}
/* The theme makes every button in the panel a gold pill with 26px of side
   padding and a 999px radius. These two are not pills: they are the two ends of
   one control, square against the number between them. Named twice so this
   beats `#istanga button` on specificity rather than with !important. */
#istanga .aid-numarator .aid-numarator-b {
	flex: 0 0 34px; width: 34px; min-width: 34px; height: auto;
	margin: 0; padding: 0; border: 0; border-radius: 0;
	letter-spacing: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	background-color: transparent;
	background: linear-gradient(180deg, var(--aid-buton-sus, #435234) 0%, var(--aid-buton-mij, #1e2917) 52%, var(--aid-buton-jos, #0a0f06) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -2px 4px rgba(0, 0, 0, 0.45);
	color: var(--aid-aur, #ffcc00);
	font: bold 18px/1 Arial, Helvetica, sans-serif;
	cursor: pointer; user-select: none;
	transition: filter 110ms linear;
}
#istanga .aid-numarator .aid-numarator-b:hover:not(:disabled) { filter: brightness(1.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 4px rgba(0, 0, 0, 0.45); }
#istanga .aid-numarator .aid-numarator-b:active:not(:disabled) { box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7); transform: none; }
/* the ceiling is visible, not just enforced: the + goes out when there is no
   more room, which is the whole point of the change */
#istanga .aid-numarator .aid-numarator-b:disabled { color: rgba(255, 204, 0, 0.22); cursor: default; filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

#istanga .aid-obiect-numar {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
	margin: 0 0 10px; font-size: 12px;
}
#istanga .aid-obiect-numar-et { color: var(--aid-text-stins, #97917a); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
#istanga .aid-obiect-numar-max { color: var(--aid-text-stins, #97917a); font-size: 11px; }
#istanga .aid-obiect-numar-max b { color: var(--aid-text, #e6e0c8); font-family: var(--aid-font-cifre, 'Courier New', monospace); }
#istanga .aid-numarator-plin .aid-numarator-b[data-aid-pas="1"] { color: rgba(255, 204, 0, 0.22); }

/* =========================== Premium, on the whole screen (js/aidmare.js)
 *
 * "consider ca e bine si in Premium sa avem fullscreen, pt ca de acolo ne
 *  castigam banii pentru mentinerea jocului. Vezi ce poti face cu aceasta
 *  pagina sa arate fain fullscreen si sa invite jucatorul sa cumpere obiectele
 *  si creditele. Poate un fundal mai creativ si animat (usor) ca la Arcada
 *  Dracilor? Dracusorul nostru, de asemenea, sus, cu descrierea din pagina?"
 *  (9 Sept 2026)
 *
 * The one screen in this overlay that moves. The arcade throws embers upward
 * because it is a fairground; this is a counting house, so what rises is gold
 * dust -- slower, fewer, smaller, and warm rather than orange. The mascot comes
 * with it, breathing, with the page's own opening line beside him (the page's
 * copy of that line is hidden below: once on a screen is enough).
 *
 * "usor" is the operative word. Twenty-two motes over sixteen seconds, no
 * flicker, nothing near the reading area's contrast. */
#aidmare .aidm-praf { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .4s ease; }
#aidmare.aidm-cu-praf .aidm-praf { opacity: 1; }
#aidmare .aidm-praf i {
	position: absolute; left: var(--x); bottom: -12px;
	width: 3px; height: 3px; border-radius: 50%;
	background: #ffd98a;
	box-shadow: 0 0 7px 2px rgba(255, 200, 80, 0.45);
	opacity: 0; transform: scale(var(--s));
	animation: aidm-praf var(--d) linear infinite; animation-delay: var(--t);
}
@keyframes aidm-praf {
	0%   { transform: translate(0, 0) scale(var(--s)); opacity: 0; }
	12%  { opacity: .75; }
	55%  { transform: translate(10px, -55vh) scale(var(--s)); opacity: .45; }
	100% { transform: translate(-8px, -105vh) scale(calc(var(--s) * .35)); opacity: 0; }
}
/* the mascot, in the header, only where a screen asks for him */
#aidmare .aidm-drac {
	width: 76px; height: auto; flex: 0 0 auto; align-self: center;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 18px rgba(255, 190, 60, 0.30));
	animation: aidm-respira 4.5s ease-in-out infinite;
}
@keyframes aidm-respira { 50% { transform: translateY(-5px) rotate(-2deg); } }

/* a warmer ground than the trophy room's, and a shaft with more gold in it */
#aidmare[data-ecran="premium"],
#aidmare[data-ecran="cumpara"],
#aidmare[data-ecran="refer"] {
	background: linear-gradient(180deg, #120d05 0%, #171107 45%, #0b0804 100%);
}
#aidmare[data-ecran="premium"] .aidm-fundal,
#aidmare[data-ecran="cumpara"] .aidm-fundal,
#aidmare[data-ecran="refer"] .aidm-fundal {
	background:
		radial-gradient(ellipse 65% 40% at 50% -4%, rgba(255, 200, 70, 0.17) 0%, rgba(255, 200, 70, 0) 70%),
		radial-gradient(ellipse 120% 70% at 50% 108%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%);
}
/* THE TITLE IS WHITE-INTO-YELLOW, not struck metal.
 *
 * The arcade's gradient runs down through #8a5f12 -- a dark brown -- which
 * works at its 34px and reads as a black word with a gold rim at this one's 27:
 * "titlul Premium e scris cu negru cu shadow gold (negru e prea discret,
 * trebuie tot alb-galben)" (9 Sept 2026). No dark stop at all now, and the
 * black drop-shadow drops to a thin seat under the letters instead of a
 * hard 2px edge that was doing most of the darkening. */
#aidmare[data-ecran="premium"] .aidm-titlu,
#aidmare[data-ecran="cumpara"] .aidm-titlu,
#aidmare[data-ecran="refer"] .aidm-titlu {
	background: linear-gradient(180deg, #ffffff 0%, #fff3bd 32%, #ffe066 68%, #ffd34d 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	/* AND THE TEXT-SHADOW HAS TO GO, or the gradient never shows.
	   The base .aidm-titlu carries `text-shadow: 0 1px 0 rgba(0,0,0,.9)` for
	   ordinary gold letters. With background-clip:text the paint order is
	   background, then shadow, then text -- so the black shadow lands ON TOP of
	   the clipped gradient, offset one pixel, and covers all of every letter but
	   a one-pixel rim. That is precisely the "negru cu shadow gold" reported:
	   the gold he could see was the sliver the shadow missed. Depth comes from
	   the drop-shadow filter instead, which paints outside the glyph. */
	text-shadow: none;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 16px rgba(255, 200, 70, 0.40));
}
#aidmare[data-ecran="premium"] .aidm-sub,
#aidmare[data-ecran="cumpara"] .aidm-sub,
#aidmare[data-ecran="refer"] .aidm-sub { max-width: 62ch; color: #cdbfa0; }

/* THE PAGE ITSELF, WIDE.
 *
 * Said twice on one screen is a mistake: the intro paragraph is now the
 * header's subtitle, so the page's own copy goes. */
#aidmare[data-ecran="premium"] #istanga .aid-intro,
#aidmare[data-ecran="refer"] #istanga .aid-intro { display: none; }

/* THE CREDITS AND THE TWO BUTTONS, IN THE HEADER.
 *
 * js/aidmare.js MOVES the page's own strip up here (see `ridica`), so these
 * rules are written against .aidm-ridicat and not against #istanga -- the node
 * is no longer inside the panel, and the panel's rules stopped reaching it the
 * moment it left. It stays put while the shop scrolls under it, which is the
 * whole point: this is the number a player checks before every purchase. */
#aidmare .aidm-ridicat { flex: 0 0 auto; }
#aidmare .aidm-ridicat[hidden] { display: none; }
#aidmare .aidm-ridicat .aid-premium-antet {
	display: flex; align-items: center; gap: 18px;
	margin: 0; padding: 8px 18px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(255, 204, 0, 0.12), rgba(0, 0, 0, 0.30));
	box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.45);
}
#aidmare .aidm-ridicat .aid-premium-credite { display: flex; flex-direction: column; gap: 0; line-height: 1; }
#aidmare .aidm-ridicat .aid-premium-credite-eticheta {
	font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--aid-text-stins, #97917a);
}
#aidmare .aidm-ridicat .aid-premium-credite-nr {
	font: bold 30px/32px var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	color: var(--aid-aur, #ffcc00);
	text-shadow: 0 0 14px rgba(255, 204, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.9);
}
#aidmare .aidm-ridicat .aid-premium-actiuni { display: flex; gap: 8px; }
#aidmare .aidm-ridicat .aid-premium-buton {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 18px; font-size: 12px; text-decoration: none;
}
#aidmare .aidm-ridicat .aid-premium-buton svg { width: 15px; height: 15px; }
#aidmare .aidm-ridicat .aid-premium-cumpara { color: #fff3bd; box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 12px -2px rgba(255, 204, 0, 0.55); }
/* the header is a long line now: the description gives way before the money does */
@media (max-width: 1400px) { #aidmare[data-ecran="premium"] .aidm-sub { display: none; } }

/* the tab rail, at a size that reads as navigation rather than as small print */
#aidmare[data-ecran="premium"] #istanga .tabdiv { padding: 0 2px; margin-bottom: 16px; }
#aidmare[data-ecran="premium"] #istanga .tabdiv a { font-size: 13px; padding: 9px 20px; }

/* THE SHOPS, IN COLUMNS. Each `.tart` is one thing for sale; stacked one per
   row they were a 1180px-wide list of short cards with a lot of nothing beside
   them. Three across on a wide screen, two on a medium one -- a shop window
   rather than a receipt. */
/* NOT a grid on the .tabul, and that is deliberate: premium.php's tabactiv()
   shows and hides the panels by writing `style.display` on them, and an inline
   style beats any selector. `display: grid !important` would have won -- and
   also un-hidden the five closed tabs. So the cards do the arranging: an
   inline-table wraps like a word, which is exactly the behaviour wanted, and
   the parent is left alone to be shown and hidden as it always was. */
/* TWO, NOT THREE. Three fitted, but "pe 3 coloane se inghesuie prea mult textul
   si se inalta cardul prea mult" -- each card holds a picture, a paragraph of
   what the thing does and a price, and at a third of 1180 the paragraph wrapped
   into a column of four-word lines and pushed every card taller. Half the width
   is a card you read across. */
@media (min-width: 1000px) {
	#aidmare[data-ecran="premium"] #istanga .tabul { font-size: 0; }   /* no gaps between inline boxes */
	#aidmare[data-ecran="premium"] #istanga .tabul > table.tart {
		display: inline-table; vertical-align: top; font-size: 12px;
		width: calc(50% - 14px); margin: 0 7px 14px;
	}
}
#aidmare[data-ecran="premium"] #istanga .tart:hover { outline-color: rgba(255, 204, 0, 0.75); }

/* ===================================================== cumpara.php, full screen
 *
 * The till. Reached from a full-screen Premium, so opening it in the 600px
 * panel meant the room the player was standing in collapsed at the exact
 * moment they decided to spend money -- and seven price cards became a column
 * three of them tall.
 *
 * THE PAGE'S OWN TITLE GOES. It is an <h2>, not the <h1> the shared rule
 * hides, and it says the same two words the header says above it.
 *
 * ONLY THE TOP-LEVEL ONE, and both spellings of where it lands -- bare in the
 * panel, or inside Fragment's wrapper -- exactly like the h1 rule above. A
 * bare `#istanga h2` also hides the billing box's own heading ("Date de
 * facturare pentru card"), which is the LABEL ON ITS TOGGLE: the box collapsed
 * to an empty dark bar with nothing to click. */
#aidmare[data-ecran="cumpara"] #istanga > h2,
#aidmare[data-ecran="cumpara"] #istanga > [data-aid-fragment] > h2 { display: none; }

/* THE FOUR FACTS, ON ONE LINE, STUCK TO THE TOP OF THE SHOP.
 *
 * They were lifted into the header first (`ridica`, the way premium.php's
 * credit strip is) and that was wrong for a measurable reason: premium's strip
 * is a number and two buttons, this one is four sentences, and as one no-wrap
 * row it took 944 of the header's 1064 pixels. `.aidm-titluri` carries
 * `min-width: 0`, so it collapsed to zero -- eyebrow three letters a line,
 * title gone, description running down the screen one word at a time.
 *
 * So the strip stays where the page put it and sticks instead. `position:
 * sticky` resolves against .aidm-scena, the one scrolling box on this screen,
 * which is why the panel's `overflow: visible !important` matters here: the
 * reference price is still on screen at the 500-lei card, which is the whole
 * reason it was worth lifting.
 *
 * `top: -18px` cancels the scene's own top padding, so the strip lands flush
 * under the header rather than 18px below where it stops. */
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-antet {
	position: sticky; top: -18px; z-index: 3;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 6px 18px;
	margin: 0 0 16px; padding: 9px 18px;
	border-radius: 999px; border-left: 0;
	/* OPAQUE. It is a sticky bar and the shop scrolls under it: at 94% the
	   PREMIUM note came through the letters. */
	background: linear-gradient(180deg, rgba(255, 204, 0, 0.12), rgba(255, 204, 0, 0)), #16110a;
	box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.26), 0 8px 18px rgba(0, 0, 0, 0.55);
	font-size: 12px; line-height: 17px;
}
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-antet p { margin: 0; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-referinta { font-size: 13px; }

/* THE SEVEN PACKAGES, THREE ACROSS.
 *
 * The panel's `auto-fit, minmax(150px, 1fr)` is right at 560px and wrong at
 * 1020: it would lay six of the seven in one row and leave the 500-lei card
 * alone under the note that belongs to the 200. Three across gives 10/25/50,
 * 75/100/200, then the PREMIUM note, then the 500 on its own line -- which is
 * the shape of the offer, not an accident of the width. */
#aidmare[data-ecran="cumpara"] #istanga table.aid-cump-pachete > tbody {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
#aidmare[data-ecran="cumpara"] #istanga tr.aid-cump-pachet { padding: 16px 16px 18px; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-suma { font-size: 32px; line-height: 36px; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-lei { font-size: 13px; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-credite { font-size: 13px; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-credite strong { font-size: 16px; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-bonus { font-size: 12px; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-bonus strong { font-size: 14px; }
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-nota { font-size: 12px; line-height: 18px; }
/* the billing box is a form, not a shop window: it does not want 1020px of
   line length any more than a letter does */
#aidmare[data-ecran="cumpara"] #istanga .aid-cump-facturare { max-width: 640px; margin-inline: auto; }
@media (max-width: 860px) {
	#aidmare[data-ecran="cumpara"] #istanga table.aid-cump-pachete > tbody {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}
/* Si aici, o coloana sub 520px: regula de mai sus e scrisa pe
   `#aidmare[data-ecran]`, deci bate regula generala a grilei oricat de jos ar
   sta aceea in fisier. Doua reguli pentru acelasi lucru, fiindca specificitatea
   nu tine cont de ordine. */
@media (max-width: 520px) {
	#aidmare[data-ecran="cumpara"] #istanga table.aid-cump-pachete > tbody {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	#aidmare .aidm-praf i, #aidmare .aidm-drac { animation: none; }
}

/* ============================ the top bar: the name narrower, the figures centred
 *
 * "baratop sus, class=titluserver ar trebui sa fie mai mic la width: 68px zic ca
 *  e suficient. asa, sta si centrat, deasupra blocpersonaj. plus, avem mai mult
 *  spatiu pentru zona productie, pe care o putem centra deasupra headerului, ca
 *  sa arate fain" (9 Sept 2026)
 *
 * css.css gives .titluserver 128px, which was right when it sat between four
 * painted icons and nothing else. It holds one short word -- the server's name
 * -- and the sixty pixels it does not need are sixty the production strip does:
 * the strip is the row of five hourly figures, and it had been hugging the left
 * edge since the bar ran out of room.
 *
 * At 68 the name lands over the character card, and the figures have enough
 * band left to sit in the middle of the bar rather than shoved against the
 * buttons. */
#baratop.aid-bara-sus > .titluserver {
	width: 68px;
	box-sizing: border-box;
}
/* CENTRED ON THE BAR, NOT IN WHAT IS LEFT OF IT.
 *
 * The first attempt gave the strip the freed width and put `margin: 0 auto` on
 * its table. It centres in the wrong box: the strip is a float, so it starts
 * where the buttons end (269 of 1024) and ends before the search box (837), and
 * the middle of THAT band is 23px left of the middle of the bar -- which the
 * mascot's medallion sits on, right below. Measured in the page rather than
 * guessed.
 *
 * Taken out of the float flow and pinned to the bar's own centre instead. There
 * is room: the buttons end at 269, the figures run 293..731, the search box
 * starts at 837. */
#baratop.aid-bara-sus { position: relative; }
#baratop.aid-bara-sus > div[style*="width:600px"] {
	position: absolute; left: 50%; top: 0; transform: translateX(-50%);
	width: auto !important; max-width: none; min-width: 0;
}
#baratop.aid-bara-sus > div[style*="width:600px"] > table { margin: 0; }

/* ------------------------------------------------- the minimap in its frame
 *
 * "verdele hartii iese din frame, si in dreapta si jos."
 *
 * The map grid, #hartamica, is 152x122 and used to sit at 33,51 inside a
 * #blocharta that is 205x216 -- so it ran to 185 on the right while the frame's
 * window stopped at 176, and it ended exactly on the bottom edge. Everything
 * looked pushed down and to the right, because it was.
 *
 * Two earlier attempts scaled it down with a transform to fit the window the
 * frame already drew. Both worked and both were wrong: the map is what people
 * read, and shrinking it to fit a decoration is the wrong way round. "nu mai
 * fa transform. centreaza harta pe blocharta. schimba grafica de dedesupt."
 *
 * So the map is centred and the FRAME moved to it. Centred means 26.5,47 --
 * (205-152)/2 and (216-122)/2 -- which lands the grid's centre on 102.5,108,
 * the exact centre of every circle in minimap.svg. The window drawn in that
 * file moved with it: its three rects were 28,46,148x127 and are now
 * 26.5,47,152x122, the map's own size. #hartamicadiv carries the offsets, so
 * the grid keeps its full resolution and no transform touches hit testing.
 *
 *   padding-left 27 -> 20.5   (6 + 20.5 = 26.5)
 *   margin-top    26 -> 22    (25 + 22   = 47) */
#blocharta #hartamicadiv { margin-top: 22px; padding-left: 20.5px; }

/* ------------------------------------------ two buttons follow the new window
 *
 * The plate's window grew and moved when the map was centred on #blocharta, so
 * the two controls that sit against its right edge moved with it. The right
 * arrow is positioned in the CSS above (174 -> 178); Statistici carries its
 * position inline in main.php -- `left:173px` written by the legacy page -- so
 * it is moved here rather than through a port fix, which is one guess fewer
 * and keeps both numbers in the same place as the arrows they line up with. */
#blocharta div:has(> .aid-i-statistici) { left: 182px !important; }

/* ================================== ce ai cumparat, si o sarbatoare scurta
 *
 * "un popup de confirmare cu animatie (sa nu fie aceeasi animatie, gen coins,
 *  confetti scurt...)  Felicitări! / Tocmai ți-au luat 1 artefact. / [icon]
 *  Lumina Kimerei / OK"
 *
 * Patru animatii, alese dupa FELUL lucrului cumparat, nu dupa gustul paginii
 * care cheama: bani si credite fac monede, un artefact face scantei, o haina
 * face confetti, o masina sau o armata vin sub stele. js/aiddialog.js tine
 * tabelul; aici sunt doar desenele.
 *
 * Toate dureaza sub o secunda si jumatate si ruleaza O SINGURA DATA. Se joaca
 * in timp ce cineva citeste doua randuri si intinde mana spre buton -- ce tine
 * mai mult decat atat sta in drum. Si niciuna nu bucla, deci nu ramane nimic
 * invartindu-se in spatele unui dialog lasat deschis.
 *
 * Facute ca jarul din Arcada si praful din ecranele mari: span-uri simple, o
 * animatie CSS, si intamplarea trimisa ca proprietati. Fara canvas, fara
 * biblioteca, si nimic de curatat in afara de nod. */
.aid-dialog-obiect {
	display: flex; align-items: center; gap: 10px;
	margin-top: 12px; padding: 8px 10px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.42);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.16);
}
.aid-dialog-obiect-poza {
	flex: 0 0 auto; width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c);
}
.aid-dialog-obiect-poza img { max-width: 34px; max-height: 34px; width: auto; height: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
.aid-dialog-obiect-nume { font-size: 13px; font-weight: bold; color: var(--aid-aur, #ffcc00); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.aid-dialog-obiect-sub { margin-left: auto; font-size: 10.5px; color: var(--aid-text-stins, #97917a); }

/* the gold ring warms up when the news is good */
.aid-dialog-bucurie {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.9),
		inset 0 0 0 2px var(--aid-aur, #ffcc00),
		inset 0 1px 0 3px rgba(255, 243, 189, 0.26),
		0 18px 48px rgba(0, 0, 0, 0.75),
		0 0 32px -6px rgba(255, 204, 0, 0.35);
}

.aid-dialog-sarbatoare { position: absolute; inset: 0; overflow: visible; pointer-events: none; z-index: 2; }
.aid-dialog-sarbatoare i { position: absolute; display: block; }

/* scantei -- artefacte, licori, elemente: magia iese din obiect */
.aid-srb-scantei i {
	left: 50%; top: 46%; width: 2px; height: 13px; margin: -7px 0 0 -1px;
	border-radius: 1px;
	background: linear-gradient(180deg, #fff6d0 0%, rgba(255, 204, 0, 0) 100%);
	animation: aid-srb-scanteie var(--d) cubic-bezier(.15, .7, .3, 1) var(--t) 1 both;
}
@keyframes aid-srb-scanteie {
	0%   { opacity: 0; transform: rotate(var(--u)) translateY(0) scale(.5); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--u)) translateY(calc(var(--r) * -1)) scale(var(--s)); }
}

/* monede -- bani si credite: sar de jos si cad inapoi */
.aid-srb-monede i {
	left: var(--x); bottom: 16px; width: 13px; height: 13px; margin-left: -7px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #fff2b0 0 18%, #ffcc00 42%, #a9790a 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	animation: aid-srb-moneda 1s cubic-bezier(.25, .75, .45, 1) var(--t) 1 both;
}
@keyframes aid-srb-moneda {
	0%   { opacity: 0; transform: translateY(0) scale(.5); }
	14%  { opacity: 1; }
	46%  { transform: translateY(calc(var(--r) * -1.4)) scale(var(--s)); }
	100% { opacity: 0; transform: translateY(calc(var(--r) * -0.2)) scale(var(--s)); }
}

/* confetti -- haine si accesorii: o petrecere mica */
.aid-srb-confetti i {
	left: var(--x); top: -10px; width: 7px; height: 10px;
	background: var(--c, #ffcc00);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	animation: aid-srb-confeti calc(var(--d) + .55s) linear var(--t) 1 both;
}
@keyframes aid-srb-confeti {
	0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
	12%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(165px) rotate(var(--rot, 320deg)); }
}

/* stele -- masini, draci, preoti: ceva a ajuns, si se vede */
.aid-srb-stele i {
	left: var(--x); top: var(--y); width: 15px; height: 15px; margin: -8px 0 0 -8px;
	background: #fff6d0;
	clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
	filter: drop-shadow(0 0 4px rgba(255, 204, 0, 0.8));
	animation: aid-srb-stea calc(var(--d) + .25s) ease-out var(--t) 1 both;
}
@keyframes aid-srb-stea {
	0%   { opacity: 0; transform: scale(.15) rotate(0deg); }
	45%  { opacity: 1; transform: scale(var(--s)) rotate(40deg); }
	100% { opacity: 0; transform: scale(.35) rotate(80deg); }
}

@media (prefers-reduced-motion: reduce) {
	.aid-dialog-sarbatoare { display: none; }
}

/* ------------------------------------------------------- se incarca...
 *
 * The word an emptied panel shows while the page it is about to hold is on
 * its way. The map window had one of these from the start
 * (.aidharta-fereastra-astept); the three full screens now empty the panel on
 * the way IN as well as on the way out, so they need the same. */
.aid-astept {
	padding: 48px 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--aid-text-stins, #97917a);
	animation: aid-astept-pulsa 1.1s ease-in-out infinite;
}
@keyframes aid-astept-pulsa { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aid-astept { animation: none; } }

/* The parking got a wrapper so a newly bought car can be swapped in without a
 * reload (src/Support/Oras.php). It must not change how the bays are drawn:
 * absolute, filling the layer, and NO z-index -- a positioned box without one
 * opens no stacking context, so each car keeps competing with the buildings on
 * its own depth, exactly as when the divs were direct children. */
#aid-oras #aid-parcare { position: absolute; inset: 0; }

/* ==================================================== the shelves, redealt
 *
 * 10 September 2026. "acum mi-am dat seama ca zona noastra de potiuni,
 * blocpotiuni, e depasita. eu am tot adaugat potiuni, dar acolo incap 8."
 *
 * Twenty-four potions exist. The shelf beside the chat drew eight and hid the
 * rest behind a `+` that opened a pop-out over the town -- "a fost un fix
 * temporar", and it was. So three blocks swap places (bin/port-legacy.php does
 * the markup; this is what they look like):
 *
 *   beside the chat, 320   ->  the magic ELEMENTS, six of them in eight slots
 *   the wide strip, 852    ->  the POTIONS, all 24, one slot each
 *   the wide strip, 164    ->  the ACTIVE potions, four of them and a +
 *
 * .aid-raft is the shelf itself, and it is deliberately the artefact shelf's
 * geometry rather than a new one: a 30px tile, a niche of the same size where
 * you hold none, floats and not flex. The one difference is the pitch -- 35
 * instead of 36 -- and it is not a taste: 24 slots at 36 want 864 and the strip
 * has 1024 to divide between the shelf and the active panel. At 35 the shelf is
 * 840 and the four active potions fit in what is left. */
/* No bottom padding: the tiles carry a 4px bottom margin of their own, and the
   panels these sit in are 64 and 66 tall against a 22px title bar -- two pixels
   either way is the difference between a shelf inside its frame and one whose
   last row crosses the bottom border. */
.aid-raft { padding: 4px 0 0 0; overflow: hidden; }
.aid-raft > div {
	float: left; position: relative;
	width: 30px; height: 30px;
	margin: 0 0 4px 5px; padding: 0;
	border-radius: var(--aid-raza);
}
.aid-raft > div > img { display: block; width: 30px; height: 30px; border-radius: var(--aid-raza); }
.aid-raft > div[onclick], .aid-raft > div[onClick] { cursor: pointer; }
/* the count, in the corner. Same plate as the artefact shelf's, which is what
   the eye is already reading two rows further down. */
.aid-raft .aid-raft-nr {
	position: absolute; right: -2px; bottom: -1px;
	padding: 1px 3px; border-radius: 3px;
	background: #0F2D0D; color: var(--aid-aur, #FFCC00);
	font: bold 8px/10px Arial, Helvetica, sans-serif;
}
/* Tile-ul se aprinde la hover ca orice lucru pe care se poate da click. Un
   `box-shadow` dreptunghiular in jurul unei rame octogonale arata ca o cutie
   pusa peste un desen, deci e `drop-shadow`: urmeaza conturul. */
.aid-raft > div:hover > .aid-rama,
#boxartefacte > div:hover > .aid-rama { filter: drop-shadow(0 0 4px rgba(255, 190, 30, 0.6)); }
/* „pune te rog si mouse cursor hand la onmouseover" -- pe rama, care acopera
   tot cardul; pastila are `pointer-events: none`, deci nu intrerupe nici
   cursorul, nici click-ul. */
.aid-raft .aid-rama,
#boxartefacte .aid-rama { cursor: pointer; }
.aid-raft > div:hover > img { box-shadow: 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 8px rgba(255, 190, 30, 0.35); }
/* A niche carries its own `float: left; margin: 0 0 4px 6px` -- it has to, it is
   used bare on the artefact shelf. Only the margin is restated here, for the
   35px pitch. NOT `float: none`: `.aid-raft .aid-nisa-goala` is two classes and
   beats `.aid-raft > div`, so writing it here took the float off every niche and
   the shelf became a column -- twenty-four rows of one, running off the page. */
.aid-raft .aid-nisa-goala { margin: 0 0 4px 5px; }

/* THE THREE PANELS. Widths first, because they are the whole argument:
   852 + 8 + 164 = 1024, which is the strip. */
/* THE NUMBERS, AFTER LOOKING AT IT (10 Sept 2026, second pass).
 *
 * "la blocpotiuni fa top:27px height:71px -- se misca un pic mai sus si adauga
 *  un pic de spatiu sub cardurile potiunilor", and the active panel matches it
 * so the two read as one line.
 *
 * NOTHING ABOUT THE BACKGROUND HERE. defaultcss2.css painted #potiuniactive a
 * flat `#273221` from the days when it was a bare strip, and being an id in a
 * sheet loaded after this one it showed round the rim of the panel's own plate.
 * The first try was `background: none` in this file, which beat both fills and
 * left the panel with no background at all. The declaration is deleted from
 * defaultcss2.css instead (bin/port-legacy.php, $assetFixes) -- the fix belongs
 * where the wrong rule is. */
#blocelemente { position: relative; height: 68px; width: 306px; margin-left: 8px; clear: both; }
/* DOUA RANDURI (26 septembrie 2026). „Dupa introducerea noilor potiuni, am sarit
 * randul in blocpotiuni :) Cred ca ar trebui sa dam mai jos cu un rand, sa fie
 * pe 2. mutat bloc artefacte si ce e mai jos, ca sa faca loc."
 *
 * 32 de potiuni la pasul de 35 cer 1120 -- nu mai incap pe un rand de 852 (24
 * incapeau la fix). Deci doua randuri, ca la artefacte: 24 pe rand, primul plin,
 * al doilea se umple pe masura ce se adauga potiuni (48 de locuri); panoul
 * Active: opt pe doua randuri de patru (140 in 164, centrat). Un rand de placute
 * e 34 (30 + 4 dedesubt), asa ca ambele panouri cresc de la 71 la 105, #bloce
 * de la 240 la 274 si artefactele coboara cu aceiasi 34 -- tot ce e sub ele
 * coboara la fel, iar fundalul (oras.jpg) a fost prelungit in jos ca sa aiba
 * pe ce sa stea (randat din nou la 2000x1700: .plan/blender/fundal_gol_1700.py). */
#bloce #blocpotiuni { position: absolute; left: 0; top: 27px; width: 852px; height: 105px; }
#bloce #potiuniactive { position: absolute; left: 860px; top: 27px; width: 164px; height: 105px; }
/* Raftul de potiuni NU e centrat, ci ca la artefacte: 24 pe rand, primul rand
   plin, al doilea se umple una cate una pe masura ce se adauga potiuni
   („sa pot adauga cate 1, 2 mai incolo … ca la artefacte"). 48 de locuri pe
   doua randuri; a 49-a ar cere al treilea rand (+34 px, fundalul are loc). */
#bloce #potiuniactive .aid-raft { width: 140px; margin: 0 auto; }
#blocelemente > h5, #bloce #blocpotiuni > h5, #bloce #potiuniactive > h5 { margin-bottom: 2px; }
/* the strip that holds them is 34px taller than the one it replaces -- a title
   bar and a row of niches where there was one bare row of icons; and 34 more
   since the potions took two rows */
#bloce { height: 274px; }

/* THE CHAT ROW GETS ITS FOUR PIXELS BACK, AND THE COLUMN LINES UP.
 *
 * #blocelemente now starts eight pixels in and stops at 296, which is exactly
 * where Armatele Tale and Armatele Lor start and stop above it -- the three
 * panels in that column are one edge now.
 *
 * That doubled the ground between the chat and them: 8 of #blocporumbel's
 * transparent right border plus 8 of the panels' margin. "il mai putem taia la
 * jumatate prelungind blocporumbel."
 *
 * AND IT IS THE BORDER THAT GOES, NOT THE WIDTH -- the note further up this
 * file says why: #bloclangaporumbel floats straight after #blocporumbel, so a
 * wider box would push Bonusuri and the whole right column eight pixels right
 * and the gap would come back. The border is inside the 650, so the chat's
 * fill grows into it and nothing moves.
 *
 * The heights: #blocd has been 219 all along while the two panels in it were
 * 215, so they were four pixels short of their own band. */
#blocporumbel.aid-panou { border-right-width: 0; }
/* 640 = the chat's 636 plus the 4px border on the left. With the JPEG's width
   and its ten pixels of left padding gone from defaultcss2.css, the panel is
   exactly its contents. */
#blocporumbel { width: 640px; height: 219px; padding: 0; }
/* AND THE COLUMN BESIDE IT KEEPS ITS PLACE. #blocporumbel ends at 1083 now
   instead of 1093, so the ten it gave up come back as a margin here -- the
   right-hand column starts where it always did and the alignment above holds.
   314 and not 310: 8 + 149 + 8 + 149 is 314, and at 310 Armatele Lor dropped
   underneath Armatele Tale. Same trap as the last time this width moved. */
#bloclangaporumbel { width: 314px; margin-left: 10px; height: 219px; }
#blocartefacte { margin-top: 104px; }   /* 70 + 34: al doilea rand de potiuni */

/* THE COUNT IS THE DOOR.
 *
 * There was a `+` here, shown from the fifth active potion. "ar trebui sa il
 * facem accesibil tot timpul cand ai minim o licoare activa, ca e fain. (scoti
 * plusul si pui link direct pe nr de licori active)" -- so the badge that was
 * already saying how many became the link to licoriactive.php, from the first
 * one. One control where there were two, and it is the thing the eye lands on.
 *
 * .aid-numar is drawn as a ring with a face; as an <a> it needs nothing but the
 * underline off and something to say it is live under the pointer. */
#potiuniactive .aid-numar-link { text-decoration: none; cursor: pointer; }
#potiuniactive .aid-numar-link:hover { box-shadow: 0 0 0 1px var(--aid-aur, #ffcc00), 0 0 7px rgba(255, 204, 0, 0.45); }
#bloce #potiuniactive > h5 { white-space: nowrap; }

/* THE TWO PANELS DROP THE PAINTED PADDING.
 *
 * css.css gives #blocpotiuni `padding: 5px 7px 0 11px` and #potiuniactive its
 * own -- offsets measured against a title painted into the JPEG, at whatever
 * position the artist chose in 2010. The rule that zeroed them was retargeted
 * to #blocelemente when the elements took that slot, and these two inherited
 * them: eleven pixels of indent took the shelf's usable width to 834, and the
 * 24th potion -- which needs 840 -- dropped onto a second row. That is the
 * "e miscat si o potiune a sarit pe randul 2". */
#bloce #blocpotiuni, #bloce #potiuniactive { padding: 0; }

/* THE ELEMENTS YOU DO NOT HAVE ARE STILL DRAWN.
 *
 * "poti sa pui la loc acele placeholdere inactive (negre) cu elementele, cum
 *  erau inainte, in loc de cele goale de acum. erau faine. sa scoti cele care
 *  sunt in plus (2)."
 *
 * So no empty niches at all here: six elements, six tiles, and the ones you
 * hold none of are the picture dimmed and drained of colour -- which says what
 * an empty niche cannot, namely WHICH element is missing. Same treatment
 * .aid-element-gol had before the shelf was rebuilt. */
/* Six tiles in a 296px shelf leave 90 pixels over, and a row of six pushed
   against the left rim of a panel that wide reads as a list that ran out rather
   than as a set. Flex only to centre them: the tiles are floats everywhere else
   on this screen and a flex parent simply ignores that. */
#blocelemente .aid-raft { display: flex; justify-content: center; gap: 5px; }
#blocelemente .aid-raft > div { margin: 0; }
#blocelemente .aid-raft > div.aid-stins > img {
	opacity: 0.28;
	filter: grayscale(0.8);
}
#blocelemente .aid-raft > div.aid-stins:hover > img { opacity: 0.5; box-shadow: none; }

/* ------------------------------------------------- licoriactive.php, the page
 *
 * One row per active potion: the picture, what it is and what it does, how long
 * is left, and Opreste. */
#istanga .aid-licact-lista { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
#istanga .aid-licact {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 12px; border-radius: var(--aid-raza-panou-interior, 6px);
	background: rgba(0, 0, 0, 0.32);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
#istanga .aid-licact-poza { flex: 0 0 auto; line-height: 0; }
/* poza poartă acum rama, care își dă singură conturul (clip-path pe octogon):
   un colț rotunjit peste el ar tăia tocmai consolele */
#istanga .aid-licact-poza .aid-rama-poza { border-radius: 0; }
#istanga .aid-licact-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
#istanga .aid-licact-text b a { color: var(--aid-aur, #ffcc00); text-decoration: none; }
#istanga .aid-licact-desc { color: var(--aid-text, #e6e0c8); }
#istanga .aid-licact-durata { color: var(--aid-text-stins, #97917a); font-size: 11px; }
#istanga .aid-licact-timp { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#istanga .aid-licact-ramas {
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums; font-size: 13px;
	color: var(--aid-aur, #ffcc00);
}
#istanga .aid-licact-opreste { text-decoration: none; white-space: nowrap; }

/* ==================================================== arhivachat.php, the log
 *
 * "am mai observat ca am pierdut pe drum link-ul Arhiva, de pe baratop dreapta
 *  a chatului... care cred ca si el trebuie stilizat." (10 September 2026)
 *
 * The page behind that link was the 2010 one untouched: one table with no
 * header, four inline colours, and a stray <div> wrapped round every <tr> --
 * which browsers hoist straight back out of the table, so it was doing nothing
 * but confusing anyone who read the markup.
 *
 * It is a .aid-lista now, like the inbox and the reports, so a log reads the
 * same way a list of messages does. What it does NOT get is .aid-lista's
 * pointer and hover: a row here opens nothing, and a cursor that says otherwise
 * is a promise the page cannot keep.
 *
 * Rows are read down a narrow column of dates and up a wide one of text, so the
 * three left columns are fixed and the fourth takes what is left. */
#istanga .aid-arhiva { table-layout: fixed; }
#istanga .aid-arhiva tbody tr { cursor: default; }
#istanga .aid-arhiva tbody tr:hover { background: rgba(255, 204, 0, 0.06); }
/* LATIMILE, MASURATE (22 septembrie 2026).
 *
 * „scurteaza coloanele data, canal ca sa faci mai mult loc la Mesaj"
 *
 * Cele trei coloane de context luau 294px din tabel. Masurat ce tine fiecare:
 * ora e `datamica()`, adica `H:i:s` -- opt caractere monospace la 10px, vreo
 * 48px; eticheta de canal e acum cel mult „Privat", sase caractere, vreo 40px
 * (inainte scria „Pauza de joc" si de-aia ceruse 84). Cu padding-ul de 8px de
 * fiecare parte, 62 si 56 sunt largi cat trebuie si nimic nu se taie.
 *
 * 294 -> 222. Cei 72 de pixeli se duc in Mesaj, care n-are latime scrisa: intr-o
 * `table-layout: fixed` ultima coloana ia tot ce ramane. */
#istanga .aid-arhiva .aid-a-data  { width: 62px; }
#istanga .aid-arhiva .aid-a-canal { width: 56px; }
#istanga .aid-arhiva .aid-a-cine  { width: 104px; }
#istanga .aid-arhiva tbody td {
	padding: 4px 8px;
	vertical-align: top;
	line-height: 16px;
}
/* The two edges of the line -- when and where -- are context, not content, so
   they are set small and quiet and get out of the way of the message. */
#istanga .aid-arhiva tbody .aid-a-data,
#istanga .aid-arhiva tbody .aid-a-canal {
	font-size: 10px;
	color: var(--aid-text-stins, #97917a);
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
#istanga .aid-arhiva tbody .aid-a-cine {
	font-weight: bold;
	word-break: break-word;
}
/* AJAX Chat's own four colours, so a line looks here the way it looked when it
   was said. The legacy page set green for role 1 and overwrote it with grey on
   the next line, which made moderators indistinguishable from guests. */
#istanga .aid-arhiva .aid-a-rol-oaspete   { color: #8f8f8f; }
#istanga .aid-arhiva .aid-a-rol-jucator   { color: #cc9900; }
#istanga .aid-arhiva .aid-a-rol-moderator { color: #4fbf4f; }
#istanga .aid-arhiva .aid-a-rol-admin     { color: #e08a3c; }

#istanga .aid-arhiva .aid-a-text {
	color: var(--aid-text, #e6e0c8);
	word-break: break-word;
	overflow-wrap: anywhere;
}
/* The commands the page translates into Romanian -- "Intra pe chat:", "Mesaj
   privat:". They are a label on the line, not part of what was said. */
#istanga .aid-arhiva .aid-a-cmd {
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-arhiva .aid-a-intra { color: #6fc46a; }
#istanga .aid-arhiva .aid-a-iese  { color: #7d7d7d; }
#istanga .aid-arhiva .aid-a-priv  { color: #b98cd8; }

/* Randurile de pe un canal privat -- vizibile numai staff-ului. Dunga din
   stanga spune dintr-o privire ca randul ala n-a fost spus in public, ca sa nu
   ajunga cineva sa citeze pe chat o soapta crezand ca a fost la vedere. */
#istanga .aid-arhiva tbody tr.aid-a-privat {
	background: rgba(185, 140, 216, 0.06);
	box-shadow: inset 2px 0 0 #b98cd8;
}

/* ================================================ the pillow, in the air
 *
 *  js/aidperna.js. "36. Animatii la evenimente -- cumparare artefact, upgrade,
 *  aruncat perna" -- the first two shipped on 10 September, this is the third.
 *
 *  Seasonal like everything else about this feature: Season::isWinter() already
 *  decides whether $lang[1448] reads "un bulgare de zapada" or "o perna", so the
 *  projectile follows the same switch and the burst is snow or feathers.
 *
 *  THE ARC IS TWO TRANSFORMS. A thrown thing does not travel in a straight line
 *  and one translate cannot bend, so .aid-perna-zbor carries the horizontal at a
 *  constant speed and .aid-perna-salt carries the vertical, eased. Composed,
 *  that is a parabola -- and it costs two elements instead of a motion path.
 */
#istanga .aid-perna-strat {
	position: absolute;
	inset: 0;
	z-index: 40;
	overflow: hidden;
	pointer-events: none;
}
#istanga .aid-perna-zbor {
	position: absolute;
	left: -80px;
	top: 62%;
	animation: aid-perna-x .9s linear forwards;
}
#istanga .aid-perna-ratat { animation-duration: 1.15s; }
#istanga .aid-perna-salt { animation: aid-perna-y .9s cubic-bezier(.33, 0, .66, 1) forwards; }
#istanga .aid-perna-ratat .aid-perna-salt { animation-duration: 1.15s; }
#istanga .aid-perna-obiect {
	animation: aid-perna-rot .9s linear forwards;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
#istanga .aid-perna-obiect svg { display: block; }

/* left edge to a little past the right one: it leaves the panel rather than
   stopping in it, which is what "thrown" looks like */
@keyframes aid-perna-x  { from { transform: translateX(0); }      to { transform: translateX(calc(100% + 640px)); } }
/* up hard, hang, come down past where it started */
@keyframes aid-perna-y  { 0% { transform: translateY(0); } 45% { transform: translateY(-150px); } 100% { transform: translateY(30px); } }
@keyframes aid-perna-rot { from { transform: rotate(-15deg); } to { transform: rotate(400deg); } }

/* the burst sits where the arc ends */
#istanga .aid-perna-explozie {
	position: absolute;
	left: 72%;
	top: 46%;
}
#istanga .aid-perna-pana {
	position: absolute;
	display: block;
	animation: aid-perna-imprastie 1.5s cubic-bezier(.15, .6, .3, 1) forwards;
}
#istanga .aid-perna-pana svg { display: block; }
/* out along its own angle, then down: feathers do not stop, they settle */
@keyframes aid-perna-imprastie {
	0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.5); }
	12%  { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	#istanga .aid-perna-strat { display: none; }
}

/* =========================================================================
 *  ATACA -- CATE TRIMITI, SI CE RAMANE ACASA (ataca.php)
 *
 *  "trebuie stilizate inputurile [...] scriem intai fain Din ce ai acum /
 *   punem 2 coloane faine cu dracusorii si preotii. apoi Formeaza o armata:
 *   inputurile tot pe coloane, stilizate, cu iconul resursei inainte. sub
 *   acest table punem optiunile sub forma unor butoane [...] si nu uita de
 *   butonul ataca tot acolo sus, in tabla cu armatele in formare"
 *
 *  One plate, read top to bottom: what you HAVE, what you SEND, the shortcuts
 *  that fill it, and the button. The two halves use the same two-column grid
 *  on purpose -- the number under "draci" and the field under "draci" line up
 *  vertically, so "I have 40.225, I am sending 4.022" is one downward glance
 *  and not a hunt across a table.
 * ========================================================================== */

#istanga .aid-atac-armata {
	max-width: 420px;
	margin: 10px auto 0;
	padding: 12px 14px 14px;
	border-radius: var(--aid-raza-panou);
	background: rgba(0, 0, 0, 0.30);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.10);
	text-align: left;
}

#istanga .aid-atac-armata h5 {
	margin: 0 0 7px;
	color: var(--aid-aur-stins, #d9b25b);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

#istanga .aid-atac-doua {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/* what you have: the icon, the number, and the word under it. `tabular-nums`
   because these two are read as a pair and a garrison can be nine digits. */
#istanga .aid-atac-am {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 7px 9px;
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.38);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.08);
}
#istanga .aid-atac-am b {
	min-width: 0;
	color: var(--aid-text, #efe6cf);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#istanga .aid-atac-et {
	flex: 0 0 auto;
	color: var(--aid-text-stins, #97917a);
	font-size: 10px;
}
#istanga .aid-atac-ico { flex: 0 0 auto; display: inline-flex; align-items: center; }
#istanga .aid-atac-ico img { display: block; height: 16px; width: auto; }

#istanga .aid-atac-fac { margin-top: 12px; }

/* the field: the icon sits INSIDE the box, on the left, so the pair reads as
   one control rather than a label next to an input */
#istanga .aid-atac-camp {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	/* MIN-WIDTH ZERO, AND IT IS NOT DECORATION.
	 *
	 * "inputurile de la formeaza o armata ies afara un pic." Measured on dev:
	 * the cell is 206px and the label was 227 -- twenty-one pixels out.
	 *
	 * A grid item's min-width defaults to `auto`, which means "never narrower
	 * than your content", and the content here inherits `width: 160px` from the
	 * shell's generic `#istanga input[type=text]` rule. 160 + the icon + the
	 * gaps + the padding is 227, so the label refused to fit the column it was
	 * put in. `min-width: 0` lets it, and `width: 100%` on the field below
	 * stops it carrying that 160px in as its flex basis. Same rule, same
	 * reason, as the podium on the clasament page. */
	min-width: 0;
	padding: 0 8px;
	height: 30px;
	/* The gold edge lives HERE and nowhere else -- "as pune border golden doar
	   pe label, nu si pe input ca e prea mult". The field inside is stripped of
	   its own border AND of the shell's inset ring, so the pair reads as one
	   control with one outline instead of a box inside a box. */
	border: 1px solid rgba(198, 158, 12, 0.55);
	border-radius: var(--aid-raza);
	background: rgba(0, 0, 0, 0.45);
	box-shadow: var(--aid-apasat);
	cursor: text;
}
/* AND FOCUS DOES NOT ADD A SECOND EDGE.
 *
 * "scoate insa borderul de la input on focus. sa ramana doar cel de la label."
 *
 * Measured on dev while the field was focused: the input itself already had
 * `outline: none`, `border: 0` and `box-shadow: none` -- nothing at all. What
 * changed on focus was THIS rule brightening the label's gold from 55% to
 * solid, and at 30px around a dark field a brightening edge reads as a second
 * edge appearing. So the gold stays exactly as it is, in both states, and the
 * field says it has focus by going darker inside -- one outline, always. */
#istanga .aid-atac-camp:focus-within {
	background: rgba(0, 0, 0, 0.62);
}
#istanga .aid-atac-camp input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--aid-text, #efe6cf);
	font-family: var(--aid-font);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
#istanga .aid-atac-camp input:focus { outline: none; }
#istanga .aid-atac-camp input::placeholder { color: var(--aid-text-stins, #97917a); }
/* Chrome draws spinners on numeric fields; this is a text input precisely so
   it can be empty, and the arrows would only get in the way of the shortcuts */
#istanga .aid-atac-camp input::-webkit-outer-spin-button,
#istanga .aid-atac-camp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* the six shortcuts. They wrap on a narrow panel rather than scrolling: six
   short words on two rows still read as one row of choices. */
#istanga .aid-atac-repede {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 9px;
}
#istanga .aid-atac-repede .aid-btn { flex: 1 1 auto; min-width: 54px; text-align: center; }
#istanga .aid-atac-repede .aid-atac-ales {
	border-color: var(--aid-aur, #ffcc00);
	color: var(--aid-aur, #ffcc00);
	box-shadow: 0 0 8px rgba(255, 204, 0, 0.28);
}

#istanga .aid-atac-trimite { margin-top: 12px; text-align: center; }
#istanga .aid-atac-trimite input[type="submit"].atac { min-width: 170px; }

/* CEASUL DE DINAINTEA ATACULUI (24 septembrie 2026).
 *
 * „putem ascunde butonul ataca si afisa un countdown fain, gold, de la cate
 *  secunde mai am pana dau atac, la zero si apoi sa se vada butonul ATACA?"
 *
 * Cifrele stau exact unde va sta butonul, la aceeași înălțime, ca schimbul
 * să nu urnească nimic din pagină când se face. Aurul e al jocului, iar
 * pulsul e încet -- un ceas care clipește repede grăbește omul, iar aici n-are
 * ce grăbi: trebuie doar să vadă că timpul curge.
 *
 * Schimbul îl face o clasă, nu un script: `js/aidceas.js` pune
 * `.aid-ceas-gata` la zero, iar `:has()` de mai jos scoate ceasul și aprinde
 * butonul. Butonul e și `disabled` până atunci -- aia o face scriptul mic din
 * pagină, fiindcă CSS-ul nu poate deschide un buton închis. */
#istanga .aid-atac-ceas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 50px;
	justify-content: center;
}
#istanga .aid-atac-ceas .aid-ceas-cifre {
	/* Nu fontul de cifre al jocului: e monospațiat, deci spațiul dinaintea
	   lui „s" e la fel de lat ca o cifră și se vede o prăpastie între ele.
	   Fontul paginii, cu cifre de lățime egală cerute anume, arată la fel de
	   ferm și scrie „46 s" ca un om. */
	font: bold 30px/1 Verdana, Arial, Helvetica, sans-serif;
	font-variant-numeric: tabular-nums;
	color: var(--aid-aur, #ffcc00);
	text-shadow: 0 0 14px rgba(255, 190, 30, 0.45), 0 1px 2px rgba(0, 0, 0, 0.9);
	animation: aid-atac-ceas-puls 2s ease-in-out infinite;
}
#istanga .aid-atac-ceas .aid-ceas-eticheta {
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aid-text-stins, #97917a);
}
@keyframes aid-atac-ceas-puls {
	0%, 100% { opacity: 1; }
	50%      { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
	#istanga .aid-atac-ceas .aid-ceas-cifre { animation: none; }
}
/* cât timp ceasul merge, butonul nu e acolo; la zero, ceasul pleacă și el vine */
#istanga .aid-atac-trimite:has(.aid-atac-ceas) input[type="submit"].atac { display: none; }
#istanga .aid-atac-trimite .aid-atac-ceas.aid-ceas-gata { display: none; }
#istanga .aid-atac-trimite:has(.aid-atac-ceas.aid-ceas-gata) input[type="submit"].atac { display: inline-block; }

@media (max-width: 520px) {
	#istanga .aid-atac-doua { grid-template-columns: 1fr; }
}

/* =========================================================================
 * COLECȚIA -- colectie.php (15 sept 2026)
 *
 * „acolo e bucuria a tot ce au adunat." Cardurile a tot ce are jucătorul --
 * artefacte sau poțiuni -- pe ecranul mare (aidmare.js), cu praful de aur al
 * lui premium în spate. Pe telefon dock-ul deschide pagina asta; pe desktop
 * rafturile de pe card rămân, dar pagina merge și acolo.
 *
 * Grila e `auto-fill` cu carduri de minimum 150px: două coloane la 390,
 * trei pe la 520, șase pe desktop -- același marcaj peste tot. Culoarea
 * treptei vine din aceleași cinci clase ca rama (--aid-rar), ca să nu existe
 * o a doua listă de culori.
 * ========================================================================= */
/* css.css dă lui div.borderrosu `margin: auto`, iar învelișul fragmentului e o
 * coloană flex: margin auto pe orizontală într-un flex înseamnă „cât conținutul,
 * la mijloc" -- colecția ieșea de 267px, o singură coloană. Întinsă, explicit. */
#istanga .aid-colectie,
#aidmare #istanga .aid-colectie {
	margin: 0 !important; width: auto !important; align-self: stretch; box-sizing: border-box;
	padding: 4px 0 24px !important; background: none !important; border: 0 !important;
}
#istanga .aid-col-file {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 6px 4px 14px;
}
#istanga .aid-col-fila {
	display: inline-flex; align-items: center; gap: 8px;
	height: 34px; padding: 0 14px; border-radius: 17px;
	color: var(--aid-text); text-decoration: none; font-size: 12px; font-weight: bold;
	background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 226, 178, 0.16);
}
#istanga .aid-col-fila b { font-size: 11px; color: var(--aid-text-slab); font-variant-numeric: tabular-nums; }
#istanga .aid-col-fila.pe { color: #1a1400; background: linear-gradient(180deg, #ffd633, var(--aid-aur-stins)); border-color: transparent; }
#istanga .aid-col-fila.pe b { color: rgba(26, 20, 0, 0.7); }
#istanga .aid-col-din { margin-left: auto; font-size: 11px; color: var(--aid-text-slab); font-variant-numeric: tabular-nums; }

#istanga .aid-col-grila {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}
#istanga .aid-col-card {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 16px 10px 12px;
	border-radius: 14px;
	color: var(--aid-text); text-decoration: none; text-align: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(0, 0, 0, 0.28) 100%);
	border: 1px solid rgba(255, 226, 178, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.45);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
	overflow: hidden;
}
#istanga .aid-col-card:hover, #istanga .aid-col-card:focus-visible {
	transform: translateY(-2px);
	border-color: var(--aid-rar, rgba(255, 226, 178, 0.3));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 18px color-mix(in srgb, var(--aid-rar, #8fa088) 30%, transparent);
	outline: 0;
}
#istanga .aid-col-card:active { transform: translateY(0) scale(0.985); }
/* aceeași culoare de treaptă ca rama dinăuntru */
#istanga .aid-col-comun    { --aid-rar: #8fa088; }
#istanga .aid-col-rar      { --aid-rar: #5aa9d6; }
#istanga .aid-col-epic     { --aid-rar: #a06bd4; }
#istanga .aid-col-legendar { --aid-rar: #f60; }
#istanga .aid-col-premium  { --aid-rar: #ffcc00; }
/* o linie fină de culoarea treptei pe muchia de sus: se vede fără să strige */
#istanga .aid-col-card::before {
	content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--aid-rar, #8fa088), transparent);
	opacity: 0.85;
}
#istanga .aid-col-poza { display: block; width: 128px; max-width: 100%; }
#istanga .aid-col-poza .aid-rama { display: block; width: 100% !important; }
#istanga .aid-col-nume {
	font-size: 13px; font-weight: bold; color: var(--aid-aur); line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#istanga .aid-col-nota { font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-col-cate {
	position: absolute; top: 10px; right: 10px; z-index: 2;   /* peste rama, care e `relative` si vine dupa */
	min-width: 26px; height: 22px; padding: 0 8px; border-radius: 11px;
	background: linear-gradient(180deg, #ffd633, var(--aid-aur-stins));
	color: #1a1400; font-size: 12px; font-weight: bold; line-height: 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	font-variant-numeric: tabular-nums;
}
#istanga .aid-col-semn {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	height: 20px; padding: 0 8px; border-radius: 10px;
	background: rgba(23, 99, 44, 0.85); color: #dff7d8;
	font-size: 10px; line-height: 20px; letter-spacing: 0.04em;
	box-shadow: 0 0 8px rgba(111, 191, 115, 0.45);
}
#istanga .aid-col-activa .aid-col-poza { filter: drop-shadow(0 0 10px rgba(111, 191, 115, 0.55)); }
#istanga .aid-col-gol { padding: 40px 16px; text-align: center; color: var(--aid-text-slab); font-size: 13px; }
/* elementele pe care nu le ai: stinse, ca pe raftul de desktop (.aid-stins) */
#istanga .aid-col-gol-card { opacity: .55; }
#istanga .aid-col-gol-card .aid-col-poza { filter: grayscale(.8) brightness(.7); }
#istanga .aid-col-gol-card .aid-col-cate { background: rgba(0, 0, 0, .55); color: var(--aid-text-slab); }
#istanga .aid-col-nota-sus { margin: 0 4px 12px; font-size: 12px; color: var(--aid-text-slab); }
#istanga .aid-col-nota-sus a { color: var(--aid-aur); }
#istanga .aid-col-gol p { margin: 0 0 16px; }
/* pe ecranul mare titlul e în antet, ca la fișa obiectului */
#aidmare[data-ecran="colectie"] #istanga > .aid-obiect-h1 { display: none; }
#aidmare[data-ecran="colectie"] #istanga { width: auto; max-width: var(--aidm-lat); margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { #istanga .aid-col-card { transition: none; } }

/* ==========================================================================
 *  QUESTURILE -- personajele in oras si foaia lor (16 sept 2026)
 *  designul: claude/questuri-sistem.md; planul: claude/plan-questuri.md
 * ========================================================================== */
/* --- sprite-ul de langa cladire ------------------------------------------ */
#aid-oras .aid-oras-npc {
	position: absolute; display: block; pointer-events: auto; line-height: 0; outline: 0;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
#aid-oras .aid-oras-npc img { display: block; transition: filter .15s ease, transform .2s ease; transform-origin: 50% 100%; }
#aid-oras .aid-oras-npc:hover img,
#aid-oras .aid-oras-npc:focus-visible img { filter: brightness(1.12) drop-shadow(0 0 6px rgba(255, 204, 0, .85)); transform: scale(1.04); }
/* bula: aur cu „!”, „…”, „✓”; margine rosie cand pleaca a doua zi */
/* BULA NU MAI SARE, RESPIRA (17 sept 2026).
 *
 * „animatia nu merge prea bine, e sacadata. am putea sa o inlocuim cu un flash
 *  discret sau un breathe rar, dar sa nu se mai miste sus, jos."
 *
 * Saltul muta bula la fiecare cadru pe un sprite care are deja `filter:
 * drop-shadow` -- si un filtru repictat de douazeci de ori pe secunda, langa
 * zece personaje in oras, e exact ce se vede ca sacadare. Acum bula sta pe loc
 * si doar clipeste: un halou care creste si se stinge o data la cinci secunde,
 * pe `transform` si `opacity` intr-un pseudo-element, adica pe placa video,
 * fara sa atinga vreun pixel al orasului. Un singur „puls" scurt din cinci
 * secunde de liniste -- se vede cu coada ochiului, nu distrage. */
#aid-oras .aid-oras-bula {
	position: absolute; left: 50%; top: -18px; transform: translateX(-50%);
	min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px 11px 11px 3px;
	background: linear-gradient(180deg, #ffe08a, var(--aid-aur)); color: #1a1400;
	font: bold 14px/22px var(--aid-font-cifre), serif; text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 204, 0, .45);
}
#aid-oras .aid-oras-bula::before {
	content: ''; position: absolute; inset: -3px; border-radius: inherit;
	box-shadow: 0 0 0 2px rgba(255, 204, 0, .55);
	opacity: 0; transform: scale(.9);
	animation: aid-bula-puls 5s ease-out infinite;
	pointer-events: none;
}
#aid-oras .aid-oras-npc[data-stare=""] .aid-oras-bula { display: none; }
#aid-oras .aid-oras-npc[data-stare="…"] .aid-oras-bula { background: linear-gradient(180deg, #d9d2bd, #9d9377); animation: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
#aid-oras .aid-oras-npc[data-stare="✓"] .aid-oras-bula { background: linear-gradient(180deg, #a6f0a0, #3c9a3c); color: #062406; }
#aid-oras .aid-oras-npc-pleaca .aid-oras-bula { box-shadow: 0 0 0 2px #c62828, 0 1px 3px rgba(0, 0, 0, .6); }
@keyframes aid-bula-puls {
	0%   { opacity: 0;   transform: scale(.9); }
	6%   { opacity: .85; transform: scale(1); }
	18%  { opacity: 0;   transform: scale(1.35); }
	100% { opacity: 0;   transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) { #aid-oras .aid-oras-bula::before { animation: none; } }

/* --- foaia personajului (quest.php) --------------------------------------- */
#istanga .aid-quest, #aidmare #istanga .aid-quest {
	margin: 0 !important; width: auto !important; align-self: stretch;
	padding: 14px 16px 18px; box-sizing: border-box;
}
#istanga .aid-quest-cap { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
#istanga .aid-quest-portret {
	flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
	box-shadow: 0 0 0 2px rgba(214, 159, 40, .7), 0 0 18px color-mix(in srgb, var(--aid-npc, #d69f28) 55%, transparent);
}
#istanga .aid-quest-portret img { display: block; width: 96px; height: 96px; }
#istanga .aid-quest-cine { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#istanga .aid-quest-nume { font-family: var(--aid-font-titlu); font-size: 20px; color: var(--aid-aur); text-shadow: var(--aid-titlu-umbra); }
#istanga .aid-quest-unde { font-size: 12px; color: var(--aid-text-slab); }
#istanga .aid-quest-pleaca { font-size: 11px; color: var(--aid-text-stins); letter-spacing: .04em; text-transform: uppercase; }
#istanga .aid-quest-pleaca-maine { color: #ff8a80; }
#istanga .aid-quest-replica {
	margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--aid-aur-stins);
	background: rgba(0, 0, 0, .25); border-radius: 0 var(--aid-raza) var(--aid-raza) 0;
	font-style: italic; font-size: 14px; line-height: 1.45; color: var(--aid-text);
}
#istanga .aid-quest-card {
	position: relative; padding: 14px 16px 16px; border-radius: var(--aid-raza-mare);
	background: linear-gradient(180deg, rgba(40, 36, 28, .92), rgba(18, 16, 12, .96));
	border: 1px solid rgba(214, 159, 40, .35); box-shadow: 0 6px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 178, .12);
}
#istanga .aid-quest-stare-gata { border-color: rgba(111, 191, 115, .7); box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 18px rgba(111, 191, 115, .25); }
#istanga .aid-quest-card-cap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
#istanga .aid-quest-tip {
	font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 9px;
	background: rgba(214, 159, 40, .18); color: var(--aid-aur);
}
#istanga .aid-quest-tip-repetabil { background: rgba(95, 140, 200, .2); color: #a9c8f0; }
#istanga .aid-quest-tip-sezon { background: rgba(194, 24, 91, .22); color: #ffa6c9; }
#istanga .aid-quest-lant { margin-left: auto; font-size: 11px; color: var(--aid-text-slab); font-variant-numeric: tabular-nums; }
#istanga .aid-quest-titlu { margin: 0; font-family: var(--aid-font-titlu); font-size: 22px; line-height: 1.15; color: var(--aid-text-tare); text-shadow: var(--aid-titlu-umbra); }
#istanga .aid-quest-vorbitor { display: block; margin-top: 2px; font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-quest-poveste { margin: 10px 0 14px; font-size: 14px; line-height: 1.5; color: var(--aid-text); font-style: italic; }
#istanga .aid-quest-obiectiv { padding: 10px 12px; border-radius: var(--aid-raza); background: rgba(0, 0, 0, .3); }
#istanga .aid-quest-obiectiv > b { display: block; font-size: 14px; color: var(--aid-text-tare); }
#istanga .aid-quest-bara { position: relative; height: 10px; margin: 8px 0 4px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
#istanga .aid-quest-bara i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, var(--aid-aur-stins), #ffd633); box-shadow: 0 0 8px rgba(255, 204, 0, .5); transition: width .4s ease; }
#istanga .aid-quest-stare-gata .aid-quest-bara i { background: linear-gradient(90deg, #3c9a3c, #a6f0a0); box-shadow: 0 0 8px rgba(111, 191, 115, .6); }
#istanga .aid-quest-cifre { font-family: var(--aid-font-cifre); font-size: 12px; color: var(--aid-text-slab); font-variant-numeric: tabular-nums; }
#istanga .aid-quest-recompensa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; }
#istanga .aid-quest-eticheta { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--aid-aur-stins); }
#istanga .aid-quest-recompensa > b { font-size: 13px; color: var(--aid-aur); }
#istanga .aid-quest-actiune { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
#istanga .aid-quest-asteapta { font-size: 12px; color: var(--aid-text-slab); font-style: italic; }
#istanga .aid-quest-alege { font-size: 12px; color: var(--aid-text); }
#istanga .aid-quest-alege select { margin-left: 6px; }
#istanga .aid-quest-gol { padding: 18px 8px; text-align: center; color: var(--aid-text-slab); font-size: 13px; }

/* ------------------------------------------------ abandonul unui quest
 *
 * „cred ca trebuie si un buton Abandonează [...] Abandonul sa fie cu
 *  confirmare Sigur? Da Nu si sa scrie acolo explicatia asta cu 24 ore.”
 *
 * Renuntarea nu e o actiune de acelasi rang cu Accept si Realizat, deci nu
 * sta pe randul lor: e un rezumat mic si stins sub card, care se deschide in
 * ce trebuie citit inainte de apasat. Marcajul implicit al lui <summary> se
 * scoate, ca sa nu apara o sageata de fisier intr-un card de basm. */
#istanga .aid-quest-renunt { margin: 10px 0 0; }
#istanga .aid-quest-renunt > summary {
	display: inline-block;
	padding: 2px 0;
	font-size: 11px;
	color: var(--aid-text-slab);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
	list-style: none;
}
#istanga .aid-quest-renunt > summary::-webkit-details-marker { display: none; }
#istanga .aid-quest-renunt > summary:hover { color: var(--aid-text); }
#istanga .aid-quest-renunt-corp {
	margin: 8px 0 0;
	padding: 11px 13px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
	border-left: 2px solid rgba(190, 60, 45, 0.7);
}
#istanga .aid-quest-renunt-corp p { margin: 0; font-size: 13px; color: var(--aid-text); }
#istanga .aid-quest-renunt-nota { margin-top: 5px !important; font-size: 11.5px !important; color: var(--aid-text-slab) !important; line-height: 16px; }
#istanga .aid-quest-renunt-nota b { color: var(--aid-aur); }
#istanga .aid-quest-renunt-butoane { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#istanga .aid-quest-renunt-butoane form { margin: 0; }
/* personajul suparat: acelasi ton de rosu ca panoul de confirmare, ca sa se
   vada ca e urmarea lui, nu o pagina goala oarecare */
#istanga .aid-quest-suparat {
	max-width: 46ch;
	margin: 0 auto;
	padding: 14px 16px;
	border-radius: var(--aid-raza-panou-interior);
	background: rgba(0, 0, 0, 0.26);
	border-left: 2px solid rgba(190, 60, 45, 0.7);
	text-align: left;
	line-height: 18px;
}
#istanga .aid-quest-suparat b { color: var(--aid-aur); }

#istanga .aid-quest-jos { margin: 14px 0 0; text-align: center; font-size: 12px; }
#istanga .aid-quest-jos a { color: var(--aid-aur); }
/* --- butonul „Questuri” din bara de sus (desktop) si din sertar (telefon) --- */
/* UN „Q", NU UN SEMN DE EXCLAMARE (27 sept 2026). „pune un Q cu ceva efecte speciale
   (small glow sau pulse lent), in loc de ! la acel buton. jucatorii nu il prea gasesc."
   Litera e desenata ca forma (cerc + codita), nu ca text: masca SVG cu <text> ar
   depinde de fontul masinii. Grosimea 3.4 ca sa se citeasca la 21 px. Codita porneste DIN cerc si iese prin
   inel, ca la litera tiparita -- daca ar porni de pe inel ar fi o lupa. */
.aid-i-questuri { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='15.5' cy='14' r='9.5'/%3E%3Cpath d='M15.5 17l9.5 10'/%3E%3C/svg%3E");
/* ROSU INCHIS, NU AUR (17 sept 2026).
 *
 * „ar trebui atunci schimbat butonul de Quest, din zona blocpersonaj, sa
 *  contrasteze cu notificarea. Poate un dark red?"
 *
 * Da, si din acelasi motiv pentru care semnul nou se vede: insigna #semnq e o
 * flacara de chihlimbar, iar ea statea pe un buton AURIU (#ffcf4d -> #b8830f),
 * care mai si clipea in aur la fiecare noua secunde. Doua lucruri galbene unul
 * peste altul: insigna disparea in buton exact cand avea ceva de spus.
 *
 * Rosul e inchis, nu stins: fata #8e1f18 sub luciul radial al lui .aid-ic arata
 * a lac lustruit, nu a caramida. Nu se incurca nici cu Armatele (#ff0000,
 * stacojiu si in bara de sus, nu pe cardul personajului). Glyph-ul ia o crema
 * calda, ca sulul sa ramana citibil pe intuneric, iar licarul isi schimba
 * culoarea odata cu butonul -- un halou auriu peste rosu ar fi imprumutat
 * inapoi exact galbenul de care fugim. */
                  --aid-buton-sus: #8e1f18; --aid-buton-mij: #4a0f0c; --aid-buton-jos: #120302; --aid-ic-culoare: #ffe3d6; }
/* pe cardul personajului, sub stema, pe inelul medalionului -- perechea zarului
   Jocurilor din dreapta (vezi .aid-bp-jocuri): 40px la (6, 56), peste inel */
#blocpersonaj.aid-card .aid-bp-questuri {
	left: 6px !important; top: 56px !important;
	width: 44px; height: 44px; z-index: 4;
}
#blocpersonaj.aid-card .aid-bp-questuri .aid-ic { display: block; }
#blocpersonaj.aid-card .aid-bp-questuri img { width: 40px; height: 40px; display: block; }
/* insigna „ai de incasat”: in coltul din dreapta-sus al butonului, ca la Rapoarte */
#semnq { position: absolute; top: -4px; right: -6px; line-height: 0; z-index: 5; }
#semnq img { width: 16px !important; height: auto !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
#semnq[hidden] { display: none; }
/* Q-ul PULSEAZA LENT, tot timpul (27 sept 2026) -- nu o clipire la noua secunde, pe
   care n-o prinde nimeni, ci o respiratie de 3,2 s: litera se lumineaza si capata un
   halou cald, inelul butonului la fel, mai discret. Destul ca ochiul sa-l gaseasca,
   nu destul ca sa oboseasca. */
@keyframes aid-quest-puls {
	0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 190, 60, .25)); }
	50%      { filter: brightness(1.35) drop-shadow(0 0 7px rgba(255, 190, 60, .95)) drop-shadow(0 0 14px rgba(255, 120, 40, .45)); }
}
@keyframes aid-quest-inel {
	0%, 100% { box-shadow: 0 0 0 2px var(--aid-piatra), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.55); }
	50%      { box-shadow: 0 0 0 2px var(--aid-aur-stins), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 12px rgba(255, 190, 60, .45), 0 2px 4px rgba(0, 0, 0, 0.55); }
}
.aid-i-questuri::before { animation: aid-quest-puls 3.2s ease-in-out infinite; }
.aid-i-questuri { animation: aid-quest-inel 3.2s ease-in-out infinite; }
.aid-i-questuri:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .aid-i-questuri::before, .aid-i-questuri { animation: none; } }
/* pe telefon: sprite-urile personajelor se ating, ca si cladirile */
body.aid-mobil #aid-oras .aid-oras-npc { pointer-events: auto; }

/* --- jurnalul questurilor (jurnal.php, ecran mare) ------------------------ */
#istanga .aid-jurnal, #aidmare #istanga .aid-jurnal {
	margin: 0 !important; width: auto !important; align-self: stretch;
	padding: 14px 16px 22px; box-sizing: border-box;
}
#aidmare[data-ecran="jurnal"] #istanga > .aid-obiect-h1 { display: none; }
#aidmare[data-ecran="jurnal"] #istanga { width: auto; max-width: var(--aidm-lat); margin: 0 auto; }
#istanga .aid-jurnal h6 { margin: 0 0 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--aid-aur-stins); }
#istanga .aid-jurnal-oras { margin-bottom: 14px; }
#istanga .aid-jurnal-prezenti { display: flex; flex-wrap: wrap; gap: 10px; }
#istanga .aid-jurnal-prezent {
	display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 30px;
	background: rgba(0, 0, 0, .3); border: 1px solid rgba(214, 159, 40, .3); color: var(--aid-text); text-decoration: none;
}
#istanga .aid-jurnal-prezent b { display: block; font-size: 13px; color: var(--aid-aur); }
#istanga .aid-jurnal-prezent small { display: block; font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-jurnal-portret { position: relative; flex: none; display: block; border-radius: 50%; line-height: 0; box-shadow: 0 0 0 2px rgba(214, 159, 40, .55); }
#istanga .aid-jurnal-portret img { display: block; border-radius: 50%; }
#istanga .aid-jurnal-portret .aid-oras-bula {
	position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
	background: linear-gradient(180deg, #ffe08a, var(--aid-aur)); color: #1a1400; font: bold 11px/18px var(--aid-font-cifre), serif; text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
#istanga .aid-jurnal-portret .aid-oras-bula[data-stare="✓"] { background: linear-gradient(180deg, #a6f0a0, #3c9a3c); color: #062406; }
#istanga .aid-jurnal-portret .aid-oras-bula[data-stare="…"] { background: linear-gradient(180deg, #d9d2bd, #9d9377); }
#istanga .aid-jurnal-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
#istanga .aid-jurnal-lista-mica { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#istanga .aid-jurnal-card {
	position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--aid-raza-mare);
	background: linear-gradient(180deg, rgba(40, 36, 28, .9), rgba(18, 16, 12, .95)); border: 1px solid rgba(214, 159, 40, .25);
	color: var(--aid-text); text-decoration: none; transition: transform .15s ease, border-color .15s ease;
}
#istanga .aid-jurnal-card:hover { transform: translateY(-2px); border-color: rgba(214, 159, 40, .6); }
#istanga .aid-jurnal-gata { border-color: rgba(111, 191, 115, .7); box-shadow: 0 0 16px rgba(111, 191, 115, .2); }
#istanga .aid-jurnal-facut { opacity: .6; }
#istanga .aid-jurnal-corp { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
#istanga .aid-jurnal-cine { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--aid-aur-stins); }
#istanga .aid-jurnal-nume { font-family: var(--aid-font-titlu); font-size: 17px; line-height: 1.15; color: var(--aid-text-tare); }
#istanga .aid-jurnal-obiectiv { font-size: 12px; color: var(--aid-text); }
#istanga .aid-jurnal-poveste { font-size: 12px; line-height: 1.45; color: var(--aid-text); }
#istanga .aid-jurnal-cifre, #istanga .aid-jurnal-cand { font-family: var(--aid-font-cifre); font-size: 11px; color: var(--aid-text-slab); font-variant-numeric: tabular-nums; }
#istanga .aid-jurnal-card .aid-quest-bara { display: block; height: 6px; margin: 4px 0 0; }
#istanga .aid-jurnal-semn { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #a6f0a0, #3c9a3c); color: #062406; font: bold 13px/22px var(--aid-font-cifre), serif; text-align: center; }
#istanga .aid-jurnal-inst { margin: 12px 0 0; padding: 10px 12px 12px; border-radius: var(--aid-raza-mare); background: rgba(0, 0, 0, .22); }
#istanga .aid-jurnal-inst > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
#istanga .aid-jurnal-inst > header b { font-family: var(--aid-font-titlu); font-size: 18px; color: var(--aid-aur); }
#istanga .aid-jurnal-inst > header small { font-size: 12px; color: var(--aid-text-slab); }
#istanga .aid-jurnal-inchis { opacity: .7; }
#istanga .aid-jurnal-titluri { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; }
#istanga .aid-jurnal-titlu {
	padding: 8px 16px; border-radius: 20px; font-family: var(--aid-font-titlu); font-size: 15px; color: #1a1400;
	background: linear-gradient(180deg, #ffd633, var(--aid-aur-stins)); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
/* --- tabul Questuri din panoul de admin ----------------------------------- */
#istanga .aid-panou-formular-coloane { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: center; gap: 8px 16px; }
/* pornit / oprit pe quest (16 sept 2026): grupuri pe personaj, bife pe doua-trei coloane */
#istanga .aid-panou-grup { margin: 6px 0; padding: 6px 10px; border-radius: var(--aid-raza); background: rgba(0, 0, 0, .22); }
#istanga .aid-panou-grup > summary { cursor: pointer; padding: 4px 0; font-size: 13px; }
#istanga .aid-panou-bife { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 14px; padding: 6px 0 8px; }
#istanga .aid-panou-bifa { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.35; }
#istanga .aid-panou-bifa input { margin-top: 2px; flex: 0 0 auto; }
#istanga .aid-panou-bifa small { display: block; }
#istanga .aid-panou-bifa-oprit > span { color: #ff8a80; }
#istanga .aid-panou-formular-coloane > label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
#istanga .aid-panou-formular-coloane > label > span { flex: 1; }
#istanga .aid-panou-formular-coloane .aid-camp-scurt { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
#istanga .aid-panou-formular-coloane > .aid-btn { grid-column: 1 / -1; justify-self: start; }
#istanga .aid-panou-calculat td:first-child { border-left: 3px solid var(--aid-aur-stins); }
/* --- biletele din colt (sosiri, „gata de incasat”) ------------------------ */
#aid-quest-bilete { position: fixed; right: 16px; top: 86px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.aid-quest-bilet {
	display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 8px 14px 8px 8px; border-radius: 30px;
	background: linear-gradient(180deg, rgba(40, 36, 28, .97), rgba(18, 16, 12, .98)); border: 1px solid rgba(214, 159, 40, .55);
	color: var(--aid-text); font-size: 12px; line-height: 1.35; text-decoration: none; text-align: left;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .55); pointer-events: auto;
	opacity: 0; transform: translateX(24px); transition: opacity .35s ease, transform .35s ease;
}
.aid-quest-bilet.pe { opacity: 1; transform: none; }
.aid-quest-bilet img { flex: none; border-radius: 50%; box-shadow: 0 0 0 2px rgba(214, 159, 40, .6); }
.aid-quest-bilet-gata { border-color: rgba(111, 191, 115, .8); }
/* textul foii si al jurnalului se citeste de la stanga, nu centrat ca restul panoului */
#istanga .aid-quest, #istanga .aid-jurnal { text-align: left; }
#istanga .aid-quest-card, #istanga .aid-jurnal-card { text-align: left; }
/* --- tabla cu treburi a permanentilor (16 sept 2026) ------------------------
   mai multe carduri deodata, pe doua coloane cand e loc; cele in lucru raman
   pline, cele „facut” (repetabile in asteptare) se sting */
#istanga .aid-quest-tabla-nota { margin: -6px 0 12px; font-size: 12px; color: var(--aid-text-slab); }
#istanga .aid-quest-tabla { display: grid; grid-template-columns: 1fr; gap: 12px; }
#istanga .aid-quest-pe-tabla .aid-quest-titlu { font-size: 19px; }
#istanga .aid-quest-pe-tabla .aid-quest-poveste { font-size: 13px; }
#istanga .aid-quest-tip-secundar { background: rgba(141, 110, 99, .28); color: #e0c2b4; }
#istanga .aid-quest-stare-facut { opacity: .62; border-style: dashed; }
#istanga .aid-quest-stare-luat .aid-quest-card-cap::after { content: 'în lucru'; margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #a9c8f0; }
#istanga .aid-quest-stare-luat .aid-quest-lant { margin-left: 8px; }
#aidmare #istanga .aid-quest-tabla { grid-template-columns: 1fr 1fr; gap: 16px; }
#aidmare #istanga .aid-quest-pe-tabla { padding: 18px 20px 20px; }
#aidmare #istanga .aid-quest-pe-tabla .aid-quest-titlu { font-size: 23px; }
#aidmare #istanga .aid-quest-pe-tabla .aid-quest-poveste { font-size: 14px; line-height: 1.5; }
#aidmare #istanga .aid-quest-tabla-nota { font-size: 13px; }
@media (max-width: 700px) { #aidmare #istanga .aid-quest-tabla { grid-template-columns: 1fr; } }
/* --- foaia personajului pe tot ecranul (aidmare, data-ecran="quest") ------ */
#aidmare[data-ecran="quest"] #istanga > .aid-obiect-h1 { display: none; }
#aidmare[data-ecran="quest"] #istanga { width: auto; max-width: var(--aidm-lat); margin: 0 auto; }
#aidmare #istanga .aid-quest { padding: 22px 28px 30px; }
#aidmare #istanga .aid-quest-cap { gap: 22px; margin-bottom: 16px; }
#aidmare #istanga .aid-quest-portret { width: 160px; height: 160px; box-shadow: 0 0 0 3px rgba(214, 159, 40, .75), 0 0 34px color-mix(in srgb, var(--aid-npc, #d69f28) 60%, transparent); }
#aidmare #istanga .aid-quest-portret img { width: 160px; height: 160px; }
#aidmare #istanga .aid-quest-nume { font-size: 28px; }
#aidmare #istanga .aid-quest-unde { font-size: 13px; }
#aidmare #istanga .aid-quest-replica { font-size: 17px; padding: 14px 20px; margin-bottom: 20px; }
#aidmare #istanga .aid-quest-card { padding: 22px 26px 24px; }
#aidmare #istanga .aid-quest-titlu { font-size: 30px; }
#aidmare #istanga .aid-quest-poveste { font-size: 16px; line-height: 1.55; }
#aidmare #istanga .aid-quest-obiectiv > b { font-size: 16px; }
#aidmare #istanga .aid-quest-bara { height: 14px; border-radius: 7px; }
#aidmare #istanga .aid-quest-recompensa > b { font-size: 15px; }
#aidmare #istanga .aid-quest-actiune .aid-btn { min-height: 40px; padding: 9px 30px; font-size: 16px; border-radius: 14px; }
/* in panoul mic (daca vreodata ajunge acolo) portretul ramane la 96 */
#istanga .aid-quest-portret img { width: 96px; height: 96px; }
#aidmare #istanga .aid-quest-portret img { width: 160px; height: 160px; }
/* jurnalul e drumul inapoi; foaia nu-l mai repeta jos */
#aidmare[data-ecran="quest"] #istanga .aid-quest-jos { display: none; }

/* --- CARTEA DE BASM (17 sept 2026): personajul intreg pe foaia questului -----
 * Doua coloane pe tot ecranul: scena cu figura (-mare.png, ~400px inalt) in
 * stanga, replica + povestea + butonul in dreapta. In panoul mic figura nu
 * exista (display none) si antetul cu portret rotund ramane cum era. */
#istanga .aid-quest-figura { display: none; }
#aidmare #istanga .aid-quest-carte {
	display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 30px; align-items: start;
}
#aidmare #istanga .aid-quest-scena { position: sticky; top: 0; }
#aidmare #istanga .aid-quest-figura {
	position: relative; display: flex; align-items: flex-end; justify-content: center;
	height: 430px; margin: 0 0 12px; border-radius: 18px; overflow: hidden;
	background:
		radial-gradient(ellipse 70% 40% at 50% 100%, color-mix(in srgb, var(--aid-npc, #d69f28) 55%, transparent) 0%, transparent 70%),
		radial-gradient(ellipse 90% 80% at 50% 30%, color-mix(in srgb, var(--aid-npc, #d69f28) 22%, transparent) 0%, transparent 75%),
		linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .55) 100%);
	box-shadow: inset 0 0 0 1px rgba(214, 159, 40, .35), inset 0 1px 0 rgba(255, 226, 178, .12), 0 10px 30px rgba(0, 0, 0, .45);
}
/* pamantul: o elipsa sub talpi, ca sa nu pluteasca */
#aidmare #istanga .aid-quest-figura::before {
	content: ''; position: absolute; left: 50%; bottom: 14px; width: 62%; height: 22px;
	transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 70%);
}
#aidmare #istanga .aid-quest-figura img {
	position: relative; display: block; max-height: 400px; max-width: 92%; width: auto; height: auto; margin-bottom: 18px;
	filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
	/* fara animatie: „se misca greu, fiind mare" -- o poza de 400px cu drop-shadow
	   redesenata la fiecare cadru e scumpa; sta nemiscata, ca o ilustratie */
}
/* sub figura: numele si locul; portretul rotund nu se mai repeta */
#aidmare #istanga .aid-quest-scena .aid-quest-portret { display: none; }
#aidmare #istanga .aid-quest-scena .aid-quest-cap { margin: 0; padding: 0 6px; }
#aidmare #istanga .aid-quest-scena .aid-quest-nume { font-size: 24px; line-height: 1.1; }
#aidmare #istanga .aid-quest-corp { min-width: 0; }
#aidmare #istanga .aid-quest-corp .aid-quest-replica { margin-top: 4px; font-size: 18px; }
@media (max-width: 760px) {
	#aidmare #istanga .aid-quest-carte { grid-template-columns: 1fr; gap: 16px; }
	#aidmare #istanga .aid-quest-scena { position: static; }
	#aidmare #istanga .aid-quest-figura { height: 300px; }
	#aidmare #istanga .aid-quest-figura img { max-height: 272px; }
}
/* --- miniwiki-ul din jurnal („Cum merg?”) --------------------------------- */
#istanga .aid-col-fila-cum { margin-left: auto; }
#istanga .aid-wiki { max-width: 760px; margin: 0 auto; font-size: 14px; line-height: 1.55; color: var(--aid-text); }
#istanga .aid-wiki-sec { margin: 0 0 22px; padding: 16px 20px 18px; border-radius: var(--aid-raza-mare); background: rgba(0, 0, 0, .25); border: 1px solid rgba(214, 159, 40, .18); }
#istanga .aid-wiki-sec h3 { margin: 0 0 8px; font-family: var(--aid-font-titlu); font-size: 22px; color: var(--aid-aur); text-shadow: var(--aid-titlu-umbra); }
#istanga .aid-wiki-sec p { margin: 0 0 10px; }
#istanga .aid-wiki-nota { font-size: 13px; color: var(--aid-text-slab); }
#istanga .aid-wiki-bula { display: inline-block; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px 10px 10px 3px; background: linear-gradient(180deg, #ffe08a, var(--aid-aur)); color: #1a1400; font: bold 12px/20px var(--aid-font-cifre), serif; text-align: center; vertical-align: -3px; }
#istanga .aid-wiki-bula-lucru { background: linear-gradient(180deg, #d9d2bd, #9d9377); }
#istanga .aid-wiki-bula-gata { background: linear-gradient(180deg, #a6f0a0, #3c9a3c); color: #062406; }
#istanga .aid-wiki-npc { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; margin: 10px 0 12px; }
#istanga .aid-wiki-card { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--aid-raza); background: rgba(0, 0, 0, .28); opacity: .78; }
#istanga .aid-wiki-card-acum { opacity: 1; border: 1px solid rgba(214, 159, 40, .45); }
#istanga .aid-wiki-card-corp { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#istanga .aid-wiki-card-corp b { font-family: var(--aid-font-titlu); font-size: 15px; color: var(--aid-text-tare); }
#istanga .aid-wiki-unde { font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-wiki-despre { font-size: 12px; color: var(--aid-text); }
#istanga .aid-wiki-nivel { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--aid-aur-stins); }
#istanga .aid-wiki-card-acum .aid-wiki-nivel { color: #a6f0a0; }
#istanga .aid-wiki-tipuri { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 8px 0; }
#istanga .aid-wiki-tipuri dt { font-weight: bold; color: var(--aid-aur); white-space: nowrap; }
#istanga .aid-wiki-tipuri dt small { font-weight: normal; color: var(--aid-text-slab); font-variant-numeric: tabular-nums; }
#istanga .aid-wiki-tipuri dd { margin: 0; }
#istanga .aid-wiki-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
#istanga .aid-wiki-cifre > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--aid-raza); background: rgba(0, 0, 0, .3); text-align: center; }
#istanga .aid-wiki-cifre small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--aid-aur-stins); }
#istanga .aid-wiki-cifre b { font-family: var(--aid-font-cifre); font-size: 18px; color: var(--aid-text-tare); font-variant-numeric: tabular-nums; }
#istanga .aid-wiki-sezon { margin: 4px 0 0; padding-left: 18px; }
#istanga .aid-wiki-sezon li { margin: 2px 0; }

/* ==========================================================================
 *  WIKI AI DRACI -- ghidul jocului, pe site-ul public (homewiki.php)
 *  16 sept 2026. Prefixul aid-w-. Culorile sunt ale paginii de acasa (--ac-*).
 * ========================================================================== */
body.aid-acasa #homeinclude .aid-w { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; padding: 0; background: none; box-shadow: none; }
body.aid-acasa #homeinclude .aid-w-cuprins { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
body.aid-acasa #homeinclude .aid-w-cuprins-titlu { display: block; margin: 4px 10px 10px; font-family: var(--ac-titlu); font-size: 20px; color: var(--ac-pergament); text-decoration: none; }
body.aid-acasa #homeinclude .aid-w-cuprins-titlu.pe { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-w-cap { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--ac-salvie); text-decoration: none; font-size: 13.5px; line-height: 1.25; }
body.aid-acasa #homeinclude .aid-w-cap svg { width: 18px; height: 18px; flex: none; opacity: .8; }
body.aid-acasa #homeinclude .aid-w-cap:hover { color: var(--ac-pergament); background: var(--ac-panou-sus); }
body.aid-acasa #homeinclude .aid-w-cap.pe { color: var(--ac-chihlimbar); background: var(--ac-panou-sus); box-shadow: inset 2px 0 0 var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-w-articol { min-width: 0; max-width: 820px; }
body.aid-acasa #homeinclude .aid-w-articol h1 { margin: 0 0 4px; font-size: 34px; line-height: 1.1; }
body.aid-acasa #homeinclude .aid-w-fir { margin: 0 0 6px; font-size: 12px; color: var(--ac-salvie-jos); font-family: var(--ac-mono); }
body.aid-acasa #homeinclude .aid-w-fir a { color: var(--ac-salvie); text-decoration: none; }
body.aid-acasa #homeinclude .aid-w-sub { margin: 0 0 22px; font-size: 15px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-w-articol h2 { margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--ac-muchie); font-size: 24px; }
body.aid-acasa #homeinclude .aid-w-articol h3 { margin: 22px 0 8px; font-size: 19px; }
body.aid-acasa #homeinclude .aid-w-articol h3 small, body.aid-acasa #homeinclude .aid-w-articol h2 small { font-size: 12px; color: var(--ac-salvie-jos); font-family: var(--ac-mono); margin-left: 8px; }
body.aid-acasa #homeinclude .aid-w-articol p { margin: 0 0 12px; max-width: 70ch; }
body.aid-acasa #homeinclude .aid-w-nota { font-size: 12.5px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-w-intro { margin-bottom: 18px; }
/* cuprinsul: cardurile */
body.aid-acasa #homeinclude .aid-w-grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 8px 0 18px; }
body.aid-acasa #homeinclude .aid-w-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou-sus); color: var(--ac-pergament); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
body.aid-acasa #homeinclude .aid-w-card:hover { border-color: var(--ac-chihlimbar-jos); transform: translateY(-2px); }
body.aid-acasa #homeinclude .aid-w-card-ic { width: 30px; height: 30px; color: var(--ac-chihlimbar); margin-bottom: 4px; }
body.aid-acasa #homeinclude .aid-w-card-ic svg { width: 30px; height: 30px; }
body.aid-acasa #homeinclude .aid-w-card b { font-family: var(--ac-titlu); font-size: 17px; }
body.aid-acasa #homeinclude .aid-w-card small { font-size: 12.5px; color: var(--ac-salvie); line-height: 1.4; }
/* liste definitie, tabele, pasi */
body.aid-acasa #homeinclude .aid-w-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 10px 0 14px; }
body.aid-acasa #homeinclude .aid-w-lista dt { font-weight: bold; color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-w-lista dt small { font-weight: normal; color: var(--ac-salvie-jos); font-family: var(--ac-mono); font-size: 11px; }
body.aid-acasa #homeinclude .aid-w-lista dd { margin: 0; }
body.aid-acasa #homeinclude .aid-w-tabel { border-collapse: collapse; margin: 8px 0 14px; font-size: 13px; }
body.aid-acasa #homeinclude .aid-w-tabel th, body.aid-acasa #homeinclude .aid-w-tabel td { padding: 6px 12px; border-bottom: 1px solid var(--ac-muchie); text-align: left; }
body.aid-acasa #homeinclude .aid-w-tabel th { font-family: var(--ac-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-salvie-jos); font-weight: normal; }
body.aid-acasa #homeinclude .aid-w-tabel td:not(:first-child), body.aid-acasa #homeinclude .aid-w-tabel th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--ac-mono); font-size: 12.5px; }
body.aid-acasa #homeinclude .aid-w-tabel-mic td, body.aid-acasa #homeinclude .aid-w-tabel-mic th { padding: 4px 10px; }
body.aid-acasa #homeinclude .aid-w-cost td { color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-w-plus { color: var(--ac-viu); } body.aid-acasa #homeinclude .aid-w-minus { color: var(--ac-jar); }
body.aid-acasa #homeinclude .aid-w-pasi-lista { padding-left: 22px; } body.aid-acasa #homeinclude .aid-w-pasi-lista li { margin: 0 0 8px; }
body.aid-acasa #homeinclude .aid-w-sfaturi { padding-left: 20px; } body.aid-acasa #homeinclude .aid-w-sfaturi li { margin: 0 0 6px; }
/* cladirile */
body.aid-acasa #homeinclude .aid-w-cladire { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; margin: 14px 0; padding: 14px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou-sus); }
body.aid-acasa #homeinclude .aid-w-cladire-poza { display: flex; align-items: center; justify-content: center; }
body.aid-acasa #homeinclude .aid-w-cladire-poza img { max-width: 150px; max-height: 150px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
body.aid-acasa #homeinclude .aid-w-cladire h3 { margin: 0 0 6px; }
body.aid-acasa #homeinclude .aid-w-cladire .aid-w-tabel { margin-bottom: 0; }
/* obiectele (artefacte, potiuni, elemente) */
body.aid-acasa #homeinclude .aid-w-treapta { display: flex; align-items: baseline; gap: 8px; }
body.aid-acasa #homeinclude .aid-w-treapta-legendar { color: #ffb34d; } body.aid-acasa #homeinclude .aid-w-treapta-epic { color: #c99cff; } body.aid-acasa #homeinclude .aid-w-treapta-rar { color: #7fc1ff; } body.aid-acasa #homeinclude .aid-w-treapta-premium { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-w-obiecte { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin: 8px 0 18px; }
body.aid-acasa #homeinclude .aid-w-obiect { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou-sus); color: var(--ac-pergament); text-decoration: none; }
body.aid-acasa #homeinclude a.aid-w-obiect:hover { border-color: var(--ac-chihlimbar-jos); }
body.aid-acasa #homeinclude .aid-w-obiect-poza { flex: none; width: 56px; height: 56px; }
body.aid-acasa #homeinclude .aid-w-obiect-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.aid-acasa #homeinclude .aid-w-obiect-text b { font-size: 14px; } body.aid-acasa #homeinclude .aid-w-obiect-text small { font-size: 12px; color: var(--ac-salvie); line-height: 1.35; }
body.aid-acasa #homeinclude .aid-w-obiect-nota { color: var(--ac-salvie-jos) !important; font-family: var(--ac-mono); font-size: 11px !important; }
body.aid-acasa #homeinclude .aid-w-eticheta { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: rgba(226, 98, 43, .2); color: var(--ac-jar); font: 10px/16px var(--ac-mono); letter-spacing: .04em; vertical-align: 2px; }
body.aid-acasa #homeinclude .aid-w-eticheta-premium { background: rgba(240, 180, 74, .18); color: var(--ac-chihlimbar); }
/* personajele questurilor, premiile, glosarul */
body.aid-acasa #homeinclude .aid-w-npc { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin: 8px 0 14px; }
body.aid-acasa #homeinclude .aid-w-npc-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou-sus); }
body.aid-acasa #homeinclude .aid-w-npc-card img { flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--aid-npc, var(--ac-chihlimbar-jos)); }
body.aid-acasa #homeinclude .aid-w-npc-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.aid-acasa #homeinclude .aid-w-npc-card b { font-family: var(--ac-titlu); font-size: 16px; }
body.aid-acasa #homeinclude .aid-w-npc-card small { font-size: 12px; color: var(--ac-salvie); line-height: 1.35; }
body.aid-acasa #homeinclude .aid-w-npc-despre { color: var(--ac-pergament) !important; }
body.aid-acasa #homeinclude .aid-w-npc-nivel { font-family: var(--ac-mono); font-size: 11px !important; color: var(--ac-chihlimbar-jos) !important; text-transform: uppercase; letter-spacing: .04em; }
body.aid-acasa #homeinclude .aid-w-bula { display: inline-block; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px 10px 10px 3px; background: linear-gradient(180deg, #ffe08a, #d69f28); color: #1a1400; font: bold 12px/20px var(--ac-mono); text-align: center; vertical-align: -3px; }
body.aid-acasa #homeinclude .aid-w-bula-lucru { background: linear-gradient(180deg, #d9d2bd, #9d9377); }
body.aid-acasa #homeinclude .aid-w-bula-gata { background: linear-gradient(180deg, #a6f0a0, #3c9a3c); color: #062406; }
body.aid-acasa #homeinclude .aid-w-premii { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 8px 0 18px; }
body.aid-acasa #homeinclude .aid-w-premiu { padding: 12px 14px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou-sus); font-size: 13px; }
body.aid-acasa #homeinclude .aid-w-premiu h4 { margin: 0 0 6px; font-family: var(--ac-titlu); font-size: 17px; color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-w-premiu p { margin: 0 0 4px; font-size: 13px; }
/* „De ce așa" e context, nu regulă: se citește dacă vrei, nu te împiedică dacă
   nu vrei. Puțin mai stins și puțin mai jos decât restul fișei. */
body.aid-acasa #homeinclude .aid-w-premiu .aid-w-dece {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ac-muchie);
	color: color-mix(in srgb, currentColor 72%, transparent);
}
body.aid-acasa #homeinclude .aid-w-premiu ul { margin: 6px 0 0; padding-left: 18px; }
body.aid-acasa #homeinclude .aid-w-premiu code { font-family: var(--ac-mono); font-size: 11.5px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-w-glosar { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; }
body.aid-acasa #homeinclude .aid-w-glosar dt { font-weight: bold; color: var(--ac-chihlimbar); } body.aid-acasa #homeinclude .aid-w-glosar dd { margin: 0; }
/* inainte / mai departe */
body.aid-acasa #homeinclude .aid-w-pasi { display: flex; justify-content: space-between; gap: 12px; margin: 30px 0 4px; padding-top: 16px; border-top: 1px solid var(--ac-muchie); }
body.aid-acasa #homeinclude .aid-w-pasi a { color: var(--ac-chihlimbar); text-decoration: none; font-family: var(--ac-titlu); font-size: 16px; }
body.aid-acasa #homeinclude .aid-w-mai { margin-left: auto; }
@media (max-width: 760px) {
	body.aid-acasa #homeinclude .aid-w { grid-template-columns: 1fr; gap: 12px; }
	body.aid-acasa #homeinclude .aid-w-cuprins { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
	body.aid-acasa #homeinclude .aid-w-cuprins-titlu { flex-basis: 100%; margin: 0 4px 4px; }
	body.aid-acasa #homeinclude .aid-w-cap { padding: 6px 8px; font-size: 12px; }
	body.aid-acasa #homeinclude .aid-w-cap span { white-space: nowrap; }
	body.aid-acasa #homeinclude .aid-w-cladire { grid-template-columns: 1fr; }
	body.aid-acasa #homeinclude .aid-w-lista, body.aid-acasa #homeinclude .aid-w-glosar { grid-template-columns: 1fr; gap: 2px 0; }
	body.aid-acasa #homeinclude .aid-w-lista dd, body.aid-acasa #homeinclude .aid-w-glosar dd { margin-bottom: 8px; }
	body.aid-acasa #homeinclude .aid-w-tabel { display: block; overflow-x: auto; }
}
/* --- „Cum obții” pe site-ul public (homeartefact, homepotiune, wiki) ------
 * acelasi marcaj ca in joc (Izvoare::html), hainele paginii de acasa */
body.aid-acasa #homeinclude .aid-cum { margin: 22px 0 8px; text-align: left; }
body.aid-acasa #homeinclude .aid-cum h3 { margin: 0 0 4px; font-family: var(--ac-titlu); font-size: 20px; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
body.aid-acasa #homeinclude .aid-cum-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--ac-salvie); line-height: 1.5; }
body.aid-acasa #homeinclude .aid-izvoare { display: flex; flex-direction: column; gap: 1px; background: var(--ac-muchie); border: 1px solid var(--ac-muchie); border-radius: 8px; overflow: hidden; }
body.aid-acasa #homeinclude .aid-izvor { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--ac-panou-sus); }
body.aid-acasa #homeinclude .aid-izvor:hover { background: #22382A; }
body.aid-acasa #homeinclude .aid-iz-ic { flex: 0 0 20px; height: 20px; color: var(--ac-salvie); line-height: 0; }
body.aid-acasa #homeinclude .aid-izvor:hover .aid-iz-ic { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-iz-ic svg { display: block; }
body.aid-acasa #homeinclude .aid-iz-unde { flex: 1 1 auto; min-width: 0; }
body.aid-acasa #homeinclude .aid-iz-unde > b { display: block; color: var(--ac-pergament); font-size: 14px; }
body.aid-acasa #homeinclude .aid-iz-unde span { display: block; color: var(--ac-salvie); font-size: 12.5px; line-height: 1.45; }
body.aid-acasa #homeinclude .aid-iz-unde a { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-iz-b { flex: 0 0 150px; text-align: right; font-family: var(--ac-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ac-chihlimbar); line-height: 1.3; }
body.aid-acasa #homeinclude .aid-izvor-cap { padding-top: 7px; padding-bottom: 7px; background: var(--ac-panou); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-salvie-jos); }
body.aid-acasa #homeinclude .aid-izvor-cap:hover { background: var(--ac-panou); }
body.aid-acasa #homeinclude .aid-izvor-cap .aid-iz-b { color: var(--ac-salvie-jos); font-size: 10.5px; font-family: var(--ac-mono); }
@media (max-width: 600px) {
	body.aid-acasa #homeinclude .aid-izvor { flex-wrap: wrap; }
	body.aid-acasa #homeinclude .aid-iz-b { flex-basis: 100%; text-align: left; padding-left: 34px; }
}

/* ==========================================================================
 *  NOUTĂȚI -- anunțurile jocului, pe site-ul public (homenoutati.php)
 *  18 sept 2026. Prefixul aid-nout-. Culorile sunt ale paginii de acasă (--ac-*).
 *
 *  „Trebuie o sectiune faina, cu o coloana pe stanga cu data si un titlu al
 *   anuntului.”
 *
 *  Coloana din stânga e o dată așezată pe trei rânduri -- ziua mare, luna sub
 *  ea, anul mic dedesubt -- și e ancorată la o lățime fixă, ca toate datele din
 *  listă să cadă pe aceeași verticală. Asta e tot ce face o listă de anunțuri
 *  lizibilă: ochiul coboară pe coloana de date și se oprește unde vrea.
 *
 *  Pe telefon coloana se culcă deasupra titlului și devine o singură linie. O
 *  bandă de 92px lângă un titlu de patruzeci de caractere nu e o listă, e un
 *  accident; sub 640px se schimbă rândul cu totul.
 * ========================================================================== */
body.aid-acasa #homeinclude .aid-nout { padding: 0; background: none; box-shadow: none; }

body.aid-acasa #homeinclude .aid-nout-antet { max-width: 84ch; margin: 0 0 30px; }
body.aid-acasa #homeinclude .aid-nout-antet h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.1; }
body.aid-acasa #homeinclude .aid-nout-antet p { margin: 0; font-size: 15px; color: var(--ac-salvie); }

/* ---------------------------------------------------------------- lista
 *
 *  LĂȚIMEA, A DOUA OARĂ (19 septembrie 2026). „mareste, te rog, pe desktop
 *  latimea noutatilor (avem loc destul si pentru data pe o linie si pentru text
 *  care sa umple restul spatiului pana in dreapta)."
 *
 *  Avea dreptate de două ori. Lista are 1142 de pixeli, iar din ei coloana de
 *  text folosea 541 -- `max-width: 72ch` scris pentru o pagină îngustă, deci
 *  jumătate de ecran gol la dreapta. Iar data stătea pe trei rânduri (ziua mare,
 *  luna, anul) într-o bandă de 92px și înălța rândul cu 64 de pixeli degeaba,
 *  când pe o linie încape de două ori.
 *
 *  Deci: banda de dată crește cât să țină „18 septembrie 2026" pe un rând, cu
 *  ziua tot în chihlimbar și tot pe aceeași verticală la toate rândurile, iar
 *  textul ia restul, fără niciun plafon. O linie de o sută de caractere ar fi
 *  prea lungă pentru proză, dar aici nu e proză: rezumatul e `varchar(400)`, îl
 *  scurtează și `Noutati::extras()`, deci sunt două rânduri oricât de late le-ai
 *  face. Plafonul ar fi lăsat doar o dungă goală la dreapta -- exact ce se
 *  cerea să nu mai fie. Corpul articolului, care CHIAR e proză, își ține în
 *  continuare măsura lui (`.aid-nout-corp p { max-width: 70ch }`). */
body.aid-acasa #homeinclude .aid-nout-lista { display: flex; flex-direction: column; }
body.aid-acasa #homeinclude .aid-nout-rand {
	display: grid;
	grid-template-columns: 172px minmax(0, 1fr);
	gap: 0 26px;
	padding: 22px 0;
	border-top: 1px solid var(--ac-muchie);
}
body.aid-acasa #homeinclude .aid-nout-rand:first-child { border-top: 0; padding-top: 4px; }
body.aid-acasa #homeinclude .aid-nout-cand time {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding-top: 6px;
	text-align: left;
	font-family: var(--ac-mono);
	line-height: 1.15;
	white-space: nowrap;
}
body.aid-acasa #homeinclude .aid-nout-cand b {
	font-family: var(--ac-titlu);
	font-size: 21px;
	font-weight: 400;
	color: var(--ac-chihlimbar);
	font-variant-numeric: tabular-nums;
}
body.aid-acasa #homeinclude .aid-nout-cand span { font-size: 13px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-nout-cand i { font-style: normal; font-size: 12px; color: var(--ac-salvie-jos); }
body.aid-acasa #homeinclude .aid-nout-ce { min-width: 0; }
body.aid-acasa #homeinclude .aid-nout-ce h2 { margin: 0 0 6px; font-size: 23px; line-height: 1.2; }
body.aid-acasa #homeinclude .aid-nout-ce h2 a { color: var(--ac-pergament); text-decoration: none; }
body.aid-acasa #homeinclude .aid-nout-ce h2 a:hover { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-nout-ce p { margin: 0 0 8px; font-size: 14.5px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-nout-mai { font-size: 13px; color: var(--ac-chihlimbar); text-decoration: none; }
body.aid-acasa #homeinclude .aid-nout-mai:hover { text-decoration: underline; }
body.aid-acasa #homeinclude .aid-nout-gol { padding: 40px 0; color: var(--ac-salvie); }

/* -------------------------------------------------------------- articolul */
body.aid-acasa #homeinclude .aid-nout-fir { margin: 0 0 6px; font-size: 12px; color: var(--ac-salvie-jos); font-family: var(--ac-mono); }
body.aid-acasa #homeinclude .aid-nout-fir a { color: var(--ac-salvie); text-decoration: none; }
body.aid-acasa #homeinclude .aid-nout-articol { min-width: 0; max-width: 820px; }
body.aid-acasa #homeinclude .aid-nout-cap { margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--ac-muchie); }
body.aid-acasa #homeinclude .aid-nout-cap time { display: block; margin-bottom: 6px; font-family: var(--ac-mono); font-size: 12.5px; color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-nout-cap h1 { margin: 0; font-size: 34px; line-height: 1.12; }
body.aid-acasa #homeinclude .aid-nout-rezumat { margin: 10px 0 0; font-size: 16px; color: var(--ac-salvie); max-width: 66ch; }

/* corpul e HTML scris in panou: elementele pe care le poate folosi, imbracate
   o data aici, ca sa nu fie nevoie de stiluri scrise in articol */
body.aid-acasa #homeinclude .aid-nout-corp { font-size: 15px; line-height: 1.65; }
body.aid-acasa #homeinclude .aid-nout-corp p { margin: 0 0 14px; max-width: 70ch; }
body.aid-acasa #homeinclude .aid-nout-corp h2 { margin: 32px 0 10px; padding-top: 18px; border-top: 1px solid var(--ac-muchie); font-size: 24px; }
body.aid-acasa #homeinclude .aid-nout-corp h3 { margin: 22px 0 8px; font-size: 18px; color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-nout-corp ul,
body.aid-acasa #homeinclude .aid-nout-corp ol { margin: 0 0 14px; padding-left: 20px; max-width: 70ch; }
body.aid-acasa #homeinclude .aid-nout-corp li { margin: 0 0 7px; }
body.aid-acasa #homeinclude .aid-nout-corp li > b,
body.aid-acasa #homeinclude .aid-nout-corp li > strong { color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-nout-corp img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0 16px; border: 1px solid var(--ac-muchie); }
body.aid-acasa #homeinclude .aid-nout-corp blockquote {
	margin: 18px 0; padding: 2px 0 2px 16px;
	border-left: 2px solid var(--ac-chihlimbar-jos);
	color: var(--ac-salvie); font-style: italic;
}
body.aid-acasa #homeinclude .aid-nout-corp hr { border: 0; border-top: 1px solid var(--ac-muchie); margin: 26px 0; }
body.aid-acasa #homeinclude .aid-nout-corp a { color: var(--ac-chihlimbar); }

/* ----------------------------------------- foaia unui articol: doua coloane
 *
 * „as propune sa dai div-ul articolului mai in dreapta, ca e loc, iar pe o
 *  coloana, in stanga, sa fie datele si titlurile noutatilor, sa poti da click
 *  de acolo pe altele, cand vor fi.”
 *
 * Aceeasi grila ca la wiki (220px + restul), din acelasi motiv: cu 1180px de
 * pagina, un text de 70 de caractere lasa o treime goala la dreapta, iar acolo
 * incape exact ce lipsea -- drumul spre celelalte anunturi, fara sa te intorci
 * la lista.
 *
 * Sina e lipicioasa si are derulare proprie cand lista creste, ca sa nu
 * intinda pagina in locul articolului. */
body.aid-acasa #homeinclude .aid-nout-doua { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; }
body.aid-acasa #homeinclude .aid-nout-sina {
	position: sticky; top: 16px; align-self: start;
	display: flex; flex-direction: column; gap: 2px;
	max-height: calc(100vh - 32px); overflow-y: auto;
	padding: 6px 0;
}
body.aid-acasa #homeinclude .aid-nout-sina-titlu {
	display: block; margin: 4px 10px 10px;
	font-family: var(--ac-titlu); font-size: 20px;
	color: var(--ac-pergament); text-decoration: none;
}
body.aid-acasa #homeinclude .aid-nout-sina-titlu:hover { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-nout-sina-rand {
	display: block; padding: 7px 10px; border-radius: 6px;
	color: var(--ac-salvie); text-decoration: none;
}
body.aid-acasa #homeinclude .aid-nout-sina-rand:hover { color: var(--ac-pergament); background: var(--ac-panou-sus); }
body.aid-acasa #homeinclude .aid-nout-sina-rand.pe {
	color: var(--ac-chihlimbar); background: var(--ac-panou-sus);
	box-shadow: inset 2px 0 0 var(--ac-chihlimbar);
}
body.aid-acasa #homeinclude .aid-nout-sina-data {
	display: block; font-family: var(--ac-mono); font-size: 11px;
	color: var(--ac-salvie-jos); letter-spacing: .02em;
}
body.aid-acasa #homeinclude .aid-nout-sina-data i { font-style: normal; opacity: .75; }
body.aid-acasa #homeinclude .aid-nout-sina-rand.pe .aid-nout-sina-data { color: var(--ac-chihlimbar-jos); }
body.aid-acasa #homeinclude .aid-nout-sina-titlu-mic { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.3; }

/* PE TELEFON ȘINA TRECE SUB ARTICOL, nu deasupra lui. O coloană de navigație
   pusă înaintea textului ar însemna să treci prin lista tuturor anunțurilor ca
   să ajungi la cel pe care tocmai l-ai deschis. `order` o mută dedesubt fără
   să schimbe sursa, unde locul ei logic e înainte -- la fel o citește și un
   cititor de ecran pe desktop. Cel deschis nu mai are rost în listă acolo. */
@media (max-width: 760px) {
	body.aid-acasa #homeinclude .aid-nout-doua { grid-template-columns: 1fr; gap: 0; }
	body.aid-acasa #homeinclude .aid-nout-sina {
		order: 2; position: static; max-height: none; overflow: visible;
		margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--ac-muchie);
	}
	body.aid-acasa #homeinclude .aid-nout-sina-titlu { margin: 0 0 8px; font-size: 17px; color: var(--ac-salvie); }
	body.aid-acasa #homeinclude .aid-nout-sina-rand { padding: 8px 10px; }
	body.aid-acasa #homeinclude .aid-nout-sina-rand.pe { display: none; }
}
@media (max-width: 640px) {
	body.aid-acasa #homeinclude .aid-nout-rand { grid-template-columns: 1fr; gap: 6px; }
	body.aid-acasa #homeinclude .aid-nout-cand time { display: flex; align-items: baseline; gap: 6px; text-align: left; padding-top: 0; }
	body.aid-acasa #homeinclude .aid-nout-cand b { font-size: 17px; }
	body.aid-acasa #homeinclude .aid-nout-cand span,
	body.aid-acasa #homeinclude .aid-nout-cand i { font-size: 12px; }
	body.aid-acasa #homeinclude .aid-nout-antet h1,
	body.aid-acasa #homeinclude .aid-nout-cap h1 { font-size: 26px; }
	body.aid-acasa #homeinclude .aid-nout-ce h2 { font-size: 19px; }
}

/* ===========================================================================
 *  FEREASTRA DE FINAL A MINIJOCURILOR (18 septembrie 2026)
 *
 *  „in ecranul de final de joc, cu acele rays pe fundal -> nu se vede prea
 *   bine textul; propun sa fie ca un popup peste jocul abia terminat si
 *   divurile textelor din popup sa fie opace, ca sa vedem textul mai bine.
 *   razele pot ramane pe fundal; toate textele de acolo ar trebui sa aiba un
 *   div opac, inclusiv butoanele.”
 *
 *  Cardul de final (.aid-sd-rezultat) e acelasi la toate patru jocurile --
 *  sudoku, Ai Memorie, Etajul 2048, Trivia -- deci si fereastra e una singura.
 *  JS-ul il inveleste acum in .aid-jocfin; restul e aici.
 *
 *  ABSOLUT, NU FIX. Scrimul acopera JOCUL, nu ecranul: asta a cerut („peste
 *  jocul abia terminat”), si e si singurul care tine. `position: fixed` intra
 *  in conflict cu orice stramos care are transform sau filter -- rama de
 *  telefon are -- si atunci „fix” se ancoreaza la stramos, nu la ecran, in
 *  locuri greu de prevazut. JS-ul pune `position: relative` pe gazda inainte
 *  de a atasa fereastra, deci ancora e sigura.
 *
 *  BLOCURILE OPACE. Razele raman sa se invarta pe fundal, dar fiecare bucata
 *  de text primeste plinta ei -- titlul, scorul, recordul, nota, randul cu
 *  locul in clasament si bara de butoane. Nu o transparenta „aproape opaca”:
 *  razele trec prin 12% la fel de bine ca prin 100%, si exact aia era
 *  plangerea.
 * =========================================================================== */
#istanga .aid-jocfin {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	/* DERULAREA E A FERESTREI, NU A CARDULUI (18 sept 2026, la al doilea tur).
	   Cardul trebuie sa ramana `overflow: hidden` -- razele sunt late de 260%
	   din el si inalte pe masura, si asa au fost dintotdeauna taiate de rama
	   verdictului. Cand cardul a primit `overflow: auto` ca sa incapa pe ecrane
	   mici, razele au devenit continut derulabil si au scos doua bare de
	   derulare, una pe verticala si una pe orizontala, pe un card care de fapt
	   incapea („sunt insa niste scrollbars ciudate si vertical si orizontal").
	   Acum fereastra e cea care deruleaza, si numai cand chiar nu incape.
	   `margin: auto` pe card in loc de `align-items: center`: centrat cat
	   incape, dar fara sa i se taie capul cand nu incape -- centrarea pe flex
	   taie peste marginea de sus, marginea automata nu. */
	overflow: auto;
	overscroll-behavior: contain;
	padding: 16px;
	background: rgba(6, 8, 6, 0.74);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
	animation: aid-jocfin-vine 0.18s ease-out;
}
/* Gazda creste cat sa incapa fereastra, cand jocul e mai scund decat ea (sudoku
   4x4). Inaltimea vine din JS ca proprietate, dar se citeste NUMAI cat timp
   fereastra e copil -- deci nu ramane agatata de la un joc la altul. */
#istanga *:has(> .aid-jocfin) { min-height: var(--aid-jocfin-h, 0px); }
@keyframes aid-jocfin-vine { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #istanga .aid-jocfin { animation: none; } }

/* Cardul nu mai e nici rand in pagina, nici celula in grila arcadei: e
   continutul ferestrei. Selectorul are un id si doua clase ca sa treaca peste
   `#istanga .aid-sd-rezultat` de mai sus; varianta cu doua id-uri, peste
   regula de grila a arcadei (#aidjocuri #istanga .aid-sd-in-joc ...). */
#istanga .aid-jocfin .aid-sd-rezultat,
#aidjocuri #istanga .aid-jocfin .aid-sd-rezultat {
	position: relative;
	margin: auto;
	/* `box-sizing` explicit: cardul are 14px de padding de fiecare parte, si fara
	   el `width: 100%` iese cu 30px in afara ferestrei pe telefon -- exact bara
	   de derulare orizontala de care era vorba. */
	box-sizing: border-box;
	width: min(560px, 100%);
	max-width: 100%;
	max-height: none;
	overflow: hidden;
	flex: 0 0 auto;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		0 18px 50px rgba(0, 0, 0, 0.65);
}
/* Pe ecran mic fereastra ocupa cat poate, iar cardul se deruleaza in ea. */
@media (max-width: 700px) {
	#istanga .aid-jocfin { padding: 10px; }
	#istanga .aid-jocfin .aid-sd-rezultat,
	#aidjocuri #istanga .aid-jocfin .aid-sd-rezultat { width: 100%; }
}

/* Plinta de sub fiecare text. */
#istanga .aid-jocfin .aid-verdict-titlu,
#istanga .aid-jocfin .aid-sd-rez-scor,
#istanga .aid-jocfin .aid-verdict-rand,
#istanga .aid-jocfin .aid-sd-rez-nota,
#istanga .aid-jocfin .aid-sd-rez-actiuni {
	background: #0b0e0b;
	border-radius: 10px;
	padding: 7px 14px;
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.12);
}
#istanga .aid-jocfin .aid-verdict-titlu { padding: 8px 18px; }
#istanga .aid-jocfin .aid-sd-rez-actiuni { margin-top: 6px; padding: 8px 10px; }
/* Recordul si obiectul picat au deja culoarea lor de aur; li se pune numai
   fundul opac sub ea, ca sa nu se piarda nuanta. */
#istanga .aid-jocfin .aid-sd-rez-record {
	background: linear-gradient(rgba(255, 204, 0, 0.14), rgba(255, 204, 0, 0.14)), #0b0e0b;
}
#istanga .aid-jocfin .aid-sd-rez-magic {
	background: linear-gradient(rgba(255, 204, 0, 0.10), rgba(255, 204, 0, 0.10)), #0b0e0b;
}
#istanga .aid-jocfin .aid-sd-rez-premiu { background: #0b0e0b; }

/* ===========================================================================
 *  CAPUL DE COLOANA CU CIFRE, ALINIAT CA CIFRELE (18 septembrie 2026)
 *
 *  „coloana Jocuri (Runde la Trivia), de la Clasament, aliniaza dreapta, sa
 *   fie ca nr de jocuri de dedesubt (care e aliniat dreapta).”
 *
 *  Celulele purtau deja .aid-t-cifra si in cap, si in randuri. Ce le despartea
 *  era specificitatea: `#istanga tr.aid-cap > td` are si un selector de tip pe
 *  langa id si clasa, deci batea `#istanga .aid-t-cifra` si punea `left` peste
 *  `right`. De-aia .aid-top-lista are de mult o regula a ei pentru exact asta
 *  (linia 16350) -- acum e una singura, pentru toate tabelele: cele patru
 *  minijocuri si orice lista care mai vine.
 * =========================================================================== */
#istanga tr.aid-cap > td.aid-t-cifra,
#istanga tr.aid-cap > th.aid-t-cifra { text-align: right; }

/* ===========================================================================
 *  FINALUL DE RUNDĂ: PODIUMUL DIN TOPUL FINAL (18 septembrie 2026)
 *
 *  „Acolo putem face o animatie pt podium, in special pt locul 1. sa vada si
 *   campionul ca e cel mai tare acolo. putem pune si ceva sparks sau confetii
 *   discret."
 *
 *  Pagina asta e publică (`body.aid-afara`), nu panoul jocului — se vede și
 *  delogat, din bara de adrese, și e prima pe care o deschide cineva care
 *  vrea să afle cine a câștigat. De-aia totul e CSS: nu are rost să încarce
 *  aiddialog.js pentru șase particule, iar razele sunt `.aid-verdict-raze`,
 *  aceeași bucată pe care o folosesc raportul de bătălie și ecranele de final
 *  ale minijocurilor. Vine cu `prefers-reduced-motion` respectat deja.
 *
 *  ORDINEA E 2-1-3 ÎN MARKUP, ca locul întâi să stea în mijloc fără nicio
 *  acrobație — același truc ca la pagina de campioni. Pe telefon coloana
 *  n-are mijloc, deci `order` îl aduce pe campion primul.
 * =========================================================================== */
.aid-afara .aid-rfin-sub {
	margin: -6px 0 18px;
	font-size: 12px;
	line-height: 17px;
	color: var(--aid-text-stins, #97917a);
}

.aid-afara .aid-rfin-podium {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 14px;
	margin: 0 auto 26px;
	max-width: 560px;
	text-align: center;
}
.aid-afara .aid-rfin-card {
	position: relative;
	overflow: hidden;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 14px 10px 13px;
	border-radius: var(--aid-raza-panou, 10px);
	background: linear-gradient(180deg, #1a1d16 0%, #101309 100%);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 4px 14px rgba(0, 0, 0, 0.5);
}
/* Fiecare metal își are inelul lui; aurul primește și fundalul verde al
   verdictului câștigat, ca să se lege cu restul jocului. */
.aid-afara .aid-rfin-argint { box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.45), 0 4px 14px rgba(0, 0, 0, 0.5); }
.aid-afara .aid-rfin-bronz  { box-shadow: inset 0 0 0 1px rgba(205, 127, 50, 0.45), 0 4px 14px rgba(0, 0, 0, 0.5); }
.aid-afara .aid-rfin-aur {
	padding: 20px 12px 18px;
	margin-bottom: 6px;
	background: linear-gradient(180deg, #1d4a2b 0%, #123420 55%, #0a2415 100%);
	box-shadow:
		inset 0 0 0 1px var(--aid-aur-stins, #c69e0c),
		0 0 22px rgba(255, 200, 60, 0.22),
		0 8px 26px rgba(0, 0, 0, 0.6);
}

/* Razele, numai la campion. Clasa de bază vine de sus (poziție, mască,
   rotire, reduced-motion); aici e doar culoarea, fiindcă `.aid-verdict-raze`
   își ia vopseaua de la părintele `.aid-verdict-castig`, pe care aici nu-l
   avem. */
.aid-afara .aid-rfin-raze {
	background: repeating-conic-gradient(from 0deg,
		rgba(255, 214, 92, 0.30) 0deg 5deg,
		rgba(255, 214, 92, 0) 5deg 15deg);
}

/* Scânteile: șase, discrete, pornite decalat ca să nu pulseze la unison. */
.aid-afara .aid-rfin-scantei { position: absolute; inset: 0; pointer-events: none; }
.aid-afara .aid-rfin-scantei i {
	position: absolute;
	width: 4px; height: 4px;
	border-radius: 50%;
	background: #ffe9a8;
	box-shadow: 0 0 6px 2px rgba(255, 214, 92, 0.75);
	opacity: 0;
	animation: aid-rfin-scanteie 3.6s ease-in-out infinite;
}
.aid-afara .aid-rfin-scantei i:nth-child(1) { left: 14%; top: 22%; animation-delay: 0s; }
.aid-afara .aid-rfin-scantei i:nth-child(2) { left: 82%; top: 30%; animation-delay: .5s; }
.aid-afara .aid-rfin-scantei i:nth-child(3) { left: 30%; top: 72%; animation-delay: 1.1s; }
.aid-afara .aid-rfin-scantei i:nth-child(4) { left: 68%; top: 78%; animation-delay: 1.7s; }
.aid-afara .aid-rfin-scantei i:nth-child(5) { left: 50%; top: 12%; animation-delay: 2.3s; }
.aid-afara .aid-rfin-scantei i:nth-child(6) { left: 8%;  top: 56%; animation-delay: 2.9s; }
@keyframes aid-rfin-scanteie {
	0%, 100% { opacity: 0; transform: scale(.5); }
	12%      { opacity: 1; transform: scale(1); }
	30%      { opacity: 0; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
	.aid-afara .aid-rfin-scantei i { animation: none; opacity: .55; }
}

/* Textul stă peste raze: razele sunt absolute și fără z-index, deci orice
   copil poziționat le trece în față. */
.aid-afara .aid-rfin-medalie,
.aid-afara .aid-rfin-loc,
.aid-afara .aid-rfin-nume,
.aid-afara .aid-rfin-draci { position: relative; }

.aid-afara .aid-rfin-medalie img { display: block; width: 34px; height: 34px; }
.aid-afara .aid-rfin-aur .aid-rfin-medalie img { width: 44px; height: 44px; }
.aid-afara .aid-rfin-loc {
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--aid-text-stins, #97917a);
}
.aid-afara .aid-rfin-aur .aid-rfin-loc {
	color: #ffd76b;
	font-weight: bold;
	text-shadow: 0 0 14px rgba(255, 200, 60, 0.5);
}
.aid-afara .aid-rfin-nume { font-size: 15px; line-height: 20px; }
.aid-afara .aid-rfin-aur .aid-rfin-nume { font-size: 20px; line-height: 25px; }
.aid-afara .aid-rfin-nume a { color: var(--aid-text, #e6e0c8); text-decoration: none; }
.aid-afara .aid-rfin-aur .aid-rfin-nume a { color: #fff; }
.aid-afara .aid-rfin-nume a:hover { color: var(--aid-aur, #ffcc00); }
.aid-afara .aid-rfin-draci {
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--aid-aur, #ffcc00);
}
.aid-afara .aid-rfin-draci small { font-size: 10px; color: var(--aid-text-stins, #97917a); }

/* Rândul lui, oriunde ar fi în pagină. */
.aid-afara .aid-rfin-eu { outline: 1px solid var(--aid-aur, #ffcc00); outline-offset: 2px; }
.aid-afara .aid-rfin-salut {
	margin: -14px auto 24px;
	max-width: 560px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 204, 0, 0.12);
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c);
	color: #ffd76b;
	font-weight: bold;
}
.aid-afara .aid-rfin-lista { margin: 0 auto; }

@media (max-width: 560px) {
	.aid-afara .aid-rfin-podium { flex-direction: column; align-items: stretch; gap: 10px; }
	/* o coloană n-are mijloc: campionul urcă primul */
	.aid-afara .aid-rfin-aur { order: -1; margin-bottom: 0; }
	.aid-afara .aid-rfin-salut { margin-top: 0; }
}

/* ===========================================================================
 *  MEDALIILE DE PE PODIUM, ÎN PROFILUL PUBLIC (18 septembrie 2026)
 *
 *  „cei de pe podium primesc medalii care se tin minte. Medalia e ca un titlu.
 *   Ce putem face e sa punem aceste medalii in profilul jucatorului, in
 *   jucator.php — sa vada toti cate medalii are."
 *
 *  Stau deasupra pozei casei, în capul coloanei din stânga. `.aid-j-casa` e
 *  deja o coloană flex centrată, deci rândul se așază singur; nu se desenează
 *  deloc dacă omul n-a fost niciodată pe podium, așa că nu rămâne un gol care
 *  să spună „aici lipsește ceva".
 *
 *  Numărul e lângă medalie, nu pe ea: „🥇 2" se citește dintr-o privire, iar o
 *  cifră suprapusă peste o poză de 20px n-ar fi lizibilă pe telefon.
 * =========================================================================== */
#istanga .aid-j-medalii {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 2px;
}
#istanga .aid-j-medalie {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.42);
	box-shadow: inset 0 0 0 1px var(--aid-med-inel, rgba(255, 226, 178, 0.22));
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	line-height: 1;
	color: var(--aid-text, #e6e0c8);
}
#istanga .aid-j-medalie img { display: block; width: 20px; height: 20px; }
#istanga .aid-j-medalie b { font-weight: bold; color: var(--aid-med-text, #e6e0c8); }
/* Fiecare metal își dă inelul și culoarea cifrei — aceleași nuanțe ca medaliile
   mici din clasamente, ca să fie recunoscute fără legendă. */
#istanga .aid-j-medalie-aur    { --aid-med-inel: rgba(255, 204, 0, 0.55);   --aid-med-text: #ffd76b; }
#istanga .aid-j-medalie-argint { --aid-med-inel: rgba(223, 227, 230, 0.45); --aid-med-text: #dfe3e6; }
#istanga .aid-j-medalie-bronz  { --aid-med-inel: rgba(217, 149, 90, 0.45);  --aid-med-text: #d9955a; }

/* ===========================================================================
 *  TOPUL FINAL, ÎN JOC (18 septembrie 2026)
 *
 *  „ma gandeam sa fie in stilul top100 din gamescreen si ca aspect, cu rays
 *   sus, fullscreen, culorile de acolo si un altfel de campion."
 *
 *  Nu e un ecran nou: e `topactuali.php`, care după încheierea rundei citește
 *  din `Runde` în loc de clasamentul viu. Antetul cu raze și trofeul erau deja
 *  îmbrăcămintea potrivită pentru momentul ăsta — doar că nu apucaseră să-l
 *  întâlnească. Ce se adaugă aici e diferența dintre „cine e cel mai tare
 *  acum" și „cine a câștigat runda": o supratitlu, treapta de aur mai înaltă,
 *  eticheta „Campion" și un rând pentru cel care își vede propria victorie.
 * =========================================================================== */
#istanga .aid-top-supra {
	position: relative;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aid-aur-stins, #c69e0c);
	margin-bottom: 1px;
}
/* Antetul unui final e mai adânc: are un rând în plus și merită aerul. */
#istanga .aid-top-final .aid-top-antet { height: 98px; }
#istanga .aid-top-final .aid-top-trofeu { width: 64px; height: 64px; }
#istanga .aid-top-final .aid-top-titlu { font-size: 21px; line-height: 24px; }

/* Treapta de aur urcă, ca să se vadă de la distanță cine a luat runda. */
#istanga .aid-top-final .aid-podium-aur .aid-podium-treapta {
	height: 62px;
	box-shadow:
		inset 0 0 0 1px var(--aid-aur-stins, #c69e0c),
		inset 0 2px 0 rgba(255, 226, 178, 0.2),
		inset 0 0 34px rgba(255, 204, 0, 0.26),
		0 6px 16px rgba(0, 0, 0, 0.6);
}
#istanga .aid-top-final .aid-podium-argint .aid-podium-treapta { height: 38px; }
#istanga .aid-top-final .aid-podium-bronz .aid-podium-treapta { height: 26px; }
#istanga .aid-top-final .aid-podium-aur .aid-podium-nume { font-size: 21px; color: #fff; }

#istanga .aid-podium-eticheta {
	position: relative;
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: bold;
	color: #ffd76b;
	text-shadow: 0 0 12px rgba(255, 200, 60, 0.6);
}

#istanga .aid-top-salut {
	margin: 0 6px 14px;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 204, 0, 0.12);
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c);
	color: #ffd76b;
	font-weight: bold;
	text-align: center;
}

/* ===========================================================================
 *  BANDA DE FINAL DE RUNDĂ (18 septembrie 2026)
 *
 *  „trebuie sa fie mult mai fain si mai vizibil. poate il relocam si, cand e
 *   sub o ora, il facem mai deosebit. oare sa il punem sub parcare o linie cat
 *   width istanga si cu o animatie discreta?"
 *
 *  Banda stă sub cele trei coloane de sus, deci `clear: both` — altfel ar
 *  încerca să se strecoare lângă floaturile lor. Nu e desenată deloc cât timp
 *  mai e mult: o bară care spune „mai sunt 23 de zile" devine tapet în trei
 *  zile, iar una desenată goală ar muta restul paginii cu 30px degeaba.
 *
 *  TREI TONURI, nu unul. Sub 48 de ore e sobră, de culoarea panourilor — o
 *  informație, nu o alarmă. Sub o oră trece pe auriu și respiră încet. Sub
 *  cinci minute respiră mai apăsat și arată secundele. Pulsul e pe `box-shadow`
 *  și `opacity`, nu pe `transform` sau pe lățime: un rând care își schimbă
 *  dimensiunea ar împinge pagina la fiecare bătaie.
 * =========================================================================== */
/*  DOUĂ REGLAJE DUPĂ CE S-A VĂZUT ÎN JOC (22 septembrie 2026)
 *
 *  „vezi ca trece pe sub butoanele din dreapta (cele de pe verticala). sa se
 *   opreasca mesajul la right de la bonusuri"
 *
 *  `width: 100%` însemna toată lățimea lui `#wrapper`, iar ultimii 51px din el
 *  sunt ocupați de `#meniusecundar` — coloana de butoane rotunde, așezată
 *  `position: absolute; right: 0`. Banda trecea pe sub ea.
 *
 *  Cei 60px scoși aici o opresc fix pe muchia din dreapta a panoului de
 *  bonusuri (51 ai meniului + 9 de spațiu), și rămân corecți la orice lățime,
 *  fiindcă meniul e ancorat de marginea wrapper-ului, nu de fereastră.
 *
 *  „si parca merge mai bine centrat vertical textul in mesajul maro"
 *
 *  Chiar era lăsat în jos, și nu din `align-items`. Vinovatul e `.aid-ceas`,
 *  componenta de ceas împrumutată de la armate: acolo e un bloc mare, singur,
 *  cu `margin: 0 0 14px` sub el. Aici e un element între alte două pe un rând,
 *  iar cei 14px deveneau spațiu gol sub text — banda ieșea de 54px pentru un
 *  text de 26. Cu marginea scoasă și `align-items: center`, banda are 40px și
 *  exact 7px deasupra și 7 dedesubt.
 *
 *  `baseline` era o alegere bună pe hârtie (aliniază liniile de scris ale
 *  etichetei, ceasului și datei), dar cu trei mărimi de literă diferite pune
 *  eticheta pe linia ceasului mare și lasă totul sus. Centrarea arată mai bine.
 */
.aid-runda-banda {
	clear: both;
	box-sizing: border-box;
	width: calc(100% - 60px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 8px;
	padding: 7px 16px;
	border-radius: var(--aid-raza-panou, 10px);
	background: var(--aid-fata-piatra, linear-gradient(160deg, #3a352c 0%, #201d18 45%, #12110e 100%));
	box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.14), 0 3px 10px rgba(0, 0, 0, 0.45);
	font-size: 13px;
	color: var(--aid-text, #e6e0c8);
	text-align: center;
}
.aid-runda-eticheta {
	font-family: var(--aid-font-titlu);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aid-text-stins, #97917a);
}
.aid-runda-ceas {
	font-family: var(--aid-font-cifre, 'Courier New', monospace);
	font-variant-numeric: tabular-nums;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: .03em;
	color: var(--aid-aur, #ffcc00);
}
/* `.aid-ceas-cifre` e desenat la 42px pentru ceasul mare al armatelor. Aici
   mărimea o dă banda, pe faze — altfel faza sobră ar urla la fel de tare ca
   ultima oră, și n-ar mai fi nicio diferență de spus. */
.aid-runda-banda .aid-ceas-cifre {
	font-size: inherit;
	line-height: 1.2;
	color: inherit;
	text-shadow: inherit;
}
/* Marginea de sub ceas e a ceasului mare al armatelor, unde stă singur pe un
   rând. Aici ar fi 14px de gol sub text -- vezi nota de la `.aid-runda-banda`. */
.aid-runda-banda .aid-ceas { margin: 0; }
.aid-runda-mic { font-size: 11px; color: var(--aid-text-stins, #97917a); }
.aid-runda-text b { color: var(--aid-aur, #ffcc00); }

/* ULTIMA ORĂ. Aurul iese în față și banda respiră — patru secunde dus-întors,
   adică sub pragul la care ochiul citește „clipește". */
.aid-runda-ora,
.aid-runda-minute {
	background: linear-gradient(180deg, #2a2415 0%, #1a1509 100%);
	box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), 0 0 18px rgba(255, 200, 60, 0.18), 0 3px 10px rgba(0, 0, 0, 0.5);
	animation: aid-runda-respira 4s ease-in-out infinite;
}
.aid-runda-ora .aid-runda-eticheta,
.aid-runda-minute .aid-runda-eticheta { color: #ffd76b; }
.aid-runda-ora .aid-runda-ceas,
.aid-runda-minute .aid-runda-ceas {
	font-size: 22px;
	color: #ffd76b;
	text-shadow: 0 0 16px rgba(255, 200, 60, 0.5);
}
@keyframes aid-runda-respira {
	0%, 100% { box-shadow: inset 0 0 0 1px var(--aid-aur-stins, #c69e0c), 0 0 14px rgba(255, 200, 60, 0.14), 0 3px 10px rgba(0, 0, 0, 0.5); }
	50%      { box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00),      0 0 30px rgba(255, 200, 60, 0.34), 0 3px 10px rgba(0, 0, 0, 0.5); }
}

/* ULTIMELE CINCI MINUTE. Aceeași bandă, respirând de două ori mai des. */
.aid-runda-minute { animation-duration: 2s; }
.aid-runda-minute .aid-runda-ceas { font-size: 26px; }

/* DUPĂ ORA DE FINAL. Nu mai numără nimic: spune ce s-a întâmplat. Verdele
   verdictului câștigat, fiindcă e o veste bună pentru cineva. */
.aid-runda-gata {
	background: linear-gradient(180deg, #1d4a2b 0%, #123420 100%);
	box-shadow: inset 0 0 0 1px rgba(111, 191, 115, 0.5), 0 3px 10px rgba(0, 0, 0, 0.5);
}
.aid-runda-gata .aid-runda-eticheta { color: #a6f0a0; }

@media (prefers-reduced-motion: reduce) {
	.aid-runda-ora, .aid-runda-minute { animation: none; }
}
/* Pe telefon banda se strânge pe două rânduri și pierde data lungă. */
@media (max-width: 700px) {
	/* Pe ecranul îngust nu mai e coloana de butoane peste care să treacă, deci
	   banda își ia lățimea înapoi. */
	.aid-runda-banda { font-size: 12px; padding: 6px 10px; width: 100%; }
	.aid-runda-mic { display: none; }
	.aid-runda-ora .aid-runda-ceas, .aid-runda-minute .aid-runda-ceas { font-size: 19px; }
}

/* ============================================ drăcușorii în repaos (armate.php)
 *
 * „o imagine [...] afisata intr-un frame fine in armate.php, cand nu este nicio
 *  armata afisata acolo (nu are rost sa afisam table cu nimic in ele)"
 *  (19 septembrie 2026)
 *
 * Rama e cea a cardurilor din joc -- aceleași colțuri, aceeași lumină caldă de
 * sus-stânga pe fundal negru, același fir de aur pe margine -- fiindcă un ecran
 * gol nu e un alt fel de ecran, e același ecran fără conținut. Poza umple rama
 * pe toată lățimea și își ține raportul; `aspect-ratio` e scris ca să nu sară
 * pagina cât se încarcă.
 *
 * Textul stă SUB poză, nu peste ea: peste iarbă și cer nu există culoare care
 * să se citească peste tot, iar o bandă neagră peste imagine ar ascunde exact
 * ce merită văzut. Dedesubt, pe fundalul ramei, se citește oricum. */
/* 500, NU 560. „am sa te rog sa o faci un pic mai mica, nu mult, cat sa nu
   apara scroll vertical." La 560 poza iesea 540x405, iar cu legenda si marginile
   figura ajungea la 462 intr-un panou de 485 -- sapte pixeli peste, adica exact
   cat sa apara bara. La 500 poza e 500x375 si figura 432: cincizeci de pixeli de
   aer, deci nu se intoarce nici daca legenda trece pe doua randuri. */
#istanga .aid-repaos {
	margin: 6px auto 14px;
	max-width: 500px;
	padding: 10px 10px 4px;
	border-radius: var(--aid-raza-panou-interior, 6px);
	/* OPAC, NU rgba(). Cardurile jocului se mulțumesc cu un negru la 42% fiindcă
	   stau pe alte carduri; ăsta stă direct pe `.borderrosu`, care e el însuși
	   `rgba(22,22,22,.6)` -- adică pe orașul de dedesubt. Peste iarbă și cer,
	   textul de sub poză se citea pe jumătate. Verdele întunecat al temei, plin. */
	background:
		radial-gradient(circle at 30% 12%, rgba(255, 226, 178, 0.10), rgba(0, 0, 0, 0) 58%),
		linear-gradient(180deg, #16220f 0%, #0d160b 100%);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.65),
		inset 0 1px 0 rgba(255, 226, 178, 0.12);
}
#istanga .aid-repaos-poza {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: calc(var(--aid-raza-panou-interior, 6px) - 2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}
#istanga .aid-repaos-text {
	margin: 0;
	padding: 12px 8px 10px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--aid-text, #e6e0c8);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
body.aid-mobil #istanga .aid-repaos { margin-left: 4px; margin-right: 4px; }
body.aid-mobil #istanga .aid-repaos-text { font-size: 13px; }

/* ==========================================================================
 *  TÂRGUL: O SUPRAFAȚĂ PE CARE SE POATE CITI, ȘI PASUL DOI (19 sept 2026)
 *
 *  „uita-te, te rog, si in licitatii.php si in celelalte pagini din targ."
 *
 *  Ce s-a găsit uitându-mă: târgul e singurul colț al jocului fără nimic opac
 *  peste panou. `.borderrosu` e negru la 60%, iar celelalte ecrane pun peste el
 *  carduri pline — rețetele, obiectele, armatele. Aici stătea text simplu, deci
 *  orașul se vedea prin el, și nu pe telefon: PE DESKTOP la fel. „Aici poți
 *  vinde sau cumpăra" era ilizibil peste acoperișuri.
 *
 *  `.aid-targ` e fundalul plin pe care celelalte pagini îl obțin din cardurile
 *  lor. Nu l-am pus pe `.borderrosu` peste tot: 60% e o alegere, se vede orașul
 *  prin panou și așa trebuie să rămână acolo unde conținutul e opac. Aici nu e.
 * ========================================================================== */
#istanga .aid-targ {
	background:
		radial-gradient(circle at 26% 6%, rgba(255, 226, 178, 0.07), rgba(0, 0, 0, 0) 52%),
		linear-gradient(180deg, #16220f 0%, #0e1a0c 62%, #0a120a 100%);
}

/* Vinde, ca legătură și nu ca buton de trimis.
 *
 * Rândul nu mai are formular, deci nu mai are ce trimite: are un link către
 * `vinde.php`. `.aid-btn` îi dă forma butonului obișnuit al jocului (aceeași pe
 * care o avea `input[type="submit"]`), iar cele două rânduri de aici sunt tot
 * ce mai trebuie: un `<a>` nu moștenește nici alinierea textului, nici culoarea
 * de sub el. */
#istanga a.aid-tar-buton {
	padding-left: 14px;
	padding-right: 14px;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
}
/* Când n-ai ce vinde (magazia goală) sau când încă mai ai de așteptat între
   două vânzări, butonul era un `input:disabled`. Un link nu se poate dezactiva,
   deci acolo se scrie un `<span>` cu aceeași formă și aceeași stingere de 45%
   pe care o avea butonul — ca rândul să arate la fel de „nu acum" ca înainte. */
#istanga .aid-tar-buton-stins {
	opacity: 0.45;
	cursor: not-allowed;
	padding-left: 14px;
	padding-right: 14px;
	line-height: 20px;
}

/* ------------------------------------------------------- pasul doi: vinde.php
 *
 * Un obiect, două casete, un buton. Cifra care explică de ce există ecranul
 * ăsta: lista avea 228 de inputuri; aici sunt două.
 *
 * 16px pe casete NU E O ALEGERE DE STIL. Sub 16px, Safari pe iPhone mărește
 * pagina în clipa în care pui degetul pe un input — ecranul sare, tastatura
 * urcă peste rândul atins și nu mai știi pe ce apeși. Caseta de preț din listă
 * avea 12px și 88 de pixeli lățime, și exact asta se întâmpla. */
/* Textul se citeste de la stanga -- `#istanga` centreaza din mostenire (asa
   arata jocul din 2008), si un plafon de doua randuri centrat se citeste ca un
   afis. CASETELE, in schimb, stau in mijloc: „te-as ruga sa centrezi inputurile
   si butonul vinde" (19 septembrie 2026). Sunt doua campuri si un buton, adica
   tot ce faci pe ecranul asta; pe mijloc, degetul le gaseste fara sa caute, si
   pe telefon si pe desktop. */
#istanga .aid-vinde,
#istanga .aid-vinde-obiect,
#istanga .aid-vinde-plafon { text-align: left; }
#istanga .aid-vinde-form { text-align: center; }
#istanga .aid-vinde-eticheta { text-align: center; }
#istanga input.aid-vinde-input,
#istanga input[type="text"].aid-vinde-input,
#istanga input[type="number"].aid-vinde-input { text-align: center; }

#istanga .aid-vinde-fir {
	margin: 0 0 10px;
	font-size: 11px;
	color: var(--aid-text-stins, #97917a);
}
#istanga .aid-vinde-fir a { color: var(--aid-text, #e6e0c8); text-decoration: none; }
#istanga .aid-vinde-fir a:hover { color: var(--aid-aur, #ffcc00); }
#istanga .aid-vinde-fir span { opacity: .6; }

#istanga .aid-vinde-eroare {
	margin: 0 0 12px;
	padding: 9px 12px;
	border-radius: var(--aid-raza-panou-interior, 6px);
	border-left: 3px solid #c0503a;
	background: rgba(192, 80, 58, 0.16);
	color: #f0cfc6;
	font-size: 12px;
}

#istanga .aid-vinde-obiect {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	padding: 12px;
	border-radius: var(--aid-raza-panou-interior, 6px);
	background:
		radial-gradient(circle at 30% 12%, rgba(255, 226, 178, 0.10), rgba(0, 0, 0, 0) 58%),
		rgba(0, 0, 0, 0.42);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 226, 178, 0.10);
}
#istanga .aid-vinde-poza { flex: none; }
#istanga .aid-vinde-masina { width: 96px; height: auto; }
#istanga .aid-vinde-cine { min-width: 0; }
#istanga .aid-vinde-cine h2 {
	margin: 0 0 6px;
	font-size: 17px;
	line-height: 1.2;
	color: var(--aid-aur, #ffcc00);
}
#istanga .aid-vinde-cate { margin: 0; font-size: 12px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-vinde-cate span { color: var(--aid-text-stins, #97917a); }

/* Casetele una sub alta și nu una lângă alta: pe un telefon de 360 de pixeli
   două câmpuri cu etichetă alături se strâng amândouă, iar cel de preț e cel
   care are nevoie de loc. Pe desktop rămân tot dedesubt — un formular de două
   câmpuri nu câștigă nimic dacă e lat. */
#istanga .aid-vinde-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 320px;
	margin: 0 auto 18px;   /* auto in lateral: formularul sta pe mijloc, vezi mai sus */
}
#istanga .aid-vinde-camp { display: block; }
#istanga .aid-vinde-eticheta {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--aid-text-stins, #97917a);
}
#istanga input.aid-vinde-input,
#istanga input[type="text"].aid-vinde-input,
#istanga input[type="number"].aid-vinde-input {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	font-size: 16px;                /* vezi comentariul de mai sus: sub 16px iOS mărește pagina */
	font-variant-numeric: tabular-nums;
}
#istanga .aid-vinde-buton { width: 100% !important; min-height: 42px; font-size: 14px; }

#istanga .aid-vinde-plafon {
	padding: 12px 14px;
	border-radius: var(--aid-raza-panou-interior, 6px);
	border-left: 2px solid var(--aid-aur-stins, #8a6d1e);
	background: rgba(0, 0, 0, 0.3);
	font-size: 12px;
	line-height: 18px;
}
#istanga .aid-vinde-plafon p { margin: 0 0 4px; }
#istanga .aid-vinde-plafon p:last-child { margin-bottom: 0; }
#istanga .aid-vinde-dece {
	margin-top: 8px !important;
	color: var(--aid-text-stins, #97917a);
	font-size: 11px;
	line-height: 16px;
}
#istanga .aid-vinde-gol { padding: 18px 0; font-size: 12px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-vinde-gol a { color: var(--aid-aur, #ffcc00); }

/* Pe telefon, formularul ia toată lățimea cardului. */
body.aid-mobil #istanga .aid-vinde-form { max-width: none; }
body.aid-mobil #istanga .aid-vinde-obiect { gap: 10px; padding: 10px; }
body.aid-mobil #istanga .aid-vinde-cine h2 { font-size: 16px; }

/* =====================================================================
 *  LA COADA FISIERULUI, DELIBERAT.
 *
 *  Prima oara blocul asta a stat langa celelalte reguli ale arcadei si
 *  n-a facut nimic: regulile ecranului de joc (`.aid-sd-in-joc`) vin mai
 *  jos in fisier, au aceeasi greutate de selector, deci castigau ele.
 *  Aici, ultimul scris, nu-l mai poate anula nimic din aidcadru.css.
 * ===================================================================== */
/* ===================================================================== *
 *  ARCADA PE TELEFON (23 septembrie 2026)
 *
 *  „pe mobil, daca poti vedea, in Chrome, Sudoku nu e bine aranjat. jocul
 *   iese din ecran si nu sunt aranjate pe o coloana cele 2 variante."
 *
 *  Două lucruri, amândouă din aceeași cauză: blocul de 700px de mai sus
 *  MICȘOREAZĂ, dar nu REARANJEAZĂ. Tabla rămâne o grilă de celule fixe
 *  (36px × 9 = 324 plus spații și ramă, adică mai lat decât un telefon), iar
 *  alegerea jocului rămâne pe două coloane — `.aid-sd-alege` n-a fost trecută
 *  pe una singură cum a fost `.aid-jocuri-grila` de deasupra ei.
 *
 *  CELULA DEVINE ELASTICĂ, cu `min()`: cât era pe desktop, dar niciodată mai
 *  lată decât încape. Scena are 20px de margine de fiecare parte, panoul încă
 *  vreo 10, plus spațiile dintre celule — de aici 92 scăzuți din lățimea
 *  ecranului. Pe 360 iese o celulă de ~30px la 9×9 și ~67 la 4×4; pe 320,
 *  ~25 și ~57. Nicio cifră nu mai e scrisă de mână pentru un anume telefon.
 *
 *  ȘI ECRANUL DE JOC TRECE PE O COLOANĂ. Pe desktop tabla stă la stânga și
 *  tava de simboluri în dreapta ei (`auto minmax(200px, 300px)`), ceea ce pe
 *  telefon înseamnă o tablă îngustă lipită de o tavă îngustă. Aici tabla e
 *  sus, tava sub ea, cât tot ecranul.
 *
 *  Celelalte trei jocuri aveau aceeași boală în așteptare (2048 la 72px × 4,
 *  Ai Memorie la 46 × 6 e la limită pe telefoanele mici), deci primesc
 *  aceeași măsură cât suntem aici.
 * ===================================================================== */
@media (max-width: 560px) {
	/* cele două variante, una sub alta */
	#aidjocuri #istanga .aid-sd-alege { grid-template-columns: 1fr; }
	#aidjocuri #istanga .aid-sd-best  { grid-template-columns: 1fr; }

	/* tabla, elastică */
	#aidjocuri #istanga .aid-sd-tabla,
	#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tabla   { --cel: min(36px, calc((100vw - 92px) / 9)); gap: 2px; padding: 6px; }
	#aidjocuri #istanga .aid-sd-tabla-4,
	#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tabla-4 { --cel: min(110px, calc((100vw - 92px) / 4)); gap: 4px; }
	#aidjocuri #istanga .aid-sd-tabla-4 .aid-sd-margine-dr  { margin-right: 7px; }
	#aidjocuri #istanga .aid-sd-tabla-4 .aid-sd-margine-jos { margin-bottom: 7px; }

	/* ecranul de joc, pe o coloană */
	#aidjocuri #istanga .aid-sd-in-joc {
		grid-template-columns: 1fr;
		grid-template-areas: "cap" "tabla" "tava" "sfat" "mesaj" "rez";
		column-gap: 0;
		justify-content: stretch;
	}
	#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tabla { margin: 0 auto; }
	#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tava,
	#aidjocuri #istanga .aid-sd-in-joc .aid-sd-tava-4 { grid-area: tava; max-width: none; justify-content: center; }
	/* Pe desktop rezultatul stă în coloana a doua, scris cu numere de linii
	   (`2 / 2 / 5 / 3`). Pe o singură coloană numerele alea îl trimit într-o
	   coloană care nu există, deci trebuie spus pe nume. */
	#aidjocuri #istanga .aid-sd-in-joc .aid-sd-rezultat { grid-area: rez; }
	#aidjocuri #istanga .aid-sd-in-joc .aid-sd-sim { width: 40px; min-width: 40px; height: 40px; }
	#aidjocuri #istanga .aid-sd-sfat { font-size: 11px; line-height: 16px; }

	/* aceeași măsură la celelalte trei */
	#aidjocuri #istanga .aid-dm-tabla   { --cel: min(72px, calc((100vw - 92px) / 4)); --gap: 6px; }
	#aidjocuri #istanga .aid-mm-tabla   { --cel: min(64px, calc((100vw - 92px) / 4)); }
	#aidjocuri #istanga .aid-mm-tabla-6 { --cel: min(46px, calc((100vw - 92px) / 6)); }
}

/* ==========================================================================
 *  COSTUL RAIDULUI (26 septembrie 2026)
 *
 *  Ritm::textCost() -- „Raidul te costă 1 atac public." pe pagina instituției
 *  (jucator.php) și pe pagina de atac (ataca.php). Cifra e aurie mereu; când
 *  paza s-a întărit și costul e peste 1, tot rândul se încălzește, ca ochiul
 *  să se oprească pe el înainte de buton.
 * ========================================================================== */
#istanga .aid-cost-raid,
.aid-afara .aid-cost-raid {
	margin: 8px auto 6px;
	max-width: 46em;
	font-size: 12px;
	line-height: 17px;
}
.aid-cost-raid strong { color: var(--aid-aur); font-variant-numeric: tabular-nums; }
.aid-cost-raid-scump { color: #e6c46a; }
.aid-cost-raid-scump strong { color: #ffd76b; }
.aid-cost-raid-de-ce { display: block; opacity: .85; }

/* Etajul 2048 -- RITMUL (26 septembrie 2026). O secundă între mutări
   (DouaMii::PAUZA_MS); bara asta subțire, sub sfat, se umple cât ține pauza,
   ca omul să vadă că săgeata lui a fost reținută, nu pierdută. */
#istanga .aid-dm-ritm { width: min(100%, calc(4 * 88px + 5 * 8px)); height: 3px; margin: 6px auto 0; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
#istanga .aid-dm-ritm > i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(230, 59, 46, 0.6), var(--aid-aur)); }
#aidjocuri #istanga .aid-dm-ritm { width: min(100%, calc(4 * 116px + 5 * 12px)); }


/* ==========================================================================
 *  LICITAȚIILE INSTITUȚIILOR (26 septembrie 2026) -- licitatiipublice.php
 *
 *  Un card pe licitație: obiectul cu rama lui, cine l-a scos, ceasul; prețul
 *  de acum și cine îl ține; formularul de ofertă. Cardul în care ești în
 *  frunte are marginea aurie -- ochiul găsește imediat unde stai bine.
 * ========================================================================== */
/* Pagina e perechea .aid-cadru / .aid-cutie: raspunsul la oferta si „Ai N bani"
   stau sus, la vedere; introducerea, cardurile si istoricul deruleaza in cutie.
   Inainte, tot continutul statea direct in cadrul cu overflow: hidden si, dupa
   o oferta (cand apare si mesajul de confirmare), ultimul card era taiat jos --
   „ar trebui sa faci scrollable vertical continutul" (26 sept). */
#istanga .aid-lp-eu { margin: 0 0 8px; text-align: center; font-size: 12px; color: var(--aid-text-slab); }
#istanga .aid-lp-cutie { padding: 2px 6px 6px 2px; }
#istanga .aid-lp-cutie > .aid-intro { margin-top: 0; }
/* Licitatia mare a zilei (27 sept): Parlamentul, un artefact din treimea de sus.
   O panglica aurie sus pe card si un chenar cald; in istoric, o stea. */
#istanga .aid-lp-card-mare { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(255, 204, 0, 0.35), 0 0 18px rgba(255, 190, 60, 0.18); }
#istanga .aid-lp-card-mare.aid-lp-in-frunte { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(255, 204, 0, 0.7), 0 0 18px rgba(255, 190, 60, 0.25); }
#istanga .aid-lp-mare { align-self: flex-start; margin: -2px 0 -2px; padding: 2px 10px; border-radius: 10px; background: linear-gradient(180deg, #f3c55a, #b98a1e); color: #2a1d05; font: 700 10px/16px Verdana, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
#istanga .aid-lp-stea { color: var(--aid-aur); font-size: 12px; }
#istanga .aid-lp-eu b { color: var(--aid-aur); font-variant-numeric: tabular-nums; }
#istanga .aid-lp-lista { display: flex; flex-direction: column; gap: 10px; }
#istanga .aid-lp-card { gap: 10px; }
#istanga .aid-lp-in-frunte { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 0 0 2px rgba(255, 204, 0, 0.55); }
#istanga .aid-lp-obiect { display: flex; align-items: center; gap: 12px; }
#istanga .aid-lp-ce { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#istanga .aid-lp-nume { font-family: "Alegreya", Georgia, serif; font-size: 17px; color: var(--aid-text); }
#istanga .aid-lp-fel { font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-lp-fel b { color: var(--aid-text); font-weight: normal; }
#istanga .aid-lp-ceas { flex: 0 0 auto; text-align: right; }
#istanga .aid-lp-ceas .aid-ceas-cifre { font: 700 20px/1 Verdana, sans-serif; color: var(--aid-text); font-variant-numeric: tabular-nums; }
#istanga .aid-lp-ceas .aid-ceas-eticheta { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aid-text-slab); }
#istanga .aid-lp-ceas.aid-ceas-ultim .aid-ceas-cifre { color: #ffcc00; animation: aid-lp-puls 1s ease-in-out infinite; }
#istanga .aid-lp-ceas.aid-ceas-gata .aid-ceas-cifre { font-size: 13px; color: var(--aid-text-slab); animation: none; }
@keyframes aid-lp-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
#istanga .aid-lp-pret { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); }
#istanga .aid-lp-eticheta { flex: 0 0 100%; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aid-text-slab); }
#istanga .aid-lp-suma { font-size: 22px; color: var(--aid-aur); font-variant-numeric: tabular-nums; }
#istanga .aid-lp-pret small { color: var(--aid-text-slab); }
#istanga .aid-lp-cine { margin-left: auto; font-size: 12px; color: var(--aid-text); }
#istanga .aid-lp-oferte { font-size: 11px; color: var(--aid-text-slab); }
/* „N ofertanți" e un buton care arata ca textul de langa el, cu subliniere
   punctata ca sa se stie ca se apasa; lista se deschide sub pret (27 sept 2026). */
/* `#istanga button` e pastila aurie a jocului (min-height 30, umbre, inel, litere
   mari, spatiere) -- aici e un cuvant in rand, deci se pun la zero TOATE, nu doar
   padding-ul si fundalul: primul deploy a aratat o pastila „2 OFERTANTI" lipita de
   marginea cutiei („intra peste border"). */
#istanga button.aid-lp-oferte, #istanga button.aid-lp-oferte:hover, #istanga button.aid-lp-oferte:active {
	display: inline; min-height: 0; height: auto; padding: 0 2px; margin: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; text-shadow: none; filter: none; transform: none;
	font: inherit; font-size: 11px; line-height: inherit; letter-spacing: 0; text-transform: none;
	color: var(--aid-text-slab); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; white-space: nowrap;
}
#istanga button.aid-lp-oferte:hover { color: var(--aid-aur); }
#istanga button.aid-lp-oferte:focus-visible { outline: 1px solid var(--aid-aur); outline-offset: 2px; }
#istanga .aid-lp-ofertanti { padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); font-size: 11px; color: var(--aid-text); line-height: 1.6; }
#istanga .aid-lp-ofertanti b { color: var(--aid-text-slab); font-weight: normal; }
#istanga .aid-lp-ofertant-frunte { color: var(--aid-aur); }
#istanga .aid-lp-prag { margin: 0; }
#istanga .aid-lp-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
#istanga .aid-lp-camp { display: flex; flex-direction: column; gap: 3px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aid-text-slab); }
#istanga .aid-lp-camp input { width: 150px; height: 30px; padding: 0 8px; box-sizing: border-box; border: 0; border-radius: 4px; background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, 0.25); color: var(--aid-text); font: 700 15px Verdana, sans-serif; letter-spacing: 0; }
#istanga .aid-lp-form .aid-btn { height: 30px; }
#istanga .aid-lp-sub { flex: 1 1 160px; font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-lp-sub b { color: var(--aid-text); }
#istanga .aid-lp-goala p { margin: 0; text-align: center; color: var(--aid-text-slab); }
#istanga .aid-lp-h2 { margin: 16px 0 8px; font: 400 15px "Alegreya", Georgia, serif; color: var(--aid-aur-stins, var(--aid-aur)); }
#istanga .aid-lp-istoric td:first-child { display: flex; align-items: center; gap: 6px; }
#istanga .aid-tab-nr { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--aid-aur); color: #221a08; font-size: 10px; line-height: 16px; text-align: center; vertical-align: 1px; }
@media (max-width: 620px) {
	#istanga .aid-lp-obiect { flex-wrap: wrap; }
	#istanga .aid-lp-ceas { flex: 0 0 100%; text-align: left; }
	#istanga .aid-lp-camp input { width: 120px; }
}

/* ======================================================================
 * RAIDUL LA BALAUR (27 septembrie 2026) -- raid.php, lobby-ul si scena.
 * Planul: .plan/batalie/balaur/PLAN-RAID.md. Scena refoloseste cutia reluarii
 * (#aidreluare-cutie/.aidreluare-camp) ca sa arate la fel ca o batalie.
 * ====================================================================== */
/* butonul de pe cardul personajului, sub Q: acelasi inel ca Questurile / Jocurile */
.aid-i-raiduri { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20c2-6 6-9 11-9 4 0 7 2 9 5l-3 1c-1 3-4 5-8 5s-7-1-9-2z'/%3E%3Cpath d='M17 11l-2-5 5 3M20 12l3-4 0 5M9 22l-3 5M14 23l-1 5M22 22l2 5'/%3E%3Ccircle cx='21' cy='15' r='1' fill='%23000'/%3E%3C/svg%3E");
                 --aid-buton-sus: #7a2a12; --aid-buton-mij: #3d1208; --aid-buton-jos: #120302; --aid-ic-culoare: #ffd9a8; }
#blocpersonaj.aid-card .aid-bp-raiduri { left: 6px !important; top: 106px !important; width: 44px; height: 44px; z-index: 4; }
#blocpersonaj.aid-card .aid-bp-raiduri .aid-ic { display: block; }
#blocpersonaj.aid-card .aid-bp-raiduri img { width: 40px; height: 40px; display: block; }
#semnraid { position: absolute; top: -4px; right: -6px; line-height: 0; z-index: 5; }
#semnraid img { width: 16px !important; height: auto !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
#semnraid[hidden] { display: none; }

/* pagina Raiduri */
#istanga .aid-raid-cutie { padding: 2px 6px 6px 2px; }
#istanga .aid-raid-mesaj { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: rgba(60, 120, 40, .35); color: var(--aid-text); font-size: 12px; text-align: center; }
#istanga .aid-raid-mesaj-rau { background: rgba(160, 40, 30, .4); }
#istanga .aid-raid-azi { margin: 0 0 8px; text-align: center; font-size: 12px; color: var(--aid-text-slab); }
#istanga .aid-raid-azi b { color: var(--aid-aur); }
#istanga .aid-raid-balauri { display: flex; flex-direction: column; gap: 10px; }
#istanga .aid-raid-balaur { gap: 8px; }
#istanga .aid-raid-doarme { opacity: .6; }
#istanga .aid-raid-balaur-cap { display: flex; align-items: center; gap: 12px; }
#istanga .aid-raid-balaur-cap img { width: 120px; height: 90px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
#istanga .aid-raid-balaur-cap > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#istanga .aid-raid-nume { font-family: "Alegreya", Georgia, serif; font-size: 18px; color: var(--aid-aur); }
#istanga .aid-raid-cond { font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-raid-lobbyuri { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#istanga .aid-raid-lobbyuri li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, .35); font-size: 12px; color: var(--aid-text); }
#istanga .aid-raid-lobbyuri b { color: var(--aid-aur); }
#istanga .aid-raid-gol, #istanga .aid-raid-nu { margin: 0; font-size: 11px; color: var(--aid-text-slab); }
#istanga .aid-raid-balaur > .aid-btn { align-self: flex-start; }
/* lobby-ul */
#istanga .aid-raid-h2 { margin: 0 0 4px; font: 400 18px "Alegreya", Georgia, serif; color: var(--aid-aur); }
#istanga .aid-raid-sub { margin: 0 0 8px; font-size: 12px; color: var(--aid-text-slab); }
#istanga .aid-raid-sub b { color: var(--aid-text); }
#istanga .aid-raid-jucatori { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
#istanga .aid-raid-jucatori li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .3); font-size: 12px; color: var(--aid-text); }
#istanga .aid-raid-jucatori li b { color: var(--aid-aur); }
#istanga .aid-raid-jucatori li i { color: var(--aid-aur); font-style: normal; }
#istanga .aid-raid-jucatori li span { color: var(--aid-text-slab); font-size: 11px; }
#istanga .aid-raid-plecat { opacity: .5; }
#istanga .aid-raid-portret { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 1px rgba(255, 226, 178, .3); }
#istanga .aid-raid-butoane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
#istanga .aid-raid-chat { display: flex; flex-direction: column; gap: 6px; }
#istanga .aid-raid-chat-lista { max-height: 150px; overflow-y: auto; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .35); font-size: 12px; color: var(--aid-text); text-align: left; }
#istanga .aid-raid-m b { color: var(--aid-aur); font-weight: normal; }
#istanga .aid-raid-m-sistem { color: var(--aid-text-slab); font-style: italic; }
#istanga .aid-raid-chat-form { display: flex; gap: 6px; }
#istanga .aid-raid-chat-form input { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .25); color: var(--aid-text); font: 12px Verdana, sans-serif; }

/* istoricul meu si clasamentul (raid.php?f=istoric|clasament), plus randul din Rapoarte */
#istanga .aid-raid-tabel { width: 100%; border-collapse: collapse; font-size: 11px; color: var(--aid-text); text-align: left; }
#istanga .aid-raid-tabel th { padding: 4px 6px; font-weight: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--aid-text-slab); border-bottom: 1px solid rgba(255, 226, 178, .2); }
#istanga .aid-raid-tabel td { padding: 5px 6px; border-bottom: 1px solid rgba(255, 226, 178, .08); vertical-align: middle; white-space: nowrap; }
#istanga .aid-raid-tabel td.aid-raid-loot, #istanga .aid-raid-tabel td:nth-child(2) { white-space: normal; }
#istanga .aid-raid-tabel small { color: var(--aid-text-slab); }
#istanga .aid-raid-tabel a { color: var(--aid-aur); }
#istanga .aid-raid-tabel b { color: var(--aid-aur); }
#istanga .aid-raid-castig td:nth-child(3) { color: #9fe870; }
#istanga .aid-raid-fugit td { opacity: .6; }
#istanga .aid-raid-eu td { background: rgba(255, 204, 0, .08); }
#istanga .aid-raid-obiect { display: inline-flex; align-items: center; gap: 3px; margin: 1px 4px 1px 0; padding: 1px 5px 1px 1px; border-radius: 5px; background: rgba(0, 0, 0, .4); white-space: nowrap; }
#istanga .aid-raid-obiect img { width: 22px; height: 22px; border-radius: 3px; }
#istanga .aid-raid-obiect-mare { box-shadow: inset 0 0 0 1px #b98a1e; color: var(--aid-aur); }
#istanga .aid-raid-rapoarte { margin: 0 0 10px; padding: 6px 10px; border-radius: 6px; background: rgba(120, 30, 10, .22); box-shadow: inset 0 0 0 1px rgba(255, 120, 60, .3); color: var(--aid-text-slab); font-size: 11px; text-align: left; }
#istanga .aid-raid-rapoarte b { color: var(--aid-aur); }
#istanga .aid-raid-rapoarte a { color: var(--aid-aur); }

/* scena, pe tot ecranul: aceeasi cutie ca reluarea */
#aidraid { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 16px; background: #000; }
#aidraid.aidreluare-deschis { display: flex; }
#aidraid .aidreluare-panza { cursor: crosshair; }
#aidraid .aidraid-comenzi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; width: min(100%, 1600px); color: var(--aid-text, #ffe2b2); font: 12px Verdana, sans-serif; }
#aidraid .aidraid-eu b { color: #ffcc00; }
#aidraid .aidraid-sfat { flex: 1 1 320px; color: #b8a98a; font-size: 11px; }
#aidraid .aidraid-sfat b { color: #ffe2b2; font-weight: normal; }
#aidraid .aidraid-paraseste { padding: 5px 16px; border: 0; border-radius: 999px; background: rgba(120, 20, 10, .55); color: #ffd9a8; font: 700 12px Verdana, sans-serif; letter-spacing: .05em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 120, 80, .5); cursor: pointer; }
#aidraid .aidraid-paraseste:hover { background: rgba(160, 30, 15, .7); color: #fff; }
/* bara de puteri, stanga sus, ca in interfetele Warcraft: placa SVG (desenata din js,
   baraSVG(n) -- fier intunecat, rama de aur, nituri, gheare la capete) si cate un buton
   asezat exact peste fiecare slot, in procente din placa. Latimea barei e in procente
   din scena, deci creste singura cu numarul de puteri. In pauza: iconita alb-negru si o
   raza (marginea alba a unui conic-gradient pus din js) se roteste peste ea; cifra
   secundelor ramase in mijloc; licarire cand e iar gata. */
#aidraid .aidraid-puteri { position: absolute; left: .6%; top: 1.4%; z-index: 3; }
#aidraid .aidraid-puteri > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#aidraid .aidraid-putere { position: absolute; padding: 0; border: 0; border-radius: 6%; background: #0a0806; cursor: pointer; overflow: visible; transition: transform .08s; }
#aidraid .aidraid-putere:hover { box-shadow: 0 0 0 2px #ffcc00, 0 0 16px rgba(255, 204, 0, .55); }
#aidraid .aidraid-putere:focus-visible { outline: 2px solid #ffcc00; outline-offset: 2px; }
#aidraid .aidraid-putere:active { transform: scale(.94); }
#aidraid .aidraid-putere:disabled { cursor: default; }
#aidraid .aidraid-putere:disabled img { filter: grayscale(1) brightness(.45); }
#aidraid .aidraid-putere img { display: block; width: 100%; height: 100%; border-radius: 6%; object-fit: cover; transition: filter .25s; }
#aidraid .aidraid-rece img { filter: grayscale(1) brightness(.75); }
#aidraid .aidraid-putere .aidraid-cd { position: absolute; inset: 0; border-radius: 6%; pointer-events: none; }
#aidraid .aidraid-putere .aidraid-cd-s { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 clamp(11px, 1.5vw, 24px) Verdana, sans-serif; text-shadow: 0 0 6px #000, 0 1px 2px #000; pointer-events: none; }
#aidraid .aidraid-putere kbd { position: absolute; right: -9%; bottom: -9%; min-width: 34%; padding: 1px 0; border-radius: 4px; background: #1a1206; box-shadow: inset 0 0 0 1px #b98a1e, 0 1px 3px #000; color: #ffcc00; font: 700 clamp(8px, .9vw, 13px) Verdana, sans-serif; text-align: center; line-height: 1.4; pointer-events: none; }
#aidraid .aidraid-putere small { position: absolute; left: -20%; right: -20%; top: 100%; margin-top: 27%; color: #ffe2b2; font: clamp(7px, .75vw, 11px) Verdana, sans-serif; text-shadow: 0 1px 3px #000; white-space: nowrap; pointer-events: none; opacity: .9; }
#aidraid .aidraid-gata { animation: aidraid-gata .6s ease-out; }
#aidraid .aidraid-activ { box-shadow: 0 0 0 2px #c9a6ff, 0 0 20px rgba(160, 110, 255, .85); }
@keyframes aidraid-gata { 0% { box-shadow: 0 0 0 3px #fff, 0 0 30px #ffcc00; transform: scale(1.12); } 100% { box-shadow: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { #aidraid .aidraid-gata { animation: none; } }
/* finalul: peste scena, in mijloc */
#aidraid .aidraid-final { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 3%; overflow: auto; }
#aidraid .aidraid-final[hidden] { display: none; }
#aidraid .aidraid-final-cutie { max-width: 1000px; width: 100%; padding: 18px 22px; border-radius: 10px; background: rgba(8, 12, 8, .92); box-shadow: inset 0 0 0 1px #b98a1e, 0 18px 50px rgba(0, 0, 0, .7); color: #ffe2b2; font: 13px Verdana, sans-serif; }
#aidraid .aidraid-final-cutie h2 { margin: 0 0 6px; font: 700 30px Georgia, serif; color: #ffcc00; text-align: center; text-transform: none; }   /* css.css pune capitalize pe h2 */
#aidraid .aidraid-final-cutie p { margin: 0 0 12px; text-align: center; color: #b8a98a; }
#aidraid .aidraid-tabel { width: 100%; border-collapse: collapse; font-size: 12px; }
#aidraid .aidraid-tabel th { padding: 4px 6px; text-align: left; font-weight: normal; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #b8a98a; border-bottom: 1px solid rgba(255, 226, 178, .2); }
#aidraid .aidraid-tabel td { padding: 6px; border-bottom: 1px solid rgba(255, 226, 178, .08); vertical-align: middle; }
#aidraid .aidraid-tabel small { color: #b8a98a; }
#aidraid .aidraid-eu-rand td { color: #ffcc00; }
#aidraid .aidraid-obiect { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 2px 6px 2px 2px; border-radius: 6px; background: rgba(0, 0, 0, .5); white-space: nowrap; }
#aidraid .aidraid-obiect img { width: 28px; height: 28px; border-radius: 4px; }
#aidraid .aidraid-obiect-mare { box-shadow: inset 0 0 0 1px #b98a1e, 0 0 10px rgba(255, 204, 0, .35); color: #ffcc00; }
#aidraid .aidraid-mvp { color: #ffcc00; }
#aidraid .aidraid-final-butoane { margin-top: 14px; text-align: center; }
@media (max-width: 700px) { #aidraid { padding: 4px; } #aidraid .aidraid-sfat { display: none; } #aidraid .aidraid-tabel th:nth-child(4), #aidraid .aidraid-tabel td:nth-child(4) { display: none; } }
/* panou: un Balaur pe rand, cu multe campuri mici -- se infasoara */
#istanga .aid-panou-balaur { flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .25); }
#istanga .aid-panou-balaur label { font-size: 11px; color: var(--aid-text-slab); display: inline-flex; align-items: center; gap: 4px; }
#istanga .aid-panou-balaur input[type="text"] { width: 4.5em; padding: 2px 4px; }
#istanga .aid-panou-balaur input[name="nume"] { width: 14em; }
#istanga .aid-raid-invitatie { margin: 8px 0; padding: 8px 12px; border-radius: 6px; background: rgba(120, 30, 10, .25); box-shadow: inset 0 0 0 1px rgba(255, 120, 60, .35); color: var(--aid-text); font-size: 12px; }
#istanga .aid-raid-invitatie a { color: var(--aid-aur); }
#istanga .aid-raid-invitatie .aid-raid-nu { color: var(--aid-text-slab); font-size: 11px; }

/* ======================================================================
 * FORUMUL (28 septembrie 2026) -- /forum..., pe situl public (body.aid-acasa).
 * Planul: .plan/forum/PLAN-FORUM.md. „Reddit mic”: o coloana, telefon intai;
 * filele sectiunilor sus, lista firelor cu ▲ la stanga si numarul de raspunsuri
 * la dreapta; in fir, cardul autorului, corpul, actiunile, raspunsurile pe doua
 * niveluri (nivelul 2 e tras la dreapta). Aceleasi culori ca restul sitului
 * (--ac-*), chihlimbarul pe ce e interactiv.
 * ====================================================================== */
body.aid-acasa #homeinclude .aid-forum { text-align: left; }
/* linkurile: regula veche `#homeinclude .aid-afara a:not(.rev):not(.alb):not(.rosu)` are
   specificitate mare (trei :not); aici se bate cu aceeasi moneda, ca sa ramana chihlimbarul */
body.aid-acasa #homeinclude .aid-afara.aid-forum a:not(.rev):not(.alb):not(.rosu),
body.aid-acasa #homeinclude .aid-afara.aid-forum a:not(.rev):not(.alb):not(.rosu):visited { color: var(--ac-chihlimbar); text-decoration: none; }
body.aid-acasa #homeinclude .aid-afara.aid-forum a:not(.rev):not(.alb):not(.rosu):hover { color: var(--ac-chihlimbar); text-decoration: underline; }
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-rand-titlu a:not(.rev):not(.alb):not(.rosu), body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-nume:not(.rev):not(.alb):not(.rosu),
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-rand-titlu a:not(.rev):not(.alb):not(.rosu):visited, body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-nume:not(.rev):not(.alb):not(.rosu):visited { color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-rand-joc .aid-f-rand-titlu a:not(.rev):not(.alb):not(.rosu) { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-rand-rasp:not(.rev):not(.alb):not(.rosu), body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-eticheta:not(.rev):not(.alb):not(.rosu), body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-sortare a:not(.rev):not(.alb):not(.rosu), body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-ancora:not(.rev):not(.alb):not(.rosu) { color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-sortare a.pe:not(.rev):not(.alb):not(.rosu) { color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-noi:not(.rev):not(.alb):not(.rosu) { color: #fff; }
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-ancora:not(.rev):not(.alb):not(.rosu) { color: var(--ac-salvie-jos); }
body.aid-acasa #homeinclude .aid-afara.aid-forum .aid-f-mentiune:not(.rev):not(.alb):not(.rosu) { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-f-mesaj { margin: 0 0 12px; padding: 8px 12px; border-radius: 6px; background: #1f3a2a; border: 1px solid var(--ac-viu); color: var(--ac-pergament); font-size: 13px; }
body.aid-acasa #homeinclude .aid-f-mesaj-rau { background: #3a1f1f; border-color: var(--ac-jar); }
/* filele */
body.aid-acasa #homeinclude .aid-f-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid var(--ac-muchie); }
body.aid-acasa #homeinclude .aid-f-fila { padding: 5px 10px; border-radius: 999px; background: var(--ac-panou); color: var(--ac-salvie) !important; font-size: 12.5px; white-space: nowrap; border: 1px solid transparent; }
body.aid-acasa #homeinclude .aid-f-fila small { color: var(--ac-salvie-jos); font-size: 10.5px; }
body.aid-acasa #homeinclude .aid-f-fila:hover { text-decoration: none; border-color: var(--ac-muchie-hi); color: var(--ac-pergament) !important; }
body.aid-acasa #homeinclude .aid-f-fila.pe { background: var(--ac-chihlimbar); color: var(--ac-noapte) !important; font-weight: bold; }
body.aid-acasa #homeinclude .aid-f-fila.pe small { color: var(--ac-noapte); }
body.aid-acasa #homeinclude .aid-f-fila-eu { margin-left: auto; }
body.aid-acasa #homeinclude .aid-f-fila-mod { background: #3a1f1f; }
body.aid-acasa #homeinclude .aid-f-semn { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--ac-jar); color: #fff; font-size: 11px; text-align: center; line-height: 18px; }
body.aid-acasa #homeinclude .aid-f-cauta { display: flex; margin-left: 6px; }
body.aid-acasa #homeinclude .aid-f-cauta input { width: 150px; height: 28px; padding: 0 10px; border: 1px solid var(--ac-muchie); border-right: 0; border-radius: 999px 0 0 999px; background: var(--ac-muschi); color: var(--ac-pergament); font: 12.5px var(--ac-ui); }
body.aid-acasa #homeinclude .aid-f-cauta button { height: 28px; padding: 0 10px; border: 1px solid var(--ac-muchie); border-radius: 0 999px 999px 0; background: var(--ac-panou); color: var(--ac-salvie); font-size: 15px; cursor: pointer; }
/* antetul */
body.aid-acasa #homeinclude .aid-f-antet { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
body.aid-acasa #homeinclude .aid-f-antet h1 { margin: 0 0 4px; font-family: var(--ac-titlu); font-size: 30px; line-height: 1.1; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
body.aid-acasa #homeinclude .aid-f-antet p { margin: 0; font-size: 14px; color: var(--ac-salvie); max-width: 70ch; }
body.aid-acasa #homeinclude .aid-f-nou { flex: 0 0 auto; white-space: nowrap; }
body.aid-acasa #homeinclude .aid-f-h2 { margin: 24px 0 8px; font-family: var(--ac-titlu); font-size: 20px; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
/* sortarea si paginarea */
body.aid-acasa #homeinclude .aid-f-sortare { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 12.5px; }
body.aid-acasa #homeinclude .aid-f-sortare a { display: inline-block; padding: 3px 9px; border-radius: 999px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-f-sortare a.pe { background: var(--ac-panou-sus); color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-f-sortare small a { font-size: 11.5px; }
body.aid-acasa #homeinclude .aid-f-pag a { display: inline-block; padding: 3px 8px; color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-f-pag a.pe { color: var(--ac-pergament); font-weight: bold; }
/* lista firelor */
body.aid-acasa #homeinclude .aid-f-lista { display: flex; flex-direction: column; gap: 1px; background: var(--ac-muchie); border: 1px solid var(--ac-muchie); border-radius: 8px; overflow: hidden; }
body.aid-acasa #homeinclude .aid-f-rand { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ac-panou); }
body.aid-acasa #homeinclude .aid-f-rand:hover { background: var(--ac-panou-sus); }
body.aid-acasa #homeinclude .aid-f-fixat { background: #1b2a1f; box-shadow: inset 3px 0 0 var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-f-ascuns-rand { opacity: .55; }
body.aid-acasa #homeinclude .aid-f-rand-vot { flex: 0 0 44px; text-align: center; }
body.aid-acasa #homeinclude .aid-f-rand-ce { flex: 1 1 auto; min-width: 0; }
body.aid-acasa #homeinclude .aid-f-rand-titlu { margin: 0 0 3px; font: 15px/1.3 var(--ac-ui); color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
body.aid-acasa #homeinclude .aid-f-rand-titlu a { color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-f-necitit a { font-weight: bold; }
body.aid-acasa #homeinclude .aid-f-noi { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--ac-jar); color: #fff !important; font-size: 10.5px; font-weight: bold; vertical-align: 2px; }
body.aid-acasa #homeinclude .aid-f-rand-meta, body.aid-acasa #homeinclude .aid-f-rand-extras { margin: 0; font-size: 12px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-f-rand-extras { color: var(--ac-pergament); opacity: .85; margin-bottom: 3px; }
body.aid-acasa #homeinclude .aid-f-eticheta { padding: 1px 7px; border-radius: 999px; background: var(--ac-muschi); border: 1px solid var(--ac-muchie); color: var(--ac-salvie) !important; font-size: 11px; }
body.aid-acasa #homeinclude .aid-f-rand-rasp { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; color: var(--ac-salvie) !important; font-size: 10.5px; line-height: 1.2; }
body.aid-acasa #homeinclude .aid-f-rand-rasp b { font-size: 16px; color: var(--ac-pergament); font-family: var(--ac-mono); }
body.aid-acasa #homeinclude .aid-f-rand-joc .aid-f-rand-titlu a { color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-f-gol { margin: 12px 0; padding: 18px; border-radius: 8px; background: var(--ac-panou); color: var(--ac-salvie); text-align: center; font-size: 13px; }
/* votul */
body.aid-acasa #homeinclude .aid-f-vot { display: inline-flex; flex-direction: column; align-items: center; gap: 0; min-width: 34px; padding: 3px 6px; border: 1px solid var(--ac-muchie); border-radius: 6px; background: var(--ac-muschi); color: var(--ac-salvie); font: 12px var(--ac-mono); cursor: pointer; line-height: 1.1; }
body.aid-acasa #homeinclude .aid-f-vot b { font-size: 12px; font-weight: normal; }
body.aid-acasa #homeinclude button.aid-f-vot:hover { border-color: var(--ac-chihlimbar); color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-f-vot-da, body.aid-acasa #homeinclude button.aid-f-vot-da:hover { background: var(--ac-chihlimbar); border-color: var(--ac-chihlimbar); color: var(--ac-noapte); font-weight: bold; }
body.aid-acasa #homeinclude button.aid-f-vot-da:hover { background: var(--ac-chihlimbar-jos); border-color: var(--ac-chihlimbar-jos); }
body.aid-acasa #homeinclude .aid-f-vot-pasiv { cursor: default; }
/* cardul autorului */
body.aid-acasa #homeinclude .aid-f-autor { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
body.aid-acasa #homeinclude .aid-f-portret { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--ac-muschi); border: 1px solid var(--ac-muchie-hi); flex: 0 0 auto; }
body.aid-acasa #homeinclude .aid-f-autor-mic .aid-f-portret { width: 28px; height: 28px; }
body.aid-acasa #homeinclude .aid-f-fara { background: var(--ac-muschi) radial-gradient(circle at 50% 40%, var(--ac-muchie-hi) 0 30%, transparent 32%); }
body.aid-acasa #homeinclude img.aid-f-fara { visibility: hidden; }
body.aid-acasa #homeinclude .aid-f-autor-joc .aid-f-portret { border-color: var(--ac-chihlimbar); padding: 3px; background: var(--ac-noapte); }
body.aid-acasa #homeinclude .aid-f-autor-ce { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
body.aid-acasa #homeinclude .aid-f-autor-ce b, body.aid-acasa #homeinclude .aid-f-nume { color: var(--ac-pergament); font-size: 14px; font-weight: bold; }
body.aid-acasa #homeinclude .aid-f-autor-ce small { color: var(--ac-salvie); font-size: 11.5px; }
body.aid-acasa #homeinclude .aid-f-ins { display: inline-block; padding: 0 5px; border-radius: 4px; font-style: normal; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; line-height: 15px; vertical-align: 1px; background: var(--ac-muchie); color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-f-ins-admin { background: var(--ac-jar); color: #fff; }
body.aid-acasa #homeinclude .aid-f-ins-mod { background: #3f6a8a; color: #fff; }
body.aid-acasa #homeinclude .aid-f-ins-campion { background: var(--ac-chihlimbar); color: var(--ac-noapte); }
body.aid-acasa #homeinclude .aid-f-ins-mvp { background: #7a3fa0; color: #fff; }
body.aid-acasa #homeinclude .aid-f-ins-vechi { background: var(--ac-muchie-hi); }
/* firul */
body.aid-acasa #homeinclude .aid-f-fir { padding: 16px 18px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou); }
body.aid-acasa #homeinclude .aid-f-fir-drum { margin: 0 0 8px; font-size: 12px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-f-fir-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
body.aid-acasa #homeinclude .aid-f-fir-cap h1 { flex-basis: 100%; margin: 0; font-family: var(--ac-titlu); font-size: 28px; line-height: 1.15; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; text-wrap: balance; }
body.aid-acasa #homeinclude .aid-f-editat, body.aid-acasa #homeinclude .aid-f-ascuns-et { font-size: 11px; color: var(--ac-salvie-jos); font-style: italic; }
body.aid-acasa #homeinclude .aid-f-ascuns-et { color: var(--ac-jar); }
body.aid-acasa #homeinclude .aid-f-ascuns { opacity: .6; border-style: dashed; }
body.aid-acasa #homeinclude .aid-f-corp { font-size: 14.5px; line-height: 1.55; color: var(--ac-pergament); overflow-wrap: anywhere; }
body.aid-acasa #homeinclude .aid-f-corp p { margin: 0 0 10px; }
body.aid-acasa #homeinclude .aid-f-corp p:last-child { margin-bottom: 0; }
body.aid-acasa #homeinclude .aid-f-corp-fir { font-size: 15.5px; }
body.aid-acasa #homeinclude .aid-f-citat { margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid var(--ac-chihlimbar-jos); background: var(--ac-muschi); border-radius: 0 6px 6px 0; color: var(--ac-salvie); font-size: 13px; }
body.aid-acasa #homeinclude .aid-f-citat cite { display: block; margin-bottom: 3px; font-style: normal; font-size: 11px; color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-f-cod { margin: 6px 0 10px; padding: 8px 12px; background: var(--ac-noapte); border-radius: 6px; font: 12.5px var(--ac-mono); white-space: pre-wrap; }
body.aid-acasa #homeinclude .aid-f-spoiler { margin: 6px 0 10px; padding: 6px 10px; border: 1px dashed var(--ac-muchie-hi); border-radius: 6px; }
body.aid-acasa #homeinclude .aid-f-spoiler summary { cursor: pointer; color: var(--ac-chihlimbar); font-size: 12px; }
body.aid-acasa #homeinclude .aid-f-poza { display: block; max-width: 100%; max-height: 480px; margin: 6px 0; border-radius: 6px; }
body.aid-acasa #homeinclude .aid-f-mentiune { padding: 0 4px; border-radius: 4px; background: var(--ac-muschi); }
body.aid-acasa #homeinclude .aid-f-sters { color: var(--ac-salvie-jos); font-style: italic; }
/* actiunile de sub un post */
body.aid-acasa #homeinclude .aid-f-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; }
body.aid-acasa #homeinclude .aid-f-act { padding: 3px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ac-salvie); font: 12px var(--ac-ui); cursor: pointer; }
body.aid-acasa #homeinclude .aid-f-act:hover { background: var(--ac-panou-sus); color: var(--ac-pergament); text-decoration: none; }
body.aid-acasa #homeinclude .aid-f-act-rau:hover { color: var(--ac-jar); }
body.aid-acasa #homeinclude .aid-f-act-slab { color: var(--ac-salvie-jos); }
body.aid-acasa #homeinclude .aid-f-mod { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; padding: 2px 6px; border: 1px dashed var(--ac-muchie-hi); border-radius: 6px; }
body.aid-acasa #homeinclude .aid-f-muta { height: 24px; border: 1px solid var(--ac-muchie); border-radius: 4px; background: var(--ac-muschi); color: var(--ac-salvie); font: 11.5px var(--ac-ui); }
body.aid-acasa #homeinclude .aid-f-ancora { color: var(--ac-salvie-jos) !important; font-size: 12px; }
/* raspunsurile */
body.aid-acasa #homeinclude .aid-f-raspunsuri { margin: 18px 0 0; }
body.aid-acasa #homeinclude .aid-f-raspunsuri h2 { margin: 0 0 10px; font-family: var(--ac-titlu); font-size: 20px; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
body.aid-acasa #homeinclude .aid-f-raspunsuri h2 small { font-size: 12px; color: var(--ac-salvie); font-family: var(--ac-ui); }
body.aid-acasa #homeinclude .aid-f-raspuns { margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou); }
body.aid-acasa #homeinclude .aid-f-raspuns:target { border-color: var(--ac-chihlimbar); }
body.aid-acasa #homeinclude .aid-f-raspuns-cap { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
body.aid-acasa #homeinclude .aid-f-copii { margin: 10px 0 0 26px; padding-left: 12px; border-left: 2px solid var(--ac-muchie); }
body.aid-acasa #homeinclude .aid-f-copii .aid-f-raspuns { background: var(--ac-muschi); }
body.aid-acasa #homeinclude .aid-f-nou-de-aici { margin: 6px 0 10px; padding: 3px 0; border-top: 1px solid var(--ac-jar); color: var(--ac-jar); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
/* caseta de scris */
body.aid-acasa #homeinclude .aid-f-scrie { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 14px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou); }
body.aid-acasa #homeinclude .aid-f-copii .aid-f-scrie, body.aid-acasa #homeinclude .aid-f-raspuns > .aid-f-scrie { margin-top: 10px; }
body.aid-acasa #homeinclude .aid-f-scrie label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-f-scrie input[type=text], body.aid-acasa #homeinclude .aid-f-scrie select, body.aid-acasa #homeinclude .aid-f-scrie textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--ac-muchie); border-radius: 6px; background: var(--ac-muschi); color: var(--ac-pergament); font: 14px/1.5 var(--ac-ui); }
body.aid-acasa #homeinclude .aid-f-scrie textarea { resize: vertical; min-height: 90px; }
body.aid-acasa #homeinclude .aid-f-scrie input:focus, body.aid-acasa #homeinclude .aid-f-scrie textarea:focus { outline: 2px solid var(--ac-chihlimbar); outline-offset: 0; border-color: transparent; }
body.aid-acasa #homeinclude .aid-f-scrie-jos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
body.aid-acasa #homeinclude .aid-f-scrie-jos small { color: var(--ac-salvie-jos); font-size: 11px; }
body.aid-acasa #homeinclude .aid-f-la { margin: 0; font-size: 12px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-f-la b { color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-f-la button { border: 0; background: transparent; color: var(--ac-jar); cursor: pointer; font-size: 14px; }
body.aid-acasa #homeinclude .aid-f-nu-scrie { margin: 16px 0 0; padding: 12px; border-radius: 8px; background: var(--ac-panou); color: var(--ac-salvie); font-size: 13px; text-align: center; }
body.aid-acasa #homeinclude .aid-f-setari h3 { margin: 0; font-family: var(--ac-titlu); font-size: 18px; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
body.aid-acasa #homeinclude .aid-f-setari label { flex-direction: row; align-items: center; gap: 8px; }
body.aid-acasa #homeinclude .aid-f-setari label input[type=text] { flex: 1 1 auto; }
/* casetele mici (raport, editare, moderare) */
body.aid-acasa #homeinclude .aid-f-dialog { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 10, 6, .75); }
body.aid-acasa #homeinclude .aid-f-dialog[hidden] { display: none; }
body.aid-acasa #homeinclude .aid-f-dialog form { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); padding: 16px 18px; border: 1px solid var(--ac-muchie-hi); border-radius: 10px; background: var(--ac-panou); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
body.aid-acasa #homeinclude .aid-f-dialog h3 { margin: 0 0 4px; font-family: var(--ac-titlu); font-size: 20px; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
body.aid-acasa #homeinclude .aid-f-dialog label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-f-dialog input[type=text], body.aid-acasa #homeinclude .aid-f-dialog input[type=number], body.aid-acasa #homeinclude .aid-f-dialog textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--ac-muchie); border-radius: 6px; background: var(--ac-muschi); color: var(--ac-pergament); font: 14px/1.5 var(--ac-ui); }
body.aid-acasa #homeinclude .aid-f-dialog input[type=number] { width: 80px; }
/* notificari, jurnal, rapoarte, profil */
body.aid-acasa #homeinclude .aid-f-notif, body.aid-acasa #homeinclude .aid-f-jurnal { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; background: var(--ac-muchie); border: 1px solid var(--ac-muchie); border-radius: 8px; overflow: hidden; }
body.aid-acasa #homeinclude .aid-f-notif li, body.aid-acasa #homeinclude .aid-f-jurnal li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; background: var(--ac-panou); font-size: 13px; color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-f-notif li.aid-f-necitit { background: var(--ac-panou-sus); box-shadow: inset 3px 0 0 var(--ac-jar); }
body.aid-acasa #homeinclude .aid-f-notif time, body.aid-acasa #homeinclude .aid-f-jurnal time { flex: 0 0 auto; color: var(--ac-salvie-jos); font-size: 11.5px; }
body.aid-acasa #homeinclude .aid-f-jurnal li { justify-content: flex-start; }
body.aid-acasa #homeinclude .aid-f-raport { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--ac-jar); border-radius: 8px; background: var(--ac-panou); }
body.aid-acasa #homeinclude .aid-f-raport-post { margin: 6px 0; font-size: 13px; color: var(--ac-pergament); }
body.aid-acasa #homeinclude .aid-f-raport-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body.aid-acasa #homeinclude .aid-f-raport-form input[type=text] { flex: 1 1 200px; padding: 6px 10px; border: 1px solid var(--ac-muchie); border-radius: 6px; background: var(--ac-muschi); color: var(--ac-pergament); font: 13px var(--ac-ui); }
body.aid-acasa #homeinclude .aid-f-profil-cap { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; border: 1px solid var(--ac-muchie); border-radius: 8px; background: var(--ac-panou); }
body.aid-acasa #homeinclude .aid-f-profil-cap .aid-f-portret { width: 64px; height: 64px; }
body.aid-acasa #homeinclude .aid-f-profil-cap .aid-f-nume { font-size: 22px; font-family: var(--ac-titlu); }
body.aid-acasa #homeinclude .aid-f-profil-cifre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-f-profil-cifre b { color: var(--ac-pergament); font-family: var(--ac-mono); }
body.aid-acasa #homeinclude .aid-f-semnatura { margin: 0; font-size: 13px; color: var(--ac-salvie); font-style: italic; }
/* „se face” / inchis */
body.aid-acasa #homeinclude .aid-forum-inchis { text-align: center; padding: 30px 16px; }
body.aid-acasa #homeinclude .aid-forum-drac { display: block; margin: 0 auto 14px; }
body.aid-acasa #homeinclude .aid-forum-inchis h1 { margin: 0 0 8px; font-family: var(--ac-titlu); font-size: 30px; color: var(--ac-pergament); text-transform: none; }
body.aid-acasa #homeinclude .aid-forum-inchis p { margin: 0; color: var(--ac-salvie); }
@media (max-width: 700px) {
	body.aid-acasa #homeinclude .aid-f-nav { gap: 3px; }
	body.aid-acasa #homeinclude .aid-f-fila { padding: 4px 8px; font-size: 12px; }
	body.aid-acasa #homeinclude .aid-f-fila-eu { margin-left: 0; }
	body.aid-acasa #homeinclude .aid-f-cauta { order: 99; flex-basis: 100%; margin: 4px 0 0; }
	body.aid-acasa #homeinclude .aid-f-cauta input { flex: 1 1 auto; width: auto; }
	body.aid-acasa #homeinclude .aid-f-antet { flex-direction: column; gap: 8px; }
	body.aid-acasa #homeinclude .aid-f-antet h1 { font-size: 24px; }
	body.aid-acasa #homeinclude .aid-f-rand { gap: 8px; padding: 9px 10px; }
	body.aid-acasa #homeinclude .aid-f-rand-vot { flex-basis: 38px; }
	body.aid-acasa #homeinclude .aid-f-rand-rasp { flex-basis: 44px; }
	body.aid-acasa #homeinclude .aid-f-rand-rasp span { display: none; }
	body.aid-acasa #homeinclude .aid-f-fir, body.aid-acasa #homeinclude .aid-f-raspuns { padding: 10px 12px; }
	body.aid-acasa #homeinclude .aid-f-fir-cap h1 { font-size: 22px; }
	body.aid-acasa #homeinclude .aid-f-copii { margin-left: 10px; padding-left: 8px; }
	body.aid-acasa #homeinclude .aid-f-mod { margin-left: 0; }
	body.aid-acasa #homeinclude .aid-f-sortare { flex-direction: column; align-items: flex-start; }
}
/* butonul de forum pe cardul personajului: dreapta, sub Jocuri (oglinda lui Q); un balon de vorba */
.aid-i-forum { --aid-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h20v13H14l-6 5v-5H6z'/%3E%3Cpath d='M11 13h10M11 17h6'/%3E%3C/svg%3E");
              --aid-buton-sus: #2f5a3a; --aid-buton-mij: #173521; --aid-buton-jos: #061208; --aid-ic-culoare: #ffe2b2; }
#blocpersonaj.aid-card .aid-bp-forum { left: auto !important; right: 6px !important; top: 56px !important; width: 44px; height: 44px; z-index: 4; }
#blocpersonaj.aid-card .aid-bp-forum .aid-ic { display: block; }
#blocpersonaj.aid-card .aid-bp-forum img { width: 40px; height: 40px; display: block; }
#semnforum { position: absolute; top: -4px; right: -6px; line-height: 0; z-index: 5; }
#semnforum img { width: 16px !important; height: auto !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
#semnforum[hidden] { display: none; }
body.aid-acasa #homeinclude .aid-nout-forum { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--ac-muchie); }
body.aid-acasa #homeinclude .aid-cet-forum { margin: 18px auto 0; max-width: 560px; text-align: left; }
body.aid-acasa #homeinclude .aid-cet-forum h2 { margin: 0 0 6px; font-family: var(--ac-titlu); font-size: 18px; color: var(--ac-pergament); text-transform: none; letter-spacing: 0; }
body.aid-acasa #homeinclude .aid-cet-forum ul { margin: 0 0 6px; padding-left: 18px; font-size: 13px; }
body.aid-acasa #homeinclude .aid-cet-forum li { margin: 0 0 4px; }
body.aid-acasa #homeinclude .aid-cet-forum small { color: var(--ac-salvie); }
body.aid-acasa #homeinclude .aid-cet-forum p { margin: 0; font-size: 12.5px; }

/* ============================================================ Sala Balaurului
 *
 * js/aidraidsala.js: paginile de raid (raid.php) pe tot ecranul, ca sala de
 * jocuri: #istanga MUTAT intr-o scena de 1100px, sub un antet cu titlul si
 * filele. Fundal: intuneric rosiatic, jar care urca, Balaurul urias in dreapta
 * ca o umbra. Scena luptei (#aidraid, z 1200) sta deasupra. */
#aidraidsala { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; color: var(--aid-text, #e6e0c8); font-family: Arial, Helvetica, sans-serif; }
#aidraidsala[hidden] { display: none; }
#aidraidsala [hidden] { display: none !important; }
#aidraidsala .aidrs-antet { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1); }
#aidraidsala .aidrs-scena { opacity: 0; transition: opacity .24s ease .04s; }
#aidraidsala.aidrs-vizibil .aidrs-antet { opacity: 1; transform: none; }
#aidraidsala.aidrs-vizibil .aidrs-scena { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #aidraidsala .aidrs-antet, #aidraidsala .aidrs-scena { transition: none; opacity: 1; transform: none; } #aidraidsala .aidrs-jar i, #aidraidsala .aidrs-balaur { animation: none; } }
#aidraidsala .aidrs-fundal { position: absolute; inset: 0; z-index: 0; overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 80, 20, 0.18) 0%, rgba(255, 80, 20, 0) 45%),
		radial-gradient(ellipse at 20% 100%, rgba(150, 25, 10, 0.4) 0%, rgba(0, 0, 0, 0) 55%),
		radial-gradient(ellipse at 85% 90%, rgba(180, 60, 10, 0.35) 0%, rgba(0, 0, 0, 0) 50%),
		linear-gradient(180deg, #0a0605 0%, #150907 45%, #1d0c07 100%); }
#aidraidsala .aidrs-fundal::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px); pointer-events: none; }
#aidraidsala .aidrs-balaur { position: absolute; right: -6%; bottom: -4%; width: min(62vw, 1000px); height: auto; opacity: .16; filter: saturate(.7) drop-shadow(0 0 40px rgba(255, 90, 20, .35)); animation: aidrs-respira 7s ease-in-out infinite; pointer-events: none; }
@keyframes aidrs-respira { 50% { transform: translateY(-8px) scale(1.012); opacity: .2; } }
#aidraidsala .aidrs-jar { position: absolute; inset: 0; }
#aidraidsala .aidrs-jar i { position: absolute; left: var(--x); bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ff8a3a; box-shadow: 0 0 8px 2px rgba(255, 110, 40, 0.65); opacity: 0; transform: scale(var(--s)); animation: aidj-scanteie var(--d) linear infinite; animation-delay: var(--t); }
#aidraidsala .aidrs-antet { position: relative; z-index: 1; flex: 0 0 auto; padding: 14px 20px 8px; }
#aidraidsala .aidrs-antet-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
#aidraidsala .aidrs-titluri { flex: 1 1 320px; min-width: 0; }
#aidraidsala .aidrs-supra { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #f08a5a; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
#aidraidsala .aidrs-titlu { margin: 0; font: bold 34px/1.05 Georgia, 'Times New Roman', serif; letter-spacing: .02em; text-transform: none;
	background: linear-gradient(180deg, #fff3bd 0%, #ffd34d 35%, #e8b62e 55%, #8a5f12 80%, #d9a83a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(255, 120, 60, 0.4)); }
#aidraidsala .aidrs-sub { margin-top: 3px; font-size: 12px; color: var(--aid-text-stins, #97917a); }
#aidraidsala .aidrs-file { display: flex; gap: 4px; flex: 0 0 auto; }
#aidraidsala .aidrs-fila { padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .22); color: #ffe2b2 !important; font-size: 12px; text-decoration: none; letter-spacing: .04em; }
#aidraidsala .aidrs-fila:hover { box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00); color: var(--aid-aur, #ffcc00) !important; }
#aidraidsala .aidrs-fila.pe { background: var(--aid-aur, #ffcc00); color: #1a1206 !important; font-weight: bold; box-shadow: none; }
#aidraidsala .aidrs-afara { font-size: 10px; opacity: .7; margin-left: 2px; }
#aidraidsala .aidrs-actiuni { display: flex; gap: 10px; flex: 0 0 auto; }
#aidraidsala .aidrs-actiuni .aid-btn { text-decoration: none; }
#aidraidsala .aidrs-esc { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); font-size: 10px; letter-spacing: .05em; }
#aidraidsala .aidrs-scena { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 20px 24px; scrollbar-width: thin; scrollbar-color: #3a2d27 transparent; }
#aidraidsala #istanga { display: block !important; position: relative; width: 100% !important; max-width: 1100px; height: auto !important; min-height: 0; max-height: none !important; margin: 0 auto; overflow: visible !important; box-sizing: border-box; }
#aidraidsala #istanga h1 { margin: 2px 0 12px; font: bold 24px/1.1 Georgia, 'Times New Roman', serif; color: #ffe2b2; text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
/* pe lista si in lobby (raid.php, raid.php?r=N) titlul paginii repeta antetul salii sau numele Balaurului din cutie -- ascuns; ramane la Istoric si Clasament */
#aidraidsala.aidrs-f-raiduri #istanga h1 { display: none; }
#aidraidsala #istanga .tabdiv { display: none; }   /* filele sunt in antetul salii */
#aidraidsala #istanga .borderrosu, #aidraidsala #istanga > div:has(> .borderrosu) > .borderrosu { width: auto; max-width: none; max-height: none; height: auto; overflow: visible; padding: 14px 18px; background: rgba(10, 6, 5, .6); backdrop-filter: blur(2px); }
#aidraidsala #istanga.iframe { background-image: none; padding: 0 0 10px; }
#aidraidsala #istanga > div:has(> .borderrosu) { min-height: 0; }
#aidraidsala #istanga .aid-raid-cutie { padding: 4px 6px 8px; }
#aidraidsala #istanga .aid-intro { font-size: 13px; }
#aidraidsala #istanga .aid-raid-balauri { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 14px; }
#aidraidsala #istanga .aid-raid-balaur-cap img { width: 150px; height: 112px; }
#aidraidsala #istanga .aid-raid-nume { font-size: 22px; }
#aidraidsala #istanga .aid-raid-cond { font-size: 12px; }
#aidraidsala #istanga .aid-raid-lobbyuri li { font-size: 13px; padding: 8px 12px; }
/* lobby-ul: pe doua coloane -- jucatorii in stanga, chatul in dreapta */
#aidraidsala #istanga [data-lobby] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); grid-template-areas: "h2 h2" "sub sub" "juc chat" "but chat"; gap: 6px 22px; align-items: start; }
#aidraidsala #istanga [data-lobby] .aid-raid-h2 { grid-area: h2; font-size: 26px; }
#aidraidsala #istanga [data-lobby] .aid-raid-sub { grid-area: sub; font-size: 13px; }
#aidraidsala #istanga [data-lobby] .aid-raid-jucatori { grid-area: juc; gap: 8px; }
#aidraidsala #istanga [data-lobby] .aid-raid-jucatori li { padding: 8px 12px; font-size: 14px; }
#aidraidsala #istanga [data-lobby] .aid-raid-portret { width: 44px; height: 44px; }
#aidraidsala #istanga [data-lobby] .aid-raid-butoane { grid-area: but; }
#aidraidsala #istanga [data-lobby] .aid-raid-chat { grid-area: chat; }
#aidraidsala #istanga [data-lobby] .aid-raid-chat-lista { max-height: min(46vh, 420px); min-height: 200px; font-size: 13px; }
#aidraidsala #istanga .aid-raid-tabel { font-size: 12.5px; }
@media (max-width: 860px) {
	#aidraidsala .aidrs-titlu { font-size: 26px; }
	#aidraidsala .aidrs-sub { display: none; }
	#aidraidsala .aidrs-scena { padding: 4px 8px 16px; }
	#aidraidsala #istanga [data-lobby] { grid-template-columns: 1fr; grid-template-areas: "h2" "sub" "juc" "but" "chat"; }
	#aidraidsala #istanga .aid-raid-balauri { grid-template-columns: 1fr; }
}
/* Raidurile de azi (raid.php, sub Balauri): un rand pe raid, premiile doar iconite */
#istanga .aid-raid-azi-bloc { margin-top: 16px; text-align: left; }
#istanga .aid-raid-azi-titlu { margin: 0 0 8px; font: bold 16px/1.2 Georgia, 'Times New Roman', serif; color: var(--aid-aur, #ffcc00); }
#istanga .aid-raid-azi-titlu small { font: 11px Arial, Helvetica, sans-serif; color: var(--aid-text-stins, #97917a); margin-left: 4px; }
#istanga .aid-raid-azi-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
#istanga .aid-raid-azi-lista li { display: grid; grid-template-columns: 48px minmax(120px, 170px) minmax(110px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 6px 10px; border-radius: 6px; background: rgba(0, 0, 0, .35); border-left: 3px solid #5a4a3a; font-size: 12px; color: var(--aid-text); }
#istanga .aid-raid-azi-castig { border-left-color: var(--aid-aur, #ffcc00) !important; }
#istanga .aid-raid-azi-ranit { border-left-color: #d0782a !important; }
#istanga .aid-raid-azi-esuat { border-left-color: #7a2a1e !important; opacity: .8; }
#istanga .aid-raid-azi-cand { font-variant-numeric: tabular-nums; color: var(--aid-text-stins, #97917a); }
#istanga .aid-raid-azi-balaur { font-weight: bold; color: #ffe2b2; }
#istanga .aid-raid-azi-rez small { color: var(--aid-text-stins, #97917a); margin-left: 3px; }
#istanga .aid-raid-azi-castig .aid-raid-azi-rez { color: var(--aid-aur, #ffcc00); }
#istanga .aid-raid-azi-cine { min-width: 0; overflow-wrap: anywhere; }
#istanga .aid-raid-azi-cine a.aid-raid-azi-fugit { color: var(--aid-text-stins, #97917a); text-decoration: line-through; }
#istanga .aid-raid-azi-cine a.aid-raid-azi-mvp { color: var(--aid-aur, #ffcc00); font-weight: bold; }
#istanga .aid-raid-azi-cine i { font-style: normal; font-size: 10px; margin-left: 2px; }
#istanga .aid-raid-azi-premii { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 320px; }
#istanga .aid-raid-azi-premii img { width: 26px; height: 26px; border-radius: 4px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#istanga .aid-raid-azi-premii img.mare { box-shadow: 0 0 0 1px #b98a1e, 0 0 8px rgba(255, 200, 60, .45); }
@media (max-width: 700px) { #istanga .aid-raid-azi-lista li { display: flex; flex-wrap: wrap; gap: 4px 8px; } #istanga .aid-raid-azi-cine, #istanga .aid-raid-azi-premii { flex: 1 1 100%; justify-content: flex-start; max-width: none; } }
#aidraidsala #istanga .aid-raid-azi-lista li { font-size: 13px; padding: 8px 12px; }
#aidraidsala #istanga .aid-raid-azi-premii img { width: 30px; height: 30px; }
/* portretul din lobby: pe cap, nu pe mijlocul corpului (28 sept) */
#istanga .aid-raid-portret { object-position: top center; }

/* ============================================================ Cronica orasului
 *
 * stats.php (statisticile jocului) -- pagina, in #istanga, si sala ei pe tot
 * ecranul (js/aidstatistici.js, #aidstsala), pe aceeasi masinarie ca Sala
 * Balaurului. Fundal: cerneala albastra, scantei de aur. Graficele sunt SVG
 * scris de server; culorile lor vin de aici. (28 septembrie 2026) */
#aidstsala { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; color: var(--aid-text, #e6e0c8); font-family: Arial, Helvetica, sans-serif; }
#aidstsala[hidden] { display: none; }
#aidstsala [hidden] { display: none !important; }
#aidstsala .aidst-antet { opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1); }
#aidstsala .aidst-scena { opacity: 0; transition: opacity .24s ease .04s; }
#aidstsala.aidst-vizibil .aidst-antet { opacity: 1; transform: none; }
#aidstsala.aidst-vizibil .aidst-scena { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #aidstsala .aidst-antet, #aidstsala .aidst-scena { transition: none; opacity: 1; transform: none; } #aidstsala .aidst-jar i { animation: none; } }
#aidstsala .aidst-fundal { position: absolute; inset: 0; z-index: 0; overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(255, 200, 90, 0.14) 0%, rgba(255, 200, 90, 0) 45%),
		radial-gradient(ellipse at 15% 100%, rgba(30, 60, 120, 0.45) 0%, rgba(0, 0, 0, 0) 55%),
		radial-gradient(ellipse at 90% 85%, rgba(120, 70, 20, 0.28) 0%, rgba(0, 0, 0, 0) 50%),
		linear-gradient(180deg, #05070c 0%, #0a1020 45%, #0d1426 100%); }
#aidstsala .aidst-fundal::after { content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(255, 226, 178, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 226, 178, 0.035) 1px, transparent 1px);
	background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
#aidstsala .aidst-jar { position: absolute; inset: 0; }
#aidstsala .aidst-jar i { position: absolute; left: var(--x); bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffd76a; box-shadow: 0 0 6px 2px rgba(255, 200, 90, 0.5); opacity: 0; transform: scale(var(--s)); animation: aidj-scanteie var(--d) linear infinite; animation-delay: var(--t); }
#aidstsala .aidst-antet { position: relative; z-index: 1; flex: 0 0 auto; padding: 14px 20px 8px; }
#aidstsala .aidst-antet-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
#aidstsala .aidst-titluri { flex: 1 1 320px; min-width: 0; }
#aidstsala .aidst-supra { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #9fb4e0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
#aidstsala .aidst-titlu { margin: 0; font: bold 34px/1.05 Georgia, 'Times New Roman', serif; letter-spacing: .02em; text-transform: none;
	background: linear-gradient(180deg, #fff3bd 0%, #ffd34d 35%, #e8b62e 55%, #8a5f12 80%, #d9a83a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 14px rgba(255, 200, 90, 0.3)); }
#aidstsala .aidst-sub { margin-top: 3px; font-size: 12px; color: var(--aid-text-stins, #97917a); }
#aidstsala .aidst-file { display: flex; gap: 4px; flex: 0 0 auto; }
#aidstsala .aidst-fila { padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .22); color: #ffe2b2 !important; font-size: 12px; text-decoration: none; letter-spacing: .04em; }
#aidstsala .aidst-fila:hover { box-shadow: inset 0 0 0 1px var(--aid-aur, #ffcc00); color: var(--aid-aur, #ffcc00) !important; }
#aidstsala .aidst-fila.pe { background: var(--aid-aur, #ffcc00); color: #1a1206 !important; font-weight: bold; box-shadow: none; }
#aidstsala .aidst-actiuni { display: flex; gap: 10px; flex: 0 0 auto; }
#aidstsala .aidst-actiuni .aid-btn { text-decoration: none; }
#aidstsala .aidst-esc { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); font-size: 10px; letter-spacing: .05em; }
#aidstsala .aidst-scena { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 20px 24px; scrollbar-width: thin; scrollbar-color: #2a3550 transparent; }
#aidstsala #istanga { display: block !important; position: relative; width: 100% !important; max-width: 1180px; height: auto !important; min-height: 0; max-height: none !important; margin: 0 auto; overflow: visible !important; box-sizing: border-box; }
#aidstsala #istanga h1, #aidstsala #istanga .tabdiv { display: none; }   /* titlul si filele sunt in antetul salii */
#aidstsala #istanga .borderrosu, #aidstsala #istanga > div:has(> .borderrosu) > .borderrosu { width: auto; max-width: none; max-height: none; height: auto; overflow: visible; padding: 14px 18px; background: rgba(4, 7, 14, .55); backdrop-filter: blur(2px); border-color: rgba(255, 226, 178, .18); }
#aidstsala #istanga.iframe { background-image: none; padding: 0 0 10px; }
#aidstsala #istanga > div:has(> .borderrosu) { min-height: 0; }
@media (max-width: 860px) {
	#aidstsala .aidst-titlu { font-size: 26px; }
	#aidstsala .aidst-sub { display: none; }
	#aidstsala .aidst-scena { padding: 4px 8px 16px; }
}

/* --- pagina: cutii, cifre, grafice, topuri (merge si in rama, fara sala) --- */
#istanga .aid-st-cutie { text-align: left; padding: 4px 6px 8px; }
#istanga .aid-st-sub { margin: 0 0 12px; font-size: 12px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-st-sub b { color: #ffe2b2; }
#istanga .aid-st-cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; margin-bottom: 14px; }
#istanga .aid-st-cifra { padding: 10px 12px 9px; border-radius: 8px; background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .1); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#istanga .aid-st-cifra b { font: bold 24px/1 Georgia, 'Times New Roman', serif; color: var(--aid-aur, #ffcc00); font-variant-numeric: tabular-nums; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#istanga .aid-st-cifra span { font-size: 11px; color: var(--aid-text, #e6e0c8); }
#istanga .aid-st-cifra small { font-size: 10px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-st-cifra-mare { grid-column: span 2; box-shadow: inset 0 0 0 1px rgba(255, 204, 0, .35); background: linear-gradient(180deg, rgba(255, 204, 0, .08), rgba(0, 0, 0, .38)); }
#istanga .aid-st-cifra-mare b { font-size: 34px; }
#istanga .aid-st-cifra-viu b { color: #ff9a4a; }
#istanga .aid-st-rand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; align-items: stretch; }
#istanga .aid-st-rand-grafice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#istanga .aid-st-card { padding: 10px 12px 12px; border-radius: 8px; background: rgba(0, 0, 0, .38); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .1); min-width: 0; }
#istanga .aid-st-card-lat { grid-column: span 2; }
#istanga .aid-st-card h3 { margin: 0 0 8px; font: bold 14px/1.2 Georgia, 'Times New Roman', serif; color: #ffe2b2; }
#istanga .aid-st-card h3 + h3 { margin-top: 14px; }
#istanga .aid-st-card h3 small { font: 11px Arial, Helvetica, sans-serif; color: var(--aid-text-stins, #97917a); margin-left: 4px; }
#istanga .aid-st-h2 { margin: 6px 0 8px; font: bold 18px/1.2 Georgia, 'Times New Roman', serif; color: var(--aid-aur, #ffcc00); text-align: left; }
#istanga .aid-st-nota { margin: 8px 0 0; font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-st-nota b { color: #ffe2b2; }
#istanga .aid-st .aid-nota { text-align: left; }
#istanga .aid-st-inst { color: #d0a86a; }
/* barele in timp (SVG) */
#istanga .aid-st-bare { display: block; width: 100%; height: 150px; }
#istanga .aid-st-bare .aid-st-ghid { stroke: rgba(255, 226, 178, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }
#istanga .aid-st-bare .aid-st-bara { fill: #e8b62e; }
#istanga .aid-st-bare .aid-st-bara:hover { fill: #fff3bd; }
#istanga .aid-st-bare .aid-st-bara.goala { fill: rgba(255, 226, 178, .08); }
#istanga .aid-st-bare .aid-st-et, #istanga .aid-st-bare .aid-st-val { fill: var(--aid-text-stins, #97917a); font: 11px Arial, Helvetica, sans-serif; transform-box: fill-box; }
#istanga .aid-st-bare .aid-st-val { fill: var(--aid-aur, #ffcc00); font-weight: bold; }
/* bara impartita */
#istanga .aid-st-impartita { display: flex; height: 30px; border-radius: 6px; overflow: hidden; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
#istanga .aid-st-impartita span { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; color: #1a1206; }
#istanga .aid-st-impartita .a { background: linear-gradient(180deg, #ffd76a, #d9a83a); }
#istanga .aid-st-impartita .b { background: linear-gradient(180deg, #8fb0e8, #4f6ea8); color: #06101f; }
#istanga .aid-st-impartita b { font-size: 13px; }
/* bare orizontale */
#istanga .aid-st-oriz { display: flex; flex-direction: column; gap: 5px; }
#istanga .aid-st-oriz-r { display: grid; grid-template-columns: minmax(70px, 110px) 1fr 44px; align-items: center; gap: 8px; font-size: 11px; }
#istanga .aid-st-oriz-r .et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aid-text, #e6e0c8); }
#istanga .aid-st-oriz-r .bara { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .06); overflow: hidden; }
#istanga .aid-st-oriz-r .bara i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #b8620f, #ffd76a); }
#istanga .aid-st-oriz-r .v { text-align: right; color: #ffe2b2; font-variant-numeric: tabular-nums; }
/* rafturile cu iconite (elemente, potiuni) */
#istanga .aid-st-raft { display: flex; flex-wrap: wrap; gap: 10px 12px; }
#istanga .aid-st-ob { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; }
#istanga .aid-st-ob b { font-size: 13px; color: var(--aid-aur, #ffcc00); font-variant-numeric: tabular-nums; }
#istanga .aid-st-ob i { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #b8620f, #ffd76a); align-self: flex-start; min-width: 2px; }
#istanga .aid-st-artefact-in { display: flex; gap: 12px; align-items: flex-start; }
#istanga .aid-st-artefact-in > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#istanga .aid-st-artefact-in b { font: bold 15px/1.2 Georgia, 'Times New Roman', serif; color: var(--aid-aur, #ffcc00); }
#istanga .aid-st-artefact-in small { font-size: 11px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-st-artefact-in p { margin: 4px 0 0; font-size: 12px; }
/* topurile */
#istanga .aid-st-topuri { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
#istanga .aid-st-top ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#istanga .aid-st-top li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "rang cine val" "rang bara bara"; align-items: center; gap: 2px 8px; font-size: 12px; }
#istanga .aid-st-top .rang { grid-area: rang; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: bold 12px/1 Georgia, 'Times New Roman', serif; background: rgba(255, 255, 255, .08); color: var(--aid-text-stins, #97917a); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .15); }
#istanga .aid-st-top .loc1 .rang { background: linear-gradient(180deg, #fff3bd, #d9a83a); color: #1a1206; box-shadow: 0 0 8px rgba(255, 204, 0, .4); }
#istanga .aid-st-top .loc2 .rang { background: linear-gradient(180deg, #f2f2f2, #9a9a9a); color: #1a1a1a; }
#istanga .aid-st-top .loc3 .rang { background: linear-gradient(180deg, #e0a070, #8a5a2a); color: #1a1206; }
#istanga .aid-st-top .cine { grid-area: cine; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#istanga .aid-st-top .cine a { color: #ffe2b2; }
#istanga .aid-st-top .loc1 .cine a { color: var(--aid-aur, #ffcc00); font-weight: bold; }
#istanga .aid-st-top .cine small { margin-left: 6px; font-size: 10px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-st-top .val { grid-area: val; text-align: right; color: #ffe2b2; font-variant-numeric: tabular-nums; white-space: nowrap; }
#istanga .aid-st-top .val small { font-size: 10px; color: var(--aid-text-stins, #97917a); }
#istanga .aid-st-top .bara { grid-area: bara; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
#istanga .aid-st-top .bara i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #b8620f, #ffd76a); }
#istanga .aid-st-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
#istanga .aid-st-chips span { padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px rgba(255, 226, 178, .15); font-size: 11px; }
#istanga .aid-st-chips small { color: var(--aid-text-stins, #97917a); }
@media (max-width: 760px) {
	#istanga .aid-st-rand, #istanga .aid-st-rand-grafice { grid-template-columns: 1fr; }
	#istanga .aid-st-card-lat { grid-column: auto; }
	#istanga .aid-st-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#istanga .aid-st-cifra-mare b { font-size: 28px; }
	#istanga .aid-st-bare { height: 120px; }
}

/* cronurile care tac cat jocul e inchis (Cron: doar_in_runda) */
#istanga .aid-cron-runda { font-style: normal; font-size: 10px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 226, 178, .1); color: var(--aid-text-stins, #97917a); white-space: nowrap; }