:root{
  --bg:#0b2620; --bg2:#071a16; --panel:#113a2e; --line:#1f5a45;
  --gold:#f1c44c; --gold2:#ffdf7e; --goldd:#b6871f;
  --green:#25a86e; --green2:#167c4e; --parch:#f1e3bd; --ink:#3a2a12;
  --text:#e6efe9; --mute:#9fbcae; --ruby:#d4344b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%}
body{
  min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  font:500 15px/1.5 Nunito,system-ui,sans-serif; color:var(--text);
  background:radial-gradient(ellipse at 50% 0,#164536 0,var(--bg) 45%,var(--bg2) 100%);
}
a{color:var(--gold2)}
.card{
  width:100%; max-width:440px; position:relative;
  background:linear-gradient(180deg,var(--panel),#0d2e25);
  border:1px solid var(--line); border-radius:22px; padding:18px 18px 14px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
/* gold corner brackets */
.card::before,.card::after{
  content:""; position:absolute; width:26px; height:26px; border:3px solid var(--gold);
}
.card::before{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:20px 0 0 0}
.card::after{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 20px 0}

.card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.logo{
  font:28px/1 "Lilita One",sans-serif; letter-spacing:1px; color:#fff;
  text-shadow:0 2px 0 var(--green2),0 0 14px rgba(241,196,76,.35);
}
.logo small{display:block;font:800 9px/1 Nunito,sans-serif;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-top:2px}

.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:999px;transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn--ghost{padding:7px 16px;font-size:13px;color:#fff;border:1px solid var(--line);background:rgba(0,0,0,.2)}
.btn--main{
  padding:13px 34px; font-size:17px; color:#fff; text-transform:uppercase; letter-spacing:.5px;
  background:linear-gradient(180deg,#36c483,var(--green2));
  border:2px solid var(--gold); box-shadow:0 0 0 3px rgba(182,135,31,.35),0 8px 18px rgba(0,0,0,.35);
}

.sign{
  position:relative; text-align:center; color:var(--ink);
  background:linear-gradient(180deg,var(--parch),#e2cd98);
  border-radius:12px; padding:20px 16px 16px; margin-bottom:14px;
  box-shadow:inset 0 0 0 2px #c9ad6b,inset 0 0 30px rgba(120,80,20,.25);
}
.fox{position:absolute;width:62px;right:-8px;top:-22px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.sign__kicker{font:800 12px/1 Nunito,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#7a5418}
.sign h1{font:400 22px/1.1 "Lilita One",sans-serif;margin:8px 0 6px;color:#5b3b0e}
.sign h1 span{display:block}
.big{
  font-size:64px; line-height:1;
  background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,var(--goldd));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #8a5f12; filter:drop-shadow(0 3px 0 rgba(90,55,10,.35));
}
.amt{font-size:40px;color:#2c1d08;margin-top:2px}
.sign__sub{font-weight:700;font-size:13px;margin-bottom:12px}
.tc{font-size:11px;color:#6d5428;margin-top:10px}

.intro{font-size:14px;color:var(--mute);margin-bottom:12px}
.intro a{font-weight:800}

.facts{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.facts li{
  text-align:center;font-size:11px;color:var(--mute);background:rgba(0,0,0,.22);
  border:1px solid var(--line);border-radius:10px;padding:8px 2px;
}
.facts b{display:block;font:16px/1.2 "Lilita One",sans-serif;color:var(--gold)}

.games{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.games a{
  display:flex;align-items:flex-end;height:78px;padding:6px;border-radius:10px;
  font-weight:800;font-size:11px;line-height:1.15;color:#fff;text-decoration:none;
  border:2px solid #9a7426;text-shadow:0 1px 2px #000;
}
.g1{background:linear-gradient(160deg,#c9853a,#5a2e12)}
.g2{background:linear-gradient(160deg,#e3402f,#7a1410)}
.g3{background:linear-gradient(160deg,#6a5a3a,#2a2416)}

.foot{border-top:1px solid var(--line);padding-top:10px;text-align:center;font-size:11px;color:var(--mute)}
.foot p+p{margin-top:2px}
.foot a{color:var(--mute)}

@media (max-width:380px){
  .big{font-size:54px}.amt{font-size:34px}
  .facts{grid-template-columns:repeat(2,1fr)}
}