/*
 * Game page - responsive layouts (replaces the old PHP-detected mobile page).
 *
 * The page has a single markup (the desktop one). These media queries reflow it, the same way the
 * deck editor does, so a phone and a narrow desktop window get the same layout:
 *
 *   default                                   desktop: card column left, field with side columns right
 *   (max-width: 800px) and portrait           stacked: opponent bar, field, phases/player bar, card column
 *   landscape and (max-height: 500px)         compact desktop layout for phones held sideways
 *
 * The custom properties on :root tell Game.updateSizes (script/game/responsive.js) how much space the
 * field has in each layout. Values are unitless pixels / zone widths.
 */

#game-fullscreen-button,
#game-room-fullscreen-button,
#game-button-options-mobile,
#game-portrait-top-bar {
	display: none;
}

/* Siding (script/game/siding.js), all sizes: the card a finger drags, and Reset / Undo / Redo (the editor's
   undo / redo buttons) on the right of the Main title bar. */
.game-siding-touch-selection {
	z-index: 10000;
	pointer-events: none;
}

#siding-deck-main-title {
	position: relative;
}

#game-siding-history-buttons {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	display: flex;
	gap: 4px;
	line-height: normal;
}

#game-siding-history-buttons .engine-button {
	width: auto;
	min-width: 65px;
	margin: 0;
	white-space: nowrap;
}

/* Reset keeps the editor's dark red undo / redo look (engine-button-undo-redo); Undo and Redo are the game's dark
   buttons. */
#game-siding-history-buttons #game-siding-undo-button,
#game-siding-history-buttons #game-siding-redo-button {
	background-color: #111925;
	border: 1px solid #777777;
}

#game-siding-history-buttons #game-siding-undo-button:hover,
#game-siding-history-buttons #game-siding-redo-button:hover {
	background-color: rgba(64, 64, 64, 0.8);
}

#game-siding-history-buttons #game-siding-undo-button:disabled,
#game-siding-history-buttons #game-siding-redo-button:disabled {
	background-color: #111925;
	opacity: 0.5;
}

/* The lobby's player colours in the duel (script/game/turn-colours.js), all sizes: blue for the host's side, red
   for the other, on the player names, and on the turn counter's frame and background for whose turn it is.
   Over the portrait / landscape turn display rules (#game-field #game-turn-display). */
#game-player-name.game-side-blue,
#game-opponent-name.game-side-blue {
	color: #11acdf;
}

#game-player-name.game-side-red,
#game-opponent-name.game-side-red {
	color: #E31212;
}

#game-field #game-turn-display.game-turn-blue,
#game-turn-display-mobile.game-turn-blue {
	border-color: #11acdf;
	background-color: rgba(17, 172, 223, 0.3);
}

#game-field #game-turn-display.game-turn-red,
#game-turn-display-mobile.game-turn-red {
	border-color: #E31212;
	background-color: rgba(227, 18, 18, 0.3);
}

/* Close (X) buttons of the windows that show several cards (responsive.js), all sizes; only there when closing
   commits nothing. The card list scrolls, so its X sits in a strip that stays at the top of the window. */
.game-window-close-bar {
	display: none;
}

.game-window-closable > .game-window-close-bar {
	display: flex;
	justify-content: flex-end;
	pointer-events: none;
}

#game-selection-window > .game-window-close-bar {
	position: sticky;
	top: 0;
	z-index: 3;
	height: 40px;
}

#game-announce-card-window > .game-window-close-bar {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
}

.engine-button.game-window-close-button,
.engine-button.game-window-close-button:active {
	width: 34px;
	height: 34px;
	min-height: 0;
	margin: 4px 4px 0 0;
	padding: 0;
	border-radius: 8px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}

/* =====================================================================================================
 * Both phone layouts (portrait and landscape)
 * ===================================================================================================== */
@media (max-width: 800px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
	/* The page scrolls like a normal page (the lobby can be taller than the screen); on desktop the body
	   is a fixed, non-scrolling box. */
	html {
		overflow-x: hidden;
		overflow-y: auto;
	}

	body {
		height: auto;
		/* the visible height: on phones 100vh is the height with the address bar hidden, taller than the screen
		   while the bar shows, which made every page scroll a little */
		min-height: 100vh;
		min-height: 100dvh;
		overflow: visible;
	}

	/* Fullscreen button in the lobby as well */
	#game-room-container {
		position: relative;
	}

	#game-room-fullscreen-button {
		display: block;
		position: absolute;
		top: 4px;
		right: 4px;
		z-index: 2;
		width: 40px;
		min-height: 36px;
		padding: 0;
		font-size: 16px;
		border-radius: 8px;
	}

	/* Phase / turn messages ("End Phase") and life point changes: sized for a phone, and a soft shadow
	   instead of the desktop's outline + offset shadow, which looks jagged at this size. */
	#game-next-turn-text {
		font-size: 2.4em;
		-webkit-text-stroke-width: 0;
		text-shadow: 0 0 4px #000000, 0 0 10px #000000, 2px 2px 0 #000000;
	}

	#game-life-change-text {
		font-size: 2.2em;
		text-shadow: 0 0 4px #000000, 0 0 10px #000000;
	}

	/* ATK/DEF and level labels on the field: sized from the zone (--game-zone-width, set by responsive.js) and
	   centred on it even when wider than it (flex centring overflows on both sides; centred text would only
	   spill to the right and cover the next card's label). */
	.game-field-stats-text-3d,
	.game-field-stats-text {
		display: flex;
		justify-content: center;
		white-space: nowrap;
		font-size: max(9px, calc(var(--game-zone-width, 50px) * 0.19));
	}

	/* The 3D labels (pile counts, ATK/DEF) are added at the end of the page and only placed over their zone at the
	   next resize (Game.updateCardTextElementSizes sets their position inline). Here the page scrolls, so in
	   between they showed at its bottom, between the chat and phase buttons, as the duel started: until placed,
	   they take no room and stay hidden. */
	.game-field-stats-text-3d:not([style*="position"]) {
		position: absolute;
		visibility: hidden !important;
	}

	/* Options: the volume / speed sliders fit the card column (label | slider | value). */
	#game-settings-container table.game-option {
		width: 100%;
		table-layout: fixed;
		box-sizing: border-box;
	}

	#game-settings-container table.game-option td:first-child {
		width: 38%;
	}

	#game-settings-container table.game-option td:last-child {
		width: 3.2em;
		text-align: right;
	}

	#game-settings-container table.game-option input[type="range"] {
		width: 100%;
		min-width: 0;
		margin: 0;
		box-sizing: border-box;
	}

	/* The life / timer bars are thinner here; their coloured part follows the bar's height. */
	.game-life-bar-part,
	.game-timer-bar-part {
		height: 100%;
	}

	/* --- Cards in the pop-up windows (select cards, view graveyard / banished / extra deck, select position):
	       the script sizes them like a card on the field, which is tiny on a phone. About twice that. --- */
	:root {
		--game-popup-card-width: clamp(56px, calc(var(--game-zone-width, 50px) * 1.3), 84px);
		/* the position window holds 4 (two of them turned sideways): it must fit the screen's width */
		--game-position-card-width: min(var(--game-popup-card-width), calc((100vw - 56px) / 5.9));
	}

	.game-selection-card-image,
	.game-display-card-image,
	.game-selection-manual-target {
		width: var(--game-popup-card-width) !important;
	}

	#game-selection-list,
	#game-display-list {
		margin: 10px 6px;
	}

	.game-selection-card {
		margin: 0 2px 6px;
	}

	.game-selection-card-text,
	.game-display-card-text {
		margin: 2px 0 0;
		font-size: 12px;
		line-height: 1.2;
	}

	/* Six tabs on a narrow window: smaller text that wraps between words ("Opponent / Graveyard"). */
	.game-selection-window-button {
		min-width: 0;
		padding: 6px 2px;
		font-size: 11px;
		line-height: 1.2;
		justify-content: center;
		overflow-wrap: anywhere;
	}

	#game-position-atk-up,
	#game-position-atk-down,
	#game-position-def-up,
	#game-position-def-down {
		width: var(--game-position-card-width) !important;
		height: calc(var(--game-position-card-width) * 1.4584) !important; /* card proportions, 614 / 421 */
	}

	/* the space a sideways (defence) card needs, as the script does: height - width + 3 */
	#game-position-atk-up,
	#game-position-atk-down,
	#game-position-def-up {
		margin-right: calc(var(--game-position-card-width) * 0.4584 + 3px) !important;
	}

	/* Go first / go second (lobby, after rock-paper-scissors) and the RPS result: the images are 200px squares
	   that show at full size on desktop, wider than a phone's deck panel. Sized like the RPS choices, a bit larger. */
	#game-rps-first,
	#game-rps-second,
	#game-rps-result img {
		width: 40%;
		max-width: 110px;
		height: auto;
	}

	/* The emote picker opens upwards from the chat box. All 95 emotes are taller than a phone held sideways, so the
	   list stops short of the screen's top and scrolls. */
	#game-chat-emotes-container {
		max-height: calc(100vh - 90px - var(--game-lobby-ad-height, 0px));
		max-height: calc(100dvh - 90px - var(--game-lobby-ad-height, 0px)); /* the lobby's chat sits above its ad */
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* The playmat behind the zones. On desktop its layer, halves and pictures are sized in percentages of a field
	   with a set height; here the field sizes to its zones, and Safari (every iPhone browser) did not resolve those
	   percentages: each picture took its own proportions instead, taller than its half, and the opponent's half,
	   turned upside down, spilled up over the players' stats and the top bar, the player's down past the hand.
	   Sized from the edges instead (no percentage heights), and clipped to the zones. */
	#game-field-background-div {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: auto;
		overflow: hidden;
	}

	#game-field-background-image-opponent,
	#game-field-background-image-player {
		position: absolute;
		left: 0;
		right: 0;
		width: auto;
		height: auto;
	}

	#game-field-background-image-opponent {
		top: 0;
		bottom: 50%;
	}

	#game-field-background-image-player {
		top: 50%;
		bottom: 0;
	}

	.game-field-background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}

	/* The duel's end banner (Victory / Defeat / Draw) has a fixed height on desktop, so the wide ones ran off the
	   screen's edge: no wider than the window here, scaled down with its proportions kept. */
	#duel-completed-message .game-end-picture {
		max-width: 100%;
		height: auto;
		max-height: min(125px, 25vh);
		object-fit: contain;
	}
}

/* =====================================================================================================
 * Duel loading screen (all sizes): light polish, same content
 * ===================================================================================================== */
#game-loading-text,
#game-error-text {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	border: 1px solid #555555;
	border-radius: 9px;
	background: linear-gradient(rgba(18, 23, 36, 0.85) 0%, rgba(1, 1, 17, 0.85) 100%);
}

#enter-duel-button {
	border-radius: 9px;
}

#duel-log-in-button {
	border: 1px solid #6d1cb4;
	border-radius: 9px;
	font-weight: bold;
	letter-spacing: 1px;
	transition: background-color 0.2s, box-shadow 0.2s;
}

#duel-log-in-button:hover {
	background-color: #1b2540;
	box-shadow: 0 0 12px rgba(109, 28, 180, 0.6);
}

/* The portrait layout's chat and phase buttons at the bottom of the screen (responsive.js); not used at other
   sizes. */
#game-portrait-controls {
	display: none;
}

#game-loading-screen {
	box-sizing: border-box;
	padding: 12px 18px !important;
	line-height: 1.55;
}

#game-loading-screen h1 {
	padding-bottom: 10px;
	border-bottom: 1px solid #555555;
}

/* =====================================================================================================
 * Stacked layout: phones and narrow windows in portrait
 * ===================================================================================================== */
@media (max-width: 800px) and (orientation: portrait) {
	:root {
		--game-stacked: 1;
		--game-side-columns: 0;
		--game-stacked-gutter: 22;
		--game-stacked-reserved-height: 238; /* top bar, stats, the button row and the chat / phase buttons at the bottom */
		--game-stacked-3d-width-factor: 0.84;
		/* 3D hand card size, relative to a zone card (1.5 on desktop). The hand keeps its bottom edge (so the
		   buttons below stay put) and the larger cards reach up to just under the deck / extra deck corners. */
		--game-3d-hand-scale: 2.1;
		/* ...and are never spaced wider than the screen: they overlap instead (responsive.js) */
		--game-hand-limit: window;
	}

	body {
		width: 100%;
	}

	#game-container {
		height: auto;
	}

	/* The phase message slides to 62.5% across (the field's centre on desktop, next to the card column);
	   here the field spans the whole width, so shift it to the middle of the screen. */
	#game-next-turn {
		margin-left: -12.5vw;
	}

	#game-column {
		float: none;
		width: 100%;
		margin-top: 0;
		padding-top: 4px;
		padding-left: 0;
	}

	/* --- Card column: hidden during the duel, opened full-screen from the Menu button or "View" in the
	       action menu, closed with its Back button (Game.showCardColumn / Game.showDuelColumn) --- */
	#card-column {
		display: none;
		float: none;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		border-right: none;
	}

	body.game-card-column-open #card-column {
		display: flex;
	}

	body.game-card-column-open #game-column,
	body.game-card-column-open .game-field-hologram-container,
	body.game-card-column-open .game-field-stats-text-3d {
		display: none !important;
	}

	body.game-card-column-open #game-mobile-card-container {
		display: block;
	}

	.game-button-mobile-back-to-duel {
		height: 56px;
		font-size: 18px;
	}

	/* During the duel the chat lives in the card column and does not float over the field. In the lobby
	   (#game-container still hidden) it floats at the bottom, full width. */
	#game-container:not([style*="display: none"]) ~ #game-chat-area.game-chat-external {
		display: none !important;
	}

	#game-chat-area.game-chat-external {
		left: 0.5%;
		width: 99%;
	}

	#game-button-options-mobile {
		display: block;
	}

	#game-siding-column {
		width: 100% !important;
		float: none;
	}

	/* --- Field row: flatten the two side columns into a grid around the field --- */
	#game-field {
		width: 100% !important;
		height: auto !important;
	}

	#game-field > tbody {
		display: block;
	}

	/* Rows: player stats | turn | opponent stats, the field, the phase buttons, then one row with the other
	   buttons (only the visible ones take space). The turn display is placed in the top row's gap below. */
	#game-field > tbody > tr {
		--game-bar-turn-gap: 72px;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 6px 4px;
		padding: 0 6px;
		box-sizing: border-box;
	}

	#game-field > tbody > tr > td.empty-game-field-zone-full,
	#game-field > tbody > tr > td.empty-game-field-zone-full > table,
	#game-field > tbody > tr > td.empty-game-field-zone-full > table > tbody,
	#game-field > tbody > tr > td.empty-game-field-zone-full > table > tbody > tr {
		display: contents;
	}

	#game-field > tbody > tr > td.empty-game-field-zone-full > table > tbody > tr > td {
		display: block;
		padding: 0;
	}

	#game-field > tbody > tr > td:nth-child(2) {
		order: 3;
		display: block;
		flex: 0 1 auto;
		min-width: 0;
		margin: 0 auto;
		padding: 0;
	}

	/* On desktop the field takes its height from #game-field (set by Game.updateSizes). In the grid it
	   sizes itself: the zones block goes back into the normal flow and the playmat stays behind it. */
	#game-field-front-div {
		position: relative;
	}

	/* 3D mode moves the hands into a div under the field and places them with offsets made for the desktop
	   field height. In the stacked layout they are pinned to the field cell instead: the opponent's hand in
	   the space the tilt leaves above the board, the player's hand at the bottom. */
	#game-field > tbody > tr > td:nth-child(2) {
		position: relative;
	}

	#game-field > tbody > tr > td:nth-child(2):has(> div .game-field-hand) {
		padding-bottom: 8%;
	}

	/* As tall as its cards (the script sizes the box for desktop cards), so they grow upwards. */
	#game-field > tbody > tr > td:nth-child(2) > div #game-field-player-hand {
		left: 50%;
		top: auto;
		bottom: 0;
		width: max-content !important;
		height: auto !important;
		transform: translateX(-50%) !important;
	}

	#game-field > tbody > tr > td:nth-child(2) > div #game-field-opponent-hand {
		left: 50%;
		top: 0;
		transform: translateX(-50%) scale(0.8) !important;
		transform-origin: 50% 0;
	}

	/* Top row: each player's stats take half, minus room for the turn display in the middle. */
	#game-field > tbody > tr > td:first-child > table > tbody > tr:nth-child(1) > td {
		order: 1;
		flex: 1 1 calc(50% - var(--game-bar-turn-gap) / 2 - 2px);
		min-width: 0;
		margin-right: calc(var(--game-bar-turn-gap) / 2);
	}

	#game-field > tbody > tr > td:last-child > table > tbody > tr:nth-child(1) > td {
		order: 2;
		flex: 1 1 calc(50% - var(--game-bar-turn-gap) / 2 - 2px);
		min-width: 0;
		margin-left: calc(var(--game-bar-turn-gap) / 2);
	}

	#game-field > tbody > tr > td:first-child > table > tbody > tr:nth-child(2) > td {
		order: 4;
		flex: 0 0 100%;
	}

	/* The button cells disappear so their buttons line up in the bottom row. */
	#game-field > tbody > tr > td:last-child > table > tbody > tr:nth-child(n+2) > td {
		display: contents;
	}

	/* --- Player / opponent stats, avatars on the outer edges (opponent mirrored) --- */
	#game-field .game-avatar-area {
		float: none;
		width: auto;
		min-height: 48px;
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 8px;
		align-items: center;
		text-align: left;
		font-size: 12px;
		line-height: 1.25;
	}

	#game-field .game-avatar-area > .game-avatar {
		grid-row: 1 / span 5;
		width: 40px;
	}

	#game-field .game-avatar-area.game-avatar-right {
		grid-template-columns: minmax(0, 1fr) 40px;
		text-align: right;
	}

	#game-field .game-avatar-area.game-avatar-right > * {
		grid-column: 1;
	}

	#game-field .game-avatar-area.game-avatar-right > .game-avatar {
		grid-column: 2;
	}

	#game-field .game-avatar-area .game-life-bar {
		margin-top: 2px;
		height: 6px;
	}

	/* --- Turn display between the two players' stats --- */
	#game-field #game-turn-display {
		position: absolute;
		top: 4px;
		left: 50%;
		transform: translateX(-50%);
		width: calc(var(--game-bar-turn-gap) - 8px);
		min-width: 0;
		height: 40px;
		min-height: 0;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		line-height: 1.15;
		/* "Turn" and the number on two lines (a phone's notch can hide the middle of one long line) */
		word-spacing: 100vw;
		border-radius: 8px;
		border-color: #777777;
	}

	/* --- Phase buttons in one row (3D mode moves this cell with an inline transform on desktop) --- */
	#game-field #game-phases {
		display: flex;
		gap: 4px;
		transform: none !important;
	}

	/* --- Phase and action buttons: same height, rounded, evenly spaced. The colours stay the game's own
	       (current phase, available phase, disabled). 3D mode pins some of them to a screen corner on
	       desktop, so position/width are forced back into the row. --- */
	#game-field #game-phases .game-phase-button,
	#game-field > tbody > tr > td:last-child button {
		order: 5;
		flex: 1 1 0;
		position: static !important;
		width: auto !important;
		min-width: 0;
		height: 40px;
		min-height: 40px;
		margin: 0;
		padding: 0 4px;
		box-sizing: border-box;
		border-radius: 8px;
		font-size: 14px;
		line-height: 1.1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* The desktop stacks these buttons and drops their bottom border; in a row they need it back. */
	#game-column #game-phases .game-phase-button:not(:last-child) {
		border-bottom: 1px solid #777777;
	}

	/* --- Fullscreen button: a square next to Menu --- */
	#game-field > tbody > tr > td:last-child #game-fullscreen-button {
		display: block;
		flex: 0 0 44px;
		padding: 0;
		font-size: 16px;
	}

	/* --- Card column tabs in one row --- */
	.game-card-tab {
		display: flex;
	}

	.game-card-tab-button {
		float: none;
		flex: 1 1 0;
		width: auto;
		height: 44px;
		padding: 4px 2px;
		font-size: 13px;
	}

	/* --- Action menu: opens at the card (Game.showActionMenuNextToMouse keeps it on screen) and shows the
	       card's details (like the old mobile mode); sized for a phone screen --- */
	#game-action-menu-card-info {
		min-width: 0;
		width: min(280px, calc(100vw - 16px));
		max-width: none;
		max-height: 40vh;
		overflow-y: auto;
		font-size: 13px;
		box-sizing: border-box;
	}

	/* Opened upwards (no room below the finger, responsive.js): the card's details on top, the buttons nearest
	   the finger. */
	#game-action-menu.game-action-menu-flipped #game-action-menu-card-info {
		order: -1;
	}

	/* The page scrolls when the screen is too short for the duel. Phones only show a thin bar while scrolling;
	   desktop browsers' device simulators drew a full scrollbar beside the field, so it is hidden (scrolling
	   still works). */
	html {
		scrollbar-width: none;
	}

	html::-webkit-scrollbar {
		display: none;
	}

	/* --- Dialog windows: on desktop they sit right of the card column (left: 25%) --- */
	#game-selection-window,
	#game-yesno-window,
	#game-hint-window,
	#game-position-window,
	#game-option-window,
	#game-announce-window,
	#game-announce-card-window,
	#game-rps-window,
	#game-waiting-window,
	#game-message-window,
	#game-opponent-disconnected-window {
		left: 0;
		max-width: calc(100% - 8px);
		box-sizing: border-box;
	}

	#game-selection-window {
		min-width: 0;
		width: calc(100% - 8px);
	}

	#game-end-window,
	#duel-completed-message {
		box-sizing: border-box;
	}

	/* --- Room (before the duel): the desktop arrangement, scaled down. Logo | room info on top; player 1 |
	       Ready/Start | player 2 (two per side in tag duels); the two deck panels with the divider below. --- */
	#game-room-container {
		min-width: 0;
		box-sizing: border-box;
		margin-top: 8px;
		padding: 4px;
	}

	#game-room-container-top,
	#duel-lobby-ad {
		min-width: 0;
	}

	#duel-lobby-ad,
	#game-loading-screen {
		max-width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	#game-room-container-top {
		align-items: center;
	}

	#dueling-nexus-logo {
		width: 38%;
		margin: 0 4% 0 2%;
	}

	#game-room-information {
		flex: 1 1 0;
		min-width: 0;
		padding: 4px 44px 4px 4px; /* room for the fullscreen button on the right */
		font-size: 12px;
	}

	#game-room-info-mode {
		font-size: 15px;
	}

	#game-room-information-table tr {
		height: 18px;
	}

	#game-room-players {
		box-sizing: border-box;
		padding: 6px 4px;
	}

	#game-room-player1-username,
	#game-room-player2-username,
	#game-room-player3-username,
	#game-room-player4-username {
		font-size: 14px;
	}

	#game-room-player1-title,
	#game-room-player2-title,
	#game-room-player3-title,
	#game-room-player4-title {
		font-size: 11px;
	}

	#game-room-players .game-room-player-container p {
		font-size: 11px !important;
	}

	#game-room-players .game-room-player-container img[id$="-ranked-icon"] {
		height: 18px;
	}

	#game-room-players .game-room-player-container .game-to-spectator-button,
	#game-room-players .game-room-player-container .game-room-player-kick-button {
		width: 22px !important;
		height: 22px !important;
		min-height: 0;
		padding: 0;
		font-size: 11px;
	}

	#game-room-current-action {
		font-size: 14px !important;
	}

	#game-room-current-action-subheading {
		font-size: 11px !important;
	}

	#game-room-circular-button-container {
		width: 80%;
		padding-top: 80%;
	}

	.game-ready-button,
	#game-start-button {
		font-size: 13px;
	}

	#game-room-deck-selection-player1,
	#game-room-deck-selection-player2 {
		width: 90%;
		margin-left: 5%;
	}

	#game-room-players .game-deck-dropdown,
	#game-room-players .game-deck-template {
		font-size: 12px;
		padding: 0 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* --- Loading screen: left-aligned text reads better than justified text on a narrow screen --- */
	#game-loading-screen p {
		text-align: left !important;
	}

	#game-loading-screen h1 {
		font-size: 24px;
	}

	#game-loading-screen h2 {
		font-size: 17px !important;
	}

	/* --- Duel: some room between the hand and the phase buttons --- */
	#game-field > tbody > tr > td:first-child > table > tbody > tr:nth-child(2) > td {
		margin-top: 18px;
	}

	/* --- Buttons under the field: rows of 4, all the same size.
	   Phases: in a normal duel DP, SP and MP1 can't be chosen, they only show the current phase, so they share one
	   slot (the current one of them, otherwise MP1): MP1 | BP | MP2 | EP. Manual duels (Start / End Turn present)
	   can choose every phase: DP | SP | MP1 | BP, then MP2 | EP | Start Turn | End Turn.
	   Then the action buttons (Menu and Fullscreen are in the top bar below): Chaining, Cancel, and what the duel
	   adds (Resolve, Undo, Reset, Pause). Rows with fewer buttons are centred. --- */
	#game-phases:not(:has(#game-manual-start-turn-button)) #game-dp-button:not(.engine-button-success),
	#game-phases:not(:has(#game-manual-start-turn-button)) #game-sp-button:not(.engine-button-success),
	#game-phases:not(:has(#game-manual-start-turn-button)):has(#game-dp-button.engine-button-success, #game-sp-button.engine-button-success) #game-mp1-button {
		display: none;
	}

	#game-field > tbody > tr,
	#game-field #game-phases {
		justify-content: center;
	}

	#game-field #game-phases {
		flex-wrap: wrap;
		row-gap: 6px; /* as between the other rows */
	}

	#game-field #game-phases .game-phase-button,
	#game-field > tbody > tr > td:last-child button,
	#game-field > tbody > tr > td:last-child #game-fullscreen-button {
		/* 4 per row, 3 gaps of 4px; minus half a pixel each, as phones have fractional screen widths and the
		   rounded-up sizes of 4 buttons could add up to more than the row, wrapping the 4th */
		flex: 0 0 calc((100% - 12px) / 4 - 0.5px);
	}

	#game-field #game-phases #game-manual-start-turn-button,
	#game-field #game-phases #game-manual-end-turn-button {
		order: 6;
	}

	/* "Chaining: Manual" is longer than a quarter of the row: on two lines rather than cut off. */
	#game-field > tbody > tr > td:last-child #game-force-chain-button {
		white-space: normal;
	}

	/* Outside hand tests Reset is only made invisible, and would keep its slot. */
	#game-field #game-reset-button[style*="visibility: hidden"] {
		display: none;
	}

	/* --- The phase buttons are replaced by the phase button at the bottom right (below); the turn display, in
	       the same cell, stays. --- */
	#game-field #game-phases .game-phase-button {
		display: none !important;
	}

	/* --- Top bar (responsive.js): fullscreen | logo | menu. The duel row's Menu and fullscreen buttons move up
	       here (the bar's buttons click them), so they leave the row. Plain icons, no button frame. --- */
	#game-field > tbody > tr > td:last-child #game-button-options-mobile,
	#game-field > tbody > tr > td:last-child #game-fullscreen-button {
		display: none !important;
	}

	#game-portrait-top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		margin-top: -4px; /* over #game-column's top padding: the black bar starts at the screen's top edge */
		margin-bottom: 4px;
		padding: 0 4px;
		box-sizing: border-box;
		background-color: #000000;
	}

	#game-portrait-top-bar button {
		flex: 0 0 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: #f0f0f0;
		font-size: 24px;
		cursor: pointer;
	}

	#game-portrait-logo {
		min-width: 0;
		height: 32px;
		max-width: calc(100% - 100px);
		object-fit: contain;
	}

	/* Where the browser can't go fullscreen (iPhones; responsive.js sets body.game-no-fullscreen) the top bar is
	   gone: the menu (a plain hamburger) sits at the bottom of the screen between the chat and phase buttons, and
	   the field gets the bar's height. Not during siding, like the phase button. */
	#game-portrait-bottom-menu-button {
		display: none;
	}

	:root:has(body.game-no-fullscreen) {
		--game-stacked-reserved-height: 190;
	}

	body.game-no-fullscreen #game-portrait-top-bar {
		display: none;
	}

	body.game-no-fullscreen #game-portrait-bottom-menu-button {
		display: block;
		position: fixed;
		z-index: 19; /* under the open phase list */
		left: 50%;
		bottom: 12px;
		transform: translateX(-50%);
		width: 52px;
		height: 52px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: #f0f0f0;
		font-size: 28px;
		cursor: pointer;
	}

	body.game-no-fullscreen:has(#game-siding-column:not([style*="display: none"])) #game-portrait-bottom-menu-button {
		display: none;
	}

	/* The activated card flashes over the field's centre: 62.5% across on desktop (beside the card column), the
	   middle of the screen here. */
	#game-highlight-card {
		left: 50%;
	}

	/* --- Chat (bottom left) and phase (bottom right): quarter circles in the screen's corners, during the duel
	       (responsive.js). Holding or swiping the phase button opens a larger quarter circle behind it with the
	       phases that can be chosen on an arc. The page keeps room for the corners at its end. --- */
	:root {
		--game-corner-size: 104px;
		--game-phase-option-size: 64; /* px; read by responsive.js to place the options */
		--game-phase-ring-radius: 150; /* px from the corner to the options' centres (at least) */
	}

	#game-column {
		padding-bottom: calc(var(--game-corner-size) + 8px);
	}

	#game-container:not([style*="display: none"]) ~ #game-portrait-controls {
		display: block;
	}

	body.game-card-column-open #game-portrait-controls {
		display: none !important;
	}

	/* Siding between duels: no phases, so no phase button; the chat stays. A tapped card's details open the card
	   column over the siding screen (siding.js), which then makes way. */
	body:has(#game-siding-column:not([style*="display: none"])) #game-portrait-phase-button,
	body:has(#game-siding-column:not([style*="display: none"])) #game-portrait-phase-menu {
		display: none !important;
	}

	body.game-card-column-open #game-siding-column {
		display: none !important;
	}

	#game-portrait-chat-button,
	#game-portrait-phase-button {
		position: fixed;
		z-index: 21; /* over the field, under the game's windows */
		bottom: 0;
		/* No safe-area allowance: the page doesn't extend under the phone's navigation bar (no viewport-fit=cover),
		   yet some browsers still report one, which made the corners grow. */
		width: var(--game-corner-size);
		height: var(--game-corner-size);
		min-height: 0;
		margin: 0;
		box-sizing: border-box;
		display: flex;
		align-items: flex-end;
		border-bottom-width: 0;
		white-space: normal;
		line-height: 1.1;
	}

	#game-portrait-chat-button {
		left: 0;
		justify-content: flex-start;
		padding: 0 0 24px 24px;
		border-left-width: 0;
		border-radius: 0 100% 0 0;
		font-size: 30px;
	}

	/* Unread chat lines (responsive.js), at the top right of the chat icon. */
	#game-portrait-chat-badge {
		display: none;
		position: absolute;
		left: 50px;
		bottom: 46px;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		box-sizing: border-box;
		border-radius: 10px;
		background-color: #e03636;
		color: #ffffff;
		font-size: 12px;
		font-weight: bold;
		line-height: 20px;
		text-align: center;
	}

	#game-portrait-chat-badge.game-portrait-chat-badge-shown {
		display: block;
	}

	/* No chat in this duel (replays remove it): no chat button. Manual duels keep it (it opens the Event Log). */
	body:not(:has(#game-chat-area)) #game-portrait-chat-button {
		display: none;
	}

	/* The current phase, and under it in small print the phase a tap goes to. */
	#game-portrait-phase-button {
		right: 0;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		text-align: center;
		padding: 0 12px 16px 26px;
		border-right-width: 0;
		border-radius: 100% 0 0 0;
		font-size: 15px;
		font-weight: bold;
		/* hold and swipe: no scrolling, text selection or callout menu while the finger is down */
		touch-action: none;
		user-select: none;
		-webkit-user-select: none;
		-webkit-touch-callout: none;
	}

	#game-portrait-phase-next {
		margin-top: 3px;
		font-size: 11px;
		font-weight: normal;
		white-space: nowrap;
	}

	#game-portrait-phase-next:empty {
		display: none;
	}

	/* The open list: a quarter circle in the corner, as large as the arc of options needs (responsive.js). */
	#game-portrait-phase-menu {
		display: none;
		position: fixed;
		z-index: 20;
		right: 0;
		bottom: 0;
		width: var(--game-phase-menu-radius, 220px);
		height: var(--game-phase-menu-radius, 220px);
		border-radius: 100% 0 0 0;
		background-color: rgba(109, 28, 180, 0.85);
	}

	#game-portrait-phase-menu.game-portrait-phase-menu-open {
		display: block;
	}

	/* Round options, placed on the arc by responsive.js; the one under the finger turns blue. */
	#game-portrait-phase-menu .game-portrait-phase-option {
		position: absolute;
		width: calc(var(--game-phase-option-size) * 1px);
		height: calc(var(--game-phase-option-size) * 1px);
		min-height: 0;
		margin: 0;
		padding: 4px;
		box-sizing: border-box;
		border-radius: 50%;
		font-size: 12px;
		line-height: 1.1;
		white-space: normal;
		user-select: none;
		-webkit-user-select: none;
	}
}

/* =====================================================================================================
 * Compact side-by-side layout: phones held sideways (short landscape screens)
 * ===================================================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
	:root {
		/* The field is limited by the height here, so wider side columns cost it nothing. */
		--game-side-columns: 4;
		/* 3D hand card size, relative to a zone card (1.5 on desktop); Game.Field.resizeHand spaces the cards */
		--game-3d-hand-scale: 1.7;
		/* the hand is never spaced wider than the field's cell (the phase buttons are beside it) */
		--game-hand-limit: cell;
		/* top margin + the ~40px the zone tables add through cell spacing (desktop uses 90) */
		--game-vertical-chrome: 53;
	}

	#game-column {
		margin-top: 4px;
		padding-left: 6px;
	}

	/* --- Card column: smaller text for a small screen --- */
	.game-card-tab-button {
		height: 28px;
		padding: 2px;
		font-size: 10px;
		line-height: 1.1;
		white-space: nowrap;
	}

	#card-name {
		font-size: 12px;
		line-height: 20px;
		margin: 6px 5%;
	}

	#card-picture {
		width: 70%;
	}

	#card-id {
		font-size: 10px;
	}

	#card-description-box {
		font-size: 11px;
	}

	/* the other tabs: chat log, event log, options, manual tools */
	#game-chat-log-content,
	#game-event-log-content,
	#game-settings-container,
	#game-manual-tools {
		font-size: 11px;
	}

	/* --- Side columns: content stacked from the top (desktop spreads it over 60/40 and 70/10/10/10 % rows) --- */
	#game-field > tbody > tr > td.empty-game-field-zone-full > table,
	#game-field > tbody > tr > td.empty-game-field-zone-full > table > tbody > tr {
		height: auto !important;
	}

	#game-field .game-avatar-area {
		width: 90%;
		font-size: 11px;
		line-height: 1.2;
	}

	#game-field .game-avatar-area > .game-avatar {
		max-width: 48px;
		margin: 0 auto;
	}

	#game-field .game-avatar-area .game-life-bar {
		margin-top: 2px;
		height: 5px;
	}

	/* --- Turn (full width) and the phase buttons under the player's stats, one per row at half width (3D mode
	       moves this cell with an inline transform on desktop) --- */
	#game-field #game-phases {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 6px 4px 0;
		transform: none !important;
	}

	#game-field #game-turn-display,
	#game-field #game-phases .game-phase-button {
		width: 50%;
		min-width: 0;
		margin: 0;
		min-height: 24px;
		line-height: 1.1;
		padding: 0 2px;
		box-sizing: border-box;
		font-size: 11px;
		border-radius: 6px;
	}

	#game-field #game-turn-display {
		align-self: stretch;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 2D: the phase buttons are as wide as the turn display. */
	#game-field:not(:has(.game-field-zone-3d)) #game-phases .game-phase-button {
		width: 100%;
	}

	/* 3D: half width, against the left edge. */
	#game-field:has(.game-field-zone-3d) #game-phases {
		align-items: flex-start;
	}

	#game-column #game-phases .game-phase-button:not(:last-child) {
		border-bottom: 1px solid #777777;
	}

	/* --- Fullscreen / chain / cancel / undo / reset under the opponent's stats, two per row like the phase
	       buttons (a short stack stays clear of the tilted 3D board's near corner), and not pinned to the
	       bottom-right corner of the screen as 3D mode does on desktop. Their visibility stays the game's:
	       the cells disappear so the visible buttons fill the grid. --- */
	#game-field > tbody > tr > td:last-child > table {
		display: block;
	}

	#game-field > tbody > tr > td:last-child > table > tbody {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3px;
		padding: 0 4px;
	}

	#game-field > tbody > tr > td:last-child > table > tbody > tr,
	#game-field > tbody > tr > td:last-child > table > tbody > tr:nth-child(n+2) > td {
		display: contents;
	}

	#game-field > tbody > tr > td:last-child > table > tbody > tr:nth-child(1) > td {
		grid-column: 1 / -1;
		display: block;
		padding-bottom: 3px;
	}

	#game-field > tbody > tr > td:last-child button {
		position: static !important;
		width: auto !important;
		min-width: 0;
		margin: 0;
		min-height: 26px;
		line-height: 1.1;
		padding: 0 2px;
		font-size: 11px;
		border-radius: 6px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Every duel button gets a full row: chain buttons and Cancel (long labels, main actions), and Undo and Reset,
	   which side by side were cut to "Re...". */
	#game-force-chain-button,
	#game-resolve-chain-button,
	#replay-pause-button,
	#game-field > tbody > tr > td:last-child #game-cancel-button,
	#game-field > tbody > tr > td:last-child #game-undo-button,
	#game-field > tbody > tr > td:last-child #game-reset-button {
		grid-column: 1 / -1;
	}

	/* Outside hand tests Reset is only made invisible, and would keep its (now full) row. */
	#game-field #game-reset-button[style*="visibility: hidden"] {
		display: none;
	}

	/* The fullscreen button: apart from the duel buttons, in the screen's bottom-right corner (the bottom of
	   this column), half the column wide. The tilted 3D board's near corner (the player's deck) stays in the
	   column's left half. */
	#game-field > tbody > tr > td:last-child {
		position: relative;
	}

	#game-field > tbody > tr > td:last-child #game-fullscreen-button {
		display: block;
		position: absolute !important;
		right: 4px;
		bottom: 4px;
		width: calc(50% - 6px) !important;
		min-height: 30px;
	}

	/* --- 3D hands pinned to the field cell (3D mode places them with offsets made for desktop proportions):
	       the opponent's hand in the space the tilt leaves above the board, the player's at the bottom, with
	       the hand as tall as its (larger) cards so none of it hangs off the screen --- */
	/* A fixed height (the screen's) so the hand lands in the same place whatever the side columns hold. */
	#game-field > tbody > tr > td:nth-child(2) {
		position: relative;
		height: calc(100vh - 14px);
		height: calc(100dvh - 14px);
	}

	/* The field table fills the column, so the side columns (stats, phases, buttons) sit at the screen's edges,
	   away from the board, and the zones get their full width. Game.updateSizes gives #game-field the width of
	   the zones plus the side columns, which is a little less than the zones' cell spacing needs, so the table
	   squeezed its outer zone columns (deck, extra deck, graveyard...); the player's deck, which piles to the
	   right, then shrank. The board itself (the playmat behind the zones) keeps the zones' own width, centred. */
	#game-field {
		width: 100% !important;
	}

	#game-field-front-div {
		position: relative;
	}

	#game-field-container {
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	/* The tilted 3D board's empty (transparent) lower part can reach below the screen and make the page scroll
	   by a few px. Clip it vertically only: the drawn board is wider than this cell and must not be cut. */
	#game-field > tbody > tr > td:nth-child(2) {
		overflow-x: visible;
		overflow-y: clip;
	}

	#game-field > tbody > tr > td:nth-child(2) > div #game-field-player-hand {
		left: 50%;
		top: auto;
		bottom: 0;
		width: max-content !important;
		height: auto !important;
		transform: translateX(-50%) !important;
	}

	/* The opponent's hand a little larger and just above the board's far edge, so it reads as closer. */
	#game-field > tbody > tr > td:nth-child(2) > div #game-field-opponent-hand {
		left: 50%;
		top: 2.5%;
		transform: translateX(-50%) scale(0.95) !important;
		transform-origin: 50% 0;
	}

	/* --- Lobby: one screen, two columns. Left: logo, room information, and the chat at the bottom. Right: the
	       players box (players and Ready on top, the two deck panels filling the rest).
	       The lobby ad (when there is one) is too wide for either column: it gets a full-width row at the bottom
	       of the screen, and the players box and the chat make room for it. --- */
	/* (The script shows the room with an inline display: block; while hidden it stays display: none.) */
	#game-room-container:not([style*="display: none"]) {
		display: grid !important;
	}

	#game-room-container {
		--game-room-side: 30%;
		grid-template-columns: minmax(0, var(--game-room-side)) minmax(0, 1fr);
		/* the room information may shrink (clipped) when a short screen also has the ad row */
		grid-template-rows: auto minmax(0, auto) minmax(0, 1fr) auto;
		grid-template-areas:
			"logo players"
			"info players"
			". players"
			"ad ad";
		column-gap: 10px;
		min-width: 0;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		box-sizing: border-box;
		margin: 0;
		padding: 8px 8px 8px 10px;
	}

	/* Logo and room information become cells of the grid (the box around them is a flex row on desktop). */
	#game-room-container-top {
		display: contents !important;
	}

	#dueling-nexus-logo {
		grid-area: logo;
		width: 60%;
		max-width: 150px;
		margin: 2px auto 4px;
	}

	#game-room-information {
		grid-area: info;
		min-height: 0;
		overflow: hidden;
		width: auto;
		padding: 0 2px;
		font-size: 12px;
		line-height: 1.25;
	}

	#game-room-info-mode {
		margin-bottom: 4px !important;
		font-size: 15px;
		line-height: 1.2;
	}

	#game-room-information-table {
		border-collapse: collapse;
	}

	#game-room-information-table tr {
		height: 19px;
	}

	#game-room-information-table td {
		padding: 0 4px 0 0;
		vertical-align: top;
	}

	#duel-lobby-ad {
		grid-area: ad;
		min-width: 0;
		margin: 8px 0 0;
	}

	/* With the ad row the left column is shorter: a smaller logo leaves the room information and the chat room. */
	#game-room-container:has(#GameLobbyScreen) #dueling-nexus-logo {
		max-width: 110px;
	}

	/* No ad (contributors): no row, so the lobby is exactly one screen. */
	#duel-lobby-ad:not(:has(*)) {
		display: none !important;
	}

	/* The fullscreen button: top-left corner, beside the logo (the right column is the players box). */
	#game-room-fullscreen-button {
		top: 8px;
		right: auto;
		left: 8px;
		width: 34px;
		min-height: 30px;
		font-size: 14px;
	}

	/* The players box: the screen's height, less the ad row; players and Ready on top, the deck panels share
	   the rest. */
	#game-room-players {
		grid-area: players;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		height: auto;
		min-height: 0;
		max-width: none;
		box-sizing: border-box;
		margin: 0;
		padding: 8px 10px 10px;
	}

	#game-room-players > div:first-child {
		grid-column: 1 / -1;
	}

	#game-room-player1-username,
	#game-room-player2-username,
	#game-room-player3-username,
	#game-room-player4-username {
		font-size: 16px;
		line-height: 1.25;
	}

	#game-room-player1-title,
	#game-room-player2-title,
	#game-room-player3-title,
	#game-room-player4-title {
		font-size: 12px;
		line-height: 1.4;
	}

	#game-room-players .game-room-player-container p {
		font-size: 12px !important;
	}

	#game-room-players .game-room-player-container img[id$="-ranked-icon"] {
		height: 20px;
	}

	#game-room-players .game-room-player-container .game-to-spectator-button,
	#game-room-players .game-room-player-container .game-room-player-kick-button {
		width: 22px !important;
		height: 22px !important;
		min-height: 0;
		padding: 0;
		font-size: 11px;
	}

	#game-room-current-action {
		margin-top: 0 !important;
		font-size: 16px !important;
		line-height: 1.25;
	}

	#game-room-current-action-subheading {
		margin-top: 2px !important;
		font-size: 12px !important;
	}

	#game-room-circular-button-container {
		width: 38%;
		padding-top: 38%;
		margin-top: 8px;
	}

	.game-ready-button,
	#game-start-button {
		font-size: 14px;
		white-space: nowrap;
	}

	/* Deck panels: the deck list takes whatever height is left under its dropdown. (Tag duels set a fixed
	   height and top padding on them inline, taller than the screen.) */
	#game-room-deck-container-player1,
	#game-room-deck-container-player2 {
		width: auto;
		height: auto !important;
		min-height: 0;
		margin-top: 8px;
	}

	#game-room-deck-selection-player1,
	#game-room-deck-selection-player2 {
		box-sizing: border-box;
		width: 92%;
		height: 100%;
		margin-left: 4%;
		padding-top: 0 !important;
	}

	#game-room-players .game-deck-dropdown {
		height: 34px;
	}

	#game-deck-selection-player1,
	#game-deck-selection-player2 {
		height: calc(100% - 34px);
	}

	#game-room-players .game-deck-template {
		height: 36px;
	}

	#game-room-players .game-deck-dropdown,
	#game-room-players .game-deck-template {
		font-size: 13px;
		padding: 0 6px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Rock-paper-scissors (in the deck panels before the duel) */
	#game-rps-container-player1,
	#game-rps-container-player2 {
		margin-top: 10px;
	}

	/* The choices keep their 30% width (as on desktop) and their square shape, up to 84px. */
	#game-rps-rock,
	#game-rps-paper,
	#game-rps-scissors,
	#game-rps-content-hidden-buttons img {
		max-width: 84px;
		height: auto;
	}

	/* The "Random" dice: under the three choices (on desktop it hangs above the panel's corner, which here
	   is under the Ready circle). */
	#game-rps-random {
		position: static;
		margin-top: 8px;
	}

	#game-rps-random img {
		width: 26px;
	}

	/* The lobby chat sits at the bottom of the left column instead of over the deck panels, above the ad row
	   (--game-lobby-ad-height is the ad row's height, set by responsive.js; the row has an 8px margin on top). */
	#game-room-container:not([style*="display: none"]) ~ #game-chat-area.game-chat-external {
		left: 10px;
		bottom: calc(8px + var(--game-lobby-ad-height, 0px) + min(8px, var(--game-lobby-ad-height, 0px)));
		width: calc((100% - 28px) * 0.3);
	}

	/* Little room above the chat box: keep the last few lines, smaller, on a solid background, so a long message
	   doesn't print over the room information. */
	#game-room-container:not([style*="display: none"]) ~ #game-chat-area.game-chat-external #game-chat-content {
		max-height: 64px !important;
		background-color: rgba(1, 1, 17, 0.92);
		font-size: 12px;
		line-height: 1.3;
	}

	/* Siding: the game sizes the column from #game-container's height, which is 0 on phones (the page scrolls), so
	   it came out a few pixels wide. Beside the card column instead, at most 480px wide (cards about 46px), with
	   slimmer titles; the page scrolls, and the bottom of the main deck, the extra and the side deck fit on the
	   screen together for dragging between them. */
	#game-siding-column {
		width: auto !important;
		max-width: 480px;
		max-height: none !important;
	}

	#siding-deck-main-title,
	#siding-deck-extra-title,
	#siding-deck-side-title {
		height: 32px;
		margin: 4px 0;
		line-height: 32px;
		font-size: 16px;
	}

	#game-siding-history-buttons .engine-button {
		min-height: 26px;
		font-size: 12px;
	}

	#game-siding-done {
		margin-top: 10px;
	}
}

/* Landscape 3D on wide screens: the field is limited by the height, but the tilted board is shorter than its
   layout and there is spare width, so draw the board bigger. `scale` only changes how it is drawn (hands,
   columns and page height stay put); holograms and labels are placed from the drawn positions. */
@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 19/10) {
	#game-field:has(.game-field-zone-3d) #game-field-container {
		scale: 1.05;
	}

	/* The bigger board reaches higher: the opponent's hand moves up a little to stay clear of their back row. */
	#game-field > tbody > tr > td:nth-child(2) > div #game-field-opponent-hand {
		top: 0.5%;
		transform: translateX(-50%) scale(0.9) !important;
	}
}

@media (orientation: landscape) and (max-height: 500px) and (min-aspect-ratio: 2/1) {
	#game-field:has(.game-field-zone-3d) #game-field-container {
		scale: 1.1;
	}
}

/* Touch screens cannot hover: the hover tooltips would stay open on top of the field. */
/* =====================================================================================================
 * Short portrait screens (a phone browser with its bars showing, e.g. an iPhone in Safari or Brave): smaller
 * chat and phase corners, so they leave the duel's buttons room. Taller screens keep the full size.
 * ===================================================================================================== */
@media (max-width: 800px) and (orientation: portrait) and (max-height: 700px) {
	:root {
		--game-corner-size: 84px;
		--game-phase-ring-radius: 130; /* the phase list's first arc, still clear of the smaller button */
		--game-stacked-reserved-height: 218;
	}

	:root:has(body.game-no-fullscreen) {
		--game-stacked-reserved-height: 170;
	}

	#game-portrait-chat-button {
		padding: 0 0 18px 18px;
		font-size: 24px;
	}

	#game-portrait-chat-badge {
		left: 38px;
		bottom: 36px;
	}

	#game-portrait-phase-button {
		padding: 0 8px 9px 20px;
		font-size: 13px;
	}

	#game-portrait-phase-next {
		margin-top: 2px;
		font-size: 10px;
	}

	body.game-no-fullscreen #game-portrait-bottom-menu-button {
		bottom: 8px;
		width: 46px;
		height: 46px;
		font-size: 24px;
	}
}

@media (hover: none) {
	#game-tooltip,
	#game-log-tooltip {
		display: none !important;
	}
}