:root{--ink:#15352f;--cream:#fff8e8;--gold:#ffc84a;--teal:#24a98b;--coral:#ef775f;--glass:rgba(255,251,237,.92);--shadow:0 18px 45px rgba(7,35,31,.22)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#102f2b;color:var(--ink);font-family:"Trebuchet MS",ui-rounded,system-ui,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}button,a{font:inherit;-webkit-tap-highlight-color:transparent}.game-shell,#gameCanvas{position:fixed;inset:0;width:100%;height:100%}#gameCanvas{display:block;outline:none}
.topbar{position:fixed;z-index:20;top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:grid;grid-template-columns:48px minmax(0,430px) 1fr;gap:10px;align-items:start;pointer-events:none}.topbar>*{pointer-events:auto}.icon-button{width:46px;height:46px;border:1px solid rgba(21,53,47,.12);border-radius:15px;background:var(--glass);color:var(--ink);box-shadow:0 8px 24px rgba(7,35,31,.14);display:grid;place-items:center;text-decoration:none;font-size:20px;font-weight:900;cursor:pointer}.objective-ribbon{min-height:52px;padding:8px 42px 8px 16px;border:1px solid rgba(21,53,47,.11);border-radius:17px;background:var(--glass);color:var(--ink);box-shadow:0 8px 24px rgba(7,35,31,.14);text-align:left;position:relative;cursor:pointer}.objective-ribbon span,.objective-ribbon strong{display:block}.zone-label{font-size:10px;letter-spacing:.14em;color:#6e776e;font-weight:900}.objective-ribbon strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.objective-chevron{position:absolute;right:15px;top:16px;font-size:18px}.hud-actions{justify-self:end;display:flex;gap:8px}.light-counter{height:46px;min-width:88px;border-radius:15px;background:#173f37;color:white;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 8px 24px rgba(7,35,31,.22)}.light-counter>span{color:var(--gold);font-size:20px}.light-counter b{font-size:18px}.light-counter small{opacity:.65}.progress-wrap{position:fixed;z-index:18;top:calc(max(12px,env(safe-area-inset-top)) + 62px);left:84px;width:min(430px,calc(100vw - 190px));height:5px;background:rgba(255,255,255,.38);border-radius:8px;overflow:hidden}.progress-wrap span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#fff0a5);border-radius:inherit;transition:width .35s ease}
.status-rail{position:fixed;z-index:16;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;pointer-events:none}.heart-row,.combo-badge{background:rgba(18,51,44,.84);color:white;border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 24px rgba(7,35,31,.2);backdrop-filter:blur(8px)}.heart-row{display:flex;gap:4px;padding:9px 13px;border-radius:999px;color:#ff7a70;font-size:19px}.heart-row span.lost{color:#718077;transform:scale(.78)}.combo-badge{border-radius:999px;padding:9px 13px;font-size:11px;letter-spacing:.08em;color:#ffe49b}.combo-badge b{font-size:16px}
.context-prompt{position:fixed;z-index:25;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto auto;align-items:center;gap:10px;background:var(--glass);padding:8px 8px 8px 13px;border-radius:19px;box-shadow:var(--shadow);animation:promptIn .2s ease}.context-prompt>span:first-child{font-size:24px}.context-prompt span small,.context-prompt span b{display:block}.context-prompt span small{font-size:10px;color:#69766e}.context-prompt span b{font-size:14px}.context-prompt button{border:0;border-radius:13px;background:var(--gold);color:#4d3910;font-weight:900;min-width:80px;min-height:48px;cursor:pointer}.touch-guide{position:fixed;z-index:12;width:72px;height:72px;border:2px solid rgba(255,255,255,.5);border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .12s}.touch-guide.active{opacity:1}.touch-guide i{position:absolute;inset:14px;border-radius:50%;background:rgba(255,255,255,.22)}.touch-guide span{position:absolute;left:50%;top:5px;transform:translateX(-50%);color:white;font-size:12px}.toast{position:fixed;z-index:30;left:50%;bottom:92px;transform:translate(-50%,18px);max-width:min(90vw,500px);padding:12px 18px;border-radius:15px;background:#173f37;color:white;font-weight:700;text-align:center;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}.zone-card{position:fixed;z-index:18;left:50%;top:25%;transform:translate(-50%,-20px);text-align:center;color:white;text-shadow:0 2px 18px rgba(7,35,31,.65);opacity:0;pointer-events:none}.zone-card.show{animation:zoneReveal 2.5s ease}.zone-card small,.zone-card strong{display:block}.zone-card small{font-size:11px;letter-spacing:.22em}.zone-card strong{font-family:Georgia,serif;font-size:clamp(28px,5vw,48px)}
.screen-overlay{position:fixed;z-index:60;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(105deg,rgba(8,38,34,.88),rgba(8,38,34,.44));backdrop-filter:blur(5px)}[hidden]{display:none!important}.panel{width:min(540px,100%);padding:clamp(26px,5vw,48px);border:1px solid rgba(255,255,255,.28);border-radius:30px;background:rgba(255,249,232,.96);box-shadow:0 28px 75px rgba(3,26,23,.35)}.chapter{display:block;color:#b16036;font-size:11px;letter-spacing:.16em;font-weight:900}.panel h1,.panel h2{font-family:Georgia,serif;margin:10px 0 13px;line-height:.98;color:#143c34}.panel h1{font-size:clamp(40px,8vw,68px)}.panel h2{font-size:clamp(31px,6vw,48px)}.panel h1 em{color:#d56b45;font-weight:500}.panel p{font-size:16px;line-height:1.55;color:#52645b}.primary-button{width:100%;min-height:58px;margin-top:12px;padding:0 20px;border:0;border-radius:17px;background:linear-gradient(135deg,#f4b62d,#ffd86e);color:#46350e;display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:900;box-shadow:0 10px 28px rgba(198,132,24,.25);cursor:pointer}.primary-button:disabled{filter:grayscale(1);opacity:.65}.control-note{margin-top:17px;display:flex;flex-wrap:wrap;gap:5px 16px;color:#748078;font-size:11px}.compact-panel{max-width:460px;text-align:center}.setting-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.setting-row button,.text-button{min-height:48px;border:1px solid #d8d6c6;border-radius:13px;background:white;color:var(--ink);font-weight:800;cursor:pointer}.text-button{width:100%;margin-top:8px;background:transparent}.finish-panel{text-align:center}.final-stars{color:#eca820;font-size:42px;letter-spacing:8px;margin-top:8px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.result-grid span{padding:12px 5px;border-radius:15px;background:#edf4e8}.result-grid b,.result-grid small{display:block}.result-grid b{font-size:20px}.result-grid small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#728076}
.sheet{position:fixed;z-index:55;inset:0}.sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(4,27,24,.45)}.sheet-panel{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(620px,100%);padding:10px 20px max(20px,env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:#fffaf0;box-shadow:0 -22px 60px rgba(4,27,24,.25)}.sheet-handle{width:42px;height:5px;margin:0 auto 8px;border-radius:8px;background:#d4d5ca}.sheet-panel header{display:flex;align-items:center;justify-content:space-between}.sheet-panel header small{color:#b16036;font-size:10px;letter-spacing:.15em;font-weight:900}.sheet-panel h2{margin:2px 0;font-family:Georgia,serif;font-size:25px}.mission-list{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}.mission-list li{display:flex;gap:10px;align-items:center;min-height:64px;padding:10px;border-radius:14px;background:#f0eee4;color:#68746d}.mission-list i{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ddd9ca;font-style:normal;font-weight:900}.mission-list b,.mission-list small{display:block}.mission-list b{font-size:13px}.mission-list small{font-size:10px;margin-top:3px}.mission-list li.active{background:#fff0bd;color:#483b1b}.mission-list li.done{background:#dff1dd;color:#285945}.mission-list li.done i{background:#42a87d;color:white}.mission-list li.done i::after{content:'✓';font-style:normal}.mission-list li.done i{font-size:0}.mission-list li.done i::after{font-size:16px}
.respawn-flash{position:fixed;z-index:50;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(14,52,46,.82);color:white;opacity:0;pointer-events:none;transition:opacity .25s}.respawn-flash.show{opacity:1}.respawn-flash b{font-family:Georgia,serif;font-size:34px}.respawn-flash span{margin-top:7px}.rotate-notice{display:none;position:fixed;z-index:100;inset:0;background:#123a33;color:white;align-items:center;justify-content:center;gap:12px;font-weight:800;text-align:center;padding:30px}.rotate-notice span{font-size:32px}
@keyframes promptIn{from{opacity:0;transform:translateY(9px)}}@keyframes zoneReveal{0%,100%{opacity:0;transform:translate(-50%,-15px)}18%,72%{opacity:1;transform:translate(-50%,0)}}
@media(max-width:680px){.topbar{grid-template-columns:44px minmax(0,1fr) auto}.icon-button{width:44px;height:44px}.objective-ribbon{min-height:48px;padding-left:12px}.objective-ribbon strong{font-size:13px}.hud-actions .icon-button{width:40px}.light-counter{min-width:68px;height:44px}.light-counter b{font-size:16px}.progress-wrap{left:69px;top:calc(max(12px,env(safe-area-inset-top)) + 56px);width:calc(100vw - 154px)}.context-prompt{left:50%;right:auto;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));width:min(350px,calc(100vw - 30px));grid-template-columns:auto 1fr auto}.status-rail{bottom:max(82px,calc(env(safe-area-inset-bottom) + 78px))}.mission-list{grid-template-columns:1fr}.sheet-panel{max-height:76vh;overflow:auto}.panel{padding:27px 23px;border-radius:24px}.panel h1{font-size:42px}.control-note{display:grid;gap:3px}.toast{bottom:145px}.result-grid b{font-size:17px}.setting-row{grid-template-columns:1fr}}
@media(max-width:820px) and (orientation:portrait){.rotate-notice{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}