.pcg-app {
	--pcg-primary: #6366f1;
	--pcg-primary-dark: #4338ca;
	--pcg-ink: #312e59;
	--pcg-surface: #f6f5fb;
	--pcg-border: rgba(49,46,89,.1);
	--pcg-bg: #2b2d33;
	--pcg-bg-text: #f3f2f8;
	--pcg-bg-text-muted: rgba(243,242,248,.65);
	/* Escala de espaçamento — usar só estes valores em padding/gap/margin novos */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--pcg-panel-max-height: 680px;
	box-sizing: border-box;
	font-family: 'Baloo 2', 'Nunito', 'Segoe UI', system-ui, sans-serif;
	color: var(--pcg-ink);
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 9px),
		repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 1px, transparent 9px),
		var(--pcg-bg);
	padding: 24px 16px;
}
.pcg-app *, .pcg-app *::before, .pcg-app *::after { box-sizing: border-box; }
.pcg-app [hidden] { display: none !important; }

/* Blindagem: anula estilos de <button> do tema/kit Elementor dentro do jogo.
   As regras dos componentes vêm prefixadas com #pcg-app pra vencer este reset. */
#pcg-app button {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	cursor: pointer;
}
#pcg-app button:hover { border: 0; background: transparent; color: inherit; }
#pcg-app button:focus { outline: none; box-shadow: none; }
#pcg-app button:focus-visible { outline: 3px solid rgba(99,102,241,.55); outline-offset: 2px; }

/* Aplicado via JS só na página onde o jogo realmente aparece (nunca no site inteiro) */
body.pcg-body-bg {
	margin: 0;
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 9px),
		repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 1px, transparent 9px),
		#2b2d33;
}

.pcg-inner {
	max-width: 1040px;
	margin: 0 auto;
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 55%, #ec4899 100%);
	border-radius: 24px;
	box-shadow: 0 16px 40px rgba(0,0,0,.35);
	overflow: hidden;
}

/* ---------- Galeria ---------- */
.pcg-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	padding: 20px;
}
.pcg-gallery-head {
	grid-column: 1 / -1;
	text-align: center;
	margin: 4px 0 10px;
}
.pcg-gallery-title {
	color: var(--pcg-bg-text);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 6px;
}
.pcg-gallery-sub {
	color: var(--pcg-bg-text-muted);
	font-size: .95rem;
	margin: 0;
}
#pcg-app .pcg-card {
	border: 1px solid var(--pcg-border);
	border-radius: 16px;
	padding: 10px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 2px 8px rgba(49,46,89,.06);
}
#pcg-app .pcg-card:hover, #pcg-app .pcg-card:focus-visible { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(49,46,89,.12); }
#pcg-app .pcg-card:active { transform: translateY(0); }
#pcg-app .pcg-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--pcg-surface);
	border-radius: 10px;
}
#pcg-app .pcg-card span {
	font-weight: 700;
	color: var(--pcg-ink);
	font-size: 1rem;
}
#pcg-app .pcg-card { position: relative; }
#pcg-app .pcg-card-del {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #ef4444;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	cursor: pointer;
	z-index: 2;
}
#pcg-app .pcg-card-upload {
	border: 2px dashed var(--pcg-primary);
	justify-content: center;
	gap: 6px;
}
#pcg-app .pcg-card-upload .pcg-upload-icon { font-size: 2.4rem; }

/* Carregando (conversão de foto via IA) */
.pcg-loading-spin {
	font-size: 3rem;
	margin-bottom: 10px;
	display: inline-block;
	animation: pcg-loading-bounce 1s ease-in-out infinite;
}
@keyframes pcg-loading-bounce {
	0%, 100% { transform: scale(1) rotate(-8deg); }
	50% { transform: scale(1.25) rotate(8deg); }
}

/* ---------- Jogo ---------- */
.pcg-board {
	display: grid;
	grid-template-columns: 88px 1fr 88px;
	gap: 16px;
	align-items: stretch;
}

/* Textura sutil de papel pros painéis brancos */
#pcg-app .pcg-canvas-page, #pcg-app .pcg-card {
	background-image: repeating-linear-gradient(45deg, rgba(49,46,89,.025) 0px, rgba(49,46,89,.025) 1px, transparent 1px, transparent 10px);
	background-color: #fff;
}

/* Paleta de cores (esquerda) */
/* Caixa de lápis: sem card branco — os lápis flutuam e as pontas invadem o papel.
   pointer-events none no container pra faixa sobreposta não roubar cliques do
   canvas; os lápis (filhos) reativam com pointer-events auto. */
.pcg-palette {
	background: transparent;
	border: none;
	padding: var(--sp-3) 26px var(--sp-3) 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	/* altura sincronizada com o canvas via ResizeObserver no JS */
	height: var(--pcg-row-h, 480px);
	align-self: center;
	margin: var(--sp-5) -30px var(--sp-5) var(--sp-4);
	position: relative;
	z-index: 3;
	pointer-events: none;
}
.pcg-palette::-webkit-scrollbar { display: none; }
.pcg-tools::-webkit-scrollbar { width: 5px; }
.pcg-tools::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,.4);
	border-radius: 999px;
}
.pcg-palette::-webkit-scrollbar-track, .pcg-tools::-webkit-scrollbar-track { background: transparent; }
#pcg-app .pcg-swatch {
	width: 100%;
	height: 30px;
	flex: 0 0 30px;
	border: none;
	border-radius: 6px 2px 2px 6px;
	cursor: pointer;
	padding: 0;
	position: relative;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
	/* brilho cilíndrico do corpo do lápis (a cor vem de background-color inline) */
	background-image: linear-gradient(to bottom, rgba(255,255,255,.4), rgba(255,255,255,0) 45%, rgba(0,0,0,.2));
	pointer-events: auto;
	overflow: visible;
	transition: transform .12s ease;
}
/* cone de madeira apontando pro papel */
#pcg-app .pcg-swatch::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 0;
	width: 18px;
	height: 100%;
	background: linear-gradient(to bottom, #f5dca8, #d9b06b);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* ponta de grafite na cor do lápis */
#pcg-app .pcg-swatch::before {
	content: "";
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 12px;
	background-color: inherit;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	z-index: 1;
}
#pcg-app .pcg-swatch:hover { transform: translateX(4px); }
#pcg-app .pcg-swatch.pcg-swatch-active {
	transform: translateX(12px);
	box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
/* metálicos: reflexo em faixas, efeito de metal polido */
#pcg-app .pcg-swatch-metal {
	background-image: linear-gradient(to bottom,
		rgba(255,255,255,.75), rgba(255,255,255,.1) 30%,
		rgba(0,0,0,.25) 52%, rgba(255,255,255,.5) 75%, rgba(0,0,0,.2));
}
/* ouro líquido — ondas de reflexo fluidas, como metal fundido */
#pcg-app .pcg-swatch-gold {
	background-image: linear-gradient(105deg,
		#8a5a00 0%, #e6b800 16%, #fff3b0 32%, #ffd700 48%,
		#a67c00 64%, #ffe066 80%, #fffbe0 90%, #d4a017 100%);
}
#pcg-app .pcg-swatch-silver {
	background-image: linear-gradient(105deg,
		#6e6e6e 0%, #bdbdbd 18%, #ffffff 34%, #d9d9d9 50%,
		#8c8c8c 66%, #f2f2f2 84%, #a9a9a9 100%);
}
#pcg-app .pcg-swatch-bronze {
	background-image: linear-gradient(105deg,
		#5c3317 0%, #a5622d 18%, #f0c9a0 34%, #cd7f32 50%,
		#7a4a1e 66%, #e8b380 84%, #9c5c28 100%);
}

/* Página / canvas — dimensiona pela largura da coluna, com teto de altura
   derivado da MESMA variável dos painéis laterais (min-width: 0 impede a
   coluna 1fr do grid de estourar pro lado) */
.pcg-canvas-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
	margin: var(--sp-5) 0;
}
.pcg-canvas-page {
	border: 1px solid var(--pcg-border);
	border-radius: 16px;
	width: 100%;
	padding: 0;
	position: relative;
	box-shadow: 0 2px 10px rgba(49,46,89,.06);
	display: flex;
	align-items: stretch;
	justify-content: center;
	overflow: hidden;
}
.pcg-title {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	font-weight: 700;
	color: var(--pcg-primary-dark);
	font-size: .95rem;
	background: rgba(255,255,255,.9);
	padding: 5px 12px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(49,46,89,.15);
	pointer-events: none;
}
.pcg-canvas-stage {
	position: relative;
	width: 100%;
	/* autoridade de altura no desktop: cabe na janela, teto compartilhado com os painéis */
	height: min(var(--pcg-panel-max-height), 74vh);
	touch-action: none;
	overflow: hidden;
	background: #fff;
}
.pcg-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
#pcg-canvas-lines { pointer-events: none; }

/* Ferramentas (direita) */
.pcg-tools {
	background: transparent;
	border: none;
	padding: var(--sp-3) var(--sp-1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-1);
	margin: var(--sp-5) var(--sp-5) var(--sp-5) 0;
	/* altura sincronizada com o canvas via ResizeObserver no JS */
	height: var(--pcg-row-h, 480px);
	align-self: center;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.4) transparent;
}
.pcg-tools-divider {
	width: 32px;
	height: 1px;
	background: rgba(255,255,255,.35);
	flex-shrink: 0;
}
#pcg-app .pcg-tool-btn {
	width: 60px;
	height: 60px;
	min-width: 60px;
	min-height: 60px;
	max-width: 60px;
	max-height: 60px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--pcg-border);
	background: #fff;
	font-size: 1.9rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(49,46,89,.1);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: transform .1s ease, box-shadow .1s ease;
}
#pcg-app .pcg-tool-btn:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(49,46,89,.12); }
#pcg-app .pcg-tool-btn.pcg-tool-active {
	background: var(--pcg-primary);
	border-color: var(--pcg-primary);
	box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
#pcg-app #pcg-tool-back { background: #ef4444; border-color: #ef4444; color: #fff; }

.pcg-brush-size {
	display: flex;
	flex-direction: row;
	gap: var(--sp-4);
	align-items: center;
}
#pcg-app .pcg-brush-dot {
	background: var(--pcg-ink);
	border-radius: 50%;
	border: 3px solid transparent;
	cursor: pointer;
	box-shadow: 0 0 0 8px transparent;
	transition: box-shadow .1s ease;
}
#pcg-app .pcg-brush-dot:hover, #pcg-app .pcg-brush-dot:focus-visible { box-shadow: 0 0 0 8px rgba(49,46,89,.06); }
#pcg-app .pcg-brush-sm { width: 12px; height: 12px; }
#pcg-app .pcg-brush-md { width: 20px; height: 20px; }
#pcg-app .pcg-brush-lg { width: 30px; height: 30px; }
#pcg-app .pcg-brush-active { border-color: var(--pcg-primary); }

/* Figurinhas */
#pcg-tool-sticker { position: relative; }
.pcg-sticker-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--pcg-border);
	box-shadow: 0 2px 4px rgba(49,46,89,.15);
	font-size: .8rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Modal de figurinhas */
.pcg-modal {
	position: fixed;
	inset: 0;
	background: rgba(49,46,89,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 16px;
}
.pcg-modal-box {
	background: #fff;
	border-radius: 18px;
	width: 100%;
	max-width: 760px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(49,46,89,.3);
	animation: pcg-modal-in .25s cubic-bezier(.34,1.56,.64,1);
}
.pcg-modal-box-narrow { max-width: 380px; }

/* Configurações */
.pcg-settings-body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: var(--sp-4);
	overflow-y: auto;
}
.pcg-settings-title {
	margin: 0 0 var(--sp-2);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pcg-bg-text-muted);
	font-weight: 700;
}
#pcg-app .pcg-settings-toggle {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	border: 1px solid var(--pcg-border);
	background: var(--pcg-primary);
	color: #fff;
	border-radius: 12px;
	padding: var(--sp-3) var(--sp-4);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}
#pcg-app .pcg-settings-toggle span { font-size: 1.3rem; }
#pcg-app .pcg-settings-toggle.pcg-settings-toggle-off { background: var(--pcg-surface); color: var(--pcg-ink); }
.pcg-music-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#pcg-app .pcg-music-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--pcg-border);
	background: var(--pcg-surface);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--pcg-ink);
	cursor: pointer;
	text-align: left;
}
#pcg-app .pcg-music-item:hover, #pcg-app .pcg-music-item:focus-visible { background: #ece9fa; }
#pcg-app .pcg-music-item.pcg-music-item-active { background: var(--pcg-primary); border-color: var(--pcg-primary); color: #fff; }
.pcg-music-icon { font-size: 1.3rem; }
@keyframes pcg-modal-in {
	from { transform: scale(.85); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}
.pcg-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--pcg-primary);
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
}
#pcg-app .pcg-modal-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.25);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}
#pcg-app .pcg-modal-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	overflow-x: auto;
	background: var(--pcg-surface);
	flex: 0 0 auto;
}
#pcg-app .pcg-modal-tab {
	flex: 0 0 auto;
	border: 1px solid var(--pcg-border);
	background: #fff;
	color: var(--pcg-primary-dark);
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	font-size: .9rem;
}
#pcg-app .pcg-modal-tab.pcg-modal-tab-active {
	background: var(--pcg-primary);
	border-color: var(--pcg-primary);
	color: #fff;
}
.pcg-modal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: 8px;
	padding: 16px;
	overflow-y: auto;
}
#pcg-app .pcg-sticker-btn {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--pcg-border);
	background: var(--pcg-surface);
	border-radius: 12px;
	font-size: 1.6rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
#pcg-app .pcg-sticker-btn:hover, #pcg-app .pcg-sticker-btn:focus-visible { background: #ece9fa; }
#pcg-app .pcg-sticker-btn.pcg-sticker-active { background: var(--pcg-primary); border-color: var(--pcg-primary); box-shadow: 0 0 0 2px #fff inset; }

/* Confirmação (limpar tudo) */
.pcg-confirm-box {
	background: #fff;
	border-radius: 20px;
	padding: 28px 24px;
	max-width: 360px;
	width: 100%;
	text-align: center;
	box-shadow: 0 16px 40px rgba(49,46,89,.3);
	animation: pcg-modal-in .25s cubic-bezier(.34,1.56,.64,1);
}
.pcg-confirm-text {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--pcg-ink);
	margin: 0 0 24px;
}
.pcg-confirm-actions {
	display: flex;
	justify-content: center;
	gap: 28px;
}
#pcg-app .pcg-confirm-btn {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: none;
	font-size: 2.2rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(49,46,89,.25);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .1s ease;
}
#pcg-app .pcg-confirm-btn:hover { transform: scale(1.06); }
#pcg-app .pcg-confirm-btn:active { transform: translateY(2px); }
#pcg-app .pcg-confirm-cancel { background: #ef4444; color: #fff; box-shadow: 0 6px 16px rgba(239,68,68,.45); }
#pcg-app .pcg-confirm-cancel:hover { background: #dc2626; color: #fff; }
#pcg-app .pcg-confirm-ok { background: #22c55e; color: #fff; box-shadow: 0 6px 16px rgba(34,197,94,.45); }
#pcg-app .pcg-confirm-ok:hover { background: #16a34a; color: #fff; }

/* Rodapé */
.pcg-footer {
	text-align: center;
	color: var(--pcg-bg-text-muted);
	font-size: .8rem;
	padding: 10px 20px 16px;
}
.pcg-footer a { color: #a5b4fc; font-weight: 700; text-decoration: underline; }

/* Aviso de rotação (mobile) */
.pcg-rotate-hint {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 20px;
	color: var(--pcg-bg-text);
	text-align: center;
}
.pcg-rotate-icon {
	font-size: 3rem;
	animation: pcg-spin 1.8s ease-in-out infinite;
}
.pcg-rotate-hint p { font-size: 1.1rem; font-weight: 700; margin: 0; }
@keyframes pcg-spin {
	0%, 100% { transform: rotate(0deg); }
	50% { transform: rotate(-90deg); }
}

/* Responsivo */
@media (max-width: 640px) {
	.pcg-board { grid-template-columns: 1fr; }
	.pcg-palette { flex-direction: row; max-height: none; overflow-x: auto; }
	#pcg-app .pcg-swatch { min-width: 38px; }
	.pcg-tools { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* Celulares/tablets (toque): ocupa a tela inteira, sempre pensado pra paisagem.
   Tamanhos fluem de dvh: encolhem no celular pra caber sem scroll, crescem no tablet. */
@media (pointer: coarse) {
	.pcg-app {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		z-index: 999999;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 6px;
	}
	body.pcg-body-bg { overflow: hidden; }
	.pcg-inner {
		flex: 1;
		display: flex;
		flex-direction: column;
		min-height: 0;
		width: 100%;
		max-width: none;
		border-radius: 12px;
		box-shadow: none;
		padding: 0;
	}
	.pcg-gallery {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		align-content: start;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 10px;
		padding: 10px;
	}
	.pcg-gallery-head { margin: 0; }
	.pcg-gallery-title { font-size: 1.1rem; }
	.pcg-gallery-sub { font-size: .75rem; }
	#pcg-app .pcg-card { padding: 6px; gap: 4px; }
	#pcg-app .pcg-card span { font-size: .8rem; }
	.pcg-game { flex: 1; display: flex; min-height: 0; }
	.pcg-board {
		flex: 1;
		display: flex;
		flex-direction: row;
		width: 100%;
		min-height: 0;
		gap: 8px;
		padding: 8px;
	}
	.pcg-palette {
		height: auto;
		max-height: none;
		align-self: stretch;
		margin: 0 -24px 0 0;
		width: clamp(60px, 13dvh, 84px);
		padding: 6px 24px 6px 4px;
		gap: 6px;
	}
	#pcg-app .pcg-swatch { height: 24px; flex: 0 0 24px; }
	#pcg-app .pcg-swatch { min-width: 0; width: 100%; }
	.pcg-tools {
		height: auto;
		max-height: none;
		align-self: stretch;
		margin: 0;
		overflow-y: auto;
		width: clamp(52px, 12dvh, 78px);
		padding: 8px 4px;
		gap: 4px;
	}
	.pcg-tools-divider { display: none; }
	#pcg-app .pcg-tool-btn {
		--pcg-btn: clamp(30px, calc((100dvh - 100px) / 9), 56px);
		width: var(--pcg-btn);
		height: var(--pcg-btn);
		min-width: var(--pcg-btn);
		min-height: var(--pcg-btn);
		max-width: var(--pcg-btn);
		max-height: var(--pcg-btn);
		font-size: calc(var(--pcg-btn) * .5);
	}
	.pcg-canvas-wrap {
		flex: 1;
		min-width: 0;
		height: 100%;
		max-height: none;
		display: flex;
		align-items: stretch;
		justify-content: center;
		margin: 0;
	}
	.pcg-canvas-page {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		min-height: 0;
		max-width: none;
		border-radius: 12px;
	}
	.pcg-canvas-stage {
		/* preenche todo o container central; o desenho é centralizado dentro do canvas via JS */
		flex: 1;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		min-height: 0;
		margin: 0;
	}
	.pcg-footer { flex: 0 0 auto; padding: 4px 0; }
}

/* Celulares em pé: pede pra girar em vez de espremer o layout */
@media (pointer: coarse) and (orientation: portrait) {
	.pcg-board { display: none; }
	.pcg-rotate-hint { display: flex; }
}