/* にとりのぬいぐるみクレーン */
:root {
  --teal: #245A63;
  --teal-light: #71B7B0;
  --cream: #FFF2D7;
  --wood: #A86E47;
  --wood-dark: #7a4a2b;
  --yellow: #F3CF75;
  --ink: #263F45;
  --danger: #8c2f2f;
  --font: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: #2d5a5c url("img/workshop_background.webp") center top / cover fixed;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; }
.nc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.nc-app {
  min-height: 100svh;
  max-width: 1120px;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 上の帯 */
.nc-top {
  display: flex; align-items: center; gap: 8px;
  background: var(--cream);
  border: 3px solid var(--teal);
  border-radius: 14px;
  padding: 6px 8px 6px 12px;
}
.nc-title { font-size: 17px; margin: 0; flex: 1 1 auto; min-width: 0; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
/* 狭い画面：タイトル文字は読み上げ用に残して見た目は消す（筐体の名札に正式名を出している） */
@media (max-width: 480px) {
  .nc-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nc-top { justify-content: space-between; padding: 4px 6px 4px 8px; }
  .nc-count { padding: 2px 10px; font-size: 16px; }
}
.nc-count {
  margin: 0; font-weight: 700; font-size: 17px; white-space: nowrap;
  background: var(--yellow); border-radius: 999px; padding: 2px 12px;
}
.nc-top-btns { display: flex; gap: 6px; }
.nc-icon-btn {
  min-width: 48px; min-height: 48px; padding: 0 10px;
  border: 2px solid var(--teal); border-radius: 12px;
  background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.nc-save-warn {
  background: #fff3c4; border: 2px solid #b58a00; border-radius: 10px; padding: 6px 10px; font-size: 16px;
}

/* 本体 */
.nc-main { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.nc-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.nc-canvas-wrap { position: relative; line-height: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
#ncCanvas { display: block; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.nc-talk {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px;
  background: var(--cream); border: 3px solid var(--teal); border-radius: 14px; padding: 4px 12px 4px 4px;
  min-height: 60px;
}
.nc-face { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-light); flex: none; }
.nc-talk-text { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; }

.nc-controls {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 10px; width: 100%; max-width: 560px;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.nc-ctrl {
  min-height: 64px; border-radius: 16px; border: 3px solid var(--teal);
  font-size: 22px; font-weight: 800; cursor: pointer; touch-action: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.nc-ctrl span { font-size: 17px; }
.nc-ctrl-move { background: #fff; color: var(--ink); }
.nc-ctrl-drop { background: var(--yellow); color: var(--ink); min-width: 120px; font-size: 22px; }
.nc-ctrl.is-held { background: var(--teal-light); }
.nc-ctrl:disabled { background: #d9d6cc; color: #474e50; border-color: #8f9a9b; cursor: not-allowed; }
.nc-hint { margin: 0; font-size: 16px; color: var(--ink); background: rgba(255,242,215,0.92); border-radius: 10px; padding: 4px 10px; max-width: 560px; }
.nc-hint-pc { display: none; }
@media (hover: hover) and (pointer: fine) { .nc-hint-pc { display: block; } }

button:focus-visible, input:focus-visible, .nc-link:focus-visible {
  outline: 4px solid #1b63d6; outline-offset: 2px;
}

/* 横長の画面（PC・横向きスマホ）：盤面を左、一言と操作を右に並べて盤面を大きくする */
.nc-side { display: none; }
@media (min-width: 760px), (orientation: landscape) and (max-height: 560px) {
  .nc-main { flex-direction: row; justify-content: center; align-items: flex-start; }
  .nc-stage {
    display: grid; grid-template-columns: auto minmax(240px, 330px);
    grid-template-areas: "canvas talk" "canvas ctrl" "canvas hint" "canvas rest";
    grid-template-rows: auto auto auto 1fr; column-gap: 12px; row-gap: 8px; align-items: start;
  }
  .nc-canvas-wrap { grid-area: canvas; }
  .nc-talk { grid-area: talk; }
  .nc-controls { grid-area: ctrl; }
  .nc-hint { grid-area: hint; }
}
@media (min-width: 760px) { .nc-title { font-size: 20px; } }
/* 小さなたなは、横に余裕があるときだけ */
@media (min-width: 1040px) and (min-height: 561px) {
  .nc-side {
    display: flex; flex-direction: column; gap: 8px; width: 240px; flex: none;
    background: var(--cream); border: 3px solid var(--teal); border-radius: 14px; padding: 10px;
  }
}
.nc-side-title { margin: 0; font-weight: 800; }
.nc-mini-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 6px; background: var(--wood); border-radius: 8px; padding: 6px; }
.nc-mini-slot { aspect-ratio: 1 / 1.15; border-bottom: 5px solid var(--wood-dark); display: flex; align-items: flex-end; justify-content: center; }
.nc-mini-slot canvas { width: 100%; height: auto; }

/* 結果 */
.nc-result {
  position: absolute; left: 6%; right: 6%; bottom: 16%;
  background: rgba(255,242,215,0.97); border: 3px solid var(--teal); border-radius: 16px;
  padding: 10px 12px; text-align: center; line-height: 1.5;
}
.nc-result-main { margin: 0; font-size: 20px; font-weight: 800; }
.nc-result-sub { margin: 2px 0 8px; font-size: 16px; }
.nc-result-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.nc-new { display: inline-block; background: #b8323a; color: #fff; border-radius: 999px; padding: 0 8px; font-size: 15px; margin-left: 4px; vertical-align: 2px; }

.nc-overlay { position: absolute; inset: 0; background: rgba(20,40,44,0.55); display: flex; align-items: center; justify-content: center; line-height: 1.5; }
.nc-overlay-card { background: var(--cream); border: 3px solid var(--teal); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.nc-overlay-title { margin: 0; font-size: 20px; font-weight: 800; text-align: center; }

/* ボタン */
.nc-btn {
  min-height: 48px; padding: 6px 16px; border-radius: 12px; border: 2px solid var(--teal);
  background: #fff; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer;
}
.nc-btn-main { background: var(--teal); color: #fff; }
.nc-btn-big { font-size: 22px; min-height: 60px; }
.nc-btn-danger { border-color: var(--danger); color: var(--danger); }
.nc-btn:disabled { opacity: 1; background: #d9d6cc; color: #474e50; border-color: #8f9a9b; cursor: not-allowed; }
.nc-link { background: none; border: none; color: #fff; text-decoration: underline; font-size: 16px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.nc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.nc-foot { text-align: center; font-size: 16px; color: #fff; background: rgba(20,40,44,0.78); border-radius: 10px; padding: 6px 10px; }
.nc-foot p { margin: 0; }

/* タイトル */
.nc-screen { position: fixed; inset: 0; z-index: 30; overflow: auto; }
.nc-title-screen { background: #2d5a5c url("img/workshop_background.webp") center / cover; display: flex; align-items: center; justify-content: center; padding: 16px; }
.nc-title-card {
  position: relative; width: min(100%, 520px);
  background: rgba(255,242,215,0.95); border: 4px solid var(--teal); border-radius: 22px;
  padding: 18px 16px 14px; text-align: center; overflow: hidden;
}
.nc-kicker { margin: 0; font-weight: 700; color: var(--teal); }
.nc-title-big { margin: 4px 0 6px; font-size: clamp(30px, 8vw, 42px); font-weight: 900; line-height: 1.2; color: var(--ink); }
.nc-title-nitori { width: auto; height: min(36svh, 300px); max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.nc-title-btns { display: grid; gap: 8px; margin-top: 8px; }
.nc-title-note { margin: 10px 0 0; font-size: 16px; }
.nc-title-credit { margin: 4px 0 0; font-size: 16px; }
.nc-loading { margin-top: 8px; }
.nc-loading p { margin: 0 0 6px; }
.nc-bar { height: 10px; background: #e5dcc6; border-radius: 999px; overflow: hidden; }
.nc-bar > div { height: 100%; width: 0; background: var(--teal); transition: width .2s; }

/* オープニング：上ぞろえ（中央にすると縦長画面でボタンが下へ落ちる） */
.nc-opening { z-index: 35; background: #12282b; display: flex; justify-content: center; align-items: flex-start;
  padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
.nc-opening[hidden] { display: none; }
.nc-opening-inner { width: min(100%, 1100px); display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: max(0px, calc((100svh - 100vw * 9 / 16 - 120px) / 2.5)); }
.nc-op-video { display: block; width: auto; height: auto; max-width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - 110px); border-radius: 12px; background: #000; }
.is-embed .nc-op-video { max-height: calc(100% - 110px); }
.nc-op-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nc-op-btns .nc-btn { min-width: 132px; }

/* ダイアログ */
.nc-dialog { position: fixed; inset: 0; z-index: 40; background: rgba(20,40,44,0.6); display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.nc-dialog[hidden], .nc-screen[hidden], .nc-overlay[hidden], .nc-result[hidden] { display: none; }
.nc-dialog-card {
  background: var(--cream); border: 3px solid var(--teal); border-radius: 18px;
  padding: 14px 16px; width: min(100%, 520px); max-height: 100%; overflow: auto;
}
.nc-dialog-card h2 { margin: 0 0 8px; font-size: 20px; }
.nc-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.nc-dialog-head h2 { margin: 0; }
.nc-dialog-full .nc-dialog-card { width: min(100%, 760px); height: 100%; }
.nc-small { font-size: 16px; margin: 4px 0; }
.nc-small-list { font-size: 16px; padding-left: 1.2em; }
.nc-sub { font-size: 17px; margin: 12px 0 6px; }
.nc-intro { font-size: 17px; padding-left: 1.4em; }
.nc-field { border: 2px solid var(--teal-light); border-radius: 12px; margin: 10px 0; padding: 8px 12px; }
.nc-field legend { font-weight: 800; padding: 0 4px; }
.nc-field label { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.nc-field input[type="checkbox"], .nc-field input[type="radio"] { width: 22px; height: 22px; }
.nc-range input { flex: 1 1 140px; }

/* たな */
.nc-shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; background: var(--wood); border-radius: 12px; padding: 10px; border: 3px solid var(--wood-dark); }
.nc-slot {
  position: relative; aspect-ratio: 1 / 1.15; min-height: 64px;
  background: rgba(40,20,5,0.22); border: none; border-bottom: 7px solid var(--wood-dark); border-radius: 6px 6px 0 0;
  cursor: pointer; padding: 2px; display: flex; align-items: flex-end; justify-content: center;
}
.nc-slot canvas { width: 100%; height: auto; display: block; }
.nc-slot-empty { color: #fff; font-size: 16px; font-weight: 700; align-items: center; }
.nc-slot.is-swap-src { outline: 4px dashed var(--yellow); outline-offset: -4px; }
.nc-zukan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nc-card {
  background: #fff; border: 2px solid var(--teal-light); border-radius: 12px; padding: 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; color: var(--ink); font-size: 15px; line-height: 1.3; min-height: 48px;
}
.nc-card canvas { width: 100%; height: auto; }
.nc-card b { font-size: 16px; }
.nc-pick-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nc-pick-list .nc-card:disabled { cursor: not-allowed; background: #ebe7dc; }
.nc-detail { text-align: center; }
.nc-celebrate { text-align: center; }
.nc-celebrate canvas { width: 100%; height: auto; border-radius: 12px; display: block; }
.nc-celebrate-text { font-weight: 700; font-size: 17px; margin: 8px 0 4px; }
.nc-celebrate .nc-small-list { text-align: left; display: inline-block; margin: 0; }
.nc-detail canvas { width: min(100%, 260px); height: auto; }
.nc-detail-line { font-weight: 700; }
@media (max-width: 420px) {
  .nc-zukan, .nc-pick-list { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .nc-card { font-size: 15px; padding: 3px 2px; }
  .nc-card b { font-size: 15px; }
}

/* 埋め込み（?embed=1）：背景を消してページ側に任せる */
.is-embed body { background: transparent; }
.is-embed .nc-foot { color: var(--ink); background: rgba(255,242,215,0.9); }
.is-embed .nc-link { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .nc-bar > div { transition: none; }
}

/* ===== 見た目（動画の雰囲気：真ちゅう・ガラス・あたたかい光）===== */
body {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,226,170,0.35), rgba(255,226,170,0) 60%),
    linear-gradient(rgba(20,45,48,0.25), rgba(20,45,48,0.55)),
    #2d5a5c url("img/workshop_background.webp") center top / cover fixed;
}
.nc-top {
  background: linear-gradient(180deg, #2f747c, #1d4d55);
  border: 3px solid #d9a94a; box-shadow: 0 0 0 2px #7d5a1c, 0 6px 14px rgba(0,0,0,0.35);
  color: var(--cream);
}
.nc-title { color: var(--cream); text-shadow: 0 2px 0 rgba(0,0,0,0.35); letter-spacing: 0.04em; }
.nc-count { background: linear-gradient(180deg, #fbe7a6, #d9a94a); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2); }
.nc-icon-btn {
  background: linear-gradient(180deg, #fff8e6, #f0dcb0); border: 2px solid #a8792a; color: var(--ink);
  box-shadow: 0 3px 0 #7d5a1c;
}
.nc-icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7d5a1c; }
.nc-canvas-wrap { border-radius: 22px; box-shadow: 0 0 0 3px rgba(125,90,28,0.6), 0 14px 30px rgba(0,0,0,0.45), 0 0 60px rgba(255,214,140,0.25); }

/* にとりの吹き出し */
.nc-talk { background: transparent; border: none; padding: 0; gap: 12px; }
.nc-face { width: 60px; height: 60px; box-shadow: 0 0 0 3px #d9a94a, 0 0 0 5px #7d5a1c, 0 4px 10px rgba(0,0,0,0.35); }
.nc-talk-text {
  position: relative; flex: 1 1 auto; background: #fffaf0; color: var(--ink);
  border: 2px solid #d9a94a; border-radius: 16px; padding: 8px 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.nc-talk-text::before {
  content: ""; position: absolute; left: -10px; top: 50%; margin-top: -8px;
  border: 8px solid transparent; border-right: 10px solid #d9a94a; border-left: 0;
}

/* 操作盤：アーケードのボタン */
.nc-controls {
  background: linear-gradient(180deg, #357d85, #1c4a51); border: 3px solid #d9a94a; border-radius: 22px;
  padding: 10px; box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 6px 14px rgba(0,0,0,0.35); align-items: center;
}
.nc-ctrl { border: none; transition: transform .06s, box-shadow .06s; }
.nc-ctrl-move {
  background: radial-gradient(circle at 50% 30%, #fffdf5, #e8d6aa 70%); color: var(--ink);
  border-radius: 18px; box-shadow: 0 5px 0 #8a6a2a, 0 7px 10px rgba(0,0,0,0.35);
}
.nc-ctrl-drop {
  min-height: 72px; border-radius: 999px; color: #fff; font-size: 24px; text-shadow: 0 2px 0 rgba(90,0,0,0.6);
  background: radial-gradient(circle at 50% 28%, #ff9a8a 0%, #e0443a 35%, #a8231c 80%);
  box-shadow: 0 6px 0 #6e1410, 0 9px 14px rgba(0,0,0,0.4), inset 0 -4px 8px rgba(0,0,0,0.25);
}
.nc-ctrl.is-held, .nc-ctrl:active:not(:disabled) { transform: translateY(4px); }
.nc-ctrl-move.is-held, .nc-ctrl-move:active:not(:disabled) { box-shadow: 0 1px 0 #8a6a2a, 0 2px 4px rgba(0,0,0,0.35); background: radial-gradient(circle at 50% 30%, #fffef9, #f3e3bd 70%); }
.nc-ctrl-drop:active:not(:disabled) { box-shadow: 0 2px 0 #6e1410, 0 3px 6px rgba(0,0,0,0.4); }
.nc-ctrl:disabled { background: radial-gradient(circle at 50% 30%, #e7e4dc, #bdb8ab 75%); color: #474e50; text-shadow: none; box-shadow: 0 3px 0 #7d7a70; }
.nc-hint { background: rgba(255,250,240,0.92); border: 1px solid #d9a94a; }

/* 結果 */
.nc-result {
  background: linear-gradient(180deg, #fffaf0, #fff0d0); border: 3px solid #d9a94a;
  box-shadow: 0 0 0 2px #7d5a1c, 0 10px 24px rgba(0,0,0,0.4), 0 0 40px rgba(255,214,120,0.5);
  animation: nc-pop .35s ease-out;
}
@keyframes nc-pop { from { transform: translateY(16px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.nc-btn { box-shadow: 0 3px 0 rgba(0,0,0,0.18); }
.nc-btn-main { background: linear-gradient(180deg, #2f7a83, #1f565e); border-color: #d9a94a; }
.nc-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }

/* タイトル：オープニングの1コマを背景に */
.nc-title-screen {
  background:
    linear-gradient(180deg, rgba(10,30,34,0.15) 0%, rgba(10,30,34,0.05) 40%, rgba(10,30,34,0.75) 100%),
    #1d3b3f url("video/opening-poster.webp") center / cover;
  align-items: flex-end;
}
.nc-title-card {
  background: rgba(255,250,240,0.9); border: 3px solid #d9a94a;
  box-shadow: 0 0 0 2px #7d5a1c, 0 16px 36px rgba(0,0,0,0.45); backdrop-filter: blur(4px);
}
.nc-title-big { color: #1f555d; text-shadow: 0 3px 0 #f3cf75, 0 5px 10px rgba(0,0,0,0.2); }
.nc-title-nitori { display: none; }
.nc-dialog-card { border-color: #d9a94a; box-shadow: 0 0 0 2px #7d5a1c, 0 14px 30px rgba(0,0,0,0.45); }

@media (prefers-reduced-motion: reduce) { .nc-result { animation: none; } .nc-ctrl, .nc-btn { transition: none; } }
/* タイトル：縦長ではにとりが見える位置へ寄せ、ボタンは2列にして絵を広く見せる */
.nc-title-screen { background-position: center, 22% center; }
.nc-title-card { padding: 12px 14px 10px; }
.nc-title-btns { grid-template-columns: 1fr 1fr; }
.nc-title-btns #btnPlay { grid-column: 1 / -1; }
.nc-title-note, .nc-title-credit { font-size: 15px; line-height: 1.45; }
@media (orientation: landscape) { .nc-title-screen { background-position: center, center; } .nc-title-card { width: min(100%, 460px); margin-left: auto; } }
.nc-title-btns .nc-btn { white-space: nowrap; padding-left: 6px; padding-right: 6px; }

/* ===== ぬいぐるみの絵（アトラスから直接）===== */
.nc-plush {
  display: block; width: 100%; height: auto;
  background-image: url("img/plush_atlas.webp?v=0.4.4"); background-repeat: no-repeat;
}
.nc-plush.is-silhouette { filter: brightness(0) opacity(0.28); }

/* ===== たな：棚板の厚み・背面の影・接地影 ===== */
.nc-shelf, .nc-mini-shelf {
  display: flex; flex-direction: column; gap: 0;
  background: linear-gradient(180deg, #6e4628, #5a371e);
  border: none; border-radius: 12px; padding: 8px 12px 6px;
  box-shadow: inset 0 0 0 4px #4a2c18, inset 0 10px 22px rgba(0,0,0,0.35), 0 6px 16px rgba(0,0,0,0.3);
}
.nc-shelf-row {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 10px;
  padding: 10px 4px 16px;
  /* 上の棚板が落とす影（背面） */
  background: linear-gradient(180deg, rgba(0,0,0,0.38), rgba(0,0,0,0.1) 35%, rgba(0,0,0,0) 70%);
}
.nc-shelf-row::after { /* 棚板：上の面＋前の厚み */
  content: ""; position: absolute; left: -8px; right: -8px; bottom: 0; height: 14px; border-radius: 3px;
  background: linear-gradient(180deg, #e3b07a 0, #c99060 40%, #94603a 41%, #6f4426 100%);
  box-shadow: 0 6px 8px rgba(0,0,0,0.45);
}
.nc-slot {
  position: relative; aspect-ratio: 0.9 / 1; min-height: 0; padding: 0;
  background: none; border: none; border-radius: 8px; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
}
button.nc-slot:hover, button.nc-slot:focus-visible { background: rgba(255,240,210,0.12); }
.nc-slot .nc-plush { position: relative; z-index: 1; width: 92%; margin-bottom: -2px; }
.nc-slot.is-filled::before { /* 接地影 */
  content: ""; position: absolute; z-index: 0; left: 16%; right: 16%; bottom: -5px; height: 12px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5), rgba(0,0,0,0) 70%);
}
.nc-slot.is-swap-src { outline: 4px dashed var(--yellow); outline-offset: -2px; }
.nc-slot-empty { display: none; }
.nc-mini-shelf { padding: 4px 8px 4px; border-radius: 10px; }
.nc-mini-shelf .nc-shelf-row { gap: 2px 4px; padding: 4px 2px 10px; }
.nc-mini-shelf .nc-shelf-row::after { height: 9px; left: -6px; right: -6px; }
.nc-mini-shelf .nc-slot { cursor: default; }

/* ずかん・選ぶ */
.nc-card .nc-plush { width: 82%; margin: 2px auto 0; }
.nc-detail-img { width: min(70%, 220px); margin: 0 auto 6px; }
.nc-detail-img .nc-plush { width: 100%; }

/* ===== コレクション：横長ではたなとずかんを左右に ===== */
.nc-dialog-full .nc-dialog-card { width: min(100%, 980px); height: auto; max-height: 100%; }
.nc-shelf-card { display: grid; grid-template-columns: 1fr; gap: 6px 18px; align-content: start; }
@media (min-width: 760px), (orientation: landscape) and (max-height: 560px) {
  .nc-shelf-card {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "head head" "help help" "shelf ztitle" "shelf zukan";
  }
  .nc-shelf-card .nc-dialog-head { grid-area: head; }
  #ncShelfHelp { grid-area: help; }
  #ncShelf { grid-area: shelf; align-self: start; }
  .nc-shelf-card .nc-sub { grid-area: ztitle; margin: 0; }
  #ncZukan { grid-area: zukan; align-self: start; }
  .nc-zukan { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .nc-shelf-card { max-height: 100%; }
  #ncShelf { max-width: calc((100svh - 120px) * 1.15); }
  .nc-card { font-size: 14px; padding: 2px; }
  .nc-card b { font-size: 15px; }
  .nc-card .nc-plush { width: 62%; }
}

/* ===== 横長の画面：筐体が主役。右の列は細く、操作は「左右」の下に大きな「下ろす」 ===== */
@media (min-width: 760px), (orientation: landscape) and (max-height: 560px) {
  .nc-stage { grid-template-columns: auto 270px; grid-template-areas: "canvas talk" "canvas ctrl" "canvas rest"; grid-template-rows: auto auto 1fr; }
  .nc-controls { grid-template-columns: 1fr 1fr; grid-template-areas: "l r" "d d"; gap: 10px; }
  #btnLeft { grid-area: l; } #btnRight { grid-area: r; } #btnDrop { grid-area: d; min-height: 76px; }
  .nc-talk { align-items: flex-start; }
}
/* 背の低い横画面（スマホ横向き）：上の帯も右の列へ入れて、高さを全部筐体に使う */
@media (orientation: landscape) and (max-height: 560px) {
  .nc-app { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .nc-top { position: fixed; z-index: 6; top: max(6px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 210px; padding: 4px 6px; gap: 4px; }
  .nc-top .nc-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nc-top .nc-icon-btn { min-width: 44px; min-height: 44px; padding: 0 6px; font-size: 15px; }
  .nc-stage { grid-template-columns: auto 210px; }
  .nc-talk { margin-top: 64px; }
  .nc-face { width: 44px; height: 44px; }
  .nc-talk-text { font-size: 15px; padding: 6px 8px; }
  .nc-controls { padding: 8px; gap: 8px; }
  .nc-ctrl { min-height: 52px; font-size: 18px; }
  #btnDrop { min-height: 60px; font-size: 21px; }
}
@media (min-width: 760px), (orientation: landscape) and (max-height: 560px) {
  .nc-shelf-card { grid-template-rows: auto auto auto 1fr; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .nc-shelf-card { padding: 8px 12px; }
  .nc-shelf-card .nc-dialog-head h2 { font-size: 18px; }
  #ncShelfHelp { font-size: 14px; margin: 0; }
  #ncShelf { width: 100%; max-width: calc((100svh - 104px) * 1.05); padding: 4px 10px 4px; }
  #ncShelf .nc-shelf-row { padding: 6px 4px 12px; }
}
/* 詳しい表示：元の絵（高さ363〜410px）を DPR2 で引きのばさない大きさまで */
.nc-detail-img { width: min(70%, 160px); }

/* ===== 豪華なたな：くるみ材の飾り棚・真ちゅうの縁・ベルベットの背板・棚ごとの照明・ガラスの映りこみ ===== */
.nc-shelf, .nc-mini-shelf {
  position: relative; isolation: isolate;
  margin: 26px 14px 16px;
  padding: 14px 14px 8px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0.03) 2px 4px),
    radial-gradient(ellipse at 50% 30%, #2c6168 0%, #1a3f45 60%, #102a2f 100%);
  box-shadow:
    inset 0 0 0 2px #e9c46a,                 /* 内側の真ちゅうの線 */
    inset 0 14px 24px rgba(0,0,0,0.45),      /* 背板の奥行き */
    0 0 0 9px #4a2816,                       /* くるみ材のわく */
    0 0 0 10px #2b170c,
    0 0 0 13px #c99a45,                      /* 外の真ちゅうの縁 */
    0 14px 26px rgba(0,0,0,0.45);
}
.nc-shelf::before, .nc-mini-shelf::before { /* 上の飾り（冠木）とメダル */
  content: ""; position: absolute; z-index: 2; left: -16px; right: -16px; top: -30px; height: 22px; border-radius: 8px 8px 3px 3px;
  background:
    radial-gradient(circle at 50% 55%, #fff3c6 0, #e2b04f 5px, #a8792a 8px, rgba(0,0,0,0) 9px),
    linear-gradient(180deg, #7a4a2a 0%, #5a331b 45%, #c99a45 46%, #e9c46a 58%, #8a6224 70%, #3d2112 100%);
  box-shadow: 0 4px 6px rgba(0,0,0,0.35);
}
.nc-shelf::after, .nc-mini-shelf::after { /* ガラス戸のうすい映りこみ */
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.09) 36%, rgba(255,255,255,0) 44%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.05) 74%, rgba(255,255,255,0) 78%);
}
.nc-shelf-row {
  /* 上の棚板の下に付けた照明が、ぬいぐるみを照らす */
  background:
    radial-gradient(ellipse 60% 85% at 50% 0%, rgba(255,222,150,0.42), rgba(255,222,150,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0) 30%);
}
.nc-shelf-row::before { /* 照明の帯（棚板の裏の光） */
  content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,236,190,0), rgba(255,240,205,0.95), rgba(255,236,190,0));
  box-shadow: 0 0 8px rgba(255,220,150,0.8);
}
.nc-shelf-row::after { /* 棚板：くるみ材の上面＋真ちゅうの前ぶち */
  height: 15px; left: -14px; right: -14px; border-radius: 2px;
  background: linear-gradient(180deg, #a26c43 0, #7d4f2e 42%, #e9c46a 43%, #c99a45 62%, #7d5a1c 100%);
  box-shadow: 0 7px 9px rgba(0,0,0,0.5);
}
.nc-slot.is-filled::before { background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%); }
button.nc-slot .nc-plush { transition: transform .15s ease-out; }
button.nc-slot:hover .nc-plush, button.nc-slot:focus-visible .nc-plush { transform: translateY(-3px); }
button.nc-slot:hover, button.nc-slot:focus-visible { background: rgba(255,230,170,0.1); }
.nc-mini-shelf { margin: 22px 10px 12px; padding: 8px 8px 4px; }
.nc-mini-shelf::before { top: -24px; height: 17px; left: -12px; right: -12px; }
.nc-mini-shelf .nc-shelf-row::after { height: 10px; left: -10px; right: -10px; }
@media (orientation: landscape) and (max-height: 560px) {
  #ncShelf { margin: 24px 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { button.nc-slot .nc-plush { transition: none; } }

/* 8体を同じ倍率で：幅 = 入れ物の幅 × (元の絵の幅 ÷ いちばん広い幅) */
.nc-plush { width: calc(100% * var(--pw, 1)); transform: translateX(calc(var(--fo, 0) * 100%)); }
.nc-slot .nc-plush { width: calc(96% * var(--pw, 1)); }
.nc-card .nc-plush { width: calc(86% * var(--pw, 1)); }
.nc-detail-img .nc-plush { width: calc(100% * var(--pw, 1)); margin: 0 auto; }
@media (orientation: landscape) and (max-height: 560px) { .nc-card .nc-plush { width: calc(66% * var(--pw, 1)); } }
button.nc-slot:hover .nc-plush, button.nc-slot:focus-visible .nc-plush { transform: translateX(calc(var(--fo, 0) * 100%)) translateY(-3px); }

/* 最初の説明：台の種類を選ぶ */
.nc-mode-pick { display: grid; gap: 8px; margin: 6px 0 12px; }
.nc-mode-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  min-height: 52px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  background: #fffaf0; color: var(--ink); border: 2px solid #c9b48a; font-size: 16px;
}
.nc-mode-btn b { font-size: 17px; }
.nc-mode-btn span { font-size: 15px; }
.nc-mode-btn[aria-pressed="true"] { border-color: #1f565e; background: #e3f2ef; box-shadow: inset 0 0 0 2px #1f565e; }
.nc-mode-btn[aria-pressed="true"] b::after { content: "（いまの台）"; font-weight: 700; font-size: 15px; color: #1f565e; }
.nc-intro-start { width: 100%; }
@media (orientation: landscape) and (max-height: 560px) { .nc-mode-pick { grid-template-columns: repeat(3, 1fr); } }
/* 背の低い横画面：遊び方（左）と台の選択（右）を2列にして、「はじめる」まで1画面に */
@media (orientation: landscape) and (max-height: 560px) {
  #dlgIntro .nc-dialog-card {
    width: min(100%, 780px); display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense;
    column-gap: 18px; align-items: start; padding: 10px 14px;
  }
  #dlgIntro .nc-dialog-card > * { grid-column: 1; margin-top: 0; }
  #dlgIntro .nc-dialog-card > .nc-sub, #dlgIntro .nc-dialog-card > .nc-sub ~ * { grid-column: 2; }
  #dlgIntro .nc-intro { font-size: 16px; margin: 0 0 4px; }
  #dlgIntro .nc-mode-pick { grid-template-columns: 1fr; gap: 6px; margin: 4px 0 8px; }
  #dlgIntro .nc-mode-btn { min-height: 48px; padding: 4px 10px; }
}

/* ---------- シークレット（2026-10-01 追加） ---------- */
/* ずかん：通常の8枚と分けて、うすい紫のふちで「ふしぎなお客さん」らしく。未獲得は影だけ */
.nc-card-secret { border-color: #b7a3d6; background: #fbf8ff; }
.nc-card-secret.is-unknown b { letter-spacing: 0.1em; }
.nc-secret-zukan { grid-template-columns: repeat(4, 1fr); }
.nc-secret-status { font-weight: 700; margin: 0 0 6px; }
/* 横画面の小さなたなの下の一言 */
.nc-secret-mini { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
/* 満員でお客さんが待っているときだけ出る「むかえる」：台のガラスの右上（出口の上。ねらう範囲 x≦304 の外） */
.nc-welcome-btn {
  position: absolute; z-index: 3; right: 3.5%; top: 17%; line-height: 1.2;
  min-width: 44px; min-height: 44px; padding: 0 8px; font-size: 15px;
  background: #efe6ff; border-color: #8e74bd; color: #3d2a63;
}
/* ずかんの列（通常8＋シークレット3）をひとまとめにして、横画面では右の列へ */
.nc-zukan-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nc-zukan-col .nc-sub { margin: 6px 0 0; }
@media (min-width: 760px), (orientation: landscape) and (max-height: 560px) {
  .nc-shelf-card { grid-template-areas: "head head" "help help" "shelf zcol"; grid-template-rows: auto auto 1fr; }
  #ncZukanCol { grid-area: zcol; align-self: start; }
  #ncZukanCol #ncZukan { align-self: stretch; } /* 縦並びの中の start は「横に縮む」意味になるので戻す */
  .nc-zukan-col .nc-sub { grid-area: auto; }
  .nc-zukan-col .nc-sub:first-child { margin-top: 0; }
}

/* ---------- 棚あそび（2026-10-01 追加・03_SHELF_SPEC.md） ---------- */
/* コレクションのたな：かべ紙・台座・かざりごと Canvas で描く（写真と同じ絵）。見るだけのときは編集のわく・点線を出さない */
.nc-shelf-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nc-scene-canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; background: #5b4a3c;
  box-shadow: 0 0 0 3px #c99a45, 0 0 0 5px #4a2816, 0 10px 22px rgba(0,0,0,0.35); }
.nc-shelf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nc-shelf-actions .nc-btn { flex: 1 1 auto; }
@media (min-width: 760px), (orientation: landscape) and (max-height: 560px) {
  #ncShelfView { grid-area: shelf; align-self: start; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #ncShelfView { max-width: calc((100svh - 150px) * 4 / 3); }
  .nc-shelf-actions .nc-btn { min-height: 44px; padding: 4px 10px; }
}

/* 編集 */
.nc-edit .nc-edit-card { width: min(100%, 1080px); max-height: 100%; overflow: auto; overscroll-behavior: contain; }
.nc-edit-head-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nc-edit-msg { margin: 4px 0; padding: 6px 10px; border-radius: 10px; background: #fff3c4; border: 2px solid #b58a00; font-size: 16px; }
.nc-edit-msg[hidden] { display: none; }
.nc-edit-body { display: flex; flex-direction: column; gap: 10px; }
.nc-edit-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px #c99a45, 0 8px 18px rgba(0,0,0,0.3); }
/* 縦長：たなは上に止めておき（下の一覧をスクロールしても見える）、高さは画面の半分ほどまで */
@media (max-width: 899px) and (min-height: 561px) {
  .nc-edit-body { position: relative; }
  .nc-edit-stage { position: sticky; top: -14px; z-index: 2; max-width: calc(46svh * 4 / 3); margin: 0 auto; }
}
.nc-tray { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
.nc-tray .nc-card .nc-plush { width: calc(64% * var(--pw, 1)); }
.nc-tray-lock { width: 56%; aspect-ratio: 1; margin: 6px auto 2px; opacity: 0.8; }
.nc-edit-stage canvas { display: block; width: 100%; height: 100%; }
.nc-edit-overlay { position: absolute; inset: 0; }
.nc-edit-stage, .nc-tray, .nc-deco-tray { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nc-edit .nc-dialog-head h2 { white-space: nowrap; }
@media (max-width: 400px) { .nc-edit .nc-dialog-head .nc-btn { padding: 4px 12px; } .nc-edit .nc-dialog-head h2 { font-size: 18px; } }
.nc-eslot, .nc-edeco { position: absolute; margin: 0; padding: 0; background: transparent; border: none; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nc-eslot { touch-action: manipulation; box-shadow: inset 0 0 0 2px rgba(255,244,214,0.55); }
.nc-eslot:not(.is-filled) { box-shadow: none; outline: 2px dashed rgba(255,244,214,0.8); outline-offset: -6px; }
.nc-eslot.is-filled { touch-action: none; }
.nc-eslot:hover { background-color: rgba(255,236,190,0.12); }
.nc-eslot.is-selected { box-shadow: inset 0 0 0 4px #f3cf75, 0 0 14px rgba(255,214,120,0.9); background-color: rgba(255,236,190,0.14); }
.nc-eslot.is-drop { background-color: rgba(255,230,150,0.32); box-shadow: inset 0 0 0 4px #ffffff; }
.nc-edeco { transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; touch-action: none; }
.nc-edit-overlay[data-tab="deco"] .nc-edeco { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }
.nc-edit-overlay[data-tab="deco"] .nc-edeco.is-selected { box-shadow: inset 0 0 0 4px #f3cf75, 0 0 14px rgba(255,214,120,0.9); }
.nc-edit-overlay:not([data-tab="plush"]) .nc-eslot { pointer-events: none; box-shadow: none; outline: none; background: none; }
.nc-edit-overlay:not([data-tab="deco"]) .nc-edeco { pointer-events: none; box-shadow: none; }
.nc-edit-overlay .nc-edeco:focus-visible, .nc-edit-overlay .nc-eslot:focus-visible { outline: 4px solid #1b63d6; outline-offset: -4px; }
.nc-drag-ghost { position: fixed; left: 0; top: 0; width: 64px; z-index: 60; pointer-events: none; opacity: 0.9; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4)); }
.nc-drag-ghost .nc-plush { width: 64px; transform: none; }

.nc-edit-panel { min-width: 0; }
.nc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.nc-tab { min-height: 48px; padding: 4px 6px; border-radius: 12px; border: 2px solid #c9b48a; background: #fffaf0; color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.nc-tab[aria-selected="true"] { background: linear-gradient(180deg, #2f7a83, #1f565e); color: #fff; border-color: #d9a94a; }
.nc-tabpanel[hidden] { display: none; }
.nc-edit-sel { min-height: 1.6em; font-weight: 700; margin: 0 0 6px; }
.nc-slot-tools { margin-top: 0; margin-bottom: 8px; }
.nc-slot-tools .nc-btn { flex: 1 1 140px; }
.nc-btn[aria-pressed="true"] { background: #e3f2ef; border-color: #1f565e; box-shadow: inset 0 0 0 2px #1f565e; }
.nc-tray .nc-card { min-height: 48px; }
.nc-tray .nc-card[aria-pressed="true"] { border-color: #1f565e; box-shadow: inset 0 0 0 3px #f3cf75; background: #fff8df; }
.nc-tray .nc-card:disabled { cursor: not-allowed; background: #ebe7dc; color: #474e50; }
.nc-deco-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.nc-arrows { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 4px; }
.nc-arrow { min-height: 48px; min-width: 48px; padding: 0; font-size: 20px; }
#btnDecoUp { grid-column: 2; grid-row: 1; }
#btnDecoLeft { grid-column: 1; grid-row: 2; }
#btnDecoDown { grid-column: 2; grid-row: 2; }
#btnDecoRight { grid-column: 3; grid-row: 2; }
.nc-deco-size { margin: 0; }
.nc-deco-size .nc-btn { min-width: 52px; }
.nc-deco-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.nc-deco-card img { width: 100%; height: 52px; object-fit: contain; }
.nc-deco-card b { font-size: 14px; line-height: 1.3; }
.nc-swatch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.nc-swatch { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 48px; padding: 6px; border-radius: 12px; border: 2px solid #c9b48a; background: #fffaf0; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.nc-swatch[aria-pressed="true"] { border-color: #1f565e; box-shadow: inset 0 0 0 3px #f3cf75; background: #fff8df; }
.nc-swatch:disabled { cursor: not-allowed; background: #ebe7dc; color: #474e50; }
.nc-swatch img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #ddd5c4; }
.nc-swatch img.is-lock { object-fit: contain; padding: 14%; }
.nc-swatch:disabled img:not(.is-lock) { filter: grayscale(0.85) brightness(0.9); }
.nc-swatch i { display: block; height: 28px; border-radius: 6px; box-shadow: inset 0 -6px 0 #d9ac4f; }
.nc-color-btn.is-standard i { background-color: #a26c43; }
.nc-color-btn.is-ivory i { background-color: #e9dcc0; }
.nc-color-btn.is-walnut i { background-color: #4f301d; }
.nc-color-btn.is-blue i { background-color: #7f98a9; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 560px) {
  .nc-edit-body { flex-direction: row; align-items: flex-start; }
  .nc-edit-stage { flex: 1.25 1 0; position: sticky; top: 0; }
  .nc-edit-panel { flex: 1 1 0; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .nc-edit .nc-edit-card { padding: 8px 12px; }
  .nc-edit-stage { flex: none; width: min(56vw, calc((100svh - 96px) * 4 / 3)); }
  .nc-edit .nc-dialog-head h2 { font-size: 18px; }
  .nc-edit .nc-dialog-head .nc-btn { min-height: 44px; padding: 4px 12px; }
  .nc-tab { min-height: 44px; font-size: 15px; }
}

/* 写真 */
.nc-photo-card { width: min(100%, 640px); }
.nc-photo-msg { font-weight: 700; min-height: 1.6em; }
.nc-photo-result { display: block; width: 100%; height: auto; margin-top: 10px; border-radius: 8px; border: 2px solid #c9b48a; -webkit-touch-callout: default; }
.nc-photo-result[hidden], .nc-link-btn[hidden] { display: none; }
.nc-link-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* たなアイテムの一覧 */
.nc-items-card { width: min(100%, 760px); }
.nc-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nc-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 12px; background: #fff; border: 2px solid #d8ccb0; font-size: 14px; line-height: 1.35; }
.nc-item img { width: 100%; height: 64px; object-fit: contain; }
.nc-item img.is-wall { object-fit: cover; border-radius: 6px; }
.nc-item img.is-locked { filter: grayscale(1) opacity(0.45); }
.nc-item b { font-size: 15px; }
.nc-item.is-open { border-color: #71b7b0; }
.nc-item.is-new { border-color: #d9a94a; box-shadow: inset 0 0 0 2px #f3cf75; background: #fffaf0; }

/* ---------- にとりの演出（2026-10-01 追加・04_REACTIONS_SPEC.md） ---------- */
/* 常設の顔と吹き出しはなくした。横長の右の列は 案内 → 操作 だけ */
@media (min-width: 760px), (orientation: landscape) and (max-height: 560px) {
  .nc-stage { grid-template-areas: "canvas help" "canvas ctrl" "canvas rest"; grid-template-rows: auto auto 1fr; }
  .nc-help { grid-area: help; }
}
@media (orientation: landscape) and (max-height: 560px) {
  /* 上の帯が右の列の上に重なる（position: fixed）ので、その分だけあける */
  .nc-stage { grid-template-areas: "canvas ." "canvas help" "canvas ctrl" "canvas rest"; grid-template-rows: 52px auto auto 1fr; }
}
/* 初めての人への短い案内（1回だけ） */
.nc-help { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 560px; margin: 0;
  background: #fffaf0; border: 2px solid #d9a94a; border-radius: 14px; padding: 6px 6px 6px 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.nc-help[hidden] { display: none; }
.nc-help p { margin: 0; flex: 1 1 auto; font-size: 16px; line-height: 1.45; }
.nc-help-close { flex: none; min-width: 44px; min-height: 44px; padding: 0; font-size: 20px; }
@media (orientation: landscape) and (max-height: 560px) { .nc-help p { font-size: 14px; } }

/* 結果カード：取れた瞬間に出す（ボタンはプレイが終わってから） */
.nc-result.is-pending .nc-result-btns, .nc-result.is-pending .nc-result-note { display: none; }
.nc-craft { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #6b4a12; }
.nc-craft[hidden], .nc-result-note[hidden] { display: none; }
.nc-result-note { margin: 2px 0 8px; font-size: 15px; font-weight: 700; color: #1f565e; }
/* 演出：ぬいぐるみを真ん中に大きく、にとりは右に添える。飾りは入力をうばわない */
/* 段の高さは演出の場所と同じに固定（auto だと背の高いにとりに合わせて段が伸び、下の文字に重なった）。にとりのはみ出しは上へ */
.nc-cheer { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 100%; align-items: end; height: calc(var(--cw, 360px) * 0.34); margin: 0 0 4px; pointer-events: none; }
.nc-cheer[hidden] { display: none; }
/* 大きさは盤面の幅 --cw から直接決める（% と aspect-ratio を重ねると、grid の中で大きさが決まらず絵が巨大になった） */
.nc-cheer-prize { grid-column: 2; position: relative; width: calc(var(--cw, 360px) * 0.3); height: calc(var(--cw, 360px) * 0.33); display: flex; align-items: flex-end; justify-content: center; }
.nc-cheer-prize .nc-plush { width: calc(100% * var(--pw, 1)); filter: drop-shadow(0 6px 6px rgba(0,0,0,0.25)); }
.nc-cheer-count { position: absolute; top: 2px; right: -6px; background: #b8323a; color: #fff; border-radius: 999px; padding: 0 8px; font-size: 15px; font-weight: 800; line-height: 1.5; }
.nc-cheer-nitori { grid-column: 3; justify-self: start; align-self: unsafe end; display: block; height: calc(var(--cw, 360px) * 0.4); width: auto; max-width: none;
  margin: 0 0 0 2%; transform-origin: 50% 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25)); }
.nc-cheer-nitori[hidden] { display: none; }
.nc-cheer-close { position: absolute; z-index: 2; top: 4px; left: 4px; min-width: 46px; min-height: 46px; padding: 0; border-radius: 12px;
  border: 2px solid #a8792a; background: #fffaf0; color: var(--ink); font-size: 20px; font-weight: 800; cursor: pointer; line-height: 1; }
.nc-cheer-close[hidden] { display: none; }
/* 登場：下からふわっと（約0.19秒）→ 足もとを基準に小さく1回はねる（約0.3秒）。ぬいぐるみはふくらんで出る */
.nc-cheer.is-in .nc-cheer-nitori { animation: nc-nit-in 190ms ease-out both, nc-nit-hop 300ms ease-out 190ms both; }
.nc-cheer.is-in .nc-cheer-prize { animation: nc-prize-in 220ms ease-out both; }
.nc-cheer.is-more .nc-cheer-prize { animation: nc-prize-more 240ms ease-out; }
.nc-cheer.is-pop .nc-cheer-nitori { animation: nc-nit-pop 200ms ease-out both; }
@keyframes nc-nit-in { from { transform: translateY(35%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nc-nit-hop { 0% { transform: none; } 45% { transform: translateY(-8%); } 100% { transform: none; } }
@keyframes nc-nit-pop { from { transform: scale(0.9); opacity: 0.5; } to { transform: none; opacity: 1; } }
@keyframes nc-prize-in { from { transform: scale(0.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nc-prize-more { 0% { transform: scale(0.92); } 60% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes nc-fade { from { opacity: 0; } to { opacity: 1; } }
/* 動きをひかえめ：はねる・動く・ふくらむをやめ、短いフェードだけ */
@media (prefers-reduced-motion: reduce) {
  .nc-cheer.is-in .nc-cheer-nitori, .nc-cheer.is-in .nc-cheer-prize, .nc-cheer.is-more .nc-cheer-prize, .nc-cheer.is-pop .nc-cheer-nitori { animation: nc-fade 150ms linear both; }
  .nc-result { animation: none; }
}
.nc-reduced .nc-cheer.is-in .nc-cheer-nitori, .nc-reduced .nc-cheer.is-in .nc-cheer-prize, .nc-reduced .nc-cheer.is-more .nc-cheer-prize, .nc-reduced .nc-cheer.is-pop .nc-cheer-nitori { animation: nc-fade 150ms linear both; }
.nc-reduced .nc-result { animation: none; }
/* 横に短い盤面（スマホ横向きなど）：演出を少し低く */
@media (orientation: landscape) and (max-height: 560px) { .nc-craft { font-size: 14px; } }

/* たなアイテムの新着：飛び出すお知らせは出さず、たなボタンに小さな印 */
.nc-icon-btn.has-new { position: relative; }
.nc-icon-btn.has-new::after { content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #d6453a; box-shadow: 0 0 0 2px #fff; }
/* 背の低い横画面：右上の帯は中身の幅に（210px固定だと「II」が画面の右はしで切れていた） */
@media (orientation: landscape) and (max-height: 560px) { .nc-top { width: auto; max-width: calc(100vw - 20px); } }

/* ---------- タイトルの背景（2026-10-01 本人が作った絵）---------- */
/* 縦長：にとりとクレーンは上半分、下の45%はあっさりした床と壁（そこに文字とボタンの板）。横長：左6割に絵、右4割に板 */
.nc-title-screen { background: #1d3b3f url("img/title_portrait.webp?v=0.4.4") center top / cover no-repeat; }
@media (orientation: landscape) { .nc-title-screen { background: #1d3b3f url("img/title_landscape.webp?v=0.4.4") left center / cover no-repeat; } }
/* 背の低い横画面のタイトル：板が縦に入りきらず上が切れていた（下ぞろえだとスクロールでも戻れない）→ 板を小さく、safe でそろえる */
@media (orientation: landscape) and (max-height: 560px) {
  .nc-title-screen { align-items: safe center; padding: 8px 12px; }
  .nc-title-card { width: min(100%, 400px); padding: 8px 12px; }
  .nc-title-big { font-size: 26px; margin: 0 0 4px; }
  .nc-kicker { font-size: 14px; }
  .nc-btn-big { min-height: 48px; font-size: 20px; }
  .nc-title-btns { gap: 6px; margin-top: 4px; }
  .nc-title-btns .nc-btn { min-height: 44px; }
  .nc-title-note, .nc-title-credit { font-size: 13px; margin-top: 4px; }
}