* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #fbf3e6;
  color: #4a3a30;
  font-family: -apple-system, "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 上の帯（戻る・やり直す）の下の部分を、残りの場所の真ん中に置く。
   盤が画面の上に寄って、下半分が空かないようにするため（T04） */
.app { min-height: 100vh; min-height: 100dvh; }
.app > .top + * { margin-top: auto; }
.app > :last-child { margin-bottom: auto; }

.top { display: flex; justify-content: space-between; align-items: center; }
.info { font-size: 15px; }

.btn {
  font: inherit;
  font-size: 15px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: #e0884a;
  color: #fff;
}
.btn-sub { background: #b9a08a; }

.cat { width: 100%; height: 100%; display: block; }
/* 盤面。ブロックの境目は、すきまの広い列・行（main.js が grid の並びを作る）で太い線に見せる */
.board {
  padding: 6px;
  border-radius: 14px;
  background: #8a6f5a;
}
.field {
  display: grid;
  gap: 2px;
  container-type: inline-size;
  -webkit-touch-callout: none;
}
.cell {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 12%;
  font: inherit;
  background: #fffaf2;
  display: flex; align-items: center; justify-content: center;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  cursor: pointer;
  overflow: hidden;
}
.field[data-size="9"] { gap: 1px; }
.field[data-size="9"] .cell { border-radius: 8%; }
.cell:active { transform: scale(0.94); }
/* 猫のいるマスは、猫ごとの薄い色の下地 */
.cell.given, .cell.placed { background: var(--bg); }
.cell .cat { width: 92%; height: 92%; }
/* 最初からいる猫: 下に濃い影を付けて「置いてある」感じにする */
.cell.given { box-shadow: inset 0 -3px 0 rgba(90, 60, 30, 0.28); }
/* 自分で置いた猫: 少し小さく描く */
.cell.placed .cat { width: 80%; height: 80%; }
/* 同じ行・列・ブロックにいる、まちがいの猫 */
.cell.bad { box-shadow: inset 0 0 0 3px #d0533f; }
.cell.bad::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(220, 70, 50, 0.25);
  pointer-events: none;
}
/* 選んだマスと、同じ行・列・ブロック・同じ猫。
   行・列・ブロックはごく薄くして、選んだマス（濃いオレンジの太枠）との差をはっきりさせる（T49） */
.cell.peer::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(224, 136, 74, 0.10);
  pointer-events: none;
}
/* 選んだマス: オレンジの太枠と濃いめの下地。枠がゆっくり光る */
.cell.selected {
  --sel-w: 5px;
  z-index: 1;
  box-shadow: inset 0 0 0 var(--sel-w) #e8701a;
  animation: sel-glow 1.4s ease-in-out infinite;
}
.field[data-size="6"] .cell.selected { --sel-w: 4px; }
.field[data-size="9"] .cell.selected { --sel-w: 3px; }
.cell.selected:not(.given):not(.placed) { background: #ffd29a; }
.cell.selected::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(232, 112, 26, 0.18);
  pointer-events: none;
}
@keyframes sel-glow {
  0%, 100% { box-shadow: inset 0 0 0 var(--sel-w) #e8701a; }
  50% { box-shadow: inset 0 0 0 var(--sel-w) #ffaa55, inset 0 0 0 calc(var(--sel-w) * 2) rgba(255, 170, 85, 0.35); }
}
.cell.same { outline: 2px solid #4a3a30; outline-offset: -2px; }
/* クリア: みんなにっこりして、ゆっくり弾む */
.field.cleared .cell .cat { animation: breathe 2.4s ease-in-out infinite; }
.field.cleared .cell:nth-child(2n) .cat { animation-delay: -1.2s; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
/* 変わったばかりのマス */
.cell.just .cat { animation: appear 0.18s ease-out; }
@keyframes appear {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}

.status { margin: 8px 0 0; font-size: 15px; min-height: 1.4em; color: #c0661f; text-align: center; }

/* 盤の下の猫のボタン（--pc は1段に並べる数） */
.palette {
  --pc: 4;
  display: grid;
  grid-template-columns: repeat(var(--pc), 1fr);
  gap: 6px;
  margin-top: 6px;
}
.pick {
  position: relative;
  aspect-ratio: 1;
  max-width: 72px;
  justify-self: center;
  width: 100%;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 3px 0 rgba(90, 60, 30, 0.25);
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  cursor: pointer;
}
.palette { justify-items: center; }
.pick .cat { width: 84%; height: 84%; }
.pick:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(90, 60, 30, 0.25); }
.pick .left {
  position: absolute; right: 3px; bottom: 1px;
  font-size: 12px; font-weight: bold; color: #4a3a30; opacity: 0.7;
}
/* 盤に全部そろった猫は薄く */
.pick.done { opacity: 0.35; }
.pick.current { border-color: #e0884a; }
/* マスを選んでいないときは、押せない見た目にする（押すと「先にマスを選んでね」と出る） */
.palette.idle .pick { opacity: 0.4; filter: grayscale(0.5); box-shadow: none; }
.palette.idle .pick:active { transform: none; }

.tools { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.tool {
  font: inherit;
  font-size: 15px;
  min-width: 140px;
  padding: 12px 20px;
  border: 2px solid #b9a08a;
  border-radius: 999px;
  background: #fffaf2;
  color: #6b5a4c;
}
.tool:active { transform: translateY(1px); }
/* 自分で置いた猫のマスを選んでいないときは、押せない見た目にする */
.tool.idle { opacity: 0.45; }

/* 結果 */
.overlay {
  position: fixed; inset: 0;
  z-index: 10; /* 盤の上の部品より上に重ねる */
  background: rgba(60, 40, 30, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.overlay[hidden] { display: none; }
.overlay-card {
  background: #fffaf2;
  padding: 24px 32px;
  border-radius: 16px;
  text-align: center;
}
.overlay-card p { font-size: 22px; margin: 0 0 16px; }
.overlay-card .overlay-sub { font-size: 15px; margin: -8px 0 14px; opacity: 0.8; }
.overlay-buttons { display: flex; gap: 10px; justify-content: center; }
.overlay-stamp { font-size: 15px; margin: 0 0 18px; }
.overlay-paws { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.overlay-paws .paw { width: 40px; height: 40px; fill: #e5728a; transform: rotate(-12deg); }
.back-link { display: block; margin-top: 8px; font-size: 15px; color: #8a6f5a; text-decoration: none; padding: 8px; }

/* ホーム・遊び方画面（難易度はホーム画面で選ぶ） */
.screen { background: #fbf3e6; }
.screen .overlay-card { background: transparent; width: min(320px, 100%); }
.title-name { font-size: 32px !important; font-weight: bold; margin-bottom: 8px !important; white-space: nowrap; }
.title-name + .menu-buttons { margin-top: 28px; }
.home-modes { margin: 6px 0 0; }
.screen-title { font-size: 24px !important; font-weight: bold; }
.menu-buttons { display: flex; flex-direction: column; gap: 14px; }
.btn-big { font-size: 20px; padding: 14px 0; width: 100%; }
.option-group { margin-bottom: 28px; text-align: left; }
.option-label { font-size: 15px; margin-bottom: 8px; }
.modes { display: flex; gap: 8px; }
.mode-choice {
  flex: 1;
  font: inherit;
  font-size: 15px;
  padding: 12px 2px;
  white-space: nowrap;
  border-radius: 12px;
  border: 3px solid transparent;
  background: #eadfd2;
  color: #6b5a4c;
}
.mode-choice.selected { color: #fff; border-color: #4a3a30; }
.mode-easy.selected { background: #7cb97a; }
.mode-normal.selected { background: #e0884a; }
.mode-hard.selected { background: #c95a5a; }
.mode-choice small { display: block; font-size: 12px; opacity: 0.85; }
.howto-card { width: min(400px, 100%) !important; text-align: left; }
.howto-card .screen-title { text-align: center; }
.howto-list { margin: 0 0 16px; padding-left: 1.4em; font-size: 15px; line-height: 1.6; }
.howto-list li { margin-bottom: 8px; }
.howto-tip { font-size: 14px !important; margin: 0 0 10px !important; opacity: 0.85; }
.howto-card .btn-big { margin-top: 12px; }