*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:#102d50}body{background:radial-gradient(circle at 50% -12%,#20304a 0,#0b1320 34%,#070b12 100%);overflow-x:hidden}.page{max-width:1120px;margin:auto;padding:28px 22px 36px}.hero-card{position:relative;overflow:hidden;background:linear-gradient(155deg,#111a29 0,#0b121d 70%,#0a0f18 100%);border:1px solid #26354b;border-radius:38px;box-shadow:0 32px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.035);padding:28px 46px 40px}.hero-card:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,204,75,.55) 1px,transparent 1px);background-size:24px 24px;opacity:.045;pointer-events:none}.brand{text-align:center;position:relative;z-index:2}.brand-mark{font-size:38px;font-weight:950;letter-spacing:-2px;color:#f5f7fb;text-shadow:0 3px 18px rgba(0,0,0,.35)}.brand-mark b{color:#f2bd3c;margin-left:8px;text-shadow:0 0 18px rgba(242,189,60,.28)}.brand-sub{font-size:11px;font-weight:900;letter-spacing:7px;color:#7f90aa;margin-top:2px}.headline{text-align:center;margin:26px auto 8px;position:relative;z-index:2}.eyebrow{display:inline-flex;background:linear-gradient(180deg,#182337,#101925);color:#f4c84d;border:1px solid #3d4d65;padding:8px 14px;border-radius:99px;font-size:10px;font-weight:900;letter-spacing:1.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.headline h1{margin:10px 0 0;font-size:clamp(38px,6vw,70px);line-height:.95;letter-spacing:-4px;color:#f7f9fc;text-shadow:0 5px 28px rgba(0,0,0,.42)}.headline h1 em{font-style:normal;color:#f3bd32;text-shadow:0 0 22px rgba(243,189,50,.18)}.headline p{margin:12px 0;color:#9ba9bc;font-size:14px}.spin-stage{position:relative;width:min(650px,78vw);aspect-ratio:1;margin:2px auto 10px;display:grid;place-items:center}.wheel-shell{
width:88%;aspect-ratio:1;border-radius:50%;padding:30px;
background:
radial-gradient(circle at 50% 50%,transparent 0 78%,rgba(255,244,190,.22) 78.4% 79.2%,transparent 79.5%),
conic-gradient(from 0deg,#6d4510,#f7cb56 5%,#fff1a5 10%,#9a6516 16%,#e1ae34 22%,#fff0a0 29%,#82540f 36%,#e7b642 44%,#fff3af 52%,#875811 60%,#edc251 68%,#fff2a4 77%,#8d5d13 86%,#dba830 93%,#6d4510 100%);
box-shadow:
0 34px 85px rgba(0,0,0,.62),
0 0 0 4px #241706,
0 0 0 8px #70480e,
0 0 0 13px #d8a632,
0 0 0 16px #302006,
0 0 0 20px rgba(234,183,55,.28),
0 0 48px rgba(244,194,61,.24),
inset 0 0 0 3px rgba(255,251,221,.52),
inset 0 0 18px rgba(81,49,5,.65);
position:relative}.wheel-shell:after{
content:"";position:absolute;inset:20px;border-radius:50%;z-index:1;pointer-events:none;
border:3px solid rgba(255,232,143,.86);
box-shadow:
0 0 0 2px rgba(70,42,4,.9),
0 0 0 5px rgba(250,206,87,.48),
inset 0 0 20px rgba(255,224,122,.32),
0 0 16px rgba(255,204,64,.22)}.wheel{
position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
border:2px solid rgba(255,239,179,.56);
background:conic-gradient(from -25.714deg,#2374d8 0 14.2857%,#df674f 14.2857% 28.5714%,#22a272 28.5714% 42.8571%,#b65d9b 42.8571% 57.1428%,#e3a423 57.1428% 71.4285%,#355fbd 71.4285% 85.7142%,#7350bd 85.7142% 100%);
box-shadow:
inset 0 0 0 3px rgba(255,255,255,.22),
inset 0 -20px 34px rgba(0,0,0,.16),
inset 0 18px 26px rgba(255,255,255,.10);
transition:transform 5.5s cubic-bezier(.12,.72,.08,1)}.wheel:after{
content:"";position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
background:
radial-gradient(circle at 50% 42%,transparent 0 54%,rgba(255,255,255,.10) 55%,transparent 69%),
linear-gradient(155deg,rgba(255,255,255,.22) 0 18%,transparent 31% 100%);
box-shadow:inset 0 0 35px rgba(0,0,0,.18)}.pointer{
position:absolute;z-index:12;top:-.8%;left:50%;transform:translateX(-50%);
width:104px;height:128px;filter:drop-shadow(0 15px 15px rgba(0,0,0,.58));
pointer-events:none}.pointer:before{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:72px;height:72px;border-radius:50%;
background:
radial-gradient(circle at 34% 25%,#fffef0 0 7%,#ffe886 13%,#f6c33d 32%,#c38312 57%,#6d4308 78%,#201302 100%);
border:4px solid #f8df83;
box-shadow:
0 0 0 3px #4f3005,
0 0 0 6px #bd8520,
0 0 24px rgba(251,205,72,.55),
inset 0 4px 10px rgba(255,255,255,.72),
inset 0 -8px 12px rgba(80,45,0,.5)}.pointer i{
position:absolute;top:57px;left:50%;transform:translateX(-50%);
width:50px;height:62px;
background:linear-gradient(90deg,#8f5b0c 0,#f1bd32 20%,#ffe98c 50%,#d89b1c 78%,#704507 100%);
clip-path:polygon(0 0,100% 0,50% 100%);
filter:drop-shadow(0 5px 3px rgba(0,0,0,.32));
border-radius:6px}.prize{position:absolute;z-index:3;width:128px;text-align:center;color:white;text-shadow:0 2px 4px rgba(0,0,0,.3);transform:translate(-50%,-50%)}.prize img{width:58px;height:58px;display:block;margin:0 auto -2px;filter:drop-shadow(0 6px 5px rgba(0,0,0,.18))}.prize strong{display:block;font-size:25px;font-weight:950;line-height:1}.prize small{font-size:9px;font-weight:900;letter-spacing:2px}.p1{left:50%;top:16%}.p2{left:75%;top:28%}.p3{left:80%;top:57%}.p4{left:63%;top:79%}.p5{left:37%;top:79%}.p6{left:20%;top:57%}.p7{left:25%;top:28%}.p2 strong,.p4 strong,.p6 strong{font-size:14px}.hub{
position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);
width:128px;height:128px;border-radius:50%;
border:8px solid #d3a02a;
background:
radial-gradient(circle at 40% 28%,#293a58 0,#131d2b 42%,#080d14 100%);
box-shadow:
0 14px 32px rgba(0,0,0,.5),
0 0 0 3px #4c3007,
0 0 0 6px #f0c04a,
0 0 0 9px #5b3a08,
0 0 22px rgba(239,184,48,.22),
inset 0 2px 0 rgba(255,255,255,.09),
inset 0 -10px 15px rgba(0,0,0,.28);
cursor:pointer;color:#f6f8fb}.hub b{display:block;font-size:29px;font-weight:950}.hub span{display:block;font-size:11px;font-weight:900;color:#e9b941;letter-spacing:1px}.spark{position:absolute;color:#f2c044;font-size:25px;text-shadow:0 0 18px rgba(242,192,68,.8)}.s1{left:4%;top:18%}.s2{right:5%;top:34%}.s3{left:9%;bottom:18%}.voucher-card{max-width:760px;margin:-6px auto 0;background:linear-gradient(180deg,#121c2b,#0b121d);border:1px solid #26364d;border-radius:25px;padding:20px;box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);position:relative;z-index:3}.voucher-copy{display:flex;align-items:center;gap:12px;margin-bottom:13px}.ticket-icon{width:40px;height:40px;border-radius:12px;background:#18263a;border:1px solid #30435d;display:grid;place-items:center}.voucher-copy b{display:block;font-size:13px;letter-spacing:1.2px;color:#f4f7fb}.voucher-copy small{display:block;color:#8291a6;margin-top:3px}.voucher-row{display:grid;grid-template-columns:1fr 220px;gap:10px}.voucher-row input{height:56px;border:1px solid #2a3b52;border-radius:14px;background:#080d15;padding:0 18px;font-weight:800;font-size:15px;outline:none;color:#edf3fb}.voucher-row input:focus{border-color:#d9aa35;box-shadow:0 0 0 4px rgba(217,170,53,.11)}.voucher-row button,.spin-btn{border:0;border-radius:14px;font-weight:950;cursor:pointer}.voucher-row button{background:linear-gradient(180deg,#263b59,#18273c);color:#f5c847;border:1px solid #3b4d67;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.spin-btn{width:100%;height:58px;margin-top:10px;background:linear-gradient(180deg,#ffd75d,#efb427);color:#17314e;font-size:17px;box-shadow:0 8px 16px rgba(215,156,15,.2)}.spin-btn:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed}.message{text-align:center;color:#8290a2;font-size:12px;margin:12px 0 0}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.benefits article{background:linear-gradient(180deg,#111a28,#0b121c);border:1px solid #24354b;border-radius:24px;padding:18px;display:flex;align-items:center;gap:14px;box-shadow:0 14px 32px rgba(0,0,0,.26)}.benefits .art{width:88px;height:88px;flex:0 0 88px;background:#172438;border:1px solid #2b405d;border-radius:20px;display:grid;place-items:center}.benefits img{width:76px;height:76px}.benefits span{font-size:9px;font-weight:950;color:#e6b63d;letter-spacing:1.5px}.benefits h3{margin:4px 0;font-size:17px;color:#f4f7fb}.benefits p{margin:0;color:#8190a4;font-size:12px;line-height:1.5}footer{text-align:center;padding:12px;color:#68798f;font-size:10px;letter-spacing:2px}footer b{color:#e8bb46;margin-right:12px}.modal{position:fixed;inset:0;z-index:50;background:#0b1d356e;backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.modal-card{width:min(430px,100%);background:linear-gradient(180deg,#121c2b,#0a1019);border:1px solid #2d3e57;border-radius:28px;padding:34px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative;color:#f6f8fb}.modal-card button{position:absolute;right:16px;top:14px;border:1px solid #33465f;background:#172438;color:#eef4fb;border-radius:50%;width:35px;height:35px;font-size:22px}.mini{font-size:9px;letter-spacing:2px;color:#7f90a4;font-weight:900}.result-prize{font-size:45px;font-weight:950;color:#f0bd3c;margin:15px}.modal-card p{color:#8997aa}
@media(max-width:700px){.page{padding:0;background:#080d14}.hero-card{border:0;border-radius:0;box-shadow:none;padding:20px 14px 24px;min-height:100vh;background:linear-gradient(180deg,#101827 0,#080d14 100%)}.brand-mark{font-size:30px}.brand-sub{font-size:8px;letter-spacing:5px}.headline{margin-top:20px}.headline h1{font-size:46px;letter-spacing:-3px}.headline p{font-size:12px;padding:0 18px}.spin-stage{width:100%;margin:4px auto 8px}.wheel-shell{width:94%;padding:18px;box-shadow:0 18px 36px rgba(0,0,0,.5),0 0 0 4px #5b3909,0 0 0 8px #d8a42f,0 0 0 11px #2a1b06,0 0 28px rgba(242,188,53,.18)}.pointer{top:-1.2%;transform:translateX(-50%) scale(.72);transform-origin:top center}.prize{width:82px}.prize img{width:40px;height:40px}.prize strong{font-size:18px}.prize small{font-size:7px}.p2 strong,.p4 strong,.p6 strong{font-size:10px}.hub{width:88px;height:88px;border-width:6px}.hub b{font-size:21px}.hub span{font-size:8px}.voucher-card{border-radius:20px;padding:15px}.voucher-row{grid-template-columns:1fr}.voucher-row button{height:52px}.benefits{grid-template-columns:1fr;margin:14px}.benefits article{padding:13px;border-radius:18px}.benefits .art{width:68px;height:68px;flex-basis:68px}.benefits img{width:58px;height:58px}.spark{display:none}footer{padding-bottom:28px}}

.wheel-shell:before{
content:"";position:absolute;inset:8px;border-radius:50%;z-index:0;pointer-events:none;
background:
repeating-conic-gradient(from -1deg,
rgba(255,242,178,.94) 0deg 1.15deg,
rgba(61,37,4,.42) 1.15deg 2.3deg,
transparent 2.3deg 5.15deg);
-webkit-mask:radial-gradient(circle,transparent 0 83%,#000 83.4% 89%,transparent 89.4%);
mask:radial-gradient(circle,transparent 0 83%,#000 83.4% 89%,transparent 89.4%);
filter:drop-shadow(0 1px 0 rgba(255,255,255,.25));
}

.wheel:before{
content:"";position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
background:repeating-conic-gradient(
from -25.714deg,
rgba(255,239,180,.48) 0 .7deg,
rgba(17,23,34,.34) .7deg 1.2deg,
transparent 1.2deg 51.4286deg
);
-webkit-mask:radial-gradient(circle,transparent 0 24%,#000 25% 98%,transparent 99%);
mask:radial-gradient(circle,transparent 0 24%,#000 25% 98%,transparent 99%);
}

.pointer:after{
content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);
width:88px;height:25px;border-radius:50%;
background:linear-gradient(180deg,rgba(255,241,170,.92),#b47713 52%,#5a3507 100%);
box-shadow:0 3px 0 #392204,inset 0 2px 3px rgba(255,255,255,.45);
z-index:-1}

.hub:before{
content:"";position:absolute;left:50%;top:7px;width:5px;height:5px;border-radius:50%;
background:#ffe68a;transform:translateX(-50%);
box-shadow:
0 109px 0 #ffe68a,
54px 54px 0 #ffe68a,
-54px 54px 0 #ffe68a;
opacity:.9}


/* =========================================================
   V9 — ELEGANT CONTROL SYSTEM
   Scoped button refinement only. V8 wheel/layout untouched.
   ========================================================= */

/* Shared premium interaction */
.voucher-row button,
.spin-btn,
.hub,
.modal-card button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .28s ease,
    filter .28s ease,
    background .28s ease,
    color .28s ease;
}

/* CHECK VOUCHER — muted graphite/navy instead of bright contrast */
.voucher-row button{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0)),
    linear-gradient(135deg,#26354a 0%,#1b293b 48%,#151f2e 100%);
  color:#d9e1ec;
  border:1px solid #3a4a60;
  box-shadow:
    0 9px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.3);
  letter-spacing:.45px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.voucher-row button:before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}
.voucher-row button:after{
  content:"";
  position:absolute;
  top:-45%;
  left:-65%;
  width:36%;
  height:190%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);
  transition:left .7s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.voucher-row button:hover{
  transform:translateY(-1px);
  color:#f1d27a;
  border-color:#5b5360;
  box-shadow:
    0 12px 25px rgba(0,0,0,.3),
    0 0 0 1px rgba(216,171,60,.06),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.voucher-row button:hover:after{left:130%}
.voucher-row button:active{transform:translateY(1px) scale(.995)}

/* SPIN NOW — champagne/bronze, softer than the previous yellow */
.spin-btn{
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#c89b35 0%,#a87922 46%,#8d641e 100%);
  color:#f8f1df;
  border:1px solid #d1aa52;
  box-shadow:
    0 11px 24px rgba(0,0,0,.28),
    0 0 18px rgba(197,148,42,.08),
    inset 0 1px 0 rgba(255,246,205,.34),
    inset 0 -2px 0 rgba(76,45,4,.24);
  text-shadow:0 1px 3px rgba(57,34,3,.55);
  letter-spacing:.65px;
}
.spin-btn:before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:11px;
  border:1px solid rgba(255,239,185,.11);
  pointer-events:none;
}
.spin-btn:after{
  content:"";
  position:absolute;
  top:-55%;
  left:-70%;
  width:34%;
  height:210%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,248,217,.24),transparent);
  transition:left .8s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.spin-btn:not(:disabled):hover{
  transform:translateY(-2px);
  filter:saturate(1.04) brightness(1.04);
  border-color:#dfbb65;
  box-shadow:
    0 15px 30px rgba(0,0,0,.34),
    0 0 24px rgba(210,161,51,.13),
    inset 0 1px 0 rgba(255,248,216,.4);
}
.spin-btn:not(:disabled):hover:after{left:135%}
.spin-btn:not(:disabled):active{transform:translateY(1px) scale(.995)}
.spin-btn:disabled{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent),
    linear-gradient(135deg,#303846,#252c37);
  color:#687486;
  border-color:#343e4d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 5px 12px rgba(0,0,0,.12);
  filter:none;
  opacity:1;
}

/* CENTER SPIN — preserve jewel hub, add restrained elegant interaction */
.hub{
  text-shadow:0 2px 4px rgba(0,0,0,.45);
}
.hub:after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:1px solid rgba(255,224,133,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  pointer-events:none;
}
.hub:hover{
  transform:translate(-50%,-50%) scale(1.025);
  border-color:#ddb246;
  box-shadow:
    0 16px 36px rgba(0,0,0,.54),
    0 0 0 3px #4c3007,
    0 0 0 6px #e4b443,
    0 0 0 9px #5b3a08,
    0 0 27px rgba(215,164,43,.19),
    inset 0 2px 0 rgba(255,255,255,.1),
    inset 0 -10px 15px rgba(0,0,0,.28);
}
.hub:active{transform:translate(-50%,-50%) scale(.985)}

/* Modal close: subtle glass button */
.modal-card button{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    #152132;
  color:#aeb9c8;
  border:1px solid #33445b;
  box-shadow:
    0 7px 16px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.055);
}
.modal-card button:hover{
  color:#efd17d;
  border-color:#5b5360;
  transform:rotate(4deg) scale(1.04);
}

/* Keyboard accessibility without a loud default outline */
.voucher-row button:focus-visible,
.spin-btn:focus-visible,
.hub:focus-visible,
.modal-card button:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px #0b121d,
    0 0 0 5px rgba(214,174,72,.55),
    0 10px 24px rgba(0,0,0,.28);
}

/* Mobile: effects stay subtle and touch-friendly */
@media(max-width:700px){
  .voucher-row button,
  .spin-btn{
    border-radius:13px;
  }
  .voucher-row button:hover,
  .spin-btn:not(:disabled):hover{
    transform:none;
  }
  .voucher-row button:after,
  .spin-btn:after{
    opacity:.72;
  }
}


/* =========================================================
   V10 — PREMIUM LETTER RESULT POPUP
   Only result modal redesigned. Everything else untouched.
   ========================================================= */
.modal{
  background:
    radial-gradient(circle at 50% 42%,rgba(34,49,72,.30),rgba(4,9,16,.78) 62%),
    rgba(4,9,16,.68);
  backdrop-filter:blur(12px) saturate(.78);
}

.letter-card{
  width:min(520px,calc(100vw - 34px));
  min-height:430px;
  padding:54px 54px 38px;
  color:#2d2922;
  border-radius:8px;
  border:1px solid #c9b786;
  background:
    linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),
    radial-gradient(circle at 18% 20%,rgba(170,139,79,.055) 0 1px,transparent 1.4px),
    radial-gradient(circle at 76% 63%,rgba(80,65,35,.04) 0 1px,transparent 1.5px),
    linear-gradient(135deg,#f7f0df 0%,#fffaf0 46%,#eee2c8 100%);
  background-size:auto,18px 18px,23px 23px,auto;
  box-shadow:
    0 34px 90px rgba(0,0,0,.58),
    0 0 0 7px rgba(239,222,182,.08),
    inset 0 0 0 1px rgba(255,255,255,.68),
    inset 0 0 55px rgba(109,84,38,.08);
  position:relative;
  overflow:hidden;
}

.letter-card:before{
  content:"";
  position:absolute;
  inset:14px;
  pointer-events:none;
  border:1px solid rgba(135,101,39,.42);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.28),
    inset 0 0 0 4px rgba(150,116,51,.08);
}

.letter-card:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-48px;
  width:220px;
  height:90px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(132,91,22,.09),transparent 68%);
  pointer-events:none;
}

.letter-close{
  position:absolute!important;
  top:20px!important;
  right:20px!important;
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  color:#66573e!important;
  background:rgba(255,250,239,.72)!important;
  border:1px solid rgba(138,111,62,.28)!important;
  box-shadow:0 5px 13px rgba(75,57,26,.09),inset 0 1px 0 rgba(255,255,255,.7)!important;
  z-index:4;
}
.letter-close:hover{
  transform:rotate(6deg) scale(1.04)!important;
  color:#3e3426!important;
  border-color:rgba(138,111,62,.52)!important;
}

.letter-topline{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:8px;
  position:relative;
  z-index:2;
}
.letter-topline span{
  height:1px;
  background:linear-gradient(90deg,transparent,#b08a45);
}
.letter-topline span:last-child{
  background:linear-gradient(90deg,#b08a45,transparent);
}
.letter-topline b{
  font-family:Georgia,"Times New Roman",serif;
  font-size:12px;
  letter-spacing:2.5px;
  color:#705a30;
}

.letter-kicker{
  position:relative;
  z-index:2;
  font-size:8px;
  font-weight:900;
  letter-spacing:3.2px;
  color:#93815f;
  margin-bottom:22px;
}

.letter-seal{
  width:72px;
  height:72px;
  margin:0 auto 18px;
  border-radius:50%;
  position:relative;
  z-index:2;
  display:grid;
  place-content:center;
  line-height:.82;
  color:#f8e7b1;
  background:
    radial-gradient(circle at 38% 28%,#9f772a 0,#755019 42%,#4d300c 100%);
  border:3px solid #c39a49;
  box-shadow:
    0 6px 15px rgba(85,57,10,.22),
    0 0 0 3px #ead39b,
    0 0 0 4px #9e7c3c,
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -6px 9px rgba(54,31,3,.28);
}
.letter-seal:after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px dashed rgba(246,222,159,.48);
}
.letter-seal span,.letter-seal b{
  display:block;
  font-weight:950;
  letter-spacing:-1px;
}
.letter-seal span{font-size:18px}
.letter-seal b{font-size:16px;color:#efc968}

.letter-card h2{
  position:relative;
  z-index:2;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#3d3324;
}

.letter-rule{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:11px;
  margin:18px 38px 20px;
}
.letter-rule i{height:1px;background:#c5ab72}
.letter-rule em{
  font-style:normal;
  color:#a37c31;
  font-size:12px;
}

.letter-card .result-prize{
  position:relative;
  z-index:2;
  margin:8px 0 12px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(38px,7vw,54px);
  line-height:1;
  color:#9a6c15;
  text-shadow:0 1px 0 #fff6dd;
  letter-spacing:-1px;
}

.letter-card p{
  position:relative;
  z-index:2;
  max-width:340px;
  margin:18px auto 28px;
  color:#756a58;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  line-height:1.65;
}

.letter-footer{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  color:#9a8763;
  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}
.letter-footer b{color:#b58d3f}

@media(max-width:700px){
  .letter-card{
    width:min(92vw,440px);
    min-height:390px;
    padding:46px 28px 32px;
  }
  .letter-card:before{inset:10px}
  .letter-close{
    top:15px!important;
    right:15px!important;
  }
  .letter-kicker{
    font-size:7px;
    letter-spacing:2.2px;
  }
  .letter-seal{
    width:64px;
    height:64px;
  }
  .letter-card h2{font-size:21px}
  .letter-rule{margin:16px 20px 18px}
  .letter-card .result-prize{
    font-size:clamp(34px,11vw,46px);
  }
}