/* 紙と黒線。影とグラデーションは使わない。色は赤ペン（○×）と揺れの黄だけ。 */
:root {
  --ink: #18181a;
  --dim: #85827a;
  --paper: #f4f3ef;
  --sheet: #fbfaf7;
  --card: #fff;
  --soft: #d9d6cd;
  --hole: #e4e1d8;
  --red: #c8352a;
  --yel: #e9b500;
  --cs: 40px; /* 1マス。盤・帯の題名・盤の下のピースは全部同じ大きさ（main.js が幅から決める） */
}

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

html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); touch-action: manipulation; }

body {
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", system-ui, sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button { font-family: inherit; color: inherit; touch-action: manipulation; -webkit-touch-callout: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

#app {
  position: relative;
  height: var(--app-h, 100dvh);
  transform: translateY(var(--app-top, 0px));
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
}
@media (min-width: 520px) { #app { border-left: 1px solid var(--soft); border-right: 1px solid var(--soft); } }

/* --- ピース（字のマス）。形は src/shape.js --- */
.pc svg, .slot svg, .mini svg, .bigt svg, .sample svg { display: block; overflow: visible; }
.pc .body, .bigt .body, .sample .body, .mini .body, .slot .body { fill: var(--card); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.pc .seam, .bigt .seam, .sample .seam, .mini .seam, .slot .seam { fill: none; stroke: var(--dim); stroke-width: 1.2; stroke-dasharray: 2.5 2.5; }
.pc text, .bigt text, .sample text, .mini text, .slot text { fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-family: inherit; font-weight: 500; }
.hand rect, .hand path { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.hl { fill: var(--hole); stroke: var(--dim); stroke-width: 1.2; stroke-dasharray: 3 2.5; }

.layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.pc {
  position: absolute; left: 0; top: 0; pointer-events: auto; touch-action: none; cursor: grab;
  transition: left .22s ease, top .22s ease;
}
.pc.notr { transition: none; }
.pc .rot { transition: transform .2s ease; }
.pc .rot.notr, .pc.notr .rot { transition: none; }
.pc.twist svg { animation: twist .85s ease-in-out; }
@keyframes twist { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-24deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-16deg); } 80% { transform: rotate(2deg); } }
.pc.drag { cursor: grabbing; transition: none; z-index: 30; }
.pc.drag svg { transform: scale(1.06); transform-origin: 30% 50%; }
.pc.lock { pointer-events: none; cursor: default; }
.pc.wob svg { animation: wob .45s; }
.pc.ne .body { stroke: var(--red); stroke-width: 2.4; }
.pc.ne text { fill: var(--red); }
.pc.yel .body { stroke: var(--yel); stroke-width: 2.6; fill: #fff6d6; }
.pc.crack .seam { stroke: var(--ink); stroke-width: 2; animation: crack .6s steps(1); }
.pc.pop svg { animation: pop .25s ease-out; }
@keyframes crack { 0%, 50% { stroke: var(--red); } 25%, 75% { stroke: var(--ink); } }
@keyframes pop { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }

.slot { position: absolute; width: var(--cs); height: var(--cs); }
.slot svg { position: absolute; left: calc(var(--cs) * -.3); top: calc(var(--cs) * -.3); }
.slot.full svg { visibility: hidden; }

/* --- 帯 --- */
.band { flex: 0 0 auto; padding: 8px 14px 8px; border-bottom: 1.5px solid var(--ink); }
.r { display: flex; align-items: center; gap: 8px; }
.tslots { position: relative; flex: 0 0 auto; width: calc(var(--cs) * 3.35 + 6px); height: calc(var(--cs) + 12px); }
.dots { display: flex; gap: 4px; margin-right: auto; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.dots i.on { background: var(--ink); }
.tools { display: flex; gap: 6px; }
.tool {
  font-size: 12px; height: 26px; padding: 0 7px; border: 1.5px solid var(--ink); border-radius: 3px; white-space: nowrap;
  background: var(--card); cursor: pointer; position: relative;
}
.tool:active { transform: translateY(1px); }
.tool.snd { width: 28px; padding: 0; line-height: 1; }
.tool.snd.off::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 1.5px solid var(--ink); transform: rotate(-40deg); }
.rule { margin: 2px 0 0; font-size: 13px; color: var(--ink); letter-spacing: .5px; }

/* --- 本編 --- */
#main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.play { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 12px; }
.boardwrap {
  position: relative; background: var(--sheet); border: 1.5px solid var(--ink); padding: 14px 10px 18px;
  display: flex; justify-content: center; transition: transform .35s ease, opacity .35s ease;
}
.boardwrap.out { transform: translateX(-110%) rotate(-4deg); opacity: 0; }
.boardwrap.in0 { transform: translateX(30%); opacity: 0; transition: none; }
.boardwrap.wob { animation: wob .45s; }
.board { position: relative; }
.mark { position: absolute; right: 6px; top: 4px; width: 64px; height: 64px; pointer-events: none; z-index: 12; }
.mark circle { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 290; stroke-dashoffset: 290; transform: rotate(-80deg); transform-origin: 50% 50%; }
.mark.on circle { animation: draw .45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.xmark { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 12; }
.xmark path { fill: none; stroke: var(--red); stroke-width: 4.5; stroke-linecap: round; }
.xmark.on { opacity: 1; }

.tray { position: relative; min-height: calc(var(--cs) * 1.6); border-top: 1.5px dashed var(--soft); }
.tbar { display: flex; justify-content: flex-end; }

.check {
  height: 48px; font-size: 16px; font-weight: 700; border: 2px solid var(--ink); border-radius: 4px; background: var(--card); cursor: pointer;
}
.check:active { transform: translateY(2px); }

@keyframes wob { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* --- タイトル画面（遊びの土台だけ。仕掛けは教えない） --- */
.top { padding: 26px 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.bigt { display: flex; margin: 6px 0 0 4px; }
.base { margin: 0; font-size: 16px; line-height: 1.8; }
.sample { background: var(--sheet); border: 1.5px solid var(--ink); padding: 14px 14px 18px; display: flex; align-items: center; gap: 18px; }
.sample .arrow { font-size: 20px; color: var(--dim); }
.sample .sb { position: relative; }
.top .check { margin-top: 4px; }
.tfoot { font-size: 12px; text-align: center; color: var(--dim); }

/* --- 結果 --- */
/* 5問目：ボタン「Xでポスト」「もう一度」は黒線の枠の中の空欄。組み上がると押せる */
.rframe { position: relative; background: var(--sheet); border: 1.5px solid var(--ink); padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.pbrow { display: flex; justify-content: center; }
.pbtn { position: relative; }
.pbtn.x .hl { fill: #8d8b86; stroke: var(--ink); }
.pbtn.live { cursor: pointer; }
.pbtn.live:active { transform: translateY(2px); }
.gslot { display: inline-block; position: relative; vertical-align: middle; }
.pc.dark .body { fill: var(--ink); }
.pc.dark text { fill: #fff; font-weight: 700; }
.xg path { fill: var(--ink); }
.pc.dark .xg path { fill: #fff; }
.result { padding: 14px 14px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini { position: relative; background: var(--sheet); border: 1.5px solid var(--ink); padding: 18px 4px 10px; display: flex; justify-content: center; }
.mini .mb { position: relative; }
.mini .mc { position: absolute; }
.mini .mc { border: 1px solid var(--soft); background: var(--card); margin: -.5px; }
.mini .mc svg { display: block; }
.mini .mh { background: var(--hole); border-style: dashed; }
.mini .mark { width: 26px; height: 26px; right: 3px; top: 3px; }
.mini .mark circle { stroke-dashoffset: 0; }

#foot { padding: 6px 14px 16px; font-size: 12px; text-align: center; color: var(--dim); }

.toast {
  position: fixed; left: 50%; top: 40%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 4px; font-size: 14px; z-index: 50; transition: opacity .5s;
}
.toast.out { opacity: 0; }