/* The browser owns the stage and its helpers. Game panels remain canvas-owned. */
#game-stage { display: contents; }
#layout-button { flex: 0 0 auto; }

body.layout-custom #game-stage,
body.layout-fitted #game-stage {
	display: grid;
	position: fixed;
	left: 0;
	top: 0;
	place-items: center;
	background: #050505;
	isolation: isolate;
}
html.desktop body.layout-custom #game-stage canvas,
html.tablet body.layout-custom #game-stage canvas,
html.desktop body.layout-fitted #game-stage canvas,
html.tablet body.layout-fitted #game-stage canvas {
	width: min(100%, calc(var(--stage-height) * var(--game-aspect-ratio)));
	height: auto;
	max-width: 100%;
	max-height: 100%;
	aspect-ratio: var(--game-aspect);
}
body.layout-editing #game-stage {
	outline: 1px solid #b4a17b;
	box-shadow: 0 12px 56px #0009;
}
#stage-edit-bar, #stage-resize-handle { display: none; }
body.layout-editing #stage-edit-bar {
	display: flex;
	position: absolute;
	bottom: calc(100% + 5px);
	left: 0;
	right: 0;
	align-items: center;
	gap: 8px;
	height: 32px;
	font: 12px/1.2 system-ui, sans-serif;
	color: #eadfbd;
}
#stage-move-handle {
	flex: 1;
	min-width: 0;
	height: 32px;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 11px;
	border: 1px solid #615642;
	border-radius: 6px;
	background: #16141beF;
	color: inherit;
	font: inherit;
	cursor: grab;
	touch-action: none;
}
#stage-move-handle:active { cursor: grabbing; }
#stage-move-handle svg { width: 14px; height: 14px; color: #b6a98b; }
#stage-size-label { margin-left: auto; color: #a59eaf; font-variant-numeric: tabular-nums; }
#stage-edit-done {
	height: 32px;
	padding: 0 15px;
	border: 1px solid #c0aa77;
	border-radius: 6px;
	background: #d0bc8a;
	color: #19171e;
	font: 600 12px/1 system-ui, sans-serif;
	cursor: pointer;
}
body.layout-editing #stage-resize-handle {
	display: grid;
	place-items: center;
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 34px;
	height: 34px;
	border: 1px solid #a4926c;
	border-radius: 6px 0 0 0;
	background: #18151feF;
	color: #dac799;
	cursor: nwse-resize;
	touch-action: none;
}
#stage-resize-handle svg { width: 16px; height: 16px; }
#stage-move-handle:focus-visible, #stage-resize-handle:focus-visible,
#stage-edit-done:focus-visible, #phone-layout-button:focus-visible,
#web-layout-dialog button:focus-visible, #web-layout-dialog select:focus-visible {
	outline: 2px solid #e7d2a0;
	outline-offset: 3px;
}

#web-layout-dialog {
	width: 380px;
	max-width: calc(100vw - 32px);
	max-height: calc(100dvh - 32px);
	box-sizing: border-box;
	margin: auto;
	padding: 0;
	border: 1px solid #514451;
	border-radius: 14px;
	background: linear-gradient(155deg, #211c28, #14131a 55%);
	color: #ede6d8;
	box-shadow: 0 24px 90px #000a, inset 0 1px #ffffff09;
	font: 14px/1.45 system-ui, -apple-system, sans-serif;
	text-align: left;
	overflow: auto;
	overscroll-behavior: contain;
	touch-action: pan-y;
}
#web-layout-dialog::backdrop { background: #06050bb8; }
#web-layout-dialog[open] { display: block; }
#web-layout-dialog header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 22px 22px 18px;
	border-bottom: 1px solid #ffffff0e;
}
#web-layout-title { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
#web-layout-dialog header p { margin: 3px 0 0; color: #b6adbe; font-size: 12px; }
#web-layout-close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: -4px -7px 0 8px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #c8bdcd;
	font: 24px/1 system-ui, sans-serif;
	cursor: pointer;
}
#web-layout-dialog .layout-content { padding: 20px 22px; }
#web-layout-dialog fieldset { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
#web-layout-dialog legend, #web-layout-dialog .layout-label {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	color: #d9d1de;
	font-size: 12px;
	font-weight: 600;
}
#web-layout-dialog .layout-choices { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: #08080b91; }
#web-layout-dialog .layout-choices button {
	flex: 1;
	min-width: 0;
	min-height: 38px;
	padding: 7px 8px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: transparent;
	color: #a99fb3;
	font: 500 13px/1.2 system-ui, sans-serif;
	cursor: pointer;
}
#web-layout-dialog .layout-choices button[aria-pressed="true"] {
	border-color: #625342;
	background: #35302e;
	color: #f1dfb7;
}
#web-layout-dialog .layout-note { margin: 9px 0 0; color: #a59aaa; font-size: 12px; line-height: 1.5; }
#layout-stage-actions { display: flex; gap: 9px; }
#web-layout-dialog .layout-action {
	min-height: 42px;
	padding: 9px 13px;
	border: 1px solid #5b4f62;
	border-radius: 7px;
	background: #2b2433;
	color: #e3d5e9;
	font: 600 13px/1.2 system-ui, sans-serif;
	cursor: pointer;
}
#web-layout-edit { flex: 1; }
#web-layout-dialog button:hover { filter: brightness(1.15); }
#web-layout-dialog footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px;
	border-top: 1px solid #ffffff0e;
}
#web-layout-reset { border: 0; background: transparent; padding: 8px 0; color: #b9adbf; font: inherit; font-size: 12px; cursor: pointer; }
#web-layout-dialog #web-layout-done { background: #d0bc8a; border-color: #d0bc8a; color: #211b1b; min-width: 74px; }
#layout-storage-note { margin: 0; padding: 0 22px 14px; color: #c5aa7d; font-size: 12px; }
.layout-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#web-layout-dialog [hidden], #layout-storage-note[hidden] { display: none; }
html.touch #web-layout-dialog .layout-choices button,
html.touch #web-layout-dialog .layout-action,
html.touch #web-layout-reset { min-height: 44px; }
html.touch #web-layout-close { width: 44px; height: 44px; margin-top: -10px; }

#phone-layout-button { display: none; }
html.touch body.game-drawn.in-game #phone-layout-button {
	display: grid;
	place-items: center;
	position: fixed;
	z-index: 8;
	top: calc(50% + 102px);
	right: calc(env(safe-area-inset-right) + 10px);
	width: 44px;
	height: 44px;
	border: 1px solid #79658b99;
	border-radius: 7px;
	background: #100e18bb;
	color: #d1c1d6;
	opacity: .72;
	touch-action: manipulation;
}
#phone-layout-button svg { width: 20px; height: 20px; pointer-events: none; }
/* Inventory also has a 44px ID rule in the base shell; match that ID when sizing it. */
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #inventory-button,
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #keyboard-button,
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large .mobile-quick-button,
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #phone-layout-button { width: 54px; height: 54px; }
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #inventory-button { top: calc(50% - 108px); }
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #keyboard-button { top: calc(50% - 50px); }
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #magic-button { top: calc(50% + 8px); }
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #prayer-button { top: calc(50% + 66px); }
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #phone-layout-button { top: calc(50% + 124px); }
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-left #keyboard-button,
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-left .mobile-quick-button,
html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-left #phone-layout-button {
	right: auto;
	left: var(--layout-helper-left, calc(env(safe-area-inset-left) + 10px));
}
html.touch body.game-drawn.in-game.world-map-open #phone-layout-button,
html.touch body.game-drawn.in-game.keyboard-open #phone-layout-button,
html.touch body.game-drawn.in-game.dialog-open #phone-layout-button,
html.touch body.layout-dialog-open #phone-layout-button { display: none; }
/* Modal and keyboard placement deliberately keep the established shell geometry. */
/* Match the shell's compact landscape breakpoint: taller phone layouts retain their rail. */
@media (orientation: landscape) and (max-height: 480px) {
	html.touch body.game-drawn.in-game #phone-layout-button,
	html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #phone-layout-button { top: calc(50% + 6px); }
	html.touch body.game-drawn.in-game:not(.dialog-open):not(.keyboard-open).layout-helpers-large #keyboard-button { top: calc(50% - 54px); }
}
@media (max-width: 360px) {
	#web-layout-dialog header { padding: 18px 18px 14px; }
	#web-layout-dialog .layout-content { padding: 16px 18px; }
	#web-layout-dialog footer { padding: 12px 18px; }
}
html:fullscreen #stage-edit-bar, html:fullscreen #stage-resize-handle,
html:-webkit-full-screen #stage-edit-bar, html:-webkit-full-screen #stage-resize-handle { display: none; }
html.tablet:fullscreen #play-shell,
html.tablet:-webkit-full-screen #play-shell { display: none; }
html.tablet:fullscreen main,
html.tablet:-webkit-full-screen main { padding: 0; place-items: center; }