@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');

/* General Styles */
caption {
	white-space: nowrap;
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 13px;
}

/* ── Notifica messaggi non letti (barra Info Personaggio) ─────────────────── */
.mail-new {
	color: #ff6b6b !important;
	font-weight: bold;
	text-decoration: none;
	animation: mail-pulse 1.6s ease-in-out infinite;
	text-shadow: 0 0 6px rgba(255, 60, 60, 0.6);
}
.mail-new:hover {
	color: #ff9b9b !important;
}
@keyframes mail-pulse {
	0%, 100% { opacity: 1;    text-shadow: 0 0 6px rgba(255, 60, 60, 0.6); }
	50%      { opacity: 0.55; text-shadow: 0 0 12px rgba(255, 60, 60, 0.9); }
}

td {
        font-family: "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 13px;
}

.trlight, .trdark {
        overflow-wrap: anywhere;
}


.main-body {
	background-image: none;
	background-color: #120b04;
	color: #CCCCCC;
	margin: 0;
}

/* ── BAR-BUTTON GLOBALE — si applica a tutte le zone non stilizzate ──────────
   Le regole body.zone-X più specifiche sovrascrivono con i colori tematici.  */
.left-panel .nav-container a.nav {
	display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(14,10,4,0.82); border:1px solid rgba(120,90,40,0.34);
	border-left:3px solid #6a4818; border-radius:6px;
	color:#f2e4c4 !important; text-decoration:none !important; font-weight:normal;
	font-size:0.95em; line-height:1.32; text-align:left;
	box-shadow:0 3px 10px rgba(0,0,0,0.40);
	text-shadow:
		-1px -1px 1px rgba(0,0,0,0.9),
		 1px -1px 1px rgba(0,0,0,0.9),
		-1px  1px 1px rgba(0,0,0,0.9),
		 1px  1px 1px rgba(0,0,0,0.9),
		 0 0 3px rgba(0,0,0,1);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;
}
.left-panel .nav-container a.nav:hover {
	background:rgba(26,18,6,0.96) !important; border-left-color:#a87030;
	color:#fff6d8 !important; transform:translateX(3px);
	box-shadow:0 4px 16px rgba(160,100,20,0.34);
}
.left-panel .nav-container br.clear { display:none; }

/* ── Menu città tematizzato: vedi blocco in fondo al file (body.location-X) ── */

/* Roccamorta — colore uniforme (rosso-mattone) nel blocco in fondo al file,
   come le altre città. Niente più colori-testo per categoria di link. */

/* LOGIN — solo home.php mostra l'immagine di sfondo */
body.zone-home {
	background-image: url('login-abisso-bg.webp?v=1');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 38%;
	background-attachment: fixed;
	background-color: #050302;
}

@media (max-width: 968px) {
	.main-body {
		background-size: cover;
		background-position: center center;
	}
	.pageheader-center > img {
		width: 50%;
	}
	.pageheader-right > img {
		width: 27%;
	}
	.petition {
		padding-left: 15px;
	}
}


.popup-body {
	background-color: #111;
	color: #CCCCCC;
}

/* Offcanvas sidebars */
.offcanvas {
	background-image: none;
	background-color: #120b04;
	color: #CCCCCC;
}

body.zone-home .offcanvas {
	background-image: url('login-abisso-bg.webp?v=1');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 38%;
	background-color: #050302;
}

/* Navigation Table */
table.nav {
	border: 1px solid #000000;
	height: auto;
	width: 220px;
}

.navhead {
	text-decoration: none;
	width: 100%;
	height: auto;
	padding: 2px 1px;
	float: left;
	line-height: 28px;
	clear: none;
	color: #c8a860;
	cursor: default;
	text-align: center;
	font-family: Georgia, 'Times New Roman', serif;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 0.85em;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(200,168,96,0.25);
	border-top: 1px solid rgba(200,168,96,0.25);
	margin-top: 8px;
	padding-top: 6px;
}
/* Colore intestazioni con codice colore (via Nav::addColoredHeader).
   Le classi col* di colors.css sono spente → qui le rendiamo tematiche/brillanti. */
.navhead .colLtRed {  /* PERICOLO — rosso */
	color: #ff4a38 !important;
	text-shadow: 0 0 7px rgba(255,70,50,0.55), 0 1px 3px rgba(0,0,0,0.95) !important;
}
.navhead .colDkRed { /* LAME — rosso sangue con effetto sangue accennato */
	color: #c41818 !important; /* fallback */
	background: linear-gradient(180deg, #e8392a 0%, #a51212 52%, #5a0606 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.95)) drop-shadow(0 3px 6px rgba(140,8,8,0.6));
}
.navhead .colLtYellow { /* MERCANTI — oro */
	color: #ffcf5a !important;
	text-shadow: 0 0 7px rgba(255,200,60,0.5), 0 1px 3px rgba(0,0,0,0.95) !important;
}
.navhead .colLtOrange { /* TAVERNA — ambra focolare */
	color: #e89a48 !important;
	text-shadow: 0 0 7px rgba(225,140,55,0.5), 0 1px 3px rgba(0,0,0,0.95) !important;
}
.navheadsub {
	text-decoration: none;
	width: 208px;
	height: auto;
	padding: 1px;
	float: left;
	line-height: 26px;
	clear: none;
	color: #a07838;
	cursor: default;
	text-align: left;
	font-family: Georgia, 'Times New Roman', serif;
	font-variant: small-caps;
	font-weight: normal;
	font-size: 0.80em;
	letter-spacing: 0.03em;
	text-shadow: 0 1px 3px rgba(0,0,0,0.8);
	margin-left: 10px;
}

a {
	color: #669933;
	text-decoration: none;
}

/* Header and other styles */

.page-header {
	padding-bottom: 3px;
	/*background: url('header-bg.webp') repeat-x;*/
}

.main-content {
	border-style: dotted;
	/*background-color: #1b1b1b;*/
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	align-content: start;
}

.sidebar-content {
	min-width: 198px;
	max-width: 248px;
	padding-left: 3px;
	padding-right: 3px;
	align-content: start;
}

.pageheader-center, .pageheader-left, .pageheader-right {
	width: 33.3%;
	padding: 3px;
	text-align: center;
}

@media (max-width: 768px) {
}

.pageheader-left {
	text-align: left;
}

.pageheader-right {
        text-align: right;
}

/* ===== TITOLO GIOCO ===== */
.game-title-link {
	text-decoration: none;
	display: inline-block;
	line-height: 1;
}

.game-title {
	display: block;
	font-family: 'Cinzel Decorative', 'Palatino Linotype', serif;
	font-size: 2.1em;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background: linear-gradient(135deg, #c8a96e 0%, #f0d090 40%, #c8a96e 60%, #8a6030 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(200, 140, 40, 0.5));
	text-shadow: none;
}

.game-title-sub {
	display: block;
	font-family: 'Cinzel Decorative', 'Palatino Linotype', serif;
	font-size: 1.0em;
	font-weight: 400;
	letter-spacing: 0.35em;
	text-transform: lowercase;
	background: linear-gradient(135deg, #9060a0 0%, #c090d0 50%, #7040a0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 4px rgba(160, 80, 200, 0.4));
}

.mail-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 0.5rem;
}

.mail-nav__link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0 0.5rem;
        text-decoration: none;
}

.mail-nav__link,
.mail-nav__link a {
        color: inherit;
        text-decoration: none;
}




/* Navigation Link */
a.nav {
	color: #b87030;
	text-decoration: none;
	width: 100%;
	height: auto;
	float: left;
	padding: 2px 4px 2px 8px;
	clear: none;
	text-align: left;
	font-size: 0.88em;
	transition: color 0.15s ease, border-left 0.15s ease, background-color 0.15s ease;
}

.navhelp {
	text-decoration: none;
	width: 100%;
	height: auto;
	padding: 1px 4px;
	float: left;
	clear: none;
	color: #907050;
	font-size: 0.82em;
	font-style: italic;
}

.sidebar-content img.nav-bottom {
	margin-top: 15px;
}

/* Translations and others */

select {
	background-color: #000000;
	border: 1px solid #999999;
	color: #CCCCCC;
}

table.vitalinfo {
	background-color: #333333;
	border: 1px solid #000000;
	width: 220px;
}

a.motd, a:hover.motd,
a.hotmotd {
	font-weight: normal;
	color: #FFFFFF;
}

.pagetitle {
	font-family: "Arial Black", "Courier";
	font-variant: small-caps;
	font-size: 14px;
	color: #000000;
}

.navhi {
	color: #c8a860;
	text-decoration: none;
	font-weight: bold;
}

td.nav a.thot {
	position: absolute;
	left: 0px;
	height: auto;
}

td.nav a.t {
	position: absolute;
	left: 0px;
	height: auto;
}

/* Hover Effects */
a:hover.nav {
	background-color: rgba(60, 30, 5, 0.65);
	border-left: 2px solid #c8a860;
	padding-left: 6px;
	color: #e8c070;
	text-shadow: 0 0 6px rgba(200,168,96,0.4);
	box-shadow: inset 0 0 12px rgba(200, 168, 96, 0.08), 2px 0 8px rgba(200,168,96,0.12);
}

/* Message of the Day Link */
a.motd, a:hover.motd {
	text-decoration: none;
	color: #c61d2e;
	font-weight: normal;
}
a:hover.motd {
	color: #FFFFFF;
}

/* Character Info Styles — Dark Fantasy */
.charinfo-panel {
	width: 100%;
	color: #ccc;
	font-size: 13px;
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

.charinfo-section-head {
	background: linear-gradient(90deg, #2a1040 0%, #3d1a60 50%, #2a1040 100%);
	color: #d4a0ff;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	padding: 4px 6px;
	margin-top: 6px;
	margin-bottom: 2px;
	border-top: 1px solid #5a2a80;
	border-bottom: 1px solid #5a2a80;
	text-shadow: 0 0 6px rgba(180, 80, 255, 0.5);
}

.charinfo-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3px 6px;
	border-bottom: 1px solid rgba(80, 40, 100, 0.3);
	min-height: 22px;
}

.charinfo-row:hover {
	background: rgba(80, 40, 120, 0.15);
}

.charinfo-label {
	color: #9a7ab8;
	font-size: 12px;
	flex-shrink: 0;
	margin-right: 6px;
}

.charinfo-value {
	color: #e8d0ff;
	font-size: 12px;
	text-align: right;
	word-break: break-word;
	flex: 1;
	min-width: 0;
}

.charinfo-bar-row {
	padding: 2px 6px 4px 6px;
	width: 100%;
	box-sizing: border-box;
}

.charinfo-buff {
	padding: 4px 6px;
	color: #b8a0d0;
	font-size: 12px;
	line-height: 1.5;
}

/* ── Barra HP fluida nella sidebar ──────────────────────────────────────── */
.hp-bar-wrap {
	width: 100%;
	height: 4px;
	background: rgba(60, 40, 10, 0.50);
	border-radius: 2px;
	margin-top: 3px;
	overflow: hidden;
}

.hp-bar-fill {
	height: 100%;
	border-radius: 2px;
	transition: width 0.8s ease, background-color 0.8s ease;
	animation: hp-bar-fadein 0.9s ease-out both;
}

@keyframes hp-bar-fadein {
	from { width: 0% !important; opacity: 0; }
	to   { opacity: 1; }
}

/* vecchie classi tabella — mantenute per compatibilità */
td.charhead {
	background-color: #222222;
	color: #FFFFFF;
}

table.charinfo {
	width: 220px;
	color: #FFFFFF;
	border: none;
	border-spacing: 0px;
}

td.charinfo {
	color: #FFFFFF;
	border-top: 1px solid #FFFFFF;
	cursor: default;
	padding: 2px;
}

/* Specific adjustments for td elements that used inline background attributes */
td[class*="page-top"] {
	background-image: url('/templates/images/page_top.gif');
}

td[class*="page-bottom"] {
	background-image: url('/templates/images/page_bot.gif');
}

/* Button Styles */
.button {
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

.login-submit {
	text-align: center;
}

/* Other Styles */
.select {
	background-color: #000000;
	border: 1px solid #999999;
	color: #CCCCCC;
}

.stonage {
	background-image: url(/templates/images/stone_corner.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

.stonage2 {
	background-image: url(/templates/images/stone_center.gif);
	background-repeat: no-repeat;
	background-position: left top;
	color: #669933;
}

/* Background Images for Different Sections */
td.village {
	background-image: url(/templates/images/village.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}

td.forest {
	background-image: url(/templates/images/forest.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}

td.dragon {
	background-image: url(/templates/images/dragon.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}

/* ========================================
   SFONDI PER ZONA — Cronache dell'Abisso
   Inserire le immagini in:
   templates_twig/aurora/assets/
   ======================================== */

/* FORESTA — immagine confinata via ::before (vedi blocco zone-forest completo più avanti) */

/* VILLAGGIO */
body.zone-village {
	background-image: url('piazzavillaggio.webp');
}

/* DRAGO / MALCHAR */
body.zone-dragon {
	background-image: url('drago.webp');
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;
	background-color: #0a0000;
}

body.zone-dragon::before {
	content: '';
	position: fixed;
	inset: -8%;
	background-image: url('drago.webp');
	background-size: cover;
	background-position: center top;
	z-index: -1;
	animation: dragon-breathe 8s ease-in-out infinite;
}

body.zone-dragon.dragon-slain::before {
	background-image: url('drago-morente.webp');
	animation: none;
}

@keyframes dragon-breathe {
	0%   { transform: scale(1.00); filter: brightness(1.00); }
	50%  { transform: scale(1.06); filter: brightness(1.12); }
	100% { transform: scale(1.00); filter: brightness(1.00); }
}

body.zone-dragon .main-content {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Pannello combattimento (combat-log / shop-panel-inner) totalmente trasparente */
body.zone-dragon .shop-panel-inner,
body.zone-dragon .shop-panel-inner.combat-log {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Rimuovi blur dal wrapper esterno .shop-panel */
body.zone-dragon .shop-panel {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: transparent !important;
}

/* Bottom-strip trasparente per vedere il drago */
body.zone-dragon .bottom-strip {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Ombra forte sotto al testo per leggibilità senza pannello scuro */
body.zone-dragon .main-content,
body.zone-dragon .main-content *,
body.zone-dragon .shop-panel-inner,
body.zone-dragon .shop-panel-inner *,
body.zone-dragon .bottom-strip-inner,
body.zone-dragon .bottom-strip-inner * {
	text-shadow:
		0 0 3px rgba(0,0,0,0.98),
		0 0 5px rgba(0,0,0,0.90),
		1px 1px 2px rgba(0,0,0,1) !important;
}

body.zone-dragon .offcanvas,
body.zone-dragon .sidebar-content {
	background-image: none;
	background-color: rgba(15, 2, 2, 0.90);
}

/* CIMITERO — immagine confinata nella finestra centrale (pattern standard) */
body.zone-graveyard { background-image:none !important; background-color:#020008; }
body.zone-graveyard::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('graveyard.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-graveyard::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(5,2,10,0.34); z-index:1; pointer-events:none; }
body.zone-graveyard .bottom-strip { background:transparent !important; }
body.zone-graveyard .graveyard-wrap { display:block !important; width:min(1180px,96%) !important;
	margin:60vh auto 16px !important; padding:18px 30px;
	background:rgba(10,4,16,0.40); backdrop-filter:blur(4px);
	border:1px solid rgba(120,70,200,0.25); border-left:4px solid #6a30b0;
	border-radius:8px; box-shadow:0 0 24px rgba(80,10,180,0.25); }

/* TERRA DELLE OMBRE — immagine confinata nella finestra centrale (pattern standard) */
body.zone-shades { background-image:none !important; background-color:#03010a; }
body.zone-shades::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('shades.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-shades::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(8,2,20,0.36); z-index:1; pointer-events:none; }
body.zone-shades .bottom-strip { background:transparent !important; }
body.zone-shades .shades-wrap { display:block !important; width:min(1180px,96%) !important;
	margin:60vh auto 16px !important; padding:18px 30px;
	background:rgba(10,3,20,0.42); backdrop-filter:blur(4px);
	border:1px solid rgba(120,40,220,0.28); border-left:4px solid #7a30c0;
	border-radius:8px; box-shadow:0 0 26px rgba(100,20,220,0.28); }

body.zone-shades .main-content {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body.zone-shades .offcanvas,
body.zone-shades .sidebar-content {
	background-image: none;
	background-color: rgba(8, 2, 20, 0.90);
}

/* ARENA / ADDESTRAMENTO */
body.zone-train {
	background-image: url('arena.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-color: #080402;
}

body.zone-train .main-content {
	background: transparent;
	border: none;
	box-shadow: none;
}

body.zone-train .shop-panel,
body.zone-train .shop-panel-inner {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
}

body.zone-train .offcanvas,
body.zone-train .sidebar-content {
	background-image: none;
	background-color: rgba(12, 6, 2, 0.90);
}

/* TAVERNA / LOCANDA */
body.zone-inn {
	background-image: none !important;
	background-color: #080402;
}

body.zone-inn .main-content {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body.zone-inn .bottom-strip { background: transparent !important; }

body.zone-inn .offcanvas,
body.zone-inn .sidebar-content {
	background-image: none;
	background-color: rgba(10, 5, 2, 0.93);
}

/* Rimuovi blur dalla tabella offerte/corruzione — sfondo solido per leggibilità */
body.zone-inn .shop-panel {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: transparent !important;
}

body.zone-inn .shop-panel-inner {
	background: rgba(8, 4, 2, 0.82) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 1px solid rgba(160, 100, 40, 0.35) !important;
	box-shadow: none !important;
	border-radius: 4px;
}

/* Tabella nell'inn — righe leggibili su sfondo scuro */
body.zone-inn .bottom-strip .trlight,
body.zone-inn .bottom-strip .trdark,
body.zone-inn .shop-panel-inner .trlight,
body.zone-inn .shop-panel-inner .trdark {
	background-color: rgba(30, 15, 5, 0.75) !important;
	color: #d8c8a8 !important;
}
body.zone-inn .bottom-strip .trlight td,
body.zone-inn .bottom-strip .trdark td,
body.zone-inn .shop-panel-inner .trlight td,
body.zone-inn .shop-panel-inner .trdark td {
	color: #d8c8a8 !important;
}

/* LE PORTE SOTTO LA CENERE */
body.zone-porte_cenere .main-content {
	background-color: transparent;
	border: none;
	box-shadow: none;
}

/* Testo con contorno nero — leggibile su qualsiasi sfondo chiaro/scuro */
body.zone-porte_cenere .main-content,
body.zone-porte_cenere .main-content td,
body.zone-porte_cenere .main-content span,
body.zone-porte_cenere .main-content a,
body.zone-porte_cenere .main-content b,
body.zone-porte_cenere .main-content i {
	text-shadow:
		0 0 3px rgba(0,0,0,1),
		0 0 6px rgba(0,0,0,0.95),
		1px  1px 0 rgba(0,0,0,0.9),
		-1px -1px 0 rgba(0,0,0,0.9),
		1px -1px 0 rgba(0,0,0,0.9),
		-1px  1px 0 rgba(0,0,0,0.9);
	color: #f0e0c0;
}

/* Links nella quest — colore ambra caldo ben visibile */
body.zone-porte_cenere .main-content a {
	color: #e8b040 !important;
}
body.zone-porte_cenere .main-content a:hover {
	color: #ffd060 !important;
}

/* Sidebar — pannello scuro per non disperdere l'immagine */
body.zone-porte_cenere .offcanvas,
body.zone-porte_cenere .sidebar-content {
	background-image: none;
	background-color: rgba(6, 3, 10, 0.88);
}

/* Header riga superiore */
body.zone-porte_cenere .page-header {
	background-color: rgba(6, 3, 10, 0.65);
}

/* GUARITORE */
/* CAPANNA DEL GUARITORE — immagine confinata + pannello (tema verde) */
body.zone-healer { background-image:none !important; background-color:#020a04; }
body.zone-healer::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('guaritore.webp?v=2') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-healer::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(2,8,4,0.30); z-index:1; pointer-events:none; }
body.zone-healer .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-healer .bottom-strip { background:transparent !important; }
body.zone-healer .offcanvas,
body.zone-healer .sidebar-content { background-image:none; background-color:rgba(2,8,4,0.95); }
body.zone-healer .healer-wrap {
	display:block !important; max-width:880px !important; margin:54vh auto 16px !important; padding:20px 32px;
	background:rgba(2,10,5,0.40) !important; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
	border:1px solid rgba(40,140,60,0.30); border-left:4px solid #1f7a32; border-radius:8px;
	box-shadow:0 12px 40px rgba(0,0,0,0.55); color:#cfe8d4 !important; line-height:1.72; text-shadow:0 1px 3px rgba(0,0,0,0.92);
}

/* RUNMODULE — viaggio/moduli generici (usa foresta come sfondo di default) */
body.zone-runmodule {
	background-image: url('foresta.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-color: #020805;
}

body.zone-runmodule .main-content {
	background-color: rgba(2, 8, 3, 0.32);
	border: 1px solid #1a4a20;
	box-shadow: 0 0 24px rgba(20, 100, 30, 0.25);
}

body.zone-runmodule .offcanvas,
body.zone-runmodule .sidebar-content {
	background-image: none;
	background-color: rgba(2, 8, 3, 0.90);
}

/* LOGGIA DEI CACCIATORI */
body.zone-lodge {
	background-image: url('loggiadeicacciatori.webp');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #120b04;
}

/* LISTA DEI GUERRIERI — migrata a ::before (confinata) in zona 1239 */

body.zone-lodge .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-lodge .offcanvas,
body.zone-lodge .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* VISUALIZZA PETIZIONI — stesso sfondo della Loggia */
body.zone-viewpetition {
	background-image: none;
	background-color: #120b04;
}

body.zone-viewpetition .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-viewpetition .offcanvas,
body.zone-viewpetition .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* ACCAMPAMENTO SELVAGGIO */
body.zone-accampamento .main-content {
	background-color: rgba(2, 4, 12, 0.82);
	border: 1px solid #1a2a4a;
	box-shadow: 0 0 28px rgba(20, 40, 120, 0.45);
}

body.zone-accampamento .offcanvas,
body.zone-accampamento .sidebar-content {
	background-image: none;
	background-color: rgba(2, 4, 12, 0.93);
}

/* BANCA DELLE OMBRE */
body.zone-stables {
	background-image: url('valdrak-scuderie.webp');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #080604;
}

body.zone-stables .main-content {
	background-color: rgba(10, 7, 4, 0.82);
	border: 1px solid #3a2a10;
	box-shadow: 0 0 28px rgba(80, 50, 10, 0.35);
}

body.zone-stables .offcanvas,
body.zone-stables .sidebar-content {
	background-image: none;
	background-color: rgba(10, 7, 4, 0.93);
}

body.zone-bank {
	background-image: url('banca-ombre.webp');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #050208;
}

body.zone-bank .main-content {
	background-color: rgba(4, 2, 10, 0.82);
	border: 1px solid #2a1a4a;
	box-shadow: 0 0 28px rgba(60, 20, 140, 0.40);
}

body.zone-bank .offcanvas,
body.zone-bank .sidebar-content {
	background-image: none;
	background-color: rgba(4, 2, 10, 0.93);
}

/* GIARDINI OSCURI */
body.zone-gardens .main-content {
	background-color: rgba(2, 8, 2, 0.82);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid rgba(40, 90, 30, 0.5);
	box-shadow: 0 0 28px rgba(20, 80, 20, 0.30);
}

/* Testo — shadow nera per staccarsi dallo sfondo verde */
body.zone-gardens .main-content,
body.zone-gardens .main-content * {
	text-shadow:
		0 0 4px rgba(0,0,0,0.95),
		0 1px 3px rgba(0,0,0,0.85) !important;
}

/* colDkGreen (#006600) troppo scuro sul pannello verde — schiarito per i giardini */
body.zone-gardens .main-content .colDkGreen {
	color: #5ab85a !important;
}

/* colDkRed (#660000) e colLtRed (#990000) troppo scuri — schiariti per i giardini */
body.zone-gardens .main-content .colDkRed {
	color: #d44444 !important;
}
body.zone-gardens .main-content .colLtRed {
	color: #e05555 !important;
}

body.zone-gardens .offcanvas,
body.zone-gardens .sidebar-content {
	background-image: none;
	background-color: rgba(2, 8, 2, 0.93);
}

/* PRESENTAZIONI — stesso sfondo della Loggia */
body.zone-referral {
	background-image: none;
	background-color: #120b04;
}

body.zone-referral .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-referral .offcanvas,
body.zone-referral .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* IMPOSTAZIONI DI GIOCO */
body.zone-configuration {
	background-image: none;
	background-color: #120b04;
}

body.zone-configuration .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-configuration .offcanvas,
body.zone-configuration .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* GESTORE MODULI */
body.zone-modules {
	background-image: none;
	background-color: #120b04;
}

body.zone-modules .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-modules .offcanvas,
body.zone-modules .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* VIAGGIO TRA CITTÀ */
body.zone-runmodule {
	background-image: none;
	background-color: #0d0a05;
}

body.zone-runmodule .main-content {
	background-color: rgba(10, 6, 2, 0.32);
	border: 1px solid #4a2a08;
	box-shadow: 0 0 18px rgba(120, 50, 5, 0.30);
}

body.zone-runmodule .offcanvas,
body.zone-runmodule .sidebar-content {
	background-image: none;
	background-color: rgba(15, 8, 2, 0.95);
}

/* NOTIZIE */
body.zone-news {
	background-image: url('morte.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.zone-news .main-content {
	background-color: rgba(5, 2, 10, 0.32);
	border: 1px solid #3a1a6b;
	box-shadow: 0 0 24px rgba(80, 10, 180, 0.25);
}

body.zone-news .offcanvas,
body.zone-news .sidebar-content {
	background-image: none;
	background-color: rgba(5, 2, 10, 0.90);
}

/* SCHERMATA DI MORTE */
.death-screen {
	background-image: url('morte.webp');
	background-size: cover;
	background-position: center center;
	width: calc(100% + 40px);
	margin: -20px -20px 24px -20px;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 3px solid #6b0000;
	box-shadow: 0 8px 40px rgba(180, 0, 0, 0.55), inset 0 0 80px rgba(0,0,0,0.7);
	position: relative;
}

.death-overlay {
	text-align: center;
	padding: 40px 20px;
	background: rgba(0, 0, 0, 0.45);
	width: 100%;
}

.death-title {
	font-family: 'UnifrakturMaguntia', 'Palatino Linotype', 'Book Antiqua', serif;
	font-size: 5em;
	font-weight: bold;
	color: #cc0000;
	text-shadow:
		0 0 10px #ff0000,
		0 0 30px #aa0000,
		0 0 60px #660000,
		3px 3px 6px #000000;
	letter-spacing: 12px;
	line-height: 1.1;
	animation: deathpulse 2s ease-in-out infinite;
}

.death-subtitle {
	font-family: 'Palatino Linotype', 'Book Antiqua', serif;
	font-size: 1.3em;
	color: #888;
	text-shadow: 0 0 10px #440000, 1px 1px 3px #000;
	margin-top: 12px;
	letter-spacing: 3px;
	font-style: italic;
}

@keyframes deathpulse {
	0%   { text-shadow: 0 0 10px #ff0000, 0 0 30px #aa0000, 0 0 60px #660000, 3px 3px 6px #000; }
	50%  { text-shadow: 0 0 20px #ff4444, 0 0 50px #cc0000, 0 0 90px #880000, 3px 3px 6px #000; }
	100% { text-shadow: 0 0 10px #ff0000, 0 0 30px #aa0000, 0 0 60px #660000, 3px 3px 6px #000; }
}

body.zone-graveyard .main-content {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body.zone-graveyard .offcanvas,
body.zone-graveyard .sidebar-content {
	background-image: none;
	background-color: rgba(5, 2, 10, 0.90);
}

/* Colore cenere (colLtBlack) → viola spettrale nel cimitero */
body.zone-graveyard .colLtBlack {
	color: #9A5BEE !important;
	animation: grave-pulse 4s ease-in-out infinite;
}

@keyframes grave-pulse {
	0%, 100% { color: #7a3bce; text-shadow: 0 0 4px rgba(154,91,238,0.4); }
	50%       { color: #bb7fff; text-shadow: 0 0 10px rgba(187,127,255,0.75); }
}


/* ── FORESTA OSCURA — immagine confinata + ritratti combat ──────────────── */
body.zone-forest { background-image:none !important; background-color:#020802; }
body.zone-forest::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
    background:url('foresta.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-forest::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
    background:rgba(2,8,2,0.28); z-index:1; pointer-events:none; }
body.zone-forest .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-forest .bottom-strip { background:transparent !important; }
body.zone-forest .offcanvas,
body.zone-forest .sidebar-content { background-image:none; background-color:rgba(3,10,3,0.95); }

/* ── Leggibilità globale: alone scuro su tutto il testo di gioco ─────────── */
body:not(.zone-home) .bottom-strip-inner,
body:not(.zone-home) .bottom-strip-inner *,
body:not(.zone-home) .shop-panel-inner,
body:not(.zone-home) .shop-panel-inner * {
    text-shadow:
        0 0 3px rgba(0,0,0,0.98),
        0 0 5px rgba(0,0,0,0.90),
        1px 1px 2px rgba(0,0,0,1) !important;
}

/* PIAZZA DEL VILLAGGIO */
body.zone-village {
	background-image: url('piazzavillaggio.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.zone-village .main-content {
	background-color: rgba(8, 4, 1, 0.75);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 24px rgba(180, 80, 10, 0.30);
	color: #d8c8a8;
	text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

body.zone-village .offcanvas,
body.zone-village .sidebar-content {
	background-image: none;
	background-color: rgba(10, 5, 2, 0.90);
}

/* Titolo contrastato per la piazza del villaggio (sfondo tramonto caldo) */

body.zone-village .game-title {
	background: linear-gradient(135deg, #c8a96e 0%, #f5d878 40%, #e0b050 65%, #8a5020 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter:
		drop-shadow(0 0 8px rgba(255, 160, 20, 0.8))
		drop-shadow(0 2px 3px rgba(0, 0, 0, 1));
}

body.zone-village .game-title-sub {
	background: linear-gradient(135deg, #c0803a 0%, #e8a850 50%, #b06828 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter:
		drop-shadow(0 0 6px rgba(255, 130, 20, 0.7))
		drop-shadow(0 1px 2px rgba(0, 0, 0, 1));
}

/* LISTA GUERRIERI — pattern immagine confinata + warrior-card grid */
body.zone-list { background-image:none !important; background-color:#060408; }
body.zone-list::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('list.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-list::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(4,2,8,0.46); z-index:1; pointer-events:none; }
body.zone-list .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-list .bottom-strip { background:transparent !important; }
body.zone-list .offcanvas,
body.zone-list .sidebar-content { background-image:none; background-color:rgba(6,3,10,0.96); }

/* Bar-button menu sinistro — ametista */
body.zone-list .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(8,4,14,0.84); border:1px solid rgba(100,60,160,0.38); border-left:3px solid #5a3090; border-radius:6px;
	color:#e8d8f8 !important; text-decoration:none !important; font-weight:normal;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-list .left-panel .nav-container a.nav:hover { background:rgba(20,8,36,0.96) !important; border-left-color:#a060e0;
	color:#f4eaff !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(120,60,220,0.38); }
body.zone-list .left-panel .nav-container br.clear { display:none; }

/* NUOVO GIORNO — alba fantasy, luce che filtra da una finestra di pietra */
body.zone-ricorda { background-image:none !important; background-color:#0a0612; }

body.zone-newday { background-image:none !important; background-color:#0a0810; }
body.zone-newday::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('newday.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-newday::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(5,3,12,0.30); z-index:1; pointer-events:none; }
body.zone-newday .bottom-strip { background:transparent !important; }
body.zone-newday .newday-wrap { display:block !important; width:auto !important; max-width:none !important;
	margin:52vh 12px 16px !important; padding:18px 30px;
	background:rgba(8,5,16,0.40); backdrop-filter:blur(4px);
	border:1px solid rgba(150,100,220,0.28); border-left:4px solid #8a5ad0;
	border-radius:8px; box-shadow:0 0 25px rgba(120,60,200,0.18); }

body.zone-newday .main-content {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

body.zone-newday .offcanvas,
body.zone-newday .sidebar-content {
	background-image: none;
	background-color: rgba(12, 8, 2, 0.92);
}

body.zone-newday .game-title {
	background: linear-gradient(135deg, #ffe8a0 0%, #ffcc44 40%, #ff9900 70%, #ffe8a0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 10px rgba(0,0,0,0.95)) drop-shadow(0 2px 4px rgba(0,0,0,1));
}

body.zone-newday .game-title-sub {
	background: linear-gradient(135deg, #ffd080 0%, #e8a000 50%, #ffd080 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.95)) drop-shadow(0 1px 3px rgba(0,0,0,1));
}

/* CITTÀ NANICA — KARAGDUM */
body.location-karagdum {
	background-image: url('karagdum.webp?v=2');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.location-karagdum .main-content {
	background-color: rgba(8, 5, 2, 0.32);
	border: 1px solid #5a3a10;
	box-shadow: 0 0 20px rgba(160, 80, 20, 0.30);
}

body.location-karagdum .offcanvas,
body.location-karagdum .sidebar-content {
	background-image: none;
	background-color: rgba(12, 7, 2, 0.92);
}

body.location-karagdum .game-title {
	background: linear-gradient(135deg, #ffe066 0%, #ffd700 40%, #ffb300 70%, #ffe066 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

body.location-karagdum .game-title-sub {
	background: linear-gradient(135deg, #ffd070 0%, #e8b800 50%, #ffd070 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
}

/* BIRRERIA DI KARAGDUM — Grumdar (luce calda arancione) */
body.karagdum-ale-grumdar {
	background-image: url('karagdum-taverna-grumdar.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.karagdum-ale-grumdar .main-content {
	background-color: rgba(12, 6, 2, 0.32);
	border: 1px solid #6a3a08;
	box-shadow: 0 0 28px rgba(180, 90, 10, 0.35);
}

body.karagdum-ale-grumdar .offcanvas,
body.karagdum-ale-grumdar .sidebar-content {
	background-image: none;
	background-color: rgba(15, 8, 2, 0.94);
}

body.karagdum-ale-grumdar .game-title {
	background: linear-gradient(135deg, #ffe066 0%, #ffd700 40%, #ffb300 70%, #ffe066 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* BIRRERIA DI KARAGDUM — Thoridor (luce fredda blu) */
body.karagdum-ale-thoridor {
	background-image: url('karagdum-taverna-thoridor.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.karagdum-ale-thoridor .main-content {
	background-color: rgba(2, 5, 15, 0.32);
	border: 1px solid #1a3a6a;
	box-shadow: 0 0 28px rgba(20, 60, 160, 0.30);
}

body.karagdum-ale-thoridor .offcanvas,
body.karagdum-ale-thoridor .sidebar-content {
	background-image: none;
	background-color: rgba(2, 5, 18, 0.94);
}

body.karagdum-ale-thoridor .game-title {
	background: linear-gradient(135deg, #aad4ff 0%, #6ab0ff 40%, #3388ee 70%, #aad4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* CITTÀ ELFICA — SYLVARIS */
body.location-sylvaris {
	background-image: url('sylvaris.webp?v=2');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.location-sylvaris .main-content {
	background-color: rgba(2, 8, 5, 0.32);
	border: 1px solid #1a5a30;
	box-shadow: 0 0 20px rgba(20, 160, 80, 0.25);
}

body.location-sylvaris .offcanvas,
body.location-sylvaris .sidebar-content {
	background-image: none;
	background-color: rgba(2, 10, 5, 0.92);
}

body.location-sylvaris .game-title {
	background: linear-gradient(135deg, #a8ffcb 0%, #00e87a 40%, #00c96a 70%, #a8ffcb 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

body.location-sylvaris .game-title-sub {
	background: linear-gradient(135deg, #80ffb0 0%, #00d4a0 50%, #80ffb0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
}

/* FONTE LUNARE — Aelindra (luce d'argento / luna) */
body.sylvaris-fonte-aelindra {
	background-image: url('sylvaris-fonte-aelindra.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.sylvaris-fonte-aelindra .main-content {
	background-color: rgba(2, 5, 15, 0.32);
	border: 1px solid #2a3a6a;
	box-shadow: 0 0 28px rgba(80, 120, 220, 0.30);
}

body.sylvaris-fonte-aelindra .offcanvas,
body.sylvaris-fonte-aelindra .sidebar-content {
	background-image: none;
	background-color: rgba(2, 5, 18, 0.94);
}

body.sylvaris-fonte-aelindra .game-title {
	background: linear-gradient(135deg, #d0e8ff 0%, #aaccff 40%, #7799ee 70%, #d0e8ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* FONTE LUNARE — Sylveth (alba / luce dorata) */
body.sylvaris-fonte-sylveth {
	background-image: url('sylvaris-fonte-sylveth.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.sylvaris-fonte-sylveth .main-content {
	background-color: rgba(5, 12, 4, 0.32);
	border: 1px solid #2a5a20;
	box-shadow: 0 0 28px rgba(60, 180, 80, 0.28);
}

body.sylvaris-fonte-sylveth .offcanvas,
body.sylvaris-fonte-sylveth .sidebar-content {
	background-image: none;
	background-color: rgba(3, 10, 3, 0.94);
}

body.sylvaris-fonte-sylveth .game-title {
	background: linear-gradient(135deg, #c8ffb0 0%, #88ee66 40%, #44cc33 70%, #c8ffb0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* CITTÀ UMANA — VALDRIS */
body.location-valdris {
	background-image: url('valdris.webp?v=2');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.location-valdris .main-content {
	background-color: rgba(5, 5, 8, 0.32);
	border: 1px solid #3a3a4a;
	box-shadow: 0 0 20px rgba(60, 60, 100, 0.22);
}

body.location-valdris .offcanvas,
body.location-valdris .sidebar-content {
	background-image: none;
	background-color: rgba(5, 5, 10, 0.92);
}

body.location-valdris .game-title {
	background: linear-gradient(135deg, #d0d0e8 0%, #a0a0cc 40%, #7070aa 70%, #d0d0e8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

body.location-valdris .game-title-sub {
	background: linear-gradient(135deg, #b0b0cc 0%, #8888aa 50%, #b0b0cc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
}

/* ARMERIA DI TORVAN — Valdris (weapons.php + location-valdris) */
body.location-valdris.zone-weapons {
	background-image: url('valdris-armeria.webp');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body.location-valdris.zone-weapons .main-content {
	background-color: rgba(10, 5, 2, 0.32);
	border: 1px solid #5a2a08;
	box-shadow: 0 0 28px rgba(180, 80, 10, 0.28);
}

body.location-valdris.zone-weapons .game-title {
	background: linear-gradient(135deg, #ffcc66 0%, #ee8822 40%, #cc4400 70%, #ffcc66 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* OSTERIA DEL LUPO GRIGIO — Olgrin (luce ambrata/fumosa) */
body.valdris-osteria-olgrin {
	background-image: url('valdris-osteria-olgrin.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.valdris-osteria-olgrin .main-content {
	background-color: rgba(10, 6, 2, 0.32);
	border: 1px solid #5a3a10;
	box-shadow: 0 0 28px rgba(160, 90, 20, 0.30);
}

body.valdris-osteria-olgrin .offcanvas,
body.valdris-osteria-olgrin .sidebar-content {
	background-image: none;
	background-color: rgba(12, 7, 2, 0.94);
}

body.valdris-osteria-olgrin .game-title {
	background: linear-gradient(135deg, #ffd580 0%, #ffaa33 40%, #cc7700 70%, #ffd580 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* OSTERIA DEL LUPO GRIGIO — Verna (luce rossastra/sera) */
body.valdris-osteria-verna {
	background-image: url('valdris-osteria-verna.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.valdris-osteria-verna .main-content {
	background-color: rgba(10, 3, 3, 0.32);
	border: 1px solid #5a1a1a;
	box-shadow: 0 0 28px rgba(160, 30, 30, 0.28);
}

body.valdris-osteria-verna .offcanvas,
body.valdris-osteria-verna .sidebar-content {
	background-image: none;
	background-color: rgba(12, 3, 3, 0.94);
}

body.valdris-osteria-verna .game-title {
	background: linear-gradient(135deg, #ffb0a0 0%, #ee6655 40%, #cc3322 70%, #ffb0a0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* CITTÀ DEI TROLL — PANTANERA */
body.location-pantanera {
	background-image: url('pantanera.webp?v=2');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #0a0f05;
}

body.location-pantanera .main-content {
	background-color: rgba(4, 8, 2, 0.32);
	border: 1px solid #2a4a10;
	box-shadow: 0 0 24px rgba(30, 80, 10, 0.28);
}

body.location-pantanera .offcanvas,
body.location-pantanera .sidebar-content {
	background-image: none;
	background-color: rgba(5, 10, 2, 0.93);
}

body.location-pantanera .game-title {
	background: linear-gradient(135deg, #a8cc60 0%, #6aaa20 40%, #3a7800 70%, #a8cc60 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

body.location-pantanera .game-title-sub {
	background: linear-gradient(135deg, #88aa44 0%, #558800 50%, #88aa44 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
}

/* ROCCAMORTA — la piazza neutrale (sfondo città) */
body.location-roccamorta {
	background-image: url('roccamorta.webp?v=2');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #0a0a0c;
}

body.location-roccamorta .main-content {
	background-color: rgba(6, 6, 8, 0.34);
	border: 1px solid #4a4438;
	box-shadow: 0 0 24px rgba(120, 100, 60, 0.22);
}

body.location-roccamorta .offcanvas,
body.location-roccamorta .sidebar-content {
	background-image: none;
	background-color: rgba(6, 6, 8, 0.93);
}

/* LA TAVERNA DELLE OSSA — Locanda di Roccamorta */
body.location-taverna-delle-ossa,
body.zone-inn .game-title {
	background: linear-gradient(135deg, #e8c080 0%, #c89040 40%, #a06010 70%, #e8c080 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

body.zone-inn .game-title-sub {
	background: linear-gradient(135deg, #c8a060 0%, #a07030 50%, #c8a060 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
}

/* Immagine confinata nella finestra centrale */
body.zone-inn::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('taverna-delle-ossa.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-inn::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(8,4,2,0.22); z-index:1; pointer-events:none; }

/* Bar-button menu sinistro — toni ambra/taverna */
body.zone-inn .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(18,9,2,0.82); border:1px solid rgba(180,110,30,0.40); border-left:3px solid #8a5818; border-radius:6px;
	color:#f0ddb0 !important; text-decoration:none !important; font-weight:normal; font-family:'EB Garamond',Georgia,serif;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-inn .left-panel .nav-container a.nav:hover { background:rgba(46,22,4,0.96) !important; border-left-color:#c47824;
	color:#fff8e0 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(180,100,20,0.4); }
body.zone-inn .left-panel .nav-container br.clear { display:none; }

/* Pannello narrativo centrale */
body.zone-inn .inn-wrap { display:block !important; width:min(1560px,99%) !important; margin:68vh auto 16px !important; padding:18px 30px;
	background:rgba(10,5,2,0.28); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
	border:1px solid rgba(160,100,30,0.30); border-left:4px solid #8a5818; border-radius:8px;
	box-shadow:0 12px 40px rgba(0,0,0,0.5); color:#f0ddb0; line-height:1.72; text-shadow:0 1px 3px rgba(0,0,0,0.95); }
body.zone-inn .inn-wrap .colDkWhite { color:#ecdfc0 !important; }
body.zone-inn .inn-wrap .colDkYellow { color:#e0c070 !important; }
body.zone-inn .inn-wrap .colDkRed { color:#d06050 !important; }

/* LA MANGIATOIA — Gruumsha (toni verdi/palude, luce fioca) */
body.pantanera-mangiatoia-gruumsha {
	background-image: url('pantanera-mangiatoia-gruumsha.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.pantanera-mangiatoia-gruumsha .main-content {
	background-color: rgba(3, 8, 2, 0.32);
	border: 1px solid #254a10;
	box-shadow: 0 0 28px rgba(20, 70, 10, 0.32);
}

body.pantanera-mangiatoia-gruumsha .offcanvas,
body.pantanera-mangiatoia-gruumsha .sidebar-content {
	background-image: none;
	background-color: rgba(4, 10, 2, 0.94);
}

body.pantanera-mangiatoia-gruumsha .game-title {
	background: linear-gradient(135deg, #88cc44 0%, #44aa00 40%, #227700 70%, #88cc44 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* LA MANGIATOIA — Vorg (toni arancio/rosso, brace fumante) */
body.pantanera-mangiatoia-vorg {
	background-image: url('pantanera-mangiatoia-vorg.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

body.pantanera-mangiatoia-vorg .main-content {
	background-color: rgba(10, 5, 2, 0.32);
	border: 1px solid #5a2a08;
	box-shadow: 0 0 28px rgba(160, 60, 10, 0.32);
}

body.pantanera-mangiatoia-vorg .offcanvas,
body.pantanera-mangiatoia-vorg .sidebar-content {
	background-image: none;
	background-color: rgba(12, 5, 2, 0.94);
}

body.pantanera-mangiatoia-vorg .game-title {
	background: linear-gradient(135deg, #ffaa44 0%, #ee6600 40%, #cc3300 70%, #ffaa44 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

/* EDITOR PROVOCAZIONI */
body.zone-taunt {
	background-image: none;
	background-color: #120b04;
}

body.zone-taunt .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-taunt .offcanvas,
body.zone-taunt .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* SQL/PHP DIRETTO */
body.zone-rawsql {
	background-image: none;
	background-color: #120b04;
}

body.zone-rawsql .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-rawsql .offcanvas,
body.zone-rawsql .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* EDITOR BAN */
body.zone-bans {
	background-image: none;
	background-color: #120b04;
}

body.zone-bans .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-bans .offcanvas,
body.zone-bans .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* EDITOR TITOLI — stesso sfondo della Loggia */
body.zone-titleedit {
	background-image: none;
	background-color: #120b04;
}

body.zone-titleedit .main-content {
	background-color: rgba(12, 7, 2, 0.32);
	border: 1px solid #6b3a10;
	box-shadow: 0 0 18px rgba(180, 80, 10, 0.25);
}

body.zone-titleedit .offcanvas,
body.zone-titleedit .sidebar-content {
	background-image: none;
	background-color: rgba(20, 10, 3, 0.95);
}

/* Petition */
table.petition-count {
	float: right;
	text-align: right;
}

/* SEPARATORE NOTIZIE */
hr.news-sep {
	border: none;
	border-top: 1px solid rgba(120, 60, 20, 0.35);
	margin: 6px 0;
}

/* Additional styles as needed based on your layout and design requirements */

.nav {
	display: flow;
}

/* ========================================
   ZONE PRIORITY OVERRIDE
   Le classi zone-X devono sempre vincere
   sulle classi location-X (stessa specificità
   ma la location viene definita prima nel file).
   Questa sezione forza la priorità delle zone
   di gameplay attive.
   ======================================== */

body.zone-dragon                { background-image: url('drago.webp')    !important; }
body.zone-dragon.dragon-slain  { background-image: url('drago-morente.webp') !important; }
body.zone-forest    { background-image: none !important; } /* immagine ora confinata via ::before */
body.zone-graveyard { background-image: none !important; } /* immagine confinata via ::before */
body.zone-shades    { background-image: none !important; } /* immagine confinata via ::before */
body.zone-healer    { background-image: none !important; } /* immagine ora confinata via ::before */
body.zone-inn       { background-image: none !important; }
body.zone-train     { background-image: url('arena.webp')    !important; }
body.zone-runmodule { background-image: url('foresta.webp')  !important; }

/* Layout helper classes */
.align-center {
	text-align: center;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.valign-top {
	vertical-align: top;
}

.valign-bottom {
	vertical-align: bottom;
}

.noborder {
	border: 0;
}

.navad-wrapper {
	position: relative;
	top: -15px;
	text-align: center;
}

.verticalad-wrapper {
	float: right;
}

.nav-container {
	text-align: center;
	padding-top: 4px;
	padding-bottom: 4px;
}

.layout-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.clear {
	clear: both;
	display: block;
}

.nav-top,
.nav-bottom {
	width: 100%;
}

/* Pannello di login — "portale" dark fantasy sopra lo sfondo dell'Abisso.
   (Il vecchio emblema .login-hero è stato rimosso su richiesta: niente logo
   sopra il pannello, lo sfondo parla da solo.) */
.login-form-dark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 236px;
	margin: 0 auto;
	padding: 28px 26px 24px;
	box-sizing: border-box;
	position: relative;
	background: linear-gradient(180deg, rgba(14,9,4,0.86) 0%, rgba(7,4,2,0.92) 100%);
	border: 1px solid rgba(190,138,50,0.38);
	border-radius: 10px;
	box-shadow:
		0 24px 60px rgba(0,0,0,0.65),
		0 0 44px rgba(160,100,20,0.12),
		inset 0 1px 0 rgba(255,220,160,0.06);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.login-form-dark::before {
	content: '';
	position: absolute;
	top: 0; left: 14%; right: 14%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(220,170,80,0.65), transparent);
}

.lfd-field {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 100%;
}

.lfd-field label {
	color: #c8a060;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.lfd-field input {
	background: rgba(10, 6, 2, 0.85) !important;
	border: 1px solid rgba(139,105,20,0.5) !important;
	border-radius: 5px;
	color: #e8d4a8 !important;
	padding: 7px 10px;
	font-size: 0.86em;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	-webkit-text-fill-color: #e8d4a8 !important;
	-webkit-box-shadow: 0 0 0px 1000px rgba(10,6,2,0.85) inset !important;
}

.lfd-field input:focus {
	border-color: rgba(230,180,60,0.85);
	background: rgba(16, 10, 3, 0.92) !important;
	box-shadow: 0 0 0 1px rgba(230,180,60,0.18), 0 0 12px rgba(200,140,40,0.35);
}

.lfd-field input::placeholder {
	color: rgba(180,150,100,0.42);
	font-style: italic;
}

.lfd-submit {
	margin-top: 6px;
	width: 100%;
}

.lfd-btn {
	width: 100% !important;
	padding: 8px 10px;
	background: linear-gradient(180deg, rgba(76,46,12,0.92), rgba(42,24,6,0.92));
	border: 1px solid rgba(218,170,50,0.6);
	border-radius: 5px;
	color: #e8c05a;
	font-size: 0.82em;
	font-weight: bold;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.lfd-btn:hover {
	background: linear-gradient(180deg, rgba(104,64,16,0.96), rgba(56,32,8,0.96));
	border-color: rgba(240,195,90,0.9);
	color: #f8dc86;
	box-shadow: 0 0 16px rgba(200,140,40,0.35);
}

/* Messaggi di stato (sessione scaduta, cookie disabilitati, ecc.) */
.login-message {
	max-width: 320px;
	margin: 0 auto 16px auto;
	padding: 10px 16px;
	background: rgba(50,14,10,0.55);
	border: 1px solid rgba(180,70,40,0.45);
	border-radius: 6px;
	color: #e0a888;
	font-size: 0.85em;
	line-height: 1.5;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.hidden {
	display: none;
}

/* Form Fields */
.formfield-value {
	word-break: break-all;
}

/* Translator Buttons styling */
a.t, a.thot {
	display: inline-block;
	width: 10px;
	height: 10px;
	font-size: 8px;
	line-height: 10px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	margin-left: 2px;
	cursor: help;
	border: 1px solid #aaa;
}

/* Normal Button */
a.t {
	background-color: #555; /* less... conspicious */
	border-color: #888;
}

/* Hot Button, not translated */

a.thot {
	background-color: #c0392b; /* really red for "hot" */
	border-color: #e74c3c;
	font-weight: bold;
}

/* Hover effects for translator buttons */
a.t:hover, a.thot:hover {
	transform: scale(1.5);
	box-shadow: 0 0 4px #fff;
	z-index: 10;
}

/* Hidden elements, for i.e. debug output */
.hidden {
	display: none;
}

div.debug {
	background-color: #1e1e1e; /* dark gray, easy on the eyes */
	color: #d4d4d4; /* slightly muted white for good readability */
	border: 1px dashed #555; /* subtle, technical look */
	font-family: Consolas, monospace; /* clear debug font */
	font-size: 11px; /* slightly larger than before for better readability */
	padding: 10px;
	margin: 12px 0;
	white-space: pre-wrap; /* preserves structure and lines */
	overflow-x: auto; /* scrollbar for long lines */
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0,0,0,0.4); /* subtle depth */
}

/* Mobile specific tweaks */
@media (max-width: 1100px) {
	.mobile-toggles .navbar-toggler {
		border: none;
	}
}

table a, .table a {
	text-decoration: none;
}

.navheadsub {
	text-decoration: none;
	width: 170px;
	height: auto;
	padding: 1px;
	float: left;
	line-height: 33px;
	clear: none;
	color: #FFFFFF;
	cursor: default;
	text-align: center;
	font-family: "Tahoma Small Cap", Tahoma, sans-serif;
	font-weight: bolder;
	margin-left: 10px;
}


/* CAMPO DEI MERCENARI — mercenarycamp.php
   L'immagine NON è sul body (niente full-screen): è confinata e centrata
   ESATTAMENTE nella finestra centrale (tra le due barre laterali e sotto il
   titolo). Stessi bordi del .bottom-strip: top:var(--top-h), left/right:232px,
   bottom:0. Questo schema è riusabile per qualsiasi pagina con immagine. */
body.zone-mercenarycamp {
	background-image: none !important;
	background-color: #0a0805;
}

/* Immagine centrata e contenuta nella finestra centrale (barre allargate a 264px) */
body.zone-mercenarycamp::before {
	content: '';
	position: fixed;
	top: var(--top-h);
	left: 264px;
	right: 264px;
	bottom: 0;
	background-image: url('mercenarycamp.webp?v=6');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 1;
	pointer-events: none;
}

/* Velo leggero (solo sulla finestra centrale) per far risaltare il pannello testo */
body.zone-mercenarycamp::after {
	content: '';
	position: fixed;
	top: var(--top-h);
	left: 264px;
	right: 264px;
	bottom: 0;
	background: rgba(4, 2, 0, 0.22);
	z-index: 1;
	pointer-events: none;
}

/* L'area centrale è trasparente: l'immagine resta protagonista, i pannelli portano il testo */
body.zone-mercenarycamp .main-content {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Telaio opaco scuro: incornicia la finestra centrale con l'immagine */
body.zone-mercenarycamp .left-panel,
body.zone-mercenarycamp .right-panel,
body.zone-mercenarycamp .sidebar-content {
	background-image: none !important;
	background-color: rgba(10, 6, 2, 0.92) !important;
}
/* Barre laterali un po' più larghe (264px) — l'immagine resta centrata */
body.zone-mercenarycamp .left-panel,
body.zone-mercenarycamp .right-panel {
	width: 264px !important;
}
body.zone-mercenarycamp .bottom-strip {
	left: 264px !important;
	right: 264px !important;
}
body.zone-mercenarycamp .offcanvas {
	background-image: none;
	background-color: rgba(8, 5, 2, 0.90);
}
/* La colonna centrale è trasparente: il testo vive nel .merc-wrap */
body.zone-mercenarycamp .bottom-strip {
	background: transparent !important;
}

/* ── Campo mercenari: PANNELLO UNICO stile Labirinto ──────────────────────── */
@keyframes merc-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Il contenitore-pannello: una sola "barra" trasparente che raccoglie tutto */
body.zone-mercenarycamp .merc-wrap {
	display: block !important;
	width: min(1580px, 99%) !important;
	margin: 54vh auto 16px !important;
	padding: 22px 44px !important;
	background: rgba(6, 3, 1, 0.16);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid rgba(150, 110, 40, 0.22);
	border-left: 4px solid rgba(180, 120, 40, 0.6);
	border-radius: 8px;
	box-shadow: 0 12px 44px rgba(0, 0, 0, 0.40);
	font-family: 'EB Garamond', Georgia, serif;
	animation: merc-fade .5s ease-out;
}

body.zone-mercenarycamp .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(18,10,2,0.82); border:1px solid rgba(180,120,40,0.40); border-left:3px solid #a87028; border-radius:6px;
	color:#f0ddb0 !important; text-decoration:none !important; font-weight:normal; font-family:'EB Garamond',Georgia,serif;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-mercenarycamp .left-panel .nav-container a.nav:hover { background:rgba(46,26,4,0.96) !important; border-left-color:#e0a040;
	color:#fff8e0 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(180,120,20,0.4); }
body.zone-mercenarycamp .left-panel .nav-container br.clear { display:none; }

/* Narrativa: testo nudo dentro al pannello (niente box su box) */
body.zone-mercenarycamp .merc-narr {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #5fc070;
	font-size: 1.0em;
	line-height: 1.78;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.95);
}
/* Narrativa in testo pulito: paragrafi spaziati, colore tutto da qui (niente
   codici colore LotGD). Accenti: nomi di luogo (.merc-acc) e dialoghi (.merc-dlg). */
body.zone-mercenarycamp .merc-narr p {
	margin: 0 0 0.95em !important;
}
body.zone-mercenarycamp .merc-narr p:last-child {
	margin-bottom: 0 !important;
}
body.zone-mercenarycamp .merc-acc {
	color: #e7bd55;
	font-weight: 600;
}
body.zone-mercenarycamp .merc-dlg {
	color: #e8cf86;
	font-style: italic;
}

/* Divisore dorato + titolo di sezione */
body.zone-mercenarycamp .merc-sep {
	height: 1px;
	margin: 18px 0 2px !important;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(160, 120, 45, 0.55), transparent);
}
body.zone-mercenarycamp .merc-sectitle {
	display: block;
	color: #d0a040;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	font-size: 0.82em;
	margin: 12px 0 2px !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* Ogni mercenario è una riga ordinata, separata da una linea sottile */
body.zone-mercenarycamp .merc-card {
	display: block !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 0 !important;
	background: none !important;
	border: 0 !important;
	border-top: 1px solid rgba(150, 110, 40, 0.18) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible;
}
body.zone-mercenarycamp .merc-card:first-of-type { border-top: 0 !important; }
body.zone-mercenarycamp .merc-card:hover .merc-name { color: #ecbe55; }

body.zone-mercenarycamp .merc-card-head {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 3px;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
}
body.zone-mercenarycamp .merc-name {
	font-size: 1.08em;
	font-weight: bold;
	color: #d6a544;
	letter-spacing: 1px;
	transition: color .2s ease;
	text-shadow: 0 0 14px rgba(200, 150, 20, 0.30), 0 1px 3px rgba(0, 0, 0, 0.95);
}
body.zone-mercenarycamp .merc-card-body {
	display: block !important;
	padding: 0 !important;
	color: #b0884e;
	font-style: italic;
	font-size: 0.94em;
	line-height: 1.55;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

body.zone-mercenarycamp .merc-badge {
	display: inline-block;
	flex-shrink: 0;
	padding: 3px 12px;
	border-radius: 3px;
	font-size: 0.76em;
	font-style: normal;
	letter-spacing: 0.5px;
	white-space: nowrap;
}
body.zone-mercenarycamp .merc-badge-ok   { background: rgba(15, 35, 5, 0.55);  border: 1px solid #3a7a15; color: #8ac030; }
body.zone-mercenarycamp .merc-badge-free { background: rgba(22, 13, 3, 0.55);  border: 1px solid #8a5510; color: #d0942a; }
body.zone-mercenarycamp .merc-badge-don  { background: rgba(5, 16, 32, 0.55);  border: 1px solid #1a52a0; color: #4f95d8; }
body.zone-mercenarycamp .merc-badge-err  { background: rgba(40, 8, 8, 0.55);   border: 1px solid #8a1818; color: #d05858; }

/* Messaggi cura/ingaggio: pannello singolo coerente */
body.zone-mercenarycamp .merc-msg {
	display: block !important;
	width: min(780px, 94%) !important;
	margin: 20px auto !important;
	padding: 16px 24px !important;
	background: rgba(6, 3, 1, 0.42);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(150, 110, 40, 0.30);
	border-left: 4px solid #8a5410;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
	color: #c49a64;
	font-family: 'EB Garamond', Georgia, serif;
	line-height: 1.75;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
	animation: merc-fade .5s ease-out;
}
body.zone-mercenarycamp .merc-msg.good {
	border-left-color: #3a7a15;
	color: #9ac050;
	background: rgba(6, 18, 3, 0.42);
}
body.zone-mercenarycamp .merc-msg.bad {
	border-left-color: #8a2510;
	color: #d07048;
	background: rgba(28, 6, 3, 0.42);
}

/* TENDA DI VASHARA — gypsy.php (immagine confinata + bar-menu + card sortilegi) */
body.zone-gypsy { background-image:none !important; background-color:#080312; }
body.zone-gypsy::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('vashara.webp?v=2') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-gypsy::after { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(8,2,18,0.30); z-index:1; pointer-events:none; }
body.zone-gypsy .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-gypsy .bottom-strip { background:transparent !important; }
body.zone-gypsy .offcanvas,
body.zone-gypsy .sidebar-content { background-image:none; background-color:rgba(10,3,22,0.95); }

body.zone-gypsy .gypsy-wrap { display:block !important; width:min(1180px,96%) !important; margin:56vh auto 16px !important; padding:18px 30px;
	background:rgba(10,4,20,0.46); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
	border:1px solid rgba(150,110,200,0.32); border-left:4px solid #8a5fc0; border-radius:8px;
	box-shadow:0 12px 40px rgba(0,0,0,0.5); color:#e0d4f4; line-height:1.72; text-shadow:0 1px 3px rgba(0,0,0,0.95); }
body.zone-gypsy .gypsy-wrap .colDkWhite { color:#ddd2f0 !important; }

body.zone-gypsy .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(16,8,28,0.80); border:1px solid rgba(150,110,200,0.40); border-left:3px solid #8a5fc0; border-radius:6px;
	color:#e0d4f4 !important; text-decoration:none !important; font-weight:normal; font-family:'EB Garamond',Georgia,serif;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-gypsy .left-panel .nav-container a.nav:hover { background:rgba(40,18,64,0.96) !important; border-left-color:#c79af0;
	color:#fbf2ff !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(150,90,220,0.4); }
body.zone-gypsy .left-panel .nav-container br.clear { display:none; }

body.zone-gypsy .gypsy-cards { display:none; width:min(960px,95%); margin:6px auto 16px !important; }
body.zone-gypsy .gypsy-cards.open { display:flex !important; flex-wrap:wrap; gap:12px; justify-content:center; animation:gypsy-fade .35s ease-out; }
@keyframes gypsy-fade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
body.zone-gypsy .gypsy-card { display:flex !important; flex-direction:column; width:260px; box-sizing:border-box; padding:13px 16px;
	background:rgba(16,8,28,0.88); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid rgba(150,110,200,0.42);
	border-left:4px solid #8a5fc0; border-radius:8px; text-decoration:none !important; box-shadow:0 4px 14px rgba(0,0,0,0.45);
	text-shadow:0 1px 2px rgba(0,0,0,0.9); transition:transform .12s,border-color .15s,box-shadow .15s; }
body.zone-gypsy .gypsy-card:hover { transform:translateY(-2px); border-color:#c79af0; border-left-color:#c79af0; box-shadow:0 7px 20px rgba(150,90,220,0.4); }
body.zone-gypsy .gypsy-card .gc-name { font-family:'EB Garamond',Georgia,serif; font-size:1.05em; color:#efe2ff !important; font-weight:bold; }
body.zone-gypsy .gypsy-card .gc-cost { color:#e7c66a !important; font-size:0.9em; margin-top:4px; }
body.zone-gypsy .gypsy-card .gc-desc { color:#c3b2e0 !important; font-size:0.84em; font-style:italic; margin-top:6px; line-height:1.45; }

body.zone-gypsy .game-title {
	background: linear-gradient(135deg, #e0aaff 0%, #c060ff 40%, #9b30f0 70%, #e0aaff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

body.zone-gypsy .game-title-sub {
	background: linear-gradient(135deg, #d090ff 0%, #a050e0 50%, #d090ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
}

/* GIARDINI OSCURI — gardens.php (immagine confinata, pannello elegante via .bottom-strip-inner) */
body.zone-gardens { background-image:none !important; background-color:#040804; }
body.zone-gardens::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('giardini-albero.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-gardens::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(2,6,2,0.22); z-index:1; pointer-events:none; }
body.zone-gardens .bottom-strip { background:transparent !important; }
body.zone-gardens .offcanvas,
body.zone-gardens .sidebar-content { background-image:none; background-color:rgba(3,8,3,0.96); }

body.zone-gardens .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }

/* Pannello narrativo elegante — stretto, centrato, alta trasparenza */
body.zone-gardens .gardens-wrap {
	display:block !important;
	max-width:820px !important;
	margin:60vh auto 16px !important;
	padding:22px 36px !important;
	background:rgba(4,8,3,0.32) !important;
	backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
	border:1px solid rgba(80,130,50,0.28) !important;
	border-left:4px solid #2d5018 !important;
	border-radius:8px;
	box-shadow:0 14px 44px rgba(0,0,0,0.55);
	color:#d4e8c0 !important; line-height:1.76; text-shadow:0 1px 3px rgba(0,0,0,0.95);
	font-family:'EB Garamond',Georgia,serif;
}
body.zone-gardens .gardens-wrap .colDkWhite { color:#cce0b0 !important; }
body.zone-gardens .gardens-wrap .colGreen   { color:#80c860 !important; }
body.zone-gardens .gardens-wrap .colRed     { color:#d06060 !important; }

/* Bar-button menu sinistro — verde foresta */
body.zone-gardens .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(4,10,3,0.84); border:1px solid rgba(80,130,50,0.40); border-left:3px solid #2d5018; border-radius:6px;
	color:#d4e8c0 !important; text-decoration:none !important; font-weight:normal; font-family:'EB Garamond',Georgia,serif;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-gardens .left-panel .nav-container a.nav:hover { background:rgba(10,26,8,0.96) !important; border-left-color:#5a9a30;
	color:#eaffd8 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(60,120,20,0.4); }
body.zone-gardens .left-panel .nav-container br.clear { display:none; }

body.zone-gardens .game-title {
	background:linear-gradient(135deg,#a8d880 0%,#6aaa30 40%,#3a7810 70%,#a8d880 100%);
	-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
	filter:drop-shadow(0 0 8px rgba(0,0,0,0.95)) drop-shadow(0 2px 4px rgba(0,0,0,1));
}
body.zone-gardens .game-title-sub {
	background:linear-gradient(135deg,#88b860 0%,#4a8820 50%,#88b860 100%);
	-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
	filter:drop-shadow(0 0 6px rgba(0,0,0,0.95)) drop-shadow(0 1px 3px rgba(0,0,0,1));
}

/* SCUDERIE DI VALDRAK — stables.php */
body.zone-stables { background-image:none !important; background-color:#060402; }
body.zone-stables::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('valdrak-scuderie.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-stables::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(6,4,2,0.26); z-index:1; pointer-events:none; }
body.zone-stables .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-stables .bottom-strip { background:transparent !important; }
body.zone-stables .offcanvas,
body.zone-stables .sidebar-content { background-image:none; background-color:rgba(12,7,2,0.96); }

body.zone-stables .stables-wrap { display:block !important; width:min(1380px,98%) !important; margin:64vh auto 16px !important; padding:18px 30px;
	background:rgba(12,7,2,0.34); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
	border:1px solid rgba(160,110,40,0.30); border-left:4px solid #7a5228; border-radius:8px;
	box-shadow:0 12px 40px rgba(0,0,0,0.5); color:#f0ddb0; line-height:1.72; text-shadow:0 1px 3px rgba(0,0,0,0.95); }

body.zone-stables .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(18,10,2,0.82); border:1px solid rgba(160,110,40,0.40); border-left:3px solid #7a5228; border-radius:6px;
	color:#f0ddb0 !important; text-decoration:none !important; font-weight:normal; font-family:'EB Garamond',Georgia,serif;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-stables .left-panel .nav-container a.nav:hover { background:rgba(44,24,4,0.96) !important; border-left-color:#c07838;
	color:#fff8e0 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(160,100,20,0.4); }
body.zone-stables .left-panel .nav-container br.clear { display:none; }

/* IL FLAGELLO DELL'ABISSO — pavilion.php (altare oscuro, arma giornaliera) */
body.zone-pavilion { background-image:none !important; background-color:#060204; }
body.zone-pavilion::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('flagello-abisso.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-pavilion::after { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(6,2,4,0.28); z-index:1; pointer-events:none; }
body.zone-pavilion .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-pavilion .bottom-strip { background:transparent !important; }
body.zone-pavilion .offcanvas,
body.zone-pavilion .sidebar-content { background-image:none; background-color:rgba(14,4,6,0.96); }

body.zone-pavilion .flag-wrap { display:block !important; width:min(1180px,96%) !important; margin:58vh auto 16px !important; padding:18px 30px;
	background:rgba(14,4,6,0.46); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
	border:1px solid rgba(180,40,40,0.32); border-left:4px solid #9a2020; border-radius:8px;
	box-shadow:0 12px 40px rgba(0,0,0,0.5); color:#f0e0d4; line-height:1.72; text-shadow:0 1px 3px rgba(0,0,0,0.95); }

body.zone-pavilion .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(20,6,6,0.82); border:1px solid rgba(180,60,60,0.40); border-left:3px solid #9a2020; border-radius:6px;
	color:#f0e0d4 !important; text-decoration:none !important; font-weight:normal; font-family:'EB Garamond',Georgia,serif;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-pavilion .left-panel .nav-container a.nav:hover { background:rgba(50,12,12,0.96) !important; border-left-color:#e05050;
	color:#fff0e8 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(180,40,40,0.4); }
body.zone-pavilion .left-panel .nav-container br.clear { display:none; }

body.zone-pavilion .game-title {
	background: linear-gradient(135deg, #ff9090 0%, #c83030 40%, #8a1010 70%, #ff9090 100%);
	-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0,0,0,0.95)) drop-shadow(0 2px 4px rgba(0,0,0,1));
}
body.zone-pavilion .game-title-sub {
	background: linear-gradient(135deg, #e07070 0%, #a02020 50%, #e07070 100%);
	-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.95)) drop-shadow(0 1px 3px rgba(0,0,0,1));
}

/* L'OSTERIA SPETTRALE — Taverna nascosta nella foresta */
body.osteria-spettrale {
	background-image: url('osteria-spettrale.webp?v=2');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-color: #080510;
}

body.osteria-spettrale .main-content {
	background-color: rgba(5, 3, 12, 0.45);
	border: 1px solid #3a1a6b;
	box-shadow: 0 0 32px rgba(80, 20, 160, 0.30);
}

body.osteria-spettrale .offcanvas,
body.osteria-spettrale .sidebar-content {
	background-image: none;
	background-color: rgba(8, 3, 18, 0.94);
}

body.osteria-spettrale .game-title {
	background: linear-gradient(135deg, #c8a0ff 0%, #9060d0 40%, #6030a0 70%, #c8a0ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

body.osteria-spettrale .game-title-sub {
	background: linear-gradient(135deg, #a080d0 0%, #7040a0 50%, #a080d0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.95)) drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS VARIABLES — dimensioni layout modificabili via Layout Manager
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    --top-h: 110px;   /* altezza top strip  */
    --bot-h: 17vh;    /* altezza bottom strip */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LAYOUT FULL-SCREEN HUD — Cronache dell'Abisso
   Top strip (descrizione) + pannelli laterali + bottom strip (contenuto)
   Centro completamente trasparente → sfondi visibili
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Solo le pagine di gioco (non login/home) usano il layout HUD */
html:has(body.main-body:not(.zone-home)) {
	height: 100%;
	overflow: hidden;
}

body.main-body:not(.zone-home) {
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background-size: cover !important;
	background-position: center center !important;
	background-attachment: fixed !important;
	background-repeat: no-repeat !important;
}

/* Login/home: ripristino completo layout originale — zero HUD */
body.zone-home .top-strip,
body.zone-home .left-panel,
body.zone-home .right-panel {
	display: none !important;
}

/* Admin pages e pagine "tante info": HUD attivo ma bottom strip grande (84vh)
   per ospitare form/tabelle lunghi (classifiche, lista guerrieri, ecc.) */
body.zone-admin_gestione .bottom-strip,
body.zone-superuser .bottom-strip,
body.zone-hof .bottom-strip,
body.zone-list .bottom-strip,
body.zone-bio .bottom-strip,
body.zone-bios .bottom-strip,
body.zone-lodge .bottom-strip,
body.zone-bacheca .bottom-strip,
body.zone-adventures .bottom-strip,
body.zone-dungeon_oscuro .bottom-strip,
body.zone-lavoro .bottom-strip {
	height: calc(100vh - var(--top-h)) !important;
}


/* Regole text-flow disattivate: form/tabelle mantengono flusso block normale */
body.zone-admin_gestione .bottom-strip-inner p,
body.zone-admin_gestione .bottom-strip-inner div,
body.zone-superuser .bottom-strip-inner p,
body.zone-superuser .bottom-strip-inner div,
body.zone-hof .bottom-strip-inner p,
body.zone-hof .bottom-strip-inner div,
body.zone-list .bottom-strip-inner p,
body.zone-list .bottom-strip-inner div,
body.zone-bio .bottom-strip-inner p,
body.zone-bio .bottom-strip-inner div,
body.zone-bios .bottom-strip-inner p,
body.zone-bios .bottom-strip-inner div,
body.zone-torre_re .bottom-strip-inner p,
body.zone-torre_re .bottom-strip-inner div:not(.torre-hud-fixed):not(.torre-hud):not(.torre-nome-bar) {
	display: block !important;
	margin: revert !important;
	padding: revert !important;
	width: auto !important;
	max-width: none !important;
}

body.zone-admin_gestione .bottom-strip-inner br + br,
body.zone-superuser .bottom-strip-inner br + br,
body.zone-hof .bottom-strip-inner br + br,
body.zone-list .bottom-strip-inner br + br,
body.zone-bio .bottom-strip-inner br + br,
body.zone-bios .bottom-strip-inner br + br,
body.zone-torre_re .bottom-strip-inner br + br {
	display: revert !important;
}

/* ── LISTA GUERRIERI: warrior-card grid ───────────────────────────────────── */
/* Specificità 0,3,0 > regola margin:revert 0,2,1 → override senza !important */

body.zone-list .bottom-strip-inner { padding:16px 20px 20px; }

.warrior-grid {
	display:grid !important;
	grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;
	gap:10px !important;
	margin:12px 0 16px !important;
	padding:0 !important;
	width:100% !important;
}

body.zone-list .bottom-strip-inner .warrior-card {
	display:flex !important; align-items:center !important; gap:12px !important;
	padding:10px 14px !important; margin:0 !important;
	background:rgba(8,4,16,0.64) !important;
	border:1px solid rgba(90,50,150,0.30) !important;
	border-left:3px solid #5a3090 !important;
	border-radius:7px !important;
	backdrop-filter:blur(4px) !important;
	transition:border-color .18s,background .18s,transform .12s !important;
	cursor:default !important;
	min-width:0 !important;
}
body.zone-list .bottom-strip-inner .warrior-card:hover {
	border-left-color:#9060d0 !important;
	background:rgba(14,6,26,0.84) !important;
	transform:translateX(2px) !important;
}
body.zone-list .bottom-strip-inner .warrior-card.warrior-online {
	border-left-color:#40c070 !important;
}
body.zone-list .bottom-strip-inner .warrior-card.warrior-online:hover {
	border-left-color:#60e090 !important;
}
body.zone-list .bottom-strip-inner .warrior-card.dead {
	border-left-color:#802020 !important; opacity:0.72 !important;
}

/* Avatar: cerchio con livello */
body.zone-list .bottom-strip-inner .warrior-avatar {
	flex-shrink:0 !important;
	width:44px !important; height:44px !important;
	border-radius:50% !important;
	display:flex !important; flex-direction:column !important;
	align-items:center !important; justify-content:center !important;
	background:rgba(30,10,50,0.90) !important;
	border:2px solid rgba(100,60,180,0.50) !important;
	margin:0 !important; padding:0 !important;
}
body.zone-list .bottom-strip-inner .warrior-card.avatar-f .warrior-avatar {
	border-color:rgba(180,60,100,0.55) !important;
	background:rgba(40,8,20,0.90) !important;
}
body.zone-list .bottom-strip-inner .warrior-card.warrior-online .warrior-avatar {
	border-color:rgba(40,160,80,0.60) !important;
}
body.zone-list .bottom-strip-inner .warrior-card.dead .warrior-avatar {
	border-color:rgba(140,30,30,0.50) !important;
	background:rgba(20,4,4,0.90) !important;
}
body.zone-list .bottom-strip-inner .warrior-avatar .wav-lv {
	display:block !important; margin:0 !important; padding:0 !important;
	font-size:1.1em !important; font-weight:700 !important; line-height:1 !important;
	color:#c8a0f0 !important; text-shadow:0 0 6px rgba(160,80,255,0.7) !important;
}
body.zone-list .bottom-strip-inner .warrior-card.avatar-f .warrior-avatar .wav-lv {
	color:#f0a0c0 !important; text-shadow:0 0 6px rgba(255,80,140,0.7) !important;
}
body.zone-list .bottom-strip-inner .warrior-avatar .wav-sex {
	display:block !important; margin:0 !important; padding:0 !important;
	font-size:0.7em !important; line-height:1 !important; color:rgba(200,180,240,0.7) !important;
}

/* Body del card */
body.zone-list .bottom-strip-inner .warrior-body {
	flex:1 !important; min-width:0 !important;
	display:flex !important; flex-direction:column !important; gap:2px !important;
	margin:0 !important; padding:0 !important;
}
body.zone-list .bottom-strip-inner .warrior-name {
	font-size:0.98em !important; font-weight:600 !important; line-height:1.2 !important;
	color:#e8d8f8 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
	margin:0 !important; padding:0 !important;
}
body.zone-list .bottom-strip-inner .warrior-name a {
	color:inherit !important; text-decoration:none !important;
}
body.zone-list .bottom-strip-inner .warrior-name a:hover { color:#c898ff !important; }
body.zone-list .bottom-strip-inner .warrior-loc {
	font-size:0.78em !important; color:rgba(180,160,220,0.78) !important;
	white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
	margin:0 !important; padding:0 !important;
}
body.zone-list .bottom-strip-inner .warrior-dot { color:#40c070 !important; font-size:0.9em !important; }
body.zone-list .bottom-strip-inner .warrior-tags {
	display:flex !important; gap:5px !important; flex-wrap:wrap !important;
	margin:2px 0 0 !important; padding:0 !important;
}
body.zone-list .bottom-strip-inner .wtag {
	display:inline-block !important; margin:0 !important;
	font-size:0.68em !important; padding:1px 6px !important; border-radius:3px !important;
	background:rgba(60,30,100,0.60) !important; color:#c0a8e8 !important;
	border:1px solid rgba(100,60,160,0.30) !important;
}
body.zone-list .bottom-strip-inner .wtag.wtag-alive  { background:rgba(20,60,30,0.70) !important; color:#80d898 !important; }
body.zone-list .bottom-strip-inner .wtag.wtag-dead   { background:rgba(60,10,10,0.70) !important; color:#d07070 !important; }
body.zone-list .bottom-strip-inner .wtag.wtag-faint  { background:rgba(60,40,10,0.70) !important; color:#d0b070 !important; }

/* Last-seen timestamp */
body.zone-list .bottom-strip-inner .warrior-laston {
	flex-shrink:0 !important;
	font-size:0.72em !important; color:rgba(160,140,200,0.60) !important;
	text-align:right !important; white-space:nowrap !important;
	margin:0 !important; padding:0 !important;
}

/* Form di ricerca */
body.zone-list .bottom-strip-inner form {
	margin:0 0 14px !important; padding:8px 12px !important;
	background:rgba(8,4,16,0.60) !important;
	border:1px solid rgba(90,50,150,0.25) !important; border-radius:6px !important;
	display:flex !important; gap:8px !important; align-items:center !important;
}
body.zone-list .bottom-strip-inner form input[type=text],
body.zone-list .bottom-strip-inner form input:not([type]) {
	background:rgba(20,10,34,0.80) !important; color:#e0d0f8 !important;
	border:1px solid rgba(100,60,160,0.45) !important; border-radius:4px !important;
	padding:5px 10px !important; font-size:0.9em !important; margin:0 !important;
}
body.zone-list .bottom-strip-inner form input.button,
body.zone-list .bottom-strip-inner form input[type=submit] {
	background:rgba(70,30,120,0.80) !important; color:#e0d0f8 !important;
	border:1px solid rgba(120,60,200,0.50) !important; border-radius:4px !important;
	padding:5px 14px !important; cursor:pointer !important; font-size:0.9em !important; margin:0 !important;
	transition:background .15s !important;
}
body.zone-list .bottom-strip-inner form input.button:hover,
body.zone-list .bottom-strip-inner form input[type=submit]:hover {
	background:rgba(100,50,180,0.90) !important;
}

/* Titolo lista */
body.zone-list .bottom-strip-inner .list-title {
	font-size:1.05em !important; font-weight:600 !important;
	color:#c898ff !important; text-shadow:0 0 8px rgba(160,80,255,0.5) !important;
	margin:0 0 10px !important; padding:0 !important;
	letter-spacing:0.04em !important;
}

/* ── AVVENTURA DEL GIORNO — solo bar-button menu sinistro ────────────────── */
body.zone-avventura_giorno .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(12,9,2,0.84); border:1px solid rgba(160,120,30,0.38); border-left:3px solid #906820; border-radius:6px;
	color:#f0e0b0 !important; text-decoration:none !important; font-weight:normal;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-avventura_giorno .left-panel .nav-container a.nav:hover { background:rgba(24,16,2,0.96) !important; border-left-color:#d09830;
	color:#fff0c8 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(180,130,20,0.36); }
body.zone-avventura_giorno .left-panel .nav-container br.clear { display:none; }

/* ── AVVENTURE (hub avventure.php) — immagine mappa + pannello a tema ─────── */
body.zone-avventure { background-image:none !important; background-color:#0a0805; }
body.zone-avventure::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('avventure/bg_corona_mappa_pietra.webp') center center / cover no-repeat; z-index:1; pointer-events:none; }
body.zone-avventure::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(6,4,2,0.34); z-index:1; pointer-events:none; }
body.zone-avventure .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-avventure .bottom-strip { background:transparent !important; }
body.zone-avventure .offcanvas,
body.zone-avventure .sidebar-content { background-image:none; background-color:rgba(12,8,3,0.96); }
body.zone-avventure .avventure-wrap {
	display:block !important; max-width:860px !important; margin:54vh auto 16px !important; padding:20px 32px;
	background:rgba(10,6,2,0.36) !important; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
	border:1px solid rgba(150,110,45,0.30); border-left:4px solid #8a5818; border-radius:8px;
	box-shadow:0 12px 40px rgba(0,0,0,0.55); color:#f0ddb0 !important; line-height:1.72; text-shadow:0 1px 3px rgba(0,0,0,0.92);
}

/* ── AVVENTURE (vecchia zona-adventures: solo bar-button menu sinistro) ───── */
body.zone-adventures .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(12,9,2,0.84); border:1px solid rgba(160,120,30,0.38); border-left:3px solid #906820; border-radius:6px;
	color:#f0e0b0 !important; text-decoration:none !important; font-weight:normal;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-adventures .left-panel .nav-container a.nav:hover { background:rgba(24,16,2,0.96) !important; border-left-color:#d09830;
	color:#fff0c8 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(180,130,20,0.36); }
body.zone-adventures .left-panel .nav-container br.clear { display:none; }

/* ── DUNGEON OSCURO — solo bar-button menu sinistro ──────────────────────── */
body.zone-dungeon_oscuro .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(14,4,4,0.84); border:1px solid rgba(160,40,40,0.38); border-left:3px solid #802020; border-radius:6px;
	color:#f0d8d0 !important; text-decoration:none !important; font-weight:normal;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-dungeon_oscuro .left-panel .nav-container a.nav:hover { background:rgba(28,6,6,0.96) !important; border-left-color:#c04040;
	color:#ffe8e0 !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(180,40,40,0.36); }
body.zone-dungeon_oscuro .left-panel .nav-container br.clear { display:none; }

/* ── SCHEDA PERSONAGGIO (bio.php) ─────────────────────────────────────────── */
/* Immagine fissa (parallax), pannello stretto scorrevole sopra */
body.zone-bio { background-image:none !important; background-color:#05040a; }
body.zone-bio::before { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:url('biblioteca1.webp') center center / cover no-repeat;
	z-index:1; pointer-events:none; }
body.zone-bio::after  { content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
	background:rgba(3,2,6,0.36); z-index:1; pointer-events:none; }
body.zone-bio .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-bio .bottom-strip { background:transparent !important; }
body.zone-bio .offcanvas,
body.zone-bio .sidebar-content { background-image:none; background-color:rgba(5,3,10,0.96); }

/* Pannello narrativo — stretto, centrato, scorrevole sull'immagine fissa */
/* Specificità 0,3,0 > regola margin:revert 0,2,1 → override senza !important */
body.zone-bio .bottom-strip-inner .bio-wrap {
	display:block !important;
	max-width:680px !important;
	margin:12px auto 28px !important;
	padding:22px 30px 26px !important;
	background:rgba(4,3,8,0.42) !important;
	backdrop-filter:blur(8px) !important; -webkit-backdrop-filter:blur(8px) !important;
	border:1px solid rgba(100,80,160,0.28) !important;
	border-left:4px solid #503880 !important;
	border-radius:8px !important;
	box-shadow:0 12px 40px rgba(0,0,0,0.60) !important;
	color:#ddd4f0 !important;
	line-height:1.78 !important;
	text-shadow:0 1px 3px rgba(0,0,0,0.95) !important;
}

/* Avatar circolare già nel PHP — assicuriamo margin e allineamento */
body.zone-bio .bottom-strip-inner .bio-wrap img[alt="avatar"] {
	display:inline-block !important; margin:0 auto 12px !important;
}

/* Titolo "Cronache di X" */
body.zone-bio .bottom-strip-inner .bio-wrap .game-title {
	font-size:1.1em !important; color:#c0a8e8 !important;
}

/* Bar-button menu sinistro — ambra-viola (tema biblioteca) */
body.zone-bio .left-panel .nav-container a.nav { display:block !important; margin:5px 9px !important; padding:7px 12px;
	background:rgba(8,5,14,0.84); border:1px solid rgba(100,80,160,0.38); border-left:3px solid #503880; border-radius:6px;
	color:#ddd4f0 !important; text-decoration:none !important; font-weight:normal;
	font-size:0.95em; line-height:1.32; text-align:left; box-shadow:0 3px 10px rgba(0,0,0,0.42); text-shadow:0 1px 2px rgba(0,0,0,0.9);
	transition:background .18s,border-color .18s,transform .12s,box-shadow .18s; }
body.zone-bio .left-panel .nav-container a.nav:hover { background:rgba(16,8,30,0.96) !important; border-left-color:#8060c0;
	color:#f0e8ff !important; transform:translateX(3px); box-shadow:0 4px 16px rgba(100,60,200,0.36); }
body.zone-bio .left-panel .nav-container br.clear { display:none; }

body.zone-home .bottom-strip {
	position: static !important;
	height: auto !important;
	width: 100% !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	background: transparent !important;
	border: none !important;
	overflow: visible !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.zone-home .bottom-strip-inner {
	display: block !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	align-items: unset !important;
	text-align: center !important;
}

/* ── TOP STRIP ──────────────────────────────────────────────────────────────── */
.top-strip {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--top-h);
	z-index: 200;
	background: rgba(18, 11, 4, 0.78);
	border-bottom: 1px solid rgba(200, 168, 96, 0.35);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 14px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.top-strip-brand {
	flex-shrink: 0;
	line-height: 1;
}
.top-strip-brand .game-title {
	font-size: 1.25em;
	display: inline;
}
.top-strip-brand .game-title-sub {
	font-size: 0.60em;
	letter-spacing: 0.22em;
	display: inline;
	margin-left: 4px;
}
.top-strip-brand .game-title-link {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.top-strip-location {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
}

.loc-title {
	color: #c8a860;
	font-family: Georgia, 'Times New Roman', serif;
	font-variant: small-caps;
	font-size: 1.45em;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-align: center;
	text-shadow: 0 0 12px rgba(200, 168, 96, 0.7), 0 2px 3px rgba(0,0,0,0.9);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.top-strip-meta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.83em;
}

/* Menu verticale compatto nella top strip destra */
.top-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 1px solid rgba(200, 168, 96, 0.25);
	padding-left: 12px;
}

.top-menu-item {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.3;
}

.top-menu-label {
	color: rgba(200, 168, 96, 0.70);
	font-size: 0.80em;
	font-variant: small-caps;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.top-menu-value {
	font-size: 0.80em;
}
.top-menu-value a,
.top-menu-item a {
	color: #c8a860;
	text-decoration: none;
	transition: color 0.15s;
}
.top-menu-value a:hover,
.top-menu-item a:hover {
	color: #f0d090;
}

/* Contatore petizioni admin — piccolo badge */
.top-petition-admin {
	font-size: 0.75em;
	opacity: 0.7;
}

/* ── PANNELLI LATERALI — si estendono fino in fondo, non coperti dal bottom strip ── */
.left-panel {
	position: fixed;
	top: var(--top-h);
	left: 0;
	width: 232px;
	bottom: 0;
	z-index: 150;
	background: rgba(18, 11, 4, 0.72);
	border-right: 1px solid rgba(120, 60, 10, 0.40);
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	padding: 6px 0;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.right-panel {
	position: fixed;
	top: var(--top-h);
	right: 0;
	width: 232px;
	bottom: 0;
	z-index: 150;
	background: rgba(18, 11, 4, 0.72);
	border-left: 1px solid rgba(120, 60, 10, 0.40);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 0;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* nav table si adatta alla larghezza del pannello */
.left-panel table.nav {
	width: 100%;
	max-width: 220px;
}

/* ── PANNELLO CONTENUTO UNICO — occupa tutto il centro ──────────────────────────
   Scelta architetturale: un solo pannello di lettura per OGNI pagina, invece di
   redistribuire il contenuto in pannelli flottanti per zona (fragile, andava
   mantenuto modulo per modulo). Va dalla top strip al fondo, fra i pannelli
   laterali. Le zone che vogliono trasparenza (drago, ecc.) fanno override con
   !important e vincono.                                                          */
.bottom-strip {
	position: fixed;
	top: var(--top-h);
	bottom: 0;
	left: 232px;
	right: 232px;
	z-index: 160;
	background: rgba(12, 7, 2, 0.15);
	border: none;
	overflow-y: auto;
	/* NIENTE backdrop-filter: il blur "smeriglia" lo sfondo e fa sembrare il
	   pannello opaco (e viene composto dopo il primo paint → effetto
	   "trasparente poi opaco" su F5). La leggibilità è garantita dal
	   text-shadow su .bottom-strip-inner. */
}

.bottom-strip-inner {
	padding: 8px 24px;
	display: block;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	line-height: 1.55;
	font-size: 0.92em;
	text-align: left;
	word-break: normal;
	overflow-wrap: normal;
	width: 100%;
	box-sizing: border-box;
	/* Pannello molto trasparente: ombra per leggibilità sopra gli sfondi carichi */
	text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.8);
}

/* I controlli del form NON devono ereditare il text-shadow sfocato del pannello:
   altrimenti il testo digitato e i pulsanti appaiono velati/sfuocati. */
.bottom-strip-inner input,
.bottom-strip-inner textarea,
.bottom-strip-inner select,
.bottom-strip-inner button {
	text-shadow: none !important;
}

/* Pannello unico: il contenuto scorre come blocco normale e leggibile.
   (Prima qui c'era un "flusso inline aggressivo" pensato per la vecchia fascia
   da 17vh: comprimeva tutto in testo orizzontale ed era la causa principale
   dell'accumulo illeggibile. Con il pannello a tutta altezza non serve più.) */
body:not(.zone-home) .bottom-strip-inner p,
body:not(.zone-home) .bottom-strip-inner div:not(.nav):not(.nav-container):not(.button) {
	/* NIENTE display/width/max-width forzati: i div sono già block di default, e
	   forzarli rompeva i componenti con layout proprio (hero banner flex, diamantino
	   7px → barra diagonale, .shop-cards-container max-width:380px → card a tutto
	   schermo). Solo reset di margini/padding per un flusso pulito. */
	margin: revert;
	padding: revert;
}

/* Guardia anti-overflow SOLO su immagini e tabelle (i veri colpevoli di overflow
   orizzontale), così non clobbera i componenti che hanno un max-width proprio. */
body:not(.zone-home) .bottom-strip-inner img,
body:not(.zone-home) .bottom-strip-inner table {
	max-width: 100%;
}

body:not(.zone-home) .bottom-strip-inner span,
body:not(.zone-home) .bottom-strip-inner font,
body:not(.zone-home) .bottom-strip-inner b,
body:not(.zone-home) .bottom-strip-inner i,
body:not(.zone-home) .bottom-strip-inner u {
	display: inline;
}

body:not(.zone-home) .bottom-strip-inner > table {
	width: 100%;
}

body:not(.zone-home) .bottom-strip-inner br + br {
	display: revert;
}

/* Pannelli flottanti (shop/center/triggers/combat-log) e Layout Manager:
   blocco rimosso con il passaggio al pannello contenuto unico (2026-06-13).
   Il contenuto vive tutto in .bottom-strip. */

/* Copyright in fondo al pannello nav — piccolo e discreto */
.nav-copyright {
	margin-top: auto;
	padding: 8px 6px 6px 6px;
	font-size: 0.62em;
	color: rgba(140, 110, 70, 0.38);
	line-height: 1.3;
	border-top: 1px solid rgba(100, 60, 10, 0.20);
	word-break: break-word;
}

/* ── SCROLLBAR sottile per le strip ────────────────────────────────────────── */
.bottom-strip::-webkit-scrollbar,
.left-panel::-webkit-scrollbar,
.right-panel::-webkit-scrollbar {
	width: 4px;
}
.bottom-strip::-webkit-scrollbar-track,
.left-panel::-webkit-scrollbar-track,
.right-panel::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.25);
}
.bottom-strip::-webkit-scrollbar-thumb,
.left-panel::-webkit-scrollbar-thumb,
.right-panel::-webkit-scrollbar-thumb {
	background: rgba(200, 168, 96, 0.35);
	border-radius: 2px;
}

/* ── MOBILE TOGGLE ──────────────────────────────────────────────────────────── */
.mobile-toggle-btn {
	background: none;
	border: 1px solid rgba(200, 168, 96, 0.40);
	color: #c8a860;
	border-radius: 4px;
	padding: 3px 7px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
}
.mobile-toggle-btn:hover {
	background: rgba(200, 168, 96, 0.15);
}

/* ── Override: il vecchio layout non deve interferire ───────────────────────── */
/* Nascondi gli elementi del vecchio template che non esistono più */
.page-header,
.bootstrap-footer,
.mobile-toggles,
.container-fluid > .row:first-child {
	display: none !important;
}

/* I pannelli sidebar usano già le classi .sidebar-content
   → i colori per-zona continuano a funzionare automaticamente */

/* Zone che non hanno sfondo immagine: il body rimane scuro, i pannelli prendono
   il loro colore zone-specific come prima */
/* Tutti i pannelli hanno la stessa base #120b04 del menu nav.
   Le zone sovrappongono solo il bordo colorato per il tema, non il fondo. */

body.zone-village .left-panel,
body.zone-village .right-panel {
	border-color: rgba(180, 130, 50, 0.40);
}

body.zone-forest .left-panel,
body.zone-forest .right-panel {
	border-color: rgba(40, 100, 20, 0.40);
}

body.zone-dragon .left-panel,
body.zone-dragon .right-panel {
	border-color: rgba(120, 20, 20, 0.55);
}

body.zone-shades .left-panel,
body.zone-shades .right-panel {
	border-color: rgba(80, 20, 180, 0.55);
}

body.zone-inn .left-panel,
body.zone-inn .right-panel {
	border-color: rgba(140, 70, 20, 0.40);
}

body.zone-gardens .left-panel,
body.zone-gardens .right-panel {
	border-color: rgba(40, 100, 40, 0.40);
}

/* ══ ARMERIE (weapons.php + armor.php) — immagine confinata + due viste ════
   Vale per TUTTE le città: la zona è sempre zone-weapons / zone-armor,
   cambia solo l'immagine (iniettata page-scoped nel ::before dai .php).      */
body.zone-weapons, body.zone-armor { background-image:none !important; background-color:#080503; }
body.zone-weapons::before, body.zone-armor::before {
    content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
    background-position:center center; background-size:cover; background-repeat:no-repeat;
    z-index:1; pointer-events:none;
}
body.zone-weapons::after, body.zone-armor::after {
    content:''; position:fixed; top:var(--top-h); left:232px; right:232px; bottom:0;
    background:rgba(6,3,1,0.34); z-index:1; pointer-events:none;
}
body.zone-weapons .main-content, body.zone-armor .main-content { background:transparent !important; border:none !important; box-shadow:none !important; }
body.zone-weapons .bottom-strip, body.zone-armor .bottom-strip { background:transparent !important; }
body.zone-weapons .offcanvas, body.zone-weapons .sidebar-content,
body.zone-armor .offcanvas, body.zone-armor .sidebar-content { background-image:none; background-color:rgba(14,8,3,0.96); }

/* Pannello narrativo (vista iniziale + esito acquisto) — basso e trasparente */
body.zone-weapons .bottom-strip-inner .shop-text-wrap,
body.zone-armor .bottom-strip-inner .shop-text-wrap {
    display:block !important; width:min(1080px,94%) !important; margin:54vh auto 16px !important;
    padding:20px 32px !important; box-sizing:border-box !important;
    background:rgba(10,6,2,0.34) !important; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    border:1px solid rgba(150,100,40,0.28) !important; border-left:4px solid #8a5818 !important; border-radius:8px !important;
    box-shadow:0 12px 40px rgba(0,0,0,0.55) !important;
    color:#f0ddb0 !important; line-height:1.74 !important; text-shadow:0 1px 3px rgba(0,0,0,0.92) !important;
}

/* Vista lista: pannellino slim per il testo del trade-in, sopra le carte */
body.zone-weapons .bottom-strip-inner .shop-text-slim,
body.zone-armor .bottom-strip-inner .shop-text-slim {
    width:min(760px,94%) !important; margin:14px auto 14px !important;
    padding:12px 22px !important; font-size:0.92em !important; line-height:1.6 !important;
    background:rgba(10,6,2,0.42) !important; border-left:3px solid #8a5818 !important;
}

/* Vista lista: griglia carte centrata e ariosa, sopra l'immagine */
body.zone-weapons .bottom-strip-inner .shop-cards-container,
body.zone-armor .bottom-strip-inner .shop-cards-container {
    display:grid !important; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
    gap:10px !important; max-width:min(1120px,96%) !important; margin:4px auto 20px !important; padding:0 8px !important;
}

/* ===== SHOP CARDS — Negozio Armi/Armature ===== */
.shop-cards-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    max-width: 380px;
}

.shop-card {
    background: rgba(20, 12, 4, 0.75);
    border: 1px solid rgba(139, 105, 20, 0.35);
    border-radius: 6px;
    padding: 8px 10px;
    transition: border-color 0.2s, background 0.2s;
}

.shop-card.card-equipped {
    background: rgba(40, 30, 5, 0.85);
    border-color: rgba(218, 170, 50, 0.8);
    border-left: 3px solid #daa520;
}

.shop-card.card-buyable {
    border-color: rgba(80, 160, 80, 0.45);
}
.shop-card.card-buyable:hover {
    background: rgba(30, 20, 5, 0.9);
    border-color: rgba(80, 200, 80, 0.65);
}

.shop-card.card-locked {
    opacity: 0.55;
    border-color: rgba(80, 80, 80, 0.3);
}

/* Header card */
.card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.card-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

.card-name {
    font-size: 0.82em;
    color: #e8d4a8;
    font-weight: 600;
    flex: 1;
    line-height: 1.2;
}

/* Badge comparazione */
.card-badge {
    font-size: 0.68em;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge-current { background: rgba(218,165,32,0.3); color: #daa520; border: 1px solid rgba(218,165,32,0.5); }
.badge-up      { background: rgba(40,140,40,0.3);  color: #7fc07f; border: 1px solid rgba(40,140,40,0.5); }
.badge-down    { background: rgba(160,40,40,0.3);  color: #d07070; border: 1px solid rgba(160,40,40,0.5); }
.badge-equal   { background: rgba(80,80,80,0.3);   color: #888;    border: 1px solid rgba(80,80,80,0.4); }

/* Barra statistica */
.card-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.card-stat-label {
    font-size: 0.68em;
    color: #888;
    min-width: 38px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-bar-wrap {
    flex: 1;
    height: 6px;
    background: rgba(60, 40, 10, 0.6);
    border-radius: 3px;
    overflow: hidden;
}

.card-bar {
    height: 100%;
    background: linear-gradient(90deg, #8b2020, #c84040, #e05050);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.card-bar-armor {
    background: linear-gradient(90deg, #1a4a8b, #2060c0, #4090e0);
}

.card-stat-val {
    font-size: 0.78em;
    color: #c8a060;
    font-weight: bold;
    min-width: 18px;
    text-align: right;
}

/* Footer card */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.card-cost {
    font-size: 0.75em;
    color: #c8a060;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Pulsanti */
.card-btn {
    font-size: 0.72em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
}

.btn-buy {
    background: rgba(40, 100, 40, 0.6);
    color: #7fc07f;
    border: 1px solid rgba(60, 150, 60, 0.6);
}
.btn-buy:hover {
    background: rgba(40, 140, 40, 0.8);
    color: #a0e0a0;
    text-decoration: none;
}

.btn-equipped {
    background: rgba(100, 80, 10, 0.4);
    color: #daa520;
    border: 1px solid rgba(200, 160, 20, 0.4);
    cursor: default;
}

.btn-locked {
    background: rgba(40, 40, 40, 0.4);
    color: #666;
    border: 1px solid rgba(80, 80, 80, 0.3);
    cursor: default;
}

/* Shop panel più largo per le card */
.zone-weapons .shop-panel-inner,
.zone-armor .shop-panel-inner {
    min-width: 320px;
    padding: 0;
}

/* ── Bribe Cards — offerte a Gordan il Muto ─────────────────────────────── */
.bribe-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
    max-width: 320px;
}

.bribe-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(30, 15, 5, 0.72);
    border: 1px solid rgba(180, 130, 50, 0.35);
    border-radius: 6px;
    text-decoration: none;
    color: #d8c8a8;
    font-size: 0.92em;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    cursor: pointer;
}

.bribe-card:hover {
    background: rgba(60, 35, 8, 0.88);
    border-color: rgba(220, 170, 70, 0.7);
    transform: translateX(4px);
    color: #f0d890;
    text-decoration: none;
}

.bribe-card--disabled {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.bribe-icon {
    font-size: 1.1em;
    flex-shrink: 0;
}

.bribe-label {
    flex: 1;
    font-weight: bold;
    letter-spacing: 0.02em;
}

.bribe-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.bribe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(200, 160, 60, 0.25);
    border: 1px solid rgba(200, 160, 60, 0.4);
}

.bribe-dot.filled {
    background: rgba(200, 160, 60, 0.85);
    border-color: rgba(240, 200, 80, 0.9);
    box-shadow: 0 0 4px rgba(220, 180, 60, 0.5);
}

/* ── Le Terme Oscure ─────────────────────────────────────────────────────── */
body.zone-bagno .main-content,
body.zone-bagno .shop-panel,
body.zone-bagno .shop-panel-inner,
body.zone-bagno .bottom-strip {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

body.zone-bagno .bottom-strip-inner p,
body.zone-bagno .bottom-strip-inner div:not(.torre-hud-fixed):not(.torre-nome-bar) {
    display: block !important;
    margin: revert !important;
}

/* ── Torre del Re Senza Volto — pannello a forma di rotolo/pergamena ────── */
body.zone-torre_re .shop-panel-inner.combat-log {
    max-width: 460px;
    min-width: 320px;
    font-family: serif;
    line-height: 1.85;
    color: #c8a060;
    font-size: 0.92em;
    background: transparent;

    border: none;
    box-shadow: none;
    padding: 38px 40px 38px 40px;
    position: relative;
    overflow: hidden;
}

/* Arricciatura superiore — il bordo del rotolo che si curva verso il lettore */
body.zone-torre_re .shop-panel-inner.combat-log::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -8%;
    right: -8%;
    height: 40px;
    background: linear-gradient(180deg,
        rgba(0,0,0,1)        0%,
        rgba(8,4,1,0.95)     30%,
        rgba(18,9,2,0.75)    55%,
        rgba(28,14,3,0.35)   78%,
        transparent          100%
    );
    border-radius: 50%;
    box-shadow:
        0  10px 14px rgba(0,0,0,0.8),
        0   3px  6px rgba(0,0,0,0.5);
    z-index: 2;
    pointer-events: none;
}

/* Arricciatura inferiore */
body.zone-torre_re .shop-panel-inner.combat-log::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: -8%;
    right: -8%;
    height: 40px;
    background: linear-gradient(0deg,
        rgba(0,0,0,1)        0%,
        rgba(8,4,1,0.95)     30%,
        rgba(18,9,2,0.75)    55%,
        rgba(28,14,3,0.35)   78%,
        transparent          100%
    );
    border-radius: 50%;
    box-shadow:
        0 -10px 14px rgba(0,0,0,0.8),
        0  -3px  6px rgba(0,0,0,0.5);
    z-index: 2;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMAZIONI CSS — Cronache dell'Abisso
   Settimana del 7 giugno 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── N.6 TYPEWRITER — testo cinematografico per boss/eventi narrativi ──── */
/* Usare classe .typewriter sul contenitore del testo narrativo */
.typewriter {
    overflow: hidden;
    border-right: 2px solid rgba(200, 168, 96, 0.75);
    animation: typewriter-cursor 0.8s step-end infinite;
}
.typewriter-line {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    animation: typewriter-reveal 2.4s steps(60, end) both;
}
@keyframes typewriter-reveal {
    from { max-height: 0; opacity: 0; }
    to   { max-height: 500px; opacity: 1; }
}
@keyframes typewriter-cursor {
    0%, 100% { border-color: rgba(200,168,96,0.75); }
    50%      { border-color: transparent; }
}
body.zone-dragon .typewriter {
    border-right-color: rgba(200, 40, 40, 0.75);
    color: #e8c0a0;
    animation: typewriter-cursor-red 0.8s step-end infinite;
}
@keyframes typewriter-cursor-red {
    0%, 100% { border-color: rgba(200,40,40,0.75); }
    50%      { border-color: transparent; }
}

/* ── N.7 BOTTOM STRIP — fade-in al caricamento pagina ──────────────────── */
/* IMPORTANTE: NON usare transform qui — romperebbe position:fixed dei figli
   (qualsiasi overlay position:fixed). Solo opacity. */
.bottom-strip {
    animation: strip-fadein 0.4s ease-out both;
}
@keyframes strip-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── N.8 TOP STRIP — location title glow pulsante ───────────────────────── */
.loc-title {
    animation: loc-glow 4s ease-in-out infinite;
}
@keyframes loc-glow {
    0%,100% { text-shadow: 0 0 12px rgba(200,168,96,0.7), 0 2px 3px rgba(0,0,0,0.9); }
    50%     { text-shadow: 0 0 22px rgba(200,168,96,1.0), 0 0 8px rgba(200,168,96,0.5), 0 2px 3px rgba(0,0,0,0.9); }
}

/* ── N.9 PANNELLI LATERALI — slide-in al caricamento ───────────────────── */
.left-panel  { animation: left-panel-in  0.35s ease-out both; }
.right-panel { animation: right-panel-in 0.35s ease-out both; }
@keyframes left-panel-in {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes right-panel-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── N.10 CHARINFO ROWS — apparizione a cascata nella sidebar ──────────── */
.charinfo-row { animation: charrow-in 0.3s ease-out both; }
.charinfo-row:nth-child(1)   { animation-delay: 0.02s; }
.charinfo-row:nth-child(2)   { animation-delay: 0.04s; }
.charinfo-row:nth-child(3)   { animation-delay: 0.06s; }
.charinfo-row:nth-child(4)   { animation-delay: 0.08s; }
.charinfo-row:nth-child(5)   { animation-delay: 0.10s; }
.charinfo-row:nth-child(6)   { animation-delay: 0.12s; }
.charinfo-row:nth-child(7)   { animation-delay: 0.14s; }
.charinfo-row:nth-child(8)   { animation-delay: 0.16s; }
.charinfo-row:nth-child(n+9) { animation-delay: 0.18s; }
@keyframes charrow-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── N.11 SHOP CARDS — ogni card scala da 0.95 a 1 all'entrata ─────────── */
.shop-card { animation: card-popin 0.25s ease-out both; }
.shop-cards-container > .shop-card:nth-child(1)  { animation-delay: 0.03s; }
.shop-cards-container > .shop-card:nth-child(2)  { animation-delay: 0.08s; }
.shop-cards-container > .shop-card:nth-child(3)  { animation-delay: 0.13s; }
.shop-cards-container > .shop-card:nth-child(4)  { animation-delay: 0.18s; }
.shop-cards-container > .shop-card:nth-child(5)  { animation-delay: 0.23s; }
.shop-cards-container > .shop-card:nth-child(6)  { animation-delay: 0.28s; }
.shop-cards-container > .shop-card:nth-child(n+7){ animation-delay: 0.33s; }
@keyframes card-popin {
    from { opacity: 0; transform: scale(0.95) translateY(6px); }
    to   { opacity: 1; transform: scale(1.00) translateY(0); }
}

/* ── N.12 NEWDAY — schermata alba con reveal espanso ───────────────────── */
body.zone-newday .bottom-strip-inner {
    animation: newday-reveal 1.2s ease-out both;
}
@keyframes newday-reveal {
    0%   { opacity: 0; letter-spacing: 0.15em; }
    60%  { opacity: 0.8; }
    100% { opacity: 1; letter-spacing: normal; }
}

/* ── N.13 DEATH SCREEN — titolo appare con flicker elettrico ───────────── */
.death-title {
    animation: deathpulse 2s ease-in-out infinite, death-flicker 0.6s steps(1) both;
}
@keyframes death-flicker {
    0%  { opacity: 0; }
    20% { opacity: 1; }
    30% { opacity: 0; }
    50% { opacity: 1; }
    65% { opacity: 0; }
    80% { opacity: 1; }
    100%{ opacity: 1; }
}

/* ── N.14 BARRA EXP — viola, stessa logica HP bar ───────────────────────── */
.exp-bar-wrap {
    width: 100%;
    height: 3px;
    background: rgba(40, 20, 60, 0.50);
    border-radius: 2px;
    margin-top: 2px;
    overflow: hidden;
}
.exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #5a2a8a, #9040d0);
    border-radius: 2px;
    transition: width 0.8s ease;
    animation: hp-bar-fadein 1.1s ease-out both;
}

/* ── Menu città — colore tematico in TUTTE le pagine della città (opzione B) ──
   Basato sulla località (segue il giocatore: piazza, banca, taverne, negozi,
   addestramento...). In fondo al file + left-panel + !important per vincere sui
   temi delle singole pagine (zone-X). Roccamorta esclusa.                       */
body.location-karagdum  .left-panel .nav-container a.nav {
	background:rgba(26,18,3,0.84) !important; border-color:rgba(160,120,30,0.40) !important;
	border-left-color:#c8920a !important;
}
body.location-karagdum  .left-panel .nav-container a.nav:hover {
	background:rgba(44,30,5,0.96) !important; border-left-color:#f0c040 !important;
}
body.location-sylvaris  .left-panel .nav-container a.nav {
	background:rgba(6,20,9,0.84) !important; border-color:rgba(60,150,80,0.36) !important;
	border-left-color:#3a9a4a !important;
}
body.location-sylvaris  .left-panel .nav-container a.nav:hover {
	background:rgba(10,36,15,0.96) !important; border-left-color:#5ac070 !important;
}
body.location-valdris   .left-panel .nav-container a.nav {
	background:rgba(8,12,22,0.84) !important; border-color:rgba(130,150,190,0.36) !important;
	border-left-color:#8a9ab8 !important;
}
body.location-valdris   .left-panel .nav-container a.nav:hover {
	background:rgba(16,24,42,0.96) !important; border-left-color:#c0cfe8 !important;
}
body.location-pantanera .left-panel .nav-container a.nav {
	background:rgba(2,20,18,0.84) !important; border-color:rgba(45,150,130,0.36) !important;
	border-left-color:#2a9a86 !important;
}
body.location-pantanera .left-panel .nav-container a.nav:hover {
	background:rgba(4,34,30,0.96) !important; border-left-color:#44c0a8 !important;
}
/* Roccamorta — rosso-mattone / cittadella di pietra e sangue */
body.location-roccamorta .left-panel .nav-container a.nav {
	background:rgba(22,8,6,0.84) !important; border-color:rgba(150,60,50,0.38) !important;
	border-left-color:#a8443a !important;
}
body.location-roccamorta .left-panel .nav-container a.nav:hover {
	background:rgba(40,14,10,0.96) !important; border-left-color:#d06050 !important;
}