:root{
  --bg0:#070707;
  --bg1:#0b0b0f;

  --gold:#d4af37;
  --gold2:#f3d77a;
  --gold3:#b8891a;

  --muted:rgba(255,255,255,0.70);
  --glass:rgba(255,255,255,0.05);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(1200px 800px at 50% 35%, rgba(212,175,55,0.10), rgba(0,0,0,0)),
    radial-gradient(900px 650px at 20% 80%, rgba(243,215,122,0.06), rgba(0,0,0,0)),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

a{ text-decoration:none; color:inherit; }

.wrap{
  width:min(1400px, 94vw);
  padding:28px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.frame{
  width:100%;
  padding:56px 46px;
  border-radius:28px;
  position:relative;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));

  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  overflow:hidden;
}

.frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    radial-gradient(520px 280px at 18% 12%, rgba(212,175,55,0.16), rgba(0,0,0,0)),
    radial-gradient(600px 320px at 85% 80%, rgba(243,215,122,0.10), rgba(0,0,0,0));
  filter: blur(12px);
  opacity:0.9;
}

/* Cornice solo angoli */
.frameCorners{
  position:absolute;
  inset:18px;
  pointer-events:none;

  background:
    /* top left */
    linear-gradient(90deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) left top / 56px 2px no-repeat,
    linear-gradient(180deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) left top / 2px 56px no-repeat,

    /* top right */
    linear-gradient(90deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) right top / 56px 2px no-repeat,
    linear-gradient(180deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) right top / 2px 56px no-repeat,

    /* bottom left */
    linear-gradient(90deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) left bottom / 56px 2px no-repeat,
    linear-gradient(180deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) left bottom / 2px 56px no-repeat,

    /* bottom right */
    linear-gradient(90deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) right bottom / 56px 2px no-repeat,
    linear-gradient(180deg, rgba(243,215,122,0.95), rgba(212,175,55,0.75)) right bottom / 2px 56px no-repeat;
  opacity:0.85;
}

.inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 320px;
}

.winnerLink{
  display:inline-block;
  outline:none;
}

.winnerLink:focus-visible{
  box-shadow: 0 0 0 3px rgba(212,175,55,0.35);
  border-radius:18px;
}

svg.winnerSvg{
  width:100%;
  height:auto;
  overflow:visible;
}

text{
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Stroke esterno più morbido */
text.strokeOuter{
  fill: transparent;
  stroke: rgba(212,175,55,0.22);
  stroke-width: 14px;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 26px rgba(212,175,55,0.16));
}

/* Stroke principale con gradiente */
text.stroke{
  fill: transparent;
  stroke: url(#goldStroke);
  stroke-width: 6px;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  filter: drop-shadow(0 0 18px rgba(212,175,55,0.18));
  animation: draw 2.4s ease-out forwards;
}

/* Fill che compare dopo */
text.fill{
  fill: url(#goldFill);
  fill-opacity: 0;
  filter: drop-shadow(0 0 20px rgba(212,175,55,0.12));
  animation: reveal 0.9s ease-out 1.5s forwards;
}

@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes reveal{ to{ fill-opacity: 1; } }

@media (max-width: 560px){
  .frame{ padding:38px 22px; border-radius:22px; }
  .frameCorners{ inset:14px; }
  .inner{ min-height: 280px; }
  text.strokeOuter{ stroke-width: 12px; }
  text.stroke{ stroke-width: 5px; }
}