:root{
  --paper:#FFF4E4; --card:#FFFDF7; --ink:#23201A;
  --tang:#FF7A1A; --teal:#0FA3A3; --sun:#FFC53D; --coral:#FF5D5D;
  --mut:#6b6151; --faint:#8a7f68;
  --disp:"Fredoka","Nunito",system-ui,sans-serif;
  --body:"Nunito",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--body);
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:28px 16px 60px 16px;
  background-image:radial-gradient(#e8d9bd 1.3px, transparent 1.4px);
  background-size:26px 26px;
}
.page{width:min(600px,100%); display:flex; flex-direction:column; align-items:center;}
.logo{display:flex; align-items:center; justify-content:center; gap:20px;}
.mark{position:relative; width:50px; height:44px; background:var(--card);
  border:3px solid var(--ink); border-radius:13px; box-shadow:3px 3px 0 var(--ink);
  display:flex; align-items:center; justify-content:center; gap:5px;}
.mark::after{content:""; position:absolute; left:10px; bottom:-8px; width:10px; height:10px;
  background:var(--card); border-right:3px solid var(--ink); border-bottom:3px solid var(--ink);
  transform:rotate(45deg);}
.mark i{width:6px; border:3px solid var(--ink); border-radius:4px;}
.mark i:nth-child(1){height:15px; background:var(--sun);}
.mark i:nth-child(2){height:25px; background:var(--tang);}
.mark i:nth-child(3){height:19px; background:var(--teal);}
h1{font-family:var(--disp); font-size:2.2rem; font-weight:700;}
.tag{font-weight:700; color:var(--mut); font-size:.92rem; margin-top:10px; text-align:center;}
.credit{font-weight:700; color:var(--faint); font-size:.8rem; margin-top:4px;}
.credit a{color:var(--tang); text-decoration:none;}
.card{width:min(480px,94vw); background:var(--card); border:3px solid var(--ink);
  border-radius:18px; box-shadow:5px 5px 0 var(--ink); padding:24px 22px; margin-top:22px;}
.card h2{font-family:var(--disp); font-size:1.4rem; margin-bottom:4px;}
.card p.sub{color:var(--mut); font-size:.9rem; font-weight:700; margin-bottom:14px;}
.field{margin:12px 0;}
.field label{display:block; font-weight:800; font-size:.78rem; letter-spacing:.12em; margin-bottom:6px;}
.field input{width:100%; font-family:var(--body); font-weight:700; font-size:1rem; color:var(--ink);
  background:#fff; border:3px solid var(--ink); border-radius:12px; padding:11px 14px;}
.field input:focus{outline:3px solid var(--sun); outline-offset:1px;}
.field input[readonly]{background:var(--paper); color:var(--mut);}
.btn{font-family:var(--disp); font-weight:600; font-size:1.1rem; border:3px solid var(--ink);
  border-radius:999px; padding:13px 34px; cursor:pointer; background:var(--card); color:var(--ink);
  box-shadow:4px 4px 0 var(--ink); transition:transform .08s ease, box-shadow .08s ease;
  display:inline-block; text-decoration:none; text-align:center;}
.btn:active:not(:disabled){transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink);}
.btn:disabled{opacity:.45; cursor:default;}
.btn.primary{background:var(--tang); width:100%; margin-top:8px;}
.btnrow{display:flex; gap:12px; margin-top:18px; margin-bottom:30px; flex-wrap:wrap; justify-content:center;}
.prow{width:100%; display:flex; flex-direction:column; align-items:center; margin-top:22px;}
.prow .card{margin-top:0;}
.prow > * + *{margin-top:22px;}
@media (min-width:900px){
  .page{width:min(1000px,100%);}
  .prow{flex-direction:row; align-items:flex-start; justify-content:center;}
  .prow .card{flex:1 1 0; max-width:480px;}
  .prow > * + *{margin-top:0; margin-left:22px;}
}
.err{display:none; background:#ffe9e9; border:3px solid var(--coral); color:#a33;
  border-radius:12px; padding:10px 14px; font-weight:700; font-size:.9rem; margin-top:12px;}
.err.on{display:block;}
.statgrid{display:flex; gap:10px; margin-top:6px;}
.stat{flex:1; background:var(--paper); border:3px solid var(--ink); border-radius:14px;
  padding:10px 8px; text-align:center;}
.stat .n{font-family:var(--disp); font-weight:700; font-size:1.5rem;}
.stat .l{font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--mut);}
.badges{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.badge{background:var(--paper); border:3px solid var(--ink); border-radius:14px; padding:10px 12px;}
.badge .bn{font-family:var(--disp); font-weight:700; font-size:1rem;}
.badge .bc{font-size:.78rem; font-weight:800; color:var(--mut);}
.badge .bl{font-size:.82rem; font-weight:700; color:var(--ink); margin-top:4px;}
.badge .bicon{width:46px; height:46px; display:block; margin-bottom:6px;}
.badge.locked{opacity:.45;}
.badge.won{box-shadow:4px 4px 0 var(--ink);}
.bg0{background:#DCD6C7;}
.bg1{background:#FFFDF7;}
.bg10{background:#FF9E45;}
.bg20{background:#0FA3A3;}
.bg50{background:#8FA8BF;}
.bg75{background:#FF5D5D;}
.bg100{background:#FFC53D;}
.bg150{background:#23201A; color:#FFF4E4;}
.bg150 .bc{color:#cbbfa9;}
.bg150 .bl{color:#FFF4E4;}
.steps{display:flex; flex-direction:column; gap:10px; margin-top:18px; width:min(480px,94vw);}
.step{background:var(--card); border:3px solid var(--ink); border-radius:14px;
  box-shadow:4px 4px 0 var(--ink); padding:12px 16px; display:flex; gap:12px; align-items:center;}
.step .no{font-family:var(--disp); font-weight:700; font-size:1.3rem; background:var(--sun);
  border:3px solid var(--ink); border-radius:50%; width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;}
.step .tx{font-weight:700; font-size:.95rem;}
.hero-cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; justify-content:center;}
.hero-cta .btn.primary{width:auto;}
.footlinks{margin-top:18px; color:var(--faint); font-size:.85rem; font-weight:700;}
.footlinks a{color:var(--tang); text-decoration:none;}