/*
 * SLIME IDLE — responsive pixel-art presentation layer
 * Loaded last so every player-facing surface shares one visual language.
 */

:root {
	--slime-ink: #090611;
	--slime-night: #120d1d;
	--slime-panel: #1c142a;
	--slime-panel-2: #281b38;
	--slime-edge-dark: #09050e;
	--slime-edge: #5e3c72;
	--slime-edge-light: #a77ac1;
	--slime-green: #7ed957;
	--slime-green-light: #b7ff82;
	--slime-gold: #f7c95c;
	--slime-red: #ef5b5b;
	--slime-blue: #61b8ff;
	--slime-text: #f5ebff;
	--slime-muted: #b9a6c9;
	--slime-safe-top: env(safe-area-inset-top, 0px);
	--slime-safe-right: env(safe-area-inset-right, 0px);
	--slime-safe-bottom: env(safe-area-inset-bottom, 0px);
	--slime-safe-left: env(safe-area-inset-left, 0px);
	--slime-pixel-shadow: 4px 4px 0 var(--slime-edge-dark);
	--slime-panel-border: 3px solid var(--slime-edge);
}

/* Portrait-first phone shell -------------------------------------------------
 * Large desktop layouts stay untouched. The phone UI becomes a thumb-friendly
 * medieval command deck with the game canvas above it. */
@media (max-width: 700px) and (orientation: portrait) {
	html,
	body {
		width: 100% !important;
		min-width: 0 !important;
		height: 100dvh !important;
		overflow: hidden !important;
		overscroll-behavior: none;
	}

	body {
		padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
		background: #090603 !important;
	}

	#game,
	#gamecanvas,
	canvas {
		max-width: 100vw !important;
		max-height: calc(100dvh - 252px) !important;
	}

	.pixel-menu-frame {
		position: fixed !important;
		inset: auto calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)) !important;
		width: auto !important;
		max-width: none !important;
		padding: 4px !important;
		z-index: 420 !important;
		background: linear-gradient(#3c2918, #160e08) !important;
		border: 2px solid #c99b4b !important;
		box-shadow: 0 0 0 2px #241509, 0 -5px 18px #000b !important;
	}

	.pixel-menu-buttons {
		display: grid !important;
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		gap: 3px !important;
		width: 100% !important;
	}

	.pixel-menu-buttons .pixel-art-btn[data-mobile-action] {
		position: relative !important;
		display: grid !important;
		place-items: start center !important;
		width: 100% !important;
		min-width: 0 !important;
		height: 67px !important;
		padding: 2px 1px 14px !important;
		image-rendering: pixelated;
	}

	.pixel-art-btn[data-mobile-action] > .btn-icon,
	.pixel-art-btn[data-mobile-action] > .btn-spark {
		display: none !important;
	}

	.pixel-art-btn[data-mobile-action]::before {
		content: "";
		display: block;
		width: 48px;
		height: 48px;
		background: center / contain no-repeat var(--mobile-action-image);
		filter: drop-shadow(0 2px 0 #000);
		image-rendering: pixelated;
	}

	.pixel-art-btn[data-mobile-action]::after {
		position: absolute;
		left: 1px;
		right: 1px;
		bottom: 3px;
		content: var(--mobile-label, "");
		color: #fff0c2;
		font: 10px/1 Pixel, monospace;
		text-align: center;
		text-shadow: 1px 1px #000;
	}

	[data-mobile-action="idle"] { --mobile-action-image: url("/images/ui/mobile-actions/idle.png"); --mobile-label: "IDLE"; }
	[data-mobile-action="inventory"] { --mobile-action-image: url("/images/ui/mobile-actions/inventory.png"); --mobile-label: "SAC"; }
	[data-mobile-action="skills"] { --mobile-action-image: url("/images/ui/mobile-actions/skills.png"); --mobile-label: "SORTS"; }
	[data-mobile-action="travel"],
	[data-mobile-action="guide"] { --mobile-action-image: url("/images/ui/mobile-actions/travel.png"); --mobile-label: "CARTE"; }
	[data-mobile-action="communication"] { --mobile-action-image: url("/images/ui/mobile-actions/communication.png"); --mobile-label: "SOCIAL"; }
	[data-mobile-action="settings"] { --mobile-action-image: url("/images/ui/mobile-actions/settings.png"); --mobile-label: "OPTIONS"; }

	#bottommid {
		left: calc(6px + env(safe-area-inset-left)) !important;
		right: calc(6px + env(safe-area-inset-right)) !important;
		bottom: calc(83px + env(safe-area-inset-bottom)) !important;
		width: auto !important;
	}

	.pixel-bottom-frame {
		grid-template-columns: minmax(108px, 0.8fr) minmax(140px, 1.2fr) !important;
		grid-template-areas: "actions stats" "skills skills" !important;
		max-height: 168px !important;
		overflow: hidden !important;
	}

	.pixel-bottom-frame .medieval-action-btns-row {
		max-width: none !important;
		overflow-x: auto !important;
		scrollbar-width: none;
	}

	.pixel-bottom-frame .pixel-art-btn[data-mobile-action="inventory"] {
		width: 58px !important;
		min-width: 58px !important;
		height: 58px !important;
		padding: 2px !important;
	}

	.pixel-bottom-frame .pixel-art-btn[data-mobile-action="inventory"]::before {
		width: 52px;
		height: 52px;
	}

	.pixel-bottom-frame .pixel-art-btn[data-mobile-action="inventory"]::after {
		display: none;
	}

	#bottomleftcorner2 {
		bottom: calc(258px + env(safe-area-inset-bottom)) !important;
		width: calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
		max-height: 25dvh !important;
	}

	#targetframe {
		top: calc(8px + env(safe-area-inset-top)) !important;
		left: calc(6px + env(safe-area-inset-left)) !important;
		right: calc(6px + env(safe-area-inset-right)) !important;
		width: auto !important;
	}

	.pwa-install-panel {
		left: calc(8px + env(safe-area-inset-left)) !important;
		right: calc(8px + env(safe-area-inset-right)) !important;
		top: calc(8px + env(safe-area-inset-top)) !important;
		bottom: auto !important;
		width: auto !important;
		z-index: 10000 !important;
	}
}

@media (max-width: 380px) and (orientation: portrait) {
	.pixel-menu-buttons .pixel-art-btn[data-mobile-action]::before { width: 42px; height: 42px; }
	.pixel-menu-buttons .pixel-art-btn[data-mobile-action] { height: 62px !important; }
	#bottommid { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	background: var(--slime-ink);
	color: var(--slime-text);
	font-family: Pixel, "Courier New", monospace !important;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: geometricPrecision;
	overscroll-behavior: none;
}

body {
	min-height: 100dvh;
	touch-action: manipulation;
}

img,
canvas,
.sprite,
.skillsprite,
.itemsprite,
.preview-sprite {
	image-rendering: pixelated !important;
	image-rendering: crisp-edges !important;
}

button,
input,
select,
textarea,
a,
[onclick] {
	-webkit-tap-highlight-color: transparent;
}

/* Unified pixel surfaces */
.gamebutton,
.slimbutton,
.tinybutton,
.textbutton,
.pixel-btn,
.pixel-art-btn,
.medieval-action-btn,
.medieval-notification-btn,
.slimefox-auto-status-btn,
.slimefox-auto-tab-btn,
.slimefox-auto-mini-btn,
button,
input,
select,
textarea,
.block,
.gameblock,
.modal-content,
.modal_box,
.modalbox,
.largeborder,
.creation-panel,
.class-preview-panel,
.preview-card,
.medieval-character-panel,
.inventory-shell,
.slimefox-auto-panel,
.slimefox-travel-window,
.slimefox-achievement-window,
.slimefox-friends-window,
.slimefox-party-window,
.slimefox-stats-window {
	border-radius: 0 !important;
}

/* Installable-app prompt */
.pwa-install-panel {
	position: fixed;
	left: 50%;
	top: calc(14px + var(--slime-safe-top));
	transform: translateX(-50%);
	z-index: 20000;
	width: min(720px, calc(100vw - 28px - var(--slime-safe-left) - var(--slime-safe-right)));
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) auto 32px;
	align-items: center;
	gap: 12px;
	padding: 10px;
	background: linear-gradient(180deg, #38244c, #180f24);
	border: 3px solid var(--slime-edge);
	border-top-color: var(--slime-edge-light);
	border-left-color: var(--slime-edge-light);
	box-shadow: 5px 5px 0 #050308;
	color: var(--slime-text);
}

.pwa-install-panel[hidden] {
	display: none !important;
}

.pwa-install-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	background: var(--slime-green);
	color: #11200d;
	border: 3px solid #263e24;
	box-shadow:
		inset -4px -4px 0 #4b8f39,
		inset 4px 4px 0 var(--slime-green-light);
	font-size: 24px;
	font-weight: bold;
}

.pwa-install-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.pwa-install-copy strong {
	color: var(--slime-gold);
	font-size: 19px;
	letter-spacing: 0.08em;
	text-shadow: 2px 2px 0 #000;
}

.pwa-install-copy span {
	color: var(--slime-muted);
	font-size: 15px;
	line-height: 1.25;
}

.pwa-install-action {
	min-width: 112px;
}

.pwa-install-close {
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0 !important;
	font-size: 24px !important;
	line-height: 1;
}

.gamebutton,
.slimbutton,
.tinybutton,
.textbutton,
.pixel-btn,
.medieval-action-btn,
.medieval-notification-btn,
.slimefox-auto-status-btn,
.slimefox-auto-tab-btn,
.slimefox-auto-mini-btn,
button {
	min-height: 38px;
	border: 2px solid var(--slime-edge) !important;
	border-top-color: var(--slime-edge-light) !important;
	border-left-color: var(--slime-edge-light) !important;
	border-right-color: var(--slime-edge-dark) !important;
	border-bottom-color: var(--slime-edge-dark) !important;
	background: linear-gradient(180deg, var(--slime-panel-2), var(--slime-panel)) !important;
	color: var(--slime-text) !important;
	font-family: Pixel, "Courier New", monospace !important;
	text-shadow: 2px 2px 0 #000;
	box-shadow: 2px 2px 0 #000 !important;
	cursor: pointer;
}

.gamebutton:hover,
.slimbutton:hover,
.tinybutton:hover,
.textbutton:hover,
.pixel-btn:hover,
.medieval-action-btn:hover,
button:hover {
	background: linear-gradient(180deg, #4a315c, #2d1d3e) !important;
	color: var(--slime-green-light) !important;
}

.gamebutton:active,
.slimbutton:active,
.tinybutton:active,
.textbutton:active,
.pixel-btn:active,
.medieval-action-btn:active,
button:active {
	transform: translate(2px, 2px);
	box-shadow: none !important;
	border-top-color: var(--slime-edge-dark) !important;
	border-left-color: var(--slime-edge-dark) !important;
	border-right-color: var(--slime-edge-light) !important;
	border-bottom-color: var(--slime-edge-light) !important;
}

input,
select,
textarea,
.selectioninput,
.medieval-chat-input,
.slimefox-auto-number-input,
.slimefox-auto-select {
	min-height: 42px;
	max-width: 100%;
	background: #0d0914 !important;
	color: var(--slime-text) !important;
	border: 2px solid var(--slime-edge) !important;
	box-shadow: inset 2px 2px 0 #000 !important;
	font-family: Pixel, "Courier New", monospace !important;
	font-size: max(16px, 1rem) !important;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--slime-green) !important;
	outline: 2px solid #263e24 !important;
	outline-offset: 0;
}

.block,
.gameblock,
.modal-content,
.modal_box,
.modalbox,
.largeborder,
.creation-panel,
.class-preview-panel,
.preview-card,
.medieval-character-panel,
.inventory-shell,
.slimefox-auto-panel,
.slimefox-travel-window,
.slimefox-achievement-window,
.slimefox-friends-window,
.slimefox-party-window,
.slimefox-stats-window {
	background: linear-gradient(180deg, rgba(40, 27, 56, 0.98), rgba(18, 13, 29, 0.98)) !important;
	border: var(--slime-panel-border) !important;
	box-shadow: var(--slime-pixel-shadow) !important;
	color: var(--slime-text) !important;
}

.block_title,
.modal_title,
.windowtitle,
.panel-section-title,
.medieval-entry-kicker,
.selection-title {
	color: var(--slime-gold) !important;
	letter-spacing: 0.08em;
	text-shadow: 2px 2px 0 #000;
}

/* Entry and character selection */
body.selection-mode {
	overflow: auto !important;
	background: linear-gradient(rgba(9, 6, 17, 0.78), rgba(9, 6, 17, 0.94)), repeating-linear-gradient(0deg, #21162e 0 4px, #1b1226 4px 8px) !important;
}

body.entry-mode {
	height: auto !important;
	min-height: 100dvh !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	/* Transparent so the demo/background map (canvas, z-index:1) shows through
	   behind the centred medieval auth card. */
	background: transparent !important;
}

body.entry-mode #features {
	position: relative !important;
	inset: auto !important;
	float: none !important;
	width: min(1120px, calc(100vw - 24px)) !important;
	max-width: min(1120px, calc(100vw - 24px)) !important;
	margin: 18px auto 28px !important;
	padding: clamp(16px, 3vw, 28px) !important;
}

body.entry-mode #pagewrapper {
	position: relative !important;
	inset: auto !important;
	height: auto !important;
	min-height: 0 !important;
	transform: none !important;
}

#pagewrapper {
	min-height: 100dvh;
	width: 100%;
	padding: clamp(18px, 4vw, 56px);
	display: grid;
	place-items: center;
}

#pagewrapped.loginorselection {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	min-width: 0 !important;
	width: min(1120px, 100%) !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: clamp(20px, 4vw, 48px) !important;
	background: linear-gradient(180deg, rgba(40, 27, 56, 0.97), rgba(18, 13, 29, 0.98)) !important;
	border: 4px solid var(--slime-edge) !important;
	box-shadow: 8px 8px 0 #050308 !important;
}

.medieval-entry-hero {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.medieval-entry-title,
.selection-title {
	font-size: clamp(28px, 5vw, 58px) !important;
	line-height: 1 !important;
}

.medieval-entry-copy,
.selection-subtitle,
.creation-help-text,
.preview-muted {
	color: var(--slime-muted) !important;
	font-size: clamp(16px, 2vw, 22px) !important;
	line-height: 1.35;
}

.medieval-login-buttons,
.medieval-entry-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: min(720px, 100%);
	margin: 24px auto 0;
}

.medieval-login-buttons > *,
.medieval-entry-links > * {
	width: 100%;
	margin: 0 !important;
	padding: 12px !important;
	text-align: center;
}

.character-creation-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
	gap: clamp(16px, 3vw, 32px) !important;
	align-items: start;
}

.class-grid,
.looks-grid,
.class-preview-meta {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px !important;
}

.class-grid > *,
.looks-grid > * {
	width: 100% !important;
	margin: 0 !important;
	padding: 10px !important;
	text-align: center;
}

/* Gameplay HUD */
#topleftcorner,
#toprightcorner,
#bottomleftcorner,
#bottomleftcorner2,
#bottomrightcorner,
#bottomrightcodecorner,
#codeui,
.pixel-menu-frame,
.medieval-skillbar,
#medieval-skillbar,
.medieval-notifications {
	max-width: calc(100vw - var(--slime-safe-left) - var(--slime-safe-right) - 16px);
}

#topleftcorner {
	top: calc(10px + var(--slime-safe-top)) !important;
	left: calc(10px + var(--slime-safe-left)) !important;
}

.pixel-menu-frame {
	top: calc(10px + var(--slime-safe-top)) !important;
	right: calc(10px + var(--slime-safe-right)) !important;
}

#bottomleftcorner2 {
	left: calc(10px + var(--slime-safe-left)) !important;
	bottom: calc(10px + var(--slime-safe-bottom)) !important;
}

.medieval-chat,
.chat-frame {
	width: min(420px, calc(100vw - 20px - var(--slime-safe-left) - var(--slime-safe-right))) !important;
	max-height: min(38dvh, 340px);
	background: linear-gradient(180deg, rgba(40, 27, 56, 0.96), rgba(9, 6, 17, 0.96)) !important;
	border-color: var(--slime-edge) !important;
	box-shadow: var(--slime-pixel-shadow) !important;
}

.medieval-skillbar,
#medieval-skillbar,
.medieval-skillbar-row {
	max-width: min(760px, calc(100vw - 460px)) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: thin;
}

.pixel-skill-btn,
.pixel-art-btn {
	flex: 0 0 auto;
	touch-action: manipulation;
}

#modal,
.modal-bg,
.modal {
	padding: calc(12px + var(--slime-safe-top)) calc(12px + var(--slime-safe-right)) calc(12px + var(--slime-safe-bottom)) calc(12px + var(--slime-safe-left)) !important;
}

#modalbody,
.modal-content,
.modal_box,
.modalbox,
.imodal,
.slimefox-auto-panel,
.slimefox-travel-window,
.slimefox-achievement-window,
.slimefox-friends-window,
.slimefox-party-window,
.slimefox-stats-window {
	width: min(1040px, calc(100vw - 28px)) !important;
	max-width: calc(100vw - 28px) !important;
	max-height: calc(100dvh - 28px) !important;
	overflow: auto !important;
}

/* Tablet and narrow desktop */
@media (max-width: 1024px) {
	.character-creation-grid {
		grid-template-columns: 1fr !important;
	}

	.class-preview-panel {
		display: grid;
		grid-template-columns: minmax(140px, 0.5fr) minmax(0, 1fr);
		gap: 12px;
	}

	.medieval-skillbar,
	#medieval-skillbar,
	.medieval-skillbar-row {
		max-width: calc(100vw - 32px) !important;
	}
}

/* Phone portrait */
@media (max-width: 700px) {
	:root {
		--slime-pixel-shadow: 3px 3px 0 var(--slime-edge-dark);
	}

	body.selection-mode {
		overflow: auto !important;
	}

	body.entry-mode {
		overflow-y: auto !important;
	}

	body:not(.selection-mode):not(.entry-mode) {
		overflow: hidden !important;
	}

	#pagewrapper {
		padding: calc(10px + var(--slime-safe-top)) calc(10px + var(--slime-safe-right)) calc(16px + var(--slime-safe-bottom)) calc(10px + var(--slime-safe-left));
		place-items: start center;
	}

	body.entry-mode #features {
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
		margin: 12px auto 22px !important;
	}

	#pagewrapped.loginorselection {
		padding: 18px 14px !important;
		border-width: 3px !important;
		box-shadow: 4px 4px 0 #050308 !important;
	}

	.medieval-login-buttons,
	.medieval-entry-links,
	.class-grid,
	.looks-grid,
	.class-preview-meta,
	.create-action-row {
		grid-template-columns: 1fr !important;
	}

	.medieval-login-buttons,
	.medieval-entry-links {
		gap: 8px;
		margin-top: 14px;
	}

	.class-preview-panel {
		display: block;
	}

	.gamebutton,
	.slimbutton,
	.textbutton,
	.pixel-btn,
	.medieval-action-btn,
	button {
		min-height: 44px;
		font-size: 15px !important;
	}

	/* Keep game canvas full-screen; only HUD reflows. */
	canvas {
		max-width: 100vw !important;
		max-height: 100dvh !important;
	}

	#topleftcorner {
		top: calc(6px + var(--slime-safe-top)) !important;
		left: calc(6px + var(--slime-safe-left)) !important;
		max-width: calc(100vw - 76px - var(--slime-safe-left) - var(--slime-safe-right)) !important;
		transform-origin: top left;
	}

	#topleftcornerui {
		max-width: 100% !important;
	}

	.pixel-menu-frame {
		top: calc(6px + var(--slime-safe-top)) !important;
		right: calc(6px + var(--slime-safe-right)) !important;
		width: 58px !important;
		max-height: calc(100dvh - 110px) !important;
		overflow-y: auto;
	}

	.pixel-menu-buttons {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 4px !important;
	}

	.pixel-menu-frame .pixel-art-btn {
		width: 50px !important;
		height: 50px !important;
		min-height: 50px !important;
		margin: 0 !important;
	}

	#bottomleftcorner2 {
		left: calc(6px + var(--slime-safe-left)) !important;
		bottom: calc(150px + var(--slime-safe-bottom)) !important;
		width: min(72vw, 360px) !important;
	}

	.medieval-chat,
	.chat-frame {
		width: 100% !important;
		max-height: 28dvh !important;
	}

	#chatlog,
	.chat-box,
	.medieval-chat-messages {
		max-height: 17dvh !important;
		font-size: 14px !important;
	}

	#bottommid {
		position: fixed !important;
		left: calc(6px + var(--slime-safe-left)) !important;
		right: calc(6px + var(--slime-safe-right)) !important;
		bottom: calc(6px + var(--slime-safe-bottom)) !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		z-index: 220 !important;
	}

	.pixel-bottom-frame {
		display: grid !important;
		grid-template-columns: auto minmax(150px, 1fr) !important;
		grid-template-areas:
			"actions stats"
			"skills skills" !important;
		gap: 4px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 5px !important;
		border-width: 2px !important;
		box-shadow:
			0 0 0 2px #4d2e18,
			0 0 0 4px #000 !important;
	}

	.pixel-bottom-frame .medieval-action-btns-row {
		grid-area: actions;
		display: flex !important;
		gap: 3px !important;
		padding: 0 !important;
		margin: 0 !important;
		max-width: 44vw;
		overflow-x: auto;
	}

	.pixel-bottom-frame .medieval-stats-row {
		grid-area: stats;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 2px !important;
		min-width: 0;
		margin: 0 !important;
	}

	.pixel-bottom-frame .pixel-stat-box {
		width: 100% !important;
		min-width: 0 !important;
		padding: 2px 4px !important;
	}

	.pixel-bottom-frame .medieval-buttons-separator {
		display: none !important;
	}

	.medieval-skillbar,
	#medieval-skillbar,
	.medieval-skillbar-row {
		grid-area: skills;
		position: static !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 2px 0 0 !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		overflow-x: auto !important;
	}

	.pixel-skill-btn,
	.medieval-skillbar-row .pixel-art-btn {
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
		min-height: 52px !important;
	}

	.medieval-notifications {
		top: calc(72px + var(--slime-safe-top)) !important;
		left: 50% !important;
		right: auto !important;
		width: calc(100vw - 28px) !important;
		transform: translateX(-50%);
	}

	#codeui {
		position: fixed !important;
		inset: calc(6px + var(--slime-safe-top)) calc(6px + var(--slime-safe-right)) calc(70px + var(--slime-safe-bottom)) calc(6px + var(--slime-safe-left)) !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		z-index: 350 !important;
	}

	#codeui .CodeMirror {
		height: 100% !important;
		font-size: 15px !important;
	}

	#bottomrightcodecorner {
		display: none !important;
	}

	#modal,
	.modal-bg,
	.modal {
		align-items: flex-start !important;
		overflow-y: auto !important;
	}

	#modalbody,
	.modal-content,
	.modal_box,
	.modalbox,
	.imodal,
	.slimefox-auto-panel,
	.slimefox-travel-window,
	.slimefox-achievement-window,
	.slimefox-friends-window,
	.slimefox-party-window,
	.slimefox-stats-window {
		min-width: 0 !important;
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
		max-height: calc(100dvh - 16px - var(--slime-safe-top) - var(--slime-safe-bottom)) !important;
		margin: 0 !important;
		padding: 12px !important;
	}

	.pwa-install-panel {
		top: calc(8px + var(--slime-safe-top));
		grid-template-columns: 44px minmax(0, 1fr) 32px;
		gap: 8px;
		padding: 8px;
	}

	.pwa-install-icon {
		width: 40px;
		height: 40px;
		font-size: 18px;
	}

	.pwa-install-copy strong {
		font-size: 16px;
	}

	.pwa-install-copy span {
		font-size: 13px;
	}

	.pwa-install-action {
		grid-column: 1 / -1;
		width: 100%;
	}

	.pwa-install-close {
		grid-column: 3;
		grid-row: 1;
	}

	.slimefox-auto-number-grid,
	.slimefox-travel-grid,
	.slimefox-achievement-grid,
	.slimefox-stats-grid {
		grid-template-columns: 1fr !important;
	}

	.theinventory,
	.theimventory,
	.inventory-shell {
		max-width: 100% !important;
		overflow-x: auto !important;
	}
}

/* Small phone */
@media (max-width: 420px) {
	.medieval-entry-title,
	.selection-title {
		font-size: 28px !important;
	}

	.medieval-entry-copy,
	.selection-subtitle,
	.creation-help-text,
	.preview-muted {
		font-size: 15px !important;
	}

	#bottomleftcorner2 {
		width: calc(100vw - 80px - var(--slime-safe-left) - var(--slime-safe-right)) !important;
	}

	.pixel-skill-btn,
	.medieval-skillbar-row .pixel-art-btn {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
	}
}

/* Phone landscape: preserve the world view and compact the HUD vertically. */
@media (max-height: 520px) and (orientation: landscape) {
	#topleftcorner {
		transform: scale(0.78);
		transform-origin: top left;
	}

	.pixel-menu-frame {
		transform: scale(0.78);
		transform-origin: top right;
	}

	#bottomleftcorner2 {
		bottom: calc(146px + var(--slime-safe-bottom)) !important;
		width: min(36vw, 280px) !important;
	}

	.medieval-chat,
	.chat-frame {
		max-height: 30dvh !important;
	}

	#bottommid {
		bottom: calc(4px + var(--slime-safe-bottom)) !important;
		left: 25vw !important;
		right: calc(4px + var(--slime-safe-right)) !important;
	}

	.pixel-skill-btn,
	.medieval-skillbar-row .pixel-art-btn {
		width: 46px !important;
		height: 46px !important;
		min-width: 46px !important;
		min-height: 46px !important;
	}

	.pwa-install-panel {
		top: calc(4px + var(--slime-safe-top));
		width: min(680px, calc(100vw - 16px));
		grid-template-columns: 40px minmax(0, 1fr) auto 28px;
		padding: 5px 7px;
	}

	.pwa-install-icon {
		width: 36px;
		height: 36px;
	}

	.pwa-install-action {
		grid-column: auto;
		width: auto;
		min-height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Public game menus and documentation pages */
.page,
.pageinner,
.docs,
.comm,
.payments,
.simplemessage {
	max-width: min(1180px, calc(100vw - 24px)) !important;
	margin-inline: auto !important;
}

table {
	max-width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
}

th,
td {
	border: 1px solid var(--slime-edge);
	background: rgba(28, 20, 42, 0.92);
	padding: 8px;
}

@media (max-width: 700px) {
	.page,
	.pageinner,
	.docs,
	.comm,
	.payments,
	.simplemessage {
		width: calc(100vw - 16px) !important;
		max-width: calc(100vw - 16px) !important;
		padding: 10px !important;
		overflow-wrap: anywhere;
	}

	table {
		display: block;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Final portrait cascade: intentionally last so legacy phone rules cannot
 * restore the former landscape sidebar layout. */
@media (max-width: 700px) and (orientation: portrait) {
	body .pixel-menu-frame {
		position: fixed !important;
		inset: auto calc(6px + var(--slime-safe-right)) calc(6px + var(--slime-safe-bottom)) calc(6px + var(--slime-safe-left)) !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		max-height: 76px !important;
		overflow: hidden !important;
		padding: 4px !important;
		z-index: 420 !important;
	}

	body .pixel-menu-frame .pixel-menu-buttons {
		display: grid !important;
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		gap: 3px !important;
	}

	body .pixel-menu-frame .pixel-art-btn[data-mobile-action] {
		width: 100% !important;
		min-width: 0 !important;
		height: 67px !important;
		min-height: 67px !important;
	}

	body #bottommid {
		left: calc(6px + var(--slime-safe-left)) !important;
		right: calc(6px + var(--slime-safe-right)) !important;
		bottom: calc(83px + var(--slime-safe-bottom)) !important;
		width: auto !important;
	}

	body #bottomleftcorner2 {
		bottom: calc(258px + var(--slime-safe-bottom)) !important;
		width: calc(100vw - 12px - var(--slime-safe-left) - var(--slime-safe-right)) !important;
	}

	body .pwa-install-panel {
		left: calc(8px + var(--slime-safe-left)) !important;
		right: calc(8px + var(--slime-safe-right)) !important;
		top: calc(8px + var(--slime-safe-top)) !important;
		bottom: auto !important;
		transform: none !important;
		width: auto !important;
		grid-template-columns: 44px minmax(0, 1fr) 32px !important;
	}

	body .pwa-install-panel .pwa-install-action {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}
}