/* Landscape phones: real layout and touch-sized controls, without scaling
   the desktop 16:9 canvas. Desktop and portrait keep the original layout. */
.mobile-only { display: none; }

@media (orientation: landscape) and (max-width: 1100px) and (max-height: 600px) {
	:root {
		--mobile-left: max(10px, env(safe-area-inset-left));
		--mobile-right: max(10px, env(safe-area-inset-right));
		--mobile-top: max(8px, env(safe-area-inset-top));
		--mobile-bottom: max(8px, env(safe-area-inset-bottom));
		--mobile-sidebar: clamp(132px, 19vw, 180px);
		--mobile-deck-column: calc((100vw - var(--mobile-left) - var(--mobile-right) - 220px) / 2);
		--mobile-hand: clamp(76px, 23dvh, 102px);
		--mobile-row-card: clamp(26px, calc((100dvh - 124px) / 6), 60px);
		--mobile-gold: #e0b65d;
	}
	html, body { height: 100%; overflow: hidden; background: #11100e; }
	body { -webkit-text-size-adjust: 100%; }
	* { cursor: auto; -webkit-tap-highlight-color: transparent; }
	button, a, [role="button"], .card, .card-lg { touch-action: manipulation; }
	#screen-scale, #screen-scale.fit-active {
		display: block; position: fixed; inset: 0; width: 100%; height: 100dvh;
		transform: none !important; overflow: hidden; overflow: clip;
	}
	#screen-scale .hide { display: none !important; }
	.mobile-only { display: block; }
	button.mobile-only, .mobile-deck-actions button {
		min-height: 44px; padding: 8px 14px; border: 1px solid #8b703e;
		border-radius: 6px; background: #25221b; color: #f4e3ba; font: 14px/1.2 sans-serif;
	}
	button:disabled { opacity: .4; }
	button:focus-visible, a:focus-visible { outline: 2px solid #f8d686; outline-offset: 2px; }

	/* Main menu stays usable without a mouse hover. */
	#lobby, #lobby-mode.lobby-split:not(.hide) { height: 100%; }
	.split-title { top: 14px; color: #cbb98e; font-size: 12px; letter-spacing: 4px; }
	.split-label { padding: 20px; }
	.split-image { filter: grayscale(.35) brightness(.65); }
	.split-panel:hover { flex: 1; }
	.split-heading, .split-panel:hover .split-heading { font-size: clamp(22px, 3.5vw, 34px); letter-spacing: 0; color: #fff4dc; }
	.split-tag, .split-panel:hover .split-tag { font-size: 11px; letter-spacing: 2px; color: #e0bb77; }
	.split-play, .split-panel:hover .split-play {
		opacity: 1; transform: none; min-height: 44px; min-width: 144px;
		font-size: 13px; color: #ffe5ab; border: 1px solid #bb904f; border-radius: 5px; background: #17150ed9;
	}
	#lobby-title { margin: 20px 0 12px; font-size: 25px; }
	.lobby-view { margin: 12px 0 0; }
	.mp-subtitle { font-size: 12px; letter-spacing: 2px; margin-bottom: 16px; }
	.mp-options { width: calc(100% - 110px); gap: 12px; }
	.mp-options-divider { display: none; }
	.mp-option { padding: 14px 10px; gap: 10px; border-radius: 6px; }
	.mp-option-heading { font-size: 18px; letter-spacing: 0; }
	.mp-option-tag { font-size: 10px; letter-spacing: 1px; }
	.mp-option-desc { font-size: 12px; letter-spacing: 0; }
	.mp-back, .mp-action-button { min-height: 44px; font-size: 13px; margin-top: 12px; }
	.mp-back-icon { width: 16px; height: 16px; }
	#join-code { font-size: 28px; min-height: 48px; }
	#room-code { font-size: 44px; margin: 12px auto; }
	.lobby-status, .lobby-hint { font-size: 13px; }
	#lang-select { top: var(--mobile-top); right: calc(var(--mobile-right) + 52px); bottom: auto; }
	.lang-trigger { min-width: 60px; min-height: 44px; font-size: 14px; }
	.lang-menu { max-height: calc(100dvh - 65px); overflow-y: auto; }
	.lang-menu [role="option"] { min-height: 40px; padding: 10px; font-size: 14px; }
	#lobby-fullscreen-toggle { top: var(--mobile-top); right: var(--mobile-right); width: 44px; height: 44px; bottom: auto; }

	/* Two independent card lists; compact deck summary in the right column. */
	#deck-customization { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at top, #352c20, #13120f 75%); }
	#faction-title { position: absolute; top: 12px; left: calc(var(--mobile-left) + 98px); width: calc(100% - var(--mobile-left) - var(--mobile-right) - 242px); height: 28px; }
	#faction-title h1 { top: 0; margin: 0; font-size: 21px; line-height: 28px; background-size: 24px; background-position: left center; padding-left: 30px; }
	#faction-description { position: absolute; top: 40px; left: calc(var(--mobile-left) + 98px); width: calc(100% - var(--mobile-left) - var(--mobile-right) - 242px); margin: 0; font-size: 11px; line-height: 1.25; height: 28px; overflow: auto; }
	#lobby-return { top: 8px; left: var(--mobile-left); min-height: 44px; width: 88px; font-size: 12px; gap: 6px; }
	#lobby-return::before { width: 18px; height: 18px; flex-shrink: 0; }
	#fullscreen-toggle { top: 8px; right: calc(var(--mobile-right) + 52px); width: 44px; height: 44px; font-size: 0; justify-content: center; }
	#fullscreen-toggle::before { width: 23px; height: 23px; }
	.card-contianer-title { top: 70px !important; margin: 0; height: 24px; font-size: 15px; font-weight: 500; color: #e9d2a2; }
	#card-bank-title { left: var(--mobile-left); width: auto; }
	#card-deck-title { left: calc(var(--mobile-left) + var(--mobile-deck-column) + 20px); right: auto; text-align: left; }
	.card-array {
		top: 100px !important; bottom: calc(var(--mobile-bottom) + 52px); height: auto; width: var(--mobile-deck-column);
		padding: 2px 6px 12px 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
		gap: 12px 8px; align-content: start; overflow-x: hidden; overflow-y: auto;
		overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
		scrollbar-width: thin; scrollbar-color: #8b703e #1a1814;
	}
	#card-bank { left: var(--mobile-left); }
	#card-deck { left: calc(var(--mobile-left) + var(--mobile-deck-column) + 20px); }
	.card-array .card-lg { position: relative; width: 100%; height: auto; aspect-ratio: 410 / 775; border-radius: 6px; margin: 0; }
	.card-array .card-lg.empty { display: none; }
	.card-array .card-lg > div { position: absolute; top: auto; bottom: 5px; left: auto; right: 5px; width: auto; height: auto; min-width: 28px; padding: 3px 7px; border-radius: 20px; background: #17130e; color: #ffe1a1; font: bold 13px sans-serif; }
	.deck-actions-row { position: absolute; top: auto; bottom: var(--mobile-bottom); left: var(--mobile-left); right: calc(var(--mobile-right) + 200px); height: 44px; gap: 8px; align-items: stretch; }
	.deck-options { display: flex; align-items: center; justify-content: center; min-height: 44px; flex: 1; padding: 6px; font-size: 12px; border: 1px solid #625235; border-radius: 5px; background: #211d16; white-space: normal; text-align: center; }
	#card-leader { top: 70px; left: auto; right: var(--mobile-right); width: 180px; height: 82px; }
	#card-leader p { position: absolute; left: 64px; top: 20px; width: 110px; margin: 0; font-size: 14px; line-height: 1.3; color: #e4c58b; }
	#card-leader > div { position: absolute; top: 0; left: 0; width: 46px; height: 82px; margin: 0; background-repeat: no-repeat; }
	#deck-stats { position: absolute; top: 164px; bottom: 112px; left: auto; right: var(--mobile-right); width: 180px; height: auto; display: grid; grid-template-columns: 1fr 40px; gap: 5px 6px; align-content: start; overflow: auto; }
	#deck-stats > p:nth-child(n) { position: static; margin: 0; padding: 0; background: none; font-size: 12px; line-height: 1.25; text-align: left; color: #c8b994; }
	#deck-stats > p:nth-child(even) { text-align: right; font-weight: bold; color: #ffe1a1; font-size: 14px; }
	#start-game { top: auto; bottom: var(--mobile-bottom); left: auto; right: var(--mobile-right); transform: none; width: 180px; min-height: 44px; height: 44px; font-size: 15px; font-weight: 600; border: 1px solid #be9654; border-radius: 6px; background: linear-gradient(#6a4e26, #3a2b18); color: #fff0ce; }
	#mp-status { position: absolute; top: auto; bottom: 94px; left: auto; right: var(--mobile-right); width: 180px; font-size: 11px; text-align: center; padding: 0; }
	#opponent-preview { top: auto; bottom: 56px; left: auto; right: var(--mobile-right); width: 180px; height: 34px; }
	#opponent-preview > div > p, #op-preview-leader > p { font-size: 11px; margin: 1px; }
	#opponent-preview button { width: 24px !important; height: 24px !important; }

	/* Card inspection doesn't mutate the deck until the action is pressed. */
	#mobile-deck-dialog { position: absolute; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: var(--mobile-top) var(--mobile-right) var(--mobile-bottom) var(--mobile-left); background: #080705ed; }
	.mobile-deck-panel { width: min(720px, 100%); height: 100%; display: grid; grid-template-columns: minmax(110px, 33%) 1fr; gap: 24px; padding: 8px; }
	#mobile-deck-art { background-size: contain; background-position: center; background-repeat: no-repeat; }
	.mobile-deck-info { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 6px 0; color: #e1d4b7; }
	.mobile-deck-info h2 { margin: 0 0 8px; font: 24px/1.2 Georgia, serif; color: #ffe1a1; }
	.mobile-deck-info h3 { margin: 14px 0 6px; font-size: 15px; }
	.mobile-deck-info p { margin: 4px 0; font-size: 14px; line-height: 1.5; }
	#mobile-deck-count { padding: 12px 0; color: #c7ad7c; }
	.mobile-deck-actions { margin-top: auto; display: flex; gap: 10px; padding-top: 10px; }
	#mobile-deck-action { min-width: 130px; background: #634a25; }

	/* Six combat rows and a scrollable hand use the actual screen height. */
	main { inset: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr) var(--mobile-sidebar); gap: 8px; padding: var(--mobile-top) var(--mobile-right) var(--mobile-bottom) var(--mobile-left); background: linear-gradient(#17130bc4, #17130b9c), url('img/board.jpg') center/cover; }
	main > :is(#panel-left, #panel-mid, #panel-right) { position: relative; inset: auto; width: auto; height: 100%; min-height: 0; min-width: 0; }
	#panel-mid { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) var(--mobile-hand); gap: 6px; }
	#panel-mid .field { position: relative; inset: auto; width: 100%; height: 100%; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3px; }
	.field-row { top: auto; height: 100%; min-height: 0; border: 1px solid #76644869; border-radius: 4px; background: #1b1712a6; }
	#field-op .field-row { background: #302019a1; }
	.row-score { position: absolute; left: 0; top: 0; width: 30px; height: 100%; margin: 0; color: #f0d6a4; font-size: 17px; text-shadow: none; background: #0c0c0b50; }
	.row-special { position: absolute; left: 31px; top: 0; width: 38px; height: 100%; margin: 0; border-right: 1px solid #b19b6b33; }
	.row-cards { position: absolute; top: 0; left: 72px; width: calc(100% - 72px); height: 100%; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; align-items: center; touch-action: pan-x; scrollbar-width: none; }
	.row-cards:empty::before { position: absolute; left: 45%; color: #e5c68a35; font: 25px Georgia, serif; pointer-events: none; }
	[data-row="close"] .row-cards:empty::before { content: "⚔"; }
	[data-row="ranged"] .row-cards:empty::before { content: "➶"; }
	[data-row="siege"] .row-cards:empty::before { content: "♜"; }
	.row-weather { inset: 0; width: 100%; height: 100%; }
	.field .card { width: calc(var(--mobile-row-card) * .7); height: var(--mobile-row-card); margin: 0 2px !important; flex-shrink: 0; }
	.row-selectable { background-color: #c4922440 !important; outline: 1px solid #deb65f; outline-offset: -2px; }
	#field-hand { inset: auto; width: 100%; height: 100%; min-width: 0; }
	#hand-row { position: relative; inset: auto; width: 100%; height: 100%; padding: 4px 4px 18px; gap: 8px; justify-content: flex-start; align-items: flex-start; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9d7d45 #19150f; }
	#hand-row > .card { flex: 0 0 auto; width: calc((var(--mobile-hand) - 23px) * .7); height: calc(var(--mobile-hand) - 23px); min-width: 44px; margin: 0 !important; }
	#hand-row > .card::after { content: attr(data-title); position: absolute; left: 0; bottom: -16px; width: 100%; max-width: 100%; height: 14px; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px/14px sans-serif; color: #e6d8b7; background: none; border: none; box-shadow: none; pointer-events: none; }
	.card > div:nth-child(1) > div { font-size: 11px; }
	.card > div:nth-child(3) { font-size: 10px; }
	#hand-row .card.kb-focus { outline: 2px solid #f0c266; outline-offset: 1px; }

	/* Scores and leaders: compact, with a prominent pass button. */
	#panel-left .stats { position: absolute; left: 0; width: 112px; height: 78px; margin: 0; border: 1px solid #8d754b70; border-radius: 5px; background: #13110dda; }
	#stats-op { top: 46px; }
	#stats-me { top: calc(50% + 2px); }
	.stats .profile-img, .stats .deck-name { display: none; }
	.stats .name { position: absolute; top: 6px !important; left: 6px; width: 70px; height: 16px; margin: 0; font-size: 11px; color: #e1d2b1; }
	.stats .score-total { position: absolute; top: 30px; right: 4px; left: auto; width: 40px; height: 36px; margin: 0; font-size: 26px; color: #ffe1a1; background: none !important; text-shadow: none; }
	.score-leader > div { inset: auto; width: 100%; height: 100%; background: none; }
	.stats .hand-count { position: absolute; left: 6px; top: 31px !important; width: 42px; height: 20px; margin: 0; padding-left: 21px; font-size: 15px; background-size: 17px; }
	.stats .gem { position: absolute; top: 57px !important; left: 6px !important; width: 14px; height: 14px; margin: 0; }
	.stats #gem2-me, .stats #gem2-op { left: 24px !important; }
	.stats .passed { position: absolute; top: 59px !important; left: 44px; width: auto; height: auto; font-size: 11px; }
	.current-turn { border-color: #e3b55c !important; box-shadow: 0 0 8px #b78b3d80; }
	#panel-left .leader-box { position: absolute; left: 0; top: auto; width: 48px; height: 44px; margin: 0; }
	#leader-op { top: 128px !important; }
	#leader-me { bottom: 52px; }
	.leader-box > .leader-container { width: 36px; height: 44px; margin: 0; }
	.leader-box .leader-active { position: absolute; top: 15px; left: 37px; width: 10px; height: 12px; }
	#weather { position: absolute; top: 132px; left: 56px; width: 54px; height: 38px; margin: 0; }
	#weather .card { height: 36px; width: 25px; margin: 0 -2px !important; }
	#pass-button { position: absolute; top: auto; bottom: 0; left: 0; width: 112px; height: 44px; border: 1px solid #ca9a4b; border-radius: 6px; font-size: 19px; background: linear-gradient(#684b23, #302416); }
	#exit-game { position: absolute; top: 0; left: 0; width: 40px; height: 40px; padding: 10px; background-size: 20px; background-position: center; border: 1px solid #8d754b70; border-radius: 5px; opacity: .9; }
	#match-fullscreen-toggle { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background-size: 22px; background-position: center; opacity: .8; }
	.cardpile { position: absolute !important; width: 44px; height: 60px; margin: 0; }
	#grave-op { top: 50px; left: 6px; } #deck-op { top: 50px; left: auto; right: 6px; }
	#grave-me { top: auto; bottom: 12px; left: 6px; } #deck-me { top: auto; bottom: 12px; left: auto; right: 6px; }
	.cardpile > .card, .cardpile > .deck-card { position: absolute; top: 0; left: 3px; width: 38px; height: 54px; margin: 0 !important; }
	.deck-counter { position: absolute !important; top: 54px; left: 4px; width: 36px; height: 20px; font-size: 14px; }
	#hand-op { top: -200px; }

	/* Large selected card stays beside the board, not on top of the hand. */
	.card-preview { position: absolute; top: var(--mobile-top); right: var(--mobile-right); bottom: var(--mobile-bottom); width: var(--mobile-sidebar); border: 1px solid #ae8a47; border-radius: 6px; background: #16130ef5; }
	.card-preview > .card-lg { position: absolute; top: 52px; left: 8px; width: calc(100% - 16px); height: calc(100% - 176px); border-radius: 4px; background-repeat: no-repeat; }
	#mobile-preview-name { position: absolute; top: 4px; left: 8px; right: 8px; margin: 0; height: 34px; font: 13px/1.25 sans-serif; color: #f0d19a; }
	#mobile-preview-close { position: absolute; bottom: 4px; right: 4px; left: 4px; width: calc(100% - 8px); min-height: 44px; height: 44px; padding: 6px; font-size: 12px; }
	#mobile-preview-hint { position: absolute; top: 34px; left: 8px; right: 8px; margin: 0; color: #c3b28d; font-size: 10px; line-height: 1.2; }
	.card-preview > .card-description { position: absolute; top: auto; bottom: 54px; left: 6px; width: calc(100% - 12px); height: 62px; padding: 4px; overflow-y: auto; pointer-events: auto; border: none; text-align: left; background: none; }
	.card-description > div { display: none; }
	.card-description > h1, .card-description > p { position: static; width: auto; height: auto; margin: 0 0 6px; font: 12px/1.35 sans-serif; }
	.card-description > h1 { color: #f4d38f; font-weight: bold; }
	.card-description-close { display: none !important; }

	/* Touch-only alternatives to Escape/Enter in redraws, medics and leaders. */
	#carousel { position: absolute; inset: 0; width: 100%; height: 100%; background: #0c0a07f5; }
	#carousel > :first-child { position: absolute; top: 54px; bottom: calc(var(--mobile-bottom) + 4px); left: var(--mobile-left); width: calc((100% - var(--mobile-left) - var(--mobile-right)) * .58); padding: 0 38px; display: flex; align-items: center; justify-content: center; gap: 12px; }
	#carousel > :first-child > .card-lg { flex-shrink: 0; margin: 0; background-size: contain; background-repeat: no-repeat; border-radius: 6px; }
	#carousel > :first-child > :nth-child(1), #carousel > :first-child > :nth-child(5) { display: none !important; }
	#carousel > :first-child > :nth-child(2n) { width: 12vw; height: min(50dvh, 210px); opacity: .45; }
	#carousel > :first-child > :nth-child(3) { width: 17vw; height: min(72dvh, 290px); border-width: 2px; }
	#carousel > :nth-child(3) { position: absolute; top: 8px; left: var(--mobile-left); width: calc(100% - 150px); height: 38px; margin: 0; background: none; text-align: left; font-size: 16px; line-height: 38px; box-shadow: none; }
	#mobile-carousel-close { position: absolute; right: var(--mobile-right); top: 8px; min-width: 108px; }
	#mobile-carousel-close:disabled { display: none; }
	#mobile-carousel-name { position: absolute; top: 66px; right: var(--mobile-right); width: 35%; margin: 0; color: #f4d38f; font: 22px/1.2 Georgia, serif; }
	#carousel .card-description { position: absolute; top: 132px; bottom: 76px; left: auto; right: var(--mobile-right); width: 35%; height: auto; overflow: auto; padding: 0; background: none; border: none; text-align: left; pointer-events: auto; }
	#carousel .card-description h1 { font-size: 15px; }
	#carousel .card-description p { font-size: 14px; line-height: 1.5; }
	#mobile-carousel-pick { position: absolute; bottom: calc(var(--mobile-bottom) + 8px); right: var(--mobile-right); width: 35%; background: #634a25; }
	.carousel-arrow { width: 44px; height: 44px; font-size: 32px; top: 55%; z-index: 96; }
	.carousel-arrow-left { left: var(--mobile-left); }
	.carousel-arrow-right { right: auto; left: calc(58% - 38px); }
	#carousel-progress { top: auto; bottom: var(--mobile-bottom); left: 24%; }

	/* Menus remain reachable during play without covering the hand. */
	#mobile-tools-toggle { position: absolute; top: var(--mobile-top); right: var(--mobile-right); width: 44px; height: 44px; padding: 10px; z-index: 160; }
	#mobile-tools-toggle img { width: 23px; height: 23px; }
	body:has(#deck-customization.hide):has(#lobby.hide) #mobile-tools-toggle { left: calc(var(--mobile-left) + 54px); right: auto; }
	body:has(#lobby:not(.hide)) #mobile-tools-toggle { right: auto; left: var(--mobile-left); }
	#screen-scale .settings-button:not(#lobby-fullscreen-toggle) { display: none; position: absolute; top: 58px; bottom: auto; width: 44px; height: 44px; padding: 10px; background: #211d16; border: 1px solid #8b703e; border-radius: 5px; z-index: 170; }
	#screen-scale .settings-button > img { width: 24px; height: 24px; }
	#screen-scale #toggle-music { left: var(--mobile-left); }
	#screen-scale #toggle-sfx { left: calc(var(--mobile-left) + 48px); }
	#screen-scale #toggle-notifications { left: calc(var(--mobile-left) + 96px); }
	#screen-scale #toggle-chat-settings { left: calc(var(--mobile-left) + 144px); }
	#screen-scale #toggle-feedback { left: calc(var(--mobile-left) + 192px); }
	body.mobile-tools-open #screen-scale :is(#toggle-music, #toggle-sfx, #toggle-notifications, #toggle-chat-settings, #toggle-feedback) { display: flex; }
	body:has(#carousel:not(.hide)) #screen-scale :is(#exit-game, #match-fullscreen-toggle, #fullscreen-toggle, #mobile-tools-toggle, .settings-button),
	body:has(#carousel:not(.hide)) #chat-layer { display: none; }
	#chat-settings { left: -140px; top: 50px; bottom: auto; width: 300px; max-height: calc(100dvh - 120px); overflow: auto; }
	#chat-settings h3, .chat-switch-label b { font-size: 14px; } .chat-switch-label small { font-size: 12px; }
	.chat-switch { min-height: 48px; }
	#fullscreen-hint, #toggle-keybinds, #changelog-version { display: none !important; }
	#notification-bar { top: 42%; height: 52px; pointer-events: none; }
	#notification-bar > div { font-size: 17px; background-size: 40px; }
	#notification-bar > div::after { font-size: 17px; }
	#popup { position: absolute; inset: 0; height: 100%; }
	#popup > div { width: min(480px, 90%); padding: 20px; }
	#popup h3 { font-size: 17px; line-height: 1.3; }
	#popup p { font-size: 15px; line-height: 1.4; }
	#popup > div > div { margin: 14px auto 0; top: auto; gap: 12px; }
	#popup button { min-height: 44px; font-size: 14px; padding: 8px 18px; }
	#end-screen { position: absolute; inset: 0; height: 100%; }
	#end-screen > :first-child { position: absolute; top: 4%; left: 35%; width: 30%; height: 39%; margin: 0; background-position: center; background-repeat: no-repeat; }
	#end-screen > table { position: absolute; top: 45%; left: 15%; width: 70%; height: 24%; margin: 0; }
	#end-screen td, #end-screen tr :first-child { font-size: 17px; }
	#end-screen tbody :first-child th { font-size: 12px; }
	#end-screen .end-actions { top: auto; bottom: calc(var(--mobile-bottom) + 12px); gap: 12px; }
	#end-screen .end-actions button { min-height: 44px; min-width: 110px; padding: 10px 12px; font-size: 12px; letter-spacing: 1px; }
	#chat-layer { height: 100%; pointer-events: none; }
	#chat-button { position: fixed; left: auto; right: calc(var(--mobile-right) + 48px); top: var(--mobile-top); width: 40px; height: 40px; pointer-events: auto; }
	#chat-op-state { display: none; }
	body:has(.card-preview:not(.hide)) #chat-layer { display: none; }
	#chat-picker { top: 58px; bottom: auto; left: auto; right: var(--mobile-right); width: 330px; max-height: calc(100dvh - 70px); padding: 10px; overflow-y: auto; transform-origin: top right; }
	#chat-picker::after { display: none; }
	.chat-phrases { gap: 6px; }
	.chat-option { min-height: 44px; padding: 6px; font-size: 13px; }
	.chat-emotes { gap: 5px; padding-bottom: 8px; margin-bottom: 8px; }
	.chat-emotes > .chat-option { width: 44px; height: 44px; font-size: 25px; }
	#chat-cooldown-note { font-size: 13px; padding: 10px; }
	.chat-bubble { left: 66px; max-width: 112px; padding: 7px; font-size: 13px; }
	.chat-bubble.chat-emote { font-size: 28px; }
	#chat-bubble-op { top: 124px; }
	#chat-bubble-me { bottom: 52px; }
	#chat-log { width: var(--mobile-sidebar); height: calc(60% - 12px); top: 40%; bottom: auto; right: var(--mobile-right); left: auto; }
	#chat-log-head { min-height: 44px; font-size: 12px; flex-shrink: 0; }
	#chat-input { font-size: 16px; min-height: 40px; }
	#chat-log-list { font-size: 12px; max-height: 110px; }
	.chat-entry, #chat-log-note { font-size: 12px; }
	#feedback-modal, #changelog-modal { height: 100%; }
	.fb-panel { width: min(600px, 90%); max-height: 90dvh; overflow: auto; padding: 24px; }
	.fb-panel h2 { font-size: 19px; } .fb-intro, .fb-btn, .fb-repo { font-size: 13px; } .fb-close { font-size: 28px; padding: 10px; }
	@media (max-height: 350px) {
		#faction-description { display: none; }
		.card-contianer-title { top: 58px !important; }
		.card-array { top: 86px !important; }
		#card-leader { top: 58px; height: 68px; }
		#card-leader > div { height: 68px; }
		#deck-stats { top: 138px; }
		#leader-op { top: 111px !important; height: 36px !important; }
		#weather { top: 113px; }
		#panel-left .stats { height: 64px; }
		.stats .gem { top: 47px !important; }
		.stats .score-total { top: 24px; }
		.stats .hand-count { top: 24px !important; }
		.stats .passed { top: 49px !important; }
		#leader-me { left: 64px !important; bottom: 48px; }
	}
}