/* =========================================================
   ROLETA DE NÍVEIS (roleta.js) — prefixo .rlt-
   - a sub-aba "🎰 Roleta" de Minha Ficha (#stn-roleta);
   - a janela da roleta: a parede de luzes de Natal que soletra o prêmio
     (Hawkins: papel de parede claro, letras pintadas e lâmpadas coloridas;
     Invertido: a mesma parede no escuro, lâmpadas vermelhas falhando);
   - os pedaços que aparecem em outras telas: aviso das lojas, relíquias no
     inventário, post no thefacebook, título na carta, pautas do jornal,
     quadro do admin e a moldura "Roleta de ouro".
   Celular: bloco "ROLETA DE NÍVEIS" no fim do mobile.css.
   ========================================================= */

/* ---------- a sub-aba e o aviso do menu ---------- */
.rlt-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #ed4156; color: #fff; font: 800 11px/1 var(--font-small); vertical-align: 1px; }
.rlt-nav-dot { margin-left: 4px; font-size: 0.9em; }

/* ---------- o painel (Invertido: o mesmo escuro das perks) ---------- */
.rlt-head { display: grid; gap: 4px; margin-bottom: 12px; }
.rlt-kicker { margin: 0; color: #d38a94; font: 700 11px var(--font-type); letter-spacing: 0.2em; text-transform: uppercase; }
.rlt-kicker span { color: #ed4156; }
.rlt-head h3 { margin: 0; color: #f6e9df; font: 700 clamp(22px, 3vw, 30px)/1.2 var(--font-logo); }
.rlt-lead { margin: 0; color: #cdb7ae; font: 14px/1.5 var(--font-type); }
.rlt-lead b { color: #ffd7a8; }
.rlt-msg { min-height: 0; margin: 0 0 10px; color: #b9e8c4; font: 700 14px/1.4 var(--font-ui); }
.rlt-msg:empty { display: none; }
.rlt-msg.bad { color: #ff9aa6; }
.rlt-small { margin: 4px 0 0; color: #bfa9a1; font: 13px/1.45 var(--font-ui); }
.rlt-small b { color: #ffd7a8; }
.rlt-now { display: grid; gap: 8px; margin: 0 0 16px; padding: 16px; border: 1px solid #5a3a45; border-radius: 10px; background: rgba(20, 10, 16, 0.55); }
.rlt-now-marco { border-color: #d4a017; box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), 0 0 26px rgba(212, 160, 23, 0.12); }
.rlt-now-k { margin: 0; color: #fff3ea; font: 700 16px/1.3 var(--font-ui); }
.rlt-giros { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rlt-giros li { padding: 3px 9px; border: 1px solid #734354; border-radius: 999px; color: #f0d6cf; font: 12.5px var(--font-ui); }
.rlt-bar { height: 12px; overflow: hidden; border: 1px solid #734354; border-radius: 999px; background: #2a1720; }
.rlt-bar i { display: block; height: 100%; background: #ed4156; }
.rlt-acts-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rlt-btn { min-height: 40px; padding: 9px 16px; border: 2px solid #ed4156; border-radius: 8px; background: #ed4156; color: #fff; font: 700 14px var(--font-ui); cursor: pointer; }
.rlt-btn:hover { background: #ff5a6e; border-color: #ff5a6e; }
.rlt-btn:focus-visible { outline: 3px solid #ffd7a8; outline-offset: 2px; }
.rlt-btn:disabled { opacity: 0.55; cursor: progress; }
.rlt-btn-alt { background: transparent; color: #ffe3e6; }
.rlt-btn-alt:hover { background: rgba(237, 65, 86, 0.18); color: #fff; }
.rlt-btn-big { min-height: 48px; padding: 12px 22px; font-size: 16px; }
.rlt-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.rlt-sec { margin: 0 0 16px; padding-top: 12px; border-top: 1px dashed #493039; }
.rlt-sec h4 { margin: 0 0 8px; color: #fff3ea; font: 700 15px var(--font-ui); }
.rlt-line { margin: 6px 0 0; color: #dcc8bf; font: 14px/1.5 var(--font-ui); }
.rlt-line small { color: #a8948c; }
.rlt-chip { display: inline-block; margin: 0 3px 2px 0; padding: 1px 7px; border-radius: 999px; background: #3b2530; color: #ffd7a8; font: 700 12px var(--font-small); white-space: nowrap; }
.rlt-list { margin: 0; padding-left: 20px; color: #dcc8bf; font: 14px/1.5 var(--font-ui); }
.rlt-list li + li { margin-top: 4px; }
.rlt-list b { color: #fff3ea; }

/* o prêmio (painel e janela) */
.rlt-prize { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border: 1px solid #4a2e38; border-radius: 10px; background: rgba(42, 23, 32, 0.7); text-align: left; }
.rlt-prize-ico { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid #734354; border-radius: 12px; background: #2a1720; font-size: 28px; }
.rlt-prize h5 { margin: 0 0 3px; color: #fff3ea; font: 700 18px/1.25 var(--font-ui); overflow-wrap: anywhere; }
.rlt-prize p { margin: 4px 0 0; color: #dcc8bf; font: 14px/1.45 var(--font-ui); }
.rlt-prize[data-g="lendario"] { border-color: #d4a017; box-shadow: 0 0 22px rgba(212, 160, 23, 0.25); }
.rlt-dobro { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #d4a017; color: #1a1205; font: 800 11px var(--font-small); text-transform: uppercase; vertical-align: 2px; }
.rlt-stars { display: inline-flex; align-items: baseline; gap: 5px; color: #ffc93c; font: 14px var(--font-ui); letter-spacing: 1px; }
.rlt-stars small { color: #e7aeb6; font: 700 10.5px var(--font-small); letter-spacing: 0.06em; text-transform: uppercase; }
.rlt-stars[data-g="reroll"] small { padding: 1px 7px; border-radius: 999px; background: #1f4a3a; color: #b7f5d6; }

/* escolhas */
.rlt-esc { display: grid; gap: 8px; margin: 0 0 12px; padding: 12px; border: 1px dashed #ed4156; border-radius: 10px; background: #150a10; }
.rlt-esc-k { margin: 0; color: #fff3ea; font: 700 15px var(--font-ui); }
.rlt-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rlt-pick { display: flex; gap: 8px; align-items: center; min-height: 38px; margin: 0; padding: 6px 10px; border: 1px solid #4a2e38; border-radius: 8px; color: #f0d6cf; font: 14px var(--font-ui); cursor: pointer; }
.rlt-pick:has(input:checked) { border-color: #ed4156; background: rgba(237, 65, 86, 0.16); }
.rlt-field { display: grid; gap: 4px; margin: 0; color: #e7aeb6; font: 700 12.5px var(--font-ui); }
.rlt-field select { min-height: 38px; padding: 6px 8px; border: 1px solid #734354; border-radius: 8px; background: #2a1720; color: #fff3ea; font: 14px var(--font-ui); }
.rlt-fs { display: grid; gap: 6px; margin: 0; padding: 8px 10px 10px; border: 1px solid #4a2e38; border-radius: 8px; }
.rlt-fs legend { padding: 0 4px; color: #fff3ea; font: 700 13px var(--font-ui); }
.rlt-perks { display: grid; gap: 6px; }
.rlt-perk { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid #4a2e38; border-radius: 8px; color: #dcc8bf; font: 13.5px/1.4 var(--font-ui); cursor: pointer; }
.rlt-perk:has(input:checked) { border-color: #ed4156; background: rgba(237, 65, 86, 0.14); }
.rlt-perk b { color: #fff3ea; }
.rlt-perk small { color: #e7aeb6; font: 700 10px var(--font-small); text-transform: uppercase; }
.rlt-perk-ico { font-size: 20px; }

/* fichas de mesa e relíquias */
.rlt-fichas, .rlt-rel { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.rlt-fichas li, .rlt-rel li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid #4a2e38; border-radius: 10px; background: rgba(42, 23, 32, 0.55); }
.rlt-fichas p, .rlt-rel p { margin: 2px 0 0; color: #bfa9a1; font: 13px/1.4 var(--font-ui); }
.rlt-fichas b, .rlt-rel b { color: #fff3ea; font: 700 14.5px var(--font-ui); }
.rlt-ficha-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #734354; border-radius: 10px; background: #2a1720; font-size: 21px; }
.rlt-n { color: #ffc93c; }

/* histórico e catálogo */
.rlt-hist { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: #dcc8bf; font: 14px/1.45 var(--font-ui); }
.rlt-hist b { color: #fff3ea; }
.rlt-hist small { display: block; color: #a8948c; }
.rlt-cat { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #4a2e38; border-radius: 10px; }
.rlt-cat summary { min-height: 30px; color: #fff3ea; font: 700 15px var(--font-ui); cursor: pointer; }
.rlt-cat-g { margin: 14px 0 6px; }
.rlt-cat-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rlt-cat-l li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px 10px; border: 1px solid #3c2730; border-radius: 8px; color: #dcc8bf; font: 13px/1.4 var(--font-ui); }
.rlt-cat-l li > span { font-size: 20px; }
.rlt-cat-l b { color: #fff3ea; }
.rlt-cat-l p { margin: 3px 0 0; }
.rlt-tag { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 4px; background: #3b2530; color: #e7aeb6; font: 700 10px/1.6 var(--font-small); text-transform: uppercase; }
.rlt-tag-m { background: #d4a017; color: #1a1205; }

/* ---------- Hawkins: o painel no traço de gibi (como as perks) ---------- */
.theme-hawkins #stn-roleta .rlt-kicker { color: #d0261b; font: 800 11px "Barlow Condensed", var(--font-ui); letter-spacing: 0.2em; }
.theme-hawkins #stn-roleta .rlt-kicker span { color: #111; }
.theme-hawkins #stn-roleta .rlt-head h3 { color: #e8352a; font: 400 clamp(26px, 3.4vw, 34px)/1.1 var(--font-paint); text-shadow: 2px 2px 0 #111; }
.theme-hawkins #stn-roleta :is(.rlt-lead, .rlt-small, .rlt-line, .rlt-list, .rlt-hist, .rlt-prize p, .rlt-fichas p, .rlt-rel p, .rlt-cat-l li, .rlt-perk) { color: #3b352d; }
.theme-hawkins #stn-roleta :is(.rlt-lead b, .rlt-small b) { color: #d0261b; }
.theme-hawkins #stn-roleta :is(.rlt-now-k, .rlt-sec h4, .rlt-prize h5, .rlt-fichas b, .rlt-rel b, .rlt-list b, .rlt-hist b, .rlt-cat summary, .rlt-cat-l b, .rlt-esc-k, .rlt-perk b, .rlt-fs legend) { color: #111; }
.theme-hawkins #stn-roleta :is(.rlt-now, .rlt-prize, .rlt-fichas li, .rlt-rel li, .rlt-cat, .rlt-esc) { border: 2.5px solid #111; border-radius: 0; background: #fff; box-shadow: 4px 4px 0 #111; }
.theme-hawkins #stn-roleta .rlt-esc { border-style: dashed; background: #fffbea; }
.theme-hawkins #stn-roleta .rlt-now-marco { background: #fff6cc; }
.theme-hawkins #stn-roleta .rlt-sec { border-top: 2px dashed #111; }
.theme-hawkins #stn-roleta :is(.rlt-prize-ico, .rlt-ficha-ico) { border: 2px solid #111; border-radius: 0; background: #ffe45c; }
.theme-hawkins #stn-roleta .rlt-btn { border: 2.5px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 15px "Barlow Condensed", var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 3px 3px 0 #111; }
.theme-hawkins #stn-roleta .rlt-btn:hover { background: #d22217; color: #fff; }
.theme-hawkins #stn-roleta .rlt-btn-alt { background: #fff; }
.theme-hawkins #stn-roleta .rlt-chip { border-radius: 0; background: #111; color: #ffe45c; }
.theme-hawkins #stn-roleta .rlt-bar { border: 2px solid #111; border-radius: 0; background: #fff; }
.theme-hawkins #stn-roleta .rlt-bar i { background: #e8352a; }
.theme-hawkins #stn-roleta .rlt-giros li { border: 1.5px solid #111; border-radius: 0; color: #111; background: #ffe45c; }
.theme-hawkins #stn-roleta :is(.rlt-pick, .rlt-perk, .rlt-fs, .rlt-cat-l li) { border: 1.5px solid #111; border-radius: 0; color: #111; }
.theme-hawkins #stn-roleta :is(.rlt-pick, .rlt-perk):has(input:checked) { background: #ffe45c; }
.theme-hawkins #stn-roleta .rlt-field { color: #3b352d; }
.theme-hawkins #stn-roleta .rlt-field select { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; }
.theme-hawkins #stn-roleta .rlt-msg { color: #1a7a3a; }
.theme-hawkins #stn-roleta .rlt-msg.bad { color: #b3140c; }
.theme-hawkins #stn-roleta .rlt-stars { color: #b37a00; }
.theme-hawkins #stn-roleta .rlt-stars small { color: #3b352d; }
.theme-hawkins :is(#stn-roleta, .rlt-dlg) .rlt-perk small { color: #b3140c; }
.theme-hawkins .rlt-tag { border-radius: 0; background: #111; color: #ffe45c; }

/* ---------- a janela: a parede de luzes ---------- */
.rlt-dlg { width: min(780px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: hidden; border: 0; background: transparent; color: #f3e6dc; }
.rlt-dlg::backdrop { background: rgba(4, 2, 3, 0.86); }
.rlt-dlg-in { position: relative; display: grid; gap: 12px; max-height: inherit; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 20px; border: 1px solid #5a1016; border-radius: 6px; background: #120a0c; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); }
.rlt-dlg.rlt-marco .rlt-dlg-in { border: 2px solid #d4a017; box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.2), 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 60px rgba(212, 160, 23, 0.25); }
.rlt-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 1px solid #5a3a45; border-radius: 8px; background: rgba(0, 0, 0, 0.4); color: #f6e9df; font-size: 17px; cursor: pointer; }
.rlt-x:focus-visible { outline: 3px solid #ffd7a8; }
.rlt-dlg-head { display: grid; gap: 2px; padding: 0 40px; }
.rlt-dlg-k { margin: 0; color: #ff7b86; font: 700 12px var(--font-type); letter-spacing: 0.22em; text-transform: uppercase; }
.rlt-dlg-head h2 { margin: 0; color: #f6e9df; font: 400 clamp(26px, 4.4vw, 40px)/1.1 var(--font-paint); }
.rlt-dlg.rlt-marco .rlt-dlg-k { color: #ffc93c; font-size: 15px; }
.rlt-dlg.rlt-marco .rlt-dlg-head h2 { color: #ffd76a; }
.rlt-dlg-s { margin: 2px 0 0; color: #cdb7ae; font: 14px/1.45 var(--font-ui); }
/* a parede: papel de parede velho e as letras pintadas (Invertido: escuro e gasto) */
.rlt-wall { display: grid; gap: 4px; padding: 16px 12px 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 3px, transparent 3px 30px), #1f1517; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.75); }
.rlt-row { display: flex; justify-content: center; gap: 0; }
.rlt-l { position: relative; display: grid; justify-items: center; width: clamp(28px, 6.6vw, 60px); padding-top: 30px; }
/* o fio: um pedaço caído entre cada lâmpada */
.rlt-l::before { content: ""; position: absolute; top: 2px; left: -1px; right: -1px; height: 12px; border-bottom: 2px solid #0d0b0e; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.rlt-bulb { position: absolute; top: 10px; left: 50%; width: 13px; height: 20px; margin-left: -6.5px; border-radius: 46% 46% 50% 50% / 34% 34% 66% 66%; background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.24) 0 9%, transparent 24%), #2a282e; transform: rotate(var(--r)); transform-origin: 50% -30%; }
.rlt-bulb::before { content: ""; position: absolute; left: 18%; right: 18%; top: -26%; height: 32%; border-radius: 2px; background: #141216; }
.rlt-l b { color: #b7a59c; font: 400 clamp(22px, 5vw, 44px)/1 var(--font-paint); text-shadow: 0 0 1px rgba(0, 0, 0, 0.6); opacity: 0.85; }
.rlt-l.on .rlt-bulb, .rlt-corre .rlt-bulb, .rlt-festa .rlt-bulb { background: radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.75) 0 10%, transparent 26%), var(--c); box-shadow: 0 0 9px 2px var(--c), 0 0 34px 12px color-mix(in srgb, var(--c) 42%, transparent); }
.rlt-l.on b { color: #fff; opacity: 1; text-shadow: 0 0 14px color-mix(in srgb, var(--c) 80%, transparent); }
.rlt-corre .rlt-bulb { animation: rltCorre 840ms steps(1, end) infinite; animation-delay: calc(var(--i) * -32ms); }
.rlt-festa .rlt-bulb { animation: rltFesta 1.1s steps(1, end) infinite; animation-delay: calc(var(--i) * -170ms); }
@keyframes rltCorre { 0% { filter: none; } 22%, 100% { background: #2a282e; box-shadow: none; } }
@keyframes rltFesta { 0%, 49% { filter: brightness(1.15); } 50%, 100% { filter: brightness(0.35); } }
.rlt-word { min-height: 1.3em; margin: 0; color: #ffe8d8; font: 400 clamp(24px, 5vw, 40px)/1.2 var(--font-paint); letter-spacing: 0.08em; overflow-wrap: anywhere; }
.rlt-res { display: grid; gap: 10px; max-width: 560px; margin: 0 auto; width: 100%; }
.rlt-res:empty { display: none; }
.rlt-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rlt-acts .rlt-small { flex-basis: 100%; }
.rlt-dlg .rlt-msg { margin: 0; }

/* Hawkins: a sala dos Byers (papel de parede claro, letras pretas, lâmpadas coloridas) */
.theme-hawkins .rlt-dlg-in { border: 3px solid #111; border-radius: 0; background: #fbf4e4; color: #111; box-shadow: 8px 8px 0 #111, 0 30px 80px rgba(0, 0, 0, 0.6); }
.theme-hawkins .rlt-dlg.rlt-marco .rlt-dlg-in { border-color: #111; background: #fff4c7; box-shadow: 0 0 0 6px #ffe45c, 8px 8px 0 6px #111, 0 30px 80px rgba(0, 0, 0, 0.6); }
.theme-hawkins .rlt-dlg-k { color: #d0261b; font: 800 13px "Barlow Condensed", var(--font-ui); letter-spacing: 0.22em; }
.theme-hawkins .rlt-dlg-head h2, .theme-hawkins .rlt-dlg.rlt-marco .rlt-dlg-head h2 { color: #e8352a; text-shadow: 2px 2px 0 #111; }
.theme-hawkins .rlt-dlg.rlt-marco .rlt-dlg-k { color: #111; }
.theme-hawkins .rlt-dlg-s { color: #3b352d; }
.theme-hawkins .rlt-x { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; }
.theme-hawkins .rlt-wall { border: 2px solid #111; background: repeating-linear-gradient(90deg, rgba(120, 90, 40, 0.13) 0 3px, transparent 3px 30px), #e9dbb4; box-shadow: inset 0 0 30px rgba(110, 80, 30, 0.25); }
.theme-hawkins .rlt-l::before { border-bottom-color: #2a2420; }
.theme-hawkins .rlt-l b { color: #1b1712; opacity: 0.92; }
.theme-hawkins .rlt-l.on b { color: #111; text-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
.theme-hawkins .rlt-word { color: #111; }
.theme-hawkins .rlt-dlg .rlt-prize { border: 2.5px solid #111; border-radius: 0; background: #fff; box-shadow: 4px 4px 0 #111; }
.theme-hawkins .rlt-dlg :is(.rlt-prize h5, .rlt-esc-k, .rlt-perk b, .rlt-fs legend) { color: #111; }
.theme-hawkins .rlt-dlg :is(.rlt-prize p, .rlt-small, .rlt-perk, .rlt-field) { color: #3b352d; }
.theme-hawkins .rlt-dlg :is(.rlt-prize-ico) { border: 2px solid #111; border-radius: 0; background: #ffe45c; }
.theme-hawkins .rlt-dlg .rlt-btn { border: 2.5px solid #111; border-radius: 0; background: #ffe45c; color: #111; font: 800 15px "Barlow Condensed", var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 3px 3px 0 #111; }
.theme-hawkins .rlt-dlg .rlt-btn:hover { background: #d22217; color: #fff; }
.theme-hawkins .rlt-dlg .rlt-btn-alt { background: #fff; }
.theme-hawkins .rlt-dlg .rlt-esc { border: 2px dashed #111; border-radius: 0; background: #fffbea; }
.theme-hawkins .rlt-dlg :is(.rlt-pick, .rlt-perk, .rlt-fs) { border: 1.5px solid #111; border-radius: 0; color: #111; }
.theme-hawkins .rlt-dlg :is(.rlt-pick, .rlt-perk):has(input:checked) { background: #ffe45c; }
.theme-hawkins .rlt-dlg .rlt-field select { border: 2px solid #111; border-radius: 0; background: #fff; color: #111; }
.theme-hawkins .rlt-dlg .rlt-stars { color: #b37a00; }
.theme-hawkins .rlt-dlg .rlt-stars small { color: #3b352d; }
/* a etiqueta "Rerolls" (fundo verde) continua clara em Hawkins */
.theme-hawkins :is(#stn-roleta, .rlt-dlg) .rlt-stars[data-g="reroll"] small { padding: 1px 7px; border: 1.5px solid #111; background: #1d6b4a; color: #fff; }
.theme-hawkins .rlt-dlg .rlt-msg { color: #1a7a3a; }
.theme-hawkins .rlt-dlg .rlt-msg.bad { color: #b3140c; }
/* Invertido: as lâmpadas são vermelhas e uma ou outra falha */
.theme-upside .rlt-l { --c: #ff2323 !important; }
.theme-upside .rlt-l:nth-child(4n + 2).on .rlt-bulb { animation: rltFalha 0.5s steps(2, end) infinite; }
@keyframes rltFalha { 50% { filter: brightness(0.3); } }

/* ---------- nas outras telas ---------- */
/* o aviso das lojas (Melvald's.com, Roane County Arms e mercado negro) */
.rlt-loja { margin: 8px 0; padding: 8px 12px; border: 2px dashed #b37a00; background: #fff7d1; color: #3b2a00; font: 13.5px/1.45 var(--font-ui); }
.rlt-loja b { color: #7a4f00; }
.nq-app .rlt-loja, #nq-app .rlt-loja { border-color: #2bff6a; background: #031807; color: #9dffb9; font-family: var(--font-crt); font-size: 17px; }
#nq-app .rlt-loja b { color: #d9ffe4; }
/* a relíquia equipada no quadro do equipamento (inventory.js → slotHTML) */
.rlt-slot { outline: 2px solid #d4a017; outline-offset: -4px; }
.rlt-slot-art { display: grid; place-items: center; font-size: 34px; }
/* as relíquias no equipamento */
.rlt-inv { margin: 12px 0; padding: 10px 12px; border: 1px solid #d4a017; border-radius: 8px; background: rgba(212, 160, 23, 0.08); }
.rlt-inv h4 { margin: 0 0 8px; font: 700 14px var(--font-ui); }
.rlt-inv h4 small { margin-left: 4px; font-weight: 400; opacity: 0.8; }
.rlt-inv ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rlt-inv li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font: 13.5px/1.4 var(--font-ui); }
.rlt-inv li > span { font-size: 22px; }
.theme-hawkins .rlt-inv { border: 2.5px solid #111; border-radius: 0; background: #fff6cc; box-shadow: 4px 4px 0 #111; color: #111; }
.theme-hawkins .rlt-inv .rlt-btn { border: 2px solid #111; border-radius: 0; background: #ffe45c; color: #111; box-shadow: 2px 2px 0 #111; }
/* o post automático no mural do thefacebook */
.rlt-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 4px; padding: 10px 12px; border: 1px solid #d4a017; background: #fffbe8; }
.rlt-post > span { font-size: 26px; }
.rlt-post p { margin: 0; color: #333; font: 12px/1.45 "Lucida Grande", Tahoma, Verdana, sans-serif; }
.rlt-hb-gratis { display: flex; gap: 6px; align-items: center; margin: 8px 0 0; color: #3b5998; font: 12px "Lucida Grande", Tahoma, Verdana, sans-serif; }
/* o título na carta */
.rlt-card-title { margin: 2px 0 0; color: #b37a00; font: 700 12px var(--font-small); letter-spacing: 0.04em; text-transform: uppercase; }
.theme-upside .rlt-card-title { color: #ffc93c; }
/* as pautas da roleta na redação do jornal */
.rlt-pautas { margin: 14px 0; padding: 12px 14px; border: 2px dashed #b37a00; background: #fff7d1; color: #3b2a00; }
.rlt-pautas h3 { margin: 0 0 6px; font: 700 16px var(--font-ui); }
.rlt-pautas p { margin: 0 0 8px; font: 13.5px/1.45 var(--font-ui); }
.rlt-pautas ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rlt-pautas li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 14px var(--font-ui); }
.rlt-pautas li small { opacity: 0.75; }
/* o quadro do admin na aba XP */
.rlt-adm { display: grid; gap: 8px; margin: 16px 0; padding: 12px 14px; border: 1px dashed currentColor; border-radius: 8px; }
.rlt-adm h4 { margin: 0; font: 700 15px var(--font-ui); }
.rlt-adm-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.rlt-adm-row label { display: grid; gap: 4px; margin: 0; flex: 0 1 auto; font: 700 12.5px var(--font-ui); }
.rlt-adm-row select { min-height: 36px; }
/* a moldura "Roleta de ouro" do thefacebook (prêmio Título e moldura): ouro com lâmpadas acesas */
.hb-av[data-fr="roleta"] { --anel: 5; border-color: #5a3f08; box-shadow: 0 0 calc(8 * var(--fu)) rgba(255, 201, 60, 0.55); }
.hb-av[data-fr="roleta"]::before {
  content: ""; position: absolute; inset: calc(-1px - var(--anel) * var(--fu)); padding: calc(var(--anel) * var(--fu)); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  background:
    radial-gradient(circle at 20% 8%, #ff4433 0 calc(1.3 * var(--fu)), transparent calc(1.7 * var(--fu))),
    radial-gradient(circle at 80% 8%, #3cf07a 0 calc(1.3 * var(--fu)), transparent calc(1.7 * var(--fu))),
    radial-gradient(circle at 8% 50%, #3c9bff 0 calc(1.3 * var(--fu)), transparent calc(1.7 * var(--fu))),
    radial-gradient(circle at 92% 50%, #ff5cc8 0 calc(1.3 * var(--fu)), transparent calc(1.7 * var(--fu))),
    radial-gradient(circle at 20% 92%, #ffc93c 0 calc(1.3 * var(--fu)), transparent calc(1.7 * var(--fu))),
    radial-gradient(circle at 80% 92%, #ff8c2a 0 calc(1.3 * var(--fu)), transparent calc(1.7 * var(--fu))),
    linear-gradient(135deg, #7a5a12, #f3d77a 28%, #b8892b 50%, #f7e59a 72%, #7a5a12);
}

@media (prefers-reduced-motion: reduce) {
  .rlt-corre .rlt-bulb, .rlt-festa .rlt-bulb, .theme-upside .rlt-l.on .rlt-bulb { animation: none !important; }
}

/* =========================================================
   LOJA DA ROLETA (2026-10-04, roleta.js → lojaHTML / darkwebHTML)
   - .rlt-shop: comprar giro, na sub-aba Roleta (a troca do último prêmio saiu);
   - .nq-rf: os reforços na aba "roleta" do mercado negro (o mesmo terminal verde do .nq-).
   ========================================================= */
.rlt-shop-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rlt-shop-i { display: grid; align-content: start; gap: 6px; padding: 12px 14px; border: 1px solid #5a3a45; border-radius: 10px; background: rgba(20, 10, 16, 0.55); }
.rlt-shop-k { margin: 0; color: #fff3ea; font: 700 15px var(--font-ui); }
.rlt-shop-p { margin: 2px 0 4px; color: #ffd7a8; font: 700 22px var(--font-type); }
.rlt-shop-i .rlt-btn { justify-self: start; }
.theme-hawkins #stn-roleta .rlt-shop-i { border: 2.5px solid #111; border-radius: 0; background: #fff; box-shadow: 4px 4px 0 #111; }
.theme-hawkins #stn-roleta .rlt-shop-k { color: #111; }
.theme-hawkins #stn-roleta .rlt-shop-p { color: #d0261b; }

/* os reforços na dark web */
.nq-rfs { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.nq-rf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #2f4d33; background: #050a06; }
.nq-rf.is-on { border-color: #5cff7a; background: #0b150d; }
.nq-rf-ico { font-size: 26px; }
.nq-rf-txt b { color: #d8ffd8; }
.nq-rf-txt small { color: #6f8f74; }
.nq-rf-txt p { margin: 2px 0 0; color: #9fe0a8; font-size: 12.5px; }
.nq-rf-price { margin: 0; text-align: right; }
.nq-rf-price b { display: block; color: #fff; font-size: 15px; }
.nq-rf-price small { color: #6f8f74; }
/* sem giro guardado: "comprar + girar" (o giro do dia junto) e "só o reforço" (2026-10-11) */
.nq-rf-acts { display: grid; gap: 6px; }
.tor-view .nq-rf-acts .nq-btn { text-align: center; }
.tor-view .nq-btn.nq-btn-alt { border-color: #2f4d33; color: #9fe0a8; }
.tor-view .nq-btn.nq-btn-alt:hover { border-color: #5cff7a; background: #0b150d; color: #d8ffd8; }
/* com giro guardado: os reforços valem nele e dá para girar dali mesmo (2026-10-11) */
.nq-rf-pronto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid #5cff7a; background: #0b150d; color: #9fe0a8; }
.nq-rf-pronto b { color: #d8ffd8; }
.nq-rf-nota { display: block; margin-top: 4px; color: #6f8f74; font-size: 12px; }
.nq-ima { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #6f8f74; }
.nq-ima select { border: 1px solid #2f4d33; background: #000; color: #9fe0a8; font: 12px "Courier New", monospace; }