/* ==========================================================================
   STYLE GUIDE — componentes de interface inspirados em MMORPG clássico
   (os componentes reutilizáveis ficam aqui; os básicos estão em main.css)
   ========================================================================== */

.sg { display: grid; grid-template-columns: 230px 1fr; gap: var(--s-7); padding-block: var(--s-7); align-items: start; }
@media (max-width: 1000px) { .sg { grid-template-columns: 1fr; } }

/* ---------- Índice lateral (livro de feitiços) ---------- */
.sg-nav {
	position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto;
	padding: var(--s-4);
	background: linear-gradient(180deg, var(--tumba), var(--noite));
	border: 1px solid var(--ouro-700);
	box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px rgba(226, 177, 60,.25), var(--sombra);
	scrollbar-width: thin; scrollbar-color: var(--ouro-700) transparent;
}
.sg-nav__title { display: flex; align-items: center; gap: .5em; font-family: var(--f-titulo); color: var(--ouro-300); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; margin-bottom: var(--s-3); }
.sg-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sg-nav a {
	display: flex; align-items: center; gap: .6em; padding: .4rem .6rem;
	font-size: var(--t-sm); color: var(--papiro-300); text-decoration: none;
	border-left: 2px solid transparent; transition: .15s;
}
.sg-nav a .icon { color: var(--ouro-700); }
.sg-nav a:hover, .sg-nav a.is-current { color: var(--ouro-100); background: rgba(226, 177, 60,.1); border-left-color: var(--ouro-500); }
.sg-nav a.is-current .icon { color: var(--ouro-300); }
@media (max-width: 1000px) {
	.sg-nav { position: static; max-height: none; }
	.sg-nav ol { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ---------- Seções ---------- */
.sg-content { min-width: 0; }
.sg-section { padding-bottom: var(--s-8); margin-bottom: var(--s-7); border-bottom: 1px solid rgba(226, 177, 60,.15); }
.sg-head { display: flex; gap: var(--s-5); align-items: flex-start; margin-bottom: var(--s-6); scroll-margin-top: 100px; }
.sg-head__num {
	flex: none; display: grid; place-items: center; width: 60px; height: 60px;
	font-family: var(--f-display); font-weight: 900; font-size: 1.2rem; color: var(--obsidiana);
	background: radial-gradient(circle at 35% 30%, var(--ouro-100), var(--ouro-500) 55%, var(--ouro-700));
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.sg-head__title { font-family: var(--f-display); font-size: var(--t-2xl); margin: 0 0 var(--s-2); }
.sg-head__lead { color: var(--texto-suave); margin: 0; max-width: 720px; }
.sg-head__lead code, .sg :not(pre) > code, .sg-table code { font-family: Consolas, monospace; font-size: .85em; padding: .1em .35em; background: rgba(226, 177, 60,.1); border: 1px solid rgba(226, 177, 60,.25); color: var(--ouro-100); border-radius: 3px; }
.sg-note { font-size: var(--t-sm); color: var(--texto-suave); font-style: italic; }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.sg-demo { display: grid; gap: var(--s-5); padding: var(--s-6); margin-bottom: var(--s-5); background: rgba(0,0,0,.3); border: 1px dashed rgba(226, 177, 60,.3); }
.sg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 760px) { .sg-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Inspiração ---------- */
.sg-moodboard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-5); }
@media (max-width: 760px) { .sg-moodboard { grid-template-columns: 1fr; } }
.sg-mood { position: relative; padding: var(--s-6); overflow: hidden; }
.sg-mood ul { margin: 0; padding-left: 1.2rem; }
.sg-mood li { margin-bottom: .3rem; }
.sg-mood__glyphs { position: absolute; right: -10px; top: -14px; font-family: var(--f-glifo); font-size: 4.5rem; opacity: .12; letter-spacing: .1em; white-space: nowrap; }
.sg-mood--egito { color: var(--texto-escuro); background: linear-gradient(160deg, var(--papiro-100), var(--papiro-500)); box-shadow: 0 0 0 4px var(--tumba), 0 0 0 5px var(--ouro-700); }
.sg-mood--egito h3 { color: var(--lapis-700); }
.sg-mood--mmo { background: linear-gradient(160deg, #1b2244, #0a0d1c); border: 1px solid var(--lapis-500); box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px rgba(127,156,240,.35); }
.sg-mood--mmo h3 { color: var(--lapis-300); }
.sg-mood--mmo .sg-mood__glyphs { font-family: var(--f-titulo); }
.sg-mood__refs { font-size: var(--t-sm); color: var(--turquesa-300); }
.sg-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.sg-principles > div { padding: var(--s-4); border-top: 2px solid var(--ouro-500); background: rgba(226, 177, 60,.06); }
.sg-principles strong { display: block; font-family: var(--f-titulo); color: var(--ouro-300); margin-bottom: .3rem; }
.sg-principles span { font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------- Paleta ---------- */
.sg-palette { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-5); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid rgba(226, 177, 60,.1); }
.sg-palette__info h3 { margin: 0; font-size: 1.05rem; }
.sg-palette__info p { margin: 0; font-size: var(--t-xs); color: var(--texto-suave); }
.sg-palette__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
@media (max-width: 640px) { .sg-palette { grid-template-columns: 1fr; } }
.swatch {
	display: flex; flex-direction: column; gap: 2px; padding: 0 0 .4rem; text-align: left; cursor: pointer;
	background: #080a12; border: 1px solid rgba(226, 177, 60,.25); color: var(--texto); font: inherit;
	transition: transform .15s, border-color .15s;
}
.swatch:hover { transform: translateY(-3px); border-color: var(--ouro-300); }
.swatch__chip { height: 58px; background: var(--sw); box-shadow: inset 0 -1px 0 rgba(255,255,255,.1); }
.swatch__name { padding: 0 .5rem; font-family: var(--f-titulo); font-weight: 700; font-size: .78rem; }
.swatch code { margin: 0 .5rem; padding: 0; background: none; border: 0; font-size: .72rem; color: var(--texto-suave); }
.sg-ratio { display: flex; height: 54px; margin-top: var(--s-5); border: 1px solid var(--ouro-700); overflow: hidden; }
.sg-ratio span { display: grid; place-items: center; font-family: var(--f-titulo); font-size: .72rem; font-weight: 700; color: var(--papiro-100); white-space: nowrap; overflow: hidden; }

/* ---------- Slots (base de inventário, ação, raridade) ---------- */
.slot {
	--c: var(--r-comum);
	position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none;
	color: var(--c);
	background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), linear-gradient(180deg, #0e1223, #05060c);
	border: 2px solid color-mix(in srgb, var(--c) 80%, #000);
	box-shadow: inset 0 0 10px color-mix(in srgb, var(--c) 35%, transparent), 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.6);
	border-radius: 3px;
}
.slot .icon { width: 58%; height: 58%; }
.slot--lg { width: 72px; height: 72px; }
.slot--empty { background: linear-gradient(180deg, #05060c, #0a0d18); border-color: #181f3b; box-shadow: inset 0 3px 8px rgba(0,0,0,.9), 0 0 0 1px #000; }
.slot__qty { position: absolute; right: 3px; bottom: 1px; font-family: var(--f-titulo); font-weight: 800; font-size: .72rem; color: #fff; text-shadow: 0 0 2px #000, 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
.rarity-comum { --c: var(--r-comum); }
.rarity-incomum { --c: var(--r-incomum); }
.rarity-raro { --c: var(--r-raro); }
.rarity-epico { --c: var(--r-epico); }
.rarity-lendario { --c: var(--r-lendario); }
.rarity-divino { --c: var(--r-divino); }
.rarity-divino.slot { animation: divino 2.4s ease-in-out infinite; }
@keyframes divino { 50% { box-shadow: inset 0 0 14px rgba(247, 217, 127,.6), 0 0 0 1px #000, 0 0 18px rgba(247, 217, 127,.55); } }

/* ---------- Raridade ---------- */
.sg-rarity { display: grid; gap: var(--s-2); }
.rarity-row {
	display: grid; grid-template-columns: auto 1fr auto 90px; gap: var(--s-4); align-items: center;
	padding: var(--s-3) var(--s-4);
	background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 60%);
	border-left: 3px solid var(--c);
}
.rarity-row__name { display: block; font-family: var(--f-titulo); color: var(--c); font-size: 1.05rem; }
.rarity-row__desc { font-size: var(--t-sm); color: var(--texto-suave); }
.rarity-row code { text-align: right; }
@media (max-width: 600px) { .rarity-row { grid-template-columns: auto 1fr; } .rarity-row .badge, .rarity-row code { display: none; } }
.txt-lendario { color: var(--r-lendario); }

/* ---------- Tipografia ---------- */
.sg-type { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.sg-type__row { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-5); align-items: center; padding: var(--s-4); background: rgba(0,0,0,.25); }
@media (max-width: 700px) { .sg-type__row { grid-template-columns: 1fr; } }
.sg-type__meta strong { display: block; color: var(--ouro-300); font-family: var(--f-titulo); }
.sg-type__meta span { font-size: var(--t-xs); color: var(--texto-suave); }
.sg-type__sample { margin: 0; }
.sg-type__sample--display { font-family: var(--f-display); font-weight: 900; font-size: var(--t-3xl); line-height: 1.1; background: linear-gradient(180deg, var(--ouro-100), var(--ouro-500) 60%, var(--ouro-700)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sg-type__sample--titulo { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-2xl); color: var(--ouro-300); }
.sg-type__sample--texto { font-size: var(--t-lg); }
.sg-type__sample--glifo { font-family: var(--f-glifo); font-size: 2.2rem; color: var(--ouro-500); letter-spacing: .3em; }
.sg-scale { display: grid; gap: 2px; }
.sg-scale__row { display: grid; grid-template-columns: 90px 120px 1fr; gap: var(--s-4); align-items: baseline; padding: .3rem 0; border-bottom: 1px solid rgba(226, 177, 60,.08); }
.sg-scale__label { font-size: var(--t-xs); color: var(--texto-suave); }
.sg-scale__ex { font-family: var(--f-titulo); color: var(--ouro-300); line-height: 1.1; }

/* ---------- Tabelas ---------- */
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: rgba(0,0,0,.25); }
.sg-table th { text-align: left; padding: .6rem .8rem; font-family: var(--f-titulo); color: var(--ouro-300); background: var(--tumba); border-bottom: 2px solid var(--ouro-700); }
.sg-table td { padding: .55rem .8rem; border-bottom: 1px solid rgba(226, 177, 60,.12); }
.sg-table--voz td:first-child { color: var(--cornalina-300); text-decoration: line-through; text-decoration-color: rgba(236,138,111,.5); }
.sg-table--voz td:last-child { color: var(--r-incomum); font-weight: 700; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--d); margin-right: .5em; box-shadow: 0 0 6px var(--d); }

/* ---------- Janelas ---------- */
.sg-window { border: 1px solid var(--ouro-700); box-shadow: 0 0 0 1px #000, var(--sombra); background: linear-gradient(180deg, #101426, #080b14); }
.sg-window__bar {
	display: flex; align-items: center; justify-content: space-between; padding: .45rem .5rem .45rem .9rem;
	font-family: var(--f-titulo); font-weight: 700; font-size: .9rem; color: var(--ouro-100);
	background: linear-gradient(180deg, var(--ouro-700), var(--ouro-900)); border-bottom: 1px solid #000;
	text-shadow: 0 1px 0 #000;
}
.sg-window__bar button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; color: var(--papiro-100); background: var(--cornalina-700); border: 1px solid #000; cursor: pointer; }
.sg-window__bar button .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.sg-window__body { padding: var(--s-4); }
.sg-window--lapis .sg-window__bar { background: linear-gradient(180deg, var(--lapis-500), var(--lapis-900)); }
.sg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: 0; }
.sg-stats > div { text-align: center; padding: var(--s-2); background: #05060c; border: 1px solid var(--ouro-900); }
.sg-stats dt { font-family: var(--f-titulo); font-size: .72rem; color: var(--texto-suave); letter-spacing: .15em; }
.sg-stats dd { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; color: var(--ouro-300); }
.sg-npc { font-size: var(--t-sm); }
.sg-npc strong { color: var(--vigor); }

/* ---------- Barras / retratos ---------- */
.sg-bars { display: grid; gap: var(--s-2); }
.sg-bars .btn { justify-self: start; display: inline-flex; }
.sg-bars { grid-template-columns: 1fr; }
.sg-frames { display: grid; gap: var(--s-5); }
.unit-frame--inimigo { border-color: var(--cornalina-500); }
.unit-frame--inimigo .unit-frame__portrait { background: radial-gradient(circle at 35% 30%, #1f3075, #1a0805 70%); box-shadow: 0 0 0 3px var(--cornalina-500), 0 0 0 5px #000, 0 0 0 6px var(--cornalina-700), 0 0 24px rgba(210,58,42,.4); color: var(--cornalina-300); }
.unit-frame--inimigo .unit-frame__name { color: var(--cornalina-300); }
.unit-frame--inimigo .unit-frame__title { color: var(--r-lendario); }
.unit-frame--inimigo .unit-frame__lvl { background: radial-gradient(circle at 35% 30%, #ff9a7a, var(--cornalina-500) 60%, var(--cornalina-700)); color: #fff; }
.nameplate { width: 180px; margin-inline: auto; text-align: center; }
.nameplate__name { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: .85rem; color: var(--hp); text-shadow: 0 1px 2px #000; margin-bottom: 2px; }
.bar.is-hit { animation: hit .35s; }
@keyframes hit { 25% { transform: translateX(-4px); filter: brightness(1.6); } 75% { transform: translateX(4px); } }

/* ---------- Barra de ação ---------- */
.action-bar {
	display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; width: fit-content; margin: 0 auto;
	padding: 10px 14px;
	background: linear-gradient(180deg, #181f3b, #090b16);
	border: 1px solid var(--ouro-700);
	box-shadow: inset 0 0 0 2px #000, inset 0 0 0 3px rgba(226, 177, 60,.3), var(--sombra);
	border-radius: 6px;
}
.slot--skill { width: 60px; height: 60px; cursor: pointer; padding: 0; font: inherit; overflow: hidden; }
.slot--skill:hover { filter: brightness(1.25); }
.slot--skill:active { transform: scale(.94); }
.slot__key {
	position: absolute; top: 2px; left: 3px; font-family: var(--f-titulo); font-weight: 800; font-size: .66rem;
	color: var(--papiro-100); text-shadow: 0 0 2px #000, 0 1px 0 #000; background: none; border: 0; padding: 0; box-shadow: none;
}
.slot__cd {
	position: absolute; inset: 0; pointer-events: none;
	background: conic-gradient(rgba(0,0,0,.72) var(--cd, 0%), transparent 0);
	display: grid; place-items: center; font-family: var(--f-titulo); font-weight: 800; font-size: 1.1rem; color: #fff; text-shadow: 0 0 4px #000;
}
.slot--skill.is-cooling { cursor: not-allowed; }

/* ---------- Tooltip de item ---------- */
.sg-tooltip-demo { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: flex-start; }
.item-tooltip {
	display: flex; flex-direction: column; gap: 2px; width: 300px; padding: .8rem 1rem;
	font-size: .9rem; line-height: 1.35;
	background: linear-gradient(180deg, rgba(12,14,28,.97), rgba(5,6,12,.97));
	border: 1px solid #7a7a8a; border-radius: 5px;
	box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.6);
}
.item-tooltip__name { font-family: var(--f-titulo); font-size: 1.1rem; color: var(--c, var(--r-raro)); }
.item-tooltip__bind, .item-tooltip__row { color: #fff; }
.item-tooltip__row { display: flex; justify-content: space-between; }
.item-tooltip__stat { color: var(--r-incomum); }
.item-tooltip__stat--neg { color: #ff4b4b; }
.item-tooltip__effect { color: var(--r-incomum); margin-top: .3rem; }
.item-tooltip__flavor { color: var(--ouro-300); margin-top: .3rem; }
.item-tooltip__req { color: #fff; margin-top: .3rem; }
.item-tooltip__set { color: var(--vigor); margin-top: .3rem; }
.item-tooltip__price { color: #fff; display: flex; align-items: center; gap: .3em; }
.coin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset -1px -1px 0 rgba(0,0,0,.4), 0 0 0 1px #000; }
.coin--ouro { background: radial-gradient(circle at 35% 30%, #fff3c9, #e2b13c); }
.coin--prata { background: radial-gradient(circle at 35% 30%, #fff, #a8a8b0); }
.coin--cobre { background: radial-gradient(circle at 35% 30%, #ffc49a, #b0602a); }

/* ---------- Inventário ---------- */
.sg-grid-2--inv { grid-template-columns: auto 1fr; }
@media (max-width: 860px) { .sg-grid-2--inv { grid-template-columns: 1fr; } }
.inventory-grid { padding: var(--s-5); }
.inventory-grid__head { display: flex; justify-content: space-between; margin-bottom: var(--s-3); font-family: var(--f-titulo); }
.inventory-grid__head strong { color: var(--ouro-300); }
.inventory-grid__head span { color: var(--texto-suave); font-size: var(--t-sm); }
.inventory-grid__slots { display: grid; grid-template-columns: repeat(6, 52px); gap: 4px; }
@media (max-width: 420px) { .inventory-grid__slots { grid-template-columns: repeat(5, 52px); } }
.inventory-grid__gold { display: flex; align-items: center; gap: .4em; justify-content: flex-end; margin-top: var(--s-3); font-family: var(--f-titulo); font-weight: 700; font-size: .85rem; }
.inventory-grid__gold .coin { margin-left: .4em; }
.sg-paperdoll { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-5); }
.sg-paperdoll__col { display: grid; gap: var(--s-3); }
.sg-paperdoll__figure { display: grid; place-items: center; gap: var(--s-2); text-align: center; color: var(--ouro-500); font-family: var(--f-titulo); }
.sg-paperdoll__figure > .icon { width: 120px; height: 160px; stroke-width: .8; filter: drop-shadow(0 0 16px rgba(226, 177, 60,.4)); }
.sg-paperdoll__figure span { color: var(--ouro-300); line-height: 1.2; }
.sg-paperdoll__figure small { color: var(--texto-suave); }

/* ---------- Log de missões ---------- */
.quest-log { display: grid; gap: var(--s-2); padding: var(--s-5); }
.quest-log__item { display: flex; gap: var(--s-3); padding: var(--s-3); border: 1px solid transparent; }
.quest-log__item.is-active { border-color: rgba(226, 177, 60,.35); background: rgba(226, 177, 60,.06); }
.quest-log__item strong { display: block; font-family: var(--f-titulo); color: var(--vigor); }
.quest-log__lvl { font-size: var(--t-xs); color: var(--texto-suave); }
.quest-log__obj { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-size: var(--t-sm); }
.quest-log__obj li { display: flex; justify-content: space-between; gap: var(--s-4); }
.quest-log__obj li::before { content: "– "; color: var(--texto-suave); }
.quest-log__obj li.is-done { color: var(--texto-suave); text-decoration: line-through; }
.quest-log__obj span { color: var(--ouro-300); }
.quest-log__ready { margin: var(--s-1) 0 0; font-size: var(--t-sm); color: var(--r-incomum); }
.quest-mark {
	flex: none; display: grid; place-items: center; width: 32px; height: 32px;
	font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; color: var(--vigor);
	text-shadow: 0 0 10px rgba(232,195,58,.8), 0 2px 0 #000;
}
.quest-mark--ready { color: var(--vigor); }
.quest-mark--grey { color: #6b6458; text-shadow: none; }

/* ---------- Chat ---------- */
.chat-box { background: rgba(5, 6, 12,.85); border: 1px solid var(--ouro-900); font-size: .9rem; }
.chat-box__tabs { display: flex; gap: 2px; padding: 4px 4px 0; background: #080a12; }
.chat-box__tabs span { padding: .3rem .8rem; font-family: var(--f-titulo); font-size: .75rem; font-weight: 700; color: var(--texto-suave); background: #0e1223; border: 1px solid #181f3b; border-bottom: 0; }
.chat-box__tabs .is-active { color: var(--ouro-300); background: #151b32; border-color: var(--ouro-700); }
.chat-box__log { list-style: none; margin: 0; padding: var(--s-3); display: grid; gap: 3px; min-height: 210px; text-shadow: 0 1px 1px #000; }
.ch-sistema { color: var(--ouro-300); }
.ch-geral { color: var(--texto); }
.ch-grupo { color: var(--lapis-300); }
.ch-guilda { color: var(--r-incomum); }
.ch-sussurro { color: #ff8ad8; }
.ch-combate { color: var(--cornalina-300); }
.ch-loot { color: var(--r-incomum); }
.ch-erro { color: #ff4b4b; }
.chat-box__input { display: flex; align-items: center; gap: .5rem; padding: .4rem; border-top: 1px solid var(--ouro-900); }
.chat-box__input span { color: var(--texto); font-weight: 700; font-size: .85rem; }
.chat-box__input input { padding: .35rem .6rem; }

/* ---------- Formulários ---------- */
.sg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); }
.sg-form__grid p { margin: 0 0 var(--s-4); }
.sg-form__grid label { display: block; margin-bottom: .3rem; }
.sg-form__full { grid-column: 1 / -1; }
.sg-form .sg-row + .sg-row { margin-top: var(--s-5); }
@media (max-width: 640px) { .sg-form__grid { grid-template-columns: 1fr; } }
.check { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; font-family: var(--f-texto); font-weight: 500; color: var(--texto); }
.check input { position: absolute; opacity: 0; }
.check span { width: 22px; height: 22px; display: grid; place-items: center; background: #05060c; border: 2px solid var(--ouro-700); box-shadow: inset 0 2px 4px #000; }
.check--radio span { border-radius: 50%; }
.check input:checked + span { border-color: var(--ouro-300); }
.check input:checked + span::after { content: ""; width: 10px; height: 10px; background: var(--ouro-300); box-shadow: 0 0 8px var(--ouro-500); }
.check--radio input:checked + span::after { border-radius: 50%; }
.check:not(.check--radio) input:checked + span::after { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); width: 14px; height: 14px; }
.check input:focus-visible + span { outline: 2px solid var(--turquesa-300); outline-offset: 2px; }

/* ---------- Notificações ---------- */
.sg-banners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); align-items: center; }
@media (max-width: 760px) { .sg-banners { grid-template-columns: 1fr; } }
.levelup { text-align: center; padding: var(--s-6) var(--s-4); background: radial-gradient(ellipse at center, rgba(226, 177, 60,.25), transparent 70%); }
.levelup__small { display: block; font-family: var(--f-titulo); letter-spacing: .25em; text-transform: uppercase; font-size: .78rem; color: var(--papiro-300); }
.levelup__big {
	display: block; font-family: var(--f-display); font-weight: 900; font-size: 3.4rem; line-height: 1.1;
	background: linear-gradient(180deg, #fffbe8, var(--ouro-300) 40%, var(--ouro-700)); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 0 18px rgba(247, 217, 127,.55)) drop-shadow(0 3px 0 #000);
}
.sg-alerts { display: grid; gap: var(--s-2); }
.alert { --c: var(--lapis-300); display: flex; align-items: center; gap: .6em; margin: 0; padding: .7rem 1rem; font-size: var(--t-sm); border: 1px solid color-mix(in srgb, var(--c) 60%, #000); background: color-mix(in srgb, var(--c) 12%, #080a12); color: var(--c); }
.alert--ok { --c: var(--r-incomum); }
.alert--warn { --c: var(--vigor); }
.alert--erro { --c: #ff6b5b; }

/* ---------- Ícones ---------- */
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.sg-icon {
	display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: var(--s-4) var(--s-2);
	color: var(--ouro-300); background: rgba(0,0,0,.3); border: 1px solid rgba(226, 177, 60,.15); cursor: pointer; font: inherit;
	transition: .15s;
}
.sg-icon .icon { width: 30px; height: 30px; }
.sg-icon span { font-family: Consolas, monospace; font-size: .72rem; color: var(--texto-suave); }
.sg-icon:hover { background: rgba(226, 177, 60,.12); border-color: var(--ouro-500); transform: translateY(-2px); }

/* ---------- Ornamentos ---------- */
.sg-orn { display: grid; gap: var(--s-6); }
.sg-orn > * { min-width: 0; }
.sg-head__num { font-family: var(--f-titulo); }
.sg .panel--papiro code { color: var(--cornalina-700); background: rgba(140,114,68,.15); border-color: rgba(140,114,68,.35); }
.sg-orn__label { display: block; font-size: var(--t-xs); color: var(--texto-suave); margin-bottom: var(--s-2); }
.sg-orn__row { display: flex; flex-wrap: wrap; gap: var(--s-7); align-items: center; }
.sg-orn .divider { margin: 0; }