@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--paper:#f7f5ee;--ink:#3f463b;--muted:#8b8d7d;--green:#74876b;--sage:#e7eadc;--line:#e3e3d6;--pink:#eac7b8;--coral:#c9866e;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}

*{box-sizing:border-box}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}
button{transition:background .18s,transform .18s,box-shadow .18s}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.app-shell{max-width:1560px;margin:0 auto;padding:0 52px}
.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-family:'Manrope',sans-serif;font-weight:800;font-size:27px;letter-spacing:-1.4px}
.brand-dot{color:#9caf8c}
.brand-mark{background:#8b9b7d;width:38px;height:43px;border-radius:13px 13px 16px 16px;display:grid;place-items:center;color:#fff5de}
.brand-mark svg{width:28px;height:28px}
.header-caption{font-size:10px;letter-spacing:2.4px;color:#969989}
.header-actions{display:flex;align-items:center;gap:21px}
.icon-button{display:grid;place-items:center;background:transparent;border:0;padding:7px;border-radius:50%;width:36px;height:36px}
.icon-button:hover{background:var(--sage)}
.icon-button svg{width:19px;height:19px}
.header-divider{height:18px;width:1px;background:var(--line)}
.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:none;padding:4px 0;font-size:11px;color:#79846f}
.text-button:hover{color:#435f43}
.text-button svg{width:13px;height:13px}
.help-mark{border:1px solid #a4a899;border-radius:50%;width:15px;height:15px;text-align:center;line-height:14px;font-size:10px}
.main-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(350px,1fr);gap:64px;padding:36px 0 30px}
.machine-section{min-width:0;display:flex;flex-direction:column}
.scene-heading{display:flex;justify-content:space-between;align-items:center;padding:0 6px}
.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:600;color:#9a9f89}
.live-badge{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:600;letter-spacing:1.4px;background:#eef0e3;padding:6px 9px;border-radius:30px;color:#798c6a}
.live-badge i,.status-dot{display:inline-block;width:5px;height:5px;background:#89a276;border-radius:50%}
.scene-wrap{position:relative;min-height:590px;flex:1;margin-top:12px;background:radial-gradient(ellipse at 50% 49%,#eeeade 0%,#f2f0e6 39%,#f7f5ee 71%);border-radius:28px;isolation:isolate}
.scene{position:absolute;inset:0 0 43px;z-index:1;touch-action:none}
.scene canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.scene canvas:active{cursor:grabbing}
.scene-watermark{position:absolute;left:8%;top:9%;font-family:'Manrope',sans-serif;font-size:clamp(48px,6vw,94px);line-height:1.06;letter-spacing:-6px;font-weight:800;color:#e8e6d9;z-index:0;pointer-events:none;user-select:none}
.view-controls{position:absolute;z-index:2;top:20px;right:0;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.view-controls button{border:1px solid transparent;background:#f7f5eebf;backdrop-filter:blur(8px);color:#929683;border-radius:7px;font-size:10px;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 10px}
.view-controls button svg{width:15px;height:15px}
.view-controls button.active{color:#657b56;background:#e7eadca8;border:1px solid #dbe1ce}
.view-controls button:hover{background:#e5e9db}
.scene-hint{position:absolute;bottom:13px;left:0;right:0;display:flex;gap:8px;justify-content:center;align-items:center;font-size:10px;color:#9a9e8a;z-index:2;pointer-events:none}
.hint-divider{height:10px;width:1px;background:#d4d7c5;margin:0 6px}
.mouse-icon{width:10px;height:14px;border:1px solid #a1a891;border-radius:5px;position:relative}
.mouse-icon:after{content:'';position:absolute;top:2px;left:4px;width:1px;height:4px;background:#a1a891}
.scene-bottom{border-top:1px solid var(--line);padding:20px 6px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tiny-label{font-family:'Manrope',sans-serif;font-size:8px;letter-spacing:1px;color:#9fa48f;font-weight:500}
.scene-bottom .tiny-label{display:block;margin-bottom:5px}
.scene-bottom strong{font-size:17px;font-weight:500}
.scene-bottom strong span{font-size:10px;color:#969985;margin-left:5px}
.stage-note{font-size:10px;line-height:1.9;color:#a2a48f}
.free-play{display:flex;flex-direction:column;text-align:center;font-size:7px;letter-spacing:1.2px;color:#939c82}
.free-play>span{font-family:serif;font-size:30px;line-height:1;margin-bottom:4px}
.play-panel{padding-top:8px;min-width:0;max-width:460px}
.edition{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1.4px;font-weight:600;color:#9c9f8b}
.edition-line{width:20px;height:1px;background:#99a289}
h1{position:relative;display:inline-block;margin:20px 0 13px;font-size:clamp(39px,3.8vw,53px);font-weight:500;letter-spacing:2px;line-height:1.34}
h1>span{color:#819371}
.sparkle{position:absolute;right:-63px;top:16px;width:36px;height:36px;stroke:#bea787;stroke-width:1.1}
.intro>p{font-size:11px;letter-spacing:.4px;color:#969c87;margin:0 0 27px}
.play-card{background:#ffffff87;border:1px solid #e1e3d3;border-radius:15px;padding:19px 21px 14px;box-shadow:0 6px 26px #77764e03}
.play-card-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:23px}
.play-card-heading>span:first-child{display:flex;align-items:center;gap:7px}
.play-card-heading strong{font-size:10px;font-weight:500}
.mono{font-family:monospace;font-size:9px;letter-spacing:1px;color:#9ca48d}
.status-dot.busy{background:#c59072;animation:pulse 1.2s infinite}
.control-body{display:flex;justify-content:space-between;gap:16px}
.control-label{font-size:10px;color:#858e77;display:flex;align-items:center;gap:7px;white-space:nowrap}
.control-label b{font-family:monospace;font-size:9px;color:#b2b69f;font-weight:400}
.move-control{display:flex;flex-direction:column;align-items:center;flex:1;min-width:160px}
.move-control>.control-label{align-self:flex-start}
.dpad{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,32px);gap:4px;margin:12px 0}
.dpad button{border:1px solid #e3e6d8;border-radius:8px;background:#f3f5eb;display:grid;place-items:center;color:#778c68;touch-action:none;user-select:none;-webkit-user-select:none}
.dpad button:hover{background:#e7ecdc}
.dpad button.pressed{background:#d4dfc7;border-color:#a8bb94;transform:translateY(1px);box-shadow:inset 0 2px 3px #67815319}
.dpad svg{height:15px;width:15px;stroke-width:1.7}
.dpad [data-direction=up]{grid-column:2;grid-row:1}
.dpad [data-direction=up] svg{transform:rotate(-90deg)}
.dpad [data-direction=left]{grid-column:1;grid-row:2}
.dpad [data-direction=left] svg{transform:rotate(180deg)}
.dpad [data-direction=right]{grid-column:3;grid-row:2}
.dpad [data-direction=down]{grid-column:2;grid-row:3}
.dpad [data-direction=down] svg{transform:rotate(90deg)}
.dpad-center{grid-column:2;grid-row:2;display:grid;place-items:center;color:#a6b699}
.dpad-center svg{width:22px;height:22px;opacity:.8}
.keyboard-hint{font-size:8px;color:#a2a68f;white-space:nowrap}
.keyboard-hint kbd{background:#eef1e3;border:1px solid #e1e5d4;font-family:inherit;padding:1px 3px;font-size:7px;border-radius:3px;margin-left:2px}
kbd{font-family:inherit}
.aim-control{display:flex;flex-direction:column;align-items:center;min-width:118px}
.aim-control .control-label{gap:10px}
.aim-map{position:relative;width:123px;height:107px;border:1px solid #dce1d0;border-radius:8px;background:linear-gradient(#d7ddcb30 1px,transparent 1px),linear-gradient(90deg,#d7ddcb30 1px,transparent 1px),#f1f3e9;background-size:16px 16px;margin:12px 0}
.map-back,.map-front{position:absolute;left:4px;font-size:7px;color:#b0b6a0}
.map-back{top:3px}
.map-front{bottom:3px}
.map-chute{position:absolute;left:4%;bottom:6%;width:15%;height:15%;border-radius:4px;background:#d2d9c4;border:1px solid #bfc9b2}
.map-dot{position:absolute;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #ffffffa6;box-shadow:0 1px 2px #00000015}
.map-crosshair{width:24px;height:24px;border:1px solid #6b8b62;border-radius:50%;position:absolute;transform:translate(-50%,-50%);transition:border-color .15s;pointer-events:none}
.map-crosshair:before,.map-crosshair:after{content:'';position:absolute;background:#6b8b62}
.map-crosshair:before{width:1px;height:32px;left:10.5px;top:-5px}
.map-crosshair:after{width:32px;height:1px;top:10.5px;left:-5px}
.map-crosshair.aligned{background:#86a47827;box-shadow:0 0 0 4px #8aaa7413}
.map-hint{font-size:8px;color:#a2a68f}
.grab-button{display:flex;align-items:center;justify-content:space-between;border:0;background:#829471;color:#fffdf4;border-radius:9px;width:100%;padding:15px 18px;margin-top:22px;box-shadow:0 3px 0 #667957;min-height:50px;font-size:13px;letter-spacing:1px}
.grab-button>span:first-child{display:flex;align-items:center;gap:11px}
.grab-button svg{width:22px;height:22px}
.grab-button kbd{border:1px solid #ffffff35;background:#ffffff0c;color:#e9eedf;border-radius:4px;font-size:8px;padding:5px 7px;letter-spacing:1px}
.grab-button:hover:not(:disabled){background:#768969;box-shadow:0 3px 0 #596d4c,0 4px 12px #667d4c20}
.grab-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #667957}
.play-tip{font-size:9px;color:#a1a58e;text-align:center;margin-top:14px;min-height:13px}
.collection-section{margin-top:24px}
.collection-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.collection-heading h2{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;margin:0}
.collection-heading h2>svg{width:15px;height:15px;color:#889776}
.collection-heading h2>span{display:grid;place-items:center;min-width:18px;height:18px;border-radius:5px;font-size:9px;color:#939b81;background:#eaedde;margin-left:2px}
.collection-heading>span{font-size:9px;color:#a2aa92}
.collection-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.collection-item{height:61px;border:1px dashed #d9dfcc;border-radius:8px;background:#eef0e440;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative}
.collection-item.captured{background:#fdfbf4;border:1px solid #dedecb;box-shadow:0 2px 8px #969a7210}
.collection-item svg{width:30px;height:34px;stroke:none;fill:#dce2d1}
.collection-item .toy-name{font-size:6px;color:#98a28a}
.collection-item:not(.captured) .toy-name{font-size:9px;line-height:6px;color:#b0b69f}
.collection-item .toy-quantity{position:absolute;right:3px;top:3px;font-size:7px;color:#7c8b70}
.collection-bottom{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:11px}
.collection-bottom>span{font-size:8px;color:#a4ab94}
.collection-bottom .text-button{font-size:9px;white-space:nowrap}
.panel-footer{display:flex;align-items:center;justify-content:center;gap:7px;font-size:7px;letter-spacing:1.25px;color:#adb49a;margin-top:25px}
.small-flower{width:15px;height:15px;color:#a4b18e}
.site-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:21px 0 23px;font-size:8px;letter-spacing:1.2px;color:#a3a991}
.site-footer>span:nth-child(2){font-size:9px;letter-spacing:.8px}
.loader{position:absolute;inset:0;z-index:5;background:#f4f2e7f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;border-radius:20px;text-align:center;padding:30px}
.loader strong{font-size:13px;font-weight:500}
.loader>span:last-of-type{font-size:11px;line-height:1.8;color:#929881}
.loader-ring{width:28px;height:28px;border:2px solid #e0e6d4;border-top-color:#8c9f78;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:8px}
.loader.failed .loader-ring{animation:none;border-color:#c99883}
.result-toast{position:absolute;top:16%;left:50%;transform:translateX(-50%);padding:13px 22px;border:1px solid #d8dfc8;background:#fffff3f0;backdrop-filter:blur(10px);border-radius:14px;z-index:4;text-align:center;min-width:230px;box-shadow:0 7px 35px #54613b10}
.result-toast strong{display:block;font-size:14px;font-weight:500;color:#6e835b}
.result-toast span{display:block;margin-top:5px;font-size:10px;color:#919980}
dialog{width:min(450px,calc(100% - 32px));border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:19px;padding:26px;box-shadow:0 25px 90px #26331830}
dialog::backdrop{background:#3e493c50;backdrop-filter:blur(4px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between}
.dialog-top .eyebrow{font-size:8px}
.dialog-top button{font-size:25px;font-weight:300}
dialog h2{font-size:21px;font-weight:500;margin:16px 0 25px}
dialog ol{padding-left:20px}
dialog li{font-size:12px;padding-left:6px;margin-bottom:18px;color:#768869}
dialog strong{font-weight:500;color:#5c6b50}
dialog p{font-size:11px;line-height:1.85;margin:7px 0 0;color:#929982}
.dialog-note{padding:12px;background:#ecefdf;border-radius:7px;font-size:10px;line-height:1.8;color:#929c83}
dialog .grab-button{margin-top:18px;font-size:12px}
.webgl-lost{position:absolute;inset:0;background:#f7f5eeee;z-index:8;display:grid;place-content:center;text-align:center;padding:30px;font-size:12px;line-height:2}

@keyframes pulse{50%{opacity:.3}
}
@keyframes spin{to{transform:rotate(360deg)}
}

@media(min-width:1450px){.main-grid{gap:85px;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);padding-top:44px}
.scene-wrap{min-height:650px}
.play-panel{padding-top:15px}
.play-card{padding:23px}
.intro>p{margin-bottom:32px}
.scene-watermark{top:7%}
}

@media(max-width:1150px){.app-shell{padding:0 30px}
.main-grid{gap:28px;grid-template-columns:minmax(0,1fr) minmax(330px,.9fr)}
.play-card{padding:17px 15px 14px}
.scene-wrap{min-height:600px}
.stage-note{display:none}
.header-caption{font-size:8px;letter-spacing:1.5px}
.scene-hint{font-size:8px;gap:5px}
.scene-hint .hint-divider,.scene-hint>span:last-child{display:none}
.collection-list{gap:4px}
.control-body{gap:8px}
.move-control{min-width:150px}
.aim-map{width:112px}
}

@media(max-width:800px){.app-shell{padding:0 22px}
.site-header{height:75px}
.header-caption{display:none}
.brand{font-size:24px}
.brand-mark{width:33px;height:37px}
.main-grid{grid-template-columns:1fr;gap:30px;padding-top:24px}
.machine-section{min-height:0}
.scene-wrap{min-height:510px}
.scene{inset:0 0 32px}
.scene-watermark{font-size:87px;left:12%;top:6%}
.view-controls{right:7px;top:12px}
.scene-bottom{padding-top:15px}
.stage-note{display:block}
.play-panel{max-width:none;padding:0 8px}
.intro{position:relative}
.intro h1{font-size:37px;line-height:1.3;margin:15px 0 9px}
.intro h1 br{display:none}
.intro .sparkle{right:-43px;width:27px;height:27px;top:9px}
.intro>p{margin-bottom:22px;font-size:10px}
.play-card{padding:20px}
.control-body{justify-content:center;gap:40px}
.move-control{flex:0 1 180px}
.aim-control{min-width:130px}
.aim-map{width:136px;height:114px}
.dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,35px)}
.collection-item{height:67px}
.collection-item .toy-name{font-size:8px}
.collection-item svg{width:33px;height:37px}
.panel-footer{margin:22px 0 4px}
.site-footer>span:last-child{display:none}
.site-footer{gap:12px;font-size:7px}
.site-footer>span:nth-child(2){font-size:8px}
.scene-hint .hint-divider,.scene-hint>span:last-child{display:block}
}

@media(max-width:420px){.app-shell{padding:0 16px}
.site-header{height:68px}
.header-actions{gap:12px}
.scene-wrap{min-height:445px;margin-top:3px}
.scene-watermark{font-size:71px;left:2%;top:13%;letter-spacing:-4px}
.scene-heading .eyebrow{font-size:8px}
.view-controls{right:-2px;top:10px}
.view-controls button{font-size:8px;padding:7px}
.scene-bottom{gap:5px}
.scene-bottom strong{font-size:15px}
.stage-note{font-size:8px}
.scene-bottom .tiny-label{font-size:7px}
.scene-bottom strong span{font-size:8px}
.play-panel{padding:0}
.intro h1{font-size:33px}
.intro .sparkle{right:-34px}
.control-body{gap:17px}
.aim-control{min-width:112px}
.aim-map{width:116px}
.play-card{padding:17px 14px}
.move-control{min-width:147px}
.control-label{font-size:9px}
.collection-list{gap:5px}
.collection-item{height:56px;border-radius:7px}
.collection-item svg{width:26px;height:28px}
.collection-item .toy-name{font-size:6px}
.collection-bottom>span{font-size:7px}
.scene-hint>span:last-child,.scene-hint .hint-divider{display:none}
.site-footer>span:nth-child(2){font-size:7px;letter-spacing:0}
.collection-heading h2{font-size:11px}
.play-card-heading strong{font-size:9px}
.mono{font-size:8px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}