:root{color:#fff2cf;background:#171225;font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif;font-synthesis:none;--ink: #20182e;--plum: #49304d;--paper: #fff2cf;--grass: #9edb55;--orange: #f3a34a;--sky: #77ddea;--coral: #ef6f65;--gold: #f2cf62;--panel: rgba(32, 24, 46, .93);--outline: rgba(255, 242, 207, .68);--touch-opacity: .78}*{box-sizing:border-box}html,body,#app,#game-shell{width:100%;height:100%;margin:0;overflow:hidden;background:#171225;overscroll-behavior:none}body{touch-action:none;user-select:none}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:4px solid var(--sky);outline-offset:4px}.hidden{display:none!important}#game-host{position:absolute;inset:0;display:grid;place-items:center;background:#171225}#game-host canvas{display:block;max-width:100%;max-height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.screen-panel{position:absolute;z-index:80;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;padding:max(28px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));text-align:center;background:linear-gradient(#17122573,#171225d1),url(../assets/game/bg-back.png) center / cover;image-rendering:pixelated}.title-card{width:min(920px,92vw);max-height:min(660px,92vh);display:grid;justify-items:center;gap:14px;overflow:auto;padding:clamp(22px,4vw,44px);border:4px solid var(--paper);outline:4px solid var(--plum);outline-offset:-12px;background:#20182eeb;box-shadow:0 14px #17122573}.screen-panel h1,.screen-panel h2,.pause-panel h2{margin:0;max-width:900px;color:var(--paper);font-family:Georgia,Songti SC,serif;font-size:clamp(44px,7vw,88px);line-height:.98;letter-spacing:-.04em;text-shadow:4px 4px 0 var(--plum)}.screen-panel h2,.pause-panel h2{font-size:clamp(32px,5vw,58px)}.screen-panel p{margin:0;color:#fff2cfcc}.story-copy{max-width:560px;line-height:1.8}.eyebrow,.hud-label{font-family:ui-monospace,Cascadia Mono,monospace;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.crest{width:74px;aspect-ratio:1;display:grid;place-items:center;border:4px solid var(--paper);color:var(--ink);background:var(--orange);box-shadow:8px 8px 0 var(--grass);font-size:34px;transform:rotate(-4deg)}.load-track,.bond-track{width:min(420px,70vw);height:12px;overflow:hidden;border:3px solid rgba(255,242,207,.72);background:#00000040}.load-track span,.bond-track span{display:block;width:0%;height:100%;background:var(--grass);transition:width .18s ease-out}.pet-preview{display:flex;align-items:end;justify-content:center;gap:clamp(28px,6vw,76px);min-height:92px;padding:8px 0}.pet-preview img{width:84px;height:82px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(6px 7px 0 rgba(23,18,37,.5))}.pet-preview img:first-child{width:82px}.pet-preview img:nth-child(2){width:90px;height:82px}.pet-preview img:last-child{width:98px;height:88px}.victory-pets{animation:victory-hop .8s steps(2,end) infinite alternate}@keyframes victory-hop{to{transform:translateY(-9px)}}.primary-button,.ghost-button,.icon-button{min-width:44px;min-height:44px;border:3px solid var(--paper);border-radius:0;color:var(--ink);background:var(--grass);box-shadow:5px 5px 0 var(--plum);font-weight:900;padding:12px 22px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.primary-button:hover,.ghost-button:hover,.icon-button:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--plum)}.ghost-button{color:var(--paper);background:transparent}.panel-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.control-grid{display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));gap:8px;width:min(740px,88vw)}.control-grid div{display:grid;gap:7px;padding:11px;border:2px solid rgba(255,242,207,.28);background:#ffffff0a}kbd{color:var(--gold);font-family:ui-monospace,Cascadia Mono,monospace;font-weight:900}.rotate-icon{width:96px;height:58px;border:5px solid var(--grass);animation:rotate-device 1.8s steps(3,end) infinite}@keyframes rotate-device{0%,30%{transform:rotate(90deg)}70%,to{transform:rotate(0)}}.hud{position:absolute;z-index:30;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;align-items:flex-start;gap:10px;pointer-events:none}.health-cluster,.bond-cluster,.objective-cluster{padding:9px 11px;border:3px solid var(--paper);color:var(--paper);background:var(--panel);box-shadow:4px 4px 0 var(--plum)}.objective-cluster{min-width:min(370px,34vw);max-width:460px;display:grid;gap:5px;border-color:var(--gold)}.objective-cluster strong{overflow:hidden;color:var(--paper);font-family:Georgia,Songti SC,serif;font-size:17px;text-overflow:ellipsis;white-space:nowrap}.objective-steps{display:flex;flex-wrap:wrap;gap:4px 10px;color:#fff2cf94;font-size:11px}.objective-steps span{display:inline-flex;align-items:center;gap:4px}.objective-steps span:before{width:8px;height:8px;content:"";border:2px solid currentColor;transform:rotate(45deg)}.objective-steps span.current{color:var(--gold);font-weight:900}.objective-steps span.complete{color:var(--grass);text-decoration:line-through;text-decoration-thickness:2px}.bond-cluster.pack-ready{border-color:var(--sky);box-shadow:4px 4px 0 var(--plum),inset 0 0 0 2px #77ddea59}.health-pips{display:flex;gap:4px;margin-top:6px}.health-pips span{width:21px;height:9px;background:var(--coral);box-shadow:inset 0 -3px #0003}.health-pips span.empty{background:#ffffff24}.bond-cluster .bond-track{width:138px;height:9px;margin-top:6px;border-width:2px}.bond-track span{background:var(--sky)}.icon-button{margin-left:auto;min-width:46px;pointer-events:auto;padding:9px;background:var(--gold)}.context-prompt{position:absolute;z-index:35;left:50%;bottom:calc(108px + env(safe-area-inset-bottom));transform:translate(-50%);max-width:min(700px,84vw);padding:10px 15px;border:3px solid var(--paper);color:var(--paper);background:var(--panel);box-shadow:5px 5px 0 var(--orange);font-weight:900;text-align:center}.context-prompt[data-hint-tier=cause]{box-shadow:5px 5px 0 var(--coral)}.context-prompt[data-hint-tier=explicit]{border-color:var(--gold);box-shadow:5px 5px 0 var(--sky)}.chapter-card{position:absolute;z-index:32;top:18%;left:max(24px,env(safe-area-inset-left));border-left:7px solid var(--grass);padding:10px 16px;color:var(--paper);background:var(--panel);font-family:Georgia,Songti SC,serif;font-size:clamp(22px,3vw,40px);text-shadow:3px 3px 0 var(--plum)}.pet-roster{position:absolute;z-index:40;right:max(16px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:7px}.pet-roster button{min-width:126px;min-height:64px;display:grid;grid-template-columns:48px 1fr;align-items:center;gap:8px;padding:5px 8px;border:3px solid rgba(255,242,207,.52);color:#fff2cfbd;background:var(--panel);text-align:left}.pet-roster b,.pet-roster small{display:block}.pet-roster small{margin-top:2px;font-size:10px}.pet-roster button[aria-pressed=true]{border-color:var(--paper);color:var(--ink);background:var(--grass);box-shadow:4px 4px 0 var(--plum)}.pet-portrait{width:48px;height:48px;display:block;background-position:center;background-repeat:no-repeat;background-size:contain;image-rendering:pixelated}.pet-portrait.swift{background-image:url(../assets/game/portrait-swift.png)}.pet-portrait.heavy{background-image:url(../assets/game/portrait-heavy.png)}.pet-portrait.glider{background-image:url(../assets/game/portrait-glider.png)}.touch-controls{position:absolute;z-index:38;inset:0;pointer-events:none}.touch-stick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:108px;height:108px;border:3px solid rgba(255,242,207,var(--touch-opacity));border-radius:50%;background:rgba(32,24,46,calc(var(--touch-opacity) * .75));pointer-events:auto;touch-action:none}.touch-stick span{position:absolute;left:30px;top:30px;width:42px;height:42px;border:3px solid var(--paper);border-radius:50%;background:rgba(158,219,85,var(--touch-opacity))}.action-pad{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(88px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,56px);gap:9px;pointer-events:auto}.action-pad button{min-width:56px;min-height:56px;border:3px solid rgba(255,242,207,var(--touch-opacity));border-radius:50%;color:var(--paper);background:rgba(32,24,46,calc(var(--touch-opacity) * .8));font-family:ui-monospace,Cascadia Mono,monospace;font-size:20px;font-weight:900}.action-pad button.is-down{color:var(--ink);background:rgba(158,219,85,var(--touch-opacity))}.pause-panel{position:absolute;z-index:90;top:50%;left:50%;width:min(440px,calc(100vw - 40px));display:grid;gap:14px;transform:translate(-50%,-50%);padding:28px;border:4px solid var(--paper);outline:4px solid var(--plum);outline-offset:-12px;color:var(--paper);background:var(--panel);box-shadow:12px 12px #1712258c}.pause-panel label{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:20px}.pause-panel input[type=range]{width:180px}.asset-credit{color:#fff2cfa3;font-size:12px;text-align:center}@media(max-width:820px),(max-height:520px){.screen-panel{gap:8px;padding:12px 18px}.title-card{gap:7px;padding:16px 22px}.screen-panel h1{font-size:clamp(32px,7vw,52px)}.story-copy{display:none}.pet-preview{min-height:62px;padding:0}.pet-preview img{height:58px}.control-grid{grid-template-columns:repeat(5,minmax(60px,1fr));gap:4px}.control-grid div{gap:3px;padding:5px;font-size:10px}.primary-button{min-height:38px;padding:8px 18px}.hud{top:max(7px,env(safe-area-inset-top));left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right));display:grid;grid-template-columns:auto auto 1fr;transform:none}.health-cluster,.bond-cluster{padding:5px 7px;transform:scale(.78);transform-origin:top left}.objective-cluster{min-width:0;max-width:calc(100vw - 220px);padding:6px 8px}.objective-cluster strong{font-size:12px}.objective-steps{flex-wrap:nowrap;overflow:hidden;font-size:9px}.icon-button{position:fixed;right:max(8px,env(safe-area-inset-right))}.context-prompt{bottom:calc(68px + env(safe-area-inset-bottom));padding:6px 10px;font-size:11px}.pet-roster{bottom:max(7px,env(safe-area-inset-bottom))}.pet-roster button{grid-template-columns:37px;min-width:48px;width:52px;min-height:48px;padding:3px}.pet-roster button>span:last-child{display:none}.pet-portrait{width:37px;height:37px}.touch-stick{width:86px;height:86px}.touch-stick span{left:23px;top:23px;width:35px;height:35px}.action-pad{bottom:max(57px,env(safe-area-inset-bottom));grid-template-columns:repeat(3,46px);gap:6px}.action-pad button{min-width:46px;min-height:46px;font-size:16px}}@media(max-width:480px)and (orientation:portrait){.title-card{width:calc(100vw - 36px);overflow-x:hidden;padding-inline:16px}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.control-grid div:last-child{grid-column:1 / -1}}@media(orientation:portrait)and (pointer:coarse){#orientation-panel:not(.hidden){display:grid!important}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}