:root {
  --bg: #ffe9a8;
  --bg-dot: #ffdd85;
  --ink: #2b2540;
  --red: #ff5a6e;
  --blue: #5b7fd1;
  --paper: #fffdf7;
  --shadow: 0 4px 0 var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg) radial-gradient(var(--bg-dot) 5px, transparent 5.5px) 0 0 / 44px 44px;
  color: var(--ink);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
#app { max-width: 560px; height: 100dvh; margin: 0 auto; position: relative; }
.screen { display: none; height: 100%; flex-direction: column; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.screen.active { display: flex; }
.hidden { visibility: hidden; }

.btn {
  font: inherit; font-weight: 700; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px;
  padding: 8px 14px; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--red); color: #fff; }
.btn.x { background: #111; color: #fff; }
.btn.big { font-size: 20px; padding: 14px 24px; border-radius: 18px; width: 100%; }
.btn.icon { padding: 8px 12px; font-size: 18px; line-height: 1; }

/* ---------- タイトル */
#title { align-items: center; text-align: center; gap: 10px; overflow-y: auto; padding-top: max(16px, env(safe-area-inset-top)); }
#title > * { flex-shrink: 0; }
.title-face { width: min(34vw, 150px, 16dvh); background: var(--paper); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); overflow: hidden; transform: rotate(-3deg); }
.title-face svg { display: block; width: 100%; }
.logo { margin: 8px 0 0; font-size: clamp(44px, 14vw, 68px); font-weight: 900; letter-spacing: .04em; line-height: 1; text-shadow: 3px 3px 0 #fff; }
.logo-red { color: var(--red); display: inline-block; transform: rotate(4deg); margin-left: .08em; }
.lead { margin: 0; font-weight: 700; line-height: 1.6; }
#title .btn.big { max-width: 320px; margin-top: 6px; }
.howto { text-align: left; margin: 6px 0 0; padding: 12px 14px 12px 34px; background: rgba(255, 255, 255, .6); border-radius: 16px; font-size: 13px; line-height: 1.8; max-width: 360px; }
.personal-best { margin: 4px 0; font-size: 13px; text-align: center; }
.leaderboard { width: 100%; max-width: 420px; padding: 12px; border: 3px solid var(--ink); border-radius: 16px; background: var(--paper); text-align: left; font-size: 14px; }
.leaderboard h2, .leaderboard h3 { margin: 0 0 10px; text-align: center; font-size: 16px; }
.ranking-list { list-style: none; margin: 0; padding: 0; }
.ranking-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #e8dfc9; }
.ranking-list li:last-child { border: 0; }
.ranking-place { width: 30px; flex: none; color: var(--red); font-weight: 900; }
.ranking-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.title-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 12px 0; font-size: 13px; }
.title-links a { color: var(--ink); text-underline-offset: 4px; }
.score-form { padding: 12px; background: var(--paper); border-radius: 16px; }
.score-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.score-form input { flex: 1; min-width: 0; width: 100%; font: inherit; font-size: 16px; color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: 10px; user-select: text; -webkit-user-select: text; }
.score-form .note { margin: 10px 0 0; }
.score-form .btn { flex: none; }

@media (max-height: 500px) {
  #title .title-face { display: none; }
  #title .logo { font-size: 40px; }
  #title { gap: 6px; }
}

/* ---------- プレイ */
.bar { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; }
.bar-space { flex: 1; }
#stage-wrap {
  position: relative; flex: 1; min-height: 0;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 22px; overflow: hidden;
}
#stage { display: block; width: 100%; height: 100%; touch-action: none; }
#layer-ui .selbox { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
#layer-ui .selstem { stroke: var(--blue); stroke-width: 2; }
#layer-ui .handle { cursor: grab; }
#layer-ui .dot { fill: #fff; stroke: var(--blue); stroke-width: 3; }
#layer-ui .h-rot .dot { fill: var(--blue); }
#layer-ui .h-corner .dot { fill: var(--red); stroke: #fff; }
#layer-face [data-i] { cursor: grab; }

#target {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; font: inherit; color: inherit;
  background: #dff1ff; cursor: zoom-in; overflow: hidden;
  transform-origin: calc(100% - 8px) 8px; transform: scale(.27);
  border-radius: 40px; outline: 12px solid var(--ink);
  transition: transform .7s cubic-bezier(.6, 0, .2, 1), border-radius .7s, outline-width .7s;
}
#target.big { transform: none; border-radius: 0; outline-width: 0; cursor: zoom-out; }
#target svg { display: block; width: 100%; height: 100%; }
.target-cap {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; font-weight: 900; font-size: 20px; padding: 8px 18px; border-radius: 99px;
  opacity: 0; transition: opacity .3s;
}
#target.intro .target-cap { opacity: 1; }

#seltools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 6px; opacity: .35; pointer-events: none; }
#seltools.on { opacity: 1; pointer-events: auto; }
#seltools.contour [data-op="dup"], #seltools.contour [data-op="front"], #seltools.contour [data-op="back"], #seltools.contour [data-op="del"] { display: none; }
.btn.tool { font-size: 12px; padding: 6px 9px; border-width: 2px; border-radius: 10px; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; flex: none; }
.btn.danger { background: #ffe1e4; }
.skew { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; flex: none; }
.skew input { width: 90px; accent-color: var(--red); }

#tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 2px; }
.tab {
  font: inherit; font-weight: 700; font-size: 13px; color: var(--ink); flex: none;
  background: rgba(255, 255, 255, .55); border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 6px 12px; cursor: pointer;
}
.tab.on { background: var(--red); color: #fff; }
#palette {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 74px); grid-auto-columns: 74px; gap: 6px;
  overflow-x: auto; padding: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 0 14px 14px 14px;
  scrollbar-width: thin;
}
.tile {
  position: relative; font: inherit; color: var(--ink); background: #fff; border: 2px solid #d9d2c3; border-radius: 12px;
  padding: 4px 4px 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 0;
}
.tile:active { transform: scale(.94); }
.tile.used { border-color: var(--red); background: #fff5f6; }
.tile svg { width: 100%; height: 100%; overflow: visible; }
.tile-name { position: absolute; left: 2px; right: 2px; bottom: 2px; font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; }
.badge:empty { display: none; }
.tile.adjust { background: #eef3ff; border-color: var(--blue); }
.adjust-ico { font-size: 26px; color: var(--blue); }

/* ---------- 結果 */
#result { overflow-y: auto; gap: 10px; align-items: center; }
.res-title { margin: 4px 0 0; font-size: 24px; font-weight: 900; }
.compare { display: flex; gap: 8px; width: 100%; }
.compare figure { flex: 1; margin: 0; min-width: 0; text-align: center; }
.frame { background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; overflow: hidden; }
.frame svg { display: block; width: 100%; }
figcaption { display: inline-block; margin-top: -14px; position: relative; padding: 4px 14px; border: 3px solid var(--ink); border-radius: 99px; color: #fff; font-weight: 900; font-size: 13px; }
.cap-you { background: var(--blue); }
.cap-ans { background: var(--red); }
#res-ans .mask-layer { transition: transform .9s cubic-bezier(.5, -0.4, .8, .6), opacity .9s; transform-box: fill-box; transform-origin: 20% 0; }
#res-ans.unmask .mask-layer { transform: translateY(520px) rotate(28deg); opacity: 0; }
#score { text-align: center; }
.score-label { font-weight: 900; }
.score-num { font-size: 84px; font-weight: 900; line-height: 1; color: var(--red); text-shadow: 4px 4px 0 #fff; }
.score-num small { font-size: 36px; }
#score-comment { margin: 6px 0 0; font-weight: 900; font-size: 17px; }
#score-detail { margin: 4px 0 0; font-size: 11px; opacity: .7; }
#res-actions { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; }
.row .btn { flex: 1; }
.note { margin: -4px 0 0; font-size: 12px; font-weight: 700; text-align: center; min-height: 1em; }

/* ---------- ヒント */
dialog { border: 4px solid var(--ink); border-radius: 22px; background: var(--paper); color: var(--ink); padding: 16px; width: min(92vw, 420px); box-shadow: 0 8px 0 var(--ink); }
dialog::backdrop { background: rgba(43, 37, 64, .55); }
dialog h3 { margin: 0 0 10px; text-align: center; font-size: 20px; }
.hint-row { margin-bottom: 10px; }
.hint-btn { width: 100%; text-align: left; }
.hint-btn.opened { background: #fff3c4; opacity: 1; }
.hint-body { font-size: 14px; font-weight: 700; }
.hint-body p { margin: 8px 4px 0; }
.counts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.counts li { display: flex; justify-content: space-between; background: #fff; border: 2px solid #d9d2c3; border-radius: 8px; padding: 3px 8px; font-size: 13px; }
.counts li.zero { opacity: .45; }
#hint-close { width: 100%; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 99px; opacity: 0; pointer-events: none; transition: .25s; z-index: 10; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  #target, #res-ans .mask-layer { transition-duration: .01s; }
}

/* ---------- 効果音トグル */
#title, #result { position: relative; }
.snd-corner { position: absolute; top: 10px; right: 12px; z-index: 2; }

/* 背の低い画面でも顔が潰れないように */
#play { overflow-y: auto; }
#stage-wrap { min-height: 260px; }