:root{--ink:#f1ead6;--muted:#abbaa9;--gold:#e2bd75;--blue:#2d6085;--panel:#142532;--panel2:#1b3040;--edge:#45616d;--green:#9acba2;--danger:#d89181}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0a151e;color:var(--ink);font:15px/1.55 Manrope,Arial,sans-serif}body{background:radial-gradient(circle at 65% -10%,#2a4b57 0%,#0a151e 48%)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #eac987;outline-offset:3px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 2.6vw;background:linear-gradient(90deg,#0b1925,#162d3a 55%,#0b1925);border-bottom:1px solid #52616a;box-shadow:0 8px 30px #0005}.brand{display:flex;align-items:center;gap:13px;color:#eed9a6}.brand-mark{font-size:44px;line-height:1;color:#d4ac64}.brand strong{font:700 27px/1 Playfair Display,Georgia,serif;letter-spacing:.13em}.brand small{display:block;color:#a9c0c3;font:500 10px/1.7 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase}.top-center{display:flex;gap:12px;align-items:center;color:#d8e3dc;font:600 14px Playfair Display,Georgia,serif;letter-spacing:.04em}.chapter,.eyebrow{font:800 10px/1.2 Manrope,sans-serif;letter-spacing:.19em;color:var(--gold)}.chapter{border:1px solid #ac8a56;border-radius:3px;padding:7px 9px}.top-actions{display:flex;gap:10px}.small-button,.icon-button,.plain-button{border:1px solid #63808c;background:#20394a;color:#e8e9dd;border-radius:8px;padding:9px 14px;font-weight:700}.icon-button{width:38px;height:38px;padding:0;font-size:21px}.small-button:hover,.icon-button:hover,.plain-button:hover{background:#2c5165}.layout{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:22px;padding:22px;max-width:1600px;margin:auto}.world-panel,.side-panel{min-width:0}.world-panel{background:linear-gradient(#1a3340,#152632);border:1px solid #60737b;border-radius:15px;box-shadow:0 22px 70px #0007;overflow:hidden}.world-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 15px}.world-heading h1{font:600 30px/1.1 Playfair Display,Georgia,serif;margin:5px 0 0}.region-badge{font-size:11px;border:1px solid #82a780;color:#c9e4ba;border-radius:20px;padding:6px 11px;background:#294537}.map-wrap{position:relative;margin:0 14px;border:4px solid #827453;border-radius:7px;overflow:hidden;background:#567052;box-shadow:0 0 0 1px #1b2e33,0 13px 25px #081016}canvas{display:block;width:100%;height:auto;aspect-ratio:20/13;cursor:crosshair}.map-hint{position:absolute;bottom:12px;left:12px;max-width:calc(100% - 24px);padding:7px 10px;background:#11232bdc;color:#e2e8d8;border:1px solid #89928677;border-radius:6px;font-size:11px;pointer-events:none}.world-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;color:#d0ded7;font-size:13px}.primary-button{border:1px solid #f0d39a;background:linear-gradient(#d8af69,#a77c3d);color:#182331;border-radius:8px;padding:10px 16px;font-weight:800;box-shadow:inset 0 1px #ffdfaa}.primary-button:hover{filter:brightness(1.1)}.primary-button span{font-size:11px;opacity:.7;margin-left:8px}.side-panel{display:flex;flex-direction:column;gap:15px}.hero-card,.objective-card,.tab-content{background:linear-gradient(145deg,#203846,#152835);border:1px solid #60717a;border-radius:12px;box-shadow:0 14px 35px #0003}.hero-card{display:flex;gap:14px;padding:16px}.portrait{width:94px;height:94px;flex:none;background:radial-gradient(circle,#ebd3a1,#8c784f 80%);border:3px solid #b89157;border-radius:10px;overflow:hidden}.portrait svg{width:100%;height:100%}.hero-info{flex:1;min-width:0}.hero-info h2{font:600 24px Playfair Display,Georgia,serif;margin:3px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meters>div:first-child{display:flex;justify-content:space-between;font-size:11px;color:#c9d1cb}.meter{height:8px;border-radius:8px;background:#3d3331;overflow:hidden;margin-top:4px}.meter i{display:block;height:100%;background:linear-gradient(90deg,#7ca871,#c3d98b);width:100%;transition:width .3s}.resources{display:flex;justify-content:space-between;font-size:10px;margin-top:9px;color:#deceb1}.objective-card{padding:16px 18px}.objective-card h3{font:600 19px Playfair Display,Georgia,serif;margin:7px 0 3px}.objective-card p{font-size:12px;color:#b9cdc7;margin:0}.tabs{display:flex;border-bottom:1px solid #64757a}.tab{flex:1;background:none;color:#a9b9b7;border:0;border-bottom:3px solid transparent;padding:10px 4px;font-size:12px;font-weight:800}.tab.active{color:#ecd09b;border-bottom-color:#e1b772}.tab-content{flex:1;min-height:228px;padding:16px 17px;overflow:auto;max-height:310px}.tab-content h4{margin:0 0 9px;font:600 17px Playfair Display,Georgia,serif}.tab-content p{font-size:12px;color:#bbccc6;margin:4px 0 11px}.quest-line,.knowledge-line,.item-line{padding:8px 0;border-bottom:1px solid #63717a55}.quest-line:last-child,.knowledge-line:last-child,.item-line:last-child{border:0}.quest-line b,.knowledge-line b,.item-line b{display:block;font-size:12px}.quest-line span,.knowledge-line span,.item-line span{display:block;font-size:11px;color:#a8bdb8;margin-top:3px}.quest-line.done b{color:#a5cf9d}.item-line{display:flex;justify-content:space-between;gap:8px;align-items:center}.item-line button{border:1px solid #b99c6d;color:#e7cf9e;background:#253e4a;border-radius:5px;padding:4px 7px;font-size:10px}.side-bottom{display:flex;gap:8px}.side-bottom button{flex:1;padding:8px 6px;font-size:10px}.danger{color:#dca59a;border-color:#875d59}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e6d4a9;color:#162534;border:1px solid white;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:800;box-shadow:0 12px 30px #0008;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:#08121cbd;display:grid;place-items:center;padding:18px;z-index:100;backdrop-filter:blur(4px)}.hidden{display:none!important}.modal{width:min(100%,540px);max-height:min(90vh,800px);overflow:auto;background:linear-gradient(155deg,#213c49,#122633);border:2px solid #c1a16b;border-radius:14px;box-shadow:0 30px 100px #000b;padding:23px 26px 25px}.modal-top{display:flex;justify-content:space-between;align-items:center}.close-button{border:0;background:none;color:#ebdfc3;font-size:30px;line-height:1}.modal h2{font:600 30px Playfair Display,Georgia,serif;margin:9px 0 13px;color:#f6e7c7}.modal p{margin:0 0 12px;color:#d4dfd7}.modal .quote{font:500 18px/1.5 Playfair Display,Georgia,serif;color:#f3dfb6;border-left:3px solid #d1a967;padding-left:14px;margin:12px 0 16px}.modal .note{color:#b8c9c3;font-size:13px}.modal-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.modal-actions button,.answer-submit{border:1px solid #cba968;border-radius:7px;background:#d6b477;color:#192a33;padding:9px 13px;font-weight:800}.modal-actions button.secondary{background:#2a4755;color:#e6e7d9;border-color:#8fa0a0}.modal-actions button:hover,.answer-submit:hover{filter:brightness(1.12)}.answer-box{margin:18px 0;padding:15px;background:#112733;border:1px solid #657b80;border-radius:9px}.expression{font:700 34px Playfair Display,Georgia,serif;color:#f1d594;margin-bottom:10px}.answer-row{display:flex;gap:8px}.answer-row input,.name-input{min-width:0;flex:1;background:#e9e1ce;border:2px solid #d5b985;color:#1c2b31;border-radius:7px;padding:10px 12px;font-size:22px;font-weight:800}.name-input{width:100%;font-size:17px}.feedback{font-size:13px;min-height:22px;color:#f0d28e;margin-top:8px}.inline-list{display:flex;gap:8px;flex-wrap:wrap}.pill{border:1px solid #6c8c89;border-radius:20px;padding:5px 9px;color:#d0e4dd;font-size:11px}.progress-dots{display:flex;gap:6px;margin-bottom:10px}.progress-dots i{width:11px;height:11px;border-radius:50%;background:#526b71;border:1px solid #a8a89a}.progress-dots i.done{background:#e2bb73}.lesson-step{background:#102936;border-radius:8px;padding:12px 14px;color:#e7e1ca;font-size:14px;margin:12px 0}.combat-stats{display:flex;justify-content:space-between;border:1px solid #64747a;padding:10px 12px;border-radius:8px;color:#e4d5bc;margin:12px 0}.keycap{font-size:11px;color:#b9c4c0}
@media(max-width:1050px){.layout{grid-template-columns:1fr}.side-panel{display:grid;grid-template-columns:1fr 1fr;align-content:start}.hero-card,.objective-card,.tabs,.tab-content,.side-bottom{min-width:0}.tabs,.tab-content,.side-bottom{grid-column:1/-1}.tab-content{max-height:none}.top-center{display:none}}@media(max-width:610px){.topbar{height:68px;padding:0 12px}.brand strong{font-size:19px}.brand-mark{font-size:31px}.brand small{font-size:8px}.small-button{display:none}.layout{padding:9px;gap:10px}.world-heading{padding:13px}.world-heading h1{font-size:24px}.region-badge{font-size:9px}.map-wrap{margin:0 7px}.map-hint{font-size:9px;padding:5px}.world-footer{padding:10px;font-size:11px}.primary-button{font-size:11px;padding:8px}.side-panel{display:flex}.hero-card{padding:11px}.objective-card{padding:11px}.modal{padding:17px}.modal h2{font-size:25px}}
.police-emblem{display:flex;align-items:center;gap:10px;color:#e0c68e;font:600 14px Playfair Display,Georgia,serif;margin:2px 0 13px}.police-emblem svg{width:48px;height:48px;flex:none}
.portrait{position:relative;background:radial-gradient(circle at 50% 36%,#ecdaac,#897751 82%)}
.portrait img{position:absolute;top:-2px;left:-19px;width:130px;height:auto;max-width:none;filter:drop-shadow(0 5px 4px #382a2980)}
.dialog-character{display:flex;align-items:flex-start;gap:13px;margin:6px 0 15px;padding:10px 10px 0;background:radial-gradient(circle at 17% 35%,#668b8b33,transparent 48%),linear-gradient(120deg,#132d3aaa,#1836404d);border:1px solid #8e9b7a69;border-radius:10px;overflow:hidden}
.dialog-character img{width:117px;height:152px;object-fit:contain;object-position:bottom;flex:none;align-self:flex-end;filter:drop-shadow(0 8px 7px #071521a6)}
.dialog-character>div{padding-top:8px}.dialog-character .quote{font-size:16px;margin:5px 0 12px}.dialog-character p{font-size:13px}
.dialog-character.welcome-art{min-height:125px}.dialog-character.welcome-art img{height:128px;width:116px}.dialog-character.welcome-art p{align-self:center}
.challenge-art{float:left;width:86px;height:102px;object-fit:contain;margin:-13px 13px 3px -3px;filter:drop-shadow(0 7px 5px #071521b0)}
@media(max-width:450px){.dialog-character img{width:94px;height:135px}.dialog-character .quote{font-size:15px}.dialog-character p{font-size:12px}}
.travel-guide{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 14px 12px;padding:11px 14px;background:linear-gradient(105deg,#203f49,#2d463f 70%,#203b42);border:1px solid #bd9d61;border-radius:9px;box-shadow:inset 0 1px #e4ca8d38,0 5px 13px #07141b66}
.travel-guide-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.travel-guide-copy strong{font:700 17px/1.2 Playfair Display,Georgia,serif;color:#fff0cb}.travel-guide-copy small{font-size:11px;color:#c4d4c4;line-height:1.3}
.guide-button{flex:none;border:1px solid #efcb8c;border-radius:7px;background:linear-gradient(#e3bf78,#b98748);color:#1c2c34;font-size:12px;font-weight:800;padding:9px 13px;box-shadow:inset 0 1px #ffe3ae}
.guide-button:hover{filter:brightness(1.1)}.guide-button:disabled{opacity:.55;cursor:default}
.combat-modal{width:min(100%,800px)}
.battle-scene{margin:13px 0 16px;border:1px solid #a99570;border-radius:12px;overflow:hidden;background:#263b40;box-shadow:inset 0 2px 22px #07151bcf}
.battle-status{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:12px 16px;background:#112936e8;color:#f6e8c8}
.battle-status-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:800}.battle-status-row span:last-child{font-variant-numeric:tabular-nums;color:#dbc58e}
.battle-meter{height:8px;margin-top:6px;border-radius:6px;background:#503e36;overflow:hidden}.battle-meter i{display:block;height:100%;background:linear-gradient(90deg,#6c9d74,#c1d58f)}.battle-status .foe-meter i{background:linear-gradient(90deg,#bd735c,#e0b274)}
.battle-art{position:relative;display:flex;align-items:flex-end;justify-content:space-between;height:300px;padding:9px 20px 0;background:radial-gradient(circle at 50% 65%,#b49d6b4d,transparent 54%),linear-gradient(170deg,#213e39,#3d5544 56%,#6e7050)}
.battle-scene.guardian .battle-art{background:radial-gradient(circle at 54% 48%,#7cc7d15a,transparent 43%),linear-gradient(150deg,#202c3b,#334451 55%,#5b5d64)}
.battle-art:before{content:"";position:absolute;inset:auto 0 0;height:33%;background:linear-gradient(transparent,#17262591)}
.battle-art img{position:relative;z-index:1;max-width:47%;max-height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 13px 9px #0b1723b7)}
.battle-art .battle-tiger{height:295px}.battle-art .battle-foe{height:280px}.battle-art .battle-wolf{max-width:53%;height:235px}
.battle-vs{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:1;color:#f5d486b5;font:700 30px Georgia,serif;text-shadow:0 0 15px #f6cf8ca3}
.battle-caption{padding:9px 16px;background:#142d35;color:#dddfd2;font-size:12px}
.quest-steps{margin:10px 0 0;padding-left:22px;color:#e6dfc9}.quest-steps li{padding:2px 0 7px;font-size:14px}.quest-steps li::marker{color:#e9c479;font-weight:800}
@media(max-width:610px){.travel-guide{margin:0 7px 9px;padding:9px 10px;gap:8px}.travel-guide-copy strong{font-size:14px}.travel-guide-copy small{font-size:10px}.guide-button{font-size:11px;padding:8px 9px}.map-wrap{height:min(48svh,440px)}.battle-art{height:205px;padding:6px 9px 0}.battle-art .battle-tiger{height:201px}.battle-art .battle-foe{height:200px}.battle-art .battle-wolf{height:174px}.battle-status{gap:8px;padding:9px}.battle-status-row{font-size:10px}.battle-vs{font-size:22px}.battle-caption{font-size:11px}}
.touch-controls{display:none}
@media(max-width:610px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  .topbar{height:calc(68px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
  .map-wrap{height:min(48svh,440px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .map-wrap canvas{width:1000px;height:650px;max-width:none;aspect-ratio:auto}
  .map-hint{display:none}
  .touch-controls{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:46px 46px;gap:4px;justify-content:center;margin:8px 0 4px;touch-action:manipulation}
  .touch-controls button{border:1px solid #c8ab72;border-radius:9px;background:#254b5e;color:#f6dfac;font-size:24px;font-weight:800;line-height:1;box-shadow:inset 0 1px #628597;touch-action:manipulation}
  .touch-controls button:active{background:#b99459;color:#142532}
  .move-up{grid-column:2;grid-row:1}.move-left{grid-column:1;grid-row:2}.move-down{grid-column:2;grid-row:2}.move-right{grid-column:3;grid-row:2}
  .modal{max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}