/* Casual-game home: shared English Wood Block Jam logo, painted blocks, and a compact level route. */
@font-face{font-family:WoodUI;src:url('ui/menu-bold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:block}
:root{--menu-font:WoodUI,"Arial Rounded MT Bold","Noto Sans",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
[hidden]{display:none!important}
#game{isolation:isolate;container-type:size;color:#fff2dc;font-family:var(--menu-font)}
button,select,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:1}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #2396d2;outline-offset:4px}
#home{position:absolute;inset:0;z-index:4;box-sizing:border-box;background:radial-gradient(ellipse at 50% 30%,#fffdf0 0%,#f8eedb 53%,#e9d8bc 100%);overflow:hidden;overflow:clip}
#home:before{content:"";position:absolute;inset:0;pointer-events:none;background:url('ui/wood.png') center/cover;opacity:.035;mix-blend-mode:multiply}
#home:after{content:"";position:absolute;width:110cqw;height:60cqw;left:-5cqw;bottom:-43cqw;border:1px solid #fff9e5;border-radius:50%;background:#e4cfa8;box-shadow:0 -14px 0 #f7e8cb88;pointer-events:none}
#home header{position:absolute;top:5%;left:9%;right:8%;display:flex;align-items:center;justify-content:space-between;z-index:3;height:11cqw;min-height:36px}
#life-pill{position:relative;display:flex;align-items:center;direction:ltr;justify-content:center;height:9.5cqw;min-height:32px;min-width:31cqw;box-sizing:border-box;padding:0 6cqw 0 9cqw;border:2px solid #e6cda7;border-radius:5cqw;color:#705235;background:#fff9e9;box-shadow:0 3px 0 #c8ac8066,inset 0 2px 0 #fffef9;font-size:clamp(11px,3.6cqw,18px);font-weight:800;font-variant-numeric:tabular-nums}
.life-heart{position:absolute;left:-3cqw;top:50%;transform:translateY(-50%);width:11.5cqw;height:11cqw;background:url('ui/heart.png') center/contain no-repeat;display:grid;place-items:center;font-size:clamp(18px,5.5cqw,28px);color:white;text-shadow:0 2px 0 #9d1d2b;-webkit-text-stroke:0}
.life-plus{position:absolute;right:-2.5cqw;top:50%;transform:translateY(-50%);width:7.5cqw;height:7.5cqw;background:url('ui/plus.png') center/contain no-repeat;filter:drop-shadow(0 2px 0 #5d862733)}
.round-button{display:grid;place-items:center;width:11cqw;height:11cqw;box-sizing:border-box;padding:0;border:0;background:transparent}
.round-button svg{width:100%;height:100%}
.home-brand{position:absolute;top:15%;left:8%;right:8%;height:33%;display:grid;place-items:center;z-index:2}
.home-brand:before{content:"";position:absolute;inset:-15% -15%;background:radial-gradient(ellipse,#ffedaa88,transparent 69%);pointer-events:none}
#home-logo{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;filter:drop-shadow(0 5px 2px #7d55352b)}
.home-spark{position:absolute;width:7cqw;height:7cqw;border-radius:23%;pointer-events:none;z-index:1;border:2px solid #fff9;box-shadow:inset 0 2px 0 #ffffff88,0 4px 0 var(--edge),0 7px 9px #8c623526}
.home-spark-blue{--edge:#2299bb;background:linear-gradient(145deg,#7ae9f4,#26c0dc);left:6%;top:43%;transform:rotate(-19deg)}
.home-spark-purple{--edge:#9f5ccd;background:linear-gradient(145deg,#d8a8ff,#b67ce4);right:5%;top:18%;transform:rotate(19deg);width:5cqw;height:5cqw}
.home-spark-coral{--edge:#d66a48;background:linear-gradient(145deg,#ffb68c,#f48c69);right:8%;top:48%;transform:rotate(14deg);width:4cqw;height:4cqw}
#level-path{position:absolute;top:52%;bottom:24%;left:2%;right:2%;z-index:2;direction:ltr}
.level-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.level-route path{fill:none;stroke:#cfb18b;stroke-width:4;stroke-dasharray:2 10;stroke-linecap:round;vector-effect:non-scaling-stroke}
.level-node{position:absolute;left:calc(50% + var(--step)*20%);top:64%;transform:translate(-50%,-50%);display:grid;place-items:center;box-sizing:border-box;width:14.5cqw;height:14.5cqw;border-radius:26%;border:2px solid #b5bfc9;background:linear-gradient(145deg,#f9fcff,#d9e1e7);color:#8393a2;box-shadow:inset 0 2px 0 #fff,0 5px 0 #a4afb8,0 7px 3px #9c81532b;font-size:5.2cqw;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #fff;-webkit-text-stroke:0}
.level-node[data-offset="-2"]{top:67%;transform:translate(-50%,-50%) rotate(-6deg)}
.level-node[data-offset="-1"]{top:30%;transform:translate(-50%,-50%) rotate(5deg)}
.level-node[data-offset="1"]{top:30%;transform:translate(-50%,-50%) rotate(5deg)}
.level-node[data-offset="2"]{top:50%;transform:translate(-50%,-50%) rotate(-5deg)}
.level-node.passed{color:#fffef0;background:linear-gradient(145deg,#b4e980,#70be4e);border-color:#4f913b;box-shadow:inset 0 2px 0 #e5ffc1,0 5px 0 #4c8b3a,0 7px 3px #9c81532b;text-shadow:0 2px 0 #4e8b39}
.level-node.passed:after{content:"";position:absolute;right:-1cqw;top:-2.3cqw;display:block;width:5cqw;height:5cqw;border-radius:50%;background:#fffbe7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l4 4L19 6' fill='none' stroke='%2355973b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/75% no-repeat;border:1.5px solid #68a448;box-shadow:0 2px 2px #6b8b3b26;text-shadow:none;-webkit-text-stroke:0;font-size:0;line-height:0}
.level-node.current{width:23cqw;height:23cqw;border:3px solid #b66b21;border-radius:28%;color:#fffdf1;background:linear-gradient(145deg,#ffe99a 0%,#ffcd4a 54%,#f5ae2f 100%);box-shadow:inset 0 3px 0 #fff4c7,inset 0 -3px 0 #ed9d2f,0 8px 0 #a65d23,0 11px 0 #c7ad8133,0 14px 20px #9e733335;font-size:8.4cqw;text-shadow:0 3px 0 #ac6027;-webkit-text-stroke:1px #a96127;paint-order:stroke fill;transform:translate(-50%,-50%) rotate(-4deg)}
.level-node.current span{transform:rotate(4deg)}
.home-bottom{position:absolute;bottom:9%;left:10%;right:10%;display:flex;justify-content:center;z-index:3}
.play-button{display:flex;align-items:center;justify-content:center;gap:3cqw;width:68cqw;height:16cqw;min-height:44px;max-height:76px;padding:0 5cqw;font-size:clamp(17px,5.5cqw,29px);line-height:1.1}
.play-label{min-width:0}.play-arrow{width:4cqw;min-width:13px;height:5cqw;max-height:24px;flex:none;filter:drop-shadow(0 2px 0 #3c861c)}
.play-button,#life-refill,#settings-home{box-sizing:border-box;border:3px solid #287c99;border-radius:4.2cqw;background:linear-gradient(#b9ed58 0%,#8dd131 20%,#77bf25 78%,#6db21e 100%);color:#fffef1;font-weight:800;font-family:var(--menu-font);text-shadow:0 2px 0 #44831e;-webkit-text-stroke:0;box-shadow:inset 0 2px 0 #e4ff9d,inset 0 -3px 0 #62a11c,0 6px 0 #25677d,0 10px 12px #755e3b24;transition:transform .12s,box-shadow .12s}
.play-button:not(:disabled):active,#life-refill:not(:disabled):active,#settings-home:not(:disabled):active{transform:translateY(4px);box-shadow:inset 0 2px 0 #e4ff9d,inset 0 -2px 0 #62a11c,0 2px 0 #25677d}
.play-button:disabled{border-color:#9aa99f;background:linear-gradient(#c9d1b9,#a5b395);box-shadow:inset 0 2px 0 #eef0e1,0 6px 0 #8a998f;color:#f9fbef;text-shadow:0 2px 0 #7e8d77}
#life-modal{position:absolute;inset:0;display:grid;place-items:center;background:#24151999;z-index:6}
.life-card{position:relative;width:86%;height:58%;box-sizing:border-box;background:url('ui/panel.png') center/100% 100% no-repeat;text-align:center;filter:drop-shadow(0 5px 4px #32180c77)}
.life-title{position:absolute;left:15%;right:15%;top:7%;font-size:7cqw;font-weight:900;color:#fff0d7;text-shadow:0 2px 0 #5f2c1c;-webkit-text-stroke:1px #5f2c1c;paint-order:stroke fill}
.close-button,#audio-close{display:grid;place-items:center;border:0;background:url('ui/close.png') center/contain no-repeat;color:transparent!important;position:absolute;width:9cqw;height:9cqw;right:4%;top:3%;padding:0!important;box-shadow:none!important}
#life-hearts{position:absolute;top:26%;left:10%;right:10%;display:flex;justify-content:center;gap:1cqw;direction:ltr}
#life-hearts .heart{display:block;width:11cqw;height:11cqw;background:url('ui/heart.png') center/contain no-repeat;color:transparent}
#life-hearts .empty{filter:grayscale(1) brightness(.8);opacity:1}
#life-timer{position:absolute;top:48%;left:10%;right:10%;font-size:4cqw;color:#fff4df;font-weight:800;text-shadow:0 2px 1px #6c3021;font-variant-numeric:tabular-nums}
#life-refill{position:absolute;top:65%;height:23%;left:18%;right:18%;width:64%;display:flex;align-items:center;justify-content:center;gap:2cqw;font-size:6cqw;padding:0 5%;border-radius:0}
#life-refill .heart{width:8cqw;height:8cqw;background:url('ui/heart.png') center/contain no-repeat;color:transparent}
.ad-glyph{display:inline-block;width:9cqw;height:9cqw;background:url('ui/ad.png') center/contain no-repeat;flex-shrink:0}
#toolbar{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;width:min(82vw,390px);height:min(84dvh,610px);box-sizing:border-box;padding:0;border:0;background:url('ui/panel.png') center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 5px 4px #32180c77);font:700 18px system-ui;color:#773a22}
.settings-heading{position:absolute;top:7%;left:0;width:100%;text-align:center;color:#fff0d7;font-size:27px;font-weight:900;text-shadow:0 2px 0 #5f2c1c;-webkit-text-stroke:1px #5f2c1c;paint-order:stroke fill}
#toolbar #audio-close{position:fixed;top:3%;right:4%;width:36px;height:36px;font-size:0}
.audio-functions{position:absolute;top:20%;left:12%;right:12%;height:23%;display:flex;flex-direction:column;justify-content:center;gap:15%}
.audio-functions button{position:relative;width:100%;text-align:start;padding:8px 80px 8px 30px;border:0;background:transparent;color:#74361d;font-size:19px;font-weight:900;box-shadow:none}
.audio-functions button:before{content:"♫";position:absolute;left:0;font-size:25px;top:4px;color:#773a22}
.audio-functions #sound:before{content:"♪"}
.audio-functions button:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:65px;height:31px;border-radius:20px;border:2px solid #8a492b;background:radial-gradient(circle at 17px 50%,#ffe9c2 0 12px,transparent 13px),#9f6146;box-shadow:inset 0 2px 3px #62351c77}
.audio-functions button[aria-pressed=true]:after{background:radial-gradient(circle at 48px 50%,#fff0c9 0 12px,transparent 13px),linear-gradient(#9bcd37,#69a31d)}
.language-section{position:absolute;top:51%;left:12%;right:12%;display:flex;flex-direction:column;gap:10px;color:#fff0d7}
.language-label{font-size:19px;text-shadow:0 2px 0 #5f2c1c}
#language{width:100%;box-sizing:border-box;padding:10px;border:2px solid #71361e;border-radius:10px;background:#f1c6a8;color:#733c24;font-size:16px;font-weight:700}
#toolbar small{font-size:12px;line-height:1.5;font-weight:500}
#settings-home{position:absolute;bottom:7%;left:15%;width:70%;height:15%;padding:0 9%;font-size:22px}
[dir=rtl] .audio-functions button{text-align:right;padding:8px 30px 8px 80px}[dir=rtl] .audio-functions button:before{right:0;left:auto}[dir=rtl] .audio-functions button:after{left:0;right:auto}
#preview{position:absolute;left:5px;bottom:4px;z-index:8;max-width:95%;padding:6px 8px;border-radius:8px;background:#152c39e8;color:white;font-size:clamp(10px,2.7cqw,14px)}#preview summary{cursor:pointer}#level-form{display:flex;gap:6px;align-items:center;margin-top:8px}#level-input{width:70px;padding:5px;border:1px solid #91bed1;border-radius:5px;font-size:16px}#level-form button{border:0;border-radius:5px;padding:6px 10px;background:#9ddaff;color:#163b50}#preview small{display:block;margin-top:6px}
@container(max-height:500px){.life-card{height:78%;width:75%}.life-title{font-size:6cqw}.life-card .close-button{width:7cqw;height:7cqw}#life-timer{font-size:3.5cqw}#home header{top:4%}.home-brand{top:15%;height:32%}#level-path{top:52%;bottom:24%}.home-bottom{bottom:9%}.level-node.current{font-size:8cqw}.play-button{font-size:clamp(14px,5cqw,22px);min-height:39px}.home-spark-blue{top:44%}}
@media(max-height:500px){#toolbar{width:245px;height:92dvh}.settings-heading{font-size:20px}.audio-functions{gap:3%}.audio-functions button{font-size:14px;padding-inline-end:60px}.audio-functions button:after{width:49px;height:25px;background-size:auto}.audio-functions button:before{font-size:19px}.audio-functions button[aria-pressed=true]:after{background:radial-gradient(circle at 36px 50%,#fff0c9 0 10px,transparent 11px),#7ab128}.language-section{top:50%;gap:4px}.language-label{font-size:13px}#language{padding:4px;font-size:13px}#toolbar small{font-size:9px}#settings-home{font-size:17px}#toolbar #audio-close{width:27px;height:27px}}

#settings-shade{position:fixed;inset:0;background:#24151999;z-index:19}
#life-refill .heart{font-size:0;-webkit-text-stroke:0;text-shadow:none}

#home-settings{border:0;border-radius:0;box-shadow:none;padding:0;background:url("ui/settings.png") center/contain no-repeat}
#home-settings{width:10cqw;height:12cqw}

/* Life-loss warning uses the reference's broken heart and the existing wood panel. */
#leave-modal{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#241519b3}
.leave-card{position:relative;width:88%;height:68%;box-sizing:border-box;background:url('ui/panel.png') center/100% 100% no-repeat;text-align:center;color:#fff3df;font-weight:800;text-shadow:0 2px 1px #713820}
#leave-title{position:absolute;top:6%;left:9%;width:82%;font-size:5.6cqw;line-height:1.15}
/* The painted panel has a light inset at 16–48%; keep the whole cost inside it. */
.leave-cost{position:absolute;top:18%;left:10%;width:80%;height:27%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqw;color:#74361d;text-shadow:none}
.leave-heart{display:flex;align-items:center;justify-content:center;direction:ltr;gap:3cqw;font-size:9cqw;font-weight:900;color:#fff3df;text-shadow:0 2px 1px #713820;-webkit-text-stroke:1px #7c261b;paint-order:stroke fill;flex-shrink:0}
.broken-heart{display:inline-block;width:16cqw;height:14cqw;background:url('ui/broken-heart.png') center/contain no-repeat}
#leave-message,#leave-remaining{margin:0;font-size:3.8cqw;line-height:1.35;overflow-wrap:break-word}
#leave-remaining{position:absolute;top:52%;left:9%;width:82%;font-size:3.5cqw}
.leave-actions{position:absolute;left:9%;bottom:6%;width:82%;height:29%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0}
.leave-actions button{box-sizing:border-box;flex-shrink:0;width:100%;height:59%;padding:0 5cqw;border:0;color:#fff9e5;background:url('ui/play.png') center/100% 100% no-repeat;font-size:4.4cqw;line-height:1.15;font-weight:900;text-shadow:0 2px 1px #416c11}
#leave-confirm{height:32%;width:75%;background:#80452a;border:2px solid #db9b66;border-radius:3cqw;font-size:3.8cqw}


/* Shared menu typography and button treatment. Gameplay uses the same settings icon. */
#toolbar{font-family:var(--menu-font)}
#home-settings{filter:drop-shadow(0 3px 0 #9e794b33)}
#life-refill,#settings-home{border:3px solid #287c99;border-radius:16px;background:linear-gradient(#b9ed58,#8dd131 20%,#77bf25 78%,#6db21e);box-shadow:inset 0 2px 0 #e4ff9d,inset 0 -3px 0 #62a11c,0 5px 0 #25677d;-webkit-text-stroke:0}
#life-refill{direction:ltr}#life-refill b{unicode-bidi:isolate}
.life-title,.settings-heading,#leave-title{font-family:var(--menu-font);font-weight:800;-webkit-text-stroke:0;text-shadow:0 2px 0 #6e3923}
.audio-functions button,.language-label{font-weight:800}
#language{font-family:var(--menu-font);font-weight:800}
.leave-actions button{font-family:var(--menu-font);font-weight:800}
@media(prefers-reduced-motion:reduce){.play-button,#life-refill,#settings-home{transition:none}}

/* Extend modal dimming beyond the portrait canvas, including safe-area and wide-screen gutters. */
#game[data-modal="life"]{box-shadow:0 0 0 100vmax #24151999}
#game[data-modal="leave"]{box-shadow:0 0 0 100vmax #241519b3}
#game[data-modal="settlement"]{box-shadow:0 0 0 100vmax #000000b2}