*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#F0EDE5;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:32px 16px;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  touch-action:none;
}

/* mute */
#muteBtn{
  position:fixed;top:20px;right:20px;
  width:36px;height:36px;border:none;background:none;
  cursor:pointer;font-size:18px;opacity:.45;
  transition:opacity .2s;z-index:10;
}
#muteBtn:hover{opacity:.8}

/* app */
#app{display:flex;flex-direction:column;align-items:center;width:100%;max-width:440px}

/* brand */
.brand{
  font-size:20px;font-weight:600;letter-spacing:.45em;
  color:#1A1A1A;text-transform:uppercase;margin-bottom:28px;
}

/* progress */
.progress-area{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:24px}
.dots-row{display:flex;gap:5px;align-items:center}
.pd{
  width:7px;height:7px;border-radius:50%;background:#D4D0C5;
  flex-shrink:0;transition:all .32s cubic-bezier(.22,1,.36,1);
}
.pd.done{background:#C4956A}
.pd.current{background:transparent;border:2.5px solid #1A1A1A;width:9px;height:9px}
.pd.done,.pd.current{cursor:pointer}
.pd.done:hover{transform:scale(1.8);background:#A07640}
.pd.current:hover{transform:scale(1.3);opacity:.7}

/* level tooltip */
.pd-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.pd-num{
  position:absolute;bottom:calc(100% + 5px);left:50%;
  transform:translateX(-50%) translateY(4px);
  font-size:9px;letter-spacing:.04em;color:#1A1A1A;
  background:rgba(250,250,247,.95);
  border:1px solid #E0DDD4;
  padding:2px 5px;border-radius:4px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .15s,transform .15s;
}
.pd-wrap:hover .pd-num{opacity:1;transform:translateX(-50%) translateY(0)}
.level-num{font-size:11px;letter-spacing:.2em;color:#A8A49A}

/* card */
.card{
  background:#FAFAF7;border-radius:28px;padding:32px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 40px rgba(60,55,40,.09);
  position:relative;
  transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1);
}

#board{display:block;cursor:crosshair}

/* all-done overlay */
#doneMask{
  display:none;position:absolute;inset:0;border-radius:22px;
  background:rgba(250,250,247,.92);
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
#doneMask.on{display:flex}
#doneMask .done-label{font-size:16px;letter-spacing:.2em;color:#1A1A1A;font-weight:500}
#doneMask .done-sub{
  font-size:11px;letter-spacing:.28em;color:#A8A49A;
  text-transform:uppercase;cursor:pointer;transition:color .2s;
}
#doneMask .done-sub:hover{color:#1A1A1A}

/* reset hint */
.reset-hint{margin-top:24px;font-size:10px;letter-spacing:.22em;color:#C9C6BE;text-transform:uppercase}