/* =========================================================================
   Mais Internet · Sorteio de Aniversário
   1. Tokens          5. Painel             9. Revelação
   2. Base            6. Botões de sorteio 10. Responsivo
   3. Estrutura       7. Aviso             11. Movimento reduzido
   4. Palco / arte    8. Rodapé
   ========================================================================= */

/* 1. Tokens -------------------------------------------------------------- */
:root {
  --roxo: #6100A7;
  --roxo-escuro: #4A007E;

  --laranja: #F58220;
  --laranja-claro: #FFB673;
  --laranja-escuro: #C25E00;

  --claro: #F9F9F9;
  --lavanda: #EFE6F8;
  --texto: #2B2B2B;
  --texto-suave: #6C587E;

  --raio: clamp(14px, 1.8vmin, 24px);
  --raio-painel: clamp(18px, 2.6vmin, 34px);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --sombra-arte: 0 30px 70px -34px rgba(42, 0, 70, .62), 0 4px 14px -6px rgba(42, 0, 70, .22);
  --sombra-painel: 0 34px 90px -52px rgba(42, 0, 70, .95);

  --font-display: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", "Arial Narrow", system-ui, sans-serif;
  --font-texto: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Cascadia Mono", ui-monospace, Consolas, "Courier New", monospace;
}

/* 2. Base ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; }

html {
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--texto);
  font-family: var(--font-texto);
  line-height: 1.4;
  background-color: var(--claro);
  background-image:
    radial-gradient(90% 75% at 6% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(85% 90% at 0% 100%, var(--lavanda) 0%, rgba(239, 230, 248, 0) 62%);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--laranja); color: #fff; }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

/* 3. Estrutura ----------------------------------------------------------- */
.app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(10px, 2vh, 26px);
  padding: clamp(10px, 2vh, 26px) clamp(10px, 2vw, 30px);
  min-height: 0;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .app { height: 100dvh; }
}

/* 4. Palco / arte -------------------------------------------------------- */
.stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(6px, 1.6vh, 20px) clamp(4px, 1.4vw, 18px);
  overflow: hidden;
}

.stage::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background: radial-gradient(48% 46% at 50% 48%, rgba(97, 0, 167, .12), rgba(97, 0, 167, 0) 70%);
  pointer-events: none;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(97, 0, 167, .18) 1px, transparent 1.6px);
  background-size: 18px 18px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(52% 52% at 50% 50%, #000 0%, rgba(0, 0, 0, .35) 62%, transparent 80%);
  mask-image: radial-gradient(52% 52% at 50% 50%, #000 0%, rgba(0, 0, 0, .35) 62%, transparent 80%);
  pointer-events: none;
}

.stage__watermark {
  position: absolute;
  left: clamp(4px, 1.2vw, 16px);
  top: 50%;
  z-index: -1;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vmin, 1.5rem);
  font-weight: 700;
  letter-spacing: .42em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(97, 0, 167, .48);
  pointer-events: none;
}

.art {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  margin: 0;
  flex: 0 0 auto;
}

.art__sheet {
  position: absolute;
  inset: 0;
  transform: translate(7px, 11px) rotate(-1.6deg);
  border-radius: var(--raio);
  background: var(--roxo);
  opacity: .14;
}

.art__frame {
  position: relative;
  height: 100%;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--lavanda);
  border: 1px solid rgba(97, 0, 167, .14);
  box-shadow: var(--sombra-arte);
}

.art__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  pointer-events: none;
}

.art__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stage__note {
  display: none;
  min-width: 0;
  max-width: 42ch;
}

.stage__kicker,
.stage__prize,
.stage__date { margin: 0; }

.stage__kicker {
  font-size: clamp(.58rem, 1.5vmin, .76rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.stage__prize {
  margin-top: .35em;
  font-family: var(--font-display);
  font-size: clamp(.95rem, 2.6vmin, 1.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--roxo);
}

.stage__date {
  margin-top: .4em;
  font-size: clamp(.72rem, 1.8vmin, .9rem);
  color: var(--texto-suave);
}

/* 5. Painel -------------------------------------------------------------- */
.panel {
  position: relative;
  isolation: isolate;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.7vh, 20px);
  padding: clamp(14px, 2.6vmin, 34px) clamp(16px, 3vmin, 40px);
  overflow: hidden;
  border-radius: var(--raio-painel);
  background-color: var(--roxo);
  color: #fff;
  box-shadow: var(--sombra-painel);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 52% at 100% 108%, rgba(18, 0, 32, .55) 0%, rgba(18, 0, 32, 0) 72%),
    radial-gradient(48% 42% at 96% 84%, rgba(245, 130, 32, .22) 0%, rgba(245, 130, 32, 0) 72%);
  pointer-events: none;
}

.panel > *:not(.visually-hidden) {
  position: relative;
  z-index: 1;
}

.panel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(8px, 2vmin, 20px);
  min-width: 0;
}

.brand__img {
  width: clamp(84px, min(34%, 24vh), 300px);
  max-height: 26vh;
  flex: 0 1 auto;
  aspect-ratio: 5 / 4;
  height: auto;
  object-fit: cover;
  object-position: center 45%;
  border-radius: clamp(8px, 1.2vmin, 14px);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  flex: 0 0 auto;
  padding: clamp(3px, .7vh, 7px) clamp(7px, 1.2vmin, 12px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: clamp(.56rem, 1.2vmin, .74rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F3E8FB;
  white-space: nowrap;
}

.live__dot {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--laranja);
  box-shadow: 0 0 0 0 rgba(245, 130, 32, .55);
  animation: live-pulse 2.6s var(--ease) infinite;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 130, 32, .5); }
  70%  { box-shadow: 0 0 0 .5em rgba(245, 130, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 130, 32, 0); }
}

.heading {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, .5vh, 8px);
  min-width: 0;
}

.heading__eyebrow {
  margin: 0;
  font-size: clamp(.6rem, 1.3vmin, .78rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #DCC6F0;
}

.heading__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 5.6vmin, 4rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.heading__title span { color: var(--laranja); }

.heading__sub {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(.8rem, 1.8vmin, 1.05rem);
  color: #E4D4F2;
}

/* 6. Botões de sorteio --------------------------------------------------- */
.draws {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: clamp(6px, 1.2vh, 14px);
  min-height: 0;
}

.draw {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: clamp(58px, 13.5vh, 150px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.8vmin, 18px);
  padding: clamp(8px, 1.6vh, 16px) clamp(12px, 2vmin, 22px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: calc(var(--raio) * .85);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              transform .18s var(--ease), box-shadow .2s ease;
}

.draw::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--laranja);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .2s var(--ease);
}

.draw:hover:not(:disabled) {
  background: #fff;
  border-color: #fff;
  color: var(--roxo);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .65);
}

.draw:hover:not(:disabled)::before { transform: scaleY(1); }

.draw:hover:not(:disabled) .draw__num { color: var(--laranja-escuro); }

.draw:active:not(:disabled) { transform: translateY(0) scale(.996); }

.draw:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
}

.draw:disabled { cursor: default; }

.draw.is-loading {
  opacity: .8;
  cursor: progress;
}

.draw.is-error { opacity: .45; }

.draw__num {
  flex: 0 0 auto;
  min-width: 2.1ch;
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vmin, 1.9rem);
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--laranja);
}

.draw__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.draw__label {
  font-size: clamp(1rem, 2.8vmin, 1.85rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.draw__meta {
  max-width: 100%;
  min-width: 0;
  font-size: clamp(.7rem, 1.5vmin, .95rem);
  color: rgba(255, 255, 255, .68);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
}

.draw__meta:empty { display: none; }

.draw:hover:not(:disabled) .draw__meta { color: var(--texto-suave); }

/* Sorteado: o card guarda o resultado até ser sobrescrito */
.draw.has-winner {
  border-color: rgba(245, 130, 32, .55);
  background: rgba(245, 130, 32, .12);
}

.draw.has-winner::before { transform: scaleY(1); }

.draw.has-winner .draw__meta {
  color: #fff;
  font-weight: 600;
  font-size: clamp(.8rem, 1.9vmin, 1.2rem);
  letter-spacing: .01em;
}

.draw:hover:not(:disabled).has-winner .draw__meta { color: var(--texto-suave); }

.draw__icon {
  flex: 0 0 auto;
  width: clamp(18px, 2.6vmin, 30px);
  height: auto;
  margin-left: auto;
  opacity: .75;
  transition: transform .2s var(--ease), opacity .2s ease;
}

.draw__icon--check { display: none; }

.draw.has-winner .draw__icon--arrow { display: none; }

.draw.has-winner .draw__icon--check {
  display: block;
  color: var(--laranja);
  opacity: 1;
}

.draw:hover:not(:disabled) .draw__icon {
  opacity: 1;
  transform: translateX(3px);
}

.draw:hover:not(:disabled) .draw__icon--check { color: var(--laranja-escuro); }

.draw__spinner {
  display: none;
  flex: 0 0 auto;
  width: clamp(14px, 1.9vmin, 18px);
  height: clamp(14px, 1.9vmin, 18px);
  margin-left: auto;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

.draw.is-loading .draw__spinner { display: block; }
.draw.is-loading .draw__icon { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.nojs {
  margin: 0;
  padding: clamp(8px, 1.4vh, 14px);
  border: 1px dashed rgba(255, 255, 255, .35);
  border-radius: calc(var(--raio) * .8);
  font-size: clamp(.72rem, 1.4vmin, .86rem);
  color: #FFE6CE;
}

/* 7. Aviso --------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.4vmin, 12px);
  padding: clamp(8px, 1.3vh, 14px) clamp(10px, 1.6vmin, 16px);
  border: 1px solid rgba(245, 130, 32, .48);
  border-radius: calc(var(--raio) * .8);
  background: rgba(245, 130, 32, .13);
  color: #FFE9D4;
}

.notice[hidden] { display: none; }

.notice__icon {
  flex: 0 0 auto;
  width: clamp(16px, 2vmin, 20px);
  height: auto;
  margin-top: .15em;
  color: var(--laranja);
}

.notice__body { min-width: 0; }

.notice__title,
.notice__text,
.notice__hint { margin: 0; }

.notice__title {
  font-size: clamp(.76rem, 1.5vmin, .92rem);
  font-weight: 700;
  color: #fff;
}

.notice__text {
  margin-top: 2px;
  font-size: clamp(.7rem, 1.3vmin, .84rem);
  line-height: 1.35;
}

.notice__hint {
  margin-top: 4px;
  font-size: clamp(.68rem, 1.25vmin, .82rem);
  line-height: 1.35;
  color: #FFD9B4;
}

.notice code {
  padding: .05em .35em;
  border-radius: 4px;
  background: rgba(0, 0, 0, .25);
  font-family: var(--font-num);
  font-size: .95em;
  color: #fff;
}

/* 8. Rodapé -------------------------------------------------------------- */
.panel__foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: clamp(6px, .9vh, 12px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: clamp(.62rem, 1.3vmin, .82rem);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
}

/* 9. Revelação ----------------------------------------------------------- */
.reveal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vmin, 40px);
}

.reveal[hidden] { display: none; }

.reveal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 3, 40, .74);
  -webkit-backdrop-filter: blur(16px) saturate(.85);
  backdrop-filter: blur(16px) saturate(.85);
  opacity: 0;
  transition: opacity .24s ease;
}

.reveal.is-open .reveal__backdrop { opacity: 1; }

.reveal__card {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .8vh, 8px);
  padding: clamp(22px, 5vmin, 60px) clamp(20px, 4.5vmin, 64px);
  overflow: hidden;
  border-radius: clamp(20px, 3vmin, 34px);
  background: radial-gradient(120% 130% at 50% -10%, #5C0099 0%, #3E0070 42%, #26003F 100%);
  box-shadow: 0 50px 140px -40px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(.965);
  transition: opacity .24s ease, transform .3s var(--ease);
}

.reveal.is-open .reveal__card {
  opacity: 1;
  transform: none;
}

.reveal__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, rgba(245, 130, 32, 0) 0%, var(--laranja) 50%, rgba(245, 130, 32, 0) 100%);
}

.reveal__card::after {
  content: "";
  position: absolute;
  inset: auto -20% -55% -20%;
  z-index: 0;
  height: 60%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(245, 130, 32, .18), rgba(245, 130, 32, 0) 70%);
  pointer-events: none;
}

.reveal__eyebrow,
.reveal__status,
.reveal__badge,
.reveal__name,
.reveal__contract,
.reveal__hint {
  position: relative;
  z-index: 1;
}

.reveal__close {
  position: absolute;
  top: clamp(10px, 1.8vmin, 18px);
  right: clamp(10px, 1.8vmin, 18px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(36px, 4.4vmin, 48px);
  height: clamp(36px, 4.4vmin, 48px);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.reveal__close svg { width: 45%; height: auto; }

.reveal__close:hover {
  background: var(--laranja);
  border-color: var(--laranja);
  transform: rotate(90deg);
}

.reveal__eyebrow {
  margin: 0;
  font-size: clamp(.64rem, 1.5vmin, .86rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laranja-claro);
}

.reveal__status {
  margin: 0;
  font-size: clamp(.66rem, 1.6vmin, .9rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D9C4EE;
}

.reveal__status[hidden] { display: none; }

.reveal__badge {
  margin: 0;
  font-size: clamp(.68rem, 1.6vmin, .92rem);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--laranja);
}

.reveal__badge[hidden] { display: none; }

.dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.dots i {
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--laranja);
  animation: dot-bounce 1s ease-in-out infinite;
}

.dots i:nth-child(2) { animation-delay: .14s; }
.dots i:nth-child(3) { animation-delay: .28s; }

@keyframes dot-bounce {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

.reveal__name {
  margin: clamp(6px, 1.8vh, 18px) 0 0;
  max-width: 100%;
  min-height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 6.8vmin, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.reveal__name.is-long { font-size: clamp(1.2rem, 4.8vmin, 3.2rem); }

.reveal.is-locked .reveal__name {
  animation: name-in .42s var(--ease) both;
}

@keyframes name-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.reveal__contract {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: clamp(12px, 2.6vh, 28px);
  padding: clamp(9px, 1.6vh, 18px) clamp(24px, 3.8vmin, 48px);
  border: 1.5px solid rgba(245, 130, 32, .6);
  border-radius: 999px;
  background: rgba(245, 130, 32, .16);
  box-shadow: 0 20px 55px -32px rgba(245, 130, 32, .6);
}

.reveal__contract[hidden] { display: none; }

.reveal__contract.is-pending { visibility: hidden; }

.reveal.is-locked .reveal__contract {
  animation: fade-up .3s .08s var(--ease) both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.reveal__contract-label {
  font-size: clamp(.62rem, 1.4vmin, .82rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laranja-claro);
}

.reveal__contract-value {
  font-family: var(--font-num);
  font-size: clamp(1.4rem, 3.6vmin, 2.6rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}

.reveal__hint {
  margin: clamp(6px, 1.6vh, 18px) 0 0;
  font-size: clamp(.58rem, 1.2vmin, .72rem);
  color: rgba(255, 255, 255, .65);
}

/* 10. Responsivo --------------------------------------------------------- */
@media (max-width: 760px), (orientation: portrait) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 1.6vh, 18px);
  }

  .stage {
    height: clamp(150px, 32vh, 340px);
    height: clamp(150px, 32dvh, 340px);
    padding: 6px 0;
    gap: clamp(14px, 3vw, 28px);
  }

  .art {
    width: auto;
    max-width: 60%;
  }

  .art__sheet { display: none; }

  .stage__note { display: block; text-align: left; }
  .stage__kicker { display: none; }
  .stage__prize { margin-top: 0; }
  .stage__watermark { display: none; }
  .stage::after { opacity: .35; }

  .brand__img { width: min(32%, 18vh); }
  .heading__title { font-size: clamp(1.55rem, 4.6vmin, 2.6rem); }
  .draw { max-height: clamp(52px, 11vh, 88px); }
}

@media (max-width: 640px) {
  .app { padding: 8px; gap: 8px; }

  .stage { gap: 14px; }
  .art { max-width: 46%; }

  .panel {
    padding: clamp(12px, 2.4vh, 18px) clamp(12px, 3.6vw, 18px);
    gap: clamp(6px, 1.2vh, 10px);
    border-radius: 20px;
  }

  .brand__img { width: min(30%, 13vh); }

  .heading__eyebrow { font-size: .56rem; letter-spacing: .14em; }
  .heading__title { font-size: clamp(1.4rem, 7.2vw, 2rem); }
  .heading__sub { font-size: .76rem; max-width: 30ch; }

  .draw {
    gap: 10px;
    padding: 8px 10px;
    max-height: clamp(48px, 11vh, 76px);
  }

  .draw__num { font-size: .92rem; min-width: 1.9ch; }
  .draw__label { font-size: .98rem; }
  .draw__meta { font-size: .67rem; }
  .draw__icon { width: 16px; }

  /* Resultado no card: linha menor e com folga própria para respirar */
  .draw.has-winner .draw__meta {
    padding-right: 6px;
    font-size: clamp(.72rem, 1.9vmin, .8rem);
    line-height: 1.25;
  }

  .live { font-size: .52rem; padding: 3px 7px; }

  .panel__foot { padding-top: 6px; font-size: .58rem; }

  .stage__prize { font-size: .86rem; }
  .stage__date { font-size: .66rem; }

  .reveal__name { max-width: 100%; }
}

@media (max-width: 500px) {
  .notice__text { display: none; }
  .panel.has-notice .heading__eyebrow,
  .panel.has-notice .heading__sub { display: none; }
  .panel.has-notice .brand__img { width: min(24%, 10vh); }
}

/* Coluna única em telas baixas (ex.: 640x560): encurta a faixa da arte */
@media (max-width: 760px) and (max-height: 620px) {
  .stage {
    height: clamp(140px, 27vh, 200px);
    height: clamp(140px, 27dvh, 200px);
  }

  .heading__eyebrow { display: none; }
}

@media (min-width: 761px) and (max-height: 640px) {
  .app { padding: 12px 18px; gap: 16px; }

  .panel { padding: 13px 22px; gap: 10px; }
  .brand__img { width: min(32%, 21vh); }
  .heading__title { font-size: clamp(1.5rem, 4.6vmin, 2.6rem); }
  .heading__sub { font-size: clamp(.74rem, 1.7vmin, .92rem); }

  .draw { max-height: clamp(56px, 12.5vh, 92px); }

  .panel__foot { font-size: .6rem; padding-top: 6px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .app {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 8px;
    gap: 10px;
  }

  .stage { height: auto; padding: 4px 0; }
  .stage__note,
  .stage__watermark { display: none; }
  .art { max-width: 100%; }
  .art__sheet { display: none; }

  .panel { padding: 10px 14px; gap: 6px; border-radius: 16px; }

  .brand__img { width: min(40%, 24vh); }

  .heading__eyebrow { display: none; }
  .heading__title { font-size: clamp(1.05rem, 5.4vh, 1.7rem); }
  .heading__sub { font-size: .7rem; }

  .draw { max-height: clamp(52px, 15vh, 68px); padding: 5px 9px; gap: 8px; }
  .draw__num { font-size: .95rem; }
  .draw__label { font-size: 1rem; }
  .draw__meta { font-size: .72rem; }
  .draw__icon { width: 15px; }

  .panel__foot { font-size: .58rem; }
  .notice__text { display: none; }

  .panel.has-notice .brand__img { width: min(30%, 14vh); }
  .panel.has-notice .heading__sub,
  .panel.has-notice .panel__foot { display: none; }

  .reveal__card { padding: 18px 24px; }
  .reveal__name { font-size: clamp(1.1rem, 6vh, 2rem); }
  .reveal__hint { margin-top: 6px; }
}

/* 11. Movimento reduzido ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }

  .live__dot { animation: none; }
  .dots i { animation: none; opacity: 1; }
  .reveal__card { transform: none; }
  .reveal.is-locked .reveal__name,
  .reveal.is-locked .reveal__contract { animation: none; }
  .draw:hover:not(:disabled) { transform: none; }
  .reveal__close:hover { transform: none; }

  .draw.is-loading .draw__spinner {
    animation: spin 1.6s linear infinite;
  }
}