/* ============================================================================
   SLIME IDLE — design system « médiéval pixel art »
   Un seul fichier : jetons, cadres pixel, composants, HUD, écrans d'entrée,
   téléphone. Aucune image : les cadres sont dessinés en CSS (chanfreins pixel,
   biseaux par box-shadow) pour rester nets à toutes les échelles.
   ============================================================================ */

@font-face {
	font-family: "SlimeBody";
	src: url("/css/fonts/pixel_unicode/Pixel-UniCode.ttf") format("truetype");
	font-display: block;
}
@font-face {
	font-family: "SlimeTitle";
	src: url("/css/fonts/m5x7.ttf") format("truetype");
	font-display: block;
}
/* Anciens noms utilisés par le code du jeu (CodeMirror, texte PIXI) */
@font-face { font-family: "Pixel"; src: url("/css/fonts/pixel_unicode/Pixel-UniCode.ttf") format("truetype"); }
@font-face { font-family: "pixel"; src: url("/css/fonts/pixel_unicode/Pixel-UniCode.ttf") format("truetype"); }

:root {
	/* Nuit */
	--night-0: #07060b;
	--night-1: #0f0d18;
	--night-2: #181424;
	/* Bois */
	--wood-edge: #1a0f08;
	--wood-dark: #3a2314;
	--wood: #5a3a22;
	--wood-light: #7d5331;
	--wood-hi: #a8723f;
	/* Parchemin */
	--parch: #e8d8ae;
	--parch-light: #f5ead0;
	--parch-dark: #cdb98a;
	--parch-shadow: #a68e62;
	--ink: #2b1a0f;
	--ink-soft: #5a4532;
	--ink-faint: #8a7355;
	/* Or */
	--gold: #f0c24a;
	--gold-dark: #b47d1c;
	--gold-light: #ffe28a;
	/* Slime (action principale) */
	--slime: #6fd25a;
	--slime-dark: #2f8a2a;
	--slime-light: #b6f29a;
	/* États */
	--hp: #d9443f;
	--hp-dark: #7a1d1b;
	--mp: #3f82e0;
	--mp-dark: #1a3c78;
	--xp: #f0c24a;
	--danger: #c93a3a;
	--text: #f3e7c9;
	--text-dim: #b9a98a;

	--font-body: "SlimeBody", "Pixel", monospace;
	--font-title: "SlimeTitle", "SlimeBody", monospace;

	--chamfer: polygon(
		8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
		100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
		calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px),
		0 8px, 4px 8px, 4px 4px, 8px 4px
	);
	--chamfer-sm: polygon(
		4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
		100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
		calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px),
		0 4px, 2px 4px, 2px 2px, 4px 2px
	);
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--hud-z: 20;
}

/* ---------------------------------------------------------------- base --- */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--night-0);
}
body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.25;
	color: var(--text);
	overflow: hidden;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: unset;
	font-smooth: never;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%;
	user-select: none;
}
*, *::before, *::after { box-sizing: border-box; }
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
img { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }
h1, h2, h3, h4 { margin: 0; font-weight: normal; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
::-webkit-scrollbar-thumb { background: var(--wood-light); border: 2px solid var(--wood-edge); }

/* Utilitaires hérités : la logique du jeu les pose/retire. */
.hidden, .showwithmodals { display: none !important; }
[hidden] { display: none !important; }
.disableclicks { pointer-events: none; }
.enableclicks { pointer-events: auto; }
.bpclicks { pointer-events: none; }
.bpclicks > * { pointer-events: auto; }
.clickable, .tomimick { cursor: pointer; }
.clickable:hover { filter: brightness(1.15); }
.disable { opacity: 0.5; pointer-events: none; }
.inline-block { display: inline-block; }
.cbold { font-weight: normal; }
.noscroll { scrollbar-width: thin; }
.gray { color: var(--text-dim); }
.mt4 { margin-top: 4px; }
.mt5 { margin-top: 5px; }

/* --------------------------------------------------------- typographie --- */
.ui-title {
	font-family: var(--font-title);
	font-size: 32px;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--gold);
	text-shadow: 2px 2px 0 #000;
}
.ui-title.ink { color: var(--ink); text-shadow: 2px 2px 0 var(--parch-shadow); }
.ui-kicker {
	font-family: var(--font-title);
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-dim);
}
.ui-kicker.ink { color: var(--ink-faint); }
.ui-muted { color: var(--text-dim); }
.ui-ink-muted { color: var(--ink-soft); }
.ui-gold { color: var(--gold); }
.ui-slime { color: var(--slime); }
.ui-hp { color: var(--hp); }
.ui-mp { color: var(--mp); }
.ui-center { text-align: center; }

/* ------------------------------------------------------------- cadres --- */
/* Cadre bois : fond sombre, biseau clair en haut/gauche, ombre en bas/droite */
.frame-wood {
	position: relative;
	background: var(--wood-dark);
	border: 4px solid var(--wood-edge);
	box-shadow: inset 0 0 0 4px var(--wood-hi), inset 0 0 0 8px var(--wood), inset 0 0 0 10px var(--wood-edge);
	clip-path: var(--chamfer);
	padding: 18px;
	color: var(--text);
}
.frame-wood.dense { padding: 12px; }
/* Cadre parchemin : fond clair lisible, liseré bois */
.frame-parch {
	position: relative;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0 2px, transparent 2px 4px),
		var(--parch);
	border: 4px solid var(--wood-edge);
	box-shadow: inset 0 0 0 4px var(--wood), inset 0 0 0 6px var(--parch-light), inset 0 0 0 8px var(--parch-dark);
	clip-path: var(--chamfer);
	padding: 18px;
	color: var(--ink);
}
.frame-parch.dense { padding: 12px; }
/* Cadre or : mise en avant */
.frame-gold {
	position: relative;
	background: var(--night-2);
	border: 4px solid var(--wood-edge);
	box-shadow: inset 0 0 0 4px var(--gold), inset 0 0 0 6px var(--gold-dark), inset 0 0 0 8px var(--night-1);
	clip-path: var(--chamfer);
	padding: 16px;
}
/* Cadre creux (fosse) : pour grilles de slots, logs */
.frame-inset {
	background: var(--night-1);
	border: 2px solid var(--wood-edge);
	box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.6), inset -2px -2px 0 rgba(255, 255, 255, 0.06);
	clip-path: var(--chamfer-sm);
}
.frame-parch .frame-inset {
	background: var(--parch-dark);
	border-color: var(--wood);
	box-shadow: inset 2px 2px 0 var(--parch-shadow), inset -2px -2px 0 var(--parch-light);
}
/* Séparateur gravé */
.rule {
	height: 4px;
	margin: 10px 0;
	background: var(--wood-edge);
	box-shadow: 0 2px 0 var(--wood-hi);
}
.frame-parch .rule { background: var(--parch-shadow); box-shadow: 0 2px 0 var(--parch-light); }
/* Ruban-titre d'un panneau */
.panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -6px -6px 10px;
	padding: 6px 10px;
	background: var(--wood-dark);
	border: 2px solid var(--wood-edge);
	box-shadow: inset 0 2px 0 var(--wood-hi), inset 0 -2px 0 var(--wood-edge);
	clip-path: var(--chamfer-sm);
	color: var(--gold);
}
.panel-head .ui-title { font-size: 24px; }
.panel-head .spacer { flex: 1; }
.panel-head small { font-family: var(--font-body); font-size: 14px; color: var(--text-dim); letter-spacing: 0; }

/* ------------------------------------------------------------ boutons --- */
.btn,
.pixel-btn, .pixel-art-btn, .gamebutton, .blockbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 16px;
	font-family: var(--font-title);
	font-size: 20px;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text);
	background: var(--wood);
	border: 3px solid var(--wood-edge);
	box-shadow: inset 0 3px 0 var(--wood-hi), inset 0 -3px 0 var(--wood-dark), 0 3px 0 var(--wood-edge);
	clip-path: var(--chamfer-sm);
	text-shadow: 1px 1px 0 #000;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	user-select: none;
	transition: filter 80ms;
}
.btn:hover, .pixel-btn:hover, .pixel-art-btn:hover, .gamebutton:hover, .blockbutton:hover { filter: brightness(1.12); }
.btn:active, .pixel-btn:active, .pixel-art-btn:active, .gamebutton:active, .blockbutton:active, .btn.pressed, .pixel-art-btn.pressed {
	transform: translateY(2px);
	box-shadow: inset 0 3px 0 var(--wood-dark), inset 0 -3px 0 var(--wood-hi), 0 1px 0 var(--wood-edge);
}
.btn.primary, .pixel-art-btn.emerald {
	background: var(--slime-dark);
	color: #fff;
	box-shadow: inset 0 3px 0 var(--slime), inset 0 -3px 0 #1d5a1a, 0 3px 0 var(--wood-edge);
}
.btn.gold, .pixel-art-btn.gold {
	background: var(--gold-dark);
	color: #2a1a05;
	text-shadow: 1px 1px 0 var(--gold-light);
	box-shadow: inset 0 3px 0 var(--gold-light), inset 0 -3px 0 #7a5410, 0 3px 0 var(--wood-edge);
}
.btn.danger, .pixel-art-btn.ruby {
	background: #8e2a2a;
	color: #fff;
	box-shadow: inset 0 3px 0 #d96060, inset 0 -3px 0 #4e1414, 0 3px 0 var(--wood-edge);
}
.btn.blue, .pixel-art-btn.sapphire {
	background: #2d5a9a;
	color: #fff;
	box-shadow: inset 0 3px 0 #6f9fe0, inset 0 -3px 0 #16305a, 0 3px 0 var(--wood-edge);
}
.btn.purple, .pixel-art-btn.amethyst {
	background: #5c3a8e;
	color: #fff;
	box-shadow: inset 0 3px 0 #9d7ad0, inset 0 -3px 0 #321d52, 0 3px 0 var(--wood-edge);
}
.btn.ghost {
	background: transparent;
	border-color: var(--wood-light);
	box-shadow: none;
	color: var(--text-dim);
}
.btn.ghost:hover { color: var(--text); }
.btn.sm { min-height: 30px; padding: 2px 10px; font-size: 16px; }
.btn.lg { min-height: 52px; padding: 8px 24px; font-size: 26px; }
.btn.block, .blockbutton { display: flex; width: 100%; }
.btn.icon { padding: 6px; min-width: 40px; }
.btn[disabled], .btn.disabled { opacity: 0.45; pointer-events: none; }
/* Bouton texte (liens de menu) */
.textbutton {
	display: block;
	padding: 6px 8px;
	cursor: pointer;
	color: var(--text);
}
.textbutton:hover { color: var(--gold); }
.frame-parch .textbutton { color: var(--ink); }
.frame-parch .textbutton:hover { color: var(--gold-dark); }
.cancela, a.cancela { color: inherit; }
/* Les anciens boutons pixel-art-btn contenaient des calques décoratifs */
.pixel-art-btn .btn-face, .pixel-art-btn .btn-spark { display: none; }
.pixel-art-btn .btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.pixel-icon { display: grid; gap: 0; line-height: 0; }
.pixel-icon i { display: block; width: 100%; aspect-ratio: 1; }
.pixel-art-btn.large { min-height: 56px; min-width: 56px; padding: 6px; }
.pixel-art-btn.large .pixel-icon { grid-template-columns: repeat(8, 5px) !important; }

/* ------------------------------------------------------------- champs --- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label, .ui-label {
	font-family: var(--font-title);
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-dim);
}
.frame-parch .field label, .frame-parch .ui-label { color: var(--ink-soft); }
.input,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--text);
	background: var(--night-1);
	border: 3px solid var(--wood-edge);
	box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset -2px -2px 0 rgba(255, 255, 255, 0.05);
	clip-path: var(--chamfer-sm);
	outline: none;
	user-select: text;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7), inset 0 0 0 2px var(--gold-dark); }
.frame-parch input, .frame-parch textarea, .frame-parch select {
	color: var(--ink);
	background: var(--parch-light);
	border-color: var(--wood);
	box-shadow: inset 2px 2px 0 var(--parch-shadow);
}
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--slime-dark); }
.form-error {
	display: none;
	margin: 8px 0;
	padding: 8px 12px;
	color: #fff;
	background: var(--danger);
	border: 3px solid var(--wood-edge);
	clip-path: var(--chamfer-sm);
}
.form-error.visible { display: block; }
.form-ok { color: var(--slime); margin: 8px 0; }

/* ------------------------------------------------------------- jauges --- */
.bar {
	position: relative;
	height: 16px;
	background: var(--night-0);
	border: 2px solid var(--wood-edge);
	box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.6);
	overflow: hidden;
}
.bar .fill, .bar > div:first-child {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	transition: width 160ms steps(8);
	background: var(--gold);
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}
.bar.hp .fill, .bar.hp > div:first-child { background: var(--hp); }
.bar.mp .fill, .bar.mp > div:first-child { background: var(--mp); }
.bar.xp .fill, .bar.xp > div:first-child { background: var(--xp); }
.bar .bar-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: #fff;
	text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
	pointer-events: none;
}

/* ------------------------------------------------------- slots d'objet --- */
/* Généré par item_container() : conteneur [data-cnum|data-slot|data-skid] + badges. */
[data-cnum], [data-slot], [data-skid], [data-strnum], [data-trigrc] {
	border-radius: 0;
	background: var(--night-1) !important;
	box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.75), inset -2px -2px 0 rgba(255, 255, 255, 0.06) !important;
}
.frame-parch [data-cnum], .frame-parch [data-slot], .frame-parch [data-strnum], .frame-parch [data-trigrc] {
	background: var(--parch-dark) !important;
	box-shadow: inset 2px 2px 0 var(--parch-shadow), inset -2px -2px 0 var(--parch-light) !important;
}
.iqui, .iuui, .truui, .trruui {
	position: absolute;
	font-family: var(--font-title);
	font-size: 16px;
	line-height: 1;
	padding: 1px 3px;
	color: #fff;
	background: rgba(0, 0, 0, 0.85);
	border: 1px solid var(--wood-light);
	pointer-events: none;
	z-index: 2;
}
.iqui { right: 0; bottom: 0; }
.iqui.iqhp { color: #ff8a86; }
.iqui.iqmp { color: #8fb8ff; }
.iuui { left: 0; top: 0; color: var(--gold); }
.truui { left: 0; top: 0; color: var(--text-dim); }
.trruui { right: 0; top: 0; }
.glow8, .glow9, .glow10 { box-shadow: 0 0 0 2px var(--gold), 0 0 10px var(--gold) !important; }
.glow8 img, .glow9 img, .glow10 img { filter: drop-shadow(0 0 2px var(--gold-light)); }
.uchance, .uroll { font-family: var(--font-body) !important; font-size: 14px !important; }
.loader, [class*="loader"] { pointer-events: none; }

/* ------------------------------------------------------------- modale --- */
.modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex !important;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 12px;
	overflow-y: auto;
	background: rgba(4, 3, 8, 0.72) !important;
	text-align: left !important;
}
.imodal {
	display: block !important;
	width: min(640px, 100%) !important;
	max-width: 100%;
	margin: auto !important;
	padding: 18px !important;
	border: 4px solid var(--wood-edge) !important;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0 2px, transparent 2px 4px),
		var(--parch) !important;
	box-shadow: inset 0 0 0 4px var(--wood), inset 0 0 0 6px var(--parch-light), inset 0 0 0 8px var(--parch-dark), 0 12px 0 rgba(0, 0, 0, 0.5) !important;
	clip-path: var(--chamfer);
	color: var(--ink);
	position: relative;
	font-size: 16px;
	user-select: text;
}
.imodal.wide { width: min(960px, 100%) !important; }
.imodal .modal-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -4px -4px 12px;
	padding: 6px 10px;
	background: var(--wood-dark);
	border: 2px solid var(--wood-edge);
	box-shadow: inset 0 2px 0 var(--wood-hi);
	clip-path: var(--chamfer-sm);
	color: var(--gold);
}
.imodal .modal-head .ui-title { font-size: 24px; }
.imodal .modal-head .spacer { flex: 1; }
.imodal .modal-head .btn { min-height: 32px; padding: 2px 10px; font-size: 16px; }
.imodal .modal-body { color: var(--ink); }
.imodal > *, .imodal [style*="width"] { max-width: 100% !important; }
.imodal img { max-width: 100%; height: auto; }
.slimefox-patch-notes-panel, .slimefox-overlay-panel { width: auto !important; max-width: 100% !important; box-sizing: border-box; }
.imodal .modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.imodal a { color: var(--gold-dark); }
.imodal .gray, .imodal [style*="color: gray"], .imodal [style*="color: grey"] { color: var(--ink-faint) !important; }
.imodal [style*="color: white"] { color: var(--ink) !important; }
.imodal [style*="border"][style*="gray"] { border-color: var(--wood) !important; }
.imodal [style*="background: black"], .imodal [style*="background-color: black"], .imodal [style*="background:black"] { background: transparent !important; }

/* ------------------------------------------------------------ bannière PWA --- */
#pwa-install-panel {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + var(--safe-bottom));
	z-index: 9500;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--wood-dark);
	border: 4px solid var(--wood-edge);
	box-shadow: inset 0 0 0 3px var(--gold-dark), 0 8px 0 rgba(0, 0, 0, 0.5);
	clip-path: var(--chamfer);
}
#pwa-install-panel[hidden] { display: none; }
body:not(.entry-mode) #pwa-install-panel { display: none !important; } /* jamais en jeu */
#pwa-install-panel .pwa-icon { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
#pwa-install-panel .pwa-copy { flex: 1; min-width: 0; }
#pwa-install-panel .pwa-copy strong { display: block; font-family: var(--font-title); font-size: 20px; color: var(--gold); letter-spacing: 1px; }
#pwa-install-panel .pwa-copy span { display: block; color: var(--text-dim); font-size: 15px; }
#pwa-install-panel .pwa-steps { margin: 6px 0 0; padding: 0; list-style: none; color: var(--text); font-size: 15px; }
#pwa-install-panel .pwa-steps li { display: flex; align-items: center; gap: 6px; }
#pwa-install-panel .pwa-steps .glyph { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; background: var(--night-1); border: 2px solid var(--wood-light); color: var(--gold); font-size: 14px; }
#pwa-install-panel .pwa-actions { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 900px) { #pwa-install-panel { left: auto; width: 420px; } }

/* ============================================================================
   ÉCRANS D'ENTRÉE (accueil / connexion / sélection / création)
   Le monde du jeu est rendu derrière (canvas), on pose un voile.
   ============================================================================ */
body.entry-mode .hud, body.entry-mode #codeui { display: none !important; }
#content:empty { display: none; }
.entry-stage {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
	background:
		radial-gradient(ellipse at 50% 30%, rgba(111, 210, 90, 0.10), transparent 55%),
		linear-gradient(180deg, rgba(7, 6, 11, 0.86), rgba(7, 6, 11, 0.94));
	overflow-y: auto;
}
.entry-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	text-align: center;
}
.entry-brand img { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.6)); }
.entry-brand .ui-title { font-size: 56px; color: var(--gold); text-shadow: 3px 3px 0 #000, 0 0 24px rgba(240, 194, 74, 0.25); }
.entry-brand .ui-kicker { color: var(--slime); }
.entry-card { width: min(520px, 100%); }
.entry-card.wide { width: min(980px, 100%); }
.entry-footer {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	justify-content: center;
	color: var(--text-dim);
	font-size: 14px;
}
.entry-footer a { color: var(--text-dim); }
.entry-footer a:hover { color: var(--gold); }
.entry-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.entry-tabs .btn { flex: 1; }
.entry-tabs .btn:not(.active) { background: var(--wood-dark); color: var(--text-dim); box-shadow: inset 0 3px 0 var(--wood), 0 3px 0 var(--wood-edge); }
.entry-note { color: var(--text-dim); font-size: 14px; margin-top: 10px; }
/* chargement des ressources */
.entry-progress { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--text-dim); font-size: 14px; }
.entry-progress .bar { flex: 1; height: 12px; }
#progressui { font-family: var(--font-title); font-size: 16px; min-width: 44px; text-align: right; color: var(--gold); cursor: pointer; }
#progressui.loading { color: var(--text-dim); }

/* Sélection de personnage */
.char-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}
.char-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px 12px;
	background: var(--night-1);
	border: 3px solid var(--wood-edge);
	box-shadow: inset 0 0 0 2px var(--wood), inset 0 0 0 4px var(--night-2);
	clip-path: var(--chamfer);
	color: var(--text);
	text-align: center;
	cursor: pointer;
	transition: transform 80ms;
}
.char-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--gold-dark), inset 0 0 0 4px var(--night-2); }
.char-card .portrait {
	width: 84px;
	height: 84px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: radial-gradient(circle at 50% 70%, rgba(111, 210, 90, 0.25), transparent 60%), var(--night-0);
	border: 2px solid var(--wood);
	overflow: hidden;
}
.char-card .portrait > div { margin-bottom: 4px; }
.char-card .name { font-family: var(--font-title); font-size: 22px; color: var(--gold); }
.char-card .meta { font-size: 14px; color: var(--text-dim); }
.char-card .status { position: absolute; top: 8px; right: 10px; font-size: 12px; color: var(--slime); }
.char-card.new { border-style: dashed; background: transparent; color: var(--text-dim); }
.char-card.new .portrait { background: transparent; border-style: dashed; font-family: var(--font-title); font-size: 48px; align-items: center; color: var(--slime); }
.char-card.new:hover { color: var(--text); }
.entry-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 16px; }
.launch-overlay { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; text-align: center; }
.launch-overlay .status { color: var(--text-dim); min-height: 20px; }
.launch-overlay .bar { width: min(360px, 100%); height: 14px; }

/* Création : assistant en étapes */
.wizard-steps { display: flex; gap: 4px; margin-bottom: 14px; }
.wizard-steps span {
	flex: 1;
	height: 8px;
	background: var(--night-1);
	border: 2px solid var(--wood-edge);
}
.wizard-steps span.done { background: var(--slime-dark); }
.wizard-steps span.active { background: var(--gold); }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.class-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px;
	background: var(--night-1);
	border: 3px solid var(--wood-edge);
	box-shadow: inset 0 0 0 2px var(--wood);
	clip-path: var(--chamfer);
	cursor: pointer;
	text-align: center;
}
.class-card .portrait { height: 72px; display: flex; align-items: flex-end; justify-content: center; }
.class-card .name { font-family: var(--font-title); font-size: 20px; color: var(--text); }
.class-card .role { font-size: 13px; color: var(--text-dim); }
.class-card:hover { box-shadow: inset 0 0 0 2px var(--gold-dark); }
.class-card.selected { background: var(--wood-dark); box-shadow: inset 0 0 0 3px var(--gold); }
.class-card.selected .name { color: var(--gold); }
.class-detail { margin-top: 12px; }
.class-detail .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.class-detail .stat { padding: 6px 4px; text-align: center; }
.class-detail .stat b { display: block; font-family: var(--font-title); font-size: 22px; color: var(--gold); }
.class-detail .stat small { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
.class-detail .stat.main b { color: var(--slime); }
.look-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.look-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 4px;
	background: var(--night-1);
	border: 3px solid var(--wood-edge);
	box-shadow: inset 0 0 0 2px var(--wood);
	clip-path: var(--chamfer);
	cursor: pointer;
}
.look-card .portrait { height: 84px; display: flex; align-items: flex-end; }
.look-card .name { font-family: var(--font-title); font-size: 16px; color: var(--text-dim); }
.look-card.selected { box-shadow: inset 0 0 0 3px var(--gold); background: var(--wood-dark); }
.look-card.selected .name { color: var(--gold); }
.summary { display: flex; gap: 16px; align-items: center; }
.summary .portrait { width: 110px; height: 110px; display: flex; align-items: flex-end; justify-content: center; background: var(--night-0); border: 3px solid var(--wood); flex: none; }
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.summary dt { color: var(--text-dim); }
.summary dd { margin: 0; color: var(--gold); font-family: var(--font-title); font-size: 20px; }

/* Compte */
.account-list { display: flex; flex-direction: column; gap: 6px; }
.account-list .btn { justify-content: flex-start; }

/* ============================================================================
   HUD EN JEU (ordinateur)
   ============================================================================ */
.hud { position: fixed; z-index: var(--hud-z); }
/* Plaque du héros : haut gauche */
#hero-plaque {
	top: 12px;
	left: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 14px 10px 10px;
	min-width: 300px;
	pointer-events: auto;
}
#hero-plaque .portrait {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: var(--night-0);
	border: 3px solid var(--wood-edge);
	box-shadow: inset 0 0 0 2px var(--gold-dark);
	overflow: hidden;
	cursor: pointer;
	flex: none;
}
#hero-plaque .portrait > div { margin-bottom: 2px; }
#hero-plaque .lines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#hero-plaque .who { display: flex; align-items: baseline; gap: 8px; }
#hero-plaque .who .charactername { font-family: var(--font-title); font-size: 22px; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hero-plaque .who .lvl { font-family: var(--font-title); font-size: 16px; color: var(--text-dim); margin-left: auto; white-space: nowrap; }
#hero-plaque .bar { height: 14px; cursor: pointer; }
#hero-plaque .bar.xp { height: 6px; }
#hero-plaque .bar.xp .bar-text { display: none; }
#hero-plaque .gold-line { display: flex; gap: 12px; font-size: 14px; color: var(--text-dim); }
#hero-plaque .gold-line b { color: var(--gold); font-weight: normal; }
#hero-plaque .gold-line .coords { margin-left: auto; }
#hero-plaque .gold-line .timeui { color: var(--text-dim); }

/* Menu principal : haut droite */
#slime-menu {
	top: 12px;
	right: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
}
#slime-menu .menu-btn, .pixel-menu-buttons .pixel-menu-action {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 48px;
	height: 44px;
	padding: 0 6px;
	justify-content: center;
	background: var(--night-1);
	border: 2px solid var(--wood-edge);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08);
	color: var(--text);
	cursor: pointer;
	position: relative;
	clip-path: var(--chamfer-sm);
	transition: width 120ms;
}
#slime-menu .menu-btn:hover { background: var(--wood-dark); box-shadow: inset 0 0 0 2px var(--gold-dark); }
#slime-menu .menu-btn .ico { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
#slime-menu .menu-btn .ico > div { margin: 0 !important; }
#slime-menu .menu-btn .lbl { display: none; font-family: var(--font-title); font-size: 18px; letter-spacing: 1px; white-space: nowrap; }
#slime-menu .menu-btn .badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	padding: 0 4px;
	font-family: var(--font-title);
	font-size: 14px;
	color: #000;
	background: var(--gold);
	border: 2px solid var(--wood-edge);
	display: none;
}
#slime-menu .menu-btn .badge.on { display: block; }
#slime-menu .menu-btn.hidden { display: none; }
#slime-menu .menu-btn[hidden] { display: none; }
#slime-menu:hover .menu-btn { width: 196px; justify-content: flex-start; }
#slime-menu:hover .menu-btn .lbl { display: block; }
#slime-menu .menu-btn.toggle-on { box-shadow: inset 0 0 0 2px var(--slime); }
#slime-menu-toggle { display: none; }
/* Boutons injectés par l'ancien code (succès, pêche…) */
#slime-menu #achievements-btn { display: flex; }

/* Haut milieu : cible + avis */
#topmid { top: 12px; left: 50%; transform: translateX(-50%); right: auto !important; }
#targetframe {
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	min-width: 260px;
	max-width: min(420px, 60vw);
}
#targetframe.visible { display: block; }
#targetframe:not(.visible) { display: none !important; }
.target-frame-card { color: var(--text); }
.target-frame-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.target-frame-name { font-family: var(--font-title); font-size: 22px; color: var(--gold); }
.target-frame-subtitle { font-size: 14px; color: var(--text-dim); margin-left: auto; }
.target-frame-bar { position: relative; height: 16px; background: var(--night-0); border: 2px solid var(--wood-edge); overflow: hidden; }
.target-frame-fill { position: absolute; inset: 0 auto 0 0; background: var(--hp); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3); transition: width 120ms steps(6); }
.target-character .target-frame-fill { background: var(--slime-dark); }
.target-frame-bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; text-shadow: 1px 1px 0 #000; }
.target-frame-meta { display: flex; gap: 12px; margin-top: 6px; font-size: 14px; color: var(--text-dim); }
.target-frame-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.target-frame-tag { font-size: 12px; padding: 1px 6px; border: 2px solid; }
.target-frame-statuses { margin-top: 6px; }
.target-frame-status-card { padding: 6px 8px; background: var(--night-1); border: 2px solid var(--wood-edge); font-size: 13px; }
.target-frame-status-card.inactive { opacity: 0.6; }
.target-frame-status-head { display: flex; justify-content: space-between; color: var(--slime); }
.target-frame-status-values { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-dim); }
.target-frame-status-chip b { color: var(--text); font-weight: normal; }
#action-notice-anchor { top: 110px; left: 50%; transform: translateX(-50%); }
#action-notice {
	display: none;
	padding: 8px 18px;
	font-family: var(--font-title);
	font-size: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: rgba(7, 6, 11, 0.9);
	border: 3px solid var(--gold-dark) !important;
	color: var(--gold) !important;
	clip-path: var(--chamfer-sm);
	white-space: nowrap;
}
#action-notice.visible { display: inline-block; animation: notice-pop 2.4s steps(8) forwards; }
@keyframes notice-pop { 0% { opacity: 0; transform: translateY(-6px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Bas milieu : barre d'action */
#bottommid {
	bottom: 10px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 16px !important;
	text-align: center;
	pointer-events: none;
}
#bottommid.hidden { display: none !important; }
#bottommid > * { pointer-events: auto; }
#ripbutton { display: flex; gap: 8px; justify-content: center; }
#ripbutton.hidden { display: none; }
#notification-area-above-hotbar { display: flex; flex-direction: column; gap: 6px; }
#notification-area-above-hotbar:empty { display: none; }
#notification-area-above-hotbar > * { padding: 8px 12px; background: var(--wood-dark); border: 3px solid var(--wood-edge); clip-path: var(--chamfer-sm); color: var(--text); }
.action-dock {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
}
.action-dock .side { display: flex; gap: 6px; }
.action-dock .side .pixel-art-btn { min-width: 52px; min-height: 52px; padding: 4px; }
.action-dock .side .cskin { display: inline-block; }
#medieval-skillbar {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 6px;
}
#medieval-skillbar > div { position: relative; }
#medieval-skillbar [data-skid] {
	width: 50px !important;
	height: 50px !important;
	margin: 0 !important;
	border-width: 2px !important;
	background: var(--night-0) !important;
}
#medieval-skillbar .truui { font-size: 14px; left: 2px; top: 2px; color: var(--gold); border-color: var(--wood); }
#medieval-skillbar .pixel-skill-btn.cooldown::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
#cooldown-tracker {
	bottom: 108px;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	gap: 6px;
}
#cooldown-tracker.visible { display: flex; }
.cooldown-chip { min-width: 90px; padding: 4px 6px; background: rgba(7, 6, 11, 0.88); border: 2px solid var(--wood-edge); font-size: 12px; color: var(--text-dim); }
.cooldown-chip-header { display: flex; justify-content: space-between; gap: 6px; color: var(--text); }
.cooldown-chip-bar { height: 4px; margin-top: 3px; background: var(--night-0); }
.cooldown-chip-fill { height: 100%; background: var(--gold); }
#pausedui.hidden { display: none; }
/* Ancienne rangée de stats : conservée pour les hooks, mais la plaque la remplace */
.medieval-stats-row { display: none !important; }

/* Panneau gauche (PNJ, cible, dialogues) */
#topleftcorner {
	top: 136px;
	left: 12px;
	bottom: 240px;
	width: auto;
	max-width: min(560px, 48vw);
	display: flex;
	align-items: flex-start;
	gap: 8px;
	overflow: visible;
}
#topleftcornerui, #topleftcornerdialog { display: inline-block; vertical-align: top; max-height: calc(100vh - 380px); overflow-y: auto; }
#topleftcornerui:empty, #topleftcornerdialog:empty { display: none; }
/* Dock inventaire (droite) */
#bottomleftcorner {
	top: 12px;
	right: 72px;
	bottom: 110px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 8px;
	max-width: calc(100vw - 420px);
	overflow: visible;
}
#bottomleftcorner > * { max-height: calc(100vh - 130px); overflow-y: auto; }
#bottomleftcorner:empty { display: none; }
/* Journal / chat (bas gauche) */
#bottomleftcorner2 {
	left: 12px;
	bottom: 10px;
	width: 380px;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
}
#bottomleftcorner2.hidden { display: none !important; }
#medieval-party-display:empty { display: none; }
#medieval-party-display { padding: 8px 10px; }
.chat-frame { display: flex; flex-direction: column; padding: 8px; transition: height 120ms; }
.chat-frame .chat-top { display: flex; align-items: center; gap: 8px; padding: 0 2px 6px; font-family: var(--font-title); font-size: 16px; letter-spacing: 1px; color: var(--text-dim); }
.chat-frame .chat-top .medieval-chat-server { color: var(--gold); }
.chat-frame .chat-top .medieval-chat-time { margin-left: auto; }
.chat-frame .chat-top .chat-collapse { background: none; border: 0; color: var(--text-dim); font-family: var(--font-title); font-size: 18px; padding: 0 6px; }
.chat-frame .chat-top .chat-collapse:hover { color: var(--gold); }
#chatlog {
	height: 150px;
	padding: 6px 8px;
	overflow-y: auto;
	font-size: 15px;
	line-height: 1.3;
	user-select: text;
	overscroll-behavior: contain;
}
.chat-frame.collapsed #chatlog, .chat-frame.collapsed .medieval-input-row { display: none; }
.chatentry { word-break: break-word; }
.chatentry.server { color: var(--gold) !important; }
.chatentry.gameentry, .gameentry { color: var(--text-dim) !important; }
.medieval-input-row { display: flex !important; margin-top: 6px; }
#chatinput {
	width: 100%;
	min-height: 36px;
	padding: 4px 10px;
	font-size: 16px;
	background: var(--night-0);
	color: var(--text);
	border: 2px solid var(--wood-edge);
	clip-path: none;
	box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.7);
}
#chatinput::placeholder { color: var(--text-dim); }

/* Coins droits hérités (code, iframes) */
#bottomrightcorner { right: 12px; bottom: 120px; }
#bottomrightcodecorner { display: none !important; }
#toprightcorner { top: 64px; right: 72px; display: flex; gap: 6px; }
#toprightcorner.hidden { display: none; }
#codeui {
	position: fixed;
	right: 12px;
	top: 70px;
	bottom: 130px;
	width: min(640px, 60vw);
	z-index: 400;
	display: none;
	padding: 10px;
}
#codeui.visible { display: block; }
#codeui .CodeMirror { height: calc(100% - 44px); font-size: 14px; }
#codeui .code-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Panneaux générés par le code du jeu : on neutralise les styles inline sombres
   et on leur donne un fond parchemin lisible. */
#topleftcornerui > div, #topleftcornerdialog > div,
.pixel-art-panel, .renderedinfo, .dcontain, .rendercontainer > div,
#theskills, #auto-panel, #custom-guide-panel, .ponty-modal {
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.025) 0 2px, transparent 2px 4px),
		var(--parch) !important;
	border: 4px solid var(--wood-edge) !important;
	box-shadow: inset 0 0 0 4px var(--wood), inset 0 0 0 6px var(--parch-light), inset 0 0 0 8px var(--parch-dark) !important;
	clip-path: var(--chamfer);
	color: var(--ink);
	font-size: 16px !important;
	padding: 16px !important;
	margin: 0 !important;
	border-radius: 0 !important;
}
#topleftcornerui > div > div, #topleftcornerdialog > div > div { font-size: 16px; }
.renderedinfo [style*="color: white"], .dcontain [style*="color: white"], .pixel-art-panel [style*="color: white"] { color: var(--ink) !important; }
.renderedinfo [style*="color: gray"], .dcontain [style*="color: gray"], .pixel-art-panel [style*="color: gray"],
.renderedinfo [style*="color: grey"], .dcontain [style*="color: grey"] { color: var(--ink-faint) !important; }
.renderedinfo [style*="border"][style*="gray"], .dcontain [style*="border"][style*="gray"] { border-color: var(--wood) !important; }
.renderedinfo [style*="background: black"], .dcontain [style*="background: black"], .dcontain [style*="background-color: black"] { background: transparent !important; }
.npc-dialog-header, .npc-service-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -6px -6px 10px;
	padding: 6px 10px;
	background: var(--wood-dark);
	border: 2px solid var(--wood-edge);
	box-shadow: inset 0 2px 0 var(--wood-hi);
	clip-path: var(--chamfer-sm);
	color: var(--gold);
}
.npc-dialog-title, .npc-service-title { font-family: var(--font-title); font-size: 22px; color: var(--gold); background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; cursor: default; }
.npc-service-heading { flex: 1; }
.npc-service-subtitle { font-size: 13px; color: var(--text-dim); letter-spacing: 0; text-transform: none; font-family: var(--font-body); }
.npc-dialog-close, .npc-service-close { margin-left: auto; min-height: 30px !important; padding: 2px 10px !important; font-size: 16px !important; }
.npc-dialog-header .npc-dialog-title { flex: 1; text-align: left; }

/* Inventaire (nouveau rendu, cf. html.js render_inventory) */
.inv-panel { width: 440px; }
.inv-head { display: flex; align-items: center; gap: 8px; margin: -6px -6px 10px; padding: 6px 10px; background: var(--wood-dark); border: 2px solid var(--wood-edge); box-shadow: inset 0 2px 0 var(--wood-hi); clip-path: var(--chamfer-sm); color: var(--gold); }
.inv-head .ui-title { font-size: 22px; }
.inv-head .count { margin-left: auto; font-size: 14px; color: var(--text-dim); }
.inv-head .btn { min-height: 28px; padding: 0 8px; font-size: 14px; }
.inv-wallet { display: flex; gap: 14px; margin-bottom: 8px; font-size: 15px; color: var(--ink-soft); }
.inv-wallet b { color: var(--gold-dark); font-weight: normal; }
.inv-wallet .cashnum::before { content: ""; }
.inv-gear { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 6px; margin-bottom: 8px; }
.inv-gear > div { display: contents; }
.inv-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.inv-tabs .btn { flex: 1; min-height: 30px; padding: 2px 6px; font-size: 15px; }
.inv-tabs .btn:not(.active) { background: var(--wood-dark); color: var(--text-dim); }
.inv-grid { display: flex; flex-wrap: wrap; justify-content: center; padding: 6px; }
.inv-grid > div { display: contents; }
.inv-detail { margin-top: 8px; padding: 10px; min-height: 60px; color: var(--ink); }
.inv-detail:empty { display: none; }
.inv-detail .empty { color: var(--ink-faint); text-align: center; padding: 10px 0; }
.inventory-item { padding: 10px; }
.inventory-external-stats { display: none; }
.rendercontainer { display: inline-block; vertical-align: top; }

/* Autres panneaux fixes posés sur body par l'ancien code */
#theskills, #auto-panel, #custom-guide-panel {
	position: fixed !important;
	top: 70px !important;
	right: 72px !important;
	left: auto !important;
	bottom: auto !important;
	width: min(520px, calc(100vw - 100px)) !important;
	max-height: calc(100vh - 200px) !important;
	overflow-y: auto !important;
	z-index: 300 !important;
}

/* Modales : coloration des titres legacy */
.imodal .ui-title, .imodal h2 { color: var(--ink); }
.slimefox-alert-shell .slimefox-alert-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.slimefox-alert-title { font-family: var(--font-title); font-size: 26px; color: var(--ink); }
.slimefox-alert-subtitle { font-size: 12px; letter-spacing: 2px; color: var(--ink-faint); }
.slimefox-alert-close { margin-left: auto; }
.slimefox-alert-message { padding: 10px 0 14px; white-space: pre-wrap; user-select: text; }
.slimefox-alert-confirm { width: 100%; }

/* ============================================================================
   TÉLÉPHONE / TABLETTE ÉTROITE
   ============================================================================ */
@media (max-width: 899px) {
	body { font-size: 16px; }
	.frame-wood, .frame-parch { padding: 12px; }
	.entry-stage { justify-content: flex-start; padding-top: calc(24px + var(--safe-top)); }
	.entry-brand img { width: 72px; height: 72px; }
	.entry-brand .ui-title { font-size: 44px; }
	.char-grid { grid-template-columns: repeat(2, 1fr); }
	.class-grid { grid-template-columns: repeat(2, 1fr); }
	.look-grid { grid-template-columns: repeat(2, 1fr); }
	.class-detail .stats { grid-template-columns: repeat(5, 1fr); }
	.summary { flex-direction: column; text-align: center; }
	.summary dl { grid-template-columns: 1fr; text-align: center; }

	/* Plaque compacte */
	#hero-plaque { top: calc(8px + var(--safe-top)); left: 8px; right: 72px; min-width: 0; padding: 6px 8px; gap: 8px; }
	#hero-plaque .portrait { width: 44px; height: 44px; }
	#hero-plaque .who .charactername { font-size: 18px; }
	#hero-plaque .bar { height: 12px; }
	#hero-plaque .gold-line { font-size: 12px; }
	#hero-plaque .gold-line .coords { display: none; }

	/* Menu : bouton + grille plein écran */
	#slime-menu-toggle {
		display: flex;
		position: fixed;
		top: calc(8px + var(--safe-top));
		right: 8px;
		width: 56px;
		height: 56px;
		min-height: 0;
		padding: 0;
		z-index: calc(var(--hud-z) + 2);
		flex-direction: column;
		gap: 2px;
		font-size: 12px;
	}
	#slime-menu-toggle i { display: block; width: 24px; height: 4px; background: var(--gold); box-shadow: 0 8px 0 var(--gold), 0 -8px 0 var(--gold); margin: 8px 0 6px; }
	#slime-menu {
		display: none;
		position: fixed;
		inset: 0;
		top: 0 !important;
		right: 0 !important;
		padding: calc(76px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
		background: rgba(7, 6, 11, 0.92);
		border: 0;
		box-shadow: none;
		clip-path: none;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		gap: 10px;
		overflow-y: auto;
		z-index: calc(var(--hud-z) + 1);
	}
	body.menu-open #slime-menu { display: flex; }
	#slime-menu .menu-btn, #slime-menu:hover .menu-btn {
		width: calc(50% - 5px);
		height: 72px;
		justify-content: flex-start;
		padding: 0 12px;
		background: var(--wood-dark);
		box-shadow: inset 0 0 0 2px var(--wood);
	}
	#slime-menu .menu-btn .lbl, #slime-menu:hover .menu-btn .lbl { display: block; font-size: 20px; }
	#slime-menu .menu-btn .ico { width: 36px; height: 36px; }

	/* Cible et avis */
	#targetframe { top: calc(72px + var(--safe-top)); left: 8px; right: 8px; transform: none; max-width: none; min-width: 0; padding: 8px 10px; }
	.target-frame-statuses, .target-frame-meta { display: none; }
	#action-notice-anchor { top: 40%; }
	#action-notice { font-size: 18px; white-space: normal; max-width: 90vw; }

	/* Barre d'action bas : hotbar défilante + dock */
	#bottommid { bottom: calc(6px + var(--safe-bottom)) !important; width: 100%; gap: 4px; }
	.action-dock { width: calc(100vw - 12px); padding: 6px; gap: 6px; }
	.action-dock .side { flex: none; }
	.action-dock .side .pixel-art-btn { min-width: 48px; min-height: 48px; }
	#medieval-skillbar { flex: 1; overflow-x: auto; justify-content: flex-start; padding: 4px; scrollbar-width: none; }
	#medieval-skillbar::-webkit-scrollbar { display: none; }
	#medieval-skillbar [data-skid] { width: 46px !important; height: 46px !important; flex: none; }
	#cooldown-tracker { display: none !important; }
	#ripbutton .btn { font-size: 18px; }

	/* Journal : repliable au-dessus de la barre */
	#bottomleftcorner2 { left: 8px; right: 8px; width: auto; bottom: calc(86px + var(--safe-bottom)); }
	#chatlog { height: 110px; }
	.chat-frame.collapsed { padding: 4px 8px; }
	#medieval-party-display { display: none !important; }

	/* Panneaux → feuilles plein écran */
	#toprightcorner { display: none !important; }
	#topleftcorner, #bottomleftcorner, #codeui, #bottomrightcorner {
		position: fixed !important;
		inset: 0 !important;
		top: calc(64px + var(--safe-top)) !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0;
		padding: 8px 8px calc(96px + var(--safe-bottom));
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 8px;
		overflow-y: auto;
		background: rgba(7, 6, 11, 0.86);
		z-index: 60;
		pointer-events: auto;
	}
	#topleftcorner:not(.has-content), #bottomleftcorner:empty, #bottomrightcorner:not(.has-content) { display: none !important; }
	#codeui:not(.visible) { display: none !important; }
	#topleftcornerui, #topleftcornerdialog, #bottomleftcorner > * { max-height: none; width: 100%; display: block; }
	#topleftcornerui:empty, #topleftcornerdialog:empty { display: none; }
	#topleftcornerui > div, #topleftcornerdialog > div, .inv-panel { width: auto !important; max-width: 100% !important; display: block !important; }
	.inv-grid, .inv-gear { justify-content: center; }
	#theskills, #auto-panel, #custom-guide-panel {
		top: calc(64px + var(--safe-top)) !important;
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: auto !important;
		max-height: none !important;
		clip-path: none;
		padding-bottom: calc(96px + var(--safe-bottom)) !important;
	}
	.modal { padding: 12px 8px calc(24px + var(--safe-bottom)); align-items: flex-start; }
	.imodal { width: 100% !important; padding: 12px !important; }
	/* Bouton « fermer la feuille » injecté par shell.js */
	.sheet-close {
		position: fixed;
		top: calc(8px + var(--safe-top));
		left: 50%;
		transform: translateX(-50%);
		z-index: 70;
		min-height: 48px;
		padding: 0 22px;
		font-size: 20px;
	}
	body:not(.sheet-open) .sheet-close, body.sheet-modal .sheet-close { display: none; }
	body.sheet-open:not(.sheet-modal) #hero-plaque, body.sheet-open:not(.sheet-modal) #targetframe, body.sheet-open:not(.sheet-modal) #bottomleftcorner2 { display: none !important; }
	body.sheet-open:not(.sheet-modal) #slime-menu-toggle { display: none; }
	/* Fiche de cible / PNJ : carte compacte sous la plaque, pas une feuille */
	#topleftcorner.has-content:not(.is-sheet) {
		inset: auto !important;
		top: calc(132px + var(--safe-top)) !important;
		left: 8px !important;
		right: 72px !important;
		bottom: auto !important;
		max-height: 38vh !important;
		padding: 0;
		background: transparent;
		z-index: var(--hud-z);
		overflow-y: auto;
	}
	#topleftcorner.has-content:not(.is-sheet) > div > div { padding: 10px !important; }
	/* La page ne doit jamais défiler : les éléments fixes restent calés sur l'écran visible */
	html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
}

@media (max-width: 899px) and (orientation: landscape) {
	#chatlog { height: 70px; }
	#bottomleftcorner2 { width: 46vw; right: auto; }
	.entry-stage { justify-content: center; }
}

@media (min-width: 900px) and (max-width: 1199px) {
	#bottomleftcorner { max-width: calc(100vw - 360px); }
	.inv-panel { width: 400px; }
}

/* ============================================================================
   PANNEAUX « slimefox » (voyage, classement, compétences, mode idle, succès,
   apparence, admin) : structure générée par html.js, habillée ici.
   ============================================================================ */
.slimefox-overlay-panel, .slimefox-travel-shell, .slimefox-skills-shell, .slimefox-leaderboard-shell, .slimefox-looks-shell, .slimefox-cgallery-shell, .slimefox-achievement-shell, .slimefox-admin-shell { color: var(--ink); }
.slimefox-overlay-header, .slimefox-auto-panel-header, .slimefox-alert-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -6px -6px 12px;
	padding: 6px 10px;
	background: var(--wood-dark);
	border: 2px solid var(--wood-edge);
	box-shadow: inset 0 2px 0 var(--wood-hi);
	clip-path: var(--chamfer-sm);
	color: var(--gold);
}
.slimefox-overlay-copy, .slimefox-auto-panel-copy { flex: 1; min-width: 0; }
.slimefox-overlay-title, .slimefox-auto-panel-title, .slimefox-alert-title { font-family: var(--font-title); font-size: 24px; letter-spacing: 1px; color: var(--gold); }
.slimefox-alert-title { color: var(--gold); }
.slimefox-overlay-subtitle, .slimefox-auto-panel-subtitle, .slimefox-alert-subtitle { font-size: 13px; color: var(--text-dim); }
.slimefox-overlay-close, .slimefox-auto-close, .slimefox-alert-close { min-height: 30px !important; min-width: 0 !important; padding: 2px 10px !important; font-size: 16px !important; margin-left: auto; }
.slimefox-overlay-close .btn-icon, .slimefox-auto-close .btn-icon { display: inline; }
/* onglets */
.slimefox-panel-tabs, .slimefox-auto-tabs, .slimefox-achievement-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.slimefox-panel-tab, .slimefox-auto-tab-btn, .slimefox-achievement-filter-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-height: 40px;
	padding: 4px 12px;
	font: inherit;
	font-family: var(--font-title);
	font-size: 16px;
	letter-spacing: 1px;
	color: var(--text-dim);
	background: var(--wood-dark);
	border: 2px solid var(--wood-edge);
	clip-path: var(--chamfer-sm);
	cursor: pointer;
}
.slimefox-panel-tab small, .slimefox-panel-tab span:last-child:not(:only-child) { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }
.slimefox-panel-tab.active, .slimefox-panel-tab[aria-selected="true"], .slimefox-auto-tab-btn.active, .slimefox-achievement-filter-btn.active { color: var(--gold); background: var(--wood); box-shadow: inset 0 0 0 2px var(--gold-dark); }
/* sections */
.slimefox-travel-section, .slimefox-auto-section, .slimefox-looks-section, .slimefox-admin-section { margin-top: 12px; }
.slimefox-travel-section-header, .slimefox-auto-section-head, .slimefox-looks-section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; border-bottom: 2px solid var(--parch-shadow); padding-bottom: 4px; }
.slimefox-travel-section-title, .slimefox-auto-section-title, .slimefox-looks-section-title { font-family: var(--font-title); font-size: 18px; letter-spacing: 1px; color: var(--ink); }
.slimefox-travel-section-subtitle, .slimefox-auto-section-subtitle, .slimefox-looks-section-subtitle { font-size: 13px; color: var(--ink-faint); }
.slimefox-travel-section-meta { margin-left: auto; font-size: 13px; color: var(--ink-faint); }
.slimefox-travel-hero { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--parch-dark); border: 2px solid var(--wood); }
.slimefox-travel-hero-badge { font-family: var(--font-title); font-size: 14px; letter-spacing: 1px; color: var(--gold-dark); }
.slimefox-travel-hero-title { font-family: var(--font-title); font-size: 22px; color: var(--ink); }
.slimefox-travel-hero-subtitle { font-size: 13px; color: var(--ink-faint); }
.slimefox-travel-empty, .slimefox-leaderboard-empty, .slimefox-achievement-empty, .slimefox-skills-preview-empty { padding: 12px; color: var(--ink-faint); text-align: center; }
/* cartes */
.slimefox-travel-grid, .slimefox-looks-grid, .slimefox-cgallery-grid, .slimefox-auto-number-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.slimefox-travel-card, .slimefox-panel-card, .slimefox-look-card, .slimefox-cgallery-card, .slimefox-auto-target-card, .slimefox-auto-number-card, .slimefox-achievement-contract {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 6px;
	font: inherit;
	color: var(--ink);
	background: var(--parch-light);
	border: 3px solid var(--wood);
	box-shadow: inset 0 0 0 2px var(--parch-dark);
	clip-path: var(--chamfer-sm);
	cursor: pointer;
	text-align: center;
}
.slimefox-travel-card:hover, .slimefox-look-card:hover, .slimefox-cgallery-card:hover { box-shadow: inset 0 0 0 2px var(--gold-dark); }
.slimefox-travel-card-art { height: 60px; display: flex; align-items: flex-end; justify-content: center; }
.slimefox-travel-card-name, .slimefox-panel-card-title, .slimefox-cgallery-card-name, .slimefox-auto-number-title { font-family: var(--font-title); font-size: 18px; color: var(--ink); }
.slimefox-travel-card-subtitle { font-size: 12px; color: var(--ink-faint); }
.slimefox-travel-card-action, .slimefox-travel-place-action { margin-top: 4px; font-family: var(--font-title); font-size: 14px; letter-spacing: 1px; color: #fff; background: var(--slime-dark); padding: 2px 10px; border: 2px solid var(--wood-edge); }
.slimefox-travel-place-list { display: flex; flex-wrap: wrap; gap: 6px; }
.slimefox-travel-place-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font: inherit; color: var(--ink); background: var(--parch-light); border: 2px solid var(--wood); cursor: pointer; }
/* classement */
.slimefox-leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
.slimefox-leaderboard-entry { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; background: var(--parch-light); border: 2px solid var(--wood); }
.slimefox-leaderboard-rank { font-family: var(--font-title); font-size: 22px; color: var(--gold-dark); text-align: center; }
.slimefox-leaderboard-name { font-family: var(--font-title); font-size: 18px; }
.slimefox-leaderboard-meta, .slimefox-leaderboard-extra, .slimefox-leaderboard-foot { font-size: 13px; color: var(--ink-faint); }
.slimefox-leaderboard-value { font-family: var(--font-title); font-size: 20px; color: var(--ink); }
.slimefox-leaderboard-foot { margin-top: 8px; text-align: right; }
/* mode idle */
.slimefox-auto-panel-status, .slimefox-auto-status-btn { font-family: var(--font-title); }
.slimefox-auto-panel-note, .slimefox-admin-note { font-size: 13px; color: var(--ink-faint); margin: 6px 0; }
.slimefox-auto-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; margin-top: 6px; background: var(--parch-light); border: 2px solid var(--wood); }
.slimefox-auto-option-copy { flex: 1; }
.slimefox-auto-option-title { font-family: var(--font-title); font-size: 17px; }
.slimefox-auto-option-desc { font-size: 13px; color: var(--ink-faint); }
.slimefox-auto-checkbox { width: 24px; height: 24px; margin-top: 2px; }
.slimefox-auto-number-input-row { display: flex; align-items: center; gap: 4px; }
.slimefox-auto-number-input { width: 90px; min-height: 36px; text-align: center; }
.slimefox-auto-number-suffix { color: var(--ink-faint); font-size: 13px; }
.slimefox-auto-inline-actions, .slimefox-auto-target-actions, .slimefox-admin-inline-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.slimefox-auto-mini-btn, .slimefox-auto-target-picker-btn, .slimefox-admin-compact-btn, .slimefox-admin-action-btn, .slimefox-cgallery-action-btn, .slimefox-cgallery-top-btn, .slimefox-achievement-claim-btn, .slimefox-skill-json-btn, .slimefox-looks-achievement-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 2px 10px; font: inherit; font-family: var(--font-title); font-size: 15px; letter-spacing: 1px; color: var(--text);
	background: var(--wood); border: 2px solid var(--wood-edge); box-shadow: inset 0 2px 0 var(--wood-hi), 0 2px 0 var(--wood-edge); clip-path: var(--chamfer-sm); cursor: pointer;
}
.slimefox-auto-select, select.slimefox-auto-select { min-height: 36px; }
.slimefox-auto-target-summary, .slimefox-auto-tool-summary { font-size: 13px; color: var(--ink-faint); }
/* compétences */
.slimefox-skills-layout { display: grid; grid-template-columns: 1fr minmax(200px, 260px); gap: 12px; }
.slimefox-skills-content { min-width: 0; }
.slimefox-skills-grid-row, .slimefox-skills-mapping-row { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: var(--parch-dark); border: 2px solid var(--wood); margin-bottom: 8px; }
.slimefox-skills-preview { position: sticky; top: 0; }
.slimefox-skill-detail-card { padding: 10px; background: var(--parch-light); border: 2px solid var(--wood); }
.slimefox-skill-detail-header { display: flex; gap: 10px; align-items: center; }
.slimefox-skill-detail-title { font-family: var(--font-title); font-size: 20px; }
.slimefox-skill-detail-subtitle, .slimefox-skill-detail-text { font-size: 13px; color: var(--ink-soft); }
.slimefox-skill-stats { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 14px; }
.slimefox-skill-stat-label { color: var(--ink-faint); }
.slimefox-skill-stat-value { text-align: right; }
/* succès / apparence */
.slimefox-achievement-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.slimefox-achievement-summary-card { flex: 1; min-width: 100px; padding: 8px; text-align: center; background: var(--parch-light); border: 2px solid var(--wood); }
.slimefox-achievement-summary-value { font-family: var(--font-title); font-size: 26px; color: var(--gold-dark); }
.slimefox-achievement-summary-label { font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; }
.slimefox-achievement-list { display: flex; flex-direction: column; gap: 6px; }
.slimefox-achievement-contract { flex-direction: row; align-items: center; text-align: left; cursor: default; }
.slimefox-achievement-contract-main { flex: 1; }
.slimefox-achievement-contract-title { font-family: var(--font-title); font-size: 18px; }
.slimefox-achievement-contract-meta, .slimefox-achievement-progress { font-size: 13px; color: var(--ink-faint); }
.slimefox-token-count, .slimefox-looks-token-pill, .slimefox-cgallery-token-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-family: var(--font-title); color: var(--gold-dark); background: var(--parch-dark); border: 2px solid var(--wood); }
.slimefox-looks-preview-stage, .slimefox-cgallery-preview { display: flex; align-items: flex-end; justify-content: center; min-height: 120px; background: var(--night-0); border: 3px solid var(--wood); }
.slimefox-looks-preview-name { font-family: var(--font-title); font-size: 20px; }
.slimefox-looks-preview-kicker { font-size: 12px; letter-spacing: 1px; color: var(--ink-faint); }
/* notes de version */
.slimefox-patch-notes-list { display: flex; flex-direction: column; gap: 4px; }
.slimefox-patch-note-entry { padding: 6px 10px; background: var(--parch-light); border-left: 4px solid var(--gold-dark); }
/* panneaux fixes : neutraliser le centrage par transform hérité */
#theskills, #auto-panel, #custom-guide-panel { transform: none !important; }
@media (max-width: 899px) {
	.slimefox-skills-layout { grid-template-columns: 1fr; }
	.slimefox-leaderboard-entry { grid-template-columns: 36px 1fr auto; }
	.slimefox-travel-grid { grid-template-columns: repeat(3, 1fr); }
}