.mobile-tabs {
	display: none;
}
@media (max-width: 950px) {
	html,
	body {
		height: 100%;
		min-width: 0;
		overflow: hidden;
		overscroll-behavior: none;
	}
	body {
		height: var(--mobile-height, 100dvh);
	}
	button {
		touch-action: manipulation;
	}
	input,
	select,
	textarea {
		font-size: 16px !important;
	}
	.topbar {
		height: 44px;
		padding: 0 10px;
	}
	.brand h1 {
		font-size: 14px;
	}
	.sigil,
	.edition,
	.portal-link span,
	.connection > span {
		display: none;
	}
	.portal-link {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		font-size: 30px;
	}
	.connection button {
		width: 44px;
		height: 44px;
		margin: 0;
	}
	.embedded .topbar {
		display: none;
	}
	.portal-link:after {
		content: "저장 후 뒤로";
		font-size: 12px;
		white-space: nowrap;
	}
	.brand {
		gap: 0;
	}
	.connection {
		gap: 0;
	}
	.topbar h1 {
		letter-spacing: 0;
		font-size: 13px;
	}
	body .game-shell,
	body .game-shell.classic {
		height: calc(var(--mobile-height, 100dvh) - 44px);
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.embedded .game-shell,
	.embedded .game-shell.classic {
		height: var(--mobile-height, 100dvh);
	}
	body .game-shell .viewport {
		flex: 1;
		min-height: 0;
		height: auto;
		max-height: none;
		aspect-ratio: auto;
		overflow: hidden;
		border: 0;
	}
	.location {
		top: 8px;
		left: 8px;
		max-width: calc(100% - 140px);
		padding: 5px 8px;
		gap: 5px;
		border-radius: 6px;
	}
	.location strong {
		font-size: 12px;
		letter-spacing: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block;
	}
	.location small,
	.location-marker,
	#minimap {
		display: none;
	}
	.world-meta {
		top: 6px;
		right: 8px;
		gap: 3px;
	}
	.world-meta #qualityButton,
	.world-meta #classicButton,
	.world-meta #soundButton {
		display: none;
	}
	.world-meta button {
		min-width: 44px;
		min-height: 44px;
		font-size: 20px;
	}
	.world-meta details summary {
		padding: 10px 3px;
		font-size: 11px;
	}
	.world-meta details ul {
		font-size: 12px;
		max-width: 250px;
	}
	body .game-shell .hud {
		position: static;
		width: 100%;
		height: 98px;
		min-height: 98px;
		aspect-ratio: auto;
		padding: 5px 10px;
		display: grid;
		grid-template-columns: 130px 1fr;
		grid-template-rows: 36px 48px;
		gap: 4px 8px;
		background: #211f1b;
		border: 1px solid #514733;
		z-index: 3;
	}
	body .game-shell .hud .character {
		display: flex;
		grid-column: 1;
		align-items: center;
		justify-content: flex-start;
		min-width: 0;
		text-align: left;
	}
	.character .portrait {
		display: none;
	}
	.character strong {
		font-size: 12px;
		max-width: 125px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.character small {
		font-size: 10px;
		margin-top: 2px;
		gap: 4px;
		justify-content: flex-start;
	}
	.character small #playerClass {
		display: none;
	}
	body .game-shell .hud .vitals {
		display: block;
		grid-column: 2;
		grid-row: 1;
		width: auto;
		margin: 0;
	}
	.vital label {
		font-size: 10px;
	}
	.vital .meter {
		height: 13px;
	}
	.meter output {
		font-size: 10px;
		line-height: 11px;
	}
	.xp {
		height: 3px;
		margin-top: 2px;
	}
	body .game-shell .hud .quickbar {
		position: static;
		display: flex;
		grid-column: 1 / 3;
		grid-row: 2;
		margin: 0;
		width: 100%;
		height: 48px;
		gap: 5px;
		justify-content: stretch;
	}
	.quickbar button {
		width: auto;
		flex: 1;
		min-width: 44px;
		min-height: 44px;
		height: 44px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 7px;
		font-size: 12px;
	}
	.quickbar button span {
		font-size: 22px;
	}
	.quickbar kbd,
	.gold {
		display: none !important;
	}
	.touch-pad {
		display: grid;
		position: absolute;
		left: max(12px, env(safe-area-inset-left));
		bottom: 14px;
		grid-template-columns: repeat(3, 44px);
		grid-template-rows: repeat(3, 44px);
		gap: 4px;
		touch-action: none;
		opacity: 1;
		z-index: 4;
	}
	.touch-pad button {
		min-width: 44px;
		min-height: 44px;
		background: #22281be6;
		border: 1px solid #b4a577aa;
		border-radius: 12px;
		font-size: 18px;
		touch-action: none;
	}
	.touch-pad .up {
		grid-column: 2;
		grid-row: 1;
	}
	.touch-pad .left {
		grid-column: 1;
		grid-row: 2;
	}
	.touch-pad .down {
		grid-column: 2;
		grid-row: 3;
	}
	.touch-pad .right {
		grid-column: 3;
		grid-row: 2;
	}
	.touch-attack {
		display: block;
		position: absolute;
		right: max(16px, env(safe-area-inset-right));
		bottom: 20px;
		width: 68px;
		height: 68px;
		border-radius: 50%;
		font-size: 14px;
		background: #5d4026e8;
		border: 2px solid #d0ac6c;
		z-index: 4;
		touch-action: manipulation;
	}
	.mobile-tabs {
		display: flex;
		flex-shrink: 0;
		height: calc(48px + env(safe-area-inset-bottom));
		min-height: calc(48px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: #171811;
		z-index: 8;
	}
	.mobile-tabs button {
		flex: 1;
		min-height: 44px;
		font-size: 13px;
		border-radius: 0;
	}
	.mobile-tabs button[aria-expanded="true"] {
		background: #655530;
		color: #fff0c2;
	}
	body .game-shell .bottom-panel {
		display: none;
		position: absolute;
		bottom: calc(150px + env(safe-area-inset-bottom));
		left: 8px;
		right: 8px;
		top: auto;
		height: min(340px, calc(100% - 190px));
		aspect-ratio: auto;
		background: #191e15f5;
		z-index: 7;
		border: 1px solid #b19a63;
		border-radius: 9px;
		box-shadow: 0 8px 30px #000a;
		overflow: hidden;
	}
	.mobile-chat-open .game-shell .bottom-panel,
	.mobile-menu-open .game-shell .bottom-panel {
		display: block;
	}
	body .game-shell .bottom-panel .legacy-actions {
		display: none;
	}
	body .game-shell .bottom-panel .chat-panel,
	body .game-shell .bottom-panel .sidebar {
		display: none;
		position: static;
		inset: auto;
		width: 100%;
		height: 100%;
		max-height: none;
		border: 0;
		background: #1a2016;
	}
	.mobile-chat-open .game-shell .bottom-panel .chat-panel,
	.mobile-menu-open .game-shell .bottom-panel .sidebar {
		display: flex;
		flex-direction: column;
	}
	body .game-shell .chat-header {
		display: flex;
		min-height: 40px;
		padding: 0 10px;
		font-size: 12px;
	}
	.chat-header span {
		display: none;
	}
	.chat-header button {
		min-height: 44px;
		min-width: 44px;
		font-size: 12px;
	}
	.chat-log {
		height: auto;
		min-height: 0;
		flex: 1;
		padding: 8px 10px;
	}
	body .game-shell .chat-log li {
		font-size: 13px;
		line-height: 1.6;
	}
	body .game-shell .chat-input {
		display: flex;
		padding: 3px;
		gap: 4px;
		min-height: 48px;
	}
	.chat-input label {
		display: none;
	}
	body .game-shell .chat-input input {
		height: 44px;
		padding: 6px;
		min-width: 0;
		font-size: 16px;
	}
	body .game-shell .chat-input button {
		min-width: 58px;
		min-height: 44px;
		font-size: 12px;
	}
	.panel-tabs {
		min-height: 44px;
	}
	.panel-tabs button {
		min-height: 44px;
		font-size: 12px;
	}
	.panel-body {
		height: auto;
		min-height: 0;
		flex: 1;
		overflow: auto;
		font-size: 13px;
	}
	.panel-body button,
	.item-slot {
		min-height: 44px;
	}
	.leave-button {
		min-height: 44px;
		font-size: 12px;
	}
	.inventory-grid {
		grid-template-columns: repeat(6, 1fr);
	}
	.entry-overlay {
		padding: 8px;
		overflow: auto;
		align-items: flex-start;
	}
	.entry-card {
		width: 100%;
		max-width: 380px;
		max-height: 100%;
		margin: auto;
		padding: 16px;
		overflow: auto;
	}
	.entry-crest,
	.entry-card > .eyebrow {
		display: none;
	}
	.entry-card h2 {
		font-size: 22px;
		margin: 5px 0;
	}
	.entry-description,
	.entry-note {
		font-size: 12px;
	}
	.entry-card input,
	.entry-card button {
		min-height: 44px;
	}
	.development-note {
		font-size: 12px;
	}
	footer {
		display: none;
	}
	dialog {
		width: calc(100% - 20px);
		max-width: 540px;
		max-height: calc(var(--mobile-height, 100dvh) - 20px);
		margin: auto;
		overflow: auto;
	}
	dialog button {
		min-width: 44px;
		min-height: 44px;
	}
	.toast {
		top: 65px;
		max-width: 90%;
		font-size: 13px;
	}
}
@media (max-width: 950px) and (orientation: landscape) {
	body .game-shell .hud {
		height: 52px;
		min-height: 52px;
		grid-template-columns: 120px 160px 1fr;
		grid-template-rows: 40px;
		padding: 4px 10px;
		gap: 8px;
	}
	body .game-shell .hud .vitals {
		grid-column: 2;
		grid-row: 1;
	}
	body .game-shell .hud .quickbar {
		grid-column: 3;
		grid-row: 1;
		height: 44px;
	}
	.quickbar button {
		font-size: 11px;
	}
	.mobile-tabs {
		height: calc(44px + env(safe-area-inset-bottom));
		min-height: calc(44px + env(safe-area-inset-bottom));
	}
	.touch-pad {
		bottom: 10px;
	}
	.touch-attack {
		bottom: 14px;
	}
	body .game-shell .bottom-panel {
		bottom: calc(100px + env(safe-area-inset-bottom));
		height: calc(100% - 115px - env(safe-area-inset-bottom));
	}
	.entry-card {
		max-width: 460px;
		padding: 10px 16px;
	}
	.entry-description,
	.entry-note,
	.development-note {
		display: none;
	}
	.entry-card h2 {
		font-size: 19px;
	}
	.entry-card label {
		font-size: 12px;
	}
	.entry-card input {
		margin: 3px 0;
	}
}
/* v0.2 controls and original inventory remain reachable under the portal mobile shell. */
#displayControls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	padding: 12px 0;
}
#displayControls button,
#displayControls select {
	min-height: 44px;
	font-size: 16px;
}
#displayControls .zoom-control {
	font-size: 16px;
	display: flex;
	gap: 8px;
	align-items: center;
}
@media (max-width: 950px) {
	body .game-shell .viewport {
		min-height: 0;
	}
	.world-meta .zoom-control,
	.world-meta #musicSelect {
		display: none;
	}
	.panel-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		flex-shrink: 0;
		white-space: nowrap;
	}
	.panel-tabs button {
		flex: 0 0 auto;
		min-width: 56px;
	}
	body .game-shell .panel-body {
		min-height: 0;
	}
	.connection {
		flex-shrink: 0;
	}
	.brand {
		min-width: 0;
	}
	.brand h1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.connection #fullscreenButton {
		width: 44px;
		min-width: 44px;
	}
}

@media (min-width: 951px) {
	.game-shell.classic {
		width: var(--classic-fit-width, 640px);
		margin-left: auto;
		margin-right: auto;
	}
}