@font-face{
font-family:system;
src:local("Microsoft YaHei")}
*{
box-sizing:border-box}
html,body{
margin:0;
width:100%;
height:100%;
overflow:hidden}
body{
font-family:system,"PingFang SC",sans-serif;
background:#242c2a;
background-image:radial-gradient(ellipse at 50% 45%,#465048 0,transparent 68%);
display:grid;
place-items:center;
color:#292c26;
touch-action:manipulation}
button{
font:inherit;
color:inherit;
cursor:pointer;
border:0;
-webkit-tap-highlight-color:transparent;
transition:transform .13s,background .13s}
button:active{
transform:scale(.94)}
button:focus-visible{
outline:3px solid #168778;
outline-offset:3px}
[hidden]{
display:none!important}
.shell{
width:min(100vw,calc(100dvh * .525),440px);
height:min(100dvh,838px);
background:#fbf3df;
position:relative;
overflow:hidden;
box-shadow:0 22px 100px #0007;
display:flex;
flex-direction:column;
padding:0 5%;
padding:0 clamp(12px,2.2vh,22px)}
.brand{
height:8%;
flex-shrink:0;
display:flex;
align-items:center;
gap:8px;
border-bottom:1px solid #35352d21;
font-size:11px;
font-weight:800;
letter-spacing:1px}
.brand small{
display:block;
font-size:7px;
letter-spacing:2px;
margin-top:3px;
color:#777a65}
.brand-mark{
background:#31382f;
color:#f9d371;
border-radius:9px;
width:29px;
height:29px;
font-size:24px;
text-align:center}
.icon{
width:36px;
height:36px;
min-width:32px;
background:#fff9eb;
border:1px solid #35352d24;
border-radius:11px;
font-size:19px}
.brand .icon{
margin-left:auto}
.screen{
flex:1;
min-height:0}
.home{
display:flex;
flex-direction:column;
text-align:center;
align-items:center;
padding-top:6%}
.eyebrow{
font-size:9px;
font-weight:800;
letter-spacing:1.5px;
color:#85816c}
h1{
font-size:clamp(34px,7.4vh,65px);
letter-spacing:-3px;
line-height:1.03;
margin:5% 0 2%;
font-weight:950;
transform:rotate(-3deg)}
h1>span{
display:block;
color:#de4f32}
.title-dot{
color:#2d352c}
.subtitle{
font-size:12px;
color:#827965;
margin:2% 0}
#heroArt{
width:100%;
flex:1;
min-height:0;
object-fit:contain}
.primary{
background:#e95335;
color:#fff7de;
border:2px solid #35352d;
border-radius:14px;
padding:13px 18px;
box-shadow:0 4px 0 #35352d;
font-weight:800;
width:100%;
display:flex;
justify-content:center;
gap:20px;
font-size:16px}
.text-button{
background:none;
font-size:12px;
padding:15px}
.home-foot{
width:100%;
display:flex;
justify-content:space-between;
font-size:8px;
color:#8c8672;
border-top:1px solid #35352d21;
padding:12px 0 17px}
.section-top{
display:flex;
align-items:center;
gap:15px;
margin:7% 0 3%}
h2{
margin:4px 0;
font-size:23px}
#progress{
font-size:11px;
color:#847961;
margin:4% 0 7%}
.level-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:clamp(5px,1.3vh,12px)}
.level-cell{
aspect-ratio:1;
border:1.5px solid #dcd3b8;
border-radius:13px;
background:#eee7d3;
position:relative;
font-size:20px;
color:#b6ac94}
.level-cell:not(:disabled){
background:#fffaf0;
border:2px solid #343c31;
color:#343c31;
box-shadow:0 3px 0 #343c31}
.level-cell.current{
background:#f6c760}
.level-cell.done{
background:#355c4c;
color:#fff4d6}
.level-cell small{
display:block;
font-size:7px;
margin-top:3px}
.legend{
display:flex;
justify-content:center;
gap:20px;
font-size:9px;
color:#847961;
margin-top:7%}
.game{
display:flex;
flex-direction:column}
.hud{
height:11%;
flex-shrink:0;
display:flex;
justify-content:space-between;
align-items:center;
text-align:center}
.hud small{
font-size:8px;
color:#8c8169;
letter-spacing:1px}
.hud h2{
font-size:16px}
.skip{
background:#e9533516;
color:#c65336;
padding:9px;
border-radius:8px;
font-size:10px;
font-weight:700}
.board-wrap{
position:relative;
flex:1;
min-height:0;
background:#eabf76;
border:2px solid #373a30;
border-radius:17px;
overflow:hidden}
#board{
width:100%;
height:100%;
display:block}
#pinControls{
position:absolute;
inset:0}
.pin-target{
position:absolute;
background:transparent;
border:0;
min-width:32px;
min-height:32px;
transform:translate(-50%,-50%);
border-radius:50%;
touch-action:none}
.pin-target:active{
transform:translate(-50%,-50%)}
.pin-target:focus-visible{
background:#ffffff77}
.objective{
display:flex;
gap:7px;
align-items:center;
height:8%;
font-size:10px;
line-height:1.5;
flex-shrink:0}
.status-dot{
width:6px;
height:6px;
border-radius:50%;
background:#d85d39;
flex-shrink:0}
.game-tools{
height:8%;
display:flex;
justify-content:space-between;
gap:7px;
padding-bottom:12px;
flex-shrink:0}
.game-tools button{
border:1px solid #d7cfb8;
background:#fff8e8;
border-radius:10px;
font-size:11px;
flex:1}
.overlay{
position:absolute;
inset:0;
background:#24322dcc;
backdrop-filter:blur(5px);
z-index:5;
display:grid;
place-items:center;
padding:25px}
.modal{
background:#fff5de;
border:2px solid #303b30;
border-radius:24px;
box-shadow:0 8px 0 #192a25;
padding:24px 20px;
width:100%;
text-align:center;
animation:pop .25s ease-out}
.modal-icon{
font-size:43px;
color:#c99a36;
margin:3px 0 10px}
.modal h2{
font-size:29px;
margin:10px 0}
.modal p{
font-size:12px;
line-height:1.9;
color:#85795f;
margin:12px 0 22px}
.modal button{
margin:7px 0}
.secondary{
width:100%;
padding:11px;
border:1px solid #cec5ae;
border-radius:10px;
background:#eee7d4;
font-size:12px}
.danger{
color:#b53d32}
#toast{
position:absolute;
bottom:12%;
left:8%;
right:8%;
background:#293b32;
color:#fff5de;
padding:12px;
text-align:center;
font-size:11px;
border-radius:10px;
opacity:0;
pointer-events:none;
z-index:10;
transition:opacity .2s}
#toast.show{
opacity:1}
@keyframes pop{
from{
transform:translateY(15px) scale(.94);
opacity:0}
to{
transform:none;
opacity:1}
}
@media(max-height:500px){
.shell{
width:min(100vw,calc(100dvh * .72))}
.brand{
height:7%}
.brand small{
display:none}
.home .eyebrow{
display:none}
h1{
font-size:28px}
.home{
padding-top:2%}
.home-foot{
padding:4px}
.primary{
padding:7px}
.text-button{
padding:7px}
.hud h2{
font-size:11px}
.icon{
width:28px;
height:28px;
font-size:14px}
.level-grid{
gap:4px}
.level-cell{
aspect-ratio:1.35;
font-size:12px}
.level-cell small{
font-size:6px}
.section-top{
margin:3% 0}
#progress{
margin:3% 0}
.legend{
margin-top:3%}
.game-tools{
padding-bottom:3px}
.objective{
font-size:8px}
.modal{
padding:12px}
.modal h2{
font-size:20px}
.modal p{
margin:6px}
.modal-icon{
font-size:24px}
}
@media(prefers-reduced-motion:reduce){
button,.modal{
animation:none;
transition:none}
}
.utility-bar{
display:flex;
gap:3px;
flex-shrink:0;
min-height:34px;
align-items:center;
padding:5px 0}
.utility-bar button{
flex:1;
font-size:9px;
white-space:nowrap;
background:#eee4ce;
border:1px solid #d7ceb5;
border-radius:7px;
padding:7px 2px}
.utility-bar button:disabled{
opacity:.35;
cursor:default}
.zoom-bar{
display:flex;
gap:4px;
min-height:33px;
padding-bottom:6px;
flex-shrink:0}
.zoom-bar button{
flex:1;
font-size:9px;
border:1px solid #d7ceb5;
border-radius:7px;
background:#efe6cf}
.zoom-bar button:nth-child(3){
background:#edcc79}
.game-tools{
height:7%;
padding-bottom:6px}
#pinControls{
touch-action:none}
.dark{
background:#111e1b}
.dark .shell{
background:#263c32;
color:#eee8cd}
.dark .brand{
border-color:#bcbf9233}
.dark .brand small,.dark .eyebrow,.dark .subtitle,.dark #progress,.dark .legend,.dark .hud small,.dark .home-foot{
color:#b0b598}
.dark .icon,.dark .utility-bar button,.dark .game-tools button,.dark .zoom-bar button{
background:#344b3c;
color:#eee6bf;
border-color:#647153}
.dark .zoom-bar button:nth-child(3){
background:#727448}
.dark .objective{
color:#e8dfbe}
.dark .board-wrap{
filter:brightness(.87) saturate(.85)}
.dark h1{
color:#f3e9c8}
.dark .modal{
color:#292c26}
.shell:fullscreen{
width:min(100vw,calc(100dvh * .525));
height:100dvh;
margin:auto}
.shell:fullscreen::backdrop{
background:#17251f}
.modal p{
white-space:pre-line}
@media(max-height:500px){
.utility-bar{
min-height:25px;
padding:2px 0}
.utility-bar button{
font-size:7px;
padding:4px 1px}
.zoom-bar{
min-height:23px}
.zoom-bar button{
font-size:7px}
}
/* Final responsive refinements: preserve scene proportions and larger hit targets. */
.brand{
min-height:38px}
.utility-bar{
min-height:38px}
.utility-bar button{
font-size:10px;
min-height:30px}
.zoom-bar{
min-height:36px}
.zoom-bar button{
font-size:10px;
min-height:29px}
#board,#pinControls{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)}
.board-wrap{
background:#e4b66d}
.pin-target{
min-width:40px;
min-height:40px}
.shell{
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px)}
@media(max-height:500px){
.brand{
min-height:34px}
.utility-bar{
min-height:28px}
.utility-bar button{
font-size:8px;
min-height:24px}
.zoom-bar{
min-height:28px}
.zoom-bar button{
font-size:8px;
min-height:24px}
.pin-target{
min-width:32px;
min-height:32px}
}
#runStats{display:block;font-size:8px;letter-spacing:.5px;color:#99896b;line-height:1.3}
.dark #runStats{color:#b0b598}
/* Keep all 24 level tiles in the available screen height. */
#levels{display:flex;flex-direction:column;padding-bottom:12px}
#levels .section-top{flex-shrink:0;margin:18px 0 10px}
#progress{flex-shrink:0;margin:0 0 18px}
.level-grid{flex:1;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr))}
.level-cell{aspect-ratio:auto;min-height:0;padding:4px}
.legend{flex-shrink:0;margin:16px 0 4px}
.lock-icon{display:inline-block;position:relative;width:15px;height:12px;border:2px solid currentColor;border-radius:3px;opacity:.7;margin-top:7px}
.lock-icon::before{content:"";position:absolute;left:2px;top:-9px;width:7px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0}
.lock-icon::after{content:"";position:absolute;left:5px;top:3px;width:2px;height:4px;background:currentColor;border-radius:2px}
@media(max-height:500px){#levels .section-top{margin:6px 0}#progress{font-size:9px;margin:0 0 8px}.legend{margin:8px 0 0}#levels{padding-bottom:7px}.lock-icon{transform:scale(.8)}}
/* Landscape uses the available width instead of shrinking the whole game. */
@media (max-height:500px) and (min-width:600px){
 .shell{width:min(100vw,900px);height:100dvh;display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:42px minmax(0,1fr);gap:6px 18px;padding:0 14px 8px}
 .brand{height:42px;min-height:0;font-size:11px}
 .utility-bar{height:42px;min-height:0;align-items:center;gap:4px}
 .utility-bar button{font-size:10px;min-height:30px}
 .screen{grid-column:1/-1;grid-row:2;min-height:0}
 .game{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1fr);grid-template-rows:54px minmax(50px,1fr) 42px 36px;gap:10px 22px;padding:0}
 .board-wrap{grid-column:1;grid-row:1/-1;width:100%;height:100%;min-height:0}
 .hud{grid-column:2;grid-row:1;margin:0;height:auto}
 .hud h2{font-size:17px}.hud small{font-size:10px}#runStats{font-size:10px}
 .objective{grid-column:2;grid-row:2;align-self:center;font-size:12px;line-height:1.8;margin:0;padding:12px;background:#ffffff50;border-radius:12px}
 .game-tools{grid-column:2;grid-row:3;gap:6px;margin:0;padding:0}
 .game-tools button{font-size:11px;min-height:38px}
 .zoom-bar{grid-column:2;grid-row:4;margin:0;gap:6px;height:36px}
 .zoom-bar button{font-size:10px;min-height:30px}
 #levels .level-grid{grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px}
 #levels .section-top{margin:0 0 5px}#levels #progress{margin:0 0 7px}.level-cell small{font-size:9px}
 .home{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:20px 90px 40px 40px 24px;gap:6px 20px;padding:8px 20px 0}
 .home .eyebrow{grid-column:1;grid-row:1}.home h1{grid-column:1;grid-row:2;font-size:43px;margin:0}.home .subtitle{grid-column:1;grid-row:3;margin:0;font-size:11px}
 #heroArt{grid-column:2;grid-row:1/4;height:100%;max-height:170px;width:100%;object-fit:contain}
 #start{grid-column:2;grid-row:4;width:100%;height:40px}#choose{grid-column:1;grid-row:4}.home-foot{grid-column:1/-1;grid-row:5}
}
/* Three HUD lines must remain inside their row at small portrait heights. */
.hud{min-height:60px;padding:6px 0}
.hud>div{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.hud h2{margin:0}
@media(max-height:500px) and (min-width:600px){.hud{min-height:0;padding:0}}