/* お弁当パズル — 色はすべてCSS変数 */
:root {
  --accent: #c2641f; --accent-ink: #ffffff; --accent-soft: #fbe8d6;
  --case: #3a2414; --slot: #f3e6cf; --slot-line: #dcc7a3; --wall: #3a2414; --lid: #b9472f;
  --f-gohan: #fbfaf4; --f-tamago: #f6cf45; --f-karaage: #b8742f; --f-hamburg: #7a4426; --f-kinpira: #a8743c; --f-horenso: #4f9a3c; --f-sake: #f19272;
  --f-kabocha: #f0a830; --f-wiener: #d9473c; --f-potesara: #f4e7b5; --f-ebi: #dca04a; --f-chikuwa: #e8c58c; --f-broccoli: #3f8a35; --f-tomato: #e5352b; --f-ume: #b8263a;
  --fd-line: rgba(60, 30, 10, .45); --fd-white: rgba(255, 255, 255, .8); --fd-dark: #2a1a10; --fd-green: #2f6e27; --fd-orange: #e67a2a; --fd-stroke: rgba(60, 30, 10, .25);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #f2a35e; --accent-ink: #1d1206; --accent-soft: #3a2614;
    --case: #120b06; --slot: #2c241a; --slot-line: #4a3c2a; --wall: #120b06; --lid: #8f3422;
  }
}
:root[data-theme="dark"] {
  --accent: #f2a35e; --accent-ink: #1d1206; --accent-soft: #3a2614;
  --case: #120b06; --slot: #2c241a; --slot-line: #4a3c2a; --wall: #120b06; --lid: #8f3422;
}

/* おかず */
.fd { stroke: var(--fd-stroke); stroke-width: 1; }
.f-gohan { fill: var(--f-gohan); } .f-tamago { fill: var(--f-tamago); } .f-karaage { fill: var(--f-karaage); } .f-hamburg { fill: var(--f-hamburg); }
.f-kinpira { fill: var(--f-kinpira); } .f-horenso { fill: var(--f-horenso); } .f-sake { fill: var(--f-sake); } .f-kabocha { fill: var(--f-kabocha); }
.f-wiener { fill: var(--f-wiener); } .f-potesara { fill: var(--f-potesara); } .f-ebi { fill: var(--f-ebi); } .f-chikuwa { fill: var(--f-chikuwa); }
.f-broccoli { fill: var(--f-broccoli); } .f-tomato { fill: var(--f-tomato); } .f-ume { fill: var(--f-ume); }
.fd-d { fill: var(--fd-dark); }
.fd-l { fill: none; stroke: var(--fd-line); stroke-width: 2; stroke-linecap: round; }
.fd-w { fill: none; stroke: var(--fd-white); stroke-width: 2; stroke-linecap: round; }
.fd-b { fill: var(--fd-line); opacity: .45; }
.fd-sauce { fill: none; stroke: var(--fd-dark); stroke-width: 5; stroke-linecap: round; opacity: .7; }
.fd-carrot { fill: none; stroke: var(--fd-orange); stroke-width: 2.4; stroke-linecap: round; }
.fd-carrotc { fill: var(--fd-orange); } .fd-greenc { fill: var(--fd-green); }
.fd-rind { fill: var(--fd-green); }
.fd-tail { fill: var(--f-wiener); }
.fd-crumb { fill: none; stroke: var(--fd-line); stroke-width: 2; stroke-dasharray: 2 3; }
.fd-ring { fill: none; stroke: var(--f-karaage); stroke-width: 3; }
.fd-bro { fill: var(--fd-green); }
.fd-tom { fill: var(--f-tomato); }
.fd-stem { fill: none; stroke: var(--fd-green); stroke-width: 2.4; stroke-linecap: round; }
.fd-ume { fill: var(--f-ume); }

/* 弁当箱 */
.bp-case { fill: var(--case); }
.bp-slot { fill: var(--slot); stroke: var(--slot-line); stroke-width: 1; }
.bp-wall { fill: var(--wall); }
.bp-hit { fill: transparent; cursor: pointer; }
.bp-hit:hover { fill: rgba(194, 100, 31, .14); }
.bp-box-svg { width: 100%; height: auto; max-width: 420px; display: block; margin: 0 auto; touch-action: manipulation; }
.bp-hero .bp-box-svg { max-width: 260px; animation: bp-wiggle 3s ease-in-out infinite; }
@keyframes bp-wiggle { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.bp-ex .bp-box-svg { max-width: 300px; }

/* プレイ */
.bp-top { display: flex; align-items: baseline; gap: 4px; }
.bp-stats { display: flex; justify-content: space-around; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; font-size: 14px; }
.bp-stats b { font-size: 18px; }
.bp-stars { color: var(--warn); letter-spacing: 1px; }
.bp-selbar { display: flex; align-items: center; gap: 8px; }
.bp-rot { min-height: 44px; padding: 6px 14px; flex: none; }
.bp-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bp-food { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; min-height: 96px; padding: 8px 4px 6px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 700; line-height: 1.25; touch-action: manipulation; }
.bp-food.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.bp-mini { max-width: 86px; height: auto; flex: none; margin: auto 0; }

/* 結果 */
.bp-lid-wrap { position: relative; max-width: 320px; margin: 0 auto 6px; }
.bp-lid { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--lid); border-radius: 18px; animation: bp-open 1s .2s ease-in forwards; z-index: 2; }
@keyframes bp-open { 0% { transform: none; opacity: 1; } 60% { transform: translateY(-30%) rotate(-6deg); opacity: 1; } 100% { transform: translateY(-60%) rotate(-10deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bp-lid { display: none; } }
.bp-line { margin: 4px 0; }
.bp-title-name { font-size: 20px; font-weight: 900; color: var(--accent); margin: 4px 0; }
.bp-titles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bp-zukan { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 6px; }
.bp-z { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: var(--surface-2); font-size: 12px; text-align: center; line-height: 1.3; min-height: 70px; }
.bp-z.on { background: var(--accent-soft); }
.bp-zi { max-width: 60px; height: auto; }
.mn-daily-num { white-space: nowrap; }