/**
 * Dica do dia — faixa entre o header e o conteúdo.
 * Vive no fluxo normal do documento: aparecer/sumir empurra a página,
 * nunca sobrepõe (não é overlay).
 */

.game-daily-tip {
	position: relative;
	overflow: hidden;
	background: var(--color-pure-white);
}

.game-daily-tip-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
	min-height: 6.25rem;
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
	position: relative; /* acima da decoração */
	z-index: 1;
}

.game-daily-tip-icon {
	width: 2rem;
	height: 2rem;
	color: var(--color-purple);
	transform: rotate(-21deg);
}

.game-daily-tip-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-24);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
}

.game-daily-tip-decor {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	color: var(--color-pastel-grey);
}

.game-daily-tip-decor-item {
	position: absolute;
	fill: currentColor;
}

.game-daily-tip-decor-star-lg { left: 3%;   top: 30%;  width: 2.375rem; height: 2.25rem; }
.game-daily-tip-decor-gift    { left: 16%;  top: 30%;  width: 3.625rem; height: 3.5rem; transform: rotate(-30deg); }
.game-daily-tip-decor-star-sm { left: 22%;  top: 12%;  width: 1.25rem;  height: 1.25rem; }
.game-daily-tip-decor-gem-lg  { right: 29%; top: -10%; width: 2.25rem;  height: 2.625rem; transform: rotate(-19deg); }
.game-daily-tip-decor-gem-sm  { right: 23%; top: 52%;  width: 1.5rem;   height: 1.75rem; }
.game-daily-tip-decor-star-md { right: 9%;  top: 38%;  width: 1.5rem;   height: 1.5rem; }

.game-daily-tip-modal {
	width: min(38.625rem, calc(100vw - var(--space-32))); /* 618px */
	max-height: calc(100vh - var(--space-64));
	margin: var(--space-32) auto auto; /* topo fixo, horizontalmente centrado */
	padding: 0;
	border: 0;
	border-radius: var(--radius-24);
	overflow: hidden;
	text-align: center;
	background: var(--color-pure-white);
}

/* display:flex só quando aberto — preserva o display:none nativo do <dialog> fechado */
.game-daily-tip-modal[open] {
	display: flex;
	flex-direction: column;
}

.game-daily-tip-modal::backdrop {
	background: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.game-daily-tip-modal-banner {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	padding: var(--space-32) var(--space-24) 0;
	background: var(--color-purple);
}

.game-daily-tip-modal-art {
	display: block;
	width: 10.25rem;
	height: auto;
}

.game-daily-tip-modal-close {
	position: absolute;
	top: var(--space-8);
	right: var(--space-8);
	color: var(--color-pure-white);
}

.game-daily-tip-modal-text {
	min-height: 0; /* permite encolher abaixo do tamanho do conteúdo quando o dialog atinge max-height */
	overflow-x: hidden; /* iframe com width fixo do oEmbed não cria scroll lateral */
	overflow-y: auto;
	max-width: 32rem;
	margin: var(--space-24) auto 0;
	padding: 0 var(--space-24);
	text-align: start;
	font-family: var(--font-body);
	font-size: var(--font-size-20);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-base);
	color: var(--color-text);
	scrollbar-width: thin;
	scrollbar-color: var(--color-pastel-grey) transparent;
}

.game-daily-tip-modal-text h2 {
	font-family: var(--font-heading);
	font-size: var(--font-size-24);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-8);
}

.game-daily-tip-modal-text > * + h2 {
	margin-top: var(--space-32);
}

/* TinyMCE insere <p><br></p> em linhas vazias — sem isto criam gap duplo antes de h2 */
.game-daily-tip-modal-text p:empty,
.game-daily-tip-modal-text p:has(> br:only-child) {
	display: none;
}

.game-daily-tip-modal-text p,
.game-daily-tip-modal-text ul,
.game-daily-tip-modal-text ol,
.game-daily-tip-modal-text figure {
	margin: 0;
}

.game-daily-tip-modal-text > * + * {
	margin-top: var(--space-16);
}

.game-daily-tip-modal-text a {
	color: var(--color-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.game-daily-tip-modal-text ul,
.game-daily-tip-modal-text ol {
	padding-left: var(--space-24);
}

/* list-style explícito — o tema pai pode ter um reset que zera isso */
.game-daily-tip-modal-text ul { list-style-type: disc; }
.game-daily-tip-modal-text ol { list-style-type: decimal; }

.game-daily-tip-modal-text li + li {
	margin-top: var(--space-4);
}

.game-daily-tip-modal-text img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-8);
}

.game-daily-tip-modal-text::-webkit-scrollbar       { width: 4px; }
.game-daily-tip-modal-text::-webkit-scrollbar-track  { background: transparent; }
.game-daily-tip-modal-text::-webkit-scrollbar-thumb  { background: var(--color-pastel-grey); border-radius: var(--radius-full); }
.game-daily-tip-modal-text::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* classes toggleadas em daily-tip.js conforme scroll */
.game-daily-tip-modal-text.has-scroll-top {
	mask-image: linear-gradient(to bottom, transparent, black 10.91%);
}
.game-daily-tip-modal-text.has-scroll-bottom {
	mask-image: linear-gradient(to top, transparent, black 10.91%);
}
.game-daily-tip-modal-text.has-scroll-top.has-scroll-bottom {
	mask-image: linear-gradient(to bottom, transparent, black 10.91%, black calc(100% - 10.91%), transparent);
}

/* width fixo vem do oEmbed — forçar 100% + aspect-ratio mantém proporção sem scroll lateral */
.game-daily-tip-modal-text iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-16);
}

.game-daily-tip-modal-claim {
	flex-shrink: 0;
	margin: var(--space-32) auto;
}

.game-daily-tip-modal-claim:disabled .game-daily-tip-modal-claim-icon { display: none; }
.game-daily-tip-modal-claim:not(:disabled) .game-daily-tip-modal-ring  { display: none; }

.game-daily-tip-modal-claim-icon {
	width: var(--space-16);
	height: var(--space-16);
}

/* JS anima stroke-dashoffset via rAF — valores iniciais em função da circunferência */

.game-daily-tip-modal-ring {
	width: 1.125rem;
	height: 1.125rem;
}

.game-daily-tip-modal-ring circle {
	fill: none;
	stroke-width: 2;
}

.game-daily-tip-modal-ring-track {
	stroke: var(--color-pastel-grey);
}

.game-daily-tip-modal-ring-fill {
	stroke: var(--color-accent);
	stroke-dasharray: 50.27; /* 2π × r(8) */
	stroke-dashoffset: 50.27;
	stroke-linecap: round;
	transform: rotate(-90deg); /* progresso começa no topo do círculo */
	transform-origin: center;
}

@media (max-width: 48rem) {
	.game-daily-tip-decor {
		display: none;
	}

	.game-daily-tip-title {
		font-size: var(--font-size-18);
	}
}