/* M1.1 — visible city, world exploration and modal combat. Visual-first responsive layout. */
.silver-wallet{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;
 padding:7px 10px;border:1px solid #b7c0c4;background:#e9eff0;border-radius:9px;color:#35444a;
 font-size:11px;white-space:nowrap;box-shadow:inset 0 1px #fff}
.silver-wallet>span{font-size:17px;color:#b27a32;text-shadow:0 1px #fff}
.silver-wallet strong{font-size:14px;font-variant-numeric:tabular-nums;color:#1e3039}
.silver-wallet small{font-size:10px;color:#626f73}
.location-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 13px}
.location-heading h1{margin:3px 0 0;font:700 clamp(23px,2.8vw,36px) Cinzel,Georgia,serif;color:#29343a}
.location-heading small{font-size:11px;color:#657176}
.location-crumb{display:block;font:800 9px Inter,system-ui,sans-serif;letter-spacing:1.7px;color:#78868b}
.city-money{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border:1px solid #bdc5c7;border-radius:9px;
 background:#f6f8f8;color:#445157;font-size:12px;white-space:nowrap}
.city-money span{font-size:18px;color:#ad7e43}.city-money strong{font-size:17px;color:#303b40;font-variant-numeric:tabular-nums}
.city-panorama,.wilderness-panorama{position:relative;isolation:isolate;overflow:hidden;
 height:clamp(340px,55vh,560px);border:1px solid #7c8b92;border-radius:16px;background:#54626a;
 box-shadow:0 17px 35px #24323d32,inset 0 0 20px #1b2b3080}
.city-panorama-art,.wilderness-scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
 filter:grayscale(.25) saturate(.8) contrast(1.05)}
.city-panorama::after,.wilderness-panorama::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
 background:linear-gradient(180deg,#15232820,transparent 40%,#18252b94 100%);}
.city-mist,.wilderness-mist{position:absolute;z-index:1;pointer-events:none;inset:54% -20% -15%;
 background:radial-gradient(ellipse at 20% 70%,#f6f9f9b4,transparent 44%),
 radial-gradient(ellipse at 70% 80%,#e3ebec9e,transparent 43%);opacity:.47;animation:fog-glide 13s ease-in-out infinite alternate}
.city-sunbeams{position:absolute;z-index:1;inset:0;pointer-events:none;
 background:linear-gradient(107deg,transparent 26%,#ffffff19 41%,transparent 53%),
 linear-gradient(115deg,transparent 50%,#ffffff24 61%,transparent 69%);animation:light-breathe 8s ease-in-out infinite alternate}
.city-poi{position:absolute;z-index:5;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;
 padding:9px 12px;min-height:50px;max-width:195px;border:1px solid #d5e1e1b5;border-radius:11px;
 color:#f9fbfa;background:#213038d9;text-align:left;box-shadow:0 7px 22px #08131e88,inset 0 1px 0 #ffffff33;
 cursor:pointer;backdrop-filter:blur(7px);
 transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.city-poi:hover,.city-poi:focus-visible{transform:translate(-50%,-59%) scale(1.025);background:#384a53f0;
 border-color:#fff;box-shadow:0 9px 25px #0c1920b5,0 0 16px #e6f1f160}
.city-poi .poi-symbol{font-size:25px;line-height:1;min-width:26px;text-align:center;color:#e8eff0}
.city-poi strong,.city-poi small{display:block;white-space:nowrap}
.city-poi strong{font-size:12px;line-height:1.3}
.city-poi small{font-size:9px;color:#d2dcdf;margin-top:3px}
.poi-forge{left:17%;top:57%}
.poi-merchant{left:82%;top:72%}
.poi-teacher{left:90%;top:30%}
.poi-gate{left:50%;top:62%}
.city-scene-label,.world-scene-label{position:absolute;z-index:3;bottom:15px;left:17px;color:#f1f6f6;
 font:800 10px Inter,system-ui,sans-serif;letter-spacing:2px;text-shadow:0 2px 8px #111b21}
.location-paths{margin-top:20px}
.paths-heading{display:flex;align-items:center;gap:12px;color:#505d64;
 font:850 11px Inter,system-ui,sans-serif;letter-spacing:1px}
.location-separator{height:1px;flex:1;background:#bec8cd}
.path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:11px}
.path-choice{display:flex;align-items:center;text-align:left;gap:12px;min-width:0;
 min-height:83px;border:1px solid #b1bec3;border-radius:12px;padding:13px 14px;
 background:linear-gradient(135deg,#f8fafa,#e9eff0);box-shadow:0 6px 20px #26323918;color:#26343b;
 transition:transform .18s ease,border-color .18s ease,background .18s ease;cursor:pointer}
.path-choice:hover,.path-choice:focus-visible{transform:translateY(-2px);border-color:#687b85;background:#fff}
.path-symbol{font-size:32px;color:#485c66;flex:0 0 37px;text-align:center}
.path-choice>span:nth-child(2){flex:1;min-width:0}
.path-choice strong{display:block;font:700 14px Cinzel,Georgia,serif;line-height:1.3}
.path-choice small{display:block;font-size:10px;margin-top:5px;color:#728086;line-height:1.4}
.path-arrow{font-size:20px;flex:0 0 auto;color:#495a64}
.world-heading{margin-bottom:12px}
.world-back-button{padding:9px 14px;border-radius:9px;border:1px solid #627780;background:#303d45;color:white;
 font:700 12px Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.world-back-button:hover{background:#4b606b}
.wilderness-panorama{height:clamp(350px,62vh,620px)}
.wilderness-panorama[data-area="grove"] .wilderness-scene-art{filter:hue-rotate(16deg) saturate(.9) brightness(.86)}
.wilderness-panorama[data-area="ruins"] .wilderness-scene-art{filter:grayscale(.2) saturate(.75) brightness(.85)}
.world-mob{position:absolute;z-index:6;display:flex;align-items:center;flex-direction:column;gap:3px;
 background:transparent;color:#f8faf9;border:0;padding:7px;transform:translate(-50%,-50%);
 cursor:pointer;filter:drop-shadow(0 8px 10px #131c22c9);transition:transform .2s ease}
.world-mob:hover:not(:disabled),.world-mob:focus-visible{transform:translate(-50%,-56%) scale(1.08)}
.mob-position-1{left:29%;top:63%}
.mob-position-2{left:53%;top:55%}
.mob-position-3{left:76%;top:66%}
.mob-figure{position:relative;z-index:2;font-size:clamp(49px,7vw,95px);line-height:1;
 text-shadow:0 5px 5px #142227a0;animation:mob-breathe 3.9s ease-in-out infinite}
.mob-position-2 .mob-figure{animation-delay:1.2s}
.mob-position-3 .mob-figure{animation-delay:2.1s}
.mob-shade{position:absolute;left:8%;right:8%;height:19px;top:57%;background:#172b2a7d;border-radius:50%;filter:blur(6px)}
.mob-label{position:relative;z-index:2;display:block;min-width:126px;padding:6px 9px;text-align:center;
 border:1px solid #dce5e5aa;border-radius:7px;background:#203038d9;backdrop-filter:blur(6px)}
.mob-label strong,.mob-label small{display:block;line-height:1.4}
.mob-label strong{font-size:11px}.mob-label small{font-size:9px;color:#d4dedd}
.world-mob.mob-defeated{filter:grayscale(1);opacity:.33;cursor:default;pointer-events:none}
.world-bottom-bar{display:flex;justify-content:space-between;gap:10px;align-items:center;
 margin-top:11px;padding:12px 14px;background:#f4f7f7;border:1px solid #b9c4c7;border-radius:10px;color:#55636a}
.world-region-name{font-size:11px;font-weight:700}
@keyframes mob-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.game-modal-backdrop{position:fixed;inset:0;z-index:200;display:flex;justify-content:center;align-items:center;
 overflow:auto;overscroll-behavior:contain;padding:clamp(6px,1.6vw,18px);
 background:rgba(11,19,24,.84);backdrop-filter:blur(8px);animation:modal-open .24s ease-out both}
.battle-window,.service-window{position:relative;min-width:0;
 border:1px solid #9daeb2;border-radius:14px;background:#e8eeef;
 box-shadow:0 22px 70px #0009,0 0 0 1px #ffffff34;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
.battle-window{width:min(1120px,100%);padding:12px}
.battle-window-header{display:flex;align-items:center;justify-content:space-between;
 gap:16px;padding:0 1px 10px}
.battle-window-header>div{display:flex;align-items:center;gap:13px;min-width:0}
.battle-window-header strong{font:700 clamp(14px,1.8vw,20px) Cinzel,Georgia,serif;color:#2f3b40}
.battle-eyebrow{font:800 9px Inter,system-ui,sans-serif;letter-spacing:1px;color:#718087}
.world-modal-close{display:grid;place-items:center;flex:0 0 auto;width:37px;height:37px;
 border:1px solid #89979d;border-radius:9px;background:#29373f;color:#fff;font-size:24px;cursor:pointer}
.world-modal-close:hover{background:#52656d}
.battle-window .battle-page{gap:9px}
.battle-window .battle-frame{padding:9px}
.battle-window .battle-stage{min-height:260px}
.battle-window .combat-figure{height:clamp(125px,26vh,250px)}
.battle-window .combat-log{padding:10px 12px}
.service-window{width:min(880px,100%);padding:19px}
.service-window>.world-modal-close{position:sticky;z-index:10;top:0;float:right;margin-left:10px}
.service-body{overflow-y:auto;max-height:calc(100dvh - 75px)}
.service-intro{display:flex;align-items:center;gap:14px;margin:3px 44px 15px 0}
.service-symbol{display:grid;place-items:center;flex:0 0 65px;width:65px;height:65px;
 border:1px solid #b2bdc2;border-radius:12px;background:#dce4e7;color:#33444d;font-size:36px}
.service-intro h2{font:700 23px Cinzel,Georgia,serif;color:#253238;margin:0 0 5px}
.service-intro p{font-size:11px;line-height:1.5;color:#67757a;margin:0}
.service-window h3{font-size:12px;font-weight:850;letter-spacing:.5px;color:#526068;margin:16px 0 8px}
.service-balance{background:#d8e0e3;color:#364650;border-radius:9px;border:1px solid #b2c0c5;
 padding:9px 12px;font-size:12px}
.service-balance strong{font-size:18px;font-variant-numeric:tabular-nums}
.trade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.trade-item,.teacher-skill{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;
 background:#f6f8f8;border:1px solid #bac6c9;border-radius:9px}
.trade-item>div,.teacher-skill>div{min-width:0;flex:1}
.trade-item strong,.teacher-skill strong{display:block;font-size:12px;color:#293941;line-height:1.3}
.trade-item small,.teacher-skill small{display:block;font-size:10px;line-height:1.45;color:#748087;margin-top:4px}
.trade-icon{width:43px;height:43px;display:grid;place-items:center;flex:0 0 auto;
 background:#495861;border:1px solid #8c9aa2;border-radius:8px;font-size:25px;color:#fff}
.trade-icon.rarity-uncommon{border-color:#83bce0}.trade-icon.rarity-rare{border-color:#c19ce2}
.trade-button{flex:0 0 auto;padding:8px 10px;min-height:34px;border-radius:7px;border:1px solid #33434c;
 background:#2a3b43;color:#fff;font-weight:750;font-size:11px;cursor:pointer}
.trade-button:hover:not(:disabled){background:#516875}
.trade-button:disabled{opacity:.4;cursor:default}
.sell-grid{display:flex;flex-wrap:wrap;gap:8px}
.sell-chip{display:flex;align-items:center;gap:5px;min-height:37px;padding:7px 9px;
 border:1px solid #bdc8cc;border-radius:8px;background:#f7f9f9;color:#34454c;font-size:11px;cursor:pointer}
.sell-chip:hover{border-color:#58717b;background:#e8eff1}
.sell-chip small{color:#718087}.sell-chip strong{color:#688052;font-size:10px}
.teacher-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.teacher-branch{min-width:0}.teacher-branch h3{font-size:13px;margin:7px 0 9px}
.teacher-skill{align-items:flex-start;margin-bottom:7px;gap:5px;padding:8px}
.teacher-skill .skill-glyph{font-size:21px;color:#536b76}
.teacher-skill .trade-button{font-size:9px;padding:6px;min-height:30px}
@keyframes modal-open{from{opacity:0}to{opacity:1}}
@media(max-width:920px){
 .city-panorama{height:clamp(310px,59vh,500px)}
 .city-poi{padding:7px 9px;gap:4px;min-height:43px}
 .city-poi strong{font-size:11px}.city-poi small{font-size:8px}
 .path-choice{min-height:70px;padding:9px;gap:7px}.path-choice strong{font-size:12px}.path-choice small{font-size:9px}
 .path-symbol{font-size:25px;flex-basis:29px}
 .world-mob .mob-figure{font-size:clamp(45px,8vw,69px)}
 .battle-window{padding:7px}.battle-window-header{padding-bottom:5px}
 .battle-window .battle-stage{min-height:242px}
 .battle-window .combat-figure{height:clamp(120px,25vh,205px)}
 .service-window{padding:13px}.service-body{max-height:calc(100dvh - 42px)}
 .teacher-branches{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
 .location-heading{margin-bottom:7px}
 .location-heading h1{font-size:21px}
 .city-money{padding:5px 7px;font-size:10px}.city-money strong{font-size:14px}
 .silver-wallet{padding:5px 7px}.silver-wallet small{display:none}
 .city-panorama,.wilderness-panorama{height:clamp(265px,63vh,430px);border-radius:9px}
 .city-poi{padding:5px 6px;gap:4px;min-height:36px;border-radius:7px}
 .city-poi .poi-symbol{font-size:17px;min-width:19px}
 .city-poi strong{font-size:9px}.city-poi small{font-size:7px}
 .poi-forge{left:17%;top:59%}.poi-merchant{left:79%;top:75%}.poi-teacher{left:89%;top:29%}
 .location-paths{margin-top:10px}.path-grid{gap:6px;margin-top:7px}
 .path-choice{min-height:58px;padding:7px 5px;border-radius:7px}
 .path-choice strong{font-size:10px}.path-choice small{font-size:8px;line-height:1.2}
 .path-arrow{font-size:12px}.path-symbol{font-size:19px;flex-basis:20px}
 .location-crumb{font-size:7px}.paths-heading{font-size:9px}
 .mob-label{min-width:100px;padding:5px 6px}.mob-label strong{font-size:9px}.mob-label small{font-size:8px}
 .world-mob .mob-figure{font-size:51px}
 .world-scene-label{font-size:8px}
 .battle-window-header strong{font-size:12px}.battle-eyebrow{font-size:8px}
 .game-modal-backdrop{padding:5px}
 .battle-window .battle-frame{padding:5px}
 .battle-window .battle-stage{min-height:215px}
 .battle-window .combat-figure{height:130px}
 .trade-grid{gap:5px}.trade-item{padding:6px;gap:5px}.trade-icon{width:32px;height:32px;font-size:18px}
 .trade-item strong{font-size:10px}.trade-item small{font-size:9px}
 .trade-button{min-height:30px;font-size:10px;padding:5px 6px}
 .service-symbol{width:42px;height:42px;flex-basis:42px;font-size:25px}
 .service-intro h2{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 .city-mist,.city-sunbeams,.wilderness-mist,.mob-figure,.game-modal-backdrop{animation:none!important}
 .city-poi,.path-choice,.world-mob{transition:none!important}
}

/* Encounter backgrounds follow the actual scene under the modal. */
.battle-frame[data-scene="valley"]{background-image:linear-gradient(#222b2d66,#232b2e66),url('../assets/valley-scene.svg')}
.battle-frame[data-scene="grove"]{background-image:linear-gradient(#263a32a8,#263a32b5),url('../assets/valley-scene.svg')}
.battle-frame[data-scene="ruins"]{background-image:linear-gradient(#2029348c,#20293491),url('../assets/ruins-scene.svg')}