/* T-294 / v0.8.0：白木の箱、黄・桜・若草の塗装板。ゲーム画面には適用しない。 */
/* 固定ヘッダーはロゴと面数の行まで。メーター・操作列の高さはトップへ足さない。 */
.home-header-space{visibility:hidden;pointer-events:none}
.home-header-space .meter-block{display:none}
/* 本編の面数→メーター間は8px。短い画面の外側6pxとの差だけ揃える。 */
@media(max-height:800px){body[data-screen="mode"] .wrap{gap:6px}.home-header-space{margin-bottom:2px}}
.toy-box{--ink:#314d4d;--hero-ink:#324f35;display:flex;flex-direction:column;position:relative;margin:0;gap:12px;padding:11px 13px 10px;border:4px solid #c7ae86;border-radius:25px;background:#f6f1e5;color:var(--ink);box-shadow:inset 0 0 0 2px #fffaf0,inset 0 3px 5px #80683a20,0 5px 0 #947954,0 8px 0 #5a483633}
.toy-box *{font-family:var(--sans);box-sizing:border-box;letter-spacing:normal}
.toy-box h2{display:block;text-align:center;font-size:26px;font-weight:700;line-height:1.4;margin:0;padding:0;color:#5f513d}
.toy-box h3,.toy-box p{margin:0}
.toy-box button,.toy-box summary{touch-action:manipulation}
.toy-box button{cursor:pointer;font:inherit;transition:transform .1s}
.toy-box button:active{transform:translateY(1px)}
.toy-box :is(button,summary):focus-visible{outline:3px solid #324f35;outline-offset:3px}
.toy-box .menu-scene{position:relative;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.toy-box .menu-scene canvas{display:block;width:42px;height:34px;flex:0 0 42px;pointer-events:none}
.toy-box .learning{display:flex;flex-direction:column;gap:12px}
.toy-box .entry{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:7px 13px;text-align:left;border:2px solid #c6ac68;border-top-color:#fff4cb;border-radius:17px;background:linear-gradient(160deg,#fff1c0,#f4dfa0);color:#5c4d2b;box-shadow:inset 0 2px 0 #fff8d8,inset 0 -3px 0 #d3b87766,inset 2px 0 0 #fff9e455,0 5px 0 #b2985c,0 7px 2px #64523022}
.toy-box .entry.practice{border-color:#c29ca6;border-top-color:#fff0f3;background:linear-gradient(160deg,#f8e8eb,#e9ccd4);color:#654754;box-shadow:inset 0 2px 0 #fff2f5,inset 0 -3px 0 #c89eaa66,inset 2px 0 0 #fff4f655,0 5px 0 #aa8592,0 7px 2px #64523022}
.toy-box .toy-medallion{display:flex;align-items:center;justify-content:center;flex:0 0 39px;width:39px;height:39px;border:1px solid #d4bd91;border-radius:50%;background:linear-gradient(#fffdf0,#ebddbd);box-shadow:inset 0 1px 0 #fff,0 2px 0 #bb9f73}
.toy-box .toy-medallion canvas{width:39px;height:31px;pointer-events:none}
.toy-box .toy-label{display:block;min-width:0}
.toy-box .entry strong{display:block;font-size:17px;font-weight:700;line-height:1.5;white-space:nowrap}
.toy-box .entry small{display:block;font-size:12px;font-weight:400;line-height:1.55;margin:1px 0 0;text-align:left}
.toy-box .challenge{position:relative;padding:15px;border:4px solid #9eaf8d;border-top-color:#e9f4dd;border-radius:22px;background:linear-gradient(#e9f1df,#dae7cf);color:#324f35;box-shadow:inset 0 2px 0 #f8ffed,inset 0 0 0 1px #b4c2a0,0 5px 0 #7e906f,0 7px 2px #45513922}
.toy-box .challenge h3{padding-right:55px;font-size:23px;font-weight:700;line-height:1.4;margin:0 0 5px;color:#36513b}
.toy-box .hero-ball{position:absolute;right:5px;top:-15px;width:62px;height:62px;pointer-events:none}
.toy-box .hero-copy{font-size:13px;font-weight:400;line-height:1.65}
.toy-box .difficulty{display:flex;gap:4px;padding:4px;margin:10px 0 0;border:1px solid #a1b18d;border-radius:16px;background:#c9d9bf;box-shadow:inset 0 3px 4px #5b714b26,inset 0 -1px 0 #f5f9ec}
.toy-box .difficulty button{flex:1;min-width:0;min-height:44px;padding:8px;border:1px solid transparent;border-radius:11px;background:transparent;box-shadow:none;color:#3b543d;font-size:15px;font-weight:700}
.toy-box .difficulty button[aria-pressed="true"]{border:1px solid #d7c6a0;border-top-color:#fffdf0;background:linear-gradient(#fffbed,#efe2bf);box-shadow:inset 0 1px 0 #fff,0 3px 0 #b5a17c}
.toy-box .difficulty-note{margin:6px 0 9px;text-align:center;font-size:12px;font-weight:400;line-height:1.5;min-height:18px;color:#324f35}
.toy-box .start{display:block;width:100%;min-height:50px;padding:10px;border:2px solid #47684b;border-top-color:#a3be91;border-radius:16px;background:linear-gradient(#557b5b,#476c50);box-shadow:inset 0 2px 0 #8eae7c,inset 0 -2px 0 #36543d,0 5px 0 #7e6d49,0 7px 2px #32443022;color:#fffdf2;font-size:16px;font-weight:700}
.toy-box .entry:active,.toy-box .start:active{transform:translateY(3px);box-shadow:inset 0 2px 3px #51422333,0 2px 0 #a38d66}
.toy-box .records{margin:2px 0 0;padding:0;border:0;border-top:1px solid #c4b493;border-radius:0;background:none;box-shadow:none;color:#65563e}
.toy-box .records summary{display:flex;align-items:center;gap:7px;list-style:none;font-size:13px;font-weight:700;min-height:44px;padding:0;cursor:pointer}
.toy-box .records summary::before{content:'▸';font-size:12px}
.toy-box .records[open] summary::before{content:'▾'}
.toy-box .records summary::-webkit-details-marker{display:none}
.toy-box .records .record-switch{margin-top:5px}
.toy-box .tools{display:flex;gap:10px}
.toy-box .tools button{flex:1;min-height:44px;padding:8px 6px;border:2px solid #c3ae86;border-top-color:#fff9e6;border-radius:14px;background:linear-gradient(#fff8e9,#efdfbf);box-shadow:inset 0 1px 0 #fff,0 3px 0 #a38d66;color:#5a4e3b;font-size:12px;font-weight:400}
.toy-box .bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-6px;color:#65563e;font-size:10px}
.toy-box .bottom button{min-height:44px;padding:5px 7px;border:none;background:transparent;box-shadow:none;color:inherit;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.toy-box .bottom #pwa-check-result{flex:1;min-width:0;text-align:right;font-size:10px;line-height:1.4}
.toy-box #mode-note,.toy-box #pwa-check-result{font-size:11px;line-height:1.7;color:#665942}
.toy-box #mode-note:empty,.toy-box #pwa-check-result:empty{display:none}
.toy-box{--home-space:clamp(0px,calc((100svh - var(--camera-top) - env(safe-area-inset-bottom,0px) - 813px)/12),10px);width:var(--playfield-size);align-self:center;flex:1 0 auto;justify-content:space-between}
/* 高さを使える端末では、引き出しの取っ手と小物にも余裕を配る。 */
.toy-box{padding-block:calc(11px + var(--home-space)*.5) calc(10px + var(--home-space)*.3);gap:calc(12px + var(--home-space)*.4)}
.toy-box .menu-scene{height:calc(42px + var(--home-space)*1.2)}
.toy-box .menu-scene canvas{width:calc(42px + var(--home-space)*.7);height:calc(34px + var(--home-space)*.5);flex-basis:calc(42px + var(--home-space)*.7)}
.toy-box .learning{gap:calc(12px + var(--home-space)*.4)}
.toy-box .entry{min-height:calc(66px + var(--home-space));padding-block:calc(7px + var(--home-space)*.3)}
.toy-box .toy-medallion{width:calc(39px + var(--home-space)*.6);height:calc(39px + var(--home-space)*.6);flex-basis:calc(39px + var(--home-space)*.6)}
.toy-box .toy-medallion canvas{width:calc(39px + var(--home-space)*.6);height:calc(31px + var(--home-space)*.5)}
.toy-box .challenge{padding-block:calc(15px + var(--home-space)*.4)}
.toy-box .difficulty button{min-height:calc(44px + var(--home-space)*.4)}
.toy-box .start{min-height:calc(50px + var(--home-space)*.6)}
.toy-box .tools button{min-height:calc(44px + var(--home-space)*.4)}
/* 横向きなど盤面幅が小さい時も、操作を木枠からはみ出させない。 */
@media(max-height:620px){
 .toy-box .menu-scene{height:auto;min-height:42px;padding:0}
 .toy-box .menu-scene canvas,.toy-box .toy-medallion,.toy-box .hero-ball{display:none}
 .toy-box h2{font-size:22px}
 .toy-box .entry strong{white-space:normal}
 .toy-box .challenge{padding-inline:8px}
 .toy-box .challenge h3{padding-right:0;font-size:20px}
 .toy-box .difficulty button{padding-inline:3px;font-size:13px}
 .toy-box .tools{flex-direction:column}
}
@media(max-width:350px){.toy-box{padding-inline:11px}.toy-box .entry{padding-inline:10px;gap:9px}.toy-box .entry strong{font-size:16px}.toy-box .entry small{font-size:11px}.toy-box .challenge{padding:12px}}
@media(prefers-reduced-motion:reduce){.toy-box button{transition:none}}

/* T-302: 見出しの小物と同じまとまりに、短いコルク壁の飾りを置く。 */
.menu-heading,.run-result-intro{display:flex;flex-direction:column;gap:6px;flex-shrink:0;min-width:0}
.toy-wall-divider{display:block;width:calc(100% - 20px);height:22px;align-self:center;pointer-events:none}
.run-result-intro{gap:8px}
.result-scene{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center;min-height:48px}
.result-scene canvas{display:block;width:48px;height:48px;justify-self:center;pointer-events:none}
.result-scene canvas[data-toy="goal"]{height:38px}
.run-stage-score{position:relative}
.run-result-menu .run-stage-score .best-badge{position:absolute;top:48px;right:30px;margin:0;padding:4px 8px;font-size:10px;line-height:1.2;white-space:nowrap;transform:rotate(20deg);transform-origin:top right}
.run-result-menu .run-score dt{font-weight:700}
.run-result-intro .lead{margin:0;font-size:14px;font-weight:700}
.run-result-top{display:flex;flex-direction:column;gap:16px;flex-shrink:0}
.run-result-menu #run-best{margin:0}
@media(max-height:720px){.run-result-menu{gap:6px}.run-result-top{gap:8px}}

/* T-306: 設定の操作を残して縦積みを減らし、補足だけを開閉する。 */
.settings-menu.toy-box{gap:5px}
.settings-menu .sound-button{font:700 12px var(--sans)}
.settings-menu .field{padding:7px 8px;gap:5px}
.settings-menu .seg{flex-direction:row;gap:6px}
.settings-menu .seg button{flex:1;min-width:0;padding-inline:5px;font-size:12px}
.settings-menu .field label b{font-size:16px}
.settings-menu .volume-field{grid-template-columns:80px minmax(0,1fr) 38px;gap:6px;align-items:center}
.settings-menu .volume-field label{font-size:12px;white-space:nowrap}
.settings-menu .volume-field input{min-width:0;width:100%;margin-inline:0}
.settings-menu .volume-field output{font-size:16px;text-align:right}
.settings-menu .note{line-height:1.55}
.settings-menu>#portrait-lock{flex:0 0 auto;min-height:44px}
.settings-device-notes{border-top:1px solid #d3bd99;color:#785b3d;font-size:11px}
.settings-device-notes summary{min-height:32px;line-height:32px;cursor:pointer}
.settings-device-notes[open] .note{margin:5px 0}