/* Draw by Numbers — paper & ink */

:root{
  --paper:#f6f0e4;
  --paper-2:#efe6d4;
  --ink:#1f3a5f;
  --ink-soft:#6b7f99;
  --gold:#dfa32b;
  --gold-soft:#f7e6bd;
  --green:#2f8f5b;
  --red:#cf4756;
  --line:#d9cdb4;
  --radius:14px;
  --tap:#0000;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:var(--tap);}

html,body{
  margin:0;padding:0;height:100%;
  overscroll-behavior:none;
  background:var(--paper);
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}

#app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- HUD ---------- */
#hud{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 14px 6px;
}
.hud-left{min-width:0}
#levelLabel{font-size:15px;font-weight:800;letter-spacing:.2px}
#strokeLabel{font-size:11px;color:var(--ink-soft);font-weight:600;margin-top:1px}
.hud-mid{display:flex;justify-content:center}
#strikes{display:flex;gap:7px}
.strike{
  width:13px;height:13px;border-radius:50%;
  border:2px solid var(--ink-soft);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.strike.on{background:var(--red);border-color:var(--red);transform:scale(1.15)}
.hud-right{display:flex;align-items:center;gap:8px}
#score{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.icon-btn{
  border:none;background:none;color:var(--ink-soft);
  font-size:17px;line-height:1;padding:4px 2px;cursor:pointer;
}
.icon-btn.off{opacity:.35;text-decoration:line-through}

/* ---------- Canvas ---------- */
#stage{
  flex:1 1 auto;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;
  margin:2px 14px 6px;
}
#art{
  width:100%;height:100%;display:block;
  border-radius:18px;
  background:var(--paper-2);
  border:2px dashed var(--line);
}
#pictureName{
  position:absolute;top:12px;left:0;right:0;text-align:center;
  font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink-soft);opacity:0;transition:opacity .5s ease;
}
#pictureName.show{opacity:1}

/* ---------- Targets ---------- */
#puzzle{flex:0 0 auto;padding:0 14px 12px}
#targets{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.target{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:8px 10px 7px;text-align:center;
  transition:border-color .2s ease, background .2s ease;
}
.t-label{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;color:var(--ink-soft)}
.t-goal{display:block;font-size:30px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums}
.t-now{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.target.met{border-color:var(--green);background:#effaf3}
.target.met .t-now{color:var(--green)}
.target.over{border-color:var(--red)}
.target.over .t-now{color:var(--red)}

#perfectBadge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#fff;
  font-size:9px;font-weight:900;letter-spacing:1.2px;
  padding:3px 9px;border-radius:99px;
  box-shadow:0 2px 0 rgba(0,0,0,.08);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
  z-index:2;
}
#perfectBadge.show{opacity:1}
#targets.perfect .target{border-color:var(--gold);background:var(--gold-soft)}
#targets.perfect .target.met{border-color:var(--green);background:#effaf3}

/* ---------- Slots ---------- */
#slots{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin:12px 0 10px;flex-wrap:nowrap;
}
#slots.n4 .slot,#slots.n5 .slot{width:46px;height:46px;font-size:22px}
.slot{
  width:50px;height:50px;border-radius:var(--radius);
  border:2.5px dashed var(--line);background:#fff9;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.slot.filled{border-style:solid;border-color:var(--ink);background:#fff}
.slot.pop{transform:scale(1.12)}
.op{font-size:15px;font-weight:800;color:var(--ink-soft);padding-bottom:2px}

/* ---------- Pool ---------- */
#pool{
  display:grid;gap:8px;
  grid-template-columns:repeat(5,1fr);
  margin-bottom:12px;
  justify-items:center;
}
.tile{
  aspect-ratio:1/1;
  width:100%;max-width:74px;
  border:none;border-radius:var(--radius);
  background:var(--ink);color:var(--paper);
  font-family:inherit;font-size:22px;font-weight:900;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  box-shadow:0 3px 0 rgba(31,58,95,.35);
  transition:transform .1s ease, opacity .15s ease, box-shadow .1s ease;
}
.tile:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.tile.used{opacity:.22;pointer-events:none;box-shadow:none;transform:translateY(3px)}

/* ---------- Actions ---------- */
#actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.main-btn{
  border:none;border-radius:var(--radius);
  background:var(--gold);color:#fff;
  font-family:inherit;font-size:17px;font-weight:900;letter-spacing:.5px;
  padding:14px 10px;cursor:pointer;
  box-shadow:0 4px 0 rgba(180,125,20,.55);
  transition:transform .1s ease, box-shadow .1s ease, opacity .2s ease;
}
.main-btn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,0)}
.main-btn:disabled{opacity:.35;box-shadow:0 4px 0 rgba(180,125,20,.25);pointer-events:none}
.ghost-btn{
  border:2px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink-soft);
  font-family:inherit;font-size:14px;font-weight:800;
  padding:14px 6px;cursor:pointer;
}
.ghost-btn:active{background:var(--paper-2)}

/* ---------- Feedback ---------- */
#toast{
  position:absolute;left:50%;transform:translate(-50%,14px);
  bottom:14px;
  background:var(--ink);color:var(--paper);
  padding:9px 16px;border-radius:99px;
  font-size:13px;font-weight:800;letter-spacing:.3px;
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;
  z-index:20;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.good{background:var(--green)}
#toast.bad{background:var(--red)}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(3px)}
}
.shaking{animation:shake .34s ease}

/* ---------- Overlay ---------- */
#overlay{
  position:fixed;inset:0;z-index:40;
  /* Fades in from the top so the picture you just drew stays visible above the card. */
  background:linear-gradient(to bottom,
    rgba(246,240,228,0) 0%,
    rgba(246,240,228,.12) 30%,
    rgba(246,240,228,.92) 48%,
    rgba(246,240,228,.99) 60%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:24px 24px calc(env(safe-area-inset-bottom) + 24px);
  transition:opacity .25s ease;
}
#overlay.hidden{opacity:0;pointer-events:none}
#card{
  width:100%;max-width:360px;text-align:center;
  background:#fff;border:2px solid var(--line);border-radius:22px;
  padding:26px 22px 22px;
  box-shadow:0 12px 30px rgba(31,58,95,.12);
}
#ovTitle{font-size:26px;font-weight:900;margin:0 0 10px;letter-spacing:-.3px}
#ovBody{font-size:14px;line-height:1.55;color:var(--ink-soft);font-weight:600;margin:0 0 16px}
#ovBody b{color:var(--ink)}
#ovStats{
  display:flex;justify-content:center;gap:22px;margin-bottom:18px;
}
#ovStats .st{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--ink-soft)}
#ovStats .st b{display:block;font-size:22px;color:var(--ink);letter-spacing:0;margin-top:2px}
.main-btn.big{width:100%;padding:16px}
#ovFoot{margin-top:12px;font-size:11px;color:var(--ink-soft);font-weight:700;letter-spacing:.4px}

/* ---------- Small screens ---------- */
@media (max-height:680px){
  .t-goal{font-size:25px}
  .slot{width:44px;height:44px;font-size:21px}
  #slots{margin:9px 0 8px}
  .main-btn{padding:12px}
  .ghost-btn{padding:12px 6px}
  #pool{gap:7px}
}
@media (min-width:520px){
  #puzzle,#stage,#hud{max-width:520px;width:100%;margin-left:auto;margin-right:auto}
}