* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; font-family:'Patrick Hand', cursive; background:#e8e4d4; }
#wrap { position:fixed; inset:0; }
#canvas { display:block; touch-action:none; }
#ui { position:fixed; inset:0; pointer-events:none; }
#ui > * { pointer-events:auto; }

.marker { font-family:'Permanent Marker', cursive; }

/* overlay screens */
.overlay {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(90,140,200,.18) 29px 30px),
    #f4f1e4;
  padding:16px;
}
.overlay::before{
  content:''; position:fixed; left:46px; top:0; bottom:0; width:2px; background:rgba(210,80,80,.5);
}

.title-card, .card {
  position:relative; z-index:2;
  background:#fffef6; border:3px solid #2b2b2b; border-radius:10px;
  padding:26px 24px; width:min(420px,94vw); text-align:center;
  box-shadow:6px 8px 0 rgba(0,0,0,.18);
  transform:rotate(-.6deg);
}
.card.wide { width:min(460px,94vw); }

.logo { font-size:clamp(38px,10vw,60px); line-height:.95; color:#e23b3b; letter-spacing:2px; }
.logo span { color:#2e5cff; }
.logo-ball { font-size:44px; margin:4px 0 2px; }
.tagline { color:#666; font-size:18px; margin-bottom:18px; letter-spacing:2px; }

.pbtn {
  display:block; width:100%; margin:9px 0; padding:13px;
  font-family:'Patrick Hand',cursive; font-size:22px; cursor:pointer;
  background:#2e5cff; color:#fff; border:3px solid #1a1a1a; border-radius:8px;
  box-shadow:3px 4px 0 rgba(0,0,0,.25); transition:transform .08s, box-shadow .08s;
}
.pbtn:active { transform:translate(2px,3px); box-shadow:1px 1px 0 rgba(0,0,0,.25); }
.pbtn.ghost { background:#fff; color:#2b2b2b; }
.pbtn.go { background:#27ae60; font-size:26px; margin-top:16px; }
.pbtn.disabled { background:#bbb; color:#eee; cursor:not-allowed; position:relative; }
.stamp {
  position:absolute; right:8px; top:50%; transform:translateY(-50%) rotate(-8deg);
  border:2px solid #c0392b; color:#c0392b; font-size:12px; padding:1px 6px; border-radius:4px;
  background:rgba(255,255,255,.7);
}

.foot { margin-top:14px; font-size:15px; }
.foot a, .note a { color:#2e5cff; }

h1.sm { font-size:32px; color:#2b2b2b; margin-bottom:6px; }
.scoreline { font-size:38px; font-family:'Permanent Marker'; margin:8px 0; }
.unlock { color:#27ae60; font-size:20px; margin:6px 0; }
.sub { color:#666; font-size:16px; margin:6px 0 14px; }
.note { color:#888; font-size:14px; margin-top:10px; }

.fld { display:block; text-align:left; margin:14px 0 5px; font-size:17px; color:#444; }

.stars { font-size:24px; letter-spacing:2px; line-height:1.2; cursor:pointer; }
.star { color:#ccc; transition:color .1s; }
.star.on { color:#f5c518; }
.starlabel { font-size:16px; color:#666; margin-top:2px; }

.segbar { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.seg {
  flex:1; min-width:70px; padding:9px; font-family:'Patrick Hand'; font-size:16px;
  background:#fff; border:2px solid #2b2b2b; border-radius:6px; cursor:pointer;
}
.seg.mini { min-width:44px; flex:0 0 auto; width:52px; }
.seg.act { background:#f5c518; }

.back { background:none; border:none; font-family:'Patrick Hand'; font-size:18px;
  color:#2e5cff; cursor:pointer; float:left; margin-bottom:4px; }

.btn-corner {
  position:fixed; top:10px; right:10px; z-index:5;
  font-family:'Patrick Hand'; font-size:16px; padding:6px 12px;
  background:#fffef6; border:2px solid #2b2b2b; border-radius:6px; cursor:pointer;
  box-shadow:2px 3px 0 rgba(0,0,0,.2);
}

.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#2b2b2b; color:#fff; padding:12px 20px; border-radius:8px;
  font-family:'Patrick Hand'; font-size:17px; opacity:0; transition:.4s; z-index:99;
  max-width:90vw; text-align:center;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }