*,
			*::before,
			*::after {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			body {
				font-family: "Inter", "Nunito", "Open Sans", sans-serif;
				background: #f4f4f4;
				color: #1a1a1a;
				min-height: 100vh;
				display: flex;
				flex-direction: column;
				overflow-x: hidden;
			}

			.header {
				background: #0f5c8a;
				padding: 12px 32px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
			}
			.header-left {
				display: flex;
				align-items: center;
				gap: 14px;
			}
			.header-logo {
				height: 40px;
				width: auto;
				display: block;
			}
			.header-subtitle {
				color: rgba(255, 255, 255, 0.8);
				font-size: 14px;
				font-weight: 400;
			}

			.main {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 30px 20px 40px;
			}

			.wheel-wrapper {
				position: relative;
				display: inline-block;
			}
			.wheel-container {
				position: relative;
				border-radius: 50%;
				box-shadow:
					0 8px 32px rgba(0, 0, 0, 0.18),
					0 2px 8px rgba(0, 0, 0, 0.1);
			}
			canvas {
				display: block;
				border-radius: 50%;
			}

			.pointer {
				position: absolute;
				top: -18px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 10;
				width: 0;
				height: 0;
				border-left: 20px solid transparent;
				border-right: 20px solid transparent;
				border-top: 32px solid #f5a800;
				filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
			}
			.pointer::after {
				content: "";
				position: absolute;
				top: -34px;
				left: 50%;
				transform: translateX(-50%);
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background: #f5a800;
			}

			.spin-area {
				margin-top: 30px;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10px;
			}
			.spin-btn {
				background: linear-gradient(180deg, #f5a800 0%, #e09500 100%);
				border: none;
				border-radius: 50px;
				padding: 16px 60px;
				font-family: inherit;
				font-size: 22px;
				font-weight: 800;
				color: #1a1a1a;
				cursor: pointer;
				letter-spacing: 1px;
				transition:
					transform 0.15s,
					box-shadow 0.15s;
				box-shadow: 0 4px 14px rgba(245, 168, 0, 0.4);
			}
			.spin-btn:hover {
				transform: translateY(-2px) scale(1.02);
				box-shadow: 0 6px 20px rgba(245, 168, 0, 0.5);
			}
			.spin-btn:active {
				transform: scale(0.97);
			}
			.spin-btn:disabled {
				opacity: 0.6;
				cursor: not-allowed;
				transform: none;
			}
			.spin-hint {
				font-size: 14px;
				color: #888;
				font-weight: 400;
			}

			.last-result {
				margin-top: 16px;
				font-size: 15px;
				color: #666;
				min-height: 24px;
				font-weight: 500;
			}
			.last-result strong {
				color: #0f5c8a;
			}

			.modal-overlay {
				display: none;
				position: fixed;
				inset: 0;
				background: rgba(0, 0, 0, 0.55);
				z-index: 100;
				align-items: center;
				justify-content: center;
				padding: 20px;
				backdrop-filter: blur(3px);
			}
			.modal-overlay.active {
				display: flex;
			}

			.modal-card {
				background: #ffffff;
				border-radius: 20px;
				width: 100%;
				max-width: 520px;
				max-height: 90vh;
				overflow-y: auto;
				box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
				animation: modalIn 0.3s ease-out;
			}
			@keyframes modalIn {
				from {
					opacity: 0;
					transform: scale(0.92) translateY(20px);
				}
				to {
					opacity: 1;
					transform: scale(1) translateY(0);
				}
			}

			.modal-head {
				padding: 24px 28px 0;
				display: flex;
				align-items: center;
				gap: 12px;
			}
			.modal-icon {
				width: 44px;
				height: 44px;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22px;
				font-weight: 800;
				flex-shrink: 0;
			}
			.modal-head h2 {
				font-size: 22px;
				font-weight: 800;
				color: #1a1a1a;
			}

			.modal-body {
				padding: 20px 28px 28px;
			}

			.question-text {
				font-size: 17px;
				font-weight: 600;
				line-height: 1.5;
				margin-bottom: 18px;
				color: #1a1a1a;
			}
			.options {
				display: flex;
				flex-direction: column;
				gap: 10px;
				margin-bottom: 16px;
			}
			.option-btn {
				background: #f4f4f4;
				border: 2px solid #e0e0e0;
				border-radius: 12px;
				padding: 14px 18px;
				font-family: inherit;
				font-size: 15px;
				font-weight: 600;
				color: #1a1a1a;
				cursor: pointer;
				text-align: left;
				transition:
					border-color 0.15s,
					background 0.15s;
			}
			.option-btn:hover:not(:disabled) {
				border-color: #1a75bc;
				background: #e8f4fc;
			}
			.option-btn:disabled {
				cursor: default;
				opacity: 0.7;
			}
			.option-btn.correct {
				border-color: #28a745;
				background: #d4edda;
			}
			.option-btn.wrong {
				border-color: #dc3545;
				background: #f8d7da;
			}

			.feedback {
				text-align: center;
				margin-top: 12px;
				font-size: 16px;
				font-weight: 600;
				min-height: 50px;
			}
			.retry-msg {
				text-align: center;
				font-size: 15px;
				color: #f5a800;
				font-weight: 700;
				margin: 12px 0;
			}

			/* ── TIMER ── */
			.timer-container {
				text-align: center;
				margin-bottom: 16px;
			}
			.timer-number {
				font-size: 42px;
				font-weight: 900;
				color: #1a75bc;
				line-height: 1.1;
				transition: color 0.3s;
			}
			.timer-bar-container {
				width: 100%;
				max-width: 280px;
				height: 10px;
				background: #e0e0e0;
				border-radius: 5px;
				margin: 8px auto;
				overflow: hidden;
			}
			.timer-bar {
				height: 100%;
				background: #1a75bc;
				border-radius: 5px;
				transition:
					width 1s linear,
					background 0.3s;
				width: 100%;
			}
			.timer-bar.warning {
				background: #dc3545;
			}
			.timer-number.warning {
				color: #dc3545;
			}
			.pick-area {
				display: flex;
				flex-direction: column;
				gap: 12px;
				margin: 16px 0;
			}
			.pick-btn {
				padding: 14px 20px;
				font-size: 16px;
				font-weight: 600;
				border: 2px solid #1a75bc;
				border-radius: 12px;
				background: #fff;
				color: #1a75bc;
				cursor: pointer;
				transition: all 0.2s;
			}
			.pick-btn:hover {
				background: #1a75bc;
				color: #fff;
			}
			.timer-number.finished {
				font-size: 22px;
				color: #dc3545;
			}
			.timer-label {
				font-size: 14px;
				color: #888;
				font-weight: 500;
				margin-top: 2px;
			}
			.timer-start-btn {
				margin-top: 12px;
				padding: 10px 24px;
				font-size: 16px;
				font-weight: 600;
				border: 2px solid #1a75bc;
				border-radius: 12px;
				background: #1a75bc;
				color: #fff;
				cursor: pointer;
				transition: all 0.2s;
			}
			.timer-start-btn:hover {
				background: #0f5c8a;
				border-color: #0f5c8a;
			}

			/* ── DESAFIO ── */
			.desafio-text {
				font-size: 17px;
				font-weight: 500;
				line-height: 1.6;
				margin-bottom: 20px;
				padding: 16px;
				background: #f4f4f4;
				border-radius: 12px;
				text-align: center;
			}

			/* ── VERIFICATION ── */
			.verification-details {
				margin: 12px 0;
				border: 1px solid #e0e0e0;
				border-radius: 10px;
				background: #fafafa;
				overflow: hidden;
			}
			.verification-details summary {
				padding: 10px 14px;
				font-weight: 600;
				font-size: 14px;
				color: #0f5c8a;
				cursor: pointer;
				list-style: none;
				user-select: none;
			}
			.verification-details summary::before {
				content: "▶ ";
				font-size: 10px;
			}
			.verification-details[open] summary::before {
				content: "▼ ";
			}
			.verification-content {
				padding: 10px 14px;
				font-size: 14px;
				color: #333;
				line-height: 1.6;
				border-top: 1px solid #e0e0e0;
				background: #ffffff;
				font-style: italic;
			}
			.coin-result {
				font-size: 28px;
				font-weight: 900;
				margin: 16px 0;
			}

			/* ── JUEGO ── */
			.game-area {
				text-align: center;
			}
			.game-area h3 {
				font-size: 18px;
				font-weight: 700;
				margin-bottom: 14px;
				color: #0f5c8a;
			}
			.game-area p {
				margin-bottom: 16px;
				color: #666;
			}
			.game-instruction {
				font-size: 15px;
				color: #666;
				margin: 8px 0 16px;
				font-style: italic;
			}

			.coin-result {
				font-size: 28px;
				font-weight: 900;
				margin: 16px 0;
			}

			.hand-choices {
				display: flex;
				justify-content: center;
				gap: 16px;
				margin-bottom: 20px;
			}
			.hand-btn {
				width: 140px;
				padding: 20px 16px;
				border-radius: 16px;
				border: 3px solid #e0e0e0;
				background: #ffffff;
				font-family: inherit;
				font-size: 18px;
				font-weight: 700;
				color: #1a1a1a;
				cursor: pointer;
				transition: all 0.15s;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8px;
			}
			.hand-btn .emoji {
				font-size: 36px;
			}
			.hand-btn:hover {
				border-color: #1a75bc;
				background: #e8f4fc;
				transform: translateY(-3px);
			}
			.hand-btn:disabled {
				cursor: default;
				opacity: 0.5;
				transform: none;
			}
			.hand-btn.selected {
				border-color: #1a75bc;
				background: #d9eef8;
			}

			.game-result {
				font-size: 22px;
				font-weight: 800;
				margin: 12px 0;
				min-height: 40px;
			}

			.btn-primary {
				background: #1a75bc;
				border: none;
				border-radius: 12px;
				padding: 14px 36px;
				font-family: inherit;
				font-size: 16px;
				font-weight: 700;
				color: #ffffff;
				cursor: pointer;
				transition:
					background 0.15s,
					transform 0.1s;
				display: inline-flex;
				align-items: center;
				gap: 8px;
			}
			.btn-primary:hover {
				background: #1565a0;
				transform: translateY(-1px);
			}
			.btn-primary:active {
				transform: scale(0.97);
			}

			.btn-close-modal {
				background: transparent;
				border: 2px solid #e0e0e0;
				border-radius: 12px;
				padding: 14px 36px;
				font-family: inherit;
				font-size: 16px;
				font-weight: 600;
				color: #666;
				cursor: pointer;
				margin-left: 10px;
				transition: border-color 0.15s;
			}
			.btn-close-modal:hover {
				border-color: #aaa;
			}

			.btn-result {
				border: none;
				border-radius: 12px;
				padding: 14px 28px;
				font-family: inherit;
				font-size: 16px;
				font-weight: 700;
				cursor: pointer;
				transition: all 0.15s;
				min-width: 140px;
			}
			.btn-result:hover {
				transform: translateY(-1px);
			}
			.btn-result:active {
				transform: scale(0.97);
			}
			.btn-win {
				background: #28a745;
				color: #ffffff;
			}
			.btn-win:hover {
				background: #218838;
			}
			.btn-lose {
				background: #dc3545;
				color: #ffffff;
			}
			.btn-lose:hover {
				background: #c82333;
			}

			.modal-actions {
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: 18px;
			}

			/* ── PREMIO ── */
			.prize-area {
				text-align: center;
				padding: 10px 0;
			}
			.prize-icon {
				font-size: 64px;
				margin-bottom: 10px;
			}
			.prize-title {
				font-size: 20px;
				font-weight: 700;
				color: #0f5c8a;
				margin-bottom: 8px;
			}
			.prize-name {
				font-size: 26px;
				font-weight: 900;
				color: #1a75bc;
				margin-bottom: 6px;
			}
			.prize-sub {
				font-size: 14px;
				color: #888;
			}

			/* ── SUERTE ── */
			.suerte-area {
				text-align: center;
				padding: 20px 0;
			}
			.suerte-icon {
				font-size: 64px;
				margin-bottom: 10px;
			}
			.suerte-msg {
				font-size: 22px;
				font-weight: 700;
				color: #666;
				margin-bottom: 6px;
			}

			/* ── CONFETTI ── */
			.confetti-container {
				position: fixed;
				inset: 0;
				pointer-events: none;
				z-index: 200;
				overflow: hidden;
			}
			.confetti-piece {
				position: absolute;
				width: 10px;
				height: 10px;
				top: -10px;
				animation: confettiFall linear forwards;
			}
			@keyframes confettiFall {
				0% {
					transform: translateY(0) rotate(0deg);
					opacity: 1;
				}
				100% {
					transform: translateY(100vh) rotate(720deg);
					opacity: 0;
				}
			}

			.footer {
				background: #0f5c8a;
				color: rgba(255, 255, 255, 0.7);
				text-align: center;
				padding: 14px 20px;
				font-size: 13px;
				font-weight: 400;
			}

			/* ── SELECTION MODAL ── */
			.selection-modal {
				max-width: 620px;
			}
			.select-tabs {
				display: flex;
				gap: 6px;
				margin-bottom: 16px;
			}
			.select-tab {
				flex: 1;
				padding: 10px 16px;
				border: 2px solid #e0e0e0;
				border-radius: 10px;
				background: #ffffff;
				font-family: inherit;
				font-size: 14px;
				font-weight: 700;
				color: #666;
				cursor: pointer;
				transition: all 0.15s;
				text-align: center;
			}
			.select-tab:hover {
				border-color: #1a75bc;
				color: #1a75bc;
			}
			.select-tab.active {
				border-color: #1a75bc;
				background: #e8f4fc;
				color: #1a75bc;
			}
			.select-tab .count {
				font-size: 11px;
				font-weight: 400;
				opacity: 0.7;
				display: block;
				margin-top: 2px;
			}

			.select-toolbar {
				display: flex;
				gap: 8px;
				margin-bottom: 12px;
				flex-wrap: wrap;
			}
			.select-toolbar button {
				padding: 6px 16px;
				border: 1px solid #ccc;
				border-radius: 8px;
				background: #ffffff;
				font-family: inherit;
				font-size: 13px;
				font-weight: 600;
				color: #555;
				cursor: pointer;
				transition: all 0.15s;
			}
			.select-toolbar button:hover {
				border-color: #1a75bc;
				color: #1a75bc;
			}

			.select-list {
				max-height: 360px;
				overflow-y: auto;
				border: 1px solid #eee;
				border-radius: 10px;
			}
			.select-item {
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 10px 14px;
				border-bottom: 1px solid #f0f0f0;
				transition: background 0.1s;
			}
			.select-item:last-child {
				border-bottom: none;
			}
			.select-item:hover {
				background: #fafafa;
			}
			.select-item.disabled {
				opacity: 0.45;
			}

			/* iOS Switch */
			.switch {
				position: relative;
				width: 44px;
				height: 26px;
				flex-shrink: 0;
			}
			.switch input {
				opacity: 0;
				width: 0;
				height: 0;
			}
			.switch .slider {
				position: absolute;
				cursor: pointer;
				inset: 0;
				background: #ccc;
				border-radius: 26px;
				transition: 0.25s;
			}
			.switch .slider::before {
				content: "";
				position: absolute;
				height: 20px;
				width: 20px;
				left: 3px;
				bottom: 3px;
				background: #fff;
				border-radius: 50%;
				transition: 0.25s;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			}
			.switch input:checked + .slider {
				background: #28a745;
			}
			.switch input:checked + .slider::before {
				transform: translateX(18px);
			}

			.select-item-text {
				flex: 1;
				min-width: 0;
			}
			.select-item-text .title {
				font-size: 14px;
				font-weight: 600;
				color: #1a1a1a;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.select-item-text .sub {
				font-size: 12px;
				color: #999;
				margin-top: 2px;
			}

			.preview-btn {
				width: 32px;
				height: 32px;
				border-radius: 8px;
				border: 1px solid #e0e0e0;
				background: #ffffff;
				font-size: 16px;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.15s;
				flex-shrink: 0;
			}
			.preview-btn:hover {
				border-color: #1a75bc;
				background: #e8f4fc;
			}
			.play-btn {
				margin-left: 4px;
			}
			.play-btn:hover {
				border-color: #28A745;
				background: #e8fce8;
			}

			/* Preview overlay */
			#previewOverlay {
				z-index: 110;
			}
			#modalOverlay {
				z-index: 120;
			}
			.preview-content {
				font-size: 15px;
				line-height: 1.6;
				color: #1a1a1a;
			}
			.preview-content .label {
				font-weight: 700;
				color: #0f5c8a;
				margin-top: 12px;
			}
			.preview-content .label:first-child {
				margin-top: 0;
			}
			.preview-content .value {
				margin: 4px 0 0 0;
				padding: 10px 14px;
				background: #f4f4f4;
				border-radius: 8px;
			}
			.preview-content .preview-option {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 6px 10px;
				margin: 4px 0;
				border-radius: 6px;
				font-size: 14px;
			}
			.preview-content .preview-option.correct {
				background: #d4edda;
				font-weight: 600;
			}
			.preview-content .preview-option .badge {
				font-size: 11px;
				padding: 2px 8px;
				border-radius: 4px;
				background: #28a745;
				color: #fff;
				margin-left: auto;
			}

			/* Header button */
			.header-btn {
				background: rgba(255, 255, 255, 0.15);
				border: 1px solid rgba(255, 255, 255, 0.25);
				border-radius: 10px;
				color: #fff;
				cursor: pointer;
				font-size: 20px;
				width: 40px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: background 0.15s;
				flex-shrink: 0;
			}
			.header-btn:hover {
				background: rgba(255, 255, 255, 0.25);
			}

			.empty-msg {
				text-align: center;
				padding: 30px 20px;
				color: #999;
				font-size: 14px;
			}

				/* Objects tags and summary */
			.objeto-summary {
				padding: 10px 14px;
				background: #e8f4fc;
				border-radius: 8px;
				font-size: 13px;
				color: #0f5c8a;
				margin-bottom: 12px;
				line-height: 1.5;
			}
			.objeto-tags {
				display: inline-flex;
				gap: 3px;
				margin-left: 6px;
				vertical-align: middle;
			}
			.objeto-tag {
				cursor: help;
				font-size: 14px;
			}
			.pick-select, .presenter-input {
				width: 100%;
				padding: 10px 14px;
				border: 2px solid #ddd;
				border-radius: 8px;
				font-family: inherit;
				font-size: 14px;
				background: #fff;
				cursor: pointer;
				box-sizing: border-box;
			}
			.pick-select:focus, .presenter-input:focus {
				border-color: #1a75bc;
				outline: none;
			}
			.presenter-label {
				font-size: 12px;
				color: #888;
				margin-bottom: 4px;
			}
			.presenter-row {
				display: flex;
				gap: 8px;
				margin: 12px 0;
			}

		@media (max-width: 600px) {
				.header {
					padding: 10px 16px;
				}
				.main {
					padding: 20px 10px;
				}
				.spin-btn {
					padding: 14px 40px;
					font-size: 18px;
				}
				canvas {
					width: 320px;
					height: 320px;
				}
				.modal-card {
					max-width: 95vw;
				}
				.hand-btn {
					width: 110px;
					padding: 14px 10px;
					font-size: 15px;
				}
				.selection-modal {
					max-width: 95vw;
				}
				.select-list {
					max-height: 260px;
				}
			}
			@media (max-width: 400px) {
				canvas {
					width: 260px;
					height: 260px;
				}
			}