:root{color-scheme:dark;--bg:#10181d;--panel:#19272b;--line:#3a4b49;--cream:#e6e1c5;--gold:#e4bb67;--teal:#83b9a4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#293b39 0,#10181d 65%);color:var(--cream);font-family:ui-monospace,'SFMono-Regular',Consolas,'Noto Sans JP',monospace;min-height:100vh}.shell{width:min(1020px,94%);margin:auto}.masthead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:24px 0}.eyebrow,.label{font-size:10px;letter-spacing:.23em;color:var(--teal);font-weight:700}h1{font-size:clamp(22px,4vw,32px);letter-spacing:.12em;margin:7px 0}.subtitle{font-size:10px;letter-spacing:.2em;color:#8c9a91;margin:0}.subtitle span{color:var(--gold)}.header-mark{font-size:44px;color:var(--gold)}.intro{max-width:720px;margin:60px auto}.intro h2{font-size:clamp(27px,5vw,42px);line-height:1.5;letter-spacing:.08em}.intro>p:not(.eyebrow){line-height:2;color:#b3bfb3;font-size:14px}.primary{background:var(--gold);color:#17201e;border:0;padding:16px 22px;font-weight:bold;letter-spacing:.08em;min-width:240px;margin:20px 0;cursor:pointer}.primary span{float:right}.instructions,.ranking{border-top:1px solid var(--line);margin-top:35px;padding-top:22px;font-size:13px}.instructions p,.hint{color:#9faea4;line-height:1.8}.ranking h3{font-size:15px}.ranking small{color:var(--teal);letter-spacing:.15em;margin-left:12px}ol{padding:0;list-style:none}li{display:flex;justify-content:space-between;border-bottom:1px solid #2b3c39;padding:8px 0;color:#aebeb1}.statusbar{display:flex;justify-content:space-between;align-items:center;padding:24px 0}.statusbar strong{display:block;font-size:35px;line-height:1.2}.stars{font-size:14px;color:var(--gold);letter-spacing:.12em}.energy{text-align:right}.energy strong{display:inline-block;color:var(--gold);margin-left:15px;font-size:40px}.energy small{color:#acb8a8}.game-layout{display:grid;grid-template-columns:minmax(0,600px) minmax(200px,1fr);gap:36px}.board-frame{padding:10px;border:1px solid #566354;background:#101a1b;box-shadow:0 12px 40px #0005}.board{display:grid;grid-template-columns:repeat(10,1fr);aspect-ratio:1;background:#1b2927}.tile{position:relative;min-width:0}.wall{background:#354745;border:1px solid #263735;box-shadow:inset 0 2px #52635a,inset 0 -3px #263532}.floor{background:#202f2c;border:1px solid #263732}.floor:nth-child(3n){background:#23332f}.tile::before,.tile::after{position:absolute;inset:0;display:grid;place-items:center}.goal::before{content:'✧';font-size:clamp(20px,4vw,37px);color:#dfb963;text-shadow:0 0 10px #e9c275}.entrance::before{content:'≋';font-size:clamp(20px,4vw,32px);color:#76a492}.exit::before{content:'⬡';font-size:clamp(22px,4vw,40px);color:#a6eac9;text-shadow:0 0 12px #8fe6bc}.box::after{content:'♜';inset:12%;background:#8d8d76;border:2px solid #b4b09a;box-shadow:inset 0 -5px #666f62,0 3px 4px #0007;color:#333f38;font-size:clamp(18px,4vw,34px);line-height:1}.box.goal::after{background:#d0aa5e;border-color:#f0d28a}.player::after{content:'♟';inset:8%;color:#e5e1bd;text-shadow:0 3px #596d61,0 0 8px #d3e4c1;font-size:clamp(23px,5vw,43px);line-height:1}.message{min-height:42px;color:var(--gold);font-size:13px;line-height:1.6}.stats{border-top:1px solid var(--line)}.stats div{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.stats b{color:var(--gold)}.legend{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0;color:#aebbb0;font-size:11px}.legend span{display:flex;align-items:center;gap:5px}.icon{width:11px;height:11px;display:inline-block}.player-icon{background:#e5e1bd;border-radius:50%}.box-icon{background:#a5a38a}.goal-icon{border:1px solid var(--gold);transform:rotate(45deg)}.entrance-icon{background:#76a492}.exit-icon{background:#a6eac9}.controls{display:grid;grid-template-columns:repeat(3,54px);gap:6px;justify-content:center;margin:30px 0 20px}.controls .up{grid-column:2}.controls button{height:50px}.controls button:nth-child(2){grid-column:1}button:not(.primary){background:#283b38;border:1px solid #52645b;color:var(--cream);cursor:pointer;font:inherit}button:hover{filter:brightness(1.2)}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.actions{display:grid;gap:8px}.actions button{padding:12px;text-align:left;font-size:13px}.actions small{float:right;color:#9faea4}.hint{font-size:11px;margin-top:20px}.overlay{position:fixed;inset:0;background:#070e0ddd;display:grid;place-items:center;padding:20px}.overlay[hidden],[hidden]{display:none!important}.result-card{width:min(500px,100%);background:#1c2c2a;border:1px solid #667568;padding:35px;box-shadow:0 15px 60px #000}.result-card h2{color:var(--gold);letter-spacing:.12em}.result-card p{white-space:pre-line;line-height:2}footer{margin-top:50px;padding:20px 0;border-top:1px solid var(--line);color:#70837a;letter-spacing:.15em;font-size:9px}footer span{color:var(--gold);padding:0 8px}@media(max-width:700px){.masthead{padding:17px 0}.game-layout{grid-template-columns:1fr;gap:0}.statusbar{padding:15px 0}.statusbar strong{font-size:26px}.energy strong{font-size:31px}.board-frame{max-width:500px;margin:auto}.message{margin:8px 0;min-height:26px}.stats{display:flex}.stats div{flex:1;padding:10px}.legend{margin:12px 0}.controls{margin:12px 0}.actions{grid-template-columns:1fr 1fr}.intro{margin:35px auto}.hint{margin:10px 0}footer{margin-top:25px}}

/* 32px dungeon artwork */
.tile{background-position:center;background-size:100% 100%;image-rendering:pixelated}
.floor-tile{background-image:url('../assets-32px/floor.png')}
.wall-face{background-image:url('../assets-32px/wall.png')}
.ceiling-tile{background-image:url('../assets-32px/ceiling.png')}
.sprite{position:absolute;inset:0;background-position:center;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
.magic-sprite{background-image:url('../assets-32px/magic_circle.png')}
.stairs-sprite{background-image:url('../assets-32px/stairs.png')}
.statue-sprite{background-image:url('../assets-32px/statue.png')}
.hero-front{background-image:url('../assets-32px/hero_front.png')}
.hero-right{background-image:url('../assets-32px/hero_right.png')}
.hero-left{background-image:url('../assets-32px/hero_left.png')}
.hero-back{background-image:url('../assets-32px/hero_back.png')}
.entrance-sprite::after{content:'≋';position:absolute;inset:0;display:grid;place-items:center;color:#8adac0;font-size:clamp(20px,4vw,32px);text-shadow:0 0 5px #102c29}
.sparkle-sprite{background-image:url('../assets-32px/stairs_sparkle.png');animation:stair-glint 1s ease-out forwards}
@keyframes stair-glint{0%{opacity:0;transform:scale(.65)}25%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sparkle-sprite{animation:none;opacity:0}}
/* 32px dungeon sprites; each layer can be replaced independently. */
.tile{image-rendering:pixelated;background-size:100% 100%;background-repeat:no-repeat}
.wall{background-image:url('../assets-32px/wall.png');border:0;box-shadow:none}
.floor,.floor:nth-child(3n){background-color:#302c39;background-image:url('../assets-32px/floor.png');border:0}
.tile::before,.tile::after{background-size:100% 100%;background-position:center;background-repeat:no-repeat;image-rendering:pixelated}
.goal::before{content:'';background-image:url('../assets-32px/magic_circle.png');text-shadow:none}
.entrance:not(.goal)::before{content:'≋';font-size:clamp(20px,4vw,32px);color:#c8eddf;text-shadow:0 1px 3px #13151e}
.exit::before{content:'';background-image:url('../assets-32px/stairs.png');text-shadow:none}
.box::after,.box.goal::after{content:'';inset:0;background:transparent url('../assets-32px/statue.png') center/100% 100% no-repeat;border:0;box-shadow:none}
.player::after{content:'';inset:0;background:transparent url('../assets-32px/hero_front.png') center/100% 100% no-repeat;text-shadow:none}
.player[data-facing="back"]::after{background-image:url('../assets-32px/hero_back.png')}
.player[data-facing="right"]::after{background-image:url('../assets-32px/hero_right.png')}
.player[data-facing="left"]::after{background-image:url('../assets-32px/hero_left.png')}