/* Portada pública: crema, durazno y azul;
los controles privados conservan su vista. */
.gratitude[hidden]{
  display:none!important
}

.gratitude{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:center;
  background:#fff8eb;
  border:1px solid #b98c6a;
  border-radius:24px 8px;
  color:#49372d;
  padding:18px 18px 14px;
  box-shadow:0 4px 20px #68462b08
}

.gratitude::before,.gratitude::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  z-index:-1;
  pointer-events:none;
  border-radius:43% 57% 70% 30%
}

.gratitude::before{
  left:-90px;
  top:-60px;
  background:#f9dfc7;
  transform:rotate(22deg)
}

.gratitude::after{
  right:-105px;
  bottom:-85px;
  background:#d8eaf0;
  transform:rotate(-18deg)
}

.gratitude-frame{
  position:relative;
  display:inline-block;
  padding:5px;
  margin:0 0 10px;
  border:1px solid #b78a68;
  border-radius:44% 44% 14px 14px;
  background:#fff8eb;
  outline:1px solid #ddbea2;
  outline-offset:3px
}

.gratitude-frame::before,.gratitude-frame::after{
  position:absolute;
  color:#bb8462;
  font-size:18px
}

.gratitude-frame::before{
  content:"♥";
  left:-34px;
  top:17px
}

.gratitude-frame::after{
  content:"🐾";
  right:-36px;
  bottom:15px;
  opacity:.65;
  font-size:20px
}

.gratitude-photo{
  display:block;
  width:184px;
  height:112px;
  object-fit:cover;
  object-position:60% 55%;
  border-radius:43% 43% 9px 9px;
  background:#e7d9c5
}

.gratitude h2{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(25px,6.7vw,30px);
  line-height:1.12;
  color:#915b3f;
  margin:3px auto 12px;
  max-width:360px;
  text-wrap:balance
}

.gratitude h2 span{
  font-size:.6em;
  white-space:nowrap
}

.gratitude-full{
  display:inline-block;
  font-size:13px;
  font-weight:650;
  color:#694935;
  line-height:1.4;
  margin:0 0 8px;
  padding:6px 12px;
  border-radius:999px;
  background:#f9ead8
}

.gratitude-connection{
  font-size:13px;
  line-height:1.45;
  padding:9px;
  background:#f9ead2;
  color:#66472b;
  border-radius:9px;
  margin:0 0 11px
}

.gratitude-connection[hidden]{
  display:none
}

.gratitude-reminder p{
  font-size:14px;
  line-height:1.5;
  margin:0
}

.gratitude-reminder{
  margin:12px auto;
  max-width:390px
}

.gratitude-reminder h3{
  font-size:15px;
  color:#654b3b;
  margin:0 0 5px
}

.gratitude-nequi{
  background:#edf4f6;
  border:1px solid #c9dde3;
  border-radius:15px;
  padding:12px;
  max-width:340px;
  margin:auto
}

.gratitude-nequi h3{
  margin:0;
  font-size:14px;
  font-weight:650;
  color:#445d6b
}

.gratitude-number{
  display:block;
  color:#344b5a;
  font-size:27px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  letter-spacing:.045em;
  margin:3px 0 10px;
  user-select:all;
  -webkit-user-select:all
}

.gratitude-copy{
  width:100%;
  min-height:48px;
  border:1px solid #557486;
  border-radius:10px;
  background:#557486;
  color:#fff;
  font-weight:700;
  font-size:16px;
  padding:10px;
  touch-action:manipulation
}

.gratitude-copy[aria-disabled="true"]{
  opacity:.7;
  cursor:wait
}

.gratitude-copy:focus-visible,.gratitude-info summary:focus-visible{
  outline:3px solid #915b3f;
  outline-offset:3px
}

.gratitude-copy-status{
  font-size:13px;
  line-height:1.4;
  color:#344b5a;
  margin:7px 0 0
}

.gratitude-copy-status:empty{
  display:none
}

.gratitude-blessing{
  font:italic 600 21px/1.3 Georgia,'Times New Roman',serif;
  color:#915b3f;
  margin:14px 0 0
}

.gratitude-info{
  max-width:440px;
  margin:11px auto 0;
  text-align:center;
  color:#6e5848;
  font-size:13px;
  line-height:1.5
}

.gratitude-info summary{
  padding:12px;
  min-height:44px;
  cursor:pointer
}

.gratitude-info p{
  margin:7px 0
}

.gratitude-info a{
  color:#344b5a;
  text-underline-offset:3px
}

body:is(.raffle-complete,.raffle-celebrating){
  background:#fff8eb;
  color-scheme:light;
  min-height:100vh
}

body:is(.raffle-complete,.raffle-celebrating) .top{
  position:static;
  background:transparent;
  border:0;
  padding-top:max(9px,env(safe-area-inset-top));
  padding-bottom:8px;
  max-width:500px;
  margin:auto
}

body:is(.raffle-complete,.raffle-celebrating) .top h1{
  font-size:18px;
  color:#805b45
}

body:is(.raffle-complete,.raffle-celebrating) .top .subtitle{
  display:none
}

body:is(.raffle-complete,.raffle-celebrating) .top .visitor-admin-button{
  min-height:44px;
  border-color:#d6bfa7;
  color:#684c3a;
  background:#fffaf3;
  font-size:13px
}

body:is(.raffle-complete,.raffle-celebrating) main{
  max-width:500px;
  padding:0 12px 20px
}

body:is(.raffle-complete,.raffle-celebrating) :is(.statusbar,#publicGridNote,.poster,.legend,#actions,#storyOpen,#transferOpen,.foot-actions,#extras){
  display:none!important
}

body:is(.raffle-complete,.raffle-celebrating) .message:empty{
  display:none
}

body:is(.raffle-complete,.raffle-celebrating) .usage-privacy{
  margin:0 auto;
  font-size:12px;
  text-align:center
}

body:is(.raffle-complete,.raffle-celebrating) .usage-privacy summary{
  min-height:44px;
  padding:12px
}

@media(max-width:350px){
  .gratitude{
    padding:16px 14px 14px
  }
  .gratitude-photo{
    width:168px;
    height:100px
  }
  .gratitude-reminder{
    margin-top:12px
  }
  .gratitude-frame::before{
    left:-25px
  }
  .gratitude-frame::after{
    right:-28px
  }
}

@media(min-width:650px){
  .gratitude{
    padding:25px 30px 20px
  }
  .gratitude-photo{
    width:240px;
    height:152px
  }
}

/* Cierre de cupo: 360 ms de cuadrícula y 1740 ms de celebración. */
body.raffle-loading main{
  visibility:hidden
}

.completion-celebration[hidden]{
  display:none!important
}

.completion-celebration{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height:clamp(310px,58vh,510px);
  padding:32px 20px;
  text-align:center;
  background:#fff8eb;
  color:#694935;
  border:1px solid #ddc3a9;
  border-radius:24px 8px
}

.completion-copy{
  position:relative;
  z-index:1;
  animation:completion-message 1740ms ease-in-out both
}

.completion-emoji{
  display:block;
  font-size:42px;
  margin-bottom:17px
}

.completion-celebration h2{
  font:italic 600 clamp(34px,9vw,44px)/1.15 Georgia,'Times New Roman',serif;
  color:#915b3f;
  margin:0 0 15px
}

.completion-celebration p{
  font-size:17px;
  line-height:1.5;
  max-width:255px;
  margin:0 auto;
  text-wrap:balance
}

.completion-heart{
  display:block;
  font-size:24px;
  color:#bb8462;
  margin-top:24px
}

.celebration-spark{
  position:absolute;
  width:7px;
  height:12px;
  left:18%;
  top:28%;
  border-radius:3px;
  background:#dba888;
  transform:rotate(-22deg);
  animation:completion-spark 1500ms ease-out both
}

.celebration-spark:nth-child(2){
  left:79%;
  top:23%;
  background:#8cb2c0;
  animation-delay:80ms
}

.celebration-spark:nth-child(3){
  left:12%;
  top:63%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#b7d1d8;
  animation-delay:140ms
}

.celebration-spark:nth-child(4){
  left:84%;
  top:68%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e6c19d;
  animation-delay:200ms
}

body.raffle-finishing :is(.poster,#actions,.statusbar,#publicGridNote,#numberDialog){
  animation:completion-board 360ms ease-in both;
  pointer-events:none
}

body.raffle-finishing :is(.poster-ticket,.ticket){
  animation:completion-ticket 260ms ease-out both
}

.gratitude-arriving{
  animation:completion-arrive 280ms ease-out both
}

@keyframes completion-ticket{
  50%{
    transform:scale(.94);
    filter:brightness(1.13)
  }
}

@keyframes completion-board{
  0%,38%{
    opacity:1
  }
  100%{
    opacity:0;
    transform:translateY(-5px)
  }
}

@keyframes completion-message{
  0%{
    opacity:0;
    transform:translateY(8px)
  }
  14%,82%{
    opacity:1;
    transform:translateY(0)
  }
  100%{
    opacity:0;
    transform:translateY(-5px)
  }
}

@keyframes completion-spark{
  0%{
    opacity:0;
    translate:0 12px
  }
  30%{
    opacity:.8
  }
  100%{
    opacity:0;
    translate:0 -24px
  }
}

@keyframes completion-arrive{
  from{
    opacity:0;
    transform:translateY(6px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}

@media(prefers-reduced-motion:reduce){
  .gratitude-arriving,.completion-copy,.celebration-spark,body.raffle-finishing :is(.poster,#actions,.statusbar,#publicGridNote,#numberDialog,.poster-ticket,.ticket){
    animation:none!important;
    transition:none!important
  }
}

/* El resultado confirmado es la última portada; el Cuaderno permanece accesible. */
body.draw-finished:not(.is-admin){background:#fff8eb;color-scheme:light}
body.draw-finished:not(.is-admin) main{max-width:500px}
body.draw-finished:not(.is-admin) :is(#gratitude,#completionCelebration,.statusbar,#publicGridNote,.poster,.legend,#actions,#storyOpen,#transferOpen,.foot-actions,#extras){display:none!important}
body.draw-finished:not(.is-admin) .top{position:static;max-width:500px;margin:auto;background:transparent;border:0}
body.draw-finished:not(.is-admin) .top .subtitle{display:none}