/* Use system fonts so loading the game requires no external font service. */
:root{--ink:#17314a;--blue:#2379ff;--yellow:#ffd84d;--glass:#f9fcffdb}*{box-sizing:border-box}html,body,#game,#world{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Nunito,"Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:#78c8ff}button,a{font:inherit}canvas{display:block}.sun-glow{position:absolute;right:9vw;top:8vh;width:180px;height:180px;border-radius:50%;background:#fff9c7;box-shadow:0 0 90px 38px #fff7b888;pointer-events:none;mix-blend-mode:screen}.hidden{display:none!important}.topbar{position:absolute;z-index:5;left:28px;right:28px;top:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;align-items:center;gap:10px;color:white;font-weight:900;font-size:23px;text-shadow:0 2px 8px #24517388}.brand i{width:31px;height:31px;background:linear-gradient(135deg,#ffed72 0 50%,#36b86e 51%);border:3px solid white;border-radius:8px;transform:rotate(-8deg);box-shadow:0 4px 10px #24517355}.brand small{display:block;font-size:7px;letter-spacing:.25em}.status{position:absolute;left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:10px;background:#15344a8c;backdrop-filter:blur(8px);color:#def3ff;font-size:10px;letter-spacing:.08em;display:flex;gap:12px}.status b{color:#ffe966}.topbar button{pointer-events:auto;border:2px solid #fff9;background:#17354a88;color:white;border-radius:11px;width:42px;height:42px;font-weight:900;cursor:pointer}.topbar button:hover{background:#fff;color:var(--ink)}#crosshair{position:absolute;z-index:4;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 1px 1px #0008)}#crosshair i{position:absolute;background:white;border-radius:1px}#crosshair i:first-child{left:0;top:10px;width:22px;height:2px}#crosshair i:last-child{left:10px;top:0;width:2px;height:22px}#targetHint{position:absolute;z-index:5;left:50%;top:calc(50% + 28px);transform:translateX(-50%);color:white;font-size:10px;text-shadow:0 1px 3px #000;pointer-events:none}.tips{position:absolute;z-index:4;left:28px;bottom:30px;display:flex;gap:8px;flex-direction:column;color:white;font-size:10px;text-shadow:0 1px 3px #0008}.tips kbd{display:inline-grid;min-width:43px;place-items:center;padding:3px 6px;margin-right:5px;border:1px solid #fff8;border-radius:5px;background:#16374b99;font-family:inherit}.tips span:last-child kbd{min-width:82px}#hotbar{position:absolute;z-index:5;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:7px;padding:8px;border:1px solid #ffffff8a;border-radius:16px;background:#17384d9c;box-shadow:0 12px 30px #17384d44;backdrop-filter:blur(9px)}.slot{position:relative;width:58px;height:58px;border:2px solid #ffffff75;border-radius:11px;background:#eff9ffdd;display:grid;place-items:center;cursor:pointer;transition:.15s}.slot:hover{transform:translateY(-3px)}.slot.active{border-color:#fff;background:#fff;transform:translateY(-7px);box-shadow:0 8px 0 #ffd84d,0 12px 20px #0003}.slot i{width:29px;height:29px;border-radius:5px;box-shadow:inset -6px -6px #00000017,inset 5px 5px #ffffff38,0 4px 5px #0002}.slot b{position:absolute;left:5px;top:3px;color:#577188;font-size:9px}.slot span{position:absolute;bottom:2px;font-size:8px;font-weight:900}.screen{display:none;position:absolute;z-index:10;inset:0;background:linear-gradient(90deg,#e9f8ff 0 52%,#e9f8ff66 70%,transparent),linear-gradient(#78c8ff,#b9e9ff 60%,#87cc76 61%,#64a957);overflow:hidden}.screen.active{display:block}.screen nav{position:absolute;left:6vw;right:6vw;top:0;height:80px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #38627a24;font-size:10px;font-weight:900;letter-spacing:.12em}.screen nav a{text-decoration:none;color:var(--ink)}.hero{position:absolute;z-index:2;left:8vw;top:50%;width:600px;transform:translateY(-46%)}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.24em;color:#2381cf}.hero h1{font-size:clamp(62px,7.4vw,108px);line-height:.79;letter-spacing:-.07em;margin:24px 0;color:#17314a}.hero h1 em{font-style:normal;color:#2ca665;text-shadow:0 5px 0 #d4f19c}.intro{width:520px;color:#5c7485;font-size:14px;line-height:1.8}.actions{display:flex;align-items:center;gap:10px;margin-top:27px}.actions button,.panel button{border:0;border-radius:12px;background:var(--blue);color:white;padding:16px 19px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 #1358c7;transition:.15s}.actions button:first-child{width:300px;display:flex;justify-content:space-between}.actions button:hover,.panel button:hover{transform:translateY(-2px)}button.secondary{background:#fff;color:#315a72;box-shadow:0 5px 0 #c9dde7}.features{display:flex;width:610px;margin-top:44px;padding-top:20px;border-top:1px solid #52778a35}.features article{width:33%;display:grid;grid-template-columns:28px 1fr}.features article>b{grid-row:1/3;color:#27945f}.features strong{font-size:12px}.features span{color:#758c98;font-size:9px}.world-card{position:absolute;z-index:3;right:8vw;top:25vh;width:265px;padding:18px;border:1px solid #ffffffaa;border-radius:22px;background:#f9fcffe6;box-shadow:0 30px 80px #245c7955;transform:rotate(2deg)}.mini-island{height:185px;position:relative;border-radius:14px;background:linear-gradient(#82d0ff 0 62%,#b9e7ff 62%);overflow:hidden;margin-bottom:18px}.cube{position:absolute;width:82px;height:65px;background:#71bd55;transform:skewY(-20deg);box-shadow:inset 0 -25px #9b643e}.c1{left:35px;bottom:22px}.c2{left:105px;bottom:45px}.c3{left:70px;bottom:87px;width:90px}.tree{position:absolute;left:109px;bottom:101px;width:20px;height:50px;background:#87552f;box-shadow:0 -20px 0 18px #3c9e53,15px -18px 0 12px #55b968,-13px -22px 0 11px #68c573}.world-card>small{color:#7b929f;font-size:9px;letter-spacing:.14em}.world-card>strong{display:block;margin:5px 0 15px;font-size:20px}.world-card p{display:flex;justify-content:space-between;margin:0;padding:10px 0;border-top:1px solid #17314a12;font-size:10px;color:#79909d}.world-card p b{color:#294c60}.screen footer{position:absolute;left:6vw;right:6vw;bottom:22px;display:flex;justify-content:space-between;color:#4b7185;font-size:9px;font-weight:800;letter-spacing:.08em}.modal{background:#15314499;backdrop-filter:blur(10px)}.modal.active{display:grid;place-items:center}.panel{width:min(390px,90vw);padding:38px;border:1px solid #fff;border-radius:22px;background:#f6fbff;box-shadow:0 30px 90px #102c4088;text-align:center}.panel h2{font-size:38px;margin:8px 0 28px}.panel button{display:block;width:100%;margin:11px 0}.panel button.ghost{background:transparent;color:#577488;box-shadow:none;border:1px solid #bdd0da}.panel small{display:block;margin-top:20px;color:#8da0aa}#toast{position:absolute;z-index:30;left:50%;top:85px;transform:translate(-50%,-15px);padding:10px 18px;border-radius:9px;background:#17384ddd;color:white;font-size:11px;font-weight:800;opacity:0;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:850px){.world-card{display:none}.hero{left:7vw;width:86vw}.intro,.features{width:100%}.tips{display:none}.slot{width:47px;height:47px}.slot i{width:24px;height:24px}.status{display:none}}@media(max-width:560px){.features{display:none}.hero h1{font-size:62px}.actions{align-items:stretch;flex-direction:column}.actions button,.actions button:first-child{width:100%}.screen nav span,.screen footer span:last-child{display:none}#hotbar{bottom:18px;gap:3px;padding:5px}.slot{width:43px;height:46px}.topbar{left:14px;right:14px}.sun-glow{width:100px;height:100px}}
#mobileControls{display:none}
@media (pointer:coarse),(max-width:850px){
  #mobileControls{display:block;position:absolute;z-index:8;inset:0;pointer-events:none;touch-action:none}
  .joystick{position:absolute;left:max(24px,4vw);bottom:max(44px,7vh);width:clamp(150px,25vw,230px);height:clamp(150px,25vw,230px);border:4px solid #ffffffc7;border-radius:50%;background:#15394c66;box-shadow:inset 0 0 0 14px #ffffff18,0 10px 35px #0c263a55;backdrop-filter:blur(5px);pointer-events:auto;touch-action:none}
  .joystick:before,.joystick:after{content:"";position:absolute;left:50%;top:12%;bottom:12%;width:2px;background:#ffffff24}.joystick:after{left:12%;right:12%;top:50%;width:auto;height:2px}
  .joystick i{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border:4px solid white;border-radius:50%;background:#4eb8ffcc;box-shadow:0 8px 22px #12394d77}
  .joystick b{position:absolute;inset:40%;border-radius:50%;background:white}
  .mobile-actions{position:absolute;right:max(20px,3vw);bottom:max(38px,6vh);display:grid;grid-template-columns:repeat(2,clamp(82px,13vw,116px));gap:16px;align-items:end;pointer-events:auto}
  .mobile-actions button{height:clamp(82px,13vw,116px);border:4px solid #ffffffd9;border-radius:50%;background:#1b5d7dcc;color:white;box-shadow:inset 0 -9px #0c385199,0 10px 28px #0d283b66;display:grid;place-items:center;align-content:center;gap:1px;font-weight:900;touch-action:none}
  .mobile-actions button.jump{grid-column:2;grid-row:1;margin:0 0 8px 12px;background:#f6a62ddd;box-shadow:inset 0 -9px #c7751599,0 10px 28px #0d283b66}
  .mobile-actions button i{font-style:normal;font-size:34px;line-height:1}.mobile-actions button span{font-size:11px}
  .mobile-actions button:active{transform:translateY(5px);filter:brightness(.9)}
  .look-tip{position:absolute;right:5vw;bottom:calc(max(38px,6vh) + clamp(190px,29vw,260px));margin:0;color:white;font-size:10px;font-weight:900;text-shadow:0 2px 5px #123;opacity:.8}
  body #hotbar{bottom:12px;transform:translateX(-50%) scale(.86);transform-origin:bottom center}
}
@media (pointer:coarse) and (orientation:portrait){
  .joystick{width:min(42vw,210px);height:min(42vw,210px);bottom:70px}
  .mobile-actions{grid-template-columns:repeat(2,min(22vw,105px));bottom:70px;gap:10px}
  .mobile-actions button{height:min(22vw,105px)}
  .look-tip{bottom:285px}
  body #hotbar{top:86px;bottom:auto;width:max-content}
}