:root{--suit:#16130F;--suit-2:#201b16;--seal:#8E1F1F;--seal-bright:#A32424;--paper:#EFE6D2;--faded:#a89e8a;
--display:"Bebas Neue",Impact,sans-serif;--type:"Special Elite","Courier New",monospace}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--suit);
background-image:radial-gradient(ellipse at 50% -10%,rgba(142,31,31,.35),transparent 60%),radial-gradient(ellipse at 50% 120%,rgba(142,31,31,.18),transparent 55%);
color:var(--paper);font-family:var(--type);-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex}
.wrap{width:100%;max-width:440px;margin:auto;padding:40px 22px calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:30px}
.logo{width:min(70vw,240px);height:auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
.card{width:100%;text-align:center;background:var(--suit-2);border:1px dashed rgba(239,230,210,.25);border-top:3px solid var(--seal);padding:24px 18px 22px;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.lab{display:block;font-family:var(--display);letter-spacing:.3em;font-size:18px;color:var(--faded)}
.code{font-family:var(--display);font-size:clamp(64px,22vw,96px);letter-spacing:.12em;line-height:1;margin:10px 0 18px;padding-left:.12em}
.copy{font-family:var(--display);font-size:18px;letter-spacing:.18em;background:var(--seal);color:var(--paper);border:0;border-radius:4px;padding:12px 26px;cursor:pointer;transition:background .15s,transform .1s}
.copy:hover{background:var(--seal-bright)}.copy:active{transform:scale(.97)}
.actions{width:100%;display:flex;flex-direction:column;gap:14px}
.btn{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;border-radius:6px;text-decoration:none;font-family:var(--display);font-size:24px;letter-spacing:.12em;color:var(--paper);transition:background .15s,transform .1s,border-color .15s}
.btn svg{width:24px;height:24px;fill:currentColor;flex:none}
.btn:active{transform:scale(.98)}
.primary{background:var(--seal);box-shadow:0 10px 24px rgba(142,31,31,.35)}.primary:hover{background:var(--seal-bright)}
.ghost{border:2px solid var(--paper);background:transparent}.ghost:hover{background:rgba(239,230,210,.08)}
.btn small{font-family:var(--type);font-size:12px;letter-spacing:.05em;margin-left:6px;color:var(--faded);vertical-align:middle}
.btn small:empty{display:none}
.btn.soon{opacity:.55;cursor:default;border-style:dashed}.btn.soon:hover{background:transparent}.btn.soon:active{transform:none}