/* Infinity Ruleta - estética Sea Foam Blue + Saffron */
.ir-app-frame {
  --ir-teal: #2a8585;
  --ir-teal-dark: #1f6363;
  --ir-saffron: #fabb5b;
  --ir-soft-bg: #ecf5f5;
  --ir-border: #d4e6e6;
  --ir-text: #1a2a2a;
  --ir-muted: #5a7070;
  --ir-warning-bg: #fff7e0;
  --ir-warning-border: #fabb5b;
  --ir-shadow: 0 10px 30px -10px rgba(42,133,133,0.45);

  max-width: 420px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ir-text);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.ir-loading { padding: 40px; text-align: center; color: var(--ir-muted); }

.ir-header {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 36px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, var(--ir-teal-dark), var(--ir-teal));
}
.ir-header::before, .ir-header::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.ir-header::before { right: -64px; top: -64px; width: 224px; height: 224px; background: rgba(255,255,255,0.12); }
.ir-header::after { left: -80px; bottom: -80px; width: 256px; height: 256px; background: rgba(250,187,91,0.18); }
.ir-header-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ir-logo {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.ir-logo img { width: 100%; height: 100%; object-fit: contain; }
.ir-header h1 { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.ir-header p { font-size: 14px; margin: 0; opacity: 0.95; }

.ir-content { padding: 24px; }
.ir-field { margin-bottom: 14px; }
.ir-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ir-text); }
.ir-field input, .ir-field select {
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--ir-border);
  border-radius: 12px; padding: 12px 14px; font-size: 15px;
  color: var(--ir-text); outline: none; transition: all 0.2s ease;
  font-family: inherit;
}
.ir-field input:focus, .ir-field select:focus {
  border-color: var(--ir-teal);
  box-shadow: 0 0 0 4px rgba(42,133,133,0.15);
}

.ir-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; font-weight: 600; font-family: inherit;
  background: linear-gradient(135deg, var(--ir-teal-dark), var(--ir-teal));
  color: #fff; border: none; cursor: pointer;
  border-radius: 12px; padding: 14px 24px; font-size: 16px;
  box-shadow: var(--ir-shadow); margin-top: 8px;
  transition: all 0.2s ease;
}
.ir-btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.ir-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

.ir-warning {
  border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500;
  background: var(--ir-warning-bg); border: 1px solid var(--ir-warning-border);
  color: #5a3d10; margin-bottom: 12px;
}
.ir-error {
  border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500;
  background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3);
  color: #b91c1c; margin-bottom: 12px;
}

.ir-wheel-wrap { display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.ir-wheel-svg-wrap { position: relative; width: 300px; height: 324px; }
.ir-pointer { position: absolute; left: 50%; transform: translateX(-50%); top: -2px; z-index: 2; }
.ir-wheel-rotor { transition: transform 4s cubic-bezier(0.17, 0.67, 0.21, 1); transform-origin: 150px 150px; }
.ir-spin-hint { font-size: 12px; color: var(--ir-muted); margin-top: 16px; }

.ir-result-card {
  width: 100%; box-sizing: border-box;
  border-radius: 16px; padding: 24px; text-align: center;
  background: linear-gradient(180deg, var(--ir-soft-bg), #fff);
  border: 1px solid rgba(42,133,133,0.25);
  box-shadow: var(--ir-shadow);
}
.ir-result-emoji { font-size: 56px; line-height: 1; }
.ir-result-card h2 { font-size: 20px; font-weight: 700; color: var(--ir-teal-dark); margin: 12px 0 0; }
.ir-result-card p { font-size: 14px; margin: 12px 0 0; }
.ir-result-card .ir-foot { font-size: 12px; color: var(--ir-muted); margin-top: 20px; }

.ir-footer { padding: 16px; text-align: center; font-size: 11px; color: var(--ir-muted); }
.ir-fade-in { animation: ir-fade 0.4s ease; }
@keyframes ir-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }