/* ---------------------------------------------------------------------------
   1. RAIZ
   --------------------------------------------------------------------------- */
:root {
	--ink:        #04100a;
	--ink-2:      #071710;
	--baize:      #0b2114;
	--baize-lit:  #10301d;
	--baize-deep: #061309;

	--gold:       #c9a227;
	--gold-hot:   #f2dfa4;
	--gold-dim:   #7a6222;
	--rule:       rgba(201, 162, 39, .38);
	--rule-soft:  rgba(201, 162, 39, .16);

	--wax:        #9c1420;
	--wax-hot:    #cf3a42;
	--wax-dark:   #4f060d;

	--vellum:     #f1e6c8;
	--vellum-2:   #ddcb9f;
	--vellum-ink: #40331a;

	--text:       #dcd2b8;
	--text-dim:   #a99f83;

	--t-comum:   #a8b0a2;
	--t-incomum: #7fb0c9;
	--t-raro:    #b58fd0;
	--t-premium: #e0a63a;
	--t-jackpot: #e2703a;

	--display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
	--body:    'Cormorant Garamond', Garamond, 'Palatino Linotype', serif;
	--hud:     'Alegreya Sans SC', 'Optima', 'Gill Sans', system-ui, sans-serif;

	--wrap: 1150px;

	--gu-rose: repeating-conic-gradient(from 0deg at 50% 50%,
		rgba(201, 162, 39, .1) 0deg .8deg, transparent .8deg 2.4deg);
	--gu-ring: repeating-radial-gradient(circle at 50% 50%,
		transparent 0 13px, rgba(201, 162, 39, .085) 13px 14px);
	--gu-hatch: repeating-linear-gradient(56deg,
		transparent 0 5px, rgba(201, 162, 39, .05) 5px 6px);
}

/* ---------------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.66;
	color: var(--text);
	background: var(--ink);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: .04em;
}
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: var(--gold-hot); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 50%; top: -60px;
	transform: translateX(-50%);
	padding: .6rem 1.3rem;
	font-family: var(--hud);
	letter-spacing: .16em;
	color: var(--ink); background: var(--gold);
	z-index: 60; transition: top .2s ease;
}
.skip-link:focus { top: 10px; }

.wrap { width: min(var(--wrap), 90vw); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   3. ORNAMENTOS
   --------------------------------------------------------------------------- */
.fleuron {
	display: inline-block;
	width: 7px; height: 7px;
	margin: 0 .1rem;
	background: var(--gold);
	transform: rotate(45deg);
	vertical-align: middle;
	box-shadow: 0 0 8px rgba(201, 162, 39, .55);
}
.fleuron--sm { width: 5px; height: 5px; }

.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	margin: clamp(1rem, 2.4vw, 1.5rem) 0;
}
.divider i {
	display: block;
	width: clamp(40px, 12vw, 120px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold));
}
.divider i:last-child { background: linear-gradient(90deg, var(--gold), var(--gold-dim), transparent); }
.divider b {
	display: block;
	width: 8px; height: 8px;
	background: var(--gold);
	transform: rotate(45deg);
	box-shadow: 0 0 10px rgba(201, 162, 39, .6);
}
.divider--tight { margin: .7rem 0; }
.divider--left { justify-content: flex-start; }

.plate {
	position: relative;
	padding: clamp(1.4rem, 3vw, 2.1rem);
	background:
		linear-gradient(180deg, rgba(16, 48, 29, .58), rgba(6, 19, 9, .72));
	border: 1px solid var(--rule);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.plate::before {
	content: "";
	position: absolute; inset: 5px;
	border: 1px solid var(--rule-soft);
	pointer-events: none;
}
.plate::after {
	content: "";
	position: absolute; inset: 5px;
	background: var(--gu-hatch);
	opacity: .5;
	pointer-events: none;
}
.plate > * { position: relative; z-index: 1; }

.plate__tag {
	font-family: var(--hud);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gold);
}
.plate__title {
	margin-top: .3rem;
	font-size: clamp(1.15rem, 2.4vw, 1.42rem);
	color: var(--gold-hot);
}
.plate__foot {
	margin-top: 1.3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--rule-soft);
	font-size: .95rem;
	color: var(--text-dim);
}

.kicker {
	font-family: var(--hud);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--gold);
}

/* ---------------------------------------------------------------------------
   4. BOTOES — chapa gravada, sem relevo de jogo
   --------------------------------------------------------------------------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .78rem 1.9rem;
	overflow: hidden;
	font-family: var(--hud);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid var(--gold);
	cursor: pointer;
	transition: color .28s ease, border-color .28s ease;
}
.btn::before {
	content: "";
	position: absolute; inset: 3px;
	border: 1px solid rgba(201, 162, 39, .3);
	pointer-events: none;
}
.btn::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--gold-hot), var(--gold));
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform .3s cubic-bezier(.3, .7, .3, 1);
	z-index: -1;
}
.btn > span { position: relative; z-index: 1; }

.btn--gold { color: var(--gold-hot); }
.btn--gold:hover:not(:disabled) { color: var(--ink); }
.btn--gold:hover:not(:disabled)::after { transform: scaleY(1); }

.btn--line { color: var(--text-dim); border-color: var(--rule); }
.btn--line:hover:not(:disabled) { color: var(--gold-hot); border-color: var(--gold); }

.btn--wide { width: min(100%, 330px); padding: .92rem 1.9rem; }

.btn:disabled { cursor: not-allowed; color: var(--text-dim); border-color: var(--rule-soft); }
.btn:disabled::after { transform: scaleY(0); }

.btn { isolation: isolate; z-index: 0; }

/* ---------------------------------------------------------------------------
   5. CARTA REGIA (hero)
   --------------------------------------------------------------------------- */
.charter {
	position: relative;
	overflow: hidden;
	padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.6rem, 6vw, 4.4rem);
	background:
		radial-gradient(ellipse 62% 48% at 50% 6%, rgba(18, 60, 36, .7) 0%, transparent 64%),
		linear-gradient(180deg, #061710 0%, var(--ink) 78%);
}
.charter__guilloche {
	position: absolute; inset: 0;
	background: var(--gu-rose), var(--gu-ring);
	-webkit-mask-image: radial-gradient(ellipse 54% 62% at 50% 36%, #000 0%, transparent 74%);
	mask-image: radial-gradient(ellipse 54% 62% at 50% 36%, #000 0%, transparent 74%);
	pointer-events: none;
}

.charter__frame {
	position: relative;
	padding: clamp(2rem, 5vw, 3.4rem) clamp(1.4rem, 5vw, 4rem) clamp(2.4rem, 5vw, 3.4rem);
	text-align: center;
	border: 1px solid var(--rule);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.charter__frame::before {
	content: "";
	position: absolute; inset: 7px;
	border: 1px solid var(--rule-soft);
	pointer-events: none;
}

.charter__crown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	font-family: var(--hud);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--gold);
}

.charter__over {
	margin-top: clamp(1.2rem, 3vw, 1.9rem);
	font-family: var(--display);
	font-size: clamp(.95rem, 2.2vw, 1.2rem);
	font-weight: 500;
	letter-spacing: .44em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.charter__title {
	margin-top: .5rem;
	font-size: clamp(2.1rem, 6.6vw, 4.6rem);
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #d8b23f;
	text-shadow:
		0 1px 0 rgba(0, 0, 0, .85),
		0 2px 1px rgba(0, 0, 0, .55),
		0 -1px 0 rgba(242, 223, 164, .28);
}

.charter__claim {
	max-width: 44ch;
	margin: 0 auto;
	font-size: clamp(1.15rem, 2.9vw, 1.6rem);
	font-style: italic;
	color: var(--vellum);
}
.charter__claim strong { font-style: normal; font-weight: 600; color: var(--gold-hot); }

.charter__sub {
	max-width: 46ch;
	margin: .7rem auto 0;
	font-size: 1.02rem;
	color: var(--text-dim);
}

.charter__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: clamp(1.6rem, 3.4vw, 2.3rem);
}

.charter__terms {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(1.8rem, 3.6vw, 2.6rem);
	border-top: 1px solid var(--rule-soft);
}
.charter__terms > div { padding: 1rem .8rem 0; }
.charter__terms > div + div { border-left: 1px solid var(--rule-soft); }
.charter__terms dt {
	font-family: var(--hud);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gold);
}
.charter__terms dd { margin-top: .2rem; font-size: .98rem; color: var(--text-dim); }

.charter__seal {
	position: absolute;
	right: clamp(-14px, -1vw, -8px);
	bottom: clamp(-20px, -2vw, -14px);
	display: flex;
	align-items: center;
	gap: .7rem;
}
.charter__seal-note {
	font-family: var(--hud);
	font-size: .72rem;
	letter-spacing: .14em;
	line-height: 1.3;
	text-align: right;
	text-transform: uppercase;
	color: var(--text-dim);
}

.waxdot {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(58px, 10vw, 72px);
	height: clamp(58px, 10vw, 72px);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #d8434a 0%, var(--wax-hot) 32%, var(--wax) 62%, var(--wax-dark) 100%);
	box-shadow:
		inset 0 2px 6px rgba(255, 255, 255, .26),
		inset 0 -8px 15px rgba(0, 0, 0, .5),
		0 10px 20px rgba(0, 0, 0, .55);
}
.waxdot__ring {
	position: absolute; inset: 7px;
	border: 1px dashed rgba(255, 200, 200, .34);
	border-radius: 50%;
}
.waxdot__mark {
	font-family: var(--display);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: rgba(255, 220, 210, .78);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------------------
   6. ARTIGOS
   --------------------------------------------------------------------------- */
.article { padding: clamp(2.8rem, 6vw, 5rem) 0; }
.article--alt { background: linear-gradient(180deg, var(--ink-2), var(--ink)); }

.article__grid {
	display: grid;
	grid-template-columns: clamp(92px, 12vw, 138px) minmax(0, 1fr);
	gap: clamp(1.2rem, 3.4vw, 3rem);
	align-items: start;
}

.article__gutter {
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.article__kicker {
	font-family: var(--hud);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.article__num {
	font-family: var(--display);
	font-size: clamp(2.4rem, 5.6vw, 3.9rem);
	font-weight: 900;
	line-height: .92;
	color: var(--gold);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
.article__stem {
	width: 1px;
	height: clamp(60px, 12vw, 130px);
	margin-top: 1rem;
	background: linear-gradient(180deg, var(--gold-dim), transparent);
}

.article__title {
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	color: var(--gold-hot);
}
.article__title--sm { font-size: clamp(1.3rem, 3vw, 1.8rem); }

.article__lede {
	max-width: 60ch;
	margin-top: .8rem;
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	color: var(--vellum);
}
.article__lede strong { font-weight: 600; color: var(--gold-hot); }

.article__note {
	max-width: 62ch;
	margin-top: .7rem;
	font-size: .97rem;
	font-style: italic;
	color: var(--text-dim);
}

/* ---------------------------------------------------------------------------
   7. O RITO — decreto + anexo
   --------------------------------------------------------------------------- */
.rite {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(1.6rem, 3.4vw, 2.8rem);
	align-items: start;
	margin-top: clamp(1.8rem, 3.6vw, 2.6rem);
}
.rite__decree { display: flex; flex-direction: column; align-items: center; }

.tally {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	padding: .5rem 1.4rem;
	border: 1px solid var(--rule);
}
.tally__label {
	font-family: var(--hud);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.tally__value {
	font-family: var(--display);
	font-size: clamp(1.7rem, 3.6vw, 2.1rem);
	font-weight: 900;
	line-height: 1;
	color: var(--gold-hot);
}

.rite__status {
	min-height: 1.5rem;
	margin-top: .9rem;
	font-family: var(--hud);
	font-size: .95rem;
	letter-spacing: .1em;
	text-align: center;
	color: var(--text-dim);
}
.rite__status.is-warn { color: #e0913f; }

.signatory {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .55rem;
	margin-top: .9rem;
}
.signatory[hidden] { display: none; }

.signatory__label {
	font-family: var(--hud);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.signatory__name {
	font-family: var(--display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--gold-hot);
}
.signatory__swap {
	padding: 0 0 1px;
	font-family: var(--hud);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-dim);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--rule);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}
.signatory__swap:hover { color: var(--gold-hot); border-bottom-color: var(--gold); }

.rite__controls {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: stretch;
	gap: .7rem;
	width: min(100%, 420px);
	margin-top: .2rem;
}
.rite__controls .btn--wide { flex: 1; width: auto; }

.soundbtn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .85rem;
	font-family: var(--hud);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-hot);
	background: transparent;
	border: 1px solid var(--rule);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}
.soundbtn:hover { border-color: var(--gold); }
.soundbtn .ico { width: 1.1rem; height: 1.1rem; }
.soundbtn__slash { opacity: 0; }
.soundbtn.is-off { color: var(--text-dim); }
.soundbtn.is-off .soundbtn__wave { opacity: 0; }
.soundbtn.is-off .soundbtn__slash { opacity: 1; }

/* ---------------------------------------------------------------------------
   8. PERGAMINHO + LACRE
   --------------------------------------------------------------------------- */
.decree {
	--rod-h:   clamp(18px, 3.6vw, 23px);
	--sheet-h: clamp(206px, 31vw, 268px);
	--closed-y: calc((var(--sheet-h) + var(--rod-h) * .58) / 2);
	--tint: var(--gold-hot);

	position: relative;
	width: 100%;
	margin: clamp(1.4rem, 3vw, 2.2rem) 0 1.1rem;
}

.decree__stage {
	position: relative;
	width: min(100%, 410px);
	height: calc(var(--sheet-h) + var(--rod-h) * 2.2);
	margin-inline: auto;
}

.decree__roll {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: auto;
	transform: translateY(var(--closed-y));
}

.decree__halo {
	position: absolute;
	top: 48%; left: 50%;
	width: clamp(230px, 46vw, 340px);
	height: clamp(230px, 46vw, 340px);
	transform: translate(-50%, -50%) scale(.2);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(242, 223, 164, .9) 0%, rgba(201, 162, 39, .38) 34%, rgba(201, 162, 39, 0) 70%);
	filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
}

.decree__rod {
	position: absolute;
	left: 0; right: 0;
	height: var(--rod-h);
	border-radius: 3px;
	background: linear-gradient(180deg,
		#efe3c4 0%, #f7efda 16%, var(--vellum-2) 46%, #bda978 76%, #8a7550 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 252, 240, .85),
		inset 0 -2px 5px rgba(92, 72, 40, .45),
		0 6px 14px rgba(0, 0, 0, .5);
	z-index: 4;
}
.decree__rod::before,
.decree__rod::after {
	content: "";
	position: absolute; top: 50%;
	width: clamp(9px, 1.8vw, 12px);
	height: clamp(24px, 4.8vw, 31px);
	transform: translateY(-50%) rotate(45deg);
	background: linear-gradient(180deg, var(--gold-hot), var(--gold) 46%, var(--gold-dim));
	box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
}
.decree__rod::before { left: -6px; }
.decree__rod::after  { right: -6px; }

.decree__rod--top    { top: 0; }
.decree__rod--bottom { top: calc(var(--rod-h) * .62); }

.decree__sheet {
	position: absolute;
	top: calc(var(--rod-h) * .55);
	left: 10px; right: 10px;
	height: var(--sheet-h);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(1.1rem, 3vw, 1.7rem);
	transform: scaleY(0);
	transform-origin: top center;
	opacity: 0;
	color: var(--vellum-ink);
	background:
		radial-gradient(ellipse at 26% 16%, #f8efd5 0%, transparent 58%),
		linear-gradient(164deg, var(--vellum) 0%, var(--vellum-2) 62%, #cdb886 100%);
	box-shadow: inset 0 0 46px rgba(120, 92, 42, .3), inset 0 8px 16px rgba(0, 0, 0, .16);
	z-index: 2;
}
.decree__sheet::before {
	content: "";
	position: absolute; inset: 9px;
	border: 1px solid rgba(120, 92, 42, .5);
	pointer-events: none;
}
.decree__sheet::after {
	content: "";
	position: absolute; inset: 13px;
	background: var(--gu-hatch);
	opacity: .9;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.decree__prize {
	position: relative;
	z-index: 2;
	text-align: center;
	opacity: 0;
}
.decree__icon { display: block; color: var(--tint); }
.decree__icon .ico { width: clamp(2.8rem, 6.6vw, 3.7rem); height: clamp(2.8rem, 6.6vw, 3.7rem); }
.decree__icon .ico svg { filter: drop-shadow(0 2px 4px rgba(70, 48, 12, .45)); }

.decree__tier {
	margin-top: .55rem;
	font-family: var(--hud);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	filter: brightness(.52) saturate(1.6);
}
.decree__name {
	margin-top: .2rem;
	font-family: var(--display);
	font-size: clamp(1.05rem, 2.6vw, 1.35rem);
	font-weight: 700;
	line-height: 1.24;
	color: #2f2510;
}

.decree__ribbon {
	position: absolute;
	top: calc(var(--rod-h) * .8);
	left: 50%;
	width: clamp(26px, 5vw, 33px);
	height: clamp(72px, 13vw, 92px);
	transform: translate(-50%, -50%);
	background: linear-gradient(90deg, var(--wax-dark) 0%, var(--wax) 34%, var(--wax-hot) 52%, var(--wax) 70%, var(--wax-dark) 100%);
	box-shadow: 0 5px 14px rgba(0, 0, 0, .5);
	z-index: 5;
}

.decree__seal {
	position: absolute;
	top: calc(var(--rod-h) * .8);
	left: 50%;
	width: clamp(76px, 15vw, 100px);
	height: clamp(76px, 15vw, 100px);
	padding: 0;
	transform: translate(-50%, -50%);
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 6;
}
.decree__seal:disabled { cursor: not-allowed; }
.decree.is-locked .decree__seal { filter: saturate(.4) brightness(.7); }

.wax { position: absolute; inset: 0; }
.wax__half {
	position: absolute; inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #d8434a 0%, var(--wax-hot) 32%, var(--wax) 62%, var(--wax-dark) 100%);
	box-shadow:
		inset 0 2px 6px rgba(255, 255, 255, .28),
		inset 0 -8px 16px rgba(0, 0, 0, .5),
		0 10px 22px rgba(0, 0, 0, .55);
}
.wax__half--l { clip-path: polygon(0 0, 53% 0, 46% 32%, 55% 60%, 48% 100%, 0 100%); }
.wax__half--r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 48% 100%, 55% 60%, 46% 32%); }

.wax__crest {
	position: absolute; inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--display);
	font-size: clamp(1.1rem, 2.6vw, 1.45rem);
	font-weight: 900;
	letter-spacing: .06em;
	color: rgba(255, 214, 196, .6);
	text-shadow: 0 2px 1px rgba(60, 4, 8, .7);
}
.wax__crest::before {
	content: "";
	position: absolute; inset: 12%;
	border: 1px dashed rgba(255, 200, 200, .3);
	border-radius: 50%;
}

.wax__shards { position: absolute; inset: 0; pointer-events: none; }
.wax__shards i {
	position: absolute;
	top: 50%; left: 50%;
	width: 8px; height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 3px 4px 2px 4px;
	background: linear-gradient(180deg, var(--wax-hot), var(--wax-dark));
	box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
	opacity: 0;
}

.decree__hint {
	margin-top: .5rem;
	font-family: var(--hud);
	font-size: .88rem;
	letter-spacing: .2em;
	text-align: center;
	text-transform: uppercase;
	color: var(--text-dim);
	transition: opacity .3s ease;
}

/* ---------------------------------------------------------------------------
   9. ANIMACAO DO SELO
   --------------------------------------------------------------------------- */
@keyframes wax-shudder {
	0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
	22%      { transform: translate(-52%, -50%) rotate(-3.5deg); }
	46%      { transform: translate(-48%, -51%) rotate(3.5deg); }
	72%      { transform: translate(-51%, -49%) rotate(-2deg); }
}
@keyframes wax-split-l {
	0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
	100% { transform: translate(-48px, 28px) rotate(-40deg); opacity: 0; }
}
@keyframes wax-split-r {
	0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
	100% { transform: translate(48px, 32px) rotate(44deg); opacity: 0; }
}
@keyframes wax-shard {
	0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); }
	16%  { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); }
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scroll-unroll {
	0%   { transform: scaleY(0);     opacity: 0; }
	14%  { opacity: 1; }
	78%  { transform: scaleY(1.035); }
	100% { transform: scaleY(1);     opacity: 1; }
}
@keyframes rod-slide { to { transform: translateY(var(--sheet-h)); } }
@keyframes roll-rise { to { transform: translateY(0); } }
@keyframes halo-bloom {
	0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.2); }
	45%  { opacity: .95; }
	100% { opacity: .3;  transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes prize-emerge {
	0%   { opacity: 0; transform: translateY(14px) scale(.86); filter: blur(6px); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.decree.is-cracking .decree__seal   { animation: wax-shudder .16s ease-in-out 1; pointer-events: none; }
.decree.is-cracking .wax__half--l   { animation: wax-split-l .26s cubic-bezier(.35, .6, .3, 1) .16s forwards; }
.decree.is-cracking .wax__half--r   { animation: wax-split-r .26s cubic-bezier(.35, .6, .3, 1) .16s forwards; }
.decree.is-cracking .wax__crest     { animation: fade-out .18s ease .16s forwards; }
.decree.is-cracking .wax__shards i  { animation: wax-shard .46s ease-out .15s forwards; }
.decree.is-cracking .decree__ribbon { animation: fade-out .34s ease .16s forwards; }

.decree.is-unrolling .decree__roll        { animation: roll-rise .87s cubic-bezier(.22, .72, .28, 1) forwards; }
.decree.is-unrolling .decree__sheet       { animation: scroll-unroll .87s cubic-bezier(.22, .72, .28, 1) forwards; }
.decree.is-unrolling .decree__rod--bottom { animation: rod-slide .87s cubic-bezier(.22, .72, .28, 1) forwards; }

.decree.is-glowing  .decree__halo  { animation: halo-bloom .45s ease-out forwards; }
.decree.is-revealed .decree__prize { animation: prize-emerge .55s cubic-bezier(.2, .7, .3, 1) forwards; }

.decree.is-cracking .decree__hint,
.decree.is-opened   .decree__hint { opacity: 0; }

/* ---------------------------------------------------------------------------
   10. ANEXO — conteudo do ticket
   --------------------------------------------------------------------------- */
.annex__list { margin-top: 1.2rem; }

.agroup + .agroup { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft); }
.agroup__tier {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--hud);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	margin-bottom: .5rem;
}
.agroup__tier::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule-soft);
}
.agroup__items { display: grid; gap: .45rem; }

.aitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.aitem.is-off { opacity: .42; }
.aitem__off {
	font-family: var(--hud);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-dim);
	white-space: nowrap;
}
.aitem__ico { display: inline-flex; }
.aitem__ico .ico { width: 1.35rem; height: 1.35rem; }
.aitem__name { font-size: 1rem; color: var(--text); }

.ico { display: inline-flex; width: 1.6rem; height: 1.6rem; flex: none; }
.ico svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------------------
   10b. ANEXO II — tabela de probabilidade
   --------------------------------------------------------------------------- */
.odds { margin-top: clamp(1.6rem, 3.4vw, 2.4rem); }

.odds__summary {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .78rem 1.1rem;
	list-style: none;
	cursor: pointer;
	border: 1px solid var(--rule);
	transition: border-color .2s ease;
}
.odds__summary::-webkit-details-marker { display: none; }
.odds__summary::marker { content: ""; }
.odds__summary:hover { border-color: var(--gold); }

.odds__summary-tag {
	flex: none;
	font-family: var(--hud);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gold);
}
.odds__summary-text { flex: 1; font-size: 1rem; color: var(--text); }
.odds__summary-mark {
	flex: none;
	width: 8px; height: 8px;
	border-right: 1px solid var(--gold);
	border-bottom: 1px solid var(--gold);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .22s ease;
}
.odds[open] .odds__summary-mark { transform: rotate(-135deg) translate(-2px, -2px); }

.odds__body { margin-top: -1px; }
.odds__intro { margin-top: 0; padding-top: 0; border-top: 0; }

.odds__scroll { margin-top: 1rem; overflow-x: auto; }
.odds__table { width: 100%; border-collapse: collapse; }
.odds__table th,
.odds__table td { padding: .48rem .6rem; text-align: left; }

.odds__table thead th {
	font-family: var(--hud);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
	border-bottom: 1px solid var(--rule);
}
.odds__table thead th:last-child { text-align: right; }

.odds__group th {
	padding-top: 1.05rem;
	font-family: var(--hud);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}
.odds__sub {
	padding-top: 1.05rem;
	font-family: var(--hud);
	font-weight: 700;
	text-align: right;
	color: var(--gold-hot);
}

.odds__name {
	font-size: .98rem;
	color: var(--text);
	border-bottom: 1px solid var(--rule-soft);
}
.odds__pct {
	font-family: var(--hud);
	text-align: right;
	color: var(--text-dim);
	border-bottom: 1px solid var(--rule-soft);
}

/* ---------------------------------------------------------------------------
   11. RELICARIO — estampilhas
   --------------------------------------------------------------------------- */
.stamps {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: clamp(1rem, 2.4vw, 1.5rem);
	margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
}

.stamp {
	position: relative;
	display: flex;
	flex-direction: column;
	--hole: 5px;
	--pitch: 14px;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
}

.stamp__body {
	position: relative;
	flex: 1;
	display: flex;
	padding: 1.15rem .9rem 1.1rem;
	text-align: center;
	background: linear-gradient(180deg, var(--baize-lit) 0%, var(--baize) 58%, var(--baize-deep) 100%);
	-webkit-mask:
		radial-gradient(var(--hole) at 50% 0,    #0000 97%, #000) 50% 0   / var(--pitch) 100% repeat-x,
		radial-gradient(var(--hole) at 50% 100%, #0000 97%, #000) 50% 100%/ var(--pitch) 100% repeat-x,
		radial-gradient(var(--hole) at 0 50%,    #0000 97%, #000) 0   50% / 100% var(--pitch) repeat-y,
		radial-gradient(var(--hole) at 100% 50%, #0000 97%, #000) 100% 50%/ 100% var(--pitch) repeat-y;
	-webkit-mask-composite: source-in;
	mask:
		radial-gradient(var(--hole) at 50% 0,    #0000 97%, #000) 50% 0   / var(--pitch) 100% repeat-x,
		radial-gradient(var(--hole) at 50% 100%, #0000 97%, #000) 50% 100%/ var(--pitch) 100% repeat-x,
		radial-gradient(var(--hole) at 0 50%,    #0000 97%, #000) 0   50% / 100% var(--pitch) repeat-y,
		radial-gradient(var(--hole) at 100% 50%, #0000 97%, #000) 100% 50%/ 100% var(--pitch) repeat-y;
	mask-composite: intersect;
}

.stamp.is-out .stamp__body { filter: grayscale(1) brightness(.52); }

.stamp__inner {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1rem .7rem .9rem;
	border: 1px solid var(--rule);
}
.stamp__inner::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--gu-rose);
	-webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
	opacity: .8;
	pointer-events: none;
}
.stamp__inner > * { position: relative; }

.stamp__tier {
	font-family: var(--hud);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
}
.stamp__ico { display: block; margin: .5rem 0 .45rem; }
.stamp__ico .ico { width: 2.3rem; height: 2.3rem; }

.stamp__name {
	font-family: var(--display);
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.26;
	color: var(--text);
}

.stamp__count {
	display: block;
	margin-top: auto;
	padding-top: .75rem;
	border-top: 1px solid var(--rule-soft);
	font-family: var(--hud);
	font-size: .8rem;
	letter-spacing: .1em;
	color: var(--text-dim);
}

.stamp__cancel {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) rotate(-13deg);
	padding: .3rem .62rem;
	font-family: var(--hud);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	white-space: nowrap;
	color: var(--wax-hot);
	background: rgba(79, 6, 13, .28);
	border: 2px solid var(--wax-hot);
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(207, 58, 66, .35);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
	z-index: 3;
}

/* ---------------------------------------------------------------------------
   12. REGISTRO DOS HEROIS
   --------------------------------------------------------------------------- */
.records {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: start;
	margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
}

.records__head { margin-bottom: 1rem; }
.records__title { font-size: clamp(1.2rem, 2.6vw, 1.5rem); color: var(--gold-hot); }
.records__sub { margin-top: .3rem; font-size: .96rem; color: var(--text-dim); }

@keyframes register-glow {
	0%, 100% { box-shadow: 0 0 18px rgba(201, 162, 39, .07), 0 18px 40px rgba(0, 0, 0, .45); }
	50%      { box-shadow: 0 0 34px rgba(201, 162, 39, .24), 0 18px 40px rgba(0, 0, 0, .45); }
}
.register { animation: register-glow 4s ease-in-out infinite; }

.register__list { border-top: 1px solid var(--rule); }

.reg {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	gap: .85rem;
	align-items: baseline;
	padding: .82rem .3rem;
	border-bottom: 1px solid var(--rule-soft);
}
.reg.is-new { animation: fade-in .5s ease; }

.reg--empty {
	display: block;
	padding: 1.1rem .3rem;
	font-style: italic;
	color: var(--text-dim);
}

.reg__num {
	font-family: var(--display);
	font-size: .86rem;
	font-weight: 700;
	color: var(--gold-dim);
}
.reg__seal {
	width: 11px; height: 11px;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, var(--wax-hot), var(--wax) 55%, var(--wax-dark));
	box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
	align-self: center;
}
.reg__text { font-size: 1rem; line-height: 1.44; color: var(--text-dim); }
.reg__who  { font-weight: 600; color: var(--gold-hot); }
.reg__what { font-style: normal; font-weight: 600; color: var(--text); }
.reg__tier {
	display: block;
	font-family: var(--hud);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--tint);
}

/* ---------------------------------------------------------------------------
   13. CRONICAS — ticker vertical
   --------------------------------------------------------------------------- */
.edicts__frame {
	position: relative;
	height: clamp(230px, 32vw, 300px);
	overflow: hidden;
	border-top: 1px solid var(--rule);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

@keyframes ticker-roll { to { transform: translateY(-50%); } }

/* O 1.5s e pausa, nao atraso tecnico: a faixa fica parada no topo antes de
   comecar a descer, para dar tempo de ler quem acabou de entrar. Vale na
   abertura da pagina e em toda rebobinada (o delay so conta na 1a volta, que e
   exatamente o que o reinicio recria). Fill-mode none: durante a pausa o
   transform e o do proprio elemento, ou seja, o topo. */
.edicts__track { animation: ticker-roll 26s linear 1.5s infinite; will-change: transform; }
.edicts__frame:hover .edicts__track,
.edicts__frame:focus-within .edicts__track { animation-play-state: paused; }

.edict {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .85rem;
	align-items: baseline;
	padding: .62rem .3rem;
	margin-bottom: 0;
	border-bottom: 1px solid var(--rule-soft);
}
.edict__time {
	font-family: var(--hud);
	font-size: .8rem;
	letter-spacing: .12em;
	color: var(--gold-dim);
}
.edict__text { font-size: .98rem; line-height: 1.4; color: var(--text-dim); }
.edict__who  { font-weight: 600; color: var(--text); }
.edict__what { font-weight: 600; }

/* A costura da volta. O ticker roda com a lista duplicada, entao sem uma marca
   o mesmo nome reaparece alguns segundos depois e le como dois premios. A
   costura fecha o rol e anuncia o recomeco. */
.edict--seam {
	display: block;
	padding: 1rem .3rem 1.1rem;
	border-bottom: 1px solid var(--rule);
}
.edict--seam .divider { margin: 0; }
.edict--seam .divider i { width: clamp(24px, 8vw, 70px); }

.edict__seam {
	font-family: var(--hud);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--gold-dim);
}

/* ---------------------------------------------------------------------------
   14. ASSINATURA (rodape)
   --------------------------------------------------------------------------- */
.signature {
	padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(2.6rem, 5vw, 3.6rem);
	background: linear-gradient(180deg, var(--ink), #030b06);
	border-top: 1px solid var(--rule-soft);
}
.signature__inner { text-align: center; }
.signature__line {
	font-family: var(--display);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
}
.signature__meta { margin-top: .6rem; font-size: .94rem; color: var(--text-dim); }

/* ---------------------------------------------------------------------------
   15. MODAL
   --------------------------------------------------------------------------- */
.modal {
	position: fixed; inset: 0;
	display: grid;
	place-items: center;
	padding: 1.2rem;
	z-index: 50;
}
.modal[hidden] { display: none; }

.modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(2, 8, 4, .84);
	backdrop-filter: blur(3px);
	animation: fade-in .25s ease;
}

@keyframes modal-rise {
	from { opacity: 0; transform: translateY(18px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__card {
	position: relative;
	width: min(440px, 100%);
	padding: clamp(1.8rem, 4vw, 2.6rem);
	text-align: center;
	background: linear-gradient(180deg, #0f2c1b, #061309);
	border: 1px solid var(--gold-dim);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .7);
	animation: modal-rise .38s cubic-bezier(.2, .7, .3, 1);
}
.modal__card::before {
	content: "";
	position: absolute; inset: 6px;
	border: 1px solid var(--rule-soft);
	pointer-events: none;
}
.modal__card > * { position: relative; }

.modal__close {
	position: absolute; top: .4rem; right: .6rem;
	padding: .3rem .6rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--text-dim);
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 2;
}
.modal__close:hover { color: var(--gold-hot); }

.modal__icon { display: block; color: var(--gold-hot); }
.modal__icon .ico { width: clamp(3rem, 7vw, 3.9rem); height: clamp(3rem, 7vw, 3.9rem); }

.modal__tier {
	margin-top: .7rem;
	font-family: var(--hud);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
}
.modal__title {
	margin-top: .25rem;
	font-size: clamp(1.25rem, 3vw, 1.65rem);
	color: var(--vellum);
}
.modal__where { margin: 1rem 0 1.7rem; font-size: 1rem; color: var(--text-dim); }
.modal__where strong { font-weight: 600; color: var(--gold-hot); }
.modal__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

.field {
	width: 100%;
	padding: .7rem .9rem;
	font-family: var(--body);
	font-size: 1.05rem;
	color: var(--text);
	background: rgba(4, 16, 10, .85);
	border: 1px solid var(--rule);
	border-radius: 0;
}
.field:focus-visible { border-color: var(--gold); }

.field option { color: #1b1206; background: var(--vellum); }

.field__error {
	min-height: 1.2rem;
	margin: .55rem 0 1.2rem;
	font-family: var(--hud);
	font-size: .86rem;
	letter-spacing: .06em;
	color: #e0913f;
}

/* ---------------------------------------------------------------------------
   16. RESPONSIVO
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.rite    { grid-template-columns: minmax(0, 1fr); }
	.records { grid-template-columns: minmax(0, 1fr); }
	.annex   { max-width: 540px; margin-inline: auto; }
}

@media (max-width: 720px) {
	body { font-size: 18px; }

	.article__grid { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
	.article__gutter {
		position: static;
		flex-direction: row;
		align-items: baseline;
		gap: .6rem;
	}
	.article__num { font-size: 2.1rem; }
	.article__stem { display: none; }

	.charter__terms { grid-template-columns: minmax(0, 1fr); }
	.charter__terms > div { padding: .8rem 0; }
	.charter__terms > div + div { border-left: 0; border-top: 1px solid var(--rule-soft); }

	.charter__seal {
		position: static;
		justify-content: center;
		margin-top: 1.8rem;
	}
	.charter__seal-note { text-align: left; }

	.charter__actions .btn,
	.modal__actions .btn { width: 100%; }

	.tally { width: 100%; justify-content: space-between; }
	.btn--wide { width: 100%; }

	.stamps { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.stamp__name { font-size: .88rem; }
	.stamp__inner { padding: .9rem .5rem .8rem; }

	.decree { padding-inline: 8px; }

	.edict { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* ---------------------------------------------------------------------------
   17. MOVIMENTO REDUZIDO
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.register,
	.reg.is-new,
	.modal__card,
	.modal__backdrop { animation: none !important; }

	.btn, .btn::after { transition: none; }

	.edicts__track { animation: none; }
	.edicts__frame { overflow-y: auto; }

	.decree.is-cracking .decree__seal,
	.decree.is-cracking .wax__half--l,
	.decree.is-cracking .wax__half--r,
	.decree.is-cracking .wax__crest,
	.decree.is-cracking .wax__shards i,
	.decree.is-cracking .decree__ribbon { animation: none; }

	.decree.is-unrolling .decree__seal,
	.decree.is-unrolling .decree__ribbon { opacity: 0; }

	.decree.is-unrolling .decree__roll {
		animation: none;
		transform: translateY(0);
	}
	.decree.is-unrolling .decree__sheet {
		animation: none;
		transform: scaleY(1);
		opacity: 1;
	}
	.decree.is-unrolling .decree__rod--bottom {
		animation: none;
		transform: translateY(var(--sheet-h));
	}
	.decree.is-glowing .decree__halo { animation: none; opacity: 0; }
	.decree.is-revealed .decree__prize { animation: fade-in .22s ease forwards; }
}