#app-boot{position:fixed;inset:0;z-index:4000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,4vh,28px);background:linear-gradient(180deg,#1e1e2a,#14141c);transition:opacity .2s ease}#app-boot.app-boot--hidden{opacity:0;pointer-events:none;visibility:hidden}#app-boot .app-boot__logo{width:clamp(88px,min(42vw,26vh),180px);height:auto;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}#app-boot .app-boot__spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;animation:app-boot-spin .75s linear infinite}@keyframes app-boot-spin{to{transform:rotate(360deg)}}#app-boot .app-boot__status{display:flex;flex-direction:column;align-items:center;gap:10px;width:300px;max-width:78vw;margin-top:4px;text-align:center}#app-boot .app-boot__title{font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif!important;font-size:17px;font-weight:700;letter-spacing:.3px;color:#e8ecf5}#app-boot .app-boot__subtitle{font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif!important;font-size:12.5px;font-weight:400;color:#e8ecf58c;min-height:1em}#app-boot .app-boot__subtitle .app-boot__inline-link{color:#7c86f5;font-weight:600;text-decoration:underline}#app-boot .app-boot__subtitle .app-boot__inline-link:hover{color:#9aa2f8}#app-boot .app-boot__bar{position:relative;width:100%;height:8px;margin-top:4px;border-radius:6px;background:#0b0f14;border:1px solid rgba(6,182,212,.22);overflow:hidden}#app-boot .app-boot__bar-fill{position:absolute;inset:0 auto 0 0;width:8%;border-radius:6px;background:linear-gradient(90deg,#0891b2,#06b6d4);box-shadow:0 0 10px #06b6d480;transition:width .35s cubic-bezier(.16,1,.3,1)}#app-boot .app-boot__bar:after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);animation:app-boot-sheen 1.3s ease-in-out infinite;z-index:2;pointer-events:none}@keyframes app-boot-sheen{0%{transform:translate(-100%)}to{transform:translate(322%)}}@media (prefers-reduced-motion: reduce){#app-boot .app-boot__spinner{animation-duration:1.5s}}#app-boot.app-boot--ended .app-boot__spinner,#app-boot.app-boot--ended .app-boot__bar{display:none}#app-boot .app-boot__action{margin-top:10px;padding:10px 22px;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif!important;font-size:13.5px;font-weight:600;color:#06222a;background:#06b6d4;border:none;border-radius:6px;cursor:pointer;transition:filter .15s ease}#app-boot .app-boot__action:hover{filter:brightness(1.12)}#app-boot .app-boot__action:focus-visible{outline:2px solid #e8ecf5;outline-offset:2px}#app-boot .app-boot__discord{display:none;position:absolute;bottom:24px;left:50%;transform:translate(-50%);align-items:center;gap:12px;padding:11px 20px;max-width:88vw;border-radius:10px;background:linear-gradient(180deg,#24242f,#191921);border:1px solid rgba(88,101,242,.35);color:#e8ecf5;text-decoration:none;font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif!important;font-size:14px;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:filter .15s ease,transform .15s ease}#app-boot.app-boot--ended .app-boot__discord{display:inline-flex}#app-boot .app-boot__discord:hover{filter:brightness(1.15);transform:translate(-50%) translateY(-2px)}#app-boot .app-boot__discord:focus-visible{outline:2px solid #5865f2;outline-offset:2px}@media (max-height: 520px){#app-boot .app-boot__discord{bottom:12px;padding:8px 16px;font-size:13px}}#app-boot .app-boot__discord svg{flex:0 0 auto;width:28px;height:auto;display:block}#landing-root .lp-slider{position:relative;width:100%}@media (max-width: 640px){#landing-root .lp-slider-button{width:36px;height:36px;font-size:18px}#landing-root .lp-slider-button.prev{left:4px}#landing-root .lp-slider-button.next{right:4px}}#landing-root .landing-swiper{position:relative;width:100%;height:100%}#landing-root .landing-swiper .swiper-pagination-bullet{background:#4fd1c5;opacity:.5;width:11px;height:11px}#landing-root .landing-swiper .swiper-pagination-bullet-active{background:#4fd1c5;opacity:1}#landing-root .lp-slider-track{display:flex;overflow-x:auto;width:100%;height:100%;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:0;margin:0;padding:0;scrollbar-width:none;-ms-overflow-style:none}#landing-root .lp-slider-track::-webkit-scrollbar{display:none}#landing-root .lp-slider-track>img{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;padding:0}#landing-root .lp-slider-dots{position:absolute;bottom:16px;left:50%;transform:translate(-50%);display:flex;justify-content:center;gap:1.1rem;z-index:20}@media (max-width: 640px){#landing-root .lp-slider-dots{bottom:12px}}#landing-root .lp-slider-dot{width:11px;height:11px;padding:0;border:0;border-radius:50%;background:#ffffff47;cursor:pointer;transition:background .2s,transform .2s}#landing-root .lp-slider-dot[aria-current=true]{background:#4fd1c5;transform:scale(1.25)}#landing-root .lp-slider-dot:before{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%)}#landing-root .lp-slider-dot{position:relative}

.phw-zoom-notice {
	position: fixed;
	/* ABAIXO da topbar, nunca por cima dela (pedido do dono, 2026-09-05:
	   "não tampe o header"). Derivado de --topbar-h e não px cravado: essa
	   variável já embute o --ui-zoom, então o banner acompanha o header quando
	   o chrome escala — mesmo racional do --idle-btn-top em ot-ui.css:68. */
	top: calc(var(--topbar-h, 62px) + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: min(560px, calc(100vw - 24px));
	padding: 10px 12px;
	border: 1px solid rgba(6, 182, 212, 0.35);
	border-radius: var(--phw-radius-md, 6px);
	background: rgba(15, 23, 42, 0.96);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	color: #e2e8f0;
	font-size: 12px;
	line-height: 1.45;
}
.phw-zoom-notice-text { display: flex; flex-direction: column; gap: 2px; }
.phw-zoom-notice-title {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--phw-accent, #06b6d4);
}
.phw-zoom-notice-close {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 1px solid rgba(6, 182, 212, 0.3);
	border-radius: var(--phw-radius-sm, 4px);
	background: transparent;
	color: #cbd5e1;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}
.phw-zoom-notice-close:hover { background: rgba(6, 182, 212, 0.15); color: #fff; }

.phw-vigor-notice {
	position: fixed;
	top: calc(var(--topbar-h, 62px) + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(560px, calc(100vw - 24px));
	padding: 12px 14px;
	border: var(--phw-border-secondary, 1px solid rgba(6, 182, 212, 0.3));
	border-radius: var(--phw-radius-md, 8px);
	background: var(--phw-bg-mid, #1a1e2e);
	box-shadow: var(--phw-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.5)), var(--phw-glow-subtle, 0 0 10px rgba(6, 182, 212, 0.2));
	color: var(--phw-text-primary, #e8ecf5);
	font-size: 12px;
	line-height: 1.4;
}
.phw-vigor-notice-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.phw-vigor-notice-title {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--phw-accent, #06b6d4);
}
.phw-vigor-notice-text > span {
	color: var(--phw-text-secondary, rgba(232, 236, 245, 0.8));
}
.phw-vigor-notice-never {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 11px;
	color: var(--phw-text-muted, rgba(232, 236, 245, 0.6));
	cursor: pointer;
	user-select: none;
}
.phw-vigor-notice-never-box {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	flex-shrink: 0;
	border: var(--phw-border-secondary, 1px solid rgba(6, 182, 212, 0.3));
	border-radius: var(--phw-radius-sm, 4px);
	background: var(--phw-bg-dark, #0f1419);
	cursor: pointer;
	position: relative;
}
.phw-vigor-notice-never-box:hover { border-color: var(--phw-accent, #06b6d4); }
.phw-vigor-notice-never-box:checked {
	background: var(--phw-accent, #06b6d4);
	border-color: var(--phw-accent, #06b6d4);
}
.phw-vigor-notice-never-box:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--phw-bg-dark, #0f1419);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.phw-vigor-notice-buy {
	flex-shrink: 0;
	min-height: 36px;
	padding: 8px 14px;
	background: var(--phw-accent, #06b6d4);
	border: none;
	color: var(--phw-bg-dark, #0f1419);
	font-weight: 700;
	font-size: 12px;
	border-radius: var(--phw-radius-sm, 4px);
	cursor: pointer;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.phw-vigor-notice-buy:hover {
	filter: brightness(1.1);
	box-shadow: var(--phw-glow-primary, 0 0 20px rgba(6, 182, 212, 0.4));
}
.phw-vigor-notice-close {
	flex-shrink: 0;
	background: transparent;
	border: none;
	color: var(--phw-text-muted, rgba(232, 236, 245, 0.6));
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
	transition: color 0.15s ease;
}
.phw-vigor-notice-close:hover { color: var(--phw-text-primary, #e8ecf5); }

.phw-baby-evolve-notice {
	position: fixed;
	top: calc(var(--topbar-h, 62px) + 96px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 99998;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: min(560px, calc(100vw - 24px));
	padding: 12px 14px;
	border: var(--phw-border-secondary, 1px solid rgba(6, 182, 212, 0.3));
	border-radius: var(--phw-radius-md, 8px);
	background: var(--phw-bg-mid, #1a1e2e);
	box-shadow: var(--phw-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.5)), var(--phw-glow-subtle, 0 0 10px rgba(6, 182, 212, 0.2));
	color: var(--phw-text-primary, #e8ecf5);
	font-size: 12px;
	line-height: 1.4;
}
.phw-baby-evolve-notice-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.phw-baby-evolve-notice-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--phw-accent, #06b6d4);
}
.phw-baby-evolve-notice-text > span {
	color: var(--phw-text-secondary, rgba(232, 236, 245, 0.8));
}
.phw-baby-evolve-notice-never {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 11px;
	color: var(--phw-text-muted, rgba(232, 236, 245, 0.6));
	cursor: pointer;
	user-select: none;
}
.phw-baby-evolve-notice-never-box {
	width: 15px;
	height: 15px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--phw-accent, #06b6d4);
	cursor: pointer;
}
.phw-baby-evolve-notice-close {
	flex-shrink: 0;
	min-width: 40px;
	min-height: 40px;
	background: transparent;
	border: var(--phw-border-secondary, 1px solid rgba(6, 182, 212, 0.3));
	border-radius: var(--phw-radius-sm, 4px);
	color: var(--phw-text-secondary, rgba(232, 236, 245, 0.8));
	font-size: 14px;
	cursor: pointer;
}
.phw-baby-evolve-notice-close:hover {
	border-color: var(--phw-accent, #06b6d4);
	color: var(--phw-accent, #06b6d4);
}
/* Celular deitado (850×380): pouca altura — sobe o banner e encolhe a folga. */
@media (max-height: 480px) {
	.phw-baby-evolve-notice {
		top: calc(var(--topbar-h, 62px) + 8px);
		padding: 8px 10px;
		gap: 8px;
	}
}

.phw-leash-modal-bg {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 6, 23, 0.6);
}
.phw-leash-modal {
	max-width: min(420px, calc(100vw - 32px));
	padding: 16px 18px;
	border: 1px solid rgba(6, 182, 212, 0.35);
	border-radius: var(--phw-radius-md, 6px);
	background: rgba(15, 23, 42, 0.98);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
	color: #e2e8f0;
	font-size: 13px;
	line-height: 1.5;
}
.phw-leash-modal-title {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--phw-accent, #06b6d4);
}
.phw-leash-modal-body { margin: 0 0 14px; }
.phw-leash-modal-ok {
	width: 100%;
	/* ≥40px: alvo de toque do STYLEGUIDE pra botão de ação. */
	min-height: 40px;
	border: 1px solid rgba(6, 182, 212, 0.45);
	border-radius: var(--phw-radius-sm, 4px);
	background: rgba(6, 182, 212, 0.15);
	color: #e2e8f0;
	font-size: 13px;
	cursor: pointer;
}
.phw-leash-modal-ok:hover { background: rgba(6, 182, 212, 0.28); }

.wallet-topbar-group {
				/* Todas as medidas dos chips vêm dos tokens do #topbar (ot-ui.css,
				   "TAMANHO DA FILEIRA DO HEADER"): eles encolhem por clamp quando a
				   fileira não cabe. O fallback em px é o valor de desktop de antes —
				   vale se este HTML for renderizado fora do header. */
				display: flex; align-items: center; gap: var(--top-gap, 6px);
			}
			/* Centraliza o chip de Premium no vão do header sem tirar o flex:1
			   do spacer (que continua empurrando os clusters de ícones). */
			.top-spacer.top-spacer-premium {
				display: flex; align-items: center; justify-content: center;
			}
			/* --wallet-chip-w é o PISO de largura dos dois chips, não a largura
			   final: com saldo alto o conteúdo empurra a pill e ela cresce. Sem
			   ele, "0" encolhia a pill até virar quase só o ícone, e as duas
			   ficavam com larguras diferentes (a de PHW tem o "+" a mais).
			   O valor vem do --top-chip-min-w: o "zoom" do #topbar encolhe o
			   header junto com a TELA, mas não com a fileira — quem cuida de o
			   chip caber é o clamp do token. Ele já cobre o caso estreito-e-alto
			   que a media query de 700px tratava à mão (e que, sendo um px
			   cravado depois do token, passaria por cima dele). */
			.wallet-topbar-group { --wallet-chip-w: var(--top-chip-min-w, 96px); }
			.wallet-chip-box {
				display: inline-flex; align-items: center; gap: var(--top-gap, 6px);
				height: var(--top-h, 40px); padding: 0 var(--top-chip-pad-x, 10px); margin: 0;
				min-width: var(--wallet-chip-w);
				background: linear-gradient(180deg, var(--phw-bg-light) 0%, var(--phw-bg-dark) 100%);
				border: var(--phw-border-secondary); border-radius: var(--phw-radius-full);
				color: var(--phw-text-primary); font-weight: 700; font-size: var(--top-pill-fs, 14px); white-space: nowrap;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
				transition: var(--phw-transition-base);
			}
			/* Ícone encostado na esquerda, valor na direita: o margin-left:auto
			   come toda a folga do piso de largura e empurra o número (e, no chip
			   de PHW, o "+" que vem depois dele) pra ponta oposta.
			   3ch reservados: o valor não redimensiona a pill a cada moeda ganha
			   entre 0 e 999, e tabular-nums impede a largura de oscilar com o
			   dígito (1 é mais estreito que 8 na Segoe UI proporcional). */
			.wallet-chip-value {
				margin-left: auto;
				min-width: 3ch; text-align: right;
				font-variant-numeric: tabular-nums;
			}
			.wallet-coins-btn { cursor: pointer; }
			.wallet-coins-btn:hover { border-color: var(--phw-accent); box-shadow: var(--phw-glow-subtle); }
			/* O wrap é só a âncora de posicionamento — a aparência de chip
			   continua inteira no <button> de dentro. inline-flex pra não virar
			   um bloco de largura 100% dentro do .wallet-topbar-group. */
			.wallet-coins-wrap { position: relative; display: inline-flex; }
			.wallet-coins-popover {
				display: none;
				position: absolute; top: 100%; left: 0;
				/* Sem gap entre o botão e esta caixa: é o que evita o popover
				   "sumir" se o mouse cruzar em diagonal em vez de reto pra
				   baixo. O respiro visual vem do padding-top, que ainda faz
				   parte da área hoverável. */
				padding-top: 8px;
				/* Este 250 só ordena o painel contra os IRMÃOS dele dentro do
				   topbar. Ele NÃO alcança a HUD — ver .wallet-popover-open. */
				z-index: 250;
			}
			.wallet-coins-wrap:hover .wallet-coins-popover,
			.wallet-coins-wrap:focus-within .wallet-coins-popover {
				display: block;
			}
			/* O popover mora DENTRO do #topbar, que é position:relative +
			   z-index:100 (ot-ui.css) — ou seja, um stacking context. Todo
			   z-index daqui de dentro é relativo à camada 100, então subir o
			   .wallet-coins-popover para 951/9999/o-que-for NÃO o tira de trás
			   do botão de automação (#depot-idle-config) nem da skill bar, que
			   são irmãos do topbar em z-index 1000. Quem precisa subir é o
			   topbar inteiro.
			   E só ENQUANTO o popover está aberto: a tela de morte
			   (.ot-death-overlay) é um overlay de viewport inteiro em
			   z-index:1000 que NÃO esconde o topbar — deixá-lo permanentemente
			   acima de 1000 faria a carteira vazar por cima do escurecido.
			   Mesmo raciocínio do teto duro de 999 do #left-dock.
			   1001 e não mais: os modais reais vivem em 2000+ e continuam
			   cobrindo o topbar. */
			#topbar.wallet-popover-open { z-index: 1001; }
			.wcp-panel {
				display: flex; flex-direction: column; gap: 10px;
				width: 220px;
				background: var(--phw-bg-mid);
				border: var(--phw-border-secondary);
				border-radius: 6px;
				padding: 12px;
				box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75);
			}
			.wcp-row { display: flex; align-items: center; gap: 9px; }
			.wcp-row img { border-radius: 50%; flex-shrink: 0; }
			/* Mesma arte da coin, só apagada — nada de puxar pra outra cor
			   (era âmbar antes; o jogo não tem paleta de aviso fora do cyan).
			   Dessaturar+escurecer é a MESMA moeda num estado "desligado", não
			   uma cor de alerta emprestada de outro produto. */
			.wcp-icon-locked { filter: saturate(0.35) brightness(0.65); opacity: 0.75; }
			.wcp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
			.wcp-label {
				font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
				color: var(--phw-text-dim); text-transform: uppercase; white-space: nowrap;
			}
			.wcp-value { font-size: 16px; font-weight: 800; color: var(--phw-text-primary); line-height: 1.2; }
			.wcp-value.dim { color: var(--phw-text-dim); }
			.wcp-help {
				position: relative; flex-shrink: 0;
				width: 16px; height: 16px; border-radius: 50%;
				background: transparent; padding: 0; font-family: inherit;
				border: 1px solid var(--phw-text-dim); color: var(--phw-text-dim);
				font-size: 10px; font-weight: 800;
				display: flex; align-items: center; justify-content: center;
				cursor: help;
			}
			.wcp-help:hover, .wcp-help:focus-visible { border-color: var(--phw-accent); color: var(--phw-accent); }
			.wcp-help-tip {
				display: none;
				position: absolute; top: calc(100% + 8px); right: 0;
				z-index: 5; width: 220px;
				background: var(--phw-bg-dark); border: var(--phw-border-secondary); border-radius: 4px;
				padding: 10px 12px;
				font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
				color: var(--phw-text-secondary); text-transform: none;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
				cursor: default;
			}
			.wcp-help:hover .wcp-help-tip, .wcp-help:focus-visible .wcp-help-tip { display: block; }
			.wcp-help-tip strong {
				display: block; color: #fff; font-size: 10px;
				letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px;
			}
			.wcp-help-tip em { display: block; margin-top: 6px; font-style: normal; font-weight: 700; color: var(--phw-accent); }
			/* Mesmo tratamento do botão irmão na sidebar da Loja
			   (.store-addcoins, StoreModalView.svelte) — cyan da casa, não uma
			   cor de call-to-action emprestada. */
			.wcp-addcoins {
				display: flex; align-items: center; justify-content: center; gap: 7px;
				background: linear-gradient(135deg, #06b6d4, #0891b2);
				border: var(--phw-border-primary); border-radius: 4px;
				color: var(--phw-bg-dark); font-weight: 800; font-size: 11px; letter-spacing: 0.03em;
				padding: 9px 10px; cursor: pointer; font-family: inherit;
				box-shadow: var(--phw-glow-subtle);
			}
			.wcp-addcoins:hover { filter: brightness(1.08); }
			.wcp-addcoins img { border-radius: 50%; flex-shrink: 0; }
			.wallet-pokedollars-box { cursor: default; }
			/* Chip de P$ CLICÁVEL (abre TRANSFERIR POKEDOLLARS). Herda toda a
			   aparência de .wallet-chip-box — aqui só o que muda por ser botão,
			   espelhando exatamente o que .wallet-coins-btn faz do outro lado
			   da fileira, pra os dois chips não divergirem no hover. */
			.wallet-pd-btn { cursor: pointer; font-family: inherit; }
			.wallet-pd-btn:hover:not(:disabled) { border-color: var(--phw-accent); box-shadow: var(--phw-glow-subtle); }
			/* Assistindo live/spy: o chip volta a ser só leitura (ver renderTopbar). */
			.wallet-pd-btn:disabled { cursor: default; }
			.wallet-pd-wrap:has(.wallet-pd-btn:disabled) .wallet-pd-tip { display: none; }
			/* Âncora da dica — mesmo papel (e mesmas razões) do
			   .wallet-coins-wrap logo acima. */
			.wallet-pd-wrap { position: relative; display: inline-flex; }
			.wallet-pd-tip {
				display: none;
				position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
				z-index: 250;
				background: var(--phw-bg-dark); border: var(--phw-border-secondary); border-radius: 4px;
				padding: 6px 10px;
				font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
				color: var(--phw-text-secondary); white-space: nowrap;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
				pointer-events: none;
			}
			.wallet-pd-wrap:hover .wallet-pd-tip,
			.wallet-pd-wrap:focus-within .wallet-pd-tip { display: block; }
			/* Botão de Premium: herda 100% do .top-icon-btn — inclusive o layout
			   de coluna (ícone 26px em cima, .top-icon-label embaixo) e o hover.
			   Nada de tamanho, posição de texto ou deslocamento da coroa mora
			   aqui: os translateY que existiam empurravam a coroa pra abrir
			   espaço pro "44d" absoluto, e com o rótulo no fluxo normal eles só
			   desalinhavam este botão dos vizinhos. */
			.wallet-premium-chip { position: relative; cursor: pointer; }
			.wallet-premium-crown { display: inline-flex; line-height: 0; }
			/* Mesmo tamanho de todo ícone do header (ot-ui.css, --top-icon). */
			.wallet-premium-crown svg { width: var(--top-icon, 26px); height: var(--top-icon, 26px); }
			/* O "44d" NÃO tem cor própria: é o rótulo deste botão e usa o mesmo
			   cinza de COLEÇÕES/AMIGOS/RANKING (.top-icon-label). Destacá-lo em
			   branco fazia o Premium saltar da fileira. */
			/* Badge de notificação da conta FREE: bolinha vermelha com "!" branco
			   no canto superior direito do botão. Fica DENTRO do botão (e não
			   transbordando em -3px) de propósito: o anel de recorte precisa da
			   cor do que está atrás, e transbordando ele cairia metade sobre o
			   botão e metade sobre o gradiente do #topbar — nenhuma cor serviria
			   pras duas. Aqui o anel casa exato com o --phw-bg-light do botão. */
			.wallet-premium-alert {
				position: absolute; top: 1px; left: 50%; margin-left: 6px;
				display: flex; align-items: center; justify-content: center;
				width: var(--top-alert, 15px); height: var(--top-alert, 15px); border-radius: 50%;
				background: #ef4444; color: #fff;
				font-size: var(--top-alert-fs, 10px); font-weight: 800; line-height: 1;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
				box-shadow: 0 0 0 2px var(--phw-bg-light), 0 1px 3px rgba(0, 0, 0, 0.5);
				pointer-events: none;
			}
			.wallet-chip-icon {
				/* O width/height 24 do <img> é atributo (renderTopbar) e não segue o
				   clamp — quem manda no tamanho é esta regra. */
				display: block; width: var(--top-chip-icon, 24px); height: var(--top-chip-icon, 24px);
				border-radius: 50%;
				box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
			}
			.wallet-plus {
				position: relative; flex-shrink: 0;
				width: var(--top-chip-plus, 20px); height: var(--top-chip-plus, 20px); border-radius: 50%;
				background: linear-gradient(135deg, #06b6d4, #0891b2);
				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
			}
			/* Cruz desenhada com pseudo-elementos: glifo "+" de fonte não centraliza
			   opticamente dentro do círculo (ascent/descent assimétricos). */
			.wallet-plus::before, .wallet-plus::after {
				content: ""; position: absolute; left: 50%; top: 50%;
				transform: translate(-50%, -50%);
				background: var(--phw-bg-dark); border-radius: 1px;
			}
			/* Metade do disco, como no desenho original (10 de 20) — em calc pra a
			   cruz encolher junto com ele em vez de engordar quando o header aperta. */
			.wallet-plus::before { width: calc(var(--top-chip-plus, 20px) * 0.5); height: 2px; }
			.wallet-plus::after { width: 2px; height: calc(var(--top-chip-plus, 20px) * 0.5); }
			/* Cadeado de coin não-transferível. Só o sinal: o número e o prazo
			   ficam no title e no painel da Loja — no topbar não cabe, e não é
			   ali que alguém decide vender coin. */
			.wallet-lock {
				font-size: 11px; line-height: 1; flex-shrink: 0;
				filter: grayscale(1) brightness(1.6);
				opacity: 0.85;
			}
			/* Botão "olho" — ÚNICO pra carteira inteira (não um por moeda):
			   esconde os dois saldos ao mesmo tempo (ver Wallet.hidden). Fica
			   FORA dos dois círculos, depois do chip de Pokedollars — irmão
			   do resto do grupo, não filho de nenhum chip. */
			.wallet-eye-btn {
				display: inline-flex; align-items: center; justify-content: center;
				flex-shrink: 0;
				width: 18px; height: 18px;
				padding: 0; margin: 0;
				border: none; border-radius: 50%;
				background: transparent;
				color: var(--phw-text-dim);
				cursor: pointer;
			}
			.wallet-eye-btn svg { width: 12px; height: 12px; }
			.wallet-eye-btn:hover, .wallet-eye-btn:focus-visible {
				color: var(--phw-accent);
				background: rgba(255, 255, 255, 0.08);
			}
			.wallet-eye-btn.is-hidden { color: var(--phw-text-secondary); }
			/* Precisa ser explícito: o "display: inline-flex" acima é regra de
			   autor e vence o "display: none" que o UA aplica a [hidden] — sem
			   isto o botão continuava visível ao ser escondido durante a TV. */
			.wallet-eye-btn[hidden] { display: none; }
			/* ≤700px (dono, 2026-10-04): o olho sai da fileira e vai pra BAIXO
			   do chip de Pokedollars, pendurado na borda inferior do header —
			   devolve à fileira a largura dele + um gap, que faltava em 667px.
			   O grupo vira a âncora; o olho é o último filho, logo alinhar à
			   direita do grupo = alinhar com o fim do chip de Pokedollars. */
			@media (max-width: 700px) {
				.wallet-topbar-group { position: relative; }
				.wallet-eye-btn {
					position: absolute; right: 0; top: 100%;
					width: 14px; height: 14px; z-index: 2;
				}
				.wallet-eye-btn svg { width: 10px; height: 10px; }
			}

.daily-gift-btn { position: relative; }
			/* Ancorado no CENTRO do botão, não no canto direito: com o rótulo
			   definindo a largura, um "right: 2px" jogaria o "!" longe do
			   presente em idioma de palavra longa. */
			.daily-gift-alert {
				position: absolute; top: 1px; left: 50%; margin-left: 6px;
				display: flex; align-items: center; justify-content: center;
				width: var(--top-alert, 15px); height: var(--top-alert, 15px); border-radius: 50%;
				background: #ef4444; color: #fff;
				font-size: var(--top-alert-fs, 10px); font-weight: 800; line-height: 1;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
				box-shadow: 0 0 0 2px var(--phw-bg-light), 0 1px 3px rgba(0, 0, 0, 0.5);
				pointer-events: none;
			}
			/* Pisca enquanto houver PRESENTE pra resgatar (mesmo sinal do "!") */
			.daily-gift-btn.has-gift-ready {
				animation: daily-gift-blink 1.4s ease-in-out infinite;
			}
			@keyframes daily-gift-blink {
				0%, 100% { opacity: 1; }
				50% { opacity: 0.4; }
			}
			@media (prefers-reduced-motion: reduce) {
				.daily-gift-btn.has-gift-ready {
					animation: none;
				}
			}

.daily-tasks-btn { position: relative; }
			/* Centro, não canto direito — mesmo motivo do daily-gift-alert. */
			.daily-tasks-alert {
				position: absolute; top: 1px; left: 50%; margin-left: 6px;
				display: flex; align-items: center; justify-content: center;
				width: var(--top-alert, 15px); height: var(--top-alert, 15px); border-radius: 50%;
				background: #ef4444; color: #fff;
				font-size: var(--top-alert-fs, 10px); font-weight: 800; line-height: 1;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
				box-shadow: 0 0 0 2px var(--phw-bg-light), 0 1px 3px rgba(0, 0, 0, 0.5);
				pointer-events: none;
			}

.game-pass-btn { position: relative; }
			.game-pass-alert {
				position: absolute; top: 1px; left: 50%; margin-left: 6px;
				display: flex; align-items: center; justify-content: center;
				width: var(--top-alert, 15px); height: var(--top-alert, 15px); border-radius: 50%;
				background: #ef4444; color: #fff;
				font-size: var(--top-alert-fs, 10px); font-weight: 800; line-height: 1;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
				box-shadow: 0 0 0 2px var(--phw-bg-light), 0 1px 3px rgba(0, 0, 0, 0.5);
				pointer-events: none;
			}

.market-alert-host { position: relative; }
			.market-alert {
				position: absolute; top: 1px; left: 50%; margin-left: 6px;
				display: flex; align-items: center; justify-content: center;
				width: var(--top-alert, 15px); height: var(--top-alert, 15px); border-radius: 50%;
				background: #ef4444; color: #fff;
				font-size: var(--top-alert-fs, 10px); font-weight: 800; line-height: 1;
				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
				box-shadow: 0 0 0 2px var(--phw-bg-light), 0 1px 3px rgba(0, 0, 0, 0.5);
				pointer-events: none;
			}

/* 'safe center': centraliza quando cabe (desktop) e cai pra start só
			   quando o painel é mais alto que a tela — um painel maior que a
			   viewport (o diálogo de venda passa de 440px contra os ~380px de um
			   celular deitado) não sai por CIMA de y=0, cujo trecho acima do zero é
			   inalcançável (nem o scroll do pai resgata). O 'flex-start' cru é
			   fallback pra navegadores sem 'safe'. Mesmo padrão de AuthGate/Starter. */
			.house-menu {
				position: fixed; inset: 0; z-index: 620;
				background: rgba(0,0,0,0.6);
				display: flex; align-items: flex-start; align-items: safe center; justify-content: center;
				padding: 12px; overflow-y: auto; overflow-x: hidden;
				font-family: Verdana, Arial, sans-serif;
			}
			.house-menu-panel {
				background: #0f1118; border: 1px solid #2a3348;
				width: min(420px, 92vw); color: #c8d0e0;
				max-height: 100%; overflow-y: auto; overflow-x: hidden;
				box-shadow: 0 12px 40px rgba(0,0,0,0.85); padding-bottom: 14px;
			}
			.house-menu-title {
				display: flex; align-items: center; gap: 9px;
				padding: 13px 16px; border-bottom: 1px solid #222a3a;
				font-size: 12px; letter-spacing: 0.08em; color: #fff; font-weight: 700;
			}
			.house-menu-title span { flex: 1; }
			/* O X usa .phw-close (styles/close-button.css) — sem estilo local. */
			.house-menu-sub { padding: 10px 16px 4px; font-size: 11px; color: #7a8498; line-height: 1.5; }
			.house-menu-options { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 4px; }
			.house-menu-opt {
				display: flex; align-items: center; gap: 10px;
				background: #121722; border: 1px solid #222a3a; color: #c8d0e0;
				padding: 11px 12px; font-size: 12px; cursor: pointer; text-align: left;
				border-radius: 3px; font-weight: 600;
			}
			.house-menu-opt:hover { border-color: #4a7cff; color: #fff; }
			.house-menu-opt.danger { color: #d9848c; }
			.house-menu-opt.danger:hover { border-color: #a04040; color: #ffb3b8; }
			.house-guest-list { padding: 8px 16px 0; max-height: 180px; overflow-y: auto; }
			.house-guest-row {
				display: flex; justify-content: space-between; align-items: center;
				background: #121722; border: 1px solid #222a3a; border-radius: 3px;
				padding: 7px 10px; font-size: 12px; margin-bottom: 5px;
			}
			.house-guest-remove {
				background: none; border: none; color: #d9848c; cursor: pointer; font-size: 14px;
			}
			.house-guest-remove:hover { color: #ff6b74; }
			/* Menu de long-press pra guardar um item colocado (mobile). Popup
			   posicionado no ponto do toque — não é overlay como .house-menu.
			   Alvos de toque grandes (44px) porque nasce pro dedo, não pro mouse. */
			.house-pickup-menu {
				position: fixed; z-index: 640;
				min-width: 200px; padding: 4px;
				background: #0f1118; border: 1px solid #2a3348; border-radius: 4px;
				box-shadow: 0 12px 30px rgba(0,0,0,0.85);
				font-family: Verdana, Arial, sans-serif;
			}
			.house-pickup-title {
				padding: 8px 12px 6px; font-size: 11px; font-weight: 700;
				color: #7a8498; letter-spacing: 0.06em; border-bottom: 1px solid #222a3a;
			}
			.house-pickup-entry {
				display: block; width: 100%; min-height: 44px;
				background: #121722; border: 1px solid #222a3a; color: #c8d0e0;
				padding: 11px 12px; margin-top: 4px; font-size: 12px; font-weight: 600;
				text-align: left; cursor: pointer; border-radius: 3px;
			}
			.house-pickup-entry:hover { border-color: #4a7cff; color: #fff; }
			.house-pickup-entry.cancel { color: #8a8f98; font-weight: 500; }
			.house-form-row { display: flex; gap: 8px; padding: 12px 16px 0; }
			.house-form-col { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 0; }
			.house-label { font-size: 10px; color: #8a96aa; letter-spacing: 0.05em; display: flex; align-items: center; gap: 5px; }
			.house-input {
				flex: 1; background: #121722; border: 1px solid #2a3348; color: #e8edf7;
				padding: 9px 10px; font-size: 12px; border-radius: 3px; outline: none;
				font-family: inherit;
			}
			.house-input:focus { border-color: #4a7cff; }
			.house-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
			.house-input[type="number"]::-webkit-outer-spin-button,
			.house-input[type="number"]::-webkit-inner-spin-button {
				-webkit-appearance: none; margin: 0;
			}
			.house-btn {
				background: #1a2030; border: 1px solid #334; color: #c8d0e0;
				padding: 10px 14px; font-size: 11px; font-weight: 700; cursor: pointer;
				border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em;
			}
			.house-btn.confirm { background: #2e7d32; border-color: #3f9944; color: #fff; }
			.house-btn.confirm:hover { filter: brightness(1.12); }
			.house-btn.danger { background: #8b3030; border-color: #a04040; color: #fff; }
			.house-btn.danger:hover { filter: brightness(1.12); }
			.house-offer-box {
				margin: 10px 16px 0; padding: 10px 12px; font-size: 11.5px; line-height: 1.6;
				background: #16202e; border: 1px solid #2a3f5c; border-radius: 3px; color: #aebfd9;
			}
			.house-price-inline { color: #f0c040; font-weight: 700; white-space: nowrap; }
			.house-price-inline img { vertical-align: -2px; }

/* ATENÇÃO: esta folha vive dentro de um template literal — NADA de crase aqui.

   O chat não entra no zoom do chrome (--ui-zoom): ele é position:fixed, e zoom
   em fixed descola o hit-test da pintura no Chrome (a mesma armadilha do
   #floating-team). Então a responsividade dele é por clamp, aqui.

   O termo de ALTURA (vh) pesa mais que o de largura de propósito: o caso ruim é
   o notebook com barra de navegação + favoritos + barra do Windows, que fica
   largo (1554) e baixo (551) — só o termo em vw mantinha o chat no tamanho de
   desktop, comendo um terço da altura útil.

   O PISO da largura (270px) não é estético: é o ponto onde as abas fixas
   (GLOBAL/LOCAL/TRADE/HELP/GUILDA) MAIS o botão de minimizar ainda cabem sem
   que o overflow hidden do painel corte o botão (era 230px até as abas
   Ajuda/Local entrarem em 562ecd2 — a partir daí o cabeçalho ficava mais
   largo que o painel e o botão ▾/▸ desaparecia, cortado pelo overflow, sem
   nenhum erro). PARTY é a 6ª aba, condicional igual GUILDA (some sem
   membership): o wrapper .phw-chat-tabs já rola horizontal quando as abas
   visíveis não cabem (ver comentário dele abaixo) — GUILDA+PARTY juntas nunca
   cortam o toggle, só empurram as abas mais antigas pra fora da rolagem. O conteúdo
   do rodapé tem tamanho de DEDO, não de tela — input e botões travados em
   40px de alvo de toque (STYLEGUIDE). Era 160px. */
.phw-chat {
	position: fixed;
	left: 12px;
	bottom: 12px;
	z-index: 900;
	width: clamp(270px, 15vw + 15vh, 380px);
	/* Container query: as regras de dentro reagem à largura DO PAINEL, não à da
	   tela. É o que faz o rodapé se reorganizar sozinho seja qual for a
	   resolução — a largura do painel já é o resultado do clamp acima, então
	   perguntar pra ele é perguntar a coisa certa. */
	container-type: inline-size;
	container-name: phwchat;
	display: flex;
	flex-direction: column;
	background: rgba(15, 20, 25, 0.45);
	border: 1px solid rgba(6, 182, 212, 0.3);
	border-radius: var(--phw-radius-md, 8px);
	box-shadow: var(--phw-shadow-md, 0 4px 16px rgba(0,0,0,0.4));
	color: var(--phw-text-primary, #e8ecf5);
	font-size: clamp(10px, 0.55vw + 0.7vh, 12px);
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}
.phw-chat:hover,
.phw-chat:focus-within { background: rgba(15, 20, 25, 0.82); }

.phw-chat-head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	border-bottom: 1px solid rgba(6, 182, 212, 0.1);
	user-select: none;
}
/* As abas são de NÚMERO VARIÁVEL: GUILDA entra/sai com a membership (setGuild)
   e a de Log é injetada à parte por HuntChatLogger, fora do controle deste
   arquivo. Sem este wrapper, mais abas do que o painel comporta empurravam o
   botão de minimizar (e qualquer aba depois dele) pra fora da caixa —
   invisível, cortado pelo overflow hidden do .phw-chat pai, sem nenhum erro no
   console. Isolar o scroll aqui, e NÃO no head, garante que o toggle nunca
   rola junto: ele é a única forma de fechar/abrir o painel, então precisa
   estar sempre alcançável, mesmo com a lista de abas transbordando. */
.phw-chat-tabs {
	flex: 1;
	min-width: 0;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
}
.phw-chat-tab {
	flex-shrink: 0;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--phw-text-muted, rgba(232,236,245,0.6));
	background: transparent;
	border: none;
	border-radius: var(--phw-radius-sm, 4px);
	cursor: pointer;
}
.phw-chat-tab.active {
	color: var(--phw-accent, #06b6d4);
	background: rgba(6, 182, 212, 0.12);
}
.phw-chat-tab:disabled { opacity: 0.4; cursor: default; }
/* Aba de canal indisponível (guilda, pra quem não tem): fora do DOM visível em
   vez de desabilitada — um botão morto pergunta "por que não posso?" a cada
   sessão; ausência não pergunta nada. */
.phw-chat-tab.hidden { display: none; }
.phw-chat-tab { position: relative; }
/* Não lida: ponto no canto da aba inativa. Não é contador — o painel guarda
   200 linhas por canal e o número exato não muda o que o jogador faz (abrir). */
.phw-chat-tab.unread::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--phw-accent, #06b6d4);
}
/* Mensagem privada RECEBIDA: a aba pisca até o jogador abrir a conversa. Não
   troca de aba sozinho (dono, 2026-10-07) — só sinaliza; o ponto estático de
   "não lida" passava batido.
   Alternância SECA, aceso/apagado, não fade (dono, 2026-10-08: "intercalando
   o background").
   SEM exceção de prefers-reduced-motion: ela existiu e deixava a aba acesa e
   PARADA pra quem tem "Mostrar animações" desligado no Windows — o dono não
   via piscar. Piscar aqui é o aviso, não enfeite. */
.phw-chat-tab.alert { animation: phw-chat-tab-blink 1s infinite; }
@keyframes phw-chat-tab-blink {
	0%, 49.9% { background: rgba(6, 182, 212, 0.6); color: #ffffff; }
	50%, 100% { background: transparent; color: var(--phw-text-muted, rgba(232,236,245,0.6)); }
}
/* Aba de conversa PRIVADA: o nick como veio, sem caixa alta nem espaçamento
   largo das abas de canal — é um nome, não um rótulo. O "x" fecha a conversa. */
.phw-chat-tab.private {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding-right: 2px;
	letter-spacing: 0;
	text-transform: none;
}
.phw-chat-tab-close {
	padding: 0 6px;
	font-size: 12px;
	line-height: 1;
	color: var(--phw-text-muted, rgba(232,236,245,0.6));
}
.phw-chat-tab-close:hover { color: #f87171; }
/* Chegou mensagem privada com o painel minimizado: sem isto ela passava batida,
   e no celular o painel já COMEÇA minimizado. */
.phw-chat-toggle { position: relative; }
.phw-chat-toggle.unread::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--phw-accent, #06b6d4);
}
.phw-chat-toggle {
	flex-shrink: 0;
	margin-left: auto;
	width: 36px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--phw-text-muted, rgba(232,236,245,0.6));
	cursor: pointer;
	font-size: 14px;
}
.phw-chat-body {
	flex: 1;
	min-height: 44px;
	max-height: clamp(56px, 17vh, 150px);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overflow-wrap: anywhere;
}
/* Um corpo por canal, empilhados no mesmo lugar: trocar de aba é trocar qual
   está visível — o histórico e a posição de rolagem de cada canal sobrevivem à
   troca (recriar as linhas perderia os dois). */
.phw-chat-body.hidden { display: none; }
.phw-chat-line { line-height: 1.4; }
.phw-chat-time { color: var(--phw-text-muted, rgba(232,236,245,0.6)); margin-right: 4px; }
.phw-chat-admin { color: #a78bfa; font-weight: 700; margin-right: 4px; }
/* Badge [HELP] do Tutor — mesmo mecanismo do [ADMIN] acima, cor própria
   (#e67e22, pedido do dono) pra não ser confundido com administração. */
.phw-chat-tutor { color: #e67e22; font-weight: 700; margin-right: 4px; }
.phw-chat-name { color: var(--phw-accent, #06b6d4); font-weight: 600; }
/* Nome de OUTRO jogador abre o menu (Abrir chat / Ver perfil / Amigo). */
.phw-chat-name.clickable { cursor: pointer; }
.phw-chat-name.clickable:hover { text-decoration: underline; }
/* Tag de cargo ([NOME]) e nome do remetente no canal de guilda: hierarquia por
   LUMINOSIDADE do próprio --phw-accent (sem glow/text-shadow) — líder mais
   claro/brilhante, sublíder no tom do accent puro, membro mais escuro. */
.phw-chat-tag { font-weight: 700; }
.phw-chat-name.rank-leader,
.phw-chat-tag.rank-leader { color: #7de8f7; }
.phw-chat-name.rank-sublider,
.phw-chat-tag.rank-sublider { color: var(--phw-accent, #06b6d4); }
.phw-chat-name.rank-membro,
.phw-chat-tag.rank-membro { color: #0e7f93; }
/* Sigla da guilda ([TAG]) — em TODOS os canais. Tom apagado de propósito: ela
   aparece em toda linha de todo membro de guilda, então competir em brilho com
   o nome (ou com o cargo, que só sai no canal de guilda) deixaria a lista
   ilegível. Sem cor por hierarquia: a sigla é da GUILDA, não do cargo. */
.phw-chat-gtag { color: var(--phw-text-secondary, rgba(232,236,245,0.8)); font-weight: 700; }
/* Nome de ADMIN em roxo — mesma cor do badge [ADMIN] e do nome sobre o
   personagem no Depot (ADMIN_NAME_COLOR, WebGLRenderer.ts).
   O roxo é a marca de "isto vem da administração": um
   jogador não consegue pintar o próprio nick (a flag adm é carimbada
   pelo servidor em chat.go, nunca vem do client). Vence a cor por cargo
   de guilda por vir DEPOIS na folha, com a mesma especificidade. */
.phw-chat-name.is-admin { color: #a78bfa; font-weight: 700; }
/* Nome de TUTOR em laranja — mesma cor do badge [HELP]. Vence a cor de cargo
   de guilda pelo mesmo motivo do admin (vem depois na folha), mas PERDE pra
   is-admin quando os dois são true (a classe é aplicada condicionalmente no
   render, nunca as duas juntas — ver GlobalChat.ts). */
.phw-chat-name.is-tutor { color: #e67e22; font-weight: 700; }
.phw-chat-lvl { color: var(--phw-text-secondary, rgba(232,236,245,0.8)); }
.phw-chat-sep { color: var(--phw-text-secondary, rgba(232,236,245,0.8)); margin-right: 4px; }
.phw-chat-text { color: var(--phw-text-primary, #e8ecf5); }
.phw-chat-line.system .phw-chat-text { color: var(--phw-primary, #8b5cf6); }
/* Anúncio (shiny/Boss Slayer): roxo com brilho, pra se destacar das linhas comuns. */
.phw-chat-line.announce .phw-chat-text {
	color: #c084fc;
	font-weight: 700;
	text-shadow: 0 0 6px rgba(192, 132, 252, 0.85), 0 0 12px rgba(147, 51, 234, 0.6);
}
/* Excluir (admin only): some por padrão, aparece no hover da linha — visível o
   tempo todo poluiria uma janela pequena onde a maioria nunca vai usar o
   botão. Alvo pequeno de propósito (não é toque primário, é ação de admin no
   desktop); focus-visible mantém acessível por teclado sem depender de hover. */
.phw-chat-del {
	margin-left: 4px;
	padding: 0 3px;
	background: transparent;
	border: none;
	color: var(--phw-text-muted, rgba(232,236,245,0.6));
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	vertical-align: middle;
}
.phw-chat-line:hover .phw-chat-del,
.phw-chat-del:focus-visible { opacity: 1; }
.phw-chat-del:hover { color: #f87171; }

.phw-chat-foot {
	display: flex;
	gap: 6px;
	padding: 6px;
	border-top: 1px solid rgba(6, 182, 212, 0.1);
}
.phw-chat-input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 10px;
	background: rgba(15, 20, 25, 0.6);
	border: 1px solid rgba(6, 182, 212, 0.3);
	border-radius: var(--phw-radius-sm, 4px);
	color: var(--phw-text-primary, #e8ecf5);
	font-size: var(--phw-font-size-sm, 12px);
	outline: none;
}
.phw-chat-input:focus { border-color: var(--phw-accent, #06b6d4); }
.phw-chat-input:disabled { opacity: 0.55; }
.phw-chat-send {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	background: linear-gradient(135deg, #06b6d4, #0891b2);
	color: var(--phw-bg-dark, #0f1419);
	border: none;
	border-radius: var(--phw-radius-sm, 4px);
	font-weight: 600;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
}
.phw-chat-send:disabled { opacity: 0.5; cursor: default; }
.phw-chat-emoji {
	min-width: 40px;
	height: 40px;
	padding: 0;
	background: rgba(15, 20, 25, 0.6);
	border: 1px solid rgba(6, 182, 212, 0.3);
	border-radius: var(--phw-radius-sm, 4px);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.phw-chat-emoji:hover:not(:disabled) { border-color: var(--phw-accent, #06b6d4); }
.phw-chat-emoji.active { border-color: var(--phw-accent, #06b6d4); background: rgba(6, 182, 212, 0.12); }
.phw-chat-emoji:disabled { opacity: 0.5; cursor: default; }
.phw-chat-hint {
	padding: 0 8px 6px;
	font-size: var(--phw-font-size-xs, 11px);
	color: var(--phw-text-muted, rgba(232,236,245,0.6));
	min-height: 14px;
}
.phw-chat.collapsed .phw-chat-body,
.phw-chat.collapsed .phw-chat-foot,
.phw-chat.collapsed .phw-chat-hint { display: none; }

/* Sem media query de largura aqui: o clamp de .phw-chat já cobre o intervalo
   inteiro de forma contínua. Os ALVOS DE TOQUE (input, enviar) ficam de fora do
   encolhimento de propósito — o STYLEGUIDE exige 40px e a economia de altura
   vem do corpo de mensagens, não dos botões. */

/* Painel MUITO estreito: o campo de texto perde utilidade antes do botão —
   abaixo disto o "ENVIAR" desce pra própria linha em vez de espremer o input. */
@container phwchat (max-width: 210px) {
	.phw-chat-foot {
		flex-wrap: wrap;
	}
	.phw-chat-send {
		width: 100%;
	}
}

/* Mobile — mesmo detector do resto da UI (ot-ui.css).
   O painel é `position: fixed` e fica FORA da lista de overlays que recebem
   `zoom: var(--ui-zoom)`, então ele não encolhe junto com o chrome: os 40px do
   input, os 40px do botão, o cabeçalho e a dica somavam ~120px, quase um terço
   de uma tela deitada de 380px.
   Encolhe só o CROMO. `.phw-chat-body` (as mensagens) fica intacto de
   propósito — é o conteúdo, e reduzi-lo seria o oposto do objetivo: sobra
   justamente pra ele a altura que o cromo devolve. */
.phw-chat {
	/* Causa raiz do desalinhamento com o dock (dono, 2026-08-20: "abas
	   desalinhadas com o Jogar") — #app tem `padding-left:
	   env(safe-area-inset-left)` pro notch (index.html/ot-ui.css), que empurra
	   #left-dock (dentro de #app) pra direita nesse valor. Este painel é
	   `position: fixed`, então ignora o padding do #app e fica sempre no
	   pixel 12 real da tela — mesmo raciocínio já usado em #floating-team pro
	   safe-area-inset-RIGHT (ver o comentário lá). Em aparelho sem recorte o
	   env() vale 0 e isto não muda nada. */
	left: calc(8px + env(safe-area-inset-left, 0px));
}

@media (max-height: 480px), (max-width: 900px) {
	.phw-chat-head {
		padding: 1px 4px;
	}
	/* Cabeçalho "mais fino e mais simples": sem o letter-spacing largo, que
	   esticava "GLOBAL" bem além do necessário. Reduzido de novo (dono,
	   2026-08-20: "abas muito grandes no mobile") — padding e fonte menores
	   ainda, as abas continuavam comendo espaço demais numa tela deitada
	   curta. */
	.phw-chat-tab {
		padding: 2px 6px;
		font-size: 9px;
		letter-spacing: 0.02em;
	}
	.phw-chat-foot {
		padding: 4px;
		gap: 4px;
	}
	.phw-chat-input {
		height: 28px;
		font-size: 11px;
	}
	.phw-chat-send {
		height: 28px;
		min-width: 32px;
		padding: 0 8px;
		font-size: 11px;
	}
	.phw-chat-emoji {
		height: 28px;
		min-width: 28px;
		font-size: 13px;
	}
	/* min-height 14px reservava uma linha mesmo com a dica vazia. */
	.phw-chat-hint {
		padding: 0 6px 3px;
		min-height: 0;
		font-size: 10px;
	}
}