@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
:root{
  --bg:#fff4d6;--ink:#3b2a63;--soft:#7a6a9c;--card:#fff;
  --sun:#ffc93c;--coral:#ff6b6b;--sky:#4dabf7;--grass:#51cf66;--grape:#9775fa;--pink:#ff8fc7;--orange:#ff922b;
}
*{box-sizing:border-box}
body{
  font-family:'Fredoka','Nunito','Segoe UI',system-ui,sans-serif;color:var(--ink);margin:0;padding:1rem;
  display:flex;flex-direction:column;align-items:center;min-height:100vh;
  background-color:var(--bg);
  background-image:radial-gradient(#ffe29a 2px,transparent 2.5px),radial-gradient(#ffd0e0 2px,transparent 2.5px);
  background-size:36px 36px;background-position:0 0,18px 18px;
}
a.back{align-self:flex-start;text-decoration:none;color:var(--ink);background:#fff;padding:.4rem .9rem;border-radius:999px;font-weight:600;box-shadow:0 3px 0 rgba(59,42,99,.18)}
a.back:active{transform:translateY(2px);box-shadow:none}
h1{font-size:clamp(1.8rem,8vw,2.6rem);margin:.6rem 0 .2rem;text-align:center;color:var(--grape);text-shadow:3px 3px 0 #fff,5px 5px 0 var(--sun)}
.status{margin:.4rem 0 .8rem;min-height:1.6em;font-size:1.2rem;font-weight:600;text-align:center}
.btn{margin-top:1.1rem;padding:.7rem 1.6rem;font:inherit;font-size:1.1rem;font-weight:700;border:0;border-radius:999px;background:var(--coral);color:#fff;cursor:pointer;box-shadow:0 5px 0 #d94848;-webkit-appearance:none;appearance:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #d94848}
/* Games fit the phone screen: no scrolling, board sized from the space left */
body.game{height:100vh;height:100dvh;overflow:hidden;padding:.5rem .6rem}
body.game h1{font-size:clamp(1.4rem,6vw,2rem);margin:.3rem 0 .1rem;text-shadow:2px 2px 0 #fff,3px 3px 0 var(--sun)}
body.game .status,body.game #status{margin:.2rem 0 .5rem;min-height:1.4em;font-size:1.05rem}
body.game .btn{margin-top:.7rem;padding:.5rem 1.4rem;font-size:1rem}