.person .hair{position:absolute;left:5px;top:-2px;width:24px;height:11px;background:var(--hair,#4a3c37);border-radius:60% 60% 30% 30%}.person .legs{position:absolute;left:9px;top:41px;width:5px;height:9px;background:#41434a;box-shadow:11px 0 0 #41434a}.npc-label{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);background:rgba(255,249,236,.9);border:2px solid rgba(64,55,50,.2);border-radius:999px;padding:2px 7px;font-size:9px;font-weight:900;white-space:nowrap;opacity:0;transition:.18s}.entity.near .npc-label{opacity:1}.entity.interactable:after{content:"!";position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#fff3bd;border:2px solid #4c423e;text-align:center;line-height:16px;font-weight:1000;animation:bob 1s infinite}.animal{font-size:34px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}.object-entity{font-size:34px}.player{z-index:10;pointer-events:none}.player .body{background:#d85f4c}.player .hair{background:#3b3331}.player .cap{position:absolute;left:3px;top:-4px;width:28px;height:9px;background:#e16e56;border:3px solid #453d3a;border-radius:60% 60% 20% 20%;z-index:2}.player.walking{animation:walk .23s infinite alternate}.friend .body{background:#526e91}.friend .hair{background:#302e31}
@keyframes walk{to{transform:translateY(-2px) rotate(1deg)}}@keyframes bob{50%{transform:translate(-50%,-4px)}}
.objective-card{position:absolute;z-index:24;left:14px;top:76px;background:rgba(46,42,50,.92);color:white;border-radius:14px;padding:9px 12px;box-shadow:0 5px 20px rgba(0,0,0,.2);max-width:230px;transition:.25s}.objective-kicker{display:block;font-size:9px;letter-spacing:.12em;opacity:.56;font-weight:900;margin-bottom:2px}.objective-card strong{font-size:12px}.objective-card.pulse{animation:objectivePulse .6s}@keyframes objectivePulse{50%{transform:scale(1.06)}}
.joystick-zone{position:absolute;left:0;right:0;bottom:0;height:39%;z-index:20;touch-action:none}.joystick-base{position:absolute;width:94px;height:94px;border-radius:50%;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.35);backdrop-filter:blur(2px);transform:translate(-50%,-50%);pointer-events:none}.joystick-knob{position:absolute;width:46px;height:46px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(45,42,50,.54);box-shadow:0 4px 10px rgba(0,0,0,.16)}.talk-btn{position:absolute;z-index:24;right:18px;bottom:max(24px,env(safe-area-inset-bottom));border:0;border-radius:50%;width:72px;height:72px;background:#fff6dc;border:4px solid #51463f;font-size:12px;font-weight:1000;box-shadow:0 7px 0 rgba(55,45,40,.28)}.talk-btn:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(55,45,40,.28)}
.hint{position:absolute;z-index:20;left:50%;bottom:28%;transform:translateX(-50%);background:rgba(45,42,50,.9);color:white;border-radius:999px;padding:8px 13px;font-size:11px;font-weight:900;white-space:nowrap}
.dialogue-layer,.panel-layer,.ending-layer{position:absolute;inset:0;z-index:60;background:rgba(31,27,31,.18)}.dialogue-layer{display:flex;align-items:flex-end;padding:0 12px max(18px,env(safe-area-inset-bottom));background:linear-gradient(transparent 55%,rgba(24,21,24,.35));cursor:pointer}.dialogue-box{position:relative;width:100%;min-height:150px;background:#fff9e9;border:4px solid #463d39;border-radius:19px;padding:24px 22px 20px 92px;box-shadow:0 8px 0 rgba(52,43,39,.28)}.dialogue-box p{font-size:17px;font-weight:800;line-height:1.7;margin:0;white-space:pre-line}.speaker{position:absolute;left:19px;top:-17px;background:#463d39;color:white;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:1000}.portrait{position:absolute;left:18px;top:34px;width:56px;height:56px;border-radius:14px;background:#f0d6ae;border:3px solid #51453f;display:grid;place-items:center;font-size:34px;overflow:hidden}.next-mark{position:absolute;right:18px;bottom:10px;font-size:11px;animation:bob2 .8s infinite}@keyframes bob2{50%{transform:translateY(3px)}}.choices{display:grid;gap:8px;margin-top:12px}.choices button{border:3px solid #4d433d;border-radius:12px;background:#fffdf5;padding:9px 10px;font-weight:900;text-align:left}
.battle-layer{position:absolute;inset:0;z-index:55;background:#26242d;color:white;padding:calc(max(18px,env(safe-area-inset-top)) + 22px) 20px 20px;display:flex;flex-direction:column;align-items:center;overflow:hidden}.battle-backdrop{position:absolute;inset:-20%;background:repeating-radial-gradient(circle at 50% 39%,#504967 0 18px,#423d56 20px 38px);animation:spinBg 12s linear infinite;opacity:.78}@keyframes spinBg{to{transform:rotate(360deg)}}.enemy-art,.battle-layer h2,.enemy-line,.battle-status,.battle-log,.battle-actions{position:relative;z-index:2}.enemy-art{margin-top:10vh;width:150px;height:150px;display:grid;place-items:center;font-size:100px;filter:drop-shadow(0 10px 0 rgba(0,0,0,.22));animation:enemyFloat 1.5s ease-in-out infinite}@keyframes enemyFloat{50%{transform:translateY(-8px) rotate(2deg)}}.battle-layer h2{margin:5px 0 4px;font-size:24px}.enemy-line{font-size:11px;opacity:.7;margin:0 0 12px}.battle-status{display:flex;gap:8px;width:100%;max-width:350px}.battle-status div{flex:1;border:2px solid rgba(255,255,255,.22);background:rgba(0,0,0,.18);border-radius:12px;padding:8px 10px}.battle-status span{display:block;font-size:9px;opacity:.6;font-weight:900}.battle-status strong{font-size:16px}.battle-log{width:100%;max-width:350px;min-height:62px;margin-top:10px;border-radius:12px;background:rgba(0,0,0,.28);padding:11px 12px;line-height:1.55;font-size:12px;font-weight:800}.battle-actions{margin-top:auto;width:100%;max-width:350px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:max(3px,env(safe-area-inset-bottom))}.battle-actions button{border:0;border-radius:12px;background:#fff6da;padding:14px 4px;font-weight:1000;box-shadow:0 5px 0 rgba(0,0,0,.3)}.battle-actions button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.panel-layer,.ending-layer{display:grid;place-items:center;padding:22px;background:rgba(33,28,32,.62);backdrop-filter:blur(4px)}.panel-card,.ending-card{position:relative;width:100%;max-width:390px;background:#fff9e9;border:4px solid #473e39;border-radius:22px;padding:24px;box-shadow:0 9px 0 rgba(0,0,0,.24)}.panel-card h2,.ending-card h2{margin:0 0 12px}.close-btn{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:#3a3436;color:white;font-size:20px}.bag-list{display:grid;gap:8px}.bag-item{display:flex;align-items:center;justify-content:space-between;border:2px solid #d8cbb8;border-radius:12px;padding:10px 12px;background:#fffdf7}.bag-item span{font-weight:900;font-size:13px}.bag-item small{opacity:.62}.ending-card{text-align:center}.ending-card h2{font-size:30px}.ending-card p{line-height:1.8;font-weight:700;font-size:14px}.ending-card .primary-btn{margin-top:12px}
@media (min-width:700px){#game{height:min(920px,100vh);top:50%;transform:translateY(-50%);border-radius:24px}.title-wrap{top:12%}}