:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #173d39;
  background: #e9f7f2;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: radial-gradient(circle at 8% 8%, #fff2d7 0, transparent 22rem),
              radial-gradient(circle at 93% 24%, #d8f2e9 0, transparent 24rem), #e9f7f2;
}

button, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
button:focus-visible, select:focus-visible { outline: 4px solid #e68d45; outline-offset: 3px; }

.app { width: min(100% - 28px, 1020px); margin: 30px auto 42px; }
.intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 20px; }
.eyebrow, .phase-label, .box-label { margin: 0; color: #317b70; font-size: .82rem; font-weight: 800; letter-spacing: .08em; }
h1 { margin: 4px 0 3px; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: .02em; }
.lead { margin: 0; color: #50716d; font-size: 1.03rem; }
.round-mark { display: grid; place-items: center; flex: 0 0 72px; height: 72px; border-radius: 50%; background: #ffcf78; color: #fff; box-shadow: 0 8px 0 #edb95e; font-size: 2.5rem; transform: rotate(9deg); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; background: #dcebe6; color: #607974; font-weight: 800; }
.steps li span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #c2d7d0; font-size: .8rem; }
.steps li.is-current { background: #187969; color: white; box-shadow: 0 4px 0 #0e5b4f; }
.steps li.is-current span { background: #fbe3a3; color: #19584e; }
.steps li.is-done { background: #c8ebdb; color: #276a58; }
.steps li.is-done span { background: #8acfb3; color: #174638; }

.activity { overflow: hidden; padding: clamp(16px, 3vw, 30px); border: 1px solid #d6e9df; border-radius: 28px; background: rgba(255,255,255,.92); box-shadow: 0 18px 45px #3f7c6d24; }
.activity-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.activity-head h2 { margin: 4px 0; font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.phase-description { margin: 0; color: #55736d; line-height: 1.55; }
.tap-count { flex: 0 0 auto; padding: 9px 13px; border-radius: 999px; background: #e7f5ec; color: #1d7058; font-size: .85rem; font-weight: 800; }

.board { position: relative; height: clamp(360px, 52vw, 535px); overflow: hidden; border: 2px solid #e6dcc2; border-radius: 26px; background-color: #fffdf8; background-image: radial-gradient(#eedfc9 1px, transparent 1px); background-size: 21px 21px; box-shadow: inset 0 4px 18px #eadfc655; touch-action: manipulation; }
.board.is-twelve { height: clamp(455px, 62vw, 620px); }
.board::before, .board::after { position: absolute; z-index: 0; display: block; width: 54px; height: 14px; border-radius: 3px; background: #f5dea5aa; content: ""; transform: rotate(-14deg); }
.board::before { top: 14px; left: 22px; }
.board::after { right: 22px; bottom: 14px; transform: rotate(13deg); }
.sticker { position: absolute; z-index: 1; display: grid; place-items: center; width: clamp(68px, 9vw, 94px); height: clamp(68px, 9vw, 94px); padding: 0; border: 3px solid #fff; border-radius: 25px; background: var(--sticker-color); box-shadow: 0 7px 0 #224a4027, 0 11px 20px #37534e22; font-size: clamp(2.1rem, 4.8vw, 3.2rem); line-height: 1; transform: translate(-50%, -50%) rotate(var(--tilt)); transition: box-shadow .15s ease, scale .15s ease; -webkit-tap-highlight-color: transparent; user-select: none; }
.sticker:hover { scale: 1.05; }
.sticker:active, .sticker.is-tapped { scale: 1.14; box-shadow: 0 0 0 8px #ffd16d88, 0 8px 20px #37534e33; }
.sticker.is-replaying { z-index: 2; scale: 1.2; box-shadow: 0 0 0 11px #ffcf69, 0 0 0 23px #ffcf6966, 0 0 34px 19px #ffcf69; }
.board.is-inactive .sticker { cursor: default; }
.board.is-inactive .sticker:hover { scale: 1; }
.board.is-inactive .sticker.is-replaying:hover { scale: 1.2; }

.message { min-height: 1.4em; margin: 10px 0 0; color: #2b7664; font-weight: 700; }
.panel { padding-top: 9px; }
.setting-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 7px 0 16px; font-weight: 800; }
select { min-width: 86px; min-height: 43px; padding: 7px 12px; border: 1px solid #9ccdbd; border-radius: 12px; background: #fff; color: #174c40; }
.text-button { margin-left: auto; padding: 8px 5px; border: 0; background: transparent; color: #187969; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.sequence-box { padding: 13px 15px; border: 1px solid #d8e9df; border-radius: 16px; background: #f4fbf6; }
.recording-note { margin: 6px 0; color: #5f7c70; font-size: .9rem; }
.sequence-row { display: flex; flex-wrap: wrap; gap: 8px; min-height: 50px; align-items: center; margin-top: 8px; }
.empty-sequence { color: #81958d; font-size: .9rem; }
.sequence-chip { display: inline-flex; align-items: center; gap: 4px; min-width: 52px; min-height: 46px; padding: 5px 9px; border-radius: 13px; background: #fff; box-shadow: 0 2px 4px #2b61551a; font-size: 1.4rem; }
.sequence-chip small { align-self: flex-start; color: #316b5f; font-size: .72rem; font-weight: 900; }
.sequence-chip.is-replaying { background: #ffdf8a; box-shadow: 0 0 0 3px #f7be4f; }
.sequence-chip.is-wrong { border: 2px solid #e5a8a0; }
.actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.actions button { min-height: 51px; padding: 11px 19px; border-radius: 13px; font-weight: 800; }
.primary { border: 2px solid #147461; background: #187969; color: #fff; box-shadow: 0 4px 0 #0f5e50; }
.primary:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #0f5e50; }
.secondary { border: 2px solid #a9d3c1; background: #fff; color: #215c4c; }
.centered { text-align: center; }
.ready-icon { margin-top: 8px; font-size: 3rem; }
.centered h3 { margin: 8px 0 0; font-size: 1.6rem; }
.centered p { margin: 6px 0; color: #56726a; }
.center-actions { justify-content: center; }
.compact-box { display: flex; align-items: center; gap: 14px; }
.progress-dots { display: flex; flex-wrap: wrap; gap: 7px; }
.progress-dot { width: 19px; height: 19px; border: 2px solid #93c5ad; border-radius: 50%; background: #fff; }
.progress-dot.is-filled { border-color: #1b8b73; background: #1b8b73; }
.result-heading { display: flex; align-items: center; gap: 15px; margin: 2px 0 16px; }
.result-symbol { display: grid; place-items: center; flex: 0 0 55px; height: 55px; border-radius: 17px; background: #ffdc85; color: #b55d27; font-size: 2rem; }
.result-heading h3 { margin: 3px 0; font-size: 1.65rem; }
.result-heading p:last-child { margin: 0; color: #5e7970; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.replay-status { min-height: 1.5em; margin: 12px 0 0; color: #98620d; font-weight: 800; }
.result-actions { justify-content: flex-start; }
.privacy-note { margin: 16px 8px 0; color: #647e74; font-size: .82rem; text-align: center; }

@media (max-width: 650px) {
  .app { width: min(100% - 16px, 520px); margin-top: 15px; }
  .intro { padding: 0 7px 15px; }
  .round-mark { flex-basis: 53px; height: 53px; font-size: 1.9rem; box-shadow: 0 5px 0 #edb95e; }
  .lead { font-size: .88rem; }
  .steps { gap: 4px; }
  .steps li { gap: 3px; min-height: 40px; font-size: .76rem; }
  .steps li span { width: 19px; height: 19px; font-size: .7rem; }
  .activity { padding: 12px; border-radius: 20px; }
  .activity-head { margin-bottom: 11px; }
  .phase-description { font-size: .85rem; }
  .tap-count { padding: 7px 8px; font-size: .69rem; }
  .board { height: clamp(360px, 108vw, 480px); border-radius: 18px; }
  .board.is-twelve { height: clamp(450px, 145vw, 600px); }
  .comparison { grid-template-columns: 1fr; }
  .actions button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sticker, .primary { transition: none; }
}