@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url("fonts/fredoka-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url("fonts/fredoka-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url("fonts/fredoka-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url("fonts/nunito-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:600;font-display:swap;src:url("fonts/nunito-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url("fonts/nunito-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url("fonts/nunito-latin-800-normal.woff2") format("woff2")}
:root{
  --sky:#5AAEF6; --sky-deep:#3E8FE0; --sky-light:#7CC5FA; --sky-pale:#B2DDF1;
  --ice:#E9F5FE; --ice-2:#D6ECFB; --surface:#FFFFFF;
  --ink:#1E2B48; --ink-soft:#4A5878; --outline:#2B3D58;
  --emerald:#5CCB4A; --emerald-deep:#2F8F3A; --gold:#FFD23F; --gold-deep:#E0A800; --red:#E5453B;
  --r-common:#9AA5B1; --r-uncommon:#5CCB4A; --r-rare:#5AAEF6; --r-epic:#B24CE0; --r-legendary:#F2A93B; --r-mythic:#E8467A;
  --radius:22px; --radius-sm:14px; --max:1140px;
  --stroke:0 0 0 3px var(--outline);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Nunito",system-ui,sans-serif;color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#CFEBFF 0%,#E9F5FE 40%,#F4FAFF 100%);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 2rem));margin-inline:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
.display,h1,h2,h3{font-family:"Fredoka","Nunito",sans-serif;font-weight:700;line-height:1.05;letter-spacing:.005em}
/* chunky outlined game type */
.chunky{color:#fff;-webkit-text-stroke:0;
  text-shadow:-2px -2px 0 var(--outline),2px -2px 0 var(--outline),-2px 2px 0 var(--outline),2px 2px 0 var(--outline),0 4px 0 var(--outline),0 6px 12px rgba(30,43,72,.35)}
@supports (paint-order:stroke){.chunky{paint-order:stroke fill;-webkit-text-stroke:6px var(--outline);text-shadow:0 5px 0 var(--outline),0 8px 14px rgba(30,43,72,.3)}}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:30;background:rgba(233,245,254,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:3px solid var(--sky-pale)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink)}
.brand img{height:42px;width:auto}
.nav ul{display:flex;gap:.25rem;list-style:none;font-family:"Fredoka",sans-serif;font-weight:600;font-size:1rem}
.nav ul a{text-decoration:none;color:var(--ink-soft);padding:.45rem .8rem;border-radius:999px;transition:background .15s,color .15s}
.nav ul a:hover,.nav ul a[aria-current]{background:var(--surface);color:var(--sky-deep);box-shadow:inset 0 0 0 2px var(--sky-pale)}
.nav ul a.db{background:var(--sky);color:#fff;box-shadow:0 3px 0 var(--sky-deep)}
.nav ul a.db:hover{background:var(--sky-light)}
@media (max-width:720px){.nav ul li:not(.keep){display:none}.brand span{display:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.1rem;
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;border:3px solid var(--outline);color:var(--ink);
  transition:transform .08s ease,box-shadow .08s ease;cursor:pointer;min-height:52px}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--outline)!important}
.btn-gold{background:linear-gradient(180deg,#FFE066,var(--gold));box-shadow:0 5px 0 var(--outline)}
.btn-gold:hover{background:linear-gradient(180deg,#FFEA8A,#FFD95A)}
.btn-white{background:#fff;box-shadow:0 5px 0 var(--outline)}
.btn-white:hover{background:var(--ice)}
.btn-sky{background:linear-gradient(180deg,var(--sky-light),var(--sky));color:#fff;box-shadow:0 5px 0 var(--outline)}
.btn-sky:hover{background:linear-gradient(180deg,#93D0FB,var(--sky-light))}
.btn svg{width:22px;height:22px;fill:currentColor}

/* ---- panel (game window translated) ---- */
.panel{background:var(--sky-light);border:3px solid var(--outline);border-radius:var(--radius);padding:10px;box-shadow:0 8px 0 var(--outline),0 18px 40px rgba(30,43,72,.18)}
.panel-inner{background:var(--surface);border:3px solid var(--sky-deep);border-radius:calc(var(--radius) - 8px);padding:1.5rem}
/* ribbon header */
.ribbon{position:relative;display:inline-block;background:linear-gradient(180deg,#8FD0FB,var(--sky));border:3px solid var(--outline);border-radius:14px;
  padding:.5rem 2.2rem;font-family:"Fredoka",sans-serif;font-weight:700;font-size:1.5rem;color:#fff;
  text-shadow:-2px -2px 0 var(--outline),2px -2px 0 var(--outline),-2px 2px 0 var(--outline),2px 2px 0 var(--outline),0 3px 0 var(--outline);
  box-shadow:0 5px 0 var(--outline)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:8px;width:26px;height:100%;background:var(--sky-deep);border:3px solid var(--outline);z-index:-1;border-radius:6px}
.ribbon::before{left:-16px;transform:skewY(12deg)}.ribbon::after{right:-16px;transform:skewY(-12deg)}

/* emerald pill */
.pill{display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(180deg,#8CE479,var(--emerald));border:3px solid var(--outline);border-radius:999px;
  padding:.2rem .9rem .2rem .4rem;font-family:"Fredoka",sans-serif;font-weight:700;color:#fff;font-size:1.05rem;
  text-shadow:-1px -1px 0 var(--outline),1px -1px 0 var(--outline),-1px 1px 0 var(--outline),1px 1px 0 var(--outline);box-shadow:0 3px 0 var(--outline)}
.pill img{width:26px;height:26px}
.pill.unknown{background:linear-gradient(180deg,#D7DEE6,#B4BEC9)}

/* rarity bar */
.rarity{display:inline-block;font-family:"Fredoka",sans-serif;font-weight:700;color:#fff;padding:.15rem 1rem;border-radius:8px;font-size:.95rem;
  text-shadow:-1px -1px 0 rgba(0,0,0,.45),1px -1px 0 rgba(0,0,0,.45),-1px 1px 0 rgba(0,0,0,.45),1px 1px 0 rgba(0,0,0,.45)}
.rarity.common{background:linear-gradient(180deg,#B7C0CA,#7F8A96)}
.rarity.rare{background:linear-gradient(180deg,#7CC5FA,#3E8FE0)}
.rarity.legendary{background:linear-gradient(180deg,#FFC65C,#D9871A)}

/* sections */
section{padding:5rem 0}
.sec-head{text-align:center;margin-bottom:2.5rem}
.sec-head h2{font-size:clamp(2rem,3.2vw + 1rem,3.2rem)}
.sec-head p{color:var(--ink-soft);font-size:1.15rem;margin-top:.5rem;max-width:52ch;margin-inline:auto}
.muted{color:var(--ink-soft)}

/* footer */
footer{background:var(--outline);color:#CFE4F8;padding:2.5rem 0;font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;justify-content:space-between}
footer a{text-decoration:none;color:#fff}
footer a:hover{text-decoration:underline}
footer .links{display:flex;flex-wrap:wrap;gap:1.2rem}