/* 秘密箱の世界：箱根の寄木細工の工房。胡桃色の作業机、明るい木・赤い木・黒い木を組んだ幾何学模様、蜜蝋の艶、金の鍵。
   庭（タイトル画面）も、秘密箱を選んでいる間はこの世界観になる。
   端末のダークモード用の指定より必ず優先させるため、:root を重ねて指定する。 */
:root:root[data-world="himitsu"]{--bg:#2b1a10;--bg-2:#160c06;--ink:#f6e7cf;--muted:#e0c8a6;--rule:rgba(246,231,207,.22);--focus:#f2c14e;--btn:#3d2617;--btn-ink:#f6e7cf;--gold:#e9c46a;color-scheme:dark}
html[data-world="himitsu"] body{background:repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px),repeating-linear-gradient(88deg,rgba(0,0,0,.08) 0 1px,transparent 1px 23px),radial-gradient(110% 80% at 50% 0%,#4a2d19 0%,var(--bg) 55%,var(--bg-2) 100%) fixed,var(--bg);font-family:'Kiwi Maru','Hiragino Mincho ProN',serif;color:var(--ink)}
html[data-world="himitsu"] body::before{opacity:0!important}
html[data-world="himitsu"] h1,html[data-world="himitsu"] h2{font-family:'Kiwi Maru',serif;font-weight:500;color:var(--ink)}
html[data-world="himitsu"] .garden-intro h1 span{color:var(--gold)}
html[data-world="himitsu"] .garden-mark{color:var(--gold)}
html[data-world="himitsu"] .eyebrow,html[data-world="himitsu"] .story-copy,html[data-world="himitsu"] .game-facts,html[data-world="himitsu"] .resume-note{color:var(--muted)}
html[data-world="himitsu"] .game-art{background:#20120a;border:1px solid rgba(233,196,106,.35);border-radius:8px}
html[data-world="himitsu"] .art-caption{color:#f3dcb2;letter-spacing:.2em}
html[data-world="himitsu"] .catalog-number{border-color:var(--gold);color:var(--gold)}
html[data-world="himitsu"] .play-game{background:linear-gradient(180deg,#e9c46a,#c99a3a);color:#2b1a10;border-radius:6px;box-shadow:0 3px 0 #7a5a1e}
html[data-world="himitsu"] .slide-dot[aria-current="true"]{color:var(--gold)}
html[data-world="himitsu"] .coach{border-color:rgba(233,196,106,.45);background:rgba(233,196,106,.1)}
html[data-world="himitsu"] .g-done{background:rgba(233,196,106,.1);border-color:rgba(233,196,106,.45)}
html[data-world="himitsu"] .g-seal{background:var(--gold);color:#2b1a10}
html[data-world="himitsu"] .g-btn.primary{background:var(--gold);color:#2b1a10;border-color:var(--gold)}
/* 箱 */
.hm-box{--pad:clamp(10px,3cqw,22px);box-sizing:border-box;width:min(100cqw,calc((100cqh - 2 * var(--pad)) * var(--ar,1) + 2 * var(--pad)));padding:var(--pad);border-radius:10px;position:relative;
  background:repeating-linear-gradient(45deg,#b07a45 0 8px,#e2c08d 8px 16px,#7a4a24 16px 24px,#d9a868 24px 32px);box-shadow:inset 0 0 0 3px #5c3518,inset 0 0 0 calc(var(--pad) - 3px) rgba(40,20,8,.28),0 24px 40px -20px #000}
#hm-board{position:relative;width:100%;aspect-ratio:var(--w)/var(--h);background:#2a170b;border-radius:3px;box-shadow:inset 0 3px 10px rgba(0,0,0,.7)}
#hm-board::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--w) - 1px),rgba(255,255,255,.04) calc(100%/var(--w) - 1px) calc(100%/var(--w))),repeating-linear-gradient(0deg,transparent 0 calc(100%/var(--h) - 1px),rgba(255,255,255,.04) calc(100%/var(--h) - 1px) calc(100%/var(--h)));pointer-events:none}
#hm-exit{position:absolute;right:calc(-1 * var(--pad));top:calc(100% * var(--gy) / var(--h));height:calc(100% * var(--gh) / var(--h));width:var(--pad);background:#160c06;box-shadow:inset 3px 0 6px rgba(0,0,0,.8)}
#hm-exit::after{content:"出口";position:absolute;right:2px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em;color:var(--gold)}
#hm-pieces{position:absolute;inset:0}
.hm-piece{container-type:size;writing-mode:horizontal-tb;display:grid;place-items:center;position:absolute;left:calc(100% * var(--x) / var(--w));top:calc(100% * var(--y) / var(--h));width:calc(100% * var(--pw) / var(--w));height:calc(100% * var(--ph) / var(--h));padding:0;margin:0;border:0;background:transparent;cursor:grab;touch-action:none;transition:left .16s cubic-bezier(.3,.9,.3,1),top .16s cubic-bezier(.3,.9,.3,1)}
.hm-piece::before{content:"";position:absolute;inset:3%;border-radius:6px;background:var(--wood);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.5)}
.hm-piece.p0{--wood:repeating-linear-gradient(60deg,#e2c08d 0 6px,#d1ab72 6px 12px)}
.hm-piece.p1{--wood:repeating-linear-gradient(-60deg,#b07a45 0 6px,#9c693a 6px 12px)}
.hm-piece.p2{--wood:repeating-linear-gradient(90deg,#7a4a24 0 5px,#6a3f1e 5px 10px)}
.hm-piece.p3{--wood:conic-gradient(from 45deg,#d9a868 0 25%,#b07a45 0 50%,#d9a868 0 75%,#b07a45 0) 0 0/18px 18px}
.hm-piece.p4{--wood:repeating-linear-gradient(30deg,#c8935a 0 7px,#a8743f 7px 14px)}
.hm-piece.key{--wood:radial-gradient(circle at 30% 25%,#fff3c4,transparent 40%),repeating-conic-gradient(from 0deg,#e9c46a 0 30deg,#d4a94c 30deg 60deg)}
.hm-piece.key span{position:relative;writing-mode:horizontal-tb;line-height:1;font-size:34cqmin;text-shadow:0 1px 0 rgba(255,255,255,.5);font-weight:700;color:#4a2e0c;font-family:'Kiwi Maru',serif}
.hm-piece:active{cursor:grabbing}
.hm-piece:focus-visible{outline:none}
.hm-piece:focus-visible::before{box-shadow:0 0 0 3px var(--focus),0 3px 6px rgba(0,0,0,.5)}
.hm-piece.guide::after{content:"";position:absolute;inset:0;border-radius:8px;border:3px solid #fff1c2;box-shadow:0 0 14px rgba(255,230,160,.9);animation:hm-guide 1.2s ease-in-out infinite;pointer-events:none}
@keyframes hm-guide{0%,100%{opacity:.4}50%{opacity:1}}
#hm-board.open .hm-piece.key{transition:left .8s ease-in,opacity .8s .3s;left:calc(100% * (var(--x) + 2) / var(--w));opacity:0}
.hm-main{grid-template-rows:minmax(0,1fr) auto!important}