/* Tivity Game Kit · Luces */
.tlz-reward, .tlz-collection {
	--tlz-bg: #1C2736; --tlz-color: #F7EED9; --tlz-title: #F9D87B; --tlz-popup-bg: #0F1A26;
	position: relative; max-width: 560px; margin: 0 auto; padding: 18px 16px 20px; border-radius: 22px; box-sizing: border-box;
	background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .08), transparent 60%), var(--tlz-bg);
	color: var(--tlz-color); font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif; line-height: 1.4; text-align: center;
}
.tlz-reward *, .tlz-collection * { box-sizing: border-box; }
.tlz-title { margin: 0 0 6px; font-size: 24px; font-weight: 900; color: var(--tlz-title); line-height: 1.2; }
.tlz-sub { font-size: 15px; opacity: .9; }
.tlz-empty, .tlz-col__msg { margin: 10px 0; font-size: 15px; }
.tlz-error { color: #ff8a8a; font-weight: 700; }
.tlz-reward__bola { margin: 10px auto 46px; transition: opacity .6s; }
.tlz-reward__bola.tmg-luz-bola-out { opacity: 0; pointer-events: none; }
.tlz-reward__bola .tmg-bola-hint { color: var(--tlz-color); }
.tlz-reward .tmg-luz { background: none; padding: 0; max-width: none; }
.tlz-reward__count { margin: 6px 0 0; font-size: 14px; opacity: .75; }
.tlz-reward__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.tlz-reward .tlz-reveal .tmg-luz-scene { min-height: 300px; }

/* Colección */
.tlz-collection { --tlz-cols: 4; --tlz-cols-t: 3; --tlz-cols-m: 2; --tlz-gap: 14px; --tlz-pad: 20px; --tlz-radius: 18px; --tlz-size: 96px; max-width: 980px; padding: var(--tlz-pad); border-radius: var(--tlz-radius); }
.tlz-collection--single { background: none; padding: 0; display: inline-block; }
.tlz-col__head { margin-bottom: 12px; }
.tlz-col__counter { margin: 0; font-weight: 800; color: var(--tlz-title); }
.tlz-col__grid { display: grid; grid-template-columns: repeat(var(--tlz-cols), minmax(0, 1fr)); gap: var(--tlz-gap); }
@media (max-width: 900px) { .tlz-col__grid { grid-template-columns: repeat(var(--tlz-cols-t), minmax(0, 1fr)); } }
@media (max-width: 560px) { .tlz-col__grid { grid-template-columns: repeat(var(--tlz-cols-m), minmax(0, 1fr)); } }
.tlz-luz { position: relative; padding: 10px 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, .04); animation: tlz-in .5s ease-out both; animation-delay: var(--d, 0s); }
@keyframes tlz-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.tlz-luz__fig { position: relative; display: flex; justify-content: center; }
.tlz-luz__fig .tmg-estrella { width: var(--tlz-size); height: var(--tlz-size); }
.tlz-luz--owned { background: rgba(249, 216, 123, .1); box-shadow: 0 0 14px rgba(249, 216, 123, .3); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.tlz-luz--owned:hover, .tlz-luz--owned:focus-visible { transform: translateY(-3px); box-shadow: 0 0 22px rgba(249, 216, 123, .55); outline: none; }
.tlz-luz--owned .tlz-luz__fig { filter: drop-shadow(0 0 10px rgba(249, 216, 123, .7)); animation: tmg-luz-float 3.4s ease-in-out infinite; }
.tlz-luz--locked .tlz-luz__fig { opacity: .22; filter: grayscale(1); }
.tlz-luz--locked .tlz-luz__fig .tmg-estrella-anim [class^="st-"], .tlz-luz--locked .tlz-luz__fig .tmg-estrella-anim [class*=" st-"] { animation: none !important; }
.tlz-luz__lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 34px; font-weight: 900; color: #fff; opacity: .85; }
.tlz-luz__name { margin-top: 4px; font-size: 13px; font-weight: 800; }
.tlz-luz--owned .tlz-luz__name { color: var(--tlz-title); }
.tlz-luz__place { font-size: 11px; opacity: .7; }

/* Popup de una luz */
.tlz-popup { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 10, 20, .82); opacity: 0; transition: opacity .3s; }
.tlz-popup--on { opacity: 1; }
.tlz-popup__box { position: relative; width: min(420px, 100%); max-height: 100%; overflow: auto; padding: 28px 20px 22px; border-radius: 22px; background: var(--tlz-popup-bg, #0F1A26); color: #F7EED9; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 2px rgba(249, 216, 123, .35); transform: scale(.92); transition: transform .3s; font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif; }
.tlz-popup--on .tlz-popup__box { transform: none; }
.tlz-popup__close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.tlz-popup__fig { display: inline-block; cursor: pointer; filter: drop-shadow(0 0 18px rgba(249, 216, 123, .9)); animation: tmg-luz-float 3.4s ease-in-out infinite; }
.tlz-popup__fig.tlz-pop { animation: tlz-popanim .6s cubic-bezier(.25, 1.5, .45, 1), tmg-luz-float 3.4s ease-in-out .6s infinite; }
@keyframes tlz-popanim { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
.tlz-popup__name { margin: 8px 0 0; font-size: 26px; font-weight: 900; color: #F9D87B; }
.tlz-popup__place, .tlz-popup__date { margin: 2px 0 0; font-size: 13px; opacity: .75; }
.tlz-popup__bubble { margin: 14px auto 0; text-align: left; max-width: 340px; }
.tlz-popup__hint { margin: 12px 0 0; font-size: 12px; opacity: .55; }
.tmg-luz-talking .tlz-popup__fig .st-mouth { animation: st-talk .26s ease-in-out infinite alternate; }

/* Bola dentro del popup de éxito (triggers) */
.tlz-inline { margin: 12px auto 0; color: inherit; }
.tlz-inline .tlz-reward__bola { margin-bottom: 40px; }
.tlz-inline .tmg-luz { background: none; padding: 0; max-width: none; }
.tlz-inline .tmg-luz-scene { min-height: 260px; }

/* Barra de progreso */
.tlz-progress { position: relative; height: var(--tlz-p-h, 18px); border-radius: var(--tlz-p-r, 12px); background: var(--tlz-p-bg, rgba(255,255,255,.15)); overflow: hidden; }
.tlz-progress__bar { height: 100%; background: var(--tlz-p-color, #F9D87B); transition: width .6s; }
.tlz-progress__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--tlz-p-text, #fff); }
.tlz-admin-notice { color: #c00; font-style: italic; }